@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(/static/archivo-latin-v25.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(/static/archivo-latin-ext-v25.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --navy:#14245a; --navy-ink:#0e1a44; --red:#c8202f; --red-on-navy:#ff5b63;
  --carbon:#4a35a0; --carbon-soft:#e4def7;
  --ground:#e7ebf2; --stock:#ffffff; --stock-2:#f3f5f9;
  --ink:#111a33; --ink-2:#4a5470; --rule:#cdd3df; --rule-2:#9aa4ba; --rule-ctl:#6f7a94;
  --band:#14245a; --band-ink:#ffffff; --band-ink-2:#c9d2ec;
  --head:#14245a; --head-tv:#0f6b75; --head-ink:#ffffff; --ticket-head:#c41e2c;
  --stamp-liked:#14245a; --btn-on:#14245a; --btn-on-ink:#ffffff; --focus:#4a35a0;
  --count-bg:#ffffff; --count-ink:#0e1a44;
  --track:#cdd3df; --tab-bg:rgba(17,26,51,.07); --bar-movie:#14245a;
  --shadow:rgba(14,26,68,.10); --shadow-2:rgba(14,26,68,.18); --blend:multiply; --edge:rgba(14,26,68,.09); --err-bg:#fbe9eb;
  color-scheme:light;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#2a3f8f; --navy-ink:#050915; --red:#ff6f76; --red-on-navy:#ff5b63;
  --carbon:#b9a8ff; --carbon-soft:#2c2560;
  --ground:#05080f; --stock:#16244f; --stock-2:#111d42;
  --ink:#eef1f8; --ink-2:#cdd4e8; --rule:#2c3d7a; --rule-2:#4a5c9c; --rule-ctl:#8d9bd2;
  --band:#0b1230; --band-ink:#eef1f8; --band-ink-2:#aab3cc;
  --head:#24367f; --head-tv:#136e78; --head-ink:#eef1f8; --ticket-head:#a3192a;
  --stamp-liked:#9fb2ff; --btn-on:#e9edf8; --btn-on-ink:#0b1230; --focus:#c9bcff;
  --count-bg:#b9a8ff; --count-ink:#0b1230;
  --track:#43558f; --tab-bg:#0c1330; --bar-movie:#5a6fc0;
  --shadow:rgba(0,0,0,.35); --shadow-2:rgba(0,0,0,.55); --blend:normal; --edge:#2a3a75; --err-bg:#3d1424; --bd-dim:brightness(.5) saturate(.8);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --navy:#2a3f8f; --navy-ink:#050915; --red:#ff6f76; --red-on-navy:#ff5b63;
  --carbon:#b9a8ff; --carbon-soft:#2c2560;
  --ground:#05080f; --stock:#16244f; --stock-2:#111d42;
  --ink:#eef1f8; --ink-2:#cdd4e8; --rule:#2c3d7a; --rule-2:#4a5c9c; --rule-ctl:#8d9bd2;
  --band:#0b1230; --band-ink:#eef1f8; --band-ink-2:#aab3cc;
  --head:#24367f; --head-tv:#136e78; --head-ink:#eef1f8; --ticket-head:#a3192a;
  --stamp-liked:#9fb2ff; --btn-on:#e9edf8; --btn-on-ink:#0b1230; --focus:#c9bcff;
  --count-bg:#b9a8ff; --count-ink:#0b1230;
  --track:#43558f; --tab-bg:#0c1330; --bar-movie:#5a6fc0;
  --shadow:rgba(0,0,0,.35); --shadow-2:rgba(0,0,0,.55); --blend:normal; --edge:#2a3a75; --err-bg:#3d1424; --bd-dim:brightness(.5) saturate(.8);
  color-scheme:dark;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rule-2) var(--ground);background:var(--band)}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;
  font-size:15px;line-height:1.5;word-spacing:.1em;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
::selection{background:var(--carbon-soft);color:var(--ink)}
a{color:inherit;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
img{display:block}
h1,h2,h3,p,dl,dd,ul{margin:0;padding:0}
ul{list-style:none}
button{font:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:60;background:var(--stock);color:var(--ink);padding:10px 14px;border-radius:2px}
.skip:focus{top:10px}
main:focus{outline:0}
/* Anchors and focus stop below the sticky bar. Not while focus is in the bar's search: Chromium applies the
   padding to the caret of its field, and each key pressed there scrolls the page up. */
html{scroll-padding-top:76px}
html:has(.bar .search :focus){scroll-padding-top:0}
.btn,.nav a,.nav button,.tab,.surprise,.btn-link,.form button,.ids a,.c-head,.tk-head,.cl,.foot-links a,.hero-alt,.hero-search button{word-spacing:.18em}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-variant-numeric:tabular-nums;color:var(--carbon);font-weight:600}
.muted{color:var(--ink-2)}
.wrap{max-width:1360px;margin:0 auto;padding:0 32px}
.inline{display:inline;margin:0}
.notice .link-btn{min-height:0;padding:0;font-size:inherit}
.lbl,.f dt,.box dt,.pax dt{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;word-spacing:.15em;font-size:12px;color:var(--ink-2)}

/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:20;background:var(--band);color:var(--band-ink);border-bottom:1px solid rgba(255,255,255,.08)}
.bar :focus-visible{outline-color:#fff}
.bar-in{max-width:1360px;margin:0 auto;padding:0 32px;height:60px;display:flex;align-items:center;gap:24px}
.brand{font-stretch:68%;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:22px;text-decoration:none;color:#fff;
  display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{width:27px;height:14px;flex:none}
.search{flex:1;max-width:440px;position:relative;margin:0}
.search-off{display:none}
.search>.ic{position:absolute;left:11px;top:19px;transform:translateY(-50%);color:var(--band-ink-2);pointer-events:none}
.search input{width:100%;height:38px;border-radius:3px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.07);color:#fff;
  font:inherit;font-size:14.5px;padding:0 12px 0 36px}
.search input::placeholder{color:var(--band-ink-2);opacity:1}
input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search input:focus{outline:2px solid #fff;outline-offset:1px;background:rgba(255,255,255,.12)}
.suggest{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--stock);color:var(--ink);border-radius:3px;overflow:hidden;
  box-shadow:0 2px 3px var(--shadow),0 18px 40px var(--shadow-2)}
.suggest:empty{display:none}
/* The bar stays on screen, so a long list scrolls inside itself (app.js fits it above the keyboard). */
.bar .suggest{overflow-y:auto;overscroll-behavior:contain}
.band .suggest a{color:var(--ink)}
.suggest a{display:flex;align-items:center;gap:12px;padding:7px 14px 7px 8px;min-height:48px;text-decoration:none;border-bottom:1px solid var(--rule);font-weight:600;word-spacing:normal}
.sg-img{width:32px;height:48px;border-radius:1px;flex:none}
.sg-img .np-band,.sg-img .np-foot,.sg-img .np-rule{display:none}
.sg-img .np-ini{font-size:15px;padding:0;margin:auto}
.sg-img.noposter,.r-img.noposter{justify-content:center;align-items:center}
.r-img .np-ini{padding:0!important;margin:auto}
.sg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest a:last-child{border-bottom:0}
.suggest a:hover{background:var(--stock-2)}
.bar .suggest a:focus-visible{background:var(--carbon-soft);outline:2px solid var(--focus);outline-offset:-2px}
.suggest small{font-stretch:78%;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--ink-2);font-weight:600;flex:none}
.nav{margin-left:auto;order:1}
.theme{order:2}
.menu{order:3}
.nav ul{display:flex;align-items:center;gap:4px}
.nav a,.nav button{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;text-decoration:none;color:var(--band-ink-2);background:none;border:0;cursor:pointer;
  font-stretch:80%;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;border-radius:3px;white-space:nowrap}
.nav a:hover,.nav button:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -3px 0 var(--red-on-navy)}
.nav .login[aria-current="page"]{box-shadow:none;background:rgba(255,255,255,.14)}
.nav .inline{display:block}
.nav .login{border:1px solid rgba(255,255,255,.4);color:#fff;margin-left:6px}
.theme-row,.home-row{display:none}
.wallet-m[aria-current="page"],.acct-m[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red-on-navy)}
.acct-m{display:none;align-items:center;justify-content:center;height:44px;min-width:44px;color:#fff;border-radius:3px}
.acct-m .ic{width:20px;height:20px}
.menu .i-close{display:none}
.menu[aria-expanded="true"] .i-close{display:block}
.menu[aria-expanded="true"] .i-menu{display:none}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:2px;
  background:var(--count-bg);color:var(--count-ink);font-stretch:100%;font-size:12px;font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums}
.count[data-n="0"]{display:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:3px;background:transparent;
  border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer;flex:none}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.icon-btn .ic{width:18px;height:18px}
