/* Creator discovery (agency). Same design system as the public site: the
   Currents tokens (shadcnblocks Stripe theme) and self-hosted Google Sans.
   The stylesheet below is written against the old theme variable names
   (--ink, --paper, --page, --primary, --outline-var, --muted ...), so those
   names are re-pointed here, light and dark, and every rule follows. Layout
   uses plain CSS + Tailwind utilities. */

@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../content/fonts/googlesans-400.2a1b8b2cab4d.woff2") format("woff2");
}
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../content/fonts/googlesans-500.0f7ee0df575c.woff2") format("woff2");
}
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../content/fonts/googlesans-600.a9fe8932becd.woff2") format("woff2");
}
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../content/fonts/googlesans-700.3814cab48505.woff2") format("woff2");
}

.dsc-body,
.dsc-embed {
    /* Currents tokens, light. Values match content/assets/marketing.src.css.
       .dsc-embed carries the tokens alone, for the profile embedded in the
       public calculator on the marketing shell. */
    --ink: oklch(0.2186 0.0511 251.6866);          /* foreground */
    --paper: oklch(1 0 0);                          /* card */
    --page: oklch(0.9844 0.0045 258.3244);          /* muted ground, cards lift off it */
    --surf: oklch(0.9807 0.0051 247.8761);          /* secondary */
    --surf-low: oklch(1 0 0);
    --muted: oklch(0.4884 0.0455 257.9170);         /* muted-foreground */
    --outline-var: oklch(0.9424 0.0138 247.9737);   /* border */
    --outline: oklch(0.9424 0.0138 247.9737);
    --primary: oklch(0.5211 0.2679 277.4312);
    --on-primary: oklch(1 0 0);
    --primary-c: oklch(0.9398 0.0296 283.7374);     /* accent */
    --on-primary-c: #4032c8;
    --warning: oklch(0.6093 0.2282 10.7618);        /* destructive */
    --success: oklch(0.52 0.15 155);                /* the aggressive-ask rate */
    --warning-c: #fde7ee;
    --on-warning-c: #8a1235;
    --ff-heading: "Google Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --ff-head: var(--ff-heading);
    --ff-body: var(--ff-heading);
    --r: 0.5rem;
    --r-sm: 0.375rem;


    /* Re-point Tailwind @theme tokens at the same variables so the reused
       nav/dropdown/settings components render against the active theme. */
    --color-primary: var(--primary);
    --color-accent: var(--on-primary-c);
    --color-dark-main: var(--page);
    --color-dark-secondary: var(--paper);
    --color-dark-bg-alt: var(--surf);
    --color-dark-text: var(--ink);
    --color-text-primary: var(--ink);
    --color-text-secondary: var(--ink);
    --color-text-tertiary: var(--muted);
    --color-error: var(--warning);
    --color-success: var(--primary);
}

.dsc-body {
    background: var(--page);
    color: var(--ink);
    font-family: var(--ff-body);
    min-height: 100vh;
    color-scheme: light;
}

.dsc-embed {
    color: var(--ink);
    font-family: var(--ff-body);
}

html.dark .dsc-body,
html.dark .dsc-embed {
    /* Near-black neutrals with a whisper of the site's cool cast; the
       Currents dark surfaces are navy, which reads blue on a full app
       canvas. The accent stays the Currents purple. */
    --ink: oklch(0.97 0.004 260);
    --paper: oklch(0.215 0.006 260);
    --page: oklch(0.165 0.005 260);
    --surf: oklch(0.245 0.007 260);
    --surf-low: oklch(0.215 0.006 260);
    --muted: oklch(0.70 0.015 258);
    --outline-var: oklch(1 0 0 / 12%);
    --outline: oklch(1 0 0 / 12%);
    --primary: oklch(0.6236 0.2182 278.8714);
    --on-primary: oklch(1 0 0);
    --primary-c: oklch(0.32 0.09 278);
    --on-primary-c: oklch(0.93 0.03 284);
    --warning: oklch(0.6093 0.2282 10.7618);
    --success: oklch(0.74 0.16 155);
    --warning-c: #4a1024;
    --on-warning-c: #ffd6e1;
    color-scheme: dark;
}

/* ── Brand ───────────────────────────────────────────────────────────── */
.dsc-brand {
    display: inline-flex;
    color: var(--ink);
    text-decoration: none;
}

.dsc-brand-logo {
    height: 1.875rem;
    width: auto;
}

.mcc-mark {
    color: var(--primary);
}

/* ── Left sidebar ────────────────────────────────────────────────────── */
.dsc-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 0.9rem 1rem;
    background: var(--paper);
    border-right: 1px solid var(--outline-var);
    z-index: 50;
    overflow-y: auto;
    transition: transform 0.2s ease;
}

.dsc-sidebar .dsc-brand {
    padding: 0 0.5rem 0.5rem;
}

/* Topbar "toggle sidebar" button — the same panel-icon affordance GitHub /
   VS Code / Linear use. Desktop only; mobile keeps the hamburger drawer. */
.dsc-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--outline-var);
    border-radius: 0.5rem;
    color: var(--ink);
    cursor: pointer;
}

.dsc-sidebar-toggle:hover {
    background: var(--surf-low);
}

.dsc-sidebar-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

@media (min-width: 901px) {
    .dsc-sidebar-toggle {
        display: inline-flex;
    }
}

.dsc-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.75rem;
    flex: 1 1 auto;
}

.dsc-nav-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dsc-nav-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem;
    margin-bottom: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.dsc-coming-soon {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    text-transform: none;
}

.dsc-nav-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.6rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
}

.dsc-nav-item svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: var(--muted);
}

.dsc-nav-item:hover {
    background: var(--surf-low);
}

.dsc-nav-item.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.dsc-nav-item.active svg {
    color: var(--primary);
}

.dsc-nav-item.is-disabled {
    color: var(--muted);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Top bar: account controls (theme / feedback / avatar), top-right ──── */
.dsc-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 3.5rem;
    padding: 0 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--outline-var);
    position: sticky;
    top: 0;
    z-index: 40;
}

/* The shared dropdown's control row is pushed to the right of the top bar and
   its controls take the app's ghost-button look (the component ships its own
   dark-shell styles). */
.dsc-topbar .header-controls-container {
    margin-left: auto;
}

.dsc-body .feedback-btn,
.dsc-body .theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--outline-var);
    border-radius: var(--r);
    box-shadow: none;
    color: var(--ink);
    font-family: var(--ff-body);
    font-weight: 500;
}

.dsc-body .feedback-btn:hover,
.dsc-body .theme-toggle-btn:hover {
    background: var(--surf);
    color: var(--ink);
    box-shadow: none;
    transform: none;
}

.dsc-body .profile-avatar-btn {
    background: var(--primary);
    border: 1px solid var(--outline-var);
}

.dsc-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 1px solid var(--outline-var);
    border-radius: 0.5rem;
    color: var(--ink);
    cursor: pointer;
}

.dsc-mobile-toggle svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* ── Shell: offsets page content by the sidebar width ────────────────── */
.dsc-shell {
    margin-left: 15rem;
    transition: margin-left 0.2s ease;
}

/* When impersonating, theme_base renders a fixed impersonation banner (4rem)
   plus a 5rem flow spacer that pushes .dsc-shell (topbar + content) down. The
   fixed sidebar and sticky topbar anchor to the viewport top, so without this
   they slide under the banner (hiding the brand and, on scroll, the topbar).
   Offset both to sit just below the banner. */
body.is-hijacked .dsc-sidebar {
    top: 5rem;
}

body.is-hijacked .dsc-topbar {
    top: 5rem;
}

/* ── Desktop collapsed state (persisted in localStorage, applied pre-paint
   on <html>) — slide the sidebar away and reclaim its width. The topbar
   toggle stays put and brings it back. ───────────────────────────────── */
@media (min-width: 901px) {
    html.dsc-sidebar-collapsed .dsc-sidebar {
        transform: translateX(-100%);
    }

    html.dsc-sidebar-collapsed .dsc-shell {
        margin-left: 0;
    }
}

/* ── Page layout: filter rail + results ──────────────────────────────── */
.dsc-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 84rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.dsc-rail {
    flex: 0 0 17rem;
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--paper);
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    padding: 1.1rem;
}

