/*
 * The dashboard shell: a rail beside the charts, headline figures above them.
 *
 * Structure borrowed from the UNESCWA Social Expenditure Monitor — a
 * persistent left nav, content as cards on a canvas. The colours are not
 * borrowed: that dashboard runs Apache ECharts' stock palette, and Know Your
 * Debt keeps its own dark ground, teal and gold.
 *
 * Loaded after styles.css, which still supplies the pill styling the rail
 * links use. Nothing here is required to read the page: without this file the
 * rail is the horizontal pill bar it was before.
 */

/* --- two columns, once there is room for them --------------------------- */

/*
 * One column until 1100px. A rail narrower than about 200px truncates chart
 * titles into uselessness, and taking 200px from a 900px viewport leaves the
 * charts worse off than the rail makes them better.
 */
@media (min-width: 1100px) {
    .dash-shell {
        display: grid;
        grid-template-columns: 208px minmax(0, 1fr);
        gap: 2.25rem;
        align-items: start;
    }

    .dash-rail {
        position: sticky;
        /* Clears the site header, which is not fixed but is tall. */
        top: 1.25rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.15rem;
        /* The pill bar paints a gradient to hide content scrolling under it.
           A vertical rail has nothing passing beneath it. */
        background: none;
        padding: 0;
        margin: 0;
        max-height: calc(100vh - 2.5rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .dash-rail a {
        border: 0;
        border-left: 2px solid transparent;
        border-radius: 0;
        padding: 0.4rem 0.6rem;
        white-space: normal;
        line-height: 1.3;
        text-align: left;
    }

    .dash-rail a:hover,
    .dash-rail a:focus-visible {
        background: var(--chart-surface, rgba(255, 255, 255, 0.055));
        border-left-color: var(--chart-border-lit, rgba(16, 185, 129, 0.3));
        color: var(--chart-heading, #F1F5F9);
    }

    /*
     * The chart currently in view. Set by charts.js; without scripting the
     * rail is still a working list of links, just without the marker.
     */
    .dash-rail a.is-current {
        color: var(--chart-accent, #34D399);
        border-left-color: var(--chart-accent, #34D399);
        background: var(--chart-surface, rgba(255, 255, 255, 0.055));
    }

    .dash-rail-group {
        margin: 0.9rem 0 0.25rem;
        padding: 0 0.6rem;
        font-family: 'Inter', sans-serif;
        font-size: var(--t-xs);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--chart-muted, #94A3B8);
        opacity: 0.75;
    }

    .dash-rail-group:first-child { margin-top: 0; }

    /* The rail holds the jump targets now, so nothing scrolls under a bar. */
    .debt-chart { scroll-margin-top: 1.5rem; }
}

/* Group headings only make sense in a vertical list. */
@media (max-width: 1099px) {
    .dash-rail-group { display: none; }
}

/* --- headline figures --------------------------------------------------- */

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem;
    margin: 0 0 1.75rem;
}

.dash-kpi {
    padding: 1rem 1.1rem;
    border: 1px solid var(--chart-border, rgba(255, 255, 255, 0.13));
    border-radius: 12px;
    background: var(--chart-surface, rgba(255, 255, 255, 0.055));
}

.dash-kpi-value {
    /*
     * The record pass — figures in the serif.
     *
     * The campaign pairs Playfair with Inter and used the serif for
     * headings only, which is the default use and wastes it. Annual
     * reports and balance sheets set their *numbers* in the serif:
     * ₦159.28T in Playfair reads as a figure of record, in Inter it
     * reads as a metric on a tile.
     *
     * Tabular because this page has a currency toggle, and without it
     * the digits shift sideways when the value changes.
     */
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0;
    font-size: var(--t-2xl);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--chart-heading, #F1F5F9);
}

.dash-kpi-label {
    margin: 0.3rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    color: var(--chart-text, #CBD5E1);
}

.dash-kpi-source {
    /*
     * The record pass — provenance as a citation.
     *
     * The rule above it means the source follows. This is the one
     * genuinely distinctive thing about the platform — a figure cannot
     * be stored without the document it came from — and it was the
     * quietest thing on the card.
     */
    margin-top: var(--s-3);
    padding-top: var(--s-2);
    border-top: var(--rule);
    margin: 0.45rem 0 0;
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--chart-muted, #94A3B8);
}

/*
 * A figure still coming from the transitional fallback rather than from a
 * verified source. Marked rather than hidden: the point of the fallback is
 * that it is visibly temporary.
 */
.dash-kpi.is-transitional {
    border-style: dashed;
}

/* --- phones ------------------------------------------------------------- */

/*
 * styles.css hides the pill bar outright below 640px. A phone is where a
 * six-chart page is longest and a jump list is worth most, so it becomes a
 * horizontal scroller instead.
 */
@media (max-width: 640px) {
    .chart-nav.dash-rail {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.4rem;
        padding: 0.7rem 0;
        margin: 0 0 1.25rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .chart-nav.dash-rail::-webkit-scrollbar { display: none; }

    .chart-nav.dash-rail a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .dash-kpi-value { font-size: var(--t-xl); }
}

/*
 * Rail entries are targets at any touch width, not only on a phone. This
 * lived inside the 640px block until a tablet -- which is a touch device --
 * measured 35px.
 */
@media (pointer: coarse) {
    .chart-nav.dash-rail a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-rail a { transition: none; }
}

/* --- the period control ------------------------------------------------- */

/*
 * A bar rather than a stray select. The reference dashboard puts a page's
 * controls together above its content; ours were one dropdown easy to miss.
 */
.dash-controls {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
    margin: 0 0 1.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--chart-border, rgba(255, 255, 255, 0.13));
    border-radius: 12px;
    background: var(--chart-surface, rgba(255, 255, 255, 0.055));
}

.dash-control {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* The search takes the slack, so the bar does not leave a gap on the right. */
.dash-control--search { flex: 1 1 15rem; min-width: 12rem; }

.dash-search {
    position: relative;
    display: block;
}

.dash-search svg {
    position: absolute;
    left: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--chart-muted, #94A3B8);
    stroke-width: 1.9;
    stroke-linecap: round;
    pointer-events: none;
}

.dash-search input {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.4rem 0.7rem 0.4rem 2.1rem;
    border: 1px solid var(--chart-border, rgba(255, 255, 255, 0.13));
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    color: var(--chart-heading, #F1F5F9);
}

.dash-search input::placeholder { color: var(--chart-muted, #94A3B8); }

.dash-search input:focus-visible {
    outline: 2px solid var(--chart-accent, #34D399);
    outline-offset: 1px;
}

/*
 * Rewritten by the script as you type; correct without it.
 *
 * Pushed to the right-hand edge and aligned to the controls' baseline, not
 * their centre. It shares the row with the actions box now rather than
 * displacing it.
 */
.dash-result-count {
    margin: 0 0 0 auto;
    align-self: flex-end;
    padding-bottom: 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    color: var(--chart-muted, #94A3B8);
}

.dash-result-count:empty { display: none; }

.dash-no-results {
    margin: 1rem 0 2rem;
    padding: 1.4rem;
    border: 1px dashed var(--chart-border, rgba(255, 255, 255, 0.13));
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-base);
    color: var(--chart-text, #CBD5E1);
}

/* A control that belongs to one chart, in that chart's header. */
.debt-chart-option { display: inline-flex; }

.dash-select--inline {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: var(--t-xs);
}

.dash-control-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--chart-muted, #94A3B8);
}

.dash-select {
    min-height: 2.5rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--chart-border, rgba(255, 255, 255, 0.13));
    border-radius: 8px;
    background: var(--chart-surface, rgba(255, 255, 255, 0.055));
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    color: var(--chart-heading, #F1F5F9);
}

/* The options menu is painted by the OS, which does not inherit the page. */
.dash-select option { color: #0A0E27; background: #FFFFFF; }

.dash-control-apply {
    min-height: 2.5rem;
    padding: 0.35rem 1rem;
    border: 1px solid var(--chart-border-lit, rgba(16, 185, 129, 0.3));
    border-radius: 8px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--chart-accent, #34D399);
    cursor: pointer;
}

/*
 * Apply and Reset as one unit, so a wrap cannot put them on different
 * lines. Reset was loose at the end of the row and wrapped onto a second
 * line beneath the result count, where it read as part of the count rather
 * than as the control that clears the form.
 */
.dash-control-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/*
 * A quiet secondary control, the same height as the selects it sits
 * beside. It was an underlined link floating at a different baseline from
 * everything else in the bar — which is what made it look like stray text
 * rather than a button.
 */
.dash-control-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid var(--chart-border, rgba(255, 255, 255, 0.13));
    border-radius: 8px;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: var(--t-sm);
    line-height: 1;
    color: var(--chart-muted, #94A3B8);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.dash-control-clear svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.dash-control-clear:hover,
.dash-control-clear:focus-visible {
    color: var(--chart-heading, #F1F5F9);
    border-color: var(--chart-muted, #94A3B8);
}

.dash-control-clear:focus-visible {
    outline: 2px solid var(--chart-accent, #34D399);
    outline-offset: 1px;
}

/*
 * Set by charts.js once change-to-submit is wired. Done this way round so the
 * button is present and working whenever the script is not — a form whose
 * only submit path is JavaScript is broken without it.
 */
.dash-controls.has-autosubmit .dash-control-apply { display: none; }

/*
 * Merged into one block on purpose. A second @media (pointer: coarse) was
 * written here first, and this project has already been bitten by a guard
 * split across two identical media blocks: the check read the first, the
 * rule that mattered was in the second, and the test passed while the page
 * was wrong.
 *
 * .dash-control-clear is the late addition. Reset was 22px tall, under the
 * floor the nav and footer were raised to last week, and it only became
 * obvious once Reset started appearing for any filter rather than only for
 * a search. Measured in a browser at 375px, not assumed.
 */
@media (pointer: coarse) {
    .dash-select,
    .dash-control-apply,
    .dash-search input { min-height: 2.75rem; }

    .dash-control-clear {
        min-height: 44px;
        /* Keeps the horizontal padding the desktop rule sets; only the
           height needs raising for touch. */
        padding: 0 0.8rem;
    }
}

/* ---------------------------------------------------------------------------
   Tier 1 controls — 7 Oct 2026

   Two additions: a note under the control bar for when the two ends of the
   period filter contradict each other, and a note on a chart that could not
   follow the currency toggle. Both say something the reader needs and
   neither should look like an error, so they are quiet rather than red.
   --------------------------------------------------------------------------- */

.dash-control-note {
    flex-basis: 100%;
    margin: 0.35rem 0 0;
    /* 0.75rem is the floor for sentence-case type set in this file. Smaller
       was tried and rejected during the responsive audit. */
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--dash-muted, #94A3B8);
}

.debt-chart-currency-note {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.7rem;
    border-left: 2px solid rgba(148, 163, 184, 0.45);
    font-size: var(--t-xs);
    line-height: 1.5;
    color: var(--dash-muted, #94A3B8);
    background: rgba(148, 163, 184, 0.06);
}

/* The creditor ranking now carries two selects. They must wrap rather than
   squeeze the chart title on a narrow card. */
.debt-chart-option + .debt-chart-option {
    margin-left: 0.4rem;
}

@media (max-width: 560px) {
    .debt-chart-option,
    .debt-chart-option + .debt-chart-option {
        margin-left: 0;
        flex: 1 1 100%;
    }
}

/* A KPI that could not follow the currency control, for the same reason the
   charts carry one. */
.dash-kpi-note {
    margin: 0.4rem 0 0;
    font-size: var(--t-xs);
    line-height: 1.45;
    color: var(--dash-muted, #94A3B8);
}

/* ===========================================================================
   The record pass — see docs/RECORD-DESIGN-PASS.md
   =========================================================================== */

/*
 * 1. Figures in the serif.
 *
 * The campaign pairs Playfair with Inter and uses the serif for headings
 * only, which is the default use and wastes it. Annual reports, gazettes
 * and balance sheets set their *numbers* in the serif. ₦159.28T in
 * Playfair reads as a figure of record; in Inter it reads as a metric on
 * a SaaS tile.
 *
 * Tabular numerals because this page has a currency toggle: without them
 * the digits shift sideways when the value changes.
 */
/*
 * 2. Provenance as a citation.
 *
 * It was 13px grey text joined with a middle dot, which is how you set an
 * afterthought. The rule above it means the source follows. This is the
 * one genuinely distinctive thing about the platform — a figure cannot be
 * stored without the document it came from — and it was the quietest
 * thing on the card.
 */
.figure-provenance-period,
.figure-provenance-by {
    display: block;
}

.figure-provenance-by {
    color: var(--chart-text, #CBD5E1);
}

/*
 * 3. Radius as a signal. A KPI is content, not a control.
 */
.dash-kpi,
.chart-cell,
.dash-no-results { border-radius: var(--r-none); }

.dash-select,
.dash-search input,
.dash-control-apply,
.dash-control-clear { border-radius: var(--r-control); }

/*
 * 5. One motion moment.
 *
 * The charts draw themselves in on first view: that shows the data
 * arriving and it stays. A card that rises when you point at it is
 * promising an interaction it does not have, so the lift comes off
 * anything that is not pressable.
 */
.dash-kpi:hover,
.chart-cell:hover { transform: none; }