.theme .i-moon{display:none}
.theme[aria-pressed="true"] .i-moon{display:block}
.theme[aria-pressed="true"] .i-sun{display:none}
.wallet-m,.menu{display:none}
.sg-all{justify-content:center;color:var(--ink);font-stretch:80%;text-transform:uppercase;letter-spacing:.07em;font-size:13px;background:var(--stock-2)}
.wallet-m{align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 8px;color:#fff;text-decoration:none;border-radius:3px;border:1px solid rgba(255,255,255,.22)}
.wallet-m .ic{width:20px;height:20px}

/* ---- navy band ---- */
.band{background:var(--band);color:var(--band-ink)}
.band a{color:#fff}
.band :focus-visible{outline-color:#fff}
.intro{padding-top:30px;padding-bottom:30px}
.intro:has(>.tabs:last-child){padding-bottom:0}
.intro-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.intro h1,.page>h1,.page>h2,.more-head h2,.tk-info-a h1,.how h2,.auth-aside h2{font-stretch:66%;font-weight:850;text-transform:uppercase;letter-spacing:.005em;word-spacing:.16em;line-height:.98}
.intro h1{font-size:52px;text-wrap:balance;max-width:26ch}
.intro .lede{margin-top:8px;color:var(--band-ink-2);font-size:16px;max-width:68ch;text-wrap:pretty}
.surprise{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid #fff;border-radius:3px;
  color:#fff;text-decoration:none;font-stretch:80%;font-weight:650;text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;flex:none}
.surprise:hover{background:#fff;color:var(--navy-ink)}
button.surprise{appearance:none;background:transparent;font-family:inherit;cursor:pointer}
/* The account band repeats Log out only where the bar hides it in the menu. */
@media (min-width:641px){.band .acct-logout{display:none}}
.surprise-go{background:var(--ticket-head);border-color:var(--ticket-head)}
.surprise-go:hover{background:var(--ticket-head);color:#fff;filter:brightness(1.12)}
.progress.on-band a{color:#fff;font-weight:600;white-space:nowrap}
.hero-row{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;margin-top:24px}
.hero-search{position:relative;display:flex;flex:1 1 420px;max-width:640px;margin:0}
.intro>.hero-search{margin-top:22px}
.hero-search>.ic{position:absolute;left:16px;top:26px;transform:translateY(-50%);width:20px;height:20px;color:var(--navy);pointer-events:none}
.hero-search input{flex:1;min-width:0;height:52px;border:0;border-radius:3px 0 0 3px;background:#fff;color:#111a33;font:inherit;font-size:17px;padding:0 14px 0 46px}
.hero-search input::placeholder{color:#5a6480;opacity:1}
.hero-search input:focus{outline:3px solid #fff;outline-offset:2px}
.hero-search button{height:52px;padding:0 22px;border:0;border-radius:0 3px 3px 0;background:var(--ticket-head);color:#fff;cursor:pointer;
  font-stretch:78%;font-weight:750;text-transform:uppercase;letter-spacing:.08em;font-size:14.5px}
.hero-search button:hover{filter:brightness(1.12)}
.hero-search .suggest{z-index:30}
.hero-alt{display:inline-flex;align-items:center;gap:8px;color:#fff;font-stretch:80%;font-weight:650;text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;
  text-decoration-color:var(--red-on-navy)}
/* Mood search (/mood): the field on the band, then example wordings as outlined links. */
.mood-try{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-top:16px;max-width:980px}
.mood-try ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.mood-try a{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.3}
.mood-try a:hover{border-color:var(--ink)}
.band .mood-try .lbl{color:var(--band-ink-2)}
.band .mood-try a{border-color:rgba(255,255,255,.45);color:#fff}
.band .mood-try a:hover{background:#fff;border-color:#fff;color:var(--navy-ink)}
.empty .mood-try{justify-content:center;margin:16px auto 0}
@media (max-width:640px),(pointer:coarse){.mood-try a{min-height:44px}}
.mood-alt{margin-top:14px}
.mood-how{max-width:780px}
.mood-how p+p{margin-top:8px}
.how{margin:40px 0 0;border-top:1px solid var(--rule)}
.how .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;max-width:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:28px 56px;align-items:start}
.hero-main h1{font-size:52px;text-wrap:balance;max-width:22ch}
.hero-main .hero-search{margin-top:22px}
.hero-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:16px}
.hero-example>.lbl{display:block;margin-bottom:8px;color:var(--band-ink-2)}
.hero-example .coupon{box-shadow:0 2px 3px rgba(0,0,0,.2),0 18px 40px rgba(0,0,0,.3);color:var(--ink)}
.band .coupon a{color:var(--ink)}
.coupon.demo .c-head{background:var(--ticket-head);color:#fff}
.empty-example{max-width:420px;margin:8px auto 0}
.empty-example .lbl{display:block;margin-bottom:8px}
.feed-end{margin:28px 0 0;padding:22px 24px;background:var(--stock);border-radius:3px;box-shadow:inset 0 0 0 1px var(--edge)}
.form .drop{position:relative;display:grid;justify-items:start;gap:6px;padding:22px;border:2px dashed var(--rule-2);border-radius:3px;background:var(--stock-2);cursor:pointer}
.drop:hover,.drop:focus-within{border-color:var(--ink)}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.drop .ic{width:24px;height:24px}
.drop-t{font-size:17px;font-weight:700}
.drop-files{font-size:14px;font-weight:400;color:var(--ink-2)}
.drop-btn{display:inline-flex;align-items:center;height:44px;padding:0 18px;margin-top:6px;border:1px solid var(--rule-ctl);border-radius:2px;background:var(--stock);color:var(--ink);
  font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.upload button.go:disabled{cursor:not-allowed;filter:saturate(.7);opacity:.7}
.drop .hint{font-size:15px;color:var(--ink)}
.drop .ic{width:24px;height:24px}
.steps-h{display:block;margin-top:16px}
.import-how{font-size:14.5px}
.rules-note{font-size:14.5px;color:var(--ink-2);margin:0 0 -8px}
.import-src .p-head{background:var(--stock-2);color:var(--ink);box-shadow:inset 0 -1px 0 var(--rule)}
.import-src .p-head h2{color:var(--ink)}
.drop-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.page .how h2{margin-top:26px;font-size:34px}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:16px;max-width:56ch;padding:0}
.steps-sm{margin:16px 0 0;gap:8px}
.steps-sm li{font-size:14.5px;grid-template-columns:30px 1fr}
.steps-sm li::before{width:24px;height:24px;font-size:12.5px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:baseline;font-size:16px}
.steps li::before{content:counter(s);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--carbon);border-radius:50%;
  color:var(--carbon);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.how-example .lbl{display:block;margin-bottom:8px}
.seeds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:22px}
.bstub{position:relative;display:flex;align-items:center;gap:10px;background:var(--stock);color:var(--ink);padding:9px 10px 9px 16px;
  min-height:84px;border-radius:2px;min-width:0;
  -webkit-mask:radial-gradient(circle 2.4px at 0 4px,#0000 96%,#000) 0 0/100% 8px repeat-y;
          mask:radial-gradient(circle 2.4px at 0 4px,#0000 96%,#000) 0 0/100% 8px repeat-y}
.bs-poster{display:flex;flex:none;color:inherit;text-decoration:none}
.bs-img{width:56px;height:84px;border-radius:1px;object-fit:cover;background:var(--stock-2);flex:none}
.bs-img.noposter .np-ini{font-size:20px;padding:6px 4px 0}
.bs-img.noposter .np-band,.bs-img.noposter .np-foot,.bs-img.noposter .np-rule{display:none}
.bs-txt{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.bstub .bs-name{color:var(--ink);font-weight:650;font-size:14px;line-height:1.2;overflow:hidden;max-width:100%;text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.bstub .bs-name:hover{text-decoration:underline;text-decoration-color:var(--red)}
.stubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px;margin:10px 0 8px}
.rated .stubs{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.stubs .bstub{box-shadow:0 1px 1px var(--shadow),0 4px 10px var(--shadow)}
.rated{margin-top:18px}
.page .rated-h{font-stretch:66%;font-weight:850;text-transform:uppercase;letter-spacing:.01em;font-size:26px;margin:0;display:flex;gap:10px;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.band .bstub :focus-visible{outline-color:var(--focus);outline-offset:1px}
.bs-meta{font-size:12px;color:var(--ink-2);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.bstub .stamp{display:inline-flex;font-size:12.5px;padding:3px 7px 2px;margin-top:5px;transform:rotate(-4deg)}
.bstub .stamps .stamp{display:none}
.bstub .st-liked{transform:rotate(3deg)}
.bstub .st-nope{background:none;padding:2px 7px;border-style:solid;border-radius:0}
.bstub.importslot{background:transparent;color:var(--band-ink);border:1px dashed rgba(255,255,255,.45);-webkit-mask:none;mask:none;padding:8px 12px;
  font-size:13px;line-height:1.35}
.importslot .ic{color:var(--band-ink-2);width:18px;height:18px}
.importslot a{color:#fff;font-weight:600}
.bstub.more-stub{justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.45);-webkit-mask:none;mask:none;padding:8px 12px}
.more-stub a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:13.5px}
.title-body{display:flex;flex-direction:column}
.two .watch{order:2}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;margin-top:26px}
.tab{appearance:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 24px;text-decoration:none;
  border:0;border-radius:3px 3px 0 0;background:var(--tab-bg);color:var(--ink-2);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%);
  font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13.5px}
.tab[aria-current="page"],.tab.is-on,.tab[aria-pressed="true"]{background:var(--stock);color:var(--ink);box-shadow:inset 0 3px 0 var(--red)}
.tab:hover{color:var(--ink)}
.tab:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--focus)}
.band .tab:focus-visible{box-shadow:inset 0 0 0 2px #fff}
.band .tab.is-on:focus-visible,.band .tab[aria-current="page"]:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.band .tab{background:rgba(255,255,255,.13);color:var(--band-ink-2)}
.band .tab:hover{color:#fff;background:rgba(255,255,255,.16)}
.band .tab[aria-current="page"],.band .tab.is-on,.band .tab[aria-pressed="true"]{background:var(--ground);color:var(--ink)}

/* ---- page body ---- */
.page{padding-top:28px;padding-bottom:16px}
.page>h1{font-size:52px;margin:8px 0 14px}
.page h2{font-size:34px;margin:40px 0 6px}
.prose h2{font-stretch:66%;font-weight:850;text-transform:uppercase;letter-spacing:.005em;word-spacing:.16em;line-height:1}
.page>h2:first-child{margin-top:4px}
.lede{color:var(--ink-2);font-size:16px;max-width:68ch}
.page>.lede{margin-bottom:20px}
.notice{background:var(--stock);border:1px solid var(--rule);border-left:3px solid var(--carbon);border-radius:3px;padding:12px 16px;margin:0 0 16px;max-width:780px}
.notice p+p{margin-top:6px}
.error{color:var(--red);font-weight:600}
.more-link{display:flex;justify-content:flex-end;margin-top:20px}
.pager{align-items:center;gap:16px}
.pager-top{justify-content:flex-start;margin:20px 0 -8px}
/* The end of the Rate list. Without JavaScript only the link shows; with it, three punched dots while
   the next batch loads, and the link again when loading pauses (is-manual) or fails (is-failed). */
.feed-more{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px;min-height:76px;margin-top:16px}
.fm-load,.fm-fail{display:none}
.fm-load{gap:8px;align-items:center}
.fm-load .lbl{margin-left:6px;color:var(--ink-2)}
.fm-load i{width:12px;height:12px;border-radius:50%;border:2px solid var(--rule-2);animation:fm-punch 1.05s cubic-bezier(.16,1,.3,1) infinite}
.fm-load i:nth-child(2){animation-delay:.15s}
.fm-load i:nth-child(3){animation-delay:.3s}
@keyframes fm-punch{0%,100%{transform:scale(.8);background:transparent;border-color:var(--rule-2)}35%{transform:scale(1);background:var(--red);border-color:var(--red)}}
.js .feed-more.is-loading .fm-load{display:inline-flex}
/* While loading runs by itself the button is only clipped, so assistive technology can still reach it. */
.js .feed-more:not(.is-manual):not(.is-failed):not(.is-pressed) .fm-next:not(:focus-visible){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.feed-more .fm-next[aria-disabled="true"]{opacity:.55;cursor:progress}
.feed-more.is-failed .fm-fail{display:block;color:var(--ink-2)}
/* New coupons rise into place as they scroll into view (app.js; not under reduced motion). */
.card.rise-wait{opacity:0;translate:0 28px}
.card.rise{transition:opacity .4s ease-out,translate .7s cubic-bezier(.16,1,.3,1)}
.check{font-size:15px!important}
.check input{appearance:none;position:relative;width:22px;height:22px;margin:0;flex:none;border:2px solid var(--rule-ctl);border-radius:2px;background:var(--stock);cursor:pointer}
.check input:checked{background:var(--red);border-color:var(--red)}
.check input:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.form button.danger:not(:disabled){background:var(--ticket-head);color:#fff;border-color:var(--ticket-head)}
.form button.danger:disabled{cursor:not-allowed;filter:none;background:var(--stock-2);border:1px solid var(--rule-2);color:var(--ink-2);opacity:.6}
.form button:disabled+.wait,.form button.danger:disabled~.arm-hint{display:block}
.wait,.arm-hint{display:none}
.btn-link{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--rule-ctl);border-radius:2px;text-decoration:none;
  background:var(--stock);font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:13px}
.btn-link:hover{border-color:var(--ink)}
.empty{grid-column:1/-1;padding:28px;border:1px dashed var(--rule-2);color:var(--ink-2);text-align:center;border-radius:3px;margin:16px auto;max-width:720px}
.empty p+p{margin-top:8px}
.empty-lg{padding:44px 24px;background:var(--stock);border-style:solid;border-color:var(--rule);max-width:720px;margin:28px auto}
.empty-left{text-align:left;margin:20px 0 0;padding:28px 28px 26px;max-width:780px;color:var(--ink);border:0;
  box-shadow:0 1px 1px var(--shadow),0 8px 18px var(--shadow),inset 0 0 0 1px var(--edge)}
.empty-left .empty-h{margin-bottom:10px}
.empty-left>p{max-width:62ch}
.empty-left .muted{margin-top:14px;font-size:14.5px}
.empty-left .progress{margin-top:16px}
.empty-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:28px 40px;align-items:start;margin-top:8px}
.empty-pair.solo{grid-template-columns:minmax(0,640px)}
.empty-pair .empty-left{margin-top:20px;max-width:none}
.empty-pair .empty-example{margin:20px 0 0;max-width:none}
.empty-h{font-stretch:66%;font-weight:850;text-transform:uppercase;letter-spacing:.005em;word-spacing:.16em;font-size:28px;line-height:1.05;color:var(--ink)}
.actions-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.actions-row.center{justify-content:center}
.btn-primary{background:var(--ticket-head);color:#fff;border-color:var(--ticket-head)}
.btn-primary:hover{filter:brightness(1.12);border-color:var(--ticket-head)}
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:20px;margin:0 0 20px}
.tally div{background:var(--stock);border-radius:3px;padding:10px 18px 12px;min-width:130px;box-shadow:0 1px 1px var(--shadow),inset 0 0 0 1px var(--edge)}
.tally dt{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--ink-2)}
.tally dd.num{font-size:28px;font-weight:750;line-height:1.2}
.tally dt a{color:inherit;text-decoration-color:var(--rule-2)}
.auth{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:28px 40px;align-items:start;margin-top:4px}
.auth:has(>.fb-box){grid-template-columns:minmax(0,680px) minmax(0,1fr)}
.auth:has(>.fb-box)>.auth-aside{position:sticky;top:84px}
.auth-box{background:var(--stock);border-radius:3px;padding:24px 26px 22px;max-width:none;box-shadow:0 1px 1px var(--shadow),0 8px 18px var(--shadow),inset 0 0 0 1px var(--edge)}
.auth-box.panel{padding:0;margin-top:0;width:100%}
.auth-box.panel>.p-body{padding:20px 24px 22px}
.auth-box .email,.band .email{overflow-wrap:anywhere}
.signed-note{margin-top:10px}
.signed-as{display:grid;gap:2px;margin-bottom:6px}
.signed-as .email{font-size:15px;font-weight:650;overflow-wrap:anywhere}
.auth-box .form{max-width:none}
.auth-box .p-body>p+form.form{margin:16px 0 14px}
.stub-row{position:relative;margin-top:18px;padding-top:16px}
.stub-row::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:radial-gradient(circle,var(--rule-2) 1.1px,transparent 1.5px) 0 0/7px 2px repeat-x}
.panel-note{margin-bottom:6px;color:var(--ink-2);font-size:14.5px}
.auth-box .btn-link{height:44px}
.auth-box .actions-row{margin-top:18px}
.panel .link-btn,.link-btn{appearance:none;background:none;border:0;padding:10px 0;min-height:44px;color:var(--ink);cursor:pointer;font:inherit;font-size:15px;font-stretch:100%;letter-spacing:0;word-spacing:.1em;text-transform:none;
  text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
.link-btn:hover{text-decoration-thickness:2px}
.alt-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.auth-box .alt-row>.btn-link{flex:1;justify-content:center}
.auth-aside .steps{margin:4px 0 16px;gap:12px}
.auth-aside .steps li{font-size:15px}
.auth-aside .ticks{margin-bottom:14px}
.auth-aside .muted+.muted{margin-top:8px}
.auth-box .form{margin:0}
.alt{margin-top:16px;font-size:15px}
.auth-aside{padding:0 22px 20px;background:var(--stock);border-radius:3px;box-shadow:0 1px 1px var(--shadow),0 8px 18px var(--shadow),inset 0 0 0 1px var(--edge)}
.page .auth-aside>h2:first-child{margin:0 -22px 16px!important;padding:12px 22px;min-height:40px;background:var(--head);color:var(--head-ink);border-radius:3px 3px 0 0;
  font-stretch:72%!important;font-weight:750;letter-spacing:.12em;font-size:14.5px!important;line-height:1.2}
.page .auth-aside h2{font-size:26px;margin:0 0 10px}
.auth-aside p+p{margin-top:12px}
.ticks{display:grid;gap:8px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.plain{display:grid;gap:8px;list-style:disc;padding-left:20px;margin-bottom:14px}
.void-row{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px 48px;align-items:center;margin-top:12px}
.void-ticket{position:relative;display:flex;flex-direction:column;background:var(--stock);border-radius:3px;
  box-shadow:0 1px 1px var(--shadow),0 8px 18px var(--shadow),inset 0 0 0 1px var(--edge)}
.vt-head{display:flex;justify-content:space-between;align-items:center;height:32px;padding:0 14px;background:var(--head);color:var(--head-ink);border-radius:3px 3px 0 0;
  font-stretch:72%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.vt-body{position:relative;display:grid;gap:2px;padding:16px 16px 20px;min-height:96px}
.vt-path{font-size:21px;font-weight:720;overflow-wrap:anywhere;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:1.5px;padding-right:90px}
.void-ticket .stamp{position:absolute;right:18px;top:30px;font-size:26px}
.vt-stub{position:relative;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;background:var(--stock-2);border-radius:0 0 3px 3px;font-weight:600}
.vt-stub::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;background:radial-gradient(circle,var(--rule-2) 1.1px,transparent 1.5px) 0 0/7px 2px repeat-x}
.void-next .lede{color:var(--ink);font-size:17px}
.void-next .actions-row{margin-top:14px}
.btn-navy{background:var(--btn-on);color:var(--btn-on-ink);border-color:var(--btn-on)}
.btn-navy:hover{filter:brightness(1.15);border-color:var(--btn-on)}
.void-home{margin-top:12px;font-size:15px}
.page>h2.void-more{font-size:34px;margin:44px 0 0}
@media (min-width:945px){.void-pop .coupons-compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
.prose{max-width:68ch;font-size:16px}
.prose p,.prose li{text-wrap:pretty}
.prose ul ul{margin:6px 0 0;list-style:circle}
.prose .steps{max-width:none;margin:14px 0}
.prose .steps li{margin:0}
.doc{display:grid;grid-template-columns:minmax(0,68ch) minmax(0,420px);justify-content:space-between;gap:0 56px;align-items:start}
.doc-a{grid-column:1;grid-row:1}
.doc-b{grid-column:1;grid-row:2}
@media (min-width:981px){.doc>.doc-b:has(>section){grid-column:1/-1;max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}.doc>.doc-b>section{max-width:68ch}}
.doc>:is(.doc-aside,.toc){grid-column:2;grid-row:1/span 2;align-self:start}
.doc>.doc-aside{grid-row:1}
.credit-tmdb{margin:14px 0 4px}
.credit-tmdb img{width:120px;height:auto}
.doc-b>section>h2{margin-top:40px}
.doc-aside,.toc{position:sticky;top:84px;max-width:420px;margin-top:40px}
.doc>.toc{margin-top:28px}
.doc-aside>.lbl{display:block;margin-bottom:8px}
.toc{padding:16px 18px;background:var(--stock);border-radius:3px;box-shadow:0 1px 1px var(--shadow),inset 0 0 0 1px var(--edge);max-width:300px}
.toc ul{display:grid;gap:2px;margin-top:6px}
.toc a{display:block;padding:5px 0;font-weight:600;font-size:15px}
.toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+";font-size:18px;line-height:1;color:var(--ink)}
.toc[open] summary::after{content:"–"}
.prose .short{margin:28px 0 8px}
.prose .short .p-head h2{margin:0;font-size:14.5px}
.prose .short ul.p-body{list-style:none;padding:16px 20px 18px}
.prose .short li{margin:0}
.prose h2[id]{scroll-margin-top:84px}
.prose .rights{list-style:none;padding:0}
.faq{border-top:1px solid var(--rule);margin-top:12px}
.faq-q{border-bottom:1px solid var(--rule);scroll-margin-top:84px}
.faq-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin:0;padding:10px 0;font-size:16.5px}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--ink-2)}
.faq-q[open] summary::after{content:"–"}
.faq-a{padding:0 0 12px}
.prose .faq-a p{margin:0 0 8px}
.prose .help-more{margin-top:24px}
.prose .rights li{padding:8px 0;border-bottom:1px solid var(--rule);margin:0}
.foot-links a[aria-current="page"]{text-decoration-thickness:3px}
.prose p,.prose ul{margin:12px 0}
.prose ul{list-style:disc;padding-left:22px}
.prose ul.ticks{list-style:none;padding-left:0}
.prose li{margin:6px 0}
.prose h2{font-size:28px;margin:32px 0 8px}

/* ---- forms ---- */
.form{max-width:400px;display:grid;gap:12px;margin:12px 0 20px}
.form input:not([type=checkbox]):not([type=radio]):not([type=file]){height:44px;padding:0 12px;border-radius:2px;border:1px solid var(--rule-ctl);background:var(--stock);color:var(--ink);font:inherit;font-size:16px}
.form input[type=file]{padding:12px;border:1px dashed var(--rule-ctl);border-radius:2px;background:var(--stock);color:var(--ink);font:inherit;font-size:14.5px}
.form input[type=file]::file-selector-button{height:38px;margin-right:14px;padding:0 14px;border:1px solid var(--rule-ctl);border-radius:2px;background:var(--stock-2);color:var(--ink);
  font:inherit;font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:13px;cursor:pointer}
.form button:disabled{cursor:not-allowed;filter:none;background:var(--stock-2);color:var(--ink-2);box-shadow:none;border:1px dashed var(--rule-2)}
.form button.secondary{background:var(--stock);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-ctl)}
.form button.secondary:hover{box-shadow:inset 0 0 0 1px var(--ink);filter:none}
.fld-in{position:relative;display:block}
.fld-in input{width:100%}
.reveal{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);height:44px;min-width:56px;padding:0 10px;border:0;border-left:1px solid var(--rule);border-radius:0 2px 2px 0;background:transparent;
  color:var(--ink);font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;cursor:pointer}
.js .reveal{display:block}
.js .pw input{padding-right:72px}
.reveal:hover{background:var(--stock-2)}
.form .reveal{height:42px;background:transparent;color:var(--ink);font-size:12.5px}
.form input:focus,.form textarea:focus{outline:2px solid var(--focus);outline-offset:1px}
.form textarea{width:100%;min-height:150px;padding:10px 12px;border-radius:2px;border:1px solid var(--rule-ctl);background:var(--stock);color:var(--ink);font:inherit;font-size:16px;line-height:1.45;resize:vertical}
.form textarea[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.form fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.form legend{font-weight:650;font-size:14.5px;margin-bottom:6px;padding:0}
.form input[type=radio]{appearance:none;width:22px;height:22px;margin:0;flex:none;border-radius:50%;border:2px solid var(--rule-ctl);background:var(--stock);cursor:pointer}
.form input[type=radio]:checked{border-color:var(--red);background:radial-gradient(circle,var(--red) 0 4.5px,var(--stock) 5.5px)}
.form input[type=radio]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fb-box{max-width:600px}
.auth-box.fb-box{max-width:600px}
.fb-form{max-width:none}
.hp{display:none}
.fb-form .hint>span:not(.f-count){display:none}
.fb-form .hint>.h-idea{display:inline}
.fb-form:has(input[value="bug"]:checked) .hint>.h-idea,.fb-form:has(input[value="data"]:checked) .hint>.h-idea{display:none}
.fb-form:has(input[value="bug"]:checked) .h-bug,.fb-form:has(input[value="data"]:checked) .h-data{display:inline}
.fb-kind label{min-height:36px;padding:2px 0}
.fb-form .fld>label{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--ink-2)}
.fb-form .hint{font-size:14px}
.fb-kind legend{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--ink-2)}
.form label{display:flex;gap:8px;align-items:center;font-size:14.5px}
.fld{display:grid;gap:6px}
.form .fld label{font-weight:650;font-size:14.5px}
.hint{font-size:13.5px;color:var(--ink-2)}
.form input[aria-invalid="true"]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.form .error{padding:10px 12px;border-left:4px solid var(--red);background:var(--err-bg);color:var(--ink);font-weight:600}
.form button{height:44px;border-radius:2px;border:0;background:var(--ticket-head);color:#fff;cursor:pointer;
  font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.form button:hover{filter:brightness(1.15)}
.form button.danger{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--red) 14%,transparent) 6px 8px),var(--stock);color:var(--red);border:2px solid var(--red)}
.upload{max-width:560px}
.import-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start;margin:8px 0 24px}
.import-grid .panel{margin-top:0}
.acct-grid{display:grid;grid-template-columns:minmax(0,720px);gap:20px;align-items:start}
.acct-col{display:grid;gap:20px;align-content:start;min-width:0}
.acct-col>.panel{margin-top:0;max-width:none}
.acct-out{margin-top:14px}
@media (min-width:1100px){.acct-grid:has(>.acct-col+.acct-col){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* One column: the delete panel goes last. */
@media (max-width:1099px){.acct-col{display:contents}.acct-grid .panel-danger{order:9}}
.acct-grid .panel{margin-top:0}
.panel-danger{max-width:720px}
.acct-grid .p-body>p,.panel-danger .p-body>p{max-width:68ch}
.panel-danger .p-head{box-shadow:inset 0 3px 0 var(--red)}
.tally-go{font-size:13.5px;font-weight:600;margin-top:2px}
.tally-go a{display:inline-flex;align-items:center;gap:6px}
.tally div{position:relative}
.wl-credit{font-size:14px;margin:6px 0 0}
.tally-go a::after{content:"";position:absolute;inset:0}
.tally div:has(.tally-go a:hover){box-shadow:0 1px 1px var(--shadow),inset 0 0 0 1px var(--rule-2)}
.upload-panel{max-width:none}
.import-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px 24px;align-items:start;margin:4px 0 24px}
.import-layout .panel{margin-top:0}
/* Wide screens show the how-to panels beside the upload, so the pointer to them is only for phones. */
@media (min-width:981px){.import-how{display:none}}
.import-src{display:grid;gap:20px}
.import-src .p-body>p{max-width:60ch}
.import-state{padding:10px 12px;background:var(--stock-2);border-left:3px solid var(--carbon);font-size:15px}
.rules{width:100%;border-collapse:collapse;margin-top:12px;font-size:14.5px}
.rules td{padding:7px 0;border-top:1px solid var(--rule)}
.rules td.num{color:var(--ink);font-weight:600;padding-right:12px}
.rules td:last-child{text-align:right}
.rules .was{font-size:12px;line-height:20px;padding:0;border:0}
.upload-panel .form{max-width:none;margin:0}
.upload-panel .drop{min-height:150px;align-content:center}
.import-grid .p-body p+p{margin-top:10px}
details summary{cursor:pointer;margin:8px 0;font-weight:600}

/* ---- coupons ---- */
.coupons{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:26px 22px;padding:24px 0 8px;align-items:stretch}
.coupon{--stub:54px;--head-h:40px;position:relative;display:flex;flex-direction:column;background:var(--stock);border-radius:3px;min-width:0;
  box-shadow:0 1px 1px var(--shadow),0 8px 18px var(--shadow),inset 0 0 0 1px var(--edge);
  -webkit-mask:radial-gradient(circle 8px at 0 calc(100% - var(--stub)),#0000 97%,#000),radial-gradient(circle 8px at 100% calc(100% - var(--stub)),#0000 97%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 8px at 0 calc(100% - var(--stub)),#0000 97%,#000),radial-gradient(circle 8px at 100% calc(100% - var(--stub)),#0000 97%,#000);
  mask-composite:intersect}
/* A TV series prints on a teal head strip and a movie on navy, so the two are easy to tell apart; the word stays.
   The example coupon keeps its red head. A poster panel's class band follows the strip. */
.coupon[data-kind="tv"]{--head:var(--head-tv)}
.coupon[data-kind="tv"]:not(.demo) .np-band{background:var(--head-tv)}
.c-ticket{display:flex;flex-direction:column;flex:1}
.c-head{display:flex;align-items:center;line-height:1;height:var(--head-h);padding:0 14px;background:var(--head);color:var(--head-ink);
  font-stretch:72%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;border-radius:3px 3px 0 0}
.c-actions .btn-quiet{position:absolute;top:0;right:4px;height:var(--head-h);min-width:64px;margin:0;padding:0 10px;border:0;color:var(--head-ink);background:transparent;line-height:1}
/* The whole head height is the target; the outline shows it is a button. */
.c-actions .btn-quiet::after{content:"";position:absolute;inset:4px 2px;border:1px solid rgba(255,255,255,.45);border-radius:2px;pointer-events:none}
.c-actions .btn-quiet:hover{opacity:1;background:rgba(255,255,255,.12);border:0;color:var(--head-ink)}
.c-actions .btn-quiet:focus-visible{outline-color:#fff;outline-offset:-3px}
/* The poster leads the coupon at full width, under the head strip. */
.c-poster{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;contain:paint;background:var(--navy);text-decoration:none}
.poster-img{display:flex;width:100%;height:100%}
/* Safari does not resolve height:100% against a height that comes from aspect-ratio, so the poster fills the box by position.
   Keep height:auto: with a percentage height, inset does not size the box and the bug comes back. */
.c-poster .poster-img{position:absolute;inset:0;width:auto;height:auto}
.c-poster .np-img{outline:0;border-radius:0;transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.coupon:hover .c-poster .np-img{transform:scale(1.035)}}
.c-poster .np-band{margin-top:44px;font-size:13px;padding:8px 18px}
.c-poster .np-ini{font-size:112px;padding:26px 18px 0}
.c-poster .np-rule{width:calc(100% - 36px);margin:14px 18px 0}
.c-poster .np-foot{left:18px;bottom:16px;font-size:11px}
.c-body{padding:14px 14px 0}
.c-top{padding:12px 14px 12px}
.c-ticket>.fields{margin-top:auto}
.c-ticket>.c-body:last-child{padding-bottom:4px}

.name{text-wrap:pretty}
.c-body .feel{padding:10px 0 0}
/* An example coupon sits beside other content, so its poster stays at the side. */
.coupon.demo .c-ticket{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto auto 1fr}
.coupon.demo .c-head,.coupon.demo .fields{grid-column:1/-1}
.coupon.demo .c-poster{grid-row:2/span 2;margin:14px 0 0 14px;align-self:start;border-radius:2px}
.coupon.demo .c-body{grid-column:2}
.coupon.demo .c-poster .np-ini{font-size:64px;padding:14px 10px 0}
.coupon.demo .c-poster .np-band{margin-top:22px;font-size:10px;padding:5px 10px}
.coupon.demo .c-poster .np-rule{width:calc(100% - 20px);margin:10px 10px 0}
.coupon.demo .c-poster .np-foot{left:10px;bottom:10px;font-size:9px}
.legs{position:relative;min-width:0}
.legs.route{padding-left:24px}
.arc{position:absolute;left:0;top:0;width:22px;height:46px;overflow:visible}
.arc-line{fill:none;stroke:var(--red);stroke-width:1.6}
.arc-from{fill:var(--stock);stroke:var(--ink);stroke-width:1.6}
.arc-to{fill:var(--red)}
.leg-from{position:relative;min-height:18px;line-height:18px;display:flex;align-items:baseline;gap:6px;min-width:0}
.leg-from .was{flex:none;vertical-align:1px}
.leg-from .lbl{flex:none;width:32px}
.c-top,.c-ticket>.c-body{min-width:0}
.leg-from .stop{flex:1;min-width:0;overflow-wrap:anywhere}
.stop{font-weight:600;font-size:13.5px}
.leg-from .was{margin-top:1px}
.route .leg-from::before{content:"";position:absolute;left:-19px;top:9px;bottom:-17px;width:8px;border:1.6px solid var(--red);border-right:0;border-radius:9px 0 0 9px}
.route .leg-from::after{content:"";position:absolute;left:-14.4px;top:5.6px;width:6.8px;height:6.8px;border-radius:50%;background:var(--stock);border:1.6px solid var(--ink);box-sizing:border-box}
.route .leg-to{position:relative}
.route .leg-to>.lbl::before{content:"";position:absolute;left:-14.6px;top:3.4px;width:7.2px;height:7.2px;border-radius:50%;background:var(--red)}
.was{font-stretch:72%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;padding:0 5px;line-height:15px;border:1px solid currentColor;border-radius:2px;flex:none}
.was-loved{color:var(--red)}
.was-liked,.was-saved{color:var(--stamp-liked)}
.was-nope{color:var(--ink-2)}
.c-demo{gap:14px;font-size:13.5px;color:var(--ink-2);font-weight:600}
.c-watch{display:grid;gap:2px;margin-top:10px;padding:8px 0 0;border-top:1px solid var(--rule);font-size:14px;font-weight:600;min-height:3.6em}
.c-watch .svc{white-space:nowrap}
.wl .stub-saved{display:none!important}
@media (min-width:641px){
  .wl .coupon .c-ticket{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
  .wl .coupon .c-head{grid-column:1/-1}
  .wl .coupon .c-top{grid-column:2;grid-row:2;min-height:0;padding:14px 14px 4px}
  .wl .coupon .c-poster{grid-column:1;grid-row:2/span 2;margin:14px 0 0 14px;align-self:start;border-radius:2px}
  .wl .coupon .c-ticket>.c-body:not(.c-top){grid-column:1/-1;grid-row:4;padding:10px 14px 12px}
  .wl .coupon .fields{grid-column:1/-1}
  .wl .coupon .name{font-size:19px}
}
.wl .coupon .stub-link{display:inline-flex!important;align-items:center;gap:6px}
.wl .btn-watch[aria-pressed="true"]{background:var(--stock);color:var(--ink);border-color:var(--rule-ctl)}
.wl .btn-watch[aria-pressed="true"] .ic{fill:none}
.wl .btn-watch[aria-pressed="true"] span{font-size:0}
.wl .btn-watch[aria-pressed="true"] span::after{content:"Remove";font-size:12.5px}
.wl .coupon .c-actions::before{content:"Seen it?";grid-column:1/-1;font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--ink-2);margin-bottom:-2px}
.wl .coupon:has(.act[data-saved="true"]) .c-stub{background:var(--stock-2)}
.more-left{justify-content:flex-start}
.c-demo .st-specimen{display:inline-flex;font-size:13px;color:var(--ink-2);border-width:2px;border-style:solid}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));gap:16px;margin:20px 0 8px}
.result{display:grid;grid-template-columns:110px 1fr;gap:0 18px;align-items:start;background:var(--stock);border-radius:3px;padding:12px 16px 12px 12px;border-left:4px solid var(--head);
  box-shadow:0 1px 1px var(--shadow),0 4px 10px var(--shadow),inset 0 0 0 1px var(--edge)}
.r-img{width:110px;height:165px;border-radius:2px;grid-row:1/span 2}
.r-img .np-band,.r-img .np-foot,.r-img .np-rule{display:none}
.r-img .np-ini{font-size:40px;padding:8px 6px 0}
.r-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.r-name{font-size:20px;font-weight:700;text-decoration:none;line-height:1.2;margin-top:4px}
.r-name:hover{text-decoration:underline;text-decoration-color:var(--red)}
.r-name::after{content:"";position:absolute;inset:0}
.r-name{text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px}
.result{position:relative}
.result:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.r-name:focus-visible{outline:0}
.r-feel{font-size:14.5px;margin-top:4px;color:var(--ink-2)}
.result[data-kind="tv"]{border-left-color:var(--head-tv)}
.result{border-left-color:var(--bar-movie)}
.act.act-row{display:block;position:relative;z-index:1;margin-top:10px}
.result>.act.act-row{grid-column:2;margin-top:10px}
.r-more{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-top:4px;align-self:flex-start;color:var(--ink-2);text-decoration:none;
  font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.r-more:hover{color:var(--ink)}
.r-actions{display:flex;flex-wrap:wrap;gap:6px}
.r-actions .btn{height:34px;padding:0 10px}
.r-actions .btn-watch{margin-left:0}
/* ---- people: photos, search, the cast of a title, a person's page ---- */
.portrait{justify-content:center;align-items:center}
.portrait .np-ini{padding:0;margin:auto;font-size:28px}
.r-as{position:relative;z-index:1;font-size:14.5px;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.r-as a{text-decoration-color:var(--rule-2)}
.r-as a:hover{text-decoration-color:var(--red)}
.sg-two{display:flex;flex-direction:column;line-height:1.25}
.sg-two>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-note{font-weight:500;font-size:13px;color:var(--ink-2)}
.sg-img.portrait .np-ini{font-size:13px}
.page>h2.sr-h{font-size:26px;margin:32px 0 0;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.page>h2.sr-h:first-child{margin-top:4px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:12px;margin:16px 0 8px}
.pcard{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 14px;align-items:center;background:var(--stock);border-radius:3px;padding:10px 14px 10px 10px;
  box-shadow:0 1px 1px var(--shadow),0 4px 10px var(--shadow),inset 0 0 0 1px var(--edge)}
.pcard:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.pc-img{width:64px;height:96px;border-radius:2px}
.pc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-name{font-size:18px;font-weight:700;line-height:1.2;text-decoration-color:var(--rule-2)}
.pc-name:hover{text-decoration-color:var(--red)}
.pc-name::after{content:"";position:absolute;inset:0}
.pc-name:focus-visible{outline:0}
.pc-dept{font-size:12px;color:var(--ink-2);font-stretch:80%;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pc-known{font-size:14px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px 20px}
.cast-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 12px;align-items:center}
.cast-img{width:56px;height:84px;border-radius:2px}
.cast-img .np-ini{font-size:20px}
.cast-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}
.cast-name{font-weight:700;text-decoration-color:var(--rule-2)}
.cast-name:hover{text-decoration-color:var(--red)}
.cast-as{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.person-head{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 28px;align-items:end}
.person-head>.tabs{grid-column:1/-1}
.ph-img{width:150px;height:225px;border-radius:3px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.ph-img .np-ini{font-size:56px}
.ph-txt{min-width:0;padding-bottom:4px}
.ph-links{margin-top:12px}
.ph-links a{display:inline-flex;align-items:center;gap:6px;color:var(--band-ink);font-weight:600}
.person-part{margin-top:32px}
.person-part:first-child{margin-top:4px}
.part-note{margin-top:8px;font-size:14.5px}
.person-source{margin-top:28px;max-width:72ch}
.bstub-edit{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;column-gap:10px}
.bstub-edit .act-row{grid-column:1/-1;margin-top:10px}
.bstub-edit .r-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.bstub-edit .r-actions .btn{height:44px;padding:0 2px;flex-direction:column;justify-content:center;gap:2px;font-size:11.5px;letter-spacing:.04em;font-stretch:70%}
.r-unhide{grid-template-columns:1fr!important}
.r-unhide .btn{flex-direction:row!important;gap:8px!important}
.bstub:has(.act[data-hidden="true"]) .h-hide,.bstub:has(.act[data-hidden="false"]) .h-show{display:none}
.bstub-hidden:has(.act[data-hidden="true"]) .bs-name{text-decoration:line-through;text-decoration-color:var(--red)}
.bstub-hidden:has(.act[data-hidden="true"]) .bs-img{opacity:.6}
.hidden-group{margin-top:28px}
.hidden-group>.muted{margin-top:4px;font-size:14.5px}
.bstub-edit .r-actions .btn .ic{width:14px;height:14px}
.bstub-edit .stamps .stamp{margin-bottom:2px}
.stubs .bstub{box-shadow:inset 0 3px 0 var(--head),0 1px 1px var(--shadow),0 4px 10px var(--shadow);padding-top:12px}
.stubs .bstub[data-kind="tv"]{box-shadow:inset 0 3px 0 var(--head-tv),0 1px 1px var(--shadow),0 4px 10px var(--shadow)}
.stubs .bs-name{text-decoration:underline;text-decoration-color:var(--rule-2)}
.rated-end{margin-top:24px}
.route .leg-to{margin-top:10px}
.leg-to>.lbl{display:block;height:14px;line-height:14px}
.name{font-size:21px;line-height:1.15;font-weight:720;letter-spacing:0;margin-top:3px;overflow-wrap:anywhere;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* In a grid of suggestions every name keeps room for two lines, so the posters in a row start level. */
/* Suggestions in a grid share their rows (subgrid), so in each row the names, posters, feel lines and buttons start level. */
@media (min-width:641px){
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo){grid-row:span 7}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo):not(:has(.act[data-hidden="true"])){display:grid;grid-template-rows:subgrid;row-gap:0}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo)>.c-ticket{display:contents}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .c-head{grid-row:1}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .c-top{grid-row:2}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .c-poster{grid-row:3}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .c-ticket>.c-body:not(.c-top){grid-row:4}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .fields{grid-row:5;align-self:start}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .c-actions{grid-row:6}
  .coupons:not(.coupons-compact):not(.wl .coupons)>.coupon:not(.demo) .c-stub{grid-row:7}
}
.name a{text-decoration:none}
.name a:hover{text-decoration:underline;text-decoration-color:var(--red)}
.name a:focus-visible{outline-offset:-2px}
.classline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;min-height:30px}
.cl .num,.bs-meta .num{font-weight:650}
.cl{font-stretch:78%;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12.5px;color:var(--ink-2)}
.feel{padding:12px 14px 0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.feel.muted{color:var(--ink-2)}
.fields{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 14px 0;border-top:1px solid var(--rule)}
.f{padding:6px 8px 7px;border-bottom:1px solid var(--rule);min-width:0}
.f+.f:not(.f-via){border-left:1px solid var(--rule)}
.f-via+.f{border-left:0!important}
.f:first-child{padding-left:0}
.f-via{grid-column:1/-1;padding-left:0}
.f dd{font-size:13.5px;font-weight:550;margin-top:1px;overflow-wrap:anywhere}
.f-via dd{white-space:normal;overflow:hidden}
.via{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin-left:-21px}
.via li{display:inline-flex;align-items:center;font-weight:600;color:var(--ink)}
.via li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;border:1.5px solid var(--red);margin:0 8px}
.via .v-note{color:var(--ink)}
.act{display:contents}
.c-actions{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 14px;margin-top:auto}
.btn{appearance:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;
  border:1px solid var(--rule-ctl);border-radius:2px;background:var(--stock);color:var(--ink);
  font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;white-space:nowrap}
.btn:hover{border-color:var(--ink)}
.btn[aria-pressed="true"]{background:var(--btn-on);border-color:var(--btn-on);color:var(--btn-on-ink)}
.btn[aria-pressed="true"] .ic{fill:currentColor}
.btn-watch[aria-pressed="true"]{background:var(--btn-on);color:var(--btn-on-ink);border-color:var(--btn-on)}
.btn-icon{padding:0 10px;justify-content:center}
.btn-icon.btn-watch{margin-left:auto}
.btn-icon.btn-watch[aria-pressed="true"]{background:var(--btn-on);color:var(--btn-on-ink);border-color:var(--btn-on)}
.coupons-compact{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:22px 18px}
.coupon.compact{-webkit-mask:none;mask:none}
.compact .c-body{padding-top:12px}
.compact .c-poster .np-ini{font-size:84px}
.compact .c-poster .np-band{margin-top:32px;font-size:11px}
.compact .name{font-size:18px}
.compact .name a{text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px}
.compact .classline{min-height:28px;margin-top:2px}
.compact .feel{font-size:14px;padding-top:4px}
/* The three verdicts share one row of the coupon's width; the stamps and the pressed fill show the state, so they drop their icons. */
.coupon .c-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.coupon .c-actions .btn-rate{justify-content:center;padding:0 4px;letter-spacing:.05em}
.coupon .c-actions .btn-rate .ic{display:none}
.compact .c-actions{padding-top:12px}
.compact .c-actions .btn-rate{font-stretch:68%;letter-spacing:.04em;padding:0 2px}
.coupon.compact .c-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr)}
.coupon.compact .c-actions .btn{height:38px}
/* Rate cards crop the poster a little, so the first row of verdicts shows in the first screen. */
.compact .c-poster{aspect-ratio:3/4}
.compact .c-actions .btn-watch:not([aria-pressed="true"]){background:var(--stock);border-color:var(--rule-ctl)}
.compact .c-actions .btn-watch{grid-column:1/-1;margin:0}
.progress{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:15px}
.progress.on-band{color:var(--band-ink);margin-top:18px}
.progress.on-band .muted,.progress.on-band .p-count{color:var(--band-ink-2)}
.progress.on-band .p-count .num{color:var(--band-ink)}
.punches{display:inline-flex;gap:6px;flex:none}
.p-count{white-space:nowrap;color:var(--ink-2);font-size:14px}
.p-count .num{font-size:16px;font-weight:800}
.punches i{width:16px;height:16px;border-radius:50%;border:2px solid currentColor}
.progress{flex-direction:column;align-items:flex-start;gap:6px}
.p-line{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.punches i.on{background:var(--red);border-color:var(--red);opacity:1}
.p-msg>span{display:none}
[data-step="0"] .p-m0,[data-step="1"] .p-m1,[data-step="2"] .p-m2,[data-step="3"] .p-m3{display:inline}
.progress .p-go{margin-top:6px}
[data-step="0"] .p-go{display:none}
/* Where the count moves (data-live), the button keeps its room at 0, so the list does not jump at the first rating. */
[data-live][data-step="0"] .p-go{display:inline-flex;visibility:hidden}
/* The strip at the foot of the screen: the count and the way to For you, once the count above has
   scrolled out of sight (app.js). */
.p-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--band);color:var(--band-ink);border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -6px 24px var(--shadow-2);padding-bottom:env(safe-area-inset-bottom);animation:dock-in .28s cubic-bezier(.16,1,.3,1)}
.p-dock :focus-visible{outline-color:#fff}
.p-dock-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:64px;padding-top:8px;padding-bottom:8px}
.p-dock .p-count{color:var(--band-ink-2)}
.p-dock .p-count .num{color:var(--band-ink)}
.p-dock .punches i.on{background:var(--red-on-navy);border-color:var(--red-on-navy)}
.p-dock .p-go{flex:none}
@property --fade-l{syntax:"<length>";inherits:false;initial-value:0px}
@property --fade-r{syntax:"<length>";inherits:false;initial-value:0px}
@keyframes tabs-edge{0%{--fade-l:0px;--fade-r:32px}15%{--fade-l:32px}85%{--fade-r:32px}100%{--fade-l:32px;--fade-r:0px}}
@keyframes dock-in{from{transform:translateY(100%)}}
/* The strip covers the foot of the screen: the footer, the note and focus scrolling make room for it
   (app.js sets dock-on). It gives way to the open menu and to a search in use, whose lists reach the foot. */
.dock-on .foot{padding-bottom:calc(26px + 64px + env(safe-area-inset-bottom))}
.dock-on .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
html.dock-on{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.bar.open~main .p-dock,.bar:focus-within~main .p-dock,main:has(.hero-search:focus-within) .p-dock{display:none}
.on-band .punches i.on{background:var(--red-on-navy);border-color:var(--red-on-navy)}
.tab-n{font-variant-numeric:tabular-nums;font-weight:700;opacity:.9}
.btn-rate[data-r="-1"][aria-pressed="true"] .ic{fill:none;stroke-width:2.2}
.btn.htmx-request{opacity:.6;cursor:progress}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink);margin-left:auto}
.btn-quiet:hover{border-color:var(--rule-2);color:var(--ink)}
.c-stub{position:relative;height:var(--stub);flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--stock-2)}
.c-stub::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;
  background:radial-gradient(circle,var(--rule-2) 1.1px,transparent 1.5px) 0 0/7px 2px repeat-x}
.stub-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.stub-name{font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-watch{margin-left:auto}
.stub-link{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration-color:var(--rule-2)}
.stub-link:hover{text-decoration-color:var(--red)}
.coupon:has(.act[data-saved="true"]) .stub-link{display:none}
.dt-split{display:flex;justify-content:space-between}
.ws-credit{font-size:12.5px;color:var(--ink-2)}
.stub-saved{display:none;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink-2)}
.stub-fly{position:fixed;z-index:50;margin:0;pointer-events:none;border-radius:2px;background:var(--stock-2);box-shadow:0 10px 24px var(--shadow-2)}

/* stamps: printed on every coupon, shown by state. will-change gives each stamp its own layer, so the GPU smooths
   the tilted rules (Safari leaves thin rotated borders jagged). backface-visibility does not make a layer in WebKit
   without a 3D context. */
.stamps{display:contents}
.stamp{display:none;flex-direction:column;align-items:center;justify-content:center;line-height:1;transform:rotate(-7deg);
  font-stretch:68%;font-weight:850;text-transform:uppercase;letter-spacing:.12em;font-size:17px;padding:5px 10px 4px;
  color:var(--red);border:3px double currentColor;border-radius:3px;mix-blend-mode:var(--blend);white-space:nowrap;flex:none;
  will-change:transform}
.st-liked{color:var(--stamp-liked);border-style:solid;border-width:2px;border-radius:12px;transform:rotate(5deg)}
.st-nope{color:var(--ink-2);border-width:2px;border-style:solid;border-radius:0;padding:3px 9px 4px;
  background:linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat}
.st-nope .st-word{background:var(--stock);padding:0 4px}
.st-sub{font-size:9px;letter-spacing:.14em;margin-top:2px;background:var(--stock);padding:0 3px}
.st-saved{display:inline-flex;color:var(--stamp-liked);border-style:solid;border-width:2px;border-radius:50%;font-size:12px;padding:6px 12px;transform:rotate(-9deg)}
.st-cancel{display:inline-flex;font-size:14px;border-width:3px}
.result .stamp{font-size:12.5px;padding:3px 7px 2px;margin-left:12px;vertical-align:middle}
.result .st-sub{display:none}
:is(.coupon,.ticket,.bstub,.result):has(.act[data-rating="2"]) .stamps .st-loved,
:is(.coupon,.ticket,.bstub,.result):has(.act[data-rating="1"]) .stamps .st-liked,
:is(.coupon,.ticket,.bstub,.result):has(.act[data-rating="-1"]) .stamps .st-nope{display:inline-flex;animation:stamp .28s cubic-bezier(.16,1,.3,1)}
@keyframes stamp{from{transform:scale(1.5) rotate(-12deg);opacity:0}}
.coupon:has(.act[data-rating="-1"]) .name a{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.coupon:has(.act[data-rating="-1"]) .c-poster{opacity:.55}
.coupon:has(.act[data-saved="true"]) .c-stub{background:var(--carbon-soft)}
.coupon:has(.act[data-saved="true"]) .c-stub::before,.coupon:has(.act[data-saved="true"]) .stub-text{display:none}
.coupon:has(.act[data-saved="true"]) .stub-saved{display:flex}
/* hidden: the coupon cancels down to one stub */
.c-cancel{display:none;align-items:center;gap:14px;padding:12px 14px;min-height:64px}
.cancel-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.cancel-name{font-weight:650;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:line-through;text-decoration-color:var(--red)}
.cancel-note{font-size:12.5px;color:var(--ink-2)}
.c-cancel .btn{margin-left:auto}
.coupon:has(.act[data-hidden="true"]){align-self:start;background:var(--stock-2);
  -webkit-mask:radial-gradient(circle 2.4px at 4px 0,#0000 96%,#000) 0 0/8px 100% repeat-x;
          mask:radial-gradient(circle 2.4px at 4px 0,#0000 96%,#000) 0 0/8px 100% repeat-x}
.coupon:has(.act[data-hidden="true"]) :is(.c-ticket,.c-actions,.c-stub){display:none}
.coupon:has(.act[data-hidden="true"]) .c-cancel{display:flex}
/* no poster: a printed carrier panel */
.noposter{position:relative;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;background:var(--navy);color:#fff}
.np-band{display:block;width:100%;background:var(--ticket-head);color:#fff;font-stretch:70%;font-weight:800;text-transform:uppercase;letter-spacing:.14em;
  font-size:10px;padding:5px 7px;margin-top:18px}
.np-ini{font-stretch:62%;font-weight:850;font-size:46px;line-height:1;letter-spacing:.02em;padding:12px 7px 0}
.np-rule{display:block;width:calc(100% - 14px);margin:8px 7px 0;border-top:1px solid rgba(255,255,255,.5)}
.np-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;outline:1px solid var(--rule-2);outline-offset:-1px}
.seg{white-space:nowrap}
.np-foot{position:absolute;left:7px;bottom:7px;font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:8.5px;color:#c9d2ec}

/* ---- title page: the full ticket ---- */
.t-band{background:var(--band);padding:28px 0 36px}
/* The TMDB backdrop shows above the ticket and fades into the band. */
/* The TMDB backdrop fills the top of the band, shows in a strip above the ticket and fades into the band behind it.
   Only the top 480px is drawn: lower down the ticket and the band colour cover it. */
.t-band.has-backdrop{position:relative;isolation:isolate;padding:120px 0 48px;--bd-h:380px}
.t-backdrop,.t-band.has-backdrop::before{position:absolute;inset:0 0 auto;height:var(--bd-h);z-index:-2}
.t-backdrop{width:100%;object-fit:cover;object-position:center 25%;filter:var(--bd-dim,none)}
.t-band.has-backdrop::before{content:"";z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--band) 5%,#0000),color-mix(in srgb,var(--band) 35%,#0000) 110px,color-mix(in srgb,var(--band) 88%,#0000) 290px,var(--band))}
.ticket{--stubw:230px;display:grid;grid-template-columns:1fr var(--stubw);background:var(--stock);border-radius:4px;
  box-shadow:0 2px 3px var(--shadow),0 18px 40px rgba(0,0,0,.25);
  -webkit-mask:radial-gradient(circle 11px at calc(100% - var(--stubw)) 0,#0000 97%,#000),radial-gradient(circle 11px at calc(100% - var(--stubw)) 100%,#0000 97%,#000);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 11px at calc(100% - var(--stubw)) 0,#0000 97%,#000),radial-gradient(circle 11px at calc(100% - var(--stubw)) 100%,#0000 97%,#000);
  mask-composite:intersect}
.tk-main{display:flex;flex-direction:column;min-width:0}
.ticket[data-kind="tv"] .tk-head{background:var(--head-tv)}
.tk-head{display:flex;align-items:center;height:36px;padding:0 22px;background:var(--ticket-head);color:#fff;
  font-stretch:72%;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;border-radius:4px 0 0 0}
.tk-body{display:grid;grid-template-columns:340px 1fr;grid-template-rows:auto 1fr;gap:0 36px;padding:24px 28px 26px 22px}
.tk-top{display:contents}
.tk-poster{grid-column:1;grid-row:1/span 2;width:340px;height:510px;object-fit:cover;border-radius:2px;background:var(--stock-2);box-shadow:0 2px 3px var(--shadow),0 18px 40px var(--shadow-2)}
.tk-poster.noposter{background:var(--navy)}
.tk-poster .np-band{margin-top:48px;font-size:13px;padding:8px 20px}
.tk-poster .np-ini{font-size:120px;padding:30px 20px 0}
.tk-poster .np-rule{width:calc(100% - 40px);margin:14px 20px 0}
.tk-poster .np-foot{left:20px;bottom:18px;font-size:11px}
.tk-info-a{grid-column:2;grid-row:1;min-width:0}
.tk-info{grid-column:2;grid-row:2;min-width:0;display:flex;flex-direction:column}
.tk-info-a h1{font-size:76px;overflow-wrap:anywhere;text-wrap:balance}
.tk-class{display:flex;align-items:center;gap:16px;margin-top:12px;min-height:38px}
.tk-class .cl{font-size:14.5px}
.tk-class .stamp{font-size:22px}
.tk-feel{font-size:21px;line-height:1.4;margin-top:14px;max-width:44ch;font-weight:450;text-wrap:pretty}
.tk-fields{display:grid;grid-template-columns:1fr 2fr;margin-top:20px;border-top:1px solid var(--rule);max-width:780px}
.tk-fields .f{padding:9px 12px 10px 0}
.tk-fields .f+.f{padding-left:14px}
.tk-fields .f.wide{grid-column:1/-1;border-left:0;padding-left:0}
.tk-fields dd{white-space:normal;font-size:15px;font-weight:450;line-height:1.5;margin-top:3px}
.tk-fields .tagline dd{font-weight:600}
.tk-trailer{margin-top:16px;font-size:15px;font-weight:600}
.tk-trailer a{color:var(--ink-2);font-weight:500;font-size:14.5px;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:4px;text-decoration-thickness:1px}
.tk-trailer a:hover{color:var(--ink);text-decoration-color:var(--red)}
.tk-strip{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:0;margin-top:16px;border-top:1px solid var(--ink);max-width:620px}
.tk-strip div{padding:7px 18px 8px 0;border-bottom:1px solid var(--rule)}
.tk-strip div+div{padding-left:14px;border-left:1px solid var(--rule)}
.tk-strip dt{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--ink-2)}
.tk-strip dd{font-size:15px;font-weight:600;margin-top:2px}
.tk-credits{display:none;margin-top:12px;font-size:14.5px;line-height:1.35}
.tk-credits div+div{margin-top:6px}
.tk-credits dt{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--ink-2)}
.tk-credits dd{font-weight:600}
.nw{white-space:nowrap}
.tk-hint{margin-top:10px;font-size:14.5px;color:var(--ink-2)}
.tk-next{display:none;margin-top:10px;font-size:15px}
.ticket:has(.act[data-rating="2"]) .tk-next,.ticket:has(.act[data-rating="1"]) .tk-next{display:block}
/* A hidden title keeps its Hide button, so it can be shown again even when rated. */
.ticket:has(.act[data-hidden="true"]) [data-hide]{display:inline-flex}
/* Once the title is rated, the hint to rate it has done its job. */
.ticket:has(.act:is([data-rating="2"],[data-rating="1"],[data-rating="-1"])) .tk-hint{display:none}
.ticket:has(.act[data-rating="2"]) [data-hide],.ticket:has(.act[data-rating="1"]) [data-hide],.ticket:has(.act[data-rating="-1"]) [data-hide]{display:none}
.tk-stub .tk-facts{margin-top:16px}
.tk-stub .tk-facts dd{font-size:14.5px;font-weight:600;line-height:1.35}
.tk-trailer a{display:inline-flex;align-items:center;gap:8px}
.tk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.tk-actions .btn{height:40px;padding:0 14px;font-size:13.5px}
.tk-actions .btn-quiet,.tk-actions .btn-watch{margin-left:0}
.tk-break{flex-basis:100%;height:0}
::placeholder{color:var(--ink-2);opacity:1}

.tk-stub{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 18px;background:var(--stock-2);border-radius:0 4px 4px 0}
.ws{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.tk-facts{display:grid;border-top:1px solid var(--rule)}
.tk-facts div{padding:8px 0;border-bottom:1px solid var(--rule)}
.tk-facts dt{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink-2)}
.tk-facts dd{font-size:20px;font-weight:700;margin-top:2px}
.ws-line{display:flex;flex-direction:column;gap:4px;margin-top:14px;font-size:15px;font-weight:600}
.ws-line .ws-credit{font-weight:400}
.ws-list{display:grid;gap:8px}
.tk-stub .ws:first-child{margin-top:0;padding-top:0;border-top:0}
.ws-list li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:1.2}
.ws-list img{width:28px;height:28px;border-radius:6px;flex:none}
.ws-more{font-size:13.5px;font-weight:600}
.ws-none{font-size:14px;color:var(--ink-2)}
.tk-stub::before{content:"";position:absolute;top:14px;bottom:14px;left:-1px;width:2px;
  background:radial-gradient(circle,var(--rule-2) 1.1px,transparent 1.5px) 0 0/2px 7px repeat-y}
.tk-stub .st-name{font-size:24px;font-weight:750;line-height:1.1;margin-top:8px;overflow-wrap:anywhere}
.tk-stub dl{display:grid;margin-top:10px;border-top:1px solid var(--rule)}
.tk-stub .f{padding:6px 0;border-left:0!important}
.tk-stub .stub-saved{flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto}
.ticket:has(.act[data-saved="true"]) .tk-stub{background:var(--carbon-soft)}
.ticket:has(.act[data-saved="true"]) .tk-stub::before{display:none}
.ticket:has(.act[data-saved="true"]) .stub-saved{display:flex}
.ticket:has(.act[data-rating="-1"]) h1{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:4px}
.ticket .act{display:block}

/* panels */
.panel{background:var(--stock);border-radius:3px;box-shadow:0 1px 1px var(--shadow),0 8px 18px var(--shadow),inset 0 0 0 1px var(--edge);margin-top:28px;min-width:0}
.p-head{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;padding:0 20px;background:var(--head);color:var(--head-ink);border-radius:3px 3px 0 0}
.page .p-head h2{font-stretch:72%;font-weight:750;text-transform:uppercase;letter-spacing:.12em;font-size:14.5px;margin:0;line-height:1.2}
.p-head p{font-size:13.5px;color:#dfe5f5}
.p-body{padding:18px 20px 22px}
.fare{display:grid;grid-template-columns:minmax(0,3fr) minmax(300px,2fr);gap:28px}
.boxes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--rule)}
.box{padding:9px 12px 12px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0}
.box dt{font-size:12px}
.box dd{margin-top:5px;font-size:15px;font-weight:550}
.s2{grid-column:span 2}
.s4{grid-column:span 4}
.tones li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0}
.marks{display:inline-flex;gap:3px}
.marks i{width:14px;height:6px;background:var(--track);border-radius:1px}
.marks i.on{background:var(--carbon)}
.meter-row{display:flex;align-items:center;gap:8px}
.meter{display:inline-flex;gap:3px}
.meter span{width:18px;height:6px;background:var(--track);border-radius:1px}
.meter span.on{background:var(--carbon)}
.scales-box summary{font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;margin:0 0 8px;color:var(--ink)}

.ladder{display:flex;gap:3px;margin-top:8px}
.ladder span{flex:1;height:5px;background:var(--track);border-radius:1px}
.ladder span.on{background:var(--carbon)}
.ladder-l span{max-width:50%}
.ladder-l span+span{text-align:right}
.ladder-l{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-2);margin-top:3px;font-stretch:80%;text-transform:uppercase;letter-spacing:.06em}
.list-dots{display:flex;flex-wrap:wrap;gap:2px 0;margin-left:-21px}
dd:has(>.list-dots){overflow:hidden}
.list-dots li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;border:1.5px solid var(--red);margin:0 8px;vertical-align:2px}
.ints{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px}
.ints li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:3px 0}
.ints .lvl{font-weight:600;color:var(--ink)}
.scales{width:100%;border-collapse:collapse;font-size:14.5px}
.scales th,.scales td{padding:7px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:550}
.scales thead th{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--ink-2);border-bottom:1px solid var(--ink);padding-top:0}
.scales .v{width:64px;text-align:right;padding-right:14px;font-size:16px}
.scales thead .v{font-size:11.5px}
.scales td.sc-bar{width:46%}
.sbar{display:block;position:relative;height:6px;background:linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/10% 100%,var(--stock-2);border:1px solid var(--rule)}
.sbar b{position:absolute;left:0;top:-1px;bottom:-1px;background:var(--carbon)}
.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
.pax{display:grid;grid-template-columns:150px 1fr}
.pax dt,.pax dd{padding:9px 0;border-bottom:1px solid var(--rule)}
.pax dt{font-size:11px;padding-top:12px}
.pax dd{font-size:15px}
.ids{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ids a{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--rule-ctl);border-radius:2px;text-decoration:none;
  font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.ids a:hover{border-color:var(--ink)}
.providers{display:grid;grid-template-columns:90px 1fr;border-top:1px solid var(--ink)}
.providers dt{font-stretch:70%;font-weight:750;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--rule)}
.providers dd{padding:10px 0;border-bottom:1px solid var(--rule)}
.prov{display:flex;flex-wrap:wrap;gap:8px 14px}
.prov li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:550;min-width:0}
.prov img{width:32px;height:32px;border-radius:6px}
.jw{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:14px;font-size:13px;color:var(--ink-2)}
.more{margin-top:40px}
.more-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-bottom:1px solid var(--rule-2)}
.more-head h2{margin:0;font-size:38px}
.more-head .tabs{margin-top:0}
.shelf{margin:0 0 40px}
.page>.shelf:not(:first-child){margin:40px 0 0}
.shelf-head{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;padding-bottom:12px;margin-bottom:20px}
.shelf-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.shelf-after{margin-top:0}
.mix-note{margin-top:14px}
.more-head .tab[aria-pressed="true"]{margin-bottom:-1px;height:45px}
/* A tab shows as pressed at once (app.js); the old list dims until the new one arrives. */
#similar .coupons{transition:opacity .14s}
#similar:has(.tab.htmx-request) .coupons{opacity:.45}

