/* site.css · the website look for the Listening Room (2026-10-15).
   Same world as the Claude room: the eclipse loop, the sigil, black, bone and blood red. What changes is readability
   (imani, 2026-10-11: pixel type on outline buttons slows him down): Inter for every control and label, solid buttons,
   quiet dark surfaces instead of white outlines, red for what's playing and what's picked. Silkscreen stays on his name only.
   build.py has already taken the all-caps and wide tracking out of the room's own stylesheet. */

:root{
  --f-px:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-logo:"Silkscreen","Courier New",monospace;
  --bone:#f2ede4;
  --ink:#f2ede4;
  --ink-2:rgba(242,237,228,.84);
  --ink-3:rgba(242,237,228,.64);
  --ink-4:rgba(242,237,228,.5);
  --line:#f2ede4;
  --line-dim:rgba(242,237,228,.14);
  --fill-dim:rgba(242,237,228,.06);
  --card:rgba(9,9,9,.84);
  --s1:#121212;        /* raised control */
  --s2:#1b1b1b;        /* button */
  --s3:#262626;        /* button hover */
  --edge:rgba(242,237,228,.1);
  --edge-2:rgba(242,237,228,.2);
  --red:#e3311d;
  --red-ink:#ff6a55;
  --glow:0 0 18px rgba(242,237,228,.18);
  --lift:0 22px 50px -26px rgba(0,0,0,.95),0 2px 6px -2px rgba(0,0,0,.6);
  --r:18px;
}
html,body{background:#000;color:var(--ink);}
body{font-family:var(--f-px);font-size:15px;line-height:1.5;font-feature-settings:"cv11","ss01";-webkit-text-size-adjust:100%;}
::selection{background:var(--red);color:#fff;}
:focus-visible{outline:2px solid var(--red-ink);outline-offset:3px;}
html{scrollbar-color:#2a2a2a #000;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#000;}
::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px;border:2px solid #000;}
input,textarea,select{caret-color:var(--red);}

/* surfaces: dark glass over the eclipse, no white outlines */
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--lift);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);}
.song.is-playing{box-shadow:0 0 0 1px rgba(227,49,29,.75),0 24px 60px -24px rgba(198,28,20,.55),var(--lift);border-color:transparent;}

/* the header: his name is the one place the pixel font lives */
.head{gap:8px;padding:30px 20px 26px;}
.sigil{border-radius:14px;}
.name{font-family:var(--f-logo);letter-spacing:.06em;text-transform:uppercase;}
.sub{font-weight:600;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);margin-top:2px;}
.who{font-size:14px;color:var(--ink-3);max-width:42ch;}

/* type */
h2,h3,h4{font-weight:650;letter-spacing:-.01em;}
h2{font-size:19px;}
.title{font-weight:650;font-size:18px;line-height:1.25;letter-spacing:-.012em;}
.btitle,.btitle2{font-weight:600;letter-spacing:-.01em;}
.dinfo .dt{font-weight:600;letter-spacing:-.005em;}
.prod{font-size:13px;}
.hint,.status,.sent{font-size:14px;}
.bar,.dprog{font-variant-numeric:tabular-nums;}
.cat .nm{font-weight:600;font-size:15px;}
.cat .nm small{font-size:13px;}
.cat output{font-weight:700;font-variant-numeric:tabular-nums;}
.big .n,.brank,.rstat b{font-weight:700;letter-spacing:-.02em;text-shadow:none;font-variant-numeric:tabular-nums;}
.badge{font-weight:600;padding:3px 9px;}
.lbl,.field > span:first-child{font-weight:600;color:var(--ink-3);}
.count{font-weight:500;}
.foot{font-weight:500;color:var(--ink-4);}

