/* TailorATS — application styles on top of the Modernist design system.
   system.css owns tokens and generic components; this file owns the parts that
   are specific to what this product does. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

.num { font-variant-numeric: tabular-nums; }

/* ── Shell ───────────────────────────────────────────────────────────────── */

.shell { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6) 96px; }

.topbar {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-100);
  position: sticky; top: 0; z-index: 50;
  flex-wrap: wrap;
}

.brand {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 15px; letter-spacing: -0.02em; text-decoration: none;
  display: flex; align-items: center; gap: 1px;
}
.brand span:first-child { color: var(--color-text); }
.brand span:last-child {
  background: var(--color-accent); color: var(--color-neutral-100);
  padding: 1px 5px;
}

.topnav { display: flex; gap: var(--space-4); margin-left: var(--space-4); flex-wrap: wrap; }
.topnav a {
  text-decoration: none; padding: 4px 0; font-size: 13px;
  color: var(--color-neutral-700); border-bottom: 2px solid transparent;
}
.topnav a:hover { color: var(--color-text); }
.topnav a[aria-current] {
  color: var(--color-text); font-weight: 700;
  border-bottom-color: var(--color-accent);
}

.topbar-end {
  margin-left: auto; font-size: 12px; color: var(--color-neutral-600);
  display: flex; align-items: center; gap: var(--space-4);
}

/* ── Type ────────────────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.03em; }
h1 { font-size: 40px; line-height: 1.05; }
h2 { font-size: 22px; line-height: 1.15; }
h3 { font-size: 15px; line-height: 1.2; }

.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-neutral-600);
}
.lede { font-size: 16px; color: var(--color-neutral-800); max-width: 62ch; }
.muted { color: var(--color-neutral-600); }
.small { font-size: 12px; }

.page-head { padding: var(--space-8) 0 var(--space-6); }
.section { margin-top: var(--space-8); }
.section > h2 { margin-bottom: var(--space-3); }

/* ── Step rail ───────────────────────────────────────────────────────────── */

.steps {
  display: flex; gap: 0; margin: var(--space-4) 0 var(--space-6);
  border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100);
  overflow-x: auto;
}
.step {
  flex: 1 1 0; padding: 10px var(--space-3); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--color-neutral-500); white-space: nowrap;
  border-right: 1px solid var(--color-neutral-300);
}
.step:last-child { border-right: 0; }
.step .n { display: inline-block; width: 15px; color: var(--color-neutral-400); }
.step.done { color: var(--color-neutral-800); }
.step.done .n { color: var(--color-accent); }
.step.here { background: var(--color-text); color: var(--color-neutral-100); }
.step.here .n { color: var(--color-accent-400); }

/* ── Classification: one hue, three densities (treatment 1A) ─────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 7px; white-space: nowrap;
  border: 1px solid transparent;
}
.chip .conf { font-variant-numeric: tabular-nums; opacity: 0.75; letter-spacing: 0; }

.chip-direct   { background: var(--color-text); color: var(--color-neutral-100); }
.chip-adjacent { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.chip-gap      { background: transparent; color: var(--color-neutral-600);
                 border-color: var(--color-neutral-400); border-style: dashed; }

/* GAP is not an error. It is the product refusing to invent, so it is styled
   as quiet information — never red, never a warning icon. */

.rule-direct   { border-left: 6px solid var(--color-text); }
.rule-adjacent { border-left: 3px solid var(--color-neutral-500); }
.rule-gap      { border-left: 2px dotted var(--color-neutral-400); }

/* ── Stats ───────────────────────────────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
         background: var(--color-neutral-300); border: 1px solid var(--color-neutral-300); }
.stat { background: var(--color-neutral-100); padding: var(--space-4); }
.stat .v { font-family: var(--font-heading); font-weight: 800; font-size: 26px;
           letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
           color: var(--color-neutral-600); margin-top: 2px; }
.stat .sub { font-size: 11px; color: var(--color-neutral-500); margin-top: 4px; }

.headline-number {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}

/* ── Coverage bar ────────────────────────────────────────────────────────── */

.meter { height: 8px; background: var(--color-neutral-300); position: relative; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--color-accent);
             transition: width 700ms cubic-bezier(.2,.7,.2,1); }
.meter.thin { height: 4px; }

/* Projected headroom: what the score becomes if every evidenced move is taken.
   Hatched rather than solid so it reads as "not yet true" at a glance. */
.meter > u {
  position: absolute; top: 0; height: 100%; text-decoration: none;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--color-accent) 34%, transparent) 0 4px,
    transparent 4px 8px);
  transition: width 700ms cubic-bezier(.2,.7,.2,1);
}
/* The target line. */
.meter > b { position: absolute; top: -3px; width: 2px; height: 14px;
             background: var(--color-text); }

/* ── Uplift plan ─────────────────────────────────────────────────────────── */

.path { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.path li { counter-increment: step; border-bottom: 1px solid var(--color-neutral-300); }
.path li:last-child { border-bottom: 0; }
.path-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; text-decoration: none; color: var(--color-text);
}
.path-row:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.path-row::before {
  content: counter(step); font-size: 10px; width: 18px; flex: none;
  color: var(--color-neutral-600); text-align: right;
}
.pts { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 52px; flex: none; }

.opps { border: 1px solid var(--color-neutral-300); }
.opp { border-bottom: 1px solid var(--color-neutral-300); }
.opp:last-child { border-bottom: 0; }
.opp > summary {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none;
}
.opp > summary::-webkit-details-marker { display: none; }
.opp > summary:hover { background: var(--color-neutral-100); }
.opp[open] > summary { background: var(--color-neutral-100); }
.opp-body { padding: 0 var(--space-4) var(--space-4); }
/* A left edge that says, before the text does, whether this is yours to claim. */
.opp-proven   { border-left: 3px solid var(--color-accent); }
.opp-adjacent { border-left: 3px solid var(--color-accent-2-500); }
.opp-unbacked { border-left: 3px solid var(--color-neutral-400); }
.opp-unbacked > summary { opacity: 0.78; }

/* The inline answer box. Sits under the item it is about, because the previous
   design linked away to a page that often did not contain the item at all. */
.ask {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--color-neutral-400);
}
.ask .answer { width: 100%; margin-top: var(--space-2); }
.ask .answer-foot { display: flex; align-items: center; gap: var(--space-2);
                    margin-top: var(--space-2); }
.ask .js-said { margin-top: var(--space-2); color: var(--color-neutral-600); }
.ask .js-said.ok { color: var(--color-accent-700); font-weight: 600; }
.ask textarea[disabled] { opacity: 0.6; }

/* ── Requirement table ───────────────────────────────────────────────────── */

.reqs { border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100); }
.req {
  display: grid; grid-template-columns: 96px 52px 1fr; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
  align-items: start;
}
.req:last-child { border-bottom: 0; }
.req .w { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px;
          color: var(--color-neutral-700); }
.req .verbatim { font-size: 13px; }
.req .why { font-size: 11.5px; color: var(--color-neutral-600); margin-top: 3px; }
.req .why b { font-weight: 700; color: var(--color-neutral-800); }
.req .nec { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--color-neutral-500); }

/* ── Gap cards ───────────────────────────────────────────────────────────── */

.gap-card {
  border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100);
  margin-bottom: var(--space-3);
}
.gap-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer; width: 100%;
  background: none; border: 0; text-align: left; font: inherit; color: inherit;
}
.gap-head:hover { background: var(--color-neutral-200); }
.gap-n { font-family: var(--font-heading); font-weight: 800; font-size: 12px;
         color: var(--color-neutral-400); width: 20px; font-variant-numeric: tabular-nums; }
.gap-topic { font-weight: 700; font-size: 14px; flex: 1; }
.gap-meta { font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; }

.gap-body { padding: 0 var(--space-4) var(--space-4) 44px; display: none; }
.gap-card.open .gap-body { display: block; }
.gap-card.open { box-shadow: var(--shadow-md); }
.gap-card.done { opacity: 0.62; }
.gap-card.done .gap-topic { text-decoration: none; }

.gap-prompt { font-size: 15px; line-height: 1.45; margin-bottom: var(--space-2); }
.gap-prompt b { font-weight: 800; }
.basis { font-size: 11.5px; color: var(--color-neutral-600); margin-bottom: var(--space-3); }
.their-words {
  font-size: 12.5px; color: var(--color-neutral-700); font-style: italic;
  border-left: 2px solid var(--color-neutral-400); padding-left: var(--space-3);
  margin-bottom: var(--space-3);
}

.answer {
  width: 100%; min-height: 132px; resize: vertical; padding: var(--space-3);
  font: inherit; font-size: 14px; line-height: 1.55;
  border: 1px solid var(--color-neutral-400); background: #fff; color: inherit;
}
.answer:focus { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.answer-foot { display: flex; align-items: center; gap: var(--space-3);
               margin-top: var(--space-2); flex-wrap: wrap; }
.wordcount { font-size: 11.5px; color: var(--color-neutral-600); font-variant-numeric: tabular-nums; }
.wordcount.ready { color: var(--color-accent-700); font-weight: 700; }

.reading {
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-neutral-400); background: var(--color-neutral-200);
  display: none;
}
.reading.show { display: block; }
.reading-label { font-size: 13px; margin-bottom: var(--space-2); }
.reading-label b { font-weight: 800; }
.reading-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.reading-note { font-size: 11.5px; color: var(--color-neutral-600); margin-top: var(--space-2); }

.recorded {
  display: none; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-neutral-300); font-size: 13px;
}
.gap-card.recorded-state .recorded { display: block; }
.recorded .delta { font-weight: 800; font-family: var(--font-heading);
                   font-variant-numeric: tabular-nums; }
.recorded .arrow { color: var(--color-accent); font-weight: 800; padding: 0 4px; }

/* ── Score breakdown ─────────────────────────────────────────────────────── */

.score-rows { border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100); }
.score-row {
  display: grid; grid-template-columns: 132px 74px 1fr; gap: var(--space-3);
  align-items: center; padding: 10px var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200); font-size: 13px;
}
.score-row:last-child { border-bottom: 0; }
.score-row .label { font-weight: 700; }
.score-row .val { font-variant-numeric: tabular-nums; text-align: right; }
.score-row .detail { font-size: 12px; color: var(--color-neutral-600); }
.score-row.penalty { background: var(--color-neutral-200); }
.score-row.penalty .val { color: var(--color-accent-700); font-weight: 700; }

/* ── Lists ───────────────────────────────────────────────────────────────── */

.list { border: 1px solid var(--color-neutral-300); background: var(--color-neutral-100); }
.list-row {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-200);
}
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .grow .t { font-weight: 700; font-size: 13.5px; }
.list-row .grow .s { font-size: 11.5px; color: var(--color-neutral-600); }

.pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border: 1px solid var(--color-neutral-400); color: var(--color-neutral-700);
}
.pill.on { background: var(--color-text); color: var(--color-neutral-100);
           border-color: var(--color-text); }

/* ── Two-column layout ───────────────────────────────────────────────────── */

.cols { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8);
        align-items: start; }
.rail { position: sticky; top: 76px; display: flex; flex-direction: column; gap: var(--space-6); }
.rail h3 { margin-bottom: var(--space-2); }

/* ── Defence sheet ───────────────────────────────────────────────────────── */

.sheet { max-width: 68ch; font-size: 15px; line-height: 1.62; }
.sheet h1 { font-size: 28px; margin-bottom: var(--space-2); }
.sheet h2 { font-size: 18px; margin: var(--space-8) 0 var(--space-3);
            padding-bottom: 6px; border-bottom: 1px solid var(--color-neutral-300); }
.sheet h3 { font-size: 15px; margin: var(--space-6) 0 var(--space-2); }
.sheet p { margin-bottom: var(--space-3); }
.sheet ul { margin: 0 0 var(--space-3) var(--space-6); }
.sheet li { margin-bottom: 4px; }
.sheet blockquote {
  border-left: 3px solid var(--color-neutral-400); padding-left: var(--space-4);
  margin-bottom: var(--space-3); color: var(--color-neutral-800);
}
.sheet code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.88em; }
.sheet em { color: var(--color-neutral-700); }
.sheet hr { border: 0; border-top: 1px solid var(--color-neutral-300); margin: var(--space-8) 0; }

/* ── Utility ─────────────────────────────────────────────────────────────── */

/* Not part of the extracted design system — added here rather than edited into
   system.css, so re-exporting the design never silently drops it. */
.btn-sm { padding: 4px 10px; font-size: 12px; }