/* A change the server refused: the buttons go back, and this note says why (app.js). */
.toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));translate:-50% 0;z-index:60;width:max-content;max-width:calc(100vw - 32px);
  background:var(--ink);color:var(--stock);padding:10px 16px;border-radius:3px;font-size:14.5px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.toast[hidden]{display:none}

/* ---- offline: the bar over a saved copy, and the list of saved pages ---- */
.netbar{background:var(--carbon-soft);color:var(--ink);border-bottom:1px solid var(--rule)}
.netbar[hidden]{display:none}
.netbar-in{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding-top:6px;padding-bottom:6px}
.netbar-tag{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;word-spacing:.15em;font-size:12px;
  border:1px solid var(--carbon);color:var(--carbon);padding:1px 7px;border-radius:2px;flex:none}
.netbar-text{flex:1;min-width:18ch;font-size:14.5px}
.netbar-act{font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;word-spacing:.18em;font-size:13px;
  min-height:44px;display:inline-flex;align-items:center;flex:none}
.netbar-act[hidden]{display:none}
.saved-list{border-top:1px solid var(--rule);max-width:780px;margin-top:10px}
.saved-empty{max-width:720px;margin-top:20px}
.saved-empty .empty-h{margin-bottom:8px}
.online .off-only,:root:not(.online) .on-only{display:none}
.saved-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.saved-list a{font-weight:600}
.saved-list .muted{font-size:13.5px;flex:none}

