/* Dread List. One loud thing: the camcorder-counter match numbers down the left edge. Everything else is
   quiet: fluorescent-cream text on a sodium-dark base (or Backrooms wallpaper in light), hairline rules, no cards. */

@font-face{font-family:"VT323"; src:url("fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight:500; font-display:swap}
@font-face{font-family:"IBM Plex Sans"; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); font-weight:600; font-display:swap}
@font-face{font-family:"IBM Plex Mono"; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight:400; font-display:swap}

:root{
  --bg:#12110C; --panel:#1B1A12; --sunk:#0D0C08; --ink:#EFE6B8; --muted:#9E9671; --faint:#6E684C; --rule:#2F2D1F;
  --hi:#E9D66B; --hi-ink:#14130C; --rec:#FF4433; --good:#B9C97A;
  --g-L:#9FB06A; --g-M:#E2A646; --g-H:#FF7A5C; --g-X:#FF4433;
  --f-osd:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#E9E0AF; --panel:#F2ECCB; --sunk:#DED4A0; --ink:#1F1D0F; --muted:#5F5835; --faint:#8A8257; --rule:#C6BB87;
    --hi:#1F1D0F; --hi-ink:#F2ECCB; --rec:#BF2617; --good:#4C5E1F;
    --g-L:#4F5B27; --g-M:#8A5300; --g-H:#A3301B; --g-X:#BF2617;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#E9E0AF; --panel:#F2ECCB; --sunk:#DED4A0; --ink:#1F1D0F; --muted:#5F5835; --faint:#8A8257; --rule:#C6BB87;
  --hi:#1F1D0F; --hi-ink:#F2ECCB; --rec:#BF2617; --good:#4C5E1F;
  --g-L:#4F5B27; --g-M:#8A5300; --g-H:#A3301B; --g-X:#BF2617;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:72px}
body{margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.5 var(--f-body); font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
a{color:inherit}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--hi); outline-offset:2px}
.skip{position:absolute; left:-999px; top:8px; background:var(--hi); color:var(--hi-ink); padding:8px 12px; z-index:50}
.skip:focus{left:8px}

/* Header */
.top{position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:1px solid var(--rule); padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1180px; margin:0 auto; padding:10px max(16px, env(safe-area-inset-right,0px)) 0 max(16px, env(safe-area-inset-left,0px)); display:flex; align-items:center; gap:8px 22px; flex-wrap:wrap}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-osd); font-size:34px; line-height:1; padding-bottom:10px; letter-spacing:.02em}
.rec{display:block; width:11px; height:11px; border-radius:50%; background:var(--rec)}
.tonight .rec{animation:blink 1.6s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.tabs{display:flex; gap:2px; flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{text-decoration:none; padding:8px 10px 12px; color:var(--muted); white-space:nowrap; border-bottom:2px solid transparent; font-weight:500}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--hi)}
.tabs .n{font-weight:400; color:var(--faint); margin-left:2px}
.gear{position:relative; background:none; border:0; padding:6px; margin:0 0 8px; color:var(--muted); line-height:0}
.gear svg{width:22px; height:22px; fill:currentColor}
.gear:hover{color:var(--ink)}
.gear .dot{position:absolute; right:3px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--faint); border:2px solid var(--bg)}
.gear .dot.on{background:var(--good)} .gear .dot.busy{background:var(--g-M)} .gear .dot.err{background:var(--rec)}
.who{background:none; border:1px solid var(--rule); border-radius:3px; padding:5px 10px; margin:0 0 8px; font-size:13px; color:var(--ink); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who:hover{border-color:var(--ink)}
.who.on{color:var(--muted); font-family:var(--f-mono); font-size:12px}
@media (max-width:620px){ .top-in{column-gap:10px} .brand{font-size:28px} .tabs{order:3; flex-basis:100%; margin:0 -6px} .who{margin-left:auto; max-width:132px; padding:5px 8px} .gear{margin-left:0} }

main{max-width:1180px; margin:0 auto; padding:0 max(16px, env(safe-area-inset-right,0px)) 40px max(16px, env(safe-area-inset-left,0px))}
.boot{color:var(--muted); padding:40px 0}
h2{font:600 15px/1.3 var(--f-body); margin:0}
.sub{color:var(--muted); font-size:13px; margin:2px 0 0}

/* Tonight */
.tonight{margin:20px 0 6px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 18px; align-items:start; padding:16px; background:var(--panel); border:1px solid var(--rule); border-radius:4px}
.tonight .lab{grid-column:1 / -1; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tonight .lab h2{display:flex; align-items:center; gap:8px}
.tonight .lab .rec{width:9px; height:9px}
.tonight .roll{margin-left:auto}
.tonight img{width:92px; height:138px; object-fit:cover; border-radius:2px; background:var(--sunk); display:block}
.tonight .tt{font-size:22px; font-weight:600; line-height:1.2; margin:0}
.tonight .tt button{all:unset; cursor:pointer; border-bottom:1px solid var(--rule)}
.tonight .tt button:hover{border-bottom-color:var(--ink)}
.tonight .tt button:focus-visible{outline:2px solid var(--hi); outline-offset:2px}
.tonight .big{font-family:var(--f-osd); font-size:46px; line-height:.9; color:var(--hi); margin-right:4px}
.tonight .meta{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; margin:6px 0}
.tonight p{margin:6px 0; max-width:70ch}
.tonight .acts{margin-top:10px}
.tonight .none{grid-column:1 / -1; color:var(--muted); margin:0}

/* Strips */
.strips{display:grid; gap:18px; margin:22px 0 4px}
@media (min-width:900px){ .strips{grid-template-columns:1fr 1fr} }
.strip ol{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:2px}
.strip li button{all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:34px 28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:5px 6px; border-radius:3px}
.strip li button:hover{background:var(--panel)}
.strip li button:focus-visible{outline:2px solid var(--hi); outline-offset:0}
.strip img{width:28px; height:42px; object-fit:cover; border-radius:2px; background:var(--sunk)}
.strip .mm{font-family:var(--f-osd); font-size:24px; line-height:1; text-align:right}
.strip .st{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.strip .st small{color:var(--muted); font-size:12px; margin-left:6px}
.strip .when{font-size:12px; color:var(--muted); white-space:nowrap}
.strip .when.soon{color:var(--g-H)}
.strip .empty{color:var(--muted); font-size:13px; padding:6px 0}

/* Filter bar */
.bar{position:sticky; top:var(--top-h, 58px); z-index:10; background:var(--bg); margin-top:22px; padding:10px 0; border-bottom:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.bar .search{flex:1 1 260px; min-width:0; position:relative}
.bar .dirbox{flex:0 1 240px; min-width:0}
.bar input[type="search"], .rated-head input[type="search"]{width:100%; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--panel); font-size:14px}
.bar input[type="search"]::placeholder, .rated-head input[type="search"]::placeholder{color:var(--faint)}
.bar .dirbox input[type="search"]:not(:placeholder-shown){border-color:var(--hi)}
.svcrow{flex-basis:100%; gap:6px !important}
.svcrow .lbl{font-size:12px; color:var(--muted); margin-right:2px}
.chip{display:inline-flex; align-items:baseline; gap:6px; background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:5px 9px; font-size:13px; color:var(--muted); white-space:nowrap}
.chip:hover{color:var(--ink); border-color:var(--faint)}
.chip .c{font-size:11px; color:var(--faint)}
.chip .c:empty{display:none}
.chip[aria-pressed="true"]{background:var(--hi); color:var(--hi-ink); border-color:var(--hi)}
.chip[aria-pressed="true"] .c{color:inherit; opacity:.75}
.chip.rm b{font-weight:400}
#svcMore{width:96px; padding:5px 6px; color:var(--muted)}
.bar .grp{display:flex; align-items:center; gap:6px}
.bar .grp > span{font-size:12px; color:var(--muted)}
.bar select, .rated-head select{padding:6px 8px; border:1px solid var(--rule); border-radius:3px; background:var(--panel); font-size:13px}
.bar .count{flex-basis:100%; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden}
.seg button{background:var(--panel); border:0; border-right:1px solid var(--rule); padding:6px 9px; font-size:13px; color:var(--muted); white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--hi); color:var(--hi-ink)}
.chipx{display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 9px; border:1px solid var(--hi); border-radius:3px; font-size:12px; color:var(--ink); background:none}
.chipx b{font-weight:400; color:var(--muted)}
.chipx.more-x{border-style:dashed; border-color:var(--faint); padding-right:9px; color:var(--muted)}
.chipx.more-x:hover{color:var(--ink); border-color:var(--ink)}
.filters{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.bar .grp label span{font-size:12px; color:var(--muted)}
@media (max-width:620px){
  .bar{position:static}
  .bar .search, .bar .dirbox{flex-basis:100%}
  .filters{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px}
  .filters::-webkit-scrollbar{display:none}
  .filters .grp{flex:none}
}

/* Film rows */
.list{margin-top:4px}
.film{position:relative; display:grid; grid-template-columns:62px 46px minmax(0,1fr); gap:4px 14px; padding:12px 8px 12px 0; border-bottom:1px solid var(--rule)}
.film:focus{outline:none}
.film.is-focus{background:var(--panel); box-shadow:inset 2px 0 0 var(--hi)}
.film .m{grid-row:1 / span 2; text-align:right; font-family:var(--f-osd); line-height:.85; padding-top:2px}
.film .m b{font-weight:400; font-size:38px; color:var(--ink)}
.film .m b.hot{color:var(--hi)} .film .m b.cool{color:var(--faint)}
.film .m small{font-size:16px; color:var(--muted); vertical-align:top; margin-left:1px}
.film .m.sc small{font-size:14px; margin-left:0}
.film .m.s-hi b{color:var(--hi)} .film .m.s-good b{color:var(--good)} .film .m.s-mid b{color:var(--g-M)} .film .m.s-low b{color:var(--rec)}
.film .pst{grid-row:1 / span 2; width:46px; height:69px; object-fit:cover; border-radius:2px; background:var(--sunk); display:block}
.film .pst.blank{display:grid; place-items:center; font-family:var(--f-osd); font-size:20px; color:var(--faint)}
.film .main{min-width:0}
.film h3{margin:0; font-size:17px; font-weight:600; line-height:1.3}
.film h3 .ttl{all:unset; cursor:pointer; border-bottom:1px solid var(--rule)}
.film h3 .ttl:hover{border-bottom-color:var(--ink)}
.film h3 .ttl:focus-visible{outline:2px solid var(--hi); outline-offset:2px}
.yr{font-weight:400; font-size:14px; color:var(--muted); margin-left:6px}
.by{font-weight:400; font-size:13px; color:var(--muted); margin-left:8px}
.dirlink{all:unset; cursor:pointer; border-bottom:1px dotted var(--faint)}
.dirlink:hover{color:var(--ink); border-bottom-color:var(--ink)}
.dirlink[aria-pressed="true"]{color:var(--hi); border-bottom:1px solid var(--hi)}
.dirlink:focus-visible{outline:2px solid var(--hi); outline-offset:2px}
.badge{display:inline-block; vertical-align:2px; margin-left:8px; font:500 11px/1 var(--f-body); padding:4px 6px; border-radius:2px; border:1px solid var(--rule); color:var(--muted)}
.badge.pick{background:var(--hi); color:var(--hi-ink); border-color:var(--hi)}
.badge.new{border-color:var(--good); color:var(--good)}
.badge.leave{border-color:var(--g-H); color:var(--g-H)}
.badge.wild{border-style:dashed; color:var(--ink)}
.pitch{margin:4px 0 6px; max-width:72ch; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.film.open .pitch{-webkit-line-clamp:unset; display:block}
.meta2{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px}
.meta2 .facts{margin-left:auto}
.why{margin:0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--muted)}
.why .p::before{content:"+ "; color:var(--good)}
.why .n{color:var(--g-H)}
.why .n::before{content:"− "}
.why .f{color:var(--rec)}
.why .f::before{content:"! "}
.side{grid-column:3; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px}
.wbox{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.alt{font-size:12px; color:var(--muted)}
.watch{display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:13px; font-weight:500; padding:6px 10px; border-radius:3px; border:1px solid var(--rule); white-space:nowrap}
.watch.mine{background:var(--hi); color:var(--hi-ink); border-color:var(--hi)}
.watch.free{border-color:var(--good); color:var(--good)}
.watch.rent, .watch.other{color:var(--muted)}
.watch.none{color:var(--faint); border-style:dashed}
a.watch:hover{filter:brightness(1.08); border-color:var(--ink)}
.facts{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:13px; color:var(--muted)}
.facts b{font-weight:500; color:var(--ink)}
.facts .lang{color:var(--ink); border:1px solid var(--rule); border-radius:2px; padding:0 5px; font-size:12px; line-height:18px}
.gore{font-weight:500}
.g-L{color:var(--g-L)} .g-M{color:var(--g-M)} .g-H{color:var(--g-H)} .g-X{color:var(--g-X)} .g-U{color:var(--muted)}
.acts{display:flex; flex-wrap:wrap; gap:6px; margin-left:auto}
.act{background:none; border:1px solid var(--rule); border-radius:3px; padding:6px 10px; font-size:13px; color:var(--ink); min-height:34px}
.act:hover{border-color:var(--ink)}
.act[aria-pressed="true"]{background:var(--hi); color:var(--hi-ink); border-color:var(--hi)}
.act.quiet{color:var(--muted)}
/* Score meter: ten cells that fill to your score in its colour; hovering previews a score and its word. */
.rate10{display:inline-flex; flex-direction:column; align-items:flex-end; gap:3px; --fill:var(--hi)}
.rate10.s-low{--fill:var(--rec)} .rate10.s-mid{--fill:var(--g-M)} .rate10.s-good{--fill:var(--good)} .rate10.s-hi{--fill:var(--hi)}
.rate10 .cells{display:inline-flex; border:1px solid var(--rule); border-radius:3px}
.rate10 .cells button{background:none; border:0; border-right:1px solid var(--rule); width:23px; min-height:32px; padding:0; font:400 12px/1 var(--f-mono); color:var(--muted)}
.rate10 .cells button:last-child{border-right:0}
.rate10 .cells button.on{background:color-mix(in srgb, var(--fill) 26%, transparent); color:var(--ink)}
.rate10 .cells button[aria-pressed="true"]{background:var(--fill); color:var(--hi-ink); font-weight:600}
.rate10 .cells:hover button.on, .rate10 .cells:hover button[aria-pressed="true"]{background:none; color:var(--muted); font-weight:400}
.rate10 .cells:hover button:hover, .rate10 .cells:hover button:has(~ button:hover){background:var(--sunk); color:var(--ink); box-shadow:inset 0 -3px 0 var(--hi)}
.rate10 .rfoot{display:flex; align-items:baseline; justify-content:flex-end; gap:12px}
.rate10 .rword{font-size:11px; line-height:14px; color:var(--muted); white-space:nowrap}
.rate10 .clear{font-size:11px; line-height:14px; padding:0}
.film.done .watch.mine{background:none; color:var(--hi); border-color:var(--rule)}
.film.done .watch.mine:hover{border-color:var(--hi)}
@media (min-width:880px){
  .film{grid-template-columns:62px 46px minmax(0,1fr) 270px; padding-right:8px}
  .side{grid-column:4; grid-row:1 / span 2; flex-direction:column; align-items:flex-end; margin-top:0; gap:8px}
  .wbox{justify-content:flex-end}
  .acts{margin-left:0; justify-content:flex-end}
}
@media (max-width:520px){
  .film{grid-template-columns:46px 40px minmax(0,1fr); gap:4px 10px}
  .film .m b{font-size:30px}
  .film .m small{font-size:13px}
  .film .m.sc small{display:block; font-size:11px; margin-top:2px}
  .meta2 .facts{margin-left:0}
  .film .pst{width:40px; height:60px}
  .side{grid-column:1 / -1}
  .acts{margin-left:0; width:100%}
  .acts .act{flex:1 1 auto}
  .acts .rate10{flex:1 1 100%; align-items:stretch}
  .rate10 .cells{width:100%}
  .rate10 .cells button{flex:1 1 0; width:auto; min-height:38px}
  .rate10 .rfoot{justify-content:space-between; flex-direction:row-reverse}
}

/* Details */
.detail{grid-column:3 / -1; margin-top:12px; padding-top:12px; border-top:1px dashed var(--rule); display:grid; gap:14px; font-size:14px}
@media (min-width:880px){ .detail{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px 32px} }
@media (max-width:520px){ .detail{grid-column:1 / -1} }
.detail h4{margin:14px 0 6px; font-size:12px; font-weight:500; color:var(--muted)}
.detail > div > h4:first-child{margin-top:0}
.detail p{margin:0 0 8px; max-width:72ch}
.detail dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; margin:0}
.detail dt{color:var(--muted)} .detail dd{margin:0}
.detail dd small{color:var(--muted)}
.detail dd b{font-weight:600} .detail dd b.s-hi{color:var(--hi)} .detail dd b.s-good{color:var(--good)} .detail dd b.s-mid{color:var(--g-M)} .detail dd b.s-low{color:var(--rec)}
.detail dd .tag{margin:0 4px 2px 0}
.offers{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.offers li{display:flex; gap:10px; justify-content:space-between; align-items:baseline}
.offers a{text-decoration:none; border-bottom:1px solid var(--rule)}
.offers a:hover{border-bottom-color:var(--ink)}
.offers .own{color:var(--hi); font-weight:500}
.offers small{color:var(--muted)}
.tagrow{display:flex; flex-wrap:wrap; gap:6px}
.tag{background:none; border:1px solid var(--rule); border-radius:2px; padding:2px 7px; font-size:12px; color:var(--ink)}
.tag:hover{border-color:var(--ink)}
.tag.auto{color:var(--muted); border-style:dashed}
.tag.pos{border-color:var(--good)} .tag.neg{border-color:var(--g-H)}
.links{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px}
.links a{color:var(--muted)} .links a:hover{color:var(--ink)}
.calc{font-size:13px; color:var(--muted); display:grid; grid-template-columns:auto auto; justify-content:start; gap:2px 14px}
.calc b{font-weight:500; color:var(--ink); text-align:right}
.simrow{display:flex; flex-wrap:wrap; gap:6px}
.simrow button{background:none; border:1px solid var(--rule); border-radius:2px; padding:3px 8px; font-size:12px}
.simrow button:hover{border-color:var(--ink)}
.simrow .r{color:var(--hi)}

.more{display:block; margin:18px auto 0; background:none; border:1px solid var(--rule); border-radius:3px; padding:9px 16px; color:var(--ink)}
.more:hover{border-color:var(--ink)}
.empty{color:var(--muted); padding:28px 0; max-width:60ch}
.sect{margin:26px 0 0; padding-bottom:6px; border-bottom:2px solid var(--ink); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sect span{font-size:13px; color:var(--muted)}

/* Rated */
.rated-head{margin:22px 0 6px; padding-bottom:10px; border-bottom:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:12px 18px; align-items:flex-end}
.rated-head .search{flex:1 1 240px; min-width:0}
.rated-head .grp{display:flex; align-items:center; gap:6px}
.rated-head .grp span{font-size:12px; color:var(--muted)}
.rated-head .count{flex-basis:100%; margin:0; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 14px}
.rated-head .count .sub{margin:0; font-size:12px}
.hist{display:flex; align-items:flex-end; gap:3px}
.hist .col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; width:26px; height:86px; padding:0; background:none; border:0; color:var(--muted); --c:var(--hi)}
.hist .col.s-low{--c:var(--rec)} .hist .col.s-mid{--c:var(--g-M)} .hist .col.s-good{--c:var(--good)} .hist .col.s-hi{--c:var(--hi)}
.hist .col i{display:block; width:100%; height:calc(var(--h, 0) * 48px + 2px); background:var(--c); opacity:.5; border-radius:1px}
.hist .col em{font-style:normal; font-size:11px; line-height:13px; min-height:13px; color:var(--faint)}
.hist .col span{font:400 19px/1 var(--f-osd); color:var(--muted)}
.hist .col:hover:not([disabled]) i{opacity:.8}
.hist .col[aria-pressed="true"] i{opacity:1}
.hist .col[aria-pressed="true"] span, .hist .col[aria-pressed="true"] em{color:var(--ink)}
.hist .col[disabled]{cursor:default}
.hist .col[disabled] i{opacity:.18}
.hist .all{background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:6px 9px; font-size:13px; color:var(--muted); margin:0 6px}
.hist .all:first-child{margin-left:0}
.hist .all span{color:var(--faint); margin-left:5px}
.hist .all:hover{color:var(--ink)}
.hist .all[aria-pressed="true"]{background:var(--hi); color:var(--hi-ink); border-color:var(--hi)}
.hist .all[aria-pressed="true"] span{color:inherit}
.clear{background:none; border:0; color:var(--faint); font-size:13px; padding:6px}
.clear:hover{color:var(--rec)}
@media (max-width:620px){ .hist{width:100%; justify-content:space-between} .hist .col{flex:1 1 0; width:auto} }

/* Taste */
.taste-grid{display:grid; gap:28px; margin-top:22px}
@media (min-width:900px){ .taste-grid{grid-template-columns:1fr 1fr} }
.taste-grid section > p{margin:4px 0 10px; color:var(--muted); font-size:13px; max-width:62ch}
.bars{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.bars li{display:grid; grid-template-columns:minmax(0,170px) minmax(0,1fr) 44px 30px; gap:10px; align-items:center; font-size:13px}
.bars .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bars button.lbl{all:unset; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid transparent}
.bars button.lbl:hover{border-bottom-color:var(--ink)}
.bars button.lbl:focus-visible{outline:2px solid var(--hi)}
.bars .trk{position:relative; height:10px; background:var(--sunk); border-radius:1px}
.bars .trk i{position:absolute; top:0; bottom:0; left:50%; width:calc(var(--w, 0) * 50%); background:var(--good)}
.bars .trk i.neg{left:auto; right:50%; background:var(--g-H)}
.bars .trk::after{content:""; position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--faint)}
.bars .v{text-align:right; color:var(--ink)}
.bars .c{text-align:right; color:var(--faint); font-size:12px}
.plan{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.plan li{padding:12px 14px; border:1px solid var(--rule); border-radius:3px; background:var(--panel)}
.plan li:first-child{border-color:var(--hi)}
.plan h3{margin:0; font-size:15px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.plan h3 span{font-weight:400; font-size:13px; color:var(--muted)}
.plan p{margin:6px 0 0; font-size:13px; color:var(--muted)}
.plan .films{color:var(--ink)}
.stats{display:flex; flex-wrap:wrap; gap:8px 28px; margin:22px 0 0}
.stats div{display:flex; flex-direction:column}
.stats b{font-family:var(--f-osd); font-weight:400; font-size:40px; line-height:.9}
.stats span{font-size:12px; color:var(--muted)}
.how{font-size:13px; color:var(--muted); max-width:72ch; margin-top:28px; border-top:1px solid var(--rule); padding-top:12px}
.how p{margin:0 0 8px}

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.gap{margin-top:26px}
.taste-plan{margin-top:30px}
.taste-plan .plan{margin-top:12px}

/* Footer */
.foot{max-width:1180px; margin:0 auto; padding:16px max(16px, env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); border-top:1px solid var(--rule); color:var(--muted); font-size:12px}
.foot p{margin:0 0 6px; max-width:90ch}
kbd{font:400 11px/1 var(--f-mono); border:1px solid var(--rule); border-bottom-width:2px; border-radius:3px; padding:2px 5px; margin:0 2px; color:var(--ink)}
@media (hover:none){ .keys{display:none} }

/* Settings */
dialog{border:1px solid var(--rule); border-radius:4px; padding:0; background:var(--panel); color:var(--ink); width:min(600px, calc(100vw - 24px)); max-height:calc(100dvh - 24px)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dlg{padding:18px 20px 22px; display:grid; gap:18px}
.dlg-head{display:flex; align-items:center; justify-content:space-between}
.dlg-head h2{font-size:18px}
.x{background:none; border:1px solid var(--rule); border-radius:3px; padding:5px 10px; font-size:13px}
fieldset{border:0; border-top:1px solid var(--rule); margin:0; padding:12px 0 0; display:grid; gap:8px}
fieldset .seg{justify-self:start}
legend{font-weight:600; padding:0 8px 0 0}
.checks{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:4px 14px}
.check{display:flex; align-items:flex-start; gap:8px; font-size:14px; cursor:pointer}
.check input{width:16px; height:16px; margin:3px 0 0; accent-color:var(--hi); flex:none}
.check small{color:var(--muted)}
.hint{color:var(--muted); font-size:13px; margin:0}
.err{color:var(--rec); font-size:13px; margin:0}
.dlg label:not(.check):not(.btn){font-size:12px; color:var(--muted); margin-top:6px; display:block}
.dlg input[type="password"], .dlg input[type="text"]{width:100%; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--bg); font-size:14px}
details summary{cursor:pointer; font-size:14px}
.btns{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-top:6px}
.btns.left{justify-content:flex-start}
.btn{display:inline-flex; align-items:center; font-size:14px; padding:8px 12px; border-radius:3px; border:1px solid var(--hi); background:var(--hi); color:var(--hi-ink); cursor:pointer}
.btn.ghost{background:none; color:var(--ink); border-color:var(--rule)}
.btn.danger{color:var(--rec)}
.btn[disabled]{opacity:.6; cursor:progress}
.btn.file{position:relative; overflow:hidden}
.btn.file input{position:absolute; inset:0; opacity:0; cursor:pointer}
a.btn{text-decoration:none}

/* Sync */
.fs{border-top:1px solid var(--rule); padding-top:12px; display:grid; gap:10px}
.fs h3{margin:0; font-size:15px; font-weight:600}
.sync-status{margin:0; display:flex; align-items:center; gap:8px; font-size:14px}
.sync-status .dot{width:9px; height:9px; border-radius:50%; background:var(--faint); flex:none}
.sync-status .dot.on{background:var(--good)} .sync-status .dot.busy{background:var(--g-M)} .sync-status .dot.err{background:var(--rec)}
.steps{margin:0; padding-left:20px; display:grid; gap:8px; font-size:14px}
.steps a{color:var(--ink); font-weight:500}
.steps .act{margin-left:6px; min-height:0; padding:3px 8px; font-size:12px}
.okay{color:var(--good); margin-left:6px}
.syncform{display:grid; gap:2px; max-width:420px}
.syncform .check{margin-top:8px}
.pair{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; padding:12px; border:1px dashed var(--rule); border-radius:3px}
.qr{width:240px; min-height:60px; line-height:0}
.qr svg{display:block; width:240px; height:240px; border-radius:2px}
@media (max-width:520px){ .pair{grid-template-columns:1fr} }
.syncnote{margin:16px 0 0; padding:10px 12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; border:1px solid var(--hi); border-radius:4px; background:var(--panel); font-size:14px}
.syncnote span{flex:1 1 260px}
.syncnote .btn{padding:6px 12px; font-size:13px}

/* Accounts */
.authcols{display:grid; gap:18px; margin:14px 0 16px}
@media (min-width:560px){ .authcols{grid-template-columns:1fr 1fr} }
.authcol{display:grid; gap:4px; align-content:start}
.authcol h3, .fs h4{margin:0 0 2px; font-size:14px; font-weight:600}
.fs h4{margin-top:10px}
.dlg .authcol input[type="text"]{max-width:100%}
.linkish{all:unset; cursor:pointer; color:var(--ink); border-bottom:1px solid var(--rule); font-size:13px; line-height:1.9}
.linkish:hover{border-bottom-color:var(--ink)}
.linkish:focus-visible{outline:2px solid var(--hi); outline-offset:2px}
.ways{margin:4px 0 0}
.hint.small{font-size:12px}
.hint a{color:var(--ink)}
.codes{margin:0; padding:10px 12px 10px 34px; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:4px 18px; background:var(--bg); border:1px dashed var(--rule); border-radius:3px}
.codes code, .bigcode code, .invite code{font:400 14px/1.6 var(--f-mono); letter-spacing:.04em}
.bigcode{margin:6px 0}
.bigcode code{font-size:26px; font-family:var(--f-osd); letter-spacing:.12em; color:var(--hi)}
.invite{margin:6px 0; overflow-wrap:anywhere}
.invite code{font-size:12px}
.acct-sec{border-top:1px solid var(--rule); padding-top:8px}
.acct-sec > summary{font-size:14px; font-weight:500; padding:2px 0}
.acct-sec[open] > summary{margin-bottom:8px}
.acct-sec > *:not(summary){margin-bottom:8px}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.row label{flex-basis:100%; margin:0 !important}
.row input[type="text"], .row input[type="password"]{flex:1 1 200px; width:auto; min-width:0; padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--bg); font-size:14px}
.klist{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.klist li{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 10px; padding:6px 0; border-bottom:1px solid var(--rule); font-size:14px}
.klist li:last-child{border-bottom:0}
.klist small{display:block; color:var(--muted); font-size:12px}
.kact{display:flex; gap:6px}
.kact .act{min-height:28px; padding:3px 8px; font-size:12px}
.pill{display:inline-block; font-size:11px; line-height:1; padding:3px 6px; border:1px solid var(--good); color:var(--good); border-radius:2px; vertical-align:1px; margin-left:4px}

/* Together and profiles */
.tg-intro{margin:22px 0 10px; max-width:72ch}
.tg-intro h2{font-size:22px; font-weight:600}
.tg-intro p{margin:6px 0 10px}
.tg-intro.prof h2{font-family:var(--f-mono); font-weight:400}
.tg-lists{list-style:none; margin:10px 0 18px; padding:0; display:grid; gap:8px}
@media (min-width:760px){ .tg-lists{grid-template-columns:1fr 1fr} }
.tg-lists a{display:grid; gap:2px; padding:12px 14px; border:1px solid var(--rule); border-radius:3px; background:var(--panel); text-decoration:none}
.tg-lists a:hover{border-color:var(--ink)}
.tg-lists b{font-size:16px}
.tg-lists span{font-size:13px; color:var(--muted)}
.newlist{max-width:520px; margin:10px 0 8px}
.newlist label{font-size:12px; color:var(--muted)}
.back{margin:18px 0 6px; font-size:13px}
.back a{color:var(--muted)} .back a:hover{color:var(--ink)}
.tg-title{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.tg-title h2{font-size:24px; font-weight:600}
.members{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:8px 0 12px; font-size:14px}
.members small{color:var(--muted)}
.members .act{margin-left:auto}
#tgInvite{margin:0 0 14px}
.tg-alone{margin:0 0 10px}
.tg-tonight{margin-top:6px}
.why .mem{color:var(--ink); border:1px solid var(--rule); border-radius:2px; padding:0 5px; line-height:18px}
.why .mem b{font-weight:500; color:var(--hi)}
.why .mem.r b{color:var(--good)}
.tg-done{margin-top:22px}
.tg-done summary{font-weight:600; padding:6px 0; border-bottom:2px solid var(--ink)}
.tg-done summary span{font-weight:400; font-size:13px; color:var(--muted); margin-left:6px}
.tg-foot{margin-top:24px}
.badge.theirs{border-color:var(--hi); color:var(--ink); font-family:var(--f-mono); font-weight:400}
.badge.theirs.s-low{border-color:var(--rec)} .badge.theirs.s-mid{border-color:var(--g-M)} .badge.theirs.s-good{border-color:var(--good)}
.rated-head .seg button span{color:var(--faint); margin-left:4px}
.rated-head .seg button[aria-pressed="true"] span{color:inherit; opacity:.7}

/* Toast */
.toast{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:14px; padding:10px 12px 10px 16px; background:var(--ink); color:var(--bg); border-radius:4px; font-size:14px; max-width:calc(100vw - 24px); box-shadow:0 6px 24px rgba(0,0,0,.35)}
.toast button{background:none; border:1px solid currentColor; border-radius:3px; padding:4px 10px; color:inherit; font-size:13px}

@media (prefers-reduced-motion: reduce){ .rec{animation:none} html{scroll-behavior:auto} }

/* Privacy page */
.prose{max-width:72ch; padding-top:10px}
.prose h1{font:400 40px/1 var(--f-osd); margin:26px 0 6px}
.prose h2{font-size:16px; margin:24px 0 6px}
.prose p, .prose li{color:var(--ink)}
.prose ul{padding-left:20px; display:grid; gap:6px}
.prose a{color:var(--hi)}