/* ==========================================================================
   ATS CHECKER, page styles
   Extends the tokens in style.css. Nothing here redefines a brand value;
   the checker should read as another room in the same building, not an app
   bolted onto the side of it.
   ========================================================================== */
/* ---------- The hidden attribute has to win ----------
   Declared here as well as in style.css so this stylesheet stands on its own.
   The checker is deployed as its own set of files, and its two flex elements,
   the progress stepper and the cap notice, were drawn while hidden because an
   author rule that sets display beats the browser's own
   `[hidden] { display: none }` whatever the specificity. Shipping ats.css
   without this brings back an empty red bar under every uncapped score and a
   stepper that never goes away.

   The print block below overrides it for .results[hidden] on purpose, and
   still does: a class-plus-attribute selector outranks the bare attribute. */
[hidden] { display: none !important; }


:root {
  --ok: #348256;
  --ok-soft: #eaf3ed;
  --warn: #c77e32;
  --warn-soft: #fbf2e6;
  --risk: #b44439;
  --risk-soft: #fbeceb;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Hero ---------- */

.ats-hero { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

.privacy-line {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.6rem;
  max-width: 62ch;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.6;
}

.privacy-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
  margin-top: 0.5rem;
  box-shadow: 0 0 0 4px rgba(52, 130, 86, 0.14);
}

/* ---------- What is ATS compliance ---------- */

.explainer { padding-block: clamp(2.5rem, 5vw, 4rem); }
.explainer .section-head { max-width: 780px; }
.explainer .section-head p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; }

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4rem;
}

.explainer-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2rem 1.8rem 1.8rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.explainer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.explainer-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--bronze-soft);
  margin-bottom: 0.85rem;
}
.explainer-card h2 { font-size: 1.22rem; margin-bottom: 0.55rem; }
.explainer-card p { font-size: 0.94rem; color: var(--muted); line-height: 1.65; }

/* ---------- Upload ---------- */

.upload-section { padding-top: 0; }

.upload-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: clamp(2rem, 5vw, 3.2rem) 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.dropzone:hover,
.dropzone:focus-visible { border-color: var(--bronze); background: var(--white); }
.dropzone.dragging {
  border-color: var(--ink);
  background: var(--white);
  transform: scale(1.008);
  box-shadow: var(--shadow-card);
}
.dropzone.has-file { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }

.drop-icon { width: 40px; height: 40px; color: var(--bronze); margin: 0 auto 0.9rem; }
.dropzone.has-file .drop-icon { color: var(--ok); }

.drop-title { font-family: var(--serif); font-size: 1.3rem; }
.drop-sub { font-size: 0.9rem; color: var(--muted); margin-top: 0.35rem; }
.drop-browse { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.drop-file {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ok);
  word-break: break-all;
}

/* Target role + action */

.target-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.combo-field { margin-bottom: 0; position: relative; }
.optional {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 0.4rem;
}

.combo { position: relative; display: flex; }
.combo input { width: 100%; padding-right: 2.4rem; }

.combo-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--muted);
  background: var(--paper-deep);
}
.combo-clear:hover { color: var(--ink); background: var(--line); }

.combo-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% - 1.3rem);
  margin: 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  max-height: 300px;
  overflow-y: auto;
}
.combo-list li {
  padding: 0.65rem 0.95rem;
  font-size: 0.93rem;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.combo-list li:last-child { border-bottom: none; }
.combo-list li:hover,
.combo-list li[aria-selected="true"] { background: var(--paper); }
.combo-list .alt { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.12rem; }
.combo-list .empty { color: var(--muted); cursor: default; }

.field-help { font-size: 0.82rem; color: var(--muted); margin-top: 0.45rem; }

.analyse-btn { white-space: nowrap; margin-top: 1.55rem; }
.analyse-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.upload-status { font-size: 0.9rem; margin-top: 1rem; color: var(--muted); min-height: 1.2em; }
.upload-status.error { color: var(--risk); font-weight: 500; }
.upload-status.working { color: var(--ink); }

.assurance-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 2rem;
  list-style: none;
  margin-top: 1.6rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.assurance-row li { padding-left: 1.4rem; position: relative; }
.assurance-row li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ok);
  font-weight: 700;
}
.assurance-row strong { color: var(--ink); font-weight: 600; }