/* ---- footer ---- */
.foot{background:var(--band);color:var(--band-ink-2);margin-top:56px;padding:36px 0 26px;font-size:13.5px}
.foot .wrap{display:grid;gap:10px}
.foot :focus-visible{outline-color:#fff}
.foot a{color:#fff;text-decoration-color:var(--red-on-navy)}
.tmdb{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tmdb img{width:150px;height:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.foot-links a{font-stretch:80%;font-weight:650;text-transform:uppercase;letter-spacing:.07em}

/* ---- responsive ---- */
@media (max-width:1180px){
  /* Ten links fit in the bar down to 981px, where the menu takes over. */
  .nav ul{gap:0}
  .nav a,.nav button{padding:0 7px}
  .seeds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fare{grid-template-columns:1fr}
  .tk-body{grid-template-columns:270px 1fr}
  .tk-poster{width:270px;height:405px}
  .tk-poster .np-ini{font-size:96px}
  .tk-info-a h1{font-size:60px}
}
@media (max-width:980px){
  .tk-body{grid-template-columns:200px 1fr;gap:0 28px}
  .tk-poster{width:200px;height:300px}
  .tk-poster .np-ini{font-size:72px;padding:20px 14px 0}
  .tk-poster .np-band{margin-top:30px;font-size:11px;padding:6px 14px}
  .tk-poster .np-rule{width:calc(100% - 28px);margin:10px 14px 0}
}
@media (max-width:980px){
  .bar-in{flex-wrap:wrap;height:auto;padding:10px 16px;gap:10px 8px}
  .brand{margin-right:auto}
  .search{order:5;flex:1 1 100%;max-width:none}
  .js .menu,.wallet-m{display:inline-flex}
  .icon-btn.theme{display:none}
  .theme-row,.home-row{display:block}
  .nav{order:6;flex:1 1 100%;margin:0}
  .js .nav{display:none}
  .js .bar.open .nav{display:block}
  /* The bar slides away while the page scrolls down and comes back when it scrolls up (app.js sets .away).
     It stays sticky, so nothing below it moves. Links to a part of the page and focus stop below it:
     app.js measures its height (two rows here) into --bar-h. */
  .bar{transition:translate .22s cubic-bezier(.16,1,.3,1)}
  .bar.away{translate:0 -100%}
  /* An open menu taller than the screen scrolls inside itself (app.js sets its max-height). */
  .js .bar.open .nav{overflow-y:auto;overscroll-behavior:contain}
  html{scroll-padding-top:var(--bar-h,0px)}
  .prose h2[id],.faq-q{scroll-margin-top:16px}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:4px 0 6px;border-top:1px solid rgba(255,255,255,.14)}
  .nav a,.nav button{height:44px;width:100%}
  .nav .login{margin:6px 0 0;justify-content:center}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--red-on-navy);background:rgba(255,255,255,.06)}
  .nav a,.nav button{padding:0 14px}
  .nav .count{display:none}
  .two{grid-template-columns:1fr}
  .ticket{--stubw:0px;--stubh:150px;grid-template-columns:1fr;
    -webkit-mask:radial-gradient(circle 10px at 0 calc(100% - var(--stubh)),#0000 97%,#000),radial-gradient(circle 10px at 100% calc(100% - var(--stubh)),#0000 97%,#000);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(circle 10px at 0 calc(100% - var(--stubh)),#0000 97%,#000),radial-gradient(circle 10px at 100% calc(100% - var(--stubh)),#0000 97%,#000);
    mask-composite:intersect}
  .tk-head{border-radius:4px 4px 0 0}
  .tk-stub{min-height:var(--stubh);border-radius:0 0 4px 4px;display:grid;grid-template-columns:1fr auto;align-content:center;align-items:center;padding:14px 16px}
  .tk-stub::before{top:-1px;bottom:auto;left:14px;right:14px;width:auto;height:2px;background:radial-gradient(circle,var(--rule-2) 1.1px,transparent 1.5px) 0 0/7px 2px repeat-x}
  .tk-stub .tk-facts{display:none}
  .tk-credits{display:block}
  .tk-stub .ws-line{margin:0}
  .tk-stub .ws{margin:0;padding:0;border:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 10px}
  .tk-stub .ws-list{display:flex;gap:6px}
  .tk-stub .ws-more{grid-column:1/-1}
  .tk-stub .stub-saved{flex-direction:row;align-items:center;margin:0}
  .hero-grid{grid-template-columns:1fr}
  .how .steps{grid-template-columns:1fr}
  .auth,.auth:has(>.fb-box){grid-template-columns:minmax(0,600px)}
  .empty-pair,.void-row,.import-layout,.doc{grid-template-columns:minmax(0,1fr)}
  .doc>:is(.doc-a,.doc-b,.doc-aside,.toc){grid-column:1;grid-row:auto}
  .doc-aside,.toc{position:static;margin-top:24px}
  .toc{max-width:none}
  .toc ul{display:flex;flex-wrap:wrap;gap:4px 16px}
}
@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .bar-in{gap:10px 2px}
  .brand{font-size:20px;letter-spacing:.1em;gap:8px}
  .intro{padding-top:22px}
  /* The action sits beside the heading and the line goes under both, so the band is one row shorter.
     A heading that needs the full width, or large text, puts the action under the heading instead. */
  .intro-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .intro-top>div{display:contents}
  .intro-top h1{flex:1 1 auto}
  .intro-top .lede{order:1;flex-basis:100%;margin-top:0}
  .person-head{grid-template-columns:96px minmax(0,1fr);gap:0 16px}
  .ph-img{width:96px;height:144px}
  .ph-img .np-ini{font-size:36px}
  .ph-links{margin-top:8px;font-size:14px}
  .surprise{padding:0 12px}
  .intro h1,.page>h1,.hero-main h1{font-size:32px}
  .intro .lede{font-size:15px}
  .progress.on-band{margin-top:12px}
  .stubs{grid-template-columns:1fr}
  .stubs .bstub{flex-direction:row;align-items:center}
  .stubs .bs-img{width:48px;height:72px}
  .save-w{display:none}
  .seeds{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;margin:16px -16px 0 0;padding-right:16px;scrollbar-width:none}
  .seeds>li{flex:0 0 212px;scroll-snap-align:start}
  .bstub{min-height:76px;gap:8px;padding-right:8px}
  .bs-img{width:38px;height:57px}
  /* One line each for the name and the class line, so the row of the person's titles stays short. */
  .seeds .bs-name{-webkit-line-clamp:1}
  .seeds .bs-meta{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bstub.importslot{flex-basis:220px}
  .hero-search input{font-size:16px}
  .hero-search button{padding:0 16px}
  .tk-class{flex-wrap:wrap;gap:8px 14px}
  /* The tabs share the full width, so each is an easy target. */
  .tabs{margin-top:18px}
  .tabs>.tab{flex:1 1 0;justify-content:center;padding:0 8px}
  /* Up to six moods do not fit, so the row scrolls. It runs to the screen edges, so the edge cuts a tab. The
     right gutter is a spacer that shrinks first, so the row scrolls only when a tab is cut, not for the gutter.
     Focus keeps a tab out of the fades. */
  .tabs-wide{overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-left:16px;scroll-padding-inline:32px}
  .tabs-wide::after{content:"";flex:0 1 16px;min-width:0;margin-left:-4px}
  /* The side with more tabs fades out. A row that fits has no timeline, so no fade. The shorthand resets
     animation-timeline, so the longhand comes after it; no duration and no fill, or a row that fits would keep
     the first keyframe. The fade moves only with the person's own scroll, so reduced motion keeps it. Other
     browsers get the cut tab only. */
  @supports (animation-timeline:scroll()){
    .tabs-wide{--fade-l:0px;--fade-r:0px;
      mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
      animation:tabs-edge linear;animation-timeline:scroll(self inline)}
  }
  .tabs-wide>.tab{flex:1 0 auto;padding:0 10px}
  .more-head .tabs{align-self:stretch}
  .coupons{gap:16px;padding-top:16px}
  /* A band that ends in tabs leads straight into the list under them. */
  .band:has(.intro>.tabs:last-child)+.page{padding-top:8px}
  .band:has(.intro>.tabs:last-child)+.page>.notice:first-child{margin-top:16px}
  .progress{flex-direction:column;align-items:flex-start;gap:8px}
  /* The strip keeps the dots, the number and the button; screen readers still hear "loved or liked". */
  .p-dock .p-cw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .p-dock-in{min-height:60px;gap:8px 10px}
  .hero-example .fields .f:not(.f-via){display:none}
  .intro{padding-bottom:22px}
  .compact .c-poster img{object-position:top}
  .coupon.compact .classline .seg+.seg{display:inline}
  .coupon.compact .classline .dot{display:inline}
  .compact .cl{font-size:11.5px;letter-spacing:.05em}
  .compact .c-poster{aspect-ratio:4/5}
  .result{grid-template-columns:72px 1fr;gap:0 12px}
  .r-img{width:72px;height:108px}
  .result>.act.act-row{grid-column:1/-1;margin-top:12px}
  .result .r-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .result .r-actions .btn{height:44px}
  .result .r-actions .btn{padding:0 4px;justify-content:center;font-size:11.5px;letter-spacing:.04em;font-stretch:70%}
  .result .r-actions .btn{gap:4px}
  .result .r-actions .btn .ic{width:14px;height:14px}
  .tk-actions .btn .ic{display:inline-block}
  .tk-actions .btn{padding:0 8px;letter-spacing:.05em}
  .tk-actions .btn-quiet{border:1px solid transparent;justify-content:flex-start}
  .tk-stub .ws{flex-direction:column!important;align-items:flex-start!important}
  .tk-stub .ws-list{display:grid!important;gap:8px}
  .alt-row .btn-link{flex:1;justify-content:center}
  .auth:has(>.fb-box)>.auth-aside{position:static}
  .fb-form textarea{min-height:120px}
  .fb-kind label{min-height:44px}
  .toc ul{display:grid!important;grid-template-columns:1fr}
  .toc a{min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--rule)}
  .saved-empty .p-body{padding:16px}
  .empty-left{padding:20px 18px}
  .foot-links a{min-height:44px;display:inline-flex;align-items:center}
  .page>.how{margin-top:28px}
  .vt-path{font-size:18px}
  .vt-body{min-height:0;padding:12px 14px 14px}
  .void-next .actions-row>.btn-link{flex:1 1 140px;justify-content:center}
  .tk-class .stamp{font-size:16px}
  .void-ticket .stamp{font-size:22px;right:12px}
  .auth-box.panel>.p-body{padding:16px}
  .auth-aside{padding:0 16px 16px}
  .page .auth-aside>h2:first-child{margin:0 -16px 14px!important;padding:12px 16px}
  .auth-box.panel>.p-head{padding-left:16px;padding-right:16px}
  .np-ini{font-size:38px}
  .name{font-size:19px}
  .btn{padding:0 9px}
  .c-actions .btn-quiet{margin-left:0}
  .f dd{white-space:normal;overflow-wrap:anywhere}
  .t-band{padding:16px 0 22px}
  .tk-head{padding:0 14px}
  .tk-body{padding:16px 14px 18px}
  .tk-poster .np-ini{font-size:56px;padding:14px 10px 0}
  .tk-poster .np-band{margin-top:22px;font-size:10px;padding:5px 10px}
  .tk-poster .np-rule{width:calc(100% - 20px);margin:8px 10px 0}
  .tk-poster .np-foot{left:10px;bottom:10px;font-size:9px}
  .t-band.has-backdrop{padding:120px 0 28px;--bd-h:260px}
  .t-backdrop{object-position:center}
  .t-band.has-backdrop::before{background:linear-gradient(180deg,#0000,color-mix(in srgb,var(--band) 50%,#0000) 120px,var(--band))}
  .result{grid-template-columns:84px 1fr;gap:12px}
  .r-img{width:84px;height:126px}
  .coupons-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .compact .c-body{padding:10px 10px 0}
  .compact .name{font-size:16px}
  .compact .feel{font-size:13.5px}
  .coupon.demo .c-ticket{grid-template-columns:110px minmax(0,1fr)}
  .tk-info-a h1{font-size:38px}
  .tk-feel{font-size:18px}
  .tk-fields{grid-template-columns:1fr}
  .tk-fields .f+.f{border-left:0;padding-left:0}
  .tk-actions .btn{height:38px;padding:0 10px;font-size:12.5px}
  .tk-info .tk-fields{margin-top:18px}
  .tk-actions{padding-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .tk-actions .btn{justify-content:center;padding:0 6px;gap:6px;letter-spacing:.03em}
  .tk-actions .btn-watch{grid-column:1/3}
  .ticket:has(.act:is([data-rating="2"],[data-rating="1"],[data-rating="-1"])) .tk-actions .btn-watch{grid-column:1/-1}
  .tk-break{display:none}
  .actions-row>.btn-link{flex:1 1 100%;justify-content:center}
  .tk-stub{grid-template-columns:1fr;align-content:center;gap:8px}
  .ticket{-webkit-mask:none;mask:none}
  .tk-stub{min-height:0}
  .tk-stub .ws-list span{display:inline}
  .tk-stub .ws-list{flex-wrap:wrap;gap:8px 12px}
  .two .watch{order:0}
  .auth-box{padding:18px 16px}
  .boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .box.b-ladder{grid-column:span 2}
  /* A coupon on a phone: the poster at the side of the route and the feel, so one coupon fits a screen. */
  .coupon:not(.compact):not(.demo) .c-ticket{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
  .coupon:not(.compact):not(.demo) .c-head{grid-column:1/-1}
  .coupon:not(.compact):not(.demo) .c-top{grid-column:2;grid-row:2;padding:12px 14px 4px 14px}
  .coupon:not(.compact):not(.demo) .c-poster{grid-column:1;grid-row:2;margin:14px 0 0 14px;align-self:start;border-radius:2px}
  .coupon:not(.compact):not(.demo) .c-poster .np-ini{font-size:40px;padding:12px 8px 0}
  .coupon:not(.compact):not(.demo) .c-poster .np-band{margin-top:18px;font-size:9px;padding:4px 8px}
  .coupon:not(.compact):not(.demo) .c-poster .np-rule,.coupon:not(.compact):not(.demo) .c-poster .np-foot{display:none}
  .coupon:not(.compact):not(.demo) .c-ticket>.c-body:not(.c-top){grid-column:1/-1;grid-row:3;padding:10px 14px 12px}
  .coupon:not(.compact):not(.demo) .c-ticket>.c-body .feel{padding-top:2px;font-size:14px}
  .coupon:not(.compact):not(.demo) .fields,.coupon:not(.compact):not(.demo) .c-ticket>.sr{grid-column:1/-1}
  .coupon:not(.compact):not(.demo) .name{font-size:18px}
  .coupon:not(.compact):not(.demo) .classline{min-height:28px;margin-top:2px}
  /* The title page on a phone: the name across the ticket, then the poster beside the class line and the feel. */
  /* The whole ticket is one grid on a phone, so where to watch comes right after the buttons, before the overview. */
  .ticket{grid-template-columns:118px minmax(0,1fr);column-gap:14px;align-items:start;padding:0 14px 18px}
  .tk-main,.tk-body,.tk-top,.tk-info,.tk-info-a{display:contents}
  .tk-head{grid-column:1/-1;grid-row:1;margin:0 -14px 16px}
  .tk-info-a h1{grid-column:1/-1;grid-row:2;margin-bottom:14px;overflow-wrap:break-word}
  .tk-class{grid-column:1/-1;grid-row:3;margin-top:0;min-height:0}
  .tk-info .tk-feel{grid-column:1/-1;grid-row:4;margin:10px 0 2px;font-size:17px;line-height:1.45}
  /* The verdicts come right after the feel, so a person from a shared link sees them in the first screen. */
  .tk-info>.act{grid-column:1/-1;grid-row:5}
  .tk-info .tk-hint,.tk-info .tk-next{grid-column:1/-1;grid-row:6}
  .tk-poster{grid-column:1;grid-row:7;width:118px;height:177px;margin-top:20px}
  .tk-info .tk-credits{grid-column:2;grid-row:7;margin-top:20px;font-size:13.5px}
  .tk-stub{grid-column:1/-1;grid-row:8;margin:18px -14px 0;border-radius:0}
  .tk-stub::after{content:"";position:absolute;bottom:-1px;left:14px;right:14px;height:2px;background:radial-gradient(circle,var(--rule-2) 1.1px,transparent 1.5px) 0 0/7px 2px repeat-x}
  .tk-info .tk-fields{grid-column:1/-1;grid-row:9}
  .tk-info .tk-trailer{grid-column:1/-1;grid-row:10}
  /* Two rating stubs side by side. */
  .stubs{grid-template-columns:1fr;gap:8px}
  .stubs .bstub{padding:12px 8px 8px 14px}
  .bstub-edit{grid-template-columns:48px minmax(0,1fr)}
  .bstub-edit .r-actions .btn{flex-direction:row;gap:6px;font-size:11.5px}
  /* The class line of a rate card: the length on a line of its own, so a wrap never strands a dot. */
  .compact .classline .seg+.seg{display:block}
  .compact .classline .dot{display:none}
  .s4{grid-column:span 2}
  .ints{grid-template-columns:repeat(2,1fr);gap:4px 16px}
  .pax{grid-template-columns:116px 1fr}
  .providers{grid-template-columns:64px 1fr}
  .p-head{flex-wrap:wrap;padding:8px 14px}
  .p-body{padding:14px}
  .more-head h2{font-size:30px}
  .shelf-head{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px),(pointer:coarse){
  .btn,.tk-actions .btn,.ids a,.btn-link,.surprise{height:44px}
  .tk-trailer a{min-height:44px}
  .btn-icon{min-width:44px}
}
@media (max-width:640px){
  /* The account counts as rows: the label and its link on the left, the number on the right. */
  .tally{grid-template-columns:1fr;gap:8px}
  .tally div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-width:0;padding:8px 16px}
  .tally dt{grid-column:1;grid-row:1}
  .tally dd.num{grid-column:2;grid-row:1/span 2;font-size:28px}
  .tally-go{grid-column:1;grid-row:2;margin-top:2px}
}
@media (max-width:640px){
  /* A rate card on a phone: one per row, the poster beside the name and the feel, the buttons across. */
  .coupons-compact{grid-template-columns:1fr}
  .coupon.compact .c-ticket{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start}
  .coupon.compact .c-head{grid-column:1/-1}
  .coupon.compact .c-poster{grid-column:1;grid-row:2;aspect-ratio:2/3;margin:12px 0 0 12px;border-radius:2px}
  .coupon.compact .c-ticket>.c-body{grid-column:2;grid-row:2;padding:10px 14px 0 14px}
  .coupon.compact .c-actions{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}
  .compact .c-actions .btn-watch{grid-column:1/-1}
  .compact .c-actions .save-w{display:inline}
  .coupon.compact .c-actions .btn{height:44px;padding:0 6px;letter-spacing:.04em;font-size:12.5px;font-stretch:72%}
  .c-actions .btn-quiet{right:8px}
  .c-actions .btn-quiet::after{inset:3px 0}
  .toc summary{min-height:44px}
  .coupon{--head-h:44px}
  .icon-btn{width:44px;height:44px}
  .c-actions .btn-rate{flex:1;justify-content:center}
}
/* The narrowest phones: the strip drops the dots, so the number and the button fit on one row. */
@media (max-width:380px){.p-dock .punches{display:none}}
@media (forced-colors:active){
  .btn[aria-pressed="true"],.tab[aria-pressed="true"],.tab[aria-current="page"],.tab.is-on,.marks i.on,.meter span.on,.ladder span.on,.sbar b,.punches i.on{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px}
  .coupon,.ticket,.panel,.bstub{border:1px solid CanvasText}
  .stamp{mix-blend-mode:normal}
  .tab:focus-visible{outline:2px solid Highlight;outline-offset:-4px}
}

/* ---- motion ----
   Motion confirms an action or keeps a thing in place while it changes. The one authored moment is the
   route: as the coupons are issued, each draws its red line from FROM to TO. Everything starts from its
   visible state, so no motion hides content when CSS animations or the script do not run. */
.btn,.btn-link,.ids a,.tab,.surprise,.nav a,.nav button,.icon-btn,.wallet-m,.acct-m,.suggest a,.hero-search button,.form button,.reveal,
.drop,.stub-link,.hero-alt,.more-stub a,.search input{
  transition:background-color .14s ease-out,border-color .14s ease-out,color .14s ease-out,filter .14s ease-out,
    opacity .14s ease-out,transform .08s ease-out}
:is(.btn,.btn-link,.ids a,.surprise,.form button,.hero-search button,.icon-btn,.wallet-m):active:not(:disabled){transform:translateY(1px)}
.c-poster{transition:opacity .22s ease-out}
.tk-stub{transition:background-color .25s ease-out}

/* Issue: coupons and result rows arrive in reading order, at most eight steps apart. New coupons from an
   htmx swap (More like this tabs) arrive the same way; a swap of the buttons inside a coupon does not. */
.coupon,.result{--d:0ms}
:is(.coupons,.results)>:nth-child(2){--d:35ms}
:is(.coupons,.results)>:nth-child(3){--d:70ms}
:is(.coupons,.results)>:nth-child(4){--d:105ms}
:is(.coupons,.results)>:nth-child(5){--d:140ms}
:is(.coupons,.results)>:nth-child(6){--d:175ms}
:is(.coupons,.results)>:nth-child(7){--d:210ms}
:is(.coupons,.results)>:nth-child(n+8){--d:245ms}
:is(.coupons,.results)>:is(.coupon,.result){animation:issue .42s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--d)}
/* Keyboard focus never lands on a coupon that has not arrived yet. */
:is(.coupons,.results):focus-within>:is(.coupon,.result){animation:none}
@keyframes issue{from{opacity:0;transform:translateY(10px)}}
/* The route: the origin dot, the line, then the destination dot. */
.route .leg-from::after{animation:dot .2s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--d) + .16s)}
.route .leg-from::before{animation:route .42s cubic-bezier(.45,0,.2,1) backwards;animation-delay:calc(var(--d) + .26s)}
.route .leg-to>.lbl::before{animation:dot .26s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--d) + .62s)}
@keyframes route{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dot{from{transform:scale(0)}}

/* Lists that open: the phone menu and search suggestions. */
.js .bar.open .nav{animation:drop .2s cubic-bezier(.16,1,.3,1)}
.suggest:not(:empty){animation:drop .16s cubic-bezier(.16,1,.3,1)}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}
@keyframes fade{from{opacity:0}}

