/*
  One stylesheet, phone-first.

  `22-ui-overview.md` in short: "It reads as a scoreboard, not a bill." Phone-first, quick to
  scan, no sober financial framing, **no red** — so money is ordinary text, the accents are
  warm, and nothing on the page is styled as a demand.

  `63-non-functional-requirements.md` on accessibility, which is `partially established`
  and asks for three specific things rather than a standard: readable text sizes,
  sufficient contrast in both light and dark, and controls usable one-handed on a phone.
  Hence the system font stack, the 16px floor, `prefers-color-scheme`, and tap targets that
  are rows rather than links inside rows.
*/

:root {
  --bg: #fbfaf7;
  --card: #ffffff;
  --ink: #1c1a17;
  --soft: #6b6560;
  --line: #e6e1d9;
  --accent: #b5651d;      /* warm, and not a warning */
  --kind: #3d6b52;        /* settled in kind */
  --open: #7a5c9e;        /* no amount yet */
  --stale: #8a7a5c;       /* the quiet marker */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614;
    --card: #211f1c;
    --ink: #f2efe9;
    --soft: #a39c94;
    --line: #322e29;
    --accent: #e0954f;
    --kind: #7fb79a;
    --open: #b79fd6;
    --stale: #bfae8a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 16px floor: anything smaller is a phone asking to be pinch-zoomed. */
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  /* Room for the fixed footer, so the last row is never under it. */
  padding-bottom: 3.5rem;
}

a { color: inherit; text-decoration: none; }
main { max-width: 34rem; margin: 0 auto; padding: 0.75rem; }
h1 { font-size: 1.35rem; margin: 0.5rem 0; }
h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; color: var(--soft); font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* --- bars ---------------------------------------------------------------- */

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.6rem 0.9rem;
  background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: -0.01em; }
.bar nav { display: flex; gap: 1rem; }
.bar nav a { color: var(--soft); padding: 0.2rem 0; }
.bar nav a[aria-current="page"] {
  color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent);
}

/* The footer is on every screen (AF.4), so it must be quiet enough to live there. */
footer.status {
  position: fixed; bottom: 0; left: 0; right: 0;
  justify-content: center;
  border-bottom: 0; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--soft);
}
footer.status.stale { color: var(--stale); font-weight: 600; }

/* --- notices ------------------------------------------------------------- */

/*
  The unreviewed banner. Non-negotiable #8 — it appears wherever a total does — so it is
  styled to be *read* and not to alarm: no red, no icon, no border on all four sides.
*/
.notice.waiting {
  margin: 0.75rem 0; padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent); background: var(--card);
  font-size: 0.92rem;
}
.note { color: var(--soft); font-size: 0.88rem; margin: 0.5rem 0; }
.empty {
  margin: 1.5rem 0; padding: 1rem; text-align: center;
  color: var(--soft); background: var(--card);
  border: 1px dashed var(--line); border-radius: 0.5rem;
}

.tabs { display: flex; gap: 0.5rem; margin: 0.75rem 0; }
.tabs a {
  flex: 1; text-align: center; padding: 0.45rem;
  border: 1px solid var(--line); border-radius: 0.4rem;
  color: var(--soft); background: var(--card); font-size: 0.9rem;
}
.tabs a[aria-current="page"] {
  color: var(--ink); border-color: var(--accent); font-weight: 600;
}

/* --- the board ----------------------------------------------------------- */

.board { list-style: none; margin: 0; padding: 0; }
.board .row { border-bottom: 1px solid var(--line); background: var(--card); }
.board .row:first-child { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
.board .row:last-child { border-bottom: 0; border-radius: 0 0 0.5rem 0.5rem; }

/* The whole row is the tap target — one-handed on a phone. */
.board .row > a {
  display: grid; grid-template-columns: 1.6rem 1fr auto;
  align-items: baseline; gap: 0.1rem 0.6rem;
  padding: 0.7rem 0.85rem;
}
.rank { color: var(--soft); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.who { font-weight: 600; }
.money { font-variant-numeric: tabular-nums; font-weight: 600; }
.count {
  grid-column: 2 / 4; color: var(--soft); font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
}

/*
  The viewer's own row. ADR 017: a browser fact, never a server identity — the class is
  added by `boetepot.js` from `localStorage`, and the server never learns who is looking.
*/
.board .row.me { background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.board .row.me .who::after {
  content: " — jij"; color: var(--accent); font-weight: 600; font-size: 0.85rem;
}

.own-row-pick {
  margin: 0.75rem 0; padding: 0.6rem 0.75rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 0.4rem;
  font-size: 0.9rem; color: var(--soft);
}
.own-row-pick button {
  font: inherit; color: var(--accent); background: none;
  border: 0; padding: 0.2rem 0.3rem; cursor: pointer; text-decoration: underline;
}

/* --- chips: what a euro figure does not include ------------------------- */

.chip {
  font-size: 0.76rem; padding: 0.08rem 0.4rem; border-radius: 0.7rem;
  border: 1px solid currentColor; white-space: nowrap;
}
.chip.kind { color: var(--kind); }
.chip.open { color: var(--open); }
.chip.stale { color: var(--stale); }
.tag {
  font-size: 0.72rem; color: var(--soft);
  border: 1px solid var(--line); border-radius: 0.7rem;
  padding: 0.05rem 0.4rem; white-space: nowrap; font-weight: 400;
}

.total {
  margin: 1rem 0; padding-top: 0.6rem; border-top: 1px solid var(--line);
  color: var(--soft); font-size: 0.9rem;
}
.total strong { color: var(--open); }

/* --- member detail ------------------------------------------------------- */

h1.member { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

details.type {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0.45rem; margin-bottom: 0.5rem;
}
details.type > summary {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 0.6rem; align-items: baseline;
  padding: 0.7rem 0.85rem; cursor: pointer;
}
details.type > summary .count { grid-column: auto; color: var(--soft); }
details.type[open] > summary { border-bottom: 1px solid var(--line); }

.fines { list-style: none; margin: 0; padding: 0.4rem 0.85rem 0.7rem; }
.fines > li { padding: 0.5rem 0; border-bottom: 1px dashed var(--line); }
.fines > li:last-child { border-bottom: 0; }
.when { color: var(--soft); font-size: 0.85rem; margin-right: 0.5rem; }

/* The call-out. The only message content anywhere in the product. */
blockquote.callout {
  margin: 0.4rem 0 0; padding: 0.4rem 0 0.4rem 0.7rem;
  border-left: 2px solid var(--line);
}
blockquote.callout .said { margin: 0; }
blockquote.callout .said.none, .callout.none {
  color: var(--soft); font-style: italic; margin: 0.4rem 0 0;
  font-size: 0.88rem;
}
.by { color: var(--soft); font-size: 0.82rem; margin: 0.2rem 0 0; }

/*
  ADR 015's notice: the call-out was deleted or edited after it posted. Indented to sit
  under the quotation it qualifies, and given the accent rather than a warning colour —
  the fine is unchanged, so nothing here is an alarm. "No red" holds; a notice is a fact,
  not a demand.
*/
.notice.control {
  margin: 0.35rem 0 0 0.7rem; padding: 0.35rem 0 0.35rem 0.7rem;
  border-left: 2px solid var(--accent);
  color: var(--ink); font-size: 0.85rem;
}

/* --- feed ---------------------------------------------------------------- */

.feed { list-style: none; margin: 0; padding: 0; }
.feed > li {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0.45rem; padding: 0.65rem 0.85rem; margin-bottom: 0.45rem;
}
.feed .what { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.feed .what a { font-weight: 600; box-shadow: inset 0 -1px 0 var(--line); }
.more { text-align: center; margin: 1rem 0; }
.more a { color: var(--accent); }

/* --- status page --------------------------------------------------------- */

.status-list {
  margin: 1rem 0; padding: 0.25rem 0.85rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 0.45rem;
}
.status-list dt {
  color: var(--soft); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 0.85rem;
}
.status-list dd { margin: 0.15rem 0 0.85rem; }
.signout { margin: 1.5rem 0; }
.signout button {
  font: inherit; color: var(--soft); background: var(--card);
  border: 1px solid var(--line); border-radius: 0.4rem;
  padding: 0.5rem 0.9rem; cursor: pointer;
}

/* --- the password box --------------------------------------------------- */

body.centred { display: grid; place-items: center; min-height: 100vh; padding-bottom: 0; }
.gate { width: min(22rem, 90vw); text-align: center; }
.gate form { display: grid; gap: 0.5rem; margin-top: 1rem; text-align: left; }
.gate label { font-size: 0.85rem; color: var(--soft); }
.gate input {
  font: inherit; padding: 0.65rem; border-radius: 0.4rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.gate button {
  font: inherit; font-weight: 600; padding: 0.65rem;
  border: 0; border-radius: 0.4rem; cursor: pointer;
  background: var(--accent); color: #fff;
}
.gate .wrong { color: var(--accent); font-size: 0.88rem; margin: 0.25rem 0 0; }

/* --- settlement, the one screen with controls on it ----------------------- */

/*
  `22-ui-overview.md`'s "scoreboard, not a bill" is about the team's screens. This one
  *is* a bill, and it is the one place in the product where that is the right register —
  so it gets a table, column headings and tick boxes, which nothing else here has.

  Still no red. The irreversible button is the accent at full strength, which is as loud
  as this palette gets, and the thing that stops a mis-tap is that it does not exist
  until a rehearsal has run (`BF.3` step 4) rather than that it looks dangerous.
*/

/*
  `table-layout: fixed`, and the widths are the point rather than tidiness. Left to
  itself the table sizes to its content, and the longest name plus row 19's "was op de
  lijst" tag pushed it past 375px — so the **page** scrolled sideways on a phone, which
  moves the tick boxes off the screen on the one surface that exists to be tapped. The
  name column takes what is left and wraps; the three narrow ones are fixed.
*/
.settle { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.9rem; }
.settle th, .settle td { text-align: left; padding: 0.55rem 0.4rem; }
.settle col.euros { width: 3.4rem; }
.settle col.streak { width: 3.4rem; }
.settle col.tick { width: 4.4rem; }
/* The tag goes on its own line under a long name rather than widening the column. */
.settle tbody th .tag { display: inline-block; margin-top: 0.15rem; }
/*
  No uppercase and no letter-spacing here, which the rest of the sheet does use. Under
  `table-layout: fixed` a heading wider than its column does not shrink the column — it
  simply hangs over the edge and scrolls the page, which is how "Betaald" put six pixels
  of horizontal scroll on a 375px phone.
*/
.settle thead th {
  font-size: 0.75rem; color: var(--soft); font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.settle tbody tr { border-bottom: 1px solid var(--line); }
.settle tbody th { font-weight: 600; }
.settle td:last-child, .settle th:last-child { text-align: right; }

/* Nothing owed, nothing to bring. Present, because a checklist that omits the people
   who behaved cannot be read as "everyone is accounted for" — and quiet, because they
   are not what the Boetemeister is here to decide about. */
.settle tr.quiet th, .settle tr.quiet td { color: var(--soft); }

/* An in-kind obligation hangs off the row above it: ADR 021 keys a discharge on
   member × item × period, so it is a separate tick and not a separate person. */
.settle tr.obligation { border-bottom: 0; }
.settle tr.obligation td { padding-top: 0; color: var(--kind); font-size: 0.85rem; }

/* A tap target on a phone, not a 13px square. `63-non-functional-requirements.md`:
   controls usable one-handed. */
.settle input[type="checkbox"] { width: 1.4rem; height: 1.4rem; accent-color: var(--accent); }

/* The label is for the screen reader; the box is the whole visual control. */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.warning, .consequence, .done, .history { margin: 1.25rem 0; }
.consequence, .done {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 0.5rem; padding: 0.85rem;
}
.consequence h2, .history h2 { font-size: 1rem; margin: 0 0 0.5rem; }

.facts { list-style: none; margin: 0.4rem 0; padding: 0; }
.facts > li { padding: 0.25rem 0; }

.choices { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.choices button {
  font: inherit; padding: 0.55rem 0.9rem; border-radius: 0.4rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.choices .go, .choices a.go {
  background: var(--accent); border-color: var(--accent); color: var(--bg);
  font-weight: 600; text-align: center;
}