/* GFC Builds: walkthrough runner and phase cards (builder "walk").
   Extends the runner classes in app.css. Tokens only, no raw colors.
   New class names start with wk- so they never collide with other files. */

/* the runner is one centered column from tablet width up (desktop is in app.css) */
@media (min-width: 768px) and (max-width: 1023px) {
  .runner { max-width: var(--read-max); margin: 0 auto; box-shadow: 0 0 0 2px var(--line); }
}

/* ---------- runner bar ---------- */
.wk-bar-r { display: flex; align-items: center; gap: 8px; flex: none; }
.wk-bar-r .btn-ghost .ic { width: 20px; height: 20px; }
button.saved { cursor: pointer; }
.wk-subbadge { background: var(--green-tint); }
.wk-subbadge .ic { width: 16px; height: 16px; }
/* Phones keep the word ("Submitted"), never a bare check: the date shows from 480 px. */
@media (max-width: 479px) {
  .wk-hide-s { display: none; }
}

/* ---------- sections ---------- */
.wk-sec { scroll-margin-top: calc(80px + var(--safe-t)); }
.wk-sec .wsec { cursor: pointer; }
.wk-chev { display: grid; place-items: center; flex: none; width: 24px; color: var(--ink-2); }
.wk-chev .ic { stroke-width: 2.5; }
.wk-lines > .line:first-child { border-top: 0; }
.runner .line { scroll-margin-top: calc(86px + var(--safe-t)); }
.wk-flash { animation: flash 1.2s var(--ease); }

/* ---------- first questions ---------- */
.wgroup.wk-q { border-color: var(--line); scroll-margin-top: calc(80px + var(--safe-t)); }
.wgroup.wk-q.is-open { border-color: var(--ink); }
.wk-q > .wsec { cursor: pointer; }
.wk-q > div.wsec { cursor: default; }
.wk-qbody { background: var(--card); }
.wk-qbody .prompt { scroll-margin-top: calc(86px + var(--safe-t)); }
.wk-qbody .prompt:first-child { border-top: 0; }
.answers .wk-miss { background: var(--amber-tint); border-color: var(--amber-edge); color: var(--amber-ink); }
label.note.wk-qnote { display: block; margin-top: 12px; }
.answers .wk-qnote-ro { flex-basis: 100%; margin: 2px 0 0; font: 600 15px/1.4 var(--font); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- trays ---------- */
.tray.wk-wrap .key { white-space: normal; line-height: 1.15; }
.tray .key > span { min-width: 0; }
.tray.wk-stack3 { grid-template-columns: minmax(0, 1fr); }
.tray.wk-stack3 .key { justify-content: flex-start; padding-left: 16px; padding-right: 16px; }
@media (min-width: 480px) {
  .tray.wk-stack3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tray.wk-stack3 .key { justify-content: center; padding-left: 6px; padding-right: 6px; }
}
.tray .key .hatch-sw { flex: none; }

/* ---------- a line ---------- */
.wk-tags { display: flex; flex-wrap: wrap; gap: 0 6px; }
/* "Price it" only while the box is empty: a priced line needs no label */
.runner .line .cost.has small { display: none; }
.wk-ten { margin-top: 14px; }
.wk-ten .lbl { margin: 0; }
.wk-ten .tray { margin-top: 8px; }
/* Each photo's 48px remove target sits on the thumb's top edge: it never covers
   the middle of the photo (a tap there opens it) and never reaches the camera key. */
.wk-thumbs .thumbs { margin-top: 28px; gap: 14px; }
.wk-thumbs .th-x { top: -24px; right: -12px; }
.wk-th-retry {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; padding: 0; background: transparent; color: var(--red); font: 850 12.5px/1 var(--font);
}
.wk-th-retry .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.th.failed img { opacity: .35; }
button.punchnote { cursor: pointer; }
.wk-warnline {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--amber-tint); box-shadow: inset 0 0 0 1.5px var(--amber-edge); color: var(--amber-ink); font: 650 14.5px/1.4 var(--font);
}
.wk-warnline .ic { width: 20px; height: 20px; flex: none; }
.wk-warnline b { font-weight: 850; }
.punchnote .chg { align-self: center; }
.owner-line .owner-pill { cursor: default; }