/* Page to page: a short cross-fade, the bar stays where it is (on wide screens, where it never slides away), and a
   poster that was clicked grows into the poster of the title page. app.js names that poster. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.12s}
::view-transition-group(poster){animation-duration:.3s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
::view-transition-old(poster),::view-transition-new(poster){animation-duration:.3s;height:100%}
.ticket .tk-poster{view-transition-name:poster}
@media (min-width:981px){.bar{view-transition-name:bar}}

/* ---- lists: the picker on a title, the filters in a band, the list pages ---- */
.lp{margin-top:16px;max-width:520px}
.lp-sum{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;margin:0;border:1px solid var(--rule-ctl);border-radius:2px;background:var(--stock);
  color:var(--ink);list-style:none;font-stretch:78%;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px}
.lp-sum::-webkit-details-marker{display:none}
.lp-sum::after{content:"+";font-size:16px;line-height:1;margin-left:2px}
.lp[open]>.lp-sum::after{content:"–"}
.lp-sum:hover{border-color:var(--ink)}
.lp-sum:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.lp-form.form{max-width:none;margin:10px 0 0;padding:14px 16px 12px;background:var(--stock-2);border:1px solid var(--rule);border-radius:3px}
.lp-set{display:grid;gap:2px}
.form .lp-set legend{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink-2);margin-bottom:4px}
.form .lp-item{min-height:40px;gap:10px}
.lp-name{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
.lp-n{color:var(--ink-2);font-size:13px}
.form .lp-new,.form .list-new{display:grid;gap:6px}
/* Your services (/services): two groups of checkboxes on paper, then Save. */
.svc-form.form{max-width:920px;gap:20px}
.form .svc-set{background:var(--stock);border-radius:3px;padding:16px 20px 18px;box-shadow:0 1px 1px var(--shadow),inset 0 0 0 1px var(--edge);gap:6px}
.form .svc-set legend{float:left;width:100%;font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink-2);margin-bottom:2px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:2px 16px;margin-top:6px}
.form .svc-item{min-height:44px;gap:10px;font-weight:600}
.svc-form .actions-row{margin:0}
.svc-form .actions-row button{padding:0 28px}
.form .lp-new label,.form.list-new>label{font-weight:650;font-size:14.5px}
.lp-row{display:flex;gap:8px}
.lp-row input{flex:1;min-width:0}
.form .lp-row button{padding:0 16px;flex:none}
.js .lp-save{display:none}
.lp-foot{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.lp-status{color:var(--ink-2)}
.lp-page{max-width:560px}
.lp-page .lp{margin-top:0}
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:18px}
.flt{display:grid;gap:4px;min-width:0}
.flt label{font-stretch:70%;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--band-ink-2)}
.flt select{height:40px;max-width:min(280px,100%);padding:0 32px 0 12px;border:1px solid var(--rule-ctl);border-radius:2px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--stock) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f7a94' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;
  appearance:none}
