:root { color-scheme: light dark; --accent: #5b5fc7; --err: #b3261e; }
* { box-sizing: border-box; }
body {
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  margin: 0; padding: 1rem;
}
h1 { font-size: 1.2rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 .5rem; }
.sub { opacity: .7; margin: .15rem 0 0; font-size: .875rem; }
.bar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.pill { font-size: .75rem; padding: .15rem .55rem; border-radius: 1rem; border: 1px solid currentColor; opacity: .8; white-space: nowrap; }
.panel { border: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem; }
label { display: block; margin: 0 0 .75rem; font-size: .875rem; }
input, select { display: block; width: 100%; margin-top: .25rem; padding: .45rem .55rem; font: inherit;
  border-radius: .35rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; }
button { font: inherit; padding: .45rem 1rem; border: 0; border-radius: .35rem; background: var(--accent); color: #fff; cursor: pointer; }
button.ghost { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
button[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
form.inline input { width: auto; flex: 1 1 8rem; margin-top: 0; }
.err { color: var(--err); }
.boot { opacity: .7; }
.plain { list-style: none; padding: 0; margin: .5rem 0 0; }
.plain li { padding: .5rem 0; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); font-size: .875rem; }
table.rules { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.rules th { text-align: left; font-weight: 600; opacity: .7; padding: .25rem .35rem; }
table.rules td { padding: .2rem .35rem; }
table.rules input { margin-top: 0; }
.answer { border-left: 3px solid var(--accent); padding-left: .75rem; }
.answer .chain { font-size: 1.05rem; font-weight: 600; }
.answer dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: .5rem 0 0; font-size: .8125rem; }
.answer dt { opacity: .65; }
.answer dd { margin: 0; }
.gap { color: var(--err); font-weight: 600; }
.ghost-link { color: inherit; font-size: .875rem; }
.paid-only[hidden] { display: none; }
code { font-size: .9em; padding: .05rem .25rem; border-radius: .2rem; background: color-mix(in srgb, currentColor 10%, transparent); }
@media (max-width: 600px) {
  .bar { flex-direction: column; }
  table.rules, table.rules thead, table.rules tbody, table.rules tr, table.rules td, table.rules th { display: block; }
  table.rules thead { display: none; }
  table.rules tr { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); padding: .5rem 0; }
}

/* --- Assurance map specifics -------------------------------------------- */
:root { --accent: #1f3a5f; --ok: #1a7f5a; --med: #8a6100; --high: #b3261e; }
ul.tiles { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 .75rem; }
.tile { flex: 1 1 7rem; border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: .4rem; padding: .5rem .65rem; display: flex; flex-direction: column; }
.tile .n { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.tile .l { font-size: .75rem; opacity: .75; }
.tile.sev-high .n { color: var(--high); }
.tile.sev-med .n { color: var(--med); }
.tile.sev-ok .n { color: var(--ok); }
.pill.sev-high { color: var(--high); }
.pill.sev-med { color: var(--med); }
.pill.sev-ok { color: var(--ok); }
.risk-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.tag { font-size: .7rem; padding: .05rem .35rem; border-radius: .25rem;
  background: color-mix(in srgb, currentColor 10%, transparent); white-space: nowrap; }
.tag.sev-high { color: var(--high); }
.tag.sev-ok { color: var(--ok); }
ul.nested { margin-left: .75rem; border-left: 2px solid color-mix(in srgb, currentColor 12%, transparent);
  padding-left: .6rem; }
ul.nested li { border-top: 0; padding: .15rem 0; }
p.nested { margin-left: .75rem; }
form.inline { margin-bottom: .6rem; }
form.inline select { width: auto; flex: 1 1 9rem; margin-top: 0; }
label.tight { margin: 0; }
label.tight input { width: auto; }

/* Public legal & support pages (/privacy, /terms, /help, /contact, /signup, /start).
   Same stylesheet so the CSP stays style-src 'self'. */
.legal { max-width: 44rem; margin: 2rem auto; padding: 0 1rem; }
.legal h1 { font-size: 1.5rem; }
.legal h2 { font-size: 1.0625rem; margin-top: 1.75rem; }
.legal p, .legal li { line-height: 1.55; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal table { border-collapse: collapse; width: 100%; font-size: .875rem; margin: .5rem 0 1rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .4rem .5rem; border-bottom: 1px solid var(--border, #ddd); }
.legal .sub { color: var(--muted, #666); }