/* Living on wheels: four pages that share these parts. Tokens only (assets/css/tokens.css). */

/* The four pages, listed under each page's question. The current one is marked in words and weight. */
.onpage a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 760; }

/* ---------- The sum: your numbers on one side, the answer on the other ---------- */
.sum { margin: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6) var(--s7); align-items: start; }
.sum-small { margin: var(--s5) 0; padding-block: var(--s4); border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--hair); }
.sum-say { margin: 0 0 var(--s4); max-width: 60rem; font-size: var(--fs-small); color: var(--ink-2); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s4); align-items: end; }
.fields .wide { grid-column: 1 / -1; }
.fields label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-small); font-weight: 650; line-height: 1.3; }
.fields .hint { font-weight: 400; color: var(--ink-2); }
.fields input[type="number"] { 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-body); font-weight: 650; font-variant-numeric: tabular-nums lining-nums; }
/* A field brought into view by the Tab key lands clear of the short answer that rides along on a phone. */
.fields input { scroll-margin-top: 6rem; scroll-margin-bottom: 2rem; }
.fields h3 { grid-column: 1 / -1; margin: var(--s3) 0 0; padding-top: var(--s3); border-top: var(--bw) solid var(--hair); font-size: 1.125rem; }
.fields h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fields .slide output { font-weight: 800; }
/* Fifth wheel or travel trailer: two plain choices, side by side where they fit. */
.fields .kind { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; padding: 0 0 var(--s3); border: 0; border-bottom: var(--bw) solid var(--hair); }
.fields .kind legend { width: 100%; margin-bottom: var(--s2); padding: 0; font-size: var(--fs-small); font-weight: 650; }
.fields .kind label { flex-direction: row; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--fs-body); font-weight: 400; cursor: pointer; }
.fields .kind input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.fields .kind label:has(input:checked) { font-weight: 700; }

/* The answer: one big number, the words that judge it, then the working. */
.answer { position: sticky; top: var(--s5); }
.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 { font-size: 0.42em; font-weight: 700; letter-spacing: -0.01em; }
.answer-v { margin: var(--s2) 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; }
/* Red is for the number that is over the limit. The words under it stay ink, so they can take the highlighter. */
.answer[data-verdict="over"] .answer-n { color: var(--red); }
/* A missing number is named, never drawn as a zero: the figure and the bar wait until both numbers are in. */
.answer[data-verdict="need"] .answer-n,
.answer[data-verdict="need"] .bar,
.answer[data-verdict="need"] .bar-note,
.answer[data-verdict="need"] .parts { display: none; }
.answer-say { margin: var(--s4) 0 0; max-width: 34rem; font-size: var(--fs-small); line-height: 1.5; }

/* Over the yellow label: the number and its words in red, the warning color. */
.answer-say[data-verdict="over"] #mh-head { color: var(--red); font-weight: 760; }

/* The load bar: its whole width is the larger of what the truck may carry and what you are asking of it. */
.bar { position: relative; display: flex; height: 48px; margin: var(--s5) 0 var(--s2); border: var(--bw-strong) solid var(--ink); background: var(--paper); }
.bar > span { display: flex; align-items: center; height: 100%; flex: none; overflow: hidden; }
.bar .seg-a { background: var(--blue); color: var(--paper); }
.bar .seg-b { background: var(--yellow); color: var(--on-yellow); }
.bar .seg-ink { background: var(--ink); }
.bar .seg-gap { box-shadow: 0 0 0 1px var(--paper); }
/* Each part of the bar says its own name, so nobody has to match colors to rows. A part too thin to hold
   its name simply shows none: the table below has every figure. */
.bar i { padding-left: var(--s2); font-style: normal; font-size: var(--fs-meta); font-weight: 700; white-space: nowrap; }
.bar .past { position: absolute; top: 0; bottom: 0; right: 0; background: var(--red); }
.bar .limit { position: absolute; top: -10px; bottom: -10px; width: 0; border-left: var(--bw-strong) solid var(--ink); }
.bar-note { display: flex; justify-content: space-between; gap: var(--s4); margin: 0; font-size: var(--fs-meta); font-weight: 650; color: var(--ink-2); }
.bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; column-gap: var(--s3); }
.bar-row .bar { margin: var(--s2) 0; }
.bar-row .bar-name { font-size: var(--fs-small); font-weight: 760; }

/* The parts, as a small table read row by row. */
.parts { width: 100%; margin-top: var(--s3); border-collapse: collapse; font-size: var(--fs-small); line-height: 1.4; }
.parts th, .parts td { padding: var(--s2) 0; border-bottom: var(--bw) solid var(--hair); text-align: left; font-weight: 400; vertical-align: baseline; }
.parts td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.parts tr.sum-row th, .parts tr.sum-row td { border-top: var(--bw-strong) solid var(--ink); font-weight: 800; }
.sw { display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.55em; border: var(--bw) solid var(--ink); vertical-align: -0.02em; }
.sw-a { background: var(--blue); border-color: var(--blue); }
.sw-b { background: var(--yellow); }
.sw-ink { background: var(--ink); }

