/* B · The surfaces — Tare's own language, on the web.
   Keeps every principle the app states: accent-wash, surface-raised cards, the
   16px card radius. What it breaks is a web convention rather than one of ours:
   a legal document rendered as a stack of cards is a lot of chrome around
   something people read once, under duress. */
body { background: var(--tare-surface); color: var(--tare-ink);
       font: var(--tare-body-l); margin: 0; }
.wrap { max-width: 720px; margin: 0 auto;
        padding: var(--tare-space-xxl) var(--tare-space-l) var(--tare-space-xxxl); }
nav { display: flex; gap: var(--tare-space-l); align-items: baseline;
      padding-bottom: var(--tare-space-xl); }
nav a { color: var(--tare-ink-muted); text-decoration: none; font: var(--tare-body-s); }
nav .mark { font: 600 20px/24px var(--tare-font-display); color: var(--tare-ink);
            margin-right: auto; letter-spacing: -0.02em; }
.hero { background: var(--tare-accent-wash); border-radius: var(--tare-radius-card);
        padding: var(--tare-space-xxl) var(--tare-space-xl); margin-bottom: var(--tare-space-l); }
h1 { font: 600 clamp(30px, 5vw, 44px)/1.1 var(--tare-font-display);
     letter-spacing: -0.03em; margin: 0 0 var(--tare-space-s); }
.lede { font: var(--tare-body-l); color: var(--tare-ink-muted); margin: 0; }
.cards { display: grid; gap: var(--tare-space-s); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--tare-surface-raised); border: 1px solid var(--tare-border);
        border-radius: var(--tare-radius-card); padding: var(--tare-space-l); }
.card h3 { font: 600 17px/22px var(--tare-font-display); margin: 0 0 4px; }
.card p { font: var(--tare-body-s); line-height: 20px; color: var(--tare-ink-muted); margin: 0; }
h2 { font: 600 20px/26px var(--tare-font-display); margin: 0 0 var(--tare-space-xs); letter-spacing: -0.01em; }
.section { background: var(--tare-surface-raised); border: 1px solid var(--tare-border);
           border-radius: var(--tare-radius-card); padding: var(--tare-space-l);
           margin-bottom: var(--tare-space-s); }
p, li { font: var(--tare-body-m); line-height: 24px; margin: 0 0 var(--tare-space-xs); }
.section p:last-child, .section li:last-child { margin-bottom: 0; }
ul { padding-left: 1.1em; margin: 0; }
a { color: var(--tare-accent); }
.state { margin-top: var(--tare-space-l); background: var(--tare-surface-sunken);
         border-radius: var(--tare-radius-card); padding: var(--tare-space-m) var(--tare-space-l);
         color: var(--tare-ink-muted); font: var(--tare-body-s); }
footer { max-width: 720px; margin: 0 auto; padding: 0 var(--tare-space-l) var(--tare-space-huge);
         color: var(--tare-ink-muted); font: var(--tare-body-s); display: flex;
         gap: var(--tare-space-m); flex-wrap: wrap; }
footer a { color: var(--tare-ink-muted); }
.updated { font: var(--tare-caption); color: var(--tare-ink-muted);
           text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--tare-space-xs); }

/* --- The mark ------------------------------------------------------------
   Inline rather than an <img>, so the disc takes --tare-accent and the bar
   takes --tare-ink and both follow the theme. An image would need two files
   and would still be wrong on any theme added later.

   Cropped to viewBox="27 32 54 44" — the artwork's real extents inside the
   108 canvas. The launcher icon's padding is there to survive an adaptive
   mask, and a web page has no mask, so carrying that padding would just make
   the mark look small beside its own wordmark. */
nav .mark { display: inline-flex; align-items: center; gap: 9px; }
.mark-glyph { display: block; flex: none; }
.hero { display: flex; align-items: center; gap: var(--tare-space-xxl); }
.hero-text { flex: 1; min-width: 0; }
.hero-glyph { flex: none; }
/* The mark leaves the hero below 720px rather than shrinking: at the width it
   would have left, it is smaller than the nav lockup two rows above it, which
   reads as a mistake rather than as a smaller mark. */
@media (max-width: 720px) { .hero { display: block; } .hero-glyph { display: none; } }

/* --- The delete-account page --------------------------------------------
   The only page with a procedure on it, and the only one where a section is
   marked. Everything else here is shared with the other three. */
.steps { margin: 0 0 var(--tare-space-xs); padding-left: 1.3em; }
.steps li { font: var(--tare-body-m); line-height: 24px; margin-bottom: var(--tare-space-xs); }
.steps li:last-child { margin-bottom: 0; }

/* **A tinted section, not a red one.** These two facts are consequences a
   reader has to see before they act, which is a different thing from an error.
   `--tare-critical` is reserved for destructive *actions* — the button in the
   app — and using it on a paragraph would be the same confusion DESIGN.md
   records costing a day when `over` and `critical` were borrowed for each
   other. The wash carries the emphasis; the words carry the meaning. */
.section.critical { background: var(--tare-accent-wash); border-color: transparent; }
.section.critical h2 { color: var(--tare-ink); }

/* --- Skip link ------------------------------------------------------------
   Four pages of prose with a nav on each. Cheap, and the only keyboard
   affordance these pages need. */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--tare-space-l); top: var(--tare-space-s); z-index: 2;
  background: var(--tare-surface-raised); color: var(--tare-ink);
  padding: var(--tare-space-xs) var(--tare-space-m);
  border: 1px solid var(--tare-border); border-radius: var(--tare-radius-field); }