/* PAS — Ledger + Strongbox. Ledger world styles (docs/DESIGN.md).
   TYPE FOLLOWS THE OS: the root font-size anchors to Apple's system body
   size (-apple-system-body follows Dynamic Type / Larger Text on iOS,
   iPadOS and macOS Safari), and every size below is rem off that root.
   The user sets their text size once in System Settings; PAS follows. */
:root {
  color-scheme: light dark;
  --paper: #F3F3EE; --raise: #FAFAF6; --ink: #21281F; --muted: #58604F;
  --line: #D7D7CC; --rule: #21281F; --green: #2E5240; --green-soft: #E8EBE2;
  --amber: #8A5F17; --wax: #9C2F2F;
  --brass: #B99A5B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141B17; --raise: #181F1A; --ink: #E8E5D8; --muted: #99A292;
    --line: #2A332C; --rule: #E8E5D8; --green: #8CB79C; --green-soft: #1D2721;
    --amber: #C79A4B; --wax: #CE7B7B;
  }
}
:root[data-theme="dark"] {
  --paper: #141B17; --raise: #181F1A; --ink: #E8E5D8; --muted: #99A292;
  --line: #2A332C; --rule: #E8E5D8; --green: #8CB79C; --green-soft: #1D2721;
  --amber: #C79A4B; --wax: #CE7B7B;
}
* { box-sizing: border-box; }
html {
  background: var(--paper);
  font-size: 17px; /* non-Apple fallback base */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; } /* system size + family; rem derives from this */
}
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.6 "Public Sans", -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
}
main { width: 100%; max-width: 720px; margin: 0 auto; }

/* masthead */
.mast { border-bottom: 2px solid var(--rule); padding: 1.05rem 1.2rem 0.7rem; }
.brandrow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.wordmark { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.4rem; letter-spacing: 0.08em; color: var(--green); }
.who { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.dateline { margin-top: 0.5rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.dateline .day { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.65rem; }
.dateline .date { font-size: 0.9rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* sections + rows */
.body { padding: 0.1rem 1.2rem 1.5rem; }
.seclabel {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green); margin: 1.2rem 0 0.1rem;
}
.row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.78rem 0.1rem;
  border-bottom: 1px solid var(--line); min-height: 3rem; flex-wrap: wrap;
}
.row .what { flex: 1; min-width: 60%; cursor: pointer; }
.row .what b { font-weight: 600; font-size: 0.97rem; display: block; }
.row .what span { font-size: 0.8rem; color: var(--muted); display: block; margin-top: 0.05rem; }
.row .when { text-align: right; font-variant-numeric: tabular-nums; flex: none; margin-left: auto; }
.row .when b { font-size: 0.92rem; font-weight: 600; display: block; }
.row .when span { font-size: 0.75rem; display: block; color: var(--muted); }
.row.soon .when span { color: var(--amber); font-weight: 700; }
.row.over .what b, .row.over .when b { color: var(--wax); }
.row.over .when span { color: var(--wax); font-weight: 700; }
.allquiet { color: var(--muted); padding: 1rem 0.1rem; }

/* statement figures */
.figure-block { margin-top: 0.1rem; border-top: 1.5px solid var(--rule); }
.fb-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.78rem 0.1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fb-name { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.fb-sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }
.fb-fig { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* tab bar */
.tabbar { display: flex; border-top: 1.5px solid var(--rule); background: var(--paper); position: sticky; bottom: 0; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.55rem 0 0.65rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted); min-height: 3rem; justify-content: center;
  border: none; background: none; cursor: pointer;
  border-top: 2.5px solid transparent; margin-top: -1.5px; font-family: inherit;
}
.tab.on { color: var(--green); border-top-color: var(--green); }
.tab svg { width: 1.2rem; height: 1.2rem; }
.tab.vaulttab, .tab.vaulttab svg { color: var(--brass); stroke: var(--brass); }
.tab[disabled] { opacity: 0.45; cursor: default; }

/* forms */
button.action {
  display: block; width: 100%; padding: 0.85rem; margin: 0.5rem 0;
  background: transparent; color: var(--green); border: 1.5px solid var(--green);
  border-radius: 2px; font: 700 0.95rem/1 "Public Sans", sans-serif;
  cursor: pointer; min-height: 3rem; font-family: inherit;
}
button.action:hover { background: var(--raise); }
button.linklike {
  background: none; border: none; color: var(--green); text-decoration: underline;
  padding: 0.25rem 0; margin: 0.6rem 0 0; font: 400 0.9rem "Public Sans", sans-serif;
  min-height: 2.6rem; width: auto; cursor: pointer; font-family: inherit;
}
input, select {
  display: block; width: 100%; padding: 0.78rem; margin: 0.35rem 0;
  background: var(--raise); color: var(--ink); border: 1px solid var(--line);
  border-radius: 2px; font: 400 1rem "Public Sans", sans-serif; min-height: 3rem;
  font-family: inherit;
}
label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 0.7rem; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.checkrow { display: flex; align-items: center; gap: 0.75rem; margin: 0.85rem 0; }
.checkrow input { width: 1.3rem; height: 1.3rem; min-height: 1.3rem; margin: 0; }
.checkrow span { font-size: 0.95rem; }
.err { color: var(--wax); font-weight: 600; min-height: 1.3rem; margin: 0.25rem 0 0.5rem; font-size: 0.9rem; }

/* auth */
.authwrap { max-width: 26rem; margin: 8vh auto; padding: 0 1.5rem; }
.authwrap h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.4rem; margin: 0 0 0.35rem; }
.authwrap p { margin: 0 0 0.85rem; color: var(--muted); }
.codecard { border: 1.5px solid var(--rule); border-radius: 2px; padding: 1.2rem; margin: 0.85rem 0; }
.code { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; word-break: break-all; }
.codecard small { color: var(--muted); display: block; margin-top: 0.5rem; font-size: 0.8rem; }
.kv { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 0.7rem 0.1rem; font-size: 0.92rem; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; }