.dated { margin-top: var(--s5); max-width: var(--measure); font-size: var(--fs-small); color: var(--ink-2); }

/* On a phone the answer sits below the fields, so the short answer rides along the top of the screen
   while you type. At the top it is never under the keyboard and never over the field you are in. */
.sum-live { display: none; }

/* ---------- What "rests on the truck" means: one line drawing, in the site's ink ---------- */
.rig-fig { margin: var(--s5) 0; }
.rig { width: 100%; height: auto; }
.rig .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rig .fill { fill: var(--paper); }
.rig .pin { fill: none; stroke: var(--blue); stroke-width: 4; }
.rig .pin-head { fill: var(--blue); }
.rig .rest { fill: none; stroke: var(--ink); stroke-width: 4; }
.rig .rest-head { fill: var(--ink); }
.rig-key { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin-top: var(--s2); font-size: var(--fs-small); color: var(--ink-2); }

/* ---------- Two sums to run first: the hub's two doors, each showing its example answer ---------- */
.sum-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); margin-top: var(--s5); }
.sum-door { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s1); padding: var(--s4) 0 var(--s3); border-top: var(--bw-strong) solid var(--ink); border-bottom: var(--bw) solid var(--hair); color: var(--ink); text-decoration: none; }
.sum-door .door-k { font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.sum-door .door-n { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 4.75rem); font-weight: 850; line-height: 0.98; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.sum-door .door-n small { font-size: 0.42em; font-weight: 700; letter-spacing: -0.01em; }
.sum-door .door-t { margin-top: var(--s2); font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.01em; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.sum-door .door-q { font-size: var(--fs-small); color: var(--ink-2); max-width: 30rem; }
.sum-door:hover .door-t, .sum-door:focus-visible .door-t { text-decoration-thickness: 3px; }

/* ---------- The order to decide in (a real sequence, so it is numbered) ---------- */
.order { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: step; border-top: var(--bw-strong) solid var(--ink); }
.order > li { counter-increment: step; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--s4); margin: 0; padding: var(--s4) 0; border-bottom: var(--bw) solid var(--hair); }
.order > li::before { content: counter(step); font-size: 2.5rem; font-weight: 850; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.order h3 { margin: 0 0 var(--s1); font-size: var(--fs-h3); }
.order p { margin: 0; max-width: 38rem; }
.order .go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* ---------- Why owners stop: five bars, each with its number in words ---------- */
.stops { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.35; max-width: 46rem; }
.stops th, .stops td { padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); text-align: left; vertical-align: middle; }
.stops th { width: 46%; padding-right: var(--s4); font-weight: 650; }
.stops td.n { width: 6.5rem; padding-right: var(--s3); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.stops .stop-bar { display: block; height: 18px; background: var(--ink); }

/* ---------- Two sides, told plainly ---------- */
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.sides h3 { margin-top: 0; padding-bottom: var(--s2); border-bottom: var(--bw-strong) solid var(--ink); }
.sides ul { list-style: none; margin: 0; padding: 0; }
.sides li { margin: 0; padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }

/* ---------- Before you sign: a list you tick ---------- */
.ticks { list-style: none; margin: 0; padding: 0; max-width: 46rem; border-top: var(--bw-strong) solid var(--ink); }
.ticks li { margin: 0; border-bottom: var(--bw) solid var(--hair); }
.ticks label { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--s3); align-items: start; min-height: 48px; padding: var(--s3) 0; cursor: pointer; }
.ticks input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--ink); }
.ticks b { font-weight: 700; }
.ticks label:has(input:checked) { color: var(--ink-2); }
.ticks-say { width: fit-content; margin: var(--s4) 0 0; font-weight: 700; }

/* Prices read on a named day: a plain table. */
.prices td.n { white-space: nowrap; }
.prices tbody th { width: 34%; }

/* The way on to the next page: the site's own next-room parts, without a drawing. */
.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; }
  .sides { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .sum-doors { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .sum-live { display: block; position: sticky; top: 0; z-index: 2; margin: 0 calc(var(--gutter) * -1); 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; }
  .sum-live[data-verdict="over"] { color: var(--red); }
}
@media (max-width: 560px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .order > li { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s3); }
  .order > li::before { font-size: 2rem; }
  .stops th { width: auto; }
  .stops, .stops tbody, .stops tr { display: block; }
  .stops tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }
  .stops th, .stops td { border: 0; padding: 0; width: auto !important; }
  .stops td.bar-cell { grid-column: 1 / -1; margin-top: var(--s2); }
  .bar-row { grid-template-columns: minmax(0, 1fr); }
  .prices thead { display: none; }
  .prices, .prices tbody, .prices tr, .prices th, .prices td { display: block; width: auto !important; }
  .prices tr { padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }
  .prices th, .prices td { border: 0; padding: 0; text-align: left !important; }
  .prices td { margin-top: var(--s1); }
}
@media print {
  .onpage, .next-room, .sum-live { display: none !important; }
  .answer { position: static; }
}