/* Every value here comes from a --d-* token (see tokens.php, filterable via
   inkp_demo/tokens). No literals below the reset.

   Two rules learned the hard way:
   1. Nothing styles .inkp-player or anything inside it — the player must render
      exactly as its own config says.
   2. No inherited property (font, colour, text-align, word-break) on any
      ancestor of a player, or the demo becomes a hostile theme to it. Typography
      is applied per component, none of which wraps a player.
   Component rules are `.inkpd .inkpd-x` so they outrank the one-class-one-element
   button reset below. */

.inkpd,
.inkpd *,
.inkpd *::before,
.inkpd *::after { box-sizing: border-box; }

/* Neutralises the theme's button styling — but only for the demo's own buttons.
   Anything the plugin renders (.inkp-timestamp, player chrome) is styled at one
   class, which this would outrank, leaving it as plain text. :where() keeps the
   reset at its original weight so component rules still win. */
.inkpd button:where([class*="inkpd-"]) {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}

.inkpd figure { margin: 0; }

.inkpd .inkpd-eyebrow,
.inkpd .inkpd-h1,
.inkpd .inkpd-h2,
.inkpd .inkpd-lede,
.inkpd .inkpd-sub,
.inkpd .inkpd-panel,
.inkpd .inkpd-tabs,
.inkpd .inkpd-rail,
.inkpd .inkpd-content {
    font-family: var(--d-font);
    color: var(--d-color-ink);
    line-height: var(--d-leading);
    text-align: left;
    word-break: normal;
}

.inkpd .inkpd-wrap {
    width: 100%;
    max-width: var(--d-container);
    margin-inline: auto;
    padding-inline: var(--d-gutter);
}

/* ── Type ─────────────────────────────────────────────────────────────── */

.inkpd .inkpd-h1 {
    margin: 0 0 var(--d-space-4);
    font-size: var(--d-text-h1);
    font-weight: var(--d-weight-bold);
    line-height: var(--d-leading-tight);
    letter-spacing: var(--d-tracking-tight);
    color: var(--d-color-on-dark);
}

.inkpd .inkpd-h2 {
    margin: 0 0 var(--d-space-2);
    font-size: var(--d-text-h2);
    font-weight: var(--d-weight-bold);
    line-height: var(--d-leading-tight);
    letter-spacing: var(--d-tracking-tight);
}

.inkpd .inkpd-eyebrow {
    margin: 0 0 var(--d-space-4);
    font-size: var(--d-text-xs);
    font-weight: var(--d-weight-bold);
    letter-spacing: var(--d-tracking-wide);
    text-transform: uppercase;
    color: var(--d-color-accent-dark);
}

.inkpd .inkpd-lede {
    max-width: 60ch;
    margin: 0 0 var(--d-space-7);
    font-size: var(--d-text-lg);
    color: var(--d-color-on-dark-mute);
}

.inkpd .inkpd-sub {
    max-width: 62ch;
    margin: 0 0 var(--d-space-6);
    font-size: var(--d-text-md);
    color: var(--d-color-ink-muted);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.inkpd .inkpd-hero {
    padding: var(--d-space-9) 0 var(--d-space-8);
    background:
        radial-gradient(110% 85% at 12% -15%, var(--d-color-glow-a), transparent 58%),
        radial-gradient(95% 75% at 92% -5%, var(--d-color-glow-b), transparent 55%),
        var(--d-color-surface-dark);
}

.inkpd .inkpd-stage { display: grid; gap: var(--d-space-4); }
.inkpd .inkpd-stage__player { min-width: 0; }

/* ── Panel: a short tabbed strip under the player ─────────────────────── */

.inkpd .inkpd-panel {
    border: 1px solid var(--d-color-line-invert);
    border-radius: var(--d-radius-md);
    background: var(--d-color-veil);
    /* The panel is dark whatever the theme is, so browser-drawn form UI —
       autofill, the caret, the focus ring — has to be told that too. */
    color-scheme: dark;
}

.inkpd .inkpd-panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--d-space-4);
    padding: var(--d-space-2) var(--d-space-3);
    border-bottom: 1px solid var(--d-color-line-invert);
}

