/* The free case, /call. Rebuilt 24 September 2026 in the visual language of the revised site:
   paper grounds, the display serif for what a person would say aloud, the mono for labels, cards
   with a 1px --line-2 border, one dark-ink action. Tokens come from tcs.css. Only /call loads this
   sheet; the v4- prefix is kept because the case runner and the tests name these classes.

   SPACING HAS ONE OWNER, as on /media. tcs.css gives every <section> clamp(48px,6vw,88px) of
   vertical padding, which is right for full-bleed bands and was wrong here: the briefing, the
   call and each part of the reasoning are sections, and each one arrived with up to 176px of
   paper around it. Sections on this page carry no padding of their own; blocks space themselves. */

/* :where() keeps this at the weight of the tcs.css rule it cancels, so every component class on
   this page, the briefing and the reveal cards among them, still sets its own padding. */
:where(.fc-page main) section { padding: 0; }
.fc-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.fc-page .eyebrow { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
.fc-k { font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.fc-page h2, .fc-page h3 { letter-spacing: -.01em; }

/* ---------------------------------------------------------------- the situation */
.fc-intro { padding: clamp(24px, 5vw, 52px) 0 0; }
.fc-intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 3.4rem); line-height: 1.03; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.fc-facts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .88rem; color: var(--ink-2); }
.fc-facts li { position: relative; padding-left: 14px; }
.fc-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.v4-role { color: var(--ink-2); margin: 0; max-width: 62ch; font-size: 1.02rem; }
.v4-role b { color: var(--ink); }

/* The briefing, grouped: who is who, what happened, what landed, the numbers. */
.fc-brief { margin: 24px 0 0; padding: 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); }
.v4-people { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); }
.v4-people div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
.v4-people dt { font-weight: 700; }
.v4-people dd { margin: 0; color: var(--ink-2); }
.v4-event { font-size: 1.05rem; margin: 0 0 14px; }
.v4-art { border: 1px solid var(--line-2); border-radius: 12px; background: #fff; margin: 12px 0 0; overflow: hidden; }
.v4-art-h { padding: 9px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.v4-art-b { padding: 14px; }
.v4-art-b p { margin: 0 0 8px; }
.v4-art-b p:last-child { margin: 0; }

/* The table fits the screen at every width rather than scrolling inside itself: a table a phone
   has to swipe sideways hides the two columns the case turns on. Headings wrap; figures never do. */
.v4-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.v4-table th, .v4-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: bottom; }
.v4-table thead th { font-family: var(--mono); font-weight: 400; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: transparent; white-space: normal; line-height: 1.3; }
.v4-table td { white-space: nowrap; }
.v4-table th:first-child, .v4-table td:first-child { text-align: left; padding-left: 0; }
.v4-table th:last-child, .v4-table td:last-child { padding-right: 0; }
.v4-table tbody th { font-weight: 600; font-family: var(--sans); font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; white-space: nowrap; }
.v4-table .v4-total th, .v4-table .v4-total td { font-weight: 700; border-bottom: 0; border-top: 1.5px solid var(--ink); }
.v4-note { font-size: .86rem; color: var(--ink-3); margin: 10px 0 0; }
/* The fallback, not the plan: the table fits every phone this site measures. Below that (320px, or
   400% zoom) it scrolls inside its own labelled, focusable region rather than moving the page. */
.v4-table-scroll { overflow-x: auto; }
.v4-table-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- the call
   Choosing is reversible, committing is not, and each state looks like what it is. */
.v4-commit { margin: 24px 0 0; padding: 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--paper-2); }
.v4-opts { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.v4-prompt { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.85rem); line-height: 1.12; letter-spacing: -.012em; padding: 0; margin: 0 0 4px; color: var(--ink); }
.v4-stake { font-size: .9rem; color: var(--ink-2); margin: 0 0 6px; }
.v4-opt{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:start;gap:0 12px;min-height:48px;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--paper);color:var(--ink);line-height:1.45;cursor:pointer;transition:border-color var(--t),background-color var(--t)}
/* The native radio stays in the page for its semantics and its keyboard behaviour, invisible and
   covering the whole card, so a tap anywhere on the card is a tap on the radio. The dot is drawn. */
.v4-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v4-opt::before { content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--ink-3); background: var(--paper); box-sizing: border-box; }
/* The drawn state follows the radio itself, so it holds without script too; the class is the
   fallback for a browser without :has(). */
.v4-opt:has(input:checked)::before, .v4-opt.is-selected::before { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 0 38%, var(--paper) 42%); }
.v4-letter { font-family: var(--mono); font-size: .8rem; color: var(--ink-3); padding-top: 3px; }
.v4-opt:hover { border-color: var(--ink-3); }
.v4-opt:has(input:checked), .v4-opt.is-selected { border-color: var(--ink); background: var(--card); box-shadow: inset 5px 0 0 var(--ink); }
.v4-opt:has(input:checked) .v4-letter, .v4-opt.is-selected .v4-letter { color: var(--ink); font-weight: 700; }
/* Forced colours strip backgrounds and shadows, which is everything the selected state is drawn
   with. The dot is redrawn in system colours and the chosen card gets a heavier border. */
