/* Weigh it: the balance, editable, with Franklin's strikes. Tokens only (tokens.css). */

/* The first screen holds the instrument, so the page head and the Try it rule sit a little tighter. */
.room-head { padding-block: var(--s5) var(--s3); }
#try { padding-top: var(--s4); }
#try > .wrap > h2 { margin-bottom: var(--s4); }

/* ---------- Name the two answers, pick a starting example ---------- */
.try-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s4); }
.names { display: flex; align-items: flex-end; gap: var(--s3); }
.name { display: flex; flex-direction: column; gap: 2px; }
.name-l { font-size: var(--fs-small); font-weight: 650; line-height: 1.3; }
.name-a .name-l { color: var(--a); }
.name-b .name-l { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.3em; text-underline-offset: -0.1em; text-decoration-skip-ink: none; }
.name input { width: 12.5rem; max-width: 100%; min-height: 44px; padding: 0 var(--s3); border: var(--bw) solid var(--ink); border-bottom-width: 4px; border-radius: var(--r-control); background: var(--paper); font-size: var(--fs-body); font-weight: 650; }
.name-a input { color: var(--a); border-bottom-color: var(--a); }
.name-b input { color: var(--ink); border-bottom-color: var(--yellow); }
.name-or { padding-bottom: 0.6rem; color: var(--ink-2); font-size: var(--fs-small); }

.starts { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.ex { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink); font-size: var(--fs-small); font-weight: 560; cursor: pointer; white-space: nowrap; }
.ex:hover { border-bottom-color: var(--hair); }
.ex[aria-pressed="true"] { border-bottom-color: var(--ink); font-weight: 760; }
.ex-own { color: var(--blue); text-decoration: none; }

/* ---------- Franklin's strikes, under the needle ---------- */
.franklin { margin-top: var(--s4); text-align: center; }
.franklin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); }
.franklin-say { margin: var(--s3) auto 0; max-width: 30rem; min-height: 4.8em; font-size: var(--fs-small); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.franklin-say .step { font-weight: 700; }
/* The words that answer a click are swept with the highlighter (motion.js), so they stay one box. */
.franklin-say .say-answer { display: inline-block; }

/* Which reasons cancelled together: a small numbered token after each struck reason. */
.pair-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.45em; margin-left: 0.35em; padding: 0 0.3em; border: 1.5px solid var(--ink-2); border-radius: var(--r-control); color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; line-height: 1; vertical-align: 0.05em; font-variant-numeric: tabular-nums lining-nums; text-decoration: none; }
.bal-item.is-struck .bal-text .pair-tag { text-decoration: none; }

