/* Koimoi Diary — Phase 1 basic styling.
   Deliberately simple per the task sheet: plugin functionality and layout
   first, prototype-fidelity refinement later. Watch = green, Skip = red
   is the product's core semantic and must never be colour-only (labels
   accompany every use). */

/* ============================================================
   Typefaces. Client feedback V1 ref 0.1 (17-Sep-2026): the MVP now uses
   the main site's own face everywhere rather than the prototype's three.

   All three roles resolve to Open Sans — the family the rest of koimoi.com
   is set in — so the diary and a news page read as the same site. The role
   names are kept because ~100 rules reference them, and because they still
   carry meaning: what separates a title from a label is now weight, size
   and letter-spacing rather than a different family.

     --kd-serif   was Fraunces      titles and synopsis
     --kd-mono    was Roboto Mono   every label, chip, meta line and button
     --kd-sans    was Roboto        figures, names, running UI text

   No webfont is requested for the diary any more: the theme already serves
   Open Sans site-wide, so the Google Fonts call that fetched Fraunces and
   Roboto Mono has been dropped (koimoi_diary_enqueue_assets).

   Change a face here, not in the ~100 places that reference these.
   ============================================================ */
:root {
    --kd-serif: 'Open Sans', arial, sans-serif;
    --kd-mono:  'Open Sans', arial, sans-serif;
    --kd-sans:  'Open Sans', arial, sans-serif;
}

/* --kd-mono was a monospace face, so anything that tabulated figures got
   even columns for free. Open Sans is proportional, so the places that
   line numbers up vertically ask for tabular figures explicitly. */
.kd-figure b,
.kd-bo-card b,
.kd-bo-total b,
.kd-bo-table td,
.kd-count-label,
.kd-sim-pct { font-variant-numeric: tabular-nums; }

/* The diary's own surfaces take the sans; the rest of the site keeps the
   theme's. Scoped to these two containers rather than set on body for
   exactly that reason. */
.kd-page,
.kd-movie { font-family: var(--kd-sans); }

/* Paragraph reset. The theme styles a bare `p` (Open Sans 14px) in a sheet
   that loads AFTER this one, and an inherited value always loses to a rule
   that matches the element directly — so every <p> inside the diary was
   quietly reverting to the theme's body font whatever its container asked
   for (the synopsis, wrapped in a <p> by wpautop, never rendered in the
   diary's serif).

   Specificity is the whole design here: :where() zeroes the `p`, leaving
   exactly (0,1,0). That beats the theme's bare `p` on specificity regardless
   of load order, yet ties with every single-class rule in this file — and
   sits above them all, so each of those wins on source order. A classed
   paragraph that names its own family (.kd-hero-meta, .kd-sub, .kd-ott-intro)
   keeps it; an unclassed one inherits. Written as `.kd-movie p` it would be
   (0,1,1) and silently out-rank all of them, which is the bug this replaced. */
.kd-page :where(p),
.kd-movie :where(p) { font-family: inherit; }

.kd-page { padding: 24px 12px 48px; max-width: 1100px; margin: 0 auto; }
.kd-page h1 { font-size: 28px; margin: 0 0 4px; }
.kd-page .kd-sub { color: #757575; margin: 0 0 20px; font-size: 14px; }

/* Nav shared across diary pages */
.kd-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.kd-nav a { display: inline-block; padding: 7px 16px; border: 1px solid #ddd; border-radius: 999px; color: #222; font-size: 13px; text-decoration: none; background: #fff; }
.kd-nav a.kd-active, .kd-nav a:hover { background: #111; border-color: #111; color: #fff; }

/* Cards (the card itself is in diary-cards.css) */
.kd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.kd-card-meta { font-size: 11px; color: #757575; letter-spacing: 0.04em; text-transform: uppercase; }
.kd-card-actions { margin-top: auto; display: flex; gap: 6px; align-items: center; }

/* Watch / Skip */
.kd-verdict-btn { border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; line-height: 1; }
.kd-verdict-btn.kd-watch.kd-on { background: #1e8a3c; border-color: #1e8a3c; color: #fff; }
.kd-verdict-btn.kd-skip.kd-on { background: #e30613; border-color: #e30613; color: #fff; }
.kd-badge-watch { color: #1e8a3c; font-weight: 700; }
.kd-badge-skip { color: #e30613; font-weight: 700; }

/* Your Take (movie page) */
.kd-your-take { border: 1px solid #e5e5e5; border-radius: 12px; padding: 16px; margin: 16px 0; background: #fbfaf7; }
.kd-your-take h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; }
.kd-your-take .kd-yt-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kd-your-take .kd-verdict-btn { padding: 10px 18px; font-size: 14px; }
.kd-watchlist-btn { border: 1px solid #111; background: #fff; color: #111; border-radius: 8px; padding: 10px 18px; font-size: 14px; cursor: pointer; }
.kd-watchlist-btn.kd-on { background: #111; color: #fff; }
.kd-signin-hint { display: none; font-size: 13px; }
.kd-signin-hint a { color: #e30613; font-weight: 600; }

/* Stats tiles (dashboard / log) */
.kd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 24px; }
.kd-stat { border: 1px solid #e5e5e5; border-radius: 12px; padding: 14px 16px; background: #fff; }
.kd-stat b { display: block; font-size: 26px; }
.kd-stat span { font-size: 11px; color: #757575; letter-spacing: 0.05em; text-transform: uppercase; }

/* Log timeline */
.kd-timeline { list-style: none; margin: 0; padding: 0; }
.kd-timeline .kd-month { margin: 20px 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #757575; }
.kd-log-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; }
.kd-log-row img { width: 40px; height: 60px; object-fit: cover; border-radius: 6px; background: #f2f2f2; }
.kd-log-row .kd-log-title { flex: 1; font-size: 14px; }
.kd-log-row .kd-log-title a { color: #111; text-decoration: none; }
.kd-log-row .kd-log-date { font-size: 11px; color: #757575; }

/* Watchlist rows */
.kd-watch-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.kd-watch-row img { width: 48px; height: 72px; object-fit: cover; border-radius: 6px; background: #f2f2f2; }
.kd-watch-row .kd-watch-title { flex: 1; font-size: 14px; }
.kd-watch-row .kd-watch-title a { color: #111; text-decoration: none; }
.kd-row-btn { border: 1px solid #ccc; background: #fff; border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; }
.kd-row-btn.kd-done { background: #1e8a3c; border-color: #1e8a3c; color: #fff; }

/* OTT toggles */
.kd-ott-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.kd-ott { display: flex; align-items: center; gap: 10px; border: 1px solid #e5e5e5; border-radius: 10px; padding: 12px 14px; background: #fff; cursor: pointer; font-size: 14px; }
.kd-ott input { accent-color: #1e8a3c; width: 18px; height: 18px; }
.kd-saved { font-size: 12px; color: #1e8a3c; visibility: hidden; margin-left: 8px; }
.kd-saved.kd-show { visibility: visible; }

/* Onboarding */
/* Onboarding — the prototype's B.20. Step label, serif question, then the
   one control the step is about; Continue and "Skip for now" at the foot. */
/* Grows with the device instead of sitting in a fixed ribbon on a laptop:
   the prototype is a 390px phone, so 430px is the floor here, not the
   ceiling. The three vote tiles stay three across at every width -- they
   simply get bigger. */
.kd-steps { width: 100%; max-width: clamp(430px, 60vw, 600px); margin: 0 auto; }
.kd-step { display: none; }
.kd-step.kd-active { display: block; }

.kd-progress { display: flex; gap: 4px; justify-content: center; margin: 0 0 22px; }
.kd-progress i { width: 6px; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, .1); transition: width .2s ease; }
.kd-progress i.kd-done { background: rgba(0, 0, 0, .25); }
.kd-progress i.kd-now { width: 22px; background: #111; }

.kd-step-label {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: #e30613; margin: 0 0 8px;
}
.kd-step-title {
    font-family: var(--kd-serif); font-weight: 700;
    font-style: italic;   /* the prototype sets these questions in italic Fraunces */
    font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: #111; margin: 0 0 8px;
}
.kd-step-sub { font-size: 13.5px; line-height: 1.5; color: #333; margin: 0 0 20px; }

/* Shared by both counters: "4 selected", "0 / 3 voted". */
.kd-count-label {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: #777; margin: 0 0 10px;
}

/* Step 1 — country cards, two to a row. */
.kd-region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; }
.kd-region-card {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px;
    background: #fff; color: #111; cursor: pointer; text-align: left;
}
.kd-region-card .kd-region-flag { font-size: 26px; line-height: 1; }
.kd-region-card .kd-region-name { font-size: 14px; font-weight: 600; }
.kd-region-card.kd-on { background: #111; border-color: #111; color: #fff; }

.kd-next-btn {
    display: block; width: 100%; margin-top: 22px;
    background: #111; color: #fff; border: 0; border-radius: 8px;
    padding: 15px 20px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.kd-next-btn:disabled { background: rgba(0, 0, 0, .2); cursor: default; }
.kd-skip-btn {
    display: block; width: 100%; margin: 12px 0 0; padding: 4px;
    background: none; border: 0; cursor: pointer;
    font-family: var(--kd-mono);
    font-size: 11px; color: #777;
}
.kd-skip-btn:hover { color: #111; }

/* Step 3 — compact vote tiles, three to a row. Measured off the prototype
   (7-Sep-2026): 3:4 poster at radius 6, Roboto 10.5/600 title, and thumb
   buttons that are ALWAYS in their verdict colour as an outline, filling in
   when chosen — not the neutral grey they were. */
.kd-vote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kd-vote-grid .kd-card { border: 0; background: none; }
.kd-vote-grid .kd-card-poster {
    aspect-ratio: 3 / 4;          /* the prototype crops shorter than the 2:3 of a real poster */
    border-radius: 6px; overflow: hidden; background: #222;
}
/* No OTT badge at this size — the step is about the film, not where it plays. */
.kd-vote-grid .kd-card-ott { display: none; }
.kd-vote-grid .kd-card-body { padding: 6px 0 0; gap: 6px; }
.kd-vote-grid .kd-card-title { font-family: var(--kd-sans); font-size: 10.5px; font-weight: 600; line-height: 1.2; }

/* The verdict pip on the poster corner. Both are in the markup; whichever
   matches the chosen button is revealed. :has() carries the state, so there
   is no second source of truth to keep in step — and where it is unsupported
   the pip simply never appears, which the buttons already say anyway. */
.kd-vote-grid .kd-card-pip {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 999px;
    display: none; align-items: center; justify-content: center;
    color: #fff;
}
.kd-vote-grid .kd-pip-watch { background: #1e8a3c; }
.kd-vote-grid .kd-pip-skip  { background: #e30613; }
.kd-vote-grid .kd-card:has(.kd-verdict-btn.kd-watch.kd-on) .kd-pip-watch { display: flex; }
.kd-vote-grid .kd-card:has(.kd-verdict-btn.kd-skip.kd-on)  .kd-pip-skip  { display: flex; }

.kd-card-actions.kd-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.kd-card-actions.kd-compact .kd-verdict-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 0; border-radius: 5px; background: #fff;
}
.kd-card-actions.kd-compact .kd-verdict-btn.kd-watch { border-color: #1e8a3c; color: #1e8a3c; }
.kd-card-actions.kd-compact .kd-verdict-btn.kd-skip  { border-color: #e30613; color: #e30613; }
/* The chosen side fills. These have to be restated at compact's specificity:
   the two outline rules above are (0,4,0) and out-rank the base
   .kd-verdict-btn.kd-watch.kd-on at (0,3,0), so without them a vote left the
   button white and only the pip changed. */
.kd-card-actions.kd-compact .kd-verdict-btn.kd-watch.kd-on { background: #1e8a3c; border-color: #1e8a3c; color: #fff; }
.kd-card-actions.kd-compact .kd-verdict-btn.kd-skip.kd-on  { background: #e30613; border-color: #e30613; color: #fff; }
.kd-card-actions.kd-compact .kd-verdict-btn svg { display: block; }

@media (max-width: 380px) {
    .kd-region-card { padding: 14px 10px; gap: 8px; }
    .kd-region-card .kd-region-flag { font-size: 22px; }
    .kd-vote-grid { gap: 8px; }
}

/* Filter pills (browse) */
/* Browse's filter and platform rows are one style, as the prototype has them:
   small mono capsules. At the old 13px sentence-case size the five platform
   pills would not fit a 320px row and MUBI dropped to a line of its own. */
.kd-pills { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.kd-pill {
    border: 1px solid #ddd8cc; background: #fff; border-radius: 999px;
    padding: 7px 13px; cursor: pointer; color: #111;
    font-family: var(--kd-mono);
    /* line-height:1 — the theme gives buttons a tall one, which grew the
       capsule from the design's 25px to 35px. */
    font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
}
.kd-pill:hover { border-color: #111; }
.kd-pill.kd-on { background: #111; border-color: #111; color: #fff; }

/* The card-and-divider login box is gone: sign-in and register both use the
   .kd-auth-* shell further down. */

.kd-empty { border: 1px dashed #ccc; border-radius: 12px; padding: 36px 20px; text-align: center; color: #757575; }
.kd-empty a { color: #e30613; font-weight: 600; }

@media (max-width: 600px) {
    .kd-page { padding: 16px 10px 40px; }
    .kd-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
    .kd-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Prototype design pass (25-Aug-2026) — movie page elements
   styled after peppy-taffy prototype: mono uppercase labels,
   Watch=green / Skip=red stat row with split bar, cream YOUR
   TAKE card, underline tab bar.
   ============================================================ */

/* The shared label spec, matched to the prototype (5-Sep-2026): 10px, 600,
   0.12em. It had drifted a size and two tracking notches looser here, which
   is why every diary section heading read softer than the design. */
.kd-label,
.kd-stat-label {
    font-family: var(--kd-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 10px;
    font-weight: 600;
}

/* Stats row + split bar */
.kd-take-wrap { margin: 18px 0; }
.kd-stats-row { display: flex; gap: 28px; align-items: baseline; margin: 0 0 8px; }
.kd-stats-row .kd-stat { display: inline-flex; align-items: baseline; gap: 8px; border: 0; background: none; padding: 0; border-radius: 0; }
.kd-stats-row .kd-thumb { font-size: 20px; font-style: normal; }
/* 900, not 800: Roboto ships no 800, so the browser was rounding it up to
   900 anyway — and 900 is what the prototype sets. Declaring what actually
   renders. */
.kd-stats-row b { font-size: 34px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; }
.kd-stat-watch b, .kd-stat-watch .kd-stat-label { color: #1e8a3c; }
.kd-stat-skip b,  .kd-stat-skip .kd-stat-label  { color: #e30613; }

/* Client feedback V1 ref 7.4 (18-Sep-2026): the title page names the winning
   verdict rather than showing both sides of it. Both figures stay in the DOM —
   the page is cached and hydrated, so the correct one is revealed by a class
   swap rather than by inserting an element that was not there. `.kd-lead-tie`
   (an exact 50-50, or no votes at all) leaves both visible, which is the only
   case where there is no winner to name. */
.kd-lead-watch .kd-stats-row .kd-stat-skip,
.kd-lead-skip  .kd-stats-row .kd-stat-watch { display: none; }
.kd-split-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 3px; margin: 0 0 14px; }
.kd-split-bar i { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.kd-split-watch { background: #1e8a3c; }
.kd-split-skip  { background: #e30613; }

/* The bar emphasises whichever side the figure above it names (ref 7.4,
   18-Sep-2026): the losing segment keeps its width but drops to grey. Its
   proportion is still worth seeing — that is the whole job of the bar — but
   only one verdict is being asserted, and two saturated colours argued for
   both. On an exact 50-50 neither rule matches, so both stay coloured. */
.kd-lead-watch .kd-split-skip,
.kd-lead-skip  .kd-split-watch { background: #cfc9bb; }

/* Trailer, between the split bar and the rating line (8-Sep-2026). Shipped as
   the YouTube poster plus a play badge, not an iframe — see part-your-take.php
   for why, and for the click that builds the player.

   Full column width, centred, on every screen: it lines up with the rating
   line and the Your Take card below it, which is what the eye checks. Ratio
   is held with a padding spacer rather than aspect-ratio: the box has to work
   in the same browsers the rest of this stylesheet supports, and the
   swapped-in iframe needs absolute positioning either way.

   hqdefault.jpg is 4:3 with black bars top and bottom; object-fit: cover on a
   16:9 box crops exactly those bars, leaving the frame itself edge to edge. */
.kd-trailer { margin: 0 0 14px; }
.kd-trailer .kd-label { display: block; margin: 0 0 8px; color: #777777; }
.kd-trailer-frame {
    position: relative; display: block;
    width: 100%; margin: 0 auto;
    overflow: hidden; border-radius: 12px;
    background: #11161d;
    text-decoration: none;
}
/* The 16:9 spacer. On a pseudo-element the percentage resolves against the
   frame's own width; as padding on the frame itself it resolved against the
   parent's, so on tablets (frame capped, column wider) the box came out
   1.53:1 and the thumbnail's letterbox bars showed through (8-Sep-2026). */
.kd-trailer-frame::before { content: ""; display: block; padding-top: 56.25%; }
.kd-trailer-frame > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    border-radius: 12px;
}
.kd-trailer-frame > iframe,
.kd-trailer-embed iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: 0;
    border-radius: 12px;
}
/* Same red disc as the hero play button, centred and a size up */
.kd-trailer-play {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%;
    background: #e30613; color: #fff;
    display: flex; align-items: center; justify-content: center;
    padding-left: 3px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transition: transform 0.15s ease, background 0.15s ease;
}
.kd-trailer-frame:hover .kd-trailer-play { transform: translate(-50%, -50%) scale(1.07); }
.kd-trailer-frame:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
/* The no-thumbnail fallback for a trailer we cannot identify as YouTube */
.kd-trailer-link {
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.055em;
    font-size: 11px; font-weight: 700; color: #e30613;
}

/* YOUR TAKE card */
.kd-your-take { border: 1px solid #e8e4da; border-radius: 14px; padding: 16px 18px; background: #faf7f0; }
.kd-your-take .kd-label { margin: 0 0 12px; color: #777777; }
/* Buttons, measured off the prototype (5-Sep-2026). Two families, and they
   are NOT the same shape:

     Watch / Skip      12px 8px, radius 8, in a flex row with an 8px gap
     On List / Review /
     OTT Alert         10px 4px, radius 6, three equal columns, 6px gap

   The small side padding is only correct because both families stretch —
   width comes from the row, not from the text. Padding had been restated in
   five later places by successive passes, two of which could never apply
   (an earlier @media losing to a later unconditional rule of equal
   specificity); those are gone and the values live here. */
.kd-yt-row { display: flex; gap: 8px; }
.kd-take-btn {
    flex: 1; max-width: 220px;
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.055em; font-size: 11px; font-weight: 700;
    padding: 12px 8px; border-radius: 8px; cursor: pointer;
    transition: filter 0.15s ease, opacity 0.15s ease;
}
.kd-take-btn i { font-style: normal; margin-right: 6px; }
.kd-take-watch { background: #1e8a3c; border: 1px solid #1e8a3c; color: #fff; }
.kd-take-skip  { background: #fff; border: 1.5px solid #e30613; color: #e30613; }
/* Once a verdict exists, the chosen side stays vivid and the other dims */
.kd-has-vote .kd-take-btn { opacity: 0.45; }
.kd-has-vote .kd-take-btn.kd-on { opacity: 1; box-shadow: 0 0 0 2px #111; }
.kd-yt-actions { display: flex; gap: 6px; align-items: stretch; margin-top: 12px; flex-wrap: wrap; }
.kd-yt-actions .kd-watchlist-btn,
.kd-yt-actions .kd-review-btn,
.kd-yt-actions .kd-ott-alert-btn {
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.042em; font-size: 9.5px; font-weight: 600;
    padding: 10px 4px; border-radius: 6px; cursor: pointer;
    /* Equal thirds, as the prototype's grid gives them. flex rather than
       grid because this row also holds the note and the signed-out hint,
       which must not take a column — and because the OTT button is hidden
       outright on a title already streaming, leaving the other two to
       split the row rather than stranding a gap where it was. */
    flex: 1 1 0; min-width: 0;
}
/* Both are status text, not controls: they take the full width below the
   buttons instead of competing with them for a share of the row. */
.kd-yt-actions .kd-ott-note,
.kd-yt-actions .kd-signin-hint { flex: 0 0 100%; }
.kd-yt-actions .kd-watchlist-btn { background: #111; border: 1px solid #111; color: #fff; }
.kd-yt-actions .kd-watchlist-btn.kd-on { background: #1e8a3c; border-color: #1e8a3c; }

/* ref 8.1: the "+" and its "My Watchlist" label on one line, glyph first
   (18-Sep-2026 — they were stacked when first built). Laid out as a row means
   the button is the same height as Review and OTT Alert beside it, so the
   action row needs no stretching to stay level. */
.kd-yt-actions .kd-watchlist-btn {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 5px; line-height: 1.1;
}
.kd-wl-glyph { font-size: 13px; font-weight: 400; line-height: 1; }
.kd-yt-actions .kd-review-btn { background: #fff; border: 1px solid #bbb; color: #111; }

/* Tab bar (scoped to the diary movie template via .kd-tabs) */
.kd-tabs { display: flex; gap: 26px; border-bottom: 1px solid #e5e5e5; }
.kd-tabs .tab {
    font-family: var(--kd-mono) !important;
    text-transform: uppercase; letter-spacing: 0.067em; font-size: 10.5px !important;
    font-weight: 600;
    background: none !important; border: 0 !important; border-radius: 0 !important;
    padding: 10px 2px 12px !important; margin: 0 !important;
    color: #777777 !important; cursor: pointer;
    border-bottom: 2px solid transparent !important;
}
/* Weight does NOT change on the active tab in the prototype — colour and
   the red underline carry the state, at the same 600 as the rest. */
.kd-tabs .tab.active-tab {
    color: #111 !important; font-weight: 600;
    border-bottom: 2px solid #e30613 !important;
}

@media (max-width: 600px) {
    .kd-stats-row b { font-size: 28px; }
    .kd-take-btn { max-width: none; }
    .kd-tabs { gap: 14px; overflow-x: auto; }
}

/* ============================================================
   From-scratch movie page (25-Aug-2026) — Sr 1 poster hero,
   panes, synopsis. The page carries no legacy theme sections.
   ============================================================ */

.kd-movie { max-width: 760px; margin: 0 auto; }
.kd-movie-container .td-ss-main-content { padding: 0; }

/* -- Sr 1: Poster hero -------------------------------------- */
.kd-hero {
    position: relative;
    background: #10161f center / cover no-repeat;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
}
.kd-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,18,26,0.45) 0%, rgba(13,18,26,0.75) 55%, rgba(11,15,22,0.95) 100%);
    backdrop-filter: blur(2px);
}
.kd-hero-inner {
    position: relative;
    display: flex; gap: 18px; align-items: flex-end;
    padding: 56px 22px 22px;
    width: 100%;
}
.kd-hero-poster {
    position: relative;
    width: 112px; aspect-ratio: 2 / 3; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    background: #1c2430;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.kd-hero-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-play {
    position: absolute; right: -14px; bottom: -14px;
    width: 46px; height: 46px; border-radius: 50%;
    background: #e30613; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; text-decoration: none; padding-left: 3px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.kd-hero-poster { overflow: visible; }
.kd-hero-poster img { border-radius: 10px; }
.kd-hero-title {
    font-family: var(--kd-serif);
    font-style: italic; font-weight: 700;
    color: #fff; font-size: 34px; line-height: 1.1;
    /* -0.6px at the prototype's 26px. Set in em so it holds through the
       clamp() further down and the 40px desktop size. */
    letter-spacing: -0.023em;
    margin: 0 0 8px;
}
/* All three hero lines are pure white in the prototype. They were two
   different tints of blue-grey here, which on a photographic backdrop read as
   the scrim showing through rather than as a deliberate hierarchy. */
.kd-hero-meta {
    font-family: var(--kd-mono);
    color: #fff; font-size: 13px; letter-spacing: 0.06em;
    margin: 0 0 4px;
}
.kd-hero-dir { color: #fff; font-size: 13px; margin: 0; }
.kd-hero-dir strong { font-weight: 700; }

/* -- Panes ---------------------------------------------------- */
.kd-movie-body { padding: 18px 4px 40px; }
.kd-pane { display: none; }
.kd-pane.kd-active { display: block; }
/* News tab: the line above a list that is not about the title itself. */
.kd-news-note { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #666; }

.kd-section { margin: 26px 0; }
.kd-section .kd-label { margin: 0 0 10px; color: #777777; font-size: 10px; }
/* Family comes from the paragraph reset at the top of this file; only the
   size and leading need restating on the <p> (see .kd-synopsis p below). */
.kd-synopsis {
    font-family: var(--kd-serif);
    /* 14px / 21.7px / #333, measured off the prototype (5-Sep-2026). It had
       been 17px, then 18px on desktop, kept larger on purpose; that was
       reversed on review — the design size is the size. */
    font-size: 14px; line-height: 1.55; color: #333;
}
/* Size and leading have to be restated for the same reason as the family. */
.kd-synopsis p {
    font-size: inherit; line-height: inherit; color: inherit;
    margin: 0 0 14px;
}
.kd-synopsis p:last-child { margin-bottom: 0; }
.kd-coming-soon { text-align: center; color: #757575; padding: 26px 0 6px; }

@media (max-width: 600px) {
    /* No title size here: the unconditional clamp() further down already
       gives ~25px at phone width and, being later at equal specificity,
       would override anything set in this block anyway. */
    .kd-hero-inner { padding: 44px 16px 18px; gap: 14px; }
    .kd-hero-poster { width: 92px; }
}

/* ============================================================
   Prototype pass 2 (25-Aug-2026): URL strip, circular stat
   thumbs, rating line + genre chips, YOUR RATING stars,
   OTT Alert. Outlined-baseline Watch/Skip buttons.
   ============================================================ */

/* URL strip under the hero */
.kd-url-strip {
    display: flex; align-items: center; gap: 8px;
    background: #f4f1ea; padding: 10px 18px;
    font-family: var(--kd-mono);
    font-size: 12px; color: #555; letter-spacing: 0.03em;
}
.kd-url-strip .kd-dot { width: 7px; height: 7px; border-radius: 50%; background: #1e8a3c; flex-shrink: 0; }

/* Circular thumb badges in the stats row (white glyph on colour) */
.kd-stats-row { align-items: center; }
.kd-stats-row .kd-thumb {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;

}
.kd-stat-watch .kd-thumb { background: #1e8a3c; }
.kd-stat-skip .kd-thumb  { background: #e30613; }
.kd-stats-row b { font-size: 40px; }
.kd-stats-row .kd-stat { flex-direction: row; }
.kd-stats-row .kd-stat > b { margin-right: 2px; }
.kd-stat-label { align-self: flex-end; margin-bottom: 4px; }
/* The WATCH / SKIP words under the percentages are heavier and tighter than a
   section label in the prototype — they read as part of the figure.
   font-size is restated here because the dashboard-era `.kd-stat span` rule
   near the top of this file is (0,1,1) and out-specifies `.kd-stat-label`,
   so the shared label size never reached these two. */
.kd-stats-row .kd-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }

/* Rating line + genre chips */
/* Wraps at every width (was only <=360px): TV genres like "Action &
   Adventure" squeezed the line on phones and broke labels mid-word. Each item
   stays on one line and moves down whole instead. */
.kd-rating-line {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 2px 0 16px;
    font-family: var(--kd-mono);
    font-size: 11px; color: #777777;
}
.kd-rating-line .kd-star { color: #f5a623; font-size: 13px; }
.kd-rating-line b { color: #f5a623; font-size: 11px; font-weight: 700; }
.kd-rating-line .kd-rating-count { white-space: nowrap; }
.kd-chip {
    white-space: nowrap;
    background: #eeece6; color: #777777; border-radius: 3px;
    padding: 2px 6px; font-size: 9px; letter-spacing: 0.044em; text-transform: uppercase;
}
.kd-rating-line .kd-chip:first-of-type { margin-left: 8px; }

/* Share (8-Sep-2026): pushed to the right end of the rating line, with the
   legacy page's five-target popover beneath it. The trigger borrows the chip
   spec so it reads as part of the line; the popover is the old one — white
   card, caret, icon tiles with a label under each — sized to this scale. */
.kd-share { position: relative; margin-left: auto; display: inline-flex; flex-shrink: 0; }
.kd-share-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: #eeece6; color: #444; border: 0; border-radius: 3px;
    padding: 3px 8px; cursor: pointer;
    font-family: var(--kd-mono);
    font-size: 9px; font-weight: 600; letter-spacing: 0.044em; text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}
.kd-share-btn:hover, .kd-open .kd-share-btn { background: #111; color: #fff; }
.kd-share-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
    display: flex; gap: 10px;
    padding: 10px 12px;
    background: #fff; border: 1px solid #e8e4da; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}
.kd-share-menu[hidden] { display: none; }
/* The caret, pointing up at the trigger */
.kd-share-menu::before,
.kd-share-menu::after {
    content: ""; position: absolute; bottom: 100%; right: 16px;
    border: 7px solid transparent; border-bottom-color: #e8e4da;
}
.kd-share-menu::after { border-bottom-color: #fff; margin-bottom: -1px; }
.kd-share-link {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
    text-decoration: none !important; color: #444;
    font-family: var(--kd-mono); font-size: 9px; letter-spacing: 0.02em;
}
.kd-share-link i {
    width: 40px; height: 40px; border-radius: 10px;
    background: #f1efe9;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.kd-share-link i svg { width: 18px; height: 18px; }
.kd-share-link:hover i { background: #111; color: #fff; }
.kd-share-copied {
    position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    background: #111; color: #fff; border-radius: 4px;
    padding: 3px 7px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
}

/* Watch/Skip: outlined baseline (per prototype), filled when chosen */
.kd-take-watch { background: #fff; border: 1.5px solid #1e8a3c; color: #1e8a3c; }
.kd-take-skip  { background: #fff; border: 1.5px solid #e30613; color: #e30613; }
.kd-take-btn.kd-on { box-shadow: none; }
.kd-take-watch.kd-on { background: #1e8a3c; color: #fff; }
.kd-take-skip.kd-on  { background: #e30613; color: #fff; }
.kd-has-vote .kd-take-btn { opacity: 0.5; }
.kd-has-vote .kd-take-btn.kd-on { opacity: 1; }

/* YOUR RATING row */
.kd-yt-rating { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 2px; }
.kd-yt-rating .kd-label { margin: 0; color: #777777; }
/* inline-flex with a gap, not letter-spacing: letter-spacing adds its 4px
   AFTER the last star too, so the row's right edge sat 4px inside where it
   looked like it should, leaving the stars visibly off the margin their label
   is aligned to. A gap falls between the stars only. line-height:1 stops the
   20px glyphs riding high against the label beside them. */
.kd-stars { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0; }
.kd-stars i { font-style: normal; font-size: 20px; line-height: 1; color: #cfccc4; transition: color 0.12s ease; }
.kd-stars:hover i { color: #f5a623; }

/* OTT Alert */
.kd-ott-alert-btn {
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.042em; font-size: 9.5px; font-weight: 600;
    padding: 10px 4px; border-radius: 6px; cursor: pointer;
    background: #fff; border: 1.5px solid #e30613; color: #e30613;
}
.kd-ott-note { font-size: 12px; color: #757575; }

@media (max-width: 600px) {
    .kd-stats-row b { font-size: 30px; }
    .kd-stats-row { gap: 18px; }
    .kd-stats-row .kd-thumb { width: 36px; height: 36px; font-size: 16px; }
}

/* -- Sr 7: You Might Also Like (horizontal poster scroller) -- */
.kd-similar-row {
    display: flex; gap: 12px;
    overflow-x: auto; padding: 4px 0 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* ref 9.1 (17-Sep-2026): the row now holds the shared Browse card rather than
   its own poster tile, so it only needs to fix the card's width and let the
   card bring its own poster, title and verdict badge. Everything that styles
   .kd-card applies here unchanged — which is the point of the change, since a
   badge that is styled in one place cannot drift between two screens.

   The old .kd-sim-* rules below are left in place: page-diary-dashboard1.php
   and diary-loop-movie1.php are preview templates that still render that
   markup. */
.kd-similar-cards .kd-card {
    flex: 0 0 132px;
    scroll-snap-align: start;
}
.kd-sim-card {
    position: relative;
    flex: 0 0 132px; aspect-ratio: 2 / 3;
    border-radius: 10px; overflow: hidden;
    background: #1c2430;
    scroll-snap-align: start;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.kd-sim-card:hover { transform: translateY(-3px); }
.kd-sim-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-sim-title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px 9px 9px;
    font-size: 12px; line-height: 1.25; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
}
/* Platform + crowd verdict on each poster, as the prototype badges them.
   Both sit on the top edge, clear of the title's gradient at the bottom.
   Same 9px mono as the genre chips, so the two badge families read as one
   system rather than two. */
.kd-sim-ott,
.kd-sim-pct {
    position: absolute; top: 6px; z-index: 1;
    font-family: var(--kd-mono);
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    line-height: 1; border-radius: 3px; padding: 4px 5px;
    color: #fff;
}
/* Translucent ink rather than a flat fill on both: a badge has to stay
   legible over a poster whose colours it cannot predict. The verdict badge
   carries a green thumb instead of a green ground, so a low percentage is
   still readable — a solid green pill reading "0%" contradicts itself. */
.kd-sim-ott,
.kd-sim-pct {
    background: rgba(17, 17, 17, 0.78);
    backdrop-filter: blur(2px);
}
.kd-sim-ott { left: 6px; text-transform: uppercase; }
.kd-sim-pct {
    right: 6px;
    display: inline-flex; align-items: center; gap: 3px;
}
.kd-sim-pct svg { display: block; flex: none; }

/* Typographic placeholder when a poster is missing — never a broken image */
.kd-sim-card.kd-noposter { display: flex; align-items: center; justify-content: center; }
.kd-sim-card.kd-noposter .kd-sim-title {
    position: static; background: none; text-align: center; padding: 10px;
    font-family: var(--kd-serif); font-style: italic; font-size: 14px;
}

/* -- Cast & Crew (initials avatars on pastel circles) -------- */
.kd-cast-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kd-cast-head .kd-label { margin: 0; }
.kd-cast-all {
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600;
    background: none; border: 0; color: #111; cursor: pointer; padding: 4px 0;
}
.kd-cast-row { display: flex; gap: 18px; overflow-x: auto; padding: 2px 0 10px; }
.kd-person {
    flex: 0 0 92px; text-align: center; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.kd-person.kd-person-more { display: none; }
.kd-cast-open .kd-person.kd-person-more { display: flex; }
.kd-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--kd-serif); font-style: italic; font-weight: 700;
    font-size: 24px; color: #2b2b2b;
}
.kd-av-0 { background: #e3d3b5; }
.kd-av-1 { background: #d9c9a8; }
.kd-av-2 { background: #c4d6a4; }
.kd-av-3 { background: #dcaecb; }
/* 700, not the prototype's 600: neither site declares a Roboto 600, so 600
   resolves to the 700 face on both — declaring what actually renders. */
.kd-person b { font-size: 11px; font-weight: 700; color: #111; line-height: 1.2; }
.kd-person span {
    font-family: var(--kd-mono);
    font-size: 9px; letter-spacing: 0.06em; color: #777777;
}

/* Cast & Crew refinement (26-Aug-2026): no horizontal scrollbar — the row
   wraps instead. Collapsed state shows the first four; "All n" expands the
   remaining people below and toggles back to "Less". */
.kd-cast-row {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    padding: 2px 0 4px;
    justify-content: flex-start;
}

/* You Might Also Like (26-Aug-2026): hidden scrollbar, still scrollable —
   touch-swipe on mobile, mouse drag-to-scroll on desktop. */
.kd-similar-row {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
    scroll-snap-type: x proximity;  /* softer snapping while dragging */
    cursor: grab;
}
.kd-similar-row::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.kd-similar-row.kd-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.kd-sim-card img { -webkit-user-drag: none; user-drag: none; }

/* -- Where to Watch (provider cards, data by JustWatch) -------
   Card measured off the prototype (5-Sep-2026): 58px tall, 10px 12px padding,
   1px hairline, radius 8; a 36px badge; Roboto 12/600 name; 9px mono subline
   in the same grey as the arrow -- and the arrow sits in the flex row, centred,
   not pinned to a corner. One rule at every width: the design draws the card
   one size.

   The grid is auto-fit, which is what makes both of the design states true at
   once: a single provider fills the row, two sit side by side. At two-up the
   subline is allowed its second line ("STREAM . Rs0" / "incl."), which the
   design shows too; the three extra words this card used to carry are what
   pushed it to a third line and doubled its height. */
.kd-wtw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kd-wtw-card {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px;
    background: #fff; padding: 10px 12px;
    text-decoration: none; color: inherit;
}
.kd-wtw-badge {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 6px;
    background: #111; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--kd-mono);
    font-style: normal; font-weight: 700; font-size: 10px; letter-spacing: 0;
}
.kd-wtw-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.kd-wtw-info b { font-family: var(--kd-sans); color: #111; font-size: 12px; font-weight: 600; line-height: 1.25; }
.kd-wtw-sub {
    font-family: var(--kd-mono);
    font-size: 9px; letter-spacing: 0; line-height: 1.35; color: #777; margin-top: 2px;
}
.kd-wtw-sub em { font-style: normal; }  /* the design does not colour it */
.kd-wtw-arrow { flex: none; color: #777; font-size: 13px; line-height: 1; }
.kd-wtw-attribution {
    font-family: var(--kd-mono);
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #aaa; margin: 8px 2px 0;
}
/* Availability is per country, so the section says which one it is showing. */
.kd-wtw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kd-wtw-region {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .1em; color: #777;
    border: 1px solid #e5e1d8; border-radius: 999px; padding: 2px 9px;
}
.kd-wtw-none { color: #757575; font-size: 14px; margin: 0; }

/* Watch Options — JustWatch's own widget, in an iframe they control. Only the
   frame and the credit line are ours: the script sets width to 100% and drives
   height by postMessage as offers load, so nothing here may constrain either.
   The 1px start height is theirs and collapses the section until it resizes. */
.kd-jww .jw-widget-iframe { display: block; width: 100%; border: 0; }
.kd-jww-credit {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-family: var(--kd-mono);
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #aaa; text-decoration: none;
}
.kd-jww-credit:hover { color: #111; }
.kd-jww-credit img { display: block; }

/* ============================================================
   Responsive pass (26-Aug-2026): fluid from 320px phones to
   large screens. Mobile-first corrections per prototype:
   2-up Where to Watch, 4-up cast grid, scaled hero + stats.
   ============================================================ */

/* Hero scales with viewport */
.kd-hero-title { font-size: clamp(22px, 6.5vw, 36px); }
.kd-hero-inner { padding: clamp(36px, 9vw, 60px) clamp(14px, 4vw, 26px) clamp(16px, 4vw, 24px); gap: clamp(12px, 3.5vw, 20px); }
.kd-hero-poster { width: clamp(84px, 24vw, 118px); }

/* Cast & Crew: grid instead of flex — tidy rows at every width,
   and the expanded list fills row by row with no orphan look */
.kd-cast-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 16px 10px;
}
.kd-person { flex: none; width: auto; }

@media (max-width: 480px) {
    .kd-cast-row { grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
    .kd-avatar { width: 58px; height: 58px; font-size: 18px; }
    .kd-person b { font-size: 11px; }
    .kd-person span { font-size: 9px; }

    .kd-sim-card { flex-basis: 116px; }
    .kd-movie-body { padding: 14px 2px 32px; }
}

@media (max-width: 360px) {
    .kd-stats-row { gap: 12px; }
    .kd-stats-row b { font-size: 24px; }
    .kd-stats-row .kd-thumb { width: 30px; height: 30px; }
    .kd-stats-row .kd-thumb svg { width: 14px; height: 14px; }
    .kd-stat-label { font-size: 9px; }

    .kd-take-btn { padding: 11px 6px; }
    /* The action buttons are not sized here: a second max-width:360px block
       further down restates all three of their properties and wins on source
       order, so anything set for them here could never apply. */
    .kd-your-take { padding: 12px; }
    .kd-tabs { gap: 10px; }
    /* No type override: 10.5px is the prototype's own size at 384px wide,
       and .kd-tabs scrolls horizontally below 600px if it ever needs to. */
    .kd-hero-meta { font-size: 11px; }
    .kd-hero-dir { font-size: 11px; }
    .kd-url-strip { font-size: 10px; padding: 8px 12px; }
}

/* Large screens: roomier column, bigger synopsis measure */
@media (min-width: 900px) {
    .kd-movie { max-width: 820px; }
    .kd-movie-body { padding: 22px 8px 56px; }
    .kd-hero { border-radius: 0 0 22px 22px; }
    .kd-sim-card { flex-basis: 148px; }
}

/* ============================================================
   Prototype fidelity pass (26-Aug-2026): stats label sits UNDER
   the percentage (thumb spans both rows), compact buttons so
   ON LIST · REVIEW · OTT ALERT share one row on phones.
   ============================================================ */

.kd-stats-row { gap: 36px; margin-bottom: 10px; }
.kd-stats-row .kd-stat {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    align-items: center;
}
.kd-stats-row .kd-thumb { grid-row: 1 / span 2; }
.kd-stats-row b { grid-column: 2; font-size: 38px; line-height: 0.95; margin: 0; }
.kd-stat-label { grid-column: 2; align-self: start; margin: 2px 0 0; }

/* Both button families are fully specified in their base rules — padding,
   radius and type all measured off the prototype. Nothing is restated here. */
.kd-stars i { font-size: 18px; }
.kd-your-take { padding: 16px; }
.kd-yt-rating { margin: 12px 2px 0; }
.kd-yt-actions { margin-top: 12px; }

@media (max-width: 360px) {
    .kd-stats-row { gap: 20px; }
    .kd-stats-row b { font-size: 30px; }
}

/* The action buttons flex to equal shares of the row, so they need no
   small-screen type of their own. */
.kd-your-take { padding: 15px 14px; }

@media (max-width: 360px) {
    .kd-yt-actions { gap: 5px; }
    .kd-yt-actions .kd-watchlist-btn,
    .kd-yt-actions .kd-review-btn,
    .kd-ott-alert-btn { padding: 9px 4px; }
    .kd-your-take { padding: 13px 11px; }
}

/* ============================================================
   Your Take / Your Rating sizing corrections (26-Aug-2026).
   The base .kd-your-take h3 rule (15px) was out-specifying
   .kd-label — both card labels now match the 11px mono spec.
   The black focus ring on the chosen verdict is gone: chosen
   = filled, the other side dims, exactly like the prototype.
   ============================================================ */

/* The card labels are a SECOND label grade, not the section one.
   Measured: YOUR TAKE 9.5px/400 ls0.6px, YOUR RATING 10px/400 ls0.6px —
   both lighter and much tighter than a section heading's 600 / 1.2px. The
   weight and tracking are the part that reads; the half-pixel between the
   prototype's own two labels looks incidental, so both sit at 10px here. */
.kd-your-take h3.kd-label,
.kd-yt-rating .kd-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.063em;
    color: #777777;
}
.kd-your-take h3.kd-label { line-height: 1; margin: 0 0 14px; }

.kd-has-vote .kd-take-btn.kd-on { box-shadow: none; }


/* 5px of letter-spacing here is what pushed the row out of alignment: it is
   added after the LAST star as well as between them, so the run of stars ended
   5px short of the right margin its label is squared to. The spacing now comes
   from the flex gap on .kd-stars, which falls between the stars only. */
.kd-stars { gap: 5px; }
.kd-stars i { font-size: 20px; }

/* ============================================================
   Desktop correction (26-Aug-2026): the prototype renders as a
   focused centered column even on wide screens — mirror that.
   Column tightens to 680px and the Your Take controls scale to
   fill it instead of sitting small and left-stranded.
   ============================================================ */
@media (min-width: 900px) {
    .kd-movie { max-width: 680px; }

    /* Watch/Skip fill the card half-and-half like the prototype */
    .kd-take-btn { max-width: none; }

    .kd-your-take { padding: 18px 20px; }
    .kd-stars i { font-size: 22px; }
    .kd-stats-row b { font-size: 42px; }
    .kd-url-strip { border-radius: 0 0 10px 10px; }
}

/* ============================================================
   Desktop layout v2 (26-Aug-2026): standard full content width.
   Overview arranges into two columns — main flow left (stats,
   Your Take, Synopsis), Where to Watch as a sticky right rail —
   with Cast & Crew and You Might Also Like spanning full width.
   Overrides the earlier narrow-column experiment.
   ============================================================ */
@media (min-width: 900px) {
    .kd-movie { max-width: none; }          /* fill the theme's content area */

    #tab1.kd-pane.kd-active {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 44px;
        align-items: start;
    }
    #tab1 > * { grid-column: 1; min-width: 0; }
    /* Rail cards stack full-width inside the rail */
    #tab1 .kd-wtw-grid { grid-template-columns: 1fr; }

    /* Hero scales up with the wider stage */
    .kd-hero-title { font-size: 40px; }
    .kd-hero-poster { width: 150px; }
    .kd-hero-inner { padding: 64px 30px 26px; gap: 24px; }
}

/* ============================================================
   Desktop layout v3 (26-Aug-2026): every Overview section lives
   in the left content column; Where to Watch is a right sidebar
   spanning the full height. Fixes v2, where the full-width Cast
   and Similar rows ran underneath the sticky rail and hid chips.
   ============================================================ */
@media (min-width: 900px) {
    #tab1.kd-pane.kd-active {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 40px;
        /* Explicit rows, because the rail is placed with "1 / -1" and on a
           grid with no explicit rows -1 is line 1: the rail spanned a single
           row, that row grew to the full rail height, and Synopsis started
           some 800px down on laptops. Four content rows for the sections in
           column 1, then a flexible last row that absorbs a rail taller than
           the content instead of that height being shared out as gaps
           between the sections. */
        grid-template-rows: repeat(4, auto) 1fr;
    }
    /* Sidebar occupies column 2 for the whole pane */
    #tab1 > .kd-rail {
        grid-column: 2;
        grid-row: 1 / -1;
        position: sticky;
        top: 24px;
        margin-top: 18px;
    }
    /* Everything else stays left — no section may pass under the rail */
    #tab1 > .kd-cast,
    #tab1 > .kd-similar { grid-column: 1; }
}

/* Stats row alignment fix (26-Aug-2026): the thumb badge aligns with the
   percentage itself, not the centre of the number+label block (which made
   it sag). Label sits directly beneath the number, flush to its left edge. */
.kd-stats-row .kd-stat {
    grid-template-rows: auto auto;
    align-items: start;
}
.kd-stats-row .kd-thumb {
    grid-row: 1;
    align-self: center;
}
.kd-stats-row b {
    grid-row: 1;
    align-self: center;
    letter-spacing: -0.03em;
}
.kd-stat-label {
    grid-row: 2;
    align-self: start;
    margin: 4px 0 0;
    line-height: 1;
}

/* ============================================================
   Stats/bar proportional alignment (26-Aug-2026): the SKIP badge
   and percentage sit directly above where the red segment of the
   split bar starts, so the numbers read against their own bars.
   The watch group's width tracks the live percentage (set as
   --kd-watch-w during hydration); min-width keeps both groups
   legible, and flex-shrink stops a 100%/0% split from pushing
   SKIP off the row.
   ============================================================ */
.kd-stats-row {
    display: flex;
    gap: 0;
    align-items: flex-start;
}
.kd-stats-row .kd-stat-watch {
    flex: 0 1 var(--kd-watch-w, 50%);
    min-width: max-content;
    padding-right: 12px;
}
.kd-stats-row .kd-stat-skip {
    flex: 0 0 auto;
    min-width: max-content;
}

/* Split bar sizing fix (26-Aug-2026): the segments were flex items with
   shrink enabled, so their percentage widths collapsed to equal halves and
   the red segment never began at the real watch percentage. Pin them to
   their exact widths; the visual gap comes from a white border on the green
   segment so the red still starts precisely at watch%, which is what the
   SKIP badge aligns to. */
.kd-split-bar { gap: 0; }
.kd-split-bar i { flex: 0 0 auto; }
.kd-split-watch {
    box-sizing: border-box;
    border-right: 3px solid #fff;
}

/* Stat group packing (26-Aug-2026): the auto grid tracks stretched to fill
   the group's percentage width on wide screens, drifting the number away
   from its badge. Pack tracks to content and align left, so each badge +
   percentage starts exactly at its own bar segment. */
.kd-stats-row .kd-stat {
    justify-content: start;
    justify-items: start;
}

/* No-votes state (26-Aug-2026): a title nobody has voted on must not render
   a half-green/half-red bar — that implies a 50/50 verdict that does not
   exist. Show a single neutral track instead; the dashes already say the
   numbers are unknown. */
.kd-no-votes .kd-split-bar { background: #e6e3dc; }
.kd-no-votes .kd-split-watch { border-right: 0; }
.kd-no-votes .kd-stat-watch b,
.kd-no-votes .kd-stat-skip b { color: #b6b2a8; }
.kd-no-votes .kd-thumb { opacity: 0.45; }

/* ============================================================
   Box Office tab (Sr 9-11) — prototype design.
   ============================================================ */
.kd-bo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 4px 0 16px; }
/* The tab is not wrapped in .kd-section, so the label grey never reached it:
   every label here rendered ink-black. Measured against the prototype
   (5-Sep-2026); the design draws its smallest text at 8.5px, which sits at 9px
   here to keep the diary-wide floor. */
.kd-bo .kd-label { color: #777; }
.kd-bo-head .kd-label { margin: 0 0 4px; font-weight: 400; letter-spacing: 0.08em; }  /* the lighter grade, as designed */
.kd-bo-title { font-family: var(--kd-serif); font-style: italic; font-weight: 700; font-size: 22px; letter-spacing: -0.018em; margin: 0; color: #111; line-height: 1.1; }
.kd-bo-verdict {
    flex-shrink: 0;
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 700;
    color: #fff; background: #1e8a3c; border-radius: 3px; padding: 5px 9px;
    line-height: 1.3;  /* the theme gives everything a tall line box; 24px tall, as designed */
}
.kd-verdict-flop, .kd-verdict-disaster, .kd-verdict-losing { background: #e30613; }
.kd-verdict-average, .kd-verdict-below-average { background: #b8860b; }

/* Summary cards: hairline on the page ground, not white boxes. */
.kd-bo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
/* Client feedback V1 ref 10.1 (17-Sep-2026): the figures are centred. The
   totals strip below was already centred, so the two rows now agree —
   left-aligned cards above centred ones was the inconsistency being flagged. */
.kd-bo-card { border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; background: transparent; padding: 12px 14px; text-align: center; }
.kd-bo-card .kd-label { display: block; margin: 0 0 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.09em; line-height: 1.2; }
.kd-bo-card b { display: block; font-family: var(--kd-sans); font-size: 22px; font-weight: 900; color: #e30613; letter-spacing: -0.023em; line-height: 1.15; }
.kd-bo-card b em { font-style: normal; font-size: 12px; font-weight: 700; color: #e30613; }

/* Totals strip: three across at every width the row can hold them. */
.kd-bo-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 0; }
.kd-bo-total { background: #f7f5f1; border-radius: 8px; padding: 10px 8px; text-align: center; }
.kd-bo-total .kd-label { display: block; margin: 0 0 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.067em; line-height: 1.2; }
.kd-bo-total b { display: block; font-family: var(--kd-sans); font-size: 15px; font-weight: 700; letter-spacing: -0.013em; color: #111; line-height: 1.2; }
.kd-bo-total b em { font-style: normal; font-size: 10px; font-weight: 400; color: #777; margin-left: 2px; }

.kd-bo-summary {
    font-family: var(--kd-serif); font-size: 13.5px; line-height: 1.55;
    background: #f7f5f1; border-radius: 8px; padding: 12px 14px; margin: 14px 0 0; color: #333;
}
/* Editor-written summary arrives as paragraphs; keep them inside the tint. */
.kd-bo-summary p { font: inherit; color: inherit; margin: 0; }
.kd-bo-summary p + p { margin-top: 8px; }

.kd-bo-subhead { margin: 24px 0 8px; }
.kd-bo-subhead-row { display: flex; align-items: center; justify-content: space-between; }
.kd-bo-subhead-row .kd-bo-subhead { margin-bottom: 8px; }
.kd-bo-all {
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600;
    background: none; border: 0; color: #111; cursor: pointer;
}

/* Tables. No rule under each row: the tinted header and totals rows carry
   the structure, as the design draws it. Families are set on the cells
   themselves because the theme styles bare td/th, and an inherited family
   loses to that (the same trap the paragraph reset at the top of this file
   exists for). Numbers are mono, text is sans. */
.kd-bo-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kd-bo-tablewrap::-webkit-scrollbar { display: none; }
.kd-bo-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 320px; }
.kd-bo-table thead th {
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.055em; font-size: 9px; font-weight: 700;
    color: #777; background: #f7f5f1; text-align: left; padding: 8px 10px; white-space: nowrap;
}
/* !important on the two families (the tab bar does the same, for the same
   reason): the theme
   sets a td font-family with !important in its compiled sheet, and no
   specificity beats that -- tested up to (0,3,1). It is td-only; th is
   untouched by it. */
.kd-bo-table td { font-family: var(--kd-sans) !important; font-size: 12px; font-weight: 500; padding: 10px; border: 0; color: #111; white-space: nowrap; }
.kd-bo-table .kd-num { font-family: var(--kd-mono) !important; font-size: 11px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.kd-bo-table .kd-num b { font-weight: 600; }
.kd-bo-table .kd-dim { color: #777; font-weight: 400; }
.kd-bo-daywise td:not(.kd-num) { font-size: 10.5px; font-weight: 400; color: #333; }   /* day and date cells */
.kd-bo-table .kd-bo-total-row td { background: #f7f5f1; font-weight: 700; border-top: 1px solid rgba(0, 0, 0, .06); }
.kd-bo-table .kd-up, .kd-bo-table .kd-down { font-family: var(--kd-mono); font-size: 9.5px; font-weight: 600; }
.kd-bo-table .kd-up { color: #1e8a3c; }
.kd-bo-table .kd-down { color: #e30613; }
.kd-bo-daywise .kd-bo-more { display: none; }
.kd-bo-daywise.kd-bo-open .kd-bo-more { display: table-row; }

.kd-bo-showall {
    width: 100%; margin: 10px 0 0;
    font-family: var(--kd-mono);
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 400;
    background: #f7f5f1; border: 0; border-radius: 6px; padding: 10px; cursor: pointer; color: #777;
    line-height: 1.3;
}

/* FAQs (ours; the prototype has no counterpart) */
.kd-bo-faq { border-bottom: 1px solid #eee; padding: 14px 0; }
.kd-bo-faq:last-child { border-bottom: 0; }
.kd-faq-q { font-family: var(--kd-serif); font-weight: 700; font-size: 15px; margin: 0 0 6px; color: #111; }
.kd-faq-a { font-size: 13.5px; line-height: 1.55; margin: 0; color: #444; }

@media (max-width: 360px) {
    /* Three totals in one row cannot hold figures like 241.8 cr on the
       narrowest phones -- they overflowed the page by about 12px. Wrap instead. */
    .kd-bo-totals { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   News tab (26-Aug-2026): tagDiv renders these blocks as
   td-column-1, so every article lands in a full-width
   .td-block-span12 and stacks one per row. Grid them into three
   per row from tablet up. The phone block (td_block_11 /
   .td-visible-phone) is untouched — its list layout is correct.
   ============================================================ */
@media (min-width: 768px) {
    #tab4 .td_block_3 .td_block_inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 26px 20px;
    }
    /* Neutralise tagDiv's full-width float layout inside the grid */
    #tab4 .td_block_3 .td-block-span12 {
        width: auto;
        float: none;
        margin: 0;
        padding: 0;
        border: 0;
    }
    #tab4 .td_block_3 .td_module_1 {
        margin: 0;
        padding: 0;
        border: 0;
        min-height: 0;
    }
    /* Stack thumbnail above the headline so a narrow column reads as a card */
    #tab4 .td_block_3 .td-module-image,
    #tab4 .td_block_3 .td-module-thumb {
        float: none;
        width: 100%;
        margin: 0 0 10px;
    }
    #tab4 .td_block_3 .td-module-thumb a { display: block; }
    #tab4 .td_block_3 .td-module-thumb img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 8px;
    }
    #tab4 .td_block_3 .td-module-meta-info {
        margin: 0;
        padding: 0;
        min-height: 0;
    }
    #tab4 .td_block_3 .entry-title {
        font-size: 15px;
        line-height: 1.35;
        margin: 0 0 6px;
    }
    /* The load-more control must span the full grid, not sit in a column */
    #tab4 .td_block_3 .td-load-more-wrap,
    #tab4 .td_block_3 .td-next-prev-wrap {
        grid-column: 1 / -1;
    }
}

/* Tabs are now real links (path-based URLs) — keep them looking like tabs */
.kd-tabs .tab { text-decoration: none; display: inline-block; }
.kd-tabs .tab:hover { color: #111 !important; }

/* ============================================================
   Hero corrections (26-Aug-2026): square hero at every width,
   zero container padding on phones (per design), and the three
   mobile hero controls — back, copy link, site menu.
   ============================================================ */

/* Square corners everywhere — overrides the earlier rounded rules */
.kd-hero,
.kd-url-strip { border-radius: 0; }

/* Full-bleed on phones: the theme container's padding is removed for the
   movie page only, so no other template is affected. */
@media (max-width: 767px) {
    /* .td-container carries the theme padding at equal specificity, so the
       compound selector is needed to win without !important. */
    .td-container.kd-movie-container,
    .kd-movie-container .td-pb-row,
    .kd-movie-container .td-pb-span12,
    .kd-movie-container .td-ss-main-content {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .td-container.kd-movie-container { width: 100%; max-width: 100%; }
    .kd-movie-body { padding-left: 14px; padding-right: 14px; }
    .kd-url-strip { padding-left: 14px; padding-right: 14px; }
}

/* Hero controls */
.kd-hero-actions {
    position: absolute;
    top: 12px; left: 12px; right: 12px;
    display: none;                 /* mobile only */
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}
.kd-hero-actions-right { display: inline-flex; gap: 10px; }
.kd-hero-btn {
    width: 38px; height: 38px;
    border: 0; border-radius: 50%;
    background: rgba(18, 22, 30, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background 0.15s ease;
}
.kd-hero-btn:active { background: rgba(18, 22, 30, 0.8); }
.kd-copied {
    position: absolute; top: 46px; right: 0;
    background: rgba(18, 22, 30, 0.9); color: #fff;
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 6px 10px; border-radius: 6px;
}

/* Hero share (client feedback V1 ref 7.1, 17-Sep-2026).

   The trigger borrows .kd-hero-btn's translucent-dark circle rather than the
   light chip .kd-share-btn wears on the rating line: it sits over a backdrop
   image that may be dark (Dhurandhar) or bright (Andaaz 2), and a scrim-backed
   circle is the one treatment that holds up on both. */
.kd-share-hero .kd-share-btn {
    width: 38px; height: 38px; padding: 0; gap: 0;
    border-radius: 50%;
    background: rgba(18, 22, 30, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    justify-content: center;
}
.kd-share-hero .kd-share-btn svg { width: 15px; height: 15px; }
.kd-share-hero .kd-share-btn:hover,
.kd-share-hero.kd-open .kd-share-btn { background: rgba(18, 22, 30, 0.85); color: #fff; }
/* The popover is a white card on a dark hero, so it keeps its own colours and
   only needs to be told to open below the button and stay inside the frame. */
.kd-share-hero .kd-share-menu { top: calc(100% + 8px); right: 0; }

@media (max-width: 767px) {
    .kd-hero-actions { display: flex; }
    /* Leave room so the buttons never sit on the title */
    .kd-hero-inner { padding-top: 64px; }
}

/* Desktop: the hero control row is mobile-only, so before ref 7.1 there was no
   share on the hero at any width above 767px. The row is shown at every width
   now, with only back hidden above the breakpoint — desktop has the browser's
   own back button, but had nothing for share. (The site-menu button that used
   to be hidden here too was removed outright on 18-Sep.) */
@media (min-width: 768px) {
    .kd-hero-actions {
        display: flex;
        justify-content: flex-end;
        left: auto;
    }
    .kd-hero-actions .kd-hero-back { display: none; }
}

/* -- Registration form (27-Aug-2026; onto the auth shell 03-Sep) ----
   Fields and submit deliberately match .kd-auth-form, so Create Account
   and Sign In read as the same screen with a different form in it. */
.kd-field { margin: 0 0 12px; }
.kd-field label { display: block; font-size: 13px; color: #555; margin-bottom: 5px; }
.kd-field input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #ddd8cc; border-radius: 8px;
    padding: 12px 14px; font-size: 15px; background: #fff; color: #111;
}
.kd-field input:focus { border-color: #111; outline: none; }
.kd-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
/* Sign In shares these: its submit is a <button> rather than the core form's
   input[type=submit], which the parent theme colours light blue on hover —
   white label on #4db2ec, which is what made the button look like it faded
   out under the cursor. A button is outside that rule's reach. */
.kd-register-submit,
.kd-login-submit {
    width: 100%; padding: 14px 16px; border: 0; border-radius: 8px; cursor: pointer;
    background: #111; color: #fff; font-size: 14px; font-weight: 700;
}
.kd-register-submit:hover,
.kd-login-submit:hover { background: #333; color: #fff; }
.kd-register-submit:disabled,
.kd-login-submit:disabled { opacity: 0.5; cursor: default; }
.kd-register-error,
.kd-login-error {
    background: #fdecec; color: #b32d2e;
    border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px;
}
.kd-auth-forgot { margin: 14px 0 0; font-size: 13px; }
.kd-auth-forgot a { color: #555; }
.kd-auth-forgot a:hover { color: #111; }

/* ============================================================
   Stats row alignment (27-Aug-2026): WATCH and SKIP sit side by
   side, left-aligned with a fixed gap — per the prototype. The
   earlier proportional layout (skip tracking the red bar start)
   pushed SKIP to the far edge at 100%/0% splits; removed.
   ============================================================ */
.kd-stats-row {
    display: flex;
    justify-content: flex-start;
    gap: 36px;
}
.kd-stats-row .kd-stat-watch,
.kd-stats-row .kd-stat-skip {
    flex: 0 0 auto;
    min-width: 0;
    padding-right: 0;
}
@media (max-width: 360px) {
    .kd-stats-row { gap: 20px; }
}

/* ============================================================
   Reviews tab (28-Aug-2026) — prototype-styled critic card,
   top-user-reviews digest over wpDiscuz, write-review button.
   ============================================================ */
.kd-label-red { color: #c62828 !important; }

/* Critic review card */
.kd-critic-card { display: flex; gap: 18px; align-items: flex-start; }
.kd-critic-thumb { flex: 0 0 116px; }
.kd-critic-thumb img { width: 116px; height: 116px; object-fit: cover; display: block; }
.kd-critic-body { min-width: 0; }
.kd-starline {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--kd-mono);
    font-size: 13px;
}
.kd-starline b { color: #b98a00; }
.kd-starline-track {
    position: relative; color: #d9d9d9; font-size: 15px; letter-spacing: 2px;
    line-height: 1;
}
/* top:1px, not 0 — the gold overlay is the same five glyphs painted over the
   grey ones, and at 0 it rode a pixel high against them, so a partly-filled
   star showed a grey sliver along its top edge. */
.kd-starline-track::before {
    content: '★★★★★';
    position: absolute; left: 0; top: 1px;
    width: var(--kd-fill, 0%); overflow: hidden; white-space: nowrap;
    color: #f5a623;
}
.kd-critic-headline {
    margin: 8px 0 4px;
    font-family: var(--kd-serif); font-style: italic;
    font-size: 22px; line-height: 1.25; font-weight: 700;
}
.kd-critic-headline a { color: #111; text-decoration: none; }
.kd-critic-headline a:hover { color: #c62828; }
.kd-critic-byline {
    margin: 0 0 10px;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #757575;
}
.kd-critic-quote {
    margin: 0 0 12px;
    font-family: var(--kd-serif); font-style: italic;
    font-size: 16px; line-height: 1.55; color: #222;
}
.kd-critic-more {
    font-family: var(--kd-mono);
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: #c62828 !important; text-decoration: none; font-weight: 700;
}
.kd-critic-more:hover { text-decoration: underline; }
@media (max-width: 480px) {
    .kd-critic-thumb { flex-basis: 86px; }
    .kd-critic-thumb img { width: 86px; height: 86px; }
    .kd-critic-headline { font-size: 19px; }
}

/* Top user reviews digest */
.kd-review { padding: 18px 0; border-bottom: 1px solid #ececec; }
.kd-review:last-child { border-bottom: 0; }
.kd-review-head { display: flex; align-items: center; gap: 12px; }
.kd-review-head .kd-avatar {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    background: #f0ead9; color: #111; display: inline-flex;
    align-items: center; justify-content: center;
    font-family: var(--kd-serif); font-style: italic; font-weight: 700;
    font-size: 15px;
}
.kd-review-who { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.kd-review-who b { font-size: 15px; line-height: 1.2; }
.kd-review-ago {
    font-family: var(--kd-mono);
    font-size: 11px; color: #9a9a9a;
}
.kd-review .kd-badge-watch,
.kd-review .kd-badge-skip {
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 3px; color: #fff; white-space: nowrap;
}
.kd-review .kd-badge-watch { background: #1e8a3c; }
.kd-review .kd-badge-skip  { background: #c62828; }
/* A review held for moderation, drawn for its author the moment it posts. */
.kd-review .kd-badge-pending {
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 3px; color: #6b665c; background: #efece4; white-space: nowrap;
}
/* A card or reply drawn in place after posting (part-reviews.php). */
.kd-review-new { animation: kd-review-in .45s ease-out; }
@keyframes kd-review-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
/* "Show more reviews" — the cards arrive a page at a time. */
.kd-reviews-more { margin: 14px 0 0; text-align: center; }
.kd-reviews-more-btn {
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    width: 100%; padding: 13px 18px; cursor: pointer;
    border: 1.5px solid #111; border-radius: 4px; background: none; color: #111;
}
.kd-reviews-more-btn:hover:not(:disabled) { background: #111; color: #fff; }
.kd-reviews-more-btn:disabled { opacity: .55; cursor: default; }

/* Where "Go to your review" lands. */
.kd-review-flash { animation: kd-review-flash 1.6s ease-out; }
@keyframes kd-review-flash {
    from { background: #fdf3d6; }
    to   { background: transparent; }
}

/* Editing a review in its own card. wpDiscuz builds the edit form inside its
   comment, and that whole comment is moved in here so its save handler can
   still find the ids it reads off the wrapper — so everything that travelled
   with the form is hidden, leaving just the form. */
.kd-review.kd-editing > .kd-review-quote,
.kd-review.kd-editing > .kd-review-spoiler { display: none !important; }
.kd-edit-host { display: block !important; margin: 10px 0 0; }
.kd-edit-host > *:not(.wpd-comment-wrap) { display: none !important; }
.kd-edit-host > .wpd-comment-wrap { display: block !important; border: 0; padding: 0; margin: 0; background: none; }
.kd-edit-host > .wpd-comment-wrap > .wpd-comment-left { display: none !important; }
.kd-edit-host > .wpd-comment-wrap > .wpd-comment-right {
    display: block !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important;
}
.kd-edit-host > .wpd-comment-wrap > .wpd-comment-right > *:not(.wpdiscuz-edit-form-wrap) { display: none !important; }
.kd-edit-host .wpdiscuz-edit-form-wrap { display: block !important; margin: 0; }
.kd-edit-host .ql-toolbar.ql-snow,
.kd-edit-host .ql-container.ql-snow { border-color: #ddd; }

.kd-review-edit {
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    background: none; border: 0; padding: 0; cursor: pointer; color: #8a8578;
}
.kd-review-edit:hover { color: #111; }

/* Shown in place of the composer once you have a review on this title. */
/* Client feedback V1 ref 11.1 (17-Sep-2026): text and button centred. The row
   stacks into a column so the button sits under the sentence rather than beside
   it — centring a flex row would only have centred the pair as a unit. */
.kd-reviewed-note {
    order: 5; display: flex; flex-direction: column; flex-wrap: wrap;
    align-items: center; justify-content: center; text-align: center; gap: 10px;
    padding: 16px; margin: 0 0 18px;
    border: 1px solid #e5e2da; border-radius: 10px; background: #fbfaf7;
}
.kd-reviewed-text { margin: 0; font-size: 14px; color: #4a463d; }
.kd-reviewed-goto {
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 8px 14px; border: 1.5px solid #111; border-radius: 4px;
    background: none; color: #111; cursor: pointer;
}
.kd-reviewed-goto:hover { background: #111; color: #fff; }
.kd-review-quote {
    margin: 12px 0 10px; padding: 0; border: 0; background: none;
    font-family: var(--kd-serif); font-style: italic;
    font-size: 16px; line-height: 1.55; color: #222; quotes: none;
}
.kd-review-foot {
    display: flex; align-items: center; gap: 18px;
    font-family: var(--kd-mono);
    font-size: 12px; color: #9a9a9a;
}
.kd-review-count { color: #9a9a9a; text-decoration: none; }
.kd-review-count.kd-up b { color: #111; font-size: 14px; }
a.kd-review-replies:hover { color: #111; }
.kd-review-share {
    margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a;
}
.kd-review-share:hover { color: #111; }

/* Write a review */
.kd-write-review-btn {
    display: block; width: 100%; margin: 6px 0 26px;
    background: #111; color: #fff; border: 0; cursor: pointer;
    padding: 15px 18px; border-radius: 6px;
    font-family: var(--kd-mono);
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.kd-write-review-btn:hover { background: #333; }

/* Guests: the button signs in, this line says what for, and the composer
   (no editor, no stars for a guest) steps aside. :has() covers the cached
   page before the script runs; the class is the script's answer. */
.kd-review-guest-note {
    margin: -14px 0 26px; text-align: center;
    font-size: 14px; color: #666;
}
.kd-review-guest-note a { color: #111; font-weight: 700; text-decoration: underline; }
.kd-compose.kd-compose-guest,
.kd-compose:has(#wpdcom.wpdiscuz_unauth) { display: none; }

/* ============================================================
   Reviews tab voting design (28-Aug-2026):
   - digest cards show the commenter's own star rating before
     the Watch/Skip badge
   - wpDiscuz thread vote buttons restyled as mono up/down
     triangles per the prototype
   - the Crowdsignal (Polldaddy) Like/Dislike widget is hidden
     inside movie reviews — wpDiscuz voting is the one system
     whose counts the digest reads; articles keep it untouched
   ============================================================ */
.kd-review-stars { margin-right: 10px; line-height: 1; }
.kd-review-stars .kd-starline-track { font-size: 14px; letter-spacing: 1px; }

.kd-pane .wpd-comment .pd-rating,
.kd-pane .wpd-comment .cs-rating { display: none !important; }

.kd-pane .wpd-vote { display: inline-flex; align-items: center; gap: 7px; }
/* !important needed: sitewide CSS forces svg display with !important */
.kd-pane .wpd-vote-up svg,
.kd-pane .wpd-vote-down svg { display: none !important; }
.kd-pane .wpd-vote-up::before,
.kd-pane .wpd-vote-down::before {
    font-family: var(--kd-mono);
    font-size: 13px; line-height: 1; color: #9a9a9a; cursor: pointer;
}
.kd-pane .wpd-vote-up::before { content: "\25B2"; }
.kd-pane .wpd-vote-down::before { content: "\25BC"; }
.kd-pane .wpd-vote-up:hover::before,
.kd-pane .wpd-vote-down:hover::before { color: #111; }
.kd-pane .wpd-vote-up.wpd-up::before { color: #1e8a3c; }
.kd-pane .wpd-vote-down.wpd-down::before { color: #c62828; }
.kd-pane .wpd-vote-result {
    font-family: var(--kd-mono);
    font-size: 13px; font-weight: 700; color: #111;
}

/* ============================================================
   Reviews thread layout (28-Aug-2026): the digest cards above
   WRITE A REVIEW are the thread — replies render nested inside
   each card, and wpDiscuz's own list below the form is hidden
   (its DOM stays for vote delegation). The rating widget and
   the form remain visible.
   ============================================================ */
#kd-user-reviews .wpd-thread-wrapper { display: none !important; }

.kd-review .kd-review-count { background: none; border: 0; padding: 0; }
.kd-review [data-vote] { cursor: pointer; }
.kd-review [data-vote]:hover { color: #111; }
.kd-review [data-vote] b { color: #111; font-size: 14px; }
.kd-review .kd-down b { color: #9a9a9a; font-size: 12px; }

.kd-review-replies {
    margin: 14px 0 0 18px;
    padding-left: 16px;
    border-left: 2px solid #ececec;
}
.kd-reply { display: flex; gap: 10px; padding: 8px 0; }
.kd-avatar.kd-avatar-sm {
    flex: 0 0 26px; width: 26px; height: 26px; font-size: 11px;
}
.kd-reply-body { min-width: 0; }
.kd-reply-meta b { font-size: 13px; }
.kd-reply-text {
    margin: 3px 0 0;
    font-size: 14px; line-height: 1.5; color: #333;
}

/* Voted state mirrored from wpDiscuz onto the review cards */
.kd-review .kd-up.kd-voted, .kd-review .kd-up.kd-voted b { color: #1e8a3c; }
.kd-review .kd-down.kd-voted, .kd-review .kd-down.kd-voted b { color: #c62828; }

/* Reply on a review card: wpDiscuz's own form, relocated into the card */
.kd-review-reply {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a;
}
.kd-review-reply:hover { color: #111; }
.kd-reply-form-slot:empty { display: none; }
.kd-reply-form-slot {
    margin: 14px 0 0 18px;
    padding-left: 16px;
    border-left: 2px solid #ececec;
}
.kd-reply-form-slot .wpd-secondary-form-wrapper { margin: 0; }

/* The relocated wpDiscuz comment hosts only its reply form. Everything else
   it carries is already on screen as a card above — its own body, and the
   nested replies it brings with it, which were rendering here in raw wpDiscuz
   markup below the form. One rule covers all of them, including the ones
   wpDiscuz adds later. */
.kd-reply-form-slot .wpd-comment.kd-reply-host {
    margin: 0; padding: 0; border: 0; background: none;
}
.kd-reply-form-slot .kd-reply-host > *:not(.wpd-secondary-form-wrapper) { display: none !important; }

/* -- the reply form itself -----------------------------------------------
   wpDiscuz builds this markup; the diary only dresses it, so the selectors
   name its classes and lean on !important where its own stylesheet insists. */
.kd-reply-form-slot .wpd-secondary-form-wrapper {
    margin: 0; padding: 12px; background: #fbfaf7;
    border: 1px solid #ece8de; border-radius: 10px;
}
/* Nobody needs their own avatar to answer a review — it only crowded the
   field, which is the point of the form. */
.kd-reply-form-slot .wpd-avatar,
#kd-user-reviews .wpd-avatar,
.kd-reply-form-slot .wpd-secondary-forms-social-content,
#kd-user-reviews .wpd-secondary-forms-social-content { display: none !important; }

.kd-reply-form-slot .ql-container.ql-snow,
#kd-user-reviews .ql-container.ql-snow {
    border: 1px solid #ddd8cc !important; border-bottom: 0 !important;
    border-radius: 8px 8px 0 0; background: #fff;
}
/* wpDiscuz puts the toolbar under the editor, so the rounding goes the other
   way round from a stock Quill. */
.kd-reply-form-slot .ql-toolbar.ql-snow,
#kd-user-reviews .ql-toolbar.ql-snow {
    border: 1px solid #ddd8cc !important; border-radius: 0 0 8px 8px;
    background: #f6f4ef; padding: 5px 8px;
}
.kd-reply-form-slot .ql-editor,
#kd-user-reviews .ql-editor {
    min-height: 76px; padding: 11px 13px;
    font-size: 14px; line-height: 1.55; color: #111;
}
.kd-reply-form-slot .ql-editor.ql-blank::before,
#kd-user-reviews .ql-editor.ql-blank::before { color: #a9a496; font-style: normal; }
.kd-reply-form-slot .ql-toolbar .ql-stroke,
#kd-user-reviews .ql-toolbar .ql-stroke { stroke: #6b6b6b; }
.kd-reply-form-slot .ql-toolbar .ql-fill,
#kd-user-reviews .ql-toolbar .ql-fill { fill: #6b6b6b; }
.kd-reply-form-slot .ql-toolbar button:hover .ql-stroke,
#kd-user-reviews .ql-toolbar button:hover .ql-stroke { stroke: #111; }
.kd-reply-form-slot .ql-toolbar button:hover .ql-fill,
#kd-user-reviews .ql-toolbar button:hover .ql-fill { fill: #111; }

.kd-reply-form-slot .wpd-form-foot,
#kd-user-reviews .wpd-form-foot { display: block; padding: 10px 0 0; }
.kd-reply-form-slot .wc-field-submit,
#kd-user-reviews .wc-field-submit {
    display: flex; align-items: center; gap: 12px; justify-content: flex-end;
}
/* The subscribe toggles read as a footnote, not a second call to action. */
.kd-reply-form-slot .wpd_label,
#kd-user-reviews .wpd_label { margin: 0 auto 0 0; font-size: 12px; color: #8a8578; }
.kd-reply-form-slot .wc_comm_submit.wpd-prim-button,
#kd-user-reviews .wc_comm_submit.wpd-prim-button {
    width: auto !important; float: none !important;
    background: #111 !important; color: #fff !important; border: 0 !important;
    border-radius: 8px !important; padding: 11px 20px !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
    text-transform: none !important; opacity: 1 !important;
}
.kd-reply-form-slot .wc_comm_submit.wpd-prim-button:hover,
#kd-user-reviews .wc_comm_submit.wpd-prim-button:hover { background: #333 !important; }

/* -- Write a Review: the same form, at the foot of the tab ----------------
   wpDiscuz renders its own container, rating widget and account row here.
   The rules above already dress the editor and the button; these fix what is
   particular to the main form. */
#kd-user-reviews #wpdcom {
    /* Stock wpDiscuz caps its container, which left the form floating in a
       column narrower than everything else on the tab. */
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
}
#kd-user-reviews .wpd-form-wrap { border: 0; }
#kd-user-reviews #wpd-main-form-wrapper-0_0 {
    padding: 12px; background: #fbfaf7;
    border: 1px solid #ece8de; border-radius: 10px;
}

/* The account row: "You are logged in as … | Log out" does not belong in a
   review form — signing out is not something to offer mid-review. The
   subscribe toggle stays, but under the composer: wpDiscuz puts this head
   above the field, which left it sitting between "Your review" and the box
   that label names. */
#kd-user-reviews .wpd-form-wrap { display: flex; flex-direction: column; }
#kd-user-reviews #wpd-main-form-wrapper-0_0 { order: 1; }
#kd-user-reviews .wpd-form-head { order: 2; padding: 10px 0 0; border: 0; }
#kd-user-reviews .wpd-auth { display: none !important; }
#kd-user-reviews .wpd-sbs-toggle {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8a8578;
}

/* The rating widget, out of its dotted-rule frame and onto the diary's
   type: a mono caption, then the stars and the score on one line. The two
   star layers keep their own display, because wpDiscuz swaps them on hover
   to let an unrated visitor rate. */
/* wpDiscuz sizes and centres every layer of this widget itself, so each
   override has to say so. */
#kd-user-reviews #wpd-post-rating { margin: 0 0 16px; justify-content: flex-start !important; }
#kd-user-reviews .wpd-rating-left,
#kd-user-reviews .wpd-rating-right { display: none !important; }
/* These selectors repeat wpDiscuz's own chain (#wpd-post-rating
   .wpd-rating-wrap …) on purpose: its rules are !important at that
   specificity, so a shorter selector loses even with !important of its own. */

/* Full width, not shrink-to-fit: at its natural size the row was only as wide
   as the five stars, so the score wrapped onto a line of its own. */
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap { width: 100% !important; }
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rating-data {
    /* wpDiscuz stacks this in a column, which is what centred everything:
       in a column, align-items is the horizontal axis. As a wrapping row the
       caption (width:100%) takes the first line and the stars and score share
       the second. */
    display: flex !important; flex-direction: row !important; flex-wrap: wrap;
    align-items: center; justify-content: flex-start !important;
    gap: 3px 9px; width: 100% !important; text-align: left !important;
}
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rating-title {
    order: -1; width: 100% !important; margin: 0 !important; text-align: left !important;
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8a8578;
}
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rating-value {
    order: 2; width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important;
    border: 0 !important; border-radius: 0 !important; background: none !important;
}
/* The score's own span carries the 60px line-height that drew the circle. */
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rating-value .wpdrv {
    display: inline !important; height: auto !important; line-height: 1 !important;
    font-family: var(--kd-mono);
    font-size: 15px !important; font-weight: 700 !important; color: #f5a623 !important;
}
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rating-stars,
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rate-starts { order: 1; margin: 0 !important; }
/* Both star layers, not just the visible one: wpDiscuz swaps in the ratable
   set on hover, and at its default size the row jumped as you moved onto it. */
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rating-stars svg,
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rate-starts svg { width: 20px; height: 20px; }
/* The stars you just chose stay lit while the rating saves (part-reviews.php
   rates in place instead of letting wpDiscuz reload the page). */
#kd-user-reviews #wpd-post-rating .wpd-rating-wrap .wpd-rate-starts svg .wpd-star.wpd-active { fill: #ffc600; }
#kd-user-reviews #wpd-post-rating[data-kd-rating="busy"] .wpd-rate-starts { opacity: .6; pointer-events: none; }
#kd-user-reviews #wpd-post-rating .kd-rated-note {
    order: 3; width: 100%;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .04em; color: #1a7f37;
}
#kd-user-reviews #wpd-post-rating .kd-rated-note.kd-rated-error { color: #c1121f; }

@media (max-width: 480px) {
    .kd-reply-form-slot { margin-left: 0; padding-left: 12px; }
    .kd-reply-form-slot .wpd-secondary-form-wrapper,
    #kd-user-reviews #wpd-main-form-wrapper-0_0 { padding: 10px; }
    .kd-reply-form-slot .ql-editor,
    #kd-user-reviews .ql-editor { min-height: 64px; font-size: 13px; }
    /* Tighter buttons keep the toolbar on one row instead of two. */
    .kd-reply-form-slot .ql-toolbar,
    #kd-user-reviews .ql-toolbar { padding: 4px 5px; }
    .kd-reply-form-slot .ql-toolbar button,
    #kd-user-reviews .ql-toolbar button { width: 24px; height: 22px; padding: 2px 3px; }
}

/* ============================================================
   Diary pages design pass (31-Aug-2026) — dashboard and the
   member pages rebuilt to the prototype: profile header, the
   same underline tab bar the movie page uses (not pills),
   borderless figure row, and the Watch/Skip verdict card.
   ============================================================ */

/* Profile header */
.kd-profile { position: relative; display: flex; align-items: flex-start; gap: 16px; margin: 4px 0 18px; }
.kd-profile-avatar {
    flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%;
    background: #f0ead9; color: #111;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--kd-serif); font-style: italic; font-weight: 700;
    font-size: 26px;
    position: relative; overflow: hidden;
}
/* The member's picture covers the initials; one that fails to load removes
   itself and the initials show (koimoi_diary_avatar_html). */
.kd-profile-avatar img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important; max-width: none;
    object-fit: cover; border-radius: 50%; background: #f0ead9;
}
.kd-profile-body { min-width: 0; flex: 1; }
.kd-profile-name {
    font-family: var(--kd-serif); font-style: italic; font-weight: 700;
    font-size: 30px; line-height: 1.15; margin: 0 0 4px; color: #111;
}
.kd-profile-meta {
    margin: 0;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #757575;
}
.kd-profile-tagline {
    margin: 8px 0 0;
    font-family: var(--kd-serif); font-style: italic;
    font-size: 15px; color: #333;
}

/* Tab bar — same treatment as the movie page, scrollable on small screens */
/* The page-level count in the slot above the tab bar, where the prototype
   carries it (in an app header we do not have): "Verdicts · 8" on the Log,
   "Watchlist · 20 titles" on the Watchlist. Measured off it — mono 10/400,
   ls 0.6px, #777, 10px clear of the bar.

   This replaced .kd-queue-count, which sat below the bar a size larger; both
   pages use this now, so that rule is gone. `#kd-queue-count` survives as an
   id only, because the queue script rewrites the line as rows are removed. */
.kd-page-count {
    margin: 0 0 10px;
    font-family: var(--kd-mono);
    font-size: 10px; font-weight: 400; letter-spacing: .06em; color: #777;
}

.kd-diary-tabs {
    display: flex; gap: 26px; margin: 0 0 22px;
    border-bottom: 1px solid #e6e2d8;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kd-diary-tabs::-webkit-scrollbar { display: none; }
.kd-diary-tabs .kd-tab {
    flex: 0 0 auto;
    padding: 0 0 10px; border: 0; background: none; border-radius: 0;
    font-family: var(--kd-mono);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: #9a9a9a !important; text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.kd-diary-tabs .kd-tab:hover { color: #111 !important; background: none; }
.kd-diary-tabs .kd-tab.kd-active {
    color: #111 !important; font-weight: 700;
    border-bottom-color: #c62828; background: none;
}

/* Figure row — borderless numbers, label beneath */
.kd-figures { display: flex; flex-wrap: wrap; gap: 34px; margin: 0 0 22px; }
.kd-figure { display: flex; flex-direction: column; gap: 4px; }
.kd-figure b { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: #111; }
.kd-figure .kd-label { color: #757575; }
.kd-figure-watch b { color: #1e8a3c; }
.kd-figure-skip b { color: #e30613; }

/* Verdict card */
.kd-verdict-card {
    border: 1px solid #e8e4da; border-radius: 14px; background: #fff;
    padding: 16px 18px; margin: 0 0 26px;
}
.kd-verdict-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.kd-verdict-card-head .kd-label { margin: 0; color: #777777; }
.kd-verdict-cta {
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #c62828 !important; text-decoration: none; font-weight: 700;
}
.kd-verdict-card .kd-stats-row { margin-bottom: 10px; }
.kd-verdict-card .kd-split-bar { margin-bottom: 0; }

/* Section headings across the member pages */
.kd-page-title {
    font-family: var(--kd-serif); font-style: italic; font-weight: 700;
    font-size: 30px; line-height: 1.15; margin: 0 0 18px; color: #111;
}
.kd-section-head {
    font-family: var(--kd-mono);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: #6b6b6b; margin: 30px 0 12px; font-weight: 400;
}

@media (max-width: 600px) {
    .kd-profile { gap: 12px; }
    .kd-profile-avatar { flex-basis: 46px; width: 46px; height: 46px; font-size: 19px; }
    .kd-profile-name, .kd-page-title { font-size: 22px; }
    .kd-profile-tagline { font-size: 14px; }

    /* Four figures stay on one row, as in the prototype — wrapping them into
       a 2x2 block pushed the verdict card below the fold. */
    .kd-figures { gap: 10px; flex-wrap: nowrap; margin-bottom: 18px; }
    /* Number and label centred in each third (client, 21 Oct 2026); a
       label that needs two lines centres both. */
    .kd-figure { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; }
    .kd-figure b { font-size: 22px; }
    .kd-figure .kd-label { font-size: 9px; letter-spacing: .06em; }

    /* Tighter type and gaps so all six tabs fit without a label being
       sliced mid-word; it still scrolls if a longer set is ever added. */
    .kd-diary-tabs { gap: 15px; }
    .kd-diary-tabs .kd-tab { font-size: 11px; letter-spacing: .08em; }
}

@media (max-width: 360px) {
    .kd-figures { gap: 7px; }
    .kd-figure b { font-size: 19px; }
    .kd-figure .kd-label { font-size: 9px; letter-spacing: .04em; }
    .kd-diary-tabs { gap: 12px; }
}

/* The floated Log out overlaps only the first line's right edge, so the name
   and meta reserve room for it; the tagline below runs full width. */
@media (max-width: 600px) {
}

/* ============================================================
   Account block at the foot of the member pages (01-Sep-2026).
   Sign out lives here, as in the prototype, rather than in the
   profile header where it crowded the name and tagline.
   ============================================================ */
.kd-account { margin: 34px 0 8px; }
.kd-account-label { display: block; margin: 0 0 10px; color: #9a9a9a; }
.kd-account-row {
    display: block; padding: 13px 15px; margin: 0 0 8px;
    background: #f6f4ef; border-radius: 9px;
    color: #111 !important; text-decoration: none; font-size: 14px;
}
.kd-account-row:hover { background: #efece4; }
.kd-account-row span { margin-right: 8px; }
.kd-signout {
    display: block; margin-top: 12px; padding: 14px 15px;
    border: 1px solid #ddd8cc; border-radius: 9px; background: #fff;
    text-align: center; text-decoration: none;
    font-family: var(--kd-mono);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: #6b6b6b !important;
}
.kd-signout:hover { border-color: #c62828; color: #c62828 !important; }

/* ============================================================
   Dashboard home feed (01-Sep-2026) — day-grouped activity cards
   and suggestion rows, per the prototype's Home screen.
   ============================================================ */
.kd-section-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kd-section-link {
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: #c62828 !important; text-decoration: none; font-weight: 700;
}

/* Activity card */
.kd-feed-card {
    display: flex; gap: 14px; align-items: flex-start;
    border: 1px solid #ece8de; border-radius: 12px; background: #fff;
    padding: 12px; margin: 0 0 10px;
}
.kd-feed-poster { position: relative; flex: 0 0 74px; display: block; }
.kd-feed-poster img { width: 74px; height: 104px; object-fit: cover; border-radius: 8px; display: block; background: #f2f2f2; }
.kd-feed-ott {
    position: absolute; top: 5px; left: 5px;
    background: rgba(17,17,17,.82); color: #fff; border-radius: 4px;
    font-family: var(--kd-mono);
    font-size: 9px; letter-spacing: .06em; padding: 2px 4px;
}
.kd-feed-verdict {
    position: absolute; right: -6px; bottom: -6px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; border: 2px solid #fff;
}
.kd-feed-verdict-watch { background: #1e8a3c; }
.kd-feed-verdict-skip  { background: #e30613; }
.kd-feed-body { min-width: 0; flex: 1; }
.kd-feed-title {
    margin: 0 0 3px;
    font-family: var(--kd-serif); font-weight: 700;
    font-size: 17px; line-height: 1.2;
}
.kd-feed-title a { color: #111; text-decoration: none; }
.kd-feed-title a:hover { color: #c62828; }
.kd-feed-meta {
    margin: 0 0 8px;
    font-family: var(--kd-mono);
    font-size: 11px; color: #9a9a9a;
}
.kd-feed-row { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.kd-feed-row .kd-badge-watch, .kd-feed-row .kd-badge-skip {
    font-family: var(--kd-mono);
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 8px; border-radius: 4px; color: #fff;
}
.kd-feed-row .kd-badge-watch { background: #1e8a3c; }
.kd-feed-row .kd-badge-skip  { background: #e30613; }
.kd-feed-stars { font-size: 13px; letter-spacing: 1px; }
.kd-feed-quote {
    margin: 8px 0 0;
    font-family: var(--kd-serif); font-style: italic;
    font-size: 14px; line-height: 1.5; color: #333;
}
.kd-see-all { margin: 4px 0 0; }
.kd-see-all a { font-size: 13px; color: #c62828; }

/* Suggestion rows */
.kd-suggestions { display: flex; flex-direction: column; gap: 10px; }

/* Browse More (ref 5.1) now uses .kd-see-all, so it needs no styling of its
   own — only the gap that separates it from the ACCOUNT block below, which the
   activity-feed instance does not need. */
.kd-see-all-browse { margin-bottom: 22px; }
.kd-suggestion {
    display: flex; align-items: center; gap: 14px;
    background: #f6f4ef; border-radius: 12px; padding: 10px 14px 10px 10px;
}
.kd-suggestion-poster { flex: 0 0 56px; }
.kd-suggestion-poster img { width: 56px; height: 78px; object-fit: cover; border-radius: 7px; display: block; background: #e8e5dd; }
.kd-suggestion-body { flex: 1; min-width: 0; }
.kd-suggestion-pct.kd-dim { display: block; font-size: 12px; font-weight: 400; color: #9a9a9a; line-height: 1.1; }
.kd-suggestion-title {
    margin: 2px 0 0;
    font-family: var(--kd-serif); font-weight: 700; font-size: 16px; line-height: 1.2;
}
.kd-suggestion-title a { color: #111; text-decoration: none; }
.kd-suggestion-add {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid #cfc9bb; background: #fff; cursor: pointer;
    font-size: 17px; line-height: 1; color: #444;
}
.kd-suggestion-add:hover { border-color: #111; color: #111; }
.kd-suggestion-add.kd-on { background: #1e8a3c; border-color: #1e8a3c; color: #fff; }
.kd-suggestion-add:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
    .kd-feed-poster { flex-basis: 64px; }
    .kd-feed-poster img { width: 64px; height: 90px; }
    .kd-feed-title { font-size: 16px; }
}
.kd-account-row em {
    font-style: normal; color: #9a9a9a;
    font-family: var(--kd-mono); font-size: 12px;
}

/* Feed card refinements to match the prototype's proportions: smaller poster,
   the verdict pip tucked inside the poster's corner, flat white thumb icons
   in the pills, and a lighter type scale. */
.kd-feed-card { gap: 12px; padding: 10px; }
.kd-feed-poster { flex: 0 0 72px; }
.kd-feed-poster img,
.kd-feed-poster-blank {
    width: 72px; height: 96px; border-radius: 7px; display: block;
    object-fit: cover; background: #ece8de;
}
.kd-feed-verdict {
    right: 5px; bottom: 5px; width: 24px; height: 24px;
    box-shadow: 0 0 0 2px #fff; border: 0;
}
.kd-feed-verdict svg { display: block; }
.kd-feed-title { font-size: 17px; }
.kd-feed-meta { font-size: 11px; margin-bottom: 7px; }
.kd-feed-row .kd-badge-watch,
.kd-feed-row .kd-badge-skip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; font-size: 10px;
}
.kd-feed-row .kd-badge-watch svg,
.kd-feed-row .kd-badge-skip svg { display: block; }
.kd-feed-stars { font-size: 12px; letter-spacing: .5px; }
.kd-feed-quote { font-size: 14px; margin-top: 7px; }

/* Suggestion rows: the Watch % is the card's stats line (.kd-card-stats), so
   it takes the shared 14 px thumb and 12 px number; .kd-suggestion-pct is
   only the "No votes yet" text now (19 Oct 2026). */
.kd-suggestion-poster img,
.kd-suggestion-poster .kd-feed-poster-blank { width: 56px; height: 78px; }

/* ============================================================
   Watchlist QUEUE (01-Sep-2026) — numbered rows with poster,
   OTT badge and the two queue actions, per the prototype.
   Only the queue exists: no By-platform or Calendar controls.
   ============================================================ */
.kd-queue { display: flex; flex-direction: column; gap: 10px; }
.kd-queue-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid #ece8de; border-radius: 12px; background: #fff; padding: 10px;
}
.kd-queue-num {
    flex: 0 0 24px;
    font-family: var(--kd-mono);
    font-size: 12px; color: #b9b3a5; text-align: center;
}
.kd-queue-poster { position: relative; flex: 0 0 62px; display: block; }
.kd-queue-poster img,
.kd-queue-poster .kd-feed-poster-blank {
    width: 62px; height: 84px; object-fit: cover; border-radius: 7px;
    display: block; background: #ece8de;
}
.kd-queue-body { flex: 1; min-width: 0; }
.kd-queue-title {
    margin: 0 0 3px;
    font-family: var(--kd-serif); font-weight: 700;
    font-size: 16px; line-height: 1.2;
}
.kd-queue-title a { color: #111; text-decoration: none; }
.kd-queue-title a:hover { color: #c62828; }
.kd-queue-meta, .kd-queue-added {
    margin: 0;
    font-family: var(--kd-mono);
    font-size: 11px; color: #9a9a9a;
}
.kd-queue-added { margin-top: 3px; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.kd-queue-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.kd-queue-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1px solid transparent; padding: 0;
}
.kd-queue-btn svg { display: block; }
/* Thumbs sit muted (outlined, grey glyph) and light up only when they are the
   member's verdict. Since 08-Sep-2026 a vote keeps the row on the list, so a
   lit thumb is now state, not a one-shot action. The colour is on the glyph's
   fill attribute, so the muted look sets fill from CSS and the lit one hands
   it back. */
.kd-queue-watch, .kd-queue-skip { background: #fff; border-color: #cfc9bb; }
.kd-queue-watch svg, .kd-queue-skip svg { fill: #9a9a9a; }
.kd-queue-watch:hover { border-color: #1e8a3c; }
.kd-queue-watch:hover svg { fill: #1e8a3c; }
.kd-queue-skip:hover { border-color: #e30613; }
.kd-queue-skip:hover svg { fill: #e30613; }
.kd-queue-watch.kd-on, .kd-queue-watch.kd-on:hover { background: #1e8a3c; border-color: #1e8a3c; }
.kd-queue-skip.kd-on,  .kd-queue-skip.kd-on:hover  { background: #e30613; border-color: #e30613; }
.kd-queue-watch.kd-on svg, .kd-queue-skip.kd-on svg { fill: #fff; }
.kd-queue-remove {
    background: #fff; border-color: #cfc9bb; color: #777;
    font-size: 22px; line-height: 1;
}
.kd-queue-remove:hover { border-color: #111; color: #111; }
.kd-queue-btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
    .kd-queue-row { gap: 9px; padding: 9px; }
    .kd-queue-num { flex-basis: 18px; font-size: 11px; }
    .kd-queue-poster { flex-basis: 54px; }
    .kd-queue-poster img, .kd-queue-poster .kd-feed-poster-blank { width: 54px; height: 74px; }
    .kd-queue-title { font-size: 15px; }
    .kd-queue-btn { width: 34px; height: 34px; }
    .kd-queue-actions { gap: 6px; }
}

/* ============================================================
   Log timeline (01-Sep-2026) — dated rows with the verdict pill,
   rating and review, per the prototype's LOG tab. Timeline only:
   "Genres" and "vs crowd" are not built, so they are not shown.
   ============================================================ */
.kd-log-summary { margin: 0 0 22px; }
.kd-log-summary .kd-stats-row b { font-size: 40px; }
.kd-log-summary .kd-split-bar { margin-bottom: 0; }

.kd-log-list { border-top: 1px solid #ece8de; }
.kd-log-entry { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #ece8de; }
.kd-log-when {
    flex: 0 0 42px; text-align: center; line-height: 1;
    font-family: var(--kd-mono);
}
.kd-log-mon { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #9a9a9a; }
.kd-log-day { display: block; font-size: 24px; font-weight: 700; color: #111; margin-top: 3px; }
.kd-log-body { flex: 1; min-width: 0; }
.kd-log-name {
    margin: 0 0 7px;
    font-family: var(--kd-serif); font-weight: 700;
    font-size: 17px; line-height: 1.2;
}
.kd-log-name a { color: #111; text-decoration: none; }
.kd-log-name a:hover { color: #c62828; }
.kd-log-row-actions { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.kd-log-verdict {
    display: inline-flex; align-items: center; gap: 5px;
    border: 0; cursor: pointer; padding: 5px 9px; border-radius: 4px; color: #fff;
    font-family: var(--kd-mono);
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.kd-log-verdict.kd-badge-watch { background: #1e8a3c; }
.kd-log-verdict.kd-badge-skip  { background: #e30613; }
.kd-log-verdict:disabled { opacity: .6; cursor: default; }
.kd-log-verdict svg { display: block; }
.kd-log-entry .kd-feed-quote { margin-top: 8px; }
.kd-log-pager { display: flex; gap: 20px; margin: 18px 0 0; }
.kd-log-pager a { font-size: 13px; color: #c62828; }

@media (max-width: 600px) {
    .kd-log-entry { gap: 12px; padding: 14px 0; }
    .kd-log-when { flex-basis: 36px; }
    .kd-log-day { font-size: 21px; }
    .kd-log-name { font-size: 16px; }
    .kd-log-summary .kd-stats-row b { font-size: 32px; }
}

/* ============================================================
   My OTTs (02-Sep-2026) — region pills and per-country service
   rows with code tile, name, state line and a switch.
   ============================================================ */
.kd-ott-intro { margin: -8px 0 22px; font-size: 15px; color: #555; max-width: 42em; }
.kd-ott-heading { display: block; margin: 0 0 10px; color: #9a9a9a; }

/* One row always: the five regions read as a single control, and wrapping
   the fifth onto its own line made it look like a separate group. Scrolls
   only if a future region list outgrows the width. */
.kd-region-pills {
    display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 22px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kd-region-pills::-webkit-scrollbar { display: none; }
.kd-region-pill { flex: 0 0 auto; white-space: nowrap; }
.kd-region-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid #ddd8cc; background: #fff; cursor: pointer;
    border-radius: 999px; padding: 9px 16px;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .1em; color: #444;
}
.kd-region-pill:hover { border-color: #111; color: #111; }
.kd-region-pill.kd-on { background: #111; border-color: #111; color: #fff; }
.kd-region-code { opacity: .55; font-size: 10px; }
.kd-region-pill.kd-on .kd-region-code { opacity: .7; }

.kd-ott-count-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.kd-ott-count, .kd-ott-region-tag { color: #9a9a9a; }
.kd-ott-count b { color: #111; }

.kd-ott-list { border-top: 1px solid #ece8de; }
.kd-ott-row {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 2px; border-bottom: 1px solid #ece8de;
    cursor: pointer; background: none; border-radius: 0;
}
.kd-ott-badge {
    flex: 0 0 46px; height: 46px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #efece4; color: #8a8578;
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.kd-ott-row.kd-on .kd-ott-badge { background: #111; color: #fff; }

/* Logo badge (client feedback V1 ref 2.2, 17-Sep-2026). Provider logos come
   from TMDB on a transparent or white ground and are not a consistent shape, so
   the tile keeps the same 46px box the letter badge had and the image is
   contained inside it — that way a wide wordmark and a square icon both sit on
   the same grid line rather than each setting their own row height.

   White rather than the letter badge's stone, because most of these logos are
   drawn to sit on white; and the selected state does NOT invert to black here,
   which would swallow any dark logo. */
.kd-ott-badge-logo {
    background: #fff;
    border: 1px solid #e8e5dd;
    padding: 6px;
    overflow: hidden;
}
.kd-ott-badge-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kd-ott-row.kd-on .kd-ott-badge-logo { background: #fff; border-color: #111; }

/* ref 2.1: the region row moved onto the first onboarding step, so it needs the
   heading and spacing the settings screen gives it. */
.kd-ob-region-head { margin: 0 0 8px; }
.kd-steps .kd-region-pills { margin: 0 0 18px; }
.kd-ott-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kd-ott-name { font-size: 16px; font-weight: 700; color: #111; line-height: 1.2; }
.kd-ott-state {
    font-family: var(--kd-mono);
    font-size: 11px; color: #9a9a9a;
}
.kd-ott-row.kd-on .kd-ott-state { color: #1e8a3c; }
.kd-ott-input { position: absolute; opacity: 0; width: 0; height: 0; }
.kd-switch {
    flex: 0 0 52px; width: 52px; height: 30px; border-radius: 999px;
    background: #e2ded4; position: relative; transition: background .15s ease;
}
.kd-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 24px; height: 24px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease;
}
.kd-ott-row.kd-on .kd-switch { background: #1e8a3c; }
.kd-ott-row.kd-on .kd-switch::after { transform: translateX(22px); }
.kd-ott-input:focus-visible ~ .kd-switch { outline: 2px solid #111; outline-offset: 2px; }

@media (max-width: 600px) {
    .kd-ott-intro { font-size: 14px; }
    .kd-region-pill { padding: 8px 13px; font-size: 10px; }
    .kd-ott-badge { flex-basis: 42px; height: 42px; font-size: 10px; }
    .kd-ott-name { font-size: 15px; }
    .kd-switch { flex-basis: 48px; width: 48px; height: 28px; }
    .kd-switch::after { width: 22px; height: 22px; }
    .kd-ott-row.kd-on .kd-switch::after { transform: translateX(20px); }
}

/* Tightened so all five regions fit a phone without scrolling. */
@media (max-width: 600px) {
    .kd-region-pills { gap: 5px; }
    .kd-region-pill { padding: 8px 10px; font-size: 10px; letter-spacing: .04em; gap: 4px; }
    .kd-region-code { font-size: 9px; }
}
@media (max-width: 360px) {
    .kd-region-pills { gap: 4px; }
    .kd-region-pill { padding: 7px 8px; font-size: 9px; letter-spacing: .02em; }
}

/* ============================================================
   Sign in / Create account (02-Sep-2026) — the prototype's B.00
   screen: mono caption, two-tone serif headline, then the
   sign-in choices as full-width buttons.
   ============================================================ */
/* Sized and spaced to match the prototype's B.00 screen exactly (measured
   from peppy-taffy-c1e154.netlify.app): the three groups below (top/mid/
   bottom) are spread across the column with space-between, the same way the
   prototype spreads its logo+caption, headline+lede and actions blocks —
   that's where the design's generous breathing room actually comes from,
   not from margins on the text itself. */
.kd-auth-page {
    max-width: 430px; padding-top: 34px; padding-bottom: 40px;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 28px;                                 /* floor: still shows on short viewports, where */
    min-height: 78vh; min-height: 78dvh;       /* there's no leftover height for space-between to add */
}
.kd-auth-top,
.kd-auth-mid,
.kd-auth-bottom { flex: 0 0 auto; }
/* .kd-page h1 (generic, line 8) beats a plain .kd-auth-headline selector on
   specificity, so it was silently forcing this margin down to 4px — the
   .kd-auth-page prefix here outranks it. */
.kd-auth-page .kd-auth-headline {
    font-family: var(--kd-serif); font-style: italic; font-weight: 700;
    font-size: 28px; line-height: 1.2; letter-spacing: -.5px; color: #111; margin: 0 0 16px;
}
.kd-auth-headline em { font-style: italic; }
.kd-auth-watch { color: #e30613; }
.kd-auth-track { color: #1e8a3c; }
.kd-auth-lede { font-size: 13.5px; line-height: 1.55; color: #333; margin: 0; }
/* Only the sign-in screen puts the benefit list above the lede; the register
   screen still leads with it, so the gap belongs to the list, not the lede. */
.kd-auth-list + .kd-auth-lede { margin-top: 18px; }

/* Benefit list (client feedback V1 ref 1.2, 17-Sep-2026). The tick is a
   pseudo-element rather than a character in the markup, so it is never read
   out or copied with the text; the row it sits in is the same green as a
   Watch verdict, which is the one place this colour already means "yes". */
.kd-auth-list-head {
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #666; margin: 0 0 10px;
}
.kd-auth-list { list-style: none; margin: 0; padding: 0; }
.kd-auth-list li {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
    font-size: 14px; line-height: 1.45; color: #222;
}
.kd-auth-list li:last-child { margin-bottom: 0; }
.kd-auth-list li::before {
    content: '';
    position: absolute; left: 0; top: 1px;
    width: 20px; height: 20px;
    border-radius: 4px;
    background: #e8f4ec;
}
.kd-auth-list li::after {
    content: '';
    position: absolute; left: 6px; top: 5px;
    width: 5px; height: 10px;
    border: solid #1e8a3c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.kd-auth-actions { display: flex; flex-direction: column; gap: 10px; }
.kd-auth-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 14px 16px; border-radius: 8px; cursor: pointer;
    border: 1px solid #111; background: none; color: #111;
    font-size: 14px; font-weight: 600;
}
.kd-auth-btn:hover { background: #111; color: #fff; }
/* Sized to sit with Nextend's 24px Google G. */
.kd-auth-icon { width: 22px; height: 22px; flex: 0 0 auto; }

/* Nextend renders its own button; match it to "Continue with Email" — same
   width and height, icon and label centred as a pair, as the prototype has it.
   The selectors name .nsl-button exactly on purpose: [class*="nsl-button"]
   also matches .nsl-button-svg-container and .nsl-button-label-container, and
   forcing width:100% on those gave the icon the whole row and squeezed the
   label to 0px, so the button rendered as a bare G. */
.kd-auth-google .nsl-container { margin: 0 !important; width: 100% !important; }
.kd-auth-google .nsl-container-buttons { display: block !important; width: 100% !important; }
.kd-auth-google .nsl-container-buttons > a {
    display: block !important; width: 100% !important; max-width: 100% !important;
}
.kd-auth-google .nsl-button.nsl-button-default {
    width: 100% !important; max-width: 100% !important;
    height: 51px !important;               /* .kd-auth-btn: 14px padding + 1px border */
    align-items: center !important;        /* Nextend's line-height assumes a 40px button */
    justify-content: center !important;
    border-radius: 8px !important; border-color: #ddd8cc !important;
}
.kd-auth-google .nsl-button-svg-container {
    width: auto !important; height: auto !important; line-height: 0 !important;
    padding: 0 !important; margin: 0 9px 0 0 !important;
}
.kd-auth-google .nsl-button-label-container {
    flex: 0 0 auto !important; width: auto !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; line-height: 1.2 !important;
    font-size: 14px !important; font-weight: 700 !important;
}

/* The core login form, restyled to sit with the buttons. */
.kd-auth-form { margin-top: 4px; }
.kd-auth-form p { margin: 0 0 12px; }
.kd-auth-form label { display: block; font-size: 13px; color: #555; margin-bottom: 5px; }
.kd-auth-form input[type="text"],
.kd-auth-form input[type="password"] {
    width: 100%; padding: 12px 14px; font-size: 15px;
    border: 1px solid #ddd8cc; border-radius: 8px; background: #fff; color: #111;
}
.kd-auth-form input[type="text"]:focus,
.kd-auth-form input[type="password"]:focus { border-color: #111; outline: none; }
.kd-auth-form .login-remember label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kd-auth-form .login-submit input[type="submit"] {
    width: 100%; padding: 14px 16px; border: 0; border-radius: 8px; cursor: pointer;
    background: #111; color: #fff; font-size: 14px; font-weight: 700;
}
.kd-auth-form .login-submit input[type="submit"]:hover { background: #333; }

.kd-auth-alt { margin: 22px 0 0; font-size: 14px; color: #555; }
.kd-auth-alt a { color: #c62828; font-weight: 600; }

@media (max-width: 600px) {
    .kd-auth-page { padding-top: 24px; gap: 22px; min-height: 82vh; min-height: 82dvh; }
}
/* Narrowest phones (iPhone SE / small-Android widths, 320px and under): the
   28px headline was wrapping to 4 lines and eating the space the gap above
   needs. Above 320px the base 28px (set on .kd-auth-page .kd-auth-headline
   above) applies unchanged. */
@media (max-width: 321px) {
    .kd-auth-page .kd-auth-headline { font-size: 22px; letter-spacing: -.3px; }
    .kd-auth-lede { font-size: 13px; }
}

/* ============================================================
   Browse (02-Sep-2026) — the prototype's B.13 screen: search,
   filter pills, platform pills, count, then poster tiles with
   the OTT badge and the crowd's verdict.
   ============================================================ */
/* The screen leads with the search box, so its title is a crumb, not a
   headline — but it is still the h1: the page is public and indexable. */
.kd-page h1.kd-crumb {
    /* Specific enough to beat the theme's own h1 sizing. */
    font-family: var(--kd-mono);
    font-size: 10px; font-weight: 400; line-height: 1.3; letter-spacing: .06em;
    color: #777; margin: 0 0 14px; text-transform: none;
}

.kd-search { position: relative; margin: 0 0 16px; }
.kd-search-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(-45deg);
    color: #9a9a9a; font-size: 15px; pointer-events: none;
}
.kd-search input {
    width: 100%; padding: 13px 14px 13px 38px;
    border: 1px solid #ece8de; border-radius: 10px; background: #f6f4ef;
    font-size: 15px; color: #111;
}
.kd-search input:focus { border-color: #111; background: #fff; outline: none; }

.kd-pills-platform { margin-top: -6px; }
/* Movies / TV Shows: links between the two Browse pages, in the pill style.
   Links, so the theme's link colour and underline have to be beaten. */
.kd-page .kd-browse-switch a.kd-pill { display: inline-block; text-decoration: none; color: #111; }
.kd-page .kd-browse-switch a.kd-pill:hover { color: #111; }
.kd-page .kd-browse-switch a.kd-pill.kd-on,
.kd-page .kd-browse-switch a.kd-pill.kd-on:hover { color: #fff; }
.kd-browse-count {
    margin: 4px 0 14px;
    font-family: var(--kd-mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a;
}

/* Card: poster, title and the stats line (thumb + Watch %, star + rating)
   live in diary-cards.css, the one copy shared with the home rows; this
   file depends on it (19 Oct 2026). Only the OTT badge is styled here. */
.kd-card-ott {
    position: absolute; top: 7px; left: 7px;
    background: rgba(17,17,17,.85); color: #fff; border-radius: 3px;
    font-family: var(--kd-mono);
    font-size: 9px; letter-spacing: .06em; padding: 2px 5px;
}

@media (max-width: 600px) {
    .kd-search input { font-size: 14px; padding-left: 36px; }
}
/* All five platform pills have to share one row on the narrowest phone —
   at the wider padding MUBI dropped to a line of its own at 320px. */
@media (max-width: 380px) {
    .kd-pills { gap: 5px; }
    .kd-pill { padding: 7px 10px; letter-spacing: .04em; }
}

/* Inputs must include their padding in the declared width: the theme does not
   apply border-box to form fields, so width:100% plus padding overflowed the
   page by ~40px on narrow screens. */
.kd-search input,
.kd-auth-form input[type="text"],
.kd-auth-form input[type="password"],
.kd-field input {
    /* !important: the theme forces content-box on form fields. */
    box-sizing: border-box !important; max-width: 100%;
}

/* Search/filter in flight (02-Sep-2026). The grid keeps the previous results
   on screen, dimmed, rather than blanking — a request can take a second on a
   cold cache and an empty page reads as "no results". */
.kd-grid.kd-busy { opacity: .45; transition: opacity .15s ease; pointer-events: none; }
.kd-browse-count { min-height: 14px; }

/* ============================================================
   Favourite Four (03-Sep-2026) — four pinned titles on Home,
   edited on their own page. The row is always four slots wide:
   an empty slot invites the first pick.
   ============================================================ */
.kd-favourites { margin: 0 0 26px; }
.kd-fav-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kd-fav-tile {
    position: relative; display: block; aspect-ratio: 3 / 4;
    border-radius: 6px; overflow: hidden; background: #f2f0ea;
}
.kd-fav-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-fav-blank {
    display: flex; align-items: center; justify-content: center; height: 100%;
    padding: 6px; font-size: 10px; line-height: 1.25; color: #8a8578; text-align: center;
}
.kd-fav-empty {
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #ddd8cc; background: none; color: #bdb8ab; font-size: 20px;
    text-decoration: none;
}
a.kd-fav-empty:hover { border-color: #111; color: #111; }

/* Editor: each filled slot carries its own reorder/remove bar. */
.kd-fav-edit .kd-fav-tile { aspect-ratio: 3 / 4.6; }
.kd-fav-tools {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(17, 17, 17, .82); padding: 3px 4px;
}
.kd-fav-tools button {
    background: none; border: 0; color: #fff; cursor: pointer;
    font-size: 12px; line-height: 1; padding: 3px 5px;
}
.kd-fav-tools button:disabled { opacity: .3; cursor: default; }
.kd-fav-drop { font-size: 15px !important; }

.kd-fav-heading { margin-top: 26px; }

/* The pools the member picks from: their log, and search results. */
/* auto-fill: a handful of large tiles on a phone, a neat grid of small ones
   on a desktop, without a breakpoint for each. */
.kd-fav-pool {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px; margin: 0 0 6px;
}
.kd-fav-pick {
    display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.kd-fav-pick img,
.kd-fav-pick .kd-fav-blank {
    /* height:auto overrides the tile rule above, which fills its parent — here
       the parent has no height of its own and aspect-ratio sets it. */
    width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: flex;
    border-radius: 6px; background: #f2f0ea;
}
.kd-fav-pick-title {
    display: block; margin-top: 5px; font-size: 11px; line-height: 1.3; color: #444;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-fav-pick:disabled { cursor: default; }
.kd-fav-pick:disabled img,
.kd-fav-pick:disabled .kd-fav-blank { opacity: .35; }
.kd-fav-pick.kd-on img { outline: 2px solid #1e8a3c; outline-offset: -2px; opacity: 1; }
.kd-fav-pick.kd-on .kd-fav-pick-title { color: #1e8a3c; font-weight: 600; }

@media (max-width: 420px) {
    .kd-fav-pool { gap: 8px; }
    .kd-fav-pick-title { font-size: 10px; }
}

/* ============================================================
   Review composer (03-Sep-2026) — the prototype's B.16 order:
   YOUR RATING, YOUR VERDICT, YOUR REVIEW. wpDiscuz emits the
   rating widget and the form as two siblings inside #comments,
   so #comments is display:contents and the whole composer is
   one flex column — that is what lets the diary's own blocks
   sit between wpDiscuz's without moving any nodes.
   ============================================================ */
.kd-compose { display: flex; flex-direction: column; }
.kd-compose #comments { display: contents; }

.kd-compose .kd-compose-rating-label { order: 1; }
.kd-compose #wpd-post-rating          { order: 2; }
.kd-compose .kd-compose-verdict       { order: 3; }
.kd-compose .kd-compose-review-label  { order: 4; }
.kd-compose #wpdcom                   { order: 5; }

.kd-compose-label {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: #8a8578; margin: 0 0 8px;
}
/* wpDiscuz's own caption is replaced by the label above it, which the diary
   controls; its text is a plugin setting, not something the theme can name. */
.kd-compose #wpd-post-rating .wpd-rating-title { display: none !important; }
.kd-compose #wpd-post-rating { margin-bottom: 18px !important; }

/* Verdict — the same state as Your Take at the top of the page. */
.kd-compose-verdict { margin: 0 0 18px; }
.kd-compose-verdict-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kd-compose-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 8px; border-radius: 8px; cursor: pointer; background: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase;
    font-family: var(--kd-mono);
}
.kd-compose-btn svg { display: block; }
.kd-compose-watch { border: 1.5px solid #1e8a3c; color: #1e8a3c; }
.kd-compose-skip  { border: 1.5px solid #e30613; color: #e30613; }
.kd-compose-watch.kd-on { background: #1e8a3c; color: #fff; }
.kd-compose-skip.kd-on  { background: #e30613; color: #fff; }

/* The two checkboxes, once moved inside wpDiscuz's form. */
.kd-compose-flags { display: flex; flex-direction: column; gap: 7px; margin: 12px 0 0; }
.kd-compose-check {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; color: #333; cursor: pointer;
}
.kd-compose-check input { width: 16px; height: 16px; margin: 0; accent-color: #111; cursor: pointer; }

/* The warning a spoiler-flagged review carries, and the reveal it controls. */
.kd-review-spoiler {
    display: block; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: #e30613; margin: 0 0 6px;
}
.kd-review-spoiler .kd-spoiler-action { color: #8a8578; }
.kd-review-spoiler:hover .kd-spoiler-action { color: #111; }

.kd-review.kd-spoilered .kd-review-quote {
    filter: blur(5px);
    /* Not a lock — the words are still in the page. This only stops the ending
       being read by accident, and stops a drag-select lifting it unread. */
    user-select: none; -webkit-user-select: none; cursor: pointer;
}
.kd-review .kd-review-quote { transition: filter .18s ease; }
.kd-review-spoiler:focus-visible { outline: 2px solid #e30613; outline-offset: 2px; }

@media (max-width: 420px) {
    .kd-compose-btn { gap: 6px; }
    .kd-compose-verdict-row { gap: 8px; }
}

/* Inline ad slot (movie page, below Where to Watch). The spacing sits on the
   ad box, not the wrapper: the slot removes itself on mobile, and a wrapper
   with margins would hold a gap open where nothing renders. */
.kd-inline-ad { display: flex; justify-content: center; }
.kd-inline-ad .ad-wrapper-border { margin: 24px 0; }

/* ============================================================
   OTT alerts + notifications (04-Sep-2026)
   ============================================================ */
.kd-ott-alert-btn.kd-on { background: #e30613; color: #fff; border-color: #e30613; }
.kd-ott-alert-btn:disabled { opacity: .55; cursor: default; }
.kd-ott-note a { color: #e30613; font-weight: 700; }


.kd-queue-alert { background: #fff; border-color: #cfc9bb; font-size: 14px; line-height: 1; }
.kd-queue-alert:hover { border-color: #111; }
.kd-queue-alert.kd-on { background: #fdf1da; border-color: #e0a33a; }
.kd-queue-btn:disabled { opacity: .5; cursor: default; }
/* The theme sets display on buttons with enough weight to beat the UA
   [hidden] rule, so the alert button needs it said explicitly. */
.kd-ott-alert-btn[hidden] { display: none !important; }

/* TV shows: the bell names its season. "Season 4 Alert" wrapped onto two
   lines on phones, where three buttons share the row, so it reads "S4 Alert"
   there (14 Oct 2026). */
.kd-alert-season-short { display: none; }
@media (max-width: 600px) {
    .kd-alert-season-long { display: none; }
    .kd-alert-season-short { display: inline; }
}
/* 320px phones: "S4 Alert On" still wrapped and grew the whole row. */
@media (max-width: 340px) {
    .kd-yt-actions .kd-ott-alert-btn:has(.kd-alert-season-short) { letter-spacing: 0; }
}

/* Notifications (B.11) — grouped by type, the poster carrying each row. */
.kd-notif-new {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: #e30613; border-radius: 999px; padding: 3px 9px;
}
.kd-notif-group { margin: 22px 0 8px; }
.kd-notif-list { border-top: 1px solid #ece8de; margin: 0 0 6px; }
.kd-notif {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 2px; border-bottom: 1px solid #ece8de;
    color: #111; text-decoration: none;
}
a.kd-notif:hover { background: #fbfaf7; }
.kd-notif-thumb {
    flex: 0 0 34px; width: 34px; height: 50px;
    border-radius: 6px; overflow: hidden; background: #f2f0ea;
}
.kd-notif-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-notif-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kd-notif-text { font-size: 15px; line-height: 1.35; }
.kd-notif.kd-new .kd-notif-text { font-weight: 600; }
/* Unread marker on the row itself: with a poster in the way, a leading dot
   read as part of the artwork. */
.kd-notif.kd-new { box-shadow: inset 3px 0 0 #e30613; padding-left: 10px; }
.kd-notif-when {
    font-family: var(--kd-mono);
    font-size: 10px; letter-spacing: .06em; color: #9a9a9a;
}
/* Waiting on: the line is a sentence to read, not a timestamp, and at 10px
   grey it was too small (client, 21 Oct 2026). Darker too, so it stays
   legible at the larger size. */
.kd-notif-waiting .kd-notif-when {
    font-size: 13px; line-height: 1.4; letter-spacing: .01em; color: #666;
}

/* Browser push status on the Notifications page (B3, 29-Sep-2026): one line
   that says whether this browser will show release alerts. The dot carries
   the state; the sentence always says what happens by email. */
.kd-notif-push {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 14px 0 4px; padding: 11px 13px;
    border: 1px solid #ece8de; border-radius: 10px; background: #fbfaf7;
    font-size: 13px; line-height: 1.4; color: #333;
}
.kd-notif-push[hidden] { display: none !important; }
.kd-notif-push-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; }
.kd-notif-push[data-state="on"] .kd-notif-push-dot { background: #2e7d32; }
.kd-notif-push[data-state="blocked"] .kd-notif-push-dot { background: #e30613; }
.kd-notif-push-text { flex: 1 1 220px; min-width: 0; }
/* "Enable alerts" (5-Oct-2026): filled red, like "Turn on alerts" in the ask
   after sign-in, since it is the way back for a member who chose "Not now". */
.kd-notif-push-btn {
    flex: 0 0 auto; cursor: pointer; padding: 8px 12px;
    border: 1px solid #e30613; border-radius: 9px; background: #e30613;
    font-family: var(--kd-mono);
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.kd-notif-push-btn:hover { border-color: #c62828; background: #c62828; }
.kd-notif-push-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.kd-notif-push-btn[hidden] { display: none !important; }
.kd-notif-push-btn:disabled { opacity: .6; cursor: default; }

/* Ask after sign-in (5-Oct-2026): the dialog part-onesignal-js.php opens on
   the first Diary page after a member signs in, when alerts are not on in
   this browser. */
.kd-push-ask {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0, 0, 0, .45);
}
.kd-push-ask[hidden] { display: none !important; }
.kd-push-ask-card {
    width: 100%; max-width: 380px; padding: 20px 20px 16px;
    border-radius: 12px; background: #fff; color: #222;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    font-family: var(--kd-sans); text-align: left;
}
.kd-push-ask-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #111; }
.kd-push-ask-text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #444; }
.kd-push-ask-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.kd-push-ask-btn {
    cursor: pointer; padding: 9px 14px; margin: 0;
    border: 1px solid #ddd8cc; border-radius: 9px; background: #fff;
    font-family: var(--kd-sans); font-size: 13px; font-weight: 600; line-height: 1.2; color: #333;
}
.kd-push-ask-btn:hover { border-color: #c62828; }
.kd-push-ask-btn[hidden] { display: none !important; }
.kd-push-ask-btn:disabled { opacity: .6; cursor: default; }
.kd-push-ask-yes { border-color: #e30613; background: #e30613; color: #fff; }
.kd-push-ask-yes:hover { border-color: #c62828; background: #c62828; }
.kd-push-ask-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* ============================================================
   Profile (04-Sep-2026) — the details behind the dashboard
   header, split into what shows and what signs you in.
   ============================================================ */
.kd-profile-preview {
    background: #fbfaf7; border: 1px solid #ece8de; border-radius: 12px;
    padding: 16px; margin: 4px 0 22px;
}
.kd-profile-preview .kd-profile-name { font-size: 24px; }
.kd-profile-group { margin: 22px 0 8px; }
.kd-profile-card {
    background: #fff; border: 1px solid #ece8de; border-radius: 12px; padding: 16px 16px 4px;
}
.kd-profile-card .kd-field:last-child { margin-bottom: 12px; }
.kd-field-hint { display: block; margin-top: 5px; font-size: 12px; color: #8a8578; line-height: 1.4; }
.kd-field input:disabled { background: #f6f4ef; color: #8a8578; cursor: not-allowed; }
.kd-field-static { display: flex; flex-direction: column; gap: 5px; }
/* Same as .kd-field label: it sits in the same card as the real labels. */
.kd-field-label { font-size: 13px; color: #555; }
.kd-field-value { font-size: 14px; color: #333; }
.kd-field-value a { color: #c62828; font-weight: 600; }
#kd-profile-form .kd-register-submit { margin-top: 18px; }
#kd-profile-saved { margin-top: 10px; }

/* Profile picture (19 Oct 2026): the file input is driven by the button, so
   it is kept out of sight (not display:none, which some mobile browsers will
   not open a picker for). */
.kd-avatar-field .kd-field-label { display: block; margin-bottom: 7px; }
.kd-avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kd-field input.kd-avatar-input {
    position: absolute; width: 1px !important; height: 1px; padding: 0; border: 0;
    opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.kd-avatar-btn {
    border: 1px solid #111; background: #fff; color: #111; border-radius: 8px;
    padding: 9px 16px; font-size: 14px; line-height: 1.2; font-weight: 600; cursor: pointer;
}
.kd-avatar-btn:hover:not(:disabled) { background: #111; color: #fff; }
.kd-avatar-btn:disabled { opacity: .55; cursor: default; }
.kd-avatar-btn-quiet { border-color: #ddd8cc; color: #555; font-weight: 400; }
.kd-avatar-btn-quiet:hover:not(:disabled) { background: #f6f4ef; color: #111; }
/* Out of the row until shown: hidden but in place, it wrapped onto a line of
   its own at 320px and left a blank gap under the buttons. */
.kd-avatar-actions .kd-saved { margin-left: 2px; }
.kd-avatar-actions .kd-saved:not(.kd-show) { display: none; }
.kd-avatar-error { margin: 8px 0 0; }
.kd-profile-linking { padding-bottom: 14px; }
.kd-profile-linking .kd-auth-google { margin-bottom: 10px; }

/* Password checklist — always shown; the rules help most before typing. */
.kd-pw-rules {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
}
.kd-pw-rule {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: #8a8578; line-height: 1.4;
}
.kd-pw-rule i {
    flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid #ddd8cc; position: relative;
}
.kd-pw-rule.kd-met { color: #1e8a3c; }
.kd-pw-rule.kd-met i { background: #1e8a3c; border-color: #1e8a3c; }
.kd-pw-rule.kd-met i::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px; border: solid #fff;
    border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
@media (max-width: 420px) {
    .kd-pw-rules { grid-template-columns: 1fr; }
}
.kd-notif-head-right { display: inline-flex; align-items: baseline; gap: 12px; }

/* ============================================================
   Touch targets (5-Sep-2026). The prototype draws these controls small —
   pills 25px, the text buttons 13-14px — and the drawn size stays as
   designed. The tappable area is widened invisibly instead, with a
   pseudo-element, and only as far as the nearest OTHER interactive element
   allows, measured at 320-375px: a reach that touches a neighbour hands its
   taps to whichever is painted later. Horizontal reach is never used —
   pills sit 6px apart.
     pills        26px -> 34px   (search input 7px above, next pill row 8px)
     skip         29px -> 44px   (Continue 12px above, nothing below)
     cast-all     29px -> 44px   (nothing above, cast links 18px below)
     log verdict  31px -> 44px   (title link 7px above, next row 28px below)
   ============================================================ */
.kd-pill, .kd-skip-btn, .kd-cast-all, .kd-log-verdict { position: relative; }
.kd-pill::before, .kd-skip-btn::before, .kd-cast-all::before, .kd-log-verdict::before {
    content: ""; position: absolute; left: 0; right: 0;
}
.kd-pill::before        { top: -4px; bottom: -4px; }
.kd-skip-btn::before    { top: -5px; bottom: -10px; }
.kd-cast-all::before    { top: -9px; bottom: -6px; }
.kd-log-verdict::before { top: -3px; bottom: -10px; }

/* ============================================================
   Onboarding on tablet and desktop (07-Sep-2026). The three
   steps were the phone column stretched to 600px and left
   there, so a laptop got a narrow ribbon marooned in an empty
   page — the same layout as a 390px phone, only with more white
   space round it. Two things change above 768px:

     - the column takes the width the rest of the diary takes
       (.kd-page's 1100px), instead of clamping itself to 600;
     - the controls use that width — regions three to a row, the
       service list in two columns, bigger vote tiles — rather
       than growing a phone-sized control to fill it.

   From 1024px the step splits in two: the question and its two
   buttons sit in a fixed rail on the left, the control fills the
   rest. That is what the wrappers in the template are for
   (.kd-step-copy / -main / -actions); below 1024 they are plain
   blocks and the stacking order is exactly the prototype's.
   ============================================================ */

/* ---- Tablet: one column still, but a tablet-sized one. ------ */
@media (min-width: 768px) {
    .kd-steps { max-width: 720px; }

    .kd-progress { margin-bottom: 28px; }
    .kd-step-label { font-size: 11px; }
    /* .kd-page prefix, not a bare .kd-step-title: the step question is an
       h1, and `.kd-page h1 { font-size: 28px }` further up is (0,1,1) — it
       out-ranks a single class and silently holds every size written that
       way at 28px. Two classes clear it. */
    .kd-page .kd-step-title { font-size: 34px; margin-bottom: 10px; }
    /* Capped by measure, not by the column: a 720px line of 15px
       body text is past comfortable reading. */
    .kd-step-sub { font-size: 15px; line-height: 1.55; max-width: 54ch; margin-bottom: 26px; }
    .kd-count-label { font-size: 11px; }

    /* Six countries: two rows of three rather than three of two. */
    .kd-region-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
    .kd-region-card { padding: 18px 16px; gap: 12px; }
    .kd-region-card .kd-region-flag { font-size: 28px; }
    .kd-region-card .kd-region-name { font-size: 15px; }

    /* Eight services one under another ran well past the fold on a
       tablet; paired up they are one screenful. :not([hidden]) is
       load-bearing — the step-1 handler hides the other regions'
       lists with the attribute, and an author display:grid beats
       the UA's [hidden] rule and would show all six at once. */
    .kd-ob-otts:not([hidden]) {
        display: grid; grid-template-columns: 1fr 1fr;
        column-gap: 36px; border-top: 0;
    }
    .kd-ob-otts .kd-ott-row { border-top: 1px solid #ece8de; border-bottom: 0; }

    /* Three across at every width, as before — the tiles just get
       the room to be posters rather than thumbnails. */
    .kd-vote-grid { gap: 18px; }
    .kd-vote-grid .kd-card-body { padding: 9px 0 0; gap: 8px; }
    .kd-vote-grid .kd-card-title { font-size: 13px; line-height: 1.25; }
    .kd-vote-grid .kd-card-pip { top: 8px; right: 8px; width: 26px; height: 26px; }
    .kd-card-actions.kd-compact { gap: 6px; }
    .kd-card-actions.kd-compact .kd-verdict-btn { padding: 9px 0; border-radius: 6px; }
}

/* A full-bleed 720px "Continue" is a phone button that grew; the
   pair reads as one action row instead, at every width from here
   up — desktop keeps the same stacked shape as tablet, so it
   keeps the same action row too. */
@media (min-width: 768px) {
    .kd-next-btn {
        display: inline-block; width: auto; min-width: 240px;
        padding: 15px 34px; vertical-align: middle;
    }
    .kd-skip-btn {
        display: inline-block; width: auto; vertical-align: middle;
        margin: 22px 0 0 22px; padding: 4px 2px;
    }
}

/* ---- Desktop: the tablet's shape, at the page's own width. ----
   Question at the top, control in the middle, the two buttons at
   the foot — the same order the phone and tablet have. What the
   extra width buys is the CONTROL, not a second column: more
   countries, more services and more posters to a row. */
@media (min-width: 1024px) {
    /* The clamp is what kept this at 600px. The 1100 is restated
       rather than set to `none`: .kd-page and .kd-steps are the
       same element, they tie on specificity, and .kd-steps is
       written later — `none` drops the page's own cap with the
       clamp and runs the step edge to edge of the browser. */
    .kd-steps { max-width: 1100px; }

    .kd-page .kd-step-title { font-size: 38px; }   /* see the note at 768px */

    /* All six countries on one row. auto-fit rather than a count,
       so adding a seventh to koimoi_diary_regions() reflows
       instead of stranding it on a row of its own. */
    .kd-region-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }

    /* Three columns at 1100px: two of them put the on/off switch
       some 500px from the service it belongs to. */
    .kd-ob-otts:not([hidden]) { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }

    /* Four posters to a row. At three they are 350px wide here —
       the size of a poster on a movie page, not of a vote tile. */
    .kd-vote-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .kd-vote-grid .kd-card-title { font-size: 14px; }

    /* Pointer, not thumb: the cards can say what they do on hover. */
    .kd-region-card { transition: border-color .15s ease, background .15s ease; }
    .kd-region-card:hover { border-color: #111; }
    .kd-region-card.kd-on:hover { background: #111; }
    .kd-ott-row:hover .kd-ott-badge { background: #ddd8cc; }
    .kd-ott-row.kd-on:hover .kd-ott-badge { background: #111; }
    .kd-card-actions.kd-compact .kd-verdict-btn.kd-watch:hover { background: #1e8a3c; color: #fff; }
    .kd-card-actions.kd-compact .kd-verdict-btn.kd-skip:hover { background: #e30613; color: #fff; }
    .kd-next-btn:not(:disabled):hover { background: #333; }
}

/* ============================================================
   Your recent verdicts (07-Sep-2026) -- the compact list on Home,
   above Favourite Four. Three fixed columns after the title so
   the Watch/Skip pills and dates line up row to row; the title
   is the only column that flexes, and it clamps rather than
   pushing the pill off the edge on a phone.
   ============================================================ */
.kd-recent-verdicts { margin: 0 0 26px; }
.kd-recent-verdicts .kd-section-head { margin-top: 0; }
.kd-rv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ece8de; }
.kd-rv-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; margin: 0; border-bottom: 1px solid #ece8de;
}
.kd-rv-poster { flex: 0 0 40px; display: block; line-height: 0; }
.kd-rv-poster img,
.kd-rv-poster .kd-feed-poster-blank {
    width: 40px; height: 56px; display: block;
    object-fit: cover; border-radius: 6px; background: #f2f0ea;
}
.kd-rv-title {
    flex: 1 1 auto; min-width: 0; margin: 0;
    font-family: var(--kd-serif); font-weight: 700;
    font-size: 16px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kd-rv-title a { color: #111; text-decoration: none; }
.kd-rv-title a:hover { color: #c62828; }
/* The badge keeps the first build's look -- thumb emoji plus coloured
   word -- but sits in a fixed-width column so Watch and Skip start
   at the same x on every row. */
.kd-rv-badge {
    flex: 0 0 auto; min-width: 82px; box-sizing: border-box;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.kd-rv-date {
    flex: 0 0 44px; text-align: right;
    font-family: var(--kd-mono);
    font-size: 11px; color: #9a9a9a; white-space: nowrap;
}
.kd-recent-verdicts .kd-see-all { margin-top: 10px; }

@media (max-width: 600px) {
    .kd-rv-row { gap: 10px; padding: 9px 0; }
    .kd-rv-poster { flex-basis: 36px; }
    .kd-rv-poster img,
    .kd-rv-poster .kd-feed-poster-blank { width: 36px; height: 50px; }
    .kd-rv-title { font-size: 15px; }
    .kd-rv-badge { min-width: 74px; font-size: 13px; }
    .kd-rv-date { flex-basis: 38px; font-size: 10px; }
}

/* ============================================================
   Search (/search/, 17 Oct 2026) - page-diary-search.php. The box, count
   line, grid and empty state are Browse's; only the page links are new,
   drawn in the pill style.
   ============================================================ */
.kd-pager {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px; margin: 28px 0 0;
}
.kd-page .kd-pager a,
.kd-pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box;
    border: 1px solid #ddd8cc; border-radius: 999px; background: #fff;
    font-family: var(--kd-mono);
    font-size: 12px; font-weight: 600; line-height: 1; color: #111; text-decoration: none;
}
.kd-page .kd-pager a:hover { border-color: #111; color: #111; }
.kd-pager .kd-pager-num.kd-on { background: #111; border-color: #111; color: #fff; }
.kd-pager .kd-pager-gap { border-color: transparent; background: none; min-width: 0; padding: 0 2px; color: #9a9a9a; }
.kd-pager .kd-pager-step { letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
@media (max-width: 380px) {
    .kd-pager { gap: 4px; }
    .kd-page .kd-pager a, .kd-pager span { min-width: 30px; height: 30px; padding: 0 8px; }
}