@media (forced-colors: active) {
  .v4-opt::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .v4-opt:has(input:checked)::before, .v4-opt.is-selected::before { background: CanvasText; box-shadow: inset 0 0 0 3px Canvas; }
  .v4-opt:has(input:checked), .v4-opt.is-selected { border-width: 3px; border-color: Highlight; }
}
/* The focus ring sits on the whole option, not on a 20px circle inside it. */
.v4-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.fc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 0; }
.fc-go[hidden] { display: none; }
.fc-hint { margin: 0; font-size: .9rem; color: var(--ink); }

/* Committed: the radios step aside, the call you made keeps its card and an ink edge, the others
   give up their fill but never their ink. Fading them is the bug that has shipped twice here. */
.v4-opts[data-locked] .v4-opt { cursor: default; grid-template-columns: auto 1fr; }
/* The radios stay in the accessibility tree, disabled, with the call still checked. */
.v4-opts[data-locked] .v4-opt::before { display: none; }
.v4-opts[data-locked] .v4-opt input { cursor: default; }
.v4-opts[data-locked] .v4-opt:hover { border-color: var(--line-2); }
.v4-opts[data-locked] .v4-opt:not(.is-selected) { background: transparent; border-style: dashed; }
.v4-opts[data-locked] .v4-opt.is-selected:hover { border-color: var(--ink); }
.v4-opts:disabled .v4-opt { color: var(--ink); }
.v4-tag { grid-column: 1 / -1; display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 4px; }

/* ---------------------------------------------------------------- the reveal
   Three parts in the order a person needs them: your decision, the reasoning, what to keep. */
.v4-reveal { display: grid; gap: 16px; margin: 28px 0 0; }
.fc-block { padding: 22px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--card); scroll-margin-top: 16px; }
.fc-block p { margin: 0 0 10px; }
.fc-block p:last-child { margin-bottom: 0; }
.v4-verdict { border-left: 5px solid var(--ink); }
.v4-verdict.is-strongest { border-left-color: var(--ok); }
.v4-verdict-line { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.65rem); line-height: 1.18; margin: 0 0 12px; }
.v4-verdict-line:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.v4-verdict b { color: var(--ink); }
.v4-h2 { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.15; margin: 4px 0 8px; }
.v4-h3 { font-size: 1rem; margin: 16px 0 6px; }
.v4-changes { margin: 0; padding-left: 20px; }
.v4-changes li { margin: 0 0 6px; color: var(--ink-2); }

