@layer touch-forms;
:root{
  --bg:#141414;--bg-2:#181818;--bg-3:#232323;--bg-4:#2f2f2f;--line:#2e2e2e;
  /* The faintest text, --dim, still reads at 4.5:1 or more on every surface, #141414 to #262626. */
  --ink:#fff;--ink-2:#e2e2e2;--muted:#a8a8a8;--dim:#8f8f8f;
  --brand:#ffb020;--brand-2:#ff6a3d;--match:#3fcf7e;
  --card:112px;--nav:68px;--r:6px;
  /* What the screen covers: the status bar, notch or Dynamic Island, the home indicator
     and, in landscape, the sides. Whatever meets an edge keeps clear of it through these. */
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  --pad:16px;--gutter:max(var(--pad),var(--safe-l),var(--safe-r));
  /* The dock: its height, and the foot of the screen it takes, the home indicator's strip with it. */
  --dock:56px;--dock-space:calc(var(--dock) + var(--safe-b));
  /* The type scale: a page's h1, and the h2s under it, a row's name among them. */
  --h1:clamp(24px,3vw,36px);--h2:clamp(18px,1.6vw,22px);
  color-scheme:dark;
}
@media(min-width:600px){:root{--card:136px}}
@media(min-width:760px){:root{--pad:4vw;--card:152px;--nav:68px;--dock:0px;--dock-space:var(--safe-b)}}
@media(min-width:1100px){:root{--card:176px}}
@media(min-width:1500px){:root{--card:196px}}

