/* Shayeb Automation: shared design system.
   Layout idea: a working document. Ruled rows, a paper sheet for anything the user will send,
   and one recurring mark, the coverage strip, that shows which job requirements a resume meets. */
:root {
  --paper: #EEF2EF;
  --surface: #FFFFFF;
  --ink: #0F211C;
  --muted: #52635C;
  --line: #D2DAD5;
  --wash: #DFE9E3;
  --accent: #0B6A4E;
  --accent-ink: #FFFFFF;
  --signal: #F5A700;
  --signal-ink: #2A1C00;
  --signal-glow: rgba(245, 167, 0, 0.3);

  --met: #0B6A4E;
  --met-wash: #D6EBE1;
  --partial: #8A5A00;
  --partial-mark: #F5A700;
  --partial-wash: #FBEBC4;
  --missing: #A8402B;
  --missing-wash: #F6DDD6;

  --band: #0F211C;
  --band-ink: #EAF1ED;
  --band-muted: #A3B5AD;
  --band-line: #2C3F38;
  --band-field: #18302A;

  --sheet: #FFFFFF;
  --sheet-ink: #16211D;
  --sheet-muted: #4D5C56;
  --sheet-line: #D5DBD7;
  --shadow: 0 18px 40px -28px rgba(15, 33, 28, 0.55);
  --shadow-pop: 0 14px 36px -12px rgba(15, 33, 28, 0.35);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.75rem, 3.4vw, 2.5rem);
  --step-4: clamp(2.3rem, 5.4vw, 4rem);
  --radius: 4px;
  --radius-lg: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C1512; --surface: #141F1B; --ink: #E8F0EB; --muted: #9BAEA6;
    --line: #283630; --wash: #182621; --accent: #45D09B; --accent-ink: #04261A;
    --signal: #FFC247; --signal-ink: #2A1C00; --signal-glow: rgba(255, 194, 71, 0.28);
    --met: #5FDCAB; --met-wash: #173A2E; --partial: #FFC247; --partial-mark: #FFC247; --partial-wash: #3A2E12;
    --missing: #FF9A85; --missing-wash: #40211A;
    --band: #141F1B; --band-ink: #E8F0EB; --band-muted: #9BAEA6; --band-line: #2B3B34; --band-field: #0C1512;
    --sheet: #F3F6F4; --sheet-ink: #16211D; --sheet-muted: #4D5C56; --sheet-line: #CCD4CF;
    --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8); --shadow-pop: 0 14px 36px -10px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0C1512; --surface: #141F1B; --ink: #E8F0EB; --muted: #9BAEA6;
  --line: #283630; --wash: #182621; --accent: #45D09B; --accent-ink: #04261A;
  --signal: #FFC247; --signal-ink: #2A1C00; --signal-glow: rgba(255, 194, 71, 0.28);
  --met: #5FDCAB; --met-wash: #173A2E; --partial: #FFC247; --partial-mark: #FFC247; --partial-wash: #3A2E12;
  --missing: #FF9A85; --missing-wash: #40211A;
  --band: #141F1B; --band-ink: #E8F0EB; --band-muted: #9BAEA6; --band-line: #2B3B34; --band-field: #0C1512;
  --sheet: #F3F6F4; --sheet-ink: #16211D; --sheet-muted: #4D5C56; --sheet-line: #CCD4CF;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8); --shadow-pop: 0 14px 36px -10px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }
h2 { font-size: var(--step-3); font-weight: 750; font-stretch: 112%; line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 108%; line-height: 1.2; }

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.label {
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Brand */
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none;
  font: 800 1.0625rem/1 var(--font-display); font-stretch: 118%; letter-spacing: -0.01em; white-space: nowrap;
}
.brand svg { width: 1.9rem; height: 1.9rem; flex: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.25rem;
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--line); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 600; }
.btn--quiet:hover { border-color: var(--ink); box-shadow: none; transform: none; }
.btn--signal { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn--danger { background: transparent; color: var(--missing); border-color: var(--missing); }
.btn--sm { min-height: 2.5rem; padding: 0.4rem 0.85rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* Form fields */
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field > label, .field > .field__label { font-weight: 600; font-size: 0.9375rem; }
.field__hint { font-size: var(--step--1); color: var(--muted); }
.input, .field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="number"], .field textarea, .field select {
  width: 100%; padding: 0.7rem 0.8rem; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; min-width: 0;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1.05rem) 52%, calc(100% - 0.7rem) 52%; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; }
.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline-offset: 0; border-color: var(--ink); }
.field--error input, .field--error textarea { border-color: var(--missing); }
.form-error { color: var(--missing); font-size: 0.9375rem; min-height: 1.4rem; }

