/* Brand (readkizmo, 2026-11-02): flat. Warm black, chalk text, teal for the brand (watchkizmo is teal; John: so you can tell the sites apart). Signed in, the highlight (--hi) is YOUR color (persons.color), set by app.js. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/manrope-latin.woff2) format('woff2')}
:root{
  --bg:#121212; --bg2:#1b1b1c; --bg3:#242426; --line:#2a2a2c; --line2:#3a3a3d;
  --fg:#f4f2ee; --fg2:#b8b4ac; --fg3:#958f88;   /* fg3 lifted from #8a867f: 4.8:1 on raised cards (accessibility review, 2026-10-21) */
  --brand:#2ec4a6; --on-brand:#121212;
  --hi:var(--brand); --on-hi:var(--on-brand); --hi-text:#7fe0cd;   /* highlight: teal signed out, the person's color signed in */
  --p:var(--hi); --p2:var(--hi-text); --t:var(--hi); --t2:var(--hi-text); --warn:#f2b33d; --bad:#ef5350; --good:#4caf7a;
  --grad:var(--hi);
  --r:14px; --r2:22px; --tap:40px;   /* 48 felt plump (John, 2026-10-19); 40 still clears touch guidelines' minimums */
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
.hi-scope{--p:var(--hi); --p2:var(--hi-text); --t:var(--hi); --t2:var(--hi-text); --grad:var(--hi)}   /* re-derive the aliases where --hi is overridden locally (setup color preview) */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{min-height:100dvh}
a{color:var(--t2)}
button{font:inherit;color:inherit}
input,textarea,select{font:inherit;color:var(--fg)}
img{display:block}
::selection{background:color-mix(in srgb,var(--p) 40%,transparent)}
.boot{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--fg3)}
.boot-sub{font-size:13px;letter-spacing:.2em;text-transform:uppercase}

/* layout */
.shell{display:flex;flex-direction:column;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;background:rgba(18,18,18,.88);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line);padding-top:var(--sat)}
.topbar-in{display:flex;align-items:center;gap:14px;padding:8px 16px;max-width:1280px;margin:0 auto;width:100%}
.brand{display:flex;align-items:center;gap:10px;height:44px;flex-shrink:0;cursor:pointer}
.brand .wm{font-size:30px}
/* Wordmark: lowercase, "watch" quiet, "kizmo" bold, a solid bar over the final o (--bar = the signed-in person's color, else teal). */
.wm{--bar:var(--brand);display:inline-block;white-space:nowrap;font-weight:800;letter-spacing:-.04em;line-height:1;padding-top:.22em;color:var(--fg)}
.wm .w{font-weight:500;color:var(--brand)}   /* "read" in readkizmo's teal, as "watch" is in watchkizmo's coral (John, 2026-11-02) */
/* The final "o" and its bar are drawn as one picture (two masks over the same box), so they stay centered on every screen; a
   typed "o" under a separate bar box drifted up to a pixel on 1x screens. The real "o" stays for copy/paste but is invisible.
   Glyph = Manrope ExtraBold "o" outline (advance 1254, line box 2000 units, baseline 1766); bar = .07em in from each side, .13em down, .1em tall. */
