/* Door Math — project-specific overrides only.
   Design tokens live in lailara-frame.css (do not duplicate). */

/* Tool intro — prospect orientation above tabs */
.tool-intro {
    margin-bottom: var(--ll-space-lg);
}

/* Sized by .ll-section-title from the frame (22px / 18px mobile). At the old
   18px/16px the page's primary heading was barely larger than the 17px body
   text around it, so the one element that tells a first-time reader what the
   tool is read as a caption. Ink, not London-20 — DS reserves Ink for primary
   headings. */
.tool-intro h1 {
    color: var(--ll-london-5);
    margin: 0 0 6px 0;
}

.tool-intro p {
    font-family: var(--ll-sans);
    font-size: 15px;
    color: var(--ll-london-35);
    line-height: 1.6;
    max-width: var(--ll-body-max-width, 720px);
    margin: 0;
}

/* Tab styling */
.custom-tabs {
    border-bottom: 2px solid var(--ll-london-85);
    margin-bottom: var(--ll-space-lg);
}

.custom-tab {
    font-family: var(--ll-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ll-london-35);
    padding: 12px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--ll-duration-fast) var(--ll-ease-out);
}

.custom-tab:hover {
    color: var(--ll-london-20);
}

.custom-tab--selected {
    color: var(--ll-chicago-20);
    border-bottom-color: var(--ll-chicago-20);
}

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ll-space-base);
    align-items: flex-end;
    padding: var(--ll-space-base) 0;
    border-bottom: 1px solid var(--ll-london-85);
    margin-bottom: var(--ll-space-lg);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-xs);
    min-width: 180px;
    overflow: hidden;
}

.filter-group label {
    font-family: var(--ll-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--ll-london-35);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--ll-space-3xl) var(--ll-space-lg);
    color: var(--ll-london-35);
    font-family: var(--ll-sans);
    font-size: 17px;
}

.empty-state button {
    margin-top: var(--ll-space-base);
    background: var(--ll-chicago-20);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: var(--ll-radius);
    font-family: var(--ll-sans);
    font-weight: 600;
    cursor: pointer;
}

.empty-state button:hover {
    background: var(--ll-chicago-10);
}

/* Error banner */
.error-banner {
    background: var(--ll-red-95);
    color: var(--ll-red-18);
    padding: var(--ll-space-md) var(--ll-space-base);
    border-radius: var(--ll-radius);
    font-family: var(--ll-sans);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: var(--ll-space-sm);
}

/* Loading spinner override — derived from the canvas token, not a copy of its
   rgb expansion, so retuning --ll-canvas moves the overlay with it. */
._dash-loading-callback {
    background-color: color-mix(in srgb, var(--ll-canvas) 70%, transparent) !important;
}

/* Hero metric */
.hero-metric {
    text-align: center;
    padding: var(--ll-space-xl) 0;
}

/* Pairs with .ll-headline-number from the frame, which carries the DS serif,
   64/44px steps, weight and letter-spacing.  Only the bits the frame has no
   opinion on live here. */
.hero-number {
    color: var(--ll-london-5);
    display: inline-block;
    vertical-align: baseline;
}

.hero-subtext {
    font-family: var(--ll-sans);
    font-size: 17px;
    color: var(--ll-london-35);
    margin-top: var(--ll-space-sm);
}

.hero-trend {
    font-family: var(--ll-sans);
    font-size: 17px;
    font-weight: 600;
    margin-top: var(--ll-space-xs);
}

.hero-trend.up { color: var(--ll-hk-35); }
.hero-trend.down { color: var(--ll-tokyo-40); }

/* Dark callout card */
.dark-callout {
    background: var(--ll-card-bg);
    color: var(--ll-card-text);
    padding: var(--ll-space-base) var(--ll-space-lg);
    border-radius: var(--ll-radius);
    margin: var(--ll-space-base) 0;
    transition: opacity var(--ll-duration-normal) var(--ll-ease-out);
}

.dark-callout-title {
    font-family: var(--ll-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ll-card-text);
    margin-bottom: var(--ll-space-sm);
}

.dark-callout-subtitle {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-card-subtitle);
}

.dark-callout-row {
    display: flex;
    justify-content: space-between;
    padding: var(--ll-space-xs) 0;
    border-bottom: 1px solid var(--ll-card-border);
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-card-item);
}

.dark-callout-row:last-child {
    border-bottom: none;
}

/* Annotation / insight line */
.insight-line {
    border-left: 3px solid var(--ll-london-85);
    padding: var(--ll-space-sm) var(--ll-space-base);
    font-family: var(--ll-sans);
    font-size: 15px;
    color: var(--ll-london-35);
    margin: var(--ll-space-base) 0;
    line-height: 1.5;
}

/* Gap card grid — 3 columns, collapse to 2 then 1 at narrow widths */
.gap-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 24px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .gap-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile responsive */
@media (max-width: 640px) {
    /* .tool-intro h1 and .hero-number take their mobile steps from the frame
       classes .ll-section-title and .ll-headline-number. */
    .hero-subtext { font-size: 15px; }
    .hero-trend { font-size: 15px; }

    .filter-bar {
        flex-direction: column;
        gap: var(--ll-space-sm);
    }

    .filter-group {
        min-width: 100%;
    }

    .gap-card-grid {
        grid-template-columns: 1fr;
    }

    .custom-tabs {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* Print — hide interactive controls */
@media print {
    .filter-bar,
    .custom-tabs,
    .dark-callout { display: none; }
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ll-chicago-20);
    color: white;
    padding: 8px 16px;
    z-index: 100;
    font-family: var(--ll-sans);
}

.skip-link:focus {
    top: 0;
}

/* Focus visible */
*:focus-visible {
    outline: 2px solid var(--ll-london-20);
    outline-offset: 2px;
}

/* ── Dash accent overrides (replace default purple) ── */

/* Tab selected indicator */
.tab--selected {
    border-top-color: var(--ll-chicago-20) !important;
    border-color: var(--ll-chicago-20) !important;
}

/* Plotly injects its own stylesheet setting the .plotly container to
   "Open Sans", verdana, arial. SVG <text> inherits from that container, and
   Plotly only writes font-family inline where it thinks the value differs from
   the container's — so every sans element in every chart (bar value labels,
   axis ticks, legend, annotations) rendered in Open Sans while layout.font
   correctly reported Source Sans 3. Chart titles escaped it because the serif
   family is written inline.

   Override the container, not the text: an !important on text would also beat
   the title's inline Playfair and turn chart titles sans. */
.js-plotly-plot .plotly,
.js-plotly-plot .plotly div {
    font-family: var(--ll-sans) !important;
}

/* Editable assumption input (revenue at risk). Sized to its content so the
   figure reads as a value the reader owns, not a form field. */
.assumption-input {
    font-family: var(--ll-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-london-5);
    background-color: transparent;
    border: 1px solid var(--ll-london-85);
    border-radius: var(--ll-radius);
    padding: 4px 8px;
    width: 72px;
}

.assumption-input:focus,
.assumption-input:focus-visible {
    outline: 2px solid var(--ll-chicago-20);
    outline-offset: 1px;
    border-color: var(--ll-chicago-20);
}

/* Radius — the DS allows exactly one, 2px. Dash ships its controls at 4px,
   including the stepper buttons it renders on a number input. */
.dash-dropdown,
.dash-dropdown-value-count,
.dash-options-list,
.dash-options-list-option,
.dash-input-stepper {
    border-radius: var(--ll-radius) !important;
}

/* Dash's internal focus-target input carries the UA default #767676 border,
   which is not a palette colour. The element sits behind the dropdown button
   and is clipped by .filter-group, so this is not a visible change — it just
   keeps every declared border on a token. */
.dash-dropdown-focus-target {
    border-color: var(--ll-london-85) !important;
}

/* Dropdown focus/open outline */
.dash-dropdown:focus,
.dash-dropdown:focus-visible,
.dash-dropdown[data-state='open'] {
    outline-color: var(--ll-chicago-20) !important;
    border-color: var(--ll-chicago-20) !important;
}

/* Checkbox accent in dropdown options */
.dash-options-list-option-checkbox {
    accent-color: var(--ll-chicago-20);
}

/* Dropdown option hover & selected */
.dash-options-list-option:hover {
    background-color: var(--ll-chicago-95) !important;
}

.dash-options-list-option--selected {
    background-color: var(--ll-chicago-95) !important;
}

/* Dropdown selected value tags */
.dash-dropdown .dash-multi-value {
    background-color: var(--ll-chicago-95) !important;
}

.dash-dropdown .dash-multi-value__label {
    color: var(--ll-chicago-20) !important;
}

.dash-dropdown .dash-multi-value__remove:hover {
    background-color: var(--ll-chicago-85) !important;
    color: var(--ll-chicago-20) !important;
}

/* Dropdown indicator (caret) */
.dash-dropdown .dash-dropdown-indicator {
    color: var(--ll-london-40) !important;
}

/* Dropdown clear button */
.dash-dropdown .dash-clear-indicator:hover {
    color: var(--ll-tokyo-40) !important;
}

/* Dash input focus */
input:focus,
textarea:focus,
select:focus {
    outline-color: var(--ll-chicago-20) !important;
    border-color: var(--ll-chicago-20) !important;
}

/* AG Grid — tighter cell padding */
.ag-theme-alpine {
    --ag-cell-horizontal-padding: 8px;
    --ag-header-cell-horizontal-padding: 8px;
}

/* AG Grid row selection — replace blue/purple default */
.ag-theme-alpine .ag-row-selected,
.ag-theme-balham .ag-row-selected,
.ag-row-selected {
    background-color: var(--ll-hk-95) !important;
}

.ag-theme-alpine .ag-row-hover,
.ag-theme-balham .ag-row-hover,
.ag-row-hover {
    background-color: var(--ll-london-95) !important;
}

/* AG Grid header sort indicator */
.ag-header-cell-sorted-asc,
.ag-header-cell-sorted-desc {
    color: var(--ll-chicago-20) !important;
}

/* AG Grid pagination active button */
.ag-paging-button.ag-active {
    color: var(--ll-chicago-20) !important;
}

/* AG Grid checkbox */
.ag-checkbox-input-wrapper.ag-checked::after {
    color: var(--ll-chicago-20) !important;
}

/* Dropdown width containment */
.filter-group .dash-dropdown {
    width: 100%;
    box-sizing: border-box;
}

/* Filter summary — "All retailers" / "All product lines" overlay */
.dropdown-wrap {
    position: relative;
    overflow: hidden;
}

.filter-summary {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    right: 30px;
    display: none;
    align-items: center;
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-london-20);
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-wrap:has(.all-selected) .filter-summary {
    display: flex;
}

.all-selected .dash-dropdown-value,
.all-selected .dash-dropdown-value-count {
    display: none !important;
}

/* Move chevron to right side when all-selected hides multi-select chips */
.all-selected .dash-dropdown-grid-container {
    grid-template-columns: 1fr 15px;
}

.all-selected .dash-dropdown-grid-container svg {
    grid-column: 2;
}

/* ── Term disclosure (click-to-expand definitions) ── */

.term-disclosure,
.term-disclosure-inline {
    margin: 4px 0;
}

.term-toggle {
    font-family: var(--ll-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ll-chicago-20);
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    display: inline;
}

.term-toggle::-webkit-details-marker {
    display: none;
}

.term-toggle::before {
    content: '▸ ';
    color: var(--ll-london-35);
    font-size: 11px;
}

.term-disclosure[open] > .term-toggle::before,
.term-disclosure-inline[open] > .term-toggle::before {
    content: '▾ ';
}

.term-toggle:hover {
    color: var(--ll-chicago-10);
}

.term-toggle:focus-visible {
    outline: 2px solid var(--ll-chicago-20);
    outline-offset: 2px;
    border-radius: 2px;
}

.term-body {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-london-35);
    line-height: 1.6;
    margin: 4px 0 8px 14px;
    max-width: var(--ll-body-max-width, 720px);
}

/* Glossary block — collapsible container with all terms */

.glossary-block {
    border-top: 1px solid var(--ll-london-85);
    margin: 32px 0;
    padding-top: 4px;
}

.glossary-toggle {
    font-family: var(--ll-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ll-chicago-20);
    cursor: pointer;
    padding: 16px 0;
    list-style: none;
}

.glossary-toggle::-webkit-details-marker {
    display: none;
}

.glossary-toggle::before {
    content: '▸ ';
    color: var(--ll-london-35);
}

.glossary-block[open] > .glossary-toggle::before {
    content: '▾ ';
}

.glossary-toggle:hover {
    color: var(--ll-chicago-10);
}

.glossary-toggle:focus-visible {
    outline: 2px solid var(--ll-chicago-20);
    outline-offset: 2px;
    border-radius: 2px;
}

.glossary-content {
    padding: 8px 0 16px;
}

.glossary-content .term-disclosure {
    margin: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--ll-london-90);
}

.glossary-content .term-disclosure:last-child {
    border-bottom: none;
}

.glossary-content .term-toggle {
    font-size: 14px;
    padding: 8px 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}