/* A strike is drawn through the reason the moment it is struck (instant under reduced motion). */
.bal-item.just-struck .bal-text { text-decoration: none; }
.bal-item.just-struck .strike-text { position: relative; }
.bal-item.just-struck .strike-text::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--ink); transform-origin: left center; animation: weigh-strike var(--t-slow) var(--ease) both; }
.bal-list-b .bal-item.just-struck .strike-text::after { transform-origin: right center; }
@keyframes weigh-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Count versus weigh (a small live figure in the reading column) ---------- */
.cvw { margin: var(--s5) 0 var(--s6); padding-block: var(--s4); border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--hair); }
.cvw-fig { container-type: inline-size; }
.cvw-row { --u: min(2.25rem, calc((100cqi - 9rem) / 18)); display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 2px minmax(0, 1fr); align-items: center; column-gap: var(--s3); min-height: 44px; }
.cvw-l { font-size: var(--fs-small); font-weight: 650; }
.cvw-pivot { align-self: stretch; background: var(--ink); }
.cvw-a, .cvw-b { display: flex; align-items: center; gap: 4px; min-height: 30px; }
.cvw-a { justify-content: flex-end; }
.cvw-n { min-width: 1.5ch; font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.cvw-a .cvw-n { margin-right: var(--s2); color: var(--a); text-align: right; }
.cvw-b .cvw-n { margin-left: var(--s2); }
.cvw-dot { width: calc(var(--u) - 4px); height: calc(var(--u) - 4px); max-width: 18px; max-height: 18px; border-radius: 50%; flex: none; }
.cvw-a .cvw-dot { background: var(--a); }
.cvw-b .cvw-dot { background: var(--b); border: 1.5px solid var(--ink); }
.cvw-a[data-k="weigh"], .cvw-b[data-k="weigh"] { gap: 0; }
.cvw-block { height: 24px; flex: none; }
.cvw-a .cvw-block { width: var(--u); background: var(--a); border-left: 2px solid var(--paper); }
.cvw-b .cvw-block { width: calc(var(--u) * 5); background: var(--b); border: 1.5px solid var(--ink); }
.cvw-ctl { display: grid; gap: var(--s1); margin-top: var(--s4); }
.cvw-ctl label { font-size: var(--fs-small); font-weight: 560; }
.cvw-ctl output { font-weight: 800; }
.cvw .range { max-width: 24rem; }
.cvw-say { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.5; color: var(--ink); min-height: 3em; }

/* ---------- Where you'll meet this ---------- */
.meet-lede { margin-bottom: var(--s4); }
.meet-table tbody th { width: 24%; font-size: 1.0625rem; }
.meet-table td { width: 38%; }
.meet-table tbody tr:hover { background: var(--paper-2); }
@media (max-width: 640px) {
  .meet-table thead { display: none; }
  .meet-table, .meet-table tbody, .meet-table tr, .meet-table th, .meet-table td { display: block; width: auto !important; }
  .meet-table tr { padding: var(--s3) 0; border-bottom: var(--bw) solid var(--hair); }
  .meet-table th, .meet-table td { border: 0; padding: 0; }
  .meet-table td { margin-top: var(--s1); }
  .meet-table td::before { content: attr(data-label) ": "; font-weight: 650; color: var(--ink-2); }
}

/* ---------- Scripture, Watch, Use ---------- */
#scripture { padding-block: var(--s8); }
.weigh-verses .verse:last-child { margin-bottom: 0; }
.watch-note { margin-top: var(--s5); padding-top: var(--s3); border-top: var(--bw) solid var(--hair); font-size: var(--fs-small); color: var(--ink-2); }
.use p:last-child { margin-top: var(--s4); }

@media (max-width: 760px) {
  .franklin { margin-top: var(--s3); }
  .franklin-say { min-height: 6em; }
}
@media (max-width: 560px) {
  .try-bar { gap: var(--s2); }
  .names { width: 100%; }
  .name { flex: 1; min-width: 0; }
  .name input { width: 100%; }
  .starts { width: 100%; }
}

/* ---------- The preset tray: pick a choice, make it fit, weigh each line ---------- */
.tray { margin-top: var(--s6); padding-top: var(--s4); border-top: var(--bw-strong) solid var(--ink); scroll-margin-top: var(--s3); }
.tray-head h3 { margin: 0; font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.1; }
.tray-lede { margin: var(--s2) 0 var(--s4); max-width: var(--measure); color: var(--ink-2); }

/* The chosen question, then two or three facts that fit the list to this visitor. */
.fit-title { scroll-margin-top: var(--s4); margin: var(--s6) 0 0; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); font-weight: 850; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; }
.fit-title:focus { outline: none; }
/* "Something else?" has no ready answers: name the two right here. */
.own-names { margin-top: var(--s4); }
.own-names[hidden] { display: none; }
.fit { max-width: 46rem; margin-top: var(--s3); }
.fit[hidden] { display: none; }
.fit-how { margin: 0 0 var(--s2); font-size: var(--fs-small); color: var(--ink-2); }
.fit-qs { border-top: var(--bw) solid var(--ink); }
.fit-q { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s4); min-height: 60px; padding: var(--s2) 0; border-bottom: var(--bw) solid var(--hair); }
.fit-ask { font-weight: 680; line-height: 1.25; }
.fit-opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fit-opt { min-height: 44px; padding: 0 var(--s3); border: var(--bw) solid var(--line); border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: var(--fs-small); font-weight: 620; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.fit-opt:hover { border-color: var(--ink); }
.fit-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); box-shadow: 0 0 0 1px var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* A safety note: said once, plainly, and it stays while that answer stands. Red is for warnings only,
   and it is a rule across the top, never a strip down the side. */
.fit-note { max-width: var(--measure); margin: var(--s4) 0 0; padding-top: var(--s2); border-top: 3px solid var(--red); font-weight: 650; line-height: 1.45; }
.fit-note[hidden] { display: none; }
.fit-note a { color: inherit; font-weight: 800; white-space: nowrap; }
.fit-say { width: fit-content; min-height: 1.5em; margin: var(--s2) 0 0; font-size: var(--fs-small); font-weight: 600; }

