/* Ask counsel: the table. Rehoboam's council seen from the king's seat, then a friend asks
   to borrow money. Tokens only (tokens.css); blue = the elders (option A), lamp yellow with ink
   = the young men (option B). Dashed = a promise, never history. */

/* ---------- Play Rehoboam: the stage ---------- */
.rb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas:
    "req req req"
    "ea fig yb"
    "ea cap yb"
    "ea cho yb"
    "ea out yb";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.rb-req { grid-area: req; display: grid; grid-template-columns: subgrid; align-items: start; margin-bottom: var(--s5); }
.rb-req .rb-lede { grid-column: 1; }
.rb-req .verse { grid-column: 2 / -1; }
.rb-fig { grid-area: fig; margin: 0; }
.rb-cap { grid-area: cap; }
.rb-side-a { grid-area: ea; }
.rb-side-b { grid-area: yb; }
.rb-choose { grid-area: cho; }
.rb-out { grid-area: out; }

.rb-lede { margin: 0.35rem 0 var(--s3); font-size: var(--fs-small); color: var(--ink-2); max-width: 34rem; }
.rb .verse { margin: 0; }
.rb .verse p { font-size: 1.1875rem; line-height: 1.45; margin-bottom: var(--s1); }
.rb-req .verse p { font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.4375rem); line-height: 1.32; max-width: 50rem; }

/* The two sides. Their names gain or lose weight with the counsel they carry. */
.rb .rb-word {
  margin: 0;
  font-size: clamp(2.25rem, 1.3rem + 2vw, 2.875rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-stretch: 90%;
  font-variation-settings: "wght" 560;
  transition: font-variation-settings var(--t-slow) var(--ease);
}
.rb-word-a { color: var(--a); }
.rb-word-b { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.2em; text-underline-offset: 0.06em; text-decoration-skip-ink: none; }
.rb[data-elders="heard"] .rb-word-a, .rb[data-young="heard"] .rb-word-b { font-variation-settings: "wght" 740; }
.rb[data-elders="followed"] .rb-word-a, .rb[data-young="followed"] .rb-word-b { font-variation-settings: "wght" 900; }
.rb[data-elders="set-aside"] .rb-word-a, .rb[data-young="set-aside"] .rb-word-b { font-variation-settings: "wght" 200; }

.rb-tag { margin: var(--s2) 0 var(--s4); font-size: var(--fs-small); color: var(--ink-2); }
.rb-hear[aria-expanded="true"] { border-color: var(--line); }
.rb-said { margin-top: var(--s4); }

/* Questions: each one asked leaves a slip of paper on your side of the table. */
.rb-ask-h { margin: var(--s5) 0 var(--s2); font-size: var(--fs-small); font-weight: 700; }
.rb-qs { list-style: none; margin: 0; padding: 0; border-top: var(--bw) solid var(--hair); }
.rb-qs li { margin: 0; border-bottom: var(--bw) solid var(--hair); }
.rb-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 44px; padding: var(--s2) 0; border: 0; background: none;
  color: var(--ink); text-align: left; font-size: var(--fs-small); font-weight: 560; line-height: 1.3; cursor: pointer;
}
.rb-q::after {
  content: "Ask"; flex: none; margin-right: 2px; font-size: var(--fs-meta); font-weight: 650; color: var(--blue);
  text-decoration: underline; text-underline-offset: 0.2em;
}
.rb-q:hover::after { text-decoration-thickness: 2px; }
.rb-q[data-asked]::after { content: "Asked"; color: var(--ink-2); text-decoration: none; }
.rb-q[aria-expanded="true"] { font-weight: 720; }
.rb-a { margin: 0 0 var(--s3); font-size: var(--fs-small); line-height: 1.5; }

/* The drawing. */
.rb-svg { width: 100%; height: auto; overflow: visible; }
.rb-svg .tbl { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.rb-svg .tbl-edge { fill: var(--ink); }
.rb-svg .tbl-seam { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 5; }
.rb-svg .crown { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.rb-svg .crown-band { stroke: var(--ink); stroke-width: 1.5; }
.rb-svg .p path, .rb-svg .p circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: stroke-dasharray var(--t-mid) var(--ease); }
.rb-svg .side path, .rb-svg .side circle { stroke: var(--ink); stroke-width: 2; transition: fill var(--t-mid) var(--ease); }
.rb-svg .side-elders path, .rb-svg .side-elders circle { fill: var(--a); }
.rb-svg .side-young path, .rb-svg .side-young circle { fill: var(--b); }
.rb-svg .note rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.rb-svg .note path { fill: none; stroke: var(--ink); stroke-width: 1.2; }

/* Motion only when touched: a side leans in when heard, a slip drops when you ask, the people
   go home (history) or step up to the table (the elders' promise). */
.rb-svg .seat { transition: transform var(--t-slow) var(--ease-swing), opacity var(--t-slow) var(--ease); transition-delay: calc(var(--i) * 60ms); }
.rb-svg[data-elders="heard"] .side-elders .seat, .rb-svg[data-elders="followed"] .side-elders .seat { transform: translateX(11px); }
.rb-svg[data-young="heard"] .side-young .seat, .rb-svg[data-young="followed"] .side-young .seat { transform: translateX(-11px); }
.rb-svg[data-elders="set-aside"] .side-elders .seat { transform: translateX(-8px); opacity: 0.45; }
.rb-svg[data-young="set-aside"] .side-young .seat { transform: translateX(8px); opacity: 0.45; }
.rb-svg[data-elders="set-aside"] .side-elders path, .rb-svg[data-elders="set-aside"] .side-elders circle,
.rb-svg[data-young="set-aside"] .side-young path, .rb-svg[data-young="set-aside"] .side-young circle { fill: var(--paper); }

.rb-svg .note { opacity: 0; transform: translateY(-16px); transition: transform var(--t-slow) var(--ease-swing), opacity var(--t-mid) var(--ease); }
.rb-svg .note.on { opacity: 1; transform: none; }

.rb-svg .p { transition: transform 700ms var(--ease), opacity 600ms var(--ease); transition-delay: calc(var(--i) * 40ms); }
.rb-svg .p.go { transform: translateY(-18px); opacity: 0.14; }
.rb-svg .p.stay { transform: translateY(8px); }
.rb-svg .p.promise { transform: translateY(16px); }
.rb-svg .p.promise path, .rb-svg .p.promise circle { stroke-dasharray: 4 3; }

.rb-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.35; }
.rb-legend .lg-a { color: var(--a); font-weight: 600; }
.rb-legend .lg-b { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.3em; text-underline-offset: -0.1em; text-decoration-skip-ink: none; }
.rb-cap { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.45; text-align: center; text-wrap: balance; }

/* The choice, then what came of it. */
.rb-choose { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--bw-strong) solid var(--ink); }
.rb-choose-q { margin: 0 0 var(--s3); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.rb-choose-q strong { font-weight: 800; }
.rb-choices { display: flex; flex-wrap: wrap; gap: var(--s3); width: fit-content; }
.rb-choice { gap: 0.3em; font-size: 1.0625rem; }

.rb-out { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--bw-strong) solid var(--ink); }
.rb-out:focus { outline: none; }
.rb .rb-out-h { margin: 0 0 var(--s3); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.05; }
.rb-out-h:focus { outline: none; }
.rb-so { white-space: nowrap; }
.rb-out-h:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.rb-feedback p { margin: 0 0 var(--s2); font-size: var(--fs-small); line-height: 1.5; }
.rb-feedback p:first-child { font-weight: 650; }
.rb-views { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s4); }
.rb-mini { display: none; }
.rb-panel > p { font-size: var(--fs-small); margin-bottom: var(--s2); }
.rb-panel .verse { margin-bottom: var(--s4); }
.rb-mark { padding-top: var(--s3); border-top: var(--bw-strong) dashed var(--ink); font-weight: 700; }
.rb-note { margin: var(--s4) 0; padding-top: var(--s3); border-top: var(--bw) solid var(--hair); font-size: var(--fs-small); color: var(--ink-2); }

/* Tablet: the drawing on top, the two sides beside each other. */
@media (max-width: 1023px) {
  .rb {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "req req" "fig fig" "cap cap" "ea yb" "cho cho" "out out";
    grid-template-rows: none;
    row-gap: 0;
  }
  .rb-req { display: block; }
  .rb-fig { max-width: 40rem; width: 100%; justify-self: center; }
  .rb-mini { display: block; max-width: 30rem; margin: 0 auto var(--s5); }
  .rb-mini .rb-cap { margin-top: var(--s2); }
  .rb-side-a, .rb-side-b { margin-top: var(--s6); }
}
/* Phone: one column, in reading order. */
@media (max-width: 680px) {
  .rb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "req" "fig" "cap" "ea" "yb" "cho" "out"; }
  .rb-side-b { margin-top: var(--s7); }
  .rb-legend { justify-content: flex-start; }
}
@media (min-width: 1024px) {
  .rb-legend .lg-a, .rb-legend .lg-b { display: none; }
  .rb-legend { justify-content: center; }
}

/* ---------- A friend asks to borrow money ---------- */
.loan { margin-top: var(--s8); padding-top: var(--s3); border-top: var(--bw) solid var(--ink); }
.loan .loan-h { margin: 0 0 var(--s2); font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; }
.loan-set { max-width: var(--measure); color: var(--ink-2); }
.loan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); margin-top: var(--s5); align-items: start; }
.loan-step { display: block; margin: 0 0 var(--s3); font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.loan-leans { display: flex; flex-wrap: wrap; gap: var(--s3); }
.loan-write { margin-top: var(--s5); }
.loan-write textarea {
  display: block; width: 100%; min-height: 8.5rem; margin-bottom: var(--s3); padding: var(--s3);
  border: var(--bw) solid var(--ink); border-radius: var(--r-control); background: var(--paper);
  font-size: var(--fs-small); line-height: 1.5; resize: vertical;
}
.loan-write textarea::placeholder { color: var(--ink-2); opacity: 1; }
.ours { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s5); }
.ours[hidden] { display: none; }
.ours[data-first="lend"] .case[data-case="lend"], .ours[data-first="keep"] .case[data-case="keep"] { order: -1; }
.case { padding-top: var(--s3); border-top: var(--bw) solid var(--ink); }
.case p { font-size: var(--fs-small); }
.case .case-h { margin-bottom: var(--s2); font-size: 1.0625rem; font-weight: 700; }
.case .case-h span { font-weight: 400; color: var(--ink-2); }
.ours-end { font-size: var(--fs-small); color: var(--ink-2); }

.who { margin: 0; padding: 0; border: 0; min-width: 0; }
.who legend { padding: 0; }
.who-list { list-style: none; margin: 0; padding: 0; border-top: var(--bw) solid var(--hair); }
.who-list li { margin: 0; border-bottom: var(--bw) solid var(--hair); }
.who-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s2); align-items: start; min-height: 44px; padding: var(--s2) 0; cursor: pointer; }
.who-row input { grid-row: 1 / span 3; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.who-row:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.who-row input:focus-visible { outline: none; }
.who-name { font-size: var(--fs-small); font-weight: 620; line-height: 1.35; }
.who-line { grid-column: 2; font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); }
.who-note { grid-column: 2; margin-top: var(--s1); font-size: var(--fs-small); line-height: 1.4; }

/* The seats at your table: an empty chair until someone who qualifies sits in it. */
.seats { list-style: none; margin: var(--s5) 0 var(--s3); padding: var(--s3) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); border-top: var(--bw-strong) solid var(--ink); }
.seat-slot { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.seat-art { width: 76px; height: 76px; }
.seat-art .chair { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seat-art .chair-seat { fill: var(--ink); }
.seat-art .sitter path, .seat-art .sitter circle { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.seat-art .sitter { opacity: 0; transform: translateY(-12px); transition: transform var(--t-slow) var(--ease-swing), opacity var(--t-mid) var(--ease); }
.seat-slot.filled .sitter { opacity: 1; transform: none; }
.seat-label { margin-top: var(--s2); font-size: var(--fs-small); font-weight: 680; line-height: 1.25; }
.seat-by { font-size: var(--fs-small); line-height: 1.3; color: var(--ink-2); }
.seat-slot.filled .seat-by { color: var(--ink); }
.who-status { margin-bottom: var(--s2); font-weight: 650; }
.who-caution { font-size: var(--fs-small); color: var(--ink-2); }
.who-caution:empty { display: none; }

.loan-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); margin-top: var(--s7); padding-top: var(--s4); border-top: var(--bw) solid var(--hair); }
.loan-after .verse { margin: var(--s3) 0 0; }

@media (max-width: 860px) {
  .loan-grid, .loan-after { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 420px) {
  .seats { gap: var(--s2); }
  .seat-art { width: 60px; height: 60px; }
}

/* ---------- What just happened: the reading column, with your play beside it ---------- */
.happened-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.happened-grid .prose { grid-column: 1; grid-row: 1; }
.ledger { grid-column: 2; grid-row: 1; position: sticky; top: var(--s5); max-width: 30rem; }
.ledger-h { margin: 0 0 var(--s2); font-weight: 700; }
.ledger-table th[scope="row"] { width: 34%; }
.ledger-table td[data-ledger] { font-weight: 650; width: 30%; }
.ledger-note { margin-top: var(--s3); font-size: var(--fs-small); color: var(--ink-2); }
.ledger.is-done .ledger-note { display: none; }
@media (max-width: 960px) {
  .happened-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-column: 1; grid-row: auto; position: static; margin-bottom: var(--s6); }
  .happened-grid .prose { grid-row: auto; }
}

/* ---------- Where you'll meet this ---------- */
.meet-table tbody th { width: 26%; font-size: 1.0625rem; }
.meet-table td:nth-child(2) { width: 34%; }
@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; }
  .meet-table td:nth-child(3) { color: var(--ink-2); }
}

/* ---------- What Scripture says: the Syndics is wide, so it gets the wider column ---------- */
@media (min-width: 861px) {
  #scripture .scripture-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.counsel-words .verse:last-child { margin-bottom: 0; }