.dsc-main {
    flex: 1 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .dsc-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    }

    .dsc-sidebar.is-open {
        transform: translateX(0);
    }

    .dsc-mobile-toggle {
        display: inline-flex;
    }

    /* Mobile uses the off-canvas drawer (hamburger), so the desktop toggle is
       not shown here. */
    .dsc-sidebar-toggle {
        display: none;
    }

    .dsc-shell {
        margin-left: 0;
    }

    .dsc-layout {
        flex-direction: column;
    }

    .dsc-rail {
        position: static;
        flex-basis: auto;
        width: 100%;
    }
}

/* Search pages lay out as a grid so the filter rail can move below the
   query on phones without the results moving with it. */
.dsc-layout--search {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    grid-template-areas: "rail search" "rail results";
    align-items: start;
}

.dsc-layout--search .dsc-rail {
    grid-area: rail;
}

.dsc-layout--search .dsc-search {
    grid-area: search;
    min-width: 0;
}

.dsc-layout--search .dsc-results {
    grid-area: results;
    min-width: 0;
}

.dsc-rail-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Phone-only disclosure that opens the filter rail. */
.dsc-rail-toggle {
    display: none;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    background: none;
    border: 0;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dsc-rail-toggle svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.dsc-rail-toggle .dsc-rail-chevron {
    margin-left: auto;
    transition: transform 0.15s;
}

.dsc-rail.is-open .dsc-rail-chevron {
    transform: rotate(180deg);
}

.dsc-rail-count {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    /* Search pages: the query comes first, the filters fold into a
       disclosure under it, and results follow. */
    .dsc-layout--search {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "search" "rail" "results";
    }

    .dsc-layout--search .dsc-rail {
        padding: 0;
        gap: 0;
    }

    .dsc-rail-toggle {
        display: flex;
    }

    .dsc-rail-body {
        display: none;
        padding: 0 1.1rem 1.1rem;
    }

    .dsc-rail.is-open .dsc-rail-body {
        display: flex;
    }
}

/* ── Search bar + AI box ─────────────────────────────────────────────── */
.dsc-searchbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.dsc-field-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.3rem;
    display: block;
}

.dsc-input,
.dsc-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.6rem;
    background: var(--page);
    color: var(--ink);
    font-size: 0.92rem;
}

.dsc-input:focus,
.dsc-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* Numeric field with a fixed, non-editable unit suffix (e.g. "K"). */
.dsc-num-wrap {
    position: relative;
    display: block;
    flex: 1;
}

.dsc-num-wrap .dsc-input {
    width: 100%;
    padding-right: 1.5rem;
    /* Right-align so the typed number sits right next to the "K" unit. */
    text-align: right;
}

.dsc-num-suffix {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.9rem;
    pointer-events: none;
}

.dsc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--r);
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.dsc-btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--outline-var);
}

.dsc-btn:hover {
    background: color-mix(in srgb, var(--primary) 85%, var(--paper));
    border-color: color-mix(in srgb, var(--primary) 85%, var(--paper));
}

.dsc-btn-ghost:hover {
    background: var(--surf);
    border-color: var(--outline-var);
}

.dsc-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

.dsc-divider {
    text-align: center;
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

.dsc-rail-group {
    display: flex;
    flex-direction: column;
}

/* Clear-all sits at the foot of the rail; only shown when a filter is set. */
.dsc-clear-filters {
    margin-top: 0.25rem;
    width: 100%;
    font-size: 0.85rem;
}

.dsc-clear-filters[hidden] {
    display: none;
}

/* ── Results grid + cards ────────────────────────────────────────────── */
.dsc-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.dsc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.dsc-results-page {
    color: var(--muted);
    font-size: 0.85rem;
}

.dsc-omitted-note {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* Shortlist cards carry a status/notes row under the actions: 4 subgrid rows.
   Must out-rank .dsc-card-flat's span 3, which is declared later in the file. */
.dsc-card.dsc-card-flat.dsc-card--tracked {
    grid-row: span 4;
}

.dsc-saved-meta {
    display: grid;
    gap: 0.6rem;
    padding: 0 1.3rem 1.2rem;
    border-top: 1px solid var(--outline-var);
    padding-top: 0.9rem;
    position: relative;
}

.dsc-saved-meta-row {
    display: grid;
    gap: 0.3rem;
}

.dsc-select--sm {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.dsc-notes {
    resize: vertical;
    min-height: 2.6rem;
    font-size: 0.85rem;
}

/* Status line under the notes box: hint → "Saving…" → "Saved ✓" → hint.
   The three states overlay each other and cross-fade on opacity, which every
   browser animates (unlike display). */
.dsc-saved-meta-live {
    display: block;
}

.dsc-saved-meta-tick {
    position: relative;
    display: block;
    min-height: 1.1rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.dsc-tick-hint,
.dsc-tick-saving,
.dsc-tick-saved {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dsc-tick-hint {
    opacity: 1;
}

.dsc-tick-saved {
    color: #15803d;
    font-weight: 600;
}

.dsc-saved-meta.htmx-request .dsc-tick-hint,
.dsc-saved-meta.htmx-request .dsc-tick-saved {
    opacity: 0;
}

.dsc-saved-meta.htmx-request .dsc-tick-saving {
    opacity: 1;
}

/* Fresh node on each save: "Saved ✓" holds for ~4 s, then the hint returns. */
.dsc-saved-meta-tick.is-saved .dsc-tick-hint {
    animation: dsc-tick-return 4.4s ease forwards;
}

.dsc-saved-meta-tick.is-saved .dsc-tick-saved {
    animation: dsc-tick-hold 4.4s ease forwards;
}

@keyframes dsc-tick-hold {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes dsc-tick-return {
    0%, 90% { opacity: 0; }
    100% { opacity: 1; }
}

.dsc-status--booked {
    border-color: #15803d;
}

.dsc-status--negotiating,
.dsc-status--contacted {
    border-color: var(--primary);
}

.dsc-status--declined {
    border-color: var(--muted);
    color: var(--muted);
}

.dsc-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dsc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--outline-var);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--muted);
    text-decoration: none;
}

.dsc-pill.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.dsc-showing {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.dsc-showing a {
    color: var(--primary);
}

.dsc-pill-count {
    font-weight: 700;
}

/* Upgrade prompt at a quota / capacity wall */
.dsc-upgrade {
    padding: 1rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border-radius: 0.75rem;
    display: grid;
    gap: 0.4rem;
    justify-items: start;
}

.dsc-upgrade-title {
    font-weight: 700;
}

.dsc-upgrade-body {
    font-size: 0.9rem;
    color: var(--muted);
}

/* Billing */
.dsc-plan-banner {
    margin: 0.75rem 1.25rem 0;
    padding: 0.6rem 0.9rem;
    text-align: center;
    border-radius: 0.6rem;
    font-size: 0.86rem;
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    background: var(--primary-c);
    color: var(--ink);
}

html.dark .dsc-plan-banner {
    background: color-mix(in srgb, var(--primary) 18%, var(--paper));
    color: var(--ink);
}

html.dark .dsc-plan-banner a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dsc-plan-banner--expired {
    border-color: color-mix(in srgb, var(--ink) 25%, transparent);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}

.dsc-plan-banner a {
    color: var(--primary);
    font-weight: 600;
}

.dsc-plan-card {
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    background: var(--paper);
    margin-bottom: 1rem;
}

.dsc-plan-card--paid {
    border-color: var(--primary);
}

.dsc-plan-title {
    font-weight: 700;
    font-size: 1.1rem;
}

.dsc-plan-sub {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.dsc-plan-actions {
    margin-top: 0.8rem;
}

.dsc-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .dsc-usage-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .dsc-usage-grid {
        grid-template-columns: 1fr;
    }
}

.dsc-usage-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.75rem;
    background: var(--paper);
}

.dsc-usage-label {
    font-size: 0.8rem;
    color: var(--muted);
}

.dsc-usage-value {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.2rem 0 0.4rem;
}

.dsc-usage-foot {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.4rem;
}

.dsc-pricing-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dsc-interval-toggle {
    display: flex;
    gap: 0.4rem;
}

.dsc-interval-toggle .dsc-pill {
    cursor: pointer;
    background: transparent;
    font: inherit;
}

.dsc-interval-toggle .dsc-pill.is-active {
    background: var(--ink);
    color: var(--paper);
}

.dsc-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 620px) {
    .dsc-tier-grid {
        grid-template-columns: 1fr;
    }
}

.dsc-tier {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.3rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    background: var(--paper);
}

.dsc-tier.is-popular {
    border-color: var(--primary);
}

.dsc-tier-name {
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dsc-tier-desc {
    color: var(--muted);
    font-size: 0.9rem;
}

.dsc-tier-price {
    font-size: 1.6rem;
    font-weight: 700;
}

.dsc-tier-price small {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
}

.dsc-tier-limits {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0.6rem;
    display: grid;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.dsc-tier-form {
    margin-top: auto;
}

.dsc-tier-switch {
    margin-top: 0.4rem;
}

.dsc-tier-switch .dsc-btn {
    font-size: 0.82rem;
    padding: 0.45rem 0.7rem;
}

/* Saved searches + alerts */
.dsc-results-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dsc-save-search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.dsc-save-search .dsc-btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
}

.dsc-save-search-done {
    color: #15803d;
    font-weight: 600;
}

.dsc-save-search-error {
    color: var(--muted);
}

.dsc-saved-searches {
    display: grid;
    gap: 0.75rem;
}

.dsc-saved-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    background: var(--paper);
}

.dsc-saved-search-name {
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.dsc-saved-search-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.dsc-saved-search-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dsc-saved-search-actions .dsc-btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
}

.dsc-brand-alert-error {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

.dsc-saved-search-actions .dsc-btn.is-on,
.dsc-brand-alert-form .dsc-btn.is-on {
    border-color: var(--primary);
}

/* Lookalike search */
.dsc-seed-note {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.dsc-seed-note a {
    color: var(--primary);
}

.dsc-seed-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.dsc-seed-avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* "Similar" carries a small icon next to its label. */
.dsc-btn-similar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.dsc-btn-similar svg {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

.dsc-head-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Funnel summary under the results head: scanned → passed filters → judged fit */
.dsc-funnel {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* ── Brand discovery ─────────────────────────────────────────────────── */
.dsc-brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1100px) {
    .dsc-brand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .dsc-brand-grid {
        grid-template-columns: 1fr;
    }
}

.dsc-brand-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    background: var(--paper);
    padding: 1.25rem 1.3rem;
    transition: border-color 150ms, transform 150ms;
}

.dsc-brand-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.dsc-brand-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dsc-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.25;
    min-width: 0;
    word-break: break-word;
}

/* Brand avatar: coloured initial circle with a best-effort logo layered on top
   (the <img> removes itself on error, revealing the initial). */
.dsc-brand-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.6rem;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--brand-hsl, 220 45% 42%));
}

