/* Sort it: a sieve of plain questions, and the piles a thing can land in. Tokens only (tokens.css). */

.room-head { padding-block: var(--s5) var(--s3); }
#try { padding-top: var(--s4); }
#try > .wrap > h2 { margin-bottom: var(--s4); }

/* A text toggle, as in the other rooms. */
.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; }

.last-pass { margin: 0 0 var(--s3); padding-bottom: var(--s2); border-bottom: var(--bw) solid var(--hair); font-size: var(--fs-small); font-weight: 600; }
.last-pass[hidden] { display: none; }

/* ---------- What are you sorting, and the few ways to make it fit ---------- */
.sort-l { font-size: var(--fs-small); font-weight: 700; }
.sort-opts { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.sort-opts .ex { min-width: 44px; }
.sort-pick + .sort-pick { margin-top: var(--s1); padding-top: var(--s1); border-top: var(--bw) solid var(--hair); }
.sort-pick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s5); }
.sort-fit { margin-block: var(--s2) var(--s4); }
.sort-fit > .fit-rows { max-width: none; }
.fit-row { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: baseline; gap: 0 var(--s4); padding: var(--s1) 0; border-top: var(--bw) solid var(--hair); }

/* ---------- The sorter: the question on one side, the piles on the other ---------- */
.sorter { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s6) var(--s7); align-items: start; }