/* Chips and status */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; flex: none;
  padding: 0.15rem 0.55rem; border-radius: 99px; background: var(--wash); color: var(--muted);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.chip--met { background: var(--met-wash); color: var(--met); }
.chip--partial { background: var(--partial-wash); color: var(--partial); }
.chip--missing { background: var(--missing-wash); color: var(--missing); }
.chip--signal { background: var(--signal); color: var(--signal-ink); }
.word { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 99px; font-size: 0.9375rem; background: var(--surface); }
.word--missing { border-style: dashed; border-color: var(--missing); color: var(--missing); background: transparent; }

/* Coverage strip: one segment per job requirement */
.cov { display: flex; gap: 3px; height: 0.75rem; min-width: 0; }
.cov i { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--line); }
.cov i[data-s="met"] { background: var(--met); }
.cov i[data-s="partial"] { background: repeating-linear-gradient(135deg, var(--partial-mark) 0 4px, transparent 4px 7px); outline: 1.5px solid var(--partial-mark); outline-offset: -1.5px; }
.cov i[data-s="missing"] { background: transparent; outline: 1.5px dashed var(--missing); outline-offset: -1.5px; }
.cov--lg { height: 1.4rem; gap: 4px; }
.cov--lg i { border-radius: 3px; }
.cov-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.cov-legend b { color: var(--ink); font-weight: 500; }
.cov-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cov-legend .cov { display: flex; align-items: stretch; gap: 0; width: 0.8rem; height: 0.7rem; }

/* Tabs */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  padding: 0.7rem 0.85rem; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  background: none; color: var(--muted); font-weight: 600; font-size: 0.9375rem; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }
.tab .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line); flex: none; }
.tab .dot[data-s="ready"] { background: var(--met); }
.tab .dot[data-s="error"] { background: var(--missing); }
.tab .dot[data-s="loading"] { background: var(--signal); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; transform: scale(0.7); } }

/* Kit: shared section furniture */
.part { display: grid; gap: 1.5rem; min-width: 0; }
.part__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.part__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.part__lede { font-size: var(--step-1); line-height: 1.45; max-width: 46rem; }
.part h4 { font: 500 var(--step--1)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }

/* Match report */
.reqs { border-top: 2px solid var(--ink); }
.req { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.2rem 0.75rem; padding-block: 0.95rem; border-bottom: 1px solid var(--line); }
.req__mark { width: 1.1rem; height: 1.1rem; margin-top: 0.22rem; border-radius: 50%; }
.req__mark[data-s="met"] { background: var(--met); }
.req__mark[data-s="partial"] { background: linear-gradient(90deg, var(--partial-mark) 50%, transparent 50%); border: 2px solid var(--partial-mark); }
.req__mark[data-s="missing"] { border: 2px dashed var(--missing); }
.req__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.req__name { font-weight: 650; }
.req__body { grid-column: 2; display: grid; gap: 0.3rem; min-width: 0; }
.req__evidence { font-family: var(--font-mono); font-size: var(--step--1); line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.req__evidence::before { content: "In your resume: "; color: var(--met); }
.req__action { color: var(--ink); font-size: 0.9875rem; }
.wordset { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.25rem, 4vw, 3rem); }
.tips { display: grid; gap: 0.7rem; }
.tips li { display: grid; grid-template-columns: 0.9rem minmax(0, 1fr); gap: 0.7rem; }
.tips li::before { content: ""; width: 0.6rem; height: 0.6rem; margin-top: 0.5rem; background: var(--signal); border-radius: 1px; }
@media (max-width: 720px) { .two { grid-template-columns: minmax(0, 1fr); } }

