/* ============================================================
   Denison Seat Watch — "Bulletin"
   Flat editorial design. One accent. Hairline rules, no shadows,
   no gradients. Palette: indigo ink + terracotta on bone paper.
   Characterful serif headline (Fraunces) over a clean sans.
   ============================================================ */
:root{
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --bg:#f1ebdb;          /* warm cream paper */
  --surface:#faf4e6;
  --ink:#1b2a49;         /* deep navy ink */
  --muted:#5c6479;
  --line:#ddd4bf;
  --line-2:#cbc0a4;
  --accent:#c85a22;      /* orange */
  --accent-2:#e17d38;
  --accent-ink:#fbf5ea;
  --accent-soft:#f6e3cd;
  --info:#26406e;        /* blue, for "open seats" */
  --info-soft:#e2e6f0;
  --open:#26406e; --open-soft:#e2e6f0;
  --grain:.05;
  --rule:rgba(29,30,44,.035);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111520; --surface:#191e2c; --ink:#ece5d5; --muted:#93a0bb;
  --line:#262c3b; --line-2:#38405233; --line-2:#374052; --accent:#e6873f; --accent-2:#f0a262; --accent-ink:#111520;
  --accent-soft:#2b1e12; --info:#8fa6d6; --info-soft:#1b2438; --open:#8fa6d6; --open-soft:#1b2438;
  --grain:.08; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#111520; --surface:#191e2c; --ink:#ece5d5; --muted:#93a0bb;
  --line:#262c3b; --line-2:#374052; --accent:#e6873f; --accent-2:#f0a262; --accent-ink:#111520;
  --accent-soft:#2b1e12; --info:#8fa6d6; --info-soft:#1b2438; --open:#8fa6d6; --open-soft:#1b2438;
  --grain:.08; color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen}}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M-2 2L2 -2M0 22L22 0M20 24L24 20' stroke='%23808080' stroke-width='0.55'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.30}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.30}}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:2px}
.ic{width:1em;height:1em;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}
.mono{font-family:var(--mono);font-size:.86em}

.wrap{max-width:600px;margin:0 auto;padding:0 22px 0;min-height:100vh;display:flex;flex-direction:column}

/* header — quiet, a hairline underneath */
header{display:flex;align-items:center;gap:10px;padding:26px 0 12px;border-bottom:3px solid var(--ink);margin-bottom:40px;position:relative}
header::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--ink);opacity:.45}
.bm{width:22px;height:22px;flex:0 0 auto;color:var(--accent)}
.word{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.005em;color:var(--ink)}
.term{font-size:13px;color:var(--muted)}
.hctl{margin-left:auto;display:flex;align-items:center;gap:16px}
.live{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.live.on .dot{background:var(--accent);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live.on .dot{animation:none}}
.tgl{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:0}
.tgl:hover{color:var(--ink)}

/* headline */
h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,6.5vw,44px);line-height:1.08;letter-spacing:-.02em;margin:0 0 14px}
.sub{color:var(--muted);font-size:17px;margin:0 0 34px;max-width:46ch}

/* the single input */
.field{position:relative;margin-bottom:8px}
.field input{width:100%;padding:15px 16px;font:inherit;font-size:18px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:none;border-color:var(--accent)}
.hint{font-size:13px;color:var(--muted);min-height:20px;margin:8px 2px 0}