/* ---------- Results: score hero ---------- */

.results { padding-top: clamp(3rem, 6vw, 4.5rem); }
.results:focus { outline: none; }

.score-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}

/* Every tone is exposed as a variable so the hero, the glow and the ring can
   all be driven from one data-tone attribute set when the score renders. */
.score-hero[data-tone="strong"] { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.score-hero[data-tone="fair"]   { --tone: var(--bronze); --tone-soft: #f7f1e7; }
.score-hero[data-tone="weak"]   { --tone: var(--warn); --tone-soft: var(--warn-soft); }
.score-hero[data-tone="poor"]   { --tone: var(--risk); --tone-soft: var(--risk-soft); }

.score-hero {
  position: relative;
  overflow: hidden;
  transition: border-color 0.5s ease;
}
.score-hero[data-tone] { border-color: color-mix(in srgb, var(--tone) 26%, var(--line)); }

/* A wash of the band colour bleeding in from the ring's side. Kept far below
   the text so contrast is untouched. */
.score-hero[data-tone]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    58% 92% at 14% 50%,
    color-mix(in srgb, var(--tone) 13%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.score-hero > * { position: relative; }

.score-ring-wrap { position: relative; width: clamp(180px, 22vw, 230px); aspect-ratio: 1; }

/* Soft halo directly behind the ring, in the band's colour. */
.score-ring-wrap::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--tone, var(--bronze)) 16%, transparent) 0%,
    transparent 68%
  );
  opacity: 0;
  transition: opacity 0.9s ease 0.3s;
}
.score-hero[data-tone] .score-ring-wrap::before { opacity: 1; }

.ring-ticks { stroke: var(--line); stroke-linecap: round; }
.score-ring { width: 100%; height: 100%; display: block; }
.ring-track { stroke: var(--paper-deep); }
.ring-value {
  stroke: var(--bronze);
  /* 2πr for r=86. The dash offset is driven from script so the ring can
     animate from empty without a keyframe per score. */
  stroke-dasharray: 540.35;
  stroke-dashoffset: 540.35;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.5s ease;
}
.ring-value.tone-strong { stroke: var(--ok); }
.ring-value.tone-fair { stroke: var(--bronze); }
.ring-value.tone-weak { stroke: var(--warn); }
.ring-value.tone-poor { stroke: var(--risk); }

