/* ═══ CONTENT (movies + TV) — B51-10 ══════════════════════════════════════
   Poster tiles are the app's mock language: a two-tone wash from the title's
   own hue with the name set across it. 2:3 everywhere, because the grid is
   built on that ratio (the registry says so too — f_poster's help line).     */

/* B52-13 (Pablo: "The content section is empty") — the route needed a show-row.
   B55 — that row now lives in `sections.css` with every other route's, because
   the local copy tied with the mobile-landscape rail rule and beat it on load
   order, leaving the view a column while the tab strip claimed the full height
   (see the note there). Do NOT reintroduce a per-module show-row. */

/* B58 — "Save" needs a blue that is NOT the accent (the accent is the cyan the
   whole app runs on, so a save action painted in it reads as chrome). The palette's
   navy ramp is the one real blue in it, so the save token comes from there rather
   than from a hue invented outside the ramp. */
:root{ --cn-save:var(--mk-navy-500) }

.cn-host{ display:block }
.cn-note{ font:500 11.5px/1.5 var(--mk-font-ui);color:var(--fg-3);margin:18px 0 0 }

/* section heads inside a tab */
.cn-sec-h{ display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:26px 0 12px }
.cn-sec-h:first-child{ margin-top:6px }
.cn-sec-h h3{ font:700 15px/1.25 var(--mk-font-ui);color:var(--fg-1);margin:0 }
.cn-sec-h p{ font:500 12px/1.45 var(--mk-font-ui);color:var(--fg-3);margin:3px 0 0 }

/* ── poster ───────────────────────────────────────────────────────── */
.cn-poster{ position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 8px 22px rgba(10,16,20,.16) }
.cn-po-nm{ position:absolute;inset-inline:10px;inset-block-end:10px;color:#fff;font:800 15px/1.15 var(--mk-font-display,var(--mk-font-ui));
  letter-spacing:-.01em;text-wrap:balance;text-shadow:0 1px 12px rgba(0,0,0,.45) }
.cn-po-med{ position:absolute;inset-block-start:8px;inset-inline-end:8px;font-size:15px;color:rgba(255,255,255,.82) }
.cn-poster.lg{ width:148px;flex:0 0 148px;border-radius:14px }
.cn-poster.lg .cn-po-nm{ font-size:17px }
.cn-poster.sm{ width:64px;flex:0 0 64px;border-radius:9px }
.cn-poster.sm .cn-po-nm{ font-size:9.5px;inset-inline:6px;inset-block-end:6px }
.cn-poster.sm .cn-po-med{ font-size:11px;inset-block-start:5px;inset-inline-end:5px }
.cn-poster.xs{ width:44px;flex:0 0 44px;border-radius:7px }
.cn-poster.xs .cn-po-nm{ display:none }
.cn-poster.xs .cn-po-med{ inset:0;display:flex;align-items:center;justify-content:center;font-size:16px }

/* ── card grid ────────────────────────────────────────────────────── */
.cn-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:18px 16px }
.cn-card{ position:relative;display:flex;flex-direction:column;gap:7px;border:0;background:transparent;padding:0;
  cursor:pointer;text-align:start;font:inherit;color:inherit }
.cn-card .cn-poster{ transition:transform .16s ease, box-shadow .16s ease }
.cn-card:hover .cn-poster{ transform:translateY(-3px);box-shadow:0 2px 0 rgba(0,0,0,.06), 0 14px 30px rgba(10,16,20,.22) }
.cn-cd-nm{ font:600 12.5px/1.3 var(--mk-font-ui);color:var(--fg-1) }
.cn-cd-meta{ font:500 11px/1.3 var(--mk-font-ui);color:var(--fg-3) }
/* ── B54-34 · card state reads off the poster's EDGES ──────────────────
   (Pablo: "I'm not a fan of the way we're showing these icons in the top part of
   the content card".) Three stacked chips over the artwork became: a hairline of
   progress at the foot, one tick for finished, a corner ribbon for watchlisted. */
.cn-po-wrap{ position:relative;display:block }
.cn-cd-prog{ position:absolute;inset-inline:0;inset-block-end:0;height:3px;background:color-mix(in srgb,var(--fg-1) 22%,transparent);
  border-end-start-radius:var(--mk-radius-md);border-end-end-radius:var(--mk-radius-md);overflow:hidden }
.cn-cd-prog i{ display:block;height:100%;background:var(--accent) }
.cn-cd-tick{ position:absolute;inset-block-end:7px;inset-inline-end:7px;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:oklch(.62 .12 155);color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.28) }
.cn-cd-tick .mi{ font-size:13px }
.cn-cd-rib{ position:absolute;inset-block-start:0;inset-inline-end:9px;width:20px;height:26px;
  display:inline-flex;align-items:flex-start;justify-content:center;padding-top:2px;
  background:var(--accent);color:var(--accent-contrast,#fff);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%) }
.cn-cd-rib .mi{ font-size:13px }
/* franchise card — the members sit in a tidy STACK behind the FIRST title's
   poster (B54-32, reworked in B58: Pablo, "this looks too chaotic, maybe the cards
   layered in a more organized way or simply with the bubble of the amount of
   titles"). The rotated fan is gone: two edges peek above the face on a uniform
   ladder, so ten franchises in a grid all read the same. */
.cn-fan{ position:relative;display:block;padding-block-start:11px }
.cn-fan .cn-fan-b{ position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;transform-origin:50% 0 }
.cn-fan .cn-fan-b.b0{ transform:translateY(6px) scaleX(.94);opacity:.6 }
.cn-fan .cn-fan-b.b1{ transform:translateY(0) scaleX(.88);opacity:.4 }
.cn-fan .cn-fan-b .cn-poster{ box-shadow:0 4px 14px -6px rgba(13,37,48,.5) }
.cn-fan .cn-poster.face{ position:relative;z-index:2 }
.cn-fan.lg{ width:150px;flex:0 0 150px }
.cn-cd-count{ position:absolute;z-index:3;inset-block-start:6px;inset-inline-end:2px;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--fg-1);color:var(--bg-1);font:700 11px/1 var(--mk-font-ui) }
/* B58 — the tie chip: a member card stating which franchise it belongs to, for the
   single-medium views where the franchise is not itself a card. */
.cn-cd-fr{ display:inline-flex;align-items:center;gap:4px;margin-block-start:5px;padding:2px 8px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent-text);
  font:600 10.5px/1.5 var(--mk-font-ui);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis }
.cn-cd-fr .mi{ font-size:13px }
.cn-frcard .cn-cd-prog{ z-index:3 }

/* ── continue watching ────────────────────────────────────────────── */
.cn-cont{ display:flex;flex-direction:column;gap:10px }
/* B53-09 (Pablo: "When I click in some places of the card, the panel doesn't
   open. The whole card should be selectable") — the row IS the target; the
   poster and the name are plain spans inside it. */
.cn-cont-row{ display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--border);
  border-radius:var(--mk-radius-md);background:var(--bg-1);cursor:pointer;
  transition:border-color var(--mk-t-fast),box-shadow var(--mk-t-fast) }
.cn-cont-row:hover{ border-color:var(--accent);box-shadow:0 2px 4px rgba(13,37,48,.06),0 10px 22px -12px rgba(13,37,48,.22) }
.cn-cont-row:focus-visible{ outline:2px solid var(--accent);outline-offset:2px }
.cn-cont-po,.cn-hist-po{ display:block;flex:0 0 auto }
.cn-cont-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:5px }
.cn-cont-nm{ font:700 14px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-cont-row:hover .cn-cont-nm{ color:var(--accent-text,var(--accent)) }
.cn-cont-meta{ font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3) }
.cn-cont-meta b{ color:var(--fg-1);font-weight:700 }
.cn-bar{ display:block;height:4px;border-radius:2px;background:var(--bg-3);overflow:hidden;max-width:320px }
.cn-bar i{ display:block;height:100%;background:var(--accent);border-radius:2px }
.cn-bar.sm{ max-width:none;width:56px;flex:0 0 auto }
/* B54-18 · the row's actions: one 44px circular tick (+ Skip where a franchise
   makes skipping meaningful, B54-01). The old full-width primary button is gone,
   and so is the mobile line break it needed. */
.cn-cont-acts{ display:flex;align-items:center;gap:8px;flex:0 0 auto }
.cn-cont-ic{ position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1.5px solid var(--border);border-radius:50%;background:var(--bg-1);color:var(--fg-2);cursor:pointer;
  transition:border-color var(--mk-t-fast),color var(--mk-t-fast),background var(--mk-t-fast) }
.cn-cont-ic::after{ content:'';position:absolute;inset:-3px }
.cn-cont-ic .mi{ font-size:20px }
.cn-mark-ic:hover{ border-color:oklch(.62 .12 155);color:oklch(.55 .13 155);background:color-mix(in srgb,oklch(.62 .12 155) 10%,transparent) }
.cn-skip:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)) }
.cn-cont-fr{ display:inline-flex;align-items:center;gap:4px;margin-inline-end:6px;padding:1px 7px;border-radius:999px;
  background:var(--bg-2);color:var(--fg-2);font:700 10px/1.5 var(--mk-font-ui) }
.cn-cont-fr .mi{ font-size:12px }
/* swipe-to-mark: the row follows the finger and greens as it passes threshold */
.cn-cont-row{ touch-action:pan-y }
.cn-cont-row.drag{ transition:none;user-select:none }
.cn-cont-row.will-mark{ border-color:oklch(.62 .12 155);box-shadow:0 0 0 2px color-mix(in srgb,oklch(.62 .12 155) 30%,transparent) }