.dsc-brand-avatar-initial {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}

.dsc-brand-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    /* Stay hidden until it actually loads, so a slow/hanging/broken logo never
       paints a white box over the coloured initial. */
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dsc-brand-avatar-img.is-loaded {
    opacity: 1;
}

.dsc-brand-card-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: auto;
    flex-wrap: wrap;
}

.dsc-brand-card-actions .dsc-btn {
    white-space: nowrap;
}

.dsc-brand-card-actions > .dsc-btn,
.dsc-brand-card-actions .dsc-brand-save-form {
    flex: 1;
}

.dsc-brand-save-form .dsc-btn {
    width: 100%;
}

/* Confirmed sponsorship: a solid green pill so it's unmistakable and clearly
   outranks the neutral "Fit N%" (likely) pill. White-on-green reads on both themes.
   Compound selector so it beats the base `.dsc-tag` rule, which is defined later. */
.dsc-tag.dsc-tag--sponsored {
    background: #15803d;
    color: #fff;
    font-weight: 700;
}

/* Brand modal header: "N sponsored / M likely" as two distinct chips (green =
   confirmed, neutral outline = estimated) instead of one faint muted line. */
.dsc-brand-counts {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.dsc-count {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.dsc-count--sponsored {
    background: #15803d;
    color: #fff;
}

.dsc-count--niche {
    background: transparent;
    color: #15803d;
    border: 1px solid color-mix(in srgb, #15803d 55%, transparent);
}

.dsc-count--likely {
    background: transparent;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}

/* Two-up creator grid inside the (narrower) brand modal. */
.dsc-grid--modal {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 620px) {
    .dsc-grid--modal {
        grid-template-columns: 1fr;
    }
}

/* A creator profile opened from inside the brand modal stacks above it. */
#dsc-modal-mount-2 .dsc-modal-overlay {
    z-index: 70;
}

.dsc-brand-stats {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.dsc-brand-stats strong {
    color: var(--ink);
    font-weight: 700;
    font-size: 1rem;
}

.dsc-brand-detail-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.dsc-brand-detail-title {
    font-size: 1.2rem;
    color: var(--ink);
}

/* Estimated fit (the "likely to sponsor" state): a neutral outlined pill, clearly
   secondary to the solid-green confirmed-sponsored pill. Compound selector so it
   beats the base `.dsc-tag` rule, which is defined later. */
.dsc-tag.dsc-tag--affinity {
    background: transparent;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    font-weight: 600;
}

/* Brand enrichment runs off-request, so the pending loader must stay visible the
   whole time it polls — unlike .dsc-loading (hx-indicator, shown only during a
   request). Same block layout so the shared .dsc-progress / .dsc-flow render
   exactly like the Find Creators loader. */
.dsc-brand-pending {
    display: block;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
}

/* ── Onboarding coachmarks (tour + contextual tips) ──────────────────── */
/* Spotlight: a box-shadow ring dims the rest of the viewport around the
   highlighted element. Fixed-positioned, driven by onboarding.js. */
.dsc-coach-spot {
    position: fixed;
    border-radius: 0.75rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    z-index: 1000;
    transition: top 0.18s, left 0.18s, width 0.18s, height 0.18s;
}

.dsc-coach-pop {
    position: fixed;
    z-index: 1001;
    width: 17rem;
    max-width: calc(100vw - 1rem);
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--outline-var);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.dsc-coach-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}

.dsc-coach-text {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.45;
}

.dsc-coach-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.dsc-coach-foot--tip {
    justify-content: flex-end;
}

.dsc-coach-count {
    font-size: 0.72rem;
    color: var(--muted);
}

.dsc-coach-nav {
    display: flex;
    gap: 0.4rem;
}

.dsc-coach-skip {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.3rem 0.2rem;
}

.dsc-coach-skip:hover {
    color: var(--ink);
}

/* Compact variant of .dsc-btn for the popover footer. */
.dsc-coach-btn {
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
}

.dsc-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.dsc-page-btn {
    min-width: 2.2rem;
    padding: 0.4rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid var(--outline-var);
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.dsc-page-btn:hover {
    border-color: var(--ink);
}

.dsc-page-btn.is-active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* Three cards need about 290px each; beside the sidebar and the rail that
   is a 1400px window, so two columns below it, not clipped thirds. */
@media (max-width: 1400px) {
    .dsc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .dsc-grid {
        grid-template-columns: 1fr;
    }
}

.dsc-card {
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    background: var(--paper);
    overflow: hidden;
    /* Subgrid: head / metrics / strip / actions align across cards in a row,
       regardless of niche-label length or the Brand-deals badge. */
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    transition: border-color 150ms, transform 150ms;
}

.dsc-card-headinfo {
    min-width: 0;
}

/* Shortlist cards have no thumbnail strip — span 3 rows, not 4, so there's no
   empty gap where the strip would sit. */
.dsc-card-flat {
    grid-row: span 3;
}

.dsc-card:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

.dsc-card-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.4rem 1.3rem 1rem;
}

.dsc-avatar {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surf-low);
}

.dsc-card-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.25;
}

.dsc-card-handle {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.dsc-metrics {
    display: flex;
    gap: 1.4rem;
    padding: 0.5rem 1.3rem 1.25rem;
    flex-wrap: wrap;
}

.dsc-metric {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dsc-metric-value {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.1;
}

.dsc-metric-label {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dsc-metric-hint {
    padding: 0 1.3rem 1.25rem;
    margin-top: -0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
    font-style: italic;
}

.dsc-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0 1.3rem;
}

.dsc-strip img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surf-low);
    border-radius: 0.5rem;
}

.dsc-tag {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: var(--surf-low);
    color: var(--muted);
}

.dsc-card-actions {
    display: flex;
    gap: 0.6rem;
    padding: 1.25rem 1.3rem 1.4rem;
    align-items: end;
}

