/* ============================================================
   Structural hierarchy debug overlay (DEV TOOL — off by default)

   Colour-codes each structural wrapper so you can flick through
   pages and confirm everything is classed correctly.

   Toggle on/off with  Ctrl/Cmd + Shift + D  (persists across pages),
   or run  toggleStructureDebug()  in the browser console.
   All rules are scoped under  body.debug-structure  so this file is
   completely inert unless the overlay is switched on.

   Nesting is shown with outline-offset: outer levels sit further
   OUTSIDE their box, inner levels sit inside — so concentric boxes
   separate visually even when widths are identical.
       page      → +12px (outermost)
       section   → +5px
       toggle    → +2px
       data-card → 0
       chart     → −3px (innermost)
   Outlines don't affect layout.
   ============================================================ */

body.debug-structure .main-content,
body.debug-structure .section-nav,
body.debug-structure .section-controls,
body.debug-structure .toggle-group,
body.debug-structure .section-panel,
body.debug-structure .data-card,
body.debug-structure .chart-container,
body.debug-structure .card-header,
body.debug-structure .text-link {
    position: relative;
}

/* tiny class-name label, top-left of each wrapper */
body.debug-structure .main-content::before,
body.debug-structure .section-nav::before,
body.debug-structure .section-controls::before,
body.debug-structure .toggle-group::before,
body.debug-structure .section-panel::before,
body.debug-structure .data-card::before,
body.debug-structure .chart-container::before,
body.debug-structure .card-header::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px;
    color: #fff;
    pointer-events: none;
    letter-spacing: 0.02em;
}

/* ── PAGE level (the base.html content shell) ── */
body.debug-structure .main-content {
    outline: 3px solid #111111;
    outline-offset: 12px;
}
body.debug-structure .main-content::before { content: "PAGE .main-content"; background: #111111; top: -13px; }

/* ── SECTION level ── */
body.debug-structure .section-nav      { outline: 2px solid #2563eb; background: rgba(37,99,235,0.07); outline-offset: 5px; }   /* blue */
body.debug-structure .section-nav::before      { content: ".section-nav"; background: #2563eb; }

body.debug-structure .section-controls { outline: 2px solid #ea580c; background: rgba(234,88,12,0.07); outline-offset: 5px; }   /* orange */
body.debug-structure .section-controls::before { content: ".section-controls"; background: #ea580c; }

body.debug-structure .section-panel    { outline: 2px solid #16a34a; outline-offset: 5px; }                                     /* green */
body.debug-structure .section-panel::before    { content: ".section-panel"; background: #16a34a; }

/* ── SUB-TOGGLE (nested inside a section) ── */
body.debug-structure .toggle-group     { outline: 2px dashed #9333ea; background: rgba(147,51,234,0.07); outline-offset: 2px; } /* purple */
body.debug-structure .toggle-group::before     { content: ".toggle-group"; background: #9333ea; }

/* ── DATA-DISPLAY level ── */
body.debug-structure .data-card        { outline: 2px solid #dc2626; background: rgba(220,38,38,0.05); outline-offset: 0; }     /* red */
body.debug-structure .data-card::before        { content: ".data-card"; background: #dc2626; }

body.debug-structure .chart-container  { outline: 2px dashed #0891b2; background: rgba(8,145,178,0.07); outline-offset: -3px; } /* cyan */
body.debug-structure .chart-container::before  { content: ".chart-container"; background: #0891b2; }

body.debug-structure .card-header      { outline: 2px solid #ca8a04; outline-offset: 0; }                                       /* amber */
body.debug-structure .card-header::before      { content: ".card-header"; background: #ca8a04; }

/* ── Inline links ── */
body.debug-structure .text-link        { outline: 1px solid #db2777; background: rgba(219,39,119,0.12); }                       /* pink */

/* ── Active in-page tab/toggle ── */
body.debug-structure .tab-underline--active { box-shadow: inset 0 -3px 0 #111; }