/* idd login/register/welcome + the small server-rendered pages — a centered auth card on the
 * shared foglab palette (web/shared/theme/foglab-theme.css, linked before this file: --bg --bg-soft
 * --bg-sunk --ink --ink-soft --ink-faint --accent --accent-2 --line --on-accent --ok --err --warn
 * --shadow --radius --radius-sm --font --mono). AGM-8 (steele 2026-10-31): no app carries a palette
 * of its own and the palette no longer varies by brand; the only app tokens left are the survey
 * glyph flags, aliased onto the shared logo flags (ink glyph in light, white glyph in dark). */
:root {
  --glyph-ink: var(--logo-light);
  --glyph-white: var(--logo-dark);
}

/* ── base ── */
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--font);
  -webkit-font-smoothing:antialiased; }
body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
#app.booting { color:var(--ink-faint); }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-2); text-decoration:underline; }

/* ── card ── */
.card { width:100%; max-width:360px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.7rem 1.6rem; box-shadow:var(--shadow); }
.card h1 { font-size:1.2rem; margin:0 0 1.1rem; color:var(--ink); font-weight:800; letter-spacing:-.01em; }
.card h1 .dot { color:var(--accent); }

/* ── form ── */
form { display:flex; flex-direction:column; gap:.6rem; }
input, textarea { padding:.6rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; background:var(--bg-sunk); color:var(--ink); width:100%; }
input:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
textarea { min-height:4.5rem; resize:vertical; }
button { margin-top:.3rem; padding:.6rem .7rem; border:0; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--on-accent); font:inherit; font-weight:600; cursor:pointer; }
button:hover { background:var(--accent-2); }

.msg { min-height:1.2rem; margin:.9rem 0 .2rem; font-size:.92rem; }
.msg .ok { color:var(--ok); } .msg .err { color:var(--err); }
.alt { margin:.6rem 0 0; font-size:.85rem; color:var(--ink-faint); }

/* Auxiliary form field, parked off-screen (SXI-3). Deliberately NOT
   display:none/visibility:hidden — it must stay form-participating and
   autofillable; the off-screen 1px box is what keeps humans from ever seeing
   it. Paired with aria-hidden + tabindex=-1 in the SPA markup so assistive
   tech and keyboard focus skip it too. */
.form-aux { position:absolute !important; left:-9999px !important; top:0 !important;
  width:1px !important; height:1px !important; padding:0 !important; border:0 !important;
  opacity:.01; overflow:hidden; pointer-events:none; }

/* ── theme toggle (fixed corner) ── */
.theme-toggle { position:fixed; top:1rem; right:1rem; padding:.4rem .7rem;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-soft);
  color:var(--ink-soft); font:inherit; font-size:.82rem; cursor:pointer; }
.theme-toggle:hover { border-color:var(--accent); color:var(--ink); }

/* ── OAuth (Google) + divider ── */
.oauth { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  padding:.6rem .7rem; margin-top:.3rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg-soft); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.oauth:hover { border-color:var(--accent); }
.oauth[disabled] { opacity:.6; cursor:not-allowed; }
.oauth img { width:1.1rem; height:1.1rem; }
.oauth .soon { color:var(--ink-faint); font-weight:500; font-size:.82rem; }
.divider { display:flex; align-items:center; gap:.6rem; margin:.9rem 0 .1rem; color:var(--ink-faint); font-size:.8rem; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* ── register survey (product card grid) — public instance only ── */
.survey { margin:.2rem 0 .1rem; }
.survey > .survey-legend { font-size:.9rem; font-weight:600; color:var(--ink); margin:.2rem 0 .5rem; }
.survey-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.survey-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.65rem .4rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg-sunk); cursor:pointer; text-align:center; transition:border-color .12s, transform .08s; }
.survey-card:hover { transform:translateY(-1px); }
.survey-card:has(input:checked) { border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.survey-card input { position:absolute; opacity:0; width:0; height:0; }
.survey-card .glyph { width:1.6rem; height:1.6rem; }
.glyph-ink   { display:var(--glyph-ink);   width:100%; height:100%; }
.glyph-white { display:var(--glyph-white); width:100%; height:100%; }
.survey-card .survey-label { font-size:.74rem; line-height:1.15; color:var(--ink-soft); }
.survey-card:has(input:checked) .survey-label { color:var(--ink); font-weight:600; }
@media (max-width:360px) { .survey-grid { grid-template-columns:repeat(2, 1fr); } }
/* survey v2 (SXI-2): single-select edition row, revealed pack grid, source select, news opt-in */
.survey-editions { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin-bottom:.6rem; }
.survey-card.edition { padding:.6rem .4rem; }
.survey-card .survey-hint { font-size:.66rem; line-height:1.15; color:var(--ink-faint); }
.survey-card:has(input:checked) .survey-hint { color:var(--ink-soft); }
.survey-card[hidden] { display:none; }
.survey-card.soon .survey-label { color:var(--ink-faint); font-style:italic; }
.survey-packs { margin:.2rem 0 .5rem; }
.survey-packs[hidden] { display:none; }
.survey > .survey-legend.sub { font-size:.82rem; font-weight:600; color:var(--ink-soft); margin:.3rem 0 .45rem; }
.survey-packs > .survey-legend.sub { font-size:.82rem; font-weight:600; color:var(--ink-soft); margin:.3rem 0 .45rem; }
.survey-select { width:100%; margin-top:.2rem; padding:.45rem .6rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; font-size:.82rem; background:var(--bg-sunk); color:var(--ink-soft); }
.survey-select:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.optin { display:flex; align-items:flex-start; gap:.5rem; margin:.1rem 0 .2rem; font-size:.84rem; color:var(--ink-soft); cursor:pointer; }
.optin input { width:auto; margin:.15rem 0 0; accent-color:var(--accent); }
@media (max-width:360px) { .survey-editions { grid-template-columns:1fr; } }
/* the generic business survey (branding survey = business): free text, two selects, goal cards */
.survey.business textarea { margin-bottom:.35rem; }
.survey.business .survey-select { margin:.2rem 0 .35rem; }
.survey.business .survey-grid { margin-bottom:.4rem; }
.survey.business .survey-card { padding:.55rem .4rem; }

/* ── post-register 2FA recommendation (inert; Leg 4 wires the backend) ── */
.postreg { margin-top:1rem; padding:1rem 1.1rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--bg-sunk); }
.postreg .section-title { font-weight:700; font-size:1rem; margin:0 0 .35rem; color:var(--ink); }
.postreg p { margin:.25rem 0; color:var(--ink-soft); font-size:.9rem; }
.postreg .btn-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.postreg .btn-row button { flex:1; background:transparent; color:var(--ink); border:1px solid var(--line); margin:0; }
/* TOTP enrollment (Leg 4) — revealed on /welcome after "Authenticator app". */
.totp-enroll { margin-top:.7rem; }
.totp-enroll .totp-hint { font-size:.85rem; color:var(--ink-soft); margin:.2rem 0 .4rem; }
.totp-secret { display:block; margin:.35rem 0; padding:.5rem .6rem; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:.4rem; font-family:var(--mono);
  font-size:.82rem; letter-spacing:.06em; word-break:break-all; color:var(--ink); }
.totp-uri { font-size:.85rem; }
.totp-enroll .btn-row input { flex:1; min-width:0; }
.postreg .tag { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:.05rem .45rem; margin-left:.4rem; }