.dsc-card-actions .dsc-btn {
    flex: 1;
    padding: 0.65rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Save toggle */
.dsc-save.is-saved {
    background: var(--surf-low);
    color: var(--ink);
    border-color: var(--outline-var);
}

/* ── States ──────────────────────────────────────────────────────────── */
.dsc-note {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--outline-var);
    border-radius: 0.875rem;
}

/* Thin-result banner + "Why so few results?" trigger */
.dsc-low-banner {
    margin-bottom: 0.75rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.dsc-low-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    list-style: none;
}

/* Hide the default disclosure triangle; we draw our own caret. */
.dsc-low-summary::-webkit-details-marker {
    display: none;
}

.dsc-low-toggle {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dsc-low-summary::after {
    content: "▾";
    color: var(--primary);
    transition: transform 0.15s ease;
}

.dsc-low-banner[open] .dsc-low-summary::after {
    transform: rotate(180deg);
}

.dsc-low-summary:hover .dsc-low-toggle {
    opacity: 0.85;
}

/* htmx toggles .htmx-request on the indicator while the request is in flight */
.dsc-advice-loading {
    display: none;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--muted);
}

.dsc-advice-loading.htmx-request {
    display: inline;
}

/* Low-result advice card (lazy-loaded into #dsc-advice) */
.dsc-advice {
    margin-bottom: 1rem;
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--primary);
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.dsc-advice-summary {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink);
}

/* Biggest limiters as scannable rows: count badge + filter · action */
.dsc-advice-limiters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.dsc-advice-limiters-label {
    font-size: 0.84rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
}

.dsc-limiter {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.dsc-limiter-pct {
    flex: 0 0 auto;
    min-width: 3rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--primary);
    font-size: 0.9rem;
}

.dsc-limiter-text {
    font-size: 0.85rem;
    color: var(--muted);
}

.dsc-limiter-text strong {
    color: var(--ink);
}

.dsc-advice-markets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.dsc-advice-markets-label {
    font-size: 0.84rem;
    color: var(--muted);
}

.dsc-advice-chip {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--surf-low);
    border: 1px solid var(--outline-var);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 600;
}

.dsc-loading {
    display: none;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
}

/* hx-indicator adds .htmx-request to the indicator element during the request */
.dsc-loading.htmx-request {
    display: block;
}

/* ── Profile modal ───────────────────────────────────────────────────── */
/* The profile slides in from the right over the results, four fifths of
   the screen on a desktop and the whole of it on a phone, and scrolls on
   its own. The results stay underneath; close brings them back. The class
   names are the modal's, which the mounts, the skeleton and the tests use. */
.dsc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 60;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
}
.dsc-modal {
    background: var(--paper);
    width: min(80vw, 64rem);
    height: 100%;
    border-left: 1px solid var(--outline-var);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: dsc-drawer-in 0.18s ease-out;
}
@keyframes dsc-drawer-in {
    from { transform: translateX(1.5rem); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}
@media (max-width: 900px) {
    .dsc-modal {
        width: 100%;
        border-left: 0;
    }
}
/* The same profile as a page of its own (discover/profile_page.html), for a
   new tab: the inline card, full width, no drawer. */
.dsc-profile--page {
    margin-top: 0;
}
.dsc-main--full {
    width: 100%;
}

/* The same profile, inline on the calculator page: the modal's card without
   the overlay, the fixed floor or the close button. */
.dsc-profile--inline {
    background: var(--paper);
    border: 1px solid var(--outline-var);
    border-radius: 1rem;
    margin-top: 1.25rem;
}


/* Skeleton modal shown while a profile loads (base.html #dsc-modal-loading).
   Sits one z-index below the real modal (z-60) so the profile covers it the
   moment it swaps in, then this hides — no double-backdrop flash. */
#dsc-modal-loading {
    display: none;
    z-index: 59;
}

#dsc-modal-loading.htmx-request {
    display: flex;
}

.dsc-skel {
    position: relative;
    overflow: hidden;
    /* Visible on both themes: the surface tone alone vanished in dark mode. */
    background: color-mix(in srgb, var(--ink) 10%, var(--surf-low));
}

.dsc-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--ink) 8%, transparent),
        transparent
    );
    animation: dsc-shimmer 1.2s ease-in-out infinite;
}

@keyframes dsc-shimmer {
    to {
        transform: translateX(100%);
    }
}

.dsc-skel-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dsc-skel-line {
    display: block;
    width: 12rem;
    height: 0.7rem;
    border-radius: 0.35rem;
}

.dsc-skel-line.short {
    width: 7rem;
}

/* The loader is a box on a dimmed page; on the dark theme both are near
   black, so it needs an edge and a coloured spinner to read as "opening". */
.dsc-modal.dsc-modal-skeleton {
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--outline-var));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent),
        0 24px 60px rgba(0, 0, 0, 0.45);
}

.dsc-skel-body {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
}

.dsc-skel-body .dsc-spin {
    color: var(--primary);
}

.dsc-skel-hint {
    margin: 0 1.25rem 1.25rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Busy state for the clicked "View profile" button (hx-disabled-elt="this"). */
.dsc-card-profile-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.dsc-card-profile-btn:disabled::after {
    content: "";
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-left: 0.5rem;
    vertical-align: -0.1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
    animation: dsc-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .dsc-spin,
    .dsc-skel::after,
    .dsc-card-profile-btn:disabled::after {
        animation: none;
    }
}

.dsc-modal-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--outline-var);
}

/* Brand Save button lives in the header: pushed to the far right, sitting just
   left of the × close (which keeps a clear gap from it). */
.dsc-modal-head .dsc-brand-save-form {
    margin-left: auto;
}

.dsc-modal-head .dsc-brand-save-form ~ .dsc-modal-close {
    margin-left: 0.4rem;
}

.dsc-modal-body {
    padding: 1.25rem;
}


/* Profile tabs — underline style, deliberately distinct from the chart's pill
   toggle and the action buttons so the modal reads with a clear hierarchy. */
.dsc-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    margin: 0 -1.25rem 1rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--outline-var);
    -webkit-overflow-scrolling: touch;
}

.dsc-tab {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.6rem 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

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

.dsc-tab.is-active {
    color: var(--primary);
    font-weight: 700;
    border-bottom-color: var(--primary);
}

.dsc-tab-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--muted) 22%, transparent);
    color: inherit;
}

.dsc-tab.is-active .dsc-tab-count {
    background: color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Short explainer above the prospects grid in the brand modal. */
.dsc-tab-intro {
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.dsc-tabpanel {
    min-height: 2rem;
}

/* Save button: full-width inside a card (equal with "View profile"), but a
   compact, natural-width button inside the profile modal's action row. */
.dsc-save-form {
    display: flex;
}

.dsc-save-form--card {
    flex: 1;
}

.dsc-save-form--card .dsc-save {
    flex: 1;
}

/* Sponsors list stays inside the fixed modal — scroll it once it runs long
   (more than ~5 partners) instead of growing the modal. */
.dsc-tabpanel[data-panel="sponsors"] .dsc-brand-list {
    max-height: 15rem;
    overflow-y: auto;
}

.dsc-modal-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.dsc-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dsc-video-row {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    text-decoration: none;
    color: var(--ink);
    padding: 0.35rem;
    border-radius: 0.5rem;
}

.dsc-video-row:hover {
    background: var(--surf-low);
}

.dsc-video-row img {
    width: 5rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.35rem;
    flex: 0 0 auto;
}

/* ── Tom Select (multi-select) dark theming ──────────────────────────── */
.ts-wrapper {
    margin: 0;
}

.ts-control,
.ts-wrapper.single .ts-control {
    background: var(--page) !important;
    border: 1px solid var(--outline-var) !important;
    border-radius: 0.6rem !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

.ts-control input,
.ts-control input::placeholder {
    color: var(--muted) !important;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
}

.ts-control .item {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border-radius: 999px !important;
    padding: 1px 0.5rem !important;
    font-size: 0.82rem;
}

.ts-control .item .remove {
    border-left-color: color-mix(in srgb, var(--on-primary) 35%, transparent) !important;
    color: var(--on-primary) !important;
}

.ts-dropdown {
    background: var(--paper) !important;
    border: 1px solid var(--outline-var) !important;
    color: var(--ink) !important;
}

.ts-dropdown .option {
    color: var(--ink) !important;
}

.ts-dropdown .active {
    background: var(--surf-low) !important;
    color: var(--ink) !important;
}

/* ── Loading: linear progress + horizontal process flow ──────────────── */
.dsc-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--outline-var);
    overflow: hidden;
    margin-bottom: 1rem;
}

.dsc-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--primary);
    transition: width 0.2s linear;
}

