:root {
  color-scheme: light;
  --surface:#fcfcfb; --plane:#f9f9f7; --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --line:#e1e0d9; --ring:rgba(11,11,11,.10); --accent:#2a78d6;
  --ok:#0ca30c; --warn:#fab219; --bad:#d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark;
    --surface:#1a1a19; --plane:#0d0d0d; --ink:#fff; --ink-2:#c3c2b7; --muted:#898781;
    --line:#2c2c2a; --ring:rgba(255,255,255,.10); --accent:#3987e5; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--plane); color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
main { padding:24px; margin:0 auto; }
main.narrow { max-width:440px; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; }
main.wide { max-width:860px; }

header { border-bottom:1px solid var(--line); background:var(--surface); }
.bar { max-width:860px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:20px; }
.bar strong { letter-spacing:-.015em; }
.bar nav { display:flex; gap:16px; flex:1; }
.bar nav a { color:var(--ink-2); text-decoration:none; font-size:14px; padding:2px 0;
  border-bottom:2px solid transparent; }
.bar nav a.on { color:var(--ink); border-bottom-color:var(--ink); }
.bar nav a:hover { color:var(--ink); }
.out { display:flex; align-items:center; gap:10px; margin:0; }
.who { color:var(--muted); font-size:12.5px; }

h1 { font-size:24px; margin:0 0 4px; letter-spacing:-.015em; }
h2 { font-size:15px; margin:0 0 10px; }
h3 { font-size:13px; margin:22px 0 8px; color:var(--ink-2); text-transform:uppercase;
  letter-spacing:.06em; font-weight:600; }
.sub { color:var(--ink-2); font-size:14px; margin:0 0 22px; }
.muted { color:var(--muted); font-size:13.5px; }
.small { font-size:12.5px; }
code { font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--plane);
  border:1px solid var(--ring); border-radius:5px; padding:1px 5px; word-break:break-all; }
a { color:var(--accent); }

.card { background:var(--surface); border:1px solid var(--ring); border-radius:12px;
  padding:18px 20px; margin-bottom:14px; }
label { display:block; font-size:13px; color:var(--ink-2); margin:14px 0 0; }
label:first-of-type { margin-top:0; }
input, select, textarea { width:100%; margin-top:5px; font:inherit; padding:9px 11px;
  border-radius:8px; border:1px solid var(--ring); background:var(--plane); color:var(--ink); }
input:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
button, .btn { font:inherit; font-size:14px; padding:9px 16px; border-radius:8px; margin-top:16px;
  border:1px solid var(--ring); background:var(--surface); color:var(--ink); cursor:pointer;
  text-decoration:none; display:inline-block; }
button.primary { background:var(--ink); color:var(--plane); border-color:var(--ink); font-weight:550; }
button.ghost { font-size:13px; padding:6px 12px; margin-top:0; color:var(--ink-2); }
button.ghost:hover { color:var(--ink); border-color:var(--muted); }
button.danger { color:var(--bad); border-color:var(--ring); }
button:disabled { opacity:.45; cursor:not-allowed; }

.notice { border-radius:9px; padding:10px 13px; margin:0 0 14px; font-size:13.5px;
  border:1px solid var(--ring); background:var(--surface); }
.notice.ok { border-color:var(--ok); }
.notice.bad { border-color:var(--bad); }
.err { color:var(--bad); font-size:13px; margin:10px 0 0; }

.rows { border:1px solid var(--ring); border-radius:12px; overflow:hidden;
  background:var(--surface); }
.row { display:flex; align-items:center; gap:14px; padding:12px 16px;
  border-top:1px solid var(--line); }
.row:first-child { border-top:0; }
.row .grow { flex:1; min-width:0; }
.row .name { font-weight:550; }
.row .meta { color:var(--muted); font-size:12.5px; }
.row a.name { color:var(--ink); text-decoration:none; }
.row a.name:hover { text-decoration:underline; }
.empty { padding:22px 16px; color:var(--muted); font-size:13.5px; text-align:center; }

.tag { font-size:11.5px; padding:2px 7px; border-radius:20px; border:1px solid var(--ring);
  color:var(--ink-2); white-space:nowrap; }
.tag.live { border-color:var(--ok); color:var(--ok); }
.tag.draft { border-color:var(--warn); color:var(--warn); }
.tag.locked { border-color:var(--warn); color:var(--warn); }
.tag.ok { border-color:var(--ok); color:var(--ok); }
.tag.warn { border-color:var(--warn); color:var(--warn); }
.tag.muted, .tag.checking { color:var(--muted); }

/* The action line: what to do, not what is wrong. Indented under the status it
   belongs to and given room, because it is a sentence rather than a label. */
.meta.action { margin-top:5px; padding-left:10px; border-left:2px solid var(--warn);
  color:var(--ink-2); line-height:1.45; }

/* Upload: the dashed target is the affordance, and the whole card is the drop
   zone because a target you have to hit precisely is one people miss. */
.drop { border:1.5px dashed var(--ring); border-radius:12px; padding:26px 20px; text-align:center;
  color:var(--ink-2); background:var(--surface); transition:border-color .12s, background .12s; }
.drop.over { border-color:var(--accent); background:var(--plane); }
.drop input[type=file] { display:none; }
.queue { margin-top:12px; font-size:13px; }
.queue div { display:flex; gap:10px; padding:4px 0; border-top:1px solid var(--line); }
.queue div:first-child { border-top:0; }
.queue .ok { color:var(--ok); }
.queue .bad { color:var(--bad); }

.alt { text-align:center; margin-top:2px; }
[hidden] { display:none !important; }