*{box-sizing:border-box}
/* The page never rubber-bands: a sideways swipe on a row that set off a little diagonal pulled
   the whole page down and let it spring back. */
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none;scroll-padding:calc(var(--nav) + var(--safe-t)) 0 var(--dock-space)}
html.modal-open{overflow:hidden}
body{margin:0;overscroll-behavior-y:none;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none!important}
.sr,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;z-index:99;top:calc(8px + var(--safe-t));left:calc(8px + var(--safe-l));width:auto;height:auto;clip:auto;padding:8px 12px;background:#fff;color:#000}
.i{display:inline-flex;flex:none}
.i svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* nav ------------------------------------------------------------------ */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:22px;
  height:calc(var(--nav) + var(--safe-t));padding:var(--safe-t) var(--gutter) 0;
  background:linear-gradient(#000c,#0000);transition:background-color .35s}
.nav.solid{background-color:#141414}
.brand{flex:none;padding:12px 0;font:900 21px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:none;gap:20px}
.links a{font-size:14px;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .2s}
.links a:hover{color:var(--muted)}
.links a[aria-current=page]{color:#fff;font-weight:700}
.tools{margin-left:auto;display:flex;flex:1;min-width:0;align-items:center;justify-content:flex-end;gap:10px}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;
  color:#fff;cursor:pointer;font-size:15px}
.icon-btn:hover{background:#ffffff1a}
.find{display:flex;align-items:center;flex:none;min-width:0;width:220px;height:44px;
  border:1px solid var(--bg-2);border-radius:4px;background:var(--bg);
  transition:width .22s cubic-bezier(.2,.8,.2,1),border-color .18s,background .18s}
.find input{display:block;flex:1;width:0;min-width:0;border:0;background:none;outline:none;
  padding:10px 0;font-size:16px;appearance:none}
.find input::-webkit-search-cancel-button{-webkit-appearance:none}
.find .icon-btn{width:44px;height:42px;border-radius:0;flex:none;padding:0}
.find .icon-btn:hover{background:#ffffff0d}
.find.open{width:100%;max-width:720px;border-color:var(--bg-3);background:var(--bg)}
.find .nav-filter{position:relative;flex:none;width:44px;height:42px;margin-left:4px}
.nav-filter::before{content:'';position:absolute;left:0;top:7px;bottom:7px;border-left:1px solid var(--bg-3)}
.nav-filter .i svg{width:19px;height:19px}
.nav-filter.active{color:var(--brand)}
.nav-filter.active::after{content:'';position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.nav.searching .brand,.nav.searching .links,.nav.searching .avatar{display:none}
.nav.searching .tools{justify-content:center}
.avatar{position:relative;width:32px;height:32px;flex:none;border:0;border-radius:6px;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#e04e8a);color:#141414;font-size:16px}
/* The profile button is a 44px tap round a 32px tile, and takes the tile's room in the nav. */
button.avatar{width:44px;height:44px;margin:-6px;background:none;isolation:isolate}
button.avatar::before{content:'';position:absolute;inset:6px;z-index:-1;border-radius:6px;
  background:linear-gradient(135deg,var(--brand),#e04e8a)}
button.avatar:focus-visible{outline-offset:-4px}
.avatar.big{width:48px;height:48px;border-radius:8px;font-size:24px}
@media(min-width:760px){
  .brand{font-size:26px}
  .links{display:flex}
}

/* Search shares the wordmark's row; small tablets keep their section links below it. */
@media(min-width:760px) and (max-width:1023px){
  :root{--nav:104px}
  .nav{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:56px 32px;
    gap:0 20px;padding-bottom:8px}
  .nav .brand{grid-column:1;grid-row:1}
  .nav .tools{grid-column:2;grid-row:1;width:100%}
  .nav .links{grid-column:1 / -1;grid-row:2;justify-self:start;gap:22px}
  .nav .find{width:240px}
  .nav .find.open{width:100%;max-width:720px}
  .nav.searching .tools{grid-column:1 / -1}
  .nav.searching .links{display:flex}
  .brand{font-size:22px}
  .links a{font-size:13px}
}
@media(max-width:759px){
  .nav{gap:10px}
  .nav .brand{font-size:clamp(17px,4.9vw,21px)}
  .nav .tools{gap:8px}
  .nav .find{width:clamp(118px,42vw,154px);max-width:calc(100% - 40px)}
  .nav .find.open{width:100%;max-width:100%}
  .nav .find .nav-filter{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .find{transition:none}
}

/* dock (phones) --------------------------------------------------------- */
/* A solid bar on the bottom edge, in the page's own black, its foot running under the home
   indicator; in Safari it rests on the address bar. While the page scrolls it folds away and
   leaves one round button, for the section you are in (main.js); a pause brings it back, and
   so does that button. */
.dock{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  height:var(--dock-space);padding:0 var(--safe-r) var(--safe-b) var(--safe-l);background:var(--bg);
  border-top:1px solid var(--line);transition:transform .26s cubic-bezier(.2,.8,.2,1) .06s}
.dock.away:not(:focus-within){transform:translateY(100%);transition:transform .16s cubic-bezier(.4,0,1,1)}
.dock a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:0;font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:.01em;color:var(--muted);
  text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .2s,opacity .15s}
.dock a .i svg{width:24px;height:24px}
/* The section you are in: white, a heavier line, and a short bar of the brand along the top edge. */
.dock a[aria-current=page]{color:#fff}
.dock a[aria-current=page] .i svg{stroke-width:2.2}
.dock a[aria-current=page]::before{content:'';position:absolute;top:-1px;left:50%;width:22px;height:3px;margin-left:-11px;
  border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.dock a:active{color:#fff;opacity:.7}
.dock a:focus-visible{outline-offset:-2px}
.dock-label{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The one button left while the page scrolls, low on the left, clear of the home indicator. */
.dock-mini{position:fixed;left:max(16px,calc(var(--safe-l) + 12px));bottom:calc(16px + var(--safe-b));z-index:30;
  display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid #3a3a3a;border-radius:50%;
  background:var(--bg-3);color:#fff;box-shadow:0 6px 18px #00000080;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .12s linear,transform .16s ease-in}
.dock-mini .i svg{width:24px;height:24px;stroke-width:2.2}
.dock.away:not(:focus-within)~.dock-mini{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .18s ease-out .09s,transform .22s cubic-bezier(.2,.8,.2,1) .09s}
.dock-mini:active{transform:scale(.92)}
/* A new view starts with the dock whole at once, not easing back in. */
.dock.still,.dock.still~.dock-mini{transition:none}
@media(forced-colors:active){.dock{border-top:1px solid CanvasText}.dock a[aria-current=page]{outline:2px solid Highlight}
  .dock-mini{border-color:CanvasText}}
@media(min-width:760px){.dock,.dock-mini{display:none}}

/* The page runs at least a screen tall, so the footer starts below the first screen and
   never sits in view while the page is still on its way, to be pushed off it as it lands. */
main{min-height:100vh;padding-bottom:calc(var(--dock-space) + 24px);outline:none}
.view.page{padding-top:calc(var(--nav) + var(--safe-t) + 18px)}
/* A page's h1 stands 16px over what follows it, on every page. */
.page-h{font:800 var(--h1)/1.15 -apple-system,BlinkMacSystemFont,sans-serif;margin:0 var(--gutter) 16px}
.page-h2{font:700 var(--h2)/1.3 -apple-system,BlinkMacSystemFont,sans-serif;margin:34px var(--gutter) 10px}
.note{margin:4px var(--gutter) 16px;color:var(--muted);font-size:14px}
.lede{color:var(--ink-2);font-size:16px;margin:6px 0 0}

/* buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 20px;
  border:0;border-radius:var(--r);background:#6d6d6eb3;color:#fff;font-weight:700;font-size:15px;cursor:pointer;
  white-space:nowrap;text-decoration:none}
.btn:hover{background:#6d6d6e80}
.btn.primary{background:#fff;color:#000}
.btn.primary:hover{background:#ffffffc4}
.btn.primary:disabled{background:#555;color:#999;cursor:default}
.btn.ghost{background:none;border:1px solid #ffffff59}
.btn.ghost:hover{border-color:#fff}
.btn .i svg{width:22px;height:22px}
.round{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:2px solid #ffffff80;background:#2a2a2acc;color:#fff;text-decoration:none;transition:border-color .15s,background .15s}
.round:hover{border-color:#fff;background:#3a3a3acc}
.round .i svg{width:20px;height:20px}
.round.small{width:34px;height:34px}
.round.small .i svg{width:17px;height:17px}
.round[aria-pressed=true]{border-color:#fff;background:#fff;color:#141414}
.round.heart[aria-pressed=true] .i svg,.round.up[aria-pressed=true] .i svg,.round.down[aria-pressed=true] .i svg{fill:currentColor}
.link{background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:#fff}

/* hero ----------------------------------------------------------------- */
.hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(500px,80vh,860px);overflow:hidden;
  isolation:isolate}
.hero-bg,.hero-shade{position:absolute;inset:0;z-index:-1}
.hero-blur{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);object-fit:cover;
  filter:blur(34px) saturate(1.25) brightness(.5)}
.hero-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:0;transition:opacity .9s ease}
.hero-slide.has-backdrop .hero-backdrop{opacity:1}
.hero-shade{background:linear-gradient(to top,var(--bg) 0,#141414d9 14%,#14141400 48%),
  linear-gradient(77deg,#141414f0 0,#14141480 38%,#14141400 70%)}
.hero-body{width:100%;padding:0 var(--gutter) clamp(90px,14vw,190px)}
.hero-copy{max-width:600px}
/* Scoped under .hero so the poster-tile rules further down cannot override them. */
.hero .hero-poster{display:none}
.hero-title{font:800 clamp(30px,4.6vw,64px)/1.03 -apple-system,BlinkMacSystemFont,sans-serif;margin:0 0 14px;
  text-shadow:0 2px 16px #0009;overflow-wrap:anywhere}
.hero-why{margin:0 0 10px;color:var(--brand);font-weight:700;font-size:15px;text-shadow:0 1px 6px #000c}
.hero-summary{margin:12px 0 0;font-size:clamp(14px,1.15vw,18px);line-height:1.45;color:var(--ink-2);
  text-shadow:0 1px 8px #000b;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-acts{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.hero .meta{text-shadow:0 1px 6px #000c}
@media(min-width:760px){
  .hero-slide:not(.has-backdrop) .hero-poster{display:block;position:absolute;right:calc(var(--gutter) + 2vw);
    bottom:clamp(90px,12vw,170px);width:clamp(180px,17vw,270px);border-radius:8px;box-shadow:0 24px 60px #000c}
}
@media(max-width:759px){
  .hero{min-height:0;padding-top:calc(var(--nav) + var(--safe-t) + 8px)}
  .hero-backdrop{display:none}
  .hero-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:8px}
  .hero .hero-poster{display:block;width:min(70vw,330px);border-radius:10px;box-shadow:0 20px 44px #000d;margin-bottom:14px}
  .hero-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hero-summary{display:none}
  .hero .meta{justify-content:center}
  .hero-acts{justify-content:center;margin-top:14px}
  .hero-acts .btn{min-width:130px}
}
/* A phone on its side: the hero fits the screen below the nav, and the first row peeks in. */
@media(min-width:760px) and (max-height:520px){
  .hero{min-height:100vh;min-height:100svh;padding-top:calc(var(--nav) + var(--safe-t))}
  .hero-body{padding-bottom:96px}
  .hero-summary{-webkit-line-clamp:2;line-clamp:2}
  .hero-slide:not(.has-backdrop) .hero-poster{bottom:96px;width:calc((100svh - var(--nav) - var(--safe-t) - 120px) * 2 / 3)}
}
/* The featured shows (main.js): a track holding a slide for each show, all in one place and
   each set in its slot by a transform, so the carousel is as tall as its tallest slide and
   slides along with no layout. Each slide is laid out as the hero always was, and on a phone
   carries the room the hero kept for the nav, so its picture runs up behind it; there the
   slides line up at the top, posters level, whatever their words below. */
.hero:has(>.hero-track){padding-top:0}
.hero-track{display:grid;grid-template-columns:minmax(0,1fr);flex:1 1 auto;align-self:stretch;min-width:0;
  touch-action:pan-y;will-change:transform}
.hero-slide{grid-area:1/1;position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  will-change:transform}
.hero.dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}
/* Its controls: pause and a dot for each show in a pill, over the foot of the poster on a
   phone and midway between the words and the rows on a wide screen, and for a mouse, arrows
   at either edge, shown on hover and focus. */
.hero-controls{--dot:24px;position:absolute;z-index:3;left:50%;
  bottom:calc((clamp(60px,9vw,150px) + clamp(90px,14vw,190px)) / 2 - 16px);display:flex;align-items:center;
  padding:0 5px 0 2px;border-radius:16px;background:#000000a6;transform:translateX(-50%)}
.hero-play,.hero-dot{position:relative;display:grid;place-items:center;height:32px;padding:0;border:0;background:none;color:#fff;
  cursor:pointer}
.hero-play{width:32px;border-radius:50%}
/* Each takes a tap 44px tall, and play one 44px square, round the same small marks. */
.hero-play::after,.hero-dot::after{content:'';position:absolute;inset:-6px 0}
.hero-play::after{inset:-6px}
.hero-play .i svg{width:15px;height:15px}
/* The show shown is a bar over its dot that slides from dot to dot (--at, from main.js), a
   transform, so a turn lays nothing out. */
.hero-dots{position:relative;display:flex}
.hero-dots::after{content:'';position:absolute;top:50%;left:calc((var(--dot) - 18px) / 2);width:18px;height:7px;margin-top:-3.5px;
  border-radius:4px;background:#fff;pointer-events:none;transform:translateX(calc(var(--at,0) * var(--dot)));
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
.hero-dot{width:var(--dot)}
.hero-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:#ffffff73}
.hero-dot:hover::before{background:#ffffffb3}
.hero-arrow{position:absolute;z-index:3;top:calc(var(--nav) + var(--safe-t));bottom:clamp(60px,9vw,150px);display:none;
  width:max(var(--gutter),48px);padding:0;border:0;color:#fff;cursor:pointer;opacity:0;transition:opacity .2s}
.hero-arrow.prev{left:0;background:linear-gradient(90deg,#14141480,#14141400)}
.hero-arrow.next{right:0;background:linear-gradient(270deg,#14141480,#14141400)}
.hero-arrow .i svg{width:40px;height:40px;filter:drop-shadow(0 1px 3px #000b);transition:transform .2s}
.hero-arrow:hover .i svg{transform:scale(1.2)}
@media(hover:hover) and (pointer:fine){
  .hero-arrow{display:grid;place-items:center}
  .hero:hover .hero-arrow,.hero:focus-within .hero-arrow{opacity:1}
}
@media(max-width:759px){
  .hero-slide{align-items:flex-start;padding-top:calc(var(--nav) + var(--safe-t) + 8px)}
  .hero-controls{top:calc(var(--nav) + var(--safe-t) + 8px + min(70vw,330px) * 1.5 - 42px);bottom:auto}
}
/* A phone on its side has no room under the buttons, so the pill sits level with them on the
   foot of the poster, where that shows, as it does on a phone held upright. */
@media(min-width:760px) and (max-height:520px){
  .hero-slide{padding-top:calc(var(--nav) + var(--safe-t))}
  .hero-controls{left:auto;right:calc(var(--gutter) + 2vw + (100svh - var(--nav) - var(--safe-t) - 120px) / 3);bottom:106px;
    transform:translateX(50%)}
}
@media(prefers-reduced-motion:reduce){.hero-play{display:none}.hero-controls{padding-left:5px}}
@media(forced-colors:active){
  .hero-controls{border:1px solid CanvasText}
  .hero-dot::before,.hero-dots::after{forced-color-adjust:none;background:GrayText}
  .hero-dots::after{background:Highlight}
}

/* rows ----------------------------------------------------------------- */
.rows{position:relative;z-index:2}
@media(min-width:760px){.rows{margin-top:clamp(-150px,-9vw,-60px)}}
.row{margin:0 0 clamp(18px,2.6vw,40px)}
.row-title{margin:0 var(--gutter) 2px;font:700 var(--h2)/1.3 -apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink-2)}
.row-sub{margin:0 var(--gutter);font-size:13px;line-height:1.35;color:var(--muted)}
.slider{position:relative}
/* A row scrolls sideways only. The Top 10's tall numbers stood a few pixels proud of it, and a
   swipe that set off a little diagonal scrolled the row up and down by them. */
.track{display:flex;gap:8px;margin:0;padding:10px var(--gutter) 16px;list-style:none;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track>li{flex:none;scroll-snap-align:start;display:flex;align-items:flex-end}
/* A row that goes round keeps copies of its last cards before its first, 8px apart as all
   cards are. At rest on its first card, as it first shows, its margin stays as clear of
   them as a row that does not go round (main.js, markStart), until it moves. */
.track.at-start{-webkit-mask-image:linear-gradient(90deg,#0000 calc(var(--gutter) - 8px),#000 0);
  mask-image:linear-gradient(90deg,#0000 calc(var(--gutter) - 8px),#000 0)}
.nudge{position:absolute;top:10px;bottom:16px;z-index:5;display:none;width:max(var(--gutter),44px);border:0;
  background:#141414b3;color:#fff;cursor:pointer;opacity:0;transition:opacity .2s}
.nudge.prev{left:0;border-radius:0 6px 6px 0}
.nudge.next{right:0;border-radius:6px 0 0 6px}
.nudge .i svg{width:34px;height:34px;transition:transform .2s}
.nudge:hover .i svg{transform:scale(1.2)}
@media(hover:hover) and (pointer:fine){
  .nudge{display:grid;place-items:center}
  .slider:hover .nudge,.nudge:focus-visible{opacity:1}
}
.row-empty{margin:4px var(--gutter);color:var(--muted);font-size:14px}
.retry{margin:8px var(--gutter)}
/* What to do next under an empty part of a page (nextSteps in main.js): clear the filters
   hiding everything, show all, or go and find shows. In a list of cards it spans the list. */
.empty-steps{display:flex;flex-wrap:wrap;gap:8px;margin:8px var(--gutter) 24px}
.empty-steps .btn{min-height:38px;padding:6px 16px;font-size:14px}
.tracking-native-saved+.empty-steps{display:none}
.list-empty{grid-column:1/-1;font-size:14.5px}
.list-empty p{margin:0 0 10px}
.list-empty .empty-steps{margin:0}
.more-rows{display:flex;flex-wrap:wrap;justify-content:center;min-height:1px;margin:0 var(--gutter) 12px}
/* Rows on their way, laid across the page as the rows above are. */
.more-loading{flex:1 1 100%;min-width:0;margin:0 calc(-1 * var(--gutter))}
/* The foot of the page, once there are no more rows. */
.page-end{display:flex;flex-direction:column;align-items:center;gap:12px;margin:clamp(16px,3vw,40px) 0 8px;
  color:var(--muted);font-size:14px;text-align:center}
.page-end p{margin:0;max-width:34em}
.page-end .btn{min-height:38px;padding:6px 16px;font-size:14px}
/* Before anything is rated: an invitation to pick a few shows. */
.invite{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;
  margin:0 var(--gutter) clamp(18px,2.6vw,34px);padding:16px 18px;border:1px solid #4a3a16;border-radius:8px;
  background:linear-gradient(100deg,#2b2110,#1c1c1c 70%)}
.invite p{margin:0;font-weight:700;font-size:15.5px}
.invite .btn{min-height:38px;padding:6px 16px;font-size:14px}

/* cards ---------------------------------------------------------------- */
.card{position:relative;display:block;width:var(--card);padding:0;border:0;background:none;cursor:pointer;
  text-align:left;border-radius:var(--r)}
.card-hit{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;
  text-align:left;text-decoration:none;border-radius:var(--r)}
.art{position:relative;display:block;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,hsl(var(--h,220) 42% 30%),hsl(var(--h,220) 36% 12%))}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.art.loaded img{opacity:1}
/* A full-size picture's poster shows first, over it, and fades as the picture comes in. */
.art.previewed img.preview{opacity:1}
.art.loaded img.preview{opacity:0}
.art-name{position:absolute;inset:auto 8px 10px;font-weight:700;font-size:13px;line-height:1.2;color:#fff;
  text-shadow:0 1px 4px #000;overflow-wrap:anywhere}
.card-meta{display:none}
/* On a mouse, hovering a poster lifts it and shows its match and quick buttons. */
@media(hover:hover) and (pointer:fine){
  .card{transition:transform .25s ease}
  .card:hover,.card:focus-within{transform:scale(1.07);z-index:4}
  .card-meta{position:absolute;inset:auto 0 0;display:block;padding:38px 8px 8px;border-radius:0 0 var(--r) var(--r);
    background:linear-gradient(#0000,#000000e6 42%);font-size:12px;color:var(--ink-2);opacity:0;visibility:hidden;
    transition:opacity .2s,visibility .2s;pointer-events:none}
  .card:hover .card-meta,.card:focus-within .card-meta{opacity:1;visibility:visible}
  .card-meta button{pointer-events:auto}
  .quick{display:flex;align-items:center;gap:5px;margin-bottom:7px}
  .quick .push{margin-left:auto}
  .card-words{display:flex;flex-wrap:wrap;gap:1px 7px;align-items:baseline}
  .card-words b{font-size:12.5px}
  .card-words .card-name{flex-basis:100%;font-weight:700;font-size:13px;color:#fff;overflow-wrap:anywhere}
  .card-genres{flex-basis:100%;color:var(--muted)}
}
.round.tiny{width:28px;height:28px;border-width:1.5px}
.round.tiny .i svg{width:14px;height:14px}
/* Top 10 and New, over the poster. */
.badge-top{position:absolute;top:0;right:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:25px;height:34px;border-radius:0 0 3px 3px;background:linear-gradient(var(--brand),var(--brand-2));color:#141414;
  box-shadow:0 2px 6px #0009;line-height:1}
.badge-top small{font-size:7px;font-weight:900;letter-spacing:.04em}
.badge-top b{font-size:12.5px;font-weight:900;letter-spacing:-.03em}
.badge-new{position:absolute;left:0;bottom:12px;padding:3px 8px 3px 7px;border-radius:0 3px 3px 0;background:var(--brand);
  color:#141414;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 2px 6px #0008}
.callout{position:absolute;inset:auto 0 0;padding:22px 7px 7px;border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(#0000,#000000d9 55%);color:#fff;font-size:11.5px;font-weight:700;line-height:1.25;
  text-shadow:0 1px 3px #000;overflow-wrap:anywhere}
.has-callout .badge-new{bottom:auto;top:10px}
@media(hover:hover) and (pointer:fine){.card:hover .callout,.card:focus-within .callout{visibility:hidden}}
/* A rank stands against its poster alone, its foot level with the poster's, whatever the card
   carries beneath (an episode matrix): the number is as tall as the poster, and sits at its foot. */
.ranked>li{position:relative;align-items:flex-start}
.num{flex:none;display:flex;align-items:flex-end;height:calc(var(--card) * .86 * 1.5);margin-right:-.14em;
  font:900 calc(var(--card) * .92)/.78 -apple-system,BlinkMacSystemFont,"Arial Black",sans-serif;
  letter-spacing:-.07em;color:var(--bg);-webkit-text-stroke:3px #5e5e5e;user-select:none}
.ranked .card{width:calc(var(--card) * .86)}
.soon-date{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.soon .card-meta .card-name{flex-basis:auto}
.badge-rate{position:absolute;bottom:6px;right:6px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#141414d9;color:#fff}
.badge-rate .i svg{width:15px;height:15px;fill:currentColor}
.badge-rate.down{color:var(--dim)}

/* grids ---------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card),1fr));gap:14px 8px;
  margin:0;padding:0 var(--gutter);list-style:none}
.grid .card{width:100%}
.grid-caption{display:block;margin-top:6px;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
/* A show's name under its poster, two lines at most, over a muted line such as its year. */
.grid-caption.titled{display:grid;gap:2px}
.cap-name,.cap-meta{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cap-name{font-size:13px;font-weight:600;line-height:1.25;color:var(--ink)}
.cap-meta{font-size:12px;line-height:1.25;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 var(--gutter) 12px}
.chip{border:1px solid #ffffff4d;border-radius:18px;background:none;padding:6px 14px;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.chip:hover{border-color:#fff}
.chip[aria-pressed=true]{background:#fff;border-color:#fff;color:#141414;font-weight:700}
.empty{grid-column:1/-1;color:var(--muted);font-size:14.5px;padding:10px 0}
/* A long list of ratings: found by name, and shown a page at a time. */
.rated-find{margin:0 var(--gutter) 12px;max-width:420px}
.rated-find input{width:100%;padding:10px 12px;border:1px solid #444;border-radius:6px;background:#2a2a2a;
  color:var(--ink);font-size:16px;-webkit-appearance:none;appearance:none}
.rated-find input:focus{border-color:#fff;outline:none;background:#333}

/* search --------------------------------------------------------------- */
/* Recent searches: on the results page on phones, dropping from the nav on wide screens. */
.find{position:relative}
.recent{margin:0 var(--gutter) 14px}
.recent-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.recent-h{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.recent-clear{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink-2);font-size:14px;font-weight:700;cursor:pointer}
.recent-clear:hover{color:#fff}
.recent-list{list-style:none;margin:0;padding:0}
.recent-list li{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.recent-list li:last-child{border-bottom:0}
/* Each search and its Remove are cells of the field's grid (main.js), laid out as the buttons
   they hold were; the one the field's keys have reached is marked as a focused one is. */
.recent-cell{display:flex;flex:1;min-width:0}
.recent-cell:last-child{flex:none}
.recent .active{outline:2px solid var(--brand);outline-offset:2px}
.recent-q{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border:0;background:none;
  color:var(--ink-2);font-size:16px;text-align:left;cursor:pointer}
.recent-q:hover{color:#fff}
.recent-q .i{color:var(--dim)}
.recent-q .i svg{width:18px;height:18px}
.recent-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn.recent-x{flex:none;width:44px;height:44px;color:var(--dim)}
.icon-btn.recent-x:hover{color:#fff}
.recent-x .i svg{width:18px;height:18px}
.recent.drop{position:absolute;top:calc(100% + 8px);right:-1px;z-index:31;width:min(360px,calc(100vw - 2 * var(--gutter)));
  margin:0;padding:2px 0 6px;border:1px solid #333;border-radius:8px;background:#141414f7;box-shadow:0 18px 44px #000c}
.drop .recent-head{padding:0 8px 0 16px}
.drop .recent-list li{border:0}
.drop .recent-q{padding:0 8px 0 16px;font-size:15px}
.drop .recent-q:hover{background:#ffffff12}
/* shows TVmaze has that the catalogue does not yet, as posters like the results, kept
   apart from the results when they come first */
.missing{margin-bottom:30px}
.note + .missing .page-h2{margin-top:8px}
.missing .page-h2{margin-bottom:4px}
/* Shows like the search, under its title matches, or close under the note when none match. */
#results:empty ~ .related .page-h2{margin-top:8px}
/* A phone's search holds three posters a line, a row's size, so the shows like it come
   into view with the matches rather than a screen below them. */
@media(max-width:599px){
  #search .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #search .grid-caption{font-size:12px}
  #search .cap-name,.found .cap-name{font-size:12.5px}
}

/* welcome -------------------------------------------------------------- */
/* The first screen: a short head, the search beside Show different shows, and the posters
   straight after, so a phone shows a row and more of them above the bar at once. The head
   is as wide as the tools under it, which holds the heading to one line on a wide screen. */
.welcome-head{padding:0 var(--gutter);margin-bottom:18px;max-width:calc(720px + 2 * var(--gutter))}
.welcome-head h1{font:800 var(--h1)/1.15 -apple-system,BlinkMacSystemFont,sans-serif;margin:0}
.welcome-account{margin:8px 0 0;color:var(--muted);font-size:14px}
/* A link in a line of text: a thumb's 44px around it, without spacing the line out. */
.welcome-account .link{position:relative;min-height:0;font-weight:600}
.welcome-account .link::after{content:'';position:absolute;inset:-12px -8px}
.welcome-tools{display:flex;gap:10px;margin:0 var(--gutter) 16px;max-width:720px}
.welcome-tools input{flex:1 1 auto;min-width:0;padding:10px 14px;border:1px solid #444;border-radius:6px;
  background:#2a2a2a;color:var(--ink);font-size:16px;-webkit-appearance:none;appearance:none}
.welcome-tools input:focus{border-color:#fff;outline:none;background:#333}
#starters-more{flex:none}
.found{margin-bottom:18px}
.picks{padding-bottom:24px}
.pick .tick{position:absolute;inset:0;display:none;place-items:center;border-radius:var(--r);background:#141414a6;
  box-shadow:inset 0 0 0 3px var(--brand)}
.pick .tick .i svg{width:44px;height:44px;stroke:var(--brand);stroke-width:2.6}
.pick[aria-pressed=true] .tick{display:grid}
.pick:disabled{cursor:default}
/* The 24 posters come in whole lines, as many to a line as divides them: three on a phone,
   then four, six and on a large screen eight. */
@media(min-width:600px){.picks{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1000px){.picks{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1400px){.picks{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* It runs down to the bottom edge, and on a phone the dock sits over its foot. Its height is
   set (--welcome-bar, above the dock), so what floats over the page keeps clear of Continue
   and Skip for now, and the count keeps to one line. */
:root{--welcome-bar:69px}
.welcome-bar{position:fixed;inset:auto 0 0;z-index:25;display:flex;gap:10px;align-items:center;justify-content:flex-end;
  height:calc(var(--welcome-bar) + var(--dock-space));padding:0 var(--gutter) var(--dock-space);background:#141414f2;
  border-top:1px solid var(--line)}
.welcome-bar span{flex:1 1 auto;min-width:0;margin-right:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:var(--ink-2);font-size:14px}
.welcome-bar .btn{flex:none;min-height:44px}
/* While the welcome page shows, the dock stays put under its bar, the guide and a toast sit
   above the bar, a focused poster scrolls clear of it and so does the foot of the page. */
html:has(#welcome:not([hidden])){scroll-padding-bottom:calc(var(--dock-space) + var(--welcome-bar))}
body:has(#welcome:not([hidden])) .dock.away{transform:none}
body:has(#welcome:not([hidden])) .dock-mini{display:none}
body:has(#welcome:not([hidden])) .toast{bottom:calc(var(--dock-space) + var(--welcome-bar) + 16px)}
body:has(#welcome:not([hidden])) .foot{padding-bottom:calc(var(--dock-space) + var(--welcome-bar) + 24px)}
/* A phone: three posters a line, as search has; the arrows alone for Show different shows;
   and the count on a line of its own over Skip for now and Continue, side by side. */
@media(max-width:599px){
  :root{--welcome-bar:97px}
  .welcome-head{margin-bottom:14px}
  .welcome-tools{margin-bottom:12px}
  #starters-more{width:44px;padding:0}
  #starters-more .more-label{display:none}
  .picks,.found{grid-template-columns:repeat(3,minmax(0,1fr))}
  .welcome-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 44px;
    align-content:center;gap:8px 10px}
  .welcome-bar span{grid-column:1/-1;font-size:13px}
  .welcome-bar .btn{padding:8px 12px}
}

/* short screens --------------------------------------------------------- */
/* A screen this short (a phone on its side, a laptop zoomed to 200%) keeps its fixed bars
   from covering it: the header scrolls away with the page, a phone's dock is lower with each
   name beside its icon, and the welcome page's bar keeps to one short line, folding away
   under the dock's place while the page scrolls, as the dock does. */
@media(max-height:500px){
  html{scroll-padding-top:var(--safe-t)}
  .nav{position:absolute}
  :root{--welcome-bar:56px}
  .welcome-bar{display:flex;transition:transform .26s cubic-bezier(.2,.8,.2,1) .06s}
  .welcome-bar span{font-size:13px}
  .welcome-bar .btn{padding:8px 14px}
  body:has(#welcome:not([hidden])) .dock.away:not(:focus-within){transform:translateY(100%)}
  body:has(#welcome:not([hidden])):has(.dock.away:not(:focus-within)) .welcome-bar{transform:translateY(var(--dock));
    transition:transform .16s cubic-bezier(.4,0,1,1)}
}
@media(max-width:759px) and (max-height:500px){
  :root{--dock:44px}
  .dock a{flex-direction:row;gap:6px}
}

/* browse --------------------------------------------------------------- */
.browse-head{margin:0 0 16px}
.genre-chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border:1px solid #ffffff40;
  border-radius:20px;background:#ffffff0d;color:var(--ink-2);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;
  scroll-snap-align:start;transition:background-color .15s,border-color .15s,color .15s}
.genre-chip:hover{border-color:#fff;color:#fff}
.genre-chip[aria-selected=true],.genre-all.on{border-color:#fff;background:#fff;color:#141414}
.genre-all{padding-right:12px}
.genre-all .i svg{width:18px;height:18px}
@media(max-width:759px),(pointer:coarse){.genre-chip{min-height:44px;border-radius:22px;font-size:16px}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card),1fr));gap:14px 8px;margin:0;padding:0 var(--gutter);list-style:none}
.tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;color:#fff;text-decoration:none;
  container-type:inline-size}
.tile .art::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 30%,#000000e0)}
.tile-name{position:absolute;inset:auto 10px 12px;z-index:1;font-weight:800;font-size:clamp(15px,1.3vw,19px);line-height:1.15;
  text-shadow:0 2px 8px #000;overflow-wrap:break-word}
/* A narrow tile, three or four to a phone's row, sets its name smaller and nearer its edges, so
   its longest word (Documentaries) fits whole; anything longer still breaks rather than being cut. */
@container (max-width:135px){.tile-name{inset:auto 8px 10px;font-size:12px}}
@media(hover:hover) and (pointer:fine){
  .tile{transition:transform .25s ease}
  .tile:hover,.tile:focus-visible{transform:scale(1.04)}
}

/* meta line ------------------------------------------------------------ */
/* A line of text tall at least, so a line holding only a badge while the rest loads stands as
   tall as it will. */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:1.45em;margin:0;font-size:15px;
  color:var(--ink-2)}
.match{color:var(--match);font-weight:700}
.badge{border:1px solid #ffffff73;border-radius:3px;padding:0 6px;font-size:12.5px;line-height:19px;white-space:nowrap}
.badge.age{font-weight:700;border-color:#ffffffa6}
.dot-list{display:flex;flex-wrap:wrap;gap:0 8px;color:var(--ink-2)}
.dot-list span+span::before{content:'•';margin-right:8px;color:var(--dim)}

/* title modal ------------------------------------------------------------ */
/* On a phone a sheet fills the screen: its art runs up under the status bar, and what there
   is to read or press keeps inside the --edge insets, clear of the status bar, the home
   indicator and a landscape notch. Wider, it floats centred and the dialog keeps it clear,
   880px at most on a tablet, and on a large screen as much as 1240px, so a long season's
   grid fits, with the backdrop either side. What it holds keeps --sheet-pad from its sides:
   a twentieth of a phone, and on a wider sheet the same 44px the 880px sheet had. */
dialog.modal{--edge-t:var(--safe-t);--edge-r:var(--safe-r);--edge-b:var(--safe-b);--edge-l:var(--safe-l);
  width:100%;max-width:100%;height:100%;max-height:100%;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;
  background:none;color:inherit;overflow-y:auto;overscroll-behavior:contain}
dialog.modal::backdrop{background:#000000b8}
/* A sheet a tap or a click opened holds the focus itself (gestures.js), with no ring. */
dialog[tabindex="-1"]:focus{outline:none}
.sheet{--sheet-pad:5vw;position:relative;min-height:100%;padding:0 var(--edge-r) var(--edge-b) var(--edge-l);background:var(--bg-2)}
@media(min-width:760px){
  dialog.modal{--edge-t:0px;--edge-r:0px;--edge-b:0px;--edge-l:0px;
    padding:calc(34px + var(--safe-t)) max(16px,var(--safe-r)) calc(34px + var(--safe-b)) max(16px,var(--safe-l))}
  .sheet{--sheet-pad:min(44px,4.8vw);max-width:880px;min-height:0;margin:0 auto;border-radius:10px;overflow:hidden;
    box-shadow:0 24px 70px #000d}
}
@media(min-width:1100px){.sheet{max-width:min(1240px,92vw)}}
.t-close{position:absolute;top:calc(12px + var(--edge-t));right:calc(12px + var(--edge-r));z-index:6;background:#181818e6}
.t-close:hover{background:#2a2a2a}
.t-hero{position:relative;width:100%;aspect-ratio:16/9;max-height:64vh;min-height:300px;overflow:hidden;background:#000;isolation:isolate}
.t-blur{position:absolute;inset:-50px;width:calc(100% + 100px);height:calc(100% + 100px);object-fit:cover;z-index:-2;
  filter:blur(26px) brightness(.55) saturate(1.2)}
.t-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;transition:opacity .7s}
.t-hero.has-backdrop .t-backdrop{opacity:1}
.t-hero .t-poster{position:absolute;right:6%;top:50%;transform:translateY(-58%);width:clamp(120px,24%,210px);
  border-radius:8px;box-shadow:0 18px 46px #000c;z-index:-1}
.t-hero.has-backdrop .t-poster{display:none}
.t-fade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--bg-2) 3%,#18181899 30%,#18181800 60%)}
.t-head{position:absolute;inset:auto 0 0;padding:0 var(--sheet-pad) 22px}
.t-name{margin:0 0 14px;max-width:70%;font:800 clamp(24px,4.4vw,46px)/1.06 -apple-system,BlinkMacSystemFont,sans-serif;
  text-shadow:0 2px 12px #000b;overflow-wrap:anywhere}
.t-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.t-icons{display:flex;align-items:center;gap:10px}
/* On a phone, Trailer and My List share the first line. Title actions follow below on one
   line: six round buttons (three ratings, Share, Add to compare and TVmaze), or seven with
   the YouTube trailer search, whose gaps narrow first. Save image lives in Episodes. */
@media(max-width:759px){
  .t-acts>.btn{flex:1 1 0}
  .t-icons{flex:1 0 100%;gap:clamp(4px,calc((90vw - 264px) / 5),10px)}
  .t-icons:has(>.trailer){gap:clamp(2px,calc((90vw - 308px) / 6),10px)}
  .t-icons .rates{display:contents}
}
.rates{display:flex;gap:8px}
.t-body{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:10px 28px;padding:6px var(--sheet-pad) 26px}
.t-main{min-width:0}
.t-main>*+*{margin-top:12px}
/* Why a title is here, and what it fits in your taste beneath: as tall loaded as on its way
   (main.js, reasonSkeleton), so the summary below never moves when it lands. The reason runs
   to two lines at most and the fit to one, and fewer sit in the middle of that room. */
.t-reason{display:flex;flex-direction:column;justify-content:center;gap:2px;
  min-height:calc(2 * 15px * 1.45 + 2px + 14px * 1.45)}
.t-why{margin:0;font-weight:700;color:var(--brand);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  line-clamp:2;overflow:hidden}
.t-why span{font-weight:400;color:var(--ink-2)}
.t-fits{margin:0;font-size:14px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A show newer than the catalogue says so where a match would say why it is here. */
.t-new{margin:0;font-size:14px;color:var(--ink-2)}
.leanings-h{margin:18px 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.leanings{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.leanings li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.leanings b{font-weight:700;color:var(--ink)}
.leanings span{font-size:13.5px;color:var(--muted)}
.leanings-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.t-airs{margin:0;font-weight:700;color:var(--ink)}
.t-summary{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
/* Where to watch: one pill per service, with the service's own small icon, on one line
   that scrolls sideways, with room inside for a focus ring; the caret at its end lays
   every service out on as many lines as they take (main.js). */
.watch{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.watch>.k{font-size:14px;color:var(--dim)}
.watch-line{display:flex;align-items:flex-start;gap:8px}
.watch-list{position:relative;flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scrollbar-width:none;padding:4px;margin:-4px}
.watch-list::-webkit-scrollbar{display:none}
.watch.open .watch-list{flex-wrap:wrap;overflow:visible}
/* A line that scrolls sideways fades out at an end with more past it (edges, main.js). */
.more-before,.more-after{-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--fade-in,0px),#000 calc(100% - var(--fade-out,0px)),#0000);
  mask-image:linear-gradient(90deg,#0000,#000 var(--fade-in,0px),#000 calc(100% - var(--fade-out,0px)),#0000)}
.more-before{--fade-in:28px}
.more-after{--fade-out:40px}
.watch-link{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border:1px solid #3d3d3d;border-radius:16px;
  background:#262626;color:var(--ink);font-size:13.5px;font-weight:700;text-decoration:none;transition:border-color .15s}
/* The caret is the height of a pill, and takes a finger 44px across. */
.watch-more{position:relative;width:32px;height:32px;border-width:1px;border-color:#ffffff59}
.watch-more::before{content:'';position:absolute;inset:-6px}
.watch-more .i svg{width:18px;height:18px}
.watch-more .i,.reveal .i{transition:transform .2s ease}
.watch.open .watch-more .i,.reveal[aria-expanded=true] .i{transform:rotate(180deg)}
/* The button under a part that starts short: a pill across a hairline. */
.reveal-bar{position:relative;display:flex;justify-content:center;margin-top:14px}
.reveal-bar::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1px solid #ffffff21}
.reveal{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px 0 20px;
  border:1px solid #ffffff4d;border-radius:22px;background:var(--bg-2);color:var(--ink);font-size:14.5px;font-weight:700;
  cursor:pointer;transition:border-color .15s,background .15s}
.reveal:hover{border-color:#fff;background:#232323}
.reveal .i svg{width:18px;height:18px}
.sizing{overflow:hidden}
dialog.unfolding{overflow-anchor:none}
.watch-link:hover{border-color:#fff}
.watch-link small{font-size:12px;font-weight:400;color:var(--muted)}
.watch-icon{flex:none;width:16px;height:16px;border-radius:3px;object-fit:contain}
.watch-link .i svg{width:15px;height:15px}
.watch-credit{font-size:12px;color:var(--dim)}
/* A trailer takes the top of the title page; the title and buttons move beneath it. */
.t-hero.playing{aspect-ratio:auto;height:auto;min-height:0;max-height:none;padding-top:calc(58px + var(--edge-t));background:#000}
.t-hero.playing>:not(.t-player):not(.t-head){display:none}
.t-player{position:relative;aspect-ratio:16/9;background:#000}
.t-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.t-hero.playing .t-head{position:static;padding:18px var(--sheet-pad) 16px;background:var(--bg-2)}
.t-hero.playing .t-name{font-size:clamp(22px,3vw,34px);text-shadow:none}
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px 14px;margin:0;padding:0;list-style:none}
/* Folded, the trailers keep to one row that scrolls sideways, three to a wide screen with
   the next peeking in to say there are more; Show all lays every one out (setClips). A
   row that scrolls clips what spills over it, so it keeps room inside for a focus ring. */
.clips.rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 14px) / 3.3);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:4px;margin:-4px;scroll-padding:0 4px}
.clips.rail::-webkit-scrollbar{display:none}
.clips.rail>li{scroll-snap-align:start}
.clip{display:flex;flex-direction:column;gap:6px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.clip-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#2b2b2b}
.clip-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip-thumb .i{position:absolute;inset:0;display:grid;place-items:center;background:#0000004d;transition:background .2s}
.clip-thumb .i svg{width:42px;height:42px;filter:drop-shadow(0 2px 8px #000b)}
.clip:hover .clip-thumb .i{background:#0000001a}
.clip b{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.clip small{font-size:12.5px;color:var(--muted)}
.facts p{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.facts .k,.about .k{color:var(--dim)}
.t-section{padding:4px var(--sheet-pad) 30px}
/* A section's heading: an h2 under a title's h1, an h3 under a person's h2. */
.t-section>:is(h2,h3),.t-section-head>h2{margin:0 0 14px;font:700 clamp(19px,2vw,24px)/1.3 -apple-system,BlinkMacSystemFont,sans-serif}
.t-section .t-sub{margin:-8px 0 14px;font-size:14px;color:var(--muted)}
.t-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.t-section-head>h2{margin:0}
.t-section select{background:#242424;border:1px solid #4d4d4d;border-radius:4px;padding:8px 12px;font-weight:700;font-size:15px}
.eps{list-style:none;margin:0;padding:0}
.ep{display:grid;grid-template-columns:30px 150px minmax(0,1fr);gap:16px;align-items:start;padding:18px 12px;
  border-bottom:1px solid var(--line);border-radius:4px}
.ep:first-child{background:#262626}
.ep-num{font-size:22px;color:var(--muted);text-align:center;padding-top:22px}
.ep-still{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#2b2b2b}
.ep-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ep h3{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:15.5px}
.ep h3 span{flex:none;font-weight:400;color:var(--ink-2)}
.ep p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
.ep-date{display:block;margin-bottom:4px;font-size:12.5px;color:var(--dim)}
/* An episode that opens is one link, its name stretched over the whole row, with the row's
   own outline for a keyboard. */
.ep.opens{position:relative;cursor:pointer}
.ep-open{color:inherit;text-decoration:none}
.ep-open::after{content:'';position:absolute;inset:0;border-radius:4px}
.ep-open:focus-visible{outline:none}
.ep-open:focus-visible::after{outline:2px solid var(--brand);outline-offset:-2px}
@media(hover:hover) and (pointer:fine){
  .ep.opens{transition:background-color .15s}
  .ep.opens:hover{background:#2c2c2c}
  .ep.opens:hover .ep-open{text-decoration:underline;text-underline-offset:3px}
}
@media(max-width:600px){
  .ep{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:14px 4px}
  .ep-num{display:none}
  .ep:first-child{background:none}
  /* Beside a still in a narrow column a summary runs long, so a phone keeps it to four lines. */
  .ep p{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.more-card{display:flex;flex-direction:column;border-radius:var(--r);background:var(--bg-4);overflow:hidden}
.more-open{display:block;padding:0;border:0;background:none;cursor:pointer}
.more-open .art{border-radius:0}
.more-body{display:flex;flex-direction:column;gap:8px;padding:10px 12px 14px}
.more-body h4{margin:0;font-size:14.5px;overflow-wrap:anywhere}
/* How similar a show is, in a match's green, and why, beside it or under it on a narrow card. */
.more-why{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:-4px;font-size:13px;line-height:1.35}
.more-why span{font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.more-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.more-info{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--ink-2)}
.more-body p{margin:0;font-size:13px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;
  -webkit-box-orient:vertical;overflow:hidden}
.about p{margin:0 0 9px;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.about a{color:var(--ink-2)}
/* On a large screen's wider sheet the facts about a title run two to a line. */
@media(min-width:1100px){
  .t-section.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;align-items:start}
  .t-section.about>:not(p),.t-section.about>.links-row{grid-column:1/-1}
}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:14px;margin:4px 0 18px;padding:0;list-style:none}
.cast li{font-size:12.5px;color:var(--muted);text-align:center}
.cast b{display:block;color:var(--ink-2);font-size:13px;margin-top:6px}
.cast .face{position:relative;display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#2b2b2b;
  transition:box-shadow .15s}
.cast .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Anyone TVmaze gives an id opens their own page: the whole face, name and part is the link. */
.cast .who{display:block;color:inherit;text-decoration:none;border-radius:8px}
.cast a.who:hover .face{box-shadow:0 0 0 2px #ffffffb3}
.cast a.who:hover b{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cast a.who:focus-visible{outline-offset:4px}
/* The names in the Cast line open the same pages. Inline, each takes a tap 44px tall, taller
   than the line it sits in, without making the line taller. */
.name-link{position:relative;padding:0;border:0;background:none;color:var(--ink-2);font:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:#ffffff4d;text-underline-offset:3px}
.name-link:hover{color:#fff;text-decoration-color:currentColor}
.name-link::after{content:'';position:absolute;inset:-12px -6px}
.muted{color:var(--muted)}
@media(max-width:759px){
  .t-hero{aspect-ratio:auto;height:min(62vh,520px)}
  .t-body{grid-template-columns:1fr}
  .t-name{max-width:none}
  .t-hero .t-poster{top:42%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(44vw,200px)}
  /* A widescreen backdrop cropped into a tall phone frame shows only faces, so phones keep the poster. */
  .t-backdrop{display:none}
  .t-hero.has-backdrop .t-poster{display:block}
  .more{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Two trailers side by side, so a row of them is short; folded, two and the edge of a third. */
  .clips{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .clips.rail{grid-auto-columns:calc((100% - 2 * 10px) / 2.3)}
  .clip-thumb .i svg{width:32px;height:32px}
  .clip b{font-size:13px}
  /* The close button stays put while the page scrolls, one tap away wherever the thumb has got
     to, on a chip of glass that stands out from whatever passes under it. */
  .t-close{position:fixed;background:#2e2e2ebf;-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
    box-shadow:inset 0 1px 0 #ffffff29,0 4px 14px #00000066}
}

/* an episode ------------------------------------------------------------ */
/* An episode opens in a sheet of its own over its title page. On a phone it is a card that
   leaves a strip of the title page showing above it, so what closing it uncovers is in
   sight; wider, a card a little narrower and lower than the title page, floating over it.
   Either way the card clears the status bar itself, so what is inside needs no inset. */
dialog.episode{--edge-t:0px}
dialog.episode::backdrop{background:#000000a3}
dialog.episode .sheet{overflow:hidden}
@media(max-width:759px){
  dialog.episode{padding-top:calc(var(--safe-t) + 10px)}
  dialog.episode .sheet{border-radius:12px 12px 0 0}
}
@media(min-width:760px){
  dialog.episode{padding-top:calc(58px + var(--safe-t))}
  dialog.episode .sheet{max-width:760px}
}
/* Over a large screen's wider title page it widens too, its summary and its crew side by side. */
@media(min-width:1100px){
  dialog.episode .sheet{max-width:min(960px,80vw)}
  .e-body{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .e-body>*{grid-column:1/-1}
  .e-body>.e-summary,.e-body>.e-note{grid-column:1}
  .e-body>.e-crew{grid-column:2;grid-row:1/span 2;margin-top:0}
  .e-body:has(>.e-crew:empty)>:is(.e-summary,.e-note){grid-column:1/-1}
}
/* The way back names the show it goes back to. On a phone it stays put as the sheet scrolls,
   as the title page's close button does, and sits low enough that a long name passes under
   the grab handle rather than into it. */
.e-back{position:absolute;top:calc(12px + var(--edge-t));left:calc(12px + var(--edge-l));z-index:6;display:inline-flex;
  align-items:center;gap:2px;max-width:min(64%,340px);min-height:44px;padding:0 16px 0 8px;border:0;border-radius:22px;
  background:#181818e6;color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.e-back:hover{background:#2a2a2a}
.e-back .i svg{width:24px;height:24px}
.e-back-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:759px){
  .e-back{position:fixed;top:calc(var(--safe-t) + 30px);left:calc(12px + var(--safe-l));background:#2e2e2ebf;
    -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
    box-shadow:inset 0 1px 0 #ffffff29,0 4px 14px #00000066}
}
/* The still, in the show's own colour until it arrives: the list's at once, and the largest
   over it once loaded. */
.e-hero{position:relative;width:100%;aspect-ratio:16/9;max-height:min(62vh,480px);overflow:hidden;
  background:linear-gradient(160deg,hsl(var(--h,220) 42% 30%),hsl(var(--h,220) 36% 12%))}
.e-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.e-hero.has-still .e-still,.e-hero.has-image .e-image{opacity:1}
.e-fade{position:absolute;inset:0;background:linear-gradient(to top,var(--bg-2) 0,#18181800 40%)}
.e-head{position:relative;display:flex;align-items:flex-end;gap:14px;margin-top:-28px;padding:0 var(--sheet-pad)}
.e-words{flex:1;min-width:0}
.e-code{margin:0 0 4px;font-size:13.5px;font-weight:800;letter-spacing:.06em;color:var(--brand);text-shadow:0 1px 6px #000c}
.e-name{margin:0;font:800 clamp(24px,3.4vw,34px)/1.12 -apple-system,BlinkMacSystemFont,sans-serif;overflow-wrap:anywhere;
  text-shadow:0 2px 12px #000b;outline:none}
.e-meta{margin:10px 0 0;font-size:15px}
.e-rating{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--ink)}
.e-rating .i{color:var(--brand)}
.e-rating .i svg{width:15px;height:15px}
.e-head .round{margin-bottom:2px}
.e-body{padding:18px var(--sheet-pad) 34px}
.e-summary p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.e-note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.e-note:not(:empty){margin-top:14px}
.e-note p{margin:0;font-size:14.5px}
.e-crew{margin-top:18px}
.e-crew p{margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.e-crew .k{color:var(--dim)}
.e-guests{margin-top:28px}
.e-guests h3{margin:0 0 14px;font:700 clamp(19px,2vw,24px)/1.3 -apple-system,BlinkMacSystemFont,sans-serif}
.e-guests .cast{margin:0}
/* Guest stars and crew are links to their own pages, as tappable as the rest of the page. */
.e-person{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}
.e-guest{display:block;width:100%}
.e-guest .face{transition:box-shadow .15s}
.e-credit{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:#ffffff4d;
  text-underline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .e-guest:hover .face{box-shadow:0 0 0 2px #ffffffb3}
  .e-guest:hover b{text-decoration:underline;text-underline-offset:2px}
  .e-credit:hover{text-decoration-color:#fff}
}
/* A name in a line of credits takes a finger 44px tall without moving the line. */
@media(any-pointer:coarse){.e-credit{padding:9px 0;margin:-9px 0}}
/* Previous and Next: the episodes either side, each with its still, a column each. */
.e-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line)}
.e-step{display:flex;flex-direction:column;gap:8px;min-width:0;color:inherit;text-decoration:none;border-radius:6px}
.e-step.next{grid-column:2}
.e-step-still{position:relative;display:block;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#2b2b2b}
.e-step-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.e-step-words{display:flex;flex-direction:column;gap:3px;min-width:0}
.e-step.next .e-step-words{align-items:flex-end;text-align:right}
.e-step small{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.e-step small .i svg{width:16px;height:16px}
.e-step b{font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
@media(hover:hover) and (pointer:fine){
  .e-step:hover b{text-decoration:underline;text-underline-offset:3px}
  .e-step:hover .e-step-still img{filter:brightness(1.12)}
}
@media(hover:none) and (prefers-reduced-motion:no-preference){
  .ep.opens,.e-step,.e-person,.e-back{-webkit-tap-highlight-color:transparent}
  .ep.opens{transition:background-color .2s ease}
  .ep.opens:active{background:#ffffff12;transition:background-color .12s ease .06s}
  .e-step,.e-guest{transition:filter .2s ease}
  .e-step:active,.e-guest:active{filter:brightness(.75);transition:filter .12s ease .06s}
  .e-back{transition:transform .2s ease}
  .e-back:active{transform:scale(.95);transition:transform .1s ease .04s}
}

/* a person's page ------------------------------------------------------ */
/* Laid out as a title page is, with their photo where the poster goes: a shorter hero, what
   is known of them beside their biography, then their shows as posters with whom they
   played beneath each, whole lines of six on a wide screen and of three on a phone. */
.t-hero.p-hero{aspect-ratio:21/9}
.p-hero .t-poster{width:clamp(112px,17%,160px)}
.p-said{margin:-6px 0 14px;max-width:70%;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink-2);
  text-shadow:0 1px 8px #000c;overflow-wrap:anywhere}
.p-body.no-bio{grid-template-columns:minmax(0,1fr)}
.p-text.clamped{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.t-main>.p-more{margin-top:2px}
.p-more{display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--ink);
  font-size:14.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.p-credit{margin:0;font-size:12.5px;color:var(--dim)}
.p-credit a{color:var(--muted)}
.t-section .p-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 10px;padding:0}
.p-off{cursor:default}
.p-caption{margin-top:7px;line-height:1.3}
.p-as{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.p-when{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.p-whole{white-space:nowrap}
.p-none{grid-column:1/-1;font-size:14.5px}
/* Finding a show in their credits, level with the sections it searches. */
.discovery.p-find{margin-inline:var(--sheet-pad)}
@media(max-width:759px){
  .t-hero.p-hero{aspect-ratio:auto;height:min(54vh,460px)}
  .p-hero .t-poster{top:38%;width:min(34vw,150px)}
  .p-said{max-width:none}
  /* On a phone what is known of them comes first, above the biography. */
  .p-body .facts{order:-1}
  .t-section .p-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
}

/* skeletons ------------------------------------------------------------ */
/* What is on its way, in its own shape (main.js): laid out by the rules of what it stands
   for, so nothing moves when that lands. A line of text is a bar as tall as the letters,
   inside an element of the kind that will hold the text, so the element keeps a line of
   that text's own height; a poster, still, face, pill or button is a block of its size.
   They shimmer, and hold still under reduced motion; none of them takes a pointer. */
.skel,.e-hero.loading,.cast .skel.face{background:linear-gradient(90deg,#232323 0,#303030 40%,#232323 80%);
  background-size:220% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.skel{display:block;border-color:transparent;pointer-events:none}
/* Held still where they wait out of sight (main.js): a shimmer repaints every frame. */
.unseen .skel{animation-play-state:paused}
.skel-card,.skel-item{pointer-events:none}
/* Lines stay a block of their own, which holds a line's height in a flex line too. */
.skel-lines{display:block;flex:1 1 100%;min-width:0}
.skel.text{display:inline-block;vertical-align:middle;width:100%;height:.8em;margin:0;border-radius:4px}
.skel.text:not(:only-child):last-child{width:62%}
.row-title .skel.text,.hero-title .skel.text{height:.7em}
.t-name .skel.text,.e-name .skel.text{height:.72em}
/* The featured show, laid out by the hero's own rules, has three buttons as wide as its own. */
.hero-acts .btn.skel{width:118px}
.hero-acts .btn.skel:first-child{width:104px}
/* A title page's Trailer beside My List, its services as pills and its season menu. */
.t-acts .btn.skel{width:118px}
/* An age rating still to come, as wide and tall as a rating's badge usually is. */
.meta .badge.skel{width:4.6em;height:21px}
.watch-link.skel{width:96px;height:calc(13.5px * 1.45 + 12px)}
.watch-link.skel+.watch-link.skel{width:128px}
.skel.pick{width:150px;height:36px;border-radius:4px}
@media(any-pointer:coarse){.skel.pick{height:44px}}
.reveal.skel{width:170px}
.more-card>.art.skel{border-radius:0}

/* menus and small dialogs --------------------------------------------- */
/* The profile menu drops from the nav on a wide screen and rises from the foot on a phone;
   either way it fits between the screen's edges and scrolls inside itself when it is short. */
dialog.menu{margin:calc(var(--nav) + var(--safe-t)) var(--gutter) auto auto;padding:0;border:1px solid #333;
  border-radius:8px;background:#141414f7;color:inherit;width:min(340px,calc(100% - 32px));
  max-height:calc(100vh - var(--nav) - var(--safe-t) - var(--safe-b) - 12px);
  max-height:calc(100dvh - var(--nav) - var(--safe-t) - var(--safe-b) - 12px);overflow-y:auto;overscroll-behavior:contain}
dialog.menu::backdrop{background:#0006}
.menu-sheet{padding:8px 0}
.menu-head{display:flex;align-items:center;gap:12px;padding:10px 14px 14px;border-bottom:1px solid #2c2c2c}
.menu-head h2{margin:0;font-size:16px}
.menu-head p{margin:2px 0 0;font-size:13px;color:var(--muted)}
#account .menu-head>div{min-width:0}
#account-counts{overflow-wrap:anywhere}
.menu-head .close-btn{margin-left:auto}
.menu-item{display:block;width:100%;padding:12px 16px;border:0;background:none;text-align:left;font-size:14.5px;
  color:var(--ink-2);text-decoration:none;cursor:pointer}
.menu-item:hover{background:#ffffff12;color:#fff}
.menu-field{display:flex;flex-direction:column;gap:6px;cursor:default}
.menu-field:hover{background:none}
.menu-field select{background:#242424;border:1px solid #4d4d4d;border-radius:4px;padding:8px 10px}
.menu-item.danger{color:#ff8a80}
@media(max-width:759px){
  dialog.menu{margin:auto 0 0;width:100%;max-width:100%;border-radius:14px 14px 0 0;border-width:1px 0 0;
    max-height:calc(100vh - var(--safe-t) - 12px);max-height:calc(100dvh - var(--safe-t) - 12px);
    padding:0 var(--safe-r) var(--safe-b) var(--safe-l)}
}
/* All genres: a sheet from the bottom on phones, a panel under its button on wide screens. */
dialog.genre-menu{overflow:hidden}
.genre-menu .menu-sheet{display:flex;flex-direction:column;max-height:min(80vh,640px);padding:0}
.genre-menu .menu-head{padding:12px 12px 12px 20px}
.genre-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:6px;
  background:none;color:var(--ink-2);font-size:16px;text-align:left;cursor:pointer;break-inside:avoid}
.genre-opt:hover{background:#ffffff12;color:#fff}
.genre-opt .i{visibility:hidden;margin-left:auto;color:var(--brand)}
.genre-opt[aria-selected=true]{color:#fff;font-weight:700}
.genre-opt[aria-selected=true] .i{visibility:visible}
@media(min-width:760px){
  dialog.genre-menu{inset:var(--y,120px) auto auto var(--x,4vw);margin:0;width:min(760px,calc(100vw - var(--x,4vw) - var(--gutter)))}
  .genre-menu .menu-sheet{max-height:max(240px,calc(100vh - var(--y,120px) - 24px))}
}
/* Discovery uses the existing genre dropdown and menu rows, with choices tucked inside. */
.discovery{margin:12px var(--gutter) 20px;min-width:0}
.discovery-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.discovery .ratings-icon,.discovery-menu .ratings-icon{display:block;width:18px;height:18px;flex:none}
.discovery-active{display:flex;align-items:center;gap:12px;margin-top:8px;min-width:0;font-size:13px;color:var(--muted)}
.discovery-description{min-width:0;overflow-wrap:anywhere}
.discovery-clear{flex:none;font-size:13px;min-height:44px}
.discovery-find{flex:1;min-width:160px;max-width:460px}
.discovery-find input{width:100%;min-height:44px;border:1px solid #4d4d4d;border-radius:4px;background:#242424;color:var(--ink);font:inherit;padding:8px 10px;font-size:16px}
.discovery-compact{margin:10px 0 16px}
dialog.menu.discovery-menu{background:#141414}
.discovery-menu .menu-sheet{max-height:min(80dvh,640px);padding:0}
.discovery-menu .menu-head{flex:none}
.discovery-form{display:flex;flex-direction:column;min-height:0}
.discovery-sections{overflow-y:auto;overscroll-behavior:contain;padding:4px 0;min-height:0}
.discovery-toggle{display:flex;align-items:center;gap:10px;min-height:48px;list-style:none}
.discovery-toggle::-webkit-details-marker{display:none}
.discovery-value{margin-left:auto;font-size:13px;color:var(--muted);max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.discovery-toggle .ratings-icon{transition:transform .15s}
.discovery-group[open]>.discovery-toggle .ratings-icon{transform:rotate(180deg)}
.discovery-custom[open]>.discovery-toggle .ratings-icon{transform:rotate(180deg)}
.discovery-custom>.discovery-toggle{justify-content:space-between;padding:8px 12px}
.discovery-group[open]>.discovery-toggle{color:#fff;background:#ffffff08}
.discovery-options{padding:4px 8px 8px;max-height:min(320px,45dvh);overflow-y:auto;overscroll-behavior:contain}
.discovery-option{position:relative}
.discovery-check{margin-left:auto;color:var(--brand);visibility:hidden}
.discovery-option:has(input:checked){color:#fff;font-weight:700}
.discovery-option:has(input:checked) .discovery-check{visibility:visible}
.discovery-options .genre-opt[aria-pressed=true]{color:#fff;font-weight:700}
.discovery-options .genre-opt[aria-pressed=true] .discovery-check{visibility:visible}
.discovery-option:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
.discovery-options .menu-field{padding:8px 12px;font-size:13px}
.discovery-options .menu-field select,.discovery-options .menu-field input{width:100%;min-height:44px;background:#242424;border:1px solid #4d4d4d;border-radius:4px;padding:8px 10px;font:inherit;font-size:16px;color:var(--ink)}
.discovery-help{margin:8px 12px 4px;color:var(--muted);font-size:12px;line-height:1.5}
.discovery-actions{flex:none;display:flex;gap:10px;justify-content:space-between;border-top:1px solid #2c2c2c;padding:12px 16px}
.discovery-actions .btn{padding:10px 12px;font-size:14px;min-height:44px}
@media(min-width:760px){
  dialog.menu.discovery-menu{width:min(360px,calc(100vw - 32px));inset:var(--y,120px) auto auto var(--x,4vw);margin:0;max-height:calc(100dvh - var(--y,120px) - 16px)}
  .discovery-menu .menu-sheet{max-height:min(640px,calc(100dvh - var(--y,120px) - 16px))}
}
@media(max-width:759px){
  .discovery-find{flex-basis:100%;max-width:none}
  .discovery-menu .menu-sheet{max-height:calc(90dvh - var(--safe-b))}
  .discovery-toggle{min-height:48px}
}
dialog.small .sheet{max-width:560px;margin-inline:auto}
.sheet.pad{padding:calc(26px + var(--edge-t)) max(22px,var(--edge-r)) calc(26px + var(--edge-b)) max(22px,var(--edge-l))}
.sheet.pad p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.sheet-h{margin:0 40px 8px 0;font:800 22px/1.25 -apple-system,BlinkMacSystemFont,sans-serif}
.corner{position:absolute;top:calc(12px + var(--edge-t));right:calc(12px + var(--edge-r))}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13px;color:var(--muted)}
.field input,.field textarea{width:100%;padding:10px;border:1px solid #444;border-radius:6px;background:#0f0f0f;color:var(--ink);
  font:16px/1.5 ui-monospace,Menlo,monospace;overflow-wrap:anywhere;resize:vertical}
.account-panel{padding:16px;border-bottom:1px solid #2c2c2c}
.account-email{margin:0;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.account-status{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.account-actions .btn{min-height:44px;padding:10px 14px;font-size:14px}
#profile .account-panel{padding:4px 0 24px}
.profile-section{padding-top:24px}
.profile-section h3{margin:0;font-size:17px;line-height:1.3}
.profile-section p{margin:10px 0 18px}
.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn.danger{background:#783e38;color:#fff}
.btn.danger:hover{background:#955047}
.customization-cards{margin:26px 0}
.customization-cards .ratings-card-preference{padding:0;margin:0}
.customization-cards .ratings-card-preference legend{float:none;padding:0;margin-bottom:12px;font-size:16px;font-weight:700}
.customization-cards .ratings-card-choices{clear:both}
.customization-cards .ratings-card-choices button{font-size:14px;min-height:48px}
.customization-reach{font-size:16px;font-weight:700;gap:12px}
.customization-reach select{width:100%;min-height:48px;padding:12px;border:1px solid #444;border-radius:6px;
  background:#202020;color:var(--ink);font:inherit;font-size:16px;font-weight:400}
.experimental-customization{border-top:1px solid #333;margin-top:26px;padding-top:22px}
.experimental-toggle{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;cursor:pointer}
.experimental-toggle strong{display:block;font-size:16px;font-weight:700}
.experimental-toggle span span{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}
.experimental-toggle input{flex:0 0 22px;width:22px;height:22px;margin:0;accent-color:var(--brand);font:inherit;font-size:16px}
.experimental-toggle input:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.experimental-customization>.note{margin:14px 0 0;line-height:1.5}
.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.auth-form .field{margin:0}
.auth-form input{min-height:48px;font-family:inherit;font-size:16px;line-height:1.5}
.auth-form input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.auth-form .btn{min-height:48px}
.auth-error{margin:0;min-height:22px;color:#ffaea4;font-size:14px;line-height:1.5}
/* An account form's notes line up with its fields. */
#auth-body .note{margin:0}
#auth-body .auth-switch{margin-top:18px}
.auth-forgot{margin:-4px 0 0;text-align:right}
.auth-forgot .link{font-size:14px}
.auth-form .auth-code{font-family:ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.06em}
/* A new recovery code, shown once: large, monospaced, and selected whole with one press. */
#auth .recovery-code{margin:20px 0 0;padding:16px 12px;border:1px solid #444;border-radius:8px;background:#0f0f0f;
  color:var(--ink);font:600 clamp(19px,5.4vw,25px)/1.35 ui-monospace,Menlo,monospace;letter-spacing:.05em;
  text-align:center;overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
.recovery-acts{display:flex;gap:8px;margin-top:12px}
.recovery-acts .btn{flex:1 1 0;min-height:44px;padding:8px 14px;font-size:14px}
.recovery-kept{display:flex;align-items:center;gap:12px;min-height:44px;margin-top:20px;color:var(--ink);font-size:15px;cursor:pointer}
.recovery-kept input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--brand)}
.recovery-next{width:100%;min-height:48px;margin-top:14px}
#profile .account-recovery{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--brand);border-radius:4px;
  background:var(--bg-3);color:var(--ink-2);font-size:14px;line-height:1.5}
.auth-switch{margin:18px 0 0;text-align:center}
.move-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.move-acts .btn{min-height:38px;padding:6px 14px;font-size:14px}
.move-h{margin:26px 0 0;padding-top:20px;border-top:1px solid #2c2c2c;font-size:16px}
.said{font-size:13px;color:var(--match)}
.qr{margin:18px 0 0;text-align:center}
.qr svg{width:100%;max-width:250px;height:auto;padding:8px;border-radius:10px;background:#fff}
.qr figcaption{margin-top:8px;font-size:13px;color:var(--muted)}

/* toast and footer ----------------------------------------------------- */
/* The one toast (toast.js): centred at the foot of the screen above the dock, and on the welcome
   page above its bar too. Over a sheet it rises clear of the sheet or the control just pressed by
   an inline bottom, never nearer the top than its scroll-margin-top. An action such as Undo sits
   at its end, 44px tall within the toast's own padding. */
.toast{position:fixed;inset:auto auto calc(var(--dock-space) + 16px) 50%;z-index:120;margin:0;
  transform:translateX(-50%);width:max-content;max-width:min(calc(100% - 2 * var(--gutter)),460px);padding:11px 18px;
  border:0;border-radius:6px;background:#f1f1f1;color:#141414;font-weight:700;font-size:14px;line-height:1.4;
  box-shadow:0 10px 30px #000b;text-align:center;overflow:visible;scroll-margin-top:calc(var(--safe-t) + 12px)}
.toast:popover-open{display:flex;align-items:center;gap:4px 14px}
.toast-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.toast:has(.toast-action){text-align:left}
.toast-action{flex:none;min-height:44px;margin:-11px -10px -11px 0;padding:0 10px;border:0;border-radius:4px;
  background:none;color:#6b4200;font-weight:800;cursor:pointer}
.toast-action:hover{background:#0000000f}
.toast-action:focus-visible{outline:2px solid #141414;outline-offset:-4px}
.foot{padding:30px var(--gutter) calc(var(--dock-space) + 36px);color:var(--dim);font-size:13px}
.foot p{margin:6px 0}
.foot a,.foot .link{color:var(--muted)}
@media(min-width:760px){.foot{padding-bottom:calc(40px + var(--safe-b))}}
/* TMDB's credit, in the footer and in How Couchside works: its logo sits smaller than the wordmark. */
.tmdb{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tmdb-logo{display:inline-flex;flex:none}
.tmdb-logo img{display:block}
.sheet.pad .tmdb{margin-top:18px;font-size:13px;line-height:1.45;color:var(--muted)}

/* without JavaScript, and the pages served without the app ------------- */
.noscript{margin:0;padding:14px var(--gutter);background:#3a2a0a;color:#fff;font-weight:700;text-align:center}
body.loose{display:grid;place-items:center;min-height:100vh;min-height:100dvh;
  background:radial-gradient(ellipse at 28% 18%,#2d2213,#141414 62%)}
.lost{max-width:520px;padding:32px var(--gutter);text-align:center}
.lost .brand{display:inline-block;margin-bottom:30px;font-size:28px}
.lost h1{margin:0 0 12px;font:800 clamp(30px,6vw,44px)/1.1 -apple-system,BlinkMacSystemFont,sans-serif}
.lost p{margin:0 0 26px;font-size:17px;line-height:1.5;color:var(--ink-2)}

/* touch screens -------------------------------------------------------- */
/* Whatever a thumb presses is at least 44px each way. */
@media(any-pointer:coarse){
  select,input:not([type=checkbox],[type=radio]){min-height:44px}
  .btn,.page-end .btn,.invite .btn,.empty-steps .btn,.move-acts .btn,.chip,.link,.watch-link,.p-more{min-height:44px}
  .round,.round.small{width:44px;height:44px}
  .watch-more::before{inset:0}
  .links-row a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .links a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover,.card:focus-visible{transform:none}
}

/* Motion and gestures ------------------------------------------------------ */
/* gestures.js moves sheets, rows, views, the hero and a peek on phones and touch screens,
   with animations it starts itself; these are the pieces it styles. Nothing here moves
   under reduced motion, and a mouse keeps the hover above. */
/* The grab handle atop every sheet: just inside its top edge, below the sheet's --edge-t
   inset, and on a sheet that reaches the top of the screen without one, below the status bar. */
.grab{display:none}
@media(pointer:coarse){
  .grab{position:absolute;top:calc(var(--grab-top,0px) + var(--edge-t,0px) + 7px);left:50%;z-index:7;display:block;
    width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#ffffffb8;box-shadow:0 1px 4px #0009;pointer-events:none}
  dialog.at-top>.grab{top:calc(var(--grab-top,0px) + var(--edge-t,var(--safe-t,0px)) + 7px)}
}
/* A new row waits unseen for a frame, until gestures.js knows whether it eases in. */
.pre{opacity:0}
/* The hero on its way out, over the one coming in, laid out as the hero is. */
.swap-ghost{position:absolute;inset:0;z-index:1;display:inherit;flex-direction:inherit;align-items:inherit;
  justify-content:inherit;padding:inherit;isolation:isolate;pointer-events:none}
/* A view change on a phone is a quick crossfade. */
/* A poster held for a peek shows no callout, loupe or selection. */
@media(any-pointer:coarse){
  .card,.card img,.peek img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
}
/* A quick press on what a finger taps. Posters and tiles dim rather than shrink: a shrink
   began before a swipe was known to be a swipe, so a row bobbed as it started to scroll. */
@media(hover:none) and (prefers-reduced-motion:no-preference){
  .card-hit,.tile,.more-open,.clip,.pick,.btn,.icon-btn,.chip,.menu-item,.peek-art,.cast .who{-webkit-tap-highlight-color:transparent}
  .card-hit,.tile,.more-open,.clip,.pick,.cast .who{transition:filter .2s ease}
  .btn,.icon-btn,.chip{transition:transform .2s ease}
  .round{-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s,transform .2s ease}
  .watch-link,.reveal{-webkit-tap-highlight-color:transparent;transition:border-color .15s,transform .2s ease}
  .card-hit:active,.tile:active,.more-open:active,.clip:active,.pick:active,.cast a.who:active{filter:brightness(.75);transition:filter .12s ease .06s}
  .btn:active,.icon-btn:active,.chip:active,.watch-link:active,.reveal:active{transform:scale(.95);transition:transform .1s ease .04s}
  .round:active{transform:scale(.9);transition:border-color .15s,background .15s,transform .1s ease .04s}
  .menu-item:active{background:#ffffff14}
}
/* The peek a long press lifts a poster into: the poster, and beneath it a panel with the
   hover's quick buttons, centred between the status bar and the dock's space. */
dialog.peek{inset:var(--safe-t,0px) 0 var(--dock-space,0px);width:min(88vw,330px);max-width:none;max-height:none;
  margin:auto;padding:0;border:0;background:none;color:inherit;overflow:visible;overscroll-behavior:contain}
dialog.peek::backdrop{background:#000000c7}
.peek-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.peek-art{display:block;width:min(50vw,210px);padding:0;border:0;border-radius:var(--r);background:none;cursor:pointer;
  box-shadow:0 20px 50px #000d}
@supports(height:1dvh){
  .peek-art{width:min(50vw,210px,calc((100dvh - var(--safe-t,0px) - var(--dock-space,0px) - 200px) / 1.5))}
}
.peek-panel{align-self:stretch;padding:14px 16px 16px;border-radius:12px;background:var(--bg-3);box-shadow:0 20px 50px #000b}
.peek-name{margin:0 0 6px;font:800 19px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;overflow-wrap:anywhere}
.peek-panel .meta{font-size:14px}
.peek-genres{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.peek-acts{display:flex;align-items:center;gap:8px;margin-top:14px}
.peek-acts .btn{flex:1;min-width:0;padding:8px 12px}
/* Installed, a swipe in from the left edge brings this in under the finger, and goes back. */
.edge-back{position:fixed;top:0;left:0;z-index:60;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -46px;
  border-radius:50%;background:#f1f1f1;color:#141414;box-shadow:0 6px 18px #000a;pointer-events:none;transition:scale .15s}
.edge-back.ready{scale:1.15}
.edge-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Episode ratings reuse Couchside's colours, typography, title sheet and existing menus. */
.ratings-icon{width:18px;height:18px;flex:0 0 18px;vertical-align:middle}
.ratings-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 20px}
.ratings-control-group{display:flex;align-items:center;gap:10px;min-width:0}
.ratings-controls select{min-width:142px}
/* Save image sits beside the layout picker, in the same control style. */
.ratings-save{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:40px;padding:8px 14px;
  border:1px solid #4d4d4d;border-radius:4px;background:#242424;color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap;cursor:pointer}
.ratings-save .i svg{width:18px;height:18px}
.ratings-save:hover:not(:disabled){border-color:#888;background:#2c2c2c}
.ratings-save:disabled{opacity:.5;cursor:default}
.ratings-save[aria-busy=true]{opacity:.75}
.ratings-save-note{margin:-8px 0 18px;font-size:12.5px;line-height:1.5;color:var(--muted)}
@media(any-pointer:coarse){.ratings-controls :is(.ratings-view-button,.ratings-save){min-height:44px}}
.loading-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.ratings-controls-skeleton span{height:40px;border-radius:4px}
/* The layout menu's width for each label, so the loaded toolbar does not shift. */
.ratings-view-skeleton{width:121px}
.ratings-view-skeleton-list{width:174px}
.ratings-view-skeleton-wrapped{width:156px}
.ratings-view-skeleton-timeline{width:152px}
.ratings-save-skeleton{width:139px}
.ratings-filter-skeleton{width:142px}
.ratings-invert-skeleton{width:88px}
.ratings-key-skeleton{margin:18px 0 22px}
.ratings-key-skeleton .skel.text{display:block;height:12px;margin:3px 0 13px}
.ratings-season-skeleton{margin:22px 0}
.ratings-season-skeleton>span{display:block;margin-bottom:10px}
.ratings-grid-skeleton .ratings-season-skeleton{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;margin:6px 0}
.ratings-grid-skeleton-cells{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.ratings-placeholder-cell{height:38px;border-radius:4px}
.ratings-timeline-skeleton{height:444px;display:grid;grid-template-rows:280px 144px;gap:20px}
.ratings-plot-skeleton{display:flex;flex-direction:column;gap:12px;padding:8px 0 0 46px;min-height:0}
.ratings-plot-grid{flex:1;background-size:200% 100%;border-radius:4px;opacity:.6}
@media(max-width:600px){.ratings-controls-skeleton :is(.ratings-view-skeleton,.ratings-filter-skeleton){flex:1;min-width:70px}.ratings-grid-skeleton .ratings-season-skeleton{grid-template-columns:54px minmax(0,1fr);gap:8px}.ratings-grid-skeleton-cells{gap:4px}.ratings-placeholder-cell{height:40px}}
/* A phone gives the layout with Save image one row and the season scope the next. */
@media(max-width:600px){
  .ratings-controls{gap:8px}
  .ratings-control-group{flex:1 1 100%;gap:8px}
  .ratings-control-group>.ratings-picker{flex:1 1 auto;min-width:0}
  .ratings-control-group>.ratings-picker>.ratings-view-button{width:100%}
  .ratings-control-group>.ratings-picker>.ratings-view-button>span{flex:1;text-align:left}
}
.ratings-picker{position:relative;z-index:8}
.ratings-view-button{display:flex;align-items:center;gap:10px;background:#242424;border:1px solid #4d4d4d;border-radius:4px;padding:8px 12px;min-height:40px;font-size:15px;font-weight:700;color:var(--ink)}
.ratings-view-button>.ratings-icon:last-child{width:14px;flex-basis:14px;margin-left:12px;color:var(--muted)}
.ratings-view-button:hover,.ratings-view-button[aria-expanded=true]{border-color:#888;background:#2c2c2c}
.ratings-view-options{position:absolute;top:calc(100% + 6px);left:0;width:220px;padding:5px;border:1px solid #414141;border-radius:6px;background:#202020;box-shadow:0 12px 32px #0008}
.ratings-view-options[hidden]{display:none}
.ratings-view-options button{width:100%;display:flex;align-items:center;gap:12px;min-height:42px;padding:8px 10px;color:var(--ink-2);background:none;border:0;border-radius:4px;text-align:left;font-size:14px}
.ratings-view-options button:hover,.ratings-view-options button:focus-visible{background:#ffffff12;color:var(--ink)}
.ratings-view-options button[aria-selected=true]{color:var(--brand);background:#ffb0200b}
.ratings-view-options button>.ratings-icon:last-child{margin-left:auto;visibility:hidden;width:15px}
.ratings-view-options button[aria-selected=true]>.ratings-icon:last-child{visibility:visible}
.episode-ratings{color:var(--ink-2)}
.ratings-key{display:flex;gap:10px 16px;flex-wrap:wrap;margin:18px 0 22px}
.ratings-key>span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.ratings-key i{height:8px;width:8px;border-radius:2px;flex:none}
.ratings-key small{color:var(--dim);font-size:11px}
.ratings-grid-scroll{overflow-x:auto;padding:4px 3px 12px;margin-inline:-3px}
/* Title grids keep 16 episodes and the average inside a desktop sheet. A phone's cells are
   narrower still (gridInverted counts 38px a column), so shows with few seasons fit its width. */
.episode-ratings .rating-table td{width:36px}
@media(max-width:600px){
  .episode-ratings .rating-table{border-spacing:4px;margin:-4px}
  .episode-ratings .rating-table th{min-width:34px;padding-inline:0}
  .episode-ratings .rating-table th:first-child{min-width:40px;font-size:11px}
  .episode-ratings .rating-table td{width:34px;min-width:34px}
  .episode-ratings .rating-table .mean-column{padding-left:4px}
}
.ratings-grid{display:grid;gap:6px;min-width:max-content;align-items:center}
.ratings-axis{font-size:11px;color:var(--muted);text-align:center}
.ratings-season{font-size:12px;text-align:left;color:var(--ink-2)}
.ratings-cell{display:grid;place-items:center;width:100%;min-width:34px;height:38px;border:0;border-radius:4px;font:inherit;font-size:12px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;color:#120a00;cursor:pointer;transition:box-shadow .12s}
.ratings-cell:hover,.ratings-cell:focus-visible{box-shadow:0 0 0 2px var(--ink);outline-offset:3px}
/* A score from TVmaze rather than TMDB (fromTvmaze in ratings.js) wears a notch in its top
   right corner, in the cell's own ink at .7, dark on the light bands and white on the dark
   ones, so it keeps 3:1 on every band (test_ratings.mjs) and reads at a phone's 34 pixels;
   the key names it. */
.from-tvmaze{position:relative;overflow:hidden}
.from-tvmaze::after{content:'';position:absolute;top:0;right:0;width:9px;height:9px;background:currentColor;opacity:.7;
  clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}
.ratings-list-score.from-tvmaze{padding-right:9px}
.ratings-list-score.from-tvmaze::after{width:7px;height:7px}
.ratings-key i.from-tvmaze{width:12px;height:12px}
.ratings-key i.from-tvmaze::after{width:6px;height:6px}
/* And on a timeline a ring, in its band's colour, where TMDB's points are solid. */
.ratings-point.tvmaze-point{fill:var(--bg-2);stroke:var(--point);stroke-width:1.25}
.ratings-key i.tvmaze-point{width:10px;height:10px;border:2px solid currentColor;border-radius:50%}
.ratings-average{text-align:center;font-size:13px;font-weight:700}
.ratings-wrapped-season{margin:22px 0}
.ratings-wrapped-heading{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px}
.ratings-wrapped-heading span{color:var(--muted);font-size:13px}
.ratings-wrapped-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px}
.ratings-wrapped-cells>div{display:flex;flex-direction:column;gap:4px}
.ratings-chart-frame{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);min-width:0;background:var(--bg-2)}
.ratings-chart-axis{display:block;width:46px;height:auto;pointer-events:none}
.ratings-chart-axis text{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.ratings-chart-wrap{min-width:0;overflow-x:auto;overflow-y:hidden;margin:0;padding:0 0 8px;overscroll-behavior-x:contain;
  scroll-padding-inline:20px;scrollbar-width:auto;scrollbar-color:#6c6c6c #252525}
.ratings-chart-wrap:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ratings-chart-wrap::-webkit-scrollbar{height:10px}
.ratings-chart-wrap::-webkit-scrollbar-track{background:#252525;border-radius:6px}
.ratings-chart-wrap::-webkit-scrollbar-thumb{background:#6c6c6c;border:2px solid #252525;border-radius:6px;min-width:40px}
.ratings-chart-wrap::-webkit-scrollbar-thumb:hover{background:#929292}
/* Pixel-width plots keep episode targets and text the same size on every screen. */
.ratings-timeline{display:block;width:auto;height:auto;min-width:0;max-width:none}
.ratings-timeline text{font-size:12px;fill:var(--muted)}
.ratings-chart-grid{fill:none;stroke:#ffffff12;stroke-width:1}
.ratings-season-bands,.ratings-x-axis,.ratings-season-guides,.ratings-episode-guides{pointer-events:none}
.ratings-season-band{fill:var(--ink);opacity:.025}
.ratings-x-baseline{stroke:var(--muted);stroke-width:1;opacity:.4}
.ratings-season-guide{stroke:var(--muted);stroke-width:1;opacity:.19}
.ratings-episode-guide{stroke:var(--muted);stroke-width:1;opacity:.055}
.ratings-season-tick{stroke:var(--ink-2);stroke-width:1.5;opacity:.8}
.ratings-episode-tick{stroke:var(--muted);stroke-width:1;opacity:.35}
.ratings-timeline .ratings-season-label{fill:var(--ink-2);font-weight:650;font-variant-numeric:tabular-nums}
.ratings-timeline .ratings-episode-label{font-variant-numeric:tabular-nums}
.ratings-raw-line{opacity:.65;stroke-linecap:round;stroke-linejoin:round}
.ratings-chart-frame-comparison .ratings-raw-line{opacity:.85}
.ratings-trend{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ratings-trend-single{fill:var(--brand)}
.ratings-chart-label{position:absolute;top:0;left:46px;right:0;margin:0;padding:4px 0 5px 20px;background:var(--bg-2);
  color:var(--ink-2);font-size:13px;font-weight:650;line-height:1.4;pointer-events:none;z-index:1}
.ratings-chart-label::before{content:'';display:inline-block;width:18px;height:2px;margin-right:8px;background:#929292;vertical-align:middle}
.ratings-chart-label-trend{top:300px;padding-top:0;padding-bottom:0}
.ratings-chart-label-trend::before{height:3px;background:var(--brand)}
.ratings-chart-label-trend span{display:inline-block;margin-left:10px;color:var(--dim);font-size:12px;font-weight:400;line-height:16px}
.ratings-chart-frame-comparison .ratings-chart-label::before{display:none}
.ratings-scroll-hint{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.ratings-point{stroke:var(--bg-2);stroke-width:var(--ratings-point-stroke,1.5)}
.ratings-point-hit{cursor:pointer;outline:none}
.ratings-chart-frame:not(.ratings-chart-frame-comparison) .ratings-point-hit{pointer-events:none}
.ratings-point-hit:hover .ratings-point,.ratings-point-hit.is-hovered .ratings-point,.ratings-point-hit:focus-visible .ratings-point{stroke:var(--ink);stroke-width:2.5;r:5.5}
.ratings-credit,.ratings-empty{color:var(--dim);font-size:12px;line-height:1.5;margin:12px 0}
.episode-ratings .ratings-list-code{font-size:11px;line-height:1.5;padding-top:20px;white-space:normal}
/* Folded, a title's row shows --shown cards whole (title-sections.js) and the edge of the
   next, and runs to the sheet's edges as the home page's rows run to the screen's, its first
   card level with the words above it; a mouse gets the home rows' arrows. */
.ratings-title-list.rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--shown,4) * 14px) / (var(--shown,4) + .3));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px;margin:0 -4px;scroll-padding:0 4px}
.ratings-title-list.rail::-webkit-scrollbar{display:none}
.ratings-title-list.rail>li{scroll-snap-align:start}
.cast.ratings-title-list.rail{grid-auto-columns:calc((100% - var(--shown,6) * 14px) / (var(--shown,6) + .3));margin-bottom:0}
.rail-slider{position:relative}
.t-section .ratings-title-list.rail{margin-inline:calc(-1 * var(--sheet-pad));padding-inline:var(--sheet-pad);
  scroll-padding-inline:var(--sheet-pad)}
.rail-slider>.nudge{top:0;bottom:0;width:max(var(--sheet-pad),44px)}
.rail-slider>.nudge.prev{left:calc(-1 * var(--sheet-pad))}
.rail-slider>.nudge.next{right:calc(-1 * var(--sheet-pad))}
@media(hover:hover) and (pointer:fine){.rail-slider:hover>.nudge{opacity:1}}
.about>.reveal-bar{margin-bottom:18px}
.episode-ratings .ep h3{align-items:flex-start;flex-wrap:wrap}
.episode-ratings .ep-open{flex:1;min-width:0}
.episode-ratings .ratings-list-meta{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;white-space:nowrap}
.episode-ratings .ratings-list-score{display:inline-flex;align-items:baseline;gap:2px;border-radius:4px;padding:3px 6px;font-size:12px;font-variant-numeric:tabular-nums;line-height:1.25}
.ratings-list-score b{font-weight:700}
.ratings-list-score small{font-size:9px}
.ratings-tooltip{position:fixed;z-index:30;width:300px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);background:#242424;border:1px solid #4c4c4c;border-radius:7px;box-shadow:0 12px 32px #000b;overflow:auto;color:var(--ink)}
.ratings-tooltip[hidden]{display:none}
.ratings-tooltip img{display:block;width:100%;height:136px;object-fit:cover}
.ratings-tooltip-body{padding:12px 14px}
.ratings-tooltip-code{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}
.ratings-tooltip-body>b{display:block;font-size:14px;line-height:1.35}
.ratings-tooltip-score{display:flex;align-items:center;gap:12px;margin-top:12px}
.ratings-tooltip-score strong{border-radius:4px;padding:3px 6px;font-size:27px;font-weight:800;font-variant-numeric:tabular-nums}
.ratings-tooltip-score span{font-size:12px;font-weight:600}
.ratings-tooltip-score small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:3px}
.ratings-tooltip-summary{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.ratings-compare{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
.ratings-compare-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ratings-compare h4{font-size:14px;margin:0;font-weight:600}
.ratings-compare-selected{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--brand)}
.ratings-compare-selected button{display:flex;color:var(--muted)}
.ratings-search-wrap{position:relative;max-width:380px}
.ratings-search-wrap>.ratings-icon{position:absolute;top:12px;left:12px;color:var(--muted)}
.ratings-search-wrap input{width:100%;min-height:42px;padding:10px 12px 10px 40px;border:1px solid #4d4d4d;border-radius:4px;background:#242424;font:inherit;font-size:14px;color:var(--ink)}
.ratings-compare-results{position:absolute;left:0;right:0;top:calc(100% + 5px);padding:5px;z-index:7;background:#242424;border:1px solid #444;border-radius:6px;box-shadow:0 12px 32px #0008;max-height:310px;overflow-y:auto}
.ratings-search-result{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:8px;color:var(--ink-2);background:none;border:0;border-radius:4px}
.ratings-search-result:hover,.ratings-search-result:focus-visible{background:#ffffff12}
.ratings-search-result img{width:28px;height:42px;object-fit:cover;border-radius:3px}
.ratings-search-result b{font-weight:600;font-size:13px;display:block}
.ratings-search-result small{font-size:11px;color:var(--muted)}
.ratings-search-result>.ratings-icon{margin-left:auto;color:var(--dim)}
.ratings-search-status{color:var(--muted);font-size:12px;margin:8px 0}
.ratings-search-status:empty{display:none}
.ratings-comparison-key{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;margin-top:22px}
.ratings-comparison-key span{min-width:0;overflow-wrap:anywhere}
.ratings-comparison-key span::before{content:'';display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:7px;background:var(--brand)}
.ratings-comparison-key span:last-child::before{background:#91b9dc}
.ratings-card-preference{border:0;margin:0;padding:14px 16px;border-block:1px solid #2c2c2c}
.ratings-card-preference legend{float:left;font-size:14.5px;color:var(--ink-2);margin-bottom:10px}
.ratings-card-choices{display:flex;gap:8px;clear:both}
.ratings-card-choices button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:40px;border:1px solid #4d4d4d;border-radius:4px;background:#242424;color:var(--ink-2);font-size:12px}
.ratings-card-choices button[aria-pressed=true]{border-color:var(--brand);color:var(--brand);background:#ffb0200b}
.ratings-card-preference p{font-size:11px;color:var(--dim);margin:8px 0 0}
.ratings-card-matrix,.ratings-card-skeleton{display:none}
.ratings-matrix-cards :is(.ratings-card-matrix,.ratings-card-skeleton){display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;width:100%;height:100px;padding:10px 8px 5px;border:0;border-radius:0 0 var(--r) var(--r);background:none;text-align:left}
.ratings-card-matrix{cursor:pointer}
.ratings-related-card{min-width:0}
.more .ratings-related-card>.card{width:100%}
.more.ratings-title-list.rail{padding-block:10px 16px;margin-block:-10px -16px}
.ratings-card-summary{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ratings-card-reason{flex-basis:100%;font-size:11px;color:var(--match)}
@media(hover:hover) and (pointer:fine){
  .card .quick .round.tiny{flex:0 1 28px;min-width:0;height:auto;aspect-ratio:1}
  .ratings-matrix-cards .card>.card-meta{bottom:100px}
  .ratings-matrix-cards .card>.badge-rate{bottom:106px}
  .card:hover>.badge-rate,.card:focus-within>.badge-rate{visibility:hidden}
}
.ratings-card-matrix:hover{background:#ffffff09}
.ratings-mini{display:block;width:100%;height:64px;object-fit:contain}
.ratings-mini-caption{font-size:11px;line-height:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A card's caption: the episode count whole, then by season and the source while they fit on
   its one line; whatever does not fit wraps to a second line, which is never shown. */
.ratings-mini-parts{display:flex;flex-wrap:wrap;column-gap:.3em;flex:none;height:13px}
.ratings-mini-parts>span{flex:none}
.ratings-mini-empty{font-size:11px;color:var(--dim)}
.ratings-mini-loading{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:3px;width:100%;height:64px}
.ratings-mini-cell{min-width:0;border-radius:2px}
/* A card's cells shimmer only while its matrix is on its way (show-cards.js). One still
   waiting to come near holds still: a shimmer repaints every frame, and a page of rows holds
   thousands of these cells, most of them past the screen or the edge of their row. */
.ratings-card-matrix:not([data-matrix-state=queued],[data-matrix-state=loading]) .skel{animation-play-state:paused}
@media(max-width:600px){.ratings-controls{gap:8px}.ratings-controls select{min-width:0;flex:1;font-size:15px;padding:8px}.ratings-view-button{gap:8px;font-size:15px;padding:8px 10px}.ratings-view-button>.ratings-icon:last-child{margin-left:4px}.ratings-key{gap:9px 12px}.ratings-key small{display:none}.ratings-cell{height:40px}.ratings-compare-head{align-items:flex-start;flex-direction:column;gap:8px}.ratings-search-wrap input{font-size:16px}.ratings-matrix-cards :is(.ratings-card-matrix,.ratings-card-skeleton){height:80px;padding:8px 3px 3px}.ratings-mini,.ratings-mini-loading{height:46px}.ratings-mini-caption{font-size:9px}}
@media(max-width:600px){.ratings-chart-label-trend span{display:block;margin-left:26px}}
@media(max-width:600px) and (hover:hover) and (pointer:fine){.ratings-matrix-cards .card>.card-meta{bottom:80px}.ratings-matrix-cards .card>.badge-rate{bottom:86px}}
/* A phone's matrix caption reads at 11px too, in the room its 9px one had. */
@media(max-width:600px){.ratings-mini-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.ratings-cell{transition:none}}
@media(max-width:600px){.episode-ratings .ep h3{flex-direction:column;gap:6px}.episode-ratings .ratings-list-meta{gap:8px}}
@media(max-width:759px){.more.ratings-title-list.rail{grid-auto-columns:calc((100% - 2 * 10px) / 2.3)}.cast.ratings-title-list.rail{grid-auto-columns:calc((100% - 3 * 14px) / 3.3)}}

/* Your taste uses the same amber, dark surfaces and system type as Couchside. */
#taste .sheet{max-width:760px}
#taste .sheet.pad{padding-bottom:calc(28px + var(--edge-b,0px))}
.taste-view{--taste-reference:#9aa5b5;min-width:0}
.taste-intro{margin:0 0 18px;color:var(--muted);font-size:14px;line-height:1.55}
.taste-counts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 22px;color:var(--muted);font-size:13px}
.taste-counts strong{color:var(--ink);font-size:20px;font-weight:750;letter-spacing:-.025em;margin-right:5px}
.taste-tabs{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:7px;background:var(--bg);margin-bottom:24px}
.taste-tab{flex:1;min-width:0;min-height:44px;border:0;border-radius:4px;padding:10px 12px;background:none;color:var(--muted);font-size:14px;font-weight:650;cursor:pointer}
.taste-tab:hover{color:var(--ink);background:#ffffff08}
.taste-tab[aria-selected=true]{color:var(--brand);background:#ffb02012;box-shadow:inset 0 -2px var(--brand)}
.taste-panel{min-width:0;outline:none}
.taste-panel h3{margin:0 0 8px;font-size:19px;line-height:1.3;letter-spacing:-.02em}
.taste-panel .taste-copy{margin:0 0 19px;color:var(--ink-2);font-size:14px;line-height:1.55}
.taste-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin:0 0 16px;color:var(--muted);font-size:12px}
.taste-legend span{display:inline-flex;align-items:center;gap:7px}
.taste-legend i{display:inline-block;width:18px;height:5px;border-radius:1px;background:var(--brand)}
.taste-legend .taste-reference-key{background:none;border-top:2px dashed var(--taste-reference);height:0}
.taste-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:19px}
.taste-bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;min-width:0}
.taste-bar-label{font-weight:650;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.taste-bar-values{display:flex;align-items:baseline;gap:10px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.taste-bar-values strong{color:var(--brand);font-size:15px;font-weight:700;min-width:36px;text-align:right}
.taste-bar-track{grid-column:1/-1;height:9px;position:relative;border-radius:2px;background:#2d2d2d;
  background-image:linear-gradient(to right,transparent calc(100% - 1px),#ffffff12 0);background-size:25% 100%}
.taste-bar-fill{position:absolute;inset:0 auto 0 0;max-width:100%;border-radius:2px;background:var(--brand)}
.taste-bar-reference{position:absolute;top:-4px;height:17px;width:2px;background:var(--taste-reference);transform:translateX(-1px);border-radius:1px}
.taste-scale{display:flex;justify-content:space-between;margin:10px 0 0;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.taste-more{display:block;margin:20px 0 0;padding:10px 0;min-height:44px;border:0;background:none;color:var(--brand);font-size:14px;font-weight:600;cursor:pointer}
.taste-note{margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.6}
.taste-note + .taste-note{margin-top:8px;padding-top:0;border:0}
.taste-radar{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;overflow:visible}
.taste-radar-grid{fill:none;stroke:#ffffff17;stroke-width:1}
.taste-radar-axis{stroke:#ffffff17;stroke-width:1}
.taste-radar-label{fill:var(--ink-2);font-size:18px;font-weight:550}
.taste-radar-scale{fill:var(--dim);font-size:14px;font-variant-numeric:tabular-nums}
.taste-radar-reference{fill:var(--taste-reference);fill-opacity:.045;stroke:var(--taste-reference);stroke-width:1.7;stroke-dasharray:5 4;stroke-linejoin:round}
.taste-radar-liked{fill:var(--brand);fill-opacity:.13;stroke:var(--brand);stroke-width:2.2;stroke-linejoin:round}
.taste-radar-point{fill:var(--brand);stroke:var(--bg-2);stroke-width:1.5}
.taste-values{width:100%;border-collapse:collapse;margin:14px 0 0;font-size:13px}
.taste-values caption{text-align:left;color:var(--muted);font-size:12px;padding:0 0 10px}
.taste-values th,.taste-values td{padding:9px 0;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.taste-values th:first-child{text-align:left;max-width:60%;font-weight:500;overflow-wrap:anywhere}
.taste-values thead th{font-size:11px;color:var(--muted);font-weight:500;padding-top:0}
.taste-values tbody td:nth-child(2){color:var(--brand)}
.taste-signal-section{margin-top:24px}
.taste-signal-section:first-child{margin-top:0}
.taste-signal-section h4{margin:0 0 13px;color:var(--muted);font-size:11px;letter-spacing:.075em;font-weight:700;text-transform:uppercase}
.taste-signals{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.taste-signal{padding-left:13px;border-left:2px solid var(--brand)}
.taste-signal.avoid{border-color:#b48e79}
.taste-signal.absent{border-color:#656c78}
.taste-signal strong{display:block;font-size:15px;line-height:1.4;font-weight:650}
.taste-signal .taste-family{display:block;color:var(--dim);font-size:11px;margin-bottom:3px}
.taste-signal p{margin:4px 0 0!important;color:var(--muted)!important;font-size:13px!important;line-height:1.5!important}
.taste-interest{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.taste-interest strong{font-size:14px;font-weight:600;color:var(--ink-2)}
.taste-interest span{margin-left:auto;color:var(--muted);white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums}
.taste-status{padding:24px 0 8px;min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.taste-status h3{margin:0 0 8px;font-size:20px;line-height:1.3}
.taste-status p{max-width:48ch;margin:0 0 15px!important;color:var(--muted)!important;font-size:14px!important;line-height:1.6!important}
.taste-status .btn{min-height:44px}
.taste-loading-bars{width:100%;display:grid;gap:18px;margin:0 0 22px}
.taste-loading-bars span{height:8px;display:block;max-width:100%;background:var(--bg-4);border-radius:2px}
.taste-loading-bars span:nth-child(2){width:78%}
.taste-loading-bars span:nth-child(3){width:54%}
.taste-loading-bars span:nth-child(4){width:67%}
@media(min-width:600px){
  .taste-bars{gap:21px}
  /* The values take the room their widest needs, "66.7%" beside "catalog 41.8%", and the
     catalog's a set width, so your likes line up down the chart. */
  .taste-bar-row{grid-template-columns:140px minmax(0,1fr) 150px;align-items:center;gap:14px}
  .taste-bar-track{grid-column:2;grid-row:1}
  .taste-bar-values{grid-column:3;grid-row:1;justify-content:flex-end}
  .taste-bar-values span{min-width:86px}
  .taste-scale{margin-left:154px;margin-right:164px}
}
@media(max-width:380px){
  .taste-tab{padding-inline:8px;font-size:13px}
  .taste-bar-values{gap:6px}
  .taste-interest{align-items:flex-start}
  .taste-radar-label{font-size:22px}
  .taste-radar-scale{font-size:18px}
}
@media(prefers-reduced-motion:no-preference){.taste-tab{transition:background-color .15s,color .15s}.taste-loading-bars{animation:taste-breathe 1.3s ease-in-out infinite}}
@keyframes taste-breathe{50%{opacity:.45}}
@media(forced-colors:active){
  .taste-tab[aria-selected=true]{outline:2px solid Highlight;outline-offset:-2px}
  .taste-bar-track{border:1px solid CanvasText}
  .taste-bar-fill{background:Highlight;forced-color-adjust:none}
  .taste-bar-reference{background:CanvasText}
  .taste-radar-grid,.taste-radar-axis{stroke:GrayText}
  .taste-radar-reference{stroke:CanvasText;fill:none}
  .taste-radar-liked{stroke:Highlight;fill:none}
}

/* Episode matrices share the title page's compact cells and rating palette. */
.rating-table{border-collapse:separate;border-spacing:6px;table-layout:fixed;min-width:max-content;margin:-6px}
.rating-table th{font-size:11px;font-weight:400;color:var(--muted);padding:5px 2px;min-width:34px;text-align:center}
.rating-table th:first-child{min-width:48px;text-align:left;font-size:12px;color:var(--ink-2)}
.rating-table td{padding:0;min-width:34px;width:38px}
.rating-cell{display:grid;place-content:center;width:100%;min-width:34px;height:38px;border:0;border-radius:4px;font:inherit;font-size:12px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;cursor:pointer}
.rating-cell:hover,.rating-cell:focus-visible{box-shadow:0 0 0 2px var(--ink);outline-offset:3px}
.rating-cell.mean-cell{background:none!important;color:var(--ink)!important;font-size:13px}
.cell-count{font-size:10px;font-weight:400;opacity:.8;display:block;margin-top:3px}
.rating-empty{display:block;height:38px;color:transparent}
.rating-table th small{display:block;font-size:10px;color:var(--dim);margin-top:3px}
.rating-table .mean-column{padding-left:6px}
.rating-table .average-row>*{border-top:1px solid var(--line);padding-top:8px}
.ratings-invert{font-size:13px;min-height:38px}
.t-icons{flex-wrap:wrap}
.round:disabled{opacity:.45;cursor:default}

/* Compare is reached from a show's title actions, using the existing page shell: its gutter
   is every page's, and the matrix and timeline take the width there is. */
.compare-page{padding:0 var(--gutter)}
.compare-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.compare-header .page-h{margin:0}
.compare-header .btn{flex:none}
.compare-page .note{margin-inline:0}
.compare-search{max-width:560px;margin:0 0 24px}
.compare-search:focus-within,.compare-search:has(.ratings-compare-results:not([hidden])){z-index:10}
.compare-search input{display:block}
.compare-search>.ratings-icon{top:50%;transform:translateY(-50%);pointer-events:none}
.compare-search .ratings-compare-results{max-height:310px;max-height:min(310px,40dvh,var(--compare-search-height,310px))}
.compare-search-group{margin:0;padding:8px;font-size:12px;font-weight:400;color:var(--muted)}
.compare-result-label{min-width:0;overflow-wrap:anywhere}
.compare-result-action{flex:none;margin-left:auto;font-size:12px;color:var(--muted)}
.compare-search .ratings-search-result img{flex:none;object-fit:cover}
.compare-cards{display:grid;align-items:start}
.compare-card{display:grid;grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 32px minmax(38px,max-content);gap:12px;min-width:0;padding:0 8px}
.compare-card-all{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 32px}
.compare-card.is-grabbed{outline:1px solid var(--brand);outline-offset:2px}
.compare-card.is-dragging{opacity:.45}
.compare-card-top{grid-row:1;display:flex;justify-content:space-between;align-items:center;margin:0 -8px}
.compare-card-top .icon-btn{color:var(--muted)}
.compare-reorder-handle{cursor:grab}
.compare-card-art{grid-row:2;min-width:0}
.compare-poster{position:relative;display:block;width:160px;height:var(--compare-poster-height,240px);background:#191919;border-radius:5px;overflow:hidden}
.compare-poster-name{display:grid;place-items:center;height:100%;padding:16px;color:var(--muted);font-size:13px;text-align:center;overflow-wrap:anywhere}
.compare-poster.has-image .compare-poster-name{visibility:hidden}
.compare-poster-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#191919}
.compare-poster-image.is-loading{opacity:0}
.compare-poster-full{z-index:1}
.compare-card-title{grid-row:3;width:100%;min-width:0;border-top:3px solid var(--show-colour);padding-top:10px}
.compare-card-title h2{margin:0;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.compare-card-title .link{display:inline-block;text-align:left;font-weight:600;line-height:inherit;white-space:normal}
.compare-retry{margin-top:6px}
.compare-card .note{margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.compare-card-meta{grid-row:4}
.compare-card-actions{grid-row:5;display:flex;gap:8px;align-items:center;min-width:0}
.compare-reorder-actions{display:flex;gap:6px;align-items:center;flex:none}
.compare-card-all-scope{flex:1;min-width:0;font-size:12px;line-height:14px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* A compact card is too narrow for it on one line beside the arrows, and has two lines' room. */
.layout-compact .compare-card-all-scope{white-space:normal;overflow-wrap:anywhere}
.compare-reorder-actions .round{width:32px;height:32px}
.compare-reorder-actions button:disabled{opacity:.35;cursor:default}
.compare-card-scope{grid-row:6;display:flex;align-items:start;min-width:0;min-height:38px;width:100%}
.compare-card-scope>span{font-size:12px;color:var(--muted);line-height:1.5;padding-block:10px}
.compare-card select{width:100%;min-width:0;min-height:38px;background:#242424;border:1px solid #4d4d4d;border-radius:4px;padding:8px 10px}
.compare-toolbar{gap:12px 20px;align-items:start}
.compare-toolbar button:disabled{opacity:.4;cursor:default}
.compare-selector-controls,.compare-toggle-controls{display:inline-flex;align-items:stretch;flex-wrap:nowrap;gap:12px;max-width:100%;min-width:0}
.compare-selector-controls{width:max-content}
.compare-selector-controls .compare-picker{flex:0 1 auto;min-width:0}
.compare-picker:has([aria-expanded="true"]){z-index:9}
.compare-picker .ratings-view-button{width:100%;min-width:0;height:100%}
.compare-picker .ratings-view-button>span{min-width:0;text-align:left}
.compare-selector-controls .ratings-view-button>span{white-space:nowrap}
.compare-picker .ratings-view-options{width:max(220px,100%);max-width:calc(100vw - 2 * var(--gutter))}
.compare-picker .ratings-view-options button>span{min-width:0;overflow-wrap:anywhere}
.compare-selector-controls .compare-picker:last-child .ratings-view-options{left:auto;right:0}
.compare-toggle-controls>button{flex:none;white-space:nowrap;min-height:40px}
.compare-board{border-top:1px solid var(--line);padding-top:20px}
.compare-board .ratings-grid-scroll{padding:4px 3px 12px;margin-inline:-3px;overscroll-behavior-x:contain}
.compare-board .rating-table th{min-width:104px}
.compare-board .rating-table th:first-child{min-width:56px}
.compare-board .rating-table td{min-width:108px}
.compare-board .rating-cell{height:48px}
.compare-board .rating-table .show-heading{color:var(--ink-2);font-size:12px;font-weight:600}
.compare-status{font-size:14px;color:var(--muted);margin:8px 0 20px}
.compare-snapshot-error{color:var(--ink-2)}

/* Timeline choices use the title page's view menu and native chart typography. */
.compare-timeline-settings{display:flex;flex-wrap:wrap;gap:16px 24px;margin:0 0 24px}
.compare-setting{display:flex;flex-direction:column;gap:8px;min-width:220px;max-width:100%}
.compare-setting-label{color:var(--muted);font-size:12px}
.compare-setting:last-child .ratings-view-options{left:auto;right:0}
.compare-timeline-layout{min-width:0;margin-top:24px}
.compare-timeline-plots{min-width:0}
.compare-timeline-posters{grid-auto-flow:column;grid-auto-columns:176px;grid-template-columns:none;column-gap:24px;row-gap:12px;justify-content:start;overflow-x:auto;margin:0 0 24px;padding:3px 3px 10px;overscroll-behavior-x:contain}
@supports(grid-template-rows:subgrid){
  .compare-timeline-posters{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 32px minmax(38px,max-content)}
  .compare-card{grid-row:span 6;grid-template-rows:subgrid}
  .compare-timeline-posters.scope-all{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 32px}
  .compare-card-all{grid-row:span 5;grid-template-rows:subgrid}
}
.compare-timeline-layout.layout-side{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.compare-timeline-layout.layout-side:has(.compare-card:nth-child(3)){grid-template-columns:376px minmax(0,1fr)}
.layout-side .compare-timeline-posters{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:176px;margin:0;overflow:visible}
.layout-side:has(.compare-card:nth-child(3)) .compare-timeline-posters{grid-template-columns:repeat(2,176px)}
.layout-compact{--compare-poster-height:180px}
/* A wide screen sets the matrix beside the posters whenever it fits there, rather than under
   them with the width beside them empty, and keeps the posters in sight beside a long one;
   a matrix too wide for the room left goes under them, as on a narrower screen. */
@media(min-width:1100px){
  .compare-grid-view:not(.layout-side){display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 40px}
  .compare-grid-view:not(.layout-side)>.compare-timeline-posters{flex:none;max-width:100%}
  .compare-grid-view:not(.layout-side)>.compare-timeline-plots{flex:1 1 auto;min-width:0}
  .compare-grid-view .ratings-key{contain:inline-size}
}
@media(min-width:1100px) and (min-height:640px){
  .compare-grid-view:not(.layout-side)>.compare-timeline-posters{position:sticky;top:calc(var(--nav) + var(--safe-t) + 12px)}
}
.layout-compact .compare-timeline-posters{grid-auto-columns:152px;column-gap:16px}
.layout-compact .compare-poster{width:120px}
.layout-compact .compare-card-title h2{font-size:14px}
.comparison-overlay-key{display:flex;flex-wrap:wrap;gap:12px 22px;margin:0 0 16px;color:var(--ink-2)}
.comparison-overlay-key-item{display:flex;align-items:center;gap:8px;font-size:13px}
.comparison-overlay-swatch{display:inline-block;flex:none;width:22px;height:3px;background:var(--comparison-show-colour);border-radius:2px}
.comparison-overlay-name{font-weight:600}
.comparison-overlay-mean{color:var(--muted);font-variant-numeric:tabular-nums}
.comparison-overlay .ratings-credit{margin-bottom:18px}
.comparison-overlay-frame,.comparison-overlay .ratings-chart-wrap{min-width:0}
.comparison-overlay .comparison-overlay-label{left:0;right:0;padding-left:0;white-space:nowrap}
.comparison-overlay .ratings-chart-label-trend{right:0}
.comparison-overlay .ratings-chart-wrap{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.comparison-overlay .ratings-timeline *{pointer-events:none}
.is-panning .ratings-chart-wrap{cursor:grabbing}
/* Reset floats inside the last plot; zoom and pan use the chart directly. */
.comparison-zoom-controls{position:absolute;bottom:var(--comparison-zoom-bottom,30px);right:8px;z-index:3;width:max-content;opacity:.65;transition:opacity .15s ease}
.comparison-zoom-controls:hover,.comparison-zoom-controls:focus-within{opacity:1}
.comparison-zoom-controls .round.small{display:grid;place-items:center;width:34px;height:34px;min-width:34px;padding:0;border:1px solid #4d4d4d;border-radius:50%;background:#242424;color:var(--ink-2);line-height:1}
.comparison-zoom-controls .comparison-zoom-reset .ratings-icon{width:16px;height:16px}
.comparison-zoom-controls button:hover{border-color:#888;background:#2c2c2c;color:var(--ink)}
.comparison-zoom-controls button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.comparison-zoom-range{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.comparison-overlay .comparison-zoom-hint{margin:8px 0 18px;font-size:11px}
/* A plain wheel over the chart scrolls the page; the first one says, over the chart and for
   a moment, how to zoom instead (compare-viewport.js). */
.comparison-wheel-hint{position:absolute;inset:0;z-index:4;display:grid;place-items:center;margin:0;padding:16px;
  background:#000000a6;color:#fff;font-size:15px;font-weight:700;text-align:center;pointer-events:none;
  animation:wheel-hint 1.8s ease both}
@keyframes wheel-hint{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
/* WebKit leaves the page where it is under a wheel that a listener sees and lets go by while
   the page's root holds overscroll-behavior none (style.css), so over the chart's board a
   mouse lets the root give that up, and a plain wheel there scrolls the page as elsewhere. */
@media(hover:hover){html:has([data-timeline-board]:hover){overscroll-behavior-y:auto}}
@media(any-pointer:coarse),(max-width:600px){
  .comparison-zoom-controls{opacity:1}
  .comparison-zoom-controls .round.small{width:44px;height:44px;min-width:44px}
  .comparison-overlay-frame{padding-top:12px}
  .comparison-overlay .comparison-overlay-label{top:12px;right:0}
  .comparison-overlay .ratings-chart-label-trend{top:312px;right:0}
}
.comparison-overlay .ratings-point-hit{pointer-events:none}
.comparison-overlay .ratings-point-hit:hover .comparison-overlay-point-hidden,.comparison-overlay .ratings-point-hit.is-hovered .comparison-overlay-point-hidden,.comparison-overlay .ratings-point-hit:focus .comparison-overlay-point-hidden{opacity:1}

@media(hover:none),(pointer:coarse){
  .compare-picker .ratings-view-button,.compare-picker .ratings-view-options button,.compare-toggle-controls>button{min-height:44px}
}

@media(max-width:759px){
  .rating-cell,.rating-empty{height:40px}
  .compare-header{flex-wrap:wrap;gap:12px}
  .compare-header .btn{padding:8px 14px}
  .compare-card{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 44px minmax(44px,max-content)}
  .compare-card-all{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 44px}
  .compare-card-scope{min-height:44px}
  @supports(grid-template-rows:subgrid){
    .compare-timeline-posters{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 44px minmax(44px,max-content)}
    .compare-card{grid-template-rows:subgrid}
    .compare-timeline-posters.scope-all{grid-template-rows:44px var(--compare-poster-height,240px) minmax(54px,max-content) minmax(18px,max-content) 44px}
    .compare-card-all{grid-template-rows:subgrid}
  }
  .compare-reorder-actions .round{width:44px;height:44px}
  /* The two menus share a row and the two switches the next, so every label keeps to one line. */
  .compare-toolbar{flex-wrap:wrap;align-items:stretch;gap:8px}
  .compare-selector-controls,.compare-toggle-controls{flex:1 1 100%;width:auto;min-width:0;gap:8px}
  .compare-selector-controls .compare-picker{flex:1 1 0;min-width:0}
  .compare-selector-controls .ratings-view-button{gap:6px;padding:8px 10px}
  .compare-picker .ratings-view-button>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .compare-selector-controls .ratings-view-button>.ratings-icon:last-child{width:14px;height:14px;margin-left:0;flex:none}
  .compare-selector-controls .compare-view .ratings-view-button>.ratings-icon:first-child{display:none}
  .compare-picker .ratings-view-button,.compare-toggle-controls>button{min-height:44px;font-size:13px;line-height:1.3}
  .compare-picker .ratings-view-options{width:max(200px,100%)}
  .compare-picker .ratings-view-options button{min-height:44px;font-size:14px}
  .compare-picker .ratings-view-options button>span{overflow-wrap:normal;white-space:nowrap}
  .compare-selector-controls .compare-picker:last-child .ratings-view-options{left:auto;right:0}
  .compare-toggle-controls>button{flex:1 1 0;min-width:0;padding:6px 10px;white-space:nowrap}
  .compare-timeline-settings{flex-wrap:nowrap;align-items:stretch;gap:10px}
  .compare-setting{flex:1 1 0;min-width:0}
  .compare-setting .compare-picker{flex:1}
  .compare-setting .ratings-view-button{gap:5px;padding:8px}
  .compare-setting .ratings-view-button>.ratings-icon:last-child{margin-left:0;flex:none}
  .compare-timeline-layout.layout-side,.compare-timeline-layout.layout-side:has(.compare-card:nth-child(3)){display:block}
  .layout-side .compare-timeline-posters,.layout-side:has(.compare-card:nth-child(3)) .compare-timeline-posters{grid-auto-flow:column;grid-auto-columns:184px;grid-template-columns:none;overflow-x:auto;margin-bottom:24px}
  .compare-timeline-posters .compare-reorder-actions .round{width:44px;height:44px}
  /* A card is wide enough for All seasons on one line beside its two 44px arrows. */
  .compare-timeline-posters{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:184px;column-gap:18px}
  .comparison-overlay-key{gap:12px 16px}
  .layout-compact .compare-timeline-posters{grid-auto-columns:152px;column-gap:12px}
}

/* The narrowest phones give each timeline setting a row of its own, its label on one line. */
@media(max-width:359px){
  .compare-timeline-settings{flex-wrap:wrap}
  .compare-setting{flex-basis:100%}
}

.tracking-native-saved{display:none!important}
.tracking-library{padding:0 var(--gutter)}
.tracking-intro{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:8px 0 28px}.tracking-intro p{margin:0;color:var(--muted);font-size:17px}
.tracking-sample{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#b9a882;white-space:nowrap}
.tracking-list-tools{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:24px}.tracking-filters{display:flex;gap:8px;overflow:auto;padding:3px 1px 8px}.tracking-filters .chip{white-space:nowrap;min-height:38px;padding:7px 15px;font-size:13px}
.tracking-find{display:flex;align-items:center;gap:8px;max-width:230px;border:1px solid var(--line);border-radius:5px;background:#191919;padding:0 12px}.tracking-find input{width:100%;min-width:0;padding:10px 0;border:0;background:none;outline:none}.tracking-find:focus-within{border-color:var(--brand)}.tracking-find svg{width:17px;flex:none;color:var(--muted)}
.tracking-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:44px}
.tracking-card{display:grid;grid-template-columns:116px minmax(0,1fr);gap:19px;background:#1b1b1b;border:1px solid #303030;border-radius:8px;padding:18px;overflow:hidden;min-width:0}
.tracking-poster{display:block;align-self:start;aspect-ratio:2/3;border-radius:4px;overflow:hidden;background:#292929}.tracking-poster img{width:100%;height:100%;object-fit:cover;display:block}
.tracking-card-body{min-width:0}.tracking-card-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:1px 0 12px}.tracking-status{display:inline-flex;align-items:center;border-radius:4px;padding:3px 7px;font-size:11px;font-weight:650;letter-spacing:.01em;background:#383838;color:#ccc}
.tracking-watching{color:#ffca75;background:#443320}.tracking-caught,.tracking-completed{color:#78dba2;background:#203e2d}.tracking-paused{color:#d4c6b6;background:#3b342b}.tracking-dropped{color:#c2b3bb;background:#332b2f}.tracking-want{color:#cdcdcd;background:#343434}.tracking-saved{font-size:11px;color:var(--dim)}
.tracking-name{display:block;font-size:21px;line-height:1.2;font-weight:750;text-decoration:none;letter-spacing:-.015em;margin-bottom:10px}.tracking-name:hover{text-decoration:underline;text-underline-offset:3px}
.tracking-position{font-size:13px;color:#cecece;margin:0 0 5px}.tracking-next{font-size:13px;color:#999;margin:0 0 14px}
.tracking-bar{height:3px;border-radius:5px;background:#3a3a3a;overflow:hidden}.tracking-bar span{display:block;height:100%;background:var(--brand);border-radius:5px}.tracking-caught+.tracking-bar span,.tracking-completed+.tracking-bar span{background:var(--match)}
.tracking-count{font-size:11px;color:var(--muted);margin:7px 0 0;font-variant-numeric:tabular-nums}.tracking-card-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.btn.tracking-primary{background:#ffb020;color:#18130a;font-weight:750;font-size:13px;padding:9px 12px;min-height:38px;white-space:normal;border:1px solid transparent}.btn.tracking-primary:hover{background:#ffc158}.tracking-text-button{background:none;border:0;padding:5px 0;font:inherit;font-size:12px;color:#d2d2d2;cursor:pointer;text-decoration:none}.tracking-text-button:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tracking-empty{color:var(--muted);padding:20px 0;grid-column:1/-1}.tracking-empty p{margin:0 0 12px}.tracking-empty .empty-steps{margin:0}
.tracking-detail{margin:2px var(--sheet-pad,5%) 28px;padding:22px;border:1px solid #393329;border-radius:8px;background:#211e19}
.tracking-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:21px}.tracking-detail-head h2{margin:0;font-size:21px}.tracking-detail-main{display:grid;grid-template-columns:165px minmax(0,1fr);gap:24px;align-items:center}
.tracking-status-select{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}.tracking-status-select select,.tracking-edit-field select{width:100%;border:1px solid #554b3b;border-radius:5px;background:#2b271f;color:#f3ede3;padding:10px 12px;font-weight:600}
.tracking-detail-numbers{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.tracking-detail-numbers strong{font-size:15px;font-weight:600}.tracking-detail-numbers>span:not(.tracking-status){display:block;width:100%;font-size:12px;color:var(--muted)}.tracking-detail-numbers .tracking-bar{width:100%;margin-top:1px}
.tracking-up-next{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:21px;padding-top:19px;border-top:1px solid #3c3529}.tracking-up-next>div{display:flex;gap:6px;flex-direction:column}.tracking-eyebrow{font-size:10px;letter-spacing:.11em;color:#c5b592}.tracking-up-next strong{font-size:16px}.tracking-up-runtime{font-size:12px;color:var(--muted)}
.tracking-detail-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.tracking-detail-actions>span{font-size:11px;color:#ab9e88}
.tracking-episode{padding-right:60px!important;position:relative}.tracking-episode-check{position:absolute;right:7px;top:19px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border:1px solid #656565;border-radius:50%;background:#222;color:#85d7a5;cursor:pointer}.tracking-episode-check svg{width:18px}.tracking-episode-check[aria-pressed=true]{background:#243e2d;border-color:#457356}.tracking-episode-unwatched .ep-still::after{content:'Unwatched';position:absolute;inset:0;display:grid;place-items:center;color:#a8a8a8;font-size:12px}.tracking-episode-watched .ep-num{color:#7ebb94}
.episode-spoiler-note{margin:0 0 18px;padding:12px 14px;border-left:2px solid #b78e4e;background:#b78e4e0c;color:#c7b794;font-size:13px;line-height:1.55}.ep .ep-spoiler-note{color:#ad9b7d;font-size:12px;font-style:italic}.ratings-tooltip-spoiler{color:#c7b794}.e-summary .episode-spoiler-note{margin-bottom:0}
.tracking-continue{padding:15px var(--gutter) 26px}.tracking-home-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 15px}.tracking-home-head h2{margin:0;font-size:23px}.tracking-continue-rail{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0;scrollbar-width:none;padding-bottom:6px}.tracking-continue-rail::-webkit-scrollbar{display:none}.tracking-continue-rail>.tracking-card{scroll-snap-align:start}.tracking-card-compact{flex:0 0 430px}.tracking-card-compact .tracking-saved{display:none}
/* The first recommendation row may overlap the hero, never a watching shelf. */
@media(min-width:760px){.tracking-continue:not([hidden]){position:relative;z-index:2}.hero:not([hidden])+.tracking-continue:not([hidden]){margin-top:clamp(-150px,-9vw,-60px)}.tracking-continue:not([hidden])+.rows{margin-top:0}}
.tracking-edit{position:fixed;inset:0;z-index:100;width:min(480px,calc(100% - 28px));max-height:calc(100dvh - 32px);margin:auto;padding:26px;border:1px solid #4a4235;border-radius:10px;background:#211e19;color:#f4f0e8;overflow:auto;box-shadow:0 20px 90px #0008}.tracking-edit::backdrop{background:#000b}.tracking-edit-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.tracking-edit-head h2{font-size:24px;margin:0}.tracking-edit-head .icon-btn{margin-right:-12px}.tracking-edit-show{color:#c9b995;margin:2px 0 25px;font-size:14px}.tracking-edit-field{display:flex;flex-direction:column;gap:9px;font-size:13px}.tracking-edit-hint{font-size:13px;color:#b8b2a7;line-height:1.55;margin:12px 0}.tracking-edit-total{font-size:12px;color:#cfc0a2;margin-bottom:26px}.tracking-edit-buttons{display:flex;justify-content:flex-end;gap:10px}.tracking-mark-all{display:block;margin:20px auto 0;font-size:13px}
.tracking-edit-field select{width:100%;min-height:44px;padding:9px 10px;border:1px solid #655a48;border-radius:5px;background:#181612;color:inherit;font:inherit;font-size:16px}.tracking-edit-season{margin:24px 0 0;padding:17px 0 0;min-width:0;border:0;border-top:1px solid #4a4235}.tracking-edit-season legend{padding:0 8px 0 0;font-size:14px;font-weight:650;color:#d8c5a4}.tracking-season-mark{width:100%;min-height:44px}
@media(min-width:1450px){.tracking-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tracking-card{grid-template-columns:100px minmax(0,1fr);gap:16px}.tracking-name{font-size:19px}}
@media(max-width:1100px){.tracking-list-tools{flex-wrap:wrap;gap:12px}.tracking-filters{width:100%}.tracking-find{max-width:100%;width:100%}.tracking-card{grid-template-columns:92px minmax(0,1fr);gap:15px;padding:16px}.tracking-name{font-size:19px}.tracking-card-actions{gap:10px}}
@media(max-width:759px){.tracking-intro{align-items:flex-start;gap:10px;margin-bottom:21px}.tracking-intro p{font-size:15px;max-width:240px}.tracking-sample{font-size:9px}.tracking-grid{grid-template-columns:1fr;gap:12px;margin-bottom:32px}.tracking-card{grid-template-columns:94px minmax(0,1fr);padding:14px;gap:16px}.tracking-card-top{margin-bottom:10px}.tracking-name{font-size:20px}.tracking-card-actions{margin-top:14px}.tracking-count{font-size:11px}.tracking-detail{padding:18px;margin-left:5%;margin-right:5%}.tracking-detail-head h3{font-size:20px}.tracking-detail-main{grid-template-columns:1fr;gap:16px}.tracking-status-select{flex-direction:row;align-items:center;gap:14px}.tracking-status-select select{width:100%;min-width:0}.tracking-detail-actions{flex-wrap:wrap;gap:2px}.tracking-detail-actions>span{font-size:10px}.tracking-up-next strong{font-size:14px}.tracking-up-next .btn{flex:none}.tracking-episode{padding-right:44px!important}.tracking-episode-check{right:0;width:34px;height:34px}.tracking-card-compact{flex-basis:340px}.tracking-home-head h2{font-size:20px}.tracking-home-head a{font-size:11px}.tracking-edit{padding:20px}.tracking-edit-head h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.tracking-bar span{transition:none}}
.tracking-detail-skeleton{margin-top:21px}.tracking-detail-select-placeholder{display:block;min-height:44px;border-radius:5px}.tracking-detail-line-placeholder{display:block;height:14px;width:75%;border-radius:3px}.tracking-detail-numbers .tracking-detail-line-placeholder{width:100%}.tracking-detail-numbers .tracking-detail-line-placeholder:first-child{width:45%;height:20px}.tracking-detail-action-placeholder{display:block;width:110px;min-height:44px;border-radius:5px;flex:none}.tracking-detail-skeleton .tracking-detail-actions .tracking-detail-line-placeholder{width:30%;height:22px}.tracking-continue-rail>.tracking-empty{flex:1;min-width:200px}.tracking-continue-rail>.btn{align-self:center;flex:none}

/* Upright backdrop: fixed artwork, a subdued side matrix, and explicit actions. */
.tracking-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.tracking-card.tracking-card-upright{--watch-poster-width:152px;--watch-body-height:228px;--watch-matrix-bg:#1b1b1b;position:relative;display:grid;grid-template-columns:var(--watch-poster-width) minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) 48px 54px;gap:0;padding:0;min-height:0;height:calc(var(--watch-body-height) + 56px);min-width:0;overflow:hidden;border:1px solid #353535;border-radius:7px;background:#1b1b1b;align-content:stretch}
.tracking-card-upright.tracking-card-compact{flex-basis:315px}
.tracking-card-upright .tracking-poster{grid-column:1;grid-row:1/4;aspect-ratio:auto;align-self:stretch;min-height:0;height:100%;border-radius:0;z-index:2}
.tracking-card-upright .tracking-poster img{object-position:center}
.tracking-card-upright .tracking-card-body{grid-column:2;grid-row:1;padding:12px 10px 5px 12px;min-width:0;z-index:2}
.tracking-card-upright .tracking-card-top{margin:0 28px 8px 0;gap:0}
.tracking-card-upright .tracking-status{font-size:10px;line-height:1.3;padding:3px 5px;white-space:nowrap}
.tracking-card-upright .tracking-name{font-size:18px;line-height:1.14;margin:0 0 6px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tracking-card-upright .tracking-position{font-size:11px;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.watch-tracking-map{grid-column:2;grid-row:2;height:100%;min-height:0;min-width:0;padding:6px 0 4px 6px;opacity:.72;mask-image:linear-gradient(90deg,#0009,#000 28%);align-self:stretch}
.watch-tracking-matrix-window{position:relative;min-height:0;height:100%;overflow:hidden}
.watch-tracking-matrix{display:block;width:100%;height:100%;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6b6b6b transparent;overscroll-behavior:contain;cursor:default}
.watch-tracking-matrix .ratings-mini{display:block;width:100%;max-width:100%;min-width:0;height:auto;max-height:none;min-height:0;overflow:visible}
.watch-tracking-matrix .ratings-mini-loading{height:65px}
.watch-tracking-matrix:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.watch-tracking-matrix-empty,.watch-tracking-matrix .ratings-mini-empty{font-size:11px;color:#999}
.watch-tracking-matrix-window::after{content:'';position:absolute;z-index:2;pointer-events:none;opacity:0}
.watch-tracking-matrix-window::after{inset:auto 0 0;height:26px;background:linear-gradient(transparent,var(--watch-matrix-bg))}
.watch-tracking-matrix-window[data-more-below=true]::after{opacity:1}
.tracking-card-upright .tracking-card-progress{grid-column:2;grid-row:3;align-self:end;height:100%;min-height:0;min-width:0;padding:5px 10px 6px 12px;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;align-content:center;gap:3px;z-index:2}
.tracking-card-upright .tracking-bar{width:100%;height:2px}
.tracking-card-upright .tracking-count,.tracking-card-upright .tracking-next{margin:0;font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums}
.tracking-card-upright .tracking-next{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#cecece}
.tracking-card-upright .tracking-next:empty{display:none}
.tracking-card-upright .tracking-card-actions{grid-column:1/-1;grid-row:4;margin:0;padding:4px 8px;gap:9px;flex-wrap:nowrap;border-top:1px solid #ffffff0c;background:#202020;align-items:center;justify-content:flex-end;min-width:0;z-index:2}
.tracking-card-upright .tracking-card-actions .btn{flex:1;min-width:0;min-height:44px;padding:8px 11px;font-size:11px;line-height:1.3;white-space:normal}
.tracking-card-upright .tracking-text-button{min-width:44px;min-height:44px;padding:8px 3px;font-size:11px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.tracking-card-upright .tracking-card-actions:has(>button:only-child) .tracking-text-button{width:100%;text-align:center}
.tracking-card-remove{position:absolute;top:0;right:0;z-index:4;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:0 0 0 7px;background:#1b1b1b88;color:#d2d2d2;cursor:pointer}
.tracking-card-remove svg{width:16px;height:16px}.tracking-card-remove:hover{background:#333;color:#fff}
.tracking-card-upright button:focus-visible,.tracking-card-upright a:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
body:not(.ratings-matrix-cards) .tracking-card.tracking-card-upright{grid-template-rows:max-content minmax(0,1fr) 54px}
body:not(.ratings-matrix-cards) .tracking-card-upright .tracking-poster{grid-row:1/3}
body:not(.ratings-matrix-cards) .tracking-card-upright .tracking-card-progress{grid-row:2;height:auto;padding-bottom:14px;align-self:end}
body:not(.ratings-matrix-cards) .tracking-card-upright .tracking-card-actions{grid-row:3}
@media(max-width:759px){.tracking-grid{gap:14px}.tracking-card-upright .tracking-name{font-size:19px}}
@media(max-width:359px){.tracking-card.tracking-card-upright{--watch-poster-width:136px;--watch-body-height:222px}.tracking-card-upright .tracking-name{font-size:17px}.tracking-card-upright .tracking-status{font-size:9px}.tracking-card-upright .tracking-card-body,.tracking-card-upright .tracking-card-progress{padding-left:9px}}

/* Loading cards occupy the same fixed artwork, progress and action slots. */
.tracking-skeleton-piece{display:block;border-radius:3px;max-width:100%}.tracking-skeleton-status{height:19px}.tracking-card-skeleton .tracking-card-top{height:34px;margin-bottom:0}.tracking-skeleton-name{display:grid;gap:4px;margin-bottom:6px}.tracking-skeleton-name .tracking-skeleton-piece{height:18px}.tracking-skeleton-position{height:11px}.tracking-skeleton-bar{height:2px;width:100%}.tracking-skeleton-count{height:9px}.tracking-skeleton-button{height:44px;flex:1}.tracking-skeleton-edit{height:44px;flex:none}.watch-tracking-skeleton-matrix{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px;max-height:100%;overflow:hidden}.watch-tracking-skeleton-matrix .tracking-skeleton-piece{aspect-ratio:1;border-radius:1px}
.watch-status-button{min-height:44px;min-width:44px;max-width:100%;display:inline-flex;align-items:center;margin-top:-10px;padding:0!important;border:0;background:transparent!important;font:inherit;cursor:pointer;text-align:left}.tracking-card-upright .tracking-card-top:has(.watch-status-button){margin-bottom:0}.watch-status-value{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 5px;border-radius:3px;background:var(--watch-status-bg,#343434)}.watch-status-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.watch-status-chevron{display:flex;flex:none}.watch-status-chevron svg{width:10px;height:10px}.watch-status-button.tracking-watching{--watch-status-bg:#443320}.watch-status-button.tracking-caught,.watch-status-button.tracking-completed{--watch-status-bg:#203e2d}.watch-status-button.tracking-paused{--watch-status-bg:#3b342b}.watch-status-button.tracking-dropped{--watch-status-bg:#332b2f}.watch-status-button:hover .watch-status-value,.watch-status-button[aria-expanded=true] .watch-status-value{box-shadow:inset 0 0 0 1px #b7955e}
.watch-status-menu{position:fixed;inset:auto;z-index:130;width:min(236px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;margin:0;padding:6px;background:#25221d;color:#eee8db;border:1px solid #62533e;border-radius:7px;box-shadow:0 14px 42px #0009}.watch-status-menu[hidden]{display:none}.watch-status-heading{margin:4px 8px 5px;font-size:11px;color:#c3ac88}.watch-status-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 9px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer}.watch-status-choice:hover,.watch-status-choice:focus-visible{background:#3b3327;outline:2px solid #b7955e;outline-offset:-2px}.watch-status-choice[aria-checked=true]{color:#f5c879}.watch-status-check{display:flex;visibility:hidden;flex:none}.watch-status-check svg{width:15px;height:15px}.watch-status-choice[aria-checked=true] .watch-status-check{visibility:visible}.watch-status-hint{margin:7px 8px 4px;padding-top:9px;border-top:1px solid #544836;font-size:11px;line-height:1.5;color:#bcb1a0}

/* Two rows keep the second library section within reach; opening restores its grid. */
.list-section{position:relative;min-width:0;max-width:100%}
.list-section[hidden],.list-section-aux[hidden],.list-section-reveal[hidden]{display:none}
.list-section-grid{min-width:0;max-width:100%}
.list-section-grid.list-section-rail{grid-template-columns:none;grid-template-rows:repeat(2,max-content);grid-auto-flow:column;
  grid-auto-columns:var(--list-section-card-width);align-content:start;justify-content:start;overflow-x:auto;overflow-y:hidden;
  padding-top:16px;padding-bottom:16px;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--list-section-inset,0px);scrollbar-width:none}
.list-section-rail::-webkit-scrollbar{display:none}
.list-section-rail>*{min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.list-section-rail[data-list-section-before=true],.list-section-rail[data-list-section-after=true]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 var(--list-section-fade-in,0px),#000 calc(100% - var(--list-section-fade-out,0px)),#0000);
  mask-image:linear-gradient(90deg,#0000,#000 var(--list-section-fade-in,0px),#000 calc(100% - var(--list-section-fade-out,0px)),#0000)}
.list-section-rail[data-list-section-before=true]{--list-section-fade-in:28px}
.list-section-rail[data-list-section-after=true]{--list-section-fade-out:40px}
.list-section-rail:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}
.list-section-aux{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-inline:var(--list-section-inset,0px)}
.list-section-aux>p{flex:1 1 100%;margin:0}
.list-section-reveal{margin-left:var(--list-section-inset,0px);margin-right:var(--list-section-inset,0px)}
.list-section-reveal .reveal{min-height:44px}
.list-section:has(>.tracking-grid){margin-bottom:44px}
.list-section>.tracking-grid{margin-bottom:0}
@media(max-width:759px){.list-section:has(>.tracking-grid){margin-bottom:32px}}

/* The guide shares the app's surfaces, choice buttons, chips and focus style. */
.guide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.getting-started .link,.guide-context-tip .link{min-height:40px;text-align:left}
.getting-started{position:fixed;right:max(24px,var(--safe-r));bottom:calc(var(--dock-space) + 24px);z-index:49;width:340px;max-width:calc(100% - 32px);max-height:calc(100dvh - var(--nav) - var(--safe-t) - var(--dock-space) - 48px);overflow-y:auto;overscroll-behavior:contain;padding:20px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);box-shadow:0 16px 50px #0008;scrollbar-width:thin}
.guide-panel-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;background:var(--bg-2)}
.guide-panel-head h2{margin:0;font-size:18px;outline:none}
.guide-hide{flex:none;margin:-8px -8px -8px 0}
.guide-modes{margin-bottom:18px}
.getting-started h3{font-size:19px;line-height:1.3;margin:0 0 8px}
.getting-started p{margin:0 0 14px;color:var(--ink-2);font-size:14px;line-height:1.5}
.getting-started .guide-count,.getting-started .guide-note{color:var(--muted);font-size:12px}
.getting-started .guide-count{margin-bottom:6px}
.guide-checklist{display:flex;gap:8px;margin:18px 0 14px}
.guide-step{min-width:36px;min-height:36px;padding:6px 10px}
.guide-footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:6px;margin-top:14px}
.guide-footer .link{color:var(--muted);font-size:13px}
.guide-overview{list-style:none;margin:0 0 14px;padding:0}
.guide-overview li{padding:12px 0;border-bottom:1px solid var(--line)}
.guide-overview li:first-child{padding-top:0}
.guide-overview h3{font-size:16px;margin-bottom:4px}
.guide-overview p{font-size:13px;margin-bottom:0}
.guide-overview .link{font-size:13px;min-height:32px}
.guide-overview .guide-overview-step{font:inherit}
.guide-context-tip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:16px 0}
.guide-context-tip p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.guide-context-tip .guide-actions{margin-top:10px}
.guide-highlight{outline:2px solid var(--brand)!important;outline-offset:4px;border-radius:var(--r)}
.guide-sync{margin-bottom:14px}
.guide-sync p{font-size:12px;margin-bottom:6px;color:var(--muted)}
/* Offered once the welcome page is done with: one line, with one way to turn it down. */
.guide-offer{position:fixed;right:max(24px,var(--safe-r));bottom:calc(var(--dock-space) + 24px);z-index:49;display:flex;align-items:center;gap:4px;max-width:calc(100% - 32px);padding:4px 4px 4px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);box-shadow:0 16px 50px #0008}
.guide-offer p{flex:1 1 auto;min-width:0;margin:0;color:var(--muted);font-size:14px;line-height:1.4}
.guide-offer b{margin-right:6px;color:var(--ink)}
.guide-offer .link{position:relative;min-height:0;font-weight:700}
.guide-offer .link::after{content:'';position:absolute;inset:-12px -8px}
/* On the welcome page the guide keeps clear of its bar, so Continue and Skip for now stay in
   reach at every width, and the offer waits until the page is done with. */
body:has(#welcome:not([hidden])) .getting-started{bottom:calc(var(--dock-space) + var(--welcome-bar) + 16px);max-height:calc(100dvh - var(--nav) - var(--safe-t) - var(--dock-space) - var(--welcome-bar) - 40px)}
body:has(#welcome:not([hidden])) .guide-offer{display:none}
@media(max-width:759px){
  .getting-started{right:max(16px,var(--safe-r));padding:16px;bottom:calc(var(--dock-space) + 16px)}
  .guide-offer{left:max(16px,var(--safe-l));right:max(16px,var(--safe-r));bottom:calc(var(--dock-space) + 12px);max-width:none}
}

/* Import from IMDb, Trakt or TV Time (list-import.js): choosing a file or pasting titles, then
   a preview of what importing does, its counts in two columns and each score's choice. */
.import-sheet .sheet>p:first-of-type{margin-top:4px}
.import-pick{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 4px}
.import-more{margin-top:10px;font-size:14px;color:var(--ink-2)}
.import-more>summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;color:var(--ink-2);
  font-size:14.5px;list-style:none}
.import-more>summary::-webkit-details-marker{display:none}
.import-more>summary::after{content:'';flex:none;width:7px;height:7px;margin-top:-4px;border:solid currentColor;
  border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s}
.import-more[open]>summary::after{margin-top:4px;transform:rotate(225deg)}
.import-more>summary:hover{color:#fff}
.import-more ul{margin:2px 0 8px;padding-left:20px;line-height:1.5}
.import-more li{margin:5px 0}
.import-paste{margin-top:18px}
.import-paste textarea{font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.import-find{margin-top:10px}
.sheet.pad .import-privacy{margin:18px 0 0;font-size:13px;color:var(--muted)}
.sheet.pad .import-status{min-height:22px;margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.sheet.pad .import-status.error{color:#ffaea4}
.import-retry{margin-top:10px}
.import-summary{margin:14px 0 4px;font-size:17px;line-height:1.35}
.import-summary:focus{outline:none}
.import-counts{display:grid;grid-template-columns:1fr auto;margin:10px 0 0;padding:0;font-size:14.5px}
.import-counts div{display:contents}
.import-counts dt,.import-counts dd{padding:7px 0;border-bottom:1px solid #2c2c2c}
.import-counts dt{color:var(--ink-2)}
.import-counts dd{margin:0;padding-left:16px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.import-check{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;font-size:14.5px;line-height:1.5;cursor:pointer}
.import-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--brand)}
.import-check input:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.import-as{margin-top:18px;font-size:14px}
.import-sheet select{width:100%;min-height:44px;padding:8px 36px 8px 12px;border:1px solid #444;border-radius:6px;
  background:#202020 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e2e2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;
  color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.import-sheet select:hover{border-color:#777}
.import-map table{width:100%;border-collapse:collapse;margin:2px 0 8px;font-size:14px}
.import-map th,.import-map td{padding:4px 10px 4px 0;border-bottom:1px solid #2c2c2c;text-align:left;font-weight:400;white-space:nowrap}
.import-map tbody th{color:#fff;font-weight:700}
.import-map thead th{padding-top:0;color:var(--muted);font-size:12.5px}
.import-map td:last-child{width:58%;padding-right:0}
.import-missing ul{max-height:min(240px,40dvh);overflow-y:auto;overscroll-behavior:contain}
.sheet.pad .import-missing .note,.sheet.pad .import-notes{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.import-step .profile-actions{margin-top:22px}

/* Keep editable text large enough to avoid iOS focus zoom. This fallback must
   stay outside @layer and pointer queries: older Safari ignores layers, and
   input hardware must not decide whether readable form text is protected.
   The shared early script compensates for Safari Page Zoom below 100%; a
   computed 16px font alone can otherwise render too small. The px fallback
   also protects browsers without CSS variables or max() support. */
input,
select,
textarea,
[contenteditable]:not([contenteditable="false"]),
[contenteditable]:not([contenteditable="false"]) *,
[role="textbox"],
[role="textbox"] * {
  font-size: 16px !important;
  font-size: var(--touch-form-font-floor, 16px) !important;
  font-size: max(16px, 1rem, var(--touch-form-font-floor, 16px)) !important;
}

/* Native WebKit search/select appearances can ignore author font sizes.
   Component selectors can still choose their own appearance. */
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }
select { -webkit-appearance: menulist-button; appearance: menulist-button; }

/* The first declared layer keeps the same floor above component-important
   overrides in current browsers, including controls in portal dialogs. */
@layer touch-forms {
  input,
  select,
  textarea,
  [contenteditable]:not([contenteditable="false"]),
  [contenteditable]:not([contenteditable="false"]) *,
  [role="textbox"],
  [role="textbox"] * {
    font-size: 16px !important;
    font-size: var(--touch-form-font-floor, 16px) !important;
    font-size: max(16px, 1rem, var(--touch-form-font-floor, 16px)) !important;
  }
}