/* Distraction-free monthly search-usage readout above the search bar. */
.dsc-usage {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    color: var(--muted);
}

/* Under a tool's form rather than above its label. */
.dsc-usage--below {
    margin: 0.75rem 0 0;
}

/* Prominence escalates with consumption (see SearchUsage.level). */
.dsc-usage--low {
    opacity: 0.5; /* <50%: barely there */
}

.dsc-usage--mid {
    color: var(--ink); /* 50-90%: noticeable */
}

.dsc-usage--warn {
    color: var(--warning); /* >90%: warning */
    font-weight: 600;
}

.dsc-usage--full {
    color: var(--warning); /* 100%: red + bold */
    font-weight: 800;
}

.dsc-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dsc-flow-step {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--outline-var);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.dsc-flow-step.is-active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

.dsc-flow-step.is-complete {
    color: var(--ink);
    border-color: var(--primary);
}

.dsc-flow-sep {
    width: 1.25rem;
    height: 1px;
    background: var(--outline-var);
}

.dsc-flow-status {
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 0.85rem;
}

/* ── Profile: stacked stat lines ─────────────────────────────────────── */
.dsc-stats {
    display: flex;
    flex-direction: column;
}

.dsc-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--outline-var);
}

.dsc-stat-lbl {
    color: var(--muted);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dsc-stat-val {
    font-weight: 700;
    color: var(--ink);
}

/* CSS-only help tooltip (no browser title) */
.dsc-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 1px solid var(--outline-var);
    color: var(--muted);
    font-size: 0.7rem;
    cursor: help;
    position: relative;
}

.dsc-help-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    width: 16rem;
    padding: 0.6rem 0.7rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.35;
    /* labels uppercase their text; keep tooltip copy normal-case */
    text-transform: none;
    letter-spacing: normal;
    z-index: 5;
}

.dsc-help:hover .dsc-help-text,
.dsc-help:focus .dsc-help-text {
    display: block;
}

/* CSS-only tooltip for the brand modal Save button (data-tip attribute). Appears
   below the button so it isn't clipped by the top edge of the modal. */
.dsc-brand-save-form[data-tip] {
    position: relative;
}

.dsc-brand-save-form[data-tip]:hover::after,
.dsc-brand-save-form[data-tip]:focus-within::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    white-space: nowrap;
    padding: 0.4rem 0.6rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    z-index: 10;
    pointer-events: none;
}

/* ── Profile sections / brands ───────────────────────────────────────── */
.dsc-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--outline-var);
}

.dsc-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.dsc-disclaimer {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 0.6rem;
}

/* Performance trend chart */
.dsc-chart-wrap {
    height: 13rem;
    margin-top: 0.5rem;
}

/* Full sponsorship-timeline chart in the brand modal */
.dsc-chart-wrap--brand {
    height: 15rem;
    margin-bottom: 1.25rem;
}

/* Inline sponsorship-timeline sparkline on a brand landscape card */
.dsc-sparkline {
    margin: 0.15rem 0 0.1rem;
}

.dsc-sparkline-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    color: var(--muted);
}

.dsc-sparkline-title {
    font-weight: 600;
}

.dsc-sparkline-window {
    opacity: 0.85;
    white-space: nowrap;
}

.dsc-sparkline svg {
    width: 100%;
    height: 1.6rem;
    display: block;
}

.dsc-sparkline-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.15rem;
    font-size: 0.66rem;
    color: var(--muted);
    opacity: 0.85;
}

.dsc-sparkline polyline {
    stroke: var(--primary);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Metric toggle above the trend chart */
.dsc-metric-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 0.25rem;
}

.dsc-metric-toggle button {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--outline-var);
    border-radius: 999px;
    background: var(--surf-low);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.dsc-metric-toggle button:hover {
    color: var(--ink);
}

.dsc-metric-toggle button.is-active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* Visual stat tiles (profile) */
.dsc-stat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

@media (max-width: 560px) {
    .dsc-stat-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dsc-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.75rem;
    background: var(--surf-low);
}

.dsc-tile-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
}

.dsc-tile-lbl {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Brand partners — grouped by brand, each expandable to its proof videos */
.dsc-brand-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.dsc-brand-group {
    border: 1px solid var(--outline-var);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--paper) 60%, transparent);
    overflow: hidden;
    flex-shrink: 0;
}

.dsc-brand-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.dsc-brand-summary::-webkit-details-marker {
    display: none;
}

.dsc-brand-summary:hover {
    background: var(--paper);
}

.dsc-brand-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.dsc-brand-count {
    flex: 0 0 auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

/* Category tag ([Affiliate] / [Product]) in the fallback monetization list. */
.dsc-mon-tag {
    flex: 0 0 auto;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dsc-mon-tag--product {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.dsc-more-note {
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.dsc-brand-chevron {
    flex: 0 0 auto;
    color: var(--muted);
    transition: transform 0.15s ease;
}

.dsc-brand-group[open] .dsc-brand-chevron {
    transform: rotate(180deg);
}

.dsc-brand-videos {
    margin: 0;
    padding: 0.4rem 0.85rem 0.7rem 1.6rem;
    border-top: 1px solid var(--outline-var);
}

.dsc-brand-videos li {
    margin: 0.3rem 0;
}

.dsc-brand-videos a {
    color: var(--muted);
    font-size: 0.83rem;
    text-decoration: none;
}

.dsc-brand-videos a:hover {
    color: var(--primary);
}

/* Prominent "previously partnered with" callout */
.dsc-brands-callout {
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--primary);
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.dsc-brands-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: 0.01em;
}

.dsc-brands-count {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.dsc-brand-pill {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Card "Sponsored" badge — sponsored creators rank to the top */
.dsc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--on-primary);
}

/* Affiliates: a weaker monetization signal than paid brand deals, so it reads
   as secondary (muted, outlined) rather than the solid primary brand badge. */
.dsc-badge--affiliate {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border, var(--muted));
}

/* ── Profile: horizontal recent-video strip ──────────────────────────── */
.dsc-vstrip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.5rem 0 0.75rem;
}

.dsc-vstrip-item {
    flex: 0 0 11rem;
    width: 11rem;
    text-decoration: none;
    color: var(--ink);
}

.dsc-vstrip-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.5rem;
    background: var(--surf-low);
}

.dsc-vstrip-title {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.35rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-vstrip-stats {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* ── Sponsorship Calculator ──────────────────────────────────────────── */
.dsc-calc {
    max-width: 52rem;
    margin: 0 auto;
}

.dsc-calc-header {
    margin-bottom: 1.25rem;
}

.dsc-calc-title {
    font-family: var(--ff-heading, sans-serif);
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--ink);
    margin: 0 0 0.35rem;
}

.dsc-calc-sub {
    color: var(--muted);
    font-size: 0.95rem;
    max-width: 40rem;
}

.dsc-calc-card {
    background: var(--paper);
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.dsc-calc-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.dsc-calc-row {
    display: flex;
    gap: 0.6rem;
}

.dsc-calc-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Normalize the reused form widget (its baked-in classes target the free-tools
   dark page) so it tracks the discover theme. */
.dsc-calc-input #handle,
.dsc-calc-input input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--surf-low);
    border: 1px solid var(--outline-var);
    border-radius: 0.6rem;
    color: var(--ink);
    font-size: 0.95rem;
}

.dsc-calc-input #handle:focus,
.dsc-calc-input input:focus {
    outline: none;
    border-color: var(--primary);
}

/* The shared free-tools widget carries the site's ring utilities
   (focus-visible:ring-3 ring-ring/50); the in-app Tailwind build has no
   --color-ring, so the ring falls back to currentColor. Paint ours. */
.dsc-calc-input #handle:focus-visible,
.dsc-calc-input input:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

.dsc-calc-turnstile {
    margin-top: 0.9rem;
}

@media (max-width: 560px) {
    .dsc-calc-row {
        flex-direction: column;
    }
}

