/* The ATS sample: one page, read two ways, scored by the real checker.
   ------------------------------------------------------------------
   Loaded by the home page and the ATS checker; js/ats-sample.js draws the
   markup. Moved here from css/home.css on 2026-10-02, when Rae asked for the
   sample to become "a real part of the ats checker", along with the stage
   parts it shares with the home page's other tools (the rail, the live tag,
   the segmented control), so there is one copy of each.
   ------------------------------------------------------------------ */

/* Tokens the home page defines and the checker page does not. */
.ats-sample, .stage-rail, .seg {
  --bronze-ink: #7d5f33;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.stage-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.stage-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}
.stage-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bronze);
  animation: live 2.4s ease-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(176, 141, 87, 0); }
}
.stage-source {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Segmented control. */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper-deep);
}
.seg-wrap { border-radius: 16px; }
.seg button {
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.25s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.08), 0 4px 12px rgba(20, 20, 20, 0.07);
}


/* ---------- The sample ---------- */
.ats-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}

.flip { perspective: 1800px; }
.flip-in {
  position: relative;
  /* The taller face's height, measured by js/ats-sample.js. */
  height: var(--flip-h, 520px);
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.flip.is-machine .flip-in { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}
/* A page of a resume: white, like the layout miniatures, while the site
   around it is ivory. */
.face-human {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(20, 20, 20, 0.05), 0 20px 46px rgba(20, 20, 20, 0.12);
}
.face-machine {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 26px),
    #151413;
  color: #ece6d9;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 20px 46px rgba(20, 20, 20, 0.3);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* The sample page. */
.sample {
  padding: 1.25rem 1.4rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.s-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ink);
}
.s-name { font-family: var(--serif); font-size: 1.55rem; line-height: 1; color: var(--ink); }
.s-role { margin-top: 0.3rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-ink); }
.s-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; font-size: 0.68rem; color: var(--muted); transition: all 0.3s ease; }
.sample.flaw-box .s-contact {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--bronze-soft);
  color: var(--ink-soft);
}
.s-h {
  margin: 0.8rem 0 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}
.s-h .fun { display: none; }
.sample.flaw-fun .s-h .std { display: none; }
.sample.flaw-fun .s-h .fun {
  display: inline;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bronze-ink);
}
.s-job { margin-top: 0.35rem; font-size: 0.72rem; color: var(--muted); }
.s-job b { color: var(--ink); font-weight: 600; }
.s-list { list-style: none; margin-top: 0.2rem; }
.s-list li { position: relative; padding-left: 0.85rem; margin-top: 0.15rem; }
.s-list li::before { content: ""; position: absolute; left: 0.1rem; top: 0.6em; width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); }
.s-list .num { display: none; }
.sample.has-nums .s-list .plain { display: none; }
.sample.has-nums .s-list .num { display: inline; }
.s-list em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(transparent 58%, rgba(176, 141, 87, 0.3) 58%);
}
.s-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; }
.s-chart { display: none; gap: 0.3rem; margin-top: 0.15rem; }
.s-chart span { display: grid; grid-template-columns: 6.6rem 1fr; align-items: center; gap: 0.4rem; font-size: 0.62rem; }
.s-chart b { font-weight: 500; color: var(--ink-soft); }
.s-chart i {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ink) calc(var(--v) * 100%), var(--line) calc(var(--v) * 100%));
}
.sample.flaw-chart .s-skills { display: none; }
.sample.flaw-chart .s-chart { display: grid; }

