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

/* Tab styling — !important overrides Dash's inline styles */
.custom-tabs {
    border-bottom: 2px solid var(--ll-london-85) !important;
    margin-bottom: var(--ll-space-lg);
}

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

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

.custom-tab--selected {
    color: var(--ll-chicago-20) !important;
    border-bottom: 3px solid var(--ll-chicago-20) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
}

/* Dash dropdown — override Dash 4.x default purple accent */
.dash-dropdown {
    accent-color: var(--ll-chicago-20) !important;
    outline-color: var(--ll-chicago-20) !important;
}

/* ── Filter bar: two clusters, equal-width controls ─────────────── */
/* Measurement dials (as-of, threshold, floor) | display filters
   (retailer, region, type), separated by a hairline. */

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

.filter-cluster {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: var(--ll-space-md) var(--ll-space-base);
    flex: 1 1 420px;
    min-width: 0;
    align-items: start;
}

.filter-cluster--display {
    border-left: 1px solid var(--ll-london-85);
    padding-left: var(--ll-space-lg);
}

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

/* Dash 4.x renders an absolutely-positioned focus input inside each
   dropdown that ignores its container width.  Cap it so it cannot
   push the filter group wider than its flex allocation. */
.dash-dropdown-focus-target {
    max-width: 100%;
    box-sizing: border-box;
}

/* One fixed label row so every control in both clusters starts at
   the same y, regardless of label length. Long labels ellipsize —
   the full text lives in the hover tooltip. */
.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;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
    height: 16px;
    line-height: 16px;
    max-width: 100%;
}

/* Hint line spans the measurement cluster's full width */
.filter-cluster .filter-hint {
    grid-column: 1 / -1;
}

/* Custom date range spans the cluster's full width when revealed —
   its two inputs need more room than a single grid column allows. */
.filter-group--wide {
    grid-column: 1 / -1;
}

.filter-group--wide .DateRangePickerInput {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--ll-london-85);
    border-radius: var(--ll-radius);
    display: flex;
    align-items: center;
}

.filter-group--wide .DateInput {
    background: transparent;
    width: auto;
}

.filter-group--wide .DateInput_input {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-london-20);
    background: transparent;
    padding: 6px 10px;
}

/* ── Control chrome: kill the default-Dash look ─────────────────── */
/* Design-system text-input spec: white fill, London-85 border, 2px
   radius, 36px height, brand sans. */

.filter-group .dash-dropdown,
.filter-group button.dash-dropdown {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    background: #ffffff;
    border: 1px solid var(--ll-london-85);
    border-radius: var(--ll-radius);
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-london-20);
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
}

.filter-group .dash-dropdown:hover {
    border-color: var(--ll-london-40);
}

.filter-group .dash-dropdown-placeholder {
    color: var(--ll-london-70);
}

.filter-group .dash-dropdown-value {
    font-family: var(--ll-sans);
    font-size: 14px;
}

/* Date picker to the same spec (Dash 4 dash-datepicker classes) */
.filter-group .dash-datepicker,
.filter-group .dash-datepicker-input-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.filter-group .dash-datepicker-input-wrapper {
    background: #ffffff;
    border: 1px solid var(--ll-london-85);
    border-radius: var(--ll-radius);
    height: 36px;
    display: flex;
    align-items: center;
}

.filter-group .dash-datepicker-input-wrapper:hover {
    border-color: var(--ll-london-40);
}

.filter-group .dash-datepicker-input {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-london-20);
    background: transparent;
    border: none;
    padding: 0 10px;
    height: 34px;
    line-height: 34px;
    width: 100% !important;
    box-sizing: border-box !important;
}

.filter-group .dash-datepicker-input::placeholder {
    color: var(--ll-london-70);
}

/* 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 */
._dash-loading-callback {
    background-color: rgba(245, 243, 238, 0.7) !important;
}

/* 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 rgba(255, 255, 255, 0.12);
    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;
}

/* SPPD formula note */
.formula-note {
    font-family: var(--ll-sans);
    font-size: 13px;
    color: var(--ll-london-40);
    font-style: italic;
    padding: var(--ll-space-sm) 0;
    border-top: 1px solid var(--ll-london-85);
    margin-top: var(--ll-space-base);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .filter-bar {
        flex-direction: column;
        gap: var(--ll-space-base);
    }

    .filter-cluster {
        grid-template-columns: 1fr;
        flex: 1 1 100%;
    }

    .filter-cluster--display {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--ll-london-85);
        padding-top: var(--ll-space-base);
    }

    .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;
}

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

/* ── Narrative intro (U7) ── */

.narrative-details {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 32px;
}

.narrative-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;
    border-top: 1px solid var(--ll-london-85);
}

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

.narrative-toggle::before {
    content: '▸ ';
}

.narrative-details[open] > .narrative-toggle::before {
    content: '▾ ';
}

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

.narrative-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 0 32px;
}

.narrative-content {
    max-width: var(--ll-body-max-width, 720px);
}

.narrative-title {
    font-family: var(--ll-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--ll-london-5);
    letter-spacing: -0.02em;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.narrative-body {
    font-family: var(--ll-sans);
    font-size: 17px;
    font-weight: 400;
    color: var(--ll-london-20);
    line-height: 1.6;
    margin: 0 0 12px 0;
    max-width: var(--ll-body-max-width, 720px);
}

.narrative-protagonist {
    margin: 24px 0;
    padding-left: 16px;
    border-left: 3px solid var(--ll-london-85);
}

.narrative-archetype-label {
    font-family: var(--ll-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--ll-london-5);
    margin: 0 0 4px 0;
}

.narrative-transition {
    font-family: var(--ll-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--ll-london-35);
    margin: 32px 0 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ll-london-85);
}

@media (max-width: 640px) {
    .narrative-section {
        padding: 32px 16px 24px;
    }

    .narrative-title {
        font-size: 22px;
    }

    .narrative-body {
        font-size: 15px;
    }
}

@media print {
    .narrative-section {
        padding: 24px 0;
    }
}

/* ── Quadrant summary buckets ── */

.quadrant-summary-bucket {
    margin-bottom: 2px;
}

.quadrant-summary-toggle {
    font-family: var(--ll-sans);
    font-size: 14px;
    color: var(--ll-london-5);
    cursor: pointer;
    padding: 6px 0;
    list-style: none;
}

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

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

.quadrant-summary-bucket[open] > .quadrant-summary-toggle::before {
    content: '▾ ';
}

.quadrant-summary-toggle:hover {
    color: var(--ll-chicago-20);
}

/* ── Quadrant view (U3) ── */

/* Quadrant detail card container */
#quadrant-detail-card {
    min-width: 320px;
}

#quadrant-detail-card .dark-callout {
    min-width: 320px;
    font-size: 16px;
}

/* Indexed SPPD toggle button */
.indexed-toggle-btn {
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

.indexed-toggle-btn:hover {
    opacity: 0.9;
}

/* Plotly chart marker transition for opacity dimming */
.js-plotly-plot .plotly .scatterlayer .trace .points path {
    transition: opacity 200ms ease-out;
}

/* Quadrant chart container */
#quadrant-view {
    position: relative;
}

/* Mobile responsive quadrant */
@media (max-width: 640px) {
    #quadrant-detail-card {
        min-width: 100%;
    }

    #quadrant-detail-card .dark-callout {
        min-width: 100%;
    }
}

/* ── Data grids (spreadsheet-style tables) ── */

/* Compact theme: smaller font + tighter padding so every column fits one line */
.voidfinder-grid.ag-theme-alpine {
    --ag-font-size: 12px;
    --ag-grid-size: 4px;
    --ag-cell-horizontal-padding: 8px;
    --ag-row-height: 30px;
    --ag-header-height: 34px;
    --ag-font-family: var(--ll-sans);
}

/* Never wrap cell text — one line per cell */
.voidfinder-grid .ag-cell {
    white-space: nowrap;
}

/* Table wrapper — full content-column width; columns fill it via
   responsiveSizeToFit, so no empty gutter and no breakout past the column. */
.grid-wide {
    width: 100%;
    margin: 16px 0;
    overflow-x: auto;
}

/* ── Void Finder additions ─────────────────────────────────────── */

