/* Brief 02: enough to be legible on a phone. Brief 03/04 bring the art in (docs/ROADMAP.md).
   Typography belongs to the page, never to the image; the hero gets a scrim because the plate has
   no naturally dark region. */
:root { --bg:#0e0f14; --fg:#e8e6df; --muted:#9a9890; --card:#181a22; --up:#3fa66b; --down:#c0453f;
        --aeriden:#3b6fd6; --solaris:#d6473b; --verdant:#3f9a4f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, sans-serif; }
.hero { background:#222 url('/static/art/plate_hero_dawn_v7.png') center/cover no-repeat; min-height:34vh; display:flex; align-items:flex-end; }
.scrim { width:100%; padding:2rem 1rem 1rem; background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.15) 60%, rgba(14,15,20,1)); }
.wordmark { max-width:min(520px, 90vw); display:block; margin:0 auto; }
.hero h1 { text-align:center; margin:0; font-size:clamp(1.6rem, 5vw, 2.6rem); letter-spacing:.04em; }
main { max-width:720px; margin:0 auto; padding:1rem; }
.card { background:var(--card); border-radius:12px; padding:1.25rem; margin:1rem 0; }
.status h2 { margin:0 0 .25rem; }
.status.up h2 { color:var(--up); } .status.down h2 { color:var(--down); }
.muted { color:var(--muted); margin:0; }
.banner { font-size:1.15rem; border-left:4px solid var(--aeriden); padding-left:.75rem; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:.25rem 1rem; }
dt { color:var(--muted); } dd { margin:0; }
code { font-size:1.05em; }
.button { display:inline-block; background:var(--aeriden); color:#fff; text-decoration:none; padding:.6rem 1rem; border-radius:8px; }
footer { text-align:center; color:var(--muted); padding:2rem 1rem; }

/* Operator page (brief 03): thumbs, not mice. */
.tabs { display:flex; gap:1rem; align-items:center; margin:.5rem 0 1rem; }
.tabs a { color:var(--muted); text-decoration:none; padding:.4rem .2rem; border-bottom:2px solid transparent; }
.tabs a.on { color:var(--fg); border-color:var(--aeriden); }
.tabs form.inline { margin-left:auto; }
.stack { display:flex; flex-direction:column; gap:.6rem; }
.stack label { display:flex; flex-direction:column; gap:.3rem; color:var(--muted); }
.stack label.check { flex-direction:row; align-items:center; gap:.6rem; color:var(--fg); }
input[type=text], input[type=password], select, textarea { font:inherit; padding:.7rem; border-radius:8px; border:1px solid #333; background:#0b0c10; color:var(--fg); width:100%; }
.button.big { font-size:1.15rem; padding:.9rem 1.2rem; width:100%; text-align:center; }
.button.warn, .link.warn { background:var(--solaris); }
.link.warn { background:none; color:var(--solaris); }
button.link { background:none; border:none; color:var(--aeriden); font:inherit; cursor:pointer; padding:0; text-decoration:underline; }
.card.danger { border:1px solid var(--solaris); }
.flash { background:#23262f; border-left:4px solid var(--verdant); padding:.6rem .8rem; border-radius:6px; }
.flash.bad { border-color:var(--solaris); }
pre { background:#0b0c10; padding:.6rem; border-radius:6px; overflow-x:auto; font-size:.8rem; }
table.plain, table.codes { width:100%; border-collapse:collapse; font-size:.95rem; }
table td, table th { padding:.45rem .3rem; border-bottom:1px solid #262830; text-align:left; vertical-align:top; }
tr.revoked td { opacity:.5; }
code.code { font-size:1.2rem; letter-spacing:.08em; }
form.inline { display:inline; }
@media (max-width: 480px) { table.codes th:nth-child(3), table.codes td:nth-child(3) { display:none; } }

/* Public site (brief 04). The art's rules: no text in images, the wordmark is its own element,
   the hero needs a scrim. Emblems are white on black: screen-blend keys the black out on a dark page. */
.hero h1 a { color:var(--fg); text-decoration:none; }
.tagline { text-align:center; color:var(--fg); margin:.6rem 0 0; opacity:.9; }
.mainnav { display:flex; gap:.25rem; justify-content:center; flex-wrap:wrap; padding:.5rem 1rem 0; }
.mainnav a { color:var(--muted); text-decoration:none; padding:.5rem .7rem; border-radius:8px; }
.mainnav a:hover { color:var(--fg); background:var(--card); }
.actions { display:flex; gap:.6rem; flex-wrap:wrap; }
.button.ghost { background:transparent; border:1px solid var(--aeriden); color:var(--fg); }
.factions-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; margin:1rem 0; }
@media (max-width: 600px) { .factions-strip { grid-template-columns:1fr; } }
.faction { display:block; text-decoration:none; color:var(--fg); background:var(--card) center/cover no-repeat; border-radius:12px; padding:1rem; min-height:11rem; position:relative; overflow:hidden; border-top:4px solid var(--muted); }
.faction::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(14,15,20,.95) 35%, rgba(14,15,20,.25)); }
.faction > * { position:relative; }
.faction.aeriden { border-color:var(--aeriden); } .faction.solaris { border-color:var(--solaris); } .faction.verdant { border-color:var(--verdant); }
.faction h3 { margin:.4rem 0 0; } .motto { margin:.1rem 0 .3rem; font-style:italic; color:var(--muted); }
.emblem { width:56px; height:56px; object-fit:contain; mix-blend-mode:screen; display:block; }
.emblem.glyph { display:flex; align-items:center; justify-content:center; border-radius:50%; background:#222; font-weight:700; font-size:1.4rem; }
.faction-card.aeriden { border-left:4px solid var(--aeriden); } .faction-card.solaris { border-left:4px solid var(--solaris); } .faction-card.verdant { border-left:4px solid var(--verdant); }
.faction-head { display:flex; gap:1rem; align-items:center; } .faction-head h2 { margin:0; }
dl.stats dd { font-size:1.15rem; }
.tablewrap { overflow-x:auto; }
table.board { width:100%; border-collapse:collapse; } table.board th { color:var(--muted); font-weight:500; font-size:.85rem; }
table.board td, table.board th { padding:.5rem .4rem; border-bottom:1px solid #262830; text-align:right; }
table.board td:nth-child(2), table.board th:nth-child(2) { text-align:left; }
@media (max-width: 480px) { .fold { display:none; } }
.small { font-size:.85rem; }
.match .teams { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:.5rem; margin:.5rem 0; }
.team { background:#0b0c10; border-radius:8px; padding:.5rem .7rem; border-top:3px solid var(--muted); display:flex; flex-direction:column; }
.team.aeriden { border-color:var(--aeriden); } .team.solaris { border-color:var(--solaris); } .team.verdant { border-color:var(--verdant); }
.team.won { outline:1px solid var(--fg); } .tscore { font-size:1.4rem; font-weight:700; }
ol.steps li { margin:.7rem 0; }
main a { color:#7aa2ff; }