.dsc-calc-loading {
    display: none;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.dsc-calc-loading.htmx-request {
    display: flex;
}

.dsc-spin {
    animation: dsc-spin 0.8s linear infinite;
}

@keyframes dsc-spin {
    to { transform: rotate(360deg); }
}

.dsc-note-error {
    padding: 1rem 1.1rem;
    text-align: left;
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
}

.dsc-calc-channel {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dsc-calc-channel-meta h2 {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0;
}

.dsc-calc-channel-meta p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ── Rate bands ─────────────────────────────────────────────────────────
   The three bars come from the free tool's _rate_bar.html, which is written
   in that site's utility classes; nothing here defines them, so inside the
   app the bar vanished and the prices stacked. These rules give that shared
   markup the app's look, on the calculator and the profile's Sponsors tab.
   Selectors mirror the template's class names on purpose. */
.dsc-calc-result .mb-6 { margin: 0 0 1.25rem; }
.dsc-calc-result .mb-6 > .mb-4 { margin: 0 0 0.5rem; }
.dsc-calc-result h3.text-base {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}
.dsc-calc-result p.text-xs { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--muted); }
.dsc-calc-result .relative.h-8 {
    position: relative;
    height: 0.6rem;
    margin: 0.6rem 0 0.45rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surf);
}
.dsc-calc-result .relative.h-8 > .absolute.inset-0 {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--outline-var), var(--primary-c) 50%, var(--primary));
}
.dsc-calc-result .relative.h-8 > .absolute:not(.inset-0) {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ink);
    opacity: 0.55;
}
.dsc-calc-result .relative.h-8 > .left-\[20\%\] { left: 20%; }
.dsc-calc-result .relative.h-8 > .left-\[50\%\] { left: 50%; width: 3px; opacity: 1; background: var(--primary); }
.dsc-calc-result .relative.h-8 > .left-\[80\%\] { left: 80%; }
.dsc-calc-result .flex.justify-between { display: flex; gap: 0.5rem; }
.dsc-calc-result .flex.justify-between > .flex-1 { flex: 1; text-align: center; }
.dsc-calc-result .flex.justify-between p { margin: 0; font-size: 0.78rem; color: var(--muted); }
.dsc-calc-result .flex.justify-between p + p { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.dsc-calc-result .flex.justify-between .text-primary { color: var(--primary); }
.dsc-calc-result .flex.justify-between .text-primary + .text-primary { font-size: 1.05rem; font-weight: 700; }
.dsc-calc-result .flex.justify-between .text-success { color: var(--success); }
.dsc-profile-rates { margin-bottom: 1.25rem; }
.dsc-profile-rates .dsc-field-label { margin-bottom: 0.75rem; }

.dsc-region-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    vertical-align: middle;
    margin-left: 0.35rem;
}

.dsc-calc-sponsors {
    border: 1px solid var(--outline-var);
    border-radius: 0.75rem;
    margin: 1.5rem 0;
    overflow: hidden;
}

.dsc-calc-sponsors > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
}

.dsc-calc-sponsor-list {
    border-top: 1px solid var(--outline-var);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dsc-calc-sponsor {
    border: 1px solid var(--outline-var);
    border-radius: 0.6rem;
    background: var(--surf-low);
    overflow: hidden;
}

.dsc-calc-sponsor > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
}