.wm .o{position:relative;display:inline-block;letter-spacing:0;-webkit-text-fill-color:transparent}
.wm .o::before,.wm .o::after{content:"";position:absolute;inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.wm .o::before{background:var(--bar);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1254 2000' preserveAspectRatio='none'%3E%3Crect x='140' y='260' width='974' height='200'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1254 2000' preserveAspectRatio='none'%3E%3Crect x='140' y='260' width='974' height='200'/%3E%3C/svg%3E")}
.wm .o::after{background:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1254 2000' preserveAspectRatio='none'%3E%3Cpath d='M626 1796Q463 1796 340 1723Q217 1650 148.5 1521.5Q80 1393 80 1226Q80 1057 150 928.5Q220 800 343 728Q466 656 626 656Q789 656 912.5 729Q1036 802 1105 930.5Q1174 1059 1174 1226Q1174 1394 1104.5 1522.5Q1035 1651 911.5 1723.5Q788 1796 626 1796ZM626 1542Q757 1542 821.5 1453.5Q886 1365 886 1226Q886 1082 820.5 996Q755 910 626 910Q537 910 480 950Q423 990 395.5 1061Q368 1132 368 1226Q368 1371 433.5 1456.5Q499 1542 626 1542Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1254 2000' preserveAspectRatio='none'%3E%3Cpath d='M626 1796Q463 1796 340 1723Q217 1650 148.5 1521.5Q80 1393 80 1226Q80 1057 150 928.5Q220 800 343 728Q466 656 626 656Q789 656 912.5 729Q1036 802 1105 930.5Q1174 1059 1174 1226Q1174 1394 1104.5 1522.5Q1035 1651 911.5 1723.5Q788 1796 626 1796ZM626 1542Q757 1542 821.5 1453.5Q886 1365 886 1226Q886 1082 820.5 996Q755 910 626 910Q537 910 480 950Q423 990 395.5 1061Q368 1132 368 1226Q368 1371 433.5 1456.5Q499 1542 626 1542Z'/%3E%3C/svg%3E")}
.wm.compact .w{display:none}
.wm.lg{font-size:56px}
.tabs{display:flex;gap:4px;margin-left:auto}
.tab{border:0;background:transparent;color:var(--fg2);padding:0 11px;height:40px;border-radius:12px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.tab svg{width:20px;height:20px}
.tab.on{background:var(--bg3);color:var(--fg)}
.tab.on svg{color:var(--hi-text)}
.tab:active{transform:scale(.97)}
.fbbtn{flex:none;width:38px;height:38px;border-radius:12px;border:0;background:transparent;color:var(--fg3);display:flex;align-items:center;justify-content:center;cursor:pointer;margin-left:2px}
@media (hover:hover){.fbbtn:hover{background:var(--bg3);color:var(--fg)}}
.fbbtn svg{width:21px;height:21px}
.main{flex:1;max-width:1280px;margin:0 auto;width:100%;padding:16px 16px calc(24px + var(--sab))}
@media (max-width:760px){
  /* backdrop-filter would make the header the containing block for the fixed tab bar */
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .tabs{position:fixed;left:0;right:0;bottom:0;margin:0;justify-content:space-around;background:rgba(18,18,18,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--sab));z-index:30}
  .tab{flex-direction:column;gap:2px;font-size:11px;height:52px;padding:0 8px;flex:1}
  .tab svg{width:22px;height:22px}
  .main{padding-bottom:calc(90px + var(--sab))}
  .brand .wm .w{display:none}   /* phones: "kizmō" only */
  .fbbtn{margin-left:auto}   /* the tabs moved to the bottom bar, so the bubble takes the top-right corner */
  .brand .wm{font-size:28px}
}

/* generic */
h1,h2,h3{margin:0 0 8px;font-weight:700;letter-spacing:-.01em}
h1{font-size:28px;margin-top:12px}   /* page titles get room below the top bar (John, 2026-10-23: People sat too close to it) */
h2{font-size:20px}
h3{font-size:16px}
.muted{color:var(--fg2)}
.dim{color:var(--fg3)}
.small{font-size:13px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:18px}
.boot .card{color:var(--fg)}   /* sign-in, setup, welcome: headings were inheriting .boot's dim gray */
.card + .card{margin-top:14px}
.picks > .card,.grid > .card,.stats > .card{margin-top:0}
.btn{border:1px solid var(--line2);background:var(--bg3);border-radius:14px;height:var(--tap);padding:0 18px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;user-select:none}
.btn:active{transform:scale(.98);filter:brightness(1.1)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.primary:disabled{background:var(--bg3);color:var(--fg3);opacity:1}
.btn.primary{background:var(--hi);border-color:transparent;color:var(--on-hi);font-weight:800}
.btn.ghost{background:transparent}
.btn.hiline{border-color:var(--hi);color:var(--fg);background:color-mix(in srgb,var(--hi) 14%,var(--bg3))}.btn.hiline svg{color:var(--hi-text)}   /* a secondary action in the person's color */
@media (hover:hover){.btn:not(.primary):not(.hiline):not(.danger):hover{border-color:var(--fg3)}.btn.primary:hover{filter:brightness(1.08)}.btn.hiline:hover{border-color:var(--hi);background:color-mix(in srgb,var(--hi) 22%,var(--bg3))}}
.btn.danger{color:#fca5a5;border-color:#5b2a2a}
.btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.lg{height:48px;padding:0 22px;font-size:17px;border-radius:15px}
.btn svg{width:18px;height:18px}
.iconbtn{width:var(--tap);height:var(--tap);padding:0;border-radius:50%}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line2);background:var(--bg3);color:var(--fg);border-radius:999px;height:36px;padding:0 14px;font-size:15px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;user-select:none;transition:background .12s,border-color .12s}
.chip.on{background:color-mix(in srgb,var(--hi) 18%,transparent);border-color:var(--hi);color:var(--fg)}
.chip.on.t{background:color-mix(in srgb,var(--t) 18%,transparent);border-color:var(--t2)}
.chip.neg.on{background:rgba(239,68,68,.18);border-color:#f87171}
.chip.sm{height:30px;padding:0 11px;font-size:13px}
.chip.wrap{height:auto;min-height:36px;padding:7px 14px;white-space:normal;line-height:1.35;border-radius:14px;text-align:left;align-items:flex-start}
.chip.wrap span{flex-shrink:0;margin-right:2px}
.chip:active{transform:scale(.97)}
.seg{display:inline-flex;background:var(--bg3);border:1px solid var(--line2);border-radius:14px;padding:3px;gap:3px;height:44px}
.seg button{border:0;background:transparent;color:var(--fg2);height:36px;min-width:80px;padding:0 14px;border-radius:11px;font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer}
.seg button.on{background:var(--hi);color:var(--on-hi)}
.seg.big{height:auto;padding:4px;border-radius:16px}
.seg.big button{height:42px;min-width:100px;font-size:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--fg2);font-weight:600;letter-spacing:.02em}
.input,textarea.input{background:var(--bg);border:1px solid var(--line2);border-radius:14px;min-height:var(--tap);padding:8px 12px;width:100%;outline:none;font-size:16px}   /* 16px: iPhones zoom into smaller fields */
.input:focus{border-color:var(--p2);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 20%,transparent)}
textarea.input{resize:vertical;min-height:84px;line-height:1.4}
select.input{appearance:none;-webkit-appearance:none}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;min-height:var(--tap)}
.switch i{width:50px;height:30px;border-radius:999px;background:var(--line2);position:relative;transition:background .15s;flex-shrink:0}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on i{background:var(--t)}
.switch.on i::after{left:23px}
.range{display:flex;align-items:center;gap:12px}
.range input[type=range]{flex:1;accent-color:var(--p2);height:44px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--t2);animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--sab));transform:translateX(-50%);background:#0d1118;border:1px solid var(--line2);color:var(--fg);padding:12px 18px;border-radius:14px;z-index:100;box-shadow:var(--shadow);max-width:90vw;font-weight:600}
@media (max-width:760px){.toast{bottom:calc(96px + var(--sab))}}
.toast.err{border-color:#7f1d1d;color:#fecaca}
.toastwrap{display:contents}
.toast{display:flex;align-items:center;gap:14px;max-width:min(92vw,520px)}
.toastact{background:none;border:0;color:var(--hi-text,var(--brand));font-weight:800;font-size:15px;cursor:pointer;padding:6px 4px;white-space:nowrap}
.sheet:focus{outline:none}
/* one keyboard focus ring everywhere, in the readable form of the person's color (some person colors are too dark for a ring) */
:focus-visible{outline:2px solid var(--hi-text);outline-offset:2px}
.input:focus-visible,.sheet:focus-visible{outline:none}
.banner{background:var(--bg2);border:1px solid var(--line2);color:var(--fg);border-radius:var(--r);padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner.err{border-color:color-mix(in srgb,var(--bad) 70%,transparent);background:color-mix(in srgb,var(--bad) 12%,var(--bg2))}
.banner.ok{border-color:color-mix(in srgb,var(--good) 55%,transparent);background:color-mix(in srgb,var(--good) 10%,var(--bg2))}
.banner-title{display:block;margin-bottom:2px}
.pwwrap{position:relative;display:block;width:100%}
.pwwrap .input{padding-right:52px}
.pweye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--fg3);display:flex;align-items:center;justify-content:center;cursor:pointer}
@media (hover:hover){.pweye:hover{color:var(--fg)}}
.pweye:focus-visible{outline:2px solid var(--hi)}
.pweye svg{width:22px;height:22px}
.banner.err .banner-title{color:#ff8a80}
.banner.ok .banner-title{color:#86efac}
.banner .btn{height:38px}
.empty{color:var(--fg3);text-align:center;padding:40px 10px}
.hr{height:1px;background:var(--line);margin:14px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv dt{color:var(--fg3)}
.kv dd{margin:0}

/* poster grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (min-width:1024px){.grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}}
.pcard{background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:pointer;position:relative;display:flex;flex-direction:column;transition:transform .12s}
.pcard:active{transform:scale(.98)}
.pcard .poster{aspect-ratio:2/3;background:var(--bg3) center/cover no-repeat;position:relative}
.pcard .poster img{width:100%;height:100%;object-fit:cover}
/* title cards: the poster stand-in when Kizmo runs on its backup catalog (ui.Poster); tones are deep, so text is always chalk */
.tcard{container-type:size;width:100%;height:100%;background:var(--tc);display:flex;flex-direction:column;justify-content:flex-end;padding:9%;box-sizing:border-box;position:relative;overflow:hidden;text-align:left}
.tcard .tbar{flex:none;width:24%;height:max(2px,2.2cqw);margin-bottom:6cqw;background:var(--brand);border-radius:1px}
.tcard .tt{font-weight:800;color:#f4f2ee;font-size:clamp(10px,12.5cqw,30px);line-height:1.08;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.tcard .tm{color:rgba(244,242,238,.62);font-size:clamp(8px,7cqw,14px);font-weight:600;margin-top:5cqw}
.tcard .ti{display:none;font-weight:800;color:#f4f2ee;font-size:45cqw;line-height:1;margin:auto}
@container (max-width:70px){.tcard .tt,.tcard .tm,.tcard .tbar{display:none}.tcard .ti{display:block}}
.pcard .pbody{padding:10px 10px 12px}
.pcard .ptitle{font-weight:700;font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .pmeta{color:var(--fg3);font-size:12px;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badges{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:4px;pointer-events:none}
.badge{background:rgba(13,17,24,.82);backdrop-filter:blur(6px);border-radius:8px;padding:3px 7px;font-size:12px;font-weight:700;display:inline-flex;gap:4px;align-items:center}
.badge.tv{color:var(--fg2)}
.badge.mv{color:var(--p2)}
.badge.seen{color:var(--good)}
.badge.wl{color:#fcd34d}
.rpill{display:inline-flex;gap:2px}
.rdot{width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;color:#121212}

/* pick cards */
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}   /* auto-fit: one card uses the width instead of leaving half the iPad empty (review 3) */
@media (max-width:420px){.picks{grid-template-columns:1fr}}
.pick{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;display:flex;flex-direction:column;position:relative}
.pick .top{display:flex;gap:14px;padding:14px 14px 0}
.pick .po{width:118px;flex-shrink:0;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--bg3);cursor:pointer}
.pick .po img{width:100%;height:100%;object-fit:cover}
.pick .ptitle{font-size:19px;font-weight:800;line-height:1.2;cursor:pointer}
.pick .pyr{color:var(--fg3);font-weight:600;font-size:14px}
.pick .rank{position:absolute;top:10px;right:12px;background:var(--grad);color:var(--on-hi);font-weight:900;border-radius:10px;padding:3px 9px;font-size:13px}
.pick .fit{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--fg2);margin-top:4px}
.fitbar{width:70px;height:6px;border-radius:4px;background:var(--line2);overflow:hidden}
.fitbar i{display:block;height:100%;background:var(--grad)}
.pick .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.pick .pitch{font-weight:700;font-size:16px}
.pick .why{color:var(--fg2)}
.pick .heads{color:#fcd34d;font-size:14px}
.pick .leans{font-size:13px;color:var(--fg3);display:flex;align-items:center;gap:6px}
.pick .acts{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap}
.pick .top + .acts{margin-top:14px}
.donepick{display:flex;gap:10px;flex-wrap:wrap}.donepick .btn{flex:1 1 200px}   /* Watching cards: buttons right under the poster need the same 14px as the card's edges (John, 2026-10-21) */
/* card buttons are sized to their words, not stretched across the card (John, 2026-10-21: "check button sizes"); the round
   icon button (never suggest, stop tracking) sits at the right */
.pick .rank ~ .top .ptitle::before{content:"";float:right;width:118px;height:1.1em}   /* the corner badge ("#1 · 54%", "Most recent") never sits on the title's first line; later lines use the full width */
.pick .acts .btn{flex:0 0 auto;padding:0 14px}
.pick .acts .iconbtn{flex:0 0 var(--tap);width:var(--tap);padding:0;margin-left:auto}
.scores{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.sc{background:var(--bg3);border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700;color:var(--fg2);display:inline-flex;gap:5px;align-items:center}
.sc b{color:var(--fg)}
.sc.imdb b{color:#f5c518}.sc.rt b{color:#ff5a36}.sc.mc b{color:#66cc33}.sc.tmdb b{color:#01d277}
a.sc{text-decoration:none;cursor:pointer}
@media (hover:hover){a.sc:hover{border-color:var(--fg3);color:var(--fg)}}
.provs{display:flex;gap:6px;flex-wrap:wrap}
.prov{background:color-mix(in srgb,var(--t) 12%,transparent);border:1px solid color-mix(in srgb,var(--t) 35%,transparent);color:var(--t2);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700}
.prov.rent{background:transparent;color:var(--fg3);border-color:var(--line2)}

/* sheet / modal */
.overlay{position:fixed;inset:0;background:rgba(5,8,12,.7);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{overflow-x:hidden;background:var(--bg);width:100%;max-width:980px;max-height:94dvh;border-radius:24px 24px 0 0;overflow:auto;position:relative;animation:up .22s cubic-bezier(.2,.8,.2,1);border:1px solid var(--line);border-bottom:0;-webkit-overflow-scrolling:touch}
@media (min-width:700px){.overlay{align-items:center;padding:20px}.sheet{border-radius:24px;max-height:92dvh;border-bottom:1px solid var(--line)}}   /* iPads too: centered, not stuck to the bottom half */
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet .close{position:absolute;top:12px;right:12px;z-index:3;background:rgba(13,17,24,.7);backdrop-filter:blur(8px);border:1px solid var(--line2)}
.hero{height:260px;background:var(--bg3) center/cover no-repeat;position:relative}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(18,18,18,.1),rgba(18,18,18,.55) 60%,var(--bg))}
.dhead{display:flex;gap:18px;padding:0 22px;margin-top:-110px;position:relative;z-index:2;align-items:flex-end}
.dhead .po{width:150px;flex-shrink:0;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:var(--bg3);box-shadow:var(--shadow)}
.dhead .po img{width:100%;height:100%;object-fit:cover}
.dhead h2{font-size:26px;line-height:1.15}
.dbody{padding:18px 22px 26px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:900px){.dbody{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.section{display:flex;flex-direction:column;gap:8px}
.section h3{color:var(--fg2);font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0}
.rate{display:flex;gap:6px;flex-wrap:wrap}
.rate button{width:40px;height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--bg3);font-weight:800;font-size:15px;cursor:pointer}
.rate button.on{color:#121212;border-color:transparent}
.cast{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.cast div{min-width:110px;font-size:13px}
.cast b{display:block}
.simrow{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.simrow .pcard{min-width:120px;width:120px}
.buzz{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.buzz .verdict{font-size:16px;line-height:1.5}
.buzz .lbl{font-size:12px;color:var(--fg3);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.buzz ul{margin:0;padding-left:18px}
.srcs a{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* questions */
.qcard{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:16px;display:flex;flex-direction:column;gap:10px}
.qcard .q{font-weight:700;font-size:17px}

/* history */
.hrow{display:flex;gap:12px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:10px;cursor:pointer}
.hrow .po{width:52px;aspect-ratio:2/3;border-radius:8px;background:var(--bg3);overflow:hidden;flex-shrink:0}
.hrow .po img{width:100%;height:100%;object-fit:cover}
.hrow .t{font-weight:700}
.hlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat .n{font-size:28px;font-weight:800}
.stat .l{color:var(--fg3);font-size:13px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl td,table.tbl th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
table.tbl th{color:var(--fg3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.tastecard{display:flex;flex-direction:column;gap:12px}
.pname{display:flex;align-items:center;gap:10px}
.pname .dot{width:14px;height:14px;border-radius:50%}
.ans{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;font-size:14px}
.ans .q{color:var(--fg3)}
.sticky-act{position:sticky;bottom:calc(10px + var(--sab));z-index:5;display:flex;justify-content:center;pointer-events:none}
.sticky-act .btn{pointer-events:auto;box-shadow:var(--shadow)}
@media (max-width:760px){.sticky-act{bottom:calc(84px + var(--sab))}}
.fade-in{animation:fade .25s}
.logo-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 10px}
.logo-hero img{width:min(260px,60vw)}
.logo-hero .tag{color:var(--fg2);font-size:15px}
.input svg{width:20px;height:20px;flex-shrink:0;color:var(--fg3)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* rapid rate */
.rapid{display:flex;gap:22px;align-items:flex-start}
.rapid .rpo{width:min(260px,34vw);flex-shrink:0;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--bg3);box-shadow:var(--shadow)}
.rapid .rpo img{width:100%;height:100%;object-fit:cover}
.rapid .rinfo{flex:1;min-width:0}
.rapid .rtitle{font-size:26px;font-weight:800;line-height:1.15}
.rapid .rcast{color:var(--fg);font-weight:600;margin-top:6px;min-height:46px;line-height:1.45}
.rapid .rov{color:var(--fg2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 14px}
.rate.big button{width:46px;height:46px;font-size:17px;border-radius:11px}   /* was 52x56; trimmed with the action buttons (John, 2026-10-21: "pretty plump") */
.rapid .ractions{gap:8px;margin-top:14px;flex-wrap:wrap}
.rapid .ractions .btn.marked{border-color:#fcd34d;color:#fcd34d}
.rapid .ractions .undo{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rate.big button:active{background:var(--c);color:#121212;border-color:transparent}
/* Rapid Rate (review, 2026-10-21): one row of 10 where it fits, 5 x 2 on phones, anchors under the ends; on a phone the poster sits
   beside the title so the rating row and "Haven't seen it" are on screen without scrolling */
.rate.big{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;max-width:560px}
.rate.big button{width:auto}
.ranchor{display:flex;justify-content:space-between;max-width:560px;font-size:12px;color:var(--fg3);margin-top:4px}
.rprog{height:4px;border-radius:2px;background:var(--bg3);margin:-4px 0 14px;overflow:hidden}
.rprog i{display:block;height:100%;background:var(--hi);transition:width .2s}
@media (hover:none){.kbdhint{display:none}}
@media (max-width:820px){.rate.big{grid-template-columns:repeat(5,minmax(0,1fr));max-width:300px}.ranchor{max-width:300px}}
@media (max-width:640px){.rapid{gap:14px}.rapid .rpo{width:27vw;max-width:118px}.rapid .rinfo{min-width:0}.rapid .rtitle{font-size:20px}.rapid .rcast{min-height:0;font-size:14px}.rapid .rov{-webkit-line-clamp:2;font-size:14px;margin:6px 0 10px}.rate.big button{height:44px;font-size:16px}}

/* question option markers: circle = pick one, square = pick any */
.qhint{font-size:12px;color:var(--fg3);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding-top:4px}
.chip .mark{width:16px;height:16px;border:2px solid var(--fg3);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:-4px}
.chip.single .mark{border-radius:50%}
.chip.multi .mark{border-radius:4px}
.chip.single .mark.on{border-color:currentColor;background:radial-gradient(circle,currentColor 0 4px,transparent 5px)}
.chip.multi .mark.on{border-color:#fff;background:#fff}
.chip.multi .mark.on svg{width:12px;height:12px;color:#121212;stroke-width:3}

/* small inline icons inside text */
.ico{display:inline-flex;align-items:center;vertical-align:-3px}
.ico svg{width:16px;height:16px}
/* Kizmo (the assistant mark) breathes gently while it thinks */
.cc-think{display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0}
.cc-think img{animation:ccpulse 1.8s ease-in-out infinite}
@keyframes ccpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.92);opacity:.7}}
@media (prefers-reduced-motion:reduce){.cc-think img{animation:none}}
/* person color picker */
.cpick{display:flex;flex-direction:column;gap:8px}
.cplabel{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);margin-top:6px}
.swgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:400px}
@media (max-width:480px){.swgrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:320px}}
.sw{aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;min-width:0;transition:transform .1s}
.sw:active{transform:scale(.92)}
.sw.ring{background:transparent;border:3px solid}
.sw.same{border-style:dashed;display:flex;align-items:center;justify-content:center}
.sw.same span{font-size:9px;font-weight:700;color:var(--fg2)}
.sw.sel{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--fg)}
.sw:disabled{opacity:.5;cursor:default}
.swdef{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;margin-bottom:10px;color:var(--fg);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.swdef .sw{width:40px;flex:none;pointer-events:none}
.swdef:disabled{opacity:.5;cursor:default}
.dot.person{box-shadow:inset 0 0 0 2px var(--ring)}
/* People: avatars, the Pod invite code, person rows */
.kav{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.kcode{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.kqr{background:#fff;border:0;border-radius:14px;padding:0;width:200px;height:200px;max-width:100%;flex-shrink:0;cursor:zoom-in}
.kqr svg{width:100%;height:100%;display:block}
.kcodetxt{font-weight:800;font-size:30px;letter-spacing:.18em;line-height:1;overflow-wrap:anywhere}
.krow{display:flex;align-items:center;gap:12px;padding:12px 0}
.card .krow + .krow{border-top:1px solid var(--line)}
.card.krow{padding:12px 16px}
.kbtn{width:100%;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.kradio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);flex-shrink:0}
.kradio.on{border-color:var(--hi);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 12px var(--hi)}

/* Taste profile: what you love / usually not for you. Plain lists (not chips), so nothing looks tappable or closable. */
.tastelists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 32px}
.tlist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.tlist li{position:relative;padding-left:20px;line-height:1.4;font-size:14px}
.tlist li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;border-radius:50%}
.tlist.love li::before{background:var(--mk)}
.tlist.meh li{color:var(--fg2)}
.tlist.meh li::before{width:10px;height:2px;border-radius:1px;top:.68em;background:var(--fg3)}

/* Episode grid (Watching): marked = filled, seen by some of the viewers = dashed */
.chip.ep{min-width:52px;justify-content:center}
.chip.ep.part{border-style:dashed;border-color:var(--hi)}
.chip.ep{position:relative}.chip.ep:has(.epdots){padding-bottom:13px}
.epdots{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:3px}.epdots i{width:6px;height:6px;border-radius:50%;border:1.5px solid;box-sizing:border-box}

/* Welcome ("what first?") choices */
.choice{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--bg3);border:1px solid var(--line2);border-radius:var(--r);padding:14px 16px;color:var(--fg);font:inherit;cursor:pointer}
@media (hover:hover){.choice:hover{border-color:var(--fg3)}}
.choice.rec{border-color:var(--hi);background:color-mix(in srgb,var(--hi) 10%,var(--bg3))}
.choice-ico svg{width:26px;height:26px;color:var(--hi-text)}
.choice-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.choice-txt b{font-size:17px}
.choice-badge{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hi-text)}
.choice-go{font-size:26px;color:var(--fg3)}

/* checkboxes: ticked in the highlight color (teal when signed out), easier to spot on the dark theme */
input[type=checkbox]{accent-color:var(--hi)}

/* full-screen QR for scanning: big, white, nothing else next to it */
.qrbig{position:fixed;inset:0;z-index:100;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));cursor:zoom-out}
.qrbig-code{width:min(82vw,62vh,520px);aspect-ratio:1}
.qrbig-code svg{width:100%;height:100%;display:block}
.qrbig-cap{display:flex;flex-direction:column;align-items:center;gap:4px;color:#121212;text-align:center;font-size:15px}
.qrbig-cap b{font-size:18px}
.qrbig-cap span{letter-spacing:.04em}
.qrbig-cap .dim{color:#555;letter-spacing:0;font-size:13px}
.partyqr{background:#fff;border:0;border-radius:16px;padding:0;display:inline-block;cursor:zoom-in;line-height:0;width:200px;height:200px;max-width:100%}
.partyqr svg{width:100%;height:100%;display:block}

/* Watch sheet: one big button per service (yours first) */
.watchbtn{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r);background:var(--bg3);color:var(--fg);text-decoration:none}
@media (hover:hover){.watchbtn:hover{border-color:var(--fg3)}}
.watchbtn.mine{border-color:var(--hi);background:color-mix(in srgb,var(--hi) 10%,var(--bg3))}
.watchbtn img{width:32px;height:32px;border-radius:8px;flex:none}
.wb-ico{width:32px;height:32px;border-radius:8px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex:none}
.wb-ico svg{width:16px;height:16px}
.wb-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wb-go{color:var(--fg3);font-size:18px}

/* switches (Settings → Sharing your ratings) */
.swrow{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;padding:12px 0;cursor:pointer}
.swrow + .swrow{border-top:1px solid var(--line)}
.swrow:disabled{opacity:.5;cursor:default}
.swtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.swrow .sw{flex:none;width:46px;height:28px;border-radius:999px;background:var(--bg3);border:1px solid var(--line2);position:relative;transition:background .15s;aspect-ratio:auto}   /* scoped: .sw is also the color swatch (they collided, 2026-10-21) */
.swrow .sw span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fg3);transition:transform .15s,background .15s}
.swrow .sw.on{background:var(--hi);border-color:transparent}.swrow .sw.on span{transform:translateX(18px);background:var(--on-hi)}
.swrow:focus-visible{outline:none}.swrow:focus-visible .sw{outline:2px solid var(--hi-text);outline-offset:2px}
.swrow b{color:var(--fg)}
/* shared ratings: someone's list, and the people strip on a title */
.srow{display:flex;align-items:center;gap:12px;padding:8px 0}
.srow + .srow{border-top:1px solid var(--line)}
.spo{flex:none;width:36px;height:54px;border-radius:6px;overflow:hidden;background:var(--bg3)}
.spo img{width:100%;height:100%;object-fit:cover;display:block}
.stext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sscore{flex:none;min-width:34px;height:30px;padding:0 8px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;border:1px solid}
.sscore.sm{min-width:26px;height:22px;padding:0 6px;border-radius:7px;font-size:13px}
.pchip{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:38px;padding:0 6px 0 4px;border-radius:999px;border:1px solid var(--line2);background:var(--bg3);color:inherit;font:inherit;font-weight:600;cursor:pointer}
.pchip .clip{max-width:120px}
@media (hover:hover){.pchip:hover,.srow.kbtn:hover{border-color:var(--fg3)}}

/* Tonight (review, 2026-10-21): chip icons stay small and labels on one line; on phones the first 8 moods show, "More moods" opens
   the rest; quick adjustments under the shortlist; the loading panel's placeholder cards */
.chip svg{width:16px;height:16px;flex:none}
.chip{white-space:nowrap}
.chips.moods .moretog{display:none}
@media (max-width:760px){.chips.moods .extra{display:none}.chips.moods.all .extra{display:inline-flex}.chips.moods .moretog{display:inline-flex}}
.adjust{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:16px}
.pickload{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r2);padding:18px 16px}
.pick.skel .po{background:var(--bg3)}
.pick.skel i{display:block;height:14px;border-radius:7px;background:var(--bg3);margin:6px 0 12px;width:80%}
.pick.skel{min-height:190px}
@media (prefers-reduced-motion: no-preference){.pick.skel .po,.pick.skel i{animation:skel 1.4s ease-in-out infinite}}
@keyframes skel{50%{opacity:.45}}

/* title page (review, 2026-10-21): the watched status is a quiet badge; research mood tags aren't chips; facts are a real list */
.wbadge{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:700;color:var(--fg3)}
.wbadge.on{color:var(--good)}
.wbadge svg{width:14px;height:14px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tagpill{font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--hi) 16%,transparent);color:var(--hi-text)}
dl.kv{margin:0}
dl.kv dd{margin:0}
.gapask{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--bg2)}
.gapask span{font-weight:700;margin-right:4px}
.linkbtn{background:none;border:0;padding:0;color:var(--hi-text);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pitchlist{list-style:none;margin:0;padding:0;max-width:440px;width:100%;display:grid;gap:8px}
.pitchlist li{position:relative;padding:0 0 0 18px;color:var(--fg2);font-size:15px;line-height:1.45}.pitchlist li::before{content:'';position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.pitchlist b{color:var(--fg)}
.danger-zone{border-color:#5b2a2a}
.danger-zone h2{color:#fca5a5}

/* review 2 (2026-10-21) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
label.btn:focus-within{outline:2px solid var(--hi-text);outline-offset:2px}
.badge svg{width:14px;height:14px;flex:none}
button.switch{background:none;border:0;color:inherit;font:inherit;padding:0;cursor:pointer;text-align:left}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:none}
@media (max-width:760px){.dbody.partygrid{grid-template-columns:minmax(0,1fr)!important}}
@media (min-width:761px){.dbody.partygrid{grid-template-columns:auto minmax(0,1fr)}}
/* streaming services picker (2026-10-21): popular first, the rest scroll in their own box */
.svcmore{max-height:260px;overflow:auto;padding:2px;border:1px solid var(--line);border-radius:12px;padding:10px}
.chip .ck{font-weight:800;margin-right:4px}
.section>.linkbtn{align-self:flex-start;min-height:32px}
.seg.stack{flex-wrap:wrap;height:auto;overflow:visible}
@media (max-width:520px){.seg.stack{display:flex;flex-direction:column;width:100%}.seg.stack button{width:100%}}
/* folded Settings sections (round-two decision 8) */
details.fold{border-top:1px solid var(--line);padding-top:6px}
details.fold>summary{cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--fg)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'';width:9px;height:9px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .15s}
details.fold[open]>summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.dangerrow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.dangerrow:first-of-type{border-top:0}
@media (max-width:520px){.dangerrow{flex-direction:column;align-items:flex-start}}
.prov.mine{border-color:var(--hi);color:var(--hi-text);background:color-mix(in srgb,var(--hi) 12%,transparent)}
/* a small "more actions" menu (pick cards) */
.mmenu{position:relative;display:inline-flex}
.mmenu-list{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;min-width:200px;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.mmenu-list button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--fg);font:inherit;font-weight:600;text-align:left;cursor:pointer}
@media (hover:hover){.mmenu-list button:hover{background:var(--bg3)}}
.mmenu-list button:focus-visible{background:var(--bg3)}
.mmenu-list button.danger{color:#fca5a5}
.mmenu-list svg{width:18px;height:18px;flex:none}
.picks.stale{opacity:.45;pointer-events:none;transition:opacity .2s}
h2[tabindex="-1"]:focus{outline:none}
.adjust{margin:0 0 14px;justify-content:flex-start}
.toastx{background:none;border:0;color:var(--fg3);font-size:15px;cursor:pointer;min-width:32px;min-height:32px;border-radius:8px}
@media (max-width:760px){.toast{left:16px;right:16px;transform:none;max-width:none;padding:10px 14px}}
.chipx{background:none;border:0;color:inherit;opacity:.75;margin-left:4px;cursor:pointer;min-width:28px;min-height:28px;border-radius:8px;font:inherit}
.ph-only{display:none}
@media (max-width:640px){.ph-only{display:inline}.ph-hide{display:none}.rapid .ractions{flex-wrap:nowrap}.rapid .ractions .btn{padding:0 10px;min-width:0}}
.rapid .undo{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Watching, list view */
.wlist{display:flex;flex-direction:column;gap:8px}
.wrow{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:8px 12px 8px 8px}
.wrow-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:0}
.wrow-po{width:44px;flex:none;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:var(--bg3)}
.wrow-po img{width:100%;height:100%;object-fit:cover}
.wrow-txt{display:flex;flex-direction:column;min-width:0}
.wrow-txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.browsebar{flex-wrap:wrap}.browsebar .bsearch{flex:1 1 100%}}
.pick .acts .btn.sq{flex:0 0 var(--tap);width:var(--tap);padding:0}
.pick .acts .mmenu{margin-left:auto}
.pick .acts .mmenu .iconbtn{margin-left:0}
/* title page on phones: the title gets the full width under a smaller poster (long titles wrapped to 8 lines beside it) */
@media (max-width:560px){.dhead{flex-wrap:wrap;margin-top:-90px;gap:12px}.dhead .po{width:100px}.dhead .grow{flex:1 1 100%;min-width:0}.dhead h2{font-size:23px}.sc{white-space:nowrap}}
/* one label style (review 2: ALL-CAPS and Title Case labels side by side): control labels read like field labels */
.cplabel{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--fg2)}
.qhint{text-transform:none;letter-spacing:0;font-weight:600}
/* non-text contrast, 3:1 (WCAG 1.4.11; review 2): text-field borders and the selected chip's border */
:root{--field-line:#6f6f73}
.input,textarea.input,select.input{border-color:var(--field-line)}
.chip.on{border-color:var(--hi-text)}
.epdots.ini i{width:12px;height:12px;font-size:8px;font-weight:800;font-style:normal;line-height:9px;text-align:center}.chip.ep:has(.epdots.ini){padding-bottom:17px}

/* ===== One control system (John, 2026-10-21: "a lot of plump buttons", "Pick for me" bigger than the rest, the name capsule
   far rounder than the type toggle; "let's work on uniformity across the app"). Every control is a rounded rectangle:
     regular  40px tall, 12px corners  buttons, toggles (segmented), text fields, menus, icon buttons
     chips    36px tall, 10px corners  capsules you pick from (people, moods, genres, services)
     small    32px tall, 10px corners  .btn.sm, .chip.sm
     tags     8px corners              scores, services, labels (not tappable)
   Hierarchy: one filled primary per screen; secondary = outlined (a visible neutral border); ghost = tertiary, no border. ===== */
:root{--h:40px;--h-sm:32px;--h-chip:36px;--rc:12px;--rc-sm:10px;--rt:8px;--btn-line:#55555a}
.btn{height:var(--h);border-radius:var(--rc);padding:0 16px;font-size:15px;font-weight:600;border-color:var(--btn-line)}
.btn.lg{height:var(--h);border-radius:var(--rc);padding:0 18px;font-size:15px}
.btn.sm{height:var(--h-sm);border-radius:var(--rc-sm);padding:0 12px;font-size:14px}
.btn.primary{font-weight:700;border-color:transparent}
.btn.ghost{border-color:transparent}
.btn.ghost.danger{border-color:transparent}
.btn.danger{border-color:#7a3434}
.iconbtn{width:var(--h);height:var(--h);border-radius:var(--rc)}
.chip{height:var(--h-chip);border-radius:var(--rc-sm);padding:0 13px;font-size:15px}
.chip.sm{height:var(--h-sm);border-radius:var(--rc-sm);padding:0 11px;font-size:14px}
.chip.wrap{border-radius:var(--rc-sm)}
.seg{height:var(--h);border-radius:var(--rc);padding:3px}
.seg button{height:calc(var(--h) - 8px);border-radius:9px;font-weight:600;font-size:14px;letter-spacing:0;min-width:72px}
.seg.big,.seg.big button{height:auto}
.seg.big button{height:calc(var(--h) - 8px);font-size:15px}
.seg.stack{height:auto}
.input,textarea.input,select.input{border-radius:var(--rc);min-height:var(--h)}
.pchip{height:var(--h-chip);border-radius:var(--rc-sm)}
.tagpill,.prov,.sc,.badge{border-radius:var(--rt)}
.rate button{border-radius:var(--rc-sm)}
.rate.big button{border-radius:var(--rc-sm)}
.choice,.watchbtn,.mmenu-list{border-radius:var(--rc)}
.fbbtn,.tab{border-radius:var(--rc)}
.iconbtn,.btn.iconbtn,.btn.sq{padding:0}   /* the icon fills the square (review 3: .btn padding squeezed every close X to 6px) */

/* ===== Review 3 fixes ===== */
/* one solid fill per screen: selected segments and badges are tints, not the main button's teal */
.seg button.on{background:color-mix(in srgb,var(--hi) 22%,var(--bg2));color:var(--fg);box-shadow:inset 0 0 0 1px var(--hi-text)}
.pick .rank{background:var(--bg3);color:var(--fg);border:1px solid var(--line2);border-radius:var(--rt);font-weight:800}
.pick .rank ~ .top .ptitle::before{width:132px}
/* services: only yours are highlighted (with ✓); the rest are neutral tags */
.prov{background:var(--bg3);border-color:var(--line2);color:var(--fg2)}
.prov.rent{background:transparent}
/* menus look like menus */
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8b4ac' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
/* sheet titles never run under the close button */
.sheet h2:first-child,.sheet > div > h2:first-child{padding-right:48px}
/* single-line fields match buttons exactly; the feedback button joins the 40px system */
input.input,select.input{height:var(--h)}
.fbbtn{width:var(--h);height:var(--h)}
/* links styled as buttons read as buttons */
a.btn{color:var(--fg);text-decoration:none}
a.btn.primary{color:var(--on-hi)}
/* one secondary style: hiline becomes the outlined secondary */
.btn.hiline{background:var(--bg3);border-color:var(--btn-line)}
/* section labels in sentence case like every other label */
.section h3{text-transform:none;letter-spacing:0;font-size:14px;font-weight:700}
.choice-badge{text-transform:none;letter-spacing:0}
/* the 1–10 buttons: 40px like everything else, one row that fills the width */
.rate{display:flex;gap:4px;flex-wrap:nowrap}
.rate button{height:var(--h);flex:1 1 0;min-width:0;width:auto}
/* hover only where there is a mouse (iOS keeps :hover after a tap) */
/* Library's sub-tabs wrap instead of hiding "Stats" off screen */
.seg.wrapok{flex-wrap:wrap;height:auto;overflow:visible}
/* "Not quite?" chips: one scrolling row on phones */
@media (max-width:520px){.adjust{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}.adjust::-webkit-scrollbar{display:none}.adjust .chip{flex:none}}
/* phones: Tonight's Pick row stays in view above the tab bar while the form is long (review 3: under the tab bar on an SE) */
@media (max-width:760px){.pickrow{position:sticky;bottom:calc(62px + var(--sab));z-index:5;background:var(--bg2);margin-left:-18px;margin-right:-18px;padding:10px 18px;border-top:1px solid var(--line);border-radius:0 0 var(--r2) var(--r2)}}
/* short phones: setup and welcome start higher */
@media (max-height:700px){.boot{padding-top:14px!important;gap:10px!important}.boot > .wm{font-size:38px!important}}
/* one switch design (review 3: two different switches): Toggle matches the Settings rows' 46x28 switch */
.switch i{width:46px;height:28px;background:var(--bg3);border:1px solid var(--line2);box-sizing:border-box}
.switch i::after{top:3px;left:3px;width:20px;height:20px;background:var(--fg3)}
.switch.on i{background:var(--hi);border-color:transparent}
.switch.on i::after{left:21px;background:var(--on-hi)}
.btn[aria-disabled="true"],.chip[aria-disabled="true"]{opacity:.45;cursor:default}
/* review 3, accessibility: focused controls never hide behind the fixed tab bar or the top bar (WCAG 2.4.11) */
html{scroll-padding-top:72px}
@media (max-width:760px){html{scroll-padding-bottom:calc(84px + var(--sab))}}
/* search boxes whose input sits inside a styled wrapper show the focus ring on the wrapper */
div.input:focus-within{border-color:var(--p2);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 20%,transparent)}
/* the full-screen QR code's Close button and focus ring on its white ground */
.qrbig .btn{background:#121212;color:#fff;border-color:#121212}
.qrbig :focus-visible{outline-color:#121212}
/* Library rows at 320px: the text shrinks, the rating dots stay */
.hrow{min-width:0}.hrow > *{min-width:0}
.hhead{display:flex;justify-content:flex-end;gap:6px;padding:0 11px;font-size:11px;color:var(--fg3);font-weight:700}.hhead span{width:34px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pini{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:6px;font-size:11px;font-weight:800;margin-right:2px}
.pick .morebtn{margin-top:8px;min-height:32px}.pick .more{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pick .morebtn{align-self:flex-start}
@media (max-width:560px){.kv{grid-template-columns:minmax(0,1fr)}.kv dt{margin-top:8px}}
.toast.above{bottom:calc(24px + var(--sab) + 62px)}@media (max-width:760px){.toast.above{bottom:calc(152px + var(--sab))}}
/* Rapid Rate on phones (review 3): poster and title side by side, then the 1–10 row full width in one line, then the actions */
@media (max-width:640px){
  .rapid{display:grid;grid-template-columns:min(27vw,118px) minmax(0,1fr);column-gap:14px;align-items:start}
  .rapid .rpo{grid-row:1 / span 4;width:100%;max-width:none}
  .rapid .rinfo{display:contents}
  .rapid .rtitle,.rapid .rinfo > .muted,.rapid .rcast,.rapid .rov{grid-column:2}
  .rapid .rate,.rapid .ranchor,.rapid .ractions,.rapid .rundo,.rapid .earlyout,.rapid .rfoot{grid-column:1 / -1}
  .rapid .rate.big{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;max-width:none;margin-top:4px}
  .rapid .rate.big button{width:auto;min-width:0;height:44px;padding:0}
  .rapid .ranchor{max-width:none}
}
.linkish{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer}

/* a pending Undo waits behind an open sheet and comes back when it closes (it covered the Rate sheet's buttons on phones; pre-open pass) */
/* and other messages show at the top while a sheet is open, clear of its buttons */
body.sheet-open .toast.act{display:none}body.sheet-open .toast,body.sheet-open .toast.above{top:calc(16px + env(safe-area-inset-top, 0px));bottom:auto}
/* pick cards: the rank sits above the title in the text column, so a short column never squeezes the title to a word per line (pre-open pass) */
.pick .rank.inl{position:static;display:inline-block;margin-bottom:6px}
@media (max-width:520px){.adjust > .muted{flex:none;white-space:nowrap}.adjust{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:24px}}
.tastebtn-narrow{display:none}@media (max-width:760px){.tastebtn-wide{display:none}.tastebtn-narrow{display:flex;margin:0 auto}}   /* the sticky row's own 10px padding is the gap, same as between its buttons (John, 2026-10-23) */
.tab{position:relative}
/* sign-up's "Check your email" page (2026-10-23) */
.sentpage .sentmail{width:56px;height:56px;border-radius:14px;margin:4px auto 0;display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--hi) 18%,transparent);color:var(--hi-text)}
/* first Rapid Rate deck: picks on offer from card 10 */
.earlyout{margin-top:14px;width:100%;flex-basis:100%;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.earlyout > span{max-width:34ch}
.likechip{display:inline-flex;gap:8px;align-items:center;max-width:100%}
.likechip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the waiting card's progress bar (2026-10-23) */
.pickload .pbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;max-width:360px;margin:12px auto 0}
.pickload .pbar i{display:block;height:100%;background:var(--hi);border-radius:3px;transition:width .25s linear}
.rapid .rundo .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
/* Tonight: the type sits under "I'm in the mood for…" as the first part of the answer (2026-10-23) */
.moodtype{margin:2px 0 10px}
/* People tab: Your Pod and Your Watch Party, stacked */
.peoplegrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}   /* stacked, one column (John, 2026-10-23) */
.podrows .krow + .krow{border-top:0}   /* no line between the people in a Pod (John, 2026-10-23) */
.boxhead{margin-bottom:10px}
.boxhead h2{margin:0}
.pbox .kcode{margin-top:6px}
.peoplegrid > .card{margin:0}
/* People: the people in the Pod are tiles that flow across and wrap (John, 2026-10-23) */
.pbox .podrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pbox .podrows .krow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:0}
.pbox .podrows .krow + .krow{border-top:1px solid var(--line)}
.pbox .podrows{gap:10px !important}
@media (max-width:760px){.pbox .podrows .krow{padding:8px 10px}.pbox .podrows{gap:8px !important}}
/* Taste: the profile-update status at the top of the card (2026-10-23) */
.tastecard{scroll-margin-top:84px}
.tstatus{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--hi) 12%,transparent);border:1px solid color-mix(in srgb,var(--hi) 35%,transparent);line-height:1.45}
.tstatus .spin{width:20px;height:20px;border-width:2px;flex:none}
.tstatus.done{color:var(--fg)}
.tstatus.done > span{color:var(--hi-text);font-weight:800}

/* Settings → Your data: two labeled parts in one card (2026-10-27) */
.datasec h3{font-size:15px;font-weight:800;margin:0 0 6px;color:var(--fg)}

/* ===== Design review (John, 2026-10-27; report: https://claude.ai/artifact/KJKrLb6Wy6o2qK6gUjtryM) =====
   One spacing scale (4/8/12/16/24/32) with real air between sections; one type scale (12 captions, 13 labels, 15 secondary,
   16 body, 20 section, 24 sheet title, 28 page title); teal is the app's color and the personal color marks only the person
   (app.js no longer rewrites --hi); boxes only where they earn them (Watching cards, picks, sheets); text-led pages read in a
   760px column while grids keep the full width; 24px gutters from 600px up. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--gut:16px;--col:760px}
@media (min-width:600px){:root{--gut:24px}}
.main{padding:var(--gut) var(--gut) calc(24px + var(--sab))}@media (max-width:760px){.main{padding-bottom:calc(96px + var(--sab))}}   /* phones: room for the fixed tab bar (John, 2026-10-28: a button under it on People) */
.topbar-in{padding:8px var(--gut)}
.main.narrow{max-width:calc(var(--col) + 2 * var(--gut))}
.card{padding:16px}
@media (min-width:600px){.card{padding:20px}}
.card + .card{margin-top:var(--s5)}
@media (min-width:761px){.card + .card{margin-top:var(--s6)}}
h1{font-size:28px;font-weight:800;margin-bottom:6px}
h2{font-size:20px;font-weight:800}
.sheet h2:first-child,.sheet > div > h2:first-child{font-size:24px}
.dhead h2{font-size:24px}
.rapid .rtitle{font-size:24px}
.pick .ptitle{font-size:18px}
.field label,.cplabel,.qhint,.section h3,.lbl{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--fg2)}
.lbl{display:inline-block}
/* lists are lists: Library rows, Never-suggest rows and the Watching list view lose their boxes */
.hrow,.wrow{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:8px 2px}
.hlist{gap:0 24px}
.wlist{gap:0}
/* Browse tiles: the poster is the shape; the type sits in the caption, not in a badge */
.pcard{background:none;border:0;border-radius:0;overflow:visible}
.pcard .poster{border-radius:12px;overflow:hidden}
.pcard .pbody{padding:8px 2px 4px}
.simrow .pcard .poster{border-radius:10px}
/* Settings: one page of grouped sections, not eleven boxes */
.settings .card{background:none;border:0;border-radius:0;padding:0}
.settings .card + .card{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.settings .card .card{padding:0;margin:0;border:0}
/* section titles in teal, sub-headings in chalk, so the page scans as sections (John, 2026-10-27: "Your plan" and "Kizmo Plus"
   looked the same; the teal "Erase or delete" title was the one he could find); the page title is for screen readers only
   because the Library / Taste / Settings switch already names the page */
.settings .card > h2,.settings .card > details > summary > h2,.card > h2,.boxhead h2,.pbox h2{color:var(--brand)}   /* everywhere (John): section titles teal; page titles, sheet titles and names stay chalk */
.sheet h2,.pname h2,.pick h2,h1{color:var(--fg)}
/* the TMDB / JustWatch credit is a footer, not part of the last section (John: "cramped up and part of settings, yet it's not") */
.credit{margin:40px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--fg3);line-height:1.5}
.credit img{height:10px;vertical-align:middle;margin-right:6px}
.settings .card:first-of-type{margin-top:4px}
/* Tonight's form sits on the page; on phones the Pick row still stays in view above the tab bar */
.tonight > .card.form{background:none;border:0;border-radius:0;padding:0}
@media (max-width:760px){.tonight .pickrow{background:var(--bg);margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:10px var(--gut);border-radius:0;border-top:1px solid var(--line)}}
.altrow{display:flex;flex-direction:column;gap:2px;align-items:center;margin-top:10px}   /* one link per line (John, 2026-10-27: side by side they read as one sentence) */
.altrow .linkbtn{text-decoration:none;color:var(--fg2);min-height:32px;font-size:15px;font-weight:600}
@media (hover:hover){.altrow .linkbtn:hover{color:var(--fg)}}
/* Browse on phones: the type switch lives inside Filters */
.ph-block{display:none}
@media (max-width:640px){.browsebar .seg{display:none}.ph-block{display:block}}
/* sheets: text sheets in the reading column; the title page and other wide sheets keep 980 */
.sheet{max-width:760px}.sheet.wide{max-width:980px}
/* the person palette is 12 (teal + 11), two rows of six */
.swgrid{grid-template-columns:repeat(6,minmax(0,1fr));max-width:320px}
/* the setup sheet and Settings no longer preview "your buttons": the personal color marks the person, not the controls */

/* first-visits orientation card on Tonight (backlog 100) and Browse's Deeper cuts shelf (backlog 99) */
.orient{margin-bottom:var(--s5);border:1.5px solid var(--brand)}
.orientlist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:15px;line-height:1.45}
.orientlist li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:baseline}
.orientlist li b{color:var(--brand)}
.deeper .simrow .pcard{min-width:132px;width:132px}

/* Watching → Pod view (John, 2026-10-29) */
.podwatch{display:grid;gap:var(--s5)}.podwatch .lbl{margin:0 0 4px;color:var(--fg3)}
@media (max-width:420px){.podwatch .wrow .btn.sm{white-space:normal;max-width:9.5em;line-height:1.15;height:auto;min-height:32px;padding-block:4px}}
/* universal importer (2026-10-29): the instructions people copy into their own app */
.promptbox{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;color:var(--fg2);max-width:100%;overflow-x:auto}
/* "Did you watch one of these?" on Tonight (time to fun, 2026-10-30): the last shortlist's posters, tap one to rate it */
.fuposters{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:var(--s3)}
.fupo{display:flex;flex-direction:column;gap:6px;background:none;border:0;padding:0;margin:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer;min-width:0}
.fupo-img{display:block;aspect-ratio:2/3;max-width:100%;border-radius:var(--rt);overflow:hidden;background:var(--bg3)}
.fupo-img img{width:100%;height:100%;object-fit:cover;display:block}
.fupo-t{font-size:13px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tonight > .followup{margin-bottom:var(--s5)}

/* readkizmo: small inline icons beside text (Has audiobook editions, Reading now) */
.ico svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}