.inkpd .inkpd-panel__tabs {
    display: flex;
    gap: var(--d-space-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.inkpd .inkpd-panel__tabs::-webkit-scrollbar { display: none; }

.inkpd .inkpd-ptab {
    flex: none;
    padding: var(--d-space-2) var(--d-space-3);
    border-radius: var(--d-radius-sm);
    font-family: var(--d-font);
    font-size: var(--d-text-sm);
    font-weight: var(--d-weight-medium);
    color: var(--d-color-on-dark-mute);
    white-space: nowrap;
    transition: color var(--d-speed) var(--d-easing), background var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-ptab:hover { color: var(--d-color-on-dark); background: var(--d-color-veil); }

.inkpd .inkpd-ptab.is-active {
    color: var(--d-color-accent-ink);
    background: var(--d-color-accent);
}

.inkpd .inkpd-panel__body { display: none; padding: var(--d-space-4); }
.inkpd .inkpd-panel__body.is-active { display: block; }

.inkpd .inkpd-chips { display: flex; flex-wrap: wrap; gap: var(--d-space-2); }

.inkpd .inkpd-chip {
    padding: var(--d-space-2) var(--d-space-3);
    border: 1px solid var(--d-color-line-invert);
    border-radius: var(--d-radius-pill);
    font-size: var(--d-text-sm);
    font-weight: var(--d-weight-medium);
    color: var(--d-color-on-dark-mute);
    transition: background var(--d-speed) var(--d-easing), color var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-chip:hover { background: var(--d-color-veil-strong); color: var(--d-color-on-dark); }

.inkpd .inkpd-chip.is-active {
    border-color: transparent;
    background: var(--d-color-accent);
    color: var(--d-color-accent-ink);
}

.inkpd .inkpd-colors { display: flex; flex-wrap: wrap; gap: var(--d-space-5); }

.inkpd .inkpd-color {
    display: flex;
    align-items: center;
    gap: var(--d-space-2);
    font-family: var(--d-font);
    font-size: var(--d-text-base);
    color: var(--d-color-on-dark-mute);
    cursor: pointer;
}

.inkpd .inkpd-color input {
    flex: none;
    width: 34px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--d-color-line-invert);
    border-radius: var(--d-radius-sm);
    background: none;
    cursor: pointer;
}

.inkpd .inkpd-color input::-webkit-color-swatch-wrapper { padding: 2px; }
.inkpd .inkpd-color input::-webkit-color-swatch { border: 0; border-radius: var(--d-radius-sm); }

.inkpd .inkpd-switches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--d-space-2) var(--d-space-5);
}

.inkpd .inkpd-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--d-space-2);
    font-family: var(--d-font);
    font-size: var(--d-text-base);
    color: var(--d-color-on-dark-mute);
    cursor: pointer;
}

.inkpd .inkpd-switch input { position: absolute; width: 0; height: 0; opacity: 0; }

.inkpd .inkpd-switch__track {
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: var(--d-radius-pill);
    background: var(--d-color-veil-strong);
    transition: background var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-switch__track::after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: 3px;
    border-radius: var(--d-radius-pill);
    background: var(--d-color-on-dark);
    transition: transform var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-switch input:checked ~ .inkpd-switch__track { background: var(--d-color-accent); }
.inkpd .inkpd-switch input:checked ~ .inkpd-switch__track::after { transform: translateX(14px); }
.inkpd .inkpd-switch input:focus-visible ~ .inkpd-switch__track { outline: 2px solid var(--d-color-accent); outline-offset: 2px; }

.inkpd .inkpd-reset {
    justify-self: start;
    padding: var(--d-space-2) var(--d-space-4);
    border: 1px solid var(--d-color-line-invert);
    border-radius: var(--d-radius-pill);
    font-size: var(--d-text-sm);
    font-weight: var(--d-weight-medium);
    color: var(--d-color-on-dark-mute);
}

.inkpd .inkpd-reset:hover { color: var(--d-color-on-dark); background: var(--d-color-veil-strong); }

/* ── Section rail ─────────────────────────────────────────────────────── */

.inkpd .inkpd-rail {
    position: sticky;
    top: var(--d-nav-offset);
    z-index: 20;
    border-bottom: 1px solid var(--d-color-line);
    background: color-mix(in srgb, var(--d-color-surface) 88%, transparent);
    backdrop-filter: blur(10px);
}

/* Wrapping pill row, not a horizontal scroller: thirteen labels fit on one or
   two lines and stay readable, instead of hiding half of them off-edge. */
/* Sized so all thirteen labels clear a 1180px container on one line — at the
   previous padding the row overran by ~60px and orphaned "Ads" onto its own. */
.inkpd .inkpd-rail__inner {
    max-width: var(--d-container-nav);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--d-space-1);
    padding-block: var(--d-space-3);
}

