/* Hi 5 — quiet, minimal dark UI. Palette: Molten Lava #780000, Flag Red #C1121F, Papaya Whip #FDF0D5,
   Deep Space Blue #003049, Steel Blue #669BBC. Surfaces are Deep Space Blue darkened; text is Papaya Whip.
   The logo uses the exact palette; category accents lift the dark shades so text stays legible (5:1+ on --ink). One column (max 1160px): profile + Hi 5 card, then feed and a trending rail.
   Category color appears only as small accents (dots, labels, focus), never as large fills. Dark-only by design. */
:root{
  color-scheme: dark;
  --ink:#07151d; --panel:#0c1d27; --panel2:#12293a; --line:#1c3446; --line2:#2a465b;
  --fg:#fdf0d5; --muted:#b7bfc0; --dim:#7d8b92;
  --gold:#fdf0d5; --papaya:#fdf0d5; --deep:#003049; --danger:#ee4b57;
  --lava:#780000; --crush:#ee4b57; --flag:#c1121f; --steel:#669bbc;
  /* Category accents follow the palette in order (Lava, Flag Red, Papaya, Deep Space, Steel), lifted to read on --ink. */
  --movies:#d2726b; --tv:#ee4b57; --books:#fdf0d5; --music:#9fc6dd; --podcasts:#669bbc;
  --display:"Geist", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --body:"Geist", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink)}
body{overflow-wrap:break-word}  /* one long word in someone's review must not widen the page */
body{color:var(--fg);font-family:var(--body);font-size:14.5px;line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;padding-bottom:96px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--ink)}
[hidden]{display:none!important}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:inherit}
input,textarea,select{font:inherit;color:var(--fg);letter-spacing:inherit}
/* iPhone Safari zooms into any field under 16px when it's tapped and stays zoomed, so fields are 16px on touch screens. */
@media (pointer:coarse){input,textarea,select,.fsel select{font-size:16px}}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:2px solid color-mix(in srgb,var(--fg) 60%,transparent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;font-weight:600;letter-spacing:-.025em}
h2{font-size:1.06rem}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);font-weight:500}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.c-movies{--c:var(--movies)} .c-tv{--c:var(--tv)} .c-music{--c:var(--music)} .c-books{--c:var(--books)} .c-podcasts{--c:var(--podcasts)}
.lnk{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.lnk:hover{text-decoration-color:var(--fg)}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:20px;height:56px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.035em;flex:none}
/* Sunset Range: four peaks under a red sun, in the palette's left-to-right order. */
.logo-mark{display:block;width:30px;height:22px;flex:none}
nav.main{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
nav.main::-webkit-scrollbar{display:none}
nav.main button{padding:6px 10px;border-radius:7px;color:var(--muted);font-weight:450;white-space:nowrap;font-size:.88rem;transition:color .15s,background .15s}
nav.main button:hover{color:var(--fg)}
nav.main button.on{color:var(--fg);background:var(--panel2)}
.nav-ico{display:inline-grid;place-items:center;color:var(--c);margin-right:6px;vertical-align:-3px}
.tabbar,.pl .pl-down,.pl .pl-show{display:none}
.lf{min-width:0}
.lf-top{display:flex;gap:8px;align-items:center;min-width:0}
.cols > *,.hero > *{min-width:0}
.top-actions{display:flex;gap:6px;align-items:center;flex:none}
.me-wrap{position:relative;display:flex}
#meBtn{border-radius:50%;margin-left:4px}
#meBtn.on .av,#meBtn[aria-expanded="true"] .av{box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--muted)}
.me-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:190px;padding:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.me-menu[hidden]{display:none}
.me-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:7px;color:var(--muted);font-size:.9rem;text-align:left}
.me-menu button:hover,.me-menu button:focus-visible{color:var(--fg);background:color-mix(in srgb,var(--line2) 55%,transparent)}
.me-menu button.on{color:var(--fg)}
.me-menu svg{width:17px;height:17px;flex:none}
.me-menu hr{border:0;border-top:1px solid var(--line2);margin:6px 4px}
.icon-btn{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s}
.icon-btn:hover{color:var(--fg);background:var(--panel2)}
a.btn{text-decoration:none}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line2))}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;font-weight:500;font-size:.86rem;border:1px solid var(--line2);background:var(--panel2);transition:background .15s,border-color .15s}
.btn:hover{background:var(--line)}
.btn.primary{background:var(--papaya);color:var(--deep);border-color:var(--papaya)}
.btn.primary:hover{background:#fff8ea;border-color:#fff8ea}
.btn.sm{padding:5px 11px;font-size:.8rem}
.btn.on{border-color:color-mix(in srgb,var(--c,var(--fg)) 55%,var(--line2));color:var(--c,var(--fg))}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* avatar */
.av{width:var(--s,40px);height:var(--s,40px);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--ink);flex:none;font-size:calc(var(--s,40px)*.4);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* cover art */
.art{position:relative;border-radius:5px;overflow:hidden;background:var(--art);aspect-ratio:2/3;container-type:inline-size;box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;width:100%;max-width:100%}
.art-music,.art-podcasts{aspect-ratio:1}
/* Poster frame for the Rushmore panel: square covers (music, podcasts) sit in the middle of a 2:3 frame, over a blurred copy of themselves. */
.art.framed{aspect-ratio:2/3}
.art-music.framed img:not(.art-bg),.art-podcasts.framed img:not(.art-bg){object-fit:contain}
.art img.art-bg{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);max-width:none;z-index:0;filter:blur(8px) brightness(.6)}
.art-books{box-shadow:inset 6cqw 0 0 rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.04) inset}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(8,8,10,.6));pointer-events:none}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.art.has-img::after,.art.has-img .art-t,.art.has-img .art-by,.art.has-img .art-k{display:none}
.art-t,.art-by,.art-k{position:absolute;left:9cqw;right:8cqw;z-index:1;color:#fff8ea}
.art-t{bottom:15cqw;font-family:var(--display);font-weight:600;line-height:1.02;font-size:clamp(8px,12cqw,28px);letter-spacing:-.03em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.art-by{bottom:5cqw;font-size:clamp(6px,6.4cqw,12px);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-k{top:7cqw;font-family:var(--mono);font-size:clamp(6px,5.6cqw,10px);letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.art.tiny .art-t,.art.tiny .art-by,.art.tiny .art-k{display:none}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:24px 16px}
.grid.sq{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.card{display:flex;flex-direction:column;gap:8px;text-align:left;min-width:0}
.card .art{transition:transform .2s ease,box-shadow .2s ease}
.qa-w:hover .card .art,.card:hover .art{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 8px 20px rgba(0,0,0,.35)}
/* Quick add to Up Next on thumbnails. */
.qa-w{position:relative;min-width:0}
.qa-w > button:first-child{width:100%}
.qa{position:absolute;top:7px;right:7px;z-index:3;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff8ea;
  background:rgba(3,12,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(253,240,213,.2),0 6px 14px -4px rgba(0,0,0,.6);
  opacity:0;transform:scale(.8);transition:opacity .16s,transform .16s,background .15s,color .15s}
.qa svg{width:16px;height:16px}
.qa-w:hover .qa,.qa-w:focus-within .qa,.qa.on{opacity:1;transform:none}
.qa:hover,.qa:focus-visible,.qa.on{background:var(--papaya);color:var(--deep);box-shadow:0 6px 14px -4px rgba(0,0,0,.6)}
.qa-sm .qa{width:22px;height:22px;top:3px;right:3px}
.qa-sm .qa svg{width:12px;height:12px}
.qa-tile .qa{width:26px;height:26px;top:5px;right:5px}
.qa-tile .qa svg{width:14px;height:14px}
.qa-row .qa{top:50%;right:8px;margin-top:-15px}
.qa-row .tr-i{padding-right:46px}
.qa-w:hover .tile{transform:translateY(-3px)}
.qa-w:hover .tile .art{box-shadow:0 0 0 1.5px var(--c),0 14px 28px -10px rgba(0,0,0,.8)}
.qa-w:hover .tile .tile-cap{opacity:1}
/* "Not interested" on recommendations: top left on cards, left of quick add on rows. */
.nope{position:absolute;top:7px;left:7px;z-index:3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff8ea;
  background:rgba(3,12,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(253,240,213,.2),0 6px 14px -4px rgba(0,0,0,.6);
  opacity:0;transform:scale(.8);transition:opacity .16s,transform .16s,background .15s,color .15s}
.nope svg{width:15px;height:15px}
.qa-w:hover .nope,.qa-w:focus-within .nope{opacity:1;transform:none}
.nope:hover,.nope:focus-visible{background:var(--fg);color:var(--deep)}
.rec-row .nope{top:50%;left:auto;right:44px;margin-top:-14px}
.rec-row .tr-i{padding-right:80px}
@media (hover:none){.qa,.nope{opacity:.9;transform:none;background:rgba(3,12,18,.82);backdrop-filter:none;-webkit-backdrop-filter:none}}
.card-t{font-weight:500;font-size:.86rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-m{font-size:.76rem;color:var(--dim);display:flex;gap:8px;align-items:center;min-height:1.2em;margin-top:-4px}
.stars{color:var(--gold);letter-spacing:1px;white-space:nowrap}
.mine{color:var(--c)}
.hrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,144px);gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.hrow.sq{grid-auto-columns:minmax(132px,150px)}

/* profile + hi5 card */
.hero{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;padding-block:48px 40px;align-items:start}
.hero-id{display:flex;flex-direction:column;gap:22px}
.idrow{display:flex;gap:16px;align-items:center}
.idrow h1{font-size:1.6rem;line-height:1.1}
.idrow .muted{font-size:.86rem}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;padding:3px 9px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.taste-line{font-family:var(--display);font-size:1.15rem;line-height:1.4;font-weight:400;letter-spacing:-.02em;margin:0;color:var(--muted)}
.taste-line b{font-weight:500;color:var(--fg)}
.stat5{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat5 div{padding:10px 4px 9px;text-align:center;border-left:1px solid var(--line)}
.stat5 div:first-child{border-left:0}
.stat5 b{display:block;font-family:var(--mono);font-weight:500;font-size:1.05rem}
.stat5 span{font-size:.62rem;color:var(--dim);text-transform:uppercase;letter-spacing:.07em;display:inline-flex;align-items:center;gap:4px}
.stat5 span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c)}
.persona{display:flex;flex-direction:column;gap:6px}
.persona h2{font-size:1.5rem;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.traits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:0;padding-top:16px;border-top:1px solid var(--line)}
.traits div{min-width:0}
.traits dt{font-size:.7rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.traits dd{margin:0;font-size:.9rem;color:var(--fg);line-height:1.35;overflow-wrap:anywhere}
.hero-btns{display:flex;gap:8px;flex-wrap:wrap}

/* Rushmore card: the centerpiece. A soft palette glow over the panel, rows split by hairlines, covers that lift on hover. */
.h5{position:relative;border:1px solid var(--line);border-radius:18px;padding:20px 24px 10px;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--steel) 13%,transparent),transparent 60%),
    radial-gradient(90% 60% at 0% 100%,color-mix(in srgb,var(--flag) 9%,transparent),transparent 65%),var(--panel);
  box-shadow:0 1px 0 color-mix(in srgb,var(--papaya) 6%,transparent) inset,0 24px 60px -30px rgba(0,0,0,.7)}
.h5-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;align-items:center;padding-block:14px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.h5-cols + .h5-row{border-top:0}
.h5-lab{display:flex;align-items:center;gap:10px;justify-self:start;text-align:left;padding:4px 8px 4px 4px;margin-left:-4px;border-radius:10px}
.h5-lab b{font-weight:500;font-size:.9rem;color:var(--fg)}
/* On your own Hi 5 the label opens that category's editor: the badge fills with its color on hover. */
button.h5-lab{transition:background .15s}
button.h5-lab .cat-badge{transition:background .15s,color .15s,box-shadow .15s}
button.h5-lab:hover,button.h5-lab:focus-visible{background:color-mix(in srgb,var(--c) 7%,transparent)}
button.h5-lab:hover .cat-badge,button.h5-lab:focus-visible .cat-badge{background:var(--c);color:var(--ink);box-shadow:none}
/* Category icon in a soft tinted square; used in the Hi 5 card and category page headings. */
.cat-badge{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent)}
.cat-badge .cat-ico{width:16px;height:16px}
.cat-badge.lg{width:46px;height:46px;border-radius:13px}
.cat-badge.lg .cat-ico{width:26px;height:26px}
.h5-tiles{display:grid;grid-template-columns:minmax(0,1fr) 4px repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.h5-tiles > i{display:block}
/* Column headings: title case, centred over their columns, each standing on a rule that also tops the grid.
   "Current Crush" may run a little past its narrow column on both sides; the gaps leave room for it. */
.h5-cols{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px}
.h5-cols .h5-tiles{align-items:stretch}
.h5-col{display:flex;justify-content:center;min-width:0;padding:8px 0 10px;border-bottom:1px solid var(--line2);
  font-family:var(--display);font-size:.86rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--fg);white-space:nowrap}
.h5-col b{font-weight:inherit}
.h5-col.crush{color:var(--crush);border-bottom:2px solid var(--crush);margin:0 -6px -1px;border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--crush) 6%,transparent)}
.h5-col.rm{grid-column:3 / -1}
/* The crush column is one soft red band from the heading down, with a ring on the pick itself. */
.h5-crush{min-width:0;align-self:stretch;display:flex;align-items:flex-end;margin:-14px -6px;padding:14px 6px;
  background:color-mix(in srgb,var(--crush) 6%,transparent)}
.h5-row:last-child .h5-crush{border-radius:0 0 10px 10px}
.h5-crush > *{width:100%}
.tile.crush .art{box-shadow:0 0 0 1.5px var(--crush)}
.tile.crush:hover .art,.tile.crush:focus-visible .art{box-shadow:0 0 0 2px var(--crush),0 14px 28px -10px rgba(0,0,0,.8)}
.h5-crush .slot{border-color:color-mix(in srgb,var(--crush) 45%,transparent);background:none}
.h5-crush .slot:hover{border-color:var(--crush);background:color-mix(in srgb,var(--crush) 9%,transparent)}
.h5-crush .slot:hover span{background:var(--crush);border-color:var(--crush)}
.h5[data-edit] .tile{cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.h5[data-edit] .tile img{-webkit-user-drag:none;pointer-events:none}
.tile.drag-src{opacity:.3}
.drag-ghost{position:fixed;z-index:1000;margin:0;pointer-events:none;border-radius:6px;transform:rotate(-3deg) scale(1.06);
  box-shadow:0 0 0 1.5px var(--papaya),0 22px 44px -14px rgba(0,0,0,.9)}
.h5 .drop-on{outline:2px solid var(--fg);outline-offset:3px;border-radius:6px}
.h5-crush .drop-on{outline-color:var(--crush)}
.tile{position:relative;display:block;min-width:0;border-radius:6px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.tile .art{border-radius:6px;transition:box-shadow .2s}
.tile:hover,.tile:focus-visible{transform:translateY(-3px)}
.tile:hover .art,.tile:focus-visible .art{box-shadow:0 0 0 1.5px var(--c),0 14px 28px -10px rgba(0,0,0,.8)}
.tile-cap{position:absolute;inset:auto 0 0;z-index:2;padding:22px 7px 6px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,transparent,rgba(3,10,15,.88));
  display:flex;flex-direction:column;text-align:left;opacity:0;transition:opacity .2s;pointer-events:none}
.tile-cap b{font-size:.72rem;font-weight:500;line-height:1.2;color:#fff8ea;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-cap small{font-size:.64rem;color:color-mix(in srgb,#fff8ea 70%,transparent)}
.tile:hover .tile-cap,.tile:focus-visible .tile-cap{opacity:1}
.tile .art:not(.has-img) ~ .tile-cap{display:none}
.slot{aspect-ratio:1;border:1px dashed var(--line2);border-radius:6px;display:grid;place-items:center;color:var(--dim);width:100%;
  background:color-mix(in srgb,var(--c) 3%,transparent);transition:border-color .15s,background .15s}
.slot span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:1rem;line-height:1;border:1px solid transparent;color:var(--dim);transition:all .15s}
.c-movies .slot,.c-tv .slot,.c-books .slot,.h5 .slot{aspect-ratio:2/3}
.slot:hover{border-color:var(--c);background:color-mix(in srgb,var(--c) 9%,transparent)}
.slot:hover span{background:var(--c);border-color:var(--c);color:var(--ink)}
.slot.empty{border-style:solid;border-color:color-mix(in srgb,var(--line) 70%,transparent);background:none;cursor:default}

/* home columns */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;padding-block:16px 56px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.sec-h button{font-size:.8rem;color:var(--dim)}
.sec-h button:hover{color:var(--fg)}
.feed{display:flex;flex-direction:column}
.fi{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding-block:18px;border-top:1px solid var(--line)}
.fi-top{font-size:.86rem;line-height:1.4}
.fi-top button{font-weight:500}
.fi-body{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;margin-top:10px;align-items:start}
.fi-body .art{width:56px}
.fi-title{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.25;letter-spacing:-.015em}
.fi-title span{font-family:var(--body);font-weight:400;color:var(--dim);font-size:.82rem;margin-left:6px}
.fi-rev{margin:6px 0 0;color:#e6dcc6;font-size:.9rem;max-width:62ch}
.fi-acts{display:flex;gap:16px;margin-top:8px;font-size:.78rem;color:var(--dim)}
.fi-acts button:hover{color:var(--fg)}
.fi-acts .liked{color:var(--movies)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;padding:2px 8px;border-radius:5px;background:color-mix(in srgb,var(--c,var(--muted)) 12%,transparent);color:var(--c,var(--muted));font-weight:500;white-space:nowrap}

.rail{display:flex;flex-direction:column;gap:40px}
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:12px;padding:3px;background:var(--panel);border-radius:9px;width:fit-content;max-width:100%}
.tabs button{padding:4px 10px;border-radius:6px;font-size:.78rem;color:var(--dim);transition:color .15s,background .15s}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);background:var(--panel2);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.trend{display:flex;flex-direction:column}
.tr-i{display:grid;grid-template-columns:18px 40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:7px 8px;margin-inline:-8px;border-radius:8px;text-align:left;transition:background .15s}
.tr-i:hover{background:var(--panel)}
.tr-i .n{font-family:var(--mono);color:var(--dim);font-size:.78rem}
.tr-i .art{width:40px}
.tr-i b{display:block;font-weight:500;font-size:.87rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-i small{color:var(--dim);font-size:.75rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up{font-family:var(--mono);font-size:.7rem;color:var(--music)}
.why{font-size:.74rem;color:var(--dim);line-height:1.35}

.home{padding-top:16px}
.more.feed-toggle{display:none}
/* One column: a short feed, so Popular now and Trending aren't a long scroll away. */
@media (max-width:1000px){
  .more.feed-toggle{display:flex}
  .home-feed:not(.open) .feed > :nth-child(n+4),.home-feed:not(.open) .more:not(.feed-toggle){display:none}
}
.home-panel{margin-bottom:32px}
.home-panel-h{align-items:center}
.rstrip{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px 14px;background:var(--panel);margin-bottom:32px}
.rstrip-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;min-width:0}
.rstrip-h b{font:600 .95rem var(--display);letter-spacing:-.02em;color:var(--fg)}
.rstrip-h small{color:var(--crush);font-size:.75rem}
.rstrip-tiles{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,84px));gap:12px}
.rstrip-f{display:block;border-radius:6px;box-shadow:0 0 0 1.5px var(--crush);transition:box-shadow .15s}
.rstrip-f:hover,.rstrip-f:focus-visible{box-shadow:0 0 0 2.5px var(--crush)}
.rstrip-f .art{border-radius:6px;box-shadow:none}
.rstrip-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:2/3;color:var(--c);background:none;box-shadow:none;border:1px dashed color-mix(in srgb,var(--crush) 45%,transparent)}
.rstrip-add:hover,.rstrip-add:focus-visible{box-shadow:none;border-color:var(--crush);background:color-mix(in srgb,var(--crush) 9%,transparent)}
.rstrip-add svg{width:20px;height:20px}
.rstrip-add small{font-size:.62rem;color:var(--muted);line-height:1.1}
.rstrip-acts{grid-row:1;grid-column:2;display:flex;align-items:center;gap:2px}
.rstrip-more{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:.82rem;padding:4px 0 4px 8px}
.rstrip-more:hover{color:var(--fg)}
.rstrip-more svg{width:16px;height:16px}
@media (max-width:640px){.rstrip{padding:10px 12px 12px}.rstrip-tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.rstrip-more span{display:none}}
/* With room, the title and controls sit in a column on the left and the five covers fill the rest, so nothing is left blank
   beside them. Measured against the feed column, not the window, since the rail beside it comes and goes. */