/* The specialist, after the commit, in its own colours, beside its one line. */
.fc-louli { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin: 2px 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.fc-louli-face { position: relative; display: block; width: 76px; height: 88px; border-radius: 14px; overflow: hidden; background: linear-gradient(to bottom, var(--tint, var(--l-planning)) 0 80%, var(--floor, #DDBD6E) 80% 100%); }
.fc-louli-planning { --tint: #EED595; --floor: #DDBD6E; }
.fc-louli-face img { position: absolute; left: 50%; bottom: 8%; height: 84%; width: auto; max-width: none; translate: -50% 0; }
.fc-louli figcaption { display: grid; gap: 4px; }
.fc-louli-name { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fc-louli-line { font-family: var(--serif); font-size: 1.2rem; line-height: 1.22; color: var(--ink); }

.v4-rule { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .8vw, 1.4rem); line-height: 1.25; color: var(--ink); margin: 0 0 16px; }
.v4-keep { border: 1.5px solid var(--ink); border-radius: 14px; padding: 16px 18px; background: #fff; }
.v4-keep p { margin: 0 0 10px; white-space: pre-wrap; }
.fc-keep-k { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v4-keep-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }

.v4-next { padding: 22px; border-radius: 18px; background: var(--ink); color: var(--paper); }
.v4-next p { margin: 0 0 14px; color: #DDD6C2; }
.v4-next b { color: var(--paper); }
.v4-next-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.v4-next .btn-p { background: var(--dark-amber); border-color: var(--dark-amber); color: var(--dark); }
.v4-next .btn-p:hover { background: var(--dark-amber); color: var(--dark); filter: brightness(1.06); }
.v4-next a:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }

/* ---------------------------------------------------------------- the continuation, the workbench, the new brief */
.fc-label { margin-top: 12px !important; }
.fc-conseq { border-left: 5px solid var(--line-2); }
.fc-bench-list { display: grid; gap: 8px; margin: 12px 0; }
.fc-bench-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "box name min" "box even even"; gap: 2px 12px; align-items: center; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; cursor: pointer; min-height: 44px; }
.fc-bench-row:has(input:checked) { border-color: var(--ink); }
.fc-bench-row:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.fc-bench-row input { grid-area: box; width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.fc-bench-name { grid-area: name; font-weight: 600; }
.fc-bench-min { grid-area: min; font-family: var(--mono); font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.fc-bench-even { grid-area: even; font-size: .86rem; color: var(--ink-3); }
.fc-bench-even.is-under { color: var(--bad); }
.fc-bench-out { padding: 12px 14px; border-radius: 12px; background: var(--paper-2, #f3efe4); margin: 0; }
.fc-tr-form label { display: block; margin: 12px 0 8px; }
.fc-tr-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fc-tr-cur { font-family: var(--mono); color: var(--ink-3); }
.fc-tr-row input { flex: 1 1 140px; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; font: inherit; font-variant-numeric: tabular-nums; background: var(--paper); max-width: 220px; }
.fc-tr-row input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.fc-tr-row .btn { min-height: 44px; }
.fc-tr-verdict { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--line-2); background: #fff; }
.fc-tr-verdict:empty { display: none; }
.fc-tr-verdict.is-right { border-left-color: var(--ok); }
.fc-tr-verdict.is-wrong { border-left-color: var(--bad); }
.fc-tr-verdict:focus-visible, .fc-tr-fb:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.fc-tr-choice { margin-top: 16px; }
.fc-tr-opts { flex-direction: column; align-items: stretch; }
.fc-tr-opts .btn { justify-content: flex-start; text-align: left; gap: 10px; white-space: normal; line-height: 1.3; padding: 10px 14px; }
.fc-tr-opts .btn .v4-letter { flex: none; }
.fc-tr-opts .btn.is-picked { border-color: var(--ink); background: var(--paper); opacity: 1; }
.fc-tr-opts .btn:disabled:not(.is-picked) { opacity: .55; }
.fc-tr-fb { margin-top: 10px; }
.fc-tr-fb:empty { display: none; }
.fc-tr-fb p { margin: 0 0 8px; }
.fc-tr-line { font-weight: 600; }

/* ---------------------------------------------------------------- optional */
.fc-optional { margin: 12px 0 0; display: grid; gap: 12px; }
.fc-optional > .fc-k { margin: 8px 0 0; }
.v4-deeper { border: 1px solid var(--line-2); border-radius: 14px; padding: 0 18px; background: var(--card); }
.v4-deeper summary { cursor: pointer; font-weight: 600; padding: 14px 0; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; }
.v4-deeper summary::-webkit-details-marker { display: none; }
.v4-deeper summary::after { content: "+"; content: "+" / ""; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--ink-2); flex: none; }
.v4-deeper[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.v4-deeper-b { padding: 0 0 16px; }
.v4-deeper-b p { margin: 0 0 8px; color: var(--ink-2); }
.v4-yt, .v4-cap { border: 1px solid var(--line-2); border-radius: 14px; padding: 18px; background: var(--card); }
.v4-yt p, .v4-cap p { margin: 0 0 8px; }
.fc-opt-k { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.v4-yt-opts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.v4-yt-opts .btn{min-height:44px}
.v4-cap label { display: block; font-weight: 600; margin: 8px 0 6px; }
.v4-cap input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 10px; font: inherit; background: var(--paper); margin-bottom: 10px; }
.v4-cap input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.v4-cap-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.v4-cap .btn { min-height: 44px; }
.v4-err { color: var(--bad); font-size: .9rem; margin: 8px 0 0; }
.v4-fine { font-size: .88rem; color: var(--ink-3); margin: 8px 0 0; }
.v4-fine[tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* ---------------------------------------------------------------- about this case */
.v4-about { margin: 48px 0 0; padding: 24px 0 56px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
.v4-about h2 { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; margin: 0 0 10px; color: var(--ink); }
.v4-about p { margin: 0 0 10px; max-width: 64ch; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 520px) {
  .fc-brief, .v4-commit, .fc-block, .v4-next { padding: 16px; border-radius: 16px; }
  .v4-art-b { padding: 12px; }
  .v4-table { font-size: .8rem; }
  .v4-table th, .v4-table td { padding: 7px 4px; }
  .v4-table thead th { font-size: .58rem; letter-spacing: .04em; }
  .v4-people div { grid-template-columns: 1fr; gap: 0; }
  .v4-opt { padding: 12px 14px; gap: 0 10px; }
  .fc-louli { grid-template-columns: 64px 1fr; }
  .fc-louli-face { width: 64px; height: 76px; }
}
/* The narrowest phones this site measures: the fifth column is the one the case turns on, so the
   whole table fits at 360px rather than scrolling. */
@media (max-width: 380px) {
  .fc-plan .v4-art-b { padding: 12px 10px; }
  .v4-table { font-size: .76rem; }
  .v4-table th, .v4-table td { padding: 7px 3px; }
  .v4-table thead th { font-size: .54rem; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: no-preference) {
  .v4-reveal > * { animation: v4rise .3s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes v4rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}