/* CallGuardian — design tokens (Diana Reyes, 2026-09-25). 8px base. No purple. */
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plexmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --cg-canvas: #F4F6F6;
  --cg-surface: #FFFFFF;
  --cg-surface-2: #EDF1F1;
  --cg-border: #D3DCDD;
  --cg-ink: #132126;
  --cg-ink-2: #4A5A60;
  --cg-ink-3: #66767C;
  --cg-accent: #1A4C48;
  --cg-accent-hover: #123835;
  --cg-accent-soft: #E3EEEC;
  --cg-vault: #1A4C48;
  --cg-gold: #E39E58;
  --cg-vault-ink: #E6F0F1;
  --cg-vault-ink-2: #A9C3C6;
  --cg-alert: #B3261E;
  --cg-ok: #1E7A4C;
  --cg-focus: #0B63CE;
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px; --sp-8: 64px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow-low: 0 1px 2px rgba(19,33,38,.06), 0 1px 1px rgba(19,33,38,.04);
  --font: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cg-canvas: #0E1517; --cg-surface: #152023; --cg-surface-2: #1B282C; --cg-border: #2A3A3F;
    --cg-ink: #E8EEEF; --cg-ink-2: #AAB8BC; --cg-ink-3: #8C9CA1;
    --cg-accent: #6FB8B0; --cg-accent-hover: #8CCAC3; --cg-accent-soft: #173431;
    --cg-vault: #143B38; --cg-alert: #F2857D; --cg-ok: #5BBD8B; --cg-focus: #6FA8F0;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 16px; line-height: 1.55; color: var(--cg-ink); background: var(--cg-canvas); -webkit-font-smoothing: antialiased; }
a { color: var(--cg-accent); }
:focus-visible { outline: 3px solid var(--cg-focus); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Sign-in: AFNB's own desktop photograph is the page ---------- */
.signin {
  /* The card sits on a bright photograph, so it keeps the light palette in every theme. */
  --cg-surface: #FFFFFF; --cg-surface-2: #EEF2F1; --cg-border: #D3DCDB; --cg-ink: #132126; --cg-ink-2: #4A5A60; --cg-ink-3: #66767C;
  --cg-accent: #1A4C48; --cg-accent-hover: #123835; --cg-alert: #B3261E;
  min-height: 100vh; display: grid; place-items: center; background: #ECE6DE; color: var(--cg-ink);
}
.signin .stage { position: relative; width: min(100vw, calc(100vh * 16 / 9), 1920px); aspect-ratio: 16 / 9; }
/* The photo is always shown whole at 16:9 (never cropped), toned down 25% so the card leads. */
.signin .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.door { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); width: min(440px, 40%); }
.card { background: var(--cg-surface); border: 1px solid rgba(26,76,72,.14); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(26,76,72,.20), 0 2px 6px rgba(26,76,72,.10); padding: var(--sp-4); width: 100%; max-width: 440px; }
.lockup { display: flex; align-items: center; gap: var(--sp-2); }
.lockup img { width: 40px; height: 40px; }
.lockup .name { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.card .lockup { margin-bottom: var(--sp-3); color: var(--cg-accent); }
.card .kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-ink-3); margin: 0 0 var(--sp-1); }
.card h1 { font-size: 32px; line-height: 1.25; margin: 0 0 var(--sp-1); letter-spacing: -0.4px; }
.card p { color: var(--cg-ink-2); margin: 0 0 var(--sp-3); }
.btn-ms { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--cg-accent); background: var(--cg-accent); color: #fff; font: 600 16px var(--font); text-decoration: none; cursor: pointer; transition: background-color 150ms ease-out; }
.btn-ms:hover { background: var(--cg-accent-hover); }
.btn-ms[aria-disabled="true"] { background: var(--cg-surface-2); border-color: var(--cg-border); color: var(--cg-ink-3); cursor: not-allowed; }
.ms-logo { display: grid; grid-template-columns: 9px 9px; gap: 2px; }
.ms-logo i { display: block; width: 9px; height: 9px; }
.ms-logo i:nth-child(1) { background: #F25022; } .ms-logo i:nth-child(2) { background: #7FBA00; }
.ms-logo i:nth-child(3) { background: #00A4EF; } .ms-logo i:nth-child(4) { background: #FFB900; }
.notice { border-radius: var(--r-sm); padding: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 14px; border: 1px solid var(--cg-border); background: var(--cg-surface-2); color: var(--cg-ink-2); }
.notice.alert { border-color: var(--cg-alert); color: var(--cg-alert); background: transparent; }
.facts { list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--cg-border); display: grid; gap: var(--sp-1); font-size: 14px; color: var(--cg-ink-2); }
.facts li { padding-left: var(--sp-2); position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--cg-gold); }
.card .help { font-size: 14px; color: var(--cg-ink-3); margin: var(--sp-2) 0 0; }

/* ---------- App shell ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-3); background: var(--cg-vault); color: var(--cg-vault-ink); border-bottom: 3px solid var(--cg-gold); }
.topbar .lockup img { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.topbar .lockup img { width: 32px; height: 32px; }
.topbar .lockup .name { font-size: 18px; }
.who { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
.who .role { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 2px var(--sp-1); border-radius: 999px; border: 1px solid rgba(230,240,241,.35); color: var(--cg-vault-ink); }
.who a { color: var(--cg-vault-ink); }
.side { background: var(--cg-surface); border-right: 1px solid var(--cg-border); padding: var(--sp-3) var(--sp-2); }
.side nav { display: grid; gap: 4px; }
.side .navlink { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--cg-ink); text-decoration: none; font-weight: 500; }
.side .navlink:hover { background: var(--cg-surface-2); }
.side .navlink[aria-current="page"] { background: var(--cg-accent-soft); color: var(--cg-accent); font-weight: 600; }
.side .navlink.later { color: var(--cg-ink-3); cursor: default; }
.side .navlink.later:hover { background: transparent; }
.side .phase { font-family: var(--mono); font-size: 12px; color: var(--cg-ink-3); }
.side .group { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-ink-3); margin: var(--sp-3) var(--sp-2) var(--sp-1); }
main { padding: var(--sp-6); max-width: 1120px; width: 100%; }
main h1 { font-size: 32px; line-height: 1.25; letter-spacing: -0.4px; margin: 0 0 var(--sp-1); }
main .lede { color: var(--cg-ink-2); margin: 0 0 var(--sp-4); }
.panel { background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--r-md); padding: var(--sp-3); box-shadow: var(--shadow-low); }
.search label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
.search .row { display: flex; gap: var(--sp-2); }
.search input { flex: 1; min-height: 48px; border-radius: var(--r-sm); border: 1px solid var(--cg-border); background: var(--cg-surface-2); padding: 0 var(--sp-2); font: 400 16px var(--font); color: var(--cg-ink-3); }
.search button { min-height: 48px; padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--cg-border); background: var(--cg-surface-2); color: var(--cg-ink-3); font: 600 16px var(--font); cursor: not-allowed; }
.search .why { font-size: 14px; color: var(--cg-ink-2); margin: var(--sp-1) 0 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.tile .k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-ink-3); margin-bottom: var(--sp-1); }
.tile .v { font-size: 18px; font-weight: 600; line-height: 1.4; }
.tile .s { font-size: 14px; color: var(--cg-ink-2); margin-top: 4px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-1); vertical-align: middle; background: var(--cg-ink-3); }
.dot.ok { background: var(--cg-ok); }
.access { margin-top: var(--sp-3); display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.access p { margin: 0; color: var(--cg-ink-2); font-size: 14px; }
table.log { width: 100%; border-collapse: collapse; font-size: 14px; }
table.log th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cg-ink-3); font-weight: 600; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--cg-border); }
table.log td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--cg-border); vertical-align: top; }
table.log tr:last-child td { border-bottom: none; }
table.log .upn { color: var(--cg-ink-3); font-size: 12px; }
.empty { color: var(--cg-ink-2); padding: var(--sp-3) 0; }

@media (max-width: 900px) {
  .signin { display: block; }
  .signin .stage { width: 100%; aspect-ratio: auto; }
  .signin .photo { position: static; display: block; height: auto; aspect-ratio: 16 / 9; }
  .door { position: static; transform: none; width: auto; padding: 0 var(--sp-2) var(--sp-4); margin-top: calc(-1 * var(--sp-4)); }
  .card { padding: var(--sp-3); max-width: none; }
  .shell { grid-template-columns: 1fr; grid-template-rows: 64px auto 1fr; }
  .side { border-right: none; border-bottom: 1px solid var(--cg-border); }
  main { padding: var(--sp-3); }
  .tiles { grid-template-columns: 1fr; }
  .who .name { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }