/* My AllowID — the layer on top of the brand.
   ==========================================================================
   Loaded after /static/brand/brand.css, which carries the palette, Inter, and
   every primitive shared with the other three surfaces. This file is only what
   is true about THIS portal.

   Light, and the most generous of the four. This is the only surface in the
   system a member of the public uses. Somebody reading it is reading about
   their own life, possibly worried, possibly on a phone, possibly at 200% zoom
   because they need to be.

   Comfortable density: --type-base 17px. Short measures, real spacing, large
   targets, and every state carrying a word as well as a colour.
   ========================================================================== */

:root { --type-base: 17px; }

/* --------------------------------------------------------------------------
   Header

   Not sticky. On a phone at 200% zoom a sticky header eats a third of the
   screen, and there is nothing here somebody needs while reading a paragraph.
   -------------------------------------------------------------------------- */

header.top { background: var(--surface); border-bottom: 1px solid var(--line); }
header.top .bar {
  max-width: 900px; margin: 0 auto; padding: .9rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
header.top .brandmark img { width: 1.7em; height: 1.7em; }
header.top .who {
  margin-left: auto; color: var(--ink-muted); font-size: .84em;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}

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: .89em;
  padding-bottom: 6px; border-bottom: 3px solid transparent;
}
nav.main a:hover { text-decoration: none; border-bottom-color: var(--line-strong); }
nav.main a.on { border-bottom-color: var(--accent); font-weight: 650; }

main { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem 5rem; }

/* --------------------------------------------------------------------------
   Type

   Short lines are the whole accessibility story on this portal. 62ch on body
   copy, 58ch on the lede — past that people lose the line return.
   -------------------------------------------------------------------------- */

h1 { font-size: 1.77em; line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.018em; }
h2 { font-size: 1.24em; margin: 2.5rem 0 .6rem; font-weight: 650; }
h3 { font-size: 1em; margin: 1.5rem 0 .4rem; font-weight: 650; }
p { max-width: 62ch; }
p.lede { font-size: 1.12em; color: var(--ink-muted); margin: 0 0 1.75rem; max-width: 58ch; }
.small { font-size: .88em; }
.note { font-size: .88em; color: var(--ink-muted); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Surfaces

   Larger radius than the working portals. Softer is the point.
   -------------------------------------------------------------------------- */

.card { border-radius: var(--r-lg); padding: 1.25rem 1.4rem; margin-bottom: 1.1rem; }
.notice { border-radius: var(--r-lg); padding: 1.1rem 1.3rem; }
.notice > b { font-size: 1.06em; margin-bottom: .3rem; }
.notice p { margin: .3rem 0 0; }

/* A thing somebody can act on: an organisation, a device, a grant. */
.row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  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: 1.12em; font-weight: 650; }
.row .facts { color: var(--ink-muted); font-size: .88em; margin-top: .3rem; }
.row .facts div { margin-top: .12rem; }
.row .act { display: flex; gap: .6rem; align-items: center; }

table { font-size: .94em; }
th { text-transform: none; letter-spacing: 0; font-size: .84em; }
th, td { padding: .55em .7em; }

/* --------------------------------------------------------------------------
   Controls

   Big targets. 44px minimum on anything tappable, which at 17px base means
   the padding below rather than a magic height.
   -------------------------------------------------------------------------- */

button, .button { border-radius: var(--r-sm); padding: .7em 1.2em; font-weight: 650; }
button:hover, .button:hover { filter: brightness(1.06); }

label { font-weight: 650; font-size: .94em; margin: 1.1rem 0 .3rem; color: var(--ink); }
label .hint { font-size: .88em; }

input[type=text], input[type=email], input[type=tel], select, textarea {
  border-radius: var(--r-sm); padding: .65em .8em; width: 100%; max-width: 24rem;
}
input.code {
  font: 650 1.53em/1.2 var(--font-mono);
  letter-spacing: .28em; max-width: 9.5em; text-align: center;
}
.actions { gap: .8rem; margin-top: 1.5rem; }

.qr { width: 240px; padding: .9rem; border-radius: var(--r-lg); }
.signin { max-width: 620px; margin: 3rem auto; }

/* Signed out: the same header with nothing in it but the lockup. This is the
   screen somebody reaches from an email link, so it is the one worth being
   unmistakably ours. */
header.top.plain .bar { padding: 1.1rem 1.5rem; }
header.top.plain .brandmark img { width: 2.1em; height: 2.1em; }

/* --------------------------------------------------------------------------
   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(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  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: 1.12em; }
.choice .good, .choice .cost { font-size: .91em; margin: .5rem 0 0; }
.choice .cost { color: var(--bad); 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 wired up yet. It has to
   look obviously like a stand-in, not like something that arrived. */
.demo-code {
  background: var(--warn-bg);
  border: 1px dashed var(--warn-line);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem;
  margin: .8rem 0;
}
.demo-code > b {
  font: 700 1.53em/1.2 var(--font-mono);
  letter-spacing: .22em; display: block; margin: .25rem 0;
}

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

hr.rule { margin: 2rem 0; }
code, .mono { font-size: .88em; }

footer.foot {
  max-width: 780px; margin: 0 auto; padding: 0 1.5rem 3rem;
  color: var(--ink-muted); font-size: .88em;
}
footer.foot .brandmark { margin-bottom: .75rem; opacity: .8; }
footer.foot .brandmark img { width: 1.4em; height: 1.4em; }

/* --------------------------------------------------------------------------
   Small screens and large zoom

   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, the action column
   in .row goes full width, and nothing is pinned.
   -------------------------------------------------------------------------- */

@media (max-width: 620px) {
  :root { --type-base: 16px; }
  h1 { font-size: 1.63em; }
  main { padding: 1.5rem 1.1rem 4rem; }
  .row { flex-direction: column; }
  .row .act { width: 100%; }
  header.top .who { width: 100%; margin-left: 0; }
}