/* Life — styles. Tokens are the dark set from the locked design system of app.nilejones.com
   (~/docker/notes-test/design.md, "Tokens — dark", read 2026-10-03). Dark only; no light values are measured there.
   Templates carry no colours and no inline styles (the Content-Security-Policy forbids them): everything is here. */
:root{
  --color-rail:    #111113;
  --color-paper:   #18191B;
  --color-card:    #212225;
  --color-divider: #272A2D;
  --color-text:    #E6E6E6;
  --color-text-2:  #A0A0A0;
  --color-accent:  #9EB1FF;
  --radius-card:   4.8px;
  --radius-panel:  10px;
  --radius-pill:   9999px;
  --font-body:     "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-body:       17px;
  --fs-note:       13px;
  --weight-label:  600;
  color-scheme: dark;
}
*{box-sizing:border-box; margin:0}
*{-webkit-tap-highlight-color:transparent}
a, summary{touch-action:manipulation}
html{-webkit-text-size-adjust:100%}
body{background:var(--color-rail); color:var(--color-text); font:var(--fs-body)/1.43 var(--font-body);
  min-height:100vh; min-height:100dvh}
a{color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-card)}

/* the page: one paper panel on the darker canvas, a centred reading column, clear of the notch and the home bar */
.column{max-width:720px; margin:0 auto; background:var(--color-paper); border-radius:var(--radius-panel);
  min-height:calc(100dvh - 12px);
  margin-top:max(6px, env(safe-area-inset-top)); margin-bottom:6px;
  padding:20px max(16px, env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
@media (min-width:760px){ .column{padding-left:28px; padding-right:28px} }
h1{font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-.01em; margin-bottom:6px}
@media (max-width:760px), ((max-height:500px) and (pointer:coarse)){ h1{font-size:24px} }
.note{color:var(--color-text-2); margin:8px 0}
.hint{color:var(--color-text-2)}
.doorlink{display:inline-flex; align-items:center; min-height:44px; font-weight:var(--weight-label); text-decoration:none}

/* section label */
.band{font-size:var(--fs-note); font-weight:var(--weight-label); letter-spacing:.06em; text-transform:uppercase;
  color:var(--color-text-2); margin:14px 0 2px}

/* rows: the fill is the edge, no border */
.sheets{list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:8px}
.sheetrow{background:var(--color-card); border-radius:var(--radius-card); padding:12px 14px; display:flex;
  flex-direction:column; gap:3px}
.sheetrow a{color:var(--color-text); font-weight:var(--weight-label); text-decoration:none; min-height:24px}
.sheetrow .sum{color:var(--color-text-2)}
.sheetrow .sum a{color:var(--color-accent); font-weight:inherit}
/* Crisis cards: the whole card is the tap target, not only its bold title (Nile, 2026-10-03). The card's main link is
   stretched over the card; a second link inside a card (a text-instead number) sits above it and stays its own target. */
.crisis-lines .sheetrow{position:relative}
.crisis-lines .sheetrow > a::after{content:""; position:absolute; inset:0; border-radius:var(--radius-card)}
.crisis-lines .sheetrow > a:active::after{background:rgba(255,255,255,.06)}
.crisis-lines .sheetrow > a:focus-visible{outline:none}
.crisis-lines .sheetrow > a:focus-visible::after{outline:2px solid var(--color-accent); outline-offset:2px}
.crisis-lines .sheetrow .sum a{position:relative; z-index:1}

/* crisis page */
.h24{display:inline-block; align-self:flex-start; width:fit-content; padding:0 8px; border-radius:var(--radius-pill);
  border:1px solid var(--color-divider); font-size:var(--fs-note); color:var(--color-text-2)}
.crisis-more{margin:6px 0 10px}
.crisis-more summary{min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--color-accent)}
.sos-skill{margin:0 0 10px; border-radius:var(--radius-card); background:var(--color-card); padding:4px 14px}
.sos-skill summary{min-height:44px; display:flex; align-items:center; font-weight:var(--weight-label); cursor:pointer}
.sos-body{padding:0 0 10px}
.sos-body p, .sos-body ul, .sos-body ol, .sos-body blockquote{margin:8px 0}
.sos-body ul, .sos-body ol{padding-left:22px}
.sos-body blockquote{border-left:2px solid var(--color-divider); padding-left:12px; color:var(--color-text-2)}
.sos-own{display:inline-flex; align-items:center; min-height:44px; text-decoration:none}
.fab988{position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom));
  min-width:56px; min-height:56px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); background:var(--color-card); border:1px solid var(--color-divider);
  color:var(--color-text); font-weight:var(--weight-label); text-decoration:none; z-index:20}