/* The result bar stays in view while the visitor works down the list. */
.tray-read { position: sticky; top: 0; z-index: 3; margin-top: var(--s3); padding: var(--s2) 0 var(--s2); background: var(--paper); border-bottom: var(--bw) solid var(--ink); }
.read-names { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin: 0 0 var(--s1); font-size: var(--fs-small); font-weight: 700; line-height: 1.2; }
.read-a { color: var(--a); }
.read-b { text-align: right; }
.read-b .read-w { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.3em; text-underline-offset: -0.1em; text-decoration-skip-ink: none; }
.read-names b { display: inline-block; font-size: 1.25rem; font-weight: 850; }
/* Before both sides hold a line there is no percent to give: each side says how many lines it has. */
.is-empty .read-names b { font-size: var(--fs-small); font-weight: 560; color: var(--ink-2); }
.share { display: flex; height: 12px; margin: 0; border: var(--bw) solid var(--ink); }
.share span { flex: 1 1 0; transition: flex-grow var(--t-slow) var(--ease); }
.share-a { background: var(--a); }
.share-b { background: var(--b); }
.is-empty .share span { background: transparent; }
/* The sentence is for screen readers; the names, numbers and bar say the same thing to the eye. */
.tray-say { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A safety answer pauses the bar: no numbers, one sentence. */
.is-paused .read-names b, .is-paused .share { display: none; }
.is-paused .tray-say { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: var(--fs-small); font-weight: 650; }

.tray-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s5); margin-top: var(--s2); }
.tray-how { margin: 0; font-size: var(--fs-small); color: var(--ink-2); max-width: 40rem; }
.tray-modes { display: flex; gap: var(--s4); }
.tray-more { display: flex; gap: var(--s4); margin-bottom: var(--s2); }
.tray-more[hidden] { display: none; }
.tray-list { display: grid; gap: 0 var(--s6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; margin-top: var(--s2); }
.tray-list > .sug-list { grid-column: 1 / -1; display: grid; gap: 0 var(--s6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.area { border-top: var(--bw) solid var(--ink); }
.area summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 44px; cursor: pointer; list-style: none; }
.area summary::-webkit-details-marker { display: none; }
.area summary::after { content: "Open"; flex: none; font-size: var(--fs-meta); font-weight: 650; color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.area[open] summary::after { content: "Close"; }
.area::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete; }
.area[open]::details-content { block-size: auto; }
.area-name { flex: 1; font-weight: 700; }
.area-count { font-size: var(--fs-meta); color: var(--ink-2); }
.sug-list { list-style: none; margin: 0; padding: 0; }
/* A line: its words, then the two sides as equal halves (the same side is always in the same place
   down the list), then, once it is on the scale, how heavy it is. */
.sug { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: var(--s1) var(--s2); margin: 0; padding: var(--s2) 0; border-bottom: var(--bw) solid var(--hair); }
.sug-mark { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--hair); transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.sug.is-a .sug-mark { background: var(--a); border-color: var(--a); }
.sug.is-b .sug-mark { background: var(--b); border-color: var(--ink); }
.sug.just-landed .sug-mark { animation: sug-land var(--t-slow) var(--ease-swing); }
@keyframes sug-land { from { transform: scale(0.3); } to { transform: scale(1); } }
.sug-text { min-width: 0; width: fit-content; font-size: var(--fs-small); line-height: 1.3; }
.sug.is-a .sug-text, .sug.is-b .sug-text { font-weight: 650; }
.sug-btns { grid-column: 2; display: flex; gap: var(--s2); }
.sug-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: var(--s1) var(--s2); border: var(--bw) solid var(--line); border-radius: var(--r-control); background: transparent; font-size: var(--fs-small); font-weight: 620; line-height: 1.15; text-wrap: balance; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.sug-a { color: var(--a); }
.sug-b { color: var(--ink); }
.sug-btn:hover { border-color: var(--ink); }
.sug-a[aria-pressed="true"] { border-color: var(--a); background: var(--paper-2); box-shadow: 0 0 0 1px var(--a); }
.sug-b[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-2); box-shadow: 0 0 0 1px var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
/* Once a line is on the scale, its weight is set right here. */
.sug-w { grid-column: 2; display: flex; align-items: center; gap: var(--s2); }
.sug-w-l { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.sug-w .dots-row { margin-inline: 0; }
.sug-w .dot-label { width: 44px; }
.sug.is-a .dot-label.on .dot { background: var(--a); border-color: var(--a); }
.sug.is-b .dot-label.on .dot { background: var(--b); }
.tray-next { margin: var(--s5) 0 0; max-width: var(--measure); font-size: var(--fs-small); }
@media (max-width: 560px) {
  .fit-q { grid-template-columns: minmax(0, 1fr); }
  .fit-opt { flex: 1 1 auto; }
  .tray-bar { margin-top: var(--s3); }
}

/* Hold the balance's space until its script builds it, so nothing below jumps (measured 2026-10-04). */
.balance-weigh:not(.bal) { min-height: 600px; }
@media (max-width: 760px) { .balance-weigh:not(.bal) { min-height: 1500px; } }

/* Arriving with a preset (the head script marks the page before first paint): the scale starts
   empty, so hold exactly that much room, before and after the script builds it. Nothing above the
   question changes size, so the page only scrolls to it. Measured at 14 widths, 2026-10-13. */
[data-preset] .balance-weigh { min-height: clamp(500px, 22vw + 285px, 566px); }
@media (max-width: 760px) { [data-preset] .balance-weigh { min-height: calc(44vw + 614px); align-content: start; } }