/* misc */
.hidden { display: none !important; }
.backrow { padding: 0.85rem 1.2rem 0; }
h2.page { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.4rem; margin: 0; padding: 0 }
.sub { color: var(--muted); font-size: 0.86rem; margin: 0.1rem 0 0; }
.empty { color: var(--muted); font-size: 0.9rem; padding: 0.85rem 0.1rem; }

/* ---- Phase 2: the elder-simple pass ---------------------------------------- */

/* Plain-English status strip — signal, queued changes, out-of-date edits.
   One line under the dateline, visible in every view, never a toast. */
.status {
  font-size: 0.88rem; font-weight: 600; color: var(--amber);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0.55rem 0.1rem; margin-top: 0.7rem;
}
.status.calm { color: var(--muted); font-weight: 400; border-color: transparent; padding-left: 0; }

/* Bigger-text mode (a11y): the toggle multiplies the OS-anchored root size
   (the exact px is read at runtime, never assumed). This CSS carries the
   pre-JS fallback size and everything that must grow WITH it: hit targets,
   contrast, line weight. Type still follows the OS; this multiplies it. */
html[data-a11y="on"] { font-size: 21.25px; } /* 17px × 1.25 fallback; JS sets the true value */
html[data-a11y="on"] body { letter-spacing: 0.01em; }
[data-a11y="on"] .row .what span, [data-a11y="on"] .row .when span,
[data-a11y="on"] .sub, [data-a11y="on"] .empty, [data-a11y="on"] .status { color: var(--ink); opacity: 0.82; }
[data-a11y="on"] .row { border-bottom-width: 2px; }
[data-a11y="on"] .tab { min-height: 3.5rem; }
[data-a11y="on"] button.action, [data-a11y="on"] button.linklike { min-height: 3.5rem; }
[data-a11y="on"] input, [data-a11y="on"] select { min-height: 3.5rem; }
.textsize {
  background: none; border: 1.5px solid var(--line); border-radius: 2px;
  color: var(--muted); font: 700 0.78rem "Public Sans", sans-serif;
  padding: 0.45rem 0.7rem; cursor: pointer; min-height: 2.6rem; font-family: inherit;
}
.textsize[aria-pressed="true"] { color: var(--green); border-color: var(--green); }

/* Install guidance (iOS Safari, not yet on the Home Screen) — real steps,
   dismissible once, no tricks. */
.install {
  border: 1.5px solid var(--rule); border-radius: 2px; padding: 0.9rem 1rem;
  margin-top: 0.85rem; font-size: 0.92rem;
}
.install b { display: block; margin-bottom: 0.2rem; }
.install ol { margin: 0.35rem 0 0.6rem; padding-left: 1.3rem; }
.install .linklike { margin: 0; }

/* Left rail on wide screens: the tab bar becomes a column beside the work.
   Same tabs, same rules — no new chrome, just room to breathe. */
@media (min-width: 1024px) {
  #shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); grid-template-areas: "mast mast" "nav view"; }
  #shell .mast { grid-area: mast; }
  .tabbar {
    grid-area: nav; flex-direction: column; align-items: stretch;
    border-top: none; border-right: 1.5px solid var(--rule);
    position: sticky; top: 0; height: fit-content; padding: 0.6rem 0 1.2rem;
  }
  .tab {
    flex-direction: row; justify-content: flex-start; gap: 0.8rem;
    padding: 0.95rem 1.25rem; font-size: 0.9rem; min-height: 3.2rem;
    border-top: none; border-left: 2.5px solid transparent; margin: 0;
  }
  .tab.on { border-left-color: var(--green); }
  .tab svg { width: 1.35rem; height: 1.35rem; }
  #view { grid-area: view; max-width: 46rem; }
  #shell.strongbox .tabbar { border-right-color: var(--rule); }
}

/* the shell fills the viewport so a world can own it */
#shell { min-height: 100vh; display: flex; flex-direction: column; }
#shell .body { flex: 1; }

/* ---- the strongbox world: the Vault only, always dark whatever the theme ---- */
#shell.strongbox {
  --paper: #0E1512; --raise: #131C17; --ink: #E4DFCF; --muted: #8E9686;
  --line: #223028; --rule: #B99A5B; --green: #8CB79C; --amber: #C79A4B; --wax: #C05858;
  background: var(--paper); color: var(--ink);
  min-height: 100vh;
}
#shell.strongbox .mast { border-bottom-color: var(--rule); }
#shell.strongbox .wordmark { color: var(--rule); }
#shell.strongbox .tabbar { border-top-color: var(--rule); }
#shell.strongbox .tab.on { color: var(--rule); border-top-color: var(--rule); }
#shell.strongbox button.action { color: var(--rule); border-color: var(--rule); }
#shell.strongbox button.linklike { color: var(--rule); }
#shell.strongbox input, #shell.strongbox select { background: var(--raise); color: var(--ink); border-color: var(--line); }
#shell.strongbox .seclabel { color: var(--rule); }
.vault-title {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.4rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--rule);
}
.seal-state { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--wax); }
.seal-big { text-align: center; margin: 1.75rem 0 1.25rem; }
.seal-disc {
  width: 5.5rem; height: 5.5rem; margin: 0 auto 0.85rem; border-radius: 50%;
  border: 1.5px solid var(--wax); display: grid; place-items: center;
}
.seal-disc svg { width: 2rem; height: 2rem; }
.seal-big .count { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.seal-big .lbl { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.boxrow {
  display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.1rem;
  border-bottom: 1px solid var(--line); font-size: 0.88rem; min-height: 2.7rem; align-items: center; flex-wrap: wrap;
}
.boxrow .k { color: var(--muted); }
.boxrow .v { font-variant-numeric: tabular-nums; text-align: right; }
.boxrow .v b { font-weight: 600; }
.reseal { font-size: 0.8rem; color: var(--muted); text-align: center; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }

#printArea, #kitArea { display: none; }
@media print {
  body > *:not(#printArea):not(#kitArea) { display: none !important; }
  body { display: block; padding: 0; background: #fff; color: #000; }
  body.printing-kit #printArea { display: none !important; }
  body:not(.printing-kit) #kitArea { display: none !important; }
  #printArea { display: block; font: 400 14pt/1.5 "Public Sans", sans-serif; }
  #printArea .pw { font-family: "Fraunces", Georgia, serif; font-size: 26pt; letter-spacing: 0.08em; }
  #printArea .pc { font-size: 20pt; font-weight: 700; letter-spacing: 0.08em; margin: 18pt 0; }
  #printArea .pm { margin-top: 26pt; font-size: 11pt; }
  #kitArea { display: block; font: 400 14pt/1.5 "Public Sans", sans-serif; }
  #kitArea .pw { font-family: "Fraunces", Georgia, serif; font-size: 26pt; letter-spacing: 0.08em; }
  #kitArea .pk { font-size: 20pt; font-weight: 700; letter-spacing: 0.08em; margin: 18pt 0; font-variant-numeric: tabular-nums; word-break: break-all; }
  #kitArea .pm { margin-top: 26pt; font-size: 11pt; }
}