/* My AllowID.
   The only surface in this system a member of the public uses, and it should not
   look like the other two. The platform-admin portal is dark and dense because
   it is read during an incident; the company console is a business tool. This is
   somebody reading about their own life, possibly worried, possibly on a phone,
   possibly at 200% zoom because they need to be.

   So: generous type, short lines, real spacing, and every state carries a word
   as well as a colour. No web font — the page makes no external request, and a
   font that fails to load is a layout that shifts under somebody mid-sentence. */

:root {
  --bg: #fbfaf8;      --panel: #ffffff;   --panel-2: #f3f1ee;
  --line: #e2ddd6;    --ink: #1e1c1a;     --muted: #5c574f;
  --accent: #1a5c46;  --accent-ink: #ffffff; --accent-soft: #e7f2ec;
  --ok: #16704d;      --ok-bg: #e7f2ec;
  --warn: #7a5100;    --warn-bg: #fdf2dd;
  --stop: #9a2b1f;    --stop-bg: #fbeae7;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 17px/1.65 var(--sans); }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
/* Visible focus everywhere. Guide 9 §4: keyboard, screen reader, 200% zoom. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px;
                 border-radius: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; position: fixed; background: var(--panel);
              padding: .6rem 1rem; border: 2px solid var(--accent);
              border-radius: 6px; z-index: 100; }

header.top { background: var(--panel); border-bottom: 1px solid var(--line); }
header.top .bar { max-width: 900px; margin: 0 auto; padding: .9rem 1.5rem;
                  display: flex; align-items: baseline; gap: 1.25rem;
                  flex-wrap: wrap; }
header.top .brand { font-weight: 650; font-size: 18px; white-space: nowrap; }
header.top .who { margin-left: auto; color: var(--muted); font-size: 14px; }
nav.main { max-width: 900px; margin: 0 auto; padding: 0 1.5rem .2rem;
           display: flex; gap: 1.4rem; flex-wrap: wrap; }
nav.main a { color: var(--ink); text-decoration: none; font-size: 15px;
             padding-bottom: 6px; border-bottom: 3px solid transparent; }
nav.main a.on { border-bottom-color: var(--accent); font-weight: 650; }

main { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }
h1 { font-size: 30px; line-height: 1.25; margin: 0 0 .5rem; font-weight: 700;
     letter-spacing: -.01em; }
h2 { font-size: 21px; margin: 2.5rem 0 .6rem; font-weight: 650; }
h3 { font-size: 17px; margin: 1.5rem 0 .4rem; font-weight: 650; }
p { max-width: 62ch; }
p.lede { font-size: 19px; color: var(--muted); margin: 0 0 1.75rem; max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.note { font-size: 15px; color: var(--muted); max-width: 62ch; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
        padding: 1.25rem 1.4rem; margin-bottom: 1.1rem; }
.card h3:first-child, .card h2:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* Something needing attention. Never colour alone — each one has a heading that
   says what it is. */
.notice { border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1.1rem;
          border: 1px solid; }
/* Direct child only. These blocks use a leading <b> as their heading, but the
   paragraphs underneath emphasise things inline — "their copy stops working
   <b>within 19 hours</b>, and no later than…" — and a bare `.notice b` rule
   turns that phrase into its own block, splitting one sentence across three
   lines with a comma stranded at the start of the third. */
.notice > b { display: block; font-size: 18px; margin-bottom: .3rem; }
.notice.ok   { background: var(--ok-bg);   border-color: #bcd9c9; }
.notice.warn { background: var(--warn-bg); border-color: #e6cf9d; }
.notice.stop { background: var(--stop-bg); border-color: #edbdb6; }
.notice p { margin: .3rem 0 0; }

/* A thing somebody can act on: an organisation, a device, a grant. */
.row { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
       padding: 1.15rem 1.3rem; margin-bottom: .85rem;
       display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.row .body { flex: 1; min-width: 260px; }
.row .name { font-size: 19px; font-weight: 650; }
.row .facts { color: var(--muted); font-size: 15px; margin-top: .3rem; }
.row .facts div { margin-top: .12rem; }
.row .act { display: flex; gap: .6rem; align-items: center; }

.state { display: inline-block; padding: .18rem .6rem; border-radius: 999px;
         font-size: 14px; font-weight: 600; border: 1px solid; }
.state.on   { color: var(--ok);   background: var(--ok-bg);   border-color: #bcd9c9; }
.state.off  { color: var(--muted); background: var(--panel-2); border-color: var(--line); }
.state.warn { color: var(--warn); background: var(--warn-bg); border-color: #e6cf9d; }
.state.stop { color: var(--stop); background: var(--stop-bg); border-color: #edbdb6; }

table { width: 100%; border-collapse: collapse; font-size: 16px; }
th { text-align: left; font-weight: 650; font-size: 14px; color: var(--muted);
     padding: .5rem .7rem; border-bottom: 2px solid var(--line); }
td { padding: .6rem .7rem; border-bottom: 1px solid var(--line);
     vertical-align: top; }
tr:last-child td { border-bottom: none; }
.scroll { overflow-x: auto; }

button, .button { background: var(--accent); color: var(--accent-ink); border: 0;
                  border-radius: 8px; padding: .7rem 1.2rem;
                  font: 650 16px var(--sans); cursor: pointer;
                  text-decoration: none; display: inline-block; }
button.quiet, .button.quiet { background: var(--panel); color: var(--ink);
                              border: 1px solid #b9b2a8; font-weight: 600; }
button.stop { background: var(--stop); }
button:hover, .button:hover { filter: brightness(1.08); text-decoration: none; }

label { display: block; font-weight: 650; font-size: 16px; margin: 1.1rem 0 .3rem; }
label .hint { display: block; font-weight: 400; font-size: 15px; color: var(--muted);
              margin-top: .1rem; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  background: var(--panel); border: 1px solid #b9b2a8; color: var(--ink);
  border-radius: 8px; padding: .65rem .8rem; font: 17px var(--sans);
  width: 100%; max-width: 24rem; }
input.code { font: 600 26px/1.2 var(--mono); letter-spacing: .28em;
             max-width: 9.5em; text-align: center; }
.actions { display: flex; gap: .8rem; margin-top: 1.5rem; flex-wrap: wrap;
           align-items: center; }

.qr { background: #fff; padding: .9rem; border: 1px solid var(--line);
      border-radius: 12px; width: 240px; }
.qr svg { width: 100%; height: auto; display: block; }
.signin { max-width: 620px; margin: 3rem auto; }

/* Two side-by-side choices — the two custody tiers, the two ways to sign in. */
.choices { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.choice { background: var(--panel); border: 2px solid var(--line); border-radius: 12px;
          padding: 1.25rem 1.35rem; display: flex; flex-direction: column; }
.choice.current { border-color: var(--accent); background: var(--accent-soft); }
.choice h3 { margin-top: 0; font-size: 19px; }
.choice .good, .choice .cost { font-size: 15.5px; margin: .5rem 0 0; }
.choice .cost { color: var(--stop); font-weight: 600; }
.choice .fill { flex: 1; }
.choice form, .choice .actions { margin-top: 1.1rem; }

/* A code shown on screen because there is no provider yet. It has to be
   obviously a stand-in, not something that looks like it arrived. */
.demo-code { background: var(--warn-bg); border: 1px dashed #d3ac5c;
             border-radius: 10px; padding: .9rem 1.1rem; margin: .8rem 0; }
.demo-code > b { font: 700 26px/1.2 var(--mono); letter-spacing: .22em;
                 display: block; margin: .25rem 0; }
/* Direct child only. The explanatory sentence below the code emphasises which
   channel it is — "this is your <b>email</b> code" — and a bare `.demo-code b`
   rule renders that word at 26px in a monospace face, so the sentence breaks
   across three lines and reads as three separate things. */

dl.facts { margin: 0; }
dl.facts dt { font-weight: 650; font-size: 15px; color: var(--muted);
              margin-top: .9rem; }
dl.facts dd { margin: .1rem 0 0; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
code, .mono { font-family: var(--mono); font-size: 15px; }
pre.body { background: var(--panel-2); border: 1px solid var(--line);
           border-radius: 8px; padding: .9rem; white-space: pre-wrap;
           font: 14px/1.5 var(--mono); overflow-x: auto; }

footer.foot { max-width: 780px; margin: 0 auto; padding: 0 1.5rem 3rem;
              color: var(--muted); font-size: 15px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  h1 { font-size: 26px; }
  main { padding: 1.5rem 1.1rem 4rem; }
  .row { flex-direction: column; }
  .row .act { width: 100%; }
}

/* Somebody at 200% zoom is not an edge case here — guide 9 §4 names it. At that
   size the nav wraps rather than scrolling sideways, and nothing is pinned. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}