/* Validated.Directory 2.0.0 · the chamber challenge (BEA-432). Loads after /learn/_guide/guide.css. The main act: one
   made-up plumber, six towns, six chambers. The work lights the valley, the chambers arrive, one is kept and the other
   towns go dark, a customer in Bigfork asks an AI and the plumber is not in the answer, one sentence on the plumber's own
   website lights every town again, and the record carries them, confirmed. Night, the gold and cream, square cards with
   corner marks, mono for what can be checked. The still composition is the default (scripts off, reduced motion): the
   finished map, every card and every step. Motion only under html.m, driven by page.js. */

.cvs { position: relative; background: var(--canvas); }
.cv { position: relative; --cv-len: 7; }
.cv-stage { position: relative; padding: 48px 16px 56px; }
.cv-sky, .cv-fx { display: none; }
.cv-head, .cv-zone, .cv-cards, .cv-out { position: relative; z-index: 2; max-width: 1176px; margin-inline: auto; }
.cv-head h2 { margin-top: 10px; max-width: 16ch; font-size: clamp(30px, 8.4vw, 54px); line-height: 1.06; color: var(--white); }

/* ---- The valley, sketched: the lake, six towns, a chamber in each ------------------------------------------------- */
.cv-zone { margin-top: 26px; }
.vm { position: relative; aspect-ratio: 4 / 5; max-width: 560px; margin-inline: auto; }
.vm-lake { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vm-lake path { fill: rgba(43, 69, 99, 0.42); stroke: rgba(244, 196, 90, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vm-lk { position: absolute; left: 70%; top: 72%; transform: translate(-50%, -50%); font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201, 192, 173, 0.72); white-space: nowrap; }
.vt { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); display: flex; align-items: center; gap: 6px; margin: 0; transform: translate(-6px, -50%); }
.vt.l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.vt > i { flex: 0 0 auto; width: 12px; height: 12px; border: 1.5px solid var(--gold-bright); background: var(--gold-bright); box-shadow: 0 0 12px 2px rgba(244, 196, 90, 0.55); transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s; }
.vt > span { padding: 2px 6px 3px; background: rgba(10, 16, 36, 0.86); font: 600 13.5px/1.2 var(--sans); color: var(--white); white-space: nowrap; }
.vt.home > span::after { content: " · home"; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--cream-2); }
.ch { position: absolute; top: calc(100% + 3px); left: 18px; padding: 2px 6px 3px; border: 1px dashed rgba(240, 230, 207, 0.34); background: rgba(10, 16, 36, 0.9); font: 500 10.5px/1.25 var(--mono); letter-spacing: 0.04em; color: rgba(201, 192, 173, 0.62); white-space: nowrap; transition: opacity 0.4s, color 0.4s, border-color 0.4s; }
.vt.l .ch { left: auto; right: 18px; }
.vt.up .ch { top: auto; bottom: calc(100% + 3px); }
.vt.cl .ch { left: auto; right: calc(100% - 12px); }   /* a chamber west of its town: home (clear of Bigfork on small phones) and Bigfork (clear of the edge) */
.ch .kept { display: none; }
.vt.home .ch { border: 1px solid var(--gold-bright); color: var(--gold-bright); }
.vt.home .ch .kept { display: inline; }
.vt.asks > span { outline: 1px solid rgba(240, 230, 207, 0.6); outline-offset: 2px; }

/* ---- The cards: what each step shows beside the map ---------------------------------------------------------------- */
.cv-cards { display: grid; gap: 22px; margin-top: 30px; max-width: 560px; }
.cc { position: relative; padding: 12px 14px 13px; border: 1px solid var(--rule); background: rgba(22, 33, 52, 0.72); }
.cc-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.cc-week ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; }
.cc-week li { font: 600 14.5px/1.4 var(--sans); color: var(--white); transition: color 0.3s, opacity 0.3s; }
.cc-week li b { margin-right: 5px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--gold-bright); }
.cc-meter { display: flex; gap: 5px; margin-top: 10px; }
.cc-meter i { width: 18px; height: 18px; border: 1px solid rgba(240, 230, 207, 0.5); transition: background-color 0.35s, border-color 0.35s; }
.cc-meter i:first-child { background: var(--gold-bright); border-color: var(--gold-bright); }
.cc-say { display: grid; margin-top: 8px; font: 500 12.5px/1.4 var(--mono); color: var(--cream); }
.cc-say > * { grid-area: 1 / 1; transition: opacity 0.35s; }
.cc-say .s2 { opacity: 0; }
.cc-q { margin-top: 7px; font: 400 clamp(19px, 5.4vw, 24px)/1.22 var(--display); color: var(--white); }
.cc-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font: 500 12.5px/1.4 var(--mono); color: var(--cream-2); transition: opacity 0.35s; }
.cc-a b { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #f0a48f; }
.cc-web, .cc-rec { background: var(--paper-hi); border-color: rgba(35, 31, 26, 0.4); --cm: rgba(240, 230, 207, 0.62); color: var(--ink); }
.cc-web .cc-k, .cc-rec .cc-k { color: var(--ink-2); }
.cc-s { margin-top: 7px; font: 400 clamp(19px, 5.3vw, 25px)/1.3 var(--display); color: var(--ink); }
.cc-s .w { transition: opacity 0.2s; }
.cc-s .tn { background: rgba(244, 196, 90, 0.42); box-shadow: 0 0 0 1px rgba(125, 90, 26, 0.5); transition: background-color 0.35s, box-shadow 0.35s, opacity 0.2s; }
.cc-rec-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.cc-rl { margin-top: 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.cc-chips { margin-top: 5px; gap: 5px; }
.cc-chips li { padding: 3px 7px 4px; font-size: 13.5px; background: rgba(244, 196, 90, 0.3); border-color: var(--gold-ink); transition: background-color 0.3s, border-color 0.3s; }
.cc-rec .brand-day { margin: 2px 0 0; }
.cc-rec .brand-day .iron { width: 50px; height: 50px; }

/* ---- The steps ------------------------------------------------------------------------------------------------------ */
.cv-out { margin-top: 34px; max-width: 760px; }
.cv-steps { display: grid; gap: 16px; }
.cv-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); }
.cv-n { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.cv-k { font: 600 17px/1.3 var(--sans); color: var(--white); }
.cv-t { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.5; color: var(--cream); }
.cv-t strong { color: var(--white); font-weight: 650; }
.cv-tk { display: none; }

/* ---- In motion: the stage pins; the map takes the room left; one card and one step at a time ----------------------- */
.m .cv { height: calc(var(--cv-len) * 100vh); height: calc(var(--cv-len) * 100svh); }
.m .cv-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .cv-head, .m .cv-zone, .m .cv-cards, .m .cv-out { width: 100%; }
.m .cv-head h2 { font-size: clamp(26px, 7.6vw, 46px); }
.js .cv-sky, .js .cv-fx { display: block; position: absolute; pointer-events: none; }   /* drawn with motion off too: the finished land and trails */
.js .cv-sky { z-index: 0; inset: 0; width: 100%; height: 100%; }
.js .cv-fx { z-index: 1; inset: 0; width: 100%; height: 100%; }
.m .cv-zone { margin-top: 10px; min-height: 0; }
.m .vm { position: absolute; inset: 14px 8px 18px; aspect-ratio: auto; max-width: none; margin: 0; }
.m .vt:not(.on) > i { background: transparent; border-color: rgba(240, 230, 207, 0.55); box-shadow: none; }
.m .vt:not(.on) > span { color: var(--cream-2); }
.m .ch { opacity: 0; }
.m .ch.show { opacity: 1; }
.m .vt.home .ch:not(.kept-on) .kept { display: none; }
.m .vt.home .ch:not(.kept-on) { border: 1px dashed rgba(240, 230, 207, 0.6); color: var(--cream); }
.m .vt:not(.home) .ch.show:not(.dim) { border-color: rgba(240, 230, 207, 0.6); color: var(--cream); }
.m .cv-cards { display: grid; margin-top: 8px; max-width: none; }
.m .cc { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
.m .cc.cur { opacity: 1; visibility: visible; transition: opacity 0.4s; }
.m .cc-week li:not(.on) { color: var(--cream-2); opacity: 0.55; }
.m .cc-week li:not(.on) b { color: var(--cream-2); }
.m .cc-meter i { background: transparent; border-color: rgba(240, 230, 207, 0.4); }
.m .cc-meter i.on { background: var(--cream); border-color: var(--cream); }
.m .cc-meter i.kept { background: var(--gold-bright); border-color: var(--gold-bright); }
.m .cc-ch:not(.three) .s2 { opacity: 1; }
.m .cc-ch:not(.three) .s3 { opacity: 0; }
.m .cc-ai:not(.answered) .cc-a { opacity: 0; }
.m .cc-s .w:not(.on) { opacity: 0; }
.m .cc-s .tn:not(.lit) { background: transparent; box-shadow: none; }
.m .cc-chips li:not(.on) { background: transparent; border-color: rgba(35, 31, 26, 0.2); color: var(--ink-3); }
.m .cv-out { margin-top: 12px; padding-top: 0; max-width: none; }
.m .cv-steps { display: grid; gap: 0; }
.m .cv-steps li { grid-area: 1 / 1; padding-top: 10px; opacity: 0; visibility: hidden; }
.m .cv-steps li.cur { opacity: 1; visibility: visible; animation: cv-in 0.35s ease-out backwards; }
.m .cv-t { min-height: calc(3 * 1.45em); font-size: 16px; line-height: 1.45; }
.m .cv-tk { display: flex; gap: 4px; margin-top: 8px; }
.cv-tk i { flex: 0 1 22px; height: 4px; background: rgba(240, 230, 207, 0.24); transition: background-color 0.3s; }
.cv-tk i.on { background: var(--gold-bright); }
@keyframes cv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Small phones (Mark's at 125%, about 314 wide): tighter type so the map keeps its room */
@media (max-width: 360px) {
  .vt > span { font-size: 12.5px; padding-inline: 4px; }
  .vt.home > span::after { content: ""; }
  .ch { font-size: 10px; padding-inline: 4px; }
  .cc { padding: 10px 11px 11px; }
  .cc-week li { font-size: 13.5px; }
  .m .cv-t { font-size: 15px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .m .cv-stage { padding-top: calc(62px + env(safe-area-inset-top, 0px)); }
  .m .cv-head h2 { font-size: 24px; margin-top: 6px; }
  .m .cv-head .eyebrow { font-size: 11px; }
  .m .cc-q, .m .cc-s { font-size: 18px; }
  .m .cv-t { min-height: calc(3 * 1.4em); line-height: 1.4; }
}

/* Laptop and up: the words on the left, the valley on the right */
@media (min-width: 900px) {
  .cv-stage { padding: 96px var(--read-x) 96px; }
  html:not(.m) .cv-stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: start; }
  html:not(.m) :is(.cv-head, .cv-zone, .cv-cards, .cv-out) { width: 100%; margin-inline: 0; }
  html:not(.m) .cv-head { grid-column: 1 / -1; }
  html:not(.m) .cv-zone { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 96px; }
  html:not(.m) .cv-cards { grid-column: 1; grid-row: 2; margin-top: 26px; }
  html:not(.m) .cv-out { grid-column: 1; grid-row: 3; }
  .vt > span { font-size: 15px; padding: 3px 7px 4px; }
  .ch { font-size: 11.5px; }
  .vm-lk { font-size: 11.5px; }
  .cc { padding: 16px 18px 17px; }
  .cc-week ul { gap: 6px 18px; margin-top: 10px; }
  .cc-week li { font-size: 18px; }
  .cc-say, .cc-a { font-size: 14px; }
  .cc-q, .cc-s { font-size: 30px; }
  .cc-meter i { width: 24px; height: 24px; }
  .cc-chips li { font-size: 14.5px; }
  .cc-rec .brand-day .iron { width: 58px; height: 58px; }
  .m .cv-stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 56px); padding-top: 104px; padding-bottom: 44px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .m .cv-head { grid-column: 1; grid-row: 1; }
  .m .cv-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .m .cv-zone { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
  .m .vm { inset: 0 12px 8px; }
  .m .cv-cards { grid-column: 1; grid-row: 2; align-self: center; margin-top: 24px; max-width: 520px; }
  .m .cc { align-self: center; }
  .m .cv-out { grid-column: 1; grid-row: 3; align-self: end; padding-top: 12px; border-top: 1px solid var(--rule); }
  .m .cv-steps li { border-top: 0; padding-top: 0; }
  .cv-k { font-size: 20px; }
  .cv-n { font-size: 12.5px; }
  .m .cv-t { font-size: 21px; line-height: 1.4; min-height: calc(3 * 1.4em); }
}