/* buttons: solid, every one */
.btn{border:1px solid var(--edge-2);background:var(--s2);color:var(--ink);font-weight:600;font-size:15px;min-height:46px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.btn:hover{background:var(--s3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.btn.pri{background:var(--bone);border-color:var(--bone);color:#0a0a0a;}
.btn.pri:hover{background:#fff;border-color:#fff;box-shadow:0 8px 24px -10px rgba(242,237,228,.45);}
.btn.ghost{background:var(--s1);border-color:var(--edge);color:var(--ink-2);}
.btn.ghost:hover{background:var(--s2);border-color:var(--edge-2);color:var(--ink);}
.btn.danger{background:rgba(227,49,29,.14);border-color:rgba(227,49,29,.7);color:var(--red-ink);}
.btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 10px 26px -10px rgba(198,28,20,.8);}
.btn[disabled]{opacity:.45;}
.btn svg{shape-rendering:auto;}
.btn.big{min-height:56px;font-size:16px;font-weight:650;}
#openUpload{background:var(--bone);border-color:var(--bone);color:#0a0a0a;}
#openUpload:hover{background:#fff;}
.link{font-weight:500;font-size:14px;color:var(--ink-3);text-decoration-color:rgba(242,237,228,.3);}
.link:hover{color:var(--ink);text-decoration-color:var(--ink);}
.ibtn{border:1px solid var(--edge);background:var(--s1);color:var(--ink-2);}
.ibtn:hover{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 22px -8px rgba(198,28,20,.8);}
.ibtn.armed{font-weight:600;}
.pp i{background:rgba(10,10,10,.72);border:1px solid rgba(242,237,228,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.cover-btn{border-radius:12px;}

/* tabs and day chips: solid, the picked one in bone */
.vtab{border:1px solid var(--edge);background:rgba(14,14,14,.92);border-radius:16px;}
.vtab:hover{border-color:var(--edge-2);background:var(--s2);}
.vtab .d{font-weight:650;font-size:16px;}
.vtab .c{font-size:13px;}
.vtab[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:#0a0a0a;box-shadow:0 10px 30px -14px rgba(242,237,228,.5);}

/* fields */
.field input,textarea,.ppl input,.ppl select{background:#0b0b0b;border:1px solid var(--edge-2);border-radius:12px;font-size:16px;color:var(--ink);}
.field input:focus,textarea:focus{border-color:var(--bone);box-shadow:0 0 0 3px rgba(242,237,228,.12);}
.drop{border:1.5px dashed var(--edge-2);background:rgba(242,237,228,.025);border-radius:14px;}
.drop.over{border-color:var(--bone);background:var(--fill-dim);}
.switch .track{border:1px solid var(--edge-2);background:var(--s2);}
.switch input:checked+.track{box-shadow:0 0 18px -2px rgba(198,28,20,.7);}
.switch .txt{font-weight:600;}

/* rating */
.blk{border:1px solid var(--edge);background:var(--s1);color:var(--ink-3);border-radius:6px;font-weight:600;}
.blk:hover{border-color:var(--edge-2);background:var(--s2);color:var(--ink);}
.blk.on{background:var(--bone);border-color:var(--bone);color:#0a0a0a;}
.blk.cap{box-shadow:0 6px 18px -6px rgba(242,237,228,.6);}
.cat.overall{border:1px solid var(--edge-2);background:rgba(242,237,228,.03);border-radius:16px;}
.cat.overall .blk.cap{box-shadow:0 8px 22px -8px rgba(198,28,20,.9);}
.vbtn{border:1px solid var(--edge);background:var(--s1);border-radius:14px;}
.vbtn:hover{border-color:var(--edge-2);background:var(--s2);}
.vbtn .vt{font-weight:650;font-size:16px;}
.vbtn small{font-size:13px;}
.vchip{border:1px solid var(--edge);background:var(--s1);font-weight:600;font-size:14px;}
.vchip:hover{border-color:var(--edge-2);background:var(--s2);}
.vchip[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:#0a0a0a;box-shadow:none;}
.cbtn{border:1px solid var(--edge);border-radius:12px;}
.cbtn[aria-pressed="true"]{border-color:var(--bone);box-shadow:0 10px 26px -12px rgba(242,237,228,.5);}
.cbtn span{font-weight:600;}

/* takes, stats, owner tools */
.take{border:1px solid var(--edge);background:rgba(18,18,18,.7);border-radius:14px;}
.take.cur{border-color:var(--edge-2);}
.take .top .ov{font-weight:700;}
.big{border:1px solid var(--edge-2);border-radius:16px;background:rgba(242,237,228,.03);}
.avg .m,.split .m{border:0;background:rgba(242,237,228,.1);border-radius:999px;}
.avg .m i{background:var(--bone);border-radius:999px;}
.confirm{border:1px solid rgba(227,49,29,.7);background:rgba(227,49,29,.07);border-radius:14px;}
details.self{border:1px solid var(--edge);background:rgba(18,18,18,.6);border-radius:14px;}
details.self[open]{border-color:var(--edge-2);}
details.self summary{font-weight:600;}
.verb{border:1px solid var(--edge);background:var(--s1);font-weight:600;}
.mtime{font-weight:600;}
.rsong{border:1px solid var(--edge);background:var(--s1);}
.focusbar{border-color:rgba(227,49,29,.7);}

/* the dock and the toast */
.dinner{background:rgba(10,10,10,.9);border:1px solid var(--edge-2);border-radius:20px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);}
.dplay{border:0;background:var(--bone);color:#0a0a0a;box-shadow:0 8px 24px -8px rgba(242,237,228,.5);}
.toast{border:1px solid var(--edge-2);border-radius:14px;background:rgba(14,14,14,.96);box-shadow:var(--lift);font-weight:500;}
.toast.bad{border-color:rgba(227,49,29,.8);}
.toast .tact{border:0;background:var(--bone);color:#0a0a0a;font-weight:650;font-size:14px;}

/* day chips */
.chip{border:1px solid var(--edge);background:rgba(14,14,14,.92);border-radius:14px;}
.chip:hover{border-color:var(--edge-2);background:var(--s2);}
.chip .d{font-weight:600;font-size:14px;}
.chip .c{font-size:12.5px;}
.chip[aria-pressed="true"]{background:var(--bone);border-color:var(--bone);color:#0a0a0a;box-shadow:none;}
.chip.newchip:not([aria-pressed="true"]){border-color:rgba(227,49,29,.75);box-shadow:0 8px 22px -12px rgba(198,28,20,.8);}
.days{background:linear-gradient(180deg,rgba(0,0,0,.92) 0,rgba(0,0,0,.92) 72%,rgba(0,0,0,0) 100%);}
.dayhead h3,.dcard h3,.parts h3,.rpeople h3,.rfeedcard h3{text-shadow:none;font-weight:650;}
.dayhead h3{font-size:18px;}

/* the five choices: bone when picked, blood red edge on "keep as is" */
.vbtn[aria-pressed="true"][data-v="finish"],.vbtn[aria-pressed="true"][data-v="perfect"]{background:var(--bone);color:#0a0a0a;}
.vbtn[aria-pressed="true"][data-v="finish"]{border-color:var(--bone);box-shadow:none;}
.vbtn[aria-pressed="true"][data-v="redraft"]{border-color:var(--bone);background:rgba(242,237,228,.12);}
.vbtn[aria-pressed="true"][data-v="vault"]{border-color:var(--bone);background:rgba(242,237,228,.05);}
.dcard.finish{border-color:var(--edge-2);box-shadow:var(--lift);}
.drow2:hover{border-color:var(--edge);background:rgba(242,237,228,.05);}

.bigcover .frame{border:1px solid var(--edge-2);border-radius:16px;box-shadow:0 30px 60px -28px rgba(0,0,0,.95);}
.thumb{border:1px solid var(--edge-2);border-radius:10px;}

/* the guest list card */
.help{padding:22px;}

@media (max-width:520px){
  .room{padding-inline:12px;gap:14px;}
  .card{border-radius:16px;}
  .head{padding:24px 16px 20px;}
  .title{font-size:17px;}
  .btn.big{min-height:52px;font-size:15px;}
}
@media (prefers-reduced-motion:reduce){
  .card,.dinner{-webkit-backdrop-filter:none;backdrop-filter:none;}
}