/* ── empty states ─────────────────────────────────────────────────── */
.cn-empty{ display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 20px;text-align:center;
  border:1px dashed var(--border);border-radius:var(--mk-radius-md);background:var(--bg-2) }
.cn-empty .mi{ font-size:26px;color:var(--fg-3);opacity:.7 }
.cn-empty b{ font:700 13px/1.3 var(--mk-font-ui);color:var(--fg-1) }
.cn-empty span:not(.mi){ font:500 12px/1.45 var(--mk-font-ui);color:var(--fg-3);max-width:44ch }

/* ── discover toolbar ─────────────────────────────────────────────── */
/* B53-08 (Pablo: "These inputs are irrelevant (except the All/Movies/Series
   selector), the other ones are handled by the shell" + "This bar is too
   wide") — one row: the medium selector, shrink-wrapped, and the Play action.
   The search field and the genre chip rail are gone. */
.cn-filters{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px }
.cn-filters .cn-med{ flex:0 0 auto;width:auto }
.cn-play-wrap{ position:relative;flex:0 0 auto }
.cn-playbtn{ display:inline-flex;align-items:center;gap:7px }
/* B63-127 (Pablo: "The play button should have the primary app color as the
   background color and white for the fill. Same as all the Create/Actions
   buttons in the shell across the prototype. I need the button to stand
   out") — same accent treatment `.nav-pill.route-create-btn` already uses
   (sections.css). */