/* The sheet: resume and letter previews. Stays paper-coloured in both themes. */
.sheet-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.sheet {
  background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-line); border-radius: 3px;
  padding: clamp(1.25rem, 4.5vw, 3rem); box-shadow: var(--shadow); min-width: 0;
  font-size: 0.9375rem; line-height: 1.5; color-scheme: light;
}
.sheet [contenteditable] { border-radius: 2px; outline: none; transition: background-color 0.12s ease; }
.sheet [contenteditable]:hover { background: rgba(245, 167, 0, 0.14); }
.sheet [contenteditable]:focus { background: rgba(245, 167, 0, 0.22); box-shadow: 0 0 0 3px rgba(245, 167, 0, 0.22); }
.rz { display: grid; gap: 1.1rem; }
.rz__name { font: 800 1.75rem/1.1 var(--font-display); font-stretch: 108%; letter-spacing: -0.01em; }
.rz__headline { font-weight: 600; margin-top: 0.2rem; }
.rz__contact { display: flex; flex-wrap: wrap; gap: 0.1rem 0.9rem; color: var(--sheet-muted); font-size: 0.875rem; margin-top: 0.35rem; overflow-wrap: anywhere; }
.rz__sec { display: grid; gap: 0.55rem; }
.rz__sec > h5 { margin: 0; padding-bottom: 0.25rem; border-bottom: 1.5px solid var(--sheet-ink); font: 700 0.8125rem/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.rz__role { display: grid; gap: 0.3rem; }
.rz__role + .rz__role { margin-top: 0.5rem; }
.rz__rolehead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.rz__rolehead b { font-weight: 700; }
.rz__rolehead span { color: var(--sheet-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.rz ul { display: grid; gap: 0.25rem; padding-left: 1.1rem; list-style: disc; }
.rz ul li::marker { color: var(--sheet-muted); }
.letter { display: grid; gap: 1rem; max-width: 40rem; }
.letter__sign { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.side { display: grid; gap: 1.25rem; min-width: 0; }
.side__box { display: grid; gap: 0.6rem; padding-top: 0.9rem; border-top: 2px solid var(--ink); }
.side__box ul { display: grid; gap: 0.6rem; font-size: 0.9375rem; }
.side__box li { display: grid; grid-template-columns: 0.8rem minmax(0, 1fr); gap: 0.5rem; }
.side__box li::before { content: ""; width: 0.5rem; height: 0.5rem; margin-top: 0.5rem; border-radius: 50%; background: var(--accent); }
.side__note { font-size: var(--step--1); color: var(--muted); }
@media (max-width: 900px) { .sheet-layout { grid-template-columns: minmax(0, 1fr); } }

/* Interview prep */
.qa { border-top: 2px solid var(--ink); }
.qa__item { display: grid; gap: 0.45rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.qa__q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem; }
.qa__q b { font: 700 var(--step-1)/1.3 var(--font-display); font-stretch: 105%; }
.qa__why { color: var(--muted); font-size: 0.9375rem; }
.qa__points { display: grid; gap: 0.3rem; padding-left: 1.1rem; list-style: disc; }
.qa__points li::marker { color: var(--accent); }
.asks { display: grid; gap: 0.5rem; padding-left: 1.3rem; list-style: decimal; }
.asks li::marker { font-family: var(--font-mono); color: var(--muted); font-size: var(--step--1); }

/* Outreach */
.msgs { display: grid; gap: 1.25rem; }
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.msg__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.msg__head b { font-weight: 650; }
.msg__meta { display: flex; align-items: center; gap: 0.75rem; }
.msg__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.msg__count[data-over="true"] { color: var(--missing); }
.msg__subject { padding: 0.7rem 1rem 0; font-weight: 600; }
.msg__subject::before { content: "Subject: "; font-weight: 400; color: var(--muted); }
.msg__body { padding: 0.8rem 1rem 1rem; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.msg__body[contenteditable]:focus, .msg__subject[contenteditable]:focus { background: var(--wash); outline: none; }

/* Rewrite box */
.rewrite { display: grid; gap: 0.7rem; padding: 1rem; background: var(--wash); border-radius: var(--radius-lg); }
.rewrite__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rewrite__chips button { padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 0.9375rem; cursor: pointer; }
.rewrite__chips button:hover { border-color: var(--ink); }
.rewrite__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rewrite__row input { flex: 1 1 14rem; min-width: 0; }

/* Loading and empty states */
.skel { display: grid; gap: 0.7rem; padding-block: 0.5rem; }
.skel i { display: block; height: 0.9rem; border-radius: 3px; background: linear-gradient(90deg, var(--wash) 0%, var(--line) 50%, var(--wash) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skel i:nth-child(3n + 1) { width: 92%; } .skel i:nth-child(3n + 2) { width: 78%; } .skel i:nth-child(3n) { width: 85%; }
.skel i.skel__title { height: 1.4rem; width: 45%; margin-bottom: 0.4rem; }
@keyframes shimmer { to { background-position: -200% 0; } }
.working { display: flex; align-items: center; gap: 0.7rem; color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice { display: grid; gap: 0.6rem; justify-items: start; padding: 1.25rem; border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.notice--error { border-color: var(--missing); }
.notice--error b { color: var(--missing); }

/* Toasts */
.toasts { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: grid; gap: 0.5rem; justify-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { padding: 0.65rem 1rem; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.9375rem; box-shadow: var(--shadow-pop); animation: rise 0.18s ease-out; }
.toast--error { background: var(--missing); color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Printing: only the sheet */
@media print {
  body.printing * { visibility: hidden !important; }
  body.printing .sheet, body.printing .sheet * { visibility: visible !important; }
  body.printing .sheet { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; box-shadow: none; padding: 0; font-size: 10.5pt; background: #fff; color: #000; }
  body.printing .sheet [contenteditable] { background: none !important; box-shadow: none !important; }
}