/* Count the cost: the ledger, then small live figures in the reading column.
   Tokens only (assets/css/tokens.css). Ink lines on paper; blue = money you put in or borrowed,
   lamp yellow = interest (what it costs on a loan, what it earns in savings). */

#try { padding-top: var(--s5); }

/* ---------- The ledger instrument ---------- */
.lt {
  display: grid;
  grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr);
  grid-template-areas:
    "ex book"
    "ans book"
    "fields book";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.lt-ex { grid-area: ex; display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-bottom: var(--s3); }
.lt-ans { grid-area: ans; }
.lt-fields { grid-area: fields; }
.lt-book { grid-area: book; margin: 0; min-width: 0; }

.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; text-decoration: none; }
.ex:hover { border-bottom-color: var(--hair); }
.ex[aria-pressed="true"] { border-bottom-color: var(--ink); font-weight: 760; }

.lt-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); margin: 0; }
.lt-big { font-size: clamp(3.5rem, 2rem + 4vw, 6rem); line-height: 0.95; font-weight: 850; letter-spacing: -0.035em; }
.lt-unit { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); font-weight: 650; letter-spacing: -0.01em; }
.lt-say { margin: var(--s2) 0 var(--s5); font-size: var(--fs-body); color: var(--ink-2); max-width: 24rem; }

.field { padding-top: var(--s3); border-top: var(--bw) solid var(--hair); margin-bottom: var(--s4); }
.f-label { display: block; width: fit-content; font-size: var(--fs-small); font-weight: 650; margin-bottom: var(--s3); }
.f-hint { font-weight: 400; color: var(--ink-2); }
.f-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.f-in { position: relative; display: inline-flex; align-items: center; }
.f-cur { position: absolute; left: var(--s3); font-size: var(--fs-body); font-weight: 600; color: var(--ink-2); pointer-events: none; }
.f-num { width: 7.5rem; min-height: 44px; padding: 0 var(--s2) 0 var(--s5); border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper); font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.f-num:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.f-times { font-size: var(--fs-small); color: var(--ink-2); }
.f-note { margin: 0; font-size: var(--fs-small); color: var(--ink-2); }

/* Two-way switch: native radios, the checked one inked in. */
.seg { display: inline-flex; margin: 0; padding: 0; border: var(--bw-strong) solid var(--ink); border-radius: var(--r-control); min-width: 0; }
.seg label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s3); font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--ink); color: var(--paper); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }

/* The book. Pages are paper with a 2px ink edge; hours are ink tally strokes. */
.book { display: block; width: 100%; height: auto; overflow: visible; }
.bk-page { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.bk-edge { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.bk-rule { fill: none; stroke: var(--hair); stroke-width: 1; }
.bk-head { fill: none; stroke: var(--ink); stroke-width: 1; }
.bk-margin { fill: none; stroke: var(--ink); stroke-width: 1; }
.bk-mark { fill: none; stroke: var(--ink); stroke-linecap: butt; }
.bk-total { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.bk-hl { fill: var(--yellow); }
.bk-meta { fill: var(--ink-2); font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.bk-title { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 650; }
.bk-sum { fill: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 760; font-variant-numeric: tabular-nums lining-nums; }
.lt-book figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-2); max-width: 40rem; }

@media (max-width: 900px) {
  .lt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ex" "ans" "book" "fields";
    grid-template-rows: none;
  }
  .lt-say { margin-bottom: var(--s4); }
  .lt-book { margin-bottom: var(--s5); }
}

/* ---------- The reading column and its figures ---------- */
.fig-block { margin-top: var(--s7); max-width: 46rem; }
.fig-block h3 { font-size: var(--fs-h3); margin: 0 0 var(--s3); padding-top: var(--s3); border-top: var(--bw) solid var(--ink); }
.fig { margin: var(--s5) 0 var(--s5); }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }

.ctrls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s2) var(--s5); margin-top: var(--s4); }
.ctrl { display: block; min-width: 0; }
.ctrl-wide { margin-top: var(--s4); max-width: 26rem; }
.c-label { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-small); font-weight: 600; }
.c-label output { font-weight: 760; }
.rules { margin: 0; padding: 0; border: 0; grid-column: 1 / -1; }
.rules legend { width: 100%; padding: 0; margin-bottom: var(--s1); }
.rules label { display: flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--fs-small); cursor: pointer; }
.rules input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }
.floor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: var(--fs-small); margin-top: var(--s1); }
.f-in-sm .f-num { width: 5.5rem; }