.flt select:focus-visible{outline:3px solid #fff;outline-offset:1px}
.flt-go{height:40px;padding:0 16px;border:1px solid #fff;border-radius:3px;background:transparent;color:#fff;cursor:pointer;
  font:inherit;font-stretch:80%;font-weight:650;text-transform:uppercase;letter-spacing:.07em;font-size:13px}
.flt-go:hover{background:#fff;color:var(--navy-ink)}
.flt-link{align-self:center;color:#fff;font-weight:600;font-size:14.5px}
.into-note{margin-top:12px;padding:8px 12px;border-left:3px solid var(--red-on-navy);background:rgba(255,255,255,.08);color:var(--band-ink);font-size:15px;max-width:68ch}
.into-note a{color:#fff;font-weight:600;margin-left:6px}
.lists{display:grid;gap:10px;max-width:780px;margin:4px 0 8px}
.list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:center;padding:14px 18px;background:var(--stock);border-radius:3px;
  box-shadow:0 1px 1px var(--shadow),inset 0 0 0 1px var(--edge)}
.lr-name{font-weight:720;font-size:19px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.lr-name:hover{text-decoration:underline;text-decoration-color:var(--red)}
.lr-meta{grid-column:1;font-size:14px;color:var(--ink-2)}
.lr-go{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:14.5px;color:var(--ink)}
.form.list-new{max-width:560px;margin-top:24px}
.list-acts{margin:0 0 18px}
.list-settings{max-width:720px}
.list-settings>summary.p-head{margin:0;cursor:pointer;list-style:none;border-radius:3px}
.list-settings[open]>summary.p-head{border-radius:3px 3px 0 0}
.list-settings>summary::-webkit-details-marker{display:none}
.list-settings>summary::after{content:"+";color:var(--head-ink);font-size:18px;line-height:1}
.list-settings[open]>summary::after{content:"–"}
.list-settings .form{max-width:520px;margin:0 0 22px}
.li-rm{display:block;margin-top:6px;border-top:1px solid var(--rule)}
.li-rm .link-btn{font-size:14px;color:var(--ink-2)}
.add-form .rated{border:0;margin:18px 0 0;padding:0;min-width:0}
.add-form legend.rated-h{width:100%}
.add-row{padding:0;min-height:0}
.form .add-check,.add-check{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px 9px 16px;cursor:pointer;font-size:14px!important}
.add-check .bs-img{width:40px;height:60px}
.add-row:has(input:checked){box-shadow:inset 0 0 0 2px var(--red),0 1px 1px var(--shadow)}
/* Watch together: the invite panel is wider than a sign-in box, so the link fits. Copy and Share show
   only where the browser can do them (app.js removes hidden). */
.together .auth-box .form{max-width:none}
.lists+.together{margin-top:28px}
.together .lp-row input{font-size:14.5px}
.form button[data-copy][hidden],button[data-share][hidden]{display:none}
.add-bar{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;margin-top:20px;padding:12px 0;background:var(--ground);border-top:1px solid var(--rule)}
@media (max-width:640px){
  .flt{flex:1 1 140px}
  .flt select{max-width:none;width:100%}
  .list-row{grid-template-columns:1fr}
  .lr-go{grid-column:1;grid-row:auto;margin-top:6px}
  .tk-info .lp{grid-column:1/-1;grid-row:11}
}

/* Reduced motion: nothing moves through space. State still changes visibly: colours change with their
   transitions, and stamps fade in instead of landing. */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  :is(.coupons,.results)>:is(.coupon,.result),.route .leg-from::before,.route .leg-from::after,.route .leg-to>.lbl::before,
  .js .bar.open .nav,.suggest:not(:empty){animation:none}
  .bar{transition:none}
  :is(.coupon,.ticket,.bstub,.result):has(.act[data-rating="2"]) .stamps .st-loved,
  :is(.coupon,.ticket,.bstub,.result):has(.act[data-rating="1"]) .stamps .st-liked,
  :is(.coupon,.ticket,.bstub,.result):has(.act[data-rating="-1"]) .stamps .st-nope{animation:fade .2s ease-out}
  :is(.btn,.btn-link,.ids a,.surprise,.form button,.hero-search button,.icon-btn,.wallet-m):active:not(:disabled){transform:none}
  .coupon:hover .c-poster .np-img{transform:none}
  .p-dock{animation:none}
}