.inkpd .inkpd-rail__link {
    padding: var(--d-space-2) var(--d-space-3);
    border: 1px solid transparent;
    border-radius: var(--d-radius-pill);
    font-size: var(--d-text-sm);
    font-weight: var(--d-weight-medium);
    color: var(--d-color-ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--d-speed) var(--d-easing), background var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-rail__link:hover {
    color: var(--d-color-ink);
    background: var(--d-color-surface-alt);
    border-color: var(--d-color-line);
}

.inkpd .inkpd-rail__link.is-active {
    color: var(--d-color-accent-ink);
    background: var(--d-color-accent);
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.inkpd .inkpd-section { padding: var(--d-section-y) 0; background: var(--d-color-surface); scroll-margin-top: 64px; }
.inkpd .inkpd-section--alt { background: var(--d-color-surface-alt); }
.inkpd .inkpd-head { margin-bottom: var(--d-space-6); max-width: 66ch; }

.inkpd .inkpd-num {
    display: block;
    margin-bottom: var(--d-space-3);
    font-family: var(--d-font);
    font-size: var(--d-text-sm);
    font-weight: var(--d-weight-bold);
    letter-spacing: var(--d-tracking-wide);
    color: var(--d-color-accent);
}

/* Copy beside the player on alternating sections, so the page has a rhythm
   instead of six identical stacked blocks. */
@media (min-width: 1040px) {
    .inkpd .inkpd-section--split .inkpd-wrap {
        display: grid;
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: var(--d-space-8);
        align-items: start;
    }

    .inkpd .inkpd-section--split .inkpd-head {
        position: sticky;
        top: calc(var(--d-nav-offset) + var(--d-space-8));
        margin-bottom: 0;
    }

    .inkpd .inkpd-section--split .inkpd-tabs { margin-top: 0; }
}

.inkpd .inkpd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--d-space-2);
    margin-bottom: var(--d-space-5);
}

.inkpd .inkpd-tab {
    padding: var(--d-space-2) var(--d-space-4);
    border: 1px solid var(--d-color-line);
    border-radius: var(--d-radius-pill);
    font-size: var(--d-text-base);
    font-weight: var(--d-weight-medium);
    color: var(--d-color-ink-muted);
    background: var(--d-color-surface);
    transition: color var(--d-speed) var(--d-easing), background var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-tab:hover { color: var(--d-color-ink); }

/* No weight change on the active state: bold text is wider, so activating a
   long label grew the row and pushed the last pill onto a second line. The
   filled pill is signal enough. */
.inkpd .inkpd-tab.is-active {
    border-color: transparent;
    background: var(--d-color-surface-dark);
    color: var(--d-color-on-dark);
}

.inkpd .inkpd-pane { display: none; min-width: 0; }
.inkpd .inkpd-pane.is-active { display: block; }

/* ── CTA ──────────────────────────────────────────────────────────────── */

.inkpd .inkpd-cta {
    padding: var(--d-section-y) 0;
    text-align: center;
    background: var(--d-color-surface-dark);
}

.inkpd .inkpd-cta .inkpd-h2 {
    max-width: 27ch;
    margin: 0 auto var(--d-space-8);
    font-size: clamp(34px, 4.4vw, 88px);
    line-height: 1.45;
    letter-spacing: normal;
    color: var(--d-color-on-dark);
}

.inkpd .inkpd-cta .inkpd-sub {
    max-width: none;
    margin: 0 auto var(--d-space-7);
    font-size: clamp(15px, 1.2vw, 24px);
    color: var(--d-color-on-dark-mute);
}

.inkpd .inkpd-cta__btn {
    display: inline-block;
    padding: var(--d-space-4) var(--d-space-5);
    border-radius: 4px;
    background: var(--d-color-accent);
    color: var(--d-color-accent-ink);
    font-size: clamp(15px, 1.05vw, 21px);
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s ease;
}

.inkpd .inkpd-cta__btn:hover,
.inkpd .inkpd-cta__btn:focus-visible { background: var(--d-color-accent-dark); color: var(--d-color-surface-dark); }
.inkpd .inkpd-content { max-width: 66ch; margin: var(--d-space-7) auto 0; }

/* Embedded players arrive as iframes, not .inkp-player markup, so they need a
   box of their own. The promo card is what the shortcode overlay renders. */
.inkpd .inkpd-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--d-radius-md);
    background: var(--d-color-surface-dark);
}

