/* Project Reclaimer site look. Dark only (a game site), Reach-style: thin wide-tracked wordmark, grey translucent rows,
steel-blue selection. Palette and fonts follow docs/ui/prototypes/reach-home.html.
CLASSES FOR PAGES (link /assets/site.css and put
+ ):
.wrap centered content column (max 1100px, 16px gutters). Add .wide for 1400px.
.page-head page header:
.panel translucent panel; HEADER gives the grey header bar
.grid responsive grid of panels (min 300px columns)
table.tbl table: small caps, rows grey; wrap in .tbl-wrap for horizontal scroll on phones
.btn button/link button. Variants: .btn.primary (steel blue), .btn.danger, .btn.ghost. [disabled] dims it
input.field, select.field, textarea.field inputs; Text above them
.row-form flex row that wraps (inputs + button)
.badge status pill; add .ok .warn .bad .info (default grey)
.muted .faint dim text; .mono tabular numbers; .err red error text; .hidden display:none
.prose readable long text (used by docs)
Tokens (:root): --ink --panel --row --row-hover --header --sel --sel-edge --text --dim --faint --warn --ok --bad --display --label */
:root{
--ink:#06090d; --row:rgba(150,160,158,.22); --row-hover:rgba(170,180,178,.34); --header:rgba(30,32,34,.88);
--panel:rgba(26,32,38,.86); --sel:#2C3D5C; --sel-edge:#95BCE7; --text:#E9EEF1; --dim:#A9B4BB; --faint:#6F7C85;
--warn:#E0B66D; --ok:#8FCB9B; --bad:#E58B80;
--display:"Titillium Web","Segoe UI",system-ui,sans-serif; --label:"Roboto Condensed","Arial Narrow",system-ui,sans-serif;
--ease:cubic-bezier(.2,.7,.2,1);
color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--ink);color:var(--text);font:400 17px/1.55 var(--display);overflow-x:hidden}
a{color:var(--sel-edge);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--sel-edge);outline-offset:2px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:1.4em 0 .5em}
h1{font-weight:300;font-size:clamp(28px,5vw,44px);letter-spacing:.12em;text-transform:uppercase;margin-top:.4em}
h2{font-weight:600;font-size:22px;letter-spacing:.1em;text-transform:uppercase}
h3{font-weight:600;font-size:18px;letter-spacing:.06em}
p{margin:.7em 0}
code,pre{font-family:Consolas,"Cascadia Mono",monospace;font-size:.88em}
code{background:rgba(150,160,158,.18);padding:.1em .35em}
pre{background:#0b1117;border-left:2px solid var(--sel-edge);padding:12px 14px;overflow-x:auto;line-height:1.45}
pre code{background:none;padding:0}
hr{border:0;border-top:1px solid rgba(149,188,231,.22);margin:2em 0}
.hidden{display:none!important}
.muted{color:var(--dim)} .faint{color:var(--faint)} .mono{font-variant-numeric:tabular-nums} .err{color:var(--bad)}
/* top bar */
#site-nav{position:sticky;top:0;z-index:50;background:rgba(6,9,13,.92);border-bottom:1px solid rgba(149,188,231,.18);backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;max-width:1400px;margin:0 auto;padding:10px 16px;font:500 16px/1 var(--label);letter-spacing:.1em;text-transform:uppercase}
.nav .mark{font:300 17px/1 var(--display);letter-spacing:.34em;color:var(--text);margin-right:auto;white-space:nowrap}
.nav .mark b{font-weight:600;color:var(--dim);letter-spacing:.5em;margin-right:.5em;font-size:11px}
.nav a{color:var(--dim);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.on{color:var(--text);text-decoration:none;border-bottom-color:var(--sel-edge)}
.nav .who{color:var(--faint);letter-spacing:.06em;text-transform:none}
.nav button{all:unset;cursor:pointer;color:var(--dim);padding:6px 0}
.nav button:hover{color:var(--text)}
/* layout */
.wrap{max-width:1100px;margin:0 auto;padding:0 16px 64px}
.wrap.wide{max-width:1400px}
.page-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;padding:28px 0 8px;border-bottom:1px solid rgba(149,188,231,.18);margin-bottom:20px}
.kicker{font:500 14px/1 var(--label);letter-spacing:.34em;color:var(--sel-edge);text-transform:uppercase}
.page-head h1{margin:8px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.panel{background:var(--panel);padding:0 0 16px;margin-bottom:16px}
.panel>*:not(.panel-title){margin-left:18px;margin-right:18px}
.panel-title{margin:0 0 14px;padding:0 18px;height:44px;display:flex;align-items:center;justify-content:space-between;background:var(--header);
font:600 17px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
/* tables */
.tbl-wrap{overflow-x:auto;margin:1em 0;max-width:100%}
.panel .tbl-wrap{margin-left:0;margin-right:0}
table,.tbl{border-collapse:collapse;width:100%;font:400 16px/1.4 var(--display)}
th{font:500 13px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-align:left;padding:10px 12px;white-space:nowrap;background:var(--header)}
td{padding:9px 12px;vertical-align:top;background:var(--row);border-top:3px solid var(--ink)}
tr:hover td{background:var(--row-hover)}
/* controls */
.btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 20px;
background:var(--row);color:var(--text);font:500 16px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;transition:background .18s,transform .18s var(--ease)}
.btn:hover{background:var(--row-hover);text-decoration:none}
.btn:focus-visible{outline:2px solid var(--sel-edge);outline-offset:2px}
.btn.primary{background:linear-gradient(90deg,var(--sel),#34507a);box-shadow:inset 3px 0 0 var(--sel-edge)}
.btn.primary:hover{background:linear-gradient(90deg,#34507a,#3d5f90)}
.btn.danger{background:rgba(229,139,128,.25)} .btn.danger:hover{background:rgba(229,139,128,.4)}
.btn.ghost{background:none;box-shadow:inset 0 0 0 1px rgba(233,238,241,.35)}
.btn[disabled],.btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.field{display:block;width:100%;min-height:40px;padding:8px 12px;background:rgba(10,14,18,.7);color:var(--text);border:1px solid rgba(149,188,231,.28);border-radius:0;font:400 16px/1.3 var(--display)}
.field:focus{outline:2px solid var(--sel-edge);outline-offset:0;border-color:var(--sel-edge)}
.lbl{display:block;margin:12px 0 4px;font:500 13px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.row-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.row-form .field{flex:1 1 180px;width:auto}
.badge{display:inline-block;padding:3px 9px;background:rgba(150,160,158,.28);color:var(--text);font:500 12px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.badge.ok{background:rgba(143,203,155,.2);color:var(--ok)} .badge.warn{background:rgba(224,182,109,.2);color:var(--warn)}
.badge.bad{background:rgba(229,139,128,.2);color:var(--bad)} .badge.info{background:rgba(149,188,231,.2);color:var(--sel-edge)}
/* docs */
.prose{max-width:820px}
.prose h1{font-size:clamp(26px,4vw,36px)}
.prose li{margin:.25em 0}
.prose blockquote{margin:1em 0;padding:.2em 16px;border-left:2px solid var(--sel-edge);background:var(--panel);color:var(--dim)}
.prose .ext{color:var(--dim);border-bottom:1px dotted var(--faint);cursor:help}
.docs{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;max-width:1400px;margin:0 auto;padding:0 16px 64px}
.side{position:sticky;top:56px;align-self:start;max-height:calc(100vh - 70px);overflow-y:auto;padding:24px 0;font:500 15px/1.3 var(--label);letter-spacing:.04em}
.side a{display:block;padding:6px 10px;color:var(--dim);border-left:2px solid transparent}
.side a:hover{color:var(--text);text-decoration:none;background:var(--row)}
.side a.on{color:var(--text);border-left-color:var(--sel-edge);background:var(--row)}
.side .grp{margin:14px 10px 4px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
@media (max-width:820px){.docs{grid-template-columns:1fr;gap:0}.side{position:static;max-height:none;padding:12px 0;border-bottom:1px solid rgba(149,188,231,.18)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}