/* read-only lines */
.wk-roline .ro-state { margin-top: 10px; }
.wk-roline .ro-note { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--sunk); }
.wk-roline .thumbs { margin-top: 10px; }
.wk-ropunch { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 14.5px/1.3 var(--font); color: var(--red-ink); }
.wk-ropunch .ic { width: 18px; height: 18px; color: var(--red); stroke-width: 2.5; flex: none; }
.wk-ropunch b { font-weight: 850; }
.badge .hatch-sw.wk-sw { width: 12px; height: 12px; box-shadow: none; }
.wk-notes { margin-bottom: 10px; padding: 14px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); }
.wk-notes .lbl { margin-bottom: 6px; }
.wk-notes p + p { font: 500 16px/1.45 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- footer (kept under 190px at 390px wide) ---------- */
.runner .wfoot { padding-top: 10px; padding-bottom: calc(12px + var(--safe-b)); }
.runner .wfoot-top { line-height: 1.1; }
.runner .wfoot-bar { margin-top: 8px; }
.runner .wfoot-btns { margin-top: 10px; }
.wk-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 14px;
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: var(--bw-hair) solid var(--glass-16);
}
.wk-tot { flex: none; min-width: 0; }
.wk-tot > span { display: block; font: 800 12.5px/1.2 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--on-navy-2); }
.wk-tot > b { display: block; margin-top: 3px; font: 900 30px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-tot .hidden-chip { margin-top: 2px; }
.wk-split { margin: 0; text-align: right; font: 650 13.5px/1.4 var(--font); color: var(--on-navy-2); }
.wk-split b { color: var(--on-navy); font-weight: 850; font-variant-numeric: tabular-nums; }
.wk-bandbox { flex: 1 1 0; min-width: 0; max-width: 300px; }
.wk-band { position: relative; height: 48px; }
.wk-you { position: absolute; top: 0; font: 850 12.5px/1 var(--font); color: var(--on-navy); white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.wk-you.wk-you-r { left: auto; right: 0; transform: none; font-weight: 750; color: var(--on-navy-2); }
.wk-track { position: absolute; left: 0; right: 0; top: 19px; height: 10px; border-radius: 5px; background: var(--glass-16); }
.wk-range { position: absolute; top: 19px; height: 10px; border-radius: 5px; background: var(--amber-35); box-shadow: 0 0 0 1.5px var(--amber); }
.wk-dot { position: absolute; top: 14px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--on-navy); box-shadow: 0 0 0 3px var(--navy); }
.wk-lab { position: absolute; top: 35px; font: 750 12.5px/1 var(--font); color: var(--on-navy-2); white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.wk-band-alt { display: none; margin: 0; font: 650 13.5px/1.35 var(--font); color: var(--on-navy-2); text-align: right; }
@media (max-height: 699px) {
  .wk-band { display: none; }
  .wk-band-alt { display: block; }
}
.wk-nosq { margin: 0 0 0 auto; font: 650 13.5px/1.35 var(--font); color: var(--on-navy-2); text-align: right; }
.wfoot .link { color: var(--amber); }
.wk-sqbtn { margin: -12px 0 -12px auto; white-space: normal; text-align: right; }
.wfoot-top .wk-amb { color: var(--amber); }
.runner.is-turn .wfoot .wfoot-top span { color: var(--on-navy-2); }
.runner.is-turn .wfoot .wfoot-top .warn { color: var(--on-navy-red); }
.runner.is-turn .wfoot .wfoot-top .wk-amb { color: var(--amber); }

/* review footer: a light bar, so the navy Submit button reads as primary */
.wfoot.wk-light, .runner.is-turn .wfoot.wk-light { background: var(--card); color: var(--ink); border-top: var(--bw) solid var(--line); }
.wfoot.wk-light :focus-visible { box-shadow: var(--focus); }
.wk-rbtns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; }
.wk-short { display: none; }
@media (max-width: 479px) { .wk-long { display: none; } .wk-short { display: inline; } }
.wk-rbtns .btn { min-height: var(--h-key); padding: 0 12px; }
.wk-rbtns .btn-xl { font-size: 18px; line-height: 1.15; }

/* hide the footer while typing on a phone, so the keyboard never covers the note */
@media (max-width: 767px) {
  .runner.wk-typing .wfoot { display: none; }
}

/* ---------- review ---------- */
.wk-review { padding: 6px 2px 8px; }
.wk-rev-h { font: 850 22px/1.15 var(--font); letter-spacing: -.02em; }
.wk-rev-sub { margin-top: 6px; font: 600 15px/1.42 var(--font); color: var(--ink-2); }
.wk-warn {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; padding: 10px 12px 10px 14px;
  border-radius: var(--r-lg); background: var(--amber-tint); border: var(--bw) solid var(--amber-edge); color: var(--amber-ink);
}
.wk-warn > .ic { width: 22px; height: 22px; flex: none; }
.wk-warn p { flex: 1 1 180px; font: 750 15.5px/1.35 var(--font); }
.wk-warn .link { margin-block: -4px; margin-left: auto; color: var(--blue); }
/* Basement bedrooms with no egress plan: Tyger's standard, said in red. */
.wk-warn.wk-warn-red { background: var(--red-tint); border-color: var(--red-edge); color: var(--red-ink); }
.wk-warn.wk-warn-red > .ic { color: var(--red); }
.wk-warn b { font-weight: 850; }
.wk-review .rtiles { margin-top: 14px; }
.wk-res { margin-top: 14px; border-radius: var(--r-lg); border: var(--bw) solid var(--green-edge); background: var(--green-tint); overflow: clip; }
.wk-res.red { border-color: var(--red-edge); background: var(--red-tint); }
.wk-res-h { display: flex; gap: 12px; align-items: flex-start; padding: 14px; color: var(--green); }
.wk-res.red .wk-res-h { color: var(--red); }
.wk-res-h .ic { width: 26px; height: 26px; flex: none; }
.wk-res-h b { display: block; font: 850 19px/1.25 var(--font); letter-spacing: -.015em; }
.wk-res.red .wk-res-h b { color: var(--red-ink); }
.wk-res-h span { display: block; margin-top: 3px; font: 650 14.5px/1.4 var(--font); color: var(--ink-2); }
.wk-res-list { list-style: none; margin: 0; padding: 0; background: var(--card); border-top: var(--bw-hair) solid var(--red-edge); }
.wk-res-list li { padding: 11px 14px; }
.wk-res-list li + li { border-top: var(--bw-hair) solid var(--hair); }
.wk-res-list b { display: block; font: 800 16px/1.3 var(--font); overflow-wrap: anywhere; }
.wk-res-list span { display: block; margin-top: 3px; font: 600 14px/1.35 var(--font); color: var(--ink-2); overflow-wrap: anywhere; }
.wk-res-list .wk-onlist { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font: 700 13.5px/1.35 var(--font); color: var(--amber-ink); }
.wk-res-list .wk-onlist .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.wk-res-h .wk-res-link { margin-top: 6px; margin-block-end: -10px; }

/* Priced walks: "Mark the other 9 lines N/A" at the end of an open section */
.wk-rest { padding: 12px 14px 16px; border-top: var(--bw) solid var(--hair); }
.wk-rest .btn { min-height: var(--h-btn); }
.wk-review .sendoff { scroll-margin-top: calc(86px + var(--safe-t)); }
.wk-tyger { scroll-margin-top: calc(86px + var(--safe-t)); border-radius: var(--r-tray); }
.wk-tyger .tray { margin-top: 0; }
.wk-review .ta { margin-top: 0; }

/* read-only footer: just the total */
.wk-ro .wk-top { margin: 0; padding: 0; border: 0; }

/* ---------- read-only banner ---------- */
.result-banner > div { min-width: 0; }
.result-banner b .hidden-chip { margin-left: 4px; }
.result-banner .wk-banner-link { margin-top: 4px; margin-block-end: -8px; }
.wk-skel { opacity: 0; animation: fadein var(--dur) var(--ease) 150ms forwards; }

/* ---------- phase cards (job page) ---------- */
.wk-phases { display: grid; gap: 10px; }
.wk-phases .wcard + .wcard { margin-top: 0; }
.wk-phases.is-turn .wcard { border-color: var(--teal-edge); }
.wcard-top .badge { flex: none; margin-top: 2px; }
.wk-phases .wcard-top { flex-wrap: wrap; row-gap: 8px; }
.wk-phases .wcard-top > div { flex: 1 1 190px; }
.wk-phases .wcard p.s { overflow-wrap: anywhere; }
.wk-phases .wres span { overflow-wrap: anywhere; }
.wk-phases .wres b { font-weight: 850; font-variant-numeric: tabular-nums; }
.wk-wtot { margin-top: 10px; font: 650 15px/1.3 var(--font); color: var(--ink-2); }
.wk-wtot b { color: var(--ink); font-weight: 850; font-variant-numeric: tabular-nums; }
.wk-wnone { margin-top: 10px; font: 650 14.5px/1.3 var(--font); color: var(--ink-2); }
/* Buttons size to their words and share each row; a third one takes the next row whole. */
.wk-wbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wk-wbtns .btn { flex: 1 1 auto; margin-top: 0; padding: 0 12px; white-space: nowrap; }
.btn.wk-btn-teal { background: var(--teal-2); color: var(--on-navy); border-color: var(--teal-2); }
.wk-older {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 4px 6px 12px;
  border: var(--bw-hair) solid var(--hair); border-radius: var(--r-md); background: var(--sunk); color: var(--ink); text-align: left;
}
.wk-older span { flex: none; font: 700 13.5px/1.2 var(--font); color: var(--ink-2); }
.wk-older b { flex: 1; min-width: 0; font: 800 14.5px/1.25 var(--font); overflow-wrap: anywhere; }
.wk-older .ic { width: 20px; height: 20px; color: var(--ink-3); flex: none; }

/* ---------- compact phones ---------- */
@media (max-width: 389px) {
  .runner .wbody { padding-left: 10px; padding-right: 10px; }
  .runner .line, .runner .prompt { padding-left: 12px; padding-right: 12px; }
  .runner .tray { gap: 5px; padding: 4px; }
  .runner .tray.t3 .key { font-size: 15.5px; gap: 4px; }
  .runner .tray.t3 .key .ic { width: 17px; height: 17px; }
  .wk-tot > b { font-size: 27px; }
  .wk-rbtns { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .runner .wfoot-btns .btn-amber .ic { display: none; }
  .wk-rbtns .btn-xl { font-size: 17px; }
  .wk-rbtns .btn-xl .ic { display: none; }
}

@media (hover: hover) and (min-width: 1024px) {
  .wk-sec .wsec:hover { background: var(--sunk); }
  .wk-sec.wgroup .wsec:hover { background: var(--navy-tint); }
  .wk-older:hover { background: var(--tray); }
}