.dsc-calc-sponsor-name {
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dsc-calc-sponsor ul {
    list-style: none;
    margin: 0;
    padding: 0 0.85rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dsc-calc-sponsor a {
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
}

.dsc-calc-sponsor a:hover {
    color: var(--primary);
}

.dsc-calc-narrative {
    border: 1px solid var(--outline-var);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    background: var(--surf-low);
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ── "Updated N ago · Refresh" lines (profile, calculator, tracker) ──────── */
.dsc-updated {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.9rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.dsc-updated-refresh {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dsc-updated-refresh:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Import preview: what the import will spend. */
.dsc-import-lookups {
    margin: 1rem 0 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.dsc-import-lookups .dsc-upgrade {
    margin-top: 0.75rem;
}

/* ── First-spend note on the lookup meters ───────────────────────────── */
.dsc-usage-note {
    color: var(--ink);
    opacity: 0.85;
}

/* ── Plan comparison (shared template with the public pricing page) ──── */
.dsc-compare {
    margin-top: 2rem;
}

.plan-compare-scroll {
    overflow-x: auto;
}

.plan-compare-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.plan-compare-table th,
.plan-compare-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--outline-var);
    vertical-align: middle;
}

.plan-compare-table thead th {
    border-bottom: 1px solid var(--outline-var);
    vertical-align: bottom;
}

.plan-compare-feature {
    width: 40%;
}

.plan-compare-plan {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
}

.plan-compare-price {
    display: block;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
}

.plan-compare-section th {
    padding-top: 1.75rem;
    padding-bottom: 0.5rem;
    font-weight: 600;
    border-bottom: 0;
}

.plan-compare-section td {
    border-bottom: 0;
}

.plan-compare-table tbody th {
    font-weight: 500;
}

.plan-compare-hot {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.plan-compare-yes {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.plan-compare-yes svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
    flex: 0 0 auto;
}

.plan-compare-no {
    color: var(--muted);
}

.plan-compare-rules {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem;
    border: 1px solid var(--outline-var);
    border-radius: 0.875rem;
    background: var(--paper);
}

.plan-compare-rule dt {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.plan-compare-rule dd {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

@media (min-width: 900px) {
    .plan-compare-rules {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 2rem;
    }
}


/* Integrations: connected apps first, then one tab per app with its logo,
   the connector URL once above the tabs, short steps. */
.dsc-int-lede { margin: -0.25rem 0 1rem; }
.dsc-int-card { margin-bottom: 1rem; }
.dsc-int-badge, .dsc-nav-beta { margin-left: 0.4rem; font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 600; vertical-align: middle; letter-spacing: 0.02em; }
.dsc-nav-beta { font-size: 0.62rem; padding: 0.05rem 0.4rem; margin-left: 0.3rem; }
.dsc-int-url { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 1.25rem; padding: 0.7rem 0.9rem; border: 1px solid var(--outline-var); border-radius: 0.7rem; background: var(--surf); flex-wrap: wrap; }
.dsc-int-url-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; flex: 0 0 100%; }
.dsc-int-url code { flex: 1 1 auto; font-size: 0.95rem; user-select: all; word-break: break-all; color: var(--ink); }
.dsc-int-tabs { margin: 0 0 1rem; gap: 0.25rem; flex-wrap: wrap; }
.dsc-int-tabs .dsc-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.1rem; font-size: 0.95rem; }
.dsc-int-logo { width: 1.25rem; height: 1.25rem; }
.dsc-int-logo--ink { color: var(--ink); } /* --ink flips with the theme */
.dsc-int-soon { opacity: 0.6; }
.dsc-int-soon-badge { font-size: 0.66rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); font-weight: 600; }
.dsc-int-intro { margin: 0 0 0.75rem; }
.dsc-int-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.6rem; list-style: decimal; line-height: 1.5; max-width: 62ch; }
.dsc-int-steps b { font-weight: 600; }
.dsc-int-keys { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--outline-var); }
.dsc-int-newkey { margin-top: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 0.7rem; background: color-mix(in srgb, var(--primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); }

/* ── Public calculator: the profile behind a door ─────────────────────
   The unlock bar sits above the tabs on every tab; the Sponsors tab wears
   a lock; the unlock cards replace the withheld bands and brand names. */
.dsc-unlock-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    margin: 0.75rem 0 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
    /* Mixed with transparent, not the paper colour: mixing with an
       achromatic colour in oklch drifts the hue towards red. */
    background: color-mix(in oklch, var(--primary) 7%, transparent);
    border-radius: var(--r);
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1.4;
}

.dsc-unlock-bar > span {
    flex: 1 1 18rem;
}

.dsc-unlock-btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.dsc-tab-lock {
    /* Explicitly inline: the marketing shell's preflight makes svg block. */
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.3rem;
    vertical-align: -1px;
}

.dsc-unlock-card {
    margin: 0.25rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
    background: color-mix(in oklch, var(--primary) 5%, transparent);
    border-radius: var(--r);
    text-align: center;
}

.dsc-unlock-card p {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.dsc-embed .dsc-profile--inline {
    margin-top: 0.5rem;
}

/* On a phone the tool page's card padding leaves the four tabs less room
   than the app's modal does: the profile bleeds to the card's edge, the
   tabs tighten, and the row wraps rather than cut a tab off. */
@media (max-width: 480px) {
    .dsc-embed .dsc-profile--inline {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0.75rem;
    }

    .dsc-embed .dsc-tabs {
        flex-wrap: wrap;
        gap: 0.15rem;
        padding: 0 0.9rem;
    }

    .dsc-embed .dsc-tab {
        padding: 0.55rem 0.15rem;
        font-size: 0.78rem;
    }
}

/* ── Saved brands: what the last refresh found ─────────────────────── */
.dsc-brand-new {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success);
}

.dsc-brand-new--banner {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}

.dsc-badge-new {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--on-primary);
    background: var(--success);
    vertical-align: middle;
}

/* ── Sponsorship Tracker result: history rows + proof videos ─────────── */
/* Shared by the tracker page and the saved-brand activity modal. */

/* Keep the "Creators sponsored" label + its help icon on one line. */
.dsc-tile-lbl:has(.dsc-help) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Bounded chart height so the trend line can't overflow into the history
   section below (Chart.js maintainAspectRatio:false fills its parent). */
.bst-chart-wrap {
    position: relative;
    height: 220px;
    margin: 1rem 0 0;
}
/* Generous vertical rhythm around the trend section: space above each heading
   (from the section before) and below it (from its own content). */
.bst-trend-label { margin-top: 2.75rem; margin-bottom: 1rem; }
.bst-history-label { margin-top: 2.75rem; margin-bottom: 1.25rem; }

.bst-creator {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--card);
    overflow: hidden;
}
.bst-creator-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}
.bst-creator-head::-webkit-details-marker { display: none; }
.bst-creator-head:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.bst-creator-head img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bst-creator-name { font-weight: 600; }
.bst-creator-name a { color: inherit; text-decoration: none; }
.bst-creator-name a:hover { color: var(--primary); }
.bst-creator-sub { color: var(--muted); font-size: 13px; }
.bst-chevron { color: var(--muted); flex-shrink: 0; transition: transform .15s ease; }
.bst-creator[open] .bst-chevron { transform: rotate(180deg); }
.bst-videos {
    border-top: 1px solid var(--border);
    padding: 8px 12px;
}
.bst-video {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.bst-video:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.bst-video img {
    width: 80px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.bst-video-title {
    font-size: 14px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bst-video-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bst-video-date { color: var(--muted); font-size: 12px; }
.bst-paid {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in srgb, #22c55e 18%, transparent);
    color: #16a34a;
}


/* ── Rate benchmarks + niche rate table ────────────────────────────── */
.dsc-rate-back { display: inline-block; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.dsc-rate-back:hover { color: var(--ink); }
.dsc-rate-hubs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.dsc-rate-scroll { position: relative; overflow-x: auto; }
.dsc-rate-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.dsc-rate-table th { text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0.5rem 0.75rem 0.5rem 0; white-space: nowrap; }
.dsc-rate-table td { padding: 0.65rem 0.75rem 0.65rem 0; border-top: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.dsc-rate-table th.num, .dsc-rate-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dsc-rate-table td.num { font-weight: 600; color: var(--ink); }
.dsc-rate-channel { max-width: 16rem; }
.dsc-rate-channel .dsc-rate-link { display: block; overflow: hidden; text-overflow: ellipsis; }
.dsc-rate-channel .dsc-muted { display: block; font-size: 0.78rem; }
.dsc-rate-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.dsc-rate-link:hover { color: var(--primary); }
.dsc-locked-cell { color: var(--muted); filter: blur(3px); user-select: none; font-weight: 400; }
.dsc-rate-note { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--muted); }
.dsc-rate-controls { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-bottom: 0.75rem; }
.dsc-rate-filters, .dsc-rate-sort { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.dsc-rate-pages { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; font-size: 0.9rem; }
.dsc-muted { color: var(--muted); }
.dsc-rate-actions { display: flex; gap: 0.35rem; align-items: center; justify-content: flex-end; }
.dsc-rate-actions .dsc-save-form { margin: 0; }
.dsc-rate-actions .dsc-btn, .dsc-rate-actions .dsc-save { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.dsc-rate-table--creators td { padding-right: 0.6rem; }
.dsc-unlock-form { display: inline; margin: 0; }


/* ── Your brand (discover/brand.html) ─────────────────────────────── */
.dsc-sidebar-brand {
  display: block;
  margin: -0.25rem 0 0.75rem;
  padding: 0 0.75rem;
  font-size: 0.78rem;
  color: var(--dsc-muted, #6b7280);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsc-sidebar-brand:hover { text-decoration: underline; }
.dsc-brand-setup, .dsc-brand-card { max-width: 640px; padding: 1.25rem 1.5rem; }
.dsc-brand-lead { margin: 0 0 1rem; }
.dsc-brand-site-row { display: flex; gap: 0.5rem; }
.dsc-brand-site-row .dsc-input { flex: 1; }
.dsc-brand-reading { display: none; margin-top: 0.5rem; }
.dsc-brand-site.htmx-request .dsc-brand-reading { display: block; }
#brand-form { margin-top: 1.25rem; }
.dsc-brand-form .dsc-rail-group { margin-bottom: 0.9rem; }
.dsc-field-help { font-size: 0.8rem; margin-top: 0.25rem; }
.dsc-field-error { color: #b91c1c; font-size: 0.8rem; margin-top: 0.25rem; }
.dsc-brand-form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.dsc-brand-rows { margin: 0; }
.dsc-brand-row { display: grid; grid-template-columns: 11rem 1fr; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--dsc-border, #e5e7eb); }
.dsc-brand-row dt { color: var(--dsc-muted, #6b7280); font-size: 0.85rem; }
.dsc-brand-row dd { margin: 0; }
.dsc-brand-set { margin: 1rem 0 0; }
@media (max-width: 640px) {
  .dsc-brand-row { grid-template-columns: 1fr; gap: 0.15rem; }
}


/* ── Fit and safety tags on result cards ─────────────────────────── */
.dsc-tag--fit { background: var(--primary, #4f46e5); color: #fff; border-color: transparent; font-weight: 600; }
.dsc-tag--safety-clear { background: #dcfce7; color: #166534; border-color: transparent; }
.dsc-tag--safety-low { background: #fef9c3; color: #854d0e; border-color: transparent; }
.dsc-tag--safety-medium { background: #ffedd5; color: #9a3412; border-color: transparent; }
.dsc-tag--safety-high { background: #fee2e2; color: #991b1b; border-color: transparent; }
.dsc-tag--safety-floor { background: #7f1d1d; color: #fff; border-color: transparent; }
/* Open-in-new-tab, next to the drawer's close button. */
.dsc-modal-newtab {
    margin-left: auto;
    margin-right: 0.25rem;
    font-size: 0.85rem;
    color: var(--dsc-muted, #6b7280);
    text-decoration: none;
    white-space: nowrap;
}
.dsc-modal-newtab:hover { text-decoration: underline; }
.dsc-modal-head .dsc-modal-newtab + .dsc-modal-close { margin-left: 0; }


/* ── Fit & safety tab (discover/_profile_fit.html) ──────────────────── */
.dsc-fit { display: grid; gap: 1.25rem; }
.dsc-fit-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dsc-fit-score { display: flex; flex-direction: column; align-items: center; min-width: 5.5rem; padding: 0.6rem 0.75rem; border-radius: 0.75rem; background: var(--primary, #4f46e5); color: #fff; }
.dsc-fit-score-val { font-size: 2rem; font-weight: 700; line-height: 1; }
.dsc-fit-score-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; margin-top: 0.25rem; }
.dsc-fit-reason { margin: 0; flex: 1; min-width: 12rem; }
.dsc-safety { display: grid; gap: 0.6rem; }
.dsc-safety-head { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.dsc-safety-marker summary { cursor: pointer; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dsc-safety-videos { margin: 0.4rem 0 0 1.25rem; padding: 0; font-size: 0.9rem; }
.dsc-safety-checked { margin: 0.5rem 0 0; font-size: 0.85rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dsc-footage-btn { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.dsc-soon { font-size: 0.85rem; }
html.dark .dsc-tag--safety-clear { background: #14532d; color: #dcfce7; }
html.dark .dsc-tag--safety-low { background: #713f12; color: #fef9c3; }
html.dark .dsc-tag--safety-medium { background: #7c2d12; color: #ffedd5; }
html.dark .dsc-tag--safety-high { background: #7f1d1d; color: #fee2e2; }


/* ── Contact line on the profile (discover/_profile.html) ───────────── */
.dsc-contact-email { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dsc-contact-about { text-decoration: underline; text-underline-offset: 3px; }


/* ── Profile header: one row (discover/_profile.html) ───────────────── */
.dsc-modal-head { flex-wrap: wrap; }
.dsc-modal-headinfo { flex: 1 1 12rem; min-width: 0; }
.dsc-modal-headinfo .dsc-card-title { overflow-wrap: anywhere; }
.dsc-similar-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dsc-modal-head-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.dsc-modal-head-actions .dsc-save-form { margin: 0; }
.dsc-btn-icon { padding: 0.5rem 0.6rem; }
.dsc-btn-icon svg { width: 1.25rem; height: 1.25rem; }
.dsc-modal-head-actions ~ .dsc-modal-newtab { margin-left: 0.5rem; }
/* On a phone the name and the close button keep the first row; the
   actions and the new-tab link take the second. */
@media (max-width: 560px) {
    .dsc-modal-head-actions { order: 5; margin-left: 0; }
    .dsc-modal-head-actions ~ .dsc-modal-newtab { order: 6; margin-left: auto; margin-right: 0; }
}
.dsc-safety-marker summary .dsc-muted { font-size: 0.85rem; }
.dsc-updated--foot { margin: 1.25rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--outline-var); }

/* ── Verdict strip on the Overview: fit, safety, sponsors, contact ───── */
.dsc-verdict-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
@media (max-width: 560px) {
    .dsc-verdict-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dsc-verdict-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.7rem 0.8rem;
    border-radius: 0.75rem;
    background: var(--primary);
    color: var(--on-primary, #fff);
}
.dsc-verdict-val { font-size: 1.1rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.dsc-verdict-val .dsc-muted { color: inherit; opacity: 0.75; }
.dsc-verdict-val--contact { font-size: 0.85rem; }
.dsc-verdict-val--contact a { color: inherit; }
.dsc-verdict-lbl { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
/* The safety cell wears its level: green is the one a marketer wants to see. */
.dsc-verdict-cell--safety-clear { background: #15803d; color: #fff; }
.dsc-verdict-cell--safety-low { background: #b45309; color: #fff; }
.dsc-verdict-cell--safety-medium { background: #c2410c; color: #fff; }
.dsc-verdict-cell--safety-high { background: #b91c1c; color: #fff; }
.dsc-verdict-cell--safety-floor { background: #450a0a; color: #fff; }

/* ── Stat tiles with an icon in the corner ──────────────────────────── */
.dsc-stat-tile { position: relative; }
.dsc-tile-icon { position: absolute; top: 0.75rem; right: 0.8rem; width: 1.05rem; height: 1.05rem; color: var(--muted); opacity: 0.8; }
.dsc-stat-tiles--icons .dsc-tile-val { padding-right: 1.5rem; }

/* The trend, inline on the Overview. */
.dsc-trend { margin-top: 1rem; }
.dsc-trend-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.dsc-trend-head .dsc-field-label { margin-bottom: 0; }
.dsc-trend-head .dsc-metric-toggle { margin: 0; }

/* Uploads and formats: a cadence figure, a long-form/Shorts split bar and
   one bar per format. */
.dsc-mix { margin-top: 1rem; }
.dsc-mix-grid { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; align-items: center; }
@media (max-width: 560px) {
    .dsc-mix-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}
.dsc-mix-cadence { display: flex; align-items: center; gap: 0.6rem; }
.dsc-mix-cadence:empty { display: none; }
.dsc-mix-num { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--ink); }
.dsc-mix-lbl { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--ink); line-height: 1.2; }
.dsc-mix-lbl small { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.dsc-split-bar { display: flex; height: 0.75rem; border-radius: 999px; overflow: hidden; background: var(--surf-low, #eef0f4); }
.dsc-split-long { display: block; background: var(--primary, #4f46e5); }
.dsc-split-short { display: block; background: #f59e0b; }
.dsc-split-legend { display: flex; gap: 1rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--muted); }
.dsc-split-legend strong { color: var(--ink); }
.dsc-split-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.35rem; vertical-align: -1px; }
.dsc-split-dot--long { background: var(--primary, #4f46e5); }
.dsc-split-dot--short { background: #f59e0b; }
.dsc-fmt-bars { display: grid; gap: 0.4rem; margin-top: 0.85rem; }
.dsc-fmt-bars--words { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dsc-fmt-word { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--surf-low, #eef0f4); color: var(--ink); font-size: 0.85rem; text-transform: capitalize; }
.dsc-fmt-bar { display: grid; grid-template-columns: 6.5rem 1fr 3rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.dsc-fmt-lbl { color: var(--muted); text-transform: capitalize; }
.dsc-fmt-track { height: 0.5rem; border-radius: 999px; background: var(--surf-low, #eef0f4); overflow: hidden; }
.dsc-fmt-fill { display: block; height: 100%; border-radius: 999px; background: var(--primary, #4f46e5); }
.dsc-fmt-val { text-align: right; font-weight: 600; }

/* The fit radar and its legend. */
.dsc-fit-radar { height: 18rem; max-width: 30rem; margin: 0 auto; }
.dsc-fit-legend { display: flex; gap: 0.4rem 1.1rem; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; color: var(--muted); }
.dsc-fit-legend-val { font-weight: 600; color: var(--ink); }

/* ── One verdict line on a result card, words not pills ─────────────── */
.dsc-card-verdict {
    display: flex;
    gap: 0.15rem 0.45rem;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink);
}
.dsc-card-verdict > span + span::before { content: "·"; margin-right: 0.45rem; color: var(--muted); }
.dsc-card-verdict > span + .dsc-verdict-safety::before { content: none; margin: 0; }
.dsc-verdict-fit { font-weight: 700; }
/* The safety word is the one pill on the line, filled with its level. */
.dsc-verdict-safety { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #fff; line-height: 1.4; }
.dsc-verdict-safety-clear { background: #15803d; }
.dsc-verdict-safety-low { background: #b45309; }
.dsc-verdict-safety-medium { background: #c2410c; }
.dsc-verdict-safety-high { background: #b91c1c; }
.dsc-verdict-safety-floor { background: #450a0a; }
.dsc-verdict-sponsored { font-weight: 700; color: var(--primary); }
.dsc-verdict-sponsors--weak, .dsc-verdict-niche { color: var(--muted); }

/* ── Markets on the brand card (discover/brand.html) ───────────────── */
.dsc-brand-markets { margin: 1rem 0 0; }
.dsc-brand-markets-row { display: flex; gap: 0.6rem; align-items: flex-start; }
.dsc-brand-markets-row .ts-wrapper { flex: 1 1 auto; min-width: 0; }
.dsc-brand-markets-note { font-size: 0.8rem; margin-top: 0.35rem; }
@media (max-width: 560px) {
    .dsc-brand-markets-row { flex-direction: column; align-items: stretch; }
}


/* A creator who hides like counts: "Hidden" where a number would be. */
.dsc-metric-value--hidden, .dsc-tile-val--hidden { color: var(--muted); font-weight: 600; font-size: 1.05rem; }


/* ── Close matches: one filter missed, shown under the results ─────── */
.dsc-close { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--outline-var); }
.dsc-close-head { margin-bottom: 0.75rem; }
.dsc-close-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.dsc-close-sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--muted); }
.dsc-close-group { margin-top: 0.75rem; }
.dsc-close-group + .dsc-close-group { margin-top: 1.25rem; }
.dsc-close-summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; margin-bottom: 0.6rem; font-size: 0.88rem; font-weight: 700; color: var(--ink); }
.dsc-close-summary::-webkit-details-marker { display: none; }
.dsc-close-summary::after { content: "▾"; color: var(--muted); transition: transform 0.15s ease; }
.dsc-close-group:not([open]) .dsc-close-summary::after { transform: rotate(-90deg); }
.dsc-close-count { display: inline-block; min-width: 1.5rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--surf); border: 1px solid var(--outline-var); font-size: 0.75rem; font-weight: 600; text-align: center; color: var(--muted); }
/* What the close match missed: the first thing on its verdict line. */
.dsc-verdict-miss { color: var(--on-warning-c); font-weight: 600; }