.home-feed{container:home-feed/inline-size}
@container home-feed (min-width:520px){
  .rstrip{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:stretch;gap:8px 20px;padding:14px 16px}
  .rstrip-h{grid-column:1;grid-row:1;flex-direction:column;gap:3px}
  .rstrip-acts{grid-column:1;grid-row:2;align-self:end;margin-left:-8px}
  .rstrip-tiles{grid-column:2;grid-row:1/3;grid-template-columns:repeat(5,minmax(0,128px));justify-content:space-between;gap:12px}
}
.cont{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:32px}
.cont .art{width:52px;flex:none}
.cont-txt{flex:1;min-width:0}
.cont-txt b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar{height:3px;background:var(--panel2);border-radius:2px;overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;background:var(--podcasts)}

/* category page */
.cat-head{padding-block:48px 16px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.cat-head h1{font-size:clamp(2rem,5vw,2.8rem);line-height:1;letter-spacing:-.04em;display:flex;align-items:center;gap:14px}
/* The text takes the room left beside any buttons, so it only wraps once the window is too narrow for one line. */
.cat-head > div:first-child{flex:1 1 320px;min-width:0}
.cat-head p{margin:10px 0 0;color:var(--muted)}
.block{padding-block:20px}
.filters{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.filters .chipb{padding:5px 11px;border-radius:7px;border:1px solid var(--line);font-size:.78rem;color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.filters .chipb:hover{color:var(--fg)}
.filters .chipb.on{background:var(--panel2);color:var(--fg);border-color:var(--line2)}
.lf{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.lf-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lf-row .chipb{padding:5px 11px;border-radius:7px;border:1px solid var(--line);font-size:.78rem;color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.lf-row .chipb:hover{color:var(--fg)}
.lf-row .chipb.on{background:var(--panel2);color:var(--fg);border-color:var(--line2)}
.fsel{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;padding:0 26px 0 10px;height:29px;font-size:.78rem;color:var(--dim);transition:border-color .15s}
.fsel::after{content:"";position:absolute;right:10px;top:11px;width:5px;height:5px;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);pointer-events:none}
.fsel:hover,.fsel:focus-within{border-color:var(--line2)}
.fsel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--muted);font-size:.78rem;padding:0;cursor:pointer;outline:none}
.fsel select option{background:var(--panel);color:var(--fg)}
.fsel.set{background:var(--panel2);border-color:var(--line2)}
.fsel.set select{color:var(--fg)}
.lf-clear{font-size:.78rem;color:var(--dim);margin-left:4px}
/* Everything but the category chips folds behind a Filters button (showing how many are on). */
.lf-top .filters{flex:1;min-width:0}
.lf-toggle{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;padding:5px 11px;border-radius:7px;border:1px solid var(--line);font-size:.78rem;color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.lf-toggle:hover{color:var(--fg)}
.lf-toggle svg{width:15px;height:15px}
.lf-toggle b{min-width:17px;height:17px;border-radius:9px;background:var(--papaya);color:var(--deep);font-size:.68rem;display:grid;place-items:center;padding:0 4px}
.lf-toggle.set,.lf.open .lf-toggle{color:var(--fg);border-color:var(--line2);background:var(--panel2)}
.lf:not(.open) .lf-row{display:none}
.lf-clear:hover{color:var(--fg)}
.chipb.c-all{--c:var(--fg)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--dim);margin-left:auto}

/* detail */
.dt-bg{position:relative;overflow:hidden}
.dt-bg::before{content:"";position:absolute;inset:-60px;background:var(--art);filter:blur(80px) saturate(.8);opacity:.16}
.dt-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--ink) 85%)}
.dt{position:relative;z-index:1;display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:44px;padding-block:52px 36px;align-items:start}
.dt-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.dt-main h1{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.05;letter-spacing:-.035em}
.dt-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:.9rem}
.dt-meta b{color:var(--fg);font-weight:500}
.fcount{color:inherit;font:inherit;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.fcount:hover{background:var(--panel2);color:var(--fg)}
.flist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.frow{display:flex;align-items:center;gap:8px}
.frow .res-i{flex:1;min-width:0}
.dt-blurb{font-size:1rem;line-height:1.65;max-width:62ch;margin:0;color:#e6dcc6}
.dt-blurb.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.dt-blurb.clamp:hover{color:var(--fg)}
.panel{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.panel h3{font-size:.92rem;font-weight:500}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.act{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:8px;font-size:.74rem;color:var(--muted);transition:background .15s,color .15s}
.act svg{width:20px;height:20px}
.act:hover{background:var(--panel2);color:var(--fg)}
.act.on{color:var(--c)}
.hist{display:flex;align-items:flex-end;gap:3px;height:48px}
.hist i{flex:1;background:var(--panel2);border-radius:2px 2px 0 0;min-height:2px}
.hist i.hi{background:var(--muted)}
.avg{display:flex;justify-content:space-between;align-items:baseline}
.avg b{font-family:var(--mono)}
.wrow{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;padding-block:10px;border-top:1px solid var(--line)}
.wrow:first-of-type{border-top:0}
.wrow .eyebrow{padding-top:6px}
.provs{display:flex;flex-wrap:wrap;gap:6px}
.prov{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:7px;background:var(--panel2);font-size:.8rem;text-decoration:none;border:1px solid transparent;transition:border-color .15s}
.prov.yours{border-color:color-mix(in srgb,var(--music) 60%,transparent)}
.prov i{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:.62rem;font-family:var(--display);flex:none}
.prov img{width:22px;height:22px;border-radius:5px;flex:none;object-fit:cover}
.prov small{color:var(--dim);font-family:var(--mono);font-size:.7rem}
a.prov:hover{border-color:var(--line2)}
.eps{display:flex;flex-direction:column}
.ep{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding-block:12px;border-top:1px solid var(--line)}
.ep:first-child{border-top:0}
.playb{width:40px;height:40px;border-radius:50%;background:var(--papaya);color:var(--deep);display:grid;place-items:center;transition:transform .15s}
.playb:hover{transform:scale(1.05)}
.playb svg{width:15px;height:15px}
.ep b{font-weight:500;display:block}
.ep small{color:var(--dim);font-size:.78rem}
.ep .pbar{max-width:220px}
.ep-sum{color:var(--muted);font-size:.82rem;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr{display:flex;flex-direction:column;gap:14px}
.fr-i{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;font-size:.87rem}
.fr-i p{margin:3px 0 0;color:#e6dcc6}
.note{font-size:.72rem;color:var(--dim)}
.tracks{display:flex;flex-direction:column}
.trk{display:grid;grid-template-columns:24px 28px minmax(0,1fr) auto;gap:10px;align-items:center;padding-block:7px;border-top:1px solid var(--line);font-size:.87rem}
.trk:first-child{border-top:0}
.trk .n{font-family:var(--mono);color:var(--dim);font-size:.76rem;text-align:right}
.trk .mini-play{width:26px;height:26px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;color:var(--fg);transition:background .15s,color .15s}
.trk .mini-play svg{width:11px;height:11px}
.trk .mini-play:hover{background:var(--papaya);color:var(--deep)}

/* diary */
.tbl{overflow-x:auto}
.dia{width:100%;border-collapse:collapse;font-size:.88rem}
.dia td,.dia th{padding:10px 8px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.dia th{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);font-weight:500;border-top:0}
.dia .mth{font-family:var(--display);font-weight:500;font-size:.95rem;color:var(--muted);padding-top:26px;letter-spacing:-.01em}
.dia .d{font-family:var(--mono);color:var(--dim);width:44px}
.dia .art{width:36px}
.dia .t{font-weight:500}
.dia .ed{cursor:pointer}
.dia tbody tr:hover .ed,.dia tbody tr:hover .row-ed button{color:var(--fg)}
.dia tbody tr:hover .ed.stars{color:var(--gold)}
.dia .row-ed{width:36px;text-align:right}
.dia .row-ed button{color:var(--dim);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;transition:color .15s,background .15s}
.dia .row-ed button:hover{background:var(--panel2)}
.dia .rv{color:var(--muted);max-width:40ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* friends */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.person{border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px}
.person-h{display:flex;gap:12px;align-items:center}
.person-h .who{flex:1;min-width:0;text-align:left}
.person-h b{display:block;font-weight:500}
.person-h small{color:var(--dim)}
.match{font-family:var(--mono);font-size:.76rem;color:var(--music)}
.person p{margin:0;font-size:.85rem;color:var(--muted)}
.mini5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(6,6,8,.7);backdrop-filter:blur(4px);z-index:50;display:grid;place-items:start center;padding:max(16px,env(safe-area-inset-top,0px)) 16px 16px;overflow-y:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(540px,100%);margin-top:8vh;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px}
.modal-h h2{font-size:1.02rem}
.modal-b{padding:6px 18px 18px;display:flex;flex-direction:column;gap:16px}
.modal-f{padding:14px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:var(--panel);border-radius:0 0 14px 14px}
#t5res{max-height:none;overflow:visible}
.imp-src{display:flex;flex-direction:column;gap:10px}
.imp-src div{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--c)}
.imp-src b{font-weight:500;font-size:.88rem}
.imp-src span{font-size:.8rem;color:var(--muted);line-height:1.45}
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px;border:1px dashed var(--line2);border-radius:10px;cursor:pointer;font-size:.85rem;text-align:center;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--fg);background:var(--panel2)}
.drop b{font-weight:500}
.imp-prog{display:flex;flex-direction:column;gap:14px}
.imp-prog h3{font-size:.95rem;font-weight:500}
.imp-stats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.imp-stats span::before{display:none}
.imp-miss summary{cursor:pointer;font-size:.85rem;color:var(--muted)}
.imp-miss ul{margin:8px 0 0;padding-left:18px;max-height:200px;overflow:auto;font-size:.84rem;display:flex;flex-direction:column;gap:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.76rem;color:var(--muted);font-weight:500}
.inp{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 12px;width:100%;transition:border-color .15s}
.inp:focus{outline:none;border-color:var(--line2);box-shadow:0 0 0 3px color-mix(in srgb,var(--fg) 8%,transparent)}
textarea.inp{min-height:96px;resize:vertical}
.inp-wrap{position:relative}
.inp-wrap .inp{padding-right:38px}
.inp-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s}
.inp-clear:hover{color:var(--fg);background:var(--panel2)}
.inp-clear[hidden]{display:none}
.inp-clear svg{width:15px;height:15px}
.star-in{display:flex;gap:2px;font-size:1.8rem;line-height:1;cursor:pointer;user-select:none}
.star-in span{color:var(--panel2)}
.star-in span.f{color:var(--gold)}
.star-in span.h{background:linear-gradient(90deg,var(--gold) 50%,var(--panel2) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.logrow{display:flex;gap:14px;align-items:center}
.logrow .art{width:58px;flex:none}
.logrow b{font-weight:500!important}
.check{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)}
.heart{font-size:1.5rem;color:var(--panel2);line-height:1;transition:color .15s}
.heart.on{color:var(--movies)}
.t5list{display:flex;flex-direction:column;gap:6px;user-select:none}
.t5i{display:grid;grid-template-columns:44px 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px 6px 4px;border-radius:10px;background:var(--ink);border:1px solid transparent;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .15s,border-color .15s;touch-action:pan-y}
.t5i[data-row]{cursor:grab}
.t5i .art{width:40px}
.t5i b{font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.t5i small{color:var(--dim);font-size:.74rem}
.t5-grip{display:flex;align-items:center;justify-content:center;gap:2px;align-self:stretch;border-radius:8px;color:var(--dim);touch-action:none;cursor:grab}
.t5-grip .n{font-family:var(--mono);font-size:.8rem;width:14px;text-align:center}
.t5-grip svg{opacity:.7}
button.t5-grip:hover,button.t5-grip:focus-visible{color:var(--fg);background:var(--panel2)}
.t5i.dragging{z-index:2;cursor:grabbing;transition:box-shadow .15s;border-color:var(--c);box-shadow:0 16px 32px -12px rgba(0,0,0,.8);background:var(--panel2)}
.sorting,.sorting *{cursor:grabbing!important}
.t5-empty{opacity:.85;background:none;border:1px dashed var(--line2);width:100%;text-align:left;cursor:pointer}
.t5-empty:hover{opacity:1;border-color:var(--fg)}
.t5-empty .slot{width:40px;aspect-ratio:1;border:0;background:none}
.t5-empty .slot span{width:22px;height:22px;font-size:.9rem}
.t5-x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line2);transition:color .15s,background .15s,border-color .15s}
.t5-x:hover,.t5-x:focus-visible{color:#fff;background:var(--danger);border-color:var(--danger)}
.res{display:flex;flex-direction:column;gap:1px;max-height:300px;overflow-y:auto}
.res-i{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;text-align:left;width:100%}
.res-i:hover{background:var(--panel2)}
.res-acts{display:flex;gap:6px}
.res-acts button:not(:disabled):hover{filter:brightness(1.25)}
.crush-btn,.crush-tag{--c:var(--crush)}
.crush-btn svg,.crush-tag svg{width:11px;height:11px}
.crush-btn.on{background:var(--crush);color:var(--ink)}
.t5-sec{display:flex;flex-direction:column;gap:2px;margin-bottom:-6px}
.t5-h{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.t5-h svg{width:13px;height:13px}
.t5-h.crush{color:var(--crush)}
.t5-crush{border-color:color-mix(in srgb,var(--crush) 45%,transparent)}
.t5-crush .t5-grip{cursor:default;color:var(--crush)}
.t5-crush .t5-grip .n svg{width:14px;height:14px}
[data-a="crushme"] svg{width:16px;height:16px}
[data-a="crushme"].on{--c:var(--crush)}
.res-i .art{width:34px}
.res-i b{font-size:.86rem;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-i small{color:var(--dim);font-size:.74rem}
.sgrp{display:flex;flex-direction:column;gap:1px}
.sgrp h3{font-size:.68rem;color:var(--c,var(--dim));margin:10px 0 4px 8px;font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.1em}
.av-edit{display:flex;gap:16px;align-items:center}
.av-ctl{display:flex;flex-direction:column;gap:8px;min-width:0}
.av-btns{display:flex;gap:8px;flex-wrap:wrap}
.av-colors{display:flex;gap:6px;flex-wrap:wrap}
.av-colors button{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(7,21,29,.2);transition:transform .15s}
.av-colors button:hover{transform:scale(1.1)}
.av-colors button.on{outline:2px solid var(--fg);outline-offset:2px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:6px}
.svc-grid button{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;border:1px solid var(--line);font-size:.82rem;text-align:left;transition:border-color .15s,background .15s}
.svc-grid button.on{border-color:color-mix(in srgb,var(--music) 60%,transparent);background:color-mix(in srgb,var(--music) 8%,transparent)}
.svc-grid i{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-style:normal;font-weight:600;font-size:.6rem;font-family:var(--display);flex:none}

/* player */
#player{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.pl{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) auto;gap:20px;align-items:center;height:72px}
.pl-now{display:flex;gap:12px;align-items:center;min-width:0;text-align:left}
.pl-now .art{width:46px;flex:none}
.pl-now b{display:block;font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-now small{color:var(--dim);font-size:.75rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-mid{display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0}
.pl-ctl{display:flex;gap:16px;align-items:center}
.pl-ctl button{color:var(--muted);display:grid;place-items:center}
.pl-ctl button:hover{color:var(--fg)}
.pl-ctl .big{width:34px;height:34px;border-radius:50%;background:var(--papaya);color:var(--deep)}
.pl-ctl .big:hover{color:var(--deep);background:#fff8ea}
.pl-ctl svg{width:19px;height:19px}
.pl-ctl .big svg{width:14px;height:14px}
.pl-scrub{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;width:100%;max-width:560px;font-size:.7rem;color:var(--dim)}
.pl-scrub span:last-child{text-align:right}
input[type=range]{width:100%;accent-color:var(--fg);height:3px}
.pl-right{display:flex;gap:6px;align-items:center}
.spd{font-family:var(--mono);font-size:.76rem;padding:4px 8px;border-radius:6px;color:var(--muted)}
.spd:hover{background:var(--panel2);color:var(--fg)}

/* states */
.ep-log{font-size:.76rem;color:var(--muted);border:1px solid var(--line);border-radius:7px;padding:4px 9px;white-space:nowrap;transition:color .15s,border-color .15s}
.ep-log:hover{color:var(--fg);border-color:var(--line2)}
.ep-log.on{color:var(--fg);background:var(--panel2);border-color:var(--line2)}
.ep-log .stars{font-size:.72rem}
.fi-ep,.ep-line{font-size:.82rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-name{font-weight:500}
.alog{position:fixed;right:16px;bottom:88px;z-index:55;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:min(360px,calc(100% - 32px));padding:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.alog .art{width:44px}
.alog-t{min-width:0}
.alog-t small{color:var(--dim);font-size:.72rem;display:block}
.alog-t b{display:block;font-weight:500;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alog-stars{display:flex;gap:2px;margin-top:4px}
.alog-stars button{font-size:1.15rem;line-height:1;color:var(--line2);transition:color .1s}
.alog-stars:hover button,.alog-stars button.on{color:var(--gold)}
.alog-stars button:hover~button{color:var(--line2)}
.alog-b{display:flex;flex-direction:column;align-items:flex-end;gap:4px;align-self:stretch;justify-content:space-between}
.alog-b .lnk{font-size:.76rem}
@media (max-width:640px){.alog{right:16px;bottom:140px}}
.inst{position:fixed;left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}
.inst img{border-radius:11px;display:block}
.inst-t{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:var(--muted);line-height:1.4}
.inst-t > b{color:var(--fg);font-size:.9rem;font-weight:500}
.inst-t svg{vertical-align:-3px;color:var(--steel)}
.inst-b{display:flex;gap:4px;align-items:center}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--panel2);color:var(--fg);border:1px solid var(--line2);padding:9px 16px;border-radius:10px;font-weight:500;font-size:.85rem;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.45);max-width:calc(100% - 32px)}
.toast-undo{margin-left:14px;font-weight:700;color:var(--papaya)}
.toast-undo:hover{text-decoration:underline}
.loading{padding-block:96px;display:grid;place-items:center;color:var(--muted)}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel2);border-top-color:var(--muted);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{padding:14px 16px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:.88rem}
.more{display:flex;justify-content:center;padding-block:18px}
.attrib{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--dim)}
footer{border-top:1px solid var(--line);padding-block:28px;color:var(--dim);font-size:.76rem}

/* sign in */
.auth{min-height:calc(100vh - 140px);display:grid;place-items:center;padding-block:48px}
.auth-card{width:min(380px,100%);display:flex;flex-direction:column;gap:18px}
.auth-card h1{font-size:2rem;letter-spacing:-.04em;line-height:1.05}
.auth-card p{margin:0;color:var(--muted)}
.auth-card form{display:flex;flex-direction:column;gap:12px}
.auth-err{color:var(--movies);font-size:.85rem;min-height:1.2em}
.auth-forgot{align-self:flex-end;font-size:.8rem;color:var(--dim)}
.auth-sent{padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.auth-legal a{color:var(--muted)}
.danger-zone{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));border-radius:10px;padding:10px 12px}
.danger-zone b{display:block;font-size:.9rem}

@media (max-width:1000px){
  .hero{grid-template-columns:minmax(0,1fr);gap:22px}
  /* Phones: name and photo first (with Follow on others' profiles), then the Rushmore panel, then taste and counts. */
  .hero-id{display:contents}
  .hero-id > .idrow,.hero-id > .hero-btns{order:-2}  /* Follow stays next to the name */
  .hero > .h5{order:-1}
  .cols{grid-template-columns:1fr;gap:40px}
  .dt{grid-template-columns:160px minmax(0,1fr)}
  .dt-side{grid-column:1/-1}
}
@media (max-width:640px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  /* Two lines on phones: the logo on top; the five categories, search, alerts and you below. Logged out, the join buttons sit beside the logo. */
  .top-in{display:grid;grid-template-columns:repeat(8,auto);justify-content:space-between;align-items:center;grid-auto-rows:44px;height:auto;gap:0;padding-top:6px}
  .logo{grid-column:1/-1;grid-row:1;height:44px;font-size:1.15rem;justify-self:start}
  #guestActions{grid-column:1/-1;grid-row:1;justify-self:end}
  /* The menu and action buttons become direct items of the grid, so all eight share one evenly spaced row. */
  nav.main:not(:empty),#topActions:not([hidden]){display:contents}
  .top-actions .btn span{display:none}
  /* A smaller picture, with padding so it's still easy to tap. */
  #meBtn{margin-left:0;padding:5px}
  #meBtn .av{--s:28px!important}
  /* Name and picture in scale with the header and the panel below. */
  .idrow{gap:12px}
  .idrow .av{--s:44px!important}
  .idrow h1{font-size:1.2rem;letter-spacing:-.02em}
  .idrow .muted{font-size:.8rem}
  .hero{padding-top:28px}
  .h5{padding:16px 16px 6px;border-radius:16px}
  .h5-row{grid-template-columns:1fr;gap:10px;padding-block:12px}

  .h5-tiles{gap:6px}
  .h5-cols{grid-template-columns:1fr}
  .h5-cols > span:first-child{display:none}
  .h5-cols{gap:0}
  .h5-tiles{grid-template-columns:minmax(0,1fr) 2px repeat(4,minmax(0,1fr))}
  .h5-col{font-size:.74rem;padding:0 0 8px}
  .h5-col.crush{margin:0 0 -1px;background:none}
  .h5-crush,.h5-row:last-child .h5-crush{margin:0;padding:0;background:none;border-radius:0}
  .dt{grid-template-columns:1fr;gap:22px;padding-top:28px}
  .dt-poster{width:140px}
  .pl{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .pl-mid .pl-scrub{display:none}
  .pl-mid{order:2}
  .pl-ctl .sk{display:none}
  .pl-right{display:none}
  .people{grid-template-columns:1fr}
  .dia .rv,.dia .hide-sm{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:18px 12px}
  .grid.sq{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .cat-head{padding-top:32px}
  /* Phones: category icons up top, a bottom tab bar for the rest. */
  .top-actions .btn.primary{display:none}
  nav.main button[class*="c-"]{padding:6px;color:var(--c)}
  nav.main button[class*="c-"].on{background:color-mix(in srgb,var(--c) 15%,transparent)}
  nav.main button[class*="c-"] .nav-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-ico{display:grid;margin:0}
  .nav-ico .cat-ico{width:21px;height:21px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;height:calc(60px + env(safe-area-inset-bottom,0px));
    padding:0 max(8px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);font-size:.64rem;font-weight:500;letter-spacing:.01em}
  .tabbar button svg{width:22px;height:22px}
  .tabbar button.on{color:var(--fg)}
  .tab-log span{width:46px;height:46px;border-radius:50%;background:var(--papaya);color:var(--deep);display:grid;place-items:center;transform:translateY(-8px);box-shadow:0 8px 20px -6px rgba(0,0,0,.7),0 0 0 4px var(--ink)}
  .tab-log span svg{width:22px;height:22px;stroke-width:2.2}
  body{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  /* Solid bars on phones: see-through blurred bars look smeared over covers, and many blurred layers make iOS
     Safari drop frames or stop drawing while scrolling. */
  header.top{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
  .tabbar{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
  #player{bottom:calc(60px + env(safe-area-inset-bottom,0px));padding-bottom:0}
  .toast{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .alog{bottom:calc(146px + env(safe-area-inset-bottom,0px))}

  /* Filters fold behind a button; category chips stay as one swipeable row. */
  .lf-top .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .lf-top .filters::-webkit-scrollbar{display:none}
  .lf-top .chipb{flex:none}

  /* Full-screen player: tap the bar to open. */
  body.pl-open{overflow:hidden}
  #player.full{top:0;bottom:0;z-index:50;border-top:0;background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--steel) 22%,transparent),transparent 70%),var(--ink)}
  .pl.full{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding-top:calc(56px + env(safe-area-inset-top,0px));padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .pl.full .pl-down{display:grid;position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;width:40px;height:40px}
  .pl.full .pl-now{flex-direction:column;gap:18px;text-align:center;width:100%}
  .pl.full .pl-now .art{width:min(74vw,320px);border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
  .pl.full .pl-now b{white-space:normal;font-size:1.2rem;font-family:var(--display);letter-spacing:-.02em}
  .pl.full .pl-now small{font-size:.86rem;white-space:normal}
  .pl.full .pl-mid{order:0;width:100%;gap:22px;flex-direction:column-reverse}
  .pl.full .pl-mid .pl-scrub{display:grid;max-width:none}
  .pl.full .pl-ctl{gap:36px}
  .pl.full .pl-ctl .sk{display:grid}
  .pl.full .pl-ctl svg{width:26px;height:26px}
  .pl.full .pl-ctl .big{width:66px;height:66px}
  .pl.full .pl-ctl .big svg{width:22px;height:22px}
  .pl.full .pl-show{display:inline-block;font-size:.85rem;color:var(--muted)}
  .pl.full .pl-right{display:flex;gap:14px}
  .pl.full .pl-right .spd{border:1px solid var(--line2);border-radius:8px;padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- community: lists, reviews, notifications, stats, membership (static/community.js) ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button.idrow{text-align:left;border-radius:12px}
.idrow h1 .badge-pro{vertical-align:middle}
.badge-pro{display:inline-block;font:600 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:5px;color:var(--ink);background:var(--music)}
.badge-pro.patron{background:var(--fg)}
.fi-acts button{display:inline-flex;align-items:center;gap:5px}
.bell{position:relative}
.bell.dot::after{content:"";position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--crush);box-shadow:0 0 0 2px var(--ink)}

/* Ads: plainly labelled, quiet, never louder than the content around them. */
.ad{border:1px dashed var(--line2);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;background:color-mix(in srgb,var(--panel) 50%,transparent)}
.ad-l{grid-column:1/-1;font:500 .62rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ad-b b{font-size:.9rem;font-weight:600}
.ad-b p{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.feed .ad{margin:4px 0}

/* Pro page */
.pro-page{padding-block:28px 48px}
.pro-hero{max-width:640px;margin-bottom:22px}
.pro-hero h1{font-size:2rem;line-height:1.15;letter-spacing:-.03em;margin:6px 0 10px}
.pro-test{margin:-6px 0 18px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.plan{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;background:var(--panel)}
.plan.pro{border-color:color-mix(in srgb,var(--music) 55%,transparent)}
.plan.on{box-shadow:inset 0 0 0 1px var(--fg)}
.plan h2{font-size:1.05rem;margin:0}
.plan .price b{font:600 1.9rem var(--display);letter-spacing:-.03em}
.plan .price span{color:var(--muted);font-size:.9rem}
.plan p{margin:4px 0;font-size:.88rem}
.plan ul{margin:4px 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:.88rem;flex:1}
.plan li{padding-left:20px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--music)}
.plan .btn{justify-content:center}
.set-plan{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.set-plan b{display:block;font-size:.9rem}

/* Lists */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px 16px}
.lcard{display:flex;flex-direction:column;gap:10px;text-align:left;min-width:0}
.lcard:hover .lcover span{transform:translateY(-2px)}
.lcover{display:flex;height:96px;padding-right:40px;overflow-x:clip}
.lcover span{width:64px;flex:none;margin-right:-28px;transition:transform .2s ease;box-shadow:4px 0 12px rgba(0,0,0,.45);border-radius:6px}
.lcover .art{width:64px}
.lcover-empty{height:96px;border:1px dashed var(--line2);border-radius:6px;box-shadow:none!important}
.lcard-t b{display:block;font-size:.95rem;font-weight:600;line-height:1.3}
.lcard-t small{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:.76rem;margin-top:3px}
.list-page{padding-block:24px 48px}
.list-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:24px}
.list-head h1{font-size:2rem;letter-spacing:-.03em;line-height:1.15;margin:4px 0 10px}
.list-by{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem}
.list-desc{max-width:62ch;white-space:pre-wrap;margin:12px 0 0}
.list-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn.ghost{border-color:transparent;background:none;cursor:default;color:var(--muted)}
.litems{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:24px 16px}
.litems li{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
/* Ranked lists: an editorial numeral above each cover, with a hairline running to the next one. */
.card-rank{display:flex;align-items:center;gap:8px;font:600 1.15rem/1 var(--display);letter-spacing:-.03em;color:var(--fg);font-variant-numeric:tabular-nums}
.card-rank::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.litems li:first-child .card-rank{color:var(--c)}
.litems.ranked .qa{top:calc(1.15rem + 15px)}  /* below the numeral, on the cover */
.lnote{margin:0;font-size:.78rem;color:var(--muted);line-height:1.4}
.litems-ed{display:flex;flex-direction:column;gap:6px}
.li-ed{display:grid;grid-template-columns:auto 40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.li-ed .art{width:40px}
.li-ed b{display:block;font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li-ed small{color:var(--dim);font-size:.74rem}
.li-note{margin-top:4px;padding:5px 8px;font-size:.8rem}
.al-row{grid-template-columns:auto minmax(0,1fr) auto}
.al-row .lcover{height:48px;padding-right:18px}
.al-row .lcover span,.al-row .lcover .art{width:32px}
.al-row .lcover span{margin-right:-20px}
.al-row .lcover-empty{height:48px}
.al-check{font-size:.8rem;color:var(--dim);white-space:nowrap}
.al-row.on .al-check{color:var(--music)}

/* Review pages and comments */
.review-page{padding-block:28px 48px;max-width:860px}
.rv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start}
.rv-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.rv h1{font-size:1.8rem;letter-spacing:-.03em;line-height:1.15;margin:0}
.rv-year{font-size:1.1rem;font-weight:400}
.rv-text{white-space:pre-wrap;font-size:1rem;line-height:1.65;margin:4px 0}
.spoiler{position:relative;cursor:pointer;border-radius:8px}
.spoiler > p{filter:blur(6px);user-select:none;pointer-events:none}
.spoiler > span{position:absolute;inset:0;display:grid;place-items:center;font-size:.82rem;color:var(--fg);text-align:center;padding:0 12px}
.spoiler.shown{cursor:auto}
.spoiler.shown > p{filter:none;user-select:auto;pointer-events:auto}
.spoiler.shown > span{display:none}
.comments{margin-top:36px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:16px}
.comments h2{font-size:1.05rem;margin:0}
.cm{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.cm-top{font-size:.86rem;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.cm p{margin:2px 0 0;white-space:pre-wrap;font-size:.92rem}
.cm-del{margin-left:auto;font-size:.76rem;color:var(--dim)}
.cm-del:hover{color:var(--danger)}
.cm-new{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.cm-box{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.cm-box textarea{width:100%;resize:vertical}

/* Notifications */
.notifs{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.nt{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.nt:last-child{border-bottom:0}
.nt:hover{background:var(--panel2)}
.nt.new{background:color-mix(in srgb,var(--music) 7%,transparent)}
.nt-t{font-size:.9rem;line-height:1.4;min-width:0}
.nt-t b{font-weight:600}
.nt-t small{display:block;color:var(--dim);font-size:.74rem;margin-top:2px}
/* The comment itself, so you can read it without opening the post (long ones are trimmed to four lines). */
.nt-q{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 2px;padding:6px 10px;border-left:2px solid var(--line2);color:var(--muted);font-size:.86rem;line-height:1.45;white-space:pre-wrap;quotes:none}
.nt{align-items:start}
.nt > .av,.nt > .art{margin-top:2px}
.nt .art{width:34px}

/* Stats */
.stats-page{padding-bottom:48px}
.sbig{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:8px 0 20px}
.sbig div{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column}
.sbig b{font:600 1.8rem var(--display);letter-spacing:-.03em;line-height:1.1}
.sbig span{font-size:.8rem;color:var(--muted)}
.scols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.scols h3{font-size:.95rem;margin:0}
.scats{display:flex;flex-direction:column;gap:8px}
.scat{display:grid;grid-template-columns:72px minmax(0,1fr) 32px;gap:10px;align-items:center;font-size:.84rem}
.scat i{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.scat em{display:block;height:100%;background:var(--c, var(--fg));border-radius:4px}
.scat b{text-align:right;font:500 .84rem var(--mono)}
.sbars{display:flex;gap:4px;align-items:flex-end;height:120px;padding-top:6px}
.sbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;min-width:0}
.sbar i{width:100%;max-width:28px;background:var(--music);border-radius:3px 3px 0 0;min-height:0}
.sbar span{font:.66rem var(--mono);color:var(--dim);white-space:nowrap}
.shist .sbar i{background:var(--fg)}
.srank{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;counter-reset:r}
.srank li{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;counter-increment:r}
.srank li span::before{content:counter(r) ". ";color:var(--dim);font-family:var(--mono);font-size:.76rem}
.srank b{font:500 .84rem var(--mono)}
.lock{font:600 .56rem var(--mono);letter-spacing:.06em;padding:2px 4px;border-radius:4px;background:var(--music);color:var(--ink);margin-left:4px;vertical-align:middle}
.pro-up{align-items:flex-start;margin-top:12px}
.pro-up h2{margin:0;font-size:1.2rem}
.pro-up p{margin:0}

@media (max-width:640px){
  .rv{grid-template-columns:96px minmax(0,1fr);gap:16px}
  .rv h1{font-size:1.35rem}
  .list-head h1,.pro-hero h1{font-size:1.5rem}
  .lgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  /* Four across on phones so short lists sit on one row and longer ones fill whole rows. */
  .litems{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px}
  .litems .card{gap:5px}
  .litems .card-rank{font-size:.92rem;gap:5px}
  .litems .card-t{font-size:.72rem}
  .litems .card-m{display:none}
  .litems .qa{width:22px;height:22px;top:3px;right:3px}
  .litems.ranked .qa{top:calc(.92rem + 8px)}
  .litems .qa svg{width:13px;height:13px}
  .lnote{font-size:.7rem}
  .sbig{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sbig div{padding:10px}
  .sbig b{font-size:1.35rem}
  .sbig span{font-size:.72rem}
  .ad{grid-template-columns:1fr}
  .ad .btn{justify-self:start}
}
.top-actions .btn.primary{padding-inline:9px}
/* Between the phone layout and room for the words: the categories go icon-only, so none get cut off. */
@media (min-width:641px) and (max-width:820px){
  nav.main{gap:4px}
  nav.main button{padding:6px;color:var(--c)}
  nav.main button.on{background:color-mix(in srgb,var(--c) 15%,transparent)}
  nav.main .nav-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-ico{display:grid;margin:0}
  .nav-ico .cat-ico{width:21px;height:21px}
}

/* ---------- safety: block, report, moderation (static/safety.js) ---------- */
.btn.icon-only{padding-inline:9px}
.btn.danger-fill{background:var(--danger);border-color:var(--danger);color:var(--ink)}
.menu-b{gap:4px}
.menu-i{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;text-align:left;padding:12px;border-radius:10px}
.menu-i:hover{background:var(--panel2)}
.menu-i svg{margin-top:2px;color:var(--muted)}
.menu-i.crush-i svg{width:20px;height:20px;color:var(--c)}
.menu-i b{display:block;font-weight:600}
.menu-i small{color:var(--dim);font-size:.8rem}
.menu-i.danger b,.menu-i.danger svg{color:var(--danger)}
.bullets{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.9rem}
.reasons{display:flex;flex-direction:column;gap:2px}
.reason{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.9rem}
.reason:hover{background:var(--panel2)}
.reason:has(input:checked){background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)}
.mod-list{display:flex;flex-direction:column;gap:14px}
.mod-h{display:flex;gap:10px;align-items:center;font-size:.84rem}
.mod-h .lnk{margin-left:auto}
.mod-t{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.mod-t p{margin:6px 0 0;white-space:pre-wrap;font-size:.9rem;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.mod-r{margin:0;padding-left:18px;font-size:.84rem;display:flex;flex-direction:column;gap:4px}
.mod-a{display:flex;gap:8px;justify-content:flex-end}

/* Home: popular lists in the rail. */
.lrail{display:flex;flex-direction:column;gap:16px}
.lrail .lcard{flex-direction:row;align-items:center;gap:14px}
.lrail .lcover{height:72px;padding-right:30px;flex:none}
.lrail .lcover span,.lrail .lcover .art{width:48px}
.lrail .lcover span{margin-right:-30px}
.lrail .lcover-empty{height:72px}

/* A small on/off switch (e.g. "My services only" in where-to-watch). */
.sw{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:.8rem;color:var(--muted);white-space:nowrap}
.sw:hover{color:var(--fg)}
.sw-t{position:relative;width:30px;height:17px;border-radius:9px;background:var(--line2);transition:background .15s;flex:none}
.sw-t::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--fg);transition:transform .15s}
.sw[aria-checked="true"]{color:var(--fg)}
.sw[aria-checked="true"] .sw-t{background:var(--music)}
.sw[aria-checked="true"] .sw-t::after{transform:translateX(13px);background:var(--ink)}

/* Legal pages */
.legal{max-width:720px;padding-block:32px 56px}
.legal h1{font-size:2rem;letter-spacing:-.03em;margin:6px 0 10px}
.legal-intro{font-size:1.05rem;color:var(--muted)}
.legal h2{font-size:1.05rem;margin:28px 0 8px}
.legal p,.legal li{line-height:1.65;color:var(--muted)}
.legal ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal b{color:var(--fg);font-weight:600}
.legal a,#foot a{color:var(--muted)}
.legal-nav{margin-top:28px;font-size:.9rem}

/* Visitors without an account, on a shared page. */
.guest-bar{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:16px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:.9rem;color:var(--muted)}
.guest-bar b{color:var(--fg)}
#guestActions .btn{white-space:nowrap}
@media (max-width:640px){.guest-bar{flex-direction:column;align-items:flex-start}}
nav.main:empty{display:none}
#guestActions{margin-left:auto}

/* Tags on diary entries */
.ltags{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:middle}
td .ltags,.rv-main .ltags{margin:4px 0 0;display:flex}
.ltag{font:500 .7rem var(--mono);color:var(--dim);padding:1px 6px;border-radius:5px;background:var(--panel2)}
button.ltag:hover{color:var(--fg)}
.tag-on{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 14px;padding:2px 4px 2px 12px;border:1px solid var(--line2);border-radius:8px;font-size:.84rem;color:var(--muted)}
.tag-on b{color:var(--fg);font-family:var(--mono);font-weight:500}

/* Getting started (home) */
.start{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel);display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.start-h{display:grid;grid-template-columns:minmax(0,1fr) auto 34px;gap:8px;align-items:center;margin:-6px -8px -4px 0}
.start-h b{font:600 .95rem var(--display);letter-spacing:-.02em;color:var(--fg)}
.start-bar{height:4px;border-radius:2px;background:var(--panel2);overflow:hidden}
.start-bar i{display:block;height:100%;background:var(--music);border-radius:2px;transition:width .3s}
.start-next{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
.start-next:hover{border-color:var(--fg)}
.start-next b{display:block;font-size:.92rem;font-weight:600}
.start-next small{color:var(--muted);font-size:.78rem;line-height:1.35;display:block}
.start-go{color:var(--muted);font-size:1.1rem}
.start-later{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.start-later button{min-height:36px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:.8rem;color:var(--muted);text-align:center}
.start-later button:hover{border-color:var(--line2);color:var(--fg)}
@media (max-width:640px){
  .start{padding:10px 12px 12px}
  .start-later{grid-template-columns:repeat(2,minmax(0,1fr))}
  .start-later button:last-child:nth-child(odd){grid-column:1/-1}
}

/* Creator pages */
.crlink{font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.crlink:hover{text-decoration-color:currentColor;color:var(--fg)}
.creator{padding-block:28px 48px}
.cr-head{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:22px}
.cr-head h1{font-size:2rem;letter-spacing:-.03em;margin:4px 0 8px}
.cr-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--panel2)}
.cr-photo.sq{border-radius:12px}
.cr-ph{display:grid;place-items:center;font:600 2.6rem var(--display);color:var(--c)}
.cr-work{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-role{font-size:.72rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-seen{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--music);color:var(--ink);display:grid;place-items:center;font-size:.72rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.4)}
@media (max-width:640px){.cr-head{grid-template-columns:72px minmax(0,1fr);gap:14px}.cr-photo{width:72px;height:72px}.cr-head h1{font-size:1.5rem}}

/* TV: season and episode picker in the log form */
.tvpick{display:flex;gap:8px;flex-wrap:wrap}
.tvpick select{width:auto;flex:1;min-width:140px}

.ad.ad-net{display:block;border-style:solid}
.ad.ad-net ins{margin-top:6px;min-height:90px}

.set-push{display:flex;gap:12px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.set-push b{display:block;font-size:.9rem}
.set-push .sw{align-self:center}

/* TV: seasons and episodes on a show's page */
.tv-tabs{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.tv-tabs::-webkit-scrollbar{display:none}
.tv-ssel{width:auto;align-self:flex-start}
.tv-sh{display:flex;justify-content:flex-end;margin-bottom:-4px}
.tv-ep{grid-template-columns:32px minmax(0,1fr) auto}
.tv-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 .76rem var(--mono);color:var(--muted);border:1px solid var(--line2)}
.tv-ep.seen .tv-n{background:var(--c);border-color:var(--c);color:var(--ink)}
.tv-ep b{display:block;font-weight:500;font-size:.9rem}
.tv-ep small{color:var(--dim);font-size:.76rem}

/* The front door for people without an account */
.land-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(60% 90% at 88% 8%,color-mix(in srgb,#c1121f 16%,transparent),transparent 70%)}
.land-peaks{position:absolute;right:-4%;bottom:-6%;width:min(62%,780px);height:auto;opacity:.16;pointer-events:none}
.land-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:end;padding-block:64px 44px}
.land-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:40px}
.land-hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.04em}
.land-hero h1 > span{display:block}
.land-cats{font-size:.56em;line-height:1.3;letter-spacing:-.025em;margin-bottom:6px}
.land-cats{display:flex;flex-wrap:wrap;gap:0 .55em}
.land-cats span,.land-shelf small{color:var(--dim);transition:color .45s ease}
.land-cats span{white-space:nowrap}
.land-cats span.spot,.land-shelf button.spot small{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.land-cats span,.land-shelf small{color:var(--fg)}}
.land-hero p{margin:0;color:var(--muted);font-size:1.02rem;max-width:44ch}
.btn.land-cta{padding:12px 22px;font-size:1rem;font-weight:600;justify-content:center}
/* A rolodex: the card in the spotlight large in the middle, its neighbors medium, the outer two small. Sizes are shares
   of the rail's width (cqw), so it fits any screen. */
.land-rail{container-type:inline-size;min-width:0;width:100%}
.land-shelf{position:relative;height:calc(40.5cqw + 62px)}
.land-shelf button{position:absolute;left:50%;bottom:0;width:27cqw;margin-left:-13.5cqw;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;pointer-events:none;transition:transform .6s cubic-bezier(.22,.8,.3,1),opacity .24s ease}
.land-shelf button > *{pointer-events:auto}
.land-shelf .lp0{z-index:3;transform:none}
.land-shelf .lp1{z-index:2;transform:translateX(24.5cqw)}
.land-shelf .lp-1{z-index:2;transform:translateX(-24.5cqw)}
.land-shelf .lp2{z-index:1;transform:translateX(42.5cqw)}
.land-shelf .lp-2{z-index:1;transform:translateX(-42.5cqw)}
.land-shelf .lp-out{opacity:0}
.land-shelf .lp1 .land-stack,.land-shelf .lp-1 .land-stack{transform:scale(.74)}
.land-shelf .lp2 .land-stack,.land-shelf .lp-2 .land-stack{transform:scale(.52)}
.land-stack{display:block;position:relative;width:100%;aspect-ratio:2/3;border-radius:8px;box-shadow:0 18px 36px -16px rgba(0,0,0,.9),0 0 0 1px var(--line2);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.22,.8,.3,1),box-shadow .45s ease}
.land-stack > .art{position:absolute;inset:0;width:100%;border-radius:8px;box-shadow:none;opacity:0;transition:opacity .7s ease}
.land-stack > .art.on{opacity:1}
.land-shelf button.spot .land-stack,.land-shelf button:hover .land-stack,.land-shelf button:focus-visible .land-stack{box-shadow:0 24px 40px -16px rgba(0,0,0,.95),0 0 0 1.5px var(--fg)}
.land-shelf .cat-badge{margin-top:4px}
.land-wait .art{background:var(--panel2);box-shadow:0 0 0 1px var(--line);animation:land-wait 1.4s ease-in-out infinite alternate}
@keyframes land-wait{from{opacity:.55}to{opacity:1}}
.land-wait .art > *{display:none}
.land-shelf small{font-size:.76rem;line-height:1}
.land-f{display:flex;flex-direction:column;gap:18px;padding-block:44px 48px}
.land-f h2{font-size:clamp(1.3rem,2.6vw,1.8rem)}
.land-grid{--c:var(--fg);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px 40px}
.land-grid > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.land-grid .cat-badge svg{width:20px;height:20px}
.land-grid b{display:block;font-size:.98rem;font-weight:600;color:var(--fg)}
.land-grid p{margin:2px 0 0;font-size:.88rem;line-height:1.45;color:var(--muted)}
.land-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;padding-bottom:40px}
.land-cols > *{min-width:0}
.land-end{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding-block:32px 56px;border-top:1px solid var(--line)}
.land-end h2{font-size:clamp(1.4rem,3vw,2rem)}
@media (max-width:820px){.land-cols{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:900px){.land-in{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:36px 28px}.land-copy{padding-bottom:0}.land-peaks{width:96%;opacity:.12}}
@media (max-width:640px){.land-shelf button{gap:6px}.land-shelf{height:calc(40.5cqw + 50px)}.land-shelf .cat-badge{margin-top:2px}.land-shelf small{font-size:.62rem}.land-f{padding-block:32px 36px}.land-grid{grid-template-columns:minmax(0,1fr);gap:18px}}
.idrow > *{min-width:0}
.idrow h1{overflow-wrap:anywhere}

/* Settings: three tabs, so your profile, preferences and account stop sharing one long form */
.set-tabs{margin:0;width:100%}
.set-tabs button{flex:1}
.set-pane{display:flex;flex-direction:column;gap:16px}
.set-pane[hidden]{display:none}
.set-sec{display:flex;flex-direction:column;gap:10px}
.set-sec + .set-sec{border-top:1px solid var(--line);padding-top:16px}
.set-sec h3{font-size:.92rem;margin:0}
.set-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.set-view{align-self:flex-start;font-size:.86rem}
#setBio{resize:vertical;min-height:64px;font:inherit}
.svc-grid .svc-more{justify-content:center;color:var(--muted);border-style:dashed}
.set-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.set-list > *{display:block;width:100%;text-align:left;padding:11px 12px;font-size:.9rem;color:var(--fg)}
.set-list > * + *{border-top:1px solid var(--line)}
.set-list > *:hover{background:var(--panel2)}
#setFoot[hidden]{display:none}
.set-plan .btn{white-space:nowrap;flex:none}
.set-list a{text-decoration:none;border-bottom:0}

/* Find your people: follow someone for what they'd show you */
.disc{margin-top:32px;scroll-margin-top:110px}
.disc .sec-h{margin-bottom:2px}
.disc-sub{display:block;margin:0 0 12px}
.disc-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,260px);gap:12px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.disc-card{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--panel)}
.disc-h{display:flex;gap:10px;align-items:center;min-width:0}
.disc-h .who{flex:1;min-width:0;text-align:left}
.disc-h b{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-h small{color:var(--dim);font-size:.76rem}
.disc-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.disc-kind{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--panel2);color:var(--music)}
.disc-kind.novel{color:var(--crush)}
.disc-card p{margin:0;font-size:.84rem;color:var(--muted);min-height:2.5em}
.disc-titles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto}
.disc-card .btn{justify-content:center}
.imp-note{padding:10px 12px;border:1px solid var(--line2);border-radius:8px;font-size:.84rem;color:var(--fg);background:var(--panel2)}
#impDrop{cursor:default;gap:10px}
#impDrop .hero-btns{justify-content:center}