/*
 * PerfectSetList — "Midnight Console" design system.
 * All values are the canonical tokens from DESIGN.md. Do not deviate without
 * updating DESIGN.md first (see CLAUDE.md).
 *
 * Fonts are loaded from Google Fonts for now; production self-hosts (DESIGN.md).
 */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;600;800&display=swap");

:root {
  --bg: #101418;
  --surface: #171C22;
  --raised: #1E242C;
  --hairline: #2A323C;
  --text: #E8EAED;
  --muted: #9AA3AD;
  --amber: #FFB454;
  --amber-deep: #E89A2E;
  --amber-wash: rgba(255, 180, 84, .07);
  --teal: #37C2A0;
  --red: #FF6B4A;

  --sans: "Instrument Sans", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --s2: 2px; --s4: 4px; --s8: 8px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px;
  --r-panel: 10px; --r-control: 8px; --r-chip: 5px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.serif-italic { font-family: var(--serif); font-style: italic; color: var(--muted); }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App shell ---- */
.shell-bar {
  display: flex; align-items: center; gap: var(--s24);
  padding: var(--s16) var(--s24);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.wordmark .accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--amber); }
.wordmark .glow { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 12px var(--amber); margin-right: 8px; vertical-align: 2px; }
.band-switch {
  font-family: var(--mono); font-size: 12px; padding: 6px 10px;
  background: var(--raised); color: var(--text); border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
.band-switch:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.shell-nav { display: flex; gap: var(--s16); margin-left: auto; align-items: center; }
.shell-nav a { color: var(--muted); font-weight: 600; font-size: 14px; }
.shell-nav a.active { color: var(--text); }
.shell-nav a:hover { color: var(--text); text-decoration: none; }
.shell-nav form { display: inline; }
.linkbtn { background: none; border: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.linkbtn:hover { color: var(--text); }

main { max-width: 1120px; margin: 0 auto; padding: var(--s32) var(--s24) 80px; }

/* ---- Headings ---- */
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
h1 .sub { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: var(--s32) 0 var(--s8); }

/* ---- Buttons ---- */
.btn { font-family: var(--sans); font-weight: 600; font-size: 14px; padding: 9px 18px;
  border-radius: var(--r-control); border: 1px solid transparent; cursor: pointer; display: inline-block; }
.btn-primary { background: var(--amber); color: #1A1205; }
.btn-primary:hover { background: var(--amber-deep); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--muted); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* ---- Panels & rows ---- */
.panel { background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); padding: var(--s24); }
.row { display: flex; align-items: baseline; gap: var(--s16); padding: 10px 12px; border-radius: 6px; }
.row:nth-child(odd) { background: var(--raised); }
.row .num { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 20px; text-align: right; }
.row .title { flex: 1; }
.row .dur { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.key { font-family: var(--mono); font-weight: 600; font-size: 11px; color: var(--amber);
  border: 1px solid var(--hairline); padding: 1px 7px; border-radius: var(--r-chip); }

/* staleness stamps (DESIGN.md) */
.stamp { font-family: var(--mono); font-size: 10px; }
.stamp.fresh { color: var(--muted); }
.stamp.stale { color: var(--amber); font-weight: 600; }
.stamp.due { color: var(--amber); font-weight: 700; }
.stamp.collision { color: var(--red); font-weight: 700; }

/* ---- Shows list ---- */
.show-next { border: 1px solid var(--amber); background: var(--amber-wash);
  border-radius: var(--r-panel); padding: 13px 16px; display: flex; gap: var(--s16); align-items: baseline; }
.year-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: var(--s16) 6px var(--s8); border-bottom: 1px solid var(--hairline); }
.badge { font-family: var(--mono); font-size: 10px; color: var(--amber); font-weight: 600; }

/* ---- Editor ---- */
.editor-head { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: var(--s16); margin-bottom: var(--s16); }
.clock { font-family: var(--mono); font-weight: 800; font-size: 14px; background: var(--raised);
  border: 1px solid var(--amber); color: var(--amber); padding: 6px 14px; border-radius: var(--r-control);
  box-shadow: 0 0 18px rgba(255,180,84,.15); }
.clock.over { border-color: var(--red); color: var(--red); box-shadow: 0 0 18px rgba(255,107,74,.15); }
.clock[aria-busy="true"] { opacity: .5; }
.set-block { margin-bottom: var(--s24); }
.set-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s8); }
.set-title { font-weight: 700; font-size: 16px; }
.drag { color: var(--muted); cursor: grab; font-size: 14px; touch-action: none; }
.move-btns { display: inline-flex; flex-direction: column; }
.move-btns button { background: none; border: 1px solid var(--hairline); color: var(--muted);
  width: 22px; height: 20px; line-height: 1; border-radius: 3px; cursor: pointer; font-size: 10px; }
.move-btns button:hover { border-color: var(--amber); color: var(--amber); }
.break-row { border: 1px dashed var(--hairline); background: var(--surface); text-align: center;
  color: var(--muted); font-family: var(--mono); font-size: 12px; padding: 8px; border-radius: 6px; margin: 4px 0; }
.sortable-ghost { opacity: .4; }
.library { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: var(--s16); }
.lib-row { display: flex; align-items: center; gap: var(--s8); padding: 7px 8px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.lib-row:last-child { border-bottom: none; }
.lib-row .add { font-family: var(--mono); font-size: 11px; color: var(--amber); border: 1px solid var(--hairline);
  border-radius: 3px; padding: 1px 6px; background: none; cursor: pointer; }
.lib-row .add:hover { border-color: var(--amber); }
.search { width: 100%; font-family: var(--sans); font-size: 14px; padding: 8px 10px;
  background: var(--raised); color: var(--text); border: 1px solid var(--hairline);
  border-radius: var(--r-control); margin-bottom: var(--s8); }
.search:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.editor-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s24); align-items: start; }
@media (max-width: 820px) { .editor-cols { grid-template-columns: 1fr; } }

/* ---- Forms / auth ---- */
.field { margin-bottom: var(--s16); }
.field label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.field input { font-family: var(--sans); font-size: 15px; padding: 9px 11px; width: 100%; max-width: 340px;
  background: var(--raised); color: var(--text); border: 1px solid var(--hairline); border-radius: var(--r-control); }
.field input:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.flash { border-radius: var(--r-control); padding: 9px 14px; margin-bottom: var(--s16); font-size: 14px; }
.flash.notice { background: rgba(55,194,160,.12); border: 1px solid rgba(55,194,160,.4); color: var(--teal); }
.flash.alert { background: rgba(255,107,74,.12); border: 1px solid rgba(255,107,74,.4); color: var(--red); }
.empty { text-align: center; padding: var(--s48) var(--s24); color: var(--muted); }
.empty .serif-italic { font-size: 18px; display: block; margin-bottom: var(--s16); }
.auth-wrap { max-width: 360px; margin: 80px auto; }
.copy-row { display: flex; gap: var(--s8); align-items: center; }
.copy-row .search { flex: 1; }