/* The card holds the height of its first question from first paint, so the picture below does not jump when the script fills it. */
.sift { min-height: 31rem; padding-top: var(--s3); border-top: var(--bw-strong) solid var(--ink); display: flex; flex-direction: column; }
.sift-step { margin: 0; font-size: var(--fs-small); font-weight: 650; color: var(--ink-2); }
.sift .sift-q { margin: var(--s1) 0 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 850; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
.sift-q:focus { outline: none; }
.sift-why { margin: var(--s2) 0 0; max-width: 34rem; min-height: 1.5em; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.sift-opts { display: grid; gap: var(--s2); margin-top: var(--s3); max-width: 30rem; }
.sift-opt { min-height: 48px; padding: var(--s2) 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; line-height: 1.25; text-align: left; cursor: pointer; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.sift-opt:hover { border-color: var(--ink); background: var(--paper-2); }
/* The verdict: the pile's name takes the question's place, in the colour of staying or leaving. */
.is-verdict .sift-q { font-size: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); }
.is-verdict[data-pile="keep"] .sift-q { color: var(--a); }
.is-verdict:is([data-pile="sell"], [data-pile="give"], [data-pile="go"]) .sift-q { width: fit-content; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 0.2em; text-underline-offset: 0.04em; text-decoration-skip-ink: none; }
.is-verdict .sift-why { color: var(--ink); font-size: var(--fs-body); }
.sift-verdict[hidden], .sift-back[hidden] { display: none; }
.sift-then { margin: var(--s2) 0 0; max-width: 34rem; font-weight: 650; }
.sift-btns { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.sift-back { align-self: flex-start; min-height: 44px; margin-top: var(--s2); padding: 0; border: 0; background: none; color: var(--blue); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }

/* One tap for the things you already know. */
.quick { margin-top: var(--s4); padding-top: var(--s3); border-top: var(--bw) solid var(--hair); }
.quick .sort-l { display: block; margin-bottom: var(--s2); color: var(--ink-2); font-weight: 600; }
.quick-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); max-width: 34rem; }
.quick-btn { min-height: 48px; padding: var(--s1); border: var(--bw) solid var(--line); border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: var(--fs-small); font-weight: 650; line-height: 1.1; cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.quick-btn:hover { border-color: var(--ink); background: var(--paper-2); }
.quick-keep { color: var(--a); }
.quick-btn:active { transform: translateY(1px); }

/* ---------- The picture: a sieve over four trays ---------- */
.piles { margin: 0; padding-top: var(--s3); border-top: var(--bw-strong) solid var(--ink); }
.piles-svg { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; overflow: visible; }
.sv-bowl { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sv-mesh { fill: none; stroke: var(--hair); stroke-width: 1; }
.sv-rim { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.sv-fall { fill: none; stroke: var(--ink-2); stroke-width: 1.4; stroke-dasharray: 2 5; stroke-linecap: round; }
.sv-tray { fill: var(--paper); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sv-tray.is-ask { stroke-dasharray: 5 4; }
.sv-label { fill: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.sv-label.sv-keep { fill: var(--a); font-size: 17px; }
.sv-dot.keep { fill: var(--a); }
.sv-dot:is(.sell, .give, .go) { fill: var(--b); stroke: var(--ink); stroke-width: 1.3; }
.sv-dot.ask { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.sv-dot.drop { animation: sort-drop var(--t-slow) var(--ease) both; }
@keyframes sort-drop { from { transform: translateY(-26px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.piles figcaption { margin-top: var(--s3); }
.piles-say { width: fit-content; margin: 0; font-size: var(--fs-small); font-weight: 650; }
.pass-bar { height: 10px; margin-top: var(--s2); border: var(--bw) solid var(--ink); }
.pass-bar span { display: block; width: 0; height: 100%; background: var(--ink); transition: width var(--t-slow) var(--ease); }
.piles-btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); }
/* Clearing a whole pass is rare and final, so it is a quiet link set apart, and it asks first. */
.piles-clear { min-height: 44px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.piles-clear:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- The end of a pass: what happens to each pile, with dates ---------- */
.review { margin-top: var(--s6); padding-top: var(--s3); border-top: var(--bw-strong) solid var(--ink); scroll-margin-top: var(--s3); }
.review[hidden] { display: none; }
.review:focus { outline: none; }
.review h3 { margin: 0; font-size: var(--fs-h2); letter-spacing: -0.02em; }
.review-sum { width: fit-content; max-width: var(--measure); margin: var(--s2) 0 var(--s3); font-weight: 600; }
.review-steps { max-width: var(--measure); margin: 0; padding-left: 1.4em; }
.review-steps li { margin: 0; padding: var(--s2) 0; border-bottom: var(--bw) solid var(--hair); }
.review-btns { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s4); }

/* ---------- The short course ---------- */
.course-say { width: fit-content; margin: 0 0 var(--s3); font-size: var(--fs-small); font-weight: 650; }
.lesson > summary { align-items: baseline; }
.lesson .lesson-n { flex: none; min-width: 1.6em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink-2); }
.lesson .lesson-t { flex: 1; }
.lesson.is-read .lesson-n::after { content: " read"; font-size: var(--fs-meta); font-weight: 650; }
.lesson h4 { margin: var(--s4) 0 var(--s1); font-size: 1.125rem; }
.lesson ul, .lesson ol { padding-left: 1.3em; }
.lesson li { margin: var(--s1) 0; }

/* ---------- What a storage unit costs ---------- */
.unit { margin: var(--s4) 0 var(--s5); padding-block: var(--s4); border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--hair); }
.unit-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.unit label { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); font-weight: 650; }
.unit input { width: 100%; min-height: 44px; 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; }
.unit-say { width: fit-content; margin: var(--s3) 0 0; min-height: 3em; font-weight: 600; line-height: 1.45; }

/* ---------- Where you'll meet this, Scripture, Watch, Use ---------- */
.meet-lede { margin-bottom: var(--s4); }
.meet-table tbody th { width: 22%; font-size: 1.0625rem; }
.meet-table td { width: 39%; }
.meet-table tbody tr:hover { background: var(--paper-2); }
#scripture { padding-block: var(--s8); }
/* The painting is a tall, narrow panel: keep it narrow so the verses stay beside it. */
#scripture .painting { max-width: 19rem; }
@media (min-width: 861px) { #scripture .scripture-grid { grid-template-columns: 19rem minmax(0, 1fr); } }
/* On a narrow screen a panel this tall would push the verses a long way down: the words come first. */
@media (max-width: 860px) { #scripture .scripture-grid { display: flex; flex-direction: column; } #scripture .painting { order: 2; max-width: 15rem; margin-top: var(--s6); } }
.sort-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); }
.use-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
/* When keeping things has stopped being a choice: a plain note, set apart by a rule. */
.help-note { max-width: var(--measure); margin-top: var(--s5); padding-top: var(--s3); border-top: var(--bw-strong) solid var(--ink); }

@media (max-width: 860px) {
  .sorter { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .fit-row { grid-template-columns: minmax(0, 1fr); padding: var(--s2) 0; }
}
@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); }
  .unit-fields { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .quick-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Printing the end-of-pass list: only that list. */
@media print {
  .print-review body > :not(main), .print-review main > :not(#try), .print-review #try .wrap > :not(.review), .print-review .review-btns { display: none !important; }
  .print-review .review { margin: 0; border: 0; }
}