.score-number {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* The figure and its unit share a baseline. Stacking them in the column flow
   and pulling the unit up with a negative margin laid the % over the digits. */
.score-figure { display: flex; align-items: baseline; gap: 0.06em; }
.score-value {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 4.2rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.score-pct { font-size: 1.15rem; color: var(--muted); font-weight: 500; }
.score-band {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.score-copy h2 { margin: 0.3rem 0 0.9rem; }
.score-meta { font-size: 0.86rem; color: var(--muted); margin-top: 1rem; }
.score-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* The line under the two buttons. It explains what "Optimize" does before
   it is clicked -- the button promises something the visitor has no way to
   predict -- and parks "check another" here, since almost nobody wants it
   and it should not compete with the sale. */
.score-action-note {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 0.9rem;
  max-width: 46ch;
}

/* A button that has to read as a link: it belongs in a sentence, and
   styling a real <button> beats an <a href="#"> that goes nowhere. */
.linklike {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.linklike:hover { color: var(--muted); }

/* ---------- Sub-metrics ---------- */

.submetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.1rem;
  margin-top: 1.2rem;
}

.submetric {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.submetric:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

/* Each sub-score gets its own small gauge. Reading three rings against one
   another is immediate in a way three bar lengths are not, and it echoes the
   hero instead of introducing a second visual language for the same idea. */
.sm-dial { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.sm-dial svg { width: 100%; height: 100%; display: block; }
.sm-dial .sm-track { stroke: var(--paper-deep); }
.sm-dial .sm-arc {
  /* 2*pi*r for r = 26 */
  stroke-dasharray: 163.36;
  stroke-dashoffset: 163.36;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.sm-arc.tone-strong { stroke: var(--ok); }
.sm-arc.tone-fair { stroke: var(--bronze); }
.sm-arc.tone-weak { stroke: var(--warn); }
.sm-arc.tone-poor { stroke: var(--risk); }

.sm-dial .sm-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.sm-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 0.2rem;
}
.sm-hint { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

/* ---------- Cap notice ---------- */

.cap-notice {
  margin-top: 1.4rem;
  border: 1px solid rgba(180, 68, 57, 0.28);
  background: var(--risk-soft);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-size: 0.94rem;
  line-height: 1.6;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.cap-notice .cap-mark {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--risk);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 0.1rem;
}
.cap-notice strong { color: var(--risk); }

/* ---------- Diagnostic feed ---------- */

.feed-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.feed-grid .section-head { margin-bottom: 1.8rem; }

.findings { display: grid; gap: 0.9rem; }

.finding {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.finding:hover { box-shadow: var(--shadow-card); }
.finding.sev-critical { border-left-color: var(--risk); }
.finding.sev-high { border-left-color: var(--warn); }
.finding.sev-medium { border-left-color: var(--bronze); }
.finding.sev-low { border-left-color: var(--line); }

.finding-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  padding: 1.05rem 1.3rem;
  font-weight: 600;
  font-size: 0.98rem;
}
.finding-q .icon {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.finding.open .finding-q .icon { transform: rotate(45deg); }

.sev-tag {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
}
.sev-critical .sev-tag { background: var(--risk-soft); color: var(--risk); }
.sev-high .sev-tag { background: var(--warn-soft); color: var(--warn); }
.sev-medium .sev-tag { background: var(--paper-deep); color: var(--bronze); }
.sev-low .sev-tag { background: var(--paper-deep); color: var(--muted); }

.finding-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.finding-a-inner { padding: 0 1.3rem 1.3rem; font-size: 0.93rem; color: var(--muted); line-height: 1.65; }

.fix-box {
  margin-top: 0.95rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--ink);
}
.fix-box .fix-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 0.3rem;
}

.samples { margin-top: 0.85rem; display: grid; gap: 0.45rem; }
.samples li {
  list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.5rem 0.7rem;
  background: var(--paper);
  border-radius: 6px;
  border-left: 2px solid var(--warn);
  color: var(--ink-soft);
}

.all-clear {
  background: var(--ok-soft);
  border: 1px solid rgba(52, 130, 86, 0.24);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-align: center;
}
.all-clear h3 { margin-bottom: 0.4rem; }
.all-clear p { font-size: 0.93rem; color: var(--muted); }

/* Sidebar cards */

.pros-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.7rem;
}
.pros-card h3 { margin-bottom: 1rem; }

.pros-list { list-style: none; display: grid; gap: 0.9rem; }
.pros-list li { padding-left: 1.6rem; position: relative; font-size: 0.92rem; line-height: 1.55; }
.pros-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ok);
  font-weight: 700;
}
.pros-list .pro-title { font-weight: 600; display: block; }
.pros-list .pro-detail { color: var(--muted); font-size: 0.86rem; }

.kw-group + .kw-group { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.kw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.kw-name { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.kw-score { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pill {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
}
.pill.have { background: var(--ok-soft); border-color: rgba(52, 130, 86, 0.3); color: var(--ok); }
.pill.missing { background: var(--white); border-style: dashed; }
.pill.hot::after { content: " ●"; color: var(--warn); font-size: 0.6em; vertical-align: middle; }

.kw-more { font-size: 0.8rem; color: var(--muted); margin-top: 0.55rem; }

/* ---------- Raw view ---------- */

.raw-section { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.raw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }

.raw-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.raw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.raw-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.raw-tag { font-size: 0.75rem; color: var(--muted); }
.raw-tag.warn { color: var(--risk); font-weight: 600; }

.raw-text {
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.62;
  padding: 1.2rem;
  margin: 0;
  height: 480px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-soft);
  background: var(--white);
}

.visual-preview {
  height: 480px;
  overflow: auto;
  background: var(--paper-deep);
  padding: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.visual-preview img {
  width: 100%;
  max-width: 460px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: #fff;
}

.preview-fallback {
  align-self: center;
  max-width: 34ch;
  margin: auto;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
.preview-fallback strong { color: var(--ink); display: block; margin-bottom: 0.4rem; }
.preview-fallback p + p { margin-top: 0.5rem; }

/* Reconstructed preview for Word files, which carry no rendered page. */
.docx-preview {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 2.2rem 2rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink);
}
.docx-preview p { margin-bottom: 0.42rem; }
.docx-preview p.is-list { padding-left: 1rem; position: relative; }
.docx-preview p.is-list::before { content: "•"; position: absolute; left: 0.15rem; color: var(--muted); }
.docx-preview p.in-cell { border-left: 2px solid var(--warn); padding-left: 0.55rem; }
.docx-preview .preview-note {
  font-size: 0.68rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 0.6rem;
  font-style: italic;
}

/* The handoff into the contact form, anchored to the document panel it
   refers to rather than floating loose in the results. */

/* Three equal columns for the three measures, rather than the auto-fit
   four-up the generic grid produces. */
.steps-grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.privacy-line span:not(.privacy-dot) { display: inline; }

/* The two-copies offer: the answer to the dealbreaker the tool just found,
   so it sits inside the CTA rather than reading as a separate pitch. */
.cta-offer {
  position: relative;
  max-width: 60ch;
  margin: 1.4rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(247, 245, 241, 0.18);
  font-size: 0.96rem;
  line-height: 1.7;
  color: rgba(247, 245, 241, 0.82);
}
.cta-offer strong { color: var(--bronze-soft); font-weight: 600; }

.cta-proof {
  position: relative;
  margin-top: 1.6rem;
  font-size: 0.86rem;
  color: rgba(247, 245, 241, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.how-section { border-top: 1px solid var(--line); }

.data-credit { font-size: 0.78rem; }

/* ---------- Loading ---------- */

.working-shimmer {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--bronze);
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: -2px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .feed-grid { grid-template-columns: 1fr; }
  .raw-grid { grid-template-columns: 1fr; }
  .score-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .score-copy .lede { margin-inline: auto; }
  .score-actions { justify-content: center; }
  .score-hero .eyebrow { display: block; }
}

@media (max-width: 700px) {
  .target-row { grid-template-columns: 1fr; }
  .analyse-btn { margin-top: 0; width: 100%; justify-content: center; }
  .raw-text, .visual-preview { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .ring-value { transition: none; }
  .sm-fill { transition: none; }
  .working-shimmer { animation-duration: 2s; }
}

/* ---------- Analysis stepper ---------- */

/* The work takes about a second. Without a visible sequence that second reads
   as nothing happening, and people click the button again. */
.stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  list-style: none;
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--muted);
}
.stepper li { display: flex; align-items: center; gap: 0.55rem; transition: color 0.25s ease; }

.step-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.stepper li.active { color: var(--ink); font-weight: 600; }
.stepper li.active .step-dot {
  background: var(--bronze);
  box-shadow: 0 0 0 4px rgba(176, 141, 87, 0.18);
  animation: step-pulse 1.1s ease-in-out infinite;
}
.stepper li.done { color: var(--ink); }
.stepper li.done .step-dot { background: var(--ok); transform: scale(0.85); }

@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.16); }
  50%      { box-shadow: 0 0 0 7px rgba(176, 141, 87, 0.05); }
}

/* ---------- Polish ---------- */

.finding-q:focus-visible,
.faq-q:focus-visible { outline: 2px solid var(--bronze); outline-offset: -3px; border-radius: var(--radius-sm); }

.finding { transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.finding.open { box-shadow: var(--shadow-card); }

.raw-panel { transition: box-shadow 0.25s ease; }
.raw-panel:hover { box-shadow: var(--shadow-lift); }

/* Keep the score in view while the fixes are read on a tall results page. */
@media (min-width: 961px) {
  .feed-side { position: sticky; top: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-arc { transition: none; }
  .stepper li.active .step-dot { animation: none; }
  .conv-card:hover, .submetric:hover, .explainer-card:hover { transform: none; }
}

/* ---------- Print ---------- */

/* Printing the results is a real use: people take them into a rewrite, or
   hand them to whoever is helping. Everything interactive comes off, every
   finding opens, and the ink-heavy panels go flat. */
@media print {
  @page { margin: 16mm; }

  .nav, .footer, .upload-section, .how-section, .ats-hero, .explainer,
  .score-actions, .cta-wrap, .combo-list, .stepper { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  .results { display: block !important; padding: 0; }
  .results[hidden] { display: block !important; }

  .score-hero, .submetric, .finding, .pros-card, .raw-panel, .cap-notice {
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .score-hero::before, .score-ring-wrap::before { display: none !important; }

  .feed-grid { grid-template-columns: 1fr !important; gap: 1.2rem; }
  .feed-side { position: static !important; }

  /* Every finding prints open: a collapsed accordion on paper is a blank. */
  .finding-a { max-height: none !important; overflow: visible !important; }
  .finding-q .icon { display: none; }

  .raw-text, .visual-preview { height: auto !important; max-height: 460px; overflow: hidden !important; }
  .raw-grid { grid-template-columns: 1fr 1fr !important; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* ---------- Evidence marks in the raw view ---------- */

/* Two kinds, because they mean different things: "danger" is text a reader
   cannot see at all, "locate" is ordinary text shown as proof of where a
   finding happens. */
.raw-text { position: relative; }

.raw-text mark.ev {
  border-radius: 3px;
  padding: 0.05em 0.2em;
  background: transparent;
  color: inherit;
  box-shadow: inset 0 -0.62em 0 rgba(176, 141, 87, 0.22);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.raw-text mark.ev-danger {
  background: var(--risk-soft);
  color: var(--risk);
  font-weight: 600;
  box-shadow: none;
}
.raw-text mark.ev.flash {
  animation: ev-flash 1.6s ease;
}

@keyframes ev-flash {
  0%   { background: var(--bronze); color: var(--white); }
  35%  { background: var(--bronze); color: var(--white); }
  100% { background: transparent; }
}

.show-me {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.95rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.show-me:hover { border-color: var(--bronze); color: var(--bronze); transform: translateY(-1px); }
.show-me:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ---------- Score history ---------- */

.history {
  margin-top: 1.4rem;
  padding: 1.3rem 1.5rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.history-head {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.history-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bronze);
}
.history-delta { font-size: 0.9rem; color: var(--muted); }
.history-delta.up { color: var(--ok); font-weight: 600; }
.history-delta.down { color: var(--warn); font-weight: 600; }

.history-clear {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.history-clear:hover { color: var(--risk); border-color: currentColor; }

.history-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  list-style: none;
  height: 96px;
}
.history-bars li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 46px;
  height: 100%;
  justify-content: flex-end;
}
.hb-track {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--paper);
  border-radius: 5px;
  overflow: hidden;
}
.hb-fill { width: 100%; border-radius: 5px; transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.hb-fill.tone-strong { background: var(--ok); }
.hb-fill.tone-fair { background: var(--bronze); }
.hb-fill.tone-weak { background: var(--warn); }
.hb-fill.tone-poor { background: var(--risk); }

.hb-score { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hb-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; }

.history-bars li.is-latest .hb-score { color: var(--ink); }
.history-bars li.is-latest .hb-track { box-shadow: 0 0 0 2px var(--ink) inset; }
.history-bars li:not(.is-latest) .hb-fill { opacity: 0.55; }

.history-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.9rem; }

@media print { .history, .show-me { display: none !important; } }

/* ---------- Upload heading ---------- */

.upload-head { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.upload-head .privacy-line { justify-content: center; margin-inline: auto; }

/* ---------- How the score is calculated ---------- */

.scoring .section-head { max-width: 640px; }

.scoring-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 820px;
  margin-inline: auto;
}
.scoring-block + .scoring-block { margin-top: 1.4rem; }

.scoring-block h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
}
.scoring-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--paper-deep);
  color: var(--bronze);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
}

.scoring-lede { font-size: 0.98rem; color: var(--muted); line-height: 1.7; }
.scoring-note {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ---- weighting bars ---- */

.weight-set { display: grid; gap: 1rem; margin-top: 1.4rem; }
.weight-when {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.weight-bar {
  display: flex;
  height: 46px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.wb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  line-height: 1.2;
  text-align: center;
  padding: 0 0.4rem;
  white-space: nowrap;
  overflow: hidden;
}
.wb b { font-size: 0.9rem; font-weight: 700; }
.wb.formatting { background: var(--ink); color: var(--paper); }
.wb.keywords { background: var(--bronze); color: var(--white); }
.wb.results { background: var(--paper-deep); color: var(--ink); }

/* ---- ceilings ---- */

.ceiling-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.8rem;
  list-style: none;
  margin-top: 1.4rem;
}
.ceiling-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  background: var(--risk-soft);
  border: 1px solid rgba(180, 68, 57, 0.22);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.ceiling-count { font-weight: 600; }
.ceiling-arrow { color: var(--risk); }
.ceiling-max {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--risk);
  white-space: nowrap;
}

/* ---- band scale ---- */

.band-scale { list-style: none; margin-top: 1.3rem; display: grid; gap: 0.5rem; }
.band-scale li {
  display: grid;
  grid-template-columns: 74px 116px 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--line);
  background: var(--paper);
  font-size: 0.9rem;
}
.band-range { font-variant-numeric: tabular-nums; font-weight: 600; }
.band-name { font-family: var(--serif); font-size: 1.05rem; }
.band-note { color: var(--muted); font-size: 0.86rem; }

.band-scale .band-poor { border-left-color: var(--risk); }
.band-scale .band-weak { border-left-color: var(--warn); }
.band-scale .band-fair { border-left-color: var(--bronze); }
.band-scale .band-strong { border-left-color: var(--ok); }

@media (max-width: 620px) {
  .band-scale li { grid-template-columns: 68px 1fr; }
  .band-scale .band-note { grid-column: 1 / -1; }
  .wb { font-size: 0.68rem; }
  .wb b { font-size: 0.78rem; }
}

/* ---------- Closing reminder ---------- */

/* The results-page call to action lives inside the hidden results block, so a
   visitor who never uploads anything never sees it. This one is always on the
   page and carries the same offer. */
.closer { padding-top: 0; }

.closer-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

/* A slow bronze wash so the band does not read as a flat black slab. */
.closer-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 80% 0%, rgba(176, 141, 87, 0.22), transparent 62%);
  pointer-events: none;
}
.closer-band > * { position: relative; }

.closer-band .eyebrow { color: var(--bronze-soft); }
.closer-band h2 { margin-bottom: 1rem; }
.closer-band p {
  max-width: 62ch;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(247, 245, 241, 0.84);
}
.closer-band strong { color: var(--bronze-soft); font-weight: 600; }

.closer-sub {
  margin-top: 0.9rem;
  font-size: 0.9rem !important;
  color: rgba(247, 245, 241, 0.6) !important;
}
.closer-band .btn { margin-top: 1.8rem; }

@media print { .closer { display: none !important; } }

/* The target role is required, so it is labelled like one. The badge reuses
   the muted treatment the old "recommended" chip had, in the accent colour so
   it reads as a rule rather than a suggestion. */
.field label .required {
  margin-left: 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #8a6a3b);
}

.analyse-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* Reserves its own line so the button does not jump as the message appears
   and clears. */
.ready-note {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted, #6b7280);
}