/* Where to live: the walk on the left, the answer beside it. Tokens only (assets/css/tokens.css). */

.sum-say { margin: 0; max-width: 60rem; font-size: var(--fs-small); color: var(--ink-2); }
.sum-clear { margin: var(--s3) 0 var(--s5); }
.sum { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s6) var(--s7); align-items: start; }

/* ---------- The four steps ---------- */
.step { padding-block: var(--s5); border-top: var(--bw-strong) solid var(--ink); }
.step:first-child { padding-top: var(--s3); }
.step h3 { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s2); }
.step-n { font-size: 1.75rem; font-weight: 850; line-height: 1; font-variant-numeric: lining-nums; }
.step > p { max-width: var(--measure); margin: 0 0 var(--s4); }
.step h4 { margin: var(--s5) 0 var(--s2); font-size: var(--fs-small); font-weight: 760; }
.step-say { width: fit-content; margin: var(--s4) 0 0; font-weight: 760; }

/* Step 1: a tick, and how close it has to stay. */
.ties { list-style: none; margin: 0; padding: 0; border-top: var(--bw) solid var(--hair); }
.tie { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; column-gap: var(--s4); min-height: 56px; padding: var(--s2) 0; border-bottom: var(--bw) solid var(--hair); }
.tie-on { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); align-items: start; padding-block: var(--s2); cursor: pointer; line-height: 1.35; }
.tie-on input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.tie[data-on="false"] .tie-on { color: var(--ink-2); }
.tie-always { font-size: var(--fs-small); font-weight: 650; }
.walk select, .walk input[type="text"] { width: 100%; min-height: 48px; padding: 0 var(--s3); border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper); color: var(--ink); font-size: var(--fs-small); }
.walk input[type="text"] { font-size: var(--fs-body); font-weight: 650; }
.walk input::placeholder { color: var(--ink-2); font-weight: 400; }
.walk select:disabled { border-color: var(--line); color: var(--ink-2); }
.walk select, .walk input { scroll-margin-top: 6rem; scroll-margin-bottom: 2rem; }

/* Step 2: the limits the ties set, then the typed boxes. */
.tie-limits { margin: 0; padding-left: 1.2em; }
.tie-limits li { margin: var(--s1) 0; font-weight: 650; }
.tie-limits li.none { list-style: none; margin-left: -1.2em; font-weight: 400; color: var(--ink-2); }
.boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.boxes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.boxes label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-small); font-weight: 650; }

/* Step 3: one card a place. Out is said in words and drawn with a line through the name, never by color alone. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--s4); margin-top: var(--s5); }
.place { padding: var(--s4); border: var(--bw-strong) solid var(--ink); background: var(--paper); }
.place h4 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); font-size: 1.125rem; font-weight: 800; }
.place-st { font-size: var(--fs-meta); font-weight: 760; text-transform: none; }
.place[data-status="in"] .place-st { padding: 0 var(--s2); background: var(--yellow); color: var(--on-yellow); }
.place[data-status="out"] { border-color: var(--line); }
.place[data-status="out"] .place-name { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-2); }
.place[data-status="out"] .place-st { color: var(--red); }
.checks { list-style: none; margin: 0; padding: 0; }
/* Each line reads across: what it is, then Not sure, Yes or No. */
.checks li { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: center; column-gap: var(--s3); padding: var(--s2) 0; border-top: var(--bw) solid var(--hair); }
.checks select { min-height: 44px; }
.checks label { font-size: var(--fs-small); line-height: 1.35; }
.tag { display: inline-block; margin-right: var(--s1); font-size: var(--fs-meta); font-weight: 760; color: var(--ink-2); }
.checks li[data-kind="limit"][data-mark="no"] select { border-color: var(--red); border-width: var(--bw-strong); }
.place-say { margin: var(--s3) 0 0; font-size: var(--fs-small); font-weight: 650; }
.place[data-status="out"] .place-say { color: var(--red); }
.cards-none, .checks-none, .visit-none { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* Step 4: the questions for the visit, then the checks for any visit. */
.visit h4 { margin-top: var(--s4); }
.visit-qs { margin: 0; padding-left: 1.2em; }
.visit-qs li, .visit-fixed li { margin: var(--s2) 0; max-width: var(--measure); }
.visit-fixed { margin: 0; padding-left: 1.4em; }

/* ---------- The answer beside the walk ---------- */
.answer { position: sticky; top: var(--s5); padding-top: var(--s3); border-top: var(--bw-strong) solid var(--ink); }
.answer-k { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.answer-n { margin: 0; font-size: clamp(2.75rem, 1.4rem + 5vw, 5.25rem); font-weight: 850; line-height: 0.98; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.answer-n small { display: block; margin-top: var(--s1); font-size: 1.125rem; font-weight: 760; letter-spacing: 0; }
.answer-v { margin: var(--s3) 0 0; width: fit-content; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
.answer[data-verdict="out"] .answer-n { color: var(--red); }
.answer-find { margin: var(--s3) 0 0; font-weight: 700; }
.answer-find:empty { display: none; }
.answer-places { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: var(--fs-small); }
.answer-places li { padding: var(--s2) 0; border-top: var(--bw) solid var(--hair); }
.answer-places li[data-status="out"] b { text-decoration: line-through; color: var(--ink-2); }

.sum-live { display: none; }

/* ---------- Questions to ask when the choice is shared ---------- */
.asks { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: var(--bw-strong) solid var(--ink); }
.asks li { margin: 0; padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }
.meet { margin: 0; padding-left: 1.2em; max-width: var(--measure); }
.meet li { margin: var(--s2) 0; }

.next-room .next-go { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "n" "q"; }

@media (max-width: 860px) {
  .sum { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .answer { position: static; }
  .sum-live { display: block; position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--gutter) * -1) var(--s4); padding: var(--s3) var(--gutter); border-bottom: var(--bw-strong) solid var(--ink); background: var(--paper); font-size: var(--fs-small); font-weight: 760; line-height: 1.3; }
}
@media (max-width: 640px) {
  .tie { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); padding-bottom: var(--s3); }
  .tie-reach, .tie-always { margin-left: calc(28px + var(--s3)); }
  .boxes, .boxes-3 { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .site-head, .site-foot, .room-head .dek, .next-room, .sum-live, .sum-say, .sum-clear, .answer, main > section:not(#try), #try > .wrap > h2,
  .walk > .step:not(#step-visit), #wh-print { display: none !important; }
  .sum { display: block; }
  .step { border: 0; }
}