/* DDScore.ai - Dark Navy Theme
   Inspired by Playful Pixels brand colors
   All colors defined as CSS custom properties */

@import url('clash-grotesk.css');

:root {
    /* Core palette */
    --dds-bg-primary: #0A0E1A;
    --dds-bg-secondary: #0D1225;
    --dds-bg-card: #111827;
    --dds-bg-card-hover: #1A2236;
    --dds-bg-input: #0F1629;

    /*
     * Card shells — imperceptible layered fills: tiny “lift” toward hover tone top-left,
     * slightly deeper toward page bg bottom-right. Nested score tiles use a cooler second pass.
     */
    --dds-bg-card-surface:
        radial-gradient(ellipse 82% 50% at 12% -8%, color-mix(in srgb, var(--dds-bg-card-hover) 18%, var(--dds-bg-card)) 0%, transparent 58%),
        radial-gradient(ellipse 72% 46% at 100% 106%, color-mix(in srgb, var(--dds-bg-primary) 25%, var(--dds-bg-card)) 0%, transparent 54%),
        linear-gradient(
            161deg,
            color-mix(in srgb, var(--dds-bg-card-hover) 9%, var(--dds-bg-card)) 0%,
            var(--dds-bg-card) 46%,
            color-mix(in srgb, var(--dds-bg-primary) 11%, var(--dds-bg-card)) 100%
        );
    --dds-bg-score-card-surface:
        radial-gradient(ellipse 70% 44% at 90% -4%, color-mix(in srgb, var(--dds-bg-card-hover) 14%, var(--dds-bg-card)) 0%, transparent 52%),
        radial-gradient(ellipse 60% 38% at -2% 102%, color-mix(in srgb, var(--dds-bg-primary) 20%, var(--dds-bg-card)) 0%, transparent 50%),
        linear-gradient(199deg, var(--dds-bg-card) 0%, color-mix(in srgb, var(--dds-bg-input) 12%, var(--dds-bg-card)) 100%);

    /* Header & Footer */
    --dds-header-bg: #080C16;
    --dds-footer-bg: #060A14;
    --dds-header-border: #1E293B;
    /* Space between credits cluster, email, and outline actions (matches perceived gap before chips). */
    --dds-header-actions-gap: 1rem;
    /* Gap between DD mark and SCORE.AI wordmark (half of prior 0.225rem step) */
    --dds-logo-mark-gap: calc(0.45rem * 0.25);
    /* Logo hover (continuous while hovered, no positional motion):
       - DD mark: halo "breath" starts first (drop-shadow only — no rotation/lift)
       - SCORE.AI letters: glyph-by-glyph spotlight after a short lead so the mark feels like it hands off */
    --dds-logo-letter-stagger: 39ms;
    --dds-logo-letter-spotlight-duration: 2.34s;
    --dds-logo-mark-pulse-duration: 3.64s;
    /* Letters begin after this offset so DD glow is already in motion (seamless handoff). */
    --dds-logo-letter-spotlight-start-delay: 0.12s;
    --dds-logo-wordmark-letter-spacing-duration: 0.494s;

    /* Accent colors */
    --dds-accent-primary: #3B82F6;
    --dds-accent-primary-hover: #2563EB;
    --dds-accent-secondary: #60A5FA;
    --dds-accent-glow: rgba(59, 130, 246, 0.15);

    /* Marketing homepage segment-card: thin top line, accent → transparent */
    --dds-card-accent-line-height: 2px;
    --dds-card-accent-line: linear-gradient(90deg, var(--dds-accent-primary), transparent);

    /*
     * Subtle “starfield” / micro-dot grain (premium dark UIs — barely perceptible).
     * Use with background-size: var(--dds-bg-dot-size); background-repeat: repeat;
     */
    --dds-bg-dot-pattern: radial-gradient(rgba(255, 255, 255, 0.048) 0.5px, transparent 0.62px);
    --dds-bg-dot-size: 21px 21px;

    /* Text */
    --dds-text-primary: #F8FAFC;
    --dds-text-secondary: #94A3B8;
    --dds-text-muted: #64748B;
    /* Faded hint: must read clearly as non-input vs --dds-text-primary on --dds-bg-input */
    --dds-text-placeholder: color-mix(in srgb, var(--dds-text-secondary) 42%, transparent);
    --dds-text-accent: #60A5FA;
    --dds-heading-letter-spacing: 0.065em;

    /* Score colors */
    --dds-score-red: #DC2626;
    --dds-score-orange: #F97316;
    --dds-score-yellow: #FACC15;
    --dds-score-warm-yellow: #FDE047;
    --dds-score-cyan: #22D3EE;
    --dds-score-blue: #3B82F6;
    --dds-score-light-green: #86EFAC;
    --dds-score-green: #22C55E;
    --dds-score-dark-green: #064E3B;
    --dds-score-excellent: var(--dds-score-dark-green);
    --dds-score-good: var(--dds-score-blue);
    --dds-score-moderate: var(--dds-score-yellow);
    --dds-score-warning: var(--dds-score-orange);
    --dds-score-poor: var(--dds-score-red);

    /* Recommendation tiers */
    --dds-rec-green: #10B981;
    --dds-rec-green-bg: rgba(16, 185, 129, 0.1);
    --dds-rec-yellow: #F59E0B;
    --dds-rec-yellow-bg: rgba(245, 158, 11, 0.1);
    --dds-rec-red: #EF4444;
    --dds-rec-red-bg: rgba(239, 68, 68, 0.1);

    /* Confidence badge tiers (admin-only) */
    --dds-conf-high: #10B981;
    --dds-conf-high-bg: rgba(16, 185, 129, 0.12);
    --dds-conf-good: #3B82F6;
    --dds-conf-good-bg: rgba(59, 130, 246, 0.12);
    --dds-conf-medium: #F59E0B;
    --dds-conf-medium-bg: rgba(245, 158, 11, 0.12);
    --dds-conf-low: #EF4444;
    --dds-conf-low-bg: rgba(239, 68, 68, 0.12);

    /* Borders & shadows */
    --dds-border: #1E293B;
    --dds-border-light: #334155;
    --dds-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --dds-shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.4);
    --dds-overlay-backdrop: color-mix(in srgb, var(--dds-bg-primary) 72%, transparent);
    /*
     * Header nav + outline buttons: classic brand-blue glow, ~half the reach of a
     * typical 20px/40px diffuse halo (tighter than “full billboard” glow).
     */
    --dds-hover-glow-tight:
        0 0 10px rgba(59, 130, 246, 0.52),
        0 0 20px rgba(59, 130, 246, 0.24);
    --dds-hover-glow-btn:
        0 0 12px rgba(59, 130, 246, 0.48),
        0 0 24px rgba(59, 130, 246, 0.2);
    /* Perimeter gauge links / focus — same basis as button hover scale */
    --dds-gauge-hover-scale: 1.056;
    --dds-gauge-focus-scale: 1.084;
    /* Buttons, share circles, modal close, credits toggle — match gauge hover (~+5.6%), not +30% */
    --dds-btn-hover-scale: var(--dds-gauge-hover-scale);
    /* Subtle mousedown “press” only while :active (not on hover alone) */
    --dds-btn-press-scale: 0.982;
    --dds-btn-active-scale: 0.98;
    --dds-btn-hover-bg: var(--dds-accent-glow);
    --dds-btn-active-bg: color-mix(in srgb, var(--dds-accent-primary) 18%, transparent);
    --dds-btn-edge-weld-duration: 0.9s;
    --dds-btn-press-weld-duration: 0.4s;
    --dds-btn-weld-glow: 0 0 1.05rem color-mix(in srgb, var(--dds-accent-secondary) 56%, transparent);
    /* Radar vertex + Score Overview hover: ~30% softer than prior */
    --dds-radar-vertex-glow: drop-shadow(0 0 0.175rem var(--dds-accent-primary))
        drop-shadow(0 0 0.7rem color-mix(in srgb, var(--dds-accent-primary) 42%, transparent));
    /*
     * Header logo, nav, and report “Score Overview” row: very tight outer halo (px so it does not sprawl past copy).
     * --dds-header-hover-film + ::after/::after-on-row sits on top of glyphs/logo and blends opaque/black pixels into the shell.
     */
    --dds-header-hover-halo-blur-1: 1px;
    --dds-header-hover-halo-blur-2: 1.5px;
    --dds-header-hover-halo: drop-shadow(0 0 var(--dds-header-hover-halo-blur-1) var(--dds-accent-primary))
        drop-shadow(0 0 var(--dds-header-hover-halo-blur-2) color-mix(in srgb, var(--dds-accent-primary) 48%, transparent));
    --dds-header-hover-film: color-mix(in srgb, var(--dds-accent-secondary) 44%, transparent);
    --dds-header-hover-film-opacity: 0.42;

    /* Spacing */
    --dds-radius: 12px;
    --dds-radius-sm: 8px;
    --dds-radius-lg: 16px;
    --dds-progress-radius: 3px;
    --dds-progress-fill-radius: 2px;

    /* App shell: rem + vmin cap on wide layouts; on short desktop windows vmin alone made the column tiny,
       so never narrower than 50vw (overridden to 100% at tablet/phone — see @media max-width 768px). */
    --dds-layout-max-width: max(
        50vw,
        min(calc(97.5rem * 0.9 * 1.02), 92vmin)
    );
    --dds-admin-layout-max-width: calc(97.5rem * 0.9 * 1.02 * 1.15);

    /* Horizontal gutter: header / main / footer content edges must stay aligned */
    --dds-main-padding-x: 1rem;
    /* In-main full pages (How it works, Pricing, …): vertical rhythm only — never add a second max-width */
    --dds-page-padding-y-start: 2rem;
    --dds-page-padding-y-end: 4rem;

    /* Upsell */
    --dds-upsell-bg: #0F172A;
    --dds-upsell-border: #1E3A5F;
    --dds-upsell-badge-bg: rgba(59, 130, 246, 0.2);
    --dds-upsell-badge-text: #60A5FA;
    --dds-upsell-highlight: rgba(59, 130, 246, 0.08);
    --dds-upsell-toast-bg: #1E293B;

    /* Chat */
    --dds-chat-bg: #0D1225;
    --dds-chat-msg-user-bg: #1E3A5F;
    --dds-chat-msg-bot-bg: #1A2236;
    --dds-chat-input-bg: #0F1629;
    --dds-chat-toggle-bg: var(--dds-accent-primary);
    --dds-chat-toggle-hover: var(--dds-accent-primary-hover);

    /* UI font: Clash Grotesk Variable keeps the DDScore brand while avoiding the tight legacy Medium alias. */
    --dds-font: "Clash Grotesk Variable", "Clash Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;

    /* Display / section headings follow the same readable UI stack. */
    --dds-heading-font-family: var(--dds-font);
    --dds-heading-font-weight: 520;

    /* ── Responsive design tokens ──
       Breakpoints (for reference — CSS custom props can't be used in @media conditions):
         --dds-bp-phone:      480px   (iPhone 14 Pro 393, Pixel 8 412, Galaxy S24 412, iPhone 15 Pro Max 430)
         --dds-bp-tablet:     768px   (iPad Mini, small tablets)
         --dds-bp-desktop:   1200px   (wide monitors)
         --dds-bp-landscape-h: 500px  (max-height for landscape phone detection)

       These spacing/sizing tokens ARE overridden inside @media blocks, so changing
       them here changes the desktop defaults; the mobile overrides below set their
       own values for narrow screens. */
    --dds-card-padding: 2.2rem;
    --dds-card-margin-y: 1.75rem;
    --dds-hero-padding: 3rem 1.75rem 1.75rem;
    --dds-hero-title-size: 2.45rem;
    --dds-hero-accent-size: 1.28rem;
    --dds-hero-subtitle-size: 1.08rem;
    --dds-gauge-size: 8.75rem;
    --dds-gauge-value-size: 2.35rem;
    --dds-gauge-label-size: 0.82rem;
    --dds-report-card-padding: 2.2rem;
    --dds-table-font-size: 0.875rem;
    --dds-table-cell-padding: 0.5rem 0.75rem;

    /* Spider web Score Overview — perimeter gauge ring vs graph box (1 = 12% baseline diameter).
       Single tweak knob: JS + Playwright read this; print @media uses it on cqw gauge sizes. */
    --dds-score-overview-perimeter-gauge-scale: 0.96;

    /* Spider web score graph: pixel sizes set by ResizeObserver (ddscore-score-graph-resize.js).
       Fallbacks here cover the initial paint before JS runs. */
    --sg-web-px: 504px;
    --sg-gauge-px: calc(78px * var(--dds-score-overview-perimeter-gauge-scale));

    /* Luminance mask (hero glow): opaque channel for mask-image gradients */
    --dds-mask-opaque: #ffffff;

    /* How it works — score explorer (slider + readout) */
    --dds-works-explorer-bar-height: 2.5rem;
    --dds-works-explorer-marker-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.45);
    --dds-works-explorer-summary-min-height: 4.5rem;
    --dds-works-explorer-zone-leader-height: 1.75rem;
    --dds-works-explorer-tick-line-width: 4px;
}

/* Reset & base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: clamp(15px, 14px + 0.22vw, 17px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Avoid a light strip at the viewport edge when content is shorter than the window. */
    background-color: var(--dds-bg-primary);
}

/* Phone / small tablet: +25% root rem so body copy, nav, forms, and token-based sizes read larger. */
@media (max-width: 768px) {
    html {
        font-size: clamp(18.75px, 17.5px + 0.275vw, 21.25px);
    }
}

body,
.ddscore-bg {
    position: relative;
    background-color: var(--dds-bg-primary);
    color: var(--dds-text-primary);
    font-family: var(--dds-font);
    line-height: 1.6;
    min-height: 100vh;
}

/* Large-surface depth: fixed micro-dots only (no strong top/bottom glows — they caused visible seams
   against full-bleed hero/footer blocks and a spotlight look in the footer). */
body.ddscore-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: var(--dds-bg-dot-pattern);
    background-size: var(--dds-bg-dot-size);
    background-repeat: repeat;
    background-attachment: fixed;
}

/* Heading font families — use Clash Grotesk Variable/Semibold, not the tighter legacy Medium alias. */
h1,
h2,
h3,
.ddscore-hero-title {
    font-family: var(--dds-heading-font-family);
    font-weight: var(--dds-heading-font-weight);
    letter-spacing: var(--dds-heading-letter-spacing);
}

h4,
h5,
h6 {
    font-family: "Clash Grotesk Variable", "Clash Grotesk", sans-serif;
    font-weight: var(--dds-heading-font-weight);
    letter-spacing: var(--dds-heading-letter-spacing);
}

.ddscore-card-title,
.ddscore-progress-hero-title,
.ddscore-verify-stage-lede h2,
.ddscore-analysis-stage-card-heading,
.ddscore-analysis-overall-label,
.ddscore-analysis-stage-heading h2,
.ddscore-analysis-stage-meta,
.ddscore-analysis-stage-document-title,
.ddscore-analysis-stage-document-meta {
    letter-spacing: var(--dds-heading-letter-spacing);
}

.ddscore-hero-title,
.ddscore-card-title,
.ddscore-pricing-title,
.ddscore-progress-hero-title,
.ddscore-verify-stage-lede h2,
.ddscore-analysis-stage-card-heading,
.ddscore-analysis-overall-label,
.ddscore-analysis-stage-heading h2,
.ddscore-analysis-stage-meta,
.ddscore-analysis-stage-document-title,
.ddscore-analysis-stage-document-meta {
    outline: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ddscore-hero-title:focus,
.ddscore-hero-title:focus-visible,
.ddscore-card-title:focus,
.ddscore-card-title:focus-visible,
.ddscore-pricing-title:focus,
.ddscore-pricing-title:focus-visible,
.ddscore-progress-hero-title:focus,
.ddscore-progress-hero-title:focus-visible,
.ddscore-verify-stage-lede h2:focus,
.ddscore-verify-stage-lede h2:focus-visible,
.ddscore-analysis-stage-card-heading:focus,
.ddscore-analysis-stage-card-heading:focus-visible,
.ddscore-analysis-overall-label:focus,
.ddscore-analysis-overall-label:focus-visible,
.ddscore-analysis-stage-heading h2:focus,
.ddscore-analysis-stage-heading h2:focus-visible,
.ddscore-analysis-stage-meta:focus,
.ddscore-analysis-stage-meta:focus-visible,
.ddscore-analysis-stage-document-title:focus,
.ddscore-analysis-stage-document-title:focus-visible,
.ddscore-analysis-stage-document-meta:focus,
.ddscore-analysis-stage-document-meta:focus-visible {
    outline: 0;
    box-shadow: none;
}

/* Layout */
.ddscore-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.ddscore-main {
    flex: 1;
    width: 100%;
    max-width: var(--dds-layout-max-width);
    margin: 0 auto;
    padding: 0 var(--dds-main-padding-x);
    /* Do not set overflow-x here: it clips .ddscore-hero full-bleed (negative margin) and restores side seams. */
    container-type: inline-size;
    container-name: ddscore-main;
}

body:has(.ddscore-modal-backdrop) .ddscore-main,
body.ddscore-help-modal-mobile .ddscore-main,
.ddscore-main:has(.ddscore-modal-backdrop) {
    container-type: normal;
    container-name: none;
}

/* All primary h1s stay within the main column; unclassed titles (e.g. admin) scale with the same container. */
.ddscore-main h1 {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.ddscore-main h1:not([class]) {
    font-size: clamp(1.25rem, 0.5rem + 3.2vw, 2rem);
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-main h1:not([class]) {
        font-size: clamp(1.25rem, 0.5rem + 5.5cqi, 2rem);
    }
}

/**
 * Full-width page shell inside .ddscore-main (same column as Dashboard / Report).
 * Do not set a second max-width on inner wrappers — .ddscore-main already uses --dds-layout-max-width;
 * horizontal gutters come only from .ddscore-main (--dds-main-padding-x).
 * New full-page views: root element class="ddscore-page-body" (optionally plus ddscore-*-page for page-specific rules).
 */
.ddscore-page-body {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    padding: var(--dds-page-padding-y-start) 0 var(--dds-page-padding-y-end);
}

/* Header + hamburger dropdown share one positioning context (panel aligns right under the bar). */
.ddscore-header-shell {
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}

/* Header */
.ddscore-header {
    background: var(--dds-header-bg);
    border-bottom: 1px solid var(--dds-header-border);
    position: relative;
    z-index: 100;
    backdrop-filter: blur(12px);
    overflow: visible;
}

.ddscore-header-inner {
    /* Wider than the main content column so nav + credits fit on Full HD; main still uses --dds-layout-max-width. */
    width: 100%;
    max-width: min(100vw - 2 * var(--dds-main-padding-x), 2000px);
    margin: 0 auto;
    padding: 0.75rem var(--dds-main-padding-x);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    box-sizing: border-box;
}

/* Logo + nav as one cluster; actions use margin-left:auto so only one flexible gap (nav to credits). */
.ddscore-header-leading {
    display: flex;
    align-items: center;
    gap: clamp(0.85rem, 1.8vw, 2rem);
    min-width: 0;
    flex: 1 1 auto;
}

.ddscore-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--dds-logo-mark-gap);
    position: relative;
    isolation: isolate;
    border-radius: var(--dds-radius-sm);
    width: fit-content;
    max-width: 100%;
}

/* Hover: header lockup does not change size — only the DD mark keeps a subtle halo pulse. */
.ddscore-logo:hover {
    outline: none;
}

.ddscore-logo:hover .ddscore-logo-mark,
.ddscore-logo:focus-visible .ddscore-logo-mark,
.ddscore-logo:hover .ddscore-logo-img,
.ddscore-logo:focus-visible .ddscore-logo-img {
    animation: ddscore-logo-mark-pulse var(--dds-logo-mark-pulse-duration) ease-in-out infinite;
}

.ddscore-logo:focus-visible {
    outline: 2px solid var(--dds-accent-secondary);
    outline-offset: 3px;
}

.ddscore-logo-mark,
.ddscore-logo-img {
    position: relative;
    z-index: 0;
    display: block;
    height: 36px;
    width: auto;
    object-fit: contain;
    transform-origin: 50% 88%;
    will-change: transform, filter;
}

.ddscore-logo-wordmark {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    font-family: "Clash Grotesk Variable", "Clash Grotesk", sans-serif;
    font-weight: 800;
    font-size: clamp(1.02rem, 2.35vw, 1.32rem);
    letter-spacing: 0.07em;
    line-height: 1;
    color: var(--dds-text-primary);
    white-space: nowrap;
    transition: letter-spacing var(--dds-logo-wordmark-letter-spacing-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.ddscore-logo-score {
    font-weight: 800;
}

.ddscore-logo-dot {
    font-weight: 800;
    color: var(--dds-text-primary);
    margin: 0 0.02em;
    transition: color 0.585s ease;
}

.ddscore-footer-brand-lockup:hover .ddscore-logo-dot,
.ddscore-footer-brand-lockup:focus-visible .ddscore-logo-dot,
.ddscore-shared-image-brand:hover .ddscore-logo-dot {
    color: var(--dds-accent-secondary);
}

/* Header logo: keep the period the same tone as SCORE.AI (no accent shift on hover/focus). */
.ddscore-logo:hover .ddscore-logo-dot,
.ddscore-logo:focus-visible .ddscore-logo-dot {
    color: var(--dds-text-primary);
}

.ddscore-logo-ai {
    font-weight: 800;
    color: var(--dds-text-primary);
}

.ddscore-logo-letter {
    display: inline-block;
    transform-origin: 50% 92%;
    backface-visibility: hidden;
    will-change: transform, text-shadow;
}

/* DD mark: very subtle halo "breath" while hovered. Drop-shadow only —
   the icon itself does not move or rotate. */
@keyframes ddscore-logo-mark-pulse {
    0%, 25%, 100% {
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--dds-accent-secondary) 35%, transparent));
    }

    12.5% {
        filter: drop-shadow(0 0 10px color-mix(in srgb, var(--dds-accent-secondary) 65%, transparent));
    }
}

/* SCORE.AI per-glyph spotlight: each letter, in turn, briefly enlarges by
   ~10% and picks up a soft accent-blue glow, then settles back. The phase
   per letter is offset by --lw, so the highlight travels left-to-right.
   No positional motion — keeps the wordmark calm and premium. */
@keyframes ddscore-logo-letter-spotlight {
    0%, 15%, 100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(96, 165, 250, 0);
    }

    7.5% {
        transform: scale(1.11);
        text-shadow:
            0 0 6px color-mix(in srgb, var(--dds-accent-secondary) 72%, transparent),
            0 0 14px color-mix(in srgb, var(--dds-accent-primary) 28%, transparent);
    }
}

.ddscore-footer-brand-lockup:hover .ddscore-logo-letter,
.ddscore-footer-brand-lockup:focus-visible .ddscore-logo-letter,
.ddscore-shared-image-brand:hover .ddscore-logo-letter {
    animation: ddscore-logo-letter-spotlight var(--dds-logo-letter-spotlight-duration) ease-in-out infinite;
    animation-delay: calc(
        var(--dds-logo-letter-spotlight-start-delay) + var(--lw, 0) * var(--dds-logo-letter-stagger));
}

.ddscore-nav-desktop {
    display: flex;
    gap: 1.25rem;
    min-width: 0;
}

.ddscore-nav-desktop .ddscore-nav-link {
    white-space: nowrap;
}

.ddscore-nav-link {
    color: var(--dds-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    isolation: isolate;
    transform-origin: 50% 50%;
    transition: color 0.2s ease, transform 0.25s ease, text-shadow 0.25s ease;
    border-radius: var(--dds-radius-sm);
}

/* Hover: no chip / no box-shadow — glow follows glyph alpha via text-shadow only. */
.ddscore-nav-link:hover {
    color: var(--dds-text-primary);
    transform: scale(var(--dds-gauge-hover-scale));
    text-shadow:
        0 0 2px rgba(59, 130, 246, 0.95),
        0 0 6px rgba(59, 130, 246, 0.55),
        0 0 12px rgba(59, 130, 246, 0.28);
}

.ddscore-nav-link:focus-visible {
    color: var(--dds-text-primary);
    transform: scale(var(--dds-gauge-hover-scale));
    text-shadow:
        0 0 2px rgba(59, 130, 246, 0.95),
        0 0 6px rgba(59, 130, 246, 0.55),
        0 0 12px rgba(59, 130, 246, 0.28);
    outline: 2px solid var(--dds-accent-secondary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-logo,
    .ddscore-footer-brand-lockup,
    .ddscore-nav-link,
    .ddscore-report-score-graph-header::after {
        transition-duration: 0.01ms;
    }

    .ddscore-logo:hover,
    .ddscore-logo:focus-visible,
    .ddscore-nav-link:hover,
    .ddscore-nav-link:focus-visible {
        transform: none;
        text-shadow: none;
    }

    .ddscore-logo:hover .ddscore-logo-wordmark,
    .ddscore-logo:focus-visible .ddscore-logo-wordmark {
        letter-spacing: 0.07em;
    }

    .ddscore-credits-toggle:hover {
        box-shadow: none;
    }

    .ddscore-logo:hover .ddscore-logo-mark,
    .ddscore-logo:focus-visible .ddscore-logo-mark,
    .ddscore-logo:hover .ddscore-logo-img,
    .ddscore-logo:focus-visible .ddscore-logo-img,
    .ddscore-footer-brand-lockup:hover .ddscore-logo-mark,
    .ddscore-footer-brand-lockup:focus-visible .ddscore-logo-mark,
    .ddscore-report-score-graph-header:hover .ddscore-score-overview-logo,
    .ddscore-report-score-graph-header:hover .ddscore-score-overview-wordmark .ddscore-logo-letter {
        transform: none;
        filter: none;
        animation: none;
    }

    .ddscore-logo:hover .ddscore-logo-letter,
    .ddscore-logo:focus-visible .ddscore-logo-letter,
    .ddscore-footer-brand-lockup:hover .ddscore-logo-letter,
    .ddscore-footer-brand-lockup:focus-visible .ddscore-logo-letter,
    .ddscore-shared-image-brand:hover .ddscore-logo-letter {
        animation: none;
        text-shadow: none;
    }

    .ddscore-footer-brand-lockup:hover .ddscore-logo-wordmark,
    .ddscore-footer-brand-lockup:focus-visible .ddscore-logo-wordmark {
        letter-spacing: 0.07em;
    }

    .ddscore-report-score-graph-header:hover .ddscore-report-score-graph-title {
        text-shadow: none;
    }

    .ddscore-report-score-graph-header:hover::after {
        opacity: 0;
    }

    .ddscore-btn:hover:not(:disabled):not(.ddscore-btn-disabled-look)::after,
    .ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look)::before,
    .ddscore-credits-toggle:hover::after,
    .ddscore-credits-toggle:active::before,
    .ddscore-credits-upgrade:hover::after,
    .ddscore-credits-upgrade:active::before,
    .ddscore-insights-url-chip-remove:hover::after,
    .ddscore-insights-url-chip-remove:active::before,
    .ddscore-financial-year-selector-btn:hover:not(:disabled)::after,
    .ddscore-financial-year-selector-btn:active:not(:disabled)::before,
    .ddscore-faq-toggle-btn:hover::after,
    .ddscore-faq-toggle-btn:active::before,
    .ddscore-chat-toggle:hover::after,
    .ddscore-chat-toggle:active::before,
    .ddscore-chat-example-btn:hover:not(:disabled)::after,
    .ddscore-chat-example-btn:active:not(:disabled)::before,
    .ddscore-chat-send:hover:not(:disabled)::after,
    .ddscore-chat-send:active:not(:disabled)::before,
    .ddscore-upsell-cta-btn:hover::after,
    .ddscore-upsell-cta-btn:active::before,
    .ddscore-share-dialog-option:hover::after,
    .ddscore-share-dialog-option:active::before,
    .ddscore-share-btn:hover::after,
    .ddscore-share-btn:active::before {
        animation: none;
        opacity: 0;
    }

    .ddscore-btn:hover:not(:disabled):not(.ddscore-btn-disabled-look):not(.ddscore-btn-icon),
    .ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look):not(.ddscore-btn-icon),
    .ddscore-btn-primary:hover:not(:disabled):not(.ddscore-btn-disabled-look),
    .ddscore-btn-primary:active:not(:disabled):not(.ddscore-btn-disabled-look),
    .ddscore-btn-outline:hover:not(:disabled),
    .ddscore-btn-outline:active:not(:disabled) {
        transform: none;
        box-shadow: none;
    }

    .ddscore-header .ddscore-hamburger:hover,
    .ddscore-header .ddscore-hamburger:active {
        transform: none;
        box-shadow: none;
    }

    .ddscore-admin-link:hover {
        box-shadow: none;
    }

    .ddscore-btn-icon:hover,
    .ddscore-btn-icon:active:not(:disabled) {
        transform: none;
    }

    .ddscore-admin-link:hover,
    .ddscore-admin-link:active {
        transform: none;
    }

    .ddscore-btn-google:hover:not(:disabled),
    .ddscore-btn-google:active:not(:disabled),
    .ddscore-btn-apple:hover:not(:disabled),
    .ddscore-btn-apple:active:not(:disabled) {
        transform: none;
    }

    .ddscore-modal-header .ddscore-modal-close:hover,
    .ddscore-modal-header .ddscore-modal-close:active,
    .ddscore-credits-exhausted-modal .ddscore-modal-close:hover,
    .ddscore-credits-exhausted-modal .ddscore-modal-close:active,
    .ddscore-problem-report-modal .ddscore-modal-close:hover,
    .ddscore-problem-report-modal .ddscore-modal-close:active,
    .ddscore-problem-report-modal .ddscore-modal-close:hover:active,
    .ddscore-share-dialog .ddscore-modal-close:hover,
    .ddscore-share-dialog .ddscore-modal-close:active,
    .ddscore-share-dialog .ddscore-modal-close:hover:active,
    .ddscore-share-open:hover,
    .ddscore-share-open:active,
    .ddscore-feedback-type-option:hover,
    .ddscore-feedback-type-option:active {
        transform: none;
    }

    .ddscore-credits-panel,
    .ddscore-credits-panel--closing {
        animation: none;
    }
}

.ddscore-header-actions {
    display: flex;
    align-items: center;
    gap: var(--dds-header-actions-gap);
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 0;
    flex-wrap: nowrap;
}

/* Credits + account controls (hidden whenever hamburger mode is active — same items only in .ddscore-nav-mobile). */
.ddscore-header-actions-account-bar {
    display: flex;
    align-items: center;
    gap: var(--dds-header-actions-gap);
    min-width: 0;
    flex-wrap: nowrap;
}

.ddscore-header-actions .ddscore-user-name {
    min-width: 0;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Outline chips in header share one padding + line-height so Logout matches Reports. */
.ddscore-header-actions a.ddscore-btn.ddscore-btn-outline.ddscore-btn-sm {
    box-sizing: border-box;
    padding: 0.35rem 0.75rem;
    line-height: 1.2;
}

.ddscore-header-actions .ddscore-reports-nav-link {
    flex-wrap: nowrap;
    white-space: nowrap;
    align-self: center;
}

.ddscore-header-actions .ddscore-reports-nav-icon {
    flex-shrink: 0;
    line-height: 1;
}

/* Admin link in header */
.ddscore-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    background: var(--dds-accent-primary);
    border-color: var(--dds-accent-primary);
    color: white;
}

.ddscore-admin-link:hover {
    background: var(--dds-accent-primary-hover);
    border-color: var(--dds-accent-primary-hover);
    color: white;
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-btn);
}

.ddscore-admin-link:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-admin-link i {
    font-size: 0.9em;
}

/* Below 1400px: hamburger is the only chrome for account + credits + email — entire .ddscore-header-actions-account-bar
   is hidden so nothing duplicates .ddscore-nav-mobile (single source when the menu opens). */
@media (max-width: 1399px) {
    .ddscore-hamburger {
        display: flex !important;
    }

    .ddscore-header-actions-account-bar {
        display: none !important;
    }

    .ddscore-nav-mobile-credits {
        display: block;
    }
}

/* ── Credits dropdown ── */
.ddscore-credits {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dds-header-actions-gap);
}

/* Always-visible reports bar (left of the Credits toggle) */
.ddscore-credits-always {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--dds-text-secondary);
    white-space: nowrap;
    border-radius: 0.35rem;
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.ddscore-credits-always--highlight {
    padding: 0.1rem 0.3rem;
    margin: -0.1rem -0.3rem;
    background-color: color-mix(in srgb, var(--dds-accent-primary) 12%, transparent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--dds-accent-primary) 70%, transparent),
        0 0 18px color-mix(in srgb, var(--dds-accent-primary) 45%, transparent);
}

.ddscore-credits-always-label {
    font-weight: 600;
    color: var(--dds-text-secondary);
}

.ddscore-credits-always-bar {
    display: flex;
    width: 6.75rem; /* 50% longer than prior 4.5rem so each credit reads as a wider segment */
    height: 0.9rem; /* Match .ddscore-nav-link font-size (header Home Page cap height) */
    box-sizing: border-box;
    /* Track must read clearly against header shell (card-surface matched panel too closely). */
    background-color: color-mix(in srgb, var(--dds-border) 16%, var(--dds-bg-primary));
    border: 1px solid var(--dds-accent-primary); /* Same accent edge as .ddscore-flow-step.active */
    box-shadow: 0 0 0 1px var(--dds-accent-glow);
    border-radius: var(--dds-progress-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.ddscore-credits-always-bar-fill {
    height: 100%;
    background: var(--dds-accent-primary); /* Same fill as .ddscore-native-progress (accent-color) */
    border-radius: var(--dds-progress-fill-radius);
    transition: width 0.3s ease;
}

.ddscore-credits-always-bar-drop {
    height: 100%;
    background: var(--dds-accent-primary);
    animation: ddscore-credit-fade-half 1s ease forwards;
}

.ddscore-credits-always-bar-drop--vanish {
    animation: ddscore-credit-fade-out 2s ease forwards;
}

@keyframes ddscore-credit-fade-half {
    from { opacity: 1; }
    to   { opacity: 0.5; }
}

@keyframes ddscore-credit-fade-out {
    from { opacity: 0.5; }
    to   { opacity: 0; }
}

.ddscore-credits-always-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-credits-toggle {
    background: none;
    border: 1px solid var(--dds-border);
    border-radius: 0.4rem;
    color: var(--dds-text-secondary);
    font-size: 0.8rem;
    padding: 0.3rem 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s, border-color 0.15s, transform 0.2s ease;
    transform-origin: center;
}

.ddscore-credits-toggle:hover {
    color: var(--dds-text-primary);
    border-color: var(--dds-accent-primary);
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-tight);
}

.ddscore-credits-toggle:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
    box-shadow: none;
}

.ddscore-credits-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

.ddscore-credits-chevron--up {
    transform: rotate(180deg);
}

.ddscore-credits-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: var(--dds-bg-card);
    border: 1px solid var(--dds-border);
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    min-width: 21rem;
    max-width: min(28rem, calc(100vw - 1.5rem));
    box-shadow: var(--dds-shadow-lg);
    z-index: 100;
    transform-origin: top center;
    /* `both`: first keyframe applies on first paint (no one-frame flash), then hold end state. */
    animation: ddscore-credits-slide-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ddscore-credits-panel--closing {
    animation: ddscore-credits-slide-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes ddscore-credits-slide-in {
    from {
        opacity: 0;
        transform: translateY(-0.85rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ddscore-credits-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
}

/* One credit tier (Full reports, Startup pkg, etc). Header + progress bar stack.
   A disabled row (for example Full reports on a Free Trial account) is shown but
   muted, with a tooltip explaining why it cannot be used yet. */
.ddscore-credits-row {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    color: var(--dds-text-secondary);
    border-bottom: 1px solid color-mix(in srgb, var(--dds-border) 40%, transparent);
    border-radius: 0.45rem;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.ddscore-credits-row:last-of-type {
    border-bottom: none;
}

.ddscore-credits-row--disabled {
    opacity: 0.45;
    cursor: help;
}

.ddscore-credits-row--highlight {
    padding-inline: 0.45rem;
    margin-inline: -0.45rem;
    background-color: color-mix(in srgb, var(--dds-accent-primary) 10%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--dds-accent-primary) 58%, transparent),
        0 0 18px color-mix(in srgb, var(--dds-accent-primary) 35%, transparent);
}

.ddscore-credits-row-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}

.ddscore-credits-row-label {
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-credits-row-counts {
    font-size: 0.8rem;
    color: var(--dds-text-secondary);
    white-space: nowrap;
}

/* Progress bar: track + filled portion (shows remaining credits). Fill matches
   native <progress class="ddscore-native-progress"> (accent-color). */
.ddscore-credits-bar {
    display: flex;
    position: relative;
    height: 0.9rem; /* Match header credits bar / nav link weight */
    box-sizing: border-box;
    background-color: color-mix(in srgb, var(--dds-border) 16%, var(--dds-bg-primary));
    border: 1px solid var(--dds-accent-primary);
    box-shadow: 0 0 0 1px var(--dds-accent-glow);
    border-radius: var(--dds-progress-radius);
    overflow: hidden;
}

.ddscore-credits-bar-fill {
    height: 100%;
    background: var(--dds-accent-primary);
    border-radius: var(--dds-progress-fill-radius);
    transition: width 0.3s ease;
}

.ddscore-credits-bar-drop {
    height: 100%;
    background: var(--dds-accent-primary);
    animation: ddscore-credit-fade-half 1s ease forwards;
}

.ddscore-credits-bar-drop--vanish {
    animation: ddscore-credit-fade-out 2s ease forwards;
}

.ddscore-credits-row-paid {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--dds-accent-primary);
    white-space: nowrap;
}

.ddscore-credits-license {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--dds-accent-primary) 8%, var(--dds-bg-card));
    border: 1px solid color-mix(in srgb, var(--dds-border) 58%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dds-text-primary) 6%, transparent);
}

.ddscore-credits-license-kicker {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--dds-text-muted);
}

.ddscore-credits-license-name {
    min-width: 0;
    color: var(--dds-text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Periodic subscription: next monthly quota refresh (from GetQuota). */
.ddscore-credits-renewal {
    margin-top: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--dds-accent-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--dds-border) 50%, transparent);
    font-size: 0.76rem;
    color: var(--dds-text-secondary);
    line-height: 1.45;
}

.ddscore-credits-renewal-label {
    font-weight: 600;
    color: var(--dds-text-primary);
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ddscore-credits-renewal-body {
    margin: 0;
}

.ddscore-credits-renewal--admin-hint {
    background: color-mix(in srgb, var(--dds-text-muted) 10%, transparent);
    border-color: color-mix(in srgb, var(--dds-border) 65%, transparent);
}

/* No active DDScore plan: replaces credit rows + “Important pages” (not applicable). */
.ddscore-credits-no-license {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0;
    padding: 0.85rem 0.75rem 0.75rem;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--dds-accent-primary) 6%, var(--dds-bg-card));
    border: 1px solid color-mix(in srgb, var(--dds-border) 55%, transparent);
    font-size: 0.8rem;
    color: var(--dds-text-secondary);
    line-height: 1.45;
}

.ddscore-credits-no-license-visual {
    width: 3.35rem;
    height: 3.35rem;
    margin-bottom: 0.65rem;
    color: var(--dds-accent-secondary);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--dds-accent-primary) 42%, transparent));
}

.ddscore-credits-no-license-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ddscore-credits-no-license-svg-ring {
    fill: none;
    stroke: currentColor;
    stroke-opacity: 0.42;
    stroke-width: 1.35;
    stroke-dasharray: 3.2 2.8;
}

.ddscore-credits-no-license-svg-sheet {
    fill: color-mix(in srgb, var(--dds-accent-primary) 10%, transparent);
    stroke: currentColor;
    stroke-width: 1.35;
}

.ddscore-credits-no-license-svg-lines {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-opacity: 0.88;
}

.ddscore-credits-no-license-svg-slash {
    fill: none;
    stroke: color-mix(in srgb, var(--dds-text-muted) 88%, var(--dds-accent-primary));
    stroke-width: 2.35;
    stroke-linecap: round;
}

.ddscore-credits-no-license-label {
    font-weight: 600;
    color: var(--dds-text-primary);
    margin-bottom: 0.2rem;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}

.ddscore-credits-no-license-body {
    margin: 0;
    max-width: 22rem;
}

/* Informational "Important pages" panel (not a credit row). */
.ddscore-credits-info {
    margin-top: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--dds-accent-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--dds-border) 50%, transparent);
    border-radius: 0.25rem;
    font-size: 0.78rem;
    color: var(--dds-text-secondary);
    line-height: 1.45;
}

.ddscore-credits-info-label {
    font-weight: 600;
    color: var(--dds-text-primary);
    margin-bottom: 0.15rem;
}

.ddscore-credits-info-body {
    font-size: 0.78rem;
}

/* Outline CTA in credits panel: same surface tone as card inputs; hover/press from .ddscore-btn. */
.ddscore-credits-panel .ddscore-btn-outline:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 72%, transparent);
}

.ddscore-credits-panel .ddscore-btn-outline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 48%, transparent);
}

a.ddscore-btn.ddscore-credits-upgrade,
button.ddscore-btn.ddscore-credits-upgrade {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 0.75rem;
    text-align: center;
}

.ddscore-hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transform-origin: center;
    transition: transform 0.2s ease;
}

.ddscore-hamburger:hover {
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-hamburger:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dds-text-secondary);
    border-radius: 1px;
    transition: background 0.2s ease;
}

.ddscore-hamburger:hover span {
    background: var(--dds-text-primary);
}

/* Only in DOM when the hamburger is open (inside .ddscore-header). Right-aligned under the bar.
   Never exceed the visible viewport width: 100vw is often wider than the layout when a vertical scrollbar exists; prefer svw + safe-area. */
.ddscore-nav-mobile {
    --dds-nav-mobile-inset-start: max(var(--dds-main-padding-x), env(safe-area-inset-left, 0px));
    --dds-nav-mobile-inset-end: max(var(--dds-main-padding-x), env(safe-area-inset-right, 0px));
    --dds-nav-mobile-max-w: calc(100vw - var(--dds-nav-mobile-inset-start) - var(--dds-nav-mobile-inset-end));
    position: absolute;
    top: 100%;
    right: var(--dds-nav-mobile-inset-end);
    left: auto;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    width: min(19rem, var(--dds-nav-mobile-max-w));
    max-width: min(19rem, var(--dds-nav-mobile-max-w));
    min-width: 0;
    margin: 0;
    margin-top: 0.35rem;
    padding: 0.65rem 0.55rem;
    box-sizing: border-box;
    overflow-x: hidden;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border-light);
    border-radius: var(--dds-radius);
    box-shadow: var(--dds-shadow-lg);
}

@supports (width: 10svw) {
    .ddscore-nav-mobile {
        --dds-nav-mobile-max-w: calc(100svw - var(--dds-nav-mobile-inset-start) - var(--dds-nav-mobile-inset-end));
    }
}

/* Signed-in block at top of panel: email, Reports, Admin, Credits (bar + toggle on one row where space allows). */
.ddscore-nav-mobile-account-top {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0.55rem;
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-nav-mobile .ddscore-mobile-user-info {
    text-align: left;
    padding-bottom: 0.35rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--dds-border) 70%, transparent);
}

.ddscore-nav-mobile .ddscore-mobile-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dds-text-muted);
    word-break: break-all;
}

.ddscore-nav-mobile .ddscore-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
    text-decoration: none;
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-bg-input) 38%, var(--dds-bg-card));
    transform: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.ddscore-nav-mobile .ddscore-nav-link:hover,
.ddscore-nav-mobile .ddscore-nav-link:focus-visible {
    transform: none;
    color: var(--dds-text-primary);
    border-color: var(--dds-accent-primary);
    background: color-mix(in srgb, var(--dds-bg-card-hover) 45%, var(--dds-bg-card));
    box-shadow: 0 0 0 1px var(--dds-accent-glow);
    text-shadow: none;
}

.ddscore-nav-mobile .ddscore-nav-link:active {
    transform: none;
}

/* Second DDScoreCredits instance: shown only while hamburger mode is active (max-width: 1399px); header bar is hidden then. */
.ddscore-nav-mobile-credits {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.1rem;
}

@media (max-width: 1399px) {
    .ddscore-nav-mobile .ddscore-nav-mobile-credits {
        display: block;
    }
}

.ddscore-nav-mobile-credits .ddscore-credits {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.ddscore-nav-mobile-credits .ddscore-credits-always {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

.ddscore-nav-mobile-credits .ddscore-credits-always-bar {
    flex: 1 1 auto;
    width: auto;
    min-width: 2.75rem;
    max-width: 8rem;
    flex-shrink: 1;
}

.ddscore-nav-mobile-credits .ddscore-credits-toggle {
    flex: 0 0 auto;
}

.ddscore-nav-mobile-credits .ddscore-credits-panel,
.ddscore-nav-mobile-credits .ddscore-credits-panel--closing {
    z-index: 220;
    left: 0;
    right: 0;
    transform: none;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.ddscore-nav-mobile .ddscore-credits-always,
.ddscore-nav-mobile .ddscore-credits-toggle {
    min-width: 0;
    max-width: 100%;
}

/* Buttons */
.ddscore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--dds-radius-sm);
    font-family: var(--dds-font);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
    text-decoration: none;
    border: 1px solid var(--dds-accent-primary);
    transform-origin: center;
    background: transparent;
    color: var(--dds-accent-secondary);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ddscore-btn::before,
.ddscore-btn::after,
.ddscore-credits-toggle::before,
.ddscore-credits-toggle::after,
.ddscore-credits-upgrade::before,
.ddscore-credits-upgrade::after,
.ddscore-insights-url-chip-remove::before,
.ddscore-insights-url-chip-remove::after,
.ddscore-financial-year-selector-btn::before,
.ddscore-financial-year-selector-btn::after,
.ddscore-faq-toggle-btn::before,
.ddscore-faq-toggle-btn::after,
.ddscore-chat-toggle::before,
.ddscore-chat-toggle::after,
.ddscore-chat-example-btn::before,
.ddscore-chat-example-btn::after,
.ddscore-chat-send::before,
.ddscore-chat-send::after,
.ddscore-upsell-cta-btn::before,
.ddscore-upsell-cta-btn::after,
.ddscore-share-dialog-option::before,
.ddscore-share-dialog-option::after,
.ddscore-share-btn::before,
.ddscore-share-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.ddscore-credits-toggle,
.ddscore-credits-upgrade,
.ddscore-insights-url-chip-remove,
.ddscore-financial-year-selector-btn,
.ddscore-faq-toggle-btn,
.ddscore-chat-toggle,
.ddscore-chat-example-btn,
.ddscore-chat-send,
.ddscore-upsell-cta-btn,
.ddscore-share-dialog-option,
.ddscore-share-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ddscore-btn::after,
.ddscore-credits-toggle::after,
.ddscore-credits-upgrade::after,
.ddscore-insights-url-chip-remove::after,
.ddscore-financial-year-selector-btn::after,
.ddscore-faq-toggle-btn::after,
.ddscore-chat-toggle::after,
.ddscore-chat-example-btn::after,
.ddscore-chat-send::after,
.ddscore-upsell-cta-btn::after,
.ddscore-share-dialog-option::after,
.ddscore-share-btn::after {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 34%,
            color-mix(in srgb, var(--dds-accent-secondary) 58%, transparent) 45%,
            var(--dds-text-primary) 50%,
            color-mix(in srgb, var(--dds-accent-secondary) 58%, transparent) 55%,
            transparent 66%,
            transparent 100%
        ) top left / 220% 1px no-repeat,
        linear-gradient(
            270deg,
            transparent 0%,
            transparent 34%,
            color-mix(in srgb, var(--dds-accent-secondary) 58%, transparent) 45%,
            var(--dds-text-primary) 50%,
            color-mix(in srgb, var(--dds-accent-secondary) 58%, transparent) 55%,
            transparent 66%,
            transparent 100%
        ) bottom right / 220% 1px no-repeat;
    filter: drop-shadow(var(--dds-btn-weld-glow));
}

.ddscore-btn::before,
.ddscore-credits-toggle::before,
.ddscore-credits-upgrade::before,
.ddscore-insights-url-chip-remove::before,
.ddscore-financial-year-selector-btn::before,
.ddscore-faq-toggle-btn::before,
.ddscore-chat-toggle::before,
.ddscore-chat-example-btn::before,
.ddscore-chat-send::before,
.ddscore-upsell-cta-btn::before,
.ddscore-share-dialog-option::before,
.ddscore-share-btn::before {
    padding: 2px;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 46deg,
            color-mix(in srgb, var(--dds-accent-secondary) 76%, transparent) 66deg,
            var(--dds-text-primary) 92deg,
            color-mix(in srgb, var(--dds-accent-secondary) 76%, transparent) 118deg,
            transparent 148deg,
            transparent 360deg
        );
    -webkit-mask:
        linear-gradient(var(--dds-mask-opaque) 0 0) content-box,
        linear-gradient(var(--dds-mask-opaque) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    filter: drop-shadow(var(--dds-btn-weld-glow));
}

@media (hover: hover) {
    .ddscore-btn:hover:not(:disabled):not(.ddscore-btn-disabled-look)::after,
    .ddscore-credits-toggle:hover::after,
    .ddscore-credits-upgrade:hover::after,
    .ddscore-insights-url-chip-remove:hover::after,
    .ddscore-financial-year-selector-btn:hover:not(:disabled)::after,
    .ddscore-faq-toggle-btn:hover::after,
    .ddscore-chat-toggle:hover::after,
    .ddscore-chat-example-btn:hover:not(:disabled)::after,
    .ddscore-chat-send:hover:not(:disabled)::after,
    .ddscore-upsell-cta-btn:hover::after,
    .ddscore-share-dialog-option:hover::after,
    .ddscore-share-btn:hover::after {
        opacity: 1;
        animation: ddscore-btn-edge-weld var(--dds-btn-edge-weld-duration) linear infinite;
    }
}

.ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look)::before,
.ddscore-credits-toggle:active::before,
.ddscore-credits-upgrade:active::before,
.ddscore-insights-url-chip-remove:active::before,
.ddscore-financial-year-selector-btn:active:not(:disabled)::before,
.ddscore-faq-toggle-btn:active::before,
.ddscore-chat-toggle:active::before,
.ddscore-chat-example-btn:active:not(:disabled)::before,
.ddscore-chat-send:active:not(:disabled)::before,
.ddscore-upsell-cta-btn:active::before,
.ddscore-share-dialog-option:active::before,
.ddscore-share-btn:active::before {
    opacity: 1;
    animation: ddscore-btn-border-weld var(--dds-btn-press-weld-duration) linear 1;
}

.ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look),
.ddscore-credits-toggle:active,
.ddscore-credits-upgrade:active,
.ddscore-insights-url-chip-remove:active,
.ddscore-financial-year-selector-btn:active:not(:disabled),
.ddscore-faq-toggle-btn:active,
.ddscore-chat-toggle:active,
.ddscore-chat-example-btn:active:not(:disabled),
.ddscore-chat-send:active:not(:disabled),
.ddscore-upsell-cta-btn:active,
.ddscore-share-dialog-option:active,
.ddscore-share-btn:active {
    background: var(--dds-btn-active-bg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dds-accent-secondary) 65%, transparent), 0 0 1.2rem color-mix(in srgb, var(--dds-accent-secondary) 28%, transparent);
}

@keyframes ddscore-btn-edge-weld {
    from {
        background-position: 115% top, -15% bottom;
    }
    to {
        background-position: -15% top, 115% bottom;
    }
}

@keyframes ddscore-btn-border-weld {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.ddscore-btn-primary {
    background: transparent;
    border-color: var(--dds-accent-primary);
    color: var(--dds-accent-secondary);
}

.ddscore-btn-primary:hover:not(:disabled):not(.ddscore-btn-disabled-look) {
    background: var(--dds-btn-hover-bg);
    border-color: var(--dds-accent-primary);
    color: var(--dds-text-primary);
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-btn);
}

.ddscore-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.ddscore-btn-outline {
    background: transparent;
    color: var(--dds-accent-secondary);
    border: 1px solid var(--dds-accent-primary);
}

.ddscore-btn-outline:hover:not(:disabled) {
    background: var(--dds-btn-hover-bg);
    color: var(--dds-text-primary);
    border-color: var(--dds-accent-primary);
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-btn);
}

.ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look) {
    transform: translateY(1px) scale(var(--dds-btn-active-scale));
}

.ddscore-btn-disabled-look {
    opacity: 0.5;
    filter: grayscale(0.25);
    cursor: pointer;
    transform: none;
}

.ddscore-btn-disabled-look:hover {
    background: var(--dds-accent-primary);
    transform: none;
}

/* Outline on dark header: subtle chip so it matches Logout / Login. */
.ddscore-header .ddscore-btn-outline:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 42%, transparent);
}

.ddscore-header .ddscore-btn-outline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 28%, transparent);
    border-color: var(--dds-accent-secondary);
    box-shadow: var(--dds-hover-glow-btn);
}

/* Hamburger: same chip + border + hover glow as header outline buttons (Reports / Logout). */
.ddscore-header .ddscore-hamburger {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 2.5rem;
    min-height: 2.05rem;
    border: 1px solid var(--dds-accent-primary);
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-bg-input) 42%, transparent);
    padding: 0.35rem 0.45rem;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ddscore-header .ddscore-hamburger:hover {
    background: color-mix(in srgb, var(--dds-bg-input) 28%, transparent);
    border-color: var(--dds-accent-secondary);
    box-shadow: var(--dds-hover-glow-btn);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-header .ddscore-hamburger:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-header .ddscore-hamburger:focus-visible {
    outline: 2px solid var(--dds-accent-secondary);
    outline-offset: 2px;
}

/* Outline on cards (e.g. Clear): same resting surface as inputs / dropzone tone. */
.ddscore-card .ddscore-btn-outline:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 72%, transparent);
}

.ddscore-card .ddscore-btn-outline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 48%, transparent);
}

.ddscore-card .ddscore-btn-outline:disabled {
    background: color-mix(in srgb, var(--dds-bg-input) 52%, transparent);
    border-color: var(--dds-border);
    color: var(--dds-text-muted);
    cursor: not-allowed;
    opacity: 0.82;
}

.ddscore-btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: var(--dds-radius);
    width: 100%;
    justify-content: center;
    margin-top: 1.5rem;
}

/* Content width + centered in flex column (overrides .ddscore-btn-lg width) */
.ddscore-btn-content-fit {
    align-self: center;
    width: fit-content;
    min-width: unset;
}

.ddscore-analyze-material-btn > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1;
}

.ddscore-analyze-material-btn .fa {
    line-height: 1;
}

/* Credits exhausted modal uses the shared DDScore modal system (see Methodology modal).
   Keep only content-specific styles here. */

.ddscore-modal-backdrop--centered:has(> .ddscore-modal) {
    justify-content: center;
}

.ddscore-modal-backdrop--centered:has(> .ddscore-modal) > .ddscore-modal {
    margin: 0 auto;
}

.ddscore-credits-exhausted-modal .ddscore-modal-body {
    display: grid;
    grid-template-columns: 176px 1fr;
    gap: 1.25rem;
    align-items: center;
}

.ddscore-credits-exhausted-modal .ddscore-modal-footer--actions {
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Override the generic info-modal CTA sizing (which is intentionally huge). */
.ddscore-credits-exhausted-modal .ddscore-modal-footer--actions .ddscore-btn {
    min-width: 10.5rem;
    padding: 0.55rem 1.25rem;
    font-size: 0.95rem;
}

.ddscore-credits-exhausted-modal .ddscore-modal-footer--actions .ddscore-btn-primary {
    box-shadow: 0 10px 35px color-mix(in srgb, var(--dds-accent-primary) 22%, transparent);
}

.ddscore-credits-exhausted-modal .ddscore-modal-close {
    min-width: unset;
    padding: 0;
    font-size: 1.25rem;
}

.ddscore-credits-exhausted-modal .ddscore-modal-close:hover {
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-credits-exhausted-modal .ddscore-modal-close:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-credits-exhausted-icon {
    width: 176px;
    height: 176px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at 35% 30%,
            color-mix(in srgb, var(--dds-accent-secondary) 22%, transparent) 0%,
            transparent 62%
        ),
        radial-gradient(
            circle at 50% 65%,
            color-mix(in srgb, var(--dds-accent-primary) 26%, transparent) 0%,
            transparent 60%
        ),
        color-mix(in srgb, var(--dds-bg-secondary) 70%, var(--dds-bg-primary));
    border: 1px solid var(--dds-border);
    box-shadow: 0 18px 55px color-mix(in srgb, var(--dds-bg-primary) 70%, transparent);
    animation: ddscore-credits-icon-float 2.6s ease-in-out infinite;
}

.ddscore-credits-exhausted-icon i {
    font-size: 4.4rem;
    color: var(--dds-accent-secondary);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--dds-accent-primary) 35%, transparent));
    animation: ddscore-credits-icon-wiggle 2.6s ease-in-out infinite;
}

@keyframes ddscore-credits-icon-float {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-7px) scale(1.02);
    }
}

@keyframes ddscore-credits-icon-wiggle {
    0%,
    100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-6deg);
    }
    40% {
        transform: rotate(6deg);
    }
    60% {
        transform: rotate(-3deg);
    }
    80% {
        transform: rotate(3deg);
    }
}

.ddscore-credits-exhausted-copy h4 {
    margin: 0 0 0.35rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dds-text-primary);
}

.ddscore-credits-exhausted-kicker {
    margin: 0 0 0.35rem;
    color: var(--dds-accent-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ddscore-credits-exhausted-copy p {
    margin: 0;
    color: var(--dds-text-secondary);
    line-height: 1.6;
}

.ddscore-credits-exhausted-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.45rem;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--dds-accent-primary) 16%, transparent),
            color-mix(in srgb, var(--dds-accent-secondary) 10%, transparent)
        );
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 42%, var(--dds-border));
    box-shadow: inset 0 0 1rem color-mix(in srgb, var(--dds-bg-primary) 48%, transparent);
}

.ddscore-credits-exhausted-product span {
    color: var(--dds-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.ddscore-credits-exhausted-product strong {
    color: var(--dds-text-primary);
    font-size: 0.95rem;
    text-align: right;
}

@media (max-width: 520px) {
    .ddscore-credits-exhausted-modal .ddscore-modal-body {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 0.75rem;
        padding-top: 1rem;
        padding-bottom: 0.85rem;
    }

    .ddscore-credits-exhausted-icon {
        width: 4.75rem;
        height: 4.75rem;
    }

    .ddscore-credits-exhausted-icon i {
        font-size: 2.15rem;
    }

    .ddscore-credits-exhausted-copy h4 {
        font-size: 1rem;
    }

    .ddscore-credits-exhausted-copy p {
        font-size: 0.86rem;
        line-height: 1.38;
    }

    .ddscore-credits-exhausted-product {
        margin-top: 0.6rem;
        padding: 0.55rem 0.7rem;
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }

    .ddscore-credits-exhausted-product strong {
        text-align: center;
    }

    .ddscore-credits-exhausted-modal .ddscore-modal-footer--actions {
        justify-content: center;
        gap: 0.45rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .ddscore-credits-exhausted-modal .ddscore-modal-footer--actions .ddscore-btn {
        width: 100%;
        min-width: unset;
        padding-top: 0.42rem;
        padding-bottom: 0.42rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-credits-exhausted-icon,
    .ddscore-credits-exhausted-icon i {
        animation: none;
        transform: none;
    }
}

.ddscore-btn-icon {
    background: none;
    border: none;
    color: var(--dds-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.9rem;
    transition: color 0.2s ease, transform 0.2s ease, filter 0.2s ease;
    transform-origin: center;
}

.ddscore-btn-icon:hover {
    color: var(--dds-score-poor);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-btn-icon:active:not(:disabled) {
    transform: translateY(1px) scale(var(--dds-btn-active-scale));
    transition-duration: 0.08s;
}

/* Hero */
.ddscore-hero {
    text-align: center;
    padding: var(--dds-hero-padding);
    /* Solid base matches page bg so the gradient never leaves a 1px colour seam at the bottom edge. */
    background-color: var(--dds-bg-primary);
    background-image: linear-gradient(
        180deg,
        var(--dds-bg-secondary) 0%,
        color-mix(in srgb, var(--dds-bg-secondary) 55%, var(--dds-bg-primary)) 38%,
        color-mix(in srgb, var(--dds-bg-secondary) 18%, var(--dds-bg-primary)) 72%,
        var(--dds-bg-primary) 100%
    );
    position: relative;
    overflow: hidden;
    /* Full viewport width so gradient + glow meet body background with no side seam */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
}

@supports (width: 100dvw) {
    .ddscore-hero {
        width: 100dvw;
        margin-left: calc(50% - 50dvw);
    }
}

.ddscore-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--dds-layout-max-width);
    margin-inline: auto;
    box-sizing: border-box;
}

/* vw fallback when container query units are unavailable; cqi tracks .ddscore-main inline size. */
.ddscore-hero-title {
    max-width: 100%;
    font-size: clamp(1.0625rem, 0.62rem + 4.2vw, var(--dds-hero-title-size));
    font-weight: 650;
    line-height: 1.2;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-hero-title {
        font-size: clamp(1.0625rem, 0.62rem + 8.25cqi, var(--dds-hero-title-size));
    }
}

.ddscore-hero-accent {
    color: var(--dds-accent-secondary);
}

/* Second line of dashboard hero: smaller than main headline */
.ddscore-hero-title .ddscore-hero-accent {
    font-size: var(--dds-hero-accent-size);
    font-weight: 600;
    line-height: 1.35;
}

/* Dashboard landing: tight stack of headline + accent (no extra line gap from br) */
.ddscore-dashboard-hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 1rem;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}

.ddscore-dashboard-hero-primary {
    margin-bottom: 0.35rem;
    text-align: center;
}

.ddscore-dashboard-hero-title .ddscore-hero-headline {
    display: block;
    line-height: 1.15;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: keep-all;
}

.ddscore-dashboard-hero-title .ddscore-hero-accent {
    display: block;
    margin-top: 0;
    line-height: 1.2;
}

.ddscore-hero-subtitle {
    font-size: var(--dds-hero-subtitle-size);
    color: var(--dds-text-secondary);
    max-width: min(600px, 100%);
    margin: 0 auto;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Dashboard landing: subtitle matches headline width (not a narrow column) */
.ddscore-dashboard-hero-subtitle {
    max-width: var(--dds-layout-max-width);
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.45;
}

.ddscore-hero-founder-tagline {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.85rem;
    padding: 0;
    font-weight: 500;
    color: var(--dds-text-secondary);
}

.ddscore-dashboard-hero-tagline {
    max-width: min(52rem, 100%);
    font-size: clamp(1.05rem, 3vw, 1.55rem);
    line-height: 1.24;
    text-align: center;
    text-wrap: balance;
}

/* Dashboard founder hero (marketing /for-founder style: stagger + gradient shimmer on key letters) */
.ddscore-hero-title--founder {
    max-width: min(52rem, 100%);
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.2rem, 3.6vw, var(--dds-hero-title-size));
    line-height: 1.22;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-hero-title--founder {
        font-size: clamp(1.2rem, 0.55rem + 7.5cqi, var(--dds-hero-title-size));
    }
}

.ddscore-hero-founder-line {
    display: block;
}

/* Dashboard hero lines: entrance only, then static (no shimmer / no extra weight tricks). ~35% faster than prior 0.464s / 0.016s. */
.ddscore-hero-letters--one-shot .ddscore-hero-letter {
    animation: ddscore-hero-letter-appear calc(0.464s / 1.35) ease forwards;
    animation-delay: calc(0.016s / 1.35 * var(--i, 0));
    color: inherit;
    font-weight: inherit;
    background-image: none;
    -webkit-text-fill-color: inherit;
}

.ddscore-hero-letter {
    display: inline-block;
    opacity: 0;
    animation: ddscore-hero-letter-appear calc(0.464s / 1.35) ease forwards;
    animation-delay: calc(0.016s / 1.35 * var(--i, 0));
}

/* Motion-only emphasis: same fill as body text; glint via shadow / nudge (no gradient fill). */
.ddscore-hero-letter--spot {
    font-weight: 800;
    color: var(--dds-text-primary);
    animation-name: ddscore-hero-letter-appear, ddscore-logo-letter-glint;
    animation-duration: calc(0.464s / 1.35), calc(2.24s / 1.35);
    animation-timing-function: ease, ease-in-out;
    animation-delay: calc(0.016s / 1.35 * var(--i, 0)), calc(0.48s / 1.35 + 0.016s / 1.35 * var(--i, 0));
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
}

.ddscore-hero-letter--accent {
    font-weight: 800;
    background-image: linear-gradient(
        105deg,
        var(--dds-accent-secondary) 0%,
        var(--dds-accent-primary) 40%,
        color-mix(in srgb, var(--dds-accent-secondary) 55%, var(--dds-accent-primary)) 72%,
        var(--dds-accent-secondary) 100%
    );
    background-size: 240% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation-name: ddscore-hero-letter-appear, ddscore-hero-letter-shimmer;
    animation-duration: calc(0.464s / 1.35), calc(4.4s / 1.35);
    animation-timing-function: ease, ease-in-out;
    animation-delay: calc(0.016s / 1.35 * var(--i, 0)), calc(0.496s / 1.35 + 0.016s / 1.35 * var(--i, 0));
    animation-fill-mode: forwards, none;
    animation-iteration-count: 1, infinite;
}

@keyframes ddscore-hero-letter-appear {
    from {
        opacity: 0;
        transform: translate3d(0, 0.2em, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes ddscore-hero-letter-shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes ddscore-logo-letter-glint {
    0%,
    100% {
        text-shadow: none;
        transform: translate3d(0, 0, 0);
    }

    50% {
        text-shadow: 0 0 0.65rem color-mix(in srgb, var(--dds-accent-secondary) 38%, transparent);
        transform: translate3d(0, -0.04em, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-hero-letter,
    .ddscore-hero-letter--accent,
    .ddscore-hero-letter--spot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        background-position: 50% 50% !important;
        text-shadow: none !important;
    }

    .ddscore-hero-letter--accent {
        color: var(--dds-accent-secondary) !important;
        -webkit-text-fill-color: var(--dds-accent-secondary) !important;
        background-image: none !important;
    }
}

@media print {
    .ddscore-hero-letter,
    .ddscore-hero-letter--accent,
    .ddscore-hero-letter--spot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .ddscore-hero-letter--accent {
        color: var(--dds-text-primary) !important;
        -webkit-text-fill-color: var(--dds-text-primary) !important;
        background-image: none !important;
    }
}

/* Cards (+25% outer spacing vs prior defaults)
   Top accent: same idea as marketing homepage .segment-card::before */
.ddscore-card {
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    padding: var(--dds-card-padding);
    margin: var(--dds-card-margin-y) 0;
    box-shadow: var(--dds-shadow);
    position: relative;
    overflow: hidden;
}

.ddscore-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dds-card-accent-line-height);
    background: var(--dds-card-accent-line);
    pointer-events: none;
    z-index: 1;
}

/* Floating help tooltips are viewport-positioned, but the source chip still lives inside
   cards. Base .ddscore-card uses overflow:hidden for the accent bar; let help chips
   render outside the card while the JS keeps the tooltip inside the viewport. */
.ddscore-card:has(.ddscore-field-hint-wrap),
.ddscore-card:has(.ddscore-gauge-with-help) {
    overflow: visible;
}

.ddscore-card-title {
    font-family: var(--dds-heading-font-family);
    font-size: 1.28rem;
    font-weight: var(--dds-heading-font-weight);
    margin-bottom: 1.5rem;
}

/* Card / panel titles: primary text on dark cards (no segment chip) */
.ddscore-card > :is(h1, h2, h3).ddscore-card-title:first-child,
.ddscore-financial-title-row .ddscore-card-title,
.ddscore-verify-company-profile-title-row .ddscore-card-title,
.ddscore-methodology-box > h3:first-child,
.ddscore-report-download-title.ddscore-card-title {
    position: relative;
    z-index: 2;
    color: var(--dds-text-primary);
    background: none;
    background-image: none;
    border: none;
    box-sizing: border-box;
    box-shadow: none;
}

.ddscore-card > :is(h1, h2, h3).ddscore-card-title:first-child {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0 0 1.25rem;
    border-radius: 0;
    font-weight: var(--dds-heading-font-weight);
    letter-spacing: normal;
    box-decoration-break: unset;
    -webkit-box-decoration-break: unset;
}

.ddscore-dashboard-start-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ddscore-dashboard-start-title-row .ddscore-card-title {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .ddscore-dashboard-start-title-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ddscore-dashboard-start-title {
        text-align: center;
    }
}

@media (min-width: 641px) {
    .ddscore-dashboard-start-title {
        text-align: left;
    }
}

.ddscore-card-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ddscore-dashboard-hero-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.ddscore-dashboard-hero-title-row .ddscore-dashboard-hero-title {
    flex: 0 1 auto;
    margin-bottom: 0;
    min-width: 0;
}

.ddscore-dashboard-how-works-mobile {
    display: none;
}

/* Dropzone */
.ddscore-dropzone {
    border: 2px dashed var(--dds-border-light);
    border-radius: var(--dds-radius);
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    cursor: pointer;
}

.ddscore-dropzone:hover {
    border-color: var(--dds-accent-primary);
    background: var(--dds-accent-glow);
}

.ddscore-dropzone.ddscore-dropzone--active {
    border-color: var(--dds-accent-primary);
    background: var(--dds-accent-glow);
    box-shadow: 0 0 0 1px var(--dds-accent-primary);
}

.ddscore-dropzone-content {
    position: relative;
    z-index: 2;
}

.ddscore-dropzone-content .ddscore-field-hint-wrap,
.ddscore-dropzone-content .ddscore-field-hint-chip,
.ddscore-dropzone-content .ddscore-dropzone-mobile-hint-row {
    position: relative;
    z-index: 2;
}

/* Verification & analysis progress layout */
.ddscore-main:has(.ddscore-verify-hero) {
    max-width: min(
        calc(100vw - (var(--dds-main-padding-x) * 2)),
        78.6rem
    );
}

.ddscore-verify-hero {
    padding: 2rem 1rem 1.5rem;
}

.ddscore-verify-hero-title {
    max-width: 100%;
    font-size: clamp(1.05rem, 0.48rem + 3.6vw, 1.8rem);
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-verify-hero-title {
        font-size: clamp(1.05rem, 0.48rem + 6.75cqi, 1.8rem);
    }
}

.ddscore-verify-product-block {
    margin-top: 1rem;
}

.ddscore-verify-website-block {
    margin-top: 1rem;
}

.ddscore-verify-website-url-wrap.ddscore-insights-editor-wrap {
    min-height: 2.75rem;
}

.ddscore-key-person-list {
    list-style: disc;
    margin: 0.75rem 0 0 1.25rem;
    padding: 0;
    color: var(--dds-text-primary);
}

.ddscore-key-person-list li {
    margin-bottom: 0.35rem;
}

.ddscore-verify-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin: 2rem 0;
}

.ddscore-verify-action-btn {
    margin-top: 0;
    width: auto;
    justify-content: center;
}

.ddscore-verify-actions .ddscore-verify-action-btn.ddscore-btn-outline:not(:disabled),
.ddscore-verify-actions .ddscore-verify-action-btn.ddscore-btn-primary:not(:disabled) {
    background: color-mix(in srgb, var(--dds-bg-input) 72%, transparent);
}

.ddscore-verify-narrow {
    max-width: 600px;
    margin: 2rem auto;
}

.ddscore-verify-center {
    text-align: center;
}

.ddscore-verify-spinner {
    margin: 0 auto 1rem;
}

.ddscore-verify-error {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    max-width: 900px;
    margin: 0 auto 1rem;
}

.ddscore-verify-error p {
    margin: 0;
}

.ddscore-card.ddscore-material-context-over {
    max-width: 900px;
    margin: 0 auto 1.25rem;
    border: 1px solid color-mix(in srgb, var(--dds-score-poor) 72%, var(--dds-border));
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--dds-rec-red-bg) 88%, var(--dds-bg-card-surface)) 0%,
            var(--dds-bg-card-surface) 52%
        );
}

.ddscore-card.ddscore-material-context-over::before {
    background: linear-gradient(90deg, var(--dds-score-poor), transparent);
}

.ddscore-material-context-over-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ddscore-material-context-over-icon {
    color: var(--dds-score-poor);
    font-size: 1.5rem;
    line-height: 1.2;
}

.ddscore-material-context-over-title {
    margin-bottom: 0.25rem;
}

.ddscore-material-context-over-metric {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.ddscore-material-context-over-body {
    margin-bottom: 1rem;
}

.ddscore-material-context-over-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ddscore-material-context-trim-note {
    margin-top: 0.75rem;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
}

.ddscore-progress-card {
    width: 100%;
    max-width: 90rem;
    margin: 2.5rem auto;
}

@media (min-width: 769px) {
    .ddscore-main:has(.ddscore-progress-card) {
        max-width: min(calc(100vw - (var(--dds-main-padding-x) * 2)), 92rem);
    }
}

.ddscore-progress-hero {
    padding: 2rem 1rem 1.5rem;
}

.ddscore-progress-hero-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    max-width: 100%;
    margin-bottom: 0.75rem;
}

.ddscore-verify-hero-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: 0.75rem;
}

.ddscore-progress-hero .ddscore-progress-hero-title {
    max-width: 100%;
    font-size: clamp(1.1rem, 0.55rem + 3.8vw, 1.85rem);
    font-weight: var(--dds-heading-font-weight);
    letter-spacing: var(--dds-heading-letter-spacing);
    line-height: 1.25;
    margin-bottom: 0.75rem;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.ddscore-progress-hero-title-row .ddscore-progress-hero-title {
    margin-bottom: 0;
}

.ddscore-verify-hero-title-row .ddscore-verify-hero-title {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

@supports (font-size: 1cqi) {
    .ddscore-progress-hero .ddscore-progress-hero-title {
        font-size: clamp(1.1rem, 0.55rem + 6.5cqi, 1.85rem);
    }
}

.ddscore-progress-hero .ddscore-progress-hero-title .ddscore-hero-accent {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
    color: var(--dds-accent-secondary);
}

/* "for" text before company name - EXACT same style as main title, just white color */
.ddscore-progress-hero .ddscore-progress-hero-title span:not(.ddscore-hero-accent) {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: 1.2;
    color: var(--dds-text-primary);
}

.ddscore-progress-hero .ddscore-hero-subtitle {
    width: 100%;
    max-width: min(76rem, 100%);
    font-size: 1.05rem;
    line-height: 1.55;
    overflow-wrap: normal;
    text-wrap: nowrap;
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .ddscore-progress-hero .ddscore-hero-subtitle {
        max-width: min(600px, 100%);
        overflow-wrap: break-word;
        text-wrap: balance;
        white-space: normal;
    }
}

.ddscore-progress-spinner {
    margin: 0 auto 1rem;
}

.ddscore-dropzone-icon {
    font-size: 3rem;
    color: var(--dds-accent-primary);
    margin-bottom: 1rem;
}

.ddscore-dropzone-text {
    color: var(--dds-text-primary);
    margin-bottom: 0.5rem;
}

.ddscore-dropzone-hint {
    color: var(--dds-text-muted);
    font-size: 0.85rem;
}

.ddscore-dropzone-mobile-hint-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: max-content;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dds-text-muted);
    font-family: var(--dds-font);
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: nowrap;
    cursor: default;
}

.ddscore-dropzone-mobile-hint-row:hover,
.ddscore-dropzone-mobile-hint-row:focus-visible {
    color: var(--dds-accent-secondary);
}

.ddscore-field-hint-chip--with-label {
    width: auto;
    min-width: 0;
    height: auto;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
}

.ddscore-field-hint-chip--with-label:hover,
.ddscore-field-hint-chip--with-label:focus-visible {
    background: transparent;
    color: var(--dds-accent-secondary);
    transform: none;
}

.ddscore-field-hint-label {
    display: inline-block;
    line-height: inherit;
}

.ddscore-file-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Uploaded files */
.ddscore-uploaded-files {
    margin-top: 1.5rem;
}

.ddscore-uploaded-files h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--dds-text-secondary);
}

.ddscore-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.7rem 0.8rem;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--dds-bg-card-hover) 18%, var(--dds-bg-input)) 0%,
            var(--dds-bg-input) 100%
        );
    border: 1px solid color-mix(in srgb, var(--dds-border-light) 55%, transparent);
    border-radius: var(--dds-radius-sm);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dds-text-primary) 5%, transparent),
        0 0.55rem 1.35rem color-mix(in srgb, #000 14%, transparent);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.ddscore-file-item i:first-child {
    flex: 0 0 auto;
    width: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    line-height: 1;
    color: color-mix(in srgb, var(--dds-accent-primary) 88%, var(--dds-text-primary));
    text-align: center;
}

.ddscore-file-item--uploaded {
    border-color: color-mix(in srgb, var(--dds-accent-primary) 34%, var(--dds-border));
}

.ddscore-file-item--waiting {
    border-color: color-mix(in srgb, var(--dds-border-light) 70%, transparent);
}

.ddscore-file-item--uploading {
    border-color: color-mix(in srgb, var(--dds-accent-primary) 52%, var(--dds-border));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--dds-text-primary) 7%, transparent),
        0 0.7rem 1.55rem color-mix(in srgb, #000 16%, transparent),
        0 0 1.25rem color-mix(in srgb, var(--dds-accent-primary) 9%, transparent);
}

.ddscore-file-item--failed {
    border-color: color-mix(in srgb, var(--dds-score-poor) 62%, var(--dds-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--dds-score-poor) 9%, var(--dds-bg-input)) 0%,
            var(--dds-bg-input) 100%
        );
}

.ddscore-file-item--removing {
    opacity: 0.68;
    pointer-events: none;
}

.ddscore-file-name-stack {
    display: flex;
    align-items: center;
    align-self: center;
    min-width: 0;
    flex: 2 1 0;
    gap: 0.75rem;
}

.ddscore-file-name {
    min-width: 0;
    color: var(--dds-text-primary);
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddscore-file-size {
    color: var(--dds-text-muted);
    font-size: 0.78rem;
    line-height: 1.2;
    margin-left: auto;
}

.ddscore-file-upload-progress-wrap {
    display: grid;
    flex: 0 1 clamp(8.5rem, 14vw, 14rem);
    min-width: 5.8rem;
    max-width: 16rem;
    gap: 0.2rem;
}

.ddscore-file-upload-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.ddscore-file-upload-status,
.ddscore-file-upload-percent {
    color: var(--dds-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
    text-transform: uppercase;
}

.ddscore-file-upload-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddscore-file-item--failed .ddscore-file-upload-progress-wrap {
    flex: 1 1 clamp(18rem, 34vw, 34rem);
    max-width: min(44rem, 56%);
}

.ddscore-file-item--failed .ddscore-file-upload-progress-head {
    align-items: flex-start;
}

.ddscore-file-item--failed .ddscore-file-upload-status {
    white-space: normal;
    text-overflow: clip;
    text-transform: none;
}

.ddscore-file-item--waiting .ddscore-file-upload-status {
    text-transform: none;
}

.ddscore-file-upload-percent {
    color: color-mix(in srgb, var(--dds-accent-primary) 84%, var(--dds-text-primary));
    font-variant-numeric: tabular-nums;
}

.ddscore-file-upload-progress.ddscore-native-progress {
    height: 0.42rem;
}

.ddscore-file-upload-progress--waiting {
    opacity: 0.76;
}

.ddscore-file-upload-progress--waiting::-webkit-progress-value,
.ddscore-file-upload-progress--removing::-webkit-progress-value {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-text-muted) 42%, var(--dds-bg-secondary)) 0%,
            color-mix(in srgb, var(--dds-text-muted) 60%, var(--dds-border-light)) 100%
        );
}

.ddscore-file-upload-progress--waiting::-moz-progress-bar,
.ddscore-file-upload-progress--removing::-moz-progress-bar {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-text-muted) 42%, var(--dds-bg-secondary)) 0%,
            color-mix(in srgb, var(--dds-text-muted) 60%, var(--dds-border-light)) 100%
        );
}

.ddscore-file-upload-progress--done::-webkit-progress-value {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-accent-primary) 72%, var(--dds-bg-secondary)) 0%,
            var(--dds-accent-primary) 58%,
            color-mix(in srgb, var(--dds-accent-secondary) 78%, var(--dds-accent-primary)) 100%
        );
}

.ddscore-file-upload-progress--done::-moz-progress-bar {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-accent-primary) 72%, var(--dds-bg-secondary)) 0%,
            var(--dds-accent-primary) 58%,
            color-mix(in srgb, var(--dds-accent-secondary) 78%, var(--dds-accent-primary)) 100%
        );
}

.ddscore-file-upload-progress--failed::-webkit-progress-value {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-score-poor) 78%, var(--dds-bg-secondary)) 0%,
            var(--dds-score-poor) 100%
        );
}

.ddscore-file-upload-progress--failed::-moz-progress-bar {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-score-poor) 78%, var(--dds-bg-secondary)) 0%,
            var(--dds-score-poor) 100%
        );
}

.ddscore-file-remove-btn {
    flex: 0 0 auto;
}

@media (max-width: 680px) {
    .ddscore-file-item {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.55rem 0.7rem;
        padding: 0.8rem;
    }

    .ddscore-file-upload-progress-wrap {
        grid-column: 2 / 3;
        width: min(100%, 9rem);
        min-width: 0;
        max-width: 9rem;
    }

    .ddscore-file-item--failed .ddscore-file-upload-progress-wrap {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 100%;
    }

    .ddscore-file-upload-progress-head {
        gap: 0.5rem;
    }
}

/* Input fields */
.ddscore-input,
.ddscore-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--dds-bg-input);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    color: var(--dds-text-primary);
    font-family: var(--dds-font);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.ddscore-input:focus,
.ddscore-textarea:focus {
    outline: none;
    border-color: var(--dds-accent-primary);
    box-shadow: 0 0 0 3px var(--dds-accent-glow);
}

.ddscore-textarea {
    resize: vertical;
    min-height: 100px;
}

.ddscore-input::placeholder,
.ddscore-textarea::placeholder {
    color: var(--dds-text-placeholder);
    opacity: 1;
}

.ddscore-input::-moz-placeholder,
.ddscore-textarea::-moz-placeholder {
    color: var(--dds-text-placeholder);
    opacity: 1;
}

/* Browser autofill: keep the dark themed background and text colour instead of
   the default white/yellow Chrome/Edge autofill rendering. */
.ddscore-input:-webkit-autofill,
.ddscore-input:-webkit-autofill:hover,
.ddscore-input:-webkit-autofill:focus,
.ddscore-input:-webkit-autofill:active,
.ddscore-textarea:-webkit-autofill,
.ddscore-textarea:-webkit-autofill:hover,
.ddscore-textarea:-webkit-autofill:focus,
.ddscore-textarea:-webkit-autofill:active {
    -webkit-text-fill-color: var(--dds-text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--dds-bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--dds-bg-input) inset !important;
    caret-color: var(--dds-text-primary);
    transition: background-color 0s 600000s, color 0s 600000s;
}

/* Additional Information: detected links as chips + mirror highlight under transparent textarea */
.ddscore-insights-url-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.ddscore-insights-url-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.35rem 0.2rem 0.5rem;
    border-radius: var(--dds-radius-sm);
    background: var(--dds-accent-glow);
    border: 1px solid var(--dds-border);
    color: var(--dds-accent-secondary);
    font-size: 0.8rem;
}

.ddscore-insights-url-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(280px, 70vw);
}

.ddscore-insights-url-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: none;
    border-radius: var(--dds-radius-sm);
    background: var(--dds-accent-primary);
    color: white;
    cursor: pointer;
    transition: background 0.2s;
}

.ddscore-insights-url-chip-remove:hover {
    background: var(--dds-accent-primary-hover);
}

/* Dashboard: company websites — Outlook-style chips + inline typing */
.ddscore-website-url-wrap.ddscore-insights-editor-wrap {
    padding: 0;
}

.ddscore-website-url-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.45rem;
    padding: 0.4rem 0.45rem;
    min-height: 2.75rem;
}

.ddscore-website-url-chip {
    max-width: 100%;
}

/* Outlook-style recipient chips: solid accent pill, light text, circular dismiss control */
.ddscore-website-url-chip.ddscore-insights-url-chip {
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.3rem 0.2rem 0.65rem;
    border-radius: 9999px;
    background: var(--dds-accent-primary);
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary-hover) 50%, var(--dds-bg-primary));
    color: var(--dds-text-primary);
    font-size: 0.82rem;
    font-weight: 500;
}

.ddscore-website-url-chip .ddscore-insights-url-chip-text {
    color: var(--dds-text-primary);
    max-width: min(320px, 72vw);
}

.ddscore-website-url-chip .ddscore-insights-url-chip-remove {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dds-text-primary) 16%, transparent);
    color: var(--dds-text-primary);
}

.ddscore-website-url-chip .ddscore-insights-url-chip-remove:hover,
.ddscore-website-url-chip .ddscore-insights-url-chip-remove:focus-visible {
    background: color-mix(in srgb, var(--dds-text-primary) 28%, transparent);
    color: var(--dds-text-primary);
}

.ddscore-field-hint .ddscore-inline-code {
    font-family: var(--dds-font);
    font-size: 0.82em;
    font-weight: 600;
    padding: 0.08rem 0.35rem;
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-accent-primary) 22%, var(--dds-bg-input));
    color: var(--dds-accent-secondary);
}

.ddscore-website-url-field-row {
    display: flex;
    flex: 1 1 12rem;
    align-items: center;
    gap: 0.35rem;
    min-width: 8rem;
    max-width: 100%;
}

.ddscore-website-url-invalid-indicator {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dds-score-poor);
    font-size: 1.15rem;
    line-height: 1;
    cursor: help;
}

.ddscore-website-url-inline-input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    border: none;
    margin: 0;
    background: transparent;
    color: var(--dds-text-primary);
    font-family: var(--dds-font);
    font-size: 0.9rem;
    line-height: 1.35;
    padding: 0.4rem 0.5rem;
    outline: none;
}

.ddscore-website-url-inline-input::placeholder {
    color: var(--dds-text-placeholder);
    opacity: 1;
}

.ddscore-website-url-inline-input::-moz-placeholder {
    color: var(--dds-text-placeholder);
    opacity: 1;
}

.ddscore-insights-editor-wrap {
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    background: var(--dds-bg-input);
    transition: border-color 0.2s;
}

.ddscore-insights-editor-wrap:focus-within {
    border-color: var(--dds-accent-primary);
    box-shadow: 0 0 0 3px var(--dds-accent-glow);
}

.ddscore-insights-mirror-stack {
    position: relative;
    display: block;
    min-height: 100px;
}

.ddscore-insights-mirror {
    position: absolute;
    inset: 0;
    padding: 0.75rem 1rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-family: var(--dds-font);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--dds-text-primary);
    pointer-events: none;
    z-index: 0;
}

.ddscore-insights-url-mirror {
    padding: 0.04em 0.22em;
    border-radius: var(--dds-radius-sm);
    background: var(--dds-accent-glow);
    border: 1px solid var(--dds-border-light);
    color: var(--dds-accent-secondary);
}

.ddscore-insights-textarea-over {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 100px;
    margin: 0;
    color: transparent;
    caret-color: var(--dds-accent-secondary);
    background: transparent;
    border: none;
    box-shadow: none;
    resize: vertical;
    overflow: auto;
    line-height: 1.5;
}

.ddscore-insights-textarea-over:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.ddscore-insights-textarea-over::placeholder {
    color: var(--dds-text-placeholder);
    opacity: 1;
}

.ddscore-insights-textarea-over::-moz-placeholder {
    color: var(--dds-text-placeholder);
    opacity: 1;
}

/* Sections */
.ddscore-url-section,
.ddscore-freetext-section {
    margin-top: 1.5rem;
}

.ddscore-url-section h3,
.ddscore-freetext-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ddscore-dashboard-field-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.45rem;
}

.ddscore-dashboard-field-title-row h3 {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.ddscore-dashboard-mobile-help {
    display: inline-flex;
    flex: 0 0 auto;
}

.ddscore-verify-mobile-help {
    display: none;
    flex: 0 0 auto;
}

.ddscore-dashboard-hero-mobile-help {
    display: none;
    flex: 0 0 auto;
    align-self: center;
}

.ddscore-dashboard-detail-help {
    display: none;
}

.ddscore-optional {
    color: var(--dds-text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.ddscore-field-hint {
    color: var(--dds-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    /* Double vertical rhythm between consecutive hint paragraphs (collapsed margin was one 0.75rem block). */
    .ddscore-field-hint + .ddscore-field-hint {
        margin-top: 1.5rem;
    }

    /* Pricing header: two bordered note boxes — gap was 1rem top on the second only. */
    .ddscore-pricing-sign-in-hint + .ddscore-pricing-env-hint {
        margin-top: 2rem;
    }

    /* Plan details panel: stacked note sections */
    .ddscore-pricing-note--in-panel + .ddscore-pricing-note--in-panel {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }
}

.ddscore-label-with-hint {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    min-width: 0;
}

.ddscore-label-with-hint .ddscore-label,
.ddscore-label-with-hint .ddscore-card-title {
    margin-bottom: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.ddscore-field-hint-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    align-self: center;
}

.ddscore-field-hint-chip {
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    margin: 0;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dds-accent-secondary);
    background: var(--dds-bg-secondary);
    font-size: 0.88rem;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    overflow: visible;
    transform-origin: center;
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ddscore-field-hint-chip:hover {
    background: var(--dds-accent-glow);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-field-hint-tooltip {
    position: absolute;
    z-index: 7900;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    box-sizing: border-box;
    min-width: 0;
    max-width: min(24rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    padding: 0.65rem 0.8rem;
    background: var(--dds-bg-secondary);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    box-shadow: var(--dds-shadow);
    color: var(--dds-text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    pointer-events: none;
    text-align: left;
    white-space: normal;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.08s ease;
}

.ddscore-field-hint-tooltip[data-ddscore-positioned="true"] {
    opacity: 1;
}

.ddscore-fin-computed {
    color: var(--dds-text-muted);
    font-size: 0.9rem;
}

.ddscore-financial-title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    min-width: 0;
}

.ddscore-financial-title-row .ddscore-card-title {
    margin-bottom: 0;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: 0;
}

.ddscore-person-kind-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dds-text-muted);
    margin-bottom: 0.15rem;
}

/* Methodology box — full content width (matches .ddscore-main / cards; avoid a narrow centered column) */
.ddscore-methodology-box {
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.ddscore-methodology-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dds-card-accent-line-height);
    background: var(--dds-card-accent-line);
    pointer-events: none;
    z-index: 1;
}

.ddscore-methodology-box > h3:first-child {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    margin-bottom: 0.65rem;
    border-radius: 0;
}

.ddscore-methodology-box h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ddscore-methodology-box p {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: none;
    margin: 0;
}

.ddscore-methodology-box p + p {
    margin-top: 0.65rem;
}

/* Report Problem Box (also uses .ddscore-card — top accent comes from .ddscore-card::before) */
.ddscore-report-problem-box {
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    text-align: center;
}

.ddscore-report-problem-box .ddscore-card-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: var(--dds-text-primary);
}

.ddscore-report-problem-intro {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.ddscore-report-problem-box .ddscore-btn {
    margin-top: 0.5rem;
}

/* Report Unavailable / Error Page */
.ddscore-report-unavailable {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.ddscore-report-unavailable-card {
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    box-shadow: var(--dds-shadow), 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 3.5rem 3rem 3rem;
    max-width: 540px;
    width: 100%;
    text-align: center;
}

.ddscore-report-unavailable-icon {
    font-size: 3rem;
    color: var(--dds-accent-secondary);
    margin-bottom: 1.5rem;
    opacity: 0.85;
}

.ddscore-report-unavailable-icon--error {
    color: var(--dds-score-red, #ef4444);
}

.ddscore-report-unavailable-title {
    font-family: var(--dds-heading-font-family);
    font-size: 1.65rem;
    font-weight: var(--dds-heading-font-weight);
    color: var(--dds-text-primary);
    margin: 0 0 0.75rem;
}

.ddscore-report-unavailable-body {
    color: var(--dds-text-secondary);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
}

.ddscore-report-unavailable-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
    background: color-mix(in srgb, var(--dds-accent-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--dds-border) 60%, transparent);
    border-radius: var(--dds-radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.ddscore-report-unavailable-privacy > i {
    color: var(--dds-accent-secondary);
    font-size: 1.15rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.ddscore-report-unavailable-privacy p {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.ddscore-report-unavailable-privacy strong {
    color: var(--dds-text-primary);
}

.ddscore-report-unavailable-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .ddscore-report-unavailable-card {
        padding: 2.5rem 1.5rem 2rem;
    }

    .ddscore-report-unavailable-title {
        font-size: 1.35rem;
    }

    .ddscore-report-unavailable-body {
        font-size: 0.95rem;
    }

    .ddscore-report-unavailable-actions .ddscore-btn {
        width: 100%;
    }
}

/* Footer */
.ddscore-footer {
    position: relative;
    overflow: hidden;
    background: var(--dds-footer-bg);
    border-top: 1px solid var(--dds-border);
    margin-top: 4rem;
    padding: 3rem var(--dds-main-padding-x) 1.5rem;
}

.ddscore-footer-inner {
    position: relative;
    z-index: 1;
    max-width: var(--dds-layout-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) repeat(2, minmax(140px, 1fr));
    gap: 2rem 2.5rem;
    align-items: start;
}

.ddscore-footer-brand {
    margin-bottom: 0;
}

.ddscore-footer-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--dds-logo-mark-gap);
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.35rem;
    border-radius: var(--dds-radius-sm);
}

.ddscore-footer-brand-lockup .ddscore-logo-mark {
    transform-origin: 50% 88%;
    will-change: transform, filter;
}

.ddscore-footer-brand-lockup .ddscore-logo-wordmark {
    transition: letter-spacing var(--dds-logo-wordmark-letter-spacing-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.ddscore-footer-brand-lockup:hover .ddscore-logo-wordmark,
.ddscore-footer-brand-lockup:focus-visible .ddscore-logo-wordmark {
    letter-spacing: 0.095em;
}

.ddscore-footer-brand-lockup:hover .ddscore-logo-mark,
.ddscore-footer-brand-lockup:focus-visible .ddscore-logo-mark {
    animation: ddscore-logo-mark-pulse var(--dds-logo-mark-pulse-duration) ease-in-out infinite;
}

.ddscore-footer-brand-lockup:focus-visible {
    outline: 2px solid var(--dds-accent-secondary);
    outline-offset: 3px;
}

.ddscore-footer-logo-mark {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.ddscore-footer-logo-wordmark {
    font-size: clamp(1.05rem, 2.2vw, 1.4rem);
}

.ddscore-footer-tagline {
    color: var(--dds-text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    margin-top: 0.5rem;
    max-width: 28rem;
}

.ddscore-footer-links {
    display: contents;
}

.ddscore-footer-col h4 {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.ddscore-footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ddscore-footer-col .ddscore-nav-link {
    padding: 0.2rem 0;
}

.ddscore-footer-bottom {
    grid-column: 1 / -1;
    border-top: 1px solid var(--dds-border);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.ddscore-footer-bottom p {
    color: var(--dds-text-muted);
    font-size: 0.8rem;
    text-align: center;
}

/* Screen: print-only footer lines (marketing URL, app URL, printed page) */
.ddscore-footer-print-extras,
.ddscore-footer-print-page {
    display: none;
}

@media (min-width: 1200px) {
    .ddscore-header-inner {
        padding: 0.85rem 1.25rem;
    }

    .ddscore-logo-mark,
    .ddscore-logo-img {
        height: 48px;
    }

    .ddscore-header-leading {
        gap: clamp(1rem, 2vw, 1.75rem);
    }

    .ddscore-nav-desktop {
        gap: clamp(0.65rem, 1.1vw, 1.25rem);
    }

    .ddscore-nav-link {
        font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    }

    .ddscore-credits-always-bar,
    .ddscore-credits-bar {
        height: 1.05rem;
    }

    .ddscore-header-actions a.ddscore-btn.ddscore-btn-outline.ddscore-btn-sm {
        font-size: 0.95rem;
        padding: 0.4rem 0.85rem;
        line-height: 1.2;
    }

    .ddscore-header-actions .ddscore-user-name {
        max-width: 16rem;
        font-size: 0.95rem;
    }

    .ddscore-footer {
        padding: 3.5rem 1.25rem 1.75rem;
    }

    .ddscore-footer-logo-mark {
        height: 52px;
    }

    .ddscore-footer-tagline {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    .ddscore-footer-col h4 {
        font-size: 1rem;
    }

    .ddscore-footer-col .ddscore-nav-link {
        padding: 0.28rem 0;
    }

    .ddscore-footer-bottom p {
        font-size: 1rem;
    }
}

/* Wide desktop: larger header nav labels (Pricing, Report guide, Home Page). */
@media (min-width: 1536px) {
    .ddscore-nav-desktop {
        gap: clamp(1.35rem, 2vw, 2.5rem);
    }

    .ddscore-nav-link {
        font-size: clamp(1.02rem, 1.2vw, 1.2rem);
    }
}

/* Score gauge */

/* Register --gauge-pct as a typed custom property so CSS transitions can
   interpolate it (browsers cannot transition string-typed custom properties).
   This is what lets the conic-gradient fill animate from 0 up to the real
   score when the loading phase ends. */
@property --gauge-pct {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.ddscore-gauge {
    position: relative;
    width: var(--dds-gauge-size);
    height: var(--dds-gauge-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Transition the --gauge-pct custom property so the conic-gradient fill
       animates when the gauge moves from its loading (0%) state to the real
       score value. */
    transition: --gauge-pct 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.ddscore-gauge-circle {
    transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s ease;
}

.ddscore-gauge--loading .ddscore-gauge-circle {
    opacity: 0.72;
    transform: scale(0.965);
    filter: saturate(0.88) brightness(0.92);
}

.ddscore-gauge-value--pending {
    opacity: 0;
    transform: translateY(0.18rem) scale(0.9);
    filter: blur(0.08rem);
}

.ddscore-gauge-value--revealed {
    animation: ddscore-gauge-value-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ddscore-gauge-value-in {
    from {
        opacity: 0;
        transform: translateY(0.18rem) scale(0.9);
        filter: blur(0.08rem);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* One-shot "flash" that plays once the fill transition finishes. Uses a
   forwards-filling animation so it does not linger after it completes. */
.ddscore-gauge--flash .ddscore-gauge-circle {
    animation: ddscore-gauge-flash 0.6s ease-out;
}

@keyframes ddscore-gauge-flash {
    0% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--gauge-color) 55%, transparent);
    }
    35% {
        filter: brightness(1.35) saturate(1.15);
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--gauge-color) 25%, transparent);
    }
    100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--gauge-color) 0%, transparent);
    }
}

/* Subtle outer glow on the hero total-score gauges (top + bottom of report).
   A soft diffuse box-shadow on the circle pulses at 10s. */
.ddscore-gauge--animated-hero .ddscore-gauge-circle {
    animation: ddscore-gauge-living-glow 10s ease-in-out infinite;
}

@keyframes ddscore-gauge-living-glow {
    0%, 100% {
        box-shadow:
            0 0 0.45rem color-mix(in srgb, var(--gauge-color) 20%, transparent),
            0 0 1.2rem color-mix(in srgb, var(--gauge-color) 13%, transparent),
            0 0 2.4rem color-mix(in srgb, var(--dds-accent-primary) 9%, transparent);
        filter: brightness(1.02) saturate(1.02);
    }
    50% {
        box-shadow:
            0 0 0.7rem color-mix(in srgb, var(--gauge-color) 31%, transparent),
            0 0 1.8rem color-mix(in srgb, var(--gauge-color) 21%, transparent),
            0 0 3.4rem color-mix(in srgb, var(--dds-accent-primary) 15%, transparent);
        filter: brightness(1.08) saturate(1.1);
    }
}

/* Premium luminous arc on the hero DDScore gauge. The glow follows the filled
   arc but deliberately avoids endpoint beads or extra tick marks. */
.ddscore-gauge--hero .ddscore-gauge-circle::before {
    content: "";
    position: absolute;
    inset: -9%;
    border-radius: 50%;
    background: conic-gradient(
        color-mix(in srgb, var(--gauge-color) 30%, transparent) calc(var(--gauge-pct) * 3.6deg),
        transparent calc(var(--gauge-pct) * 3.6deg));
    -webkit-mask: radial-gradient(circle at center,
        transparent 50%,
        var(--dds-mask-opaque) 58%,
        var(--dds-mask-opaque) 62%,
        transparent 72%);
    mask: radial-gradient(circle at center,
        transparent 50%,
        var(--dds-mask-opaque) 58%,
        var(--dds-mask-opaque) 62%,
        transparent 72%);
    filter: blur(0.95rem);
    opacity: 0.78;
    pointer-events: none;
    z-index: 0;
}

.ddscore-gauge--animated-hero .ddscore-gauge-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        color-mix(in srgb, var(--gauge-color) 68%, var(--dds-accent-secondary)) calc(var(--gauge-pct) * 3.6deg),
        transparent calc(var(--gauge-pct) * 3.6deg));
    -webkit-mask: radial-gradient(circle at center,
        transparent 42%,
        var(--dds-mask-opaque) 44.5%,
        var(--dds-mask-opaque) 47.5%,
        transparent 50%);
    mask: radial-gradient(circle at center,
        transparent 42%,
        var(--dds-mask-opaque) 44.5%,
        var(--dds-mask-opaque) 47.5%,
        transparent 50%);
    filter: blur(0.1rem) drop-shadow(0 0 0.5rem color-mix(in srgb, var(--gauge-color) 45%, transparent));
    pointer-events: none;
    animation: ddscore-gauge-filament 10s ease-in-out infinite;
    z-index: 1;
}

@keyframes ddscore-gauge-filament {
    0%, 100% { opacity: 0.46; }
    50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-gauge {
        transition: none;
    }
    .ddscore-gauge--flash .ddscore-gauge-circle,
    .ddscore-gauge--animated-hero .ddscore-gauge-circle {
        animation: none;
    }
    .ddscore-gauge-circle,
    .ddscore-gauge-value--revealed {
        transition: none;
        animation: none;
    }
    .ddscore-gauge--animated-hero .ddscore-gauge-circle::after {
        animation: none;
        opacity: 0.5;
    }
}

.ddscore-gauge-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(var(--gauge-color) calc(var(--gauge-pct) * 3.6deg),
            var(--dds-border) calc(var(--gauge-pct) * 3.6deg));
    display: flex;
    align-items: center;
    justify-content: center;
}

.ddscore-gauge--hero .ddscore-gauge-circle {
    background:
        radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--gauge-color) 8%, transparent) 0 34%,
            transparent 56%),
        conic-gradient(
            var(--gauge-color) calc(var(--gauge-pct) * 3.6deg),
            color-mix(in srgb, var(--dds-border) 76%, transparent) calc(var(--gauge-pct) * 3.6deg));
    isolation: isolate;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 48%, transparent),
        inset 0 0 1rem color-mix(in srgb, var(--dds-bg-primary) 58%, transparent);
}

.ddscore-gauge-inner {
    position: relative;
    z-index: 1;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: var(--dds-bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 8%;
    box-sizing: border-box;
    text-align: center;
}

.ddscore-gauge--hero .ddscore-gauge-inner {
    z-index: 2;
    background:
        radial-gradient(circle at 50% 28%,
            color-mix(in srgb, var(--gauge-color) 9%, transparent) 0%,
            transparent 54%),
        var(--dds-bg-card);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 35%, transparent),
        inset 0 0 1.2rem color-mix(in srgb, var(--dds-bg-primary) 45%, transparent);
}

.ddscore-gauge-value {
    font-size: var(--dds-gauge-value-size);
    font-weight: 800;
    color: var(--gauge-color);
    line-height: 1;
}

.ddscore-gauge--hero .ddscore-gauge-value {
    text-shadow: 0 0 0.8rem color-mix(in srgb, var(--gauge-color) 36%, transparent);
}

.ddscore-gauge-label {
    font-size: var(--dds-gauge-label-size);
    color: var(--dds-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.15;
}

/* Score card grid: at most 2 columns on wide layouts; 1 column in mobile breakpoint below */
.ddscore-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.ddscore-score-card {
    background: var(--dds-bg-score-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    padding: 1.35rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.ddscore-score-card-info {
    flex: 1;
}

.ddscore-score-card-title {
    font-family: var(--dds-heading-font-family);
    font-weight: var(--dds-heading-font-weight);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.ddscore-score-card-desc {
    color: var(--dds-text-muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.ddscore-score-card-value {
    font-size: 1.5rem;
    font-weight: 800;
    min-width: 70px;
    text-align: right;
}

/* Traffic light recommendation (neutral card; tier accent on headline only) */
.ddscore-traffic-light {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: var(--dds-radius-lg);
    margin: 1.5rem 0;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    box-shadow: var(--dds-shadow);
}

.ddscore-traffic-light::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dds-card-accent-line-height);
    background: var(--dds-card-accent-line);
    pointer-events: none;
    z-index: 0;
}

.ddscore-traffic-light-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "traffic-copy traffic-gauge";
    gap: 1.5625rem 2.1875rem;
    align-items: start;
}

.ddscore-traffic-light-copy {
    grid-area: traffic-copy;
    min-width: 0;
}

.ddscore-traffic-light-gauge {
    grid-area: traffic-gauge;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    min-width: 0;
    justify-self: end;
}

.ddscore-traffic-light-hint {
    position: relative;
    z-index: 2;
}

.ddscore-traffic-light-hint .ddscore-field-hint-wrap {
    position: relative;
}

.ddscore-traffic-text {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Headline color kept neutral so the recommendation card matches other dialogs
   instead of reading as a red warning panel. */
.ddscore-traffic-light.red .ddscore-traffic-text,
.ddscore-traffic-light.yellow .ddscore-traffic-text,
.ddscore-traffic-light.green .ddscore-traffic-text {
    color: var(--dds-text-primary);
}

/* Funding timeline */
.ddscore-funding-stage-card {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.ddscore-funding-stage-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ddscore-funding-stage-heading .ddscore-card-title {
    margin-bottom: 0;
}

.ddscore-funding-stage-current {
    color: var(--dds-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.ddscore-funding-stage-visual {
    --dds-stage-position: 28%;
    --dds-stage-box-width: clamp(18rem, 25vw, 26rem);
    --dds-stage-box-half-width: clamp(9rem, 12.5vw, 13rem);
    --dds-stage-box-left: clamp(0rem, calc(var(--dds-stage-position) - var(--dds-stage-box-half-width)), calc(100% - var(--dds-stage-box-width)));
    position: relative;
    padding-top: 5.85rem;
}

.ddscore-funding-stage-pos-preseed {
    --dds-stage-position: 5%;
}

.ddscore-funding-stage-pos-seed {
    --dds-stage-position: 28%;
}

.ddscore-funding-stage-pos-series-a {
    --dds-stage-position: 50%;
}

.ddscore-funding-stage-pos-series-b {
    --dds-stage-position: 60%;
}

.ddscore-funding-stage-pos-series-c {
    --dds-stage-position: 68%;
}

.ddscore-funding-stage-pos-growth {
    --dds-stage-position: 78%;
}

.ddscore-funding-stage-pos-mature,
.ddscore-funding-stage-pos-profitable {
    --dds-stage-position: 96%;
}

.ddscore-stage-comparison-anchor {
    position: absolute;
    top: 0;
    left: var(--dds-stage-box-left);
    width: var(--dds-stage-box-width);
    max-width: 100%;
}

.ddscore-stage-comparison-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    justify-content: center;
    height: 4.35rem;
    padding: 0.48rem 0.75rem;
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--dds-border) 55%, transparent);
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-bg-primary) 88%, var(--dds-bg-card));
}

.ddscore-stage-comparison-kicker {
    color: var(--dds-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: uppercase;
}

.ddscore-stage-comparison-box strong {
    color: var(--dds-text-primary);
    font-family: var(--dds-heading-font-family);
    font-size: 0.88rem;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.ddscore-stage-comparison-box > span:last-child {
    color: var(--dds-text-secondary);
    font-size: 0.76rem;
    line-height: 1.35;
}

.ddscore-timeline-svg {
    display: block;
    overflow: visible;
    width: 100%;
}

.ddscore-timeline-progress {
    stroke-linecap: round;
    stroke-width: 5;
    vector-effect: non-scaling-stroke;
}

.ddscore-timeline-stage-marker {
    stroke: var(--dds-text-primary);
    stroke-linecap: round;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--dds-accent-primary) 42%, transparent));
}

.ddscore-stage-gradient-stop-low {
    stop-color: var(--dds-score-poor);
}

.ddscore-stage-gradient-stop-mid {
    stop-color: var(--dds-score-moderate);
}

.ddscore-stage-gradient-stop-high {
    stop-color: var(--dds-score-excellent);
}

.ddscore-funding-timeline {
    margin: 0;
}

.ddscore-timeline-svg {
    height: 2.25rem;
}

.ddscore-timeline-track {
    stroke: var(--dds-border-light);
    stroke-linecap: round;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
}

.ddscore-timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--dds-text-muted);
}

@media (max-width: 760px) {
    .ddscore-funding-stage-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ddscore-funding-stage-current {
        white-space: normal;
    }

    .ddscore-stage-comparison-box {
        width: 100%;
    }

    .ddscore-funding-stage-visual {
        --dds-stage-box-width: 100%;
        --dds-stage-box-half-width: 50%;
        --dds-stage-box-left: 0rem;
        padding-top: 6.25rem;
    }

    .ddscore-stage-comparison-anchor {
        width: 100%;
    }
}

/* Analysis page: phase list (centered label + duration) */
.ddscore-progress {
    width: min(100%, 66rem);
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.ddscore-progress-step {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: 1.45rem;
    align-items: center;
    text-align: left;
    width: 100%;
    max-width: none;
    padding: 1.6rem 0.8rem;
    border-left: none;
    position: relative;
}

.ddscore-progress-step + .ddscore-progress-step {
    border-top: 1px solid color-mix(in srgb, var(--dds-border-light) 58%, transparent);
}

.ddscore-progress-step::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dds-border);
    margin: 0;
    flex-shrink: 0;
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}

.ddscore-progress-step.done::before {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--dds-score-excellent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--dds-score-excellent) 78%, var(--dds-border-light));
    font-size: 1.275rem;
    font-weight: 700;
    color: var(--dds-score-excellent);
    box-shadow:
        inset 0 0 0.7rem color-mix(in srgb, var(--dds-score-excellent) 8%, transparent),
        0 0 1.1rem color-mix(in srgb, var(--dds-score-excellent) 14%, transparent);
}

.ddscore-progress-step.active::before {
    display: none;
}

.ddscore-progress-step.active .ddscore-spinner {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    margin: 0;
    width: 42px;
    height: 42px;
    border-width: 4px;
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--dds-accent-primary) 24%, transparent);
}

.ddscore-progress-step.active {
    border-left: none;
}

.ddscore-progress-step-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    grid-column: 2;
    min-width: 0;
}

/* Step title row: centered label text (analysis progress). */
.ddscore-progress-step-label-row {
    display: block;
    text-align: left;
    line-height: 1.2;
}

.ddscore-progress-step-text {
    color: var(--dds-text-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    vertical-align: middle;
}

.ddscore-progress-step.active .ddscore-progress-step-text {
    color: var(--dds-text-primary);
    font-weight: 600;
}

/* Loading spinner */
.ddscore-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--dds-border);
    border-top-color: var(--dds-accent-primary);
    border-radius: 50%;
    animation: ddscore-spin 0.8s linear infinite;
}

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

/* Loading container */
.loading-app-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            ellipse 72% 56% at 50% 38%,
            color-mix(in srgb, var(--dds-accent-primary) 11%, transparent) 0%,
            transparent 58%
        ),
        radial-gradient(
            ellipse 120% 88% at 50% 120%,
            color-mix(in srgb, var(--dds-bg-secondary) 55%, var(--dds-bg-primary)) 0%,
            var(--dds-bg-primary) 52%
        );
    z-index: 9999;
}

.loading-app-container--hidden {
    display: none;
}

.loading-app-error {
    width: min(32rem, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 2rem;
    border: 1px solid var(--dds-border-light);
    border-radius: 1.25rem;
    background: var(--dds-bg-card-surface);
    color: var(--dds-text-primary);
    text-align: center;
    box-shadow: var(--dds-shadow-lg);
}

.loading-app-error--warning {
    border-color: var(--dds-score-moderate);
}

.loading-app-error--danger {
    border-color: var(--dds-score-poor);
}

.loading-app-error p {
    margin: 0 0 1rem;
    color: var(--dds-text-secondary);
    line-height: 1.55;
}

.loading-app-error p:last-child {
    margin-bottom: 0;
}

.loading-app-error strong {
    color: var(--dds-text-primary);
}

.loading-app-error-actions {
    margin-top: 1rem;
}

.loading-app-error-link {
    color: var(--dds-accent-secondary);
    font-weight: 700;
    text-decoration: none;
}

.loading-app-error-link:hover,
.loading-app-error-link:focus-visible {
    color: var(--dds-text-primary);
    text-decoration: underline;
}

.ddscore-authorizing-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(70vh, 42rem);
    padding: 2.5rem 1.25rem;
}

.ddscore-authorizing-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: min(30rem, 100%);
    text-align: center;
    animation: ddscore-loading-fadein 0.5s ease-out;
}

.ddscore-authorizing-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dds-logo-mark-gap);
    margin-bottom: 1.1rem;
}

.ddscore-authorizing-mark {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    filter: drop-shadow(0 0 1.25rem color-mix(in srgb, var(--dds-accent-primary) 28%, transparent));
}

.ddscore-authorizing-wordmark {
    font-size: clamp(1.15rem, 3.5vw, 1.65rem);
}

.ddscore-authorizing-status {
    margin: 0;
    color: var(--dds-text-secondary);
    font-family: var(--dds-font);
    font-size: clamp(1.2rem, 3vw, 1.65rem);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.ddscore-authorizing-bar {
    position: relative;
    width: min(16rem, 100%);
    height: 0.28rem;
    margin-top: 1.25rem;
    overflow: hidden;
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-border) 58%, var(--dds-bg-primary));
}

.ddscore-authorizing-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--dds-accent-primary) 12%, transparent),
        var(--dds-accent-secondary),
        color-mix(in srgb, var(--dds-accent-primary) 12%, transparent)
    );
    box-shadow: 0 0 1rem color-mix(in srgb, var(--dds-accent-secondary) 38%, transparent);
    animation: ddscore-authorizing-bar-sweep 1.35s ease-in-out infinite;
}

@keyframes ddscore-authorizing-bar-sweep {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(260%);
    }
}

.loading-app-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    animation: ddscore-loading-fadein 0.5s ease-out;
}

@keyframes ddscore-loading-fadein {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-app-logo-wrap {
    position: relative;
    width: min(432px, 82vw);
    height: min(432px, 82vw);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Initial-load ring only (not DDScore gauge widgets). */
.loading-app-splash-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.loading-app-splash-ring-track {
    stroke: color-mix(in srgb, var(--dds-border) 72%, transparent);
    opacity: 0.9;
}

.loading-app-splash-ring-inner-shade {
    stroke: color-mix(in srgb, var(--dds-bg-primary) 72%, transparent);
    opacity: 0.82;
    filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--dds-bg-primary) 70%, transparent));
}

.loading-app-splash-ring-arc-halo {
    stroke: color-mix(in srgb, var(--dds-accent-primary) 45%, transparent);
    opacity: 0.78;
}

.loading-app-splash-ring-arc-inner-shade {
    stroke: color-mix(in srgb, var(--dds-bg-primary) 46%, transparent);
    opacity: 0.7;
}

/* Spinner rotation is SVG <animateTransform rotate(... 0 0)> (see App.razor): pivot is the group's
   origin, which matches the ring center after translate(60,60). CSS transform-origin on <g> is inconsistent. */
.loading-app-brand-column {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    max-width: 78%;
}

.loading-app-logo {
    width: min(288px, 58vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 48px color-mix(in srgb, var(--dds-accent-primary) 22%, transparent));
}

.loading-app-dots {
    margin: 0;
    font-family: var(--dds-font);
    font-size: 0.7rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--dds-text-secondary) 88%, var(--dds-accent-secondary));
    letter-spacing: 0.28em;
    text-transform: uppercase;
    min-height: 1.35em;
    animation: loading-app-dots-pulse 1.6s ease-in-out infinite;
}

@keyframes loading-app-dots-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

.loading-progress-text {
    color: var(--dds-text-muted);
    font-family: var(--dds-font);
    font-size: 2.55rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.loading-progress-text--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .loading-app-content {
        animation: none;
    }

    .loading-app-dots {
        animation: none;
        opacity: 0.85;
    }

    .ddscore-authorizing-dialog {
        animation: none;
    }

    .ddscore-authorizing-bar::before {
        animation: none;
        transform: none;
    }
}

/* Responsive */

/* ─── Tablet token overrides ─── */
@media (max-width: 768px) {
    :root {
        --dds-hero-title-size: 1.8rem;
        --dds-hero-accent-size: 1.05rem;
        --dds-hero-subtitle-size: 0.95rem;
        --dds-hero-padding: 2.5rem 1rem 1.5rem;
        --dds-card-padding: 1.25rem;
        /* Full horizontal band on phone/tablet — do not use the desktop 50vw floor here. */
        --dds-layout-max-width: 100%;
    }
}

@media (max-width: 768px) {
    .loading-app-content {
        gap: 2.75rem;
    }

    .loading-progress-text {
        font-size: 1.35rem;
    }

    .ddscore-dropzone {
        padding: 2rem 1rem;
    }

    .ddscore-dropzone-hint--desktop,
    .ddscore-dashboard-mobile-collapse-help {
        display: none;
    }

    .ddscore-dropzone-mobile-hint-row {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        max-width: max-content;
        margin: 0 auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        white-space: nowrap;
    }

    .ddscore-dropzone-mobile-hint-row .ddscore-field-hint-wrap {
        width: auto;
        min-width: 0;
    }

    .ddscore-dropzone-mobile-hint-row .ddscore-field-hint-chip.small-size-info {
        width: 1.08rem;
        min-width: 1.08rem;
        height: 1.08rem;
        border-radius: 999px;
        font-size: 0.7rem;
    }

    .ddscore-dropzone-mobile-hint-row .ddscore-field-hint-chip--with-label.small-size-info {
        width: auto;
        min-width: 0;
        height: auto;
        border-radius: 0;
        font-size: inherit;
    }

    .ddscore-dropzone-mobile-hint-row .ddscore-field-hint-tooltip {
        min-width: 0;
        max-width: min(18rem, calc(100vw - 2rem));
    }

    .ddscore-dashboard-field-title-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.45rem;
    }

    .ddscore-dashboard-field-title-row h3 {
        flex: 0 1 auto;
        min-width: 0;
        margin-bottom: 0;
    }

    .ddscore-dashboard-mobile-help {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .ddscore-verify-mobile-help {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .ddscore-verify-mobile-collapse-help {
        display: none;
    }

    .ddscore-verify-hero-title-row,
    .ddscore-verify-stage-title-row {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        max-width: 100%;
        margin-inline: auto;
    }

    .ddscore-verify-hero-title-row .ddscore-verify-hero-title,
    .ddscore-verify-stage-title-row h2 {
        flex: 0 1 auto;
        min-width: 0;
        margin-bottom: 0;
    }

    .ddscore-dashboard-hero-title-row {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }

    .ddscore-dashboard-hero-title-row .ddscore-dashboard-hero-title {
        flex: 0 1 auto;
        margin-bottom: 0;
        min-width: 0;
    }

    .ddscore-dashboard-hero-mobile-help {
        flex: 0 0 auto;
        align-self: center;
    }

    .ddscore-dashboard-how-works-desktop {
        display: none;
    }

    .ddscore-dashboard-how-works-mobile {
        display: block;
        margin-top: 0.65rem;
        text-align: center;
    }

    .ddscore-dashboard-how-works-mobile summary {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.42rem 0.62rem;
        border: 1px solid var(--dds-border-light);
        border-radius: var(--dds-radius-sm);
        color: var(--dds-accent-secondary);
        background: color-mix(in srgb, var(--dds-bg-input) 74%, transparent);
        cursor: pointer;
        font-weight: 700;
        list-style: none;
    }

    .ddscore-dashboard-how-works-mobile summary::-webkit-details-marker {
        display: none;
    }

    .ddscore-dashboard-readmore-chevron {
        font-size: 0.74rem;
        transition: transform 0.2s ease;
    }

    .ddscore-dashboard-how-works-mobile[open] .ddscore-dashboard-readmore-chevron {
        transform: rotate(180deg);
    }

    .ddscore-dashboard-readmore-body {
        margin-top: 0.75rem;
    }

    .ddscore-score-grid {
        grid-template-columns: 1fr;
    }

    .ddscore-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .ddscore-footer-tagline {
        max-width: none;
    }

    .ddscore-credits-always-label {
        display: none;
    }

    .ddscore-credits-always-bar {
        width: 4.5rem; /* 50% longer than prior 3rem compact bar */
    }
}

/* Form grid */
.ddscore-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.ddscore-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Company Profile: six fields on one row on wide viewports; mobile inserts round-term before amount fields. */
.ddscore-form-grid--company-profile .ddscore-form-group {
    min-width: 0;
}

.ddscore-form-grid--company-profile .ddscore-form-group--verify-team-size .ddscore-label-with-hint .ddscore-label {
    white-space: nowrap;
}

.ddscore-form-grid--company-profile .ddscore-form-group--verify-team-size .ddscore-input {
    max-width: 5.5rem;
    width: 100%;
    box-sizing: border-box;
}

.ddscore-form-grid--company-profile .ddscore-form-group--verify-round-term {
    display: none;
    min-width: 0;
}

.ddscore-form-group--verify-round-term .ddscore-verify-round-term-control {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.ddscore-form-group--verify-round-term .ddscore-choice-segment--compact {
    width: 100%;
}

.ddscore-form-group--verify-round-term .ddscore-choice-segment--compact .ddscore-btn {
    min-width: 0;
    flex: 1 1 0;
    justify-content: center;
}

.ddscore-verify-company-profile-title-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.ddscore-verify-company-profile-title-row .ddscore-card-title {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.ddscore-verify-company-profile-controls {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-left: auto;
    min-width: 0;
}

.ddscore-verify-round-term-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ddscore-verify-funding-currency-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ddscore-verify-round-term-label,
.ddscore-verify-funding-currency-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dds-text-muted);
    white-space: nowrap;
}

.ddscore-choice-segment--compact .ddscore-btn {
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
}

.ddscore-verify-funding-currency-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-accent-primary);
    background: color-mix(in srgb, var(--dds-bg-input) 72%, transparent);
    color: var(--dds-text-secondary);
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    font-family: var(--dds-font);
    box-sizing: border-box;
}

.ddscore-verify-funding-currency-toggle:hover {
    background: color-mix(in srgb, var(--dds-bg-input) 52%, transparent);
    color: var(--dds-text-primary);
    border-color: var(--dds-accent-secondary);
}

.ddscore-verify-funding-currency-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--dds-accent-secondary);
    font-size: 1.05rem;
}

@media (max-width: 640px) {
    .ddscore-verify-company-profile-title-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem;
    }

    .ddscore-verify-company-profile-controls {
        width: auto;
        margin-left: auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
        flex-shrink: 1;
    }

    .ddscore-verify-funding-currency-label {
        display: none;
    }

    .ddscore-verify-round-term-control--desktop {
        display: none;
    }

    .ddscore-form-grid--company-profile .ddscore-form-group--verify-round-term-mobile {
        display: flex;
    }

    .ddscore-form-group--verify-round-term .ddscore-choice-segment--compact .ddscore-btn {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}

/* Keep EUR amount inputs visually consistent with sibling inputs. Previously used
   a smaller font which made the row look out of balance compared to text inputs. */
.ddscore-input--verify-compact-num {
    font-size: 0.9rem;
    padding-left: 0.75rem;
    padding-right: 0.45rem;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 1200px) {
    .ddscore-form-grid--company-profile {
        /* Order: company name, industry (wider), country, team size (max ~3 digits), funding, pre-money / ownership */
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(0, 1.42fr)
            minmax(0, 0.95fr)
            minmax(0, 0.52fr)
            minmax(0, 1.02fr)
            minmax(0, 1.08fr);
        gap: 0.4rem 0.5rem;
        align-items: stretch;
    }

    /* Same input baseline when label rows differ in height (plain label vs hint row) */
    .ddscore-form-grid--company-profile .ddscore-form-group > .ddscore-input {
        margin-top: auto;
    }
}

.ddscore-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
}

/* Table styles */
.ddscore-table-wrapper {
    overflow-x: auto;
    margin-top: 1rem;
}

/* Financial verify: row metric hints use DdscoreFieldHint tooltips (position absolute).
   Default wrapper overflow-x:auto clips them; founders/GDPR cards avoid clipping via
   .ddscore-card:has(.ddscore-field-hint-wrap){overflow:visible} — match that behaviour here. */
.ddscore-table-wrapper:has(.ddscore-table--financial-verify) {
    overflow-x: visible;
}

.ddscore-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--dds-table-font-size);
}

.ddscore-table th,
.ddscore-table td {
    padding: var(--dds-table-cell-padding);
    text-align: right;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-table th {
    font-weight: 600;
    color: var(--dds-text-secondary);
    font-size: 0.8rem;
}

.ddscore-table td:first-child,
.ddscore-table th:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--dds-text-primary);
}

/* Company verification: year columns share width; row labels use a bounded column */
.ddscore-table.ddscore-table--financial-verify {
    table-layout: fixed;
}

.ddscore-table.ddscore-table--financial-verify th {
    font-weight: 500;
    letter-spacing: 0;
}

.ddscore-table.ddscore-table--financial-verify th:first-child,
.ddscore-table.ddscore-table--financial-verify td:first-child {
    width: clamp(9.5rem, 26vw, 13.5rem);
    max-width: 40%;
    vertical-align: middle;
    overflow-wrap: break-word;
}

.ddscore-table.ddscore-table--financial-verify th:not(:first-child),
.ddscore-table.ddscore-table--financial-verify td:not(:first-child) {
    vertical-align: middle;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.ddscore-table.ddscore-table--financial-verify .ddscore-fin-computed {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ddscore-table th.projection {
    color: var(--dds-accent-secondary);
}

/* Commercial potential scenario matrix: left-aligned narrative column */
.ddscore-table.ddscore-table--scenarios th,
.ddscore-table.ddscore-table--scenarios td {
    text-align: left;
    vertical-align: top;
}

.ddscore-table.ddscore-table--scenarios td:nth-child(2),
.ddscore-table.ddscore-table--scenarios th:nth-child(2),
.ddscore-table.ddscore-table--scenarios td:nth-child(3),
.ddscore-table.ddscore-table--scenarios th:nth-child(3) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Commercial Potential scenarios: narrow screens — center numeric columns, stack multi-word headers, widen Description. */
@media (max-width: 768px) {
    .ddscore-report .ddscore-report-section-card .ddscore-score-card,
    .ddscore-report .ddscore-score-card.ddscore-deck-score-card-wrap {
        align-items: center;
    }

    .ddscore-report .ddscore-report-section-card .ddscore-score-card-info,
    .ddscore-report .ddscore-score-card.ddscore-deck-score-card-wrap .ddscore-score-card-info {
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-self: center;
    }

    .ddscore-report .ddscore-report-section-card .ddscore-confidence-badge,
    .ddscore-report .ddscore-score-card.ddscore-deck-score-card-wrap .ddscore-confidence-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .ddscore-report .ddscore-report-section-card .ddscore-gauge-with-help,
    .ddscore-report .ddscore-score-card.ddscore-deck-score-card-wrap .ddscore-gauge-with-help {
        align-self: center;
    }

    .ddscore-table.ddscore-table--scenarios th:nth-child(2),
    .ddscore-table.ddscore-table--scenarios td:nth-child(2),
    .ddscore-table.ddscore-table--scenarios th:nth-child(3),
    .ddscore-table.ddscore-table--scenarios td:nth-child(3) {
        text-align: center;
    }

    .ddscore-table.ddscore-table--scenarios th:nth-child(2),
    .ddscore-table.ddscore-table--scenarios th:nth-child(3) {
        white-space: normal;
        line-height: 1.2;
        vertical-align: middle;
    }

    .ddscore-table.ddscore-table--scenarios td:nth-child(2),
    .ddscore-table.ddscore-table--scenarios td:nth-child(3) {
        white-space: nowrap;
    }

    .ddscore-table.ddscore-table--scenarios th:nth-child(1),
    .ddscore-table.ddscore-table--scenarios td:nth-child(1) {
        max-width: 28%;
    }

    .ddscore-table.ddscore-table--scenarios th:nth-child(4),
    .ddscore-table.ddscore-table--scenarios td:nth-child(4) {
        min-width: 40%;
    }

    .ddscore-scenarios-th-return-multiple {
        max-width: 5.5rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Report tables: keep every column aligned like the Exit Scenario table. */
.ddscore-report .ddscore-table th:nth-child(n),
.ddscore-report .ddscore-table td:nth-child(n) {
    text-align: left;
}

.ddscore-projection-badge {
    display: inline-block;
    font-size: 0.65rem;
    background: var(--dds-accent-glow);
    color: var(--dds-accent-secondary);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    margin-left: 0.25rem;
}

.ddscore-input-table {
    display: block;
    padding: 0.35rem 0.45rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: right;
    box-sizing: border-box;
}

/* Consent items */
.ddscore-consent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--dds-bg-input);
    border-radius: var(--dds-radius-sm);
    margin-bottom: 0.5rem;
}

.ddscore-consent-actions {
    display: flex;
    gap: 0.5rem;
}

.ddscore-consent-actions .ddscore-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.ddscore-choice-segment {
    display: inline-flex;
    align-items: stretch;
    isolation: isolate;
    max-width: 100%;
}

.ddscore-choice-segment .ddscore-btn {
    border-radius: 0;
    min-height: 2rem;
    white-space: nowrap;
    z-index: 0;
}

.ddscore-choice-segment .ddscore-btn + .ddscore-btn {
    margin-left: -1px;
}

.ddscore-choice-segment .ddscore-btn:first-child {
    border-top-left-radius: var(--dds-radius-sm);
    border-bottom-left-radius: var(--dds-radius-sm);
}

.ddscore-choice-segment .ddscore-btn:last-child {
    border-top-right-radius: var(--dds-radius-sm);
    border-bottom-right-radius: var(--dds-radius-sm);
}

.ddscore-choice-segment .ddscore-btn.ddscore-btn-primary {
    z-index: 2;
    background: color-mix(in srgb, var(--dds-accent-primary) 60%, transparent);
    border-color: color-mix(in srgb, var(--dds-accent-primary) 72%, transparent);
    color: var(--dds-text-primary);
}

.ddscore-choice-segment .ddscore-btn:hover:not(:disabled):not(.ddscore-btn-disabled-look),
.ddscore-choice-segment .ddscore-btn:focus-visible {
    z-index: 3;
}

.ddscore-choice-segment .ddscore-btn:hover:not(:disabled):not(.ddscore-btn-disabled-look),
.ddscore-choice-segment .ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look) {
    transform: none;
}

.ddscore-choice-segment .ddscore-btn.ddscore-btn-primary:hover:not(:disabled):not(.ddscore-btn-disabled-look) {
    background: color-mix(in srgb, var(--dds-accent-primary-hover) 72%, transparent);
    border-color: color-mix(in srgb, var(--dds-accent-primary-hover) 84%, transparent);
    color: var(--dds-text-primary);
    box-shadow: var(--dds-hover-glow-btn);
}

.ddscore-choice-segment .ddscore-btn.ddscore-btn-primary:active:not(:disabled):not(.ddscore-btn-disabled-look) {
    background: color-mix(in srgb, var(--dds-accent-primary-hover) 78%, transparent);
    color: var(--dds-text-primary);
    border-color: color-mix(in srgb, var(--dds-accent-primary-hover) 88%, transparent);
    box-shadow:
        inset 0 2px 10px color-mix(in srgb, var(--dds-bg-primary) 38%, transparent),
        0 0 0 1px color-mix(in srgb, var(--dds-accent-secondary) 55%, transparent);
}

/* Selected "Grant Consent": translucent brand blue (60% accent; rest shows through from the row). */
.ddscore-consent-actions .ddscore-btn.ddscore-btn-primary:not(:disabled) {
    background: color-mix(in srgb, var(--dds-accent-primary) 60%, transparent);
    border-color: color-mix(in srgb, var(--dds-accent-primary) 72%, transparent);
    color: var(--dds-text-primary);
}

.ddscore-consent-actions .ddscore-btn.ddscore-btn-primary:hover:not(:disabled):not(.ddscore-btn-disabled-look) {
    background: color-mix(in srgb, var(--dds-accent-primary-hover) 72%, transparent);
    border-color: color-mix(in srgb, var(--dds-accent-primary-hover) 84%, transparent);
    color: var(--dds-text-primary);
    box-shadow: var(--dds-hover-glow-btn);
}

/* Verify GDPR row: global --dds-btn-active-bg is too faint on these small chips; show a clear press wash. */
.ddscore-consent-actions .ddscore-btn.ddscore-btn-outline:active:not(:disabled):not(.ddscore-btn-disabled-look) {
    background: color-mix(in srgb, var(--dds-text-primary) 18%, var(--dds-bg-input));
    color: var(--dds-text-primary);
    border-color: var(--dds-accent-primary);
    box-shadow:
        inset 0 2px 10px color-mix(in srgb, var(--dds-text-primary) 14%, transparent),
        0 0 0 1px color-mix(in srgb, var(--dds-accent-secondary) 45%, transparent);
    transform: translateY(1px) scale(var(--dds-btn-active-scale));
}

.ddscore-consent-actions .ddscore-btn.ddscore-btn-primary:active:not(:disabled):not(.ddscore-btn-disabled-look) {
    background: color-mix(in srgb, var(--dds-accent-primary-hover) 78%, transparent);
    color: var(--dds-text-primary);
    border-color: color-mix(in srgb, var(--dds-accent-primary-hover) 88%, transparent);
    box-shadow:
        inset 0 2px 10px color-mix(in srgb, var(--dds-bg-primary) 38%, transparent),
        0 0 0 1px color-mix(in srgb, var(--dds-accent-secondary) 55%, transparent);
    transform: translateY(1px) scale(var(--dds-btn-active-scale));
}

.ddscore-consent-actions .ddscore-choice-segment .ddscore-btn:active:not(:disabled):not(.ddscore-btn-disabled-look) {
    transform: none;
}

.ddscore-verify-sells-product-actions {
    margin-top: 0.5rem;
    justify-content: flex-start;
}

.ddscore-text-muted {
    color: var(--dds-text-muted);
}

/* Report specific — match .ddscore-main width so stepper and body align */
.ddscore-report {
    max-width: var(--dds-layout-max-width);
    margin: 0 auto;
    padding: 2.5rem 0;
    width: 100%;
}

/* Admin pages keep their own viewport-first width so dense tables can use nearly the whole small screen,
   capped at the current large-screen admin footprint. */
.ddscore-main:has(.problem-reports-admin-page) {
    max-width: min(
        calc(100vw - (var(--dds-main-padding-x) * 2)),
        var(--dds-admin-layout-max-width)
    );
}

/* Report: ~15% wider main column than marketing/dashboard (desktop cap only;
   below 769px :root sets --dds-layout-max-width to 100% — do not scale that). */
@media (min-width: 769px) {
    .ddscore-main:has(.ddscore-report) {
        max-width: calc(var(--dds-layout-max-width) * 1.15);
    }

    .ddscore-main:has(.ddscore-report) > .ddscore-report {
        max-width: calc(var(--dds-layout-max-width) * 1.15);
    }

    .ddscore-main:has(.ddscore-report) .ddscore-report-download {
        max-width: calc(var(--dds-layout-max-width) * 1.15);
    }
}

/* Report page: larger cards, copy, and gauges (~1.5x); +25% card inset vs prior report values */
.ddscore-report .ddscore-card {
    padding: 3.5625rem;
    margin: 2.625rem 0;
}

/* Tighter vertical padding only; keep the same horizontal inset as other report cards
   (.ddscore-report .ddscore-card uses 3.5625rem left/right). */
.ddscore-report .ddscore-report-problem-box.ddscore-card,
.ddscore-report .ddscore-simple-locked-actions.ddscore-card,
.ddscore-report .ddscore-trial-preview-banner.ddscore-card {
    padding-top: 2.1rem;
    padding-bottom: 2.1rem;
    padding-left: 3.5625rem;
    padding-right: 3.5625rem;
}

.ddscore-report .ddscore-report-problem-box.ddscore-card > :is(h1, h2, h3).ddscore-card-title:first-child,
.ddscore-report .ddscore-simple-locked-actions.ddscore-card > :is(h1, h2, h3).ddscore-card-title:first-child,
.ddscore-report .ddscore-trial-preview-banner.ddscore-card > :is(h1, h2, h3).ddscore-card-title:first-child {
    font-size: 1.65rem;
    margin-bottom: 1rem;
}

.ddscore-report .ddscore-simple-locked-actions.ddscore-card > p {
    margin: 0.35rem 0 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
}

.ddscore-report .ddscore-card-title {
    font-size: 1.65rem;
    margin-bottom: 1.75rem;
}

.ddscore-report .ddscore-card > :is(h1, h2, h3).ddscore-card-title:first-child {
    margin-bottom: 1.75rem;
}

.ddscore-report .ddscore-report-download-title.ddscore-card-title {
    margin-bottom: 0.75rem;
}

.ddscore-report .ddscore-report-company {
    max-width: 100%;
    font-size: clamp(1.15rem, 0.85rem + 2.8vw, 1.75rem);
    font-weight: 650;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-report .ddscore-report-company {
        font-size: clamp(1.15rem, 0.85rem + 4.5cqi, 1.75rem);
    }
}

.ddscore-report .ddscore-report-date {
    font-size: 1.05rem;
}

.ddscore-report .ddscore-section-narrative {
    font-size: 1.05rem;
    line-height: 1.65;
}

.ddscore-report .ddscore-section-list-title {
    font-size: 1.02rem;
}

.ddscore-report .ddscore-section-list ul li {
    font-size: 1.02rem;
}

.ddscore-report .ddscore-gauge--compact {
    /* 25% larger than the previous 164px (now 205px) so the longest axis labels
       ("LEGAL & REGULATORY", "BUSINESS MODEL") no longer wrap awkwardly inside
       the inner hole. Inner hole is 85% of width, so usable text area grows. */
    width: 205px;
    height: 205px;
}

.ddscore-report .ddscore-gauge--compact .ddscore-gauge-value {
    font-size: 2.75rem;
}

.ddscore-report .ddscore-gauge--compact .ddscore-gauge-label {
    font-size: 0.95rem;
    max-width: 11rem;
    line-height: 1.15;
}

.ddscore-report .ddscore-gauge--hero {
    width: 300px;
    height: 300px;
}

.ddscore-report .ddscore-gauge--hero .ddscore-gauge-value {
    font-size: 3.9375rem;
}

.ddscore-report .ddscore-gauge--hero .ddscore-gauge-label {
    font-size: 1.12rem;
    max-width: 10rem;
}

.ddscore-report .ddscore-gauge-info-chip--in-circle.normal-size-info {
    width: 1.8rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    font-size: 1.17rem;
}

.ddscore-report .ddscore-gauge-info-chip--in-circle.large-size-info {
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: 1.56rem;
}

.ddscore-report .ddscore-score-card {
    padding: 2.5rem 2.75rem;
    gap: 2.0625rem;
}

.ddscore-report .ddscore-score-card-title {
    font-size: 1.65rem;
}

.ddscore-report .ddscore-score-card-desc {
    font-size: 1.2rem;
}

.ddscore-report .ddscore-score-card-value {
    font-size: 1.875rem;
}

.ddscore-report .ddscore-score-grid {
    gap: 1.85rem;
}

.ddscore-report .ddscore-structured-row-title {
    font-size: 1.425rem;
}

.ddscore-report .ddscore-report-detail-block {
    margin-top: 1rem;
    padding: 0 var(--dds-content-padding); /* Add side padding for text content */
}

.ddscore-report .ddscore-report-detail-block .ddscore-structured-row-title {
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-report .ddscore-report-detail-block .ddscore-section-narrative {
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.ddscore-report .ddscore-traffic-light {
    padding: 2.1rem;
    margin: 2.1rem auto;
    width: 100%;
    max-width: min(52rem, 100%);
    box-sizing: border-box;
}

.ddscore-report .ddscore-traffic-light-layout {
    column-gap: 1.5rem;
}

.ddscore-report .ddscore-traffic-light-copy {
    text-align: left;
}

.ddscore-report .ddscore-traffic-text {
    font-size: 1.65rem;
}

.ddscore-report .ddscore-traffic-disclaimer {
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0.75rem 0 0;
    max-width: min(48rem, 100%);
}

.ddscore-report .ddscore-traffic-light.red .ddscore-traffic-text {
    font-weight: 500;
}

@media screen and (min-width: 900px) {
    .ddscore-report .ddscore-traffic-light {
        padding: 2.73rem;
        margin: 2.73rem auto;
        max-width: min(67.6rem, 100%);
    }

    .ddscore-report .ddscore-traffic-light-layout {
        column-gap: 1.95rem;
    }

    .ddscore-report .ddscore-traffic-text {
        font-size: 2.145rem;
        line-height: 1.5;
    }

    .ddscore-report .ddscore-traffic-light .ddscore-gauge--hero {
        width: 390px;
        height: 390px;
    }

    .ddscore-report .ddscore-traffic-light .ddscore-gauge--hero .ddscore-gauge-value {
        font-size: 5.11875rem;
    }

    .ddscore-report .ddscore-traffic-light .ddscore-gauge--hero .ddscore-gauge-label {
        font-size: 1.456rem;
        max-width: 13rem;
    }
}

.ddscore-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ddscore-report-company {
    max-width: 100%;
    font-size: clamp(1.1rem, 0.8rem + 2.6vw, 1.48rem);
    font-weight: 650;
    line-height: 1.25;
    word-break: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-report-company {
        font-size: clamp(1.1rem, 0.8rem + 4.25cqi, 1.48rem);
    }
}

.ddscore-report-company .ddscore-company-name {
    color: var(--dds-accent-primary);
}

.ddscore-report-date {
    color: var(--dds-text-muted);
    font-size: 0.9rem;
}

.ddscore-section-narrative {
    color: var(--dds-text-secondary);
    line-height: 1.7;
    margin: 1rem 0;
    padding: 0 var(--dds-content-padding); /* Add side padding for readability */
}

.ddscore-section-list {
    margin: 1rem 0;
}

.ddscore-section-list-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ddscore-section-list-title.strengths {
    color: var(--dds-score-green);
    text-shadow: 0 0 0.45rem color-mix(in srgb, var(--dds-score-green) 28%, transparent);
}

.ddscore-section-list-title.development {
    color: var(--dds-score-moderate);
    text-shadow: 0 0 0.45rem color-mix(in srgb, var(--dds-score-moderate) 28%, transparent);
}

.ddscore-section-list-title.risks {
    color: var(--dds-score-poor);
    text-shadow: 0 0 0.45rem color-mix(in srgb, var(--dds-score-poor) 28%, transparent);
}

.ddscore-section-list ul {
    list-style: none;
    padding: 0;
}

.ddscore-section-list ul li {
    padding: 0.35rem 0;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
}

/* Deck gap */
.ddscore-deck-gap {
    padding: 0.75rem 1rem;
    border-radius: var(--dds-radius-sm);
    margin-bottom: 0.5rem;
    border-left: 3px solid;
}

.ddscore-deck-gap.minor {
    border-color: var(--dds-score-good);
    background: rgba(59, 130, 246, 0.05);
}

.ddscore-deck-gap.moderate {
    border-color: var(--dds-score-moderate);
    background: rgba(245, 158, 11, 0.05);
}

.ddscore-deck-gap.major {
    border-color: var(--dds-score-warning);
    background: rgba(249, 115, 22, 0.05);
}

.ddscore-deck-gap.critical {
    border-color: var(--dds-score-poor);
    background: rgba(239, 68, 68, 0.05);
}

.ddscore-deck-gap p {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.ddscore-deck-gap-severity {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
    color: var(--dds-text-muted);
}

.ddscore-deck-score-card-wrap {
    margin-bottom: 1rem;
}

.ddscore-deck-subheading {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-deck-verdict {
    font-size: 0.9rem;
    color: var(--dds-text-secondary);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

.ddscore-deck-observed-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.ddscore-deck-observed-table th,
.ddscore-deck-observed-table td {
    padding: 0.5rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-deck-observed-table th {
    color: var(--dds-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ddscore-deck-observed-table td {
    color: var(--dds-text-secondary);
}

.ddscore-deck-checklist-wrap {
    margin-top: 0.5rem;
    overflow-x: auto;
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-bg-input) 72%, transparent);
}

.ddscore-deck-checklist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.ddscore-deck-checklist-table th,
.ddscore-deck-checklist-table td {
    padding: 0.75rem 0.8rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-deck-checklist-table th {
    color: var(--dds-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ddscore-deck-checklist-table tbody tr:last-child td {
    border-bottom: 0;
}

.ddscore-deck-checklist-table td {
    color: var(--dds-text-secondary);
    line-height: 1.45;
}

.ddscore-deck-checklist-table td strong {
    color: var(--dds-text-primary);
}

.ddscore-deck-check-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 7.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.ddscore-deck-check-status i {
    width: 1rem;
    text-align: center;
}

.ddscore-deck-check-status--present {
    color: var(--dds-score-green);
}

.ddscore-deck-check-status--weak {
    color: var(--dds-score-warning);
}

.ddscore-deck-check-status--missing,
.ddscore-deck-check-status--unnecessary {
    color: var(--dds-score-poor);
}

.ddscore-deck-bullet-list {
    margin: 0.25rem 0 0 1.25rem;
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.ddscore-deck-bullet-list li {
    margin-bottom: 0.35rem;
}

.ddscore-deck-feedback-btn {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

@media (max-width: 760px) {
    .ddscore-deck-checklist-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .ddscore-deck-checklist-table,
    .ddscore-deck-checklist-table thead,
    .ddscore-deck-checklist-table tbody,
    .ddscore-deck-checklist-table tr,
    .ddscore-deck-checklist-table td {
        display: block;
        width: 100%;
    }

    .ddscore-deck-checklist-table thead {
        display: none;
    }

    .ddscore-deck-checklist-table tr {
        margin-bottom: 0.75rem;
        border: 1px solid var(--dds-border);
        border-radius: var(--dds-radius-sm);
        background: color-mix(in srgb, var(--dds-bg-input) 72%, transparent);
        overflow: hidden;
    }

    .ddscore-deck-checklist-table td {
        display: grid;
        grid-template-columns: minmax(7rem, 36%) 1fr;
        gap: 0.75rem;
        border-bottom: 1px solid var(--dds-border);
    }

    .ddscore-deck-checklist-table td::before {
        content: attr(data-label);
        color: var(--dds-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .ddscore-deck-checklist-table tr td:last-child {
        border-bottom: 0;
    }
}

/* Glossary */
.ddscore-glossary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1.5rem;
    align-items: start;
    padding: 0 var(--dds-content-padding); /* Add side padding to match cards */
}

@media (min-width: 56rem) {
    .ddscore-report .ddscore-glossary {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
    }
}

.ddscore-glossary-item {
    min-width: 0;
}

.ddscore-glossary dt {
    font-weight: 700;
    color: var(--dds-accent-secondary);
    font-size: 0.95rem;
}

.ddscore-glossary dd {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin-left: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dds-border);
}

/* Report download section */
.ddscore-report-download {
    max-width: var(--dds-layout-max-width);
    margin: 2rem auto 3rem;
    width: 100%;
    padding: 0 0.25rem;
    box-sizing: border-box;
}

.ddscore-report-download-title {
    text-align: center;
    margin-bottom: 0.75rem;
}

.ddscore-report-download-title.ddscore-card-title {
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    border-radius: 0;
}

.ddscore-report-download-note {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 auto 1.25rem;
    max-width: 36rem;
    text-align: center;
}

.ddscore-report-download-note strong {
    color: var(--dds-text-primary);
    font-weight: 600;
}

/* Share + New Report at report bottom (no extra card or marketing line) */
.ddscore-report-end-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.ddscore-report-end-actions .ddscore-share-open {
    padding: 0.35rem 0.75rem;
}

.ddscore-report-end-actions--trial {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

/* PDF export overlay */
.ddscore-export-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(4px);
}

.ddscore-export-overlay-content {
    text-align: center;
    color: var(--dds-text-primary);
    font-size: 1.1rem;
}

.ddscore-export-overlay-content .ddscore-spinner {
    margin: 0 auto 1.25rem;
    width: 3rem;
    height: 3rem;
}

.ddscore-export-overlay-content p {
    margin: 0 0 0.35rem;
}

/* Progress message */
.ddscore-progress-message {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--dds-accent-glow);
    border-radius: var(--dds-radius-sm);
}

.ddscore-progress-message p {
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
}

.ddscore-traffic-disclaimer {
    font-size: 0.88rem;
    font-style: italic;
    font-weight: 400;
    color: var(--dds-text-muted);
    margin: 0.65rem 0 0;
    line-height: 1.45;
}

/* ===================== Contradiction Alerts ===================== */

.ddscore-contradictions {
    position: relative;
    overflow: hidden;
    background: var(--dds-bg-card-surface);
    border: 1px solid color-mix(in srgb, var(--dds-score-warning) 55%, var(--dds-border));
    border-radius: var(--dds-radius-lg);
    box-shadow: var(--dds-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.ddscore-contradictions::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dds-card-accent-line-height);
    background: linear-gradient(90deg, var(--dds-score-warning), transparent);
    pointer-events: none;
    z-index: 1;
}

.ddscore-contradictions-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ddscore-contradictions-title {
    color: var(--dds-score-warning);
    margin-bottom: 0;
}

.ddscore-contradictions-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dds-score-warning);
    background: rgba(245, 158, 11, 0.15);
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
}

.ddscore-contradictions > .ddscore-field-hint {
    position: relative;
    z-index: 2;
}

.ddscore-contradiction-item {
    position: relative;
    z-index: 2;
    background: color-mix(in srgb, var(--dds-bg-input) 82%, var(--dds-bg-card));
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    border-left: 4px solid var(--dds-score-warning);
    transition: opacity 0.3s;
}

.ddscore-contradiction-item.resolved {
    opacity: 0.5;
    border-left-color: var(--dds-score-excellent);
}

.ddscore-contradiction-item.high {
    border-left-color: var(--dds-score-poor);
}

.ddscore-contradiction-item.low {
    border-left-color: var(--dds-text-muted);
}

.ddscore-contradiction-severity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ddscore-contradiction-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    color: var(--dds-text-primary);
}

.ddscore-contradiction-badge.high {
    background: rgba(239, 68, 68, 0.2);
    color: var(--dds-score-poor);
}

.ddscore-contradiction-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--dds-score-warning);
}

.ddscore-contradiction-badge.low {
    background: rgba(100, 116, 139, 0.2);
    color: var(--dds-text-muted);
}

.ddscore-contradiction-field {
    color: var(--dds-text-primary);
    font-size: 0.95rem;
}

.ddscore-contradiction-values {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.ddscore-contradiction-value {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 140px;
    background: var(--dds-bg-input);
    padding: 0.5rem 0.75rem;
    border-radius: var(--dds-radius-sm);
}

.ddscore-contradiction-label {
    font-size: 0.75rem;
    color: var(--dds-text-muted);
    font-weight: 500;
}

.ddscore-contradiction-data {
    font-size: 0.9rem;
    color: var(--dds-text-primary);
    font-weight: 600;
}

.ddscore-contradiction-vs {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dds-score-warning);
    text-transform: uppercase;
    flex-shrink: 0;
}

.ddscore-contradiction-suggestion {
    font-size: 0.82rem;
    color: var(--dds-text-secondary);
    font-style: italic;
    margin: 0.5rem 0;
    line-height: 1.4;
}

.ddscore-contradiction-resolve-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    margin-top: 0.25rem;
}

/* ===================== Upsell Section ===================== */

.ddscore-upsell-section {
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--dds-upsell-bg);
    border: 1px solid var(--dds-upsell-border);
    border-radius: var(--dds-radius-lg);
}

.ddscore-upsell-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dds-text-primary);
    margin-bottom: 0.5rem;
}

.ddscore-upsell-section-subtitle {
    font-size: 0.95rem;
    color: var(--dds-text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
}

.ddscore-upsell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.ddscore-upsell-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}

.ddscore-upsell-card:hover {
    border-color: var(--dds-accent-primary);
    box-shadow: 0 0 20px var(--dds-accent-glow);
}

.ddscore-upsell-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--dds-upsell-badge-bg);
    color: var(--dds-upsell-badge-text);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 1rem;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ddscore-upsell-badge:empty {
    display: none;
}

.ddscore-upsell-content {
    flex: 1;
}

.ddscore-upsell-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dds-text-primary);
    margin-bottom: 0.5rem;
}

.ddscore-upsell-desc {
    font-size: 0.85rem;
    color: var(--dds-text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.ddscore-upsell-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.ddscore-upsell-bullets li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.82rem;
    color: var(--dds-text-secondary);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.ddscore-upsell-bullets li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--dds-accent-primary);
    font-weight: 700;
}

.ddscore-upsell-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--dds-border);
}

.ddscore-upsell-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dds-text-muted);
}

.ddscore-upsell-btn {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
}

/* Toast notification for coming-soon message */
.ddscore-upsell-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dds-upsell-toast-bg);
    color: var(--dds-text-primary);
    padding: 1rem 2rem;
    border-radius: var(--dds-radius);
    border: 1px solid var(--dds-accent-primary);
    box-shadow: var(--dds-shadow-lg);
    z-index: 1000;
    font-size: 0.9rem;
    animation: ddscore-toast-in 0.3s ease-out;
}

@keyframes ddscore-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 768px) {
    .ddscore-report-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .ddscore-consent-item {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .ddscore-consent-actions {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .ddscore-consent-actions .ddscore-btn {
        width: 100%;
        justify-content: center;
    }

    .ddscore-choice-segment {
        width: 100%;
    }

    .ddscore-choice-segment .ddscore-btn {
        flex: 1 1 0;
        width: auto;
    }

    .ddscore-form-grid {
        grid-template-columns: 1fr;
    }

    .ddscore-contradiction-values {
        flex-direction: column;
    }

    .ddscore-contradiction-vs {
        align-self: center;
    }

    .ddscore-upsell-grid {
        grid-template-columns: 1fr;
    }

    .ddscore-upsell-section {
        padding: var(--dds-card-padding); /* Match other card padding */
    }

    .ddscore-upsell-action {
        flex-direction: column;
        align-items: stretch;
    }

    .ddscore-upsell-price {
        text-align: center;
    }
}

/* ─── Narrow mobile token overrides ─── */
@media (max-width: 480px) {
    :root {
        --dds-card-padding: 0.54rem; /* 20% less than 0.675rem - perfect for mobile */
        --dds-card-margin-y: 0.45rem;
        --dds-content-padding: 0.54rem; /* Side padding for text content (glossary, narratives, detail blocks) */
        --dds-hero-padding: 1.5rem 0.5rem 1rem;
        --dds-hero-title-size: 1.3rem;
        --dds-hero-accent-size: 0.85rem;
        --dds-hero-subtitle-size: 0.85rem;
        --dds-gauge-size: 6.5rem;
        --dds-gauge-value-size: 1.75rem;
        --dds-gauge-label-size: 0.7rem;
        --dds-report-card-padding: 0.54rem; /* Match general card padding */
        --dds-table-font-size: 0.7rem;
        --dds-table-cell-padding: 0.25rem 0.35rem;
    }
}

/* ─── Narrow mobile (phones ≤480px: iPhone 14 Pro 393px, Pixel 8 412px, Galaxy S24 412px, iPhone 15 Pro Max 430px) ───
   MUST come AFTER the 768px rules above so it wins in the cascade. */
@media (max-width: 480px) {
    /* Do not set overflow-x on the layout root: it pairs with overflow-y:auto and clips the
       absolutely positioned hamburger panel (same menu as desktop). Horizontal containment stays on .ddscore-main. */
    .ddscore-layout {
        max-width: 100%;
    }

    .ddscore-main {
        padding: 0 0.75rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .ddscore-header-inner {
        padding: 0.75rem;
    }

    .ddscore-nav-desktop {
        display: none;
    }

    .ddscore-hamburger {
        display: flex;
    }

    /* Match .ddscore-header-inner horizontal padding at this breakpoint; same viewport cap as base. */
    .ddscore-nav-mobile {
        --dds-nav-mobile-inset-start: max(0.75rem, env(safe-area-inset-left, 0px));
        --dds-nav-mobile-inset-end: max(0.75rem, env(safe-area-inset-right, 0px));
        --dds-nav-mobile-max-w: calc(100vw - var(--dds-nav-mobile-inset-start) - var(--dds-nav-mobile-inset-end));
        right: var(--dds-nav-mobile-inset-end);
        width: min(19rem, var(--dds-nav-mobile-max-w));
        max-width: min(19rem, var(--dds-nav-mobile-max-w));
    }

    @supports (width: 10svw) {
        .ddscore-nav-mobile {
            --dds-nav-mobile-max-w: calc(100svw - var(--dds-nav-mobile-inset-start) - var(--dds-nav-mobile-inset-end));
        }
    }

    /* Hero: sizes come from --dds-hero-* token overrides above */
    .ddscore-hero-title {
        line-height: 1.2;
    }

    .ddscore-hero-title .ddscore-hero-accent {
        display: block;
        margin-top: 0.25rem;
    }

    .ddscore-hero-subtitle {
        line-height: 1.4;
    }

    .ddscore-dashboard-hero-subtitle {
        font-size: var(--dds-hero-subtitle-size);
    }

    .ddscore-progress-hero {
        padding: 1.5rem 0.5rem 0.5rem;
    }

    /* Cards: padding from --dds-card-padding token */

    .ddscore-dropzone {
        padding: 1.5rem 0.75rem;
    }

    .ddscore-score-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .ddscore-footer-inner {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .ddscore-footer-tagline {
        max-width: none;
    }

    .ddscore-credits-always-label {
        display: none;
    }

    .ddscore-credits-always-bar {
        width: 3.75rem; /* 50% longer than prior 2.5rem */
    }

    /* Financial table: one year at a time.
       When JS carousel is active it adds .ddscore-fin-year-visible to the chosen column.
       Before JS runs (or if it never loads), the 2nd column stays visible as fallback.
       Keep overflow-x visible so metric-row help tooltips are not clipped (same as desktop). */
    .ddscore-table-wrapper:has(.ddscore-table--financial-verify) {
        overflow-x: visible;
        position: relative;
    }

    .ddscore-table--financial-verify {
        min-width: auto;
    }

    /* Once JS has added the carousel selector, hide non-selected year columns */
    .ddscore-fin-carousel-active .ddscore-table--financial-verify th:not(:first-child):not(.ddscore-fin-year-visible),
    .ddscore-fin-carousel-active .ddscore-table--financial-verify td:not(:first-child):not(.ddscore-fin-year-visible) {
        display: none;
    }

    .ddscore-financial-year-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
        background: var(--dds-bg-card);
        border-radius: var(--dds-radius-sm);
    }

    .ddscore-financial-year-selector-btn {
        background: var(--dds-accent-primary);
        color: white;
        border: none;
        border-radius: var(--dds-radius-sm);
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .ddscore-financial-year-selector-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .ddscore-financial-year-display {
        flex: 1;
        text-align: center;
        font-weight: 600;
        color: var(--dds-text-primary);
        font-size: 0.95rem;
    }

    .ddscore-financial-year-display .ddscore-projection-badge {
        margin-left: 0.35rem;
    }

    /* Score cards: stacked, 30% smaller */
    .ddscore-score-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: var(--dds-card-padding); /* Match other cards */
    }

    .ddscore-score-card-value {
        font-size: 1.05rem;
        min-width: auto;
        text-align: left;
        align-self: flex-start;
    }

    .ddscore-score-card-title {
        font-size: 1.33rem; /* 25% larger (1.06 * 1.25) to match gauge scale */
        margin-bottom: 0.1rem;
    }

    .ddscore-report .ddscore-report-section-card .ddscore-score-card-title,
    .ddscore-report .ddscore-deck-score-card-wrap .ddscore-score-card-title {
        font-size: 1.33rem;
        letter-spacing: normal;
        text-transform: none;
    }

    .ddscore-score-card-desc {
        font-size: 0.7rem;
    }

    /* Score gauges + Tables: sizes from --dds-gauge-* and --dds-table-* tokens */
    .ddscore-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ddscore-table {
        min-width: 100%;
    }

    .ddscore-table--scenarios {
        font-size: 0.65rem;
    }

    /* Grids: single column */
    .ddscore-team-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ddscore-team-member {
        padding: 0.75rem;
    }

    .ddscore-detail-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .ddscore-detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .ddscore-detail-label {
        font-size: 0.75rem;
        color: var(--dds-text-muted);
    }

    .ddscore-detail-value {
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* Report: borderless cards, tight padding */
    .ddscore-report {
        padding: 0.25rem 0;
    }

    .ddscore-report .ddscore-card {
        padding: var(--dds-report-card-padding);
        margin: var(--dds-card-margin-y) 0;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--dds-border);
        text-align: center; /* Center titles and gauges on mobile */
    }

    .ddscore-report .ddscore-card-title {
        font-size: 1.64rem !important; /* 25% larger (1.31 * 1.25) to match gauge scale */
        margin-bottom: 0.5rem;
    }

    .ddscore-report-date {
        font-size: 0.7rem;
    }

    .ddscore-report-hero {
        padding: 0.5rem 0 0.25rem;
    }

    .ddscore-report-hero-heading-row {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ddscore-report-hero-actions {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .ddscore-report-hero-actions .ddscore-btn {
        justify-content: center;
    }

    .ddscore-report-hero-text {
        width: 100%;
        padding-left: 0 !important;
    }

    .ddscore-report-mobile-outline {
        position: fixed;
        z-index: 55;
        left: max(0.12rem, env(safe-area-inset-left, 0px));
        top: clamp(5.5rem, 18dvh, 8.75rem);
        display: flex;
        width: min(6.4rem, 28vw);
        max-height: min(58dvh, 31rem);
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.5rem 0.32rem 0.5rem 0.28rem;
        border: 1px solid color-mix(in srgb, var(--dds-border-light) 54%, transparent);
        border-left: 0;
        border-radius: 0 var(--dds-radius-sm) var(--dds-radius-sm) 0;
        background: color-mix(in srgb, var(--dds-bg-card-surface) 88%, transparent);
        box-shadow: 0.2rem 0 1.4rem color-mix(in srgb, var(--dds-bg-primary) 42%, transparent);
        overflow: hidden;
    }

    .ddscore-report-mobile-outline-title {
        padding-left: 0.62rem;
        color: var(--dds-text-muted);
        font-size: 0.54rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1;
        text-transform: uppercase;
    }

    .ddscore-report-mobile-outline-track {
        position: relative;
        display: flex;
        min-height: 0;
        flex-direction: column;
        gap: 0.28rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    .ddscore-report-mobile-outline-track::-webkit-scrollbar {
        display: none;
    }

    .ddscore-report-mobile-outline-track::before {
        content: "";
        position: absolute;
        top: 0.35rem;
        bottom: 0.35rem;
        left: 0.24rem;
        width: 1px;
        background: color-mix(in srgb, var(--dds-accent-primary) 45%, var(--dds-border));
    }

    .ddscore-report-mobile-outline-item {
        position: relative;
        display: grid;
        grid-template-columns: 0.55rem minmax(0, 1fr);
        gap: 0.25rem;
        align-items: center;
        min-height: 1.12rem;
        color: var(--dds-text-muted);
        font-size: clamp(0.53rem, 2.22vw, 0.66rem);
        font-weight: 600;
        line-height: 1.08;
        text-decoration: none;
        opacity: 0.76;
    }

    .ddscore-report-mobile-outline-marker {
        position: relative;
        z-index: 1;
        width: 0.43rem;
        height: 0.43rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 62%, var(--dds-border));
        background: var(--dds-bg-card-surface);
    }

    .ddscore-report-mobile-outline-label {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-wrap: anywhere;
    }

    .ddscore-report-mobile-outline-item.is-active {
        color: var(--dds-text-primary);
        opacity: 1;
    }

    .ddscore-report-mobile-outline-item.is-active .ddscore-report-mobile-outline-marker {
        border-color: var(--dds-accent-primary);
        background: var(--dds-accent-primary);
        box-shadow: 0 0 0.7rem color-mix(in srgb, var(--dds-accent-primary) 42%, transparent);
    }

    .ddscore-report-subtitle-row {
        justify-content: center;
        text-align: center;
    }

    .ddscore-executive-summary-card {
        padding: 0.5rem;
        text-align: center; /* Center title and content */
    }

    .ddscore-executive-summary-text {
        font-size: 0.8rem;
        text-align: left; /* Keep text left-aligned for readability */
    }

    .ddscore-section-narrative {
        font-size: 0.8rem;
        line-height: 1.5;
        text-align: left; /* Keep narrative text left-aligned for readability */
    }

    .ddscore-methodology-box {
        padding: var(--dds-card-padding); /* Match other card padding */
        margin: var(--dds-card-margin-y); /* Match card margins */
    }

    .ddscore-methodology-box h3 {
        font-size: 1.33rem; /* 25% larger (1.06 * 1.25) to match gauge scale */
    }

    .ddscore-methodology-box p {
        font-size: 0.75rem;
    }

    .ddscore-report .ddscore-report-score-graph-card.ddscore-card {
        border: none;
        border-bottom: 1px solid var(--dds-border);
        padding: var(--dds-report-card-padding);
        margin: var(--dds-card-margin-y) 0;
        text-align: center; /* Center the score graph content */
    }

    .ddscore-upsell-card {
        padding: var(--dds-card-padding); /* Match other card padding */
    }

    .ddscore-upsell-title {
        font-size: 1rem;
    }

    .ddscore-upsell-price {
        font-size: 1.5rem;
    }

    /* Form elements */
    .ddscore-input,
    .ddscore-textarea {
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .ddscore-label {
        font-size: 0.8rem;
    }

    /* Buttons */
    .ddscore-btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    .ddscore-btn-lg {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    .ddscore-analyze-material-btn.ddscore-btn-lg {
        min-height: 2.72rem;
        padding-block: 0.72rem;
    }

    /* Progress */
    .ddscore-progress {
        width: 100%;
    }

    .ddscore-progress-step {
        grid-template-columns: 2.45rem minmax(0, 1fr);
        column-gap: 0.85rem;
        padding: 0.9rem 0.25rem;
    }

    .ddscore-progress-step::before {
        width: 2.05rem;
        height: 2.05rem;
    }

    .ddscore-progress-step.active .ddscore-spinner {
        width: 2.2rem;
        height: 2.2rem;
        border-width: 3px;
    }

    .ddscore-progress-step-text {
        font-size: 0.85rem;
    }

    .ddscore-extraction-progress {
        padding: 0.5rem;
    }

    .ddscore-extraction-thumbnail {
        width: 100%;
        max-width: 11.25rem;
        height: auto;
        aspect-ratio: 3 / 4;
        margin: 0 auto;
        display: block;
    }

    .ddscore-extraction-progress-info {
        width: 100%;
    }

    .ddscore-extraction-progress-bar-wrap .ddscore-progress-label {
        font-size: 0.8rem;
    }

    .ddscore-extraction-progress-bar-wrap .ddscore-native-progress {
        height: 0.45rem;
    }

    .ddscore-model-progress {
        grid-column: 1 / -1;
        padding: 0.5rem;
    }

    .ddscore-model-progress-bar-wrap .ddscore-progress-label {
        font-size: 0.8rem;
    }

    .ddscore-model-progress-bar-wrap .ddscore-native-progress {
        height: 0.45rem;
    }

    .ddscore-model-progress-bar-wrap--synthesis {
        padding: 0;
    }

    .ddscore-progress-step-duration {
        font-size: 0.85rem;
    }

    /* Contradictions */
    .ddscore-contradiction-item {
        padding: 0.75rem;
    }

    .ddscore-contradiction-severity {
        flex-direction: column;
        gap: 0.35rem;
    }

    .ddscore-contradiction-field {
        font-size: 0.85rem;
    }

    .ddscore-contradiction-values {
        font-size: 0.8rem;
    }

    /* Overflow prevention (targeted, not wildcard) */
    .ddscore-layout,
    .ddscore-main,
    .ddscore-card,
    .ddscore-report,
    .ddscore-hero,
    .ddscore-progress-hero {
        max-width: 100%;
        box-sizing: border-box;
    }

    img, svg, video {
        max-width: 100%;
        height: auto;
    }

    pre, code {
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Radar chart: constrain width only, never transform:scale */
    .ddscore-radar-chart,
    .ddscore-radar-chart--large {
        max-width: 100%;
    }

    /* Chat FAB: icon-only bubble */
    .ddscore-report-chat-toggle {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 1000;
    }

    .ddscore-report-chat-toggle::before {
        content: "\1F4AC";
        font-size: 1.5rem;
    }

    .ddscore-report-chat-toggle span {
        display: none;
    }
}

/* Login page */
.ddscore-login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem var(--dds-main-padding-x);
}

@media (min-width: 1200px) {
    .ddscore-login-page {
        min-height: 65vh;
        padding: 2.5rem var(--dds-main-padding-x);
    }
}

/* Same shell as .ddscore-card / admin cards — one visual language on all auth surfaces */
.ddscore-login-card {
    position: relative;
    overflow: hidden;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--dds-shadow);
}

.ddscore-login-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dds-card-accent-line-height);
    background: var(--dds-card-accent-line);
    pointer-events: none;
    z-index: 1;
}

.ddscore-login-card > * {
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .ddscore-login-card {
        padding: 2.75rem;
        max-width: 624px;
    }
}

@media (min-width: 1200px) {
    .ddscore-login-card {
        padding: 3.25rem 3.5rem;
        max-width: 768px;
    }
}

.ddscore-login-title {
    color: var(--dds-text-primary);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Empty placeholder reserves space while the login page decides which auth
   variant (admin email/password vs Google/Apple OAuth) to render. Prevents the
   earlier "flash" where the OAuth branch briefly appeared before being swapped
   out for the admin form on /login?email=...@playfulpixels.com. */
.ddscore-login-loading-placeholder {
    min-height: 16rem;
}

@media (min-width: 1200px) {
    .ddscore-login-title {
        font-size: 2.35rem;
        margin-bottom: 0.45rem;
    }
}

.ddscore-login-subtitle {
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.ddscore-login-error {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--dds-rec-red-bg) 82%, var(--dds-bg-card-surface)) 0%,
        var(--dds-bg-card-surface) 52%
    );
    border: 1px solid color-mix(in srgb, var(--dds-score-poor) 58%, var(--dds-border));
    color: color-mix(in srgb, var(--dds-score-poor) 22%, var(--dds-text-primary));
    padding: 0.75rem 1rem;
    border-radius: var(--dds-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.ddscore-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.ddscore-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.85rem 1.25rem;
    background: transparent;
    border: 1px solid var(--dds-accent-primary);
    border-radius: var(--dds-radius-sm);
    color: var(--dds-text-primary);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s ease;
    transform-origin: center;
}

@media (min-width: 1200px) {
    .ddscore-btn-google {
        padding: 1rem 1.35rem;
        font-size: 1.2rem;
        gap: 0.9rem;
    }
}

.ddscore-btn-google:hover:not(:disabled) {
    background: var(--dds-btn-hover-bg);
    border-color: var(--dds-accent-primary);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-btn-google:active:not(:disabled) {
    transform: translateY(1px) scale(var(--dds-btn-active-scale));
}

.ddscore-login-icon {
    width: 20px;
    height: 20px;
}

@media (min-width: 1200px) {
    .ddscore-login-icon {
        width: 28px;
        height: 28px;
    }
}

.ddscore-login-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
}

.ddscore-login-divider::before,
.ddscore-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--dds-border);
}

.ddscore-login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ddscore-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ddscore-form-group label {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

.ddscore-btn-full {
    width: 100%;
}

.ddscore-login-welcome {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ddscore-login-welcome p {
    color: var(--dds-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

@media (min-width: 1200px) {
    .ddscore-login-welcome p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin-bottom: 1.35rem;
    }
}

.ddscore-login-hero-img {
    width: 100%;
    display: block;
    margin: 0 auto 1rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
    box-sizing: border-box;
}

@media (min-width: 1200px) {
    .ddscore-login-hero-img {
        margin-bottom: 1.25rem;
    }
}

.ddscore-btn-apple {
    background: transparent;
    border: 1px solid var(--dds-accent-primary);
    color: var(--dds-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--dds-radius-sm);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s ease;
    width: 100%;
    transform-origin: center;
}

@media (min-width: 1200px) {
    .ddscore-btn-apple {
        padding: 1rem 1.5rem;
        font-size: 1.2rem;
        gap: 0.7rem;
    }
}

.ddscore-btn-apple:hover:not(:disabled) {
    background: var(--dds-btn-hover-bg);
    border-color: var(--dds-accent-primary);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-btn-apple:active:not(:disabled) {
    transform: translateY(1px) scale(var(--dds-btn-active-scale));
}

.ddscore-btn-apple .ddscore-login-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
}

@media (min-width: 1200px) {
    .ddscore-btn-apple .ddscore-login-icon {
        width: 28px;
        height: 28px;
    }

    .ddscore-login-card .ddscore-form-group label {
        font-size: 1.05rem;
    }

    .ddscore-login-card .ddscore-input {
        font-size: 1.1rem;
        padding: 0.95rem 1.15rem;
    }

    .ddscore-login-card .ddscore-btn:not(.ddscore-btn-google):not(.ddscore-btn-apple) {
        font-size: 1.1rem;
        padding: 0.75rem 1.5rem;
    }

    .ddscore-login-error {
        font-size: 1.05rem;
        padding: 0.9rem 1.15rem;
    }
}


.ddscore-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.ddscore-user-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

/* Detail grid (key-value pairs) */
.ddscore-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.ddscore-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ddscore-detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.ddscore-detail-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ddscore-detail-paragraph {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ddscore-detail-paragraph strong {
    color: var(--text-primary);
}

/* Badges */
.ddscore-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ddscore-badge.green {
    background: rgba(16, 185, 129, 0.15);
    color: var(--dds-score-excellent);
}

.ddscore-badge.blue {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-color);
}

.ddscore-badge.orange {
    background: rgba(249, 115, 22, 0.15);
    color: var(--dds-score-warning);
}

.ddscore-badge.red {
    background: rgba(239, 68, 68, 0.15);
    color: var(--dds-score-poor);
}

/* Team member grid: center card rows in the report when fewer columns than full width */
.ddscore-team-grid-wrap {
    width: 100%;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.ddscore-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 1rem;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}

.ddscore-commercial-prose {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

.ddscore-team-member {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
}

/* Team member width variations based on member count */
.ddscore-team-member--single {
    width: 30vh;
    justify-self: center;
}

.ddscore-team-member--dual {
    width: 45vh;
}

.ddscore-team-member--multi {
    /* Default width for 3+ members - uses auto-fit grid */
}

.ddscore-team-member-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.ddscore-team-member p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0.25rem 0;
    line-height: 1.4;
}

/* 2x2 Competitor matrix */
.ddscore-matrix-grid {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: 1fr 2rem;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.ddscore-matrix-y-label {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ddscore-matrix-x-label {
    grid-column: 2;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ddscore-matrix-plot {
    position: relative;
    background:
        linear-gradient(to right, var(--border-color) 1px, transparent 1px),
        linear-gradient(to top, var(--border-color) 1px, transparent 1px);
    background-size: 50% 50%;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.ddscore-matrix-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translate(-50%, 50%);
}

.ddscore-matrix-dot.subject {
    width: 12px;
    height: 12px;
    background: var(--dds-score-excellent);
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.ddscore-matrix-dot span {
    position: absolute;
    left: 14px;
    top: -6px;
    font-size: 0.7rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

@media (max-width: 600px) {
    .ddscore-detail-grid {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ddscore-team-grid {
        grid-template-columns: 1fr;
    }

    .ddscore-matrix-grid {
        max-width: 100%;
    }
}

/* ─── Pricing Page ─── */

.ddscore-pricing-region-check {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--dds-text-secondary);
}

.ddscore-pricing-region-blocked {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1.25rem 1.35rem;
    border-radius: var(--dds-radius);
    border: 1px solid color-mix(in srgb, var(--dds-score-warning) 50%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-score-warning) 12%, var(--dds-bg-card-surface));
    color: var(--dds-text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ddscore-pricing-region-blocked-hint {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--dds-text-secondary);
}

.ddscore-pricing-region-lookup-failed {
    max-width: 56rem;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: var(--dds-radius);
    border: 1px solid color-mix(in srgb, var(--dds-border) 88%, var(--dds-text-secondary));
    background: color-mix(in srgb, var(--dds-bg-primary) 65%, var(--dds-bg-card-surface));
    color: var(--dds-text-primary);
    font-size: 0.9rem;
    line-height: 1.45;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.ddscore-pricing-region-retry {
    flex-shrink: 0;
}

.ddscore-pricing-vat-notice {
    max-width: 56rem;
    margin: 0 auto 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: var(--dds-radius);
    border: 1px solid color-mix(in srgb, var(--dds-accent-secondary) 55%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-accent-primary) 10%, var(--dds-bg-card-surface));
    color: var(--dds-text-primary);
    box-shadow: var(--dds-shadow);
}

.ddscore-pricing-vat-notice h2 {
    margin: 0 0 0.35rem;
    color: var(--dds-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.ddscore-pricing-vat-notice p {
    margin: 0;
    color: var(--dds-text-secondary);
    font-size: 0.93rem;
    line-height: 1.5;
}

/* Post-Stripe return: mirrors RogerApp subscription-manager polling until plan is active */
.ddscore-payment-processing-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1rem, 4vw, 2.5rem) 1rem 3rem;
    min-height: 62vh;
}

.ddscore-payment-processing-card {
    max-width: min(78rem, calc(100vw - 2rem));
}

.ddscore-payment-processing-card--error {
    border-color: color-mix(in srgb, var(--dds-score-poor) 45%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-score-poor) 8%, var(--dds-bg-card-surface));
}

.ddscore-payment-processing-hero {
    width: min(100%, 76rem);
    margin: 0 auto 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--dds-border-light) 38%, transparent);
}

.ddscore-payment-processing-kicker {
    margin: 0 0 0.45rem;
    color: var(--dds-accent-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ddscore-payment-processing-title {
    max-width: 100%;
    margin: 0 0 0.55rem;
    font-size: clamp(1.45rem, 1.05rem + 1.6vw, 2.35rem);
    font-weight: 800;
    color: var(--dds-text-primary);
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-payment-processing-title {
        font-size: clamp(1.45rem, 1.05rem + 4cqi, 2.35rem);
    }
}

.ddscore-payment-processing-body {
    margin: 0;
    max-width: 42rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
}

.ddscore-payment-processing-card--error .ddscore-payment-processing-body {
    color: var(--dds-text-primary);
}

.ddscore-payment-processing-stage-list {
    margin-top: 0;
}

.ddscore-payment-processing-overall {
    margin-top: 0.45rem;
}

.ddscore-payment-processing-cta {
    display: inline-block;
    margin-top: 1.35rem;
}

.ddscore-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.ddscore-pricing-title {
    max-width: 100%;
    font-size: clamp(1.2rem, 0.45rem + 3.6vw, 2rem);
    font-weight: 650;
    color: var(--dds-text-primary);
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-pricing-title {
        font-size: clamp(1.2rem, 0.45rem + 6.5cqi, 2rem);
    }
}

.ddscore-pricing-env-hint {
    max-width: 40rem;
    margin: 1rem auto 0;
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
    text-align: center;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
}

.ddscore-pricing-env-hint a {
    color: var(--dds-accent-secondary);
    font-weight: 600;
}

.ddscore-pricing-subtitle {
    color: var(--dds-text-secondary);
    font-size: 1.05rem;
}

.ddscore-pricing-sign-in-hint {
    max-width: 36rem;
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--dds-text-secondary);
    text-align: center;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
}

/* Billing toggle (layout matches RogerApp product-selection) */
.ddscore-billing-toggle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    width: 100%;
}

/* Investor Pro only: toggle sits in the column above the card (no page-wide margin). */
.ddscore-billing-toggle-container--investor-pro {
    margin-bottom: 0;
    width: 100%;
}

.ddscore-billing-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.ddscore-billing-strong {
    color: var(--dds-text-primary);
    font-weight: 700;
}

.ddscore-billing-muted {
    color: var(--dds-text-muted);
    font-weight: 400;
}

.ddscore-billing-switch {
    position: relative;
    display: inline-block;
    width: 3.5rem;
    height: 1.75rem;
    flex-shrink: 0;
    cursor: pointer;
}

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

.ddscore-billing-switch-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--dds-border-light);
    border-radius: 1.75rem;
    transition: background 0.2s ease;
}

.ddscore-billing-switch-track::before {
    content: "";
    position: absolute;
    height: calc(1.75rem - 6px);
    width: calc(1.75rem - 6px);
    left: 3px;
    bottom: 3px;
    background: var(--dds-text-primary);
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.ddscore-billing-switch input:checked+.ddscore-billing-switch-track {
    background: var(--dds-accent-primary);
}

.ddscore-billing-switch input:checked+.ddscore-billing-switch-track::before {
    transform: translateX(calc(3.5rem - 1.75rem));
}

.ddscore-billing-switch input:focus-visible+.ddscore-billing-switch-track {
    box-shadow: 0 0 0 3px var(--dds-accent-glow);
}

.ddscore-billing-savings-badge {
    display: inline-block;
    margin: 0;
    background-color: var(--dds-score-excellent);
    color: var(--dds-text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: var(--dds-radius-sm);
}

@media (min-width: 500px) {
    .ddscore-billing-toggle-container,
    .ddscore-billing-toggle-container--investor-pro {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
    }

    .ddscore-billing-savings-badge {
        margin-left: 0.5rem;
    }
}

@media (min-width: 1025px) {
    .ddscore-main:has(.ddscore-pricing-page) {
        max-width: min(
            calc(100vw - (var(--dds-main-padding-x) * 2)),
            112rem
        );
    }
}

.ddscore-pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    justify-items: stretch;
    align-items: stretch;
    margin-bottom: 3rem;
}

.ddscore-pricing-cards--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    /* Room for ribbon + Monthly/Yearly (absolute above Investor Pro column only) */
    padding-top: 5.75rem;
}

.ddscore-pricing-card {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--dds-bg-card);
    border: 2px solid var(--dds-border);
    border-radius: var(--dds-radius);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ddscore-pricing-card:hover {
    border-color: var(--dds-border-light);
    box-shadow: var(--dds-shadow);
}

/* Ribbon visually above the bordered card; position absolute so it does not push card content down vs other columns. */
.ddscore-pricing-featured-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-height: 0;
    min-width: 0;
    align-items: stretch;
}

.ddscore-pricing-featured-stack > .ddscore-pricing-card.ddscore-pricing-featured {
    flex: 1 1 auto;
    min-height: 0;
    /* Square top corners so "Most Popular" ribbon meets the card with no gap. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.ddscore-pricing-featured {
    border-color: var(--dds-accent-primary);
    box-shadow: 0 0 20px var(--dds-accent-glow);
}

/* Investor Pro: Monthly/Yearly on top; ribbon flush against card top (absolute block). */
.ddscore-pricing-investor-pro-above {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0;
    box-sizing: border-box;
}

.ddscore-pricing-investor-pro-above .ddscore-pricing-popular-ribbon {
    width: 100%;
    margin: 0;
    padding: 0.55rem 1rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dds-text-primary);
    background: linear-gradient(
        90deg,
        var(--dds-accent-primary) 0%,
        var(--dds-accent-secondary) 100%
    );
    border: 1px solid var(--dds-header-border);
    border-bottom: none;
    border-radius: var(--dds-radius-sm) var(--dds-radius-sm) 0 0;
    box-sizing: border-box;
}

.ddscore-pricing-card-header {
    text-align: center;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ddscore-pricing-card-header h3 {
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--dds-text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.25;
}

/* Same vertical rhythm on every plan: main price line, then sublines (so feature bullets align across columns). */
.ddscore-pricing-header-amount-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 4.1rem;
}

.ddscore-pricing-header-amount-block .ddscore-pricing-price {
    margin: 0;
}

.ddscore-pricing-header-sublines {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    width: 100%;
    box-sizing: border-box;
    /* Was 3.75rem for cross-column bullet alignment; reduced with header margin so gap before bullets ~halves */
    min-height: 3rem;
}

.ddscore-pricing-header-sublines .ddscore-pricing-period {
    margin-top: 0;
}

.ddscore-pricing-header-sublines .ddscore-pricing-yearly-total {
    margin: 0;
}

.ddscore-pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.ddscore-pricing-price--stacked-period {
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
}

.ddscore-pricing-price--stacked-period .ddscore-pricing-suffix {
    display: block;
    line-height: 1.2;
}

.ddscore-pricing-amount {
    font-size: 2.35rem;
    font-weight: 650;
    line-height: 1.05;
    color: var(--dds-text-primary);
}

.ddscore-pricing-featured .ddscore-pricing-amount {
    color: var(--dds-accent-secondary);
}

.ddscore-pricing-suffix {
    font-size: 1rem;
    color: var(--dds-text-secondary);
    white-space: nowrap;
}

.ddscore-pricing-period {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.ddscore-pricing-free-tagline {
    color: var(--dds-text-secondary);
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
    max-width: 100%;
}

.ddscore-pricing-header-amount-block .ddscore-pricing-free-tagline {
    text-align: center;
}

.ddscore-pricing-yearly-total {
    color: var(--dds-score-excellent);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.35rem 0 0;
}

.ddscore-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex-grow: 1;
}

.ddscore-pricing-features li {
    padding: 0.4rem 0;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ddscore-check {
    color: var(--dds-score-excellent);
    font-weight: 700;
    flex-shrink: 0;
}

.ddscore-pricing-cta {
    display: block;
    text-align: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

button.ddscore-pricing-cta:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.ddscore-pricing-trial-error {
    margin: 0 0 0.65rem;
    color: var(--dds-score-poor);
    font-size: 0.85rem;
    text-align: center;
}

.ddscore-pricing-trial-hint {
    margin: 0 0 0.65rem;
    color: var(--dds-text-secondary);
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.4;
}

/* Post–free-trial success: short full-screen cue before redirect home */
.ddscore-pricing-activation-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--dds-bg-primary) 78%, transparent);
    backdrop-filter: blur(8px);
}

.ddscore-pricing-activation-card {
    width: min(22rem, 100%);
    padding: 1.35rem 1.5rem 1.45rem;
    border-radius: var(--dds-radius);
    background: var(--dds-bg-card-surface);
    border: 1px solid color-mix(in srgb, var(--dds-border) 70%, transparent);
    box-shadow: var(--dds-shadow-lg);
}

.ddscore-pricing-activation-title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dds-text-primary);
    text-align: center;
    letter-spacing: 0.02em;
}

.ddscore-pricing-activation-bar {
    height: 0.45rem;
    border-radius: var(--dds-progress-radius);
    overflow: hidden;
    background: color-mix(in srgb, var(--dds-border) 35%, var(--dds-bg-primary));
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 25%, transparent);
}

.ddscore-pricing-activation-bar-fill {
    height: 100%;
    width: 0;
    border-radius: var(--dds-progress-fill-radius);
    background: linear-gradient(
        90deg,
        var(--dds-accent-primary),
        color-mix(in srgb, var(--dds-accent-secondary) 55%, var(--dds-accent-primary))
    );
    animation-name: ddscore-pricing-activation-fill;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: forwards;
    animation-duration: 3s;
}

@keyframes ddscore-pricing-activation-fill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-pricing-activation-bar-fill {
        animation: none;
        width: 100%;
    }
}

/* Plan details + FAQ: stacked on narrow viewports, two columns from md up */
.ddscore-pricing-notes-faq-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    width: 100%;
    max-width: min(80rem, 100%);
    margin: 2.5rem auto 0;
    padding: 0 var(--dds-main-padding-x);
    box-sizing: border-box;
}

.ddscore-pricing-notes-faq-row .ddscore-pricing-notes,
.ddscore-pricing-notes-faq-row .ddscore-pricing-faq {
    margin: 0;
    width: 100%;
    max-width: none;
}

/* FAQ column: no outer box padding (each .ddscore-faq-item supplies it). */
.ddscore-pricing-notes-faq-row .ddscore-pricing-faq {
    padding: 0;
}

/*
 * Plan details inner card: row reset targets .ddscore-pricing-notes column; panel is nested.
 * Horizontal/bottom padding matches .ddscore-faq-item (1.25rem); top is halved so first row sits closer to the heading.
 */
.ddscore-pricing-notes-faq-row .ddscore-pricing-notes .ddscore-pricing-notes--single-panel {
    padding: 0.625rem 1.25rem 1.25rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .ddscore-pricing-notes-faq-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }

    .ddscore-pricing-notes-faq-row .ddscore-pricing-notes,
    .ddscore-pricing-notes-faq-row .ddscore-pricing-faq {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}

/* Plan details (limits, VAT, refunds); width comes from .ddscore-pricing-notes-faq-row */
.ddscore-pricing-notes {
    margin: 0;
    padding: 0;
    max-width: none;
}

/* Shared column title: Plan details + FAQ (same as former .ddscore-pricing-faq h2). */
.ddscore-pricing-section-heading {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: var(--dds-heading-letter-spacing);
    color: var(--dds-text-primary);
    margin: 0 0 1.5rem;
}

/* Single panel: one card body (title lives outside in .ddscore-pricing-notes column). */
.ddscore-pricing-notes--single-panel {
    background: var(--dds-bg-card);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    padding: 1.25rem;
    box-sizing: border-box;
}

.ddscore-pricing-notes-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ddscore-pricing-note--in-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.ddscore-pricing-note--in-panel + .ddscore-pricing-note--in-panel {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dds-border);
}

.ddscore-pricing-note-title {
    font-size: 0.95rem;
    font-weight: 650;
    letter-spacing: var(--dds-heading-letter-spacing);
    color: var(--dds-text-primary);
    margin: 0 0 0.35rem;
}

.ddscore-pricing-note--in-panel .ddscore-pricing-note-title {
    font-size: 0.92rem;
    text-align: left;
}

.ddscore-pricing-note-body {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
    margin: 0;
}

/* FAQ */

.ddscore-pricing-faq {
    margin: 0;
    padding: 0;
    max-width: none;
}

.ddscore-faq-item {
    background: var(--dds-bg-card);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.ddscore-faq-item h4 {
    color: var(--dds-text-primary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: var(--dds-heading-letter-spacing);
    margin-bottom: 0.5rem;
}

.ddscore-faq-item p {
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* FAQ: collapse extra questions behind animated reveal + toggle */
.ddscore-faq-extra {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.ddscore-faq-extra--open {
    grid-template-rows: 1fr;
}

.ddscore-faq-extra-inner {
    overflow: hidden;
    min-height: 0;
}

.ddscore-faq-extra-stack .ddscore-faq-item:last-child {
    margin-bottom: 0;
}

.ddscore-faq-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.ddscore-faq-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    border: 1px solid var(--dds-border-light);
    border-radius: var(--dds-radius);
    background: var(--dds-bg-secondary);
    color: var(--dds-text-accent);
    font-family: var(--dds-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    transform-origin: center;
}

.ddscore-faq-toggle-btn:hover {
    border-color: var(--dds-accent-primary);
    background: var(--dds-bg-card);
    box-shadow: 0 0 24px var(--dds-accent-glow);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-faq-toggle-btn:focus-visible {
    outline: 2px solid var(--dds-accent-primary);
    outline-offset: 2px;
}

.ddscore-faq-toggle-chevron {
    flex-shrink: 0;
    color: var(--dds-accent-secondary);
    transition: transform 0.25s ease;
}

.ddscore-faq-toggle-chevron--up {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-faq-extra {
        transition: none;
    }

    .ddscore-faq-toggle-chevron {
        transition: none;
    }
}

@media (max-width: 1024px) {
    .ddscore-main:has(.ddscore-pricing-page) {
        max-width: min(calc(100vw - (var(--dds-main-padding-x) * 2)), 68rem);
    }

    .ddscore-pricing-cards--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Desktop uses padding-top for absolute “above” block; here Investor Pro uses in-flow layout instead. */
        padding-top: 0;
    }

    /* Wide desktop keeps Monthly/Yearly + ribbon absolutely above the card so row heights align across
       four columns. On tablet/phone the absolute block overlaps the plan card in the grid cell above
       (same column). Use normal flow so the controls always reserve their own height. */
    .ddscore-pricing-investor-pro-above {
        position: static;
    }

    .ddscore-pricing-featured-stack > .ddscore-pricing-card.ddscore-pricing-featured {
        border-top-left-radius: var(--dds-radius);
        border-top-right-radius: var(--dds-radius);
    }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .ddscore-pricing-card {
        padding-inline: 1.35rem;
    }
}

@media (min-width: 1025px) {
    .ddscore-pricing-card {
        padding-inline: 1.35rem;
    }
}

@media (max-width: 640px) {
    .ddscore-main:has(.ddscore-pricing-page) {
        max-width: 100%;
    }

    .ddscore-pricing-cards,
    .ddscore-pricing-cards--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .ddscore-pricing-title {
        font-size: 1.5rem;
    }

    .ddscore-pricing-amount {
        font-size: 2rem;
    }
}

/* ---- Flow breadcrumb (three-step DDScore flow): single row on desktop / Full HD ---- */
.ddscore-flow-breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.65rem;
    max-width: min(100%, calc(100vw - 2 * var(--dds-main-padding-x)));
    margin: 1.75rem auto 1.25rem;
    padding: 0 0.75rem;
    overflow-x: auto;
    box-sizing: border-box;
}

.ddscore-flow-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.55rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
    color: var(--dds-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--dds-bg-card);
    flex: 0 1 auto;
    min-width: 0;
}

.ddscore-flow-step-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddscore-flow-step.active {
    border-color: var(--dds-accent-primary);
    color: var(--dds-accent-secondary);
    box-shadow: 0 0 0 1px var(--dds-accent-glow);
    font-size: 0.95rem;
    padding: 0.4rem 0.75rem;
    gap: 0.55rem;
    flex: 0 1 auto;
}

.ddscore-flow-step.active.analyzing {
    animation: ddscore-flow-pulse 1.6s ease-in-out infinite;
}

.ddscore-flow-step.done {
    border-color: var(--dds-border-light);
    color: var(--dds-text-secondary);
    opacity: 0.9;
}

.ddscore-flow-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: calc(var(--dds-radius-sm) * 0.75);
    background: var(--dds-bg-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ddscore-flow-step.active .ddscore-flow-step-num {
    background: var(--dds-accent-primary);
    color: white;
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.95rem;
}

.ddscore-flow-sep {
    /* Grows with free row space up to max-width; shrinks when steps need room (flex + min). */
    flex: 1 1 1.75rem;
    width: auto;
    min-width: 0.5rem;
    max-width: 4rem;
    height: 1px;
    background: var(--dds-border);
    flex-shrink: 1;
    align-self: center;
}

@keyframes ddscore-flow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--dds-accent-glow); }
    50% { box-shadow: 0 0 0 8px var(--dds-accent-glow); }
}

@media (max-width: 1200px) {
    .ddscore-flow-breadcrumb {
        gap: 0.3rem 0.45rem;
    }

    .ddscore-flow-sep {
        max-width: 2.75rem;
        flex-basis: 1.25rem;
    }
}

@media (max-width: 900px) {
    .ddscore-flow-breadcrumb {
        gap: 0.25rem 0.35rem;
    }

    .ddscore-flow-sep {
        max-width: 1.85rem;
        flex-basis: 0.85rem;
        min-width: 0.4rem;
    }
}

@media (max-width: 640px) {
    .ddscore-flow-breadcrumb {
        flex-wrap: nowrap;
        gap: 0.24rem;
        width: 100%;
        max-width: 100%;
        margin: 0.6rem auto 0.46rem;
        padding: 0 0.16rem;
        justify-content: center;
        overflow: visible;
    }

    /* Step numbers removed so labels fit; vw clamp so three steps fit the narrowest phones. */
    .ddscore-flow-step-num,
    .ddscore-flow-step.active .ddscore-flow-step-num {
        display: none;
    }

    .ddscore-flow-step {
        flex: 0 1 auto;
        min-width: 0;
        max-width: max-content;
        justify-content: center;
        gap: 0;
        padding: 0.24rem 0.34rem;
        border-radius: 5px;
        font-size: clamp(0.54rem, 2.15vw + 0.24rem, 0.68rem);
    }

    .ddscore-flow-step.active {
        padding: 0.24rem 0.34rem;
        font-size: clamp(0.54rem, 2.15vw + 0.24rem, 0.68rem);
    }

    .ddscore-flow-step-label {
        max-width: none;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    .ddscore-flow-sep {
        display: none;
    }
}

@media (max-width: 480px) {
    .ddscore-flow-breadcrumb {
        margin: 0.54rem auto 0.42rem;
    }
}

/* ---- Verify: material preparation progress ---- */
.ddscore-verify-preparing {
    max-width: min(65rem, 96vw);
    margin-left: auto;
    margin-right: auto;
}

.ddscore-verify-preparing .ddscore-card-title {
    text-align: center;
    font-size: 1.75rem;
}

.ddscore-verify-preparing > .ddscore-field-hint:first-of-type {
    text-align: center;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
}

.ddscore-verify-fundability-summary {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: var(--dds-text-secondary);
    line-height: 1.5;
}

.ddscore-verify-fundability-hint--warn {
    color: var(--dds-score-warning);
    font-weight: 600;
}

/* Implied ownership % chip: same translucent accent wash as selected Grant Consent (primary consent button). */
.ddscore-verify-implied-ownership-pct {
    display: inline-block;
    vertical-align: baseline;
    margin: 0 0.1rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--dds-radius-sm);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--dds-text-primary);
    background: color-mix(in srgb, var(--dds-accent-primary) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 72%, transparent);
}

/* Inline note under a form control (for example the product/service checkbox).
   Keep readable and aligned with the input baseline. */
.ddscore-field-hint--inline-note {
    font-size: 0.9rem;
    margin-top: 0.35rem;
    color: var(--dds-text-secondary);
}

/* Checkbox sizing - make checkboxes more visible and easier to click */
input[type="checkbox"] {
    width: 1.6em;
    height: 1.6em;
    margin-right: 0.5em;
    cursor: pointer;
    accent-color: var(--dds-accent-primary);
}

.ddscore-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.ddscore-prepare-spinner-wrap {
    padding: 1.5rem 0;
}

.ddscore-prepare-extraction-summary {
    margin-top: 0.85rem;
    font-size: 1.05rem;
    text-align: center;
    color: var(--dds-accent);
    letter-spacing: 0.02em;
}

.ddscore-prepare-extraction-summary .ddscore-prepare-doc-quoted {
    color: var(--dds-text-secondary);
    font-weight: 500;
}

.ddscore-prepare-doc-line {
    margin-top: 1rem;
    font-size: 1.1rem;
    text-align: center;
}

.ddscore-prepare-progress-block {
    margin-top: 0.85rem;
}

.ddscore-progress-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dds-text-muted);
    margin-bottom: 0.5rem;
    text-align: center;
}

.ddscore-prepare-status {
    margin-top: 1rem;
    text-align: center;
}

.ddscore-prepare-page-progress-area {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.25rem;
    justify-content: center;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.ddscore-prepare-thumbnail-wrap {
    flex-shrink: 0;
    width: 320px;
    border-radius: var(--dds-radius-sm);
    overflow: hidden;
    border: 1px solid var(--dds-border);
    background: var(--dds-bg-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ddscore-prepare-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ddscore-prepare-thumbnail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--dds-bg-score-card-surface);
    border: 1px solid var(--dds-border);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dds-border-light) 35%, transparent);
    padding: 1.5rem;
}

.ddscore-prepare-thumbnail-placeholder-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dds-accent-primary);
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.ddscore-prepare-page-info {
    text-align: left;
}

.ddscore-prepare-page-line--prominent {
    margin: 0.5rem 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dds-text-primary);
}

.ddscore-prepare-phase--prominent {
    margin-top: 0.85rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
}

.ddscore-verify-preparing .ddscore-prepare-phase--prominent {
    text-align: center;
}

.ddscore-verify-stage-card {
    max-width: min(78rem, 96vw);
    margin-left: auto;
    margin-right: auto;
}

.ddscore-verify-stage-lede {
    width: min(100%, 76rem);
    margin: 0 auto 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--dds-border-light) 38%, transparent);
}

.ddscore-verify-stage-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    max-width: 100%;
}

.ddscore-verify-stage-lede h2 {
    margin: 0;
    color: var(--dds-text-primary);
    font-family: var(--dds-heading-font-family);
    font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
}

.ddscore-verify-stage-lede p {
    max-width: 58rem;
    margin: 0.7rem 0 0;
    color: var(--dds-text-secondary);
    font-size: 1rem;
    line-height: 1.55;
}

.ddscore-native-progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 1.05rem;
    border-radius: var(--dds-progress-radius);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 28%, var(--dds-border));
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--dds-bg-card-hover) 14%, var(--dds-bg-secondary)) 0%,
            color-mix(in srgb, var(--dds-bg-primary) 28%, var(--dds-bg-secondary)) 100%
        );
    accent-color: var(--dds-accent-primary);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 14%, transparent),
        inset 0 0.5rem 0.85rem color-mix(in srgb, var(--dds-bg-primary) 38%, transparent),
        0 0 0.95rem color-mix(in srgb, var(--dds-accent-primary) 8%, transparent);
}

.ddscore-native-progress::-webkit-progress-inner-element {
    border-radius: inherit;
    overflow: hidden;
}

.ddscore-native-progress::-webkit-progress-bar {
    border-radius: var(--dds-progress-radius);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--dds-bg-card-hover) 14%, var(--dds-bg-secondary)) 0%,
            color-mix(in srgb, var(--dds-bg-primary) 28%, var(--dds-bg-secondary)) 100%
        );
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 14%, transparent),
        inset 0 0.5rem 0.85rem color-mix(in srgb, var(--dds-bg-primary) 38%, transparent);
}

.ddscore-native-progress::-webkit-progress-value {
    border-radius: var(--dds-progress-fill-radius);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-accent-primary) 86%, var(--dds-bg-secondary)) 0%,
            var(--dds-accent-primary) 62%,
            color-mix(in srgb, var(--dds-accent-secondary) 76%, var(--dds-accent-primary)) 100%
        );
    box-shadow:
        inset 0 0.08rem 0 color-mix(in srgb, var(--dds-text-primary) 12%, transparent),
        0 0 0.75rem color-mix(in srgb, var(--dds-accent-primary) 28%, transparent);
}

.ddscore-native-progress::-moz-progress-bar {
    border-radius: var(--dds-progress-fill-radius);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-accent-primary) 86%, var(--dds-bg-secondary)) 0%,
            var(--dds-accent-primary) 62%,
            color-mix(in srgb, var(--dds-accent-secondary) 76%, var(--dds-accent-primary)) 100%
        );
    box-shadow:
        inset 0 0.08rem 0 color-mix(in srgb, var(--dds-text-primary) 12%, transparent),
        0 0 0.75rem color-mix(in srgb, var(--dds-accent-primary) 28%, transparent);
}

.ddscore-native-progress-indeterminate::-webkit-progress-bar {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--dds-bg-card-hover) 14%, var(--dds-bg-secondary)) 0%,
            color-mix(in srgb, var(--dds-bg-primary) 28%, var(--dds-bg-secondary)) 100%
        );
}

.ddscore-native-progress-indeterminate::-webkit-progress-value {
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--dds-accent-primary) 92%, var(--dds-accent-secondary)),
        transparent
    );
    animation: ddscore-indeterminate-bar 1.2s ease-in-out infinite;
}

.ddscore-native-progress-indeterminate::-moz-progress-bar {
    background: var(--dds-accent-primary);
    animation: ddscore-indeterminate-bar 1.2s ease-in-out infinite;
}

@keyframes ddscore-indeterminate-bar {
    0% {
        transform: translateX(-40%);
    }
    100% {
        transform: translateX(120%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-native-progress::-webkit-progress-value {
        animation: none;
    }
}

.ddscore-prepare-page-line {
    margin-top: 0.5rem;
    font-size: 0.82rem;
}

.ddscore-prepare-phase {
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

/* ---- Verify actions: equal button height ---- */
.ddscore-verify-actions .ddscore-btn {
    box-sizing: border-box;
    min-height: 2.85rem;
    align-items: center;
}

.ddscore-verify-actions .ddscore-btn-primary:not(:disabled) {
    border: 1px solid var(--dds-accent-primary);
}

/* ---- Analysis progress: step duration ---- */
.ddscore-progress-step-duration {
    display: block;
    margin-top: 0;
    font-size: 0.95rem;
    color: var(--dds-text-muted);
    font-weight: 500;
    font-style: italic;
}

/* ---- Analysis progress: unified phase board ---- */
.ddscore-analysis-stage-card {
    padding: clamp(1.65rem, 1rem + 2vw, 2.55rem);
    border-color: color-mix(in srgb, var(--dds-accent-primary) 32%, var(--dds-border));
    background:
        radial-gradient(
            ellipse 70% 50% at 50% -12%,
            color-mix(in srgb, var(--dds-accent-primary) 10%, transparent) 0%,
            transparent 66%
        ),
        var(--dds-bg-card-surface);
}

.ddscore-analysis-stage-card::before {
    background: linear-gradient(
        90deg,
        var(--dds-accent-primary),
        color-mix(in srgb, var(--dds-accent-secondary) 74%, transparent),
        transparent
    );
}

.ddscore-analysis-stage-card-heading,
.ddscore-analysis-overall-label {
    display: block;
    color: color-mix(in srgb, var(--dds-text-primary) 76%, var(--dds-text-secondary));
    font-size: 0.9rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.ddscore-analysis-stage-card-heading {
    width: min(100%, 76rem);
    margin: 0 auto 1.15rem;
}

.ddscore-analysis-stage-list {
    display: flex;
    flex-direction: column;
    width: min(100%, 76rem);
    margin: 0 auto;
}

.ddscore-analysis-stage {
    display: grid;
    grid-template-columns: 3rem 1.25rem minmax(0, 1fr);
    gap: 0.7rem 1.05rem;
    align-items: start;
    padding: clamp(0.88rem, 0.656rem + 0.8vw, 1.24rem) 0;
}

.ddscore-analysis-stage + .ddscore-analysis-stage {
    border-top: 1px solid color-mix(in srgb, var(--dds-border-light) 42%, transparent);
}

.ddscore-analysis-stage-node {
    width: 2.1rem;
    height: 2.1rem;
    margin-top: 0.18rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--dds-border-light) 82%, transparent);
    background: color-mix(in srgb, var(--dds-bg-input) 68%, transparent);
    color: var(--dds-text-muted);
    box-shadow: inset 0 0 0.8rem color-mix(in srgb, var(--dds-bg-primary) 48%, transparent);
}

.ddscore-analysis-stage.done .ddscore-analysis-stage-node {
    color: var(--dds-score-excellent);
    border-color: color-mix(in srgb, var(--dds-score-excellent) 78%, var(--dds-border-light));
    background: color-mix(in srgb, var(--dds-score-excellent) 12%, transparent);
    box-shadow:
        inset 0 0 0.75rem color-mix(in srgb, var(--dds-score-excellent) 10%, transparent),
        0 0 1.2rem color-mix(in srgb, var(--dds-score-excellent) 14%, transparent);
}

.ddscore-analysis-stage.active .ddscore-analysis-stage-node {
    border-color: color-mix(in srgb, var(--dds-accent-secondary) 82%, var(--dds-border-light));
    background: color-mix(in srgb, var(--dds-accent-primary) 9%, transparent);
    box-shadow: 0 0 1.25rem color-mix(in srgb, var(--dds-accent-primary) 20%, transparent);
}

.ddscore-analysis-stage-check {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.ddscore-analysis-stage-number {
    display: none;
}

.ddscore-analysis-stage-index {
    margin-top: 0.35rem;
    color: color-mix(in srgb, var(--dds-text-primary) 80%, var(--dds-text-secondary));
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ddscore-analysis-stage-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid color-mix(in srgb, var(--dds-border-light) 62%, transparent);
    border-top-color: var(--dds-accent-primary);
    border-right-color: var(--dds-accent-secondary);
    animation: ddscore-spin 0.9s linear infinite;
}

.ddscore-analysis-stage-content {
    min-width: 0;
    grid-column: 3;
}

.ddscore-analysis-stage-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.ddscore-analysis-stage-main--with-document {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
}

.ddscore-analysis-stage-copy {
    min-width: 0;
}

.ddscore-analysis-stage-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.ddscore-analysis-stage-heading h2 {
    margin: 0;
    color: var(--dds-text-primary);
    font-family: var(--dds-heading-font-family);
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.16rem);
    font-weight: var(--dds-heading-font-weight);
    letter-spacing: var(--dds-heading-letter-spacing);
    line-height: 1.25;
}

.ddscore-analysis-stage:not(.active):not(.done) .ddscore-analysis-stage-heading h2 {
    color: var(--dds-text-secondary);
}

.ddscore-analysis-stage-badge {
    flex: 0 0 auto;
    color: var(--dds-text-muted);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ddscore-analysis-stage.done .ddscore-analysis-stage-badge {
    color: var(--dds-score-excellent);
}

.ddscore-analysis-stage.active .ddscore-analysis-stage-badge {
    color: var(--dds-accent-secondary);
}

.ddscore-analysis-stage-meta {
    margin: 0.28rem 0 0.82rem;
    color: var(--dds-text-muted);
    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.35;
}

.ddscore-analysis-stage.done .ddscore-analysis-stage-meta {
    color: color-mix(in srgb, var(--dds-score-excellent) 74%, var(--dds-text-muted));
}

.ddscore-analysis-stage-document {
    display: grid;
    grid-template-columns: minmax(7.25rem, 10.5rem) minmax(0, 1fr);
    gap: 1.05rem;
    align-items: center;
    min-width: 0;
    padding: 0.15rem 0 0.15rem 1.55rem;
    border-left: 1px solid color-mix(in srgb, var(--dds-border-light) 72%, transparent);
}

.ddscore-analysis-stage-thumbnail {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--dds-progress-radius);
    border: 1px solid color-mix(in srgb, var(--dds-border-light) 58%, transparent);
    background: var(--dds-bg-primary);
    box-shadow: 0 0 1.2rem color-mix(in srgb, var(--dds-bg-primary) 50%, transparent);
}

.ddscore-analysis-stage-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ddscore-analysis-stage-document-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--dds-text-secondary);
    font-size: 0.92rem;
    line-height: 1.35;
}

.ddscore-analysis-stage-document-copy strong {
    color: var(--dds-text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}

.ddscore-analysis-stage-document-copy span {
    overflow-wrap: anywhere;
}

.ddscore-analysis-stage-progress {
    width: 100%;
    height: 1.05rem;
}

.ddscore-analysis-stage-progress::-webkit-progress-bar {
    border-radius: var(--dds-progress-radius);
}

.ddscore-analysis-stage-progress::-webkit-progress-value {
    border-radius: var(--dds-progress-fill-radius);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-accent-primary) 86%, var(--dds-bg-secondary)) 0%,
            var(--dds-accent-primary) 62%,
            color-mix(in srgb, var(--dds-accent-secondary) 76%, var(--dds-accent-primary)) 100%
        );
}

.ddscore-analysis-stage-progress::-moz-progress-bar {
    border-radius: var(--dds-progress-fill-radius);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-accent-primary) 86%, var(--dds-bg-secondary)) 0%,
            var(--dds-accent-primary) 62%,
            color-mix(in srgb, var(--dds-accent-secondary) 76%, var(--dds-accent-primary)) 100%
        );
}

.ddscore-analysis-stage-progress--done::-webkit-progress-value {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-score-excellent) 56%, var(--dds-bg-secondary)) 0%,
            var(--dds-score-excellent) 100%
        );
}

.ddscore-analysis-stage-progress--done::-moz-progress-bar {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--dds-score-excellent) 56%, var(--dds-bg-secondary)) 0%,
            var(--dds-score-excellent) 100%
        );
}

.ddscore-analysis-stage-progress--pending {
    border-color: color-mix(in srgb, var(--dds-border-light) 58%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 12%, transparent);
}

.ddscore-analysis-overall {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(9rem, auto);
    gap: 1.4rem;
    align-items: center;
    width: min(100%, 76rem);
    margin: 0.35rem auto 0;
    padding-top: 1.4rem;
    border-top: 1px solid color-mix(in srgb, var(--dds-border-light) 44%, transparent);
}

.ddscore-analysis-overall--first {
    margin: 0 auto 1.35rem;
    padding-top: 0;
    padding-bottom: 1.35rem;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--dds-border-light) 44%, transparent);
}

.ddscore-analysis-overall-bar {
    min-width: 0;
}

.ddscore-analysis-overall-label {
    margin-bottom: 0.78rem;
}

.ddscore-analysis-overall-label-percent {
    display: none;
}

.ddscore-analysis-overall-percent {
    color: var(--dds-accent-primary);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 0.75rem color-mix(in srgb, var(--dds-accent-primary) 26%, transparent);
}

.ddscore-analysis-overall-eta {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(7rem, auto));
    gap: 1rem;
    padding-left: 1.35rem;
    border-left: 1px solid color-mix(in srgb, var(--dds-border-light) 58%, transparent);
    color: var(--dds-text-muted);
    font-size: 0.88rem;
    line-height: 1.25;
}

.ddscore-analysis-overall-eta div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}

.ddscore-eta-label-mobile {
    display: none;
}

.ddscore-analysis-overall-eta strong {
    color: var(--dds-text-primary);
    font-size: 1.12rem;
    white-space: nowrap;
}

.ddscore-analysis-dashboard-action {
    display: flex;
    justify-content: flex-start;
    width: min(100%, 76rem);
    margin: 1.1rem auto 0;
}

@media (max-width: 720px) {
    .ddscore-analysis-stage {
        grid-template-columns: 1.85rem 0.75rem minmax(0, 1fr);
        gap: 0.55rem;
    }

    .ddscore-analysis-stage-node {
        width: 1.55rem;
        height: 1.55rem;
    }

    .ddscore-analysis-stage-index {
        margin-top: 0.28rem;
        font-size: 1.05rem;
    }

    .ddscore-analysis-stage-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .ddscore-analysis-stage-heading h2 {
        font-size: clamp(0.84rem, 4vw, 1rem);
        line-height: 1.18;
        text-wrap: balance;
    }

    .ddscore-analysis-stage-document {
        grid-template-columns: 1fr;
        padding: 0.9rem 0 0;
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--dds-border-light) 54%, transparent);
    }

    .ddscore-analysis-stage-main--with-document {
        grid-template-columns: 1fr;
    }

    .ddscore-analysis-stage.done {
        grid-template-columns: 1.55rem minmax(0, 1fr);
        align-items: center;
        gap: 0.55rem;
        padding: 0.62rem 0;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-node {
        grid-column: 1;
        margin-top: 0;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-index,
    .ddscore-analysis-stage.done .ddscore-analysis-stage-meta,
    .ddscore-analysis-stage.done .ddscore-analysis-stage-progress,
    .ddscore-analysis-stage.done .ddscore-analysis-stage-document {
        display: none;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-content {
        grid-column: 2;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-main {
        display: block;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-heading h2 {
        min-width: 0;
        font-size: clamp(0.82rem, 3.75vw, 0.96rem);
        line-height: 1.14;
        text-wrap: balance;
    }

    .ddscore-analysis-stage.done .ddscore-analysis-stage-badge {
        font-size: 0.66rem;
        line-height: 1;
        white-space: nowrap;
    }

    .ddscore-analysis-overall {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .ddscore-analysis-overall-eta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
        border-left: 0;
    }

    .ddscore-analysis-overall-label-percent {
        display: inline;
    }

    .ddscore-analysis-overall-percent {
        display: none;
    }

    .ddscore-eta-label-full {
        display: none;
    }

    .ddscore-eta-label-mobile {
        display: inline;
    }
}

@media (max-width: 1120px) {
    .ddscore-analysis-stage-main--with-document {
        grid-template-columns: 1fr;
    }

    .ddscore-analysis-stage-document {
        padding: 0.9rem 0 0;
        border-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--dds-border-light) 54%, transparent);
    }
}

/* ---- Analysis progress: extraction (page-by-page) within preparation step ---- */
.ddscore-extraction-progress {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--dds-radius);
    background: var(--dds-card-bg);
    border: 1px solid var(--dds-border);
    display: block;
}

.ddscore-extraction-progress--vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
}

.ddscore-extraction-progress--vertical .ddscore-extraction-progress-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.ddscore-extraction-page-counter {
    font-size: 1rem;
    color: var(--dds-text-muted);
}

.ddscore-extraction-page-label {
    font-size: 1.2rem;
    color: var(--dds-text-primary);
}

.ddscore-extraction-phase-label {
    font-size: 0.95rem;
    color: var(--dds-text-secondary);
    font-style: italic;
}

.ddscore-extraction-thumbnail--large {
    width: 360px;
    max-width: 100%;
}

.ddscore-extraction-progress-info {
    width: 100%;
}

.ddscore-extraction-progress-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ddscore-extraction-progress-bar-wrap .ddscore-progress-label {
    font-size: 1.3rem;
    color: var(--dds-text-muted);
}

.ddscore-extraction-progress-bar-wrap .ddscore-progress-label .ddscore-extraction-doc-quoted {
    color: var(--dds-text-secondary);
    font-weight: 500;
}

.ddscore-extraction-progress-bar-wrap .ddscore-native-progress {
    width: 100%;
    height: 0.65rem;
}

.ddscore-extraction-thumbnail {
    display: block;
    width: 240px;
    max-width: 100%;
    margin: 0 auto 0.75rem;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--dds-border);
    background: var(--dds-surface);
}

.ddscore-extraction-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.85;
}

/* ---- Analysis progress: synthesis bar within active step ---- */
.ddscore-model-progress {
    grid-column: 2;
    width: 100%;
    margin-top: 1.35rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
}

.ddscore-model-progress-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ddscore-model-progress-bar-wrap .ddscore-progress-label {
    font-size: 1rem;
    color: var(--dds-text-muted);
}

.ddscore-model-progress-bar-wrap--synthesis .ddscore-progress-label {
    order: -1;
}

.ddscore-model-progress-bar-wrap .ddscore-native-progress {
    height: 1.2rem;
}

.ddscore-model-progress-bar-wrap .ddscore-native-progress.ddscore-synthesis-progress {
    width: 100%;
    min-width: 0;
    height: 100%;
    border-radius: 0;
}

.ddscore-spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* ---- Analysis complete ring + check ---- */
.ddscore-analysis-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 0.5rem;
}

.ddscore-analysis-ring {
    position: relative;
    width: 96px;
    height: 96px;
}

.ddscore-analysis-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ddscore-analysis-ring-bg {
    fill: none;
    stroke: var(--dds-border);
    stroke-width: 8;
}

.ddscore-analysis-ring-fg {
    fill: none;
    stroke: var(--dds-score-excellent);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 326.72;
    stroke-dashoffset: 326.72;
    animation: ddscore-ring-fill 1.1s ease forwards 0.15s;
}

@keyframes ddscore-ring-fill {
    to { stroke-dashoffset: 0; }
}

.ddscore-analysis-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--dds-score-excellent);
    opacity: 0;
    transform: scale(0.5);
    animation: ddscore-check-pop 0.45s ease forwards 0.9s;
}

@keyframes ddscore-check-pop {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ddscore-analysis-complete-label {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.ddscore-analysis-report-btn {
    margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .ddscore-analysis-ring-fg,
    .ddscore-analysis-check {
        animation: none;
    }

    .ddscore-analysis-ring-fg {
        stroke-dashoffset: 0;
    }

    .ddscore-analysis-check {
        opacity: 1;
        transform: none;
    }

    .ddscore-flow-step.active.analyzing {
        animation: none;
    }
}

/* ---- Report hero (title + full-width main column; DDScore lives inside Executive Summary card) ---- */
.ddscore-report-hero {
    display: block;
    margin-bottom: 1.5rem;
}

.ddscore-report-hero-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.ddscore-report-hero-text {
    min-width: 0;
}

.ddscore-report .ddscore-report-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 30px;
}

.ddscore-label-with-hint--table-metric {
    margin-bottom: 0;
}

.ddscore-verify-fin-metric-label {
    font-family: var(--dds-font);
    font-weight: 500;
    letter-spacing: 0;
}

.ddscore-verify-sells-product-row .ddscore-label,
.ddscore-verify-sells-product-actions .ddscore-btn {
    font-weight: 500;
    letter-spacing: 0;
}

.ddscore-report-hero-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.65rem;
}

.ddscore-report-mobile-outline {
    display: none;
}

.ddscore-report [id^="ddscore-report-"] {
    scroll-margin-top: 5.5rem;
}

.ddscore-report-subtitle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0.35rem;
}

.ddscore-report-subtitle-row .ddscore-report-date {
    margin: 0;
}

/* Report hero: same “i” affordance size as former methodology button; hover shows tooltip like score gauges */
.ddscore-report .ddscore-report-subtitle-row .ddscore-field-hint-chip {
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: 1.17rem;
}

.ddscore-report .ddscore-report-subtitle-row .ddscore-field-hint-tooltip {
    left: 0;
    transform: none;
    font-size: 0.82rem;
    line-height: 1.4;
    max-width: min(26rem, 92vw);
}

.ddscore-btn--compact {
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
}

.ddscore-btn--reanalyze {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ddscore-btn-reanalyze-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.ddscore-btn-icon {
    font-size: 1.1em;
    line-height: 1;
}

.ddscore-spinner--inline {
    width: 1em;
    height: 1em;
    border-width: 2px;
    margin: 0;
    display: inline-block;
}

.ddscore-gauge-with-help {
    position: relative;
    display: inline-block;
}

.ddscore-gauge-hover-zone {
    position: relative;
    display: inline-block;
}

.ddscore-gauge-info-chip {
    min-width: 1.43rem;
    height: 1.43rem;
    padding: 0 0.29rem;
    box-sizing: border-box;
    font-size: 0.88rem;
    font-weight: 700;
    font-style: normal;
    font-family: var(--dds-font);
    line-height: 1;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
    background: var(--dds-bg-secondary);
    color: var(--dds-accent-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.ddscore-gauge-info-chip:hover {
    background: var(--dds-accent-glow);
}

.ddscore-gauge-inner.ddscore-gauge-inner--with-help {
    justify-content: center;
    gap: 0.06rem;
    padding: 0.3rem 0.2rem 0.4rem;
    box-sizing: border-box;
}

.ddscore-gauge-inner--with-help .ddscore-gauge-label {
    line-height: 1.12;
    text-align: center;
}

.ddscore-gauge-info-chip--in-circle {
    margin-top: 0.12rem;
    align-self: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.18rem;
    font-size: 0.78rem;
}

.ddscore-field-hint-chip.small-size-info,
.ddscore-gauge-info-chip.small-size-info {
    width: 1.35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    font-size: 0.88rem;
}

.ddscore-field-hint-chip.normal-size-info,
.ddscore-gauge-info-chip.normal-size-info {
    width: 1.8rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    font-size: 1.17rem;
}

.ddscore-field-hint-chip.large-size-info,
.ddscore-gauge-info-chip.large-size-info {
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: 1.56rem;
}

.ddscore-field-hint-chip .fa,
.ddscore-gauge-info-chip .fa {
    font-size: 1em;
    line-height: 1;
}

.ddscore-field-hint-chip--with-label.small-size-info,
.ddscore-field-hint-chip--with-label.normal-size-info,
.ddscore-field-hint-chip--with-label.large-size-info {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ddscore-field-hint-chip--with-label.small-size-info:hover,
.ddscore-field-hint-chip--with-label.small-size-info:focus-visible,
.ddscore-field-hint-chip--with-label.normal-size-info:hover,
.ddscore-field-hint-chip--with-label.normal-size-info:focus-visible,
.ddscore-field-hint-chip--with-label.large-size-info:hover,
.ddscore-field-hint-chip--with-label.large-size-info:focus-visible {
    background: transparent;
    border-color: transparent;
    color: var(--dds-accent-secondary);
    transform: none;
}

.ddscore-gauge-tooltip {
    position: fixed;
    top: var(--dds-floating-tooltip-top, 0);
    left: var(--dds-floating-tooltip-left, 0);
    transform: none;
    width: max-content;
    box-sizing: border-box;
    min-width: 11rem;
    max-width: min(24rem, calc(100vw - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    padding: 0.55rem 0.75rem;
    background: var(--dds-bg-secondary);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    box-shadow: var(--dds-shadow);
    z-index: 7900;
    pointer-events: none;
    text-align: left;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.08s ease;
}

.ddscore-gauge-tooltip[data-ddscore-positioned="true"] {
    opacity: 1;
}

.ddscore-gauge-tooltip-title {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--dds-text-primary);
    margin-bottom: 0.3rem;
    line-height: 1.25;
}

.ddscore-gauge-tooltip-body {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--dds-text-secondary);
    white-space: pre-wrap;
}

.ddscore-modal--info {
    width: max-content;
    max-width: min(32rem, calc(100vw - 1.5rem));
    max-height: 86vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ddscore-modal--info:has(.ddscore-works-content),
.ddscore-modal--info:has(.ddscore-works-explorer-root),
.ddscore-modal--info:has(.ddscore-score-band-examples) {
    width: min(36rem, 94vw);
}

@media (min-width: 900px) {
    .ddscore-modal--info:has(.ddscore-works-content),
    .ddscore-modal--info:has(.ddscore-score-band-examples) {
        width: min(75rem, 96vw);
    }
}

/* Band guidance + 51% / 99% explorers (report modals and How it works) */
.ddscore-score-band-examples__para {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
}

.ddscore-score-band-examples__para:last-of-type {
    margin-bottom: 0.35rem;
}

.ddscore-score-band-examples__figures {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-top: 1.1rem;
}

.ddscore-score-band-examples__figure {
    min-width: 0;
}

@media (min-width: 900px) {
    .ddscore-score-band-examples__figures {
        flex-direction: row;
        align-items: stretch;
        gap: 0.85rem 1rem;
    }

    .ddscore-score-band-examples__figure {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
    }
}

.ddscore-score-band-examples__caption {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dds-text-primary);
    letter-spacing: 0.02em;
}

.ddscore-score-band-examples--modal .ddscore-score-band-examples__para {
    font-size: 0.88rem;
}

.ddscore-score-band-examples--page .ddscore-score-band-examples__figures {
    margin-top: 1.25rem;
}

.ddscore-modal--info .ddscore-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    scrollbar-gutter: stable;
}

.ddscore-modal-footer--actions {
    flex-shrink: 0;
    padding: 0.65rem 1.25rem 1rem;
    border-top: 1px solid var(--dds-border);
    display: flex;
    justify-content: center;
}

.ddscore-modal--info .ddscore-info-modal-body > .ddscore-modal-footer--actions {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    background: var(--dds-bg-card-surface);
    z-index: 1;
    box-sizing: border-box;
}

.ddscore-modal-footer--actions .ddscore-btn {
    min-width: 8.25rem;
    padding: 0.75rem 1.875rem;
    font-size: 1.35rem;
}

body.ddscore-help-modal-open {
    overflow: hidden;
}

body.ddscore-help-modal-mobile .ddscore-layout,
body.ddscore-help-modal-mobile .ddscore-main,
body.ddscore-help-modal-mobile .ddscore-dropzone-content,
body.ddscore-help-modal-mobile .ddscore-dropzone-mobile-hint-row,
body.ddscore-help-modal-mobile .ddscore-field-hint-wrap {
    contain: none;
    transform: none;
}

body.ddscore-help-modal-mobile .ddscore-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: var(--dds-bg-primary) !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    z-index: 8000 !important;
}

body.ddscore-help-modal-mobile .ddscore-modal-backdrop > .ddscore-modal--info {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--dds-bg-card-surface) !important;
    z-index: 8010 !important;
}

body.ddscore-help-modal-mobile .ddscore-modal-backdrop .ddscore-modal-header {
    flex: 0 0 auto;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        1rem
        max(1rem, env(safe-area-inset-left));
}

body.ddscore-help-modal-mobile .ddscore-modal-backdrop .ddscore-info-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding:
        1rem
        max(1rem, env(safe-area-inset-right))
        1rem
        max(1rem, env(safe-area-inset-left));
}

body.ddscore-help-modal-mobile .ddscore-modal-backdrop .ddscore-modal-footer--actions {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    padding:
        0.75rem
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    background: var(--dds-bg-card-surface) !important;
    z-index: 1;
}

body.ddscore-help-modal-mobile .ddscore-modal-backdrop .ddscore-modal-footer--actions .ddscore-btn {
    width: 100%;
    max-width: 28rem;
    min-height: 3rem;
}

body.ddscore-help-modal-mobile dialog.ddscore-modal--info {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--dds-bg-card-surface) !important;
}

body.ddscore-help-modal-mobile dialog.ddscore-modal--info::backdrop {
    background: var(--dds-bg-primary);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.ddscore-help-modal-mobile dialog.ddscore-modal--info .ddscore-modal-header {
    flex: 0 0 auto;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        1rem
        max(1rem, env(safe-area-inset-left));
}

body.ddscore-help-modal-mobile dialog.ddscore-modal--info .ddscore-info-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding:
        1rem
        max(1rem, env(safe-area-inset-right))
        1rem
        max(1rem, env(safe-area-inset-left));
}

body.ddscore-help-modal-mobile dialog.ddscore-modal--info .ddscore-modal-footer--actions {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
    padding:
        0.75rem
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
    background: var(--dds-bg-card-surface) !important;
    z-index: 1;
}

body.ddscore-help-modal-mobile dialog.ddscore-modal--info .ddscore-modal-footer--actions .ddscore-btn {
    width: 100%;
    max-width: 28rem;
    min-height: 3rem;
}

@supports (height: 100svh) {
    body.ddscore-help-modal-mobile .ddscore-modal-backdrop,
    body.ddscore-help-modal-mobile .ddscore-modal-backdrop > .ddscore-modal--info,
    body.ddscore-help-modal-mobile dialog.ddscore-modal--info {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
    }
}

@media (max-width: 768px) {
    .ddscore-modal-close--desktop-only {
        display: none !important;
    }
}

@media (max-width: 900px) {
    html:has(.ddscore-modal-backdrop > .ddscore-modal--info),
    body:has(.ddscore-modal-backdrop > .ddscore-modal--info) {
        overflow: hidden;
    }

    body:has(.ddscore-modal-backdrop > .ddscore-modal--info) .ddscore-layout,
    body:has(.ddscore-modal-backdrop > .ddscore-modal--info) .ddscore-main,
    body:has(.ddscore-modal-backdrop > .ddscore-modal--info) .ddscore-dropzone-content,
    body:has(.ddscore-modal-backdrop > .ddscore-modal--info) .ddscore-dropzone-mobile-hint-row,
    body:has(.ddscore-modal-backdrop > .ddscore-modal--info) .ddscore-field-hint-wrap {
        contain: none;
        transform: none;
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: var(--dds-bg-primary) !important;
        overflow: hidden !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        z-index: 8000 !important;
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) > .ddscore-modal--info {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--dds-bg-card-surface) !important;
        z-index: 8010 !important;
    }

    @supports (height: 100svh) {
        .ddscore-modal-backdrop:has(> .ddscore-modal--info),
        .ddscore-modal-backdrop:has(> .ddscore-modal--info) > .ddscore-modal--info {
            height: 100svh !important;
            min-height: 100svh !important;
            max-height: 100svh !important;
        }
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) .ddscore-modal-close--desktop-only {
        display: none !important;
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) .ddscore-modal-header {
        flex: 0 0 auto;
        padding:
            max(1rem, env(safe-area-inset-top))
            max(1rem, env(safe-area-inset-right))
            1rem
            max(1rem, env(safe-area-inset-left));
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) .ddscore-info-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding:
            1rem
            max(1rem, env(safe-area-inset-right))
            1rem
            max(1rem, env(safe-area-inset-left));
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) .ddscore-modal-footer--actions {
        position: relative !important;
        bottom: auto !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
        padding:
            0.75rem
            max(1rem, env(safe-area-inset-right))
            max(1rem, env(safe-area-inset-bottom))
            max(1rem, env(safe-area-inset-left));
        background: var(--dds-bg-card-surface) !important;
        z-index: 1;
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal--info) .ddscore-modal-footer--actions .ddscore-btn {
        width: 100%;
        max-width: 28rem;
        min-height: 3rem;
    }
}

.ddscore-info-modal-body {
    margin: 0;
    padding: 1.1rem 1.35rem 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
    white-space: normal;
}

.ddscore-info-modal-lead-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-info-modal-para {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.ddscore-info-modal-body > .ddscore-info-modal-para:last-of-type {
    margin-bottom: 0;
}

.ddscore-modal--info .ddscore-modal-footer--actions {
    position: static;
    margin-top: 0.1rem;
    padding: 0.85rem 1.35rem 1.25rem;
    border-top: 1px solid var(--dds-border);
    background: transparent;
    align-items: center;
    justify-content: center;
}

.ddscore-modal--info .ddscore-modal-footer--actions .ddscore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8rem;
    min-height: 2.75rem;
    padding: 0.62rem 1.45rem;
    font-size: 1rem;
    line-height: 1;
}

.ddscore-executive-summary-card {
    margin-top: 1.5625rem;
}

.ddscore-executive-summary-layout {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "exec-text exec-gauge";
    gap: 1.5625rem 2.1875rem;
    align-items: start;
}

.ddscore-executive-summary-text {
    grid-area: exec-text;
    min-width: 0;
}

.ddscore-executive-summary-text .ddscore-executive-summary-para {
    margin: 0 0 1rem;
}

.ddscore-executive-summary-text .ddscore-executive-summary-para:last-child {
    margin-bottom: 0;
}

.ddscore-executive-summary-gauge {
    grid-area: exec-gauge;
    justify-self: end;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.ddscore-report .ddscore-gauge-with-help {
    overflow: visible;
}

.ddscore-report .ddscore-executive-summary-layout {
    column-gap: 1.5rem;
}

/* Field confidence: same card shell + title band as Executive Summary / other report cards */
.ddscore-confidence-box.ddscore-card {
    text-align: left;
}

.ddscore-confidence-box .ddscore-confidence-narrative {
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

.ddscore-confidence-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.3;
    margin-top: 0.2rem;
}

.ddscore-confidence--high {
    color: var(--dds-conf-high);
    background: var(--dds-conf-high-bg);
}

.ddscore-confidence--good {
    color: var(--dds-conf-good);
    background: var(--dds-conf-good-bg);
}

.ddscore-confidence--medium {
    color: var(--dds-conf-medium);
    background: var(--dds-conf-medium-bg);
}

.ddscore-confidence--low {
    color: var(--dds-conf-low);
    background: var(--dds-conf-low-bg);
}

.ddscore-subclaim-li {
    margin-bottom: 0.35rem;
}

.ddscore-subclaim-text {
    display: inline;
}

.ddscore-subclaim-confidence {
    margin-left: 0.45rem;
    vertical-align: middle;
}

.ddscore-subclaim-uncertainty {
    margin: 0.35rem 0 0;
    padding-left: 0.35rem;
    border-left: 2px solid var(--dds-border);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--dds-text-secondary);
}

.ddscore-gauge--hero {
    width: 200px;
    height: 200px;
}

.ddscore-gauge--hero .ddscore-gauge-value {
    font-size: 2.5rem;
}

.ddscore-gauge--hero .ddscore-gauge-label {
    font-size: 0.88rem;
    max-width: 7rem;
    text-align: center;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ddscore-gauge--compact {
    width: 110px;
    height: 110px;
}

.ddscore-gauge--compact .ddscore-gauge-value {
    font-size: 1.6rem;
}

.ddscore-gauge--compact .ddscore-gauge-label {
    font-size: 0.7rem;
    max-width: 5.6rem;
    text-align: center;
    line-height: 1.15;
    word-break: break-word;
}

/* ---- Methodology modal ---- */
.ddscore-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 8000;
    overflow-y: auto;
    overflow-x: hidden;
    padding: max(0.5rem, env(safe-area-inset-top)) 0.5rem max(0.5rem, env(safe-area-inset-bottom));
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    white-space: normal;
}

.ddscore-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 8010;
    width: min(560px, calc(100vw - 1.5rem));
    max-height: min(85vh, calc(100dvh - 2rem));
    overflow: auto;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    box-shadow: var(--dds-shadow);
    white-space: normal;
}

dialog.ddscore-modal {
    padding: 0;
    color: var(--dds-text-primary);
}

dialog.ddscore-modal::backdrop {
    background: var(--dds-overlay-backdrop);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Modal as direct child of backdrop (problem report, share, admin detail): scroll overlay instead of clipping tall forms */
.ddscore-modal-backdrop:has(> .ddscore-modal) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
}

.ddscore-modal-backdrop:has(> .ddscore-modal) > .ddscore-modal {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    flex-shrink: 0;
    margin: max(1rem, env(safe-area-inset-top)) auto max(1.25rem, env(safe-area-inset-bottom));
}

/* Tall problem form: use full viewport height (safe areas only); inner body scrolls. */
.ddscore-modal-backdrop:has(> .ddscore-problem-report-modal) {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    justify-content: flex-start;
    overflow: hidden;
}

.ddscore-modal-backdrop:has(> .ddscore-problem-report-modal) > .ddscore-problem-report-modal {
    margin: 0.5rem auto;
    flex: 1 1 auto;
    min-height: 0;
    align-self: center;
}

.ddscore-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-modal-title {
    margin: 0;
    font-size: 1.15rem;
}

.ddscore-modal-close {
    font-size: 1.5rem;
    line-height: 1;
}

/* Even hit box + centered glyph (× metrics look lopsided inside asymmetric padding) */
.ddscore-modal-header .ddscore-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    transform-origin: center;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.ddscore-modal-header .ddscore-modal-close:hover {
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-modal-header .ddscore-modal-close:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

/* Same insets as .ddscore-modal-body (share dialog, admin modals). Problem report uses .ddscore-problem-report-modal-body with its own horizontal/bottom only. */
.ddscore-modal > .ddscore-modal-content:not(.ddscore-problem-report-modal-body) {
    padding: 1rem 1.25rem 1.25rem;
    box-sizing: border-box;
}

.ddscore-modal-body {
    padding: 1rem 1.25rem 1.25rem;
}

@media (max-width: 768px) {
    .ddscore-modal-backdrop {
        background: var(--dds-bg-primary);
        padding: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .ddscore-modal-backdrop:has(> .ddscore-modal) {
        align-items: stretch;
        justify-content: flex-start;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        padding: 0;
        background: var(--dds-bg-primary);
        overflow: hidden;
    }

    .ddscore-modal,
    .ddscore-modal.ddscore-modal--info,
    .ddscore-modal.ddscore-modal--research,
    .ddscore-modal.ddscore-share-dialog,
    .ddscore-modal.ddscore-credits-exhausted-modal,
    .ddscore-modal.ddscore-problem-report-detail-modal,
    .ddscore-modal-backdrop:has(> .ddscore-modal) > .ddscore-modal {
        position: fixed;
        inset: 0;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--dds-bg-card-surface);
    }

    @supports (height: 100svh) {
        .ddscore-modal-backdrop:has(> .ddscore-modal),
        .ddscore-modal,
        .ddscore-modal-backdrop:has(> .ddscore-modal) > .ddscore-modal {
            height: 100svh;
            min-height: 100svh;
            max-height: 100svh;
        }
    }

    .ddscore-modal-header {
        flex-shrink: 0;
        padding:
            max(1rem, env(safe-area-inset-top))
            max(1rem, env(safe-area-inset-right))
            1rem
            max(1rem, env(safe-area-inset-left));
    }

    .ddscore-modal > .ddscore-modal-content,
    .ddscore-modal > .ddscore-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .ddscore-modal > .ddscore-modal-content:not(.ddscore-problem-report-modal-body),
    .ddscore-modal-body {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .ddscore-modal-footer,
    .ddscore-modal-footer--actions {
        flex-shrink: 0;
        padding:
            0.85rem
            max(1rem, env(safe-area-inset-right))
            max(1rem, env(safe-area-inset-bottom))
            max(1rem, env(safe-area-inset-left));
        background: var(--dds-bg-card-surface);
    }
}

.ddscore-modal--research {
    width: min(1600px, 95vw);
    max-height: 94vh;
    min-height: min(72vh, 920px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-height: 640px) {
    .ddscore-modal--research {
        min-height: 0;
    }
}

.ddscore-modal--research .ddscore-modal-header {
    flex-shrink: 0;
}

.ddscore-research-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.ddscore-research-intro {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
    margin: 0;
}

.ddscore-research-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ddscore-research-pre {
    margin: 0;
    padding: 0.75rem 1rem;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
    background: var(--dds-bg-input);
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: normal;
    max-width: 100%;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
    tab-size: 2;
}

/* Custom scrollbar for research modal - dark theme */
.ddscore-research-pre::-webkit-scrollbar {
    width: 10px;
}

.ddscore-research-pre::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

.ddscore-research-pre::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

.ddscore-research-pre::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.ddscore-research-pre::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.4);
}

/* Firefox scrollbar */
.ddscore-research-pre {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2);
}

.ddscore-methodology-lead,
.ddscore-methodology-foot {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
}

.ddscore-methodology-bands {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0;
}

.ddscore-methodology-band {
    padding: 1rem;
    border-radius: var(--dds-radius);
    border: 1px solid var(--dds-border);
}

.ddscore-methodology-band h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.ddscore-methodology-band p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
}

.ddscore-methodology-band.red {
    border-color: var(--dds-score-poor);
}

.ddscore-methodology-band.mid {
    border-color: var(--dds-score-moderate);
}

.ddscore-methodology-band.green {
    border-color: var(--dds-score-excellent);
}

/* ---- Go deeper (section upsell) ---- */
.ddscore-go-deeper-wrap {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dds-border);
}

.ddscore-go-deeper-mobile {
    display: none;
}

.ddscore-go-deeper-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--dds-accent-secondary);
}

.ddscore-go-deeper-panel {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ddscore-go-deeper-placeholder {
    width: 100%;
    max-width: 280px;
    height: 120px;
    border-radius: var(--dds-radius-sm);
    border: 1px dashed var(--dds-border-light);
    background: var(--dds-bg-secondary);
}

.ddscore-go-deeper-text {
    font-size: 0.88rem;
    color: var(--dds-text-secondary);
    margin: 0;
}

.ddscore-go-deeper-desktop {
    display: block;
}

@media (max-width: 768px) {
    .ddscore-go-deeper-mobile {
        display: block;
    }

    .ddscore-go-deeper-desktop {
        display: none;
    }

    .ddscore-executive-summary-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "exec-gauge"
            "exec-text";
        justify-items: center;
        max-width: 100%;
        min-width: 0;
    }

    .ddscore-executive-summary-text {
        justify-self: stretch;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
    }

    .ddscore-executive-summary-gauge {
        justify-self: center;
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ddscore-report .ddscore-executive-summary-card {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .ddscore-report .ddscore-executive-summary-gauge .ddscore-gauge-with-help,
    .ddscore-report .ddscore-executive-summary-gauge .ddscore-gauge-hover-zone {
        display: flex;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ddscore-report .ddscore-executive-summary-gauge .ddscore-gauge--hero {
        width: min(calc(100vw - 3rem), 300px);
        height: min(calc(100vw - 3rem), 300px);
        max-width: 100%;
    }

    .ddscore-traffic-light-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "traffic-gauge"
            "traffic-copy";
        justify-items: center;
    }

    .ddscore-traffic-light-copy {
        justify-self: stretch;
        width: 100%;
    }

    .ddscore-traffic-light-gauge {
        justify-self: center;
        align-items: center;
    }
}

.ddscore-structured-row {
    margin-top: 1rem;
}

.ddscore-structured-row-title {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.ddscore-structured-gauge {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.ddscore-structured-gauge .ddscore-structured-row-title {
    margin-bottom: 0;
}

.ddscore-plus-list li::marker {
    color: var(--dds-score-excellent);
}

.ddscore-minus-list li::marker {
    color: var(--dds-score-poor);
}

/* ============================================================
   Report Chat
   ============================================================ */

.ddscore-chat {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    font-family: var(--dds-font);
}

.ddscore-chat-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--dds-chat-toggle-bg);
    color: var(--dds-text-primary);
    border: none;
    border-radius: 2rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--dds-font);
    box-shadow: var(--dds-shadow-lg);
    transition: background 0.2s, transform 0.2s ease;
    transform-origin: center;
}

.ddscore-chat-toggle:hover {
    background: var(--dds-chat-toggle-hover);
    transform: translateY(-1px) scale(var(--dds-btn-hover-scale));
}

.ddscore-chat--expanded .ddscore-chat-toggle {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    right: calc(0.75rem + env(safe-area-inset-right, 0px));
    padding: 0.5rem;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.ddscore-chat-toggle-icon {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
}

.ddscore-chat-panel {
    width: 420px;
    max-height: 70vh;
    background: var(--dds-chat-bg);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    box-shadow: var(--dds-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ddscore-chat-header {
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--dds-border);
}

/* Reserve space for the floating close (X) button so title and question budget stay visible */
.ddscore-chat--expanded .ddscore-chat-header {
    padding-right: 3.5rem;
}

.ddscore-chat-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ddscore-chat--expanded .ddscore-chat-counter {
    margin-right: 0.25rem;
}

.ddscore-chat-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ddscore-chat-counter-bar {
    width: 60px;
    height: 6px;
    background: var(--dds-border);
    border-radius: 3px;
    overflow: hidden;
}

.ddscore-chat-counter-fill {
    height: 100%;
    min-width: 0;
    border-radius: 3px;
    background: var(--dds-score-excellent);
    transition: width 0.4s ease;
}

.ddscore-chat-counter-text {
    font-size: 0.75rem;
    color: var(--dds-text-muted);
    white-space: nowrap;
}

.ddscore-chat-limit-notice {
    text-align: center;
    padding: 1rem 1.5rem;
    margin: 0.75rem;
    background: var(--dds-border);
    border-radius: 8px;
    color: var(--dds-text-muted);
    font-size: 0.85rem;
}

.ddscore-chat-limit-notice i {
    margin-right: 0.5rem;
}

.ddscore-chat-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dds-text-primary);
    margin: 0 0 0.25rem;
}

.ddscore-chat-subtitle {
    font-size: 0.78rem;
    color: var(--dds-text-muted);
    margin: 0;
    line-height: 1.4;
}

.ddscore-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 200px;
    max-height: 50vh;
}

.ddscore-chat-empty {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
}

.ddscore-chat-empty p {
    margin: 0 0 0.75rem;
}

.ddscore-chat-suggested-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--dds-border);
    padding: 0.55rem 1rem 0.25rem;
    background: var(--dds-bg-secondary);
}

/* Same footer styling inside the scroll thread (after answer / intro), with clear separation above. */
.ddscore-chat-suggested-footer--in-messages {
    margin-top: 1rem;
    padding: 0.55rem 0 0.25rem;
    border-top: 1px solid var(--dds-border);
    background: var(--dds-bg-secondary);
    border-radius: var(--dds-radius-sm);
}

.ddscore-chat-intro-as-answer .ddscore-chat-msg-text p {
    margin: 0;
}

.ddscore-chat-suggested-footer-label {
    font-size: 0.7rem;
    color: var(--dds-text-muted);
    margin: 0 0 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ddscore-chat-examples {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ddscore-chat-example-btn {
    background: var(--dds-bg-card);
    color: var(--dds-text-accent);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-family: var(--dds-font);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, transform 0.2s ease;
    width: 100%;
    transform-origin: center;
}

.ddscore-chat-example-btn:hover:not(:disabled) {
    background: var(--dds-bg-card-hover);
    border-color: var(--dds-accent-primary);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-chat-msg {
    max-width: 88%;
    padding: 0.65rem 0.9rem;
    border-radius: var(--dds-radius-sm);
    font-size: 0.85rem;
    line-height: 1.55;
    position: relative;
}

.ddscore-chat-msg--user {
    align-self: flex-end;
    background: var(--dds-chat-msg-user-bg);
    color: var(--dds-text-primary);
    border-bottom-right-radius: 2px;
}

.ddscore-chat-msg--bot {
    align-self: flex-start;
    background: var(--dds-chat-msg-bot-bg);
    color: var(--dds-text-secondary);
    border-bottom-left-radius: 2px;
}

.ddscore-chat-msg-text p {
    margin: 0 0 0.5rem;
}

.ddscore-chat-msg-text p:last-child {
    margin-bottom: 0;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text h1,
.ddscore-chat-msg--bot .ddscore-chat-msg-text h2,
.ddscore-chat-msg--bot .ddscore-chat-msg-text h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dds-text-primary);
    margin: 0.75rem 0 0.4rem;
    line-height: 1.3;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text h1:first-child,
.ddscore-chat-msg--bot .ddscore-chat-msg-text h2:first-child,
.ddscore-chat-msg--bot .ddscore-chat-msg-text h3:first-child {
    margin-top: 0;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text ul,
.ddscore-chat-msg--bot .ddscore-chat-msg-text ol {
    margin: 0.35rem 0 0.5rem;
    padding-left: 1.25rem;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text li {
    margin: 0.2rem 0;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text blockquote {
    margin: 0.5rem 0;
    padding-left: 0.75rem;
    border-left: 3px solid var(--dds-border);
    color: var(--dds-text-muted);
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text a {
    color: var(--dds-text-accent);
    text-decoration: underline;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text code {
    font-size: 0.8em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: var(--dds-bg-card);
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text pre {
    margin: 0.5rem 0;
    padding: 0.5rem 0.65rem;
    overflow-x: auto;
    border-radius: var(--dds-radius-sm);
    background: var(--dds-bg-card);
    font-size: 0.78rem;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.8rem;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text th,
.ddscore-chat-msg--bot .ddscore-chat-msg-text td {
    border: 1px solid var(--dds-border);
    padding: 0.35rem 0.5rem;
    text-align: left;
}

.ddscore-chat-msg--bot .ddscore-chat-msg-text hr {
    border: none;
    border-top: 1px solid var(--dds-border);
    margin: 0.65rem 0;
}

.ddscore-chat-web-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--dds-text-accent);
    margin-bottom: 0.3rem;
    opacity: 0.75;
}

.ddscore-chat-msg--refused {
    border-left: 3px solid var(--dds-score-warning);
    opacity: 0.9;
}

.ddscore-chat-refused-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--dds-score-warning);
    margin-bottom: 0.3rem;
    opacity: 0.85;
}

.ddscore-chat-msg--loading {
    padding: 0.75rem 1rem;
}

.ddscore-chat-typing {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ddscore-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dds-text-muted);
    animation: ddscore-typing-dot 1.4s infinite ease-in-out both;
}

.ddscore-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.ddscore-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ddscore-typing-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.ddscore-chat-input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--dds-border);
    align-items: flex-end;
}

.ddscore-chat-input {
    flex: 1;
    background: var(--dds-chat-input-bg);
    color: var(--dds-text-primary);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-family: var(--dds-font);
    resize: none;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.4;
}

.ddscore-chat-input:focus {
    border-color: var(--dds-accent-primary);
}

.ddscore-chat-input::placeholder {
    color: var(--dds-text-placeholder);
}

.ddscore-chat-send {
    background: var(--dds-accent-primary);
    color: var(--dds-text-primary);
    border: none;
    border-radius: var(--dds-radius-sm);
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, opacity 0.15s, transform 0.2s ease;
    flex-shrink: 0;
    transform-origin: center;
}

.ddscore-chat-send:hover:not(:disabled) {
    background: var(--dds-accent-primary-hover);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Mobile: full-width chat panel at bottom */
@media (max-width: 600px) {
    .ddscore-chat {
        bottom: 0;
        right: 0;
        left: 0;
    }

    .ddscore-chat:not(.ddscore-chat--expanded) {
        bottom: 1rem;
        right: 1rem;
        left: auto;
    }

    .ddscore-chat-panel {
        width: 100%;
        max-height: 75vh;
        border-radius: var(--dds-radius) var(--dds-radius) 0 0;
        border-bottom: none;
    }

    /* Open chat uses full viewport; close with the X (same as desktop) */
    .ddscore-chat--expanded {
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .ddscore-chat--expanded .ddscore-chat-header {
        padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
        padding-right: calc(3.5rem + env(safe-area-inset-right, 0px));
    }

    .ddscore-chat--expanded .ddscore-chat-input-area {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .ddscore-chat--expanded .ddscore-chat-panel {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        min-height: 0;
        border-radius: 0;
        border-bottom: none;
        display: flex;
        flex-direction: column;
    }

    .ddscore-chat--expanded .ddscore-chat-messages {
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
    }

    .ddscore-chat-toggle-label {
        display: none;
    }

    .ddscore-chat:not(.ddscore-chat--expanded) .ddscore-chat-toggle {
        border-radius: 50%;
        width: 3rem;
        height: 3rem;
        padding: 0;
        justify-content: center;
    }
}

/* Tablet/desktop: side panel layout when screen is wide enough */
@media (min-width: 1200px) {
    .ddscore-chat-panel {
        width: 460px;
        max-height: 75vh;
    }
}

/* Large screen: wider chat panel for high-res displays */
@media (min-width: 1800px) {
    .ddscore-chat-panel {
        width: 540px;
    }
}

/* ── Simple tier: band-label gauge (circle) ── */
.ddscore-trial-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    border-color: var(--dds-upsell-border);
    background: var(--dds-upsell-bg);
}

/* Stacked copy + centered primary CTA (not a horizontal strip with the title). */
.ddscore-simple-locked-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
    border-color: var(--dds-upsell-border);
    background: var(--dds-upsell-bg);
}

.ddscore-simple-locked-actions > a.ddscore-btn,
.ddscore-simple-locked-actions > button.ddscore-btn {
    align-self: center;
}

/* Bottom report row: Share (optional) -> PDF -> New Report */
.ddscore-report-end-actions .ddscore-report-end-print {
    flex-shrink: 0;
}

.ddscore-report-pdf-mobile-action {
    display: none;
    text-decoration: none;
}

@media (max-width: 768px) {
    .ddscore-report-pdf-desktop-action {
        display: none;
    }

    .ddscore-report-pdf-mobile-action {
        display: inline-flex;
    }
}

.ddscore-trial-preview-banner p,
.ddscore-simple-locked-actions p {
    color: var(--dds-text-secondary);
    margin-top: 0.5rem;
}

.ddscore-trial-preview-banner-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.ddscore-trial-preview-banner-cta > a.ddscore-btn {
    justify-content: center;
    text-align: center;
}

.ddscore-trial-example-report-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dds-accent-secondary);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
}

.ddscore-trial-example-report-link:hover {
    color: var(--dds-accent-primary);
}

@media (max-width: 640px) {
    .ddscore-trial-preview-banner {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
}

.ddscore-gauge-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid currentColor;
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
}

.ddscore-report-score-graph-gauge-link .ddscore-gauge-simple {
    width: var(--sg-gauge-size);
    height: var(--sg-gauge-size);
    border-width: 2px;
}

.ddscore-gauge-simple-label {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: inherit;
    padding: 0.25rem;
}

.ddscore-report-score-graph-gauge-link .ddscore-gauge-simple-label {
    font-size: clamp(0.52rem, calc(var(--sg-gauge-size) * 0.105), 0.88rem);
}

.ddscore-band-green {
    color: var(--dds-score-excellent);
    border-color: var(--dds-score-excellent);
    background: rgba(16, 185, 129, 0.10);
}

.ddscore-band-yellow {
    color: var(--dds-score-moderate);
    border-color: var(--dds-score-moderate);
    background: rgba(245, 158, 11, 0.10);
}

.ddscore-band-red {
    color: var(--dds-score-poor);
    border-color: var(--dds-score-poor);
    background: rgba(239, 68, 68, 0.10);
}

/* ── Simple tier: blurred narrative with gradient fade ── */
.ddscore-blur-wrap {
    position: relative;
    overflow: hidden;
}

.ddscore-blur-content {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Simple tier: blur narrative and data cells only; keep row/section titles (h4, first col labels) sharp. */
.ddscore-blur-text-only .ddscore-section-narrative,
.ddscore-blur-text-only .ddscore-plus-list > li,
.ddscore-blur-text-only .ddscore-minus-list > li,
.ddscore-blur-text-only .ddscore-subclaim-text,
.ddscore-blur-text-only .ddscore-subclaim-uncertainty,
.ddscore-blur-text-only .ddscore-team-member-header,
.ddscore-blur-text-only .ddscore-team-member p,
.ddscore-blur-text-only .ddscore-detail-value,
.ddscore-blur-text-only .ddscore-commercial-prose,
.ddscore-blur-text-only .ddscore-deck-verdict,
.ddscore-blur-text-only .ddscore-deck-observed-table tbody td,
.ddscore-blur-text-only .ddscore-table:not(.ddscore-financial-metrics) tbody td,
.ddscore-blur-text-only .ddscore-financial-metrics tbody td:not(:first-child),
.ddscore-blur-text-only .ddscore-matrix-dot span,
.ddscore-blur-text-only .ddscore-section-list > ul > li:not(.ddscore-subclaim-li) {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    user-select: none;
    -webkit-user-select: none;
}

.ddscore-blur-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to bottom, transparent, var(--dds-bg-card) 90%);
    pointer-events: none;
}

/* ── Simple tier: upsell CTA ── */
.ddscore-upsell-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    text-align: center;
}

.ddscore-upsell-cta-text {
    font-size: 0.9rem;
    color: var(--dds-text-secondary);
}

.ddscore-shared-privacy-cta {
    gap: 0.75rem;
}

.ddscore-shared-privacy-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid color-mix(in srgb, var(--dds-accent-secondary) 44%, transparent);
    border-radius: 999px;
    color: var(--dds-accent-secondary);
    background: color-mix(in srgb, var(--dds-accent-primary) 16%, transparent);
    box-shadow: var(--dds-hover-glow-tight);
}

.ddscore-shared-privacy-lock i {
    font-size: 1rem;
    line-height: 1;
}

/* Print-only analyst name: hidden on screen, visible top-right in print. */
.ddscore-print-analyst {
    display: none;
}

/* ── Print: match on-screen report (colors + layout); strip only nav links and auth button ── */
@media print {
    /*
     * Page box: margin 0 so the sheet stays edge-to-edge dark when backgrounds are printed.
     * The report's visible inset comes from --dds-print-content-gutter on .ddscore-main/header/footer.
     */
    :root {
        --dds-print-content-gutter: 12mm;
    }

    html {
        font-size: 10.5pt;
    }

    @page {
        size: A3;
        margin: 0;
    }

    /* Keep dark theme and fills when the browser prints background graphics. */
    html,
    body,
    .ddscore-bg {
        background-color: var(--dds-bg-primary) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.ddscore-bg::before {
        display: none !important;
    }

    .ddscore-nav-desktop,
    .ddscore-nav-mobile,
    .ddscore-header-actions a.ddscore-btn,
    .ddscore-hamburger,
    .ddscore-chat,
    .ddscore-credits,
    .ddscore-report-mobile-outline,
    .ddscore-report-hero-actions,
    .ddscore-flow-breadcrumb,
    .ddscore-user-name,
    .ddscore-report-download,
    .ddscore-report-end-actions,
    .ddscore-report-chat,
    .ddscore-share-btn,
    .ddscore-score-overview-footer-actions,
    .ddscore-social-share,
    .ddscore-report .ddscore-field-hint-wrap,
    .ddscore-report .ddscore-field-hint-tooltip,
    .ddscore-report .ddscore-gauge-info-chip,
    .ddscore-report .ddscore-gauge-tooltip,
    .ddscore-report .ddscore-modal-backdrop:has(.ddscore-modal--info),
    .ddscore-modal-backdrop:has(.ddscore-share-dialog),
    .ddscore-share-dialog {
        display: none !important;
    }

    .ddscore-gauge--animated-hero .ddscore-gauge-circle::after {
        display: none;
    }

    .ddscore-gauge--animated-hero .ddscore-gauge-circle {
        animation: none !important;
    }

    .ddscore-print-analyst {
        display: block;
        text-align: right;
        padding: 2mm var(--dds-print-content-gutter) 0;
        font-size: 0.65rem;
        color: var(--dds-text-muted);
        letter-spacing: 0.02em;
        opacity: 0.7;
    }

    .ddscore-header-shell,
    .ddscore-header {
        position: static;
        top: auto;
    }

    .ddscore-header {
        backdrop-filter: none;
    }

    .ddscore-header-inner {
        max-width: 100%;
        margin: 0;
        padding: 0.75rem var(--dds-print-content-gutter);
        box-sizing: border-box;
    }

    .ddscore-layout {
        min-height: auto;
        background-color: var(--dds-bg-primary);
    }

    /* Full-width column; inner horizontal padding = safe text area (dark still bleeds to page edge). */
    .ddscore-main {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0 var(--dds-print-content-gutter);
        box-sizing: border-box;
    }

    .ddscore-report {
        max-width: 100%;
        margin: 0;
        padding: 0;
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .ddscore-report h1,
    .ddscore-report h2,
    .ddscore-report h3,
    .ddscore-report .ddscore-card-title {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .ddscore-footer-inner {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ddscore-footer-col {
        display: none !important;
    }

    .ddscore-footer-print-extras {
        display: block !important;
        grid-column: 1 / -1;
        border-top: 1px solid var(--dds-border);
        padding-top: 0.65rem;
        margin-top: 0.15rem;
    }

    .ddscore-footer-print-line {
        margin: 0 0 0.35rem;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--dds-text-muted);
        text-align: center;
    }

    .ddscore-footer-print-line:last-child {
        margin-bottom: 0;
    }

    .ddscore-footer-print-url {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: 0.68rem;
        word-break: break-all;
    }

    .ddscore-footer-print-page {
        display: block !important;
        margin-top: 0.45rem;
        margin-bottom: 0;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--dds-text-muted);
    }

    .ddscore-footer {
        margin-top: 1.25rem;
        padding: 1rem var(--dds-print-content-gutter) 1rem;
        box-sizing: border-box;
        break-inside: avoid;
    }

    /*
     * Default: keep cards together. But cards that are intrinsically taller than a single A3 page
     * (score breakdown, glossary, competitor matrix, deck structure) must ALLOW an inner break —
     * otherwise Chromium is forced to break at an arbitrary pixel and leaves a huge blank on the
     * preceding page. For those, we re-enable break-inside on the wrapper and instead protect the
     * smallest meaningful unit (a score-card row, a glossary entry, a matrix row).
     */
    .ddscore-card {
        break-inside: avoid;
    }

    .ddscore-executive-summary-card {
        break-inside: avoid;
    }

    h2, h3, h4 {
        break-after: avoid;
    }

    table, figure, .ddscore-competitor-matrix {
        break-inside: auto;
    }

    .ddscore-competitor-matrix tr,
    table tr {
        break-inside: avoid;
    }

    /*
     * Score breakdown: outer .ddscore-card wraps 8-9 gauges and exceeds one page. Allow the card to
     * break, but keep each gauge + its description paragraph together.
     * :has() picks the specific card that contains score-cards without needing a new class in markup.
     */
    .ddscore-score-grid,
    .ddscore-card:has(> .ddscore-score-grid) {
        break-inside: auto;
    }

    .ddscore-score-card {
        break-inside: avoid;
    }

    /* Score graph + radar card: fits on one page; never slice it. */
    .ddscore-report-score-graph-card {
        break-inside: avoid;
    }

    /*
     * Continuous-flow print layout.
     *
     * Content flows top-to-bottom like the on-screen report. A page break
     * only happens when an element no longer fits on the current page
     * (natural fragmentation). We do NOT force break-before:page on every
     * card - that wasted most of each sheet and created blank pages.
     *
     * break-inside:avoid on .ddscore-card (set above) already keeps short
     * cards together; tall ones fragment naturally. The only intentional
     * forced page break is before the final summary/traffic-light card so
     * the verdict always starts fresh.
     */
    .ddscore-report-pdf-root > .ddscore-card,
    .ddscore-report-pdf-root > .ddscore-report-hero {
        break-before: auto;
        min-height: 0;
        padding-top: 3mm;
        padding-bottom: 3mm;
        box-sizing: border-box;
    }

    /* Verdict block (not the last .ddscore-card — that is feedback/methodology). */
    .ddscore-report-pdf-root > .ddscore-traffic-light {
        break-before: page;
    }

    /* Glossary is a long <dl>; protect each term/definition pair. */
    .ddscore-glossary {
        break-inside: auto;
    }

    .ddscore-glossary-item {
        break-inside: avoid;
    }

    .ddscore-glossary dt {
        break-after: avoid;
    }

    /* Observed-structure table (deck structure) and exit-scenarios table: allow paging, never tear a row. */
    .ddscore-deck-observed-table,
    .ddscore-table--scenarios {
        break-inside: auto;
    }

    .ddscore-deck-observed-table tr,
    .ddscore-table--scenarios tr {
        break-inside: avoid;
    }

    /* Strengths / Areas for Development / Risks blocks: keep each block intact so the heading never
       orphans from its bullet list. */
    .ddscore-section-list {
        break-inside: avoid;
    }

    /* Long narrative paragraphs — avoid a break immediately after the preceding heading. */
    .ddscore-section-narrative {
        break-inside: auto;
        orphans: 2;
        widows: 2;
    }

    /*
     * Per-section report cards (dimension blocks): keep the same card shell in print/PDF so every
     * section has a visible background instead of alternating between cards and plain page text.
     */
    .ddscore-report .ddscore-report-section-card.ddscore-card {
        background: var(--dds-bg-card-surface) !important;
        border: 1px solid var(--dds-border) !important;
        box-shadow: var(--dds-shadow) !important;
        border-radius: var(--dds-radius-lg) !important;
        padding: 2rem !important;
        margin: 1.5rem 0 !important;
        break-inside: auto !important;
    }

    .ddscore-report .ddscore-report-section-card.ddscore-card::before {
        display: block !important;
    }

    .ddscore-report .ddscore-report-section-card .ddscore-score-card {
        background: var(--dds-bg-score-card-surface) !important;
        border: 1px solid var(--dds-border) !important;
        box-shadow: none !important;
        border-radius: var(--dds-radius-lg) !important;
        padding: 1rem !important;
        gap: 1.25rem !important;
        break-inside: avoid;
    }

    .ddscore-report .ddscore-report-section-card .ddscore-score-card-title {
        background: none !important;
        padding: 0 0 0.35rem !important;
        margin-bottom: 0.25rem !important;
    }

    a {
        text-decoration: none;
        color: inherit;
    }
}

/* PDF export wrapper only (prepended by DDScoreHtmlToPdfRenderer; not used in the Blazor DOM). */
.ddscore-pdf-export-document,
.ddscore-pdf-export-document .ddscore-layout,
.ddscore-pdf-export-document .ddscore-main,
.ddscore-pdf-export-document .ddscore-report,
.ddscore-pdf-export-document .ddscore-report-pdf-root {
    background: var(--dds-bg-primary) !important;
    background-image: none !important;
}

.ddscore-pdf-export-document .ddscore-card,
.ddscore-pdf-export-document .ddscore-report-section-card.ddscore-card,
.ddscore-pdf-export-document .ddscore-executive-summary-card,
.ddscore-pdf-export-document .ddscore-confidence-box,
.ddscore-pdf-export-document .ddscore-methodology-box,
.ddscore-pdf-export-document .ddscore-traffic-light,
.ddscore-pdf-export-document .ddscore-trial-preview-banner,
.ddscore-pdf-export-document .ddscore-simple-locked-actions {
    background: var(--dds-bg-card) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.ddscore-pdf-export-document .ddscore-score-card,
.ddscore-pdf-export-document .ddscore-report-section-card .ddscore-score-card,
.ddscore-pdf-export-document .ddscore-report-score-graph-card {
    background: var(--dds-bg-input) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.ddscore-pdf-export-document .ddscore-card::before,
.ddscore-pdf-export-document .ddscore-methodology-box::before,
.ddscore-pdf-export-document .ddscore-traffic-light::before {
    background: var(--dds-accent-primary) !important;
    background-image: none !important;
    opacity: 1 !important;
}

.ddscore-pdf-export-document .ddscore-card,
.ddscore-pdf-export-document .ddscore-score-card,
.ddscore-pdf-export-document .ddscore-gauge-circle,
.ddscore-pdf-export-document .ddscore-report-score-graph-card,
.ddscore-pdf-export-document .ddscore-report-score-graph-header,
.ddscore-pdf-export-document .ddscore-section-list,
.ddscore-pdf-export-document .ddscore-table,
.ddscore-pdf-export-document .ddscore-methodology-box,
.ddscore-pdf-export-document .ddscore-traffic-light {
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.ddscore-pdf-export-document .ddscore-radar-glow,
.ddscore-pdf-export-document .ddscore-radar-area-sheen,
.ddscore-pdf-export-document .ddscore-gauge--hero .ddscore-gauge-circle::before,
.ddscore-pdf-export-document .ddscore-gauge--animated-hero .ddscore-gauge-circle::after {
    display: none !important;
}

.ddscore-pdf-export-header {
    padding: 0 0 0.75rem 0;
    margin: 0 0 1rem 0;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-pdf-export-header-logo {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
}

.ddscore-pdf-export-header--text-only {
    font-family: var(--dds-font);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.25rem 0 0.75rem 0;
}

/* How DDScore works (public explainer); shell: .ddscore-page-body on root */

.ddscore-works-header {
    margin-bottom: 2rem;
}

.ddscore-works-content--modal {
    padding: 0;
}

.ddscore-works-content--modal .ddscore-works-header {
    margin-bottom: 1.5rem;
}

.ddscore-works-title {
    max-width: 100%;
    font-size: clamp(1.15rem, 0.42rem + 3.5vw, 1.85rem);
    font-weight: 700;
    color: var(--dds-text-primary);
    margin: 0 0 0.75rem;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-works-title {
        font-size: clamp(1.15rem, 0.42rem + 6.25cqi, 1.85rem);
    }
}

.ddscore-works-lead {
    color: var(--dds-text-secondary);
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0;
}

.ddscore-works-section {
    margin-bottom: 1.75rem;
}

.ddscore-works-h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dds-text-primary);
    margin: 0 0 0.65rem;
}

.ddscore-works-section p {
    color: var(--dds-text-secondary);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.ddscore-works-section p:last-child {
    margin-bottom: 0;
}

.ddscore-works-list {
    margin: 0.5rem 0 0.75rem 1.25rem;
    padding: 0;
    color: var(--dds-text-secondary);
    line-height: 1.55;
}

.ddscore-works-list li {
    margin-bottom: 0.5rem;
}

.ddscore-works-callout {
    background: var(--dds-bg-card);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    padding: 1rem 1.25rem;
}

.ddscore-works-disclaimer {
    border-top: 1px solid var(--dds-border);
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.ddscore-works-disclaimer-text {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--dds-text-muted);
    line-height: 1.55;
}

.ddscore-works-back {
    margin-top: 2rem;
    margin-bottom: 0;
}

.ddscore-works-back-link {
    color: var(--dds-text-accent);
    font-weight: 600;
}

.ddscore-works-back-link:hover {
    text-decoration: underline;
}

/* How it works — interactive score explorer (see js/ddscore-works-score-explorer.js) */
.ddscore-works-explorer-root {
    background: var(--dds-bg-card);
    border: 1px solid color-mix(in srgb, var(--dds-border) 70%, transparent);
    border-radius: var(--dds-radius);
    padding: 1.25rem 1.35rem 1.35rem;
    margin-top: 0.5rem;
}

.ddscore-works-explorer-root--compact {
    padding: 0.85rem 0.95rem 1rem;
    margin-top: 0;
}

.ddscore-works-explorer-root--compact .ddscore-works-explorer__zones {
    gap: 0.55rem 0.65rem;
    margin-bottom: 1rem;
}

.ddscore-works-explorer-root--compact .ddscore-works-explorer__zone {
    padding: 0.55rem 0.5rem 0.45rem;
}

.ddscore-works-explorer-root--compact .ddscore-works-explorer__footnote {
    margin-top: 0.65rem;
    padding: 0.65rem 0.75rem;
}

/* Fixed examples: smaller bar, dashed frame, ribbon (not the full interactive tool) */
.ddscore-works-explorer-root--illustration {
    --dds-works-explorer-bar-height: 1.25rem;
    --dds-works-explorer-summary-min-height: 2.35rem;
    --dds-works-explorer-zone-leader-height: 0.875rem;
    --dds-works-explorer-tick-line-width: 2px;
    padding: 0.55rem 0.65rem 0.65rem;
    margin-top: 0;
    border-style: dashed;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--dds-border) 75%, transparent);
}

.ddscore-works-explorer-root--illustration.ddscore-works-explorer-root--compact {
    padding: 0.45rem 0.55rem 0.55rem;
    min-height: 295px;
}

.ddscore-works-explorer__illustration-ribbon {
    margin: 0 0 0.5rem;
    padding: 0.28rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--dds-text-secondary);
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-bg-primary) 55%, var(--dds-bg-card));
    border: 1px solid color-mix(in srgb, var(--dds-border) 50%, transparent);
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__chrome {
    margin-bottom: 0.45rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__card-title {
    font-size: 0.88rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__status {
    font-size: 0.68rem;
    gap: 0.35rem 0.75rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__summary {
    font-size: 0.78rem;
    line-height: 1.45;
    min-height: 3.2rem;
    margin-bottom: 0.75rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__zones {
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.65rem;
    min-height: 150px;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__zone {
    padding: 0.45rem 0.4rem 0.35rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__zone-title {
    font-size: 0.62rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__zone-copy {
    font-size: 0.65rem;
    line-height: 1.35;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__track-area {
    padding-bottom: 1.35rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__marker-badge {
    font-size: 0.62rem;
    padding: 0.2rem 0.48rem;
    background: color-mix(in srgb, var(--dds-bg-card) 94%, var(--dds-bg-primary));
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__marker-line {
    height: calc(var(--dds-works-explorer-bar-height) + 0.55rem);
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__tick-layer {
    height: calc(var(--dds-works-explorer-bar-height) + 0.95rem);
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__tick-label {
    font-size: 0.62rem;
    margin-top: 0.2rem;
}

.ddscore-works-explorer-root--illustration .ddscore-works-explorer__footnote {
    display: none;
}

/* Locked mode for reports - display only, no interaction */
.ddscore-works-explorer-root--locked {
    border-style: solid;
    border-width: 1px;
    border-color: var(--dds-border);
    background: var(--dds-bg-secondary);
}

.ddscore-works-explorer-root--locked .ddscore-works-explorer__card-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.ddscore-works-explorer-root--locked .ddscore-works-explorer__summary {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.ddscore-works-explorer-root--locked .ddscore-works-explorer__zones {
    gap: 0.5rem 0.6rem;
    margin-bottom: 0.75rem;
}

.ddscore-works-explorer-root--locked .ddscore-works-explorer__zone {
    padding: 0.5rem 0.45rem 0.4rem;
    border-radius: var(--dds-radius-sm);
}

.ddscore-works-explorer-root--locked .ddscore-works-explorer__zone-title {
    font-size: 0.7rem;
    font-weight: 600;
}

.ddscore-works-explorer-root--locked .ddscore-works-explorer__zone-copy {
    font-size: 0.72rem;
    line-height: 1.4;
}

[data-ddscore-explorer-static="1"] .ddscore-works-explorer__hint {
    display: none;
}

[data-ddscore-explorer-static="1"] .ddscore-works-explorer__track-area {
    cursor: default;
    touch-action: auto;
    user-select: text;
    pointer-events: none;
}

@media print {
    .ddscore-works-explorer-root {
        margin: 5mm 0;
        padding: 8mm;
        background: var(--dds-bg-primary);
        border: 1px solid var(--dds-border);
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .ddscore-works-explorer__zone {
        break-inside: avoid;
    }
}

.ddscore-works-explorer__intro {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.ddscore-works-explorer__chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.65rem 1.25rem;
    margin-bottom: 0.65rem;
}

.ddscore-works-explorer__card-title {
    margin: 0;
    font-size: 1.05rem;
    font-family: var(--dds-heading-font-family);
    font-weight: var(--dds-heading-font-weight);
    color: var(--dds-text-primary);
}

.ddscore-works-explorer__status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.82rem;
    color: var(--dds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ddscore-works-explorer__status-item {
    white-space: nowrap;
}

.ddscore-works-explorer__status-value,
.ddscore-works-explorer__profile-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 700;
    color: var(--dds-text-primary);
    letter-spacing: 0.02em;
}

.ddscore-works-explorer__summary {
    min-height: var(--dds-works-explorer-summary-min-height);
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}

.ddscore-works-explorer__zones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem 1rem;
    margin-bottom: 1.35rem;
}

.ddscore-works-explorer__zone {
    border: 1px solid color-mix(in srgb, var(--dds-border) 55%, transparent);
    border-radius: var(--dds-radius-sm);
    padding: 0.75rem 0.65rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

.ddscore-works-explorer__zone--active {
    border: 1px solid color-mix(in srgb, var(--dds-border) 42%, transparent);
    background: color-mix(in srgb, var(--dds-bg-primary) 45%, var(--dds-bg-card));
    box-shadow: none;
}

.ddscore-works-explorer__zone-title {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dds-text-primary);
}

.ddscore-works-explorer__zone[data-band="low"] .ddscore-works-explorer__zone-title {
    color: var(--dds-score-poor);
}

.ddscore-works-explorer__zone[data-band="mid"] .ddscore-works-explorer__zone-title {
    color: var(--dds-score-moderate);
}

.ddscore-works-explorer__zone[data-band="high"] .ddscore-works-explorer__zone-title {
    color: var(--dds-score-excellent);
}

.ddscore-works-explorer__zone-copy {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--dds-text-secondary);
    flex: 1;
}

.ddscore-works-explorer__stage-note {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.75rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid color-mix(in srgb, var(--dds-border) 55%, transparent);
    background: color-mix(in srgb, var(--dds-bg-primary) 88%, var(--dds-bg-card));
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
    text-align: left;
}

.ddscore-works-explorer-root--compact .ddscore-works-explorer__stage-note {
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    font-size: 0.74rem;
}

.ddscore-works-explorer__zone-leader {
    width: 3px;
    flex-shrink: 0;
    height: var(--dds-works-explorer-zone-leader-height);
    margin-top: 0.45rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dds-text-muted) 85%, transparent) 0%,
        color-mix(in srgb, var(--dds-text-muted) 25%, transparent) 100%
    );
    border-radius: 1px;
}

.ddscore-works-explorer__track-area {
    position: relative;
    padding-bottom: 2.85rem;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    border-radius: var(--dds-radius-sm);
}

.ddscore-works-explorer__track-area:focus-visible {
    outline: 2px solid var(--dds-accent-primary);
    outline-offset: 4px;
}

.ddscore-works-explorer__track {
    height: var(--dds-works-explorer-bar-height);
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--dds-score-poor) 0%,
        var(--dds-score-moderate) 50%,
        var(--dds-score-excellent) 100%
    );
    position: relative;
    overflow: visible;
    z-index: 1;
}

.ddscore-works-explorer__marker-assembly {
    position: absolute;
    top: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.ddscore-works-explorer__marker-line {
    position: relative;
    width: 6px;
    height: calc(var(--dds-works-explorer-bar-height) + 0.85rem);
    background: var(--dds-text-primary);
    border-radius: 3px;
    box-shadow: var(--dds-works-explorer-marker-shadow);
}

.ddscore-works-explorer__marker-line::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--dds-text-primary);
}

.ddscore-works-explorer__marker-badge {
    margin-top: 0.2rem;
    padding: 0.32rem 0.72rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--dds-text-primary);
    border: 1px solid color-mix(in srgb, var(--dds-text-primary) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dds-bg-card) 94%, var(--dds-bg-primary));
}

/* Ticks + labels: interior has vertical guides; 0% / 100% are labels only (no end-cap lines). */
.ddscore-works-explorer__tick-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--dds-works-explorer-bar-height) + 1.45rem);
    pointer-events: none;
    z-index: 2;
}

.ddscore-works-explorer__tick-slot {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ddscore-works-explorer__tick-slot--pct0 {
    left: 0;
    transform: none;
    align-items: flex-start;
}

.ddscore-works-explorer__tick-slot--pct100 {
    left: 100%;
    transform: translateX(-100%);
    align-items: flex-end;
}

/* End caps: no tick-line; push label down to align with interior tick labels. */
.ddscore-works-explorer__tick-slot--pct0 .ddscore-works-explorer__tick-label,
.ddscore-works-explorer__tick-slot--pct100 .ddscore-works-explorer__tick-label {
    margin-top: calc(var(--dds-works-explorer-bar-height) + 0.35rem);
}

.ddscore-works-explorer__tick-slot--pct33 {
    left: 33%;
    transform: translateX(-50%);
}

.ddscore-works-explorer__tick-slot--pct50 {
    left: 50%;
    transform: translateX(-50%);
}

.ddscore-works-explorer__tick-slot--pct66 {
    left: 66%;
    transform: translateX(-50%);
}

.ddscore-works-explorer__tick-line {
    width: var(--dds-works-explorer-tick-line-width);
    height: var(--dds-works-explorer-bar-height);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--dds-text-primary) 58%, transparent);
    border-radius: 2px;
}

.ddscore-works-explorer__tick-label {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--dds-text-muted);
    white-space: nowrap;
}

.ddscore-works-explorer__hint {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--dds-text-muted);
    text-align: center;
}

.ddscore-works-explorer__footnote {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--dds-border) 60%, transparent);
    border-radius: var(--dds-radius-sm);
    font-size: 0.8rem;
    color: var(--dds-text-muted);
    text-align: center;
    line-height: 1.45;
}

.ddscore-works-explorer__paid-precision-note {
    margin: 1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--dds-text-muted);
    text-align: center;
}

@media (max-width: 768px) {
    .ddscore-works-explorer__stage-note {
        margin-top: 1.5rem;
    }

    .ddscore-works-explorer-root--compact .ddscore-works-explorer__stage-note {
        margin-top: 1.1rem;
    }

    .ddscore-works-explorer__hint {
        margin-top: 1.5rem;
    }

    .ddscore-works-explorer__footnote {
        margin-top: 2rem;
    }

    .ddscore-works-explorer__paid-precision-note {
        margin-top: 2rem;
    }
}

@media (max-width: 720px) {
    .ddscore-works-explorer__zones {
        grid-template-columns: 1fr;
    }

    .ddscore-works-explorer__zone-leader {
        height: 1rem;
    }
}

@media (max-width: 480px) {
    .ddscore-works-explorer__summary {
        font-size: 0.88rem;
    }

    .ddscore-works-explorer__tick-label {
        font-size: 0.72rem;
    }

    .ddscore-works-explorer__status {
        font-size: 0.72rem;
    }
}

/* ═══════════════════════════════════════════
   Radar / Spider Chart
   ═══════════════════════════════════════════ */

.ddscore-radar-chart {
    position: relative;
    max-width: 520px;
    margin: 1.5rem auto 0.5rem;
    animation: ddscore-radar-fadein 0.6s ease-out both;
    aspect-ratio: 1 / 1; /* Keep radar chart square */
}

.ddscore-radar-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Grid rings */
.ddscore-radar-grid {
    fill: none;
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 64%, var(--dds-border-light));
    stroke-width: 0.72;
    stroke-opacity: 0.36;
    filter: drop-shadow(0 0 0.26rem color-mix(in srgb, var(--dds-accent-primary) 18%, transparent));
}

.ddscore-radar-web-surface {
    pointer-events: none;
    opacity: 0.9;
    mix-blend-mode: screen;
    filter:
        drop-shadow(0 0 1.25rem color-mix(in srgb, var(--dds-accent-primary) 34%, transparent))
        drop-shadow(0 0 2.9rem color-mix(in srgb, var(--dds-accent-secondary) 18%, transparent));
}

.ddscore-radar-web-shell {
    fill: none;
    stroke-linejoin: round;
    pointer-events: none;
}

.ddscore-radar-web-shell--outer {
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 92%, var(--dds-text-primary));
    stroke-opacity: 0.96;
    stroke-width: 1.78;
    filter:
        drop-shadow(0 0 0.3rem color-mix(in srgb, var(--dds-accent-secondary) 58%, transparent))
        drop-shadow(0 0 1.25rem color-mix(in srgb, var(--dds-accent-primary) 34%, transparent))
        drop-shadow(0 0 2.1rem color-mix(in srgb, var(--dds-accent-secondary) 18%, transparent));
}

.ddscore-radar-web-shell--mid {
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 68%, var(--dds-border-light));
    stroke-opacity: 0.46;
    stroke-width: 1.15;
    filter: drop-shadow(0 0 0.65rem color-mix(in srgb, var(--dds-accent-primary) 20%, transparent));
}

.ddscore-radar-web-shell--inner {
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 58%, var(--dds-border-light));
    stroke-opacity: 0.28;
    stroke-width: 0.95;
    filter: drop-shadow(0 0 0.44rem color-mix(in srgb, var(--dds-accent-primary) 16%, transparent));
}

.ddscore-radar-web-node {
    pointer-events: none;
    fill: color-mix(in srgb, var(--dds-text-primary) 86%, var(--dds-accent-secondary));
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 82%, var(--dds-bg-card));
    stroke-width: 1.35;
    opacity: 1;
    filter:
        drop-shadow(0 0 0.34rem color-mix(in srgb, var(--dds-accent-secondary) 78%, transparent))
        drop-shadow(0 0 1rem color-mix(in srgb, var(--dds-accent-primary) 42%, transparent));
}

/* Axis spokes */
.ddscore-radar-spoke {
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 68%, var(--dds-border-light));
    stroke-opacity: 0.2;
    stroke-width: 0.62;
    /* Snappy blend (~3x faster than the earlier 0.25s) when a neighbouring gauge/dot is hovered. */
    transition: stroke-opacity 0.09s ease, stroke-width 0.09s ease;
}

.ddscore-radar-spoke--hot {
    stroke-opacity: 0.54;
    stroke-width: 1.45;
    stroke: var(--dds-accent-secondary);
    filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--dds-accent-primary) 42%, transparent));
}

.ddscore-radar-svg--large .ddscore-radar-spoke--hot {
    stroke-width: 1.65;
    stroke-opacity: 0.48;
}

/* Data polygon — outer glow (blurred duplicate).
   Animate element "opacity" (not "fill-opacity") so the expensive SVG Gaussian-blur
   filter is cached once and only its transparency is composited per frame. fill-opacity
   forces the filter to re-rasterize every frame and reads as stepped/choppy. */
.ddscore-radar-glow {
    fill: color-mix(in srgb, var(--dds-accent-primary) 76%, var(--dds-accent-secondary));
    fill-opacity: 0.48;
    stroke: none;
    opacity: 0;
    will-change: opacity;
    animation: ddscore-radar-glow-in 1s ease-out 0.6s forwards,
               ddscore-radar-pulse 9s cubic-bezier(0.37, 0, 0.63, 1) 2s infinite;
}

/* Data polygon — translucent fill */
.ddscore-radar-area {
    fill: color-mix(in srgb, var(--dds-accent-primary) 78%, var(--dds-accent-secondary));
    fill-opacity: 0;
    stroke: none;
    animation: ddscore-radar-area-in 0.9s ease-out 0.5s forwards;
}

.ddscore-radar-area-sheen {
    stroke: none;
    opacity: 0;
    mix-blend-mode: screen;
    animation: ddscore-radar-area-sheen-in 0.9s ease-out 0.62s forwards,
               ddscore-radar-sheen-breathe 7.5s cubic-bezier(0.37, 0, 0.63, 1) 2.2s infinite;
}

/* Data polygon — visible stroke (draw-on effect) */
.ddscore-radar-edge {
    fill: none;
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 94%, var(--dds-text-primary));
    stroke-width: 1.55;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 0.38rem color-mix(in srgb, var(--dds-accent-secondary) 72%, transparent))
        drop-shadow(0 0 1.2rem color-mix(in srgb, var(--dds-accent-primary) 44%, transparent));
    stroke-dasharray: 2200;
    stroke-dashoffset: 2200;
    animation: ddscore-radar-draw 1.8s ease-out 0.3s forwards;
}

/* Vertex dots.
   IMPORTANT: declared opacity is 1 and we use animation-fill-mode: backwards (not forwards).
   - Before the staggered delay, the keyframe "from" (opacity 0) applies (backwards fill).
   - During the animation, the keyframe animates to 1.
   - After the animation, NO fill-forwards: the declared "opacity: 1" takes over.
   This way a focus-mode rule can simply override the declared opacity, instead of having to
   cancel the animation with "animation: none" — which used to re-trigger the whole fade-in
   (0.8s + stagger delay of invisibility) every time the user stopped hovering a web point. */
.ddscore-radar-dot {
    fill: color-mix(in srgb, var(--dds-text-primary) 82%, var(--dds-accent-secondary));
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 72%, var(--dds-bg-card));
    stroke-width: 1.45;
    opacity: 1;
    filter:
        drop-shadow(0 0 0.42rem color-mix(in srgb, var(--dds-accent-secondary) 92%, transparent))
        drop-shadow(0 0 1.1rem color-mix(in srgb, var(--dds-accent-primary) 48%, transparent));
    animation: ddscore-radar-fadein 0.3s ease-out backwards;
    /* Snappy hover feedback (~3x faster than before: 0.22s -> 0.08s / 0.3s -> 0.12s).
       Modern browsers animate the SVG "r" attribute via CSS; older Safari just snaps. */
    transition:
        opacity 0.08s ease,
        r 0.08s ease,
        stroke-width 0.08s ease,
        stroke 0.08s ease,
        filter 0.12s ease;
}

.ddscore-radar-svg--axis-focus .ddscore-radar-dot:not(.ddscore-radar-dot--highlight) {
    /* Keep non-active dots clearly visible while another axis is hovered.
       Do NOT set "animation: none" here — cancelling the base animation re-arms it when
       focus leaves and causes all dots to disappear through the original 0.8s+ delay. */
    opacity: 0.85;
}

.ddscore-radar-dot--highlight {
    fill: color-mix(in srgb, var(--dds-accent-secondary) 92%, var(--dds-accent-primary));
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 82%, var(--dds-bg-card));
    stroke-width: 2.15;
    filter:
        var(--dds-radar-vertex-glow)
        drop-shadow(0 0 0.45rem color-mix(in srgb, var(--dds-accent-secondary) 42%, transparent));
}

.ddscore-radar-svg--large .ddscore-radar-dot--highlight {
    stroke-width: 2.75;
    filter:
        var(--dds-radar-vertex-glow)
        drop-shadow(0 0 0.55rem color-mix(in srgb, var(--dds-accent-secondary) 48%, transparent));
}

/* Invisible hit-circle over each data vertex: gives a forgiving hover target
   that forwards the axis hover to the parent (to highlight the gauge). */
.ddscore-radar-dot-hit {
    fill: transparent;
    stroke: transparent;
    pointer-events: all;
    cursor: pointer;
}

/* Centre — large score value */
.ddscore-radar-center-val {
    fill: var(--dds-text-primary);
    font-family: var(--dds-font);
    font-size: 38px;
    font-weight: 700;
    opacity: 0;
    animation: ddscore-radar-fadein 0.5s ease-out 1.4s forwards;
}

/* Centre — small subtitle */
.ddscore-radar-center-lbl {
    fill: var(--dds-text-muted);
    font-family: var(--dds-font);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0;
    animation: ddscore-radar-fadein 0.5s ease-out 1.6s forwards;
}

/* Outer category name */
.ddscore-radar-cat {
    fill: var(--dds-text-primary);
    font-family: var(--dds-font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: ddscore-radar-fadein 0.4s ease-out 0.15s forwards;
}

/* Outer score number */
.ddscore-radar-val {
    fill: var(--dds-text-secondary);
    font-family: var(--dds-font);
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    animation: ddscore-radar-fadein 0.4s ease-out 1.2s forwards;
}

/* Axis hover (report graph): larger label + score with glow */
.ddscore-radar-cat--hover,
.ddscore-radar-val--hover {
    animation: none;
    opacity: 1;
}

.ddscore-radar-cat--hover-large {
    font-size: 28px;
    font-weight: 700;
    fill: var(--dds-text-primary);
    filter: drop-shadow(0 0 0.35rem var(--dds-accent-secondary))
        drop-shadow(0 0 0.95rem color-mix(in srgb, var(--dds-accent-primary) 50%, transparent));
}

.ddscore-radar-val--hover-large {
    font-size: 30px;
    font-weight: 800;
    fill: var(--dds-accent-secondary);
    filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--dds-accent-primary) 55%, transparent));
}

/* ─── Radar keyframes ─── */

@keyframes ddscore-radar-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ddscore-radar-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes ddscore-radar-area-in {
    from { fill-opacity: 0; }
    to   { fill-opacity: 0.3; }
}

@keyframes ddscore-radar-area-sheen-in {
    from { opacity: 0; }
    to   { opacity: 0.72; }
}

@keyframes ddscore-radar-glow-in {
    from { opacity: 0; }
    /* Land at the pulse floor so the infinite pulse starts without a step. */
    to   { opacity: 0.44; }
}

/*
 * Breathing glow: element opacity pulses between a visible floor and 1.0 peak with a
 * symmetric cubic-bezier (sine-like ease-in-out). Against fill-opacity 0.48 this keeps
 * the reference-style center glow present even at the low point of the pulse.
 */
@keyframes ddscore-radar-pulse {
    0%, 100% { opacity: 0.44; }
    50%      { opacity: 1; }
}

@keyframes ddscore-radar-sheen-breathe {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.82; }
}

@keyframes ddscore-radar-dot-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Radar print / PDF ─── */

@media print {
    /*
     * Chromium PDF (Playwright) snapshots before the first animation frame. fill-mode "both"
     * applies the keyframe "from" state (often opacity: 0) on .ddscore-radar-chart — the whole
     * chart stayed invisible until we reset the container here.
     */
    .ddscore-radar-chart {
        animation: none !important;
        opacity: 1 !important;
    }

    .ddscore-radar-glow,
    .ddscore-radar-area,
    .ddscore-radar-edge,
    .ddscore-radar-dot,
    .ddscore-radar-center-val,
    .ddscore-radar-center-lbl,
    .ddscore-radar-cat,
    .ddscore-radar-val,
    .ddscore-radar-cat--hover,
    .ddscore-radar-val--hover,
    .ddscore-radar-dot--highlight {
        animation: none !important;
        opacity: 1 !important;
    }

    .ddscore-radar-svg--axis-focus .ddscore-radar-dot:not(.ddscore-radar-dot--highlight) {
        opacity: 1 !important;
    }

    .ddscore-radar-area {
        fill-opacity: 0.3 !important;
    }

    .ddscore-radar-area-sheen {
        animation: none !important;
        opacity: 0.72 !important;
    }

    .ddscore-radar-glow {
        /* Print: freeze glow at a mid-pulse level. Pair element opacity with the static fill-opacity
           used in the animated state so the printed PDF has a visible, non-blinking glow. */
        opacity: 0.72 !important;
        fill-opacity: 0.48 !important;
    }

    .ddscore-radar-edge {
        stroke-dashoffset: 0 !important;
    }
}

/* ─── Radar responsive ─── */

@media (max-width: 480px) {
    .ddscore-radar-chart {
        max-width: 340px;
    }

    .ddscore-radar-cat {
        font-size: 10px;
    }

    .ddscore-radar-val {
        font-size: 9px;
    }

    .ddscore-radar-center-val {
        font-size: 30px;
    }

    .ddscore-radar-center-lbl {
        font-size: 9px;
    }
}

/* Report score graph: large radar, perimeter gauges, in-page anchors */
[id^="ddscore-report-section-"],
[id^="ddscore-score-breakdown-"] {
    scroll-margin-top: 5.5rem;
}

.ddscore-report-score-graph-card {
    animation: ddscore-score-graph-card-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* Never use transform here: it becomes the CB for absolute gauge slots and breaks polar placement. */
    transform: none;
}

.ddscore-report .ddscore-report-score-graph-card.ddscore-card {
    /* Match padding of other report cards for consistent alignment */
    padding: 3.5625rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Opacity only: a non-none transform on this card would become the containing block for
   absolutely positioned gauge slots and break % geometry (slots would anchor to the card, not the square graph). */
@keyframes ddscore-score-graph-card-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ddscore-report-score-graph-title {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

.ddscore-report .ddscore-report-score-graph-card .ddscore-report-score-graph-title {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}

.ddscore-report-score-graph-scale-note {
    text-align: right;
    font-size: 0.75rem;
    color: var(--dds-text-muted);
    margin-top: 0.75rem;
    padding: 0 0.5rem;
}

/* Score Overview header: logo height tracks title line (1em) on report */
.ddscore-report-score-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    isolation: isolate;
    font-size: 1.75rem;
    line-height: 1.2;
}

.ddscore-report-score-graph-header::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--dds-radius-sm);
    background: var(--dds-header-hover-film);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: soft-light;
}

.ddscore-report-score-graph-header:hover::after {
    opacity: var(--dds-header-hover-film-opacity);
}

.ddscore-report-score-graph-header .ddscore-report-score-graph-title,
.ddscore-report-score-graph-header .ddscore-score-overview-header-brand {
    position: relative;
    z-index: 0;
}

.ddscore-score-overview-header-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--dds-logo-mark-gap);
    flex-shrink: 0;
}

.ddscore-score-overview-wordmark {
    font-size: 0.4em;
    font-weight: 800;
    color: var(--dds-text-primary);
    letter-spacing: 0.07em;
    line-height: 1;
    white-space: nowrap;
}

.ddscore-report-score-graph-header:hover .ddscore-report-score-graph-title {
    text-shadow:
        0 0 var(--dds-header-hover-halo-blur-1) var(--dds-accent-primary),
        0 0 var(--dds-header-hover-halo-blur-2) color-mix(in srgb, var(--dds-accent-primary) 48%, transparent);
}

.ddscore-report-score-graph-header:hover .ddscore-score-overview-logo {
    opacity: 1;
    filter: var(--dds-header-hover-halo);
}

.ddscore-report-score-graph-header:hover .ddscore-score-overview-wordmark {
    color: var(--dds-text-primary);
}

.ddscore-report-score-graph-header .ddscore-report-score-graph-title {
    margin-bottom: 0;
    font-size: 1em;
    transition: text-shadow 0.25s ease;
}

.ddscore-report-score-graph-header .ddscore-score-overview-logo {
    transition: opacity 0.22s ease, filter 0.25s ease;
}

.ddscore-report .ddscore-report-score-graph-header {
    font-size: 1.75rem;
}

/* Beat .ddscore-report .ddscore-report-score-graph-card .ddscore-report-score-graph-title margin/font inside header row */
.ddscore-report .ddscore-report-score-graph-card .ddscore-report-score-graph-header .ddscore-report-score-graph-title {
    margin-bottom: 0;
    font-size: 1em;
}

.ddscore-score-overview-logo {
    height: 1em;
    width: auto;
    max-width: min(55vw, 22rem);
    object-fit: contain;
    object-position: right center;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    margin: 0;
}

/* Score Overview Footer: Slogan (left) + Social Share (right) */
.ddscore-score-overview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dds-border);
}

.ddscore-score-overview-footer-left {
    display: flex;
    align-items: center;
}

.ddscore-score-overview-footer-right {
    display: flex;
    align-items: flex-end;
}

.ddscore-score-overview-footer-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.65rem;
}

.ddscore-score-overview-new-report {
    white-space: nowrap;
}

.ddscore-score-overview-slogan {
    font-size: 0.95rem;
    color: var(--dds-text-muted);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

/* Social Share Buttons - RogerApp style */
.ddscore-social-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ddscore-share-label {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    margin-right: 0.25rem;
}

.ddscore-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    color: var(--dds-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    font-size: 1rem;
    border: none;
    padding: 0;
    cursor: pointer;
    transform-origin: center;
}

.ddscore-share-btn:hover {
    color: var(--dds-text-primary);
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-tight);
}

.ddscore-share-btn:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
    box-shadow: none;
}

/* Platform-specific hover colors */
.ddscore-share-reddit:hover {
    color: #FF4500;
}

.ddscore-share-linkedin:hover {
    color: #0077B5;
}

.ddscore-share-x:hover {
    color: #1DA1F2; /* X/Twitter blue - same as original Twitter */
}

.ddscore-share-facebook:hover {
    color: #1877F2;
}

/* Native device share button */
.ddscore-share-native {
    color: var(--dds-text-secondary);
}

.ddscore-share-native:hover {
    color: var(--dds-accent);
    transform: scale(var(--dds-btn-hover-scale));
}

/* Share platform hint and website URL */
.ddscore-share-platform-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--dds-text-muted);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.ddscore-share-website-url {
    text-align: center;
    font-size: 0.7rem;
    color: var(--dds-text-secondary);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.8;
}

/* Score Overview spider web: attribution + generated timestamp (bottom of card) */
.ddscore-report-score-graph-attribution {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-top: 0.65rem;
    padding: 0 0.35rem;
    font-size: 0.65rem;
    line-height: 1.35;
    color: var(--dds-text-muted);
}

.ddscore-report-score-graph-attribution-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.ddscore-report-score-graph-attribution-time {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--dds-text-muted);
}

/* Square: % left/top use width vs height bases; a wide rectangle skewed radial distance (Team at top looked right). */
.ddscore-report-score-graph {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0.15rem auto 0;
    box-sizing: border-box;
    padding: clamp(0.75rem, 2.2vw, 1.35rem);
    container-type: inline-size;
    container-name: scoregraph;
    isolation: isolate;
    overflow: visible;
}

/* Score graph width: mobile/tablet uses full card width (no svh-based shrink). */
.ddscore-report .ddscore-report-score-graph {
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

/* Desktop: cap square by height but never narrower than half the viewport (short Full HD windows). */
@media (min-width: 769px) {
    .ddscore-report .ddscore-report-score-graph {
        --dds-report-score-graph-vbudget: calc(100svh - 22rem);
        max-width: min(100%, max(50vw, var(--dds-report-score-graph-vbudget)), 92vmin);
        min-width: min(100%, calc(var(--dds-report-score-graph-vbudget) * 0.7));
    }
}

.ddscore-report-score-graph-radar {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* Let pointer events reach perimeter slots (full-square SVG otherwise sits above gauge hit targets). */
    pointer-events: none;
}

.ddscore-report-score-graph-radar .ddscore-radar-chart--large,
.ddscore-report-score-graph-radar .ddscore-radar-chart {
    width: var(--sg-web-px) !important;
    height: var(--sg-web-px) !important;
    width: min(var(--sg-web-px), calc(100cqw - 4px)) !important;
    height: min(var(--sg-web-px), calc(100cqw - 4px)) !important;
    max-width: none !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ddscore-report-score-graph-radar .ddscore-radar-svg--large,
.ddscore-report-score-graph-radar .ddscore-radar-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.ddscore-radar-chart--large {
    max-width: none; /* Remove size constraint - let parent control size */
    width: 100%;
    height: 100%;
    margin: 0;
}

.ddscore-radar-svg--large .ddscore-radar-grid {
    stroke-width: 0.88;
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 68%, var(--dds-border-light));
    stroke-opacity: 0.34;
    filter:
        drop-shadow(0 0 0.24rem color-mix(in srgb, var(--dds-accent-primary) 22%, transparent))
        drop-shadow(0 0 0.9rem color-mix(in srgb, var(--dds-accent-secondary) 12%, transparent));
}

.ddscore-radar-svg--large .ddscore-radar-grid--p25,
.ddscore-radar-svg--large .ddscore-radar-grid--p75 {
    stroke-width: 0.92;
    stroke-opacity: 0.38;
}

.ddscore-radar-svg--large .ddscore-radar-grid--p50 {
    stroke-width: 1.02;
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 72%, var(--dds-border-light));
    stroke-opacity: 0.42;
}

.ddscore-radar-svg--large .ddscore-radar-grid--p100 {
    stroke-width: 1.22;
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 86%, var(--dds-text-primary));
    stroke-opacity: 0.54;
}

.ddscore-radar-svg--large .ddscore-radar-spoke {
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 72%, var(--dds-border-light));
    stroke-opacity: 0.28;
    stroke-width: 0.92;
    filter: drop-shadow(0 0 0.34rem color-mix(in srgb, var(--dds-accent-primary) 18%, transparent));
}

.ddscore-radar-svg--large .ddscore-radar-edge {
    stroke-width: 2.05;
    filter:
        drop-shadow(0 0 0.56rem color-mix(in srgb, var(--dds-accent-secondary) 82%, transparent))
        drop-shadow(0 0 1.55rem color-mix(in srgb, var(--dds-accent-primary) 56%, transparent))
        drop-shadow(0 0 2.45rem color-mix(in srgb, var(--dds-accent-secondary) 24%, transparent));
}

.ddscore-radar-svg--large .ddscore-radar-dot {
    fill: color-mix(in srgb, var(--dds-text-primary) 84%, var(--dds-accent-secondary));
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 78%, var(--dds-bg-card));
    stroke-width: 2.1;
    filter:
        drop-shadow(0 0 0.62rem color-mix(in srgb, var(--dds-accent-secondary) 100%, transparent))
        drop-shadow(0 0 1.6rem color-mix(in srgb, var(--dds-accent-primary) 64%, transparent))
        drop-shadow(0 0 2.35rem color-mix(in srgb, var(--dds-accent-secondary) 28%, transparent));
}

.ddscore-radar-svg--large .ddscore-radar-dot--highlight {
    fill: color-mix(in srgb, var(--dds-accent-secondary) 94%, var(--dds-accent-primary));
    stroke: color-mix(in srgb, var(--dds-accent-secondary) 82%, var(--dds-bg-card));
    stroke-width: 3.45;
    filter:
        drop-shadow(0 0 0.68rem color-mix(in srgb, var(--dds-accent-secondary) 100%, transparent))
        drop-shadow(0 0 1.45rem color-mix(in srgb, var(--dds-accent-primary) 86%, transparent))
        drop-shadow(0 0 2.6rem color-mix(in srgb, var(--dds-accent-secondary) 46%, transparent));
}

.ddscore-radar-center-depth {
    pointer-events: none;
    opacity: 0.62;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 0 2.2rem color-mix(in srgb, var(--dds-bg-primary) 86%, transparent));
}

.ddscore-radar-center-val--large {
    fill: var(--dds-text-primary);
    font-size: 5.45rem;
    font-weight: 800;
    paint-order: stroke fill;
    stroke: color-mix(in srgb, var(--dds-bg-primary) 82%, var(--dds-border-light));
    stroke-width: 2px;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 0.38rem color-mix(in srgb, var(--dds-bg-primary) 96%, transparent))
        drop-shadow(0 0 1.05rem color-mix(in srgb, var(--dds-accent-secondary) 42%, transparent))
        drop-shadow(0 0 2.1rem color-mix(in srgb, var(--dds-accent-primary) 24%, transparent));
}

.ddscore-radar-center-lbl--large {
    fill: color-mix(in srgb, var(--dds-text-primary) 68%, var(--dds-text-secondary));
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    paint-order: stroke fill;
    stroke: color-mix(in srgb, var(--dds-bg-primary) 70%, transparent);
    stroke-width: 1.4px;
    stroke-linejoin: round;
}

/* Large report radar: axis captions beside vertices (when enabled) — ~2x default for readability */
.ddscore-radar-svg--large .ddscore-radar-cat {
    font-size: 24px;
}

.ddscore-radar-svg--large .ddscore-radar-val {
    font-size: 22px;
}

.ddscore-report-score-graph-slot {
    --sg-gauge-size: var(--sg-gauge-px);
    position: absolute;
    /* left/top set inline from viewBox-derived % (see DDScoreReportScoreGraph.AxisSlotStyle) */
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 7rem;
    max-width: 14rem;
    text-align: center;
}

@supports (width: 1cqw) {
    .ddscore-report-score-graph-slot {
        --sg-gauge-size: min(var(--sg-gauge-px), calc(12cqw * var(--dds-score-overview-perimeter-gauge-scale)));
    }
}

.ddscore-report-score-graph-anchor {
    font-family: var(--dds-font);
    font-size: 1.65rem;
    font-weight: 600;
    color: var(--dds-text-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    line-height: 1.25;
    /* Smooth blend when slot becomes focused (hover via gauge or via radar dot). Transform is
       animated so the label can translate away from the gauge as the gauge scales up (keeping
       the visual gap constant — see --focus rule below). */
    transition: color 0.2s ease, font-size 0.2s ease, filter 0.25s ease,
                border-bottom-color 0.2s ease, transform 0.25s ease;
}

.ddscore-report-score-graph-anchor:hover {
    border-bottom-color: var(--dds-accent-secondary);
    color: var(--dds-text-accent);
}

.ddscore-report-score-graph-gauge-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    border-radius: 50%;
    /* transform-origin center so the gauge grows uniformly around its own centre on hover. */
    transform-origin: 50% 50%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ddscore-report-score-graph-gauge-link:hover {
    transform: scale(var(--dds-gauge-hover-scale));
}

.ddscore-report-score-graph-slot--focus .ddscore-report-score-graph-gauge-link {
    transform: scale(var(--dds-gauge-focus-scale));
}

.ddscore-report-score-graph-gauge-link:hover .ddscore-gauge-circle,
.ddscore-report-score-graph-slot--focus .ddscore-gauge-circle {
    animation: none;
    transition:
        opacity 0.45s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.18s ease 0.25s;
    filter:
        brightness(1.12)
        saturate(1.14)
        drop-shadow(0 0 0.35rem color-mix(in srgb, var(--gauge-color) 44%, transparent))
        drop-shadow(0 0 1rem color-mix(in srgb, var(--gauge-color) 24%, transparent));
}

.ddscore-report-score-graph-slot .ddscore-gauge {
    width: var(--sg-gauge-size);
    height: var(--sg-gauge-size);
}

.ddscore-report-score-graph-slot .ddscore-gauge--compact .ddscore-gauge-value {
    font-size: calc(var(--sg-gauge-size) * 0.30);
}

.ddscore-report-score-graph-slot .ddscore-gauge-label {
    display: none;
}

.ddscore-report-score-graph-slot .ddscore-gauge--compact .ddscore-gauge-circle {
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 48%,
            color-mix(in srgb, var(--dds-bg-card-hover) 14%, transparent) 0 44%,
            transparent 45%),
        conic-gradient(
            var(--gauge-color) calc(var(--gauge-pct) * 3.6deg),
            color-mix(in srgb, var(--dds-border) 68%, var(--dds-bg-primary)) calc(var(--gauge-pct) * 3.6deg));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 38%, transparent),
        inset 0 0 0.85rem color-mix(in srgb, var(--dds-bg-primary) 44%, transparent);
}

.ddscore-report-score-graph-slot .ddscore-gauge--compact.ddscore-gauge--filled .ddscore-gauge-circle {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 42%, transparent),
        inset 0 0 0.9rem color-mix(in srgb, var(--dds-bg-primary) 46%, transparent);
}

.ddscore-report-score-graph-slot .ddscore-gauge--compact .ddscore-gauge-inner {
    z-index: 2;
    width: 78%;
    height: 78%;
    padding: 0;
    background:
        radial-gradient(circle at 50% 20%,
            color-mix(in srgb, var(--dds-bg-card-hover) 16%, transparent) 0%,
            transparent 48%),
        color-mix(in srgb, var(--dds-bg-card) 94%, var(--dds-bg-primary));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--dds-border-light) 24%, transparent),
        inset 0 0 0.8rem color-mix(in srgb, var(--dds-bg-primary) 54%, transparent);
}

.ddscore-report-score-graph-slot .ddscore-gauge--compact .ddscore-gauge-inner.ddscore-gauge-inner--with-help {
    justify-content: center;
    gap: 0;
    padding: 0;
}

.ddscore-report-score-graph-slot .ddscore-gauge--compact .ddscore-gauge-value {
    color: var(--dds-text-primary);
}

.ddscore-report-score-graph-slot .ddscore-gauge-info-chip--in-circle {
    position: absolute;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
    min-width: calc(var(--sg-gauge-size) * 0.38);
    height: calc(var(--sg-gauge-size) * 0.38);
    padding: 0;
    border-radius: 50%;
    font-size: calc(var(--sg-gauge-size) * 0.23);
    line-height: 1;
    color: color-mix(in srgb, var(--dds-text-primary) 72%, var(--dds-text-secondary));
    background: color-mix(in srgb, var(--dds-bg-card-hover) 34%, var(--dds-bg-card));
    border-color: color-mix(in srgb, var(--dds-text-secondary) 60%, var(--dds-border-light));
    box-shadow: inset 0 0 0.32rem color-mix(in srgb, var(--dds-bg-primary) 68%, transparent);
}

.ddscore-report-score-graph-slot .ddscore-gauge-info-chip--in-circle:hover {
    color: var(--dds-text-primary);
    background: color-mix(in srgb, var(--dds-accent-primary) 20%, var(--dds-bg-card-hover));
    border-color: color-mix(in srgb, var(--dds-accent-secondary) 72%, var(--dds-border-light));
}

.ddscore-report-score-graph-anchor {
    font-size: calc(var(--sg-gauge-size) * 0.22);
    color: var(--dds-text-primary);
    width: auto;
    min-width: var(--sg-gauge-size);
    max-width: calc(var(--sg-gauge-size) * 2.35);
    text-align: center;
    display: block;
    margin-inline: auto;
    text-decoration: none;
    border-bottom: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.ddscore-report-score-graph-slot--focus .ddscore-report-score-graph-anchor {
    color: var(--dds-text-primary);
    transform: translateY(-0.28rem) scale(1.03);
}

/* Mobile: JS ResizeObserver handles all sizing via --sg-web-px / --sg-gauge-px.
   Only layout tweaks needed here. */
@media (max-width: 960px) {
    /* Tight shell: beats .ddscore-report .ddscore-card (3.5625rem) on tablet widths and
       tightens further than --dds-report-card-padding on very narrow phones. */
    .ddscore-report .ddscore-report-score-graph-card.ddscore-card {
        text-align: center;
        padding: 0.35rem 0.45rem 0.2rem;
        margin: 0.35rem 0;
    }

    .ddscore-report-score-graph {
        width: 100%;
        aspect-ratio: 1 / 1;
        margin: 0.05rem auto 0;
        padding: clamp(0.1rem, 1.2vw, 0.35rem);
    }

    /* ~half previous size so "Score Overview" + logo fit one row; beat
       .ddscore-report .ddscore-card-title { font-size: … !important } on phones. */
    .ddscore-report .ddscore-report-score-graph-header {
        font-size: clamp(0.62rem, 3.4vw, 0.82rem);
        line-height: 1.12;
        margin-bottom: 0.3rem;
        gap: 0.35rem;
    }

    .ddscore-report .ddscore-report-score-graph-card .ddscore-report-score-graph-header h2.ddscore-card-title.ddscore-report-score-graph-title {
        font-size: 1em !important;
        line-height: 1.12;
        margin-bottom: 0;
    }

    .ddscore-score-overview-logo {
        height: 1em;
        width: auto;
        max-width: min(40vw, 9rem);
    }

    /* Stack footer; keep border close to radar (no large dead band above the line). */
    .ddscore-score-overview-footer {
        flex-direction: column;
        align-items: center;
        gap: 0.45rem;
        margin-top: 0.45rem;
        padding-top: 0.3rem;
        padding-bottom: 0;
        text-align: center;
    }

    .ddscore-score-overview-footer-left,
    .ddscore-score-overview-footer-right {
        justify-content: center;
        width: 100%;
    }

    .ddscore-score-overview-footer-actions {
        align-items: center;
    }

    /* Narrow screens: omit scale line — saves vertical space for the radar. */
    .ddscore-report-score-graph-scale-note {
        display: none;
    }

    .ddscore-report-score-graph-attribution {
        container-type: inline-size;
        container-name: ddscore-score-attrib;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        margin-top: 0.35rem;
        padding: 0 0.25rem 0;
    }

    /* One line: font scales with card width (fixed English disclaimer length). */
    .ddscore-report-score-graph-attribution-text {
        text-align: center;
        flex: 0 1 auto;
        max-width: 100%;
        white-space: nowrap;
        font-size: clamp(0.26rem, calc(100cqi / 42), 0.65rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ddscore-report-score-graph-attribution-time {
        align-self: center;
        text-align: center;
    }

    /* Smaller share buttons on mobile */
    .ddscore-share-btn {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
}

@media print {
    /* Same PDF snapshot issue as radar: card uses fill-mode "both" and starts at opacity 0. */
    .ddscore-report-score-graph-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .ddscore-report-score-graph-header::after {
        display: none !important;
    }

    .ddscore-report-score-graph-header .ddscore-score-overview-logo,
    .ddscore-report-score-graph-header .ddscore-score-overview-wordmark,
    .ddscore-report-score-graph-header .ddscore-report-score-graph-title {
        filter: none !important;
        text-shadow: none !important;
    }

    /*
     * A3 at 96 DPI is 1123 CSS px wide, leaving enough room for the desktop square layout.
     * These rules still pin the graph to the print geometry so the radar and perimeter gauge
     * slots stay registered exactly like they do on screen. Size is capped so the whole chart
     * plus the card title fits on a single A3 page.
     */
    /*
     * Print: establish a query container so perimeter gauges + value text scale with the
     * graph box. On screen, --sg-gauge-px/--sg-web-px come from ddscore-score-graph-resize.js;
     * print snapshots often apply before that refresh, and .ddscore-report-score-graph-anchor
     * below uses rem — so titles and gauges could drift apart. cqw tracks the printed graph
     * width (same basis as JS: 0.12×--dds-score-overview-perimeter-gauge-scale, value 0.30×gauge, anchor 0.22×gauge).
     */
    .ddscore-report-score-graph {
        container-type: inline-size;
        container-name: scoregraph;
        display: block;
        flex-direction: initial;
        gap: 0;
        padding-bottom: 0;
        width: 100%;
        max-width: 24cm;
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
        margin: 0 auto;
    }

    .ddscore-report-score-graph-radar {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: none;
        margin: 0;
        pointer-events: auto;
    }

    .ddscore-report-score-graph-radar .ddscore-radar-chart--large,
    .ddscore-report-score-graph-radar .ddscore-radar-chart {
        width: 92cqw !important;
        height: 92cqw !important;
        max-width: none !important;
        max-height: 100%;
        display: flex;
        align-items: center;
        margin: 0 auto;
    }

    .ddscore-report-score-graph-radar .ddscore-radar-svg--large,
    .ddscore-report-score-graph-radar .ddscore-radar-svg {
        width: 100%;
        height: 100%;
        max-height: 100%;
        display: block;
    }

    /* Restore absolute slot positioning that the mobile rule turned into flow rows. */
    .ddscore-report-score-graph-slot {
        position: absolute;
        transform: translate(-50%, -50%);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: auto;
        max-width: 9rem;
        margin: 0;
        padding: 0;
        border-bottom: none;
        text-align: center;
    }

    /* Perimeter titles: same cqw basis as gauges (scales with --dds-score-overview-perimeter-gauge-scale). */
    .ddscore-report-score-graph .ddscore-report-score-graph-anchor {
        text-align: center;
        align-self: center;
        font-size: clamp(0.45rem, calc(2.64cqw * var(--dds-score-overview-perimeter-gauge-scale)), 1.05rem);
        max-width: clamp(3.5rem, calc(10.92cqw * var(--dds-score-overview-perimeter-gauge-scale)), 14rem);
        line-height: 1.2;
    }

    /* Beat .ddscore-report .ddscore-gauge--compact (fixed px) in print — size from graph width. */
    .ddscore-report-score-graph .ddscore-report-score-graph-slot .ddscore-gauge.ddscore-gauge--compact {
        width: clamp(48px, calc(12cqw * var(--dds-score-overview-perimeter-gauge-scale)), 120px);
        height: clamp(48px, calc(12cqw * var(--dds-score-overview-perimeter-gauge-scale)), 120px);
    }

    .ddscore-report-score-graph .ddscore-report-score-graph-slot .ddscore-gauge--compact .ddscore-gauge-value {
        font-size: clamp(0.75rem, calc(3.6cqw * var(--dds-score-overview-perimeter-gauge-scale)), 2.25rem);
    }

    /* Simple-tier score bands use ScoreGaugeSimple, so they need the same print-time cqw sizing. */
    .ddscore-report-score-graph .ddscore-report-score-graph-gauge-link .ddscore-gauge-simple {
        width: clamp(48px, calc(12cqw * var(--dds-score-overview-perimeter-gauge-scale)), 120px);
        height: clamp(48px, calc(12cqw * var(--dds-score-overview-perimeter-gauge-scale)), 120px);
        border-width: 2px;
    }

    .ddscore-report-score-graph .ddscore-report-score-graph-gauge-link .ddscore-gauge-simple-label {
        font-size: clamp(0.46rem, calc(1.38cqw * var(--dds-score-overview-perimeter-gauge-scale)), 0.68rem);
        line-height: 1.15;
    }

    .ddscore-report-score-graph-gauge-link:hover {
        transform: none;
        box-shadow: none;
        filter: none;
    }

    .ddscore-report-score-graph-scale-note {
        display: block;
        font-size: 0.6rem;
    }

    .ddscore-report-score-graph-attribution {
        font-size: 0.55rem;
    }

    .ddscore-report-score-graph-attribution-text {
        white-space: normal;
        font-size: inherit;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .ddscore-radar-edge--large {
        stroke-dashoffset: 0 !important;
    }
}

/* ── Scroll-reveal animation ─────────────────────────────────
   Matches the marketing site (www.ddscore.ai) effect: elements start
   invisible and translated 28 px down, then fade+slide into place when
   they enter the viewport. The JS IntersectionObserver in
   scrollReveal.js adds .dds-animate on init and .dds-visible on
   intersection (once per element). */

.dds-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.dds-animate.dds-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .dds-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Stagger children of the report: each successive card delays slightly so
   the cascade reads top-to-bottom rather than all popping at once. */
.dds-animate.dds-visible:nth-child(2) { transition-delay: 0.07s; }
.dds-animate.dds-visible:nth-child(3) { transition-delay: 0.14s; }
.dds-animate.dds-visible:nth-child(4) { transition-delay: 0.21s; }
.dds-animate.dds-visible:nth-child(5) { transition-delay: 0.28s; }

@media print {
    .dds-animate {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── 404 Not Found Page ────────────────────────────────────── */
.ddscore-not-found-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ddscore-not-found-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.ddscore-not-found-illustration {
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
}

.ddscore-not-found-image {
    width: 100%;
    max-width: 280px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.ddscore-not-found-content {
    margin-top: 1rem;
}

.ddscore-not-found-title {
    max-width: 100%;
    font-size: clamp(2.75rem, 1.5rem + 12vw, 6rem);
    font-weight: 900;
    margin: 0;
    background: linear-gradient(135deg, var(--dds-score-poor) 0%, var(--dds-score-moderate) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    overflow-wrap: break-word;
}

@supports (font-size: 1cqi) {
    .ddscore-not-found-title {
        font-size: clamp(2.75rem, 1.25rem + 18cqi, 6rem);
    }
}

.ddscore-not-found-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dds-text-primary);
    margin: 1rem 0 1.5rem;
}

.ddscore-not-found-text {
    font-size: 1.1rem;
    color: var(--dds-text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.ddscore-not-found-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.ddscore-not-found-actions .ddscore-btn {
    min-width: 140px;
}

.ddscore-not-found-info {
    background: var(--dds-bg-secondary);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius);
    padding: 1.25rem 1.5rem;
    text-align: left;
}

.ddscore-not-found-note {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dds-text-muted);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ddscore-not-found-note i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ddscore-not-found-page {
        padding: 1.5rem;
    }

    .ddscore-not-found-heading {
        font-size: 1.5rem;
    }

    .ddscore-not-found-text {
        font-size: 1rem;
    }

    .ddscore-not-found-actions {
        flex-direction: column;
    }

    .ddscore-not-found-actions .ddscore-btn {
        width: 100%;
    }
}

/* Landscape mobile: when height is small (e.g., iPhone 14 Pro landscape 393px, Pixel 8 411px tall)
   Use hamburger menu and hide desktop nav even when width is larger */
@media (max-height: 500px) and (orientation: landscape) {
    .ddscore-nav-desktop {
        display: none !important;
    }

    .ddscore-hamburger {
        display: flex !important;
    }

    .ddscore-nav-mobile {
        display: flex !important;
        max-height: min(72vh, 26rem);
        overflow-y: auto;
        overflow-x: hidden;
        max-width: min(19rem, var(--dds-nav-mobile-max-w, calc(100vw - 2 * var(--dds-main-padding-x))));
    }
}

/* Problem Reports Admin Page — width follows .ddscore-main (no nested max-width + extra gutters). */
.problem-reports-admin-page {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    padding: 1rem 0 1.75rem;
    min-width: 0;
}

.problem-reports-admin-page h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--dds-text-primary);
}

.ddscore-problem-report-error {
    margin-bottom: 2rem;
}

.loading-indicator {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-indicator .ddscore-spinner {
    margin: 0 auto 1rem;
}

.reports-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
}

.problem-reports-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--dds-bg-card-surface);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    overflow: hidden;
    box-shadow: var(--dds-shadow);
}

.problem-reports-table th {
    background: color-mix(in srgb, var(--dds-bg-card-hover) 55%, var(--dds-bg-card));
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--dds-text-primary);
    border-bottom: 2px solid var(--dds-border);
}

.problem-reports-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--dds-border);
    vertical-align: top;
    /* Match header cells: tables also use .ddscore-table, which right-aligns non-first columns on td only. */
    text-align: left;
}

.problem-reports-table tbody tr:hover {
    background: var(--dds-bg-card-hover);
}

.report-row {
    cursor: pointer;
    transition: background 0.2s;
}

.problem-description-cell {
    max-width: min(28rem, 100%);
    word-break: break-word;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    line-height: 1.4;
}

.ddscore-problem-report-related-note {
    margin-top: 0.5rem;
}

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

.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge.bg-info {
    background: var(--dds-accent-primary);
    color: white;
}

.badge.bg-warning {
    background: var(--dds-score-moderate);
    color: white;
}

.badge.bg-secondary {
    background: var(--dds-text-muted);
    color: white;
}

.badge.bg-success {
    background: var(--dds-score-excellent);
    color: white;
}

.no-reports-message {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--dds-text-muted);
}

.no-reports-message i {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-reports-message h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--dds-text-secondary);
}

/* Admin hub & user management */
.ddscore-admin-hub-intro,
.ddscore-admin-hint {
    color: var(--dds-text-secondary);
    margin-bottom: 1.5rem;
    max-width: 52rem;
    line-height: 1.5;
}

.ddscore-admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Admin hub only: stacked icon + text, cards ~60% larger footprint than base card */
.ddscore-admin-hub .ddscore-admin-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
    gap: 2rem;
}

.ddscore-admin-hub .ddscore-admin-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 2.15rem 2rem;
}

.ddscore-admin-hub .ddscore-admin-card-body {
    width: 100%;
}

.ddscore-admin-hub .ddscore-admin-card h2 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
}

.ddscore-admin-hub .ddscore-admin-card p {
    font-size: 1.45rem;
    line-height: 1.5;
}

.ddscore-admin-hub .ddscore-admin-card p code {
    font-size: 0.92em;
}

.ddscore-admin-card {
    display: flex;
    gap: 1rem;
    padding: 1.35rem 1.25rem;
    border-radius: var(--dds-radius-lg);
    border: 1px solid var(--dds-border);
    background: var(--dds-bg-card-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    box-shadow: var(--dds-shadow);
}

.ddscore-admin-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--dds-card-accent-line-height);
    background: var(--dds-card-accent-line);
    pointer-events: none;
    z-index: 1;
}

.ddscore-admin-card:hover {
    border-color: color-mix(in srgb, var(--dds-accent-primary) 42%, var(--dds-border));
    box-shadow: var(--dds-shadow-lg);
}

.ddscore-admin-card > * {
    position: relative;
    z-index: 2;
}

.ddscore-admin-card h2 {
    font-size: 1.1rem;
    margin: 0 0 0.35rem;
    color: var(--dds-text-primary);
}

.ddscore-admin-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--dds-text-secondary);
    line-height: 1.45;
}

.ddscore-admin-card-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--dds-radius-sm);
    background: var(--dds-accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.ddscore-admin-hub .ddscore-admin-card-icon {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 2rem;
    border-radius: var(--dds-radius-lg);
}

.ddscore-admin-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.ddscore-admin-toolbar h1 {
    margin: 0;
    min-width: 0;
}

.ddscore-admin-toolbar .ddscore-admin-toolbar-home {
    grid-column: 2;
    justify-self: end;
}

/* Recent reports (user): matches report-problem / dashboard card rhythm */
.ddscore-recent-reports-page {
    max-width: min(76rem, 100%);
    margin: 0 auto;
    padding: 2rem var(--dds-content-padding, 1rem) 4rem;
    box-sizing: border-box;
}

.ddscore-recent-reports-header {
    text-align: center;
    margin-bottom: 2rem;
}

.ddscore-recent-reports-title {
    font-family: var(--dds-heading-font-family);
    max-width: 100%;
    font-size: clamp(1.35rem, 0.4rem + 3.4vw, 2rem);
    font-weight: var(--dds-heading-font-weight);
    color: var(--dds-text-primary);
    margin: 0 0 0.65rem;
    letter-spacing: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-recent-reports-title {
        font-size: clamp(1.35rem, 0.4rem + 6cqi, 2rem);
    }
}

.ddscore-recent-reports-lead {
    color: var(--dds-text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 38rem;
    margin: 0 auto 1.25rem;
}

.ddscore-recent-reports-lead strong {
    color: var(--dds-text-primary);
    font-weight: 600;
}

.ddscore-recent-reports-top-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ddscore-recent-reports-back-icon {
    margin-right: 0.35rem;
    opacity: 0.9;
}

.ddscore-recent-reports-alert {
    margin: 0 auto 1.25rem;
    max-width: 40rem;
}

.ddscore-recent-reports-loading {
    padding: 3rem 1.5rem;
}

.ddscore-recent-reports-loading-label {
    margin: 0;
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
}

.ddscore-recent-reports-empty-card {
    text-align: center;
    padding: 0.5rem 0 1rem;
}

.ddscore-recent-reports-empty-inner {
    padding: 1.75rem 1.25rem 2rem;
    max-width: 26rem;
    margin: 0 auto;
}

.ddscore-recent-reports-empty-icon {
    display: block;
    font-size: 2.75rem;
    line-height: 1;
    margin-bottom: 1rem;
    color: var(--dds-accent-secondary);
    opacity: 0.85;
}

.ddscore-recent-reports-empty-title {
    margin-bottom: 0.65rem;
}

.ddscore-recent-reports-empty-body {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1.35rem;
}

.ddscore-recent-reports-table-card {
    padding-bottom: 1.25rem;
}

.ddscore-recent-reports-table-card .ddscore-card-title {
    margin-bottom: 1rem;
}

.ddscore-recent-reports-table-wrap {
    margin: 0;
}

/* Wider table + no wrap on dates/actions; parent .reports-table-container scrolls horizontally when needed */
.ddscore-recent-reports-table {
    min-width: 58rem;
}

/* Headers and values aligned to column center (Shared over icons, Actions over buttons). */
.ddscore-recent-reports-table th,
.ddscore-recent-reports-table td {
    text-align: center;
    vertical-align: middle;
}

/* Beat .ddscore-table *:first-child { text-align: left } on this page only */
.ddscore-table.ddscore-recent-reports-table th:first-child,
.ddscore-table.ddscore-recent-reports-table td:first-child {
    text-align: center;
}

.ddscore-recent-reports-datetime {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ddscore-recent-reports-shared-cell {
    white-space: nowrap;
}

.ddscore-recent-reports-shared-none {
    color: var(--dds-text-muted);
    font-size: 0.875rem;
}

.ddscore-recent-reports-shared-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.ddscore-recent-reports-share-icon {
    color: var(--dds-accent-secondary);
    font-size: 1rem;
}

.ddscore-recent-reports-actions-col {
    min-width: 17.5rem;
}

.ddscore-recent-reports-actions-cell {
    white-space: nowrap;
}

.ddscore-recent-reports-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.ddscore-recent-reports-remove-share {
    font-size: 0.8rem;
}

.ddscore-recent-reports-actions .ddscore-btn {
    white-space: nowrap;
}

/* Company + i chip (DdscoreFieldHint): same affordance as report page; chip hidden on wide table where columns show meta. */
.ddscore-recent-reports-company-cell {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.ddscore-recent-reports-company-name {
    font-weight: 600;
    color: var(--dds-text-primary);
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .ddscore-recent-reports-company-cell .ddscore-field-hint-wrap {
        display: none;
    }

    .ddscore-recent-reports-company-name {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
}

/* Narrow viewports: hide Created / Status columns (shown in row help modal); stack actions full width. */
@media (max-width: 768px) {
    .ddscore-recent-reports-empty-card {
        padding: 0.25rem 0 0.55rem;
    }

    .ddscore-recent-reports-empty-inner {
        padding: 1rem 0.6rem 1.2rem;
    }

    .ddscore-recent-reports-empty-icon {
        font-size: 2.25rem;
        margin-bottom: 0.65rem;
    }

    .ddscore-recent-reports-empty-title {
        margin-bottom: 0.4rem;
    }

    .ddscore-recent-reports-empty-body {
        margin-bottom: 0.95rem;
    }

    .ddscore-recent-reports-table {
        min-width: 0;
        width: 100%;
    }

    .ddscore-recent-reports-table th.ddscore-recent-reports-col--narrow-hidden,
    .ddscore-recent-reports-table td.ddscore-recent-reports-col--narrow-hidden {
        display: none;
    }

    .ddscore-recent-reports-table th.ddscore-recent-reports-col-company,
    .ddscore-recent-reports-table td.ddscore-recent-reports-col-company {
        text-align: left;
    }

    .ddscore-recent-reports-shared-cell {
        white-space: normal;
    }

    .ddscore-recent-reports-actions-col {
        min-width: 0;
    }

    .ddscore-recent-reports-actions-cell {
        white-space: normal;
    }

    .ddscore-recent-reports-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        gap: 0.5rem;
    }

    .ddscore-recent-reports-actions .ddscore-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
        white-space: normal;
    }
}

.ddscore-recent-reports-copy-status {
    text-align: center;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    margin: 0 auto 0.75rem;
    max-width: 40rem;
}

.ddscore-admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.ddscore-admin-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ddscore-admin-filter-field .ddscore-admin-label {
    margin-top: 0;
}

.ddscore-admin-filter-field .ddscore-input {
    width: min(100%, 18rem);
    max-width: 100%;
    box-sizing: border-box;
}

.ddscore-admin-filter-field--grow {
    flex: 1 1 12rem;
}

.ddscore-admin-filter-field--grow .ddscore-input {
    width: 100%;
    max-width: 28rem;
}

.ddscore-admin-filter-field--action {
    align-self: flex-end;
}

.ddscore-admin-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
}

.ddscore-admin-pager .ddscore-btn--small {
    min-width: 5.5rem;
}

.ddscore-admin-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
}

.ddscore-admin-user-table .ddscore-admin-actions .ddscore-btn {
    white-space: nowrap;
}

.ddscore-admin-license-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ddscore-admin-license-count {
    color: var(--dds-text-secondary);
    font-size: 0.78rem;
    border: 1px solid var(--dds-border-light);
    border-radius: 999px;
    padding: 0.05rem 0.35rem;
}

.ddscore-admin-credit-cell {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 32%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-accent-primary) 7%, transparent);
    color: var(--dds-text-primary);
    border-radius: 0.35rem;
    min-width: 4.5rem;
    padding: 0.32rem 0.48rem;
    font: inherit;
    text-align: center;
    cursor: cell;
}

.ddscore-admin-credit-cell:hover,
.ddscore-admin-credit-cell:focus-visible {
    border-color: var(--dds-accent-primary);
    outline: none;
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--dds-accent-primary) 18%, transparent);
}

.ddscore-admin-credit-input {
    width: 5.5rem;
    min-width: 5.5rem;
    border: 1px solid var(--dds-accent-primary);
    border-radius: 0.35rem;
    background: var(--dds-bg-input);
    color: var(--dds-text-primary);
    padding: 0.32rem 0.48rem;
    font: inherit;
    text-align: center;
    box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--dds-accent-primary) 18%, transparent);
}

.ddscore-admin-credit-input:focus {
    outline: none;
}

.ddscore-admin-muted {
    color: var(--dds-text-muted);
}

.ddscore-admin-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
    margin: 0.75rem 0 0.35rem;
}

.ddscore-admin-health-subtitle {
    color: var(--dds-text-secondary);
    margin: 0.25rem 0 0;
}

/* DDScore agent admin */
.ddscore-agent-admin {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ddscore-agent-panel {
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    background: var(--dds-bg-card-surface);
    box-shadow: var(--dds-shadow);
    padding: 1rem;
    min-width: 0;
}

.ddscore-agent-management-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ddscore-agent-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.ddscore-agent-panel-header h2,
.ddscore-agent-panel-header h3 {
    margin: 0;
    color: var(--dds-text-primary);
}

.ddscore-agent-panel-header h2 {
    font-size: 1.25rem;
}

.ddscore-agent-panel-header h3 {
    font-size: 1rem;
    line-height: 1.3;
}

.ddscore-agent-actions-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ddscore-agent-actions-row--detail {
    justify-content: flex-start;
    margin-top: 0.85rem;
}

.ddscore-agent-selected-label {
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ddscore-agent-table-wrap {
    border-radius: var(--dds-radius-md);
}

.ddscore-agent-table {
    min-width: 62rem;
}

.ddscore-agent-results-table {
    min-width: 54rem;
}

.ddscore-agent-table tbody tr {
    cursor: pointer;
}

.ddscore-agent-table td strong,
.ddscore-agent-table td small {
    display: block;
}

.ddscore-agent-table td small {
    margin-top: 0.25rem;
    color: var(--dds-text-secondary);
    line-height: 1.35;
}

.ddscore-agent-row-selected {
    background: color-mix(in srgb, var(--dds-accent-primary) 12%, var(--dds-bg-card-surface)) !important;
}

.ddscore-agent-results-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
    gap: 1rem;
    align-items: start;
}

.ddscore-agent-detail {
    border: 1px solid var(--dds-border-light);
    border-radius: var(--dds-radius-md);
    background: var(--dds-bg-card);
    padding: 1rem;
    min-width: 0;
}

.ddscore-agent-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.ddscore-agent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.ddscore-agent-meta span {
    border: 1px solid var(--dds-border-light);
    border-radius: 999px;
    padding: 0.15rem 0.45rem;
    color: var(--dds-text-secondary);
    font-size: 0.78rem;
}

.ddscore-agent-source-text {
    max-height: 11rem;
    overflow: auto;
    border: 1px solid var(--dds-border-light);
    border-radius: var(--dds-radius-sm);
    padding: 0.75rem;
    color: var(--dds-text-secondary);
    background: var(--dds-bg-card-surface);
    line-height: 1.45;
    white-space: pre-wrap;
}

.ddscore-agent-reply,
.ddscore-agent-rewrite,
.ddscore-agent-textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.ddscore-agent-reply {
    min-height: 12rem;
}

.ddscore-agent-rewrite {
    min-height: 5rem;
}

.ddscore-agent-textarea {
    min-height: 6rem;
}

.ddscore-agent-loading-inline {
    padding: 2rem 1rem;
}

.ddscore-agent-editor {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5rem 1rem 1rem;
    background: color-mix(in srgb, var(--dds-bg-page) 72%, transparent);
    overflow: auto;
}

.ddscore-agent-editor-panel {
    width: min(100%, 46rem);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-lg);
    background: var(--dds-bg-card-surface);
    box-shadow: var(--dds-shadow-lg);
    padding: 1rem;
}

.ddscore-agent-checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.5rem;
}

.ddscore-agent-checkbox-list--areas {
    max-height: 12rem;
    overflow: auto;
    border: 1px solid var(--dds-border-light);
    border-radius: var(--dds-radius-sm);
    padding: 0.65rem;
}

.ddscore-agent-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--dds-text-primary);
    font-size: 0.9rem;
}

.ddscore-agent-checkbox input {
    accent-color: var(--dds-accent-primary);
}

@media (max-width: 1080px) {
    .ddscore-agent-results-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ddscore-agent-detail {
        order: -1;
    }
}

@media (max-width: 768px) {
    .ddscore-agent-panel {
        padding: 0.75rem;
    }

    .ddscore-agent-panel-header,
    .ddscore-agent-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ddscore-agent-actions-row,
    .ddscore-agent-actions-row .ddscore-btn,
    .ddscore-agent-management-row,
    .ddscore-agent-management-row .ddscore-btn {
        width: 100%;
    }

    .ddscore-agent-actions-row,
    .ddscore-agent-management-row {
        align-items: stretch;
    }

    .ddscore-agent-table,
    .ddscore-agent-results-table {
        min-width: 46rem;
    }

    .ddscore-agent-editor {
        padding: 1rem;
    }
}

.ddscore-health-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    border: 1px solid var(--dds-border-light);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.25rem 0;
    background: color-mix(in srgb, var(--dds-bg-card-surface) 88%, var(--dds-accent-primary));
}

.ddscore-health-hero--ok {
    border-color: color-mix(in srgb, var(--dds-score-excellent) 70%, var(--dds-border-light));
}

.ddscore-health-hero--warn {
    border-color: color-mix(in srgb, var(--dds-score-warning) 72%, var(--dds-border-light));
}

.ddscore-health-hero--critical {
    border-color: color-mix(in srgb, var(--dds-score-poor) 72%, var(--dds-border-light));
}

.ddscore-health-eyebrow {
    color: var(--dds-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ddscore-health-score {
    color: var(--dds-text-primary);
    font-size: 5.5rem;
    font-weight: 800;
    line-height: 0.95;
    margin-top: 0.35rem;
}

.ddscore-health-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    text-align: right;
}

.ddscore-health-maintenance-panel,
.ddscore-maintenance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid color-mix(in srgb, var(--dds-score-warning) 55%, var(--dds-border));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--dds-score-warning) 10%, var(--dds-bg-card-surface));
    color: var(--dds-text-primary);
}

.ddscore-health-maintenance-panel {
    margin: 0 0 1.25rem;
    padding: 1rem;
}

.ddscore-health-running-now {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--dds-score-excellent) 38%, var(--dds-border));
    border-radius: 0.5rem;
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    min-width: 11rem;
    padding: 0.75rem 1rem;
}

.ddscore-health-running-now--busy {
    border-color: color-mix(in srgb, var(--dds-score-warning) 60%, var(--dds-border));
}

.ddscore-health-running-now--has-tooltip {
    cursor: help;
}

.ddscore-health-running-now span {
    color: var(--dds-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ddscore-health-running-now strong {
    color: var(--dds-text-primary);
    font-size: 2.45rem;
    font-weight: 700;
    line-height: 0.98;
}

.ddscore-health-running-now em {
    color: var(--dds-text-muted);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 600;
}

.ddscore-maintenance-banner {
    margin: 0 auto 1rem;
    max-width: var(--dds-content-max-width);
    padding: 0.85rem 1rem;
}

.ddscore-maintenance-banner--dashboard-action {
    align-self: stretch;
    box-sizing: border-box;
    margin: 0.85rem 0 0;
    max-width: 100%;
    width: 100%;
}

.ddscore-maintenance-banner strong,
.ddscore-health-maintenance-panel h2 {
    display: block;
    color: var(--dds-score-warning);
    font-size: 1rem;
    margin: 0 0 0.25rem;
}

.ddscore-maintenance-banner span,
.ddscore-health-maintenance-panel p {
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.ddscore-health-maintenance-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.ddscore-health-maintenance-controls label {
    color: var(--dds-text-secondary);
    display: grid;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 0.25rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ddscore-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.ddscore-health-grid--small {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
    margin-top: 1rem;
}

.ddscore-health-block {
    border: 1px solid var(--dds-border);
    border-radius: 0.5rem;
    background: var(--dds-bg-card-surface);
    padding: 1rem;
    min-width: 0;
}

.ddscore-health-block--ok {
    border-color: color-mix(in srgb, var(--dds-score-excellent) 36%, var(--dds-border));
}

.ddscore-health-block--warn {
    border-color: color-mix(in srgb, var(--dds-score-warning) 48%, var(--dds-border));
}

.ddscore-health-block--critical {
    border-color: color-mix(in srgb, var(--dds-score-poor) 56%, var(--dds-border));
}

.ddscore-health-block-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.ddscore-health-block h2 {
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
    min-width: 0;
    color: var(--dds-text-primary);
    overflow-wrap: anywhere;
}

.ddscore-health-block-header span {
    color: var(--dds-text-secondary);
    font-size: 0.78rem;
    border: 1px solid var(--dds-border-light);
    border-radius: 999px;
    padding: 0.12rem 0.45rem;
    white-space: nowrap;
}

.ddscore-health-block p {
    color: var(--dds-text-secondary);
    font-size: 0.88rem;
    margin: 0 0 0.85rem;
    overflow-wrap: anywhere;
}

.ddscore-health-block dl {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.ddscore-health-block dl div {
    display: grid;
    grid-template-columns: minmax(6rem, 0.9fr) minmax(0, 1.1fr);
    gap: 0.6rem;
    align-items: baseline;
    min-width: 0;
}

.ddscore-health-block dt {
    color: var(--dds-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ddscore-health-block dd {
    color: var(--dds-text-primary);
    font-size: 0.86rem;
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.ddscore-health-counter-list div {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.85rem;
}

.ddscore-health-counter-list dd {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    justify-self: end;
    text-align: right;
}

.ddscore-health-counter-list--window div {
    grid-template-columns: minmax(5.5rem, 1fr) max-content;
}

.ddscore-health-counter-list--distribution div {
    padding-block: 0.08rem;
}

.ddscore-health-distribution-visual {
    align-items: center;
    display: flex;
    gap: 0.8rem;
    margin: 0.15rem 0 0.85rem;
}

.ddscore-health-pie {
    aspect-ratio: 1;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 0.65rem color-mix(in srgb, var(--dds-accent-primary) 22%, transparent));
    inline-size: 4.4rem;
}

.ddscore-health-pie-slice {
    stroke: var(--dds-bg-card);
    stroke-linejoin: round;
    stroke-width: 1;
}

.ddscore-health-pie-slice--1 {
    fill: var(--dds-accent-primary);
}

.ddscore-health-pie-slice--2 {
    fill: var(--dds-score-green);
}

.ddscore-health-pie-slice--3 {
    fill: var(--dds-score-cyan);
}

.ddscore-health-pie-slice--4 {
    fill: var(--dds-score-yellow);
}

.ddscore-health-pie-slice--5 {
    fill: var(--dds-score-orange);
}

.ddscore-health-pie-slice--6 {
    fill: var(--dds-rec-green);
}

.ddscore-health-pie-slice--7 {
    fill: var(--dds-accent-secondary);
}

.ddscore-health-pie-slice--8 {
    fill: var(--dds-text-muted);
}

.ddscore-health-pie-hole {
    fill: var(--dds-bg-card);
    stroke: var(--dds-border);
    stroke-width: 1;
}

.ddscore-health-pie-total {
    color: var(--dds-text-secondary);
    display: grid;
    gap: 0.08rem;
    line-height: 1.1;
}

.ddscore-health-pie-total strong {
    color: var(--dds-text-primary);
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0;
}

.ddscore-health-pie-total em {
    color: var(--dds-text-muted);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: var(--dds-heading-letter-spacing);
    text-transform: uppercase;
}

.ddscore-health-counter-list--distribution meter {
    appearance: none;
    grid-column: 1 / -1;
    width: 100%;
    height: 0.28rem;
}

.ddscore-health-counter-list--distribution meter::-webkit-meter-bar {
    background: var(--dds-bg-input);
    border: 0;
    border-radius: 999px;
}

.ddscore-health-counter-list--distribution meter::-webkit-meter-optimum-value {
    background: var(--dds-accent-primary);
    border-radius: 999px;
}

.ddscore-health-counter-list--distribution meter::-moz-meter-bar {
    background: var(--dds-accent-primary);
    border-radius: 999px;
}

@media (max-width: 640px) {
    .ddscore-health-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .ddscore-health-meta {
        text-align: left;
    }

    .ddscore-health-score {
        font-size: 3.5rem;
    }

    .ddscore-health-maintenance-panel,
    .ddscore-maintenance-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Problem Report Detail Modal */
.ddscore-problem-report-detail-modal {
    width: min(900px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
}

.report-detail-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--dds-border);
}

.report-detail-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.report-detail-section h4 {
    font-size: 1.1rem;
    color: var(--dds-text-accent);
    margin-bottom: 1rem;
}

.problem-description-full {
    line-height: 1.6;
    color: var(--dds-text-secondary);
    white-space: pre-wrap;
}

.materials-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.material-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--dds-bg-card-hover);
    border-radius: var(--dds-radius-sm);
    margin-bottom: 0.75rem;
}

.material-size {
    color: var(--dds-text-muted);
    margin-left: auto;
}

.download-all-section {
    margin-top: 1.5rem;
    text-align: right;
}

.ddscore-btn--small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .ddscore-main:has(.problem-reports-admin-page) {
        --dds-main-padding-x: 0.5rem;
        padding-left: var(--dds-main-padding-x);
        padding-right: var(--dds-main-padding-x);
    }

    .problem-reports-admin-page {
        padding: 1rem 0 1.75rem;
    }

    .problem-reports-table {
        font-size: 0.85rem;
    }

    .problem-reports-table th,
    .problem-reports-table td {
        padding: 0.75rem 0.5rem;
    }

    .problem-description-cell {
        max-width: 200px;
    }

    .ddscore-problem-report-detail-modal {
        width: min(98vw, 100%);
        max-height: 95vh;
    }
}

/* Problem Report Dialog — wide layout; height from flex parent (nearly 100dvh); inner body scrolls only */
.ddscore-modal.ddscore-problem-report-modal {
    width: min(720px, calc(100vw - 1.25rem));
    max-width: none;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ddscore-problem-report-modal .ddscore-modal-header {
    flex-shrink: 0;
}

.ddscore-problem-report-modal-body {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.25rem 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: auto;
    scrollbar-color: color-mix(in srgb, var(--dds-border-light) 88%, var(--dds-text-muted)) var(--dds-bg-secondary);
}

.ddscore-problem-report-modal-body::-webkit-scrollbar {
    width: 12px;
}

.ddscore-problem-report-modal-body::-webkit-scrollbar-track {
    background: var(--dds-bg-secondary);
    border-radius: 8px;
}

.ddscore-problem-report-modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dds-border-light) 75%, var(--dds-text-muted));
    border-radius: 8px;
    border: 3px solid var(--dds-bg-secondary);
}

.ddscore-problem-report-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--dds-border-light);
}

.ddscore-problem-report-lead {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dds-text-secondary);
}

.ddscore-form-section--panel {
    background: var(--dds-bg-card-hover);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-md);
    padding: 1rem 1.1rem 1.15rem;
    margin-bottom: 1rem;
}

.ddscore-form-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dds-text-muted);
    margin-bottom: 0.85rem;
}

.ddscore-req-star {
    color: var(--dds-rec-amber, #f59e0b);
}

.ddscore-optional-label {
    font-weight: 500;
    color: var(--dds-text-muted);
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.85em;
}

.ddscore-textarea--problem {
    min-height: 6.5rem;
    line-height: 1.55;
}

@media (min-height: 800px) {
    .ddscore-problem-report-modal .ddscore-textarea--problem {
        min-height: 5.5rem;
    }
}

.ddscore-radio-group--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.ddscore-retention-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid color-mix(in srgb, var(--dds-rec-amber, #f59e0b) 35%, transparent);
    background: color-mix(in srgb, var(--dds-rec-amber, #f59e0b) 10%, transparent);
}

.ddscore-retention-notice-icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--dds-rec-amber, #f59e0b);
    border: 1px solid color-mix(in srgb, var(--dds-rec-amber, #f59e0b) 50%, transparent);
    margin-top: 0.1rem;
}

.ddscore-retention-notice-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
}

.ddscore-retention-notice-text strong {
    color: var(--dds-text-primary);
}

.ddscore-response-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--dds-text-secondary);
}

.ddscore-response-note-mark {
    flex-shrink: 0;
    color: var(--dds-score-excellent, #34d399);
    font-weight: 700;
}

.ddscore-report-problem-privacy-wrap {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ddscore-modal-footer--problem {
    margin-top: 1rem;
    padding-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.ddscore-success-message--thanks {
    padding: 1.75rem 1rem 2rem;
}

.ddscore-success-icon-ring {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--dds-score-excellent, #34d399);
    border: 2px solid color-mix(in srgb, var(--dds-score-excellent, #34d399) 45%, transparent);
    background: color-mix(in srgb, var(--dds-score-excellent, #34d399) 12%, transparent);
}

.ddscore-success-title {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--dds-text-primary);
}

.ddscore-success-lead {
    font-size: 1rem;
    color: var(--dds-text-secondary);
    margin: 0 0 0.75rem;
}

.ddscore-form-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ddscore-form-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dds-text-primary);
    margin-bottom: 1rem;
}

.ddscore-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ddscore-form-group {
    margin-bottom: 1rem;
}

.ddscore-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--dds-text-secondary);
    margin-bottom: 0.5rem;
}

.ddscore-form-group .ddscore-input:disabled {
    background: var(--dds-bg-input);
    opacity: 0.7;
    cursor: not-allowed;
}

.ddscore-textarea {
    resize: vertical;
    min-height: 120px;
}

.ddscore-input-file {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--dds-bg-input);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    color: var(--dds-text-primary);
}

.ddscore-file-list {
    margin-top: 0.75rem;
    max-height: 150px;
    overflow-y: auto;
}

.ddscore-file-list .ddscore-file-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--dds-bg-card-hover);
    border-radius: var(--dds-radius-sm);
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.ddscore-file-list .ddscore-file-size {
    color: var(--dds-text-muted);
    margin-left: auto;
}

.ddscore-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ddscore-radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--dds-radius-sm);
    transition: background 0.2s;
}

.ddscore-radio-item:hover {
    background: var(--dds-bg-card-hover);
}

.ddscore-form-hint {
    font-size: 0.8rem;
    color: var(--dds-text-muted);
    margin-top: 0.5rem;
    font-style: italic;
}

.ddscore-report-problem-privacy-note {
    font-size: 0.8rem;
    color: var(--dds-text-muted);
    line-height: 1.5;
    margin: 0;
}

.ddscore-report-problem-privacy-note a {
    color: var(--dds-accent-secondary);
    text-decoration: none;
}

.ddscore-report-problem-privacy-note a:hover {
    text-decoration: underline;
}

.ddscore-error-message {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--dds-rec-red-bg);
    border: 1px solid var(--dds-rec-red);
    border-radius: var(--dds-radius-sm);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ddscore-error-message i {
    color: var(--dds-rec-red);
    font-size: 1.25rem;
}

.ddscore-error-message p {
    margin: 0;
    color: var(--dds-text-primary);
    font-size: 0.9rem;
}

/* Success Message */
.ddscore-success-message {
    text-align: center;
    padding: 2rem 1rem;
}

.ddscore-success-icon {
    font-size: 4rem;
    color: var(--dds-score-excellent);
    margin-bottom: 1rem;
}

.ddscore-success-message h4 {
    font-size: 1.5rem;
    color: var(--dds-text-primary);
    margin-bottom: 1rem;
}

.ddscore-success-message p {
    color: var(--dds-text-secondary);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.ddscore-success-note {
    font-size: 0.9rem;
    color: var(--dds-text-muted);
    margin-top: 1.5rem !important;
}

/* Mobile adjustments for problem report dialog */
@media (max-width: 768px) {
    .ddscore-modal.ddscore-problem-report-modal {
        width: min(95vw, 100%);
    }

    .ddscore-form-row {
        grid-template-columns: 1fr;
    }

    .ddscore-contact-toggle {
        flex-wrap: wrap;
    }

    .ddscore-feedback-type-grid {
        grid-template-columns: 1fr;
    }
}

/* Problem report modal: close button (match share dialog) */
.ddscore-problem-report-modal .ddscore-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--dds-text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
}

.ddscore-problem-report-modal .ddscore-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--dds-accent, #4FC3F7);
    color: var(--dds-accent, #4FC3F7);
    transform: rotate(90deg) scale(var(--dds-btn-hover-scale));
}

.ddscore-problem-report-modal .ddscore-modal-close:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

/* Keep 90° while pressed from hover; plain :active above handles press without prior hover. */
.ddscore-problem-report-modal .ddscore-modal-close:hover:active {
    transform: rotate(90deg) scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-dropzone--problem {
    padding: 1.75rem 1.25rem;
}

.ddscore-feedback-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.ddscore-feedback-type-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
    background: var(--dds-bg-input);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.2s ease;
    transform-origin: center;
}

.ddscore-feedback-type-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ddscore-feedback-type-option:hover {
    border-color: var(--dds-accent-primary);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-feedback-type-option:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-feedback-type-option.selected {
    border-color: var(--dds-accent-primary);
    background: var(--dds-accent-glow);
}

.ddscore-feedback-type-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ddscore-feedback-type-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
}

.ddscore-feedback-type-option.selected .ddscore-feedback-type-label {
    color: var(--dds-text-primary);
}

.ddscore-section-picker {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--dds-border);
}

.ddscore-section-picker-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
    margin-bottom: 0.5rem;
}

.ddscore-section-picker-search {
    position: relative;
    margin-bottom: 0.65rem;
}

.ddscore-section-picker-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dds-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

.ddscore-section-picker-input {
    padding-left: 2.25rem;
}

.ddscore-section-picker-list {
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    background: var(--dds-bg-input);
    scrollbar-width: auto;
    scrollbar-color: color-mix(in srgb, var(--dds-border-light) 88%, var(--dds-text-muted)) var(--dds-bg-secondary);
}

.ddscore-section-picker-list::-webkit-scrollbar {
    width: 12px;
}

.ddscore-section-picker-list::-webkit-scrollbar-track {
    background: var(--dds-bg-secondary);
    border-radius: 8px;
}

.ddscore-section-picker-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dds-border-light) 75%, var(--dds-text-muted));
    border-radius: 8px;
    border: 3px solid var(--dds-bg-secondary);
}

.ddscore-section-picker-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    border-bottom: 1px solid var(--dds-border);
    font-size: 0.85rem;
}

.ddscore-section-picker-item:last-child {
    border-bottom: none;
}

.ddscore-section-picker-item input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ddscore-section-picker-check {
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    border: 1px solid var(--dds-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.55rem;
    color: transparent;
}

.ddscore-section-picker-item.selected .ddscore-section-picker-check {
    background: var(--dds-accent-primary);
    border-color: var(--dds-accent-primary);
    color: var(--dds-bg-primary, #07080e);
}

.ddscore-section-picker-title {
    color: var(--dds-text-primary);
}

.ddscore-section-picker-empty {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.82rem;
    color: var(--dds-text-muted);
}

.ddscore-contact-toggle {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ddscore-contact-toggle-option {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.ddscore-contact-toggle-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ddscore-contact-toggle-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--dds-border);
    background: var(--dds-bg-input);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dds-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.2s ease;
    white-space: nowrap;
    transform-origin: center;
}

.ddscore-contact-toggle-option:hover .ddscore-contact-toggle-label {
    border-color: var(--dds-accent-primary);
    color: var(--dds-text-primary);
    transform: scale(var(--dds-btn-hover-scale));
}

.ddscore-contact-toggle-option.selected .ddscore-contact-toggle-label {
    border-color: var(--dds-accent-primary);
    background: var(--dds-accent-glow);
    color: var(--dds-text-primary);
}

.ddscore-contact-toggle-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.ddscore-contact-input-wrap {
    display: none;
    margin-top: 0.65rem;
}

.ddscore-contact-input-wrap.visible {
    display: block;
}

.ddscore-problem-account-readonly {
    margin: 0.55rem 0 0.85rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid color-mix(in srgb, var(--dds-border-subtle, rgba(255, 255, 255, 0.08)) 100%, transparent);
    background: color-mix(in srgb, var(--dds-surface-elevated, #1a1f2e) 60%, transparent);
}

.ddscore-problem-account-readonly-line {
    margin: 0 0 0.35rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--dds-text-primary);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    align-items: baseline;
}

.ddscore-problem-account-readonly-line:last-of-type {
    margin-bottom: 0.15rem;
}

.ddscore-problem-account-readonly-k {
    font-weight: 600;
    color: var(--dds-text-secondary);
    min-width: 5.5rem;
}

.ddscore-problem-account-readonly-v {
    word-break: break-word;
}

.ddscore-problem-account-readonly-hint {
    margin: 0.4rem 0 0 !important;
}

.ddscore-contact-input-wrap--readonly .ddscore-problem-followup-email {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--dds-text-primary);
    word-break: break-word;
}

.ddscore-input-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--dds-text-secondary);
    margin-bottom: 0.35rem;
}

.ddscore-response-note-icon {
    flex-shrink: 0;
    margin-top: 0.12rem;
    color: var(--dds-score-excellent, #34d399);
}

.ddscore-report-inclusion-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--dds-radius-sm);
    border: 1px solid color-mix(in srgb, var(--dds-accent-secondary, #4F6EF7) 35%, transparent);
    background: color-mix(in srgb, var(--dds-accent-secondary, #4F6EF7) 8%, transparent);
}

.ddscore-report-inclusion-notice-icon {
    flex-shrink: 0;
    color: var(--dds-accent-secondary, #4F6EF7);
    margin-top: 0.1rem;
}

.ddscore-report-inclusion-notice-text {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
}

/* Thank-you step (feedback-thanks style) */
.ddscore-thanks-page {
    padding: 1.25rem 0.25rem 1.5rem;
}

.ddscore-thanks-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--dds-score-excellent, #34d399) 10%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--dds-score-excellent, #34d399) 30%, transparent);
    color: var(--dds-score-excellent, #34d399);
}

.ddscore-thanks-title {
    font-size: 1.55rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0.65rem;
    color: var(--dds-text-primary);
}

.ddscore-thanks-subtitle {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--dds-text-secondary);
    text-align: center;
    margin: 0 0 1.35rem;
}

.ddscore-thanks-summary-card {
    background: var(--dds-bg-card-hover);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-md);
    padding: 1.1rem 1rem 0.25rem;
    margin-bottom: 1.25rem;
}

.ddscore-thanks-summary-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dds-text-muted);
    margin-bottom: 0.65rem;
}

.ddscore-thanks-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--dds-border);
}

.ddscore-thanks-summary-item:last-child {
    border-bottom: none;
}

.ddscore-thanks-summary-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dds-accent-primary);
    margin-top: 0.45rem;
    flex-shrink: 0;
}

.ddscore-thanks-summary-item p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
}

.ddscore-thanks-summary-item p strong {
    color: var(--dds-text-primary);
}

.ddscore-thanks-closing {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--dds-text-secondary);
    margin: 0 0 1.25rem;
}

.ddscore-thanks-closing strong {
    color: var(--dds-text-primary);
}

.ddscore-thanks-back-icon {
    margin-right: 0.35rem;
    vertical-align: middle;
}

.ddscore-problem-report-modal .validation-message,
.ddscore-report-problem-page .validation-message {
    font-size: 0.78rem;
    color: var(--dds-rec-red, #f87171);
    margin-top: 0.35rem;
}

/* Report problem — full page (not modal); cards match report chrome */
.ddscore-report-problem-page {
    max-width: min(52rem, 100%);
    margin: 0 auto;
    padding: 2rem var(--dds-content-padding, 1rem) 4rem;
}

.ddscore-report-problem-page__header {
    text-align: center;
    margin-bottom: 2rem;
}

.ddscore-report-problem-page__title {
    font-family: var(--dds-heading-font-family);
    max-width: 100%;
    font-size: clamp(1.35rem, 0.4rem + 3.4vw, 2rem);
    font-weight: var(--dds-heading-font-weight);
    color: var(--dds-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
}

@supports (font-size: 1cqi) {
    .ddscore-report-problem-page__title {
        font-size: clamp(1.35rem, 0.4rem + 6cqi, 2rem);
    }
}

.ddscore-report-problem-page__subtitle {
    color: var(--dds-text-secondary);
    font-size: 0.95rem;
    margin: 0 0 1rem;
}

.ddscore-report-problem-page__lead {
    text-align: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.ddscore-report-problem-page__top-nav {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

.ddscore-report-problem-card {
    margin-bottom: 1.5rem;
}

.ddscore-report-problem-card--plain {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Report a problem: keep controls on the card surface (no grey pills / extra bands) */
.ddscore-report-problem-card .ddscore-feedback-type-option {
    background: transparent;
}

.ddscore-report-problem-card .ddscore-feedback-type-option.selected {
    background: color-mix(in srgb, var(--dds-accent-primary) 14%, transparent);
}

.ddscore-report-problem-card .ddscore-feedback-type-option:hover {
    transform: none;
}

.ddscore-report-problem-card .ddscore-section-picker {
    border-top: none;
    padding-top: 0.35rem;
}

.ddscore-report-problem-card .ddscore-section-picker-list {
    background: transparent;
}

.ddscore-report-problem-card .ddscore-problem-account-readonly {
    border: 1px solid var(--dds-border);
    background: transparent;
}

.ddscore-report-problem-card .ddscore-contact-toggle-label {
    background: transparent;
}

.ddscore-report-problem-card .ddscore-contact-toggle-option:hover .ddscore-contact-toggle-label {
    transform: none;
}

.ddscore-report-problem-card .ddscore-retention-notice {
    background: color-mix(in srgb, var(--dds-rec-amber, #f59e0b) 6%, transparent);
    border-color: color-mix(in srgb, var(--dds-rec-amber, #f59e0b) 28%, transparent);
}

.ddscore-report-problem-card .ddscore-report-inclusion-notice {
    background: color-mix(in srgb, var(--dds-accent-secondary, #4F6EF7) 5%, transparent);
    border-color: color-mix(in srgb, var(--dds-accent-secondary, #4F6EF7) 26%, transparent);
}

.ddscore-report-problem-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.ddscore-report-problem-page__error {
    max-width: 40rem;
    margin: 1rem auto 0;
}

.ddscore-report-problem-thanks .ddscore-thanks-page {
    padding-bottom: 0.5rem;
}

.ddscore-report-problem-page__thanks-back {
    display: flex;
    justify-content: center;
    margin-top: 2.25rem;
    padding-bottom: 0.5rem;
}

/* ──────────────── Share Dialog ──────────────── */

.ddscore-share-dialog {
    width: min(520px, 92vw);
    max-height: min(90vh, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ddscore-share-dialog .ddscore-modal-content.ddscore-share-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.ddscore-share-dialog-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid var(--dds-border);
    background: var(--dds-bg-card-surface);
}

.ddscore-share-dialog-footer-dismiss {
    margin-left: auto;
}

.ddscore-share-dialog-footer .ddscore-btn {
    min-width: unset;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
}

.ddscore-share-dialog-intro {
    color: var(--dds-text-secondary);
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
}

.ddscore-share-dialog-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.ddscore-share-dialog-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--dds-bg-secondary, rgba(255,255,255,0.03));
    border: 1px solid var(--dds-border, rgba(255,255,255,0.08));
    border-radius: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    color: var(--dds-text-primary);
    text-align: left;
    transform-origin: center;
}

.ddscore-share-dialog-option--selected {
    border-width: 2px;
    border-color: color-mix(in srgb, var(--dds-accent-primary) 70%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-accent-primary) 10%, var(--dds-bg-secondary));
}

.ddscore-share-dialog-option:hover {
    border-color: color-mix(in srgb, var(--dds-accent-primary) 55%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-accent-primary) 8%, var(--dds-bg-secondary));
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-tight);
}

.ddscore-share-dialog-option:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
    box-shadow: none;
}

.ddscore-share-dialog-option-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dds-accent, #4FC3F7);
}

.ddscore-share-dialog-option-icon svg {
    width: 28px;
    height: 28px;
}

.ddscore-share-dialog-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ddscore-share-dialog-option-text strong {
    font-size: 1rem;
}

.ddscore-share-dialog-option-text span {
    font-size: 0.85rem;
    color: var(--dds-text-secondary);
}

.ddscore-share-dialog-option-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
}

.ddscore-share-dialog-badge {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    color: var(--dds-text-secondary);
    background: color-mix(in srgb, var(--dds-text-primary) 8%, transparent);
    border: 1px solid var(--dds-border);
}

.ddscore-share-callout {
    margin-top: 0.85rem;
    padding: 0.65rem 0.85rem;
    background: var(--dds-bg-secondary);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-md);
}

.ddscore-share-callout p {
    margin: 0 0 0.45rem;
    font-size: 0.82rem;
    color: var(--dds-text-secondary);
    line-height: 1.55;
}

.ddscore-share-callout p:last-child {
    margin-bottom: 0;
}

.ddscore-share-callout--accent {
    margin-top: 1rem;
}

.ddscore-share-callout-strong {
    font-weight: 600;
    color: var(--dds-text-primary);
    margin-bottom: 0.25rem !important;
}

.ddscore-share-callout-label {
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-share-confirm-heading {
    margin: 0.85rem 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dds-text-primary);
}

.ddscore-share-confirm-item {
    margin-bottom: 0.65rem;
    padding: 0.85rem 0.9rem;
    background: var(--dds-bg-input);
    border-radius: var(--dds-radius-sm);
    border: 1px solid var(--dds-border);
}

.ddscore-share-confirm-text {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--dds-text-primary);
}

.ddscore-share-confirm-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.ddscore-share-terms-line {
    margin-top: 1rem;
    font-size: 0.72rem;
    color: var(--dds-text-muted);
    line-height: 1.55;
}

.ddscore-share-terms-toggle {
    display: inline;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--dds-accent-primary);
    font: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: none;
}

.ddscore-share-terms-toggle:hover {
    text-decoration: underline;
}

.ddscore-share-terms-chevron {
    display: inline-block;
    margin-left: 0.15rem;
}

.ddscore-share-terms-expand {
    margin-top: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: var(--dds-bg-secondary);
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-md);
}

.ddscore-share-terms-expand p {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--dds-text-secondary);
    line-height: 1.55;
}

.ddscore-share-terms-expand-title {
    font-weight: 600;
    color: var(--dds-text-primary) !important;
    font-size: 0.88rem !important;
    margin-bottom: 0.45rem !important;
}

.ddscore-share-terms-external-link {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--dds-accent-primary);
    text-decoration: none;
}

.ddscore-share-terms-external-link:hover {
    text-decoration: underline;
}

.ddscore-share-dialog-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    color: var(--dds-text-secondary);
}

.ddscore-share-dialog-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ddscore-share-dialog-ready-label {
    color: var(--dds-text-secondary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.ddscore-share-dialog-url-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: var(--dds-bg-secondary, rgba(255,255,255,0.03));
    border: 1px solid var(--dds-border, rgba(255,255,255,0.08));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}

.ddscore-share-dialog-url {
    flex: 1;
    font-size: 0.8rem;
    color: var(--dds-text-primary);
    word-break: break-all;
    font-family: monospace;
}

.ddscore-share-dialog-share-label {
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.ddscore-social-share--dialog {
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ddscore-social-share--dialog .ddscore-share-btn {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
}

.ddscore-share-dialog-error {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--dds-text-secondary);
}

.ddscore-share-dialog-error p {
    margin-bottom: 1rem;
}

/* Share dialog close button */
.ddscore-share-dialog .ddscore-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: var(--dds-text-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
}

.ddscore-share-dialog .ddscore-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--dds-accent, #4FC3F7);
    color: var(--dds-accent, #4FC3F7);
    transform: rotate(90deg) scale(var(--dds-btn-hover-scale));
}

.ddscore-share-dialog .ddscore-modal-close:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

.ddscore-share-dialog .ddscore-modal-close:hover:active {
    transform: rotate(90deg) scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

/* Share open button (in Score Overview footer) */
.ddscore-share-open {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--dds-border, rgba(255,255,255,0.1));
    border-radius: 1rem;
    padding: 0.3rem 0.8rem 0.3rem 0.5rem;
    color: var(--dds-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    width: auto;
    height: auto;
    transform-origin: center;
}

.ddscore-share-open svg {
    width: 18px;
    height: 18px;
}

.ddscore-share-open:hover {
    color: var(--dds-accent, #4FC3F7);
    border-color: var(--dds-accent, #4FC3F7);
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: none;
}

.ddscore-share-open:active {
    transform: scale(var(--dds-btn-press-scale));
    transition-duration: 0.08s;
}

/* ──────────────── Shared Image Page ──────────────── */

.ddscore-shared-image-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.ddscore-shared-image-header {
    width: min(100%, 900px);
    margin-bottom: 2rem;
}

.ddscore-shared-image-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dds-logo-mark-gap);
    max-width: 100%;
    overflow: hidden;
}

.ddscore-shared-image-mark {
    flex: 0 0 auto;
    width: auto;
    height: clamp(1.6rem, 5vw, 2.25rem);
    max-width: clamp(1.6rem, 5vw, 2.25rem);
    object-fit: contain;
}

.ddscore-shared-image-wordmark {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(0.9rem, 3.2vw, 1.2rem);
}

.ddscore-shared-image-content {
    max-width: 900px;
    width: 100%;
    margin-bottom: 2rem;
}

.ddscore-shared-image-img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: var(--dds-shadow);
}

.ddscore-shared-image-footer {
    text-align: center;
}

.ddscore-shared-image-url {
    font-size: 1.1rem;
    color: var(--dds-accent-secondary);
    text-decoration: none;
    font-weight: 600;
}

.ddscore-shared-image-url:hover {
    text-decoration: underline;
}

.ddscore-shared-image-tagline {
    font-size: 0.85rem;
    color: var(--dds-text-secondary);
    margin-top: 0.3rem;
}

/* ──────────────── Shared Report Modifier ──────────────── */

.ddscore-report--shared .ddscore-share-open,
.ddscore-report--shared .ddscore-share-btn,
.ddscore-report--shared .ddscore-problem-report-trigger,
.ddscore-report--shared .ddscore-report-chat-wrapper {
    display: none !important;
}

.ddscore-shared-report-notice {
    margin-top: 2rem;
    padding: 1.25rem;
    text-align: center;
}

.ddscore-shared-report-notice-inner {
    padding: 1rem 1.5rem;
    background: var(--dds-bg-secondary, rgba(255,255,255,0.03));
    border: 1px solid var(--dds-border, rgba(255,255,255,0.08));
    border-radius: 0.75rem;
    display: inline-block;
}

.ddscore-shared-report-notice-text {
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 0.3rem;
}

.ddscore-shared-report-notice-url {
    margin: 0;
    font-size: 0.85rem;
}

.ddscore-shared-report-notice-url a {
    color: var(--dds-accent, #4FC3F7);
    text-decoration: none;
}

.ddscore-shared-report-notice-url a:hover {
    text-decoration: underline;
}

/* Legal Acceptance Dialog */

.ddscore-legal-acceptance-backdrop {
    z-index: 1200;
    align-items: center;
    justify-content: center;
}

.ddscore-legal-acceptance-dialog {
    width: min(38rem, calc(100vw - 1.25rem));
    max-height: min(92dvh, 44rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-color: color-mix(in srgb, var(--dds-accent-primary) 38%, var(--dds-border));
    box-shadow: var(--dds-shadow-lg), var(--dds-hover-glow-tight);
}

.ddscore-legal-acceptance-header {
    align-items: flex-start;
}

.ddscore-legal-acceptance-header > div {
    min-width: 0;
}

.ddscore-legal-acceptance-kicker {
    margin: 0 0 0.25rem;
    color: var(--dds-accent-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ddscore-legal-acceptance-body {
    overflow-y: auto;
}

.ddscore-legal-acceptance-lede {
    margin: 0 0 1rem;
    color: var(--dds-text-primary);
    font-size: 0.98rem;
    line-height: 1.55;
}

.ddscore-legal-document-list {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 1rem;
}

.ddscore-legal-version-change {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 42%, var(--dds-border));
    border-radius: var(--dds-radius-sm);
    background: color-mix(in srgb, var(--dds-accent-primary) 9%, var(--dds-bg-secondary));
}

.ddscore-legal-version-change-title {
    margin: 0 0 0.35rem;
    color: var(--dds-text-primary);
    font-weight: 700;
}

.ddscore-legal-version-change-body {
    margin: 0;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ddscore-legal-version-change-list {
    display: grid;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ddscore-legal-version-change-list li {
    display: grid;
    gap: 0.15rem;
    color: var(--dds-text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ddscore-legal-version-change-list strong {
    color: var(--dds-text-primary);
}

.ddscore-legal-document-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--dds-border);
    border-radius: var(--dds-radius-sm);
    background: var(--dds-bg-secondary);
    color: var(--dds-text-primary);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ddscore-legal-document-card:hover {
    border-color: color-mix(in srgb, var(--dds-accent-primary) 55%, var(--dds-border));
    background: color-mix(in srgb, var(--dds-accent-primary) 8%, var(--dds-bg-secondary));
    transform: scale(var(--dds-btn-hover-scale));
    box-shadow: var(--dds-hover-glow-tight);
}

.ddscore-legal-document-name {
    font-weight: 700;
}

.ddscore-legal-document-version {
    flex-shrink: 0;
    color: var(--dds-text-secondary);
    font-size: 0.82rem;
}

.ddscore-legal-acceptance-check {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--dds-accent-primary) 46%, var(--dds-border));
    border-radius: var(--dds-radius);
    background: color-mix(in srgb, var(--dds-accent-primary) 10%, var(--dds-bg-input));
    color: var(--dds-text-primary);
    cursor: pointer;
    line-height: 1.55;
}

.ddscore-legal-acceptance-check input {
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.ddscore-legal-acceptance-check a {
    color: var(--dds-accent-secondary);
    font-weight: 700;
    text-decoration: none;
}

.ddscore-legal-acceptance-check a:hover {
    text-decoration: underline;
}

.ddscore-legal-acceptance-check:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.72;
}

.ddscore-legal-acceptance-error {
    margin: 0 0 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--dds-rec-red) 55%, var(--dds-border));
    border-radius: var(--dds-radius-sm);
    background: var(--dds-rec-red-bg);
    color: var(--dds-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ddscore-legal-acceptance-saving {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1rem;
    color: var(--dds-text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 560px) {
    .ddscore-legal-document-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }

    .ddscore-legal-acceptance-check {
        padding: 0.9rem;
    }
}