.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row.tight { gap: var(--space-2); }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.hidden { display: none !important; }

.notice {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-neutral-400);
  background: var(--color-neutral-200); font-size: 13px;
}
.notice.accent { border-color: var(--color-accent); background: var(--color-accent-100); }

/* ── Fluid display sizes ─────────────────────────────────────────────────────
   These replaced inline `style="font-size:72px"` in the templates. An inline
   style beats every media query, so the big score on the result page stayed
   72px on a 375px screen and pushed the layout sideways. clamp() scales with
   the viewport and needs no breakpoint to maintain. */

.n-xxl { font-size: clamp(44px, 13vw, 72px); }
.n-xl  { font-size: clamp(38px, 11vw, 60px); }
.n-lg  { font-size: clamp(28px,  8vw, 42px); }
.n-md  { font-size: clamp(22px,  6vw, 30px); }
.n-sm  { font-size: clamp(18px,  5vw, 22px); }
.n-xs  { font-size: clamp(15px,  4vw, 18px); }

h1 { font-size: clamp(26px, 7vw, 40px); }
h2 { font-size: clamp(19px, 4.5vw, 22px); }

/* ── Responsive ──────────────────────────────────────────────────────────────
   Two real breakpoints, not one. 900px folds the sidebar away; 640px is where
   a phone actually is, and where multi-column rows and side-by-side form
   fields stop fitting at all. */

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .rail { position: static; }
  .shell { padding: 0 var(--space-4) 72px; }
  .topbar { padding: var(--space-3) var(--space-4); }
}

@media (max-width: 640px) {
  body { font-size: 15px; }              /* 14px is uncomfortable on a phone */

  .topbar { gap: var(--space-3); }
  .topnav { margin-left: 0; gap: var(--space-3); width: 100%; order: 3; }
  .topbar-end { font-size: 11px; }

  .page-head { padding: var(--space-6) 0 var(--space-4); }

  /* Requirement rows: chip, then weight, then the text — reading order, not
     the desktop grid squeezed narrower. */
  .req { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3); }
  .req .w { display: inline; margin-right: var(--space-2); }
  .req .nec { display: inline; }

  .score-row { grid-template-columns: 1fr auto; gap: var(--space-2); }
  .score-row .detail { grid-column: 1 / -1; }

  /* Gap and quantify cards */
  .gap-head { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .gap-topic { flex: 1 1 100%; order: 2; }
  .gap-n { order: 1; }
  .gap-meta { order: 3; }
  .gap-body { padding: 0 var(--space-3) var(--space-3); }
  .gap-prompt { font-size: 15px; }

  /* Side-by-side form fields total ~520px and simply do not fit. Stack them,
     and drop the inline max-widths the templates set for the desktop row. */
  .row > .field,
  .row > .field[style] { flex: 1 1 100% !important; max-width: none !important;
                         min-width: 0 !important; }
  .answer-foot { gap: var(--space-2); }
  .answer-foot .btn { flex: 1 1 auto; }
  .reading-actions .btn { flex: 1 1 calc(50% - var(--space-2)); }

  /* Comfortable touch targets. 34px is fine for a mouse, not for a thumb. */
  .btn { min-height: 42px; padding: 10px 16px; }
  .btn-sm { min-height: 36px; }
  .input, .answer { font-size: 16px; }   /* below 16px, iOS zooms on focus */

  .list-row { flex-wrap: wrap; padding: var(--space-3); }
  .list-row .grow { flex: 1 1 100%; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .steps { font-size: 10px; }
  .step { padding: 9px var(--space-2); }

  .sheet { font-size: 16px; }
  .their-words { font-size: 13px; }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .shell { padding: 0 var(--space-3) 64px; }
  .brand { font-size: 13px; }
}

/* Nothing may push the page sideways. Long URLs, record IDs and unbroken
   strings are the usual culprits, and a horizontally scrolling page reads as
   broken however good the rest looks. */
body { overflow-x: hidden; }
.mono, .verbatim, .gap-prompt, .sheet { overflow-wrap: anywhere; }
.reqs, .list, .score-rows, .stats { max-width: 100%; }
img, svg { max-width: 100%; height: auto; }

@media print {
  .topbar, .steps, .btn, .rail { display: none !important; }
  body { background: #fff; }
  .sheet { max-width: none; }
}