.inkpd .inkpd-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.inkpd-promo {
    display: grid;
    gap: 2px;
    max-width: 260px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--d-color-surface-dark);
    color: var(--d-color-on-dark);
    font-family: var(--d-font, system-ui, sans-serif);
    font-size: var(--d-text-sm);
    line-height: 1.4;
    backdrop-filter: blur(8px);
}

.inkpd-promo strong { font-size: 14px; }
.inkpd-promo span { opacity: .75; }

.inkpd .inkpd-source { display: flex; flex-wrap: wrap; gap: var(--d-space-2); }

.inkpd .inkpd-source__input {
    flex: 1 1 260px;
    min-width: 0;
    padding: var(--d-space-2) var(--d-space-3);
    border: 1px solid var(--d-color-line-invert);
    border-radius: var(--d-radius-sm);
    background: var(--d-color-veil);
    color: var(--d-color-on-dark);
    /* Chrome paints the value through -webkit-text-fill-color, which `color`
       cannot override — so the typed URL took the theme's dark body colour. */
    -webkit-text-fill-color: var(--d-color-on-dark);
    caret-color: var(--d-color-on-dark);
    font-family: var(--d-font);
    font-size: var(--d-text-base);
}

.inkpd .inkpd-source__input:-webkit-autofill,
.inkpd .inkpd-source__input:-webkit-autofill:hover,
.inkpd .inkpd-source__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--d-color-on-dark);
    box-shadow: 0 0 0 100px var(--d-color-surface-dark) inset;
}

.inkpd .inkpd-source__input::placeholder { color: var(--d-color-on-dark-mute); opacity: 1; }
.inkpd .inkpd-source__input:focus-visible { outline: 2px solid var(--d-color-accent); outline-offset: 1px; }

.inkpd .inkpd-source__go,
.inkpd .inkpd-source__reset {
    flex: none;
    padding: var(--d-space-2) var(--d-space-4);
    border-radius: var(--d-radius-sm);
    font-family: var(--d-font);
    font-size: var(--d-text-sm);
    font-weight: var(--d-weight-medium);
}

.inkpd .inkpd-source__go { background: var(--d-color-accent); color: var(--d-color-accent-ink); }
.inkpd .inkpd-source__go:hover { background: var(--d-color-ink); }

.inkpd .inkpd-source__reset { border: 1px solid var(--d-color-line-invert); color: var(--d-color-on-dark-mute); }
.inkpd .inkpd-source__reset:hover { color: var(--d-color-on-dark); background: var(--d-color-veil-strong); }

.inkpd .inkpd-source__note {
    margin: var(--d-space-3) 0 0;
    font-family: var(--d-font);
    font-size: var(--d-text-sm);
    color: var(--d-color-on-dark-mute);
}

/* Radio layout: a labelled list beside the player. Nine overlay names read
   better as a column with room to breathe than as a row of pills. */
@media (min-width: 900px) {
    .inkpd .inkpd-tabgroup--radio {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: var(--d-space-6);
        align-items: start;
    }

    .inkpd .inkpd-tabgroup--radio .inkpd-choices { order: 2; }
}

.inkpd .inkpd-choices {
    display: grid;
    gap: var(--d-space-1);
    margin-bottom: var(--d-space-5);
}

.inkpd .inkpd-choice {
    display: flex;
    align-items: center;
    gap: var(--d-space-3);
    width: 100%;
    padding: var(--d-space-3);
    border: 1px solid transparent;
    border-radius: var(--d-radius-sm);
    font-family: var(--d-font);
    font-size: var(--d-text-base);
    color: var(--d-color-ink-muted);
    text-align: left;
    transition: background var(--d-speed) var(--d-easing), color var(--d-speed) var(--d-easing);
}

.inkpd .inkpd-choice:hover { color: var(--d-color-ink); background: var(--d-color-accent-soft); }

.inkpd .inkpd-choice.is-active {
    color: var(--d-color-ink);
    background: var(--d-color-accent-soft);
    border-color: var(--d-color-accent);
}

.inkpd .inkpd-choice__dot {
    flex: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--d-color-line);
    border-radius: var(--d-radius-pill);
}

.inkpd .inkpd-choice.is-active .inkpd-choice__dot {
    border-color: var(--d-color-accent);
    background: var(--d-color-accent);
    box-shadow: inset 0 0 0 2px var(--d-color-surface);
}

.inkpd .inkpd-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--d-space-2);
    margin-top: var(--d-space-4);
}