/* What the software reads. */
.m-title {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8f897d;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px dashed rgba(236, 230, 217, 0.18);
}
.m-read { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0.5rem 0.9rem; font-size: 0.74rem; line-height: 1.5; }
.m-read dt { color: #8f897d; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.64rem; padding-top: 0.12rem; }
.m-read dd { color: #ece6d9; }
.m-read .ok::before { content: "\2713\00a0"; color: var(--bronze-soft); }
.m-read .miss { color: #e2a07f; }
.m-read .miss::before { content: "\2715\00a0"; }
.m-read .dim { color: #8f897d; }
.flip.is-machine .m-read > * { animation: m-type 0.4s ease both; }
@keyframes m-type { from { opacity: 0; transform: translateX(-6px); } }

/* Switches and meters. */
.switches { border: 0; padding: 0; }
.switches legend {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.sw-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  cursor: pointer;
}
.sw-row + .sw-row { border-top: 1px solid var(--line); }
.sw-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color 0.25s ease;
}
.sw-track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.25);
  transition: transform 0.3s var(--ease-out);
}
.sw-row input:checked + .sw-track { background: var(--ink); }
.sw-row input:checked + .sw-track::after { transform: translateX(16px); }
.sw-row input:focus-visible + .sw-track { outline: 2px solid var(--bronze); outline-offset: 2px; }

.meters { margin-top: 1.3rem; }
.meters-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.meters-title span { font-weight: 600; letter-spacing: 0.08em; color: var(--bronze-ink); font-style: italic; text-transform: none; font-family: var(--serif); font-size: 0.82rem; }
.meter {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name word" "bar bar";
  gap: 0.35rem 0.8rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.meter-name { grid-area: name; font-size: 0.9rem; font-weight: 500; transition: color 0.2s ease; }
.meter-name::after { content: " \2191"; color: var(--bronze); opacity: 0; transition: opacity 0.2s ease; }
.meter:hover .meter-name { color: var(--bronze-ink); }
.meter:hover .meter-name::after { opacity: 1; }
.meter-word { grid-area: word; font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.meter-bar { grid-area: bar; height: 6px; border-radius: 999px; background: var(--paper-deep); overflow: hidden; }
.meter-bar i {
  display: block;
  height: 100%;
  width: calc(var(--m, 0) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bronze-soft), var(--bronze));
  transition: width 0.9s var(--ease-out);
}
.meter.is-low .meter-bar i { background: linear-gradient(90deg, #d9b9a4, #b9734f); }
.meters-note { margin-top: 0.6rem; font-size: 0.76rem; color: var(--muted); }


.meter-word b { color: var(--ink); font-weight: 700; margin-right: 0.25rem; }
.m-for { color: #8f897d; }
.sample-run {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
}
.sample-run [data-sample-run] {
  color: var(--ink);
  border-bottom: 1px solid var(--bronze-soft);
  padding-bottom: 1px;
}
.sample-run button[data-sample-run] { background: none; border-width: 0 0 1px; cursor: pointer; font: inherit; }
.sample-run button[data-sample-run]:disabled { opacity: 0.55; cursor: progress; }
.sample-file { font-size: 0.8rem; font-weight: 500; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.sample-error { padding: 1rem; color: var(--muted); }

/* On the checker page the sample sits in a card of its own. */
.ats-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.3rem 1.3rem;
  container-type: inline-size;
}

@media (max-width: 760px) {
  .ats-body { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sample { padding: 1rem 1.05rem; font-size: 0.68rem; }
  /* Side by side, the chart's bars were slivers beside their labels. */
  .s-split { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-tag::before { animation: none; }
}

/* The section the sample has on the checker page. */
/* Room below as well as above (Rae, 2026-10-02: "create a little more room for
   this heading"): the upload section after it has no top padding, so with
   none here the card sat on "What does your resume look like to a machine?". */
.sample-section { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); }
.sample-section .section-head p { max-width: 60ch; margin-inline: auto; }

/* Phone and desktop (2026-10-02). The labels take the same 0.75rem floor as
   home.css; the sample page itself is exempt, because it is a page in
   miniature and its type is set in proportion to one. "Overall 32 · At
   risk" broke after "At" on a phone, so it stays whole and drops under the
   title when there is no room beside it. The Word link was 21px tall, under
   the 24px a finger needs. */
.stage-tag, .meters-title { font-size: 0.75rem; }
.meters-title { flex-wrap: wrap; gap: 0.2rem 0.8rem; }
.meters-title span { white-space: nowrap; }
.sample-file { display: inline-block; padding-block: 0.35rem; }