.nav-pill.cn-playbtn{ background:var(--accent);border-color:var(--accent);color:var(--accent-fg,#04282b);font-weight:700; }
.nav-pill.cn-playbtn:hover{ filter:brightness(1.06); }
.nav-pill.cn-playbtn .mi{ color:#fff; }
.cn-play-menu{ min-width:260px }
.cn-pm-tx{ display:flex;flex-direction:column;gap:1px;min-width:0;text-align:start }
.cn-pm-tx b{ font:700 12.5px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-pm-tx i{ font:500 11px/1.35 var(--mk-font-ui);color:var(--fg-3);font-style:normal }

/* ── franchises · B54-32 ─────────────────────────────────────────────
   The route no longer carries a franchise STRIP: a franchise is a card in the
   same grid (above), and everything about it lives in its own panel. */
.cn-frhero{ display:flex;gap:16px;align-items:flex-start;margin-bottom:14px }
.cn-frhero-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:7px }
.cn-frmed{ margin-bottom:12px }
.cn-frboxes{ gap:8px }
.cn-frbox{ border:1px solid var(--border);border-radius:var(--mk-radius-md);background:var(--bg-1);overflow:hidden }
.cn-frbox.done{ background:color-mix(in srgb,oklch(.62 .12 155) 6%,var(--bg-1)) }
.cn-frbox.skipped{ opacity:.55 }
.cn-frbox-hd{ display:flex;align-items:center;gap:10px;padding:9px 11px;min-height:56px;cursor:default }
.cn-frbox-hd[data-cn-frbox]{ cursor:pointer }
.cn-frbox-hd[data-cn-frbox]:hover{ background:var(--bg-2) }
.cn-frbox .cn-sbox-cv{ font-size:19px;color:var(--fg-3);transition:transform 180ms var(--mk-ease) }
.cn-frbox.open .cn-sbox-cv{ transform:rotate(90deg) }
html[dir="rtl"] .cn-frbox .cn-sbox-cv{ transform:scaleX(-1) }
html[dir="rtl"] .cn-frbox.open .cn-sbox-cv{ transform:scaleX(-1) rotate(-90deg) }
.cn-frbox-k{ font-size:18px;color:var(--fg-3) }
.cn-frbox-po{ flex:0 0 auto;width:30px }
.cn-frbox-po .cn-poster.xs{ width:30px;border-radius:6px }
.cn-frbox-t{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px }
.cn-frbox-t b{ font:700 13px/1.25 var(--mk-font-ui);color:var(--fg-1);cursor:pointer }
.cn-frbox-t b:hover{ color:var(--accent-text,var(--accent)) }
.cn-frbox-t span{ font:500 11px/1.3 var(--mk-font-ui);color:var(--fg-3) }
.cn-frbox-next{ flex:0 0 auto;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent-text,var(--accent));font:700 9.5px/1.6 var(--mk-font-ui);text-transform:uppercase;letter-spacing:.04em }
.cn-frbox-b{ padding:0 10px 10px;display:flex;flex-direction:column;gap:7px }
.cn-frbox-b .cn-sbox{ background:var(--bg-2) }

/* ── B54-06 · the franchise carousel on a title ───────────────────── */
.cn-sec-fr .cn-sec-t > span:not(.mi){ flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.cn-sec-go{ display:inline-flex;align-items:center;gap:2px;margin-inline-start:auto;padding:4px 6px 4px 10px;border:0;border-radius:999px;
  background:transparent;color:var(--accent-text,var(--accent));cursor:pointer;font:700 11px/1 var(--mk-font-ui) }
.cn-sec-go:hover{ background:color-mix(in srgb,var(--accent) 10%,transparent) }
.cn-sec-go .mi{ font-size:16px }
html[dir="rtl"] .cn-sec-go .mi{ transform:scaleX(-1) }
.cn-carou{ display:flex;gap:10px;overflow-x:auto;padding-block:2px 6px;scroll-snap-type:x proximity;
  scrollbar-width:thin;overscroll-behavior-x:contain }
.cn-cri{ flex:0 0 auto;width:84px;display:flex;flex-direction:column;gap:5px;padding:6px;border:1px solid transparent;
  border-radius:10px;background:transparent;cursor:pointer;text-align:start;scroll-snap-align:start }
.cn-cri:hover{ background:var(--bg-2) }
.cn-cri .cn-poster.xs{ width:100%;aspect-ratio:2/3;border-radius:8px }
.cn-cri-nm{ font:600 11px/1.25 var(--mk-font-ui);color:var(--fg-1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.cn-cri-y{ font:500 10px/1 var(--mk-font-ui);color:var(--fg-3) }
.cn-cri.here{ border-color:var(--border);background:var(--bg-2) }
.cn-cri.next{ border-color:var(--accent) }
.cn-cri-tag{ font:700 9px/1.5 var(--mk-font-ui);text-transform:uppercase;letter-spacing:.04em;color:var(--accent-text,var(--accent)) }

/* ── history ──────────────────────────────────────────────────────── */
.cn-hist{ display:flex;flex-direction:column;gap:20px }
.cn-hist-g{ display:block }
.cn-hist-rate{ display:flex;align-items:center;flex:0 0 auto }
.cn-hist-m{ font:700 10.5px/1 var(--mk-font-ui);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);
  padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:8px }
.cn-hist-row{ display:flex;align-items:center;gap:12px;padding:8px 2px;cursor:pointer;border-radius:12px }
.cn-hist-row:hover{ background:var(--bg-2) }
.cn-hist-row:focus-visible{ outline:2px solid var(--accent);outline-offset:2px }
.cn-hist-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px }
.cn-hist-nm{ font:600 13px/1.3 var(--mk-font-ui);color:var(--fg-1) }
.cn-hist-row:hover .cn-hist-nm{ color:var(--accent-text,var(--accent)) }
.cn-hist-meta{ font:500 11px/1.35 var(--mk-font-ui);color:var(--fg-3) }
.cn-hist-norate{ color:var(--fg-3) }
.cn-fav{ width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--bg-1);
  cursor:pointer;color:var(--fg-3);display:inline-flex;align-items:center;justify-content:center }
.cn-fav .mi{ font-size:18px }
.cn-fav.on{ color:oklch(.62 .19 15);border-color:oklch(.62 .19 15) }

/* ── stars ────────────────────────────────────────────────────────── */
.cn-stars{ display:inline-flex;align-items:center;gap:1px;color:var(--fg-3) }
.cn-stars .mi{ font-size:19px }
/* B55 (Pablo: "Stars still have a hollow center even when marked … if it's
   filled it should be filled on the center too. Half stars have half center
   fill") — ROOT CAUSE: Material Symbols is loaded as a VARIABLE font with the
   FILL axis exposed (`FILL@0..1`) and its default is 0, so the `star` glyph drew
   as an outline no matter what colour it was given. Pushing FILL to 1 is what
   actually fills the middle; `star_half` at FILL 1 fills exactly half. */
.cn-stars .cn-st.on,.cn-stars .cn-st.half{ color:oklch(.75 .15 85);
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24 }
.cn-stars.sm .mi{ font-size:15px }
.cn-stars.lg .mi{ font-size:30px }
/* the vote tally sits beside the average, quieter than it */
.cn-votes{ font:600 11.5px/1 var(--mk-font-ui);color:var(--fg-3) }

/* ── play tab ─────────────────────────────────────────────────────── */
.cn-games-removed{ display:none } /* B53-08 — Play is an action on Discover; the two big game cards are gone. */

/* ═══ TITLE SCREEN — a PANEL, not a modal (B53-04) ════════════════════
   Pablo: "Why are we doing modals for a piece of content? We have the panels
   across the whole design system". The shell, the slide stack, the header and
   the footer all come from the panel host; the only thing this file sets is the
   panel's width and the content inside the body. */
.cn-panel{ --mk-panel-w:620px }
.cn-hero-nm{ font:800 19px/1.2 var(--mk-font-display,var(--mk-font-ui));color:var(--fg-1);letter-spacing:-.01em;text-wrap:balance }

.cn-hero{ display:flex;gap:18px;align-items:flex-start }
.cn-hero-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:10px }
.cn-hero-meta{ font:500 12.5px/1.4 var(--mk-font-ui);color:var(--fg-3) }
.cn-hero-gen{ display:flex;flex-wrap:wrap;gap:6px }
.cn-gchip{ height:24px;padding:0 10px;border-radius:999px;background:var(--bg-3);color:var(--fg-2);
  font:600 11px/24px var(--mk-font-ui) }
.cn-hero-fr{ align-self:flex-start;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
  border:1px solid var(--border);border-radius:999px;background:var(--bg-2);cursor:pointer;
  font:600 11.5px/1 var(--mk-font-ui);color:var(--fg-1) }
.cn-hero-fr:hover{ border-color:var(--accent);color:var(--accent-text,var(--accent)) }
.cn-hero-fr .mi{ font-size:15px;color:var(--fg-3) }
.cn-hero-fr-n{ padding:1px 6px;border-radius:999px;background:var(--bg-3);font-size:10px }
.cn-hero-acts{ display:flex;flex-wrap:wrap;gap:8px;margin-top:2px }
.cn-act{ display:inline-flex;align-items:center;gap:6px }

.cn-sec{ margin-top:22px;padding-top:18px;border-top:1px solid var(--border) }
.cn-sec-t{ display:flex;align-items:center;gap:8px;font:700 12px/1 var(--mk-font-ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:12px }
.cn-sec-t .mi{ font-size:16px;color:var(--fg-3) }
.cn-sec-n{ margin-inline-start:auto;font:600 11px/1 var(--mk-font-ui);color:var(--fg-3);text-transform:none;letter-spacing:0 }
.cn-syn{ font:500 13px/1.6 var(--mk-font-ui);color:var(--fg-1);margin:0;max-width:70ch;text-wrap:pretty }
.cn-locked{ display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px dashed var(--border);
  border-radius:var(--mk-radius-md);background:var(--bg-2);font:500 12px/1.45 var(--mk-font-ui);color:var(--fg-3) }
.cn-locked .mi{ font-size:17px }
.cn-none{ font:500 12px/1.45 var(--mk-font-ui);color:var(--fg-3);margin:0 }

/* availability — B53-09: one dropdown, defaulting to the user's country */
.cn-ccsel{ margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0 }
.cn-ccsel img{ width:18px;height:12px;object-fit:cover;border-radius:2px;flex:0 0 auto }
.cn-ccsel select{ width:auto;min-width:130px;padding-block:6px }
.cn-ofs{ display:flex;flex-direction:column;gap:6px }
.cn-of{ display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);
  border-radius:var(--mk-radius-md);background:var(--bg-1) }
.cn-of-svc{ width:30px;height:30px;flex:0 0 auto;border-radius:8px;color:#fff;display:inline-flex;align-items:center;
  justify-content:center;font:800 11px/1 var(--mk-font-ui) }
.cn-of-nm{ flex:1;min-width:0;font:600 12.5px/1.3 var(--mk-font-ui);color:var(--fg-1) }
.cn-of-kind{ padding:2px 9px;border-radius:999px;font:700 10px/1.7 var(--mk-font-ui);letter-spacing:.03em;
  text-transform:uppercase;background:var(--bg-3);color:var(--fg-2) }
.cn-of-kind.stream{ background:color-mix(in srgb,oklch(.62 .12 155) 16%,transparent);color:oklch(.5 .12 155) }
.cn-of-price{ font:700 12px/1 var(--mk-font-ui);color:var(--fg-1) }

/* rating — B53-09: my score, the average beside it, and how everyone voted */
.cn-sec-rate .cn-rate{ display:flex;align-items:center;gap:12px;user-select:none;touch-action:none;cursor:pointer;
  min-height:44px }
.cn-rate-v{ font:800 15px/1 var(--mk-font-ui);color:var(--fg-1) }
.cn-rate-avg{ font:500 11.5px/1 var(--mk-font-ui);color:var(--fg-3) }
.cn-rate-avg b{ font-weight:700;color:var(--fg-2) }
/* B58 — the rating prompt a solo "Watched" swipe pushes (content-play.js). It
   reuses the panel's own section heading and the same half-star strip as the
   title panel; only the "what you just marked" header is new. */
.cn-rate-ask{ display:flex;align-items:center;gap:12px;margin-bottom:14px }
.cn-rate-ask-m{ display:flex;flex-direction:column;gap:3px;min-width:0 }
.cn-rate-ask-m b{ font:700 15px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-rate-ask-m span{ font:500 12px/1.4 var(--mk-font-ui);color:var(--fg-3) }
.cn-rate-ask-h{ margin-bottom:8px }
.cn-rate-ask-stars{ display:flex;align-items:center;gap:12px;user-select:none;touch-action:none;cursor:pointer;min-height:48px }
.cn-dist{ display:flex;flex-direction:column;gap:4px;margin-top:10px;max-width:340px }
.cn-dist-r{ display:flex;align-items:center;gap:9px }
.cn-dist-s{ display:inline-flex;align-items:center;gap:2px;width:26px;flex:0 0 auto;
  font:700 11px/1 var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums }
.cn-dist-s .mi{ font-size:12px;color:oklch(.75 .15 85) }
.cn-dist-bar{ flex:1;min-width:0;height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden }
.cn-dist-bar i{ display:block;height:100%;background:color-mix(in srgb,oklch(.75 .15 85) 72%,var(--bg-3)) }
.cn-dist-r b{ width:34px;text-align:end;flex:0 0 auto;font:700 11px/1 var(--mk-font-ui);color:var(--fg-3);
  font-variant-numeric:tabular-nums }
.cn-dist-r.on .cn-dist-bar i{ background:oklch(.75 .15 85) }
.cn-dist-r.on b,.cn-dist-r.on .cn-dist-s{ color:var(--fg-1) }
.cn-favbtn{ display:inline-flex;align-items:center;gap:7px }
.cn-chatbtn{ display:inline-flex;align-items:center;gap:8px }

/* episodes — B53-09: one collapsible box per season, markable as a whole */
.cn-sboxes{ display:flex;flex-direction:column;gap:8px }
.cn-sbox{ border:1px solid var(--border);border-radius:var(--mk-radius-md);background:var(--bg-1);overflow:hidden }
.cn-sbox.done{ border-color:color-mix(in srgb,oklch(.6 .13 155) 34%,var(--border)) }
.cn-sbox-hd{ display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer }
.cn-sbox-hd:hover{ background:var(--bg-2) }
.cn-sbox-hd:focus-visible{ outline:2px solid var(--accent);outline-offset:-2px }
.cn-sbox-cv{ font-size:18px;color:var(--fg-3);transition:transform .18s var(--mk-ease) }
.cn-sbox.open .cn-sbox-cv{ transform:rotate(90deg) }
html[dir="rtl"] .cn-sbox-cv{ transform:scaleX(-1) }
html[dir="rtl"] .cn-sbox.open .cn-sbox-cv{ transform:rotate(-90deg) }
.cn-sbox-hd b{ flex:1;min-width:0;font:700 12.5px/1.3 var(--mk-font-ui);color:var(--fg-1) }
/* the season-level mark control reads as the row's action, not as an episode's */
.cn-sbox-all{ margin-inline-start:2px }
.cn-sbox.done .cn-sbox-all{ color:oklch(.55 .13 155) }
.cn-sbox-n{ font:700 11px/1 var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums }
.cn-sbox .cn-eps{ padding:2px 10px 10px;border-top:1px solid var(--border) }
.cn-eps{ display:flex;flex-direction:column;gap:2px }
.cn-ep{ display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:10px }
.cn-ep:hover{ background:var(--bg-2) }
.cn-ep-k{ font:700 11.5px/1 var(--mk-font-ui);color:var(--fg-3);min-width:60px;letter-spacing:.02em }
.cn-ep-nm{ flex:1;min-width:0;font:500 12.5px/1.3 var(--mk-font-ui);color:var(--fg-1) }
.cn-ep.seen .cn-ep-nm{ color:var(--fg-3) }
.cn-ep-ck{ width:34px;height:34px;border:0;background:transparent;border-radius:50%;cursor:pointer;color:var(--fg-3);
  display:inline-flex;align-items:center;justify-content:center }
.cn-ep-ck .mi{ font-size:20px }
.cn-ep-ck:hover{ background:var(--bg-3);color:var(--fg-1) }
.cn-ep-ck.on{ color:oklch(.6 .13 155) }

/* comments */
.cn-cm{ padding:10px 0;border-bottom:1px solid var(--border) }
.cn-cm:last-of-type{ border-bottom:0 }
.cn-cm-hd{ display:flex;align-items:center;gap:8px }
.cn-cm-hd b{ font:700 12px/1.2 var(--mk-font-ui);color:var(--fg-1) }
.cn-cm-at{ margin-inline-start:auto;font:500 10.5px/1 var(--mk-font-ui);color:var(--fg-3) }
.cn-cm-sc{ display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;background:var(--bg-3);
  font:700 10px/1.6 var(--mk-font-ui);color:var(--fg-2) }
.cn-cm-sc .mi{ font-size:12px }
.cn-cm-tx{ font:500 12.5px/1.55 var(--mk-font-ui);color:var(--fg-1);margin:5px 0 0;text-wrap:pretty }
.cn-cm-acts{ margin-top:4px }
.cn-cm-rep{ display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:2px 0;cursor:pointer;
  font:600 10.5px/1 var(--mk-font-ui);color:var(--fg-3) }
.cn-cm-rep:hover{ color:oklch(.58 .18 25) }
.cn-cm-rep .mi{ font-size:13px }
.cn-cm-cover{ display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px 12px;border-radius:10px;
  background:repeating-linear-gradient(45deg,var(--bg-2) 0 8px,var(--bg-3) 8px 16px);
  font:600 11.5px/1.35 var(--mk-font-ui);color:var(--fg-2) }
.cn-cm-cover .mi{ font-size:16px;color:var(--fg-3) }
.cn-cm-show{ margin-inline-start:auto;border:1px solid var(--border);background:var(--bg-1);border-radius:999px;
  height:26px;padding:0 11px;cursor:pointer;font:600 11px/1 var(--mk-font-ui);color:var(--fg-1);flex:0 0 auto }
.cn-cm-new{ display:flex;align-items:center;gap:8px;margin-top:12px }
.cn-cm-in{ flex:1;min-width:0;height:38px;border:1px solid var(--border);border-radius:999px;padding:0 14px;
  background:var(--bg-1);color:var(--fg-1);font:500 12.5px/1 var(--mk-font-ui);outline:none }
.cn-cm-in:focus{ border-color:var(--accent) }
.cn-cm-scope{ display:inline-flex;align-items:center;gap:4px;padding:0 10px;height:30px;border-radius:999px;
  background:var(--bg-3);font:700 10.5px/30px var(--mk-font-ui);color:var(--fg-2) }
.cn-cm-scope .mi{ font-size:13px }

/* confirm sheet */
/* B55 (Pablo: "This modal is showing up behind the panel so I can't see half of
   it") — the sheet is raised ABOVE `.filter-panel` (z:260) and its own scrim is
   opaque enough to separate it from the panel underneath. `.modal-overlay` alone
   is z:250, i.e. *below* the panel that opens it, which is what put it behind. */
.cn-cf{ z-index:9400 }
.cn-cf.open{ z-index:9400 }
body:has(.cn-cf.open) #panelScrim{ z-index:239 }

/* B55 (Pablo: "The dice button should not be present in the middle of a game or
   when a panel is opened") — the Play entry stands down whenever something else
   owns the screen. The shared scrim is the one honest signal for that: every
   MoccaPanel and entity panel raises `#panelScrim.open`, and the game itself IS a
   panel now, so one rule covers "mid-game" and "a panel is open" alike. Declared
   in CSS with `:has()` rather than watched by an observer — no polling, and it can
   never fall out of sync with the panel that caused it. */
body:has(#panelScrim.open) #cnPlayWrap,
body:has(#panelScrim.open) #cnPlayFab,
body:has(.modal-overlay.open) #cnPlayWrap,
body:has(.modal-overlay.open) #cnPlayFab,
body:has(.wl-modal-scrim) #cnPlayWrap,
body:has(.wl-modal-scrim) #cnPlayFab{ display:none }
/* B63-009 — on mobile the shell's own floating create/actions button already
   opens Play for this route (`route-fab`, sections.js syncCreateControls), so
   the navbar pill is a second, redundant affordance there. */
@media (max-width:600px) and (orientation:portrait), (max-height:599px) and (orientation:landscape){
  #cnPlayWrap{ display:none !important }
}
.cn-cf-card{ width:min(420px,calc(100vw - 32px)) }
.cn-cf-b{ font:500 13px/1.55 var(--mk-font-ui);color:var(--fg-2);margin:0;text-wrap:pretty }
.cn-cf-ft{ display:flex;justify-content:flex-end;gap:8px }

/* ═══ PLAY — the two mini-games ═══════════════════════════════════════
   B54 (Pablo: "This shouldn't be a modal. It should be a side panel") — the
   game IS window.MoccaPanel now, so the shell rules (`.cn-play`,
   `.cn-play-body`, `.cn-play-ft`, `.cn-m-sub`) are gone with the modal they
   sized. What is left here is only what the panel does not already own. */
/* B57 — only the vote row is centred; a Cancel/Start pair sits exactly where it
   sits in every other panel footer (secondary leading, primary trailing). */
.cn-play-panel .panel-ft{ gap:10px;flex-wrap:wrap }
.cn-play-panel .panel-ft:has(.cn-vbtn){ justify-content:center;flex-direction:column;align-items:center;gap:8px }
.cn-vrow{ display:flex;justify-content:center;gap:10px;width:100% }
.cn-vrow .cn-vbtn{ flex:0 1 180px;justify-content:center }

/* setup step */
.cn-fl{ display:flex;flex-direction:column;gap:8px }
.cn-fl-t{ display:flex;align-items:center;gap:8px;font:700 12px/1 var(--mk-font-ui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--fg-2);margin-bottom:4px }
.cn-fl-t .mi{ font-size:16px;color:var(--fg-3) }
.cn-fl-l{ font:700 10.5px/1 var(--mk-font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin-top:10px }
/* B54 — the game's OWN dropdowns are gone. Genres and players are
   window.MoccaSelect (the one dropdown, multi + search), the medium segment and
   the genre list are paths in the shared condition tree, so `.cn-dd*` went with
   the controls it styled — as did `.cn-fl-med`, `.cn-fl-ppl` and `.cn-fl-p`. */
.cn-fl .cs.msel{ width:100% }
/* the conditions trigger: one row that says what it opens and how much is in it */
.cn-cond-btn{ display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px 8px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--bg-1);cursor:pointer;text-align:start }
.cn-cond-btn:hover{ border-color:var(--accent) }
.cn-cond-btn > .mi{ font-size:19px;color:var(--fg-3);flex:0 0 auto }
.cn-cond-tx{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px }
.cn-cond-tx b{ font:700 12.5px/1.2 var(--mk-font-ui);color:var(--fg-1) }
.cn-cond-tx span{ font:500 11px/1.35 var(--mk-font-ui);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.cn-cond-n:not(:empty){ min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--accent);
  color:var(--accent-contrast,#fff);font:800 11px/22px var(--mk-font-ui);text-align:center;flex:0 0 auto }
.cn-cond-go{ font-size:20px;color:var(--fg-3);flex:0 0 auto }
html[dir="rtl"] .cn-cond-go{ transform:scaleX(-1) }
.cn-cond-host{ display:block }
.cn-cond-ft-n{ font:600 11.5px/1 var(--mk-font-ui);color:var(--fg-3);margin-inline-start:auto }
/* the switch is the app's own `.ent-toggle`; it only needs its sub-line here */
.cn-tgl{ margin-top:4px;align-items:flex-start;gap:14px }
.cn-tgl .ent-toggle-l{ display:flex;flex-direction:column;gap:3px }
.cn-tgl .ent-toggle-l i{ font:500 11px/1.4 var(--mk-font-ui);color:var(--fg-3);font-style:normal;max-width:42ch }
.cn-fl-u{ font:600 11px/1 var(--mk-font-ui);color:var(--fg-3);flex:0 0 auto }
.cn-fl-note{ font:600 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3);margin-top:6px }
.cn-res-note{ text-align:center;margin-top:10px }
.cn-fl-range{ display:flex;align-items:center;gap:12px }
.cn-fl-range input[type="range"]{ flex:1;min-width:120px;accent-color:var(--accent) }
.cn-fl-range b{ width:34px;text-align:end;font:800 13px/1 var(--mk-font-ui);color:var(--fg-1);
  font-variant-numeric:tabular-nums }

/* deck step */
/* B53-10 — the counter is a caption ABOVE the stack (Pablo: "This label is not
   inside or outside the card, it's in weird in-between"). */
.cn-deck-top{ display:flex;align-items:center;gap:12px;margin-bottom:10px }
.cn-deck-top b{ font:700 12px/1 var(--mk-font-ui);color:var(--fg-2);font-variant-numeric:tabular-nums;flex:0 0 auto }
.cn-deck-top .cn-bar{ flex:1;max-width:none }
/* B55 (Pablo: "This card could take up more space if the panel has space
   available. Otherwise it looks empty" + "now that the buttons are gone, the card
   of the movie/show feels aligned too much to the top") — the deck CLAIMS the
   panel's spare height and centres in it, and the card grows with it: the poster
   is the flexible part, the meta block keeps its size. The old fixed 372px deck
   with a 258px poster left a dead band under the card whenever the panel was
   taller, and pinned everything to the top once the button row went away. */
.cn-play-panel .ent-panel-body,
.cn-play-panel .panel-body{ display:flex;flex-direction:column;min-height:0 }
.cn-deck{ position:relative;flex:1 1 auto;min-height:300px;display:flex;
  align-items:center;justify-content:center }
.cn-swipe{ position:absolute;width:min(320px,86%);max-height:100%;border-radius:16px;
  display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--border);
  box-shadow:0 18px 40px rgba(10,16,20,.22);overflow:hidden;touch-action:none;cursor:grab }
/* the poster absorbs the spare height; it never dictates the card's size */
.cn-swipe .cn-poster{ border-radius:0;width:100%;aspect-ratio:auto;flex:1 1 auto;min-height:180px;height:auto }
/* the card states the name once, under the art — not twice */
.cn-swipe .cn-po-nm{ display:none }
.cn-swipe.back{ pointer-events:none;opacity:.5 }
.cn-swipe.back.b1{ transform:translateY(10px) scale(.96) }
.cn-swipe.back.b2{ transform:translateY(20px) scale(.92) }
.cn-swipe.drag{ cursor:grabbing;transition:none }
.cn-swipe.live{ transition:transform .18s ease }
.cn-swipe-meta{ padding:11px 14px 13px;display:flex;flex-direction:column;gap:3px;flex:0 0 auto }
.cn-swipe-meta p{ margin:6px 0 0;font:500 12px/1.45 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden }
.cn-swipe-meta b{ font:800 15px/1.2 var(--mk-font-ui);color:var(--fg-1) }
/* B62 — this slot is CONTENT, not a caption: on a title card it is the year and
   genre, on a meal card the dish's ingredients. --fg-3 measures 2.54:1 on the
   card's white at 11.5px, which is body scale, so it takes --fg-2 (~7:1). */
.cn-swipe-meta span{ font:500 11.5px/1.3 var(--mk-font-ui);color:var(--fg-2) }
/* B60 - the franchise card. The badge rides the poster so the first thing read is
   WHAT is being voted on ("it needs to be very clear to everyone that this is a vote
   for the franchise"); the start line under the meta answers the Kill Bill problem in
   one sentence: which title, its place in the chronology, and why there. */
.cn-fr-flag{ position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 88%,#000 12%);color:var(--accent-fg,#04282b);
  font:800 10.5px/1 var(--mk-font-ui);letter-spacing:.02em;box-shadow:0 4px 14px rgba(13,37,48,.28) }
.cn-fr-flag .mi{ font-size:14px }
.cn-fr-flag i{ font:600 10px/1 var(--mk-font-ui);font-style:normal;opacity:.78 }
.cn-fr-start{ display:flex;flex-direction:column;gap:2px;margin-top:7px;padding:7px 9px;border-radius:9px;
  background:color-mix(in srgb,var(--accent) 9%,transparent);position:relative;padding-inline-start:30px }
.cn-fr-start .mi{ position:absolute;inset-inline-start:8px;top:7px;font-size:16px;color:var(--accent-text,var(--accent)) }
.cn-fr-start b{ font:700 12px/1.3 var(--mk-font-ui);color:var(--fg-1) }
.cn-fr-start i{ font:500 11px/1.35 var(--mk-font-ui);font-style:normal;color:var(--fg-3) }
.cn-swipe-meta p{ margin:6px 0 0;font:500 12px/1.5 var(--mk-font-ui);color:var(--fg-2);text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
/* B55 — the stamp's POSITION comes from the gesture direction (`.d-left` /
   `.d-right` / `.d-down`) and its COLOUR from the vote, so re-mapping an action to
   a different swipe needs no CSS change. Nothing sits at the top: up is not a
   gesture (Pablo: "the card is sweeped to the top. But that's not an action"). */
.cn-swipe-stamp{ position:absolute;width:44px;height:44px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .12s ease;z-index:4 }
.cn-swipe-stamp .mi{ font-size:22px }
.cn-swipe-stamp.d-left{ inset-block-start:14px;inset-inline-start:14px }
.cn-swipe-stamp.d-right{ inset-block-start:14px;inset-inline-end:14px }
/* B58 (Pablo: "the icon that shows up while swiping to the bottom shows up very
   late and below the card not on top of it") — it was pinned to the card's bottom
   edge, which is where the title/meta strip lives, so it read as sitting UNDER the
   card. It now floats over the POSTER, centred, on the same z-layer as the other
   two stamps. (The "late" half is the gesture threshold, in content-play.js.) */
.cn-swipe-stamp.d-down{ inset-block-start:58%;inset-inline-start:50%;transform:translate(-50%,-50%) }
/* B58 (Pablo: "there is an X icon but it's white", "there's a red icon but it
   should be blue for Save") — a stamp's colour is the colour of the action it
   commits, and it must match the side glow and the button:
     · Pass  → the app's danger red (it was a translucent grey-white wash)
     · Save  → blue, and "save" is the DOWN gesture in both games, so the colour
       keys off the direction: down is always the save blue, while a rightward
       `yes` ("Want it" in the group game) keeps its own hue. */
/* B59 (Pablo: "When swiping to the right, I get the right icon but it gets colored
   red when it should be green") — a RIGHTWARD vote is affirmative in both games
   (solo commits "Watched", the group game commits "Want it"), and the affirmative
   tone in this app is the content green. It was painting oklch(.6 .17 15), a red,
   which put the SAME colour on the right gesture as on the leftward pass — two
   opposite gestures reading identically — and it also disagreed with its own side
   glow, which was already using the accent rather than red. Red is now reserved for
   `no`, exactly as `--mk-danger` is everywhere else. */
.cn-swipe-stamp.yes, .cn-swipe-stamp.seen{ background:oklch(.58 .13 155) }
.cn-swipe-stamp.no{ background:var(--mk-danger) }
.cn-swipe-stamp.later,
.cn-swipe-stamp.d-down{ background:var(--cn-save) }
.cn-swipe[data-hint="yes"] .cn-swipe-stamp.yes,
.cn-swipe[data-hint="no"] .cn-swipe-stamp.no,
.cn-swipe[data-hint="seen"] .cn-swipe-stamp.seen,
.cn-swipe[data-hint="later"] .cn-swipe-stamp.later{ opacity:1 }
.cn-swipe.fly-right{ transform:translateX(120%) rotate(18deg);opacity:0 }
.cn-swipe.fly-left{ transform:translateX(-120%) rotate(-18deg);opacity:0 }
.cn-swipe.fly-down{ transform:translateY(120%);opacity:0 }
.cn-swipe.ghost{ pointer-events:none;z-index:3;transition:transform .34s var(--mk-ease), opacity .34s ease }
.cn-vbtn{ display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);cursor:pointer;font:700 12.5px/1 var(--mk-font-ui);color:var(--fg-1) }
.cn-vbtn .mi{ font-size:18px }
/* B53-10 (Pablo: "The color of 'Add to playlist' shouldn't be red, that should
   probably be Pass. This color should probably be the primary color of the app
   and be on the center of the buttons") — pass is the destructive one, the
   playlist is the primary action, and the markup puts it in the middle. */
.cn-vbtn.no{ background:var(--mk-danger);border-color:transparent;color:#fff }
.cn-vbtn.yes{ background:var(--accent);border-color:transparent;color:var(--accent-contrast,#fff) }
.cn-vbtn.seen{ background:oklch(.58 .13 155);border-color:transparent;color:#fff }
/* the third option is deliberately NEUTRAL — it is neither a want nor a pass */
.cn-vbtn.later{ background:var(--bg-2);border-color:var(--border);color:var(--fg-1) }
.cn-vbtn:hover{ filter:brightness(1.05) }

/* ── B54 · swipe sides ────────────────────────────────────────────────
   (Pablo: "when I'm dragging a card, we could show a colored shadow to the
   available sides (left/bottom/right) with the label of the action and the
   colour that the button would've had".) The three sides live in the deck at
   opacity 0 and light up while a card travels — the one the gesture would
   commit goes to full strength. Same colours as the buttons, by definition. */
.cn-sides{ position:absolute;inset:0;pointer-events:none;z-index:0 }
.cn-side{ position:absolute;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;
  border-radius:999px;color:#fff;font:800 11.5px/1 var(--mk-font-ui);letter-spacing:.02em;
  opacity:0;transform:scale(.9);transition:opacity .14s ease,transform .14s ease }
.cn-side .mi{ font-size:16px }
/* the side's POSITION is its direction; its COLOUR is the vote it commits */
.cn-side.d-left{ inset-inline-start:0;inset-block-start:50%;translate:0 -50% }
.cn-side.d-right{ inset-inline-end:0;inset-block-start:50%;translate:0 -50% }
.cn-side.d-down{ inset-block-end:0;inset-inline-start:50%;translate:-50% 0 }
/* B58 — down is "save it" in both games, and save is blue (same token the stamp
   uses), so the glow, the stamp and the button agree. */
.cn-side.d-down{ background:var(--cn-save);
  box-shadow:0 0 46px 18px color-mix(in srgb,var(--cn-save) 42%,transparent) }
.cn-side-no{ background:var(--mk-danger);
  box-shadow:0 0 46px 18px color-mix(in srgb,var(--mk-danger) 42%,transparent) }
/* the side glow agrees with the stamp: same green, one story per gesture. */
.cn-side-yes{ background:oklch(.58 .13 155);
  box-shadow:0 0 46px 18px color-mix(in srgb,oklch(.58 .13 155) 42%,transparent) }
.cn-side-later{ background:var(--fg-2);
  box-shadow:0 0 46px 18px color-mix(in srgb,var(--fg-2) 34%,transparent) }
.cn-side-seen{ background:oklch(.58 .13 155);
  box-shadow:0 0 46px 18px color-mix(in srgb,oklch(.58 .13 155) 42%,transparent) }
.cn-deck.dragging .cn-side{ opacity:.45;transform:scale(1) }
.cn-deck.dragging[data-hint="no"] .cn-side-no,
.cn-deck.dragging[data-hint="yes"] .cn-side-yes,
.cn-deck.dragging[data-hint="later"] .cn-side-later,
.cn-deck.dragging[data-hint="seen"] .cn-side-seen{ opacity:1;transform:scale(1.06) }
/* On a TOUCHSCREEN the gesture IS the control, so the button row goes away —
   in the real app (coarse pointer) and inside the preview dock's touch mode
   (`html.mk-pv-touch`, set by preview-variants.js) alike. */
@media (pointer:coarse){
  .cn-play-panel .panel-ft .cn-vbtn{ display:none }
  .cn-play-panel .panel-ft:has(.cn-vbtn){ display:none }
}
html.mk-pv-touch .cn-play-panel .panel-ft .cn-vbtn{ display:none }
html.mk-pv-touch .cn-play-panel .panel-ft:has(.cn-vbtn){ display:none }

/* ── waiting screens · B54 ────────────────────────────────────────────
   The lobby and the two "the others are still playing" screens are ONE
   component: spinner, count, progress bar, and a row per invited player. */
.cn-wait{ display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 6px 10px }
.cn-spin{ width:34px;height:34px;border-radius:50%;border:3px solid var(--border);
  border-top-color:var(--accent);animation:cnSpin .8s linear infinite }
@keyframes cnSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .cn-spin{ animation-duration:2.4s } }
.cn-wait-t{ font:800 15px/1.25 var(--mk-font-ui);color:var(--fg-1);margin-top:4px }
.cn-wait-s{ font:500 12px/1.45 var(--mk-font-ui);color:var(--fg-3);text-align:center;max-width:44ch;text-wrap:pretty }
.cn-wait-bar{ width:min(320px,100%);max-width:none;margin-top:6px }
.cn-wait-n{ font:800 12px/1 var(--mk-font-ui);color:var(--fg-2);font-variant-numeric:tabular-nums }
.cn-wait-list{ width:100%;display:flex;flex-direction:column;gap:4px;margin-top:12px }
.cn-wait-row{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;background:var(--bg-2) }
.cn-wait-row.on{ background:color-mix(in srgb,var(--accent) 9%,transparent) }
.cn-wait-nm{ flex:1;min-width:0;font:600 12.5px/1.3 var(--mk-font-ui);color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.cn-wait-st{ font:700 10.5px/1 var(--mk-font-ui);color:var(--fg-3);letter-spacing:.03em;text-transform:uppercase }
.cn-wait-ic{ font-size:18px;color:var(--fg-3) }
.cn-wait-row.on .cn-wait-ic{ color:oklch(.6 .13 155) }
.cn-wait-row.on .cn-wait-st{ color:oklch(.5 .12 155) }

/* ── tie-break · B54 ─────────────────────────────────────────────────
   "each user will take all the movies that had a tie and sort them in order of
   which one they would like to see first" — a reorderable list, by grip drag or
   by the two arrows (which is also the only accessible way to do it). */
.cn-tie{ display:flex;flex-direction:column;gap:8px }
.cn-tie-hd{ display:flex;flex-direction:column;gap:4px }
.cn-tie-hd b{ font:800 15px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-tie-hd span{ font:500 12px/1.5 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty }
.cn-tie-first{ display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:3px 10px;
  border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);
  font:700 10.5px/1.7 var(--mk-font-ui);color:var(--accent-text,var(--accent)) }
.cn-tie-first .mi{ font-size:13px }
.cn-tie-list{ display:flex;flex-direction:column;gap:6px }
/* ── B59 — the tie list flows (Pablo: "a bit janky … I want it to flow smoothly")
   Every row carries the transition; the DRAGGED row overrides it to none, because a
   transition on the element tracking the pointer IS the lag. The whole row is the
   handle now that the sort arrows are gone, so it grabs rather than points. */
.cn-tie-row{ display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);
  border-radius:12px;background:var(--bg-1);touch-action:none;cursor:grab;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .15s ease,box-shadow .18s ease }
.cn-tie-row:hover{ border-color:color-mix(in srgb,var(--accent) 40%,var(--border)) }
.cn-tie-list.dragging .cn-tie-row{ user-select:none }
.cn-tie-row.drag{ border-color:var(--accent);box-shadow:0 14px 30px -12px rgba(13,37,48,.4);
  position:relative;z-index:3;cursor:grabbing;transition:none;will-change:transform }
.cn-tie-row.drag .cn-tie-grip{ color:var(--accent) }
/* B63-051 — native HTML5 drag-and-drop reorder (the same working pattern the
   dashboard's own widget reorder uses, `dashboard-editor.js`'s `wireDrag`)
   replaced the broken pointer-capture version; this is the drop-target cue. */
.cn-tie-row.drag-over{ border-color:var(--accent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 50%,transparent) }
@media (prefers-reduced-motion:reduce){ .cn-tie-row{ transition:none } }
.cn-tie-grip{ font-size:18px;color:var(--fg-3);flex:0 0 auto }
/* Audit S9 · B63-051 — the grip is MoccaSortable's handle: a real button with a
   finger-sized target; touch-action:none so a finger drags instead of scrolling */
button.cn-tie-grip{ width:36px;height:36px;margin:-6px -4px -6px -6px;display:grid;place-items:center;border:0;background:none;border-radius:10px;cursor:grab;touch-action:none;padding:0 }
button.cn-tie-grip:active{ cursor:grabbing }
.cn-tie-grip > .mi{ font-size:20px }
.cn-tie-row.dragging{ opacity:.55;border-color:var(--accent) }
.cn-tie-row.drop-before{ box-shadow:inset 0 3px 0 var(--accent) }
.cn-tie-row.drop-after{ box-shadow:inset 0 -3px 0 var(--accent) }
.cn-tie-n{ width:20px;text-align:center;font:800 12px/1 var(--mk-font-ui);color:var(--fg-3);flex:0 0 auto }
.cn-tie-po{ flex:0 0 auto;display:block }
.cn-tie-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px }
.cn-tie-main b{ font:700 12.5px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-tie-main span{ font:500 11px/1.3 var(--mk-font-ui);color:var(--fg-3) }
/* B59 — `.cn-tie-acts` / `.cn-tie-mv` deleted with the sort arrows they styled. */


/* results */
.cn-res{ display:flex;flex-direction:column;gap:4px }
.cn-res-row{ display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px }
.cn-res-row.win{ background:color-mix(in srgb,var(--accent) 10%,transparent) }
.cn-res-rank{ width:22px;text-align:center;font:800 12px/1 var(--mk-font-ui);color:var(--fg-3) }
.cn-res-crown{ width:22px;font-size:19px;color:oklch(.75 .15 85) }
.cn-res-main{ flex:1;min-width:0;display:flex;flex-direction:column;gap:3px }
.cn-res-main b{ font:700 13px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-res-main span{ font:500 11px/1.3 var(--mk-font-ui);color:var(--fg-3) }
.cn-res-av{ display:flex;flex-direction:row-reverse }
.cn-res-av .av{ width:26px;height:26px;font-size:10px;margin-inline-start:-6px;border:2px solid var(--bg-1) }
.cn-res-more{ background:var(--bg-3)!important;color:var(--fg-2) }
.cn-res-tag{ padding:3px 10px;border-radius:999px;font:700 10.5px/1.5 var(--mk-font-ui);background:var(--bg-3);color:var(--fg-2) }
.cn-res-tag.yes{ background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text,var(--accent)) }
.cn-res-tag.seen{ background:color-mix(in srgb,oklch(.6 .13 155) 18%,transparent);color:oklch(.48 .12 155) }
/* B54 (Pablo: "remove the border and the background, it would look cooler for
   the content image rectangle to float by itself with just a shadow") — the
   result rows' poster button loses its chrome; the artwork carries the shadow. */
.cn-res .cn-hist-po,.cn-tie-po{ border:0;background:transparent;padding:0;cursor:pointer;
  border-radius:8px;filter:drop-shadow(0 6px 14px rgba(10,16,20,.28)) }
.cn-res .cn-hist-po:hover{ filter:drop-shadow(0 9px 18px rgba(10,16,20,.36)) }
.cn-res-why{ font-style:normal;font-weight:700;color:var(--fg-2) }

/* ═══ SPOILER-SCOPED CHAT ═════════════════════════════════════════════ */
/* the chat is a SLIDE of the title panel now (B53-04) — `.cn-chat` and
   `.cn-chat-body`, the modal shell it used to need, are gone. */
.cn-chat-list{ display:flex;flex-direction:column;gap:10px }
.cn-msg{ max-width:86%;padding:10px 12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--border) }
.cn-msg.me{ align-self:flex-end;background:color-mix(in srgb,var(--accent) 12%,var(--bg-1));border-color:transparent }
.cn-msg-hd{ display:flex;align-items:center;gap:8px }
.cn-msg-hd b{ font:700 11.5px/1.2 var(--mk-font-ui);color:var(--fg-1) }
.cn-msg-tx{ margin:5px 0 0;font:500 12.5px/1.5 var(--mk-font-ui);color:var(--fg-1);text-wrap:pretty }
.cn-msg-flag{ display:inline-flex;align-items:center;gap:4px;margin-top:5px;font:700 10px/1 var(--mk-font-ui);color:oklch(.58 .16 55) }
.cn-msg-flag .mi{ font-size:13px }
.cn-chat-cmp{ display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:var(--bg-2) }
/* The slide's own footer IS the composer's container — the parts go straight
   into `.panel-ft` so there is no box inside a box. */
.mp-panel .panel-ft.cn-cmp-ft{ gap:8px;justify-content:flex-start }
/* B54 — the composer here is the SHARED one (window.MoccaRichComposer), and the
   spoiler scope is the SHARED dropdown. The chip that stepped forward an episode
   per click (`.cn-chat-scope`) is gone, so the footer stacks: scope row, then
   the composer at full width. */
.mp-panel .panel-ft.cn-cmp-ft{ flex-direction:column;align-items:stretch }
.cn-cmp-ft .composer{ width:100% }
.cn-cmp-ft .ast-input{ min-height:44px;max-height:32vh;overflow:auto }
.cn-cmp-scope{ display:flex;align-items:center;gap:8px;min-width:0 }
.cn-cmp-scope-l{ display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  font:700 10.5px/1 var(--mk-font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3) }
.cn-cmp-scope-l .mi{ font-size:14px }
.cn-cmp-scope .cs.msel{ flex:1;min-width:0 }

@media (max-width:700px){
  .cn-deck{ min-height:280px }
  .cn-swipe{ width:min(300px,84%) }
  .cn-vbtn{ flex:1;justify-content:center;min-width:44px;padding:0 12px }
  .cn-cond-btn{ min-height:56px }
  .cn-cmp-ft .btn{ min-height:44px }
}

/* ── mobile: the 44px floor pinned at the WIDTH, not only pointer:coarse
      (B51-01 trap 4 — a coarse-pointer-only floor never fires in a resized
      desktop browser and reads as broken at 390px). ─────────────────── */
@media (max-width:700px){
  .cn-grid{ grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:14px 12px }
  .cn-cont-row{ flex-wrap:wrap }
  .cn-mark{ width:100%;min-height:44px;justify-content:center }
  .cn-hero{ flex-direction:column;align-items:stretch }
  .cn-poster.lg{ width:132px;flex:0 0 auto;align-self:flex-start }
  .cn-ep-ck,.cn-fav{ width:44px;height:44px;min-width:44px }
  /* B51 sweep — the franchise chip is the only way into a collection, so it
     keeps the full 44px floor; the country dropdown is a real control and takes
     it too. */
  .cn-hero-fr{ height:44px }
  .cn-sbox-hd{ min-height:48px }
  .cn-hero-acts .btn{ min-height:44px }
  .cn-cm-in{ height:44px }
  .cn-cm-new .btn{ min-height:44px }
  .cn-stars.lg .mi{ font-size:34px }
}

/* ══ B57 ═══════════════════════════════════════════════════════════════════ */

/* The swipe card is TALL wherever there is height to use. Pablo: "The title card
   should only take this aspect ratio on mobile landscape. Giving that on tablet
   and desktop there's a panel and on mobile portrait the screen is tall by
   default then we should take advantage of the space showing a tall title card."
   So the poster keeps the catalogue's own 2/3 poster ratio (it can still SHRINK
   inside a short card — `flex:0 1 auto` — so the card never overflows), and the
   short, landscape-shaped card is the mobile-landscape exception, declared once,
   below. */
.cn-swipe{ width:min(340px,86%) }
.cn-swipe .cn-poster{ aspect-ratio:2/3;flex:0 1 auto;height:auto;min-height:0 }
@media (orientation:landscape) and (max-height:599px){
  .cn-deck{ min-height:0 }
  .cn-swipe{ width:min(320px,80%) }
  .cn-swipe .cn-poster{ aspect-ratio:auto;flex:1 1 auto;min-height:110px }
}

/* where to watch, compact (the winning row of the group game) */
.cn-res-where{ display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px }
/* B60 (Pablo: "This 'WHERE TO WATCH' label looks bad and why is it all caps? Looks
   really weird. I just want to know where to watch it not have a message scream at
   me") \u2014 it was a .mk-micro-style overline (700/10px, uppercase, tracked out) on a
   line that is not an eyebrow: it just names the chips beside it. Sentence case, the
   weight of a caption, no tracking. */
.cn-res-where-l{ font:500 11.5px/1.35 var(--mk-font-ui);letter-spacing:0;text-transform:none;color:var(--fg-3) }
.cn-avs{ display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px }
.cn-avchip{ display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-1);font:600 11px/1 var(--mk-font-ui);color:var(--fg-1) }
.cn-avchip-mk{ width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font:800 8.5px/1 var(--mk-font-ui);letter-spacing:.02em }
.cn-avchip b{ font:700 10.5px/1 var(--mk-font-ui);color:var(--fg-2);font-variant-numeric:tabular-nums }
.cn-avmore,.cn-avnone{ font:600 10.5px/1 var(--mk-font-ui);color:var(--fg-3) }

/* the comment composer IS the shared rich composer — the box is its container,
   not a second frame around it */
.cn-cm-new{ display:block;margin-top:10px }
.cn-cm-new .composer{ width:100% }
.cn-cm-new .ast-input{ min-height:44px;max-height:30vh;overflow:auto }
.cn-cm-atts{ display:flex;flex-wrap:wrap;gap:6px;margin-top:6px }

/* the prototype-only sample note on a starved solo deck */
.cn-demo-note{ display:flex;align-items:center;gap:7px;margin-bottom:8px }
.cn-demo-note .mi{ font-size:15px;color:var(--fg-3) }

/* ══ B61 — the after-watch prompt is a small MODAL ════════════════════════
   Pablo: "When I mark a show as watched on solo play, I don't need a full new
   slide to mark it as favorite or not. A simple confirmation pop up would
   suffice with two buttons for this one. Actually for rating with stars a modal
   could also be better. Feels like the flow isn't as long to the customer."
   The shell is the app's own .modal-overlay + .panel-card; only the inner
   three-part rhythm (who · what we are asking · the answer) is local. */
.cn-ask-ov{ align-items:center;justify-content:center;z-index:290;
  background:color-mix(in srgb, var(--scrim) 55%, transparent);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px) }
.cn-ask-card{ width:min(400px, calc(100vw - 32px));display:flex;flex-direction:column;gap:14px;
  padding:18px }
.cn-ask-hd{ display:flex;align-items:center;gap:12px;min-width:0 }
.cn-ask-t{ display:flex;flex-direction:column;gap:3px;min-width:0 }
.cn-ask-t b{ font:700 14.5px/1.25 var(--mk-font-ui);color:var(--fg-1) }
.cn-ask-t span{ font:500 11.5px/1.45 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty }
.cn-ask-q{ display:flex;align-items:center;gap:8px;font:700 13px var(--mk-font-ui);color:var(--fg-1) }
.cn-ask-q .mi{ font-size:18px;color:var(--accent-text,var(--accent)) }
.cn-ask-body{ display:flex;justify-content:center }
.cn-ask-ft{ display:flex;align-items:center;justify-content:flex-end;gap:8px }
@media (pointer:coarse){ .cn-ask-ft > *{ min-height:44px } }
@media (max-width:600px){
  .cn-ask-ov{ align-items:flex-end }
  .cn-ask-card{ width:100%;border-radius:16px 16px 0 0 }
}
/* B61 — the franchise mark: three offset cards and a count, instead of two lines
   of prose plus an account_tree glyph (Pablo: "Too long of an explanation for a
   franchise. Not a fan of the icon. Try to be more minimal and visual"). */
.cn-fr-flag{ position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:999px;
  background:color-mix(in srgb, var(--bg-1) 88%, transparent);
  box-shadow:0 1px 6px rgba(13,37,48,.16), inset 0 0 0 1px color-mix(in srgb,var(--fg-1) 8%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px) }
.cn-fr-flag b{ font:800 11.5px/1 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums }
.cn-fr-stack{ position:relative;width:15px;height:13px;flex:0 0 auto }
.cn-fr-stack::before,.cn-fr-stack::after,.cn-fr-stack{ box-sizing:border-box }
.cn-fr-stack::before,.cn-fr-stack::after{ content:'';position:absolute;width:9px;height:12px;
  border-radius:2px;border:1.5px solid var(--fg-3);background:var(--bg-1) }
.cn-fr-stack::before{ inset-inline-start:0;top:1px;opacity:.5 }
.cn-fr-stack::after{ inset-inline-start:4px;top:0;border-color:var(--accent-text,var(--accent)) }

/* ═══ Audit A — B62 § CX: books, cast & crew, conversations, journal ═══════
   Everything below is laid on components the app already owns: the season box
   (`.cn-sbox`) for chapters, `.wl-sumbox` for every "box that opens a slide"
   (B61's standard), the chat bubble (`.cn-msg`) for threads, the shared
   dropdown for the year and the shared rich composer for sending. */
.cn-ep-open{ text-align:start;border:0;background:none;padding:0;cursor:pointer; }
.cn-ep-open:hover{ color:var(--accent-text);text-decoration:underline;text-underline-offset:3px; }
.cn-year{ display:flex;align-items:center;gap:8px;margin-top:10px;font:600 12px var(--mk-font-ui);color:var(--fg-2);flex-wrap:wrap; }
.cn-year > .mi{ font-size:17px;color:var(--accent-text); }
.cn-year .cs{ min-width:120px; }
.cn-cast{ display:flex;flex-direction:column;gap:2px;margin-top:10px; }
.cn-cast-row{ display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:10px;min-width:0; }
.cn-cast-row + .cn-cast-row{ border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent); }
.cn-cast-row .av{ flex:0 0 auto;color:#fff;font-weight:700; }
.cn-cast-main{ display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto; }
.cn-cast-main b{ font:600 13px/1.25 var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cn-cast-roles{ font:500 11.5px/1.35 var(--mk-font-ui);color:var(--fg-3); }
.cn-cast-cr{ display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:0 1 auto;max-width:48%; }
.cn-talk-row{ width:100%;margin-top:10px;display:flex;align-items:center;gap:12px;text-align:start;cursor:pointer; }
.cn-talk-ic{ width:34px;height:34px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-text);font-size:19px; }
.cn-talk-pub .cn-talk-ic{ background:color-mix(in srgb,#7A5CFA 16%,transparent);color:#7A5CFA; }
html[data-theme="dark"] .cn-talk-pub .cn-talk-ic{ color:#b9a8ff; }
.cn-talk-go{ margin-inline-start:auto;color:var(--fg-3);font-size:20px;flex:0 0 auto; }
html[dir="rtl"] .cn-talk-go{ transform:scaleX(-1); }
.cn-talk-un{ min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;flex:0 0 auto;
  background:var(--accent);color:var(--accent-fg,#04282b);font:800 11px var(--mk-font-ui); }
.cn-talk-acts{ display:flex;flex-wrap:wrap;gap:8px; }
.cn-talk-list{ display:flex;flex-direction:column; }
.cn-talk-list .cn-talk-row{ margin-top:8px; }
.cn-talk-avs{ display:inline-flex;align-items:center;flex:0 0 auto;min-width:34px; }
.cn-talk-avs .av.xs + .av.xs{ margin-inline-start:-7px;border:1.5px solid var(--bg-1); }
.cn-talk-side{ display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font:600 11px var(--mk-font-ui);color:var(--fg-3);font-variant-numeric:tabular-nums; }
.cn-talk-ep{ display:inline-flex;align-items:center;gap:3px;margin-inline-start:6px;padding:1px 6px;border-radius:6px;background:var(--bg-input);
  font:700 10px var(--mk-font-ui);color:var(--fg-2);vertical-align:middle; }
.cn-talk-ep .mi{ font-size:12px; }
.cn-talk-people{ display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:6px; }
.cn-thread{ gap:3px; }
.cn-tmsg{ display:flex;align-items:flex-end;gap:7px;max-width:88%;margin-top:7px; }
.cn-tmsg.cont{ margin-top:0;padding-inline-start:27px; }
.cn-tmsg.me{ align-self:flex-end;flex-direction:row-reverse; }
.cn-tmsg.me.cont{ padding-inline-start:0; }
.cn-tmsg .av{ flex:0 0 auto; }
.cn-tmsg .cn-msg{ max-width:100%;padding:8px 11px; }
.cn-tmsg .cn-msg-tx{ margin:0; }
.cn-tmsg .cn-msg-hd + .cn-msg-tx{ margin-top:3px; }
.cn-day{ display:flex;justify-content:center;margin:12px 0 4px; }
.cn-day span{ padding:3px 10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);font:700 10.5px var(--mk-font-ui);color:var(--fg-3); }
.cn-journal{ display:flex;flex-direction:column;gap:10px;height:100%; }
.cn-journal-lock{ display:inline-flex;align-items:center;gap:6px;font:600 12px var(--mk-font-ui);color:var(--fg-3); }
.cn-journal-lock .mi{ font-size:16px; }
.cn-journal-saved{ color:var(--mk-ok,#1f9d6b); }
.cn-journal-ta{ flex:1 1 auto;min-height:260px;resize:vertical;font:400 14px/1.6 var(--mk-font-ui);padding:14px; }
.cn-ep-hero{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.cn-ep-hero b{ font:700 15px var(--mk-font-ui); }
@media (max-width:600px){
  .cn-cast-cr{ max-width:40%; }
  .cn-talk-people{ grid-template-columns:1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   B65 W7 — Content (both apps)
   ═════════════════════════════════════════════════════════════════ */
/* provider logos (R2 "HBO Max needs a logo too") — the marks are dark on
   transparent, so they always sit on a white chip, in both themes */
.cn-logo{ display:inline-grid;place-items:center;flex:0 0 auto;height:26px;min-width:44px;padding:0 9px;border-radius:8px;background:#fff;border:1px solid rgba(20,10,40,.1); }
.cn-logo > img{ display:block;height:14px;width:auto;max-width:74px; }
.cn-logo.sm{ height:20px;min-width:34px;padding:0 6px;border-radius:6px; }
.cn-logo.sm > img{ height:11px;max-width:54px; }
.cn-logo.md{ height:32px;min-width:64px;padding:0 12px;border-radius:10px; }
.cn-logo.md > img{ height:17px;max-width:92px; }
.cn-logo.sn{ height:28px;min-width:52px;padding:0 10px;border-radius:10px;border:0; }
.cn-logo.sn > img{ height:15px;max-width:80px; }
.cn-of-nm:empty{ flex:1; }
.cn-avchip{ padding:2px 8px 2px 2px; }
.cn-avchip:has(> b:only-of-type), .cn-avchip.stream{ padding-inline-end:2px; }

/* 096 — the month you watched / read it (a chip that opens the month picker) */
.cn-when{ display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:var(--bg-1);
  color:var(--fg-2);font:600 11.5px var(--mk-font-ui);cursor:pointer;flex:0 0 auto;white-space:nowrap; }
.cn-when:hover{ border-color:var(--accent);color:var(--fg-1); }
.cn-when > .mi{ font-size:15px;color:var(--accent-text,var(--accent)); }
.cn-when > .cn-when-cv{ font-size:16px;color:var(--fg-3); }
.cn-hist-row .cn-when{ margin-inline-start:auto; }
.cn-hist-row .cn-when + .cn-hist-rate, .cn-hist-row .cn-when + .cn-fav{ margin-inline-start:0; }
/* on a phone the month sits under the title, so the name keeps its width */
@media (max-width:560px){
  .cn-hist-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"po main side" "po when side"; column-gap:12px; row-gap:4px; align-items:center; }
  .cn-hist-row > .cn-hist-po{ grid-area:po; }
  .cn-hist-row > .cn-hist-main{ grid-area:main; align-self:end; }
  .cn-hist-row > .cn-when{ grid-area:when; justify-self:start; align-self:start; margin:0; height:26px; }
  .cn-hist-row > .cn-hist-rate, .cn-hist-row > .cn-fav{ grid-area:side; }
}

/* 020 — a person is a button; their slide lists everything they were in */
button.cn-cast-row{ width:100%;border:0;background:none;text-align:start;cursor:pointer;font:inherit;color:inherit; }
button.cn-cast-row:hover{ background:var(--bg-2); }
button.cn-cast-row:focus-visible{ outline:2px solid var(--accent);outline-offset:-2px; }
.cn-cast-go{ font-size:18px;color:var(--fg-3);flex:0 0 auto; }
.cn-person-hd{ display:flex;align-items:center;gap:14px;padding:4px 2px 14px; }
.cn-person-hd .av.lg{ width:64px;height:64px;font:800 22px/1 var(--mk-font-ui);color:#fff;flex:0 0 auto; }
.cn-person-m{ display:flex;flex-direction:column;gap:6px;min-width:0; }
.cn-person-m > b{ font:800 20px/1.15 var(--mk-font-ui);color:var(--fg-1); }
.cn-person-m .cn-cast-cr{ justify-content:flex-start;max-width:none; }
.cn-works{ display:flex;flex-direction:column;gap:2px;margin-top:8px; }
.cn-work{ display:flex;align-items:center;gap:12px;width:100%;padding:8px 6px;border:0;border-radius:12px;background:none;text-align:start;cursor:pointer;color:inherit;font:inherit; }
.cn-work:hover{ background:var(--bg-2); }
.cn-work-po{ flex:0 0 auto; }
.cn-work-m{ display:flex;flex-direction:column;gap:2px;min-width:0;flex:1; }
.cn-work-m > b{ font:700 13.5px/1.25 var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cn-work-meta{ font:500 11.5px/1.35 var(--mk-font-ui);color:var(--fg-3); }
.cn-work-done{ font-size:18px;color:var(--mk-ok);flex:0 0 auto; }

/* 020 — an episode's optional stars */
.cn-opt{ font-weight:600;opacity:.8; }
.cn-rate-clr{ width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg-1);color:var(--fg-3);display:inline-grid;place-items:center;cursor:pointer;margin-inline-start:4px; }
.cn-rate-clr > .mi{ font-size:16px; }
[data-cn-eprate]{ display:flex;align-items:center;gap:12px;user-select:none;touch-action:none;cursor:pointer;min-height:44px; }
.cn-stars.xs .mi{ font-size:12px; }
.cn-ep-stars{ margin-inline-start:8px;vertical-align:-1px; }

/* B66 W9 (066-102) — the role chip carries an icon */
.cn-cr-chip{ display:inline-flex; align-items:center; gap:3px; }
.cn-cr-chip > .mi{ font-size:13px; }

/* B66 · 066-101 — cast & crew faces: a portrait fills the avatar, framed on the face */
.av.av-ph{ padding:0;overflow:hidden;background:var(--bg-2);color:transparent; }
.av.av-ph img{ width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;border-radius:inherit; }

/* B67 R21 (R67-079) — directional icons follow the reading direction in Arabic, as the rest of the app already does (Audit A:
   "forward points to the reading direction"; .ent-open · .pe-card-chev · .cal-period .gantt-step · .fp-back-btn …). Each was
   the only one of its kind still pointing the LTR way: "go" chevrons, forward/back arrows, prev/next steppers, crumbs, twists. */
html[dir="rtl"] .cn-cast-go{ transform:scaleX(-1); }