.readout { margin: var(--s4) 0 0; font-size: var(--fs-body); line-height: 1.5; font-weight: 520; max-width: var(--measure); }
.readout b { font-weight: 760; }
.fig-note { margin-top: var(--s4); padding-top: var(--s2); border-top: var(--bw) solid var(--hair); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; max-width: var(--measure); }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0 0 var(--s2); font-size: var(--fs-small); font-weight: 600; }
.key { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--ink); margin-left: var(--s3); }
.key:first-child { margin-left: 0; }
.key-a { border-top-color: var(--blue); }
.key-ink { border-top-style: dashed; }
.key-fill-a, .key-fill-b { width: 14px; height: 14px; border: 0; }
.key-fill-a { background: var(--blue); }
.key-fill-b { background: var(--yellow); outline: 1px solid var(--ink); outline-offset: -1px; }

/* Chart marks. */
.ax { fill: none; stroke: var(--hair); stroke-width: 1; }
.ax-base { fill: none; stroke: var(--ink); stroke-width: 1; }
.ax-t { fill: var(--ink-2); font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.lab { fill: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.lab-b { font-weight: 760; }
.lab-dim { fill: var(--ink-2); font-weight: 500; }
.ln-ink { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln-min { stroke-dasharray: 7 5; }
.ln-a { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln-gap { fill: none; stroke: var(--paper); stroke-width: 2; }
.dot-ink { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.dot-a { fill: var(--blue); stroke: var(--paper); stroke-width: 2; }
.fill-a { fill: var(--blue); }
.fill-b { fill: var(--yellow); }
.bar-a { fill: var(--blue); }
.bar-b { fill: var(--yellow); stroke: var(--ink); stroke-width: 1; }
.hit { fill: transparent; cursor: pointer; }
.cross { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.tip { position: absolute; top: 0; left: 0; z-index: 2; min-width: 11rem; padding: var(--s2) var(--s3); background: var(--paper); border: var(--bw) solid var(--ink); font-size: var(--fs-small); line-height: 1.4; pointer-events: none; font-variant-numeric: tabular-nums lining-nums; }
.tip b { font-weight: 760; }
.tip { white-space: pre-line; }
.halo { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }

/* Packages on a shelf. */
.pk-a { fill: var(--blue); stroke: var(--ink); stroke-width: 2; }
.pk-b { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.pk-shelf { stroke: var(--ink); stroke-width: 2; }
.pk-t-a { fill: var(--paper); font-family: var(--sans); font-size: 16px; font-weight: 760; }
.pk-t-b { fill: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 760; }

.tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s3); }
.tag { padding: var(--s3); border: var(--bw-strong) solid var(--ink); background: var(--paper); }
.tag-name { margin: 0 0 var(--s2); font-weight: 760; }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.tag-f { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--ink-2); }
.tag-f .f-num { width: 6.5rem; color: var(--ink); }
.tag-f > .f-num { padding-left: var(--s2); }
.tag-unit { margin: var(--s2) 0 0; font-size: var(--fs-small); }
.tag-unit b { font-size: 1.25rem; font-weight: 800; }
.tag.is-cheaper { border-width: 4px; padding: calc(var(--s3) - 2px); }
.tag-win { display: block; width: fit-content; font-weight: 760; }

.trap-table { margin-top: var(--s4); max-width: 34rem; }
.trap-table td.n { font-weight: 650; }

.oc { margin-top: var(--s3); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.38; font-weight: 560; letter-spacing: -0.01em; }

/* Tables and Scripture. */
.meet-table tbody th { width: 24%; font-size: 1.0625rem; }
.meet-table td:last-child { width: 22%; white-space: nowrap; font-weight: 650; }
.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:nth-child(2) { margin: var(--s1) 0; color: var(--ink-2); }
}
#scripture { padding-block: var(--s8); }
#scripture > .wrap > h2 { border-top-color: var(--night-ink); margin-bottom: var(--s6); }
.cost-words .verse:last-child { margin-bottom: 0; }
.cost-words .verse.big p { font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.5rem); }

@media (max-width: 520px) {
  .tags { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
  .tag { padding: var(--s2); }
  .tag.is-cheaper { padding: calc(var(--s2) - 2px); }
  .tag-f .f-num { width: 100%; min-width: 0; }
  .tag-f { flex: 1 1 100%; }
}