.kpi-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0;
  align-items: stretch;
}
.kpi-card {
  flex: 1 1 150px;
  border: 1px solid var(--ll-london-85, #d9d9d9);
  border-radius: 2px;
  padding: 14px 16px;
  background: var(--ll-canvas, #f5f3ee);
  box-sizing: border-box;
}
/* The two money cards lead: white surface, brand top rule, larger
   serif value. Counts stay quiet on the canvas. */
.kpi-card--primary {
  flex: 1.3 1 190px;
  background: #ffffff;
  border-top: 3px solid var(--ll-red-42, #cc100a); /* ink, not paint */
  padding: 16px;
}
/* Type comes from .ll-benchmark-value (frame >= v1.2.0), applied alongside this
   class in components.kpi_card(). Only the non-type properties live here. */
.kpi-value {
  color: var(--ll-london-5, #0d0d0d);
  line-height: 1.1;
}
/* 34/28 is a sanctioned deviation, not a stray size: LAILARA_DESIGN_SYSTEM.md
   § Series-level sub-token display steps lists this exact selector as one
   emphasis tier above the 28px benchmark value. Flattening it to the token
   would erase the lead the two money cards are supposed to have. */
.kpi-card--primary .kpi-value {
  font-size: 34px;
  color: var(--ll-chicago-20, #1f2e7a);
  letter-spacing: -0.01em;
}
.kpi-label {
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ll-london-35, #595959);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 6px;
}
/* .kpi-value and .no-data-title take their mobile steps from the frame's
   .ll-benchmark-value / .ll-section-title. Only the off-scale primary-card
   override still needs one here. */
@media (max-width: 640px) {
  .kpi-card, .kpi-card--primary { flex: 1 1 100%; }
  .kpi-card--primary .kpi-value { font-size: 28px; }
}

.cluster-callout {
  border-left: 3px solid #cc100a; /* Red-42 — ink, not paint */
  padding: 10px 14px;
  margin: 0 0 16px;
  font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #333333;
  background: #f2f2f2; /* London-95 surface */
}

.export-row { margin: 18px 0 6px; }
.primary-button {
  background: #1f2e7a; /* Chicago-20 */
  color: #ffffff;
  font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 2px;
  height: 36px;
  padding: 8px 20px;
  cursor: pointer;
}
.primary-button:hover { background: #141e52; } /* Chicago-10 */
.primary-button:focus { outline: 2px solid #0d0d0d; outline-offset: 2px; }

.chart-footnote {
  font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-style: italic;
  color: #595959;
  margin: 4px 0 28px;
}

.no-data-notice {
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  padding: 32px;
  margin: 32px 0;
  text-align: center;
}
/* Type comes from .ll-section-title (frame >= v1.2.0), applied alongside this
   class in components.no_data_notice(). Only the color lives here. */
.no-data-title {
  color: #0d0d0d;
}
.no-data-body {
  font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: #595959;
  max-width: 560px;
  margin: 10px auto 0;
}

/* ── Executive hero (content pack) ─────────────────────────────── */

/* Synthetic-data disclosure. Sits above the hero, not in the footer:
   a reader should know what the numbers are before reading them, not
   after. Red-42 is ink here — a 1px rule and the flag text — never a
   background fill. */
.hero-eyebrow {
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ll-london-35, #595959);
  max-width: 900px;
  margin: 28px 0 0;
  padding-left: 12px;
  border-left: 1px solid var(--ll-red-42, #cc100a);
}

.hero-eyebrow-flag {
  color: var(--ll-red-42, #cc100a);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 8px;
}

.hero {
  padding: 14px 0 8px;
}

.hero-headline {
  font-family: var(--ll-serif, 'Playfair Display', Georgia, serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--ll-london-5, #0d0d0d);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
  max-width: 900px;
}

.hero-number {
  color: var(--ll-chicago-20, #1f2e7a);
  font-size: 64px;
}

.hero-subhead {
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 17px;
  color: var(--ll-london-20, #333333);
  line-height: 1.6;
  max-width: var(--ll-body-max-width, 720px);
  margin: 0 0 16px;
}

.hero-action {
  border-left: 3px solid var(--ll-red-42, #cc100a); /* ink, not paint */
  background: var(--ll-london-95, #f2f2f2);
  padding: 10px 14px;
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 16px;
  color: var(--ll-london-20, #333333);
  line-height: 1.5;
  max-width: var(--ll-body-max-width, 720px);
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .hero-headline { font-size: 30px; }
  .hero-number { font-size: 44px; }
  .hero-subhead, .hero-action { font-size: 15px; }
  .hero-eyebrow { margin-top: 20px; font-size: 12px; }
}

/* KPI cards that carry a definition tooltip */
.kpi-card--help { cursor: help; }

/* As-of picker hint */
.filter-hint {
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 11px;
  font-style: italic;
  color: var(--ll-london-35, #595959);
}

/* ── Glossary panel ────────────────────────────────────────────── */

.glossary-term {
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ll-london-5, #0d0d0d);
  margin-top: 14px;
}

.glossary-def {
  font-family: var(--ll-sans, 'Source Sans 3', Helvetica, Arial, sans-serif);
  font-size: 15px;
  color: var(--ll-london-20, #333333);
  line-height: 1.6;
  margin: 4px 0 0;
  max-width: var(--ll-body-max-width, 720px);
}

/* The shared frame CSS never resets the UA body margin, which leaves
   an 8px white ring around the canvas. Project-level fix. */
html, body {
  margin: 0;
  background-color: #f5f3ee; /* canvas */
}