/* learnbuildit — shared shell.
   Palette: drafting table. Ink, paper, wire blue for live, amber for done. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --ink:#16232E;
  --ink-soft:#5A6A75;
  --paper:#E6E9E1;
  --panel:#FBFBF8;
  --panel-2:#F1F3EC;
  --line:#CBD1C6;
  --line-soft:#DDE1D8;
  --signal:#2B54C6;
  --signal-soft:#E7ECFA;
  --amber:#C98A0B;
  --amber-soft:#F7EDD6;
  --rust:#97402A;
  --rust-soft:#F7E9E4;
  --green:#1F5A34;
  --green-soft:#E4F0E6;
  --display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --r:10px;
  /* aliases kept so the other pages' local styles keep working */
  --blue:var(--signal); --brass:var(--amber); --muted:var(--line); --red:var(--rust); --bg:var(--paper);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--body); background:var(--paper); color:var(--ink); font-size:15.5px; line-height:1.55; }
a { color:var(--signal); text-underline-offset:2px; }
button { font:inherit; cursor:pointer; color:inherit; }
button:disabled { opacity:.45; cursor:default; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline:2.5px solid var(--signal); outline-offset:2px; border-radius:4px;
}
input, textarea {
  font:inherit; background:var(--panel); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r); padding:11px 14px;
}
input::placeholder, textarea::placeholder { color:var(--ink-soft); }
input:focus, textarea:focus { border-color:var(--signal); }

h1,h2,h3 { font-family:var(--display); font-weight:700; letter-spacing:-.02em; margin:0; }
h1 { font-size:clamp(30px,4.4vw,42px); line-height:1.08; }
h2 { font-size:20px; margin-bottom:14px; }
.small { font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* buttons */
.btn {
  font-family:var(--display); font-weight:600; font-size:15px;
  border:1.5px solid var(--ink); background:var(--ink); color:var(--panel);
  border-radius:var(--r); padding:10px 20px;
}
.btn:hover { background:#0E1920; }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--ink); background:var(--panel-2); }
.btn.brass { background:var(--signal); border-color:var(--signal); color:#fff; }
.btn.brass:hover { background:#2246A8; border-color:#2246A8; }
.pill {
  font-family:var(--body); font-size:13.5px; font-weight:500;
  border:1.5px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:999px; padding:7px 14px;
}
.pill:hover:not(:disabled) { border-color:var(--signal); color:var(--signal); }

/* messages */
.err { font-size:13.5px; color:var(--rust); background:var(--rust-soft); padding:9px 13px; border-radius:var(--r); border-left:3px solid var(--rust); }
.ok  { font-size:13.5px; color:var(--green); background:var(--green-soft); padding:9px 13px; border-radius:var(--r); border-left:3px solid var(--green); }

/* shell */
.topbar {
  display:flex; align-items:center; gap:14px;
  padding:16px 22px; max-width:1180px; margin:0 auto;
}
.topbar .brand {
  font-family:var(--display); font-weight:700; font-size:19px;
  letter-spacing:-.03em; text-decoration:none; color:var(--ink);
}
.topbar .spacer { flex:1; }
.credits {
  font-size:13.5px; font-weight:500; color:var(--ink);
  background:var(--amber-soft); border:1.5px solid #E8D5A8;
  border-radius:999px; padding:5px 13px; white-space:nowrap;
}
.wrap { max-width:1180px; margin:0 auto; padding:0 22px 48px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; }

table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 6px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
th { font-weight:600; color:var(--ink-soft); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }