/* Interview prep v2 (courses/build-interview.js, src/interview/loop.js). Every session runs in the drill engine's
   stage (src/drills/drills.css): a flat sheet to read, an instrument to answer on. Around it, flat sheets only: the
   loop (roles, a date, readiness), the plan, the rounds. Keycaps (.dr-key) only where you press; bars and words for
   readiness, never counts. Uses the study.css variables, so light and dark both work. Phone first. */

.iv { display: grid; gap: 22px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 0 40px; }
.iv [hidden] { display: none !important; }

/* ---------- headings, like Practice ---------- */
.iv-head { padding: 0 4px; }
.iv-headrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h switch" "sub switch"; align-items: end; column-gap: 24px; }
.iv-headrow .iv-h1 { grid-area: h; }
.iv-headrow .iv-sub { grid-area: sub; }
.iv-h1 { margin: 0; font: 380 clamp(40px, 5vw, 60px)/1.02 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.iv-h1 i, .iv-h2 i { font-style: italic; }
.iv-sub { margin: 12px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.iv-h2 { margin: 0; font: 380 30px/1.08 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.iv-h3 { margin: 0; font: 500 19px/1.3 var(--sans); letter-spacing: -.01em; }
.iv-lede { margin: 10px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.iv-sheet { padding: 32px 36px 30px; min-width: 0; }

/* quiet text buttons and links */
.iv-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 14.5px var(--sans); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .16s var(--ease); }
.iv-linkbtn:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.iv-inlink, .iv-prep a, .iv-learn a, .iv-alt a, .iv-note a { color: var(--ink); border-bottom: 1px solid var(--rule-2); transition: border-color .16s var(--ease); }
.iv-inlink:hover, .iv-prep a:hover, .iv-learn a:hover, .iv-alt a:hover, .iv-note a:hover { border-color: var(--ink-3); }

/* ---------- readiness: words and a bar (the engine's .dr-bar), no numbers ---------- */
.iv-ready { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 12px; }
.iv-ready .dr-bar { grid-column: 1 / -1; }
.iv-ready-t { min-width: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
a.iv-ready-t { justify-self: start; border-bottom: 1px solid var(--rule-2); }
a.iv-ready-t:hover { border-color: var(--ink-3); }
.iv-ready-t.is-quiet { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.iv-ready-w { grid-column: 2; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.iv-ready.is-untried .iv-ready-w { color: var(--ink-3); }
.iv-ready-role { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); }

/* ---------- your loop (home): six roles, one tap ---------- */
.iv-role { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 2px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); font: inherit; }
.iv-role-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.iv-role-t b { font-size: 16px; font-weight: 500; }
.iv-role-t small { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.iv-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-3); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.iv-role:hover .iv-radio { border-color: var(--ink); }
.iv-role[aria-pressed="true"] .iv-radio { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 10px var(--ink); }
.iv-role:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 10px; }

/* the date: a plain field, optional */
.iv-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.iv-when-l { font-size: 15px; font-weight: 500; }
.iv-when-in { display: inline-flex; align-items: center; gap: 14px; }
.iv-date { height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--card); color: var(--ink); font: 500 15px var(--sans); font-variant-numeric: tabular-nums; color-scheme: light; }
[data-theme="dark"] .iv-date { color-scheme: dark; }
.iv-date:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.iv-mine { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule); }
/* Coming back with a role set: your loop first, the date, then the roles to switch to. Decided when the page opens. */
.iv-loop.is-set { display: flex; flex-direction: column; }
.iv-loop.is-set > .iv-mine { order: 1; }
.iv-loop.is-set > .iv-when { order: 2; }
.iv-loop.is-set > .iv-pick { order: 3; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.iv-mine > * { max-width: 620px; }
.iv-mine .iv-ready-role { margin: 0; padding: 0; border: 0; }
.iv-next { margin-top: 18px; }
.iv-next-k { margin: 0 0 2px; font-size: 13px; color: var(--ink-3); }
.iv-more { margin: 10px 0 0; font-size: 14.5px; }
.iv-alt { margin: -6px 4px 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.iv-honest { margin: 6px auto 0; max-width: 60ch; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* ---------- steps: a session to start (plan, up next) ---------- */
.iv-steps { list-style: none; margin: 0; padding: 0; }
.iv-step { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 0; }
.iv-step + .iv-step { border-top: 1px solid var(--rule); }
.iv-step-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.iv-step-t b { font-size: 15.5px; font-weight: 500; }
.iv-step-t small { font-size: 13.5px; color: var(--ink-3); }
.iv-step.is-done .iv-step-t b { color: var(--ink-2); }
.iv-key { flex: none; min-height: 48px; padding: 0 18px; font-size: 14.5px; text-decoration: none; }
.iv-donemark { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--green); }
.iv-donemark svg { width: 13px; height: 13px; }

/* ---------- a role page: the hero and the plan side by side, then the stage, then the rounds ---------- */
.iv-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.iv-hero { display: flex; flex-direction: column; }
.iv-hero .iv-h1 { margin-top: 6px; font-size: clamp(40px, 4.6vw, 56px); }
.iv-hero .iv-ready-role { margin-top: auto; }
.iv-hero .iv-firms { margin-bottom: 24px; }
.iv-firms { margin: 16px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.iv-firms b, .iv-fact b { font-weight: 500; color: var(--ink); }
.iv-plan { display: flex; flex-direction: column; }
.iv-days { list-style: none; margin: 14px 0 0; padding: 0; }
.iv-day { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 4px 0; }
.iv-day + .iv-day { border-top: 1px solid var(--rule); }
.iv-day.is-next { display: block; }
.iv-day-k { padding-top: 22px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.iv-wall { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.iv-wall .st-link { margin-left: 4px; }
.iv-plan .iv-when { margin-top: auto; }
.iv-plan > .iv-days, .iv-plan > .iv-wall { margin-bottom: 18px; }

.iv-backrow { margin: -8px 4px -10px; scroll-margin-top: 12px; }
.iv-stage { scroll-margin-top: 12px; min-height: 120px; }

/* the rounds: a numbered list on one sheet, hairlines between, keys on the right */
.iv-ai { margin: 14px 0 0; }
.iv-map { list-style: none; margin: 14px 0 0; padding: 0; }
.iv-round { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(240px, 300px); gap: 12px 28px; padding: 26px 0 24px; border-top: 1px solid var(--rule); scroll-margin-top: 12px; }
.iv-round.is-plain { grid-template-columns: 52px minmax(0, 1fr); }
.iv-rn { padding-top: 3px; font: 500 14px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .16s var(--ease); }
.iv-round.is-on .iv-rn { color: var(--orange); }
.iv-round-b { min-width: 0; }
.iv-round-b > p { margin: 8px 0 0; max-width: 66ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.iv-fact { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 66ch; }
.iv-round-b > .iv-fact { font-size: 14.5px; }
.iv-round-b > .iv-prep { color: var(--ink); }
.iv-round-b > .iv-learn { font-size: 14px; color: var(--ink-3); }
.iv-lock { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--ink-3); }
.iv-lock svg { width: 14px; height: 14px; }
.iv-round-s { min-width: 0; display: grid; align-content: start; gap: 16px; padding-top: 4px; }
.iv-keys { display: flex; flex-direction: column; gap: 10px; }
.iv-keys .iv-key { justify-content: flex-start; width: 100%; padding: 0 16px; }

/* sources */
.iv-srcnote { margin: 8px 0 0; max-width: 66ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.iv-srcs { list-style: none; margin: 16px 0 0; padding: 0; }
.iv-srcs li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rule); }
.iv-srcs a { justify-self: start; font-size: 15px; color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.iv-srcs a:hover { border-color: var(--ink-3); }
.iv-srcs span { font-size: 13px; color: var(--ink-3); }
.iv-other { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 0 6px; font-size: 14.5px; color: var(--ink-3); }
.iv-other a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.iv-other a:hover { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }

/* ---------- the drill pages: a heading, the stage, one note ---------- */
.iv-switch { grid-area: switch; display: flex; gap: 4px; margin-bottom: 2px; }
.iv-tab { position: relative; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font: 500 16px var(--sans); color: var(--ink-3); transition: color .16s var(--ease); }
.iv-tab:hover { color: var(--ink-2); }
.iv-tab[aria-selected="true"] { color: var(--ink); }
.iv-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--ink); }
.iv-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; }
.iv-note { margin: 0 4px; max-width: 76ch; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

/* ---------- narrower ---------- */
@media (max-width: 1100px) {
  .iv-top { grid-template-columns: minmax(0, 1fr); }
  .iv-round { grid-template-columns: 52px minmax(0, 1fr); }
  .iv-round-s { grid-column: 2; padding-top: 6px; }
  .iv-keys { flex-direction: row; flex-wrap: wrap; }
  .iv-keys .iv-key { width: auto; }
}
@media (max-width: 900px) {
  .iv-sheet { padding: 26px 22px 28px; }
  [data-page^="interview"] .st-mback { margin-left: 0; margin-bottom: -10px; }
}
@media (max-width: 620px) {
  .iv { padding-top: 12px; gap: 18px; }
  .iv-headrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "sub" "switch"; }
  .iv-switch { margin: 10px 0 -6px -12px; }
  .iv-h1, .iv-hero .iv-h1 { font-size: 42px; }
  .iv-sub { font-size: 16.5px; line-height: 1.5; }
  .iv-sheet { padding: 24px 18px 24px; border-radius: 18px; }
  .iv-h2 { font-size: 28px; }
  .iv-day { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .iv-day-k { padding-top: 12px; }
  .iv-step { gap: 12px; }
  .iv-key { padding: 0 14px; }
  .iv-round, .iv-round.is-plain { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 22px 0 20px; }
  .iv-round-s { grid-column: 1; padding-top: 12px; }
  .iv-keys { flex-direction: column; }
  .iv-keys .iv-key { width: 100%; }
}

/* ---------------------------------------------------------------- Talk it through (src/interview/talk.js) */
.tk-lamps { letter-spacing: .18em; }
.tk-sec { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.tk-h { margin: 0 0 10px; font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tk-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-ideas li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.tk-tick { width: 22px; height: 22px; margin-top: 1px; padding: 0; border-radius: 6px; border: 1.5px solid var(--rule-2, var(--rule)); background: var(--card); display: grid; place-items: center; cursor: pointer; transition: background-color .16s var(--ease), border-color .16s var(--ease); }
.tk-tick:hover { border-color: var(--ink-3); }
.tk-tick.on { background: var(--orange); border-color: var(--orange); }
.tk-tick.on::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.tk-note { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); }
.tk-fold summary { cursor: pointer; width: fit-content; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2, var(--rule)); text-underline-offset: 4px; }
.tk-fold[open] summary { margin-bottom: 10px; }
.tk-full h4 { margin: 16px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.tk-full h4:first-child { margin-top: 4px; }
.tk-full p, .tk-a { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tk-code { margin: 4px 0 12px; padding: 12px 14px; overflow-x: auto; border-radius: 8px; background: var(--card-2); font: 12.5px/1.55 var(--mono); color: var(--ink); white-space: pre; }
.tk-follow + .tk-follow { margin-top: 14px; }
.tk-q { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.tk-more { margin-top: 12px; }
.tk-wrong { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tk-wrong li { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.tk-wrong b { color: var(--ink); font-weight: 500; }
.tk-foot { margin: 22px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.tk-foot a { color: var(--ink-2); }
.tk-foot .iv-lock { display: inline-flex; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; }
.tk-endline { margin: 4px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.tk .dr-prompt code, .tk-sec code { font: .92em var(--mono); }

/* ---------------------------------------------------------------- v3 (2026-11-03): drawn rooms, gauges, plain words */
/* Hero without a card: the role's name, one line, and how ready you are as a needle gauge. */
.iv-hero-open { justify-content: flex-end; padding: 8px 0 4px; }
.iv-hero-open .iv-ready-role { margin-top: 26px; padding-top: 0; border-top: 0; }
/* Gauge: same hooks as the bar (data-w; loop.js sets --v from 0 to 1). */
.iv-ready-g { display: flex; align-items: center; gap: 14px; }
.iv-ready-g .iv-ready-txt { display: grid; gap: 2px; }
.iv-ready-g .iv-ready-w { grid-column: auto; font-size: 13.5px; }
.iv-gauge { flex: none; width: 64px; height: 40px; overflow: visible; }
.iv-ready-role .iv-gauge { width: 88px; height: 55px; }
.iv-needle { stroke: var(--ink); transform-box: view-box; transform-origin: 32px 34px; transform: rotate(calc(var(--v, 0) * 180deg - 90deg)); transition: transform .9s cubic-bezier(.2, .8, .2, 1.2); }
.iv-ready.is-untried .iv-needle { stroke: var(--ink-3); }
.iv-round-s .iv-ready-g { gap: 10px; }
/* Your interview day: one drawn room per round, in order. */
.iv-dayfig { margin-top: 24px; }
.iv-rooms { position: relative; list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.iv-rooms::before { content: ""; position: absolute; left: 8%; right: 8%; top: 74px; border-top: 1.5px dashed var(--ink-3); opacity: .5; }
.iv-room { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; text-align: center; }
.iv-door { position: relative; display: grid; place-items: center; width: min(150px, 100%); aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 999px 999px 12px 12px; background: var(--card); transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.iv-door:hover { transform: translateY(-2px); }
.iv-art { width: 74%; height: auto; }
.iv-art .art-hot { fill: var(--ink); } .iv-art .art-hot-t { fill: var(--ink); } .iv-art .art-hot-s { stroke: var(--ink); fill: none; }
.iv-room:not(.is-next) .iv-art { opacity: .55; }
.iv-room.is-next .iv-door { border-color: var(--orange); box-shadow: 0 0 0 6px rgba(255, 90, 31, .12); }
.iv-room.is-next .art-hot, .iv-room.is-next .art-hot-t { fill: var(--orange); } .iv-room.is-next .art-hot-s { stroke: var(--orange); }
.iv-room.is-next .art-hot { animation: iv-pulse 1.8s ease-in-out infinite; }
@keyframes iv-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .iv-room.is-next .art-hot { animation: none; } .iv-needle { transition: none; } }
.iv-room-k { font: 600 11px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.iv-room.is-next .iv-room-k { color: var(--orange); }
.iv-rounds { margin-top: 24px; }
.iv-how { color: var(--ink); }
.iv-how a, .iv-round-b a { color: inherit; }
/* Role cards on the home carry their drawing. */
.iv-role-art { flex: none; display: grid; place-items: center; width: 64px; height: 56px; border: 1.5px solid var(--ink); border-radius: 999px 999px 8px 8px; background: var(--card); }
.iv-role-art .iv-art { width: 82%; opacity: .8; }
.iv-role[aria-pressed="true"] .iv-role-art { border-color: var(--orange); }
.iv-role[aria-pressed="true"] .art-hot, .iv-role[aria-pressed="true"] .art-hot-t { fill: var(--orange); } .iv-role[aria-pressed="true"] .art-hot-s { stroke: var(--orange); }
@media (max-width: 760px) {
  .iv-rooms { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .iv-rooms::before { display: none; }
}
.iv-rounds .iv-map > .iv-round:first-child { border-top: 0; padding-top: 4px; }


/* ---------------------------------------------------------------- v5: the curriculum's card system */
/* Readiness: five pips and a word. */
.iv-ready-p { display: flex; align-items: center; gap: 12px; }
.iv-ready-p .iv-ready-txt { display: grid; gap: 1px; }
.iv-ready-p .iv-ready-w { grid-column: auto; font-size: 13.5px; }
.iv-pips { display: inline-flex; flex: none; gap: 4px; }
.iv-pips i { width: 16px; height: 6px; border-radius: 3px; background: var(--rule-2, var(--rule)); transition: background-color .3s var(--ease); }
.iv-pips i.on { background: var(--ink); }
.iv-ready-role .iv-pips i { width: 22px; height: 8px; border-radius: 4px; }
/* Your interview day: the rounds as folders, in order. */
.iv-dayfig .iv-rooms { grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.iv-dayfig .iv-rooms::before { top: 50%; opacity: .35; }
.iv-roomcard { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 4.2; padding: 14px; border-radius: 18px; background: var(--tint); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.iv-roomcard .st-folder { height: 92%; }
.iv-roomcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06), var(--lift-2); }
.iv-roomcard:hover .st-folder-face { transform: perspective(800px) rotateY(-6deg); }
.iv-room:not(.is-next) .iv-roomcard .st-coversvg .pulse { animation: none; }
.iv-room.is-next .iv-roomcard { box-shadow: inset 0 0 0 2px #FF5A1F, 0 10px 30px -14px rgba(255, 90, 31, .5); }
.iv-room .iv-room-k { font: 500 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.iv-room.is-next .iv-room-k { color: var(--ink); }
.iv-room.is-next .iv-room-k::before { content: "Next · "; color: var(--orange); }
@media (max-width: 760px) {
  .iv-dayfig .iv-rooms { grid-auto-flow: column; grid-auto-columns: 44%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .iv-dayfig .iv-room { scroll-snap-align: start; }
}
/* v5 home: your role's summary is one panel. */
.iv-mine:not([hidden]) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 18px 36px; margin-top: 22px; padding: 22px 26px; border: 0; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.iv-mine > * { max-width: none; }
.iv-mine .iv-ready-role .iv-ready-t { font-size: 17px; font-weight: 500; }
.iv-mine .iv-next { margin: 0; padding-left: 36px; border-left: 1px solid var(--rule); }
.iv-mine .iv-step { min-height: 0; padding: 4px 0 0; }
@media (max-width: 760px) {
  .iv-mine:not([hidden]) { grid-template-columns: 1fr; padding: 18px; }
  .iv-mine .iv-next { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}


/* ---------------------------------------------------------------- v6 home: your role (like Practice's Today) */
.iv-myrole:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; padding: 40px 44px; margin-bottom: 26px; border-radius: 28px; }
.iv-k { margin: 0; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.iv-my-h { margin: 10px 0 0; } .iv-my-h a { color: inherit; text-decoration: none; }
.iv-my-sub { margin: 10px 0 0; font-size: 16.5px; color: var(--ink-2); }
.iv-myrounds { list-style: none; margin: 24px 0 26px; padding: 0; }
.iv-myrounds li { border-top: 1px solid var(--rule); } .iv-myrounds li:last-child { border-bottom: 1px solid var(--rule); }
.iv-mr { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--ink); text-decoration: none; }
.iv-mr:hover .iv-mr-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-2, var(--rule)); }
.iv-mr-t { flex: 1; min-width: 0; font-size: 15.5px; }
.iv-mr .iv-pips i { width: 14px; height: 5px; }
.iv-mr-w { flex: none; width: 128px; text-align: right; font-size: 13.5px; color: var(--ink-2); } .iv-mr-w.is-quiet { color: var(--ink-3); }
.iv-my-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.iv-go { height: 56px; padding: 0 24px; border-radius: 14px; font-size: 16px; }
.iv-my-side { display: flex; flex-direction: column; border-radius: 22px; background: var(--tint); overflow: hidden; }
.iv-my-cover { flex: 1; display: grid; place-items: center; min-height: 250px; padding: 28px 24px 18px; }
.iv-my-cover .st-folder { height: 210px; transform: rotate(-3deg); filter: drop-shadow(0 18px 22px rgba(29, 28, 26, .18)); }
.iv-my-date { padding: 16px 22px 18px; background: rgba(252, 251, 248, .55); color: #1D1C1A; }
.iv-dw { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.iv-dw b { font-weight: 500; } .iv-dw span { font-size: 13.5px; color: rgba(29, 28, 26, .6); }
.iv-dw.is-none { color: rgba(29, 28, 26, .7); }
.iv-dacts { display: flex; gap: 18px; margin: 6px 0 0; }
.iv-my-date .iv-linkbtn { color: #1D1C1A; font-size: 14px; }
.iv-dl { display: grid; gap: 6px; font-size: 13.5px; color: rgba(29, 28, 26, .7); }
.iv-dl .iv-date { width: 100%; }
@media (max-width: 760px) {
  .iv-myrole:not([hidden]) { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .iv-my-side { order: -1; flex-direction: row; align-items: center; }
  .iv-my-cover { flex: none; min-height: 0; padding: 14px; } .iv-my-cover .st-folder { height: 104px; }
  .iv-my-date { flex: 1; background: none; padding: 12px 14px 12px 0; }
  .iv-mr-w { width: auto; }
  .iv-go { width: 100%; }
}


/* ---------------------------------------------------------------- v7 home: the role cards (2026-11-08, "the job, drawn")
   Six cards like the home page's "More than lessons" (landing/home-v2.css .mo-card): the role's colour field holding
   one technical drawing of the job (src/interview/role-art.js), paper under it with the name in Fraunces and who it's
   for. They sit on the page, not in a sheet (no cards in cards). The whole card is the key (loop.js: [data-pick],
   aria-pressed). Picked: an ink ring, the drawing raised 4px, its orange part breathing. Hover shows one cause and
   effect per drawing: the ask flips, the buy takes the first ask, the answer's citation runs, the checkpoint lifts,
   the next request drops in. None of it with reduced motion. The field stays light in both themes, like the folders. */
.iv-rcs { display: grid; gap: 30px; margin-top: 8px; }
.iv-rcs-head { padding: 0 4px; }
.iv-rc-group { display: grid; gap: 12px; }
.iv-rc-gname { margin: 0; padding: 0 4px; font: 500 16px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); }
.iv-rc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.iv-rc-cards > li { min-width: 0; }
.iv-rc {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 24px; overflow: hidden;
  font: inherit; text-align: left; color: var(--ink); cursor: pointer; background: var(--card);
  box-shadow: 0 1px 2px rgba(60, 48, 30, .08), 0 18px 40px -20px rgba(60, 48, 30, .30);
  transition: transform .5s var(--enter), box-shadow .5s var(--enter);
  -webkit-tap-highlight-color: transparent;
}
.iv-rc::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08); pointer-events: none; transition: box-shadow .3s var(--ease); }
.iv-rc-field {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background-color: var(--face);
  background-image: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%), radial-gradient(rgba(29, 28, 26, .075) .8px, transparent 1px);
  background-size: auto, 4px 4px;
  box-shadow: inset 0 -1px 0 rgba(29, 28, 26, .10);
}
.iv-rc-svg { position: absolute; inset: 14px 14px 10px; width: calc(100% - 28px); height: calc(100% - 24px); overflow: visible; transition: transform .5s var(--enter); }
.iv-rc-fold { position: absolute; inset: 0; display: grid; place-items: center; }
.iv-rc-fold .st-folder { height: 78%; transform: rotate(-3deg); filter: drop-shadow(0 14px 18px rgba(29, 28, 26, .18)); }
.iv-rc-paper { display: grid; gap: 8px; padding: 20px 24px 24px; }
.iv-rc-name { font: 340 30px/1.04 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; color: var(--ink); }
.iv-rc-name i { font-style: italic; font-weight: 330; }
.iv-rc-line { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* hover (and keyboard focus): the card lifts and the drawing shows its one cause and effect */
.iv-rc-flap text { transform-box: fill-box; transform-origin: center; }
.iv-rc-hand, .iv-rc-inc, .iv-rc-next, .iv-rc-ckpt { transition: transform .6s var(--enter); }
@media (hover: hover) {
  .iv-rc:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(60, 48, 30, .08), 0 26px 50px -20px rgba(60, 48, 30, .38); }
  .iv-rc:hover .iv-rc-flap text { animation: iv-rc-flip .5s var(--ease) 2; }
  .iv-rc:hover .iv-rc-hand { transform: translateY(-3px); }
  .iv-rc:hover .iv-rc-inc { transform: translateY(-26px); }
  .iv-rc:hover .iv-rc-next { transform: translateY(40px); }
  .iv-rc:hover .iv-rc-ckpt { transform: translateY(-4px); }
  .iv-rc:hover .iv-rc-link { animation: iv-rc-march 1.2s linear infinite; }
}
.iv-rc:focus-visible .iv-rc-flap text { animation: iv-rc-flip .5s var(--ease) 2; }
.iv-rc:focus-visible .iv-rc-hand { transform: translateY(-3px); }
.iv-rc:focus-visible .iv-rc-inc { transform: translateY(-26px); }
.iv-rc:focus-visible .iv-rc-next { transform: translateY(40px); }
.iv-rc:focus-visible .iv-rc-ckpt { transform: translateY(-4px); }
.iv-rc:focus-visible .iv-rc-link { animation: iv-rc-march 1.2s linear infinite; }
@keyframes iv-rc-flip { 50% { transform: scaleY(.1); } }
@keyframes iv-rc-march { to { stroke-dashoffset: -14.8; } }

/* picked: an ink ring, the drawing raised a little, its orange part breathing; the rest stay as they are */
.iv-rc[aria-pressed="true"]::before { box-shadow: inset 0 0 0 2px var(--ink); }
.iv-rc[aria-pressed="true"] .iv-rc-svg { transform: translateY(-4px); }
.iv-rc[aria-pressed="true"] :is(.iv-rc-flap text, .iv-rc-live, .iv-rc-first, .iv-rc-inc, .iv-rc-cite, .iv-rc-best, .iv-rc-ckpt, .iv-rc-next) { animation: iv-rc-breathe 2.8s ease-in-out infinite; }
@keyframes iv-rc-breathe { 50% { opacity: .55; } }
.iv-rc:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 4px; }
.iv-rc:focus:not(:focus-visible) { outline: none; }
/* a role with no drawing yet shows its folder cover; only the picked one's orange part moves */
.iv-rc:not([aria-pressed="true"]) .st-coversvg .pulse { animation: none; }

[data-theme="dark"] .iv-rc { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -20px rgba(0, 0, 0, .7); }
[data-theme="dark"] .iv-rc::before { box-shadow: inset 0 0 0 1px rgba(238, 235, 228, .07); }
[data-theme="dark"] .iv-rc[aria-pressed="true"]::before { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) { [data-theme="dark"] .iv-rc:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 26px 50px -20px rgba(0, 0, 0, .8); } }

@media (max-width: 1180px) { .iv-rc-name { font-size: 27px; } .iv-rc-paper { padding: 18px 20px 22px; } }
@media (max-width: 1000px) { .iv-rc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .iv-rcs { gap: 26px; }
  .iv-rc-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .iv-rc { border-radius: 22px; }
  .iv-rc-svg { inset: 10px 10px 8px; width: calc(100% - 20px); height: calc(100% - 18px); }
  .iv-rc-paper { padding: 16px 20px 20px; gap: 6px; }
  .iv-rc-name { font-size: 28px; }
  .iv-rc-line { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .iv-rc, .iv-rc-svg, .iv-rc-hand, .iv-rc-inc, .iv-rc-next, .iv-rc-ckpt { transition: none !important; }
  .iv-rc, .iv-rc * { animation: none !important; }
  .iv-rc:hover, .iv-rc:hover :is(.iv-rc-hand, .iv-rc-inc, .iv-rc-next, .iv-rc-ckpt), .iv-rc:focus-visible :is(.iv-rc-hand, .iv-rc-inc, .iv-rc-next, .iv-rc-ckpt) { transform: none; }
}


/* ---------------------------------------------------------------- v6 role page */
.iv6 .iv-rhero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; padding: 40px 44px; border-radius: 28px; }
.iv6 .iv-rhero-h { margin: 10px 0 0; font-size: clamp(44px, 5vw, 64px); }
.iv6 .iv-rhero .iv-ready-role { margin: 26px 0 0; padding: 0; border: 0; }
.iv6 .iv-rhero .iv-my-cta { margin-top: 28px; }
.iv6 .iv-dnote { margin: 8px 0 0; font-size: 13px; color: rgba(29, 28, 26, .6); } .iv6 .iv-dnote a { color: #1D1C1A; }
.iv6 .iv-plan:not([hidden]) { margin-top: 24px; }
.iv6 .iv-dayfig { margin-top: 24px; padding: 40px 44px 44px; border-radius: 28px; }
.iv-rts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.iv-rt { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding: 18px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); scroll-margin-top: 16px; transition: box-shadow .2s var(--ease); }
.iv-rt.is-next { box-shadow: inset 0 0 0 2px var(--ink); }
.iv-rt-art { display: grid; place-items: center; align-self: start; aspect-ratio: 1 / 1.15; border-radius: 16px; background: var(--tint); }
.iv-rt-art .st-folder { height: 84%; }
.iv-rt:not(.is-next) .st-coversvg .pulse { animation: none; }
.iv-rt-body { display: flex; flex-direction: column; min-width: 0; padding: 4px 4px 2px 0; }
.iv-rt-k { display: flex; gap: 12px; } .iv-rt-next { display: none; color: var(--ink); } .iv-rt.is-next .iv-rt-next { display: inline; }
.iv-rt-t { margin: 6px 0 0; font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; }
.iv-rt-say { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.iv-rt-how { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); } .iv-rt-how a { color: inherit; }
.iv-rt .iv-learn { margin: 8px 0 0; }
.iv-rt-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 16px; }
.iv-rt-ready { margin: 0; }
.iv-rt-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-act { height: 40px; }
/* Focus: a session has the page to itself. */
.iv6.is-focus > .st-mback, .iv6.is-focus > .iv-rhero, .iv6.is-focus > .iv-plan, .iv6.is-focus > .iv-dayfig, .iv6.is-focus > .iv-other { display: none !important; }
.iv6 .iv-focusbar { max-width: 800px; margin: 0 auto 16px; }
.iv6 .iv-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; color: var(--ink-2); font: 500 15px var(--sans); cursor: pointer; } .iv6 .iv-back:hover { color: var(--ink); } .iv6 .iv-back svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .iv-rts { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .iv6 .iv-rhero { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .iv6 .iv-dayfig { padding: 26px 20px 22px; }
  .iv-rt { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .iv-rt-t { font-size: 20px; }
  .iv-rt-acts { width: 100%; } .iv-act { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- v6: plain buttons, and phones done properly */
.iv-go.dr-key { background: var(--ink); color: var(--card); box-shadow: none; border-radius: 14px; font: 500 15.5px var(--sans); }
.iv-go.dr-key .led { display: none; }
@media (max-width: 760px) {
  .iv-myrole:not([hidden]) .iv-my-side, .iv6 .iv-rhero .iv-my-side { order: 2; }
  .iv-my-side { flex-direction: row; align-items: center; border-radius: 18px; }
  .iv-my-cover { flex: none; min-height: 0; padding: 12px 6px 12px 14px; } .iv-my-cover .st-folder { height: 88px; }
  .iv-my-date { flex: 1; background: none; padding: 12px 16px 12px 4px; }
  .iv-mr-w { font-size: 13px; }
  .iv-mr .iv-pips { display: none; }
}
/* The dark theme's gradient key out-ranked the plain button; keep it plain in both themes. */
.iv-go.dr-key.dark, [data-theme="dark"] .iv-go.dr-key.dark { background: var(--ink); color: var(--card); box-shadow: none; }

/* ---------------------------------------------------------------- round tiles v7 (user, 2026-11-03: button widths
   differed, tiles looked uneven). Practice is a stack of full-width rows, all the same height: the first dark, the rest
   light, the lock (free users) at the start and an arrow at the end. Level and practice always sit at the bottom.
   "How to prepare" is a small labelled note, so rounds without practice still read as designed. */
.iv-rt-foot { display: grid; gap: 12px; justify-content: stretch; align-items: stretch; margin-top: auto; padding-top: 20px; }
.iv-rt-foot > span:empty { display: none; }
.iv-rt-acts { display: grid; gap: 8px; width: 100%; }
.iv-act { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 13px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2, var(--rule)); color: var(--ink); font: 500 15px var(--sans); text-align: left; cursor: pointer; transition: background-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease); }
.iv-act:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.iv-act:active { transform: translateY(1px); }
.iv-act.is-main { background: var(--ink); color: var(--card); box-shadow: none; }
.iv-act.is-main:hover { filter: brightness(1.12); }
.iv-act-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-act-go { display: grid; place-items: center; flex: none; width: 18px; height: 18px; opacity: .7; transition: transform .2s var(--ease); }
.iv-act-go svg { width: 16px; height: 16px; }
.iv-act:hover .iv-act-go { transform: translateX(2px); opacity: 1; }
.is-free .iv-act::before { margin-right: 0; vertical-align: 0; }
.iv-rt-how { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.iv-rt-how-k { display: block; margin-bottom: 4px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.iv-rt .iv-learn { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.iv-rt .iv-learn a { color: var(--ink); }
.iv-rt .iv-learn a:focus { outline: none; } .iv-rt .iv-learn a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 640px) { .iv-act { height: 46px; } }
.iv-rt-acts { grid-template-columns: minmax(0, 1fr); } .iv-rt-acts > .iv-act { min-width: 0; }
.iv-rt-foot { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .iv-act { height: auto; min-height: 46px; padding: 11px 14px; } .iv-act-t { white-space: normal; line-height: 1.3; } }

/* ---------------------------------------------------------------- round tiles v8 (user, 2026-11-03: "stack them,
   make the width bigger, one by one with arrows downwards"). One round per row, full width, joined by a line with an
   arrow in the order of the day. Wide screens: folder | what happens | level and practice (or How to prepare). */
.iv-rts { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.iv-rt { position: relative; }
.iv-rt:not(:last-child)::before { content: ""; position: absolute; left: var(--arrow-x, 93px); top: 100%; width: 2px; height: 34px; background: repeating-linear-gradient(var(--ink-3) 0 4px, transparent 4px 8px); opacity: .7; }
.iv-rt:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--arrow-x, 93px) - 4px); top: calc(100% + 30px); width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); opacity: .9; }
@media (min-width: 901px) {
  .iv-rt { --arrow-x: 106px; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding: 22px 26px 22px 22px; align-items: center; }
  .iv-rt-art { align-self: center; }
  .iv-rt-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: repeat(5, auto) 1fr; column-gap: 40px; align-items: start; padding: 4px 0; }
  .iv-rt-body > * { grid-column: 1; }
  .iv-rt-body > .iv-rt-foot { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; padding: 0; }
  .iv-rt-body:not(:has(.iv-rt-foot)) > .iv-rt-how { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; }
  .iv-rt-say { max-width: 62ch; }
}
@media (max-width: 900px) { .iv-rt { --arrow-x: 87px; } }
@media (max-width: 640px) { .iv-rts { gap: 36px; } .iv-rt { --arrow-x: 57px; } .iv-rt:not(:last-child)::before { height: 26px; } .iv-rt:not(:last-child)::after { top: calc(100% + 22px); } }

/* ---------------------------------------------------------------- the day v9 (user, 2026-11-03: "not refined, think
   how creative people would design it"). The rounds hang on one numbered line, like the track page: the line opens
   with "Start of the day" and closes with "End of the day"; each round's node is faint until you practise it (ink
   ring), filled with a tick at full level, orange for the round to do next. Each round is a tile in the role's colour
   (the card system: fixed light tint, dark text in both themes); the next one gets the ink ring, a lifted folder and
   the bookmark. */
.iv-dayline { position: relative; margin-top: 30px; padding-left: 76px; }
.iv-dayline::before { content: ""; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: var(--rule-2, var(--rule)); }
.iv-daymark { position: relative; margin: 0; padding: 2px 0; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.iv-daymark .iv-node { position: absolute; left: -57px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 6px var(--card); }
.iv-daymark.is-end .iv-node { background: var(--card); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 6px var(--card); }
.iv-dayline .iv-rts { gap: 16px; margin: 18px 0; }
.iv-rt:not(:last-child)::before, .iv-rt:not(:last-child)::after { content: none; }
.iv-rt > .iv-node { position: absolute; left: -73px; top: 30px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)), 0 0 0 6px var(--card); }
.iv-rt > .iv-node b { font: 600 12px var(--mono); color: var(--ink-3); }
.iv-rt:has(.iv-rt-ready:not(.is-untried)) > .iv-node { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 6px var(--card); }
.iv-rt:has(.iv-rt-ready:not(.is-untried)) > .iv-node b { color: var(--ink); }
.iv-rt:has(.iv-pips i:nth-child(5).on) > .iv-node { background: var(--ink); box-shadow: 0 0 0 6px var(--card); }
.iv-rt:has(.iv-pips i:nth-child(5).on) > .iv-node b { font-size: 0; }
.iv-rt:has(.iv-pips i:nth-child(5).on) > .iv-node b::after { content: ""; display: block; width: 12px; height: 7px; margin-top: -3px; border: 2.2px solid var(--card); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.iv-rt.is-next > .iv-node { background: var(--orange); box-shadow: 0 0 0 6px var(--card), 0 0 0 7.5px rgba(255, 90, 31, .35); }
.iv-rt.is-next > .iv-node b { color: #fff; font-size: 12px; } .iv-rt.is-next > .iv-node b::after { display: none; }

/* the tile, in the role's colour */
.iv-rt { background: var(--tint); color: #1D1C1A; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.iv-rt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08), var(--lift-2); }
.iv-rt.is-next { box-shadow: 0 0 0 2px var(--ink), var(--lift-2); }
.iv-rt-art { position: relative; background: transparent; }
.iv-rt-art .st-folder { filter: drop-shadow(0 10px 12px rgba(60, 48, 30, .16)); transition: transform .35s cubic-bezier(.2, .8, .2, 1.1); }
.iv-rt:hover .iv-rt-art .st-folder { transform: rotate(-2deg) translateY(-3px); }
.iv-rt.is-next .iv-rt-art .st-folder { transform: translateY(-6px) rotate(-4deg); filter: drop-shadow(0 14px 16px rgba(60, 48, 30, .24)); }
.iv-rt-pin { display: none; position: absolute; right: 20%; top: 2px; width: 14px; height: 32px; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.iv-rt.is-next .iv-rt-pin { display: block; }
.iv-rt .iv-rt-k { color: rgba(29, 28, 26, .55); } .iv-rt .iv-rt-next { color: #B4380B; }
.iv-rt .iv-rt-t { color: #1D1C1A; font-size: 28px; }
.iv-rt .iv-rt-say { color: rgba(29, 28, 26, .74); }
.iv-rt .iv-learn { color: rgba(29, 28, 26, .62); } .iv-rt .iv-learn a { color: #1D1C1A; } .iv-rt .iv-lock { color: rgba(29, 28, 26, .55); }
.iv-rt .iv-rt-how { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); color: #1D1C1A; }
.iv-rt .iv-rt-how-k { color: rgba(29, 28, 26, .5); }
.iv-rt .iv-rt-ready { color: rgba(29, 28, 26, .62); }
.iv-rt .iv-pips i { background: rgba(29, 28, 26, .14); } .iv-rt .iv-pips i.on { background: #1D1C1A; }
.iv-rt .iv-act { background: rgba(255, 255, 255, .62); color: #1D1C1A; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .1); }
.iv-rt .iv-act:hover { background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .2); }
.iv-rt .iv-act.is-main { background: #1D1C1A; color: #FCFBF8; box-shadow: none; }
@media (max-width: 900px) {
  .iv-dayline { padding-left: 48px; } .iv-dayline::before { left: 13px; }
  .iv-daymark .iv-node { left: -41px; width: 12px; height: 12px; margin-top: -6px; }
  .iv-rt > .iv-node { left: -48px; top: 18px; width: 28px; height: 28px; } .iv-rt > .iv-node b, .iv-rt.is-next > .iv-node b { font-size: 10px; }
  .iv-rt .iv-rt-t { font-size: 21px; }
}
@media (max-width: 640px) {
  .iv-dayline { padding-left: 40px; } .iv-dayline::before { left: 11px; }
  .iv-daymark .iv-node { left: -35px; }
  .iv-rt > .iv-node { left: -42px; top: 16px; }
  .iv-rt { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .iv-rt-art { width: 84px; aspect-ratio: 1 / 1.1; justify-self: start; }
  .iv-rt-pin { right: 14%; width: 11px; height: 26px; }
}
/* v10 (user, 2026-11-04: the line and orange nodes on the left looked "vibe coded"): no rail. The rounds stack at full
   width; order is in each tile's "Round 01" line; the next round keeps its ink ring, Next up and bookmark. */
.iv-dayline { padding-left: 0 !important; margin-top: 26px; }
.iv-dayline::before { content: none !important; }
.iv-dayline .iv-rts { margin: 0; gap: 14px; }
@media (max-width: 640px) { .iv-dayline .iv-rts { gap: 12px; } }

/* ---------------------------------------------------------------- Interview v3, phase 1 (research/INTERVIEW_V3_PLAN.md,
   2026-11-06). Readiness waits until a round is tried; Learn it and Practise it on each round; the method as a tabbed
   index card in the round, opening into a worksheet on its own (clock strip, stages, traps, a worked answer with
   margin notes); "The night before" beside the date; the probability page's level choice. */
/* A new visitor sees round names; pips and words appear once there's something to show (loop.js clears is-untried). */
.iv6 .iv-ready.is-untried { display: none; }
.iv6 .iv-rhero .iv-my-main { align-self: center; }
.iv-keysline { margin: 6px 0 0; max-width: 66ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }

/* Learn it, practise it: plain links, a lock on Pro lessons, no pills and no counts. */
.iv-lp { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 14px; margin: 16px 0 0; font-size: 14.5px; line-height: 1.45; }
.iv-lp-k { margin: 0; font: 600 13.5px/1.45 var(--sans); color: rgba(29, 28, 26, .56); }
.iv-lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.iv-lp-list li { min-width: 0; }
.iv-lp a { color: #1D1C1A; text-decoration: none; border-bottom: 1px solid rgba(29, 28, 26, .22); transition: border-color .16s var(--ease); }
.iv-lp a:hover { border-color: rgba(29, 28, 26, .6); }
.iv-lp a:focus-visible { outline: 2px solid #1D1C1A; outline-offset: 3px; border-radius: 3px; }
.iv-lp .iv-lock { margin-left: 5px; color: rgba(29, 28, 26, .5); } .iv-lp .iv-lock svg { width: 13px; height: 13px; }
.iv-lp-note { grid-column: 2; margin: -2px 0 2px; font-size: 13.5px; line-height: 1.5; color: rgba(29, 28, 26, .62); }
.iv-lp-go { margin: 0; }
.iv-lp-where { margin-left: 6px; color: rgba(29, 28, 26, .55); }
@media (max-width: 640px) {
  .iv-lp { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .iv-lp-note { grid-column: 1; }
  .iv-lp-list + .iv-lp-k, .iv-lp-note + .iv-lp-k { margin-top: 8px; }
}

/* The method in the round: an index card with a tab in the role's colour, the clock as a small ruler. */
.iv-mcard { position: relative; margin: 26px 0 2px; padding: 4px; background: #FFFEFB; border-radius: 0 8px 8px 8px;
  box-shadow: 0 0 0 1px rgba(29, 28, 26, .06), 0 1px 2px rgba(60, 48, 30, .08), 0 10px 20px -12px rgba(60, 48, 30, .4); }
.iv-mcard-tab { position: absolute; left: 0; bottom: 100%; display: grid; place-items: center; height: 24px; padding: 1px 14px 0; border-radius: 8px 8px 0 0; background: #FFFEFB; font: 600 12.5px/1 var(--sans); color: #B4380B;
  box-shadow: 0 -1px 0 rgba(29, 28, 26, .04); }
.iv-mcard-tab::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 8px 8px 0 0; background: var(--mtab); }
.iv-mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t go" "rl m"; align-items: center; gap: 10px 12px; padding: 12px 12px 13px; border-radius: 6px; color: #1D1C1A; text-decoration: none; transition: background-color .16s var(--ease); }
.iv-mrow + .iv-mrow { border-top: 1px dashed rgba(29, 28, 26, .18); border-radius: 0 0 6px 6px; }
.iv-mrow:hover { background: rgba(29, 28, 26, .035); }
.iv-mrow:focus-visible { outline: 2px solid #1D1C1A; outline-offset: -2px; }
.iv-mrow-t { grid-area: t; font: 400 18px/1.25 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.005em; }
.iv-mrow-m { grid-area: m; font: 500 12px/1 var(--mono); color: rgba(29, 28, 26, .55); white-space: nowrap; }
.iv-mrow-go { grid-area: go; justify-self: end; align-self: center; display: grid; width: 16px; height: 16px; color: rgba(29, 28, 26, .55); transition: transform .2s var(--ease), color .16s var(--ease); }
.iv-mrow-go svg { width: 16px; height: 16px; }
.iv-mrow:hover .iv-mrow-go { transform: translateX(2px); color: #1D1C1A; }
.iv-mrow .iv-rl { grid-area: rl; margin: 0; }

/* The ruler: ink ticks along the top edge, a longer one every five minutes, each stage a numbered span. */
.iv-rl { --rl-ink: var(--ink); --rl-ink-3: var(--ink-3); --rl-bg: var(--ws-bg, #FFFEFB); --rl-alt: rgba(29, 28, 26, .045); position: relative; color: var(--rl-ink); }
.iv-rl-bar { position: relative; display: block; height: 54px; border-radius: 4px; background: var(--rl-bg); box-shadow: inset 0 0 0 1.5px var(--rl-ink); overflow: hidden; }
.iv-rl-t { position: absolute; top: 0; width: 1px; height: 7px; margin-left: -.5px; background: var(--rl-ink); opacity: .55; }
.iv-rl-t.is-big { height: 12px; opacity: .9; }
.iv-rl-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding-bottom: 8px; border-left: 1.5px solid var(--rl-ink); white-space: nowrap; }
.iv-rl-seg:first-child, .iv-rl-t + .iv-rl-seg { border-left: 0; }
.iv-rl-seg:nth-of-type(even) { background: var(--rl-alt); }
.iv-rl-seg b { font: 400 19px/1 var(--serif); font-variant-numeric: lining-nums; }
.iv-rl-seg small { font: 500 11px/1 var(--mono); color: var(--rl-ink-3); }
.iv-rl-marks { position: relative; height: 20px; }
.iv-rl-at { position: absolute; top: 6px; transform: translateX(-50%); font: 500 11px/1 var(--mono); color: var(--rl-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.iv-rl-at.is-0 { transform: none; }
.iv-rl-at.is-end { transform: translateX(-100%); color: var(--rl-ink); }
.iv-rl.is-mini { --rl-ink: #1D1C1A; --rl-ink-3: rgba(29, 28, 26, .55); --rl-bg: #FFFEFB; display: block; margin-top: 2px; }
.iv-rl.is-mini .iv-rl-bar { height: 16px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .5); }
.iv-rl.is-mini .iv-rl-t { height: 3px; opacity: .45; } .iv-rl.is-mini .iv-rl-t.is-big { height: 6px; opacity: .7; }
.iv-rl.is-mini .iv-rl-seg { border-left-width: 1px; padding: 0; }
.iv-rl.is-mini .iv-rl-seg b { display: none; }
.iv-rl.is-mini .iv-rl-seg:nth-of-type(even) { background: rgba(29, 28, 26, .06); }

/* The worksheet, on its own: a divider in the role's colour with its tab, then the sheet. */
.iv-mws { display: contents; }
.iv-mw { --ws-bg: #FFFEFB; --ws-grid: rgba(29, 28, 26, .05); --ws-dash: rgba(29, 28, 26, .2); --ws-edge: rgba(29, 28, 26, .10);
  width: 100%; max-width: 1000px; margin: 40px auto 0; scroll-margin-top: 16px; }
:root[data-theme="dark"] .iv-mw { --ws-bg: #22211E; --ws-grid: rgba(238, 235, 228, .045); --ws-dash: rgba(238, 235, 228, .16); --ws-edge: rgba(238, 235, 228, .09); }
.iv-mw-div { position: relative; padding: 40px 56px 36px; background: var(--tint); border-radius: 0 26px 0 0; color: #1D1C1A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.iv-mw-tab { position: absolute; left: 0; bottom: 100%; display: grid; place-items: center; height: 40px; padding: 2px 26px 0; background: var(--tint); border-radius: 14px 14px 0 0; font: 700 16px/1 var(--sans); color: #B4380B; }
.iv-mw-k { margin: 0; font: 500 15px/1.4 var(--sans); color: rgba(29, 28, 26, .62); }
.iv-mw-h { margin: 8px 0 0; font: 380 clamp(36px, 4.2vw, 52px)/1.04 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; text-wrap: balance; }
.iv-mw-h i { font-style: italic; }
.iv-mw-sub { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: rgba(29, 28, 26, .72); }
.iv-mw-open { display: grid; gap: 4px; max-width: 62ch; margin: 26px 0 0; padding: 16px 22px 18px; background: rgba(252, 251, 248, .8); border-radius: 14px; box-shadow: 0 1px 0 rgba(29, 28, 26, .06), 0 6px 14px -8px rgba(60, 48, 30, .25); }
.iv-mw-openk { font: 700 13.5px/1.4 var(--sans); color: #B4380B; }
.iv-mw-open q { font: 400 21px/1.4 var(--serif); font-variation-settings: "opsz" 48; quotes: "\201C" "\201D"; }
.iv-mw-print { position: absolute; right: 56px; top: 30px; min-height: 36px; color: #1D1C1A; font-size: 14px; text-decoration-color: rgba(29, 28, 26, .3); }
.iv-mw-sheet { padding: 48px 56px 56px; background: var(--card); border-radius: 0 0 26px 26px; box-shadow: var(--lift-2); }
.iv-mw-sec + .iv-mw-sec { margin-top: 48px; }
.iv-mw-h3 { margin: 0 0 14px; font: 600 19px/1.3 var(--sans); color: var(--ink); }
.iv-mw-lede { margin: -6px 0 16px; max-width: 64ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.iv-vc { display: none; }
.iv-mw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--rule); }
.iv-mw-talk.st-btn { height: 50px; padding: 0 24px; border-radius: 14px; font-size: 15.5px; }
.iv-mw-footnote { font-size: 15px; color: var(--ink-2); }
.iv-mw-done { margin-left: auto; }

/* Stage by stage: a worksheet on graph paper, numerals in the margin, the time on the right, the line to say under it. */
.iv-mw-steps { position: relative; list-style: none; margin: 0; padding: 8px 28px 10px 92px; border-radius: 16px; background-color: var(--ws-bg);
  background-image: linear-gradient(var(--ws-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ws-grid) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px;
  box-shadow: 0 0 0 1px var(--ws-edge), 0 1px 2px rgba(60, 48, 30, .06), 0 10px 22px -12px rgba(60, 48, 30, .22); }
.iv-mw-steps::before { content: ""; position: absolute; left: 70px; top: 0; bottom: 0; width: 1.5px; background: var(--orange); opacity: .55; }
.iv-mw-steps li { position: relative; display: grid; gap: 4px; padding: 14px 0; }
.iv-mw-steps li + li { border-top: 1px dashed var(--ws-dash); }
.iv-mw-n { position: absolute; left: -64px; top: 12px; width: 34px; text-align: center; font: 400 22px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--ink-2); }
.iv-mw-l { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.iv-mw-l b { font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.iv-mw-min { flex: none; font: 500 16px/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.iv-mw-say { display: block; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); quotes: "\201C" "\201D"; }

/* How people lose this round: what they say, and why it costs them. */
.iv-mw-traps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.iv-mw-traps li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--rule); }
.iv-mw-traps q { font: 400 18px/1.4 var(--serif); font-variation-settings: "opsz" 48; color: var(--ink); quotes: "\201C" "\201D"; }
.iv-mw-traps span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* The worked answer: a typed transcript, the speaker on the left, notes in pencil orange in the margin. */
.iv-tx { position: relative; list-style: none; margin: 0; padding: 0; }
.iv-tx-t { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 210px; gap: 0 22px; padding: 10px 0; }
.iv-tx::after, .iv-tx-more::after { content: ""; position: absolute; top: 0; bottom: 0; right: 222px; width: 1.5px; background: var(--orange); opacity: .45; }
.iv-tx-who { padding-top: 3px; font: 500 12.5px/1.4 var(--mono); color: var(--ink-3); }
.iv-tx-t.is-you .iv-tx-who { color: var(--ink); }
.iv-tx-p { grid-column: 2; margin: 0; font: 400 14.5px/1.7 var(--mono); color: var(--ink-2); font-variant-ligatures: none; }
.iv-tx-t.is-you .iv-tx-p { color: var(--ink); }
.iv-tx-note { grid-column: 3; align-self: start; padding: 2px 0 0 4px; font: italic 400 15.5px/1.35 var(--serif); font-variation-settings: "opsz" 24; color: var(--orange-ink); transform: rotate(-1.2deg); transform-origin: left top; }
.iv-tx-note::before { content: ""; display: inline-block; width: 14px; height: 1.5px; margin: 0 6px 0 -2px; vertical-align: .32em; background: currentColor; border-radius: 1px; opacity: .8; }
.iv-tx-more { position: relative; margin: 0; padding: 0; list-style: none; }

/* Pro: two turns are public; the rest sits behind this slip until a Pro account's text arrives (loop.js). */
.iv-tx-lock { position: relative; margin-top: 6px; }
.iv-tx-ghost { display: grid; gap: 14px; padding: 18px 232px 18px 118px; opacity: .55; }
.iv-tx-ghost i { height: 9px; border-radius: 5px; background: var(--rule-2, var(--rule)); }
.iv-tx-ghost i:nth-child(3n + 1) { width: 92%; } .iv-tx-ghost i:nth-child(3n + 2) { width: 78%; } .iv-tx-ghost i:nth-child(3n) { width: 54%; }
.iv-tx-lockcard { position: absolute; left: 50%; top: 50%; width: min(460px, calc(100% - 24px)); transform: translate(-50%, -50%); padding: 20px 24px 22px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--rule-2, var(--rule)), var(--lift-2); }
.iv-tx-lockh { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 17px/1.35 var(--sans); color: var(--ink); }
.iv-tx-lockh .iv-lock { margin: 0; color: var(--ink-2); } .iv-tx-lockh .iv-lock svg { width: 18px; height: 18px; }
.iv-tx-locks { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.iv-tx-lockacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 16px 0 0; font-size: 14.5px; }
.iv-tx-lock.is-pro .iv-tx-lockacts { display: none; }

/* Focus: the worksheet has the page to itself, like a session. */
.iv6.is-method .iv-stage { display: none !important; }
.iv6.is-method .iv-focusbar { max-width: 1000px; }

@media (max-width: 900px) {
  .iv-mw { margin-top: 34px; }
  .iv-mw-div { padding: 30px 28px 28px; }
  .iv-mw-print { right: 28px; top: 20px; }
  .iv-mw-sheet { padding: 34px 28px 40px; }
  .iv-tx-t { grid-template-columns: 82px minmax(0, 1fr) 170px; gap: 0 16px; }
  .iv-tx::after, .iv-tx-more::after { right: 178px; }
  .iv-tx-ghost { padding-right: 186px; padding-left: 98px; }
}
/* Phones: a full-width sheet. The clock runs down the page with the minutes on the right; notes sit under each line. */
@media (max-width: 640px) {
  .iv-mw { margin: 30px -6px 0; width: auto; }
  .iv-mw-div { padding: 24px 18px 22px; border-top-right-radius: 20px; }
  .iv-mw-tab { height: 34px; padding: 2px 18px 0; font-size: 14.5px; border-radius: 12px 12px 0 0; }
  .iv-mw-h { font-size: 34px; }
  .iv-mw-sub { font-size: 16px; }
  .iv-mw-open { margin-top: 18px; padding: 14px 16px 16px; }
  .iv-mw-open q { font-size: 19px; }
  .iv-mw-print { position: static; margin-top: 8px; }
  .iv-mw-sheet { padding: 26px 16px 30px; border-radius: 0 0 20px 20px; }
  .iv-mw-sec + .iv-mw-sec { margin-top: 36px; }
  .iv-mw .iv-rl { display: none; }
  .iv-vc { display: block; list-style: none; margin: 0; padding: 0; }
  .iv-vc li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: max(46px, calc(var(--f) * 460px)); padding: 6px 2px 6px 40px; border-top: 1.5px solid var(--ink); }
  .iv-vc li:last-child { border-bottom: 1.5px solid var(--ink); }
  .iv-vc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 26px; border-right: 1.5px solid var(--ink);
    background-image: linear-gradient(var(--ink) 1.2px, transparent 1.2px); background-size: 12px calc(100% / var(--n)); background-repeat: repeat-y; background-position: right top; opacity: .55; }
  .iv-vc li:nth-child(even) { background: rgba(29, 28, 26, .03); }
  :root[data-theme="dark"] .iv-vc li:nth-child(even) { background: rgba(238, 235, 228, .03); }
  .iv-vc-n { font: 400 20px/1 var(--serif); text-align: center; color: var(--ink-2); }
  .iv-vc-t { font-size: 15px; line-height: 1.35; font-weight: 500; }
  .iv-vc-m { font: 500 14px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .iv-mw-steps { margin: 0 -4px; padding: 4px 14px 6px 46px; }
  .iv-mw-steps::before { left: 34px; }
  .iv-mw-n { left: -40px; width: 30px; font-size: 19px; }
  .iv-mw-l { flex-wrap: wrap; gap: 0 12px; }
  .iv-mw-l b, .iv-mw-min { font-size: 15.5px; }
  .iv-mw-say { font-size: 15px; }
  .iv-mw-traps { grid-template-columns: minmax(0, 1fr); }
  .iv-mw-foot { margin-top: 34px; }
  .iv-mw-talk.st-btn { width: 100%; }
  .iv-mw-done { margin-left: 0; }
  .iv-mw-traps q { font-size: 17px; }
  .iv-tx::after, .iv-tx-more::after { display: none; }
  .iv-tx-t { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
  .iv-tx-t + .iv-tx-t { border-top: 1px dashed var(--ws-dash); }
  .iv-tx-p, .iv-tx-note { grid-column: 1; }
  .iv-tx-p { font-size: 14px; line-height: 1.65; }
  .iv-tx-note { margin-top: 4px; padding: 0 0 0 12px; border-left: 1.5px solid var(--orange); transform: none; font-size: 15px; }
  .iv-tx-note::before { display: none; }
  .iv-tx-ghost { padding: 14px 0; }
  .iv-tx-lockcard { position: relative; left: auto; top: auto; width: auto; transform: none; margin-top: -60px; }
}

/* "The night before", under the date in the role's hero. */
.iv-nightrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(29, 28, 26, .1); font-size: 13.5px; color: rgba(29, 28, 26, .6); }
.iv-night { color: #1D1C1A; font-size: 14.5px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(29, 28, 26, .28); }
.iv-night:hover { border-color: #1D1C1A; }

/* The probability page: Practice's level choice before the first problem. */
.iv-lvbox { max-width: 800px; margin: 0 auto; padding: 34px 36px 32px; }
.iv-lvbox .iv-h2 { font-size: 30px; }
.iv-lvs { display: grid; gap: 10px; margin-top: 22px; max-width: 540px; }
.iv-lv { position: relative; display: grid; gap: 3px; width: 100%; padding: 16px 52px 16px 20px; border: 0; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule-2, var(--rule)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: box-shadow .16s var(--ease), transform .16s var(--ease); }
.iv-lv:hover, .iv-lv:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; }
.iv-lv:active { transform: translateY(1px); }
.iv-lv-t { font: 500 17px/1.3 var(--sans); }
.iv-lv-s { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.iv-lv-go { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-3); transition: transform .16s var(--ease), color .16s var(--ease); }
.iv-lv:hover .iv-lv-go { color: var(--ink); transform: translate(3px, -50%); }
.iv-lvline { display: flex; justify-content: center; margin: 12px 0 0; }
@media (max-width: 640px) { .iv-lvbox { padding: 24px 18px; } }

/* Print: an open method prints alone, on one A4 or Letter page: stages and traps in two columns, the transcript
   in two columns of plain type, the ruler's ticks and the orange margin kept. */
@media print {
  @page { margin: 10mm; }
  .st-rail, .st-top, .st-mback, .iv-backrow, .iv-mw-print, .iv-other, .iv-mw-foot { display: none !important; }
  .st-shell, .st-main, .iv { display: block !important; padding: 0 !important; margin: 0 !important; }
  .iv6.is-method > :not(.iv-mws) { display: none !important; }
  .iv-mw { margin: 0 !important; max-width: none; color: #1D1C1A; font-size: 8.5pt; --ink: #1D1C1A; --ink-2: #4A4843; --ink-3: #7A766F; --rule: rgba(29, 28, 26, .18); --orange-ink: #B4380B; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .iv-mw-div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6mm; padding: 0 0 2.5mm; background: none !important; border-bottom: 1.2pt solid #1D1C1A; border-radius: 0; box-shadow: none; }
  .iv-mw-div > * { grid-column: 1; }
  .iv-mw-tab { position: static; display: block; height: auto; padding: 0; background: none; font-size: 8.5pt; line-height: 1.3; }
  .iv-mw-k { margin: 0; font-size: 8.5pt; }
  .iv-mw-h { margin: .5mm 0 0; font-size: 18pt; line-height: 1.05; }
  .iv-mw-sub { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; font-size: 8.5pt; }
  .iv-mw-open { display: block; max-width: none; margin: 1.5mm 0 0; padding: 0; background: none; box-shadow: none; }
  .iv-mw-openk { display: inline; margin-right: 2mm; font-size: 8.5pt; }
  .iv-mw-open q { font-size: 10pt; }
  .iv-mw-sheet { padding: 0; background: none; box-shadow: none; }
  .iv-mw-sec + .iv-mw-sec { margin-top: 2mm; }
  .iv-mw-h3 { margin: 2mm 0 1mm; font-size: 9.5pt; }
  .iv-mw-lede { display: none; }
  .iv-rl { --rl-ink: #1D1C1A; --rl-ink-3: #5E5B55; --rl-bg: #fff; display: block !important; }
  .iv-rl-bar { height: 8mm; box-shadow: none; border: 1pt solid #1D1C1A; }
  .iv-rl-seg { padding-bottom: 1mm; }
  .iv-rl-seg b { font-size: 10pt; } .iv-rl-seg small { font-size: 6.5pt; }
  .iv-rl-marks { height: 3.5mm; } .iv-rl-at { top: .8mm; font-size: 6.5pt; }
  .iv-vc { display: none !important; }
  .iv-mw-steps { column-count: 2; column-gap: 8mm; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .iv-mw-steps::before { display: none; }
  .iv-mw-steps li { break-inside: avoid; padding: .8mm 0 .8mm 6mm; gap: 0; line-height: 1.3; }
  .iv-mw-steps li + li { border-top: 0; }
  .iv-mw-n { left: 0; top: .8mm; width: 4mm; text-align: left; font-size: 9.5pt; color: #B4380B; }
  .iv-mw-l b, .iv-mw-min { font-size: 8.5pt; } .iv-mw-say { font-size: 8pt; line-height: 1.3; }
  .iv-mw-traps { grid-template-columns: 1fr 1fr; gap: 0 7mm; }
  .iv-mw-traps li { padding: .8mm 0; gap: 0; break-inside: avoid; line-height: 1.28; }
  .iv-mw-traps q { font-size: 8.8pt; line-height: 1.25; } .iv-mw-traps span { font-size: 7.6pt; line-height: 1.28; }
  .iv-tx, .iv-tx-more { column-count: 2; column-gap: 7mm; }
  .iv-tx::after, .iv-tx-more::after { display: none; }
  .iv-tx-t { display: block; padding: .5mm 0; break-inside: avoid; font-size: 7.8pt; line-height: 1.32; }
  .iv-tx-who { display: inline; margin-right: 1.5mm; font-size: 7pt; }
  .iv-tx-p { display: inline; font: 400 7.8pt/1.32 var(--sans); color: #1D1C1A; }
  .iv-tx-t.is-them .iv-tx-p { color: #4A4843; }
  .iv-tx-note { display: block; padding: .2mm 0 0 3mm; font-size: 8pt; transform: none; }
  .iv-tx-note::before { display: none; }
  .iv-tx-lock { margin: 1mm 0 0; } .iv-tx-ghost { display: none; }
  .iv-tx-lockcard { position: static; transform: none; width: auto; padding: 0; background: none; box-shadow: none; }
  .iv-tx-lockh { font-size: 9pt; } .iv-tx-locks { margin: .5mm 0 0; font-size: 8pt; }
  .iv-tx-lockacts { display: none; }
}
/* Talk it through: the short wait while a Pro set's questions load, or the line that says why they couldn't. */
.iv-talk-wait { padding: 56px 24px; text-align: center; color: var(--ink-2); font-size: 16px; line-height: 1.6; }