/* discovery */
.course{margin-top:22px}
.chd{display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.chd .cid{font-weight:650;font-size:15.5px}
.chd .ct{color:var(--muted);font-size:14px;flex:1}
.chd .any{font-size:13px;color:var(--accent);cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.chd .any:hover{text-decoration:underline}
.sect{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.sect .si{flex:1;min-width:0}
.sect .si .l1{font-size:14.5px}
.sect .si .l2{font-size:12.5px;color:var(--muted);margin-top:2px}
.state{font-size:12px;color:var(--muted);white-space:nowrap}
.state.open{color:var(--open);font-weight:600}

/* the one action: a clean text/outline control that fills on hover */
.watchbtn{font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:7px;padding:7px 13px;transition:.12s}
.watchbtn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.watchbtn[disabled]{border-color:var(--line-2);color:var(--muted);cursor:default;background:none}
.watchbtn{max-width:190px;line-height:1.25;text-align:center}
.seatlabel{font-size:13px;font-weight:700;white-space:nowrap;padding:8px 13px;border-radius:7px;
  background:var(--info-soft);color:var(--info);border:1px solid color-mix(in srgb,var(--info) 30%,transparent)}
.watchbtn.go{border-color:var(--open);color:var(--open)}
.watchbtn.go:hover{background:var(--open);color:var(--bg)}

/* watching list */
#regbox{background:var(--surface);border:1.5px solid var(--info);border-radius:14px;padding:14px 20px 6px;margin-top:34px}
.section-h{font-family:var(--serif);font-weight:600;font-size:19px;margin:2px 0 8px}
.section-h .n{color:var(--muted);font-weight:400;font-size:15px}
.perm{font-size:13px;color:var(--muted);margin:8px 0 16px}
.perm button{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.watch{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.watch:last-child{border-bottom:none}
.watch.open{border-left:3px solid var(--accent);padding-left:12px;margin-left:-20px;padding-right:2px}
.watch .wmain{flex:1;min-width:0}
.watch .wl{font-weight:600;font-size:15.5px}
.watch .wm{font-size:12.5px;color:var(--muted);margin-top:3px}
.watch.open .wm{color:var(--open)}
.openrow{margin-top:9px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.openrow .lbl{color:var(--open);font-weight:600;font-size:14px}
.reg{font-size:13px;font-weight:600;border:1px solid var(--accent);color:var(--accent-ink);background:var(--accent);
  border-radius:7px;padding:7px 13px}
.reg:hover{text-decoration:none;filter:brightness(1.06)}
.rm{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:13px;padding:4px}
.rm:hover{color:var(--accent)}
.empty{color:var(--muted);font-size:15px;padding:14px 0}

/* alert banner — the one place with a subtle lift */
#banner{position:fixed;left:50%;top:0;transform:translate(-50%,-130%);z-index:50;background:var(--accent);color:var(--accent-ink);
  border-radius:0 0 10px 10px;padding:14px 22px;font-weight:600;max-width:94vw;text-align:center;cursor:pointer;
  transition:transform .32s cubic-bezier(.2,1,.4,1)}
#banner.show{transform:translate(-50%,0)}

@media (max-width:540px){
  .wrap{padding:0 16px 110px}
  header{flex-wrap:wrap;gap:8px 12px;margin-bottom:30px}
  .term{order:3;flex-basis:100%}
  .hctl{margin-left:auto}
  h1{font-size:31px}
  .sect{flex-wrap:wrap;align-items:flex-start}
  .sect .si{flex-basis:100%}
  .sect .state{margin-left:0}
  .watchbtn{margin-left:auto;padding:9px 15px}
  .chd{flex-wrap:wrap}
  .watch{gap:10px}
  .reg{padding:9px 15px}
}
footer{margin-top:auto;padding:16px 0 26px;border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;letter-spacing:.01em;opacity:.75}

/* --- flavor + convenience touches --- */
.sect{transition:background .12s,border-color .12s;border-radius:8px;padding-left:12px;padding-right:8px}
.sect:hover{background:var(--surface)}
.cid{position:relative;padding-left:13px}
.cid::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--accent)}
.chd{align-items:center}
.l1{font-weight:650}
.crn,.l2 .mono{font-family:var(--mono)}
/* status dot before each control, so full vs open scans instantly */
.seatlabel::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--info);margin-right:8px;vertical-align:1px}
.watchbtn:not(.go)::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
.watchbtn:not(.go):hover::before{background:currentColor}
#results:not(:empty){background:var(--surface);border:1.5px solid var(--line-2);border-radius:14px;padding:8px 16px 14px;margin-top:16px}
#results .course:first-child{margin-top:8px}