/* Public site skin (M6a). A legible, WCAG-AA re-skin of the lo-fi mockup: the mockup's
   hand-drawn Patrick-Hand font is deliberately replaced with a system UI stack (03-decisions.md
   §38). Band is conveyed by SHAPE + TEXT LABEL, never colour alone. Tap targets >= 44px. */

:root {
  --bg: #f7f6f2;
  --card: #ffffff;
  --ink: #1a1a1a;
  --line: #c9c7c0;
  --muted: #595959;          /* AA on both --bg and --card */
  --ink-invert: #ffffff;
  --hard: #1a1a1a;           /* hard-flag banner / HIGH-RISK chip */
  --concern: #8a4b00;        /* warm brown, AA on white — not relied on alone */
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 16px; }

a { color: var(--ink); }
a:focus-visible, .cta:focus-visible { outline: 3px solid #2a6fb0; outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ink-invert); padding: 10px 14px;
}
.skip:focus { left: 8px; top: 8px; z-index: 10; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2.sh, .sh {
  font: 0.72rem/1.3 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px;
}
.src { font: 0.8rem/1.45 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.src a { color: var(--muted); }

/* --- profile --- */
.profile { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; }
.p-head { display: flex; gap: 12px; align-items: center; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: #ece9e2; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 600;
}
.p-id h1 { margin: 0; }
.hi { margin: 2px 0; font-size: 1rem; }
.accounts { margin: 4px 0 0; }

.lang-toggle { margin-left: auto; align-self: flex-start; min-height: 44px;
  display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 6px; font-size: 0.85rem; text-decoration: none; }

.independence { font-size: 0.85rem; color: var(--muted); margin: 12px 0; }

.rec-chart { margin: 8px 0; display: flex; flex-direction: column; gap: 2px; }
.rec-chart .spark { max-width: 100%; height: auto; }

/* verdict: band = chip shape + text label (colour-independent) */
.verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 8px; }
.flags { font-size: 1.05rem; }
.no-score { margin-left: auto; text-align: right; }

.chip { display: inline-block; border: 1.5px solid var(--ink); border-radius: 4px;
  padding: 2px 10px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.chip.hi { background: var(--hard); color: var(--ink-invert); }         /* HIGH-RISK: solid */
.chip.caution { border-style: dashed; }                                 /* CAUTION: dashed */
.chip.clear { border-style: solid; font-weight: 400; }                  /* CLEAR: plain */
.chip.insufficient, .chip.not_tracked { border-style: dotted; font-weight: 400; }
.chip.trend { font-size: 0.8rem; font-weight: 400; }
.chip.deleted-chip { border-style: dashed; font-weight: 400; font-size: 0.75rem; }

.tap-hint { margin: 6px 0 0; }

/* hard-flag banner — permanent, high contrast */
.hardflag { background: var(--hard); color: var(--ink-invert); border-radius: 8px;
  padding: 12px 14px; margin: 12px 0; }
.hf-title { font-size: 1.1rem; letter-spacing: 0.04em; margin: 0 0 4px; font-weight: 700; }
.hf-body { margin: 0 0 6px; font-size: 0.9rem; }
.hf-perm { opacity: 0.85; }
.hardflag .src, .hardflag .src a { color: #d8d8d8; }

/* two-column desktop reflow (03-decisions.md §21): left = Layers 1–3, right = Evidence */
.cols { display: block; }
.col-left, .col-right { min-width: 0; }
@media (min-width: 720px) {
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }
}

/* sections & signal rows */
.sec { border-top: 1px solid var(--line); padding: 12px 0; }

/* collapsible layer sections (progressive disclosure; open by default for transparency) */
details.sec > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center;
  gap: 8px; margin: 0; }
details.sec[open] > summary { margin-bottom: 8px; }
details.sec > summary::marker { color: var(--muted); }
details.sec > summary::-webkit-details-marker { color: var(--muted); }
.flag { display: flex; gap: 8px; align-items: baseline; margin: 0 0 10px; }
.glyph { flex: none; font-size: 1rem; }
.flag.concern .glyph { color: var(--concern); }
.flag-label { font-weight: 500; }
.flag-detail { color: var(--muted); }
.q { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; font-style: italic;
  margin: 6px 0; }

/* Layer 3 */
.l3-boxes { display: flex; gap: 10px; flex-wrap: wrap; }
.l3-box { flex: 1 1 180px; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.l3-big { font-size: 1.15rem; margin: 2px 0; }
.insufficient { border: 1px dashed var(--line); border-radius: 6px; padding: 14px;
  text-align: center; }
.ins-h { font-size: 1.05rem; margin: 0 0 4px; }
.ins-b { font-size: 0.9rem; color: var(--muted); margin: 0; }
.thinness { margin-top: 8px; }

/* receipts */
.rec { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  background: #fcfcfb; margin: 0 0 8px; }
.rec.deleted { border-style: dashed; }
.rec-head { display: flex; justify-content: space-between; gap: 8px; }
.outcome { font-variant: small-caps; }

/* empty state */
.empty { text-align: center; padding: 24px 12px; }
.empty-h { font-size: 1.2rem; margin: 0; }
.empty-b { color: var(--muted); max-width: 40ch; margin: 6px auto 0; }
.cta { display: inline-block; border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 10px 16px; min-height: 44px; text-decoration: none; margin-top: 10px; }

/* docs (methodology / money / corrections / home) */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; }
.doc h2 { margin-top: 20px; }
.lede { font-size: 1.05rem; }
.doc code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em;
  background: #efeee9; padding: 1px 4px; border-radius: 3px; }
.directory { list-style: none; padding: 0; }
.directory li a { display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 4px 0; text-decoration: none; }

/* feedback forms (report / suggest) */
.feedback-form label { display: block; margin: 14px 0; font-weight: 500; }
.feedback-form input[type="text"], .feedback-form input[type="email"],
.feedback-form select, .feedback-form textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px; font-size: 1rem;
  font-family: inherit; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  color: var(--ink); }
.feedback-form button { min-height: 44px; padding: 0 20px; font-size: 1rem; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 6px; background: var(--ink);
  color: var(--ink-invert); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.note { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 6px;
  color: var(--muted); }
.report-links { margin-top: 8px; }

/* footer */
.site-foot { max-width: 760px; margin: 16px auto; padding: 12px 16px; }
.disc { font-size: 0.8rem; color: var(--muted); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.foot-nav a { min-height: 44px; display: inline-flex; align-items: center;
  font-size: 0.85rem; }

@media (min-width: 720px) {
  .profile { padding: 20px 24px; }
}