/* ============================================================================
   Salary dashboard — /salary/

   Scoped .sal-* styles. Nothing here is bolted onto the global style.css, per
   DECISIONS §11; this page loads a lot of chart CSS that no other page needs.

   Colour is monochrome and sequential. Every chart here compares magnitude
   low→high, which takes ONE hue at rising lightness rather than identity
   colours — which is also how the page stays black-and-white like the rest of
   the site. The ramp is validated, not eyeballed: resolved against #121212 in
   dark ordinal mode it passes monotone lightness, adjacent ΔL ≥ 0.06 and a
   2.22:1 light-end contrast against the 2:1 floor. Re-run the validator if
   these are ever retuned.
   ============================================================================ */

:root {
    /* Sequential ramp — white at rising opacity over --panel.
       Resolves #4d4d4d → #717171 → #949494 → #c4c4c4 → #ffffff. */
    --sal-ramp-1: rgba(var(--fg-rgb), 0.25);
    --sal-ramp-2: rgba(var(--fg-rgb), 0.40);
    --sal-ramp-3: rgba(var(--fg-rgb), 0.55);
    --sal-ramp-4: rgba(var(--fg-rgb), 0.75);
    --sal-ramp-5: rgba(var(--fg-rgb), 1);

    /* Recessive furniture — grid lines, tracks, empty cells. */
    --sal-track: rgba(var(--fg-rgb), 0.07);
    --sal-grid: rgba(var(--fg-rgb), 0.12);

    --sal-heat-label: 118px;
    /* Measured, not guessed: the longest role label ("Design Systems Designer")
       needs 165px of text, plus the button, nav and sidebar padding. 240 leaves
       headroom for a fallback font if Geist is slow. */
    --sal-sidebar-w: 240px;
}

/* ── app shell ───────────────────────────────────────────────────────────────
   Dashboard composition: fixed sidebar, workspace with a sticky top bar, and a
   12-column card grid. This page does NOT render .site-header — it carries the
   logo in the sidebar and lets the role list do the nav's job, so header.js
   injects nothing here.
   ──────────────────────────────────────────────────────────────────────────── */

.sal-body {
    background: var(--surface-0);
    min-height: 100vh;
}

/* style.css paints a fixed decorative layer over the whole viewport; at this
   density it muddies every card edge. */
.sal-body::before {
    display: none;
}

.sal-app {
    display: grid;
    grid-template-columns: var(--sal-sidebar-w) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 12px 12px 0;   /* no left inset — the sidebar sits on the edge */
    min-height: 100vh;
    align-items: start;
}

.sal-app.is-collapsed {
    --sal-sidebar-w: 74px;
}

/* ── sidebar ─────────────────────────────────────────────────────────────── */

/* Same treatment as the home page's .dash-sidebar (tools/dashboard.css): no
   fill, no radius, full height, ruled off from the workspace by a right border.
   margin-top cancels .sal-app's top padding so it runs to the viewport edge. */
.sal-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    margin-top: -12px;
    padding: 20px 12px 16px;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

.sal-brand {
    display: block;
    padding: 0 8px;
    flex: 0 0 auto;
}

.sal-brand-logo {
    display: block;
    height: 24px;
    width: auto;
}

.is-collapsed .sal-brand-logo {
    /* The wordmark is one SVG, so a collapsed rail crops to the glyph. */
    width: 26px;
    object-fit: cover;
    object-position: left center;
}

.sal-role-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;                    /* matches .dash-nav on the home page */
    overflow-y: auto;
    flex: 1 1 auto;
    margin: 0 -4px;
    padding: 0 4px;
    /* Still scrolls, the bar just isn't painted. All three rules are needed —
       the ::-webkit rule alone doesn't reach Firefox or legacy Edge. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sal-role-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Rows mirror the home page's .dash-nav-row, so both left panels read as one
   system: same size, padding, radius and active fill. */
.sal-role-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 10px;
    color: var(--muted-strong);
    font-family: "Geist", sans-serif;
    font-size: 0.9rem;
    text-align: left;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.sal-role-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sal-role-btn:hover {
    background: var(--panel-soft);
    color: var(--text);
}

.sal-role-btn.is-active {
    background: rgba(var(--fg-rgb), 0.1);
    color: var(--pure);
    font-weight: 500;
}

/* Hidden in the expanded panel — the full role name is enough there, and a
   column of chips beside it is noise. It reappears only in the collapsed rail,
   where it is the ONLY thing identifying a role: eleven identical dots would
   not be navigable, and there are no per-role icons to fall back on. */
.sal-role-abbr {
    display: none;
    flex: 0 0 auto;
    min-width: 22px;
    text-align: center;
    font-family: "Geist Mono", "Geist", monospace;
    font-size: 0.64rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    background: var(--sal-track);
    border-radius: 4px;
    padding: 3px 4px;
}

.sal-role-btn.is-active .sal-role-abbr {
    background: var(--pure);
    color: var(--bg);
}

.is-collapsed .sal-role-label,
.is-collapsed .sal-cta-card,
.is-collapsed .sal-collapse-label {
    display: none;
}

.is-collapsed .sal-role-btn {
    justify-content: center;
    padding: 9px 0;
}

.is-collapsed .sal-role-abbr {
    display: inline-flex;
    font-size: 0.7rem;
    padding: 5px 6px;
}

/* Ruled off from the role list, like the home page's .dash-sidebar-foot. */
.sal-sidebar-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.sal-cta-card {
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
}

.sal-cta-card h2 {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.35;
}

.sal-cta-card p {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0 0 14px;
    line-height: 1.5;
}

.sal-cta-btn {
    display: block;
    text-align: center;
    background: var(--pure);
    color: var(--bg);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 0.84rem;
    text-decoration: none;
}

.sal-collapse-btn {
    background: none;
    border: 0;
    color: var(--muted);
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    text-align: left;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.sal-collapse-btn:hover {
    color: var(--text);
}

/* ── workspace ───────────────────────────────────────────────────────────── */

.sal-workspace {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sal-topbar {
    position: sticky;
    top: 12px;
    z-index: 30;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sal-topbar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.sal-h1 {
    font-size: 2.5rem;
    font-weight: 100;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0;
}

.sal-h1-sub {
    color: var(--muted-strong);
    font-size: 0.9rem;
    margin: 3px 0 0;
}

.sal-summary {
    color: var(--muted);
    font-size: 0.86rem;
    margin: 6px 0 0;
}

/* ── info icon ───────────────────────────────────────────────────────────── */

.sal-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    vertical-align: -2px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-family: "Geist", sans-serif;
    font-size: 0.6rem;
    line-height: 1;
    cursor: help;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.sal-info:hover,
.sal-info:focus-visible {
    color: var(--text);
    border-color: var(--pure);
}

.sal-info:focus-visible {
    outline: 2px solid var(--pure);
    outline-offset: 2px;
}

/* Actions stack over their caption, both hugging the right edge. */
.sal-topbar-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.sal-topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;     /* three controls now; let them wrap before they squeeze */
    gap: 10px;
}

.sal-topbar-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    text-align: right;
}

/* Export sits beside the Charts/Table toggle and borrows its chrome, so the
   two read as one control group rather than a button bolted on. */
.sal-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    color: var(--muted-strong);
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.sal-export-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

.sal-export-btn:focus-visible {
    outline: 2px solid var(--pure);
    outline-offset: 2px;
}

.sal-export-btn[disabled] {
    cursor: default;
    opacity: 0.6;
}

.sal-topbar-cta {
    background: var(--pure);
    color: var(--bg);
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 0.84rem;
    text-decoration: none;
    white-space: nowrap;
}

/* ── card grid ───────────────────────────────────────────────────────────── */

.sal-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    /* Every card in a row takes the row's height, so the bento edges line up
       instead of leaving ragged gaps under the shorter cards. */
    align-items: stretch;
}

.sal-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    min-width: 0;
}

.sal-card--3  { grid-column: span 3; }
.sal-card--4  { grid-column: span 4; }
.sal-card--5  { grid-column: span 5; }
.sal-card--6  { grid-column: span 6; }
.sal-card--7  { grid-column: span 7; }
.sal-card--8  { grid-column: span 8; }
.sal-card--12 { grid-column: span 12; }

.sal-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.sal-card-title {
    font-size: 0.98rem;
    font-weight: 400;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

.sal-card-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin: 4px 0 0;
    line-height: 1.5;
}

.sal-card-body {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
}

.sal-card-body--tight {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--sal-grid);
    font-size: 0.79rem;
}

.sal-rule {
    border: 0;
    border-top: 1px solid var(--sal-grid);
    margin: 18px 0 16px;
}

/* Cards that need their own inner rhythm. */
.sal-card--hero .sal-card-head {
    margin-bottom: 22px;
}

.sal-hero-hist {
    margin-top: 26px;
}

.sal-card--stats,
.sal-card--top {
    display: flex;
    flex-direction: column;
}

.sal-card--stats {
    gap: 0;
    justify-content: space-between;
    padding: 0;
}

.sal-card--stats .sal-stat {
    padding: 17px 22px;
}

.sal-card--stats .sal-stat + .sal-stat {
    border-top: 1px solid var(--sal-grid);
    /* This card separates with a rule and its own padding — the generic
       .sal-stat margin would stack on top of both. */
    margin-top: 0;
}

.sal-stat + .sal-stat {
    margin-top: 18px;
}

.sal-card--news {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sal-card--news .newsletter-form {
    margin: 0;
}

/* A tall list inside a fixed-height card scrolls rather than stretching the row. */
.sal-scroll-y {
    max-height: 330px;
    overflow-y: auto;
    scrollbar-width: thin;
    margin: 0 -4px;
    padding: 0 4px;
}

/* ── figures ─────────────────────────────────────────────────────────────── */

.sal-hero-figure {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 200;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* INR/USD switch beside the headline figure. A smaller cut of .sal-view-toggle. */
.sal-hero-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.sal-currency-toggle {
    display: inline-flex;
    gap: 2px;
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px;
}

.sal-currency-btn {
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    font-family: "Geist", sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    cursor: pointer;
}

.sal-currency-btn.is-active {
    background: var(--pure);
    color: var(--bg);
}

.sal-currency-btn:focus-visible {
    outline: 2px solid var(--pure);
    outline-offset: 2px;
}

.sal-top-city {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 8px 0 0;
}

.sal-kpi-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin: 0;
}

.sal-kpi-value {
    font-size: 1.42rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 8px 0 0;
    font-variant-numeric: tabular-nums;
}

.sal-kpi-note {
    font-size: 0.76rem;
    color: var(--muted);
    margin: 6px 0 0;
    line-height: 1.5;
}

.sal-legend {
    display: flex;
    gap: 14px;
    font-size: 0.74rem;
    color: var(--muted);
    white-space: nowrap;
}

.sal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sal-swatch {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
}

.sal-swatch--mid { background: var(--sal-ramp-3); }
.sal-swatch--out { background: var(--sal-ramp-1); }

/* ── filters ─────────────────────────────────────────────────────────────── */

.sal-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.sal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sal-field label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.sal-field select {
    width: 100%;
    appearance: none;
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);         /* still on "All …" — salary.js adds .is-set once chosen */
    font-family: "Geist", sans-serif;
    font-size: 0.86rem;
    padding: 9px 30px 9px 12px;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted-strong) 50%),
                      linear-gradient(135deg, var(--muted-strong) 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.sal-field select.is-set {
    color: var(--pure);
}

/* Some platforms paint the open list in the select's own colour — keep the
   options readable rather than inheriting the grey. */
.sal-field select option {
    color: var(--text);
}

/* The global focus ring is on a bare element selector, so suppressing it needs
   its own :focus-visible rule — a plain class with outline:none does nothing. */
.sal-field select:focus-visible,
.sal-level-btn:focus-visible,
.sal-view-btn:focus-visible,
.sal-role-btn:focus-visible,
.sal-collapse-btn:focus-visible,
.sal-bar-row:focus-visible,
.sal-step-node:focus-visible,
.sal-heat-cell:focus-visible {
    outline: 2px solid var(--pure);
    outline-offset: 2px;
}

/* ── level ladder ────────────────────────────────────────────────────────── */

.sal-level-ladder {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.sal-level-btn {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted-strong);
    font-family: "Geist", sans-serif;
    font-size: 0.82rem;
    padding: 8px 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.sal-level-btn small {
    font-size: 0.66rem;
    color: var(--muted);
}

.sal-level-btn:hover:not(:disabled) {
    border-color: var(--border-strong);
    color: var(--text);
}

.sal-level-btn.is-active {
    background: var(--pure);
    border-color: var(--pure);
    color: var(--bg);
}

.sal-level-btn.is-active small {
    color: rgba(0, 0, 0, 0.6);
}

.sal-level-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── view toggle ─────────────────────────────────────────────────────────── */

.sal-view-toggle {
    display: inline-flex;
    gap: 4px;
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.sal-view-btn {
    background: none;
    border: 0;
    border-radius: 11px;
    color: var(--muted);
    font-family: "Geist", sans-serif;
    font-size: 0.8rem;
    padding: 6px 14px;
    cursor: pointer;
}

.sal-view-btn.is-active {
    background: var(--pure);
    color: var(--bg);
}

/* ── methodology ─────────────────────────────────────────────────────────── */

.sal-method-body {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

.sal-method-body p {
    margin: 0 0 11px;
}

.sal-method-body p:last-child {
    margin-bottom: 0;
}

.sal-method-body strong {
    color: var(--muted-strong);
    font-weight: 500;
}

/* ── loading / footer line ───────────────────────────────────────────────── */

.sal-loading {
    text-align: center;
    color: var(--muted);
    padding: 96px 24px;
    font-size: 0.92rem;
}

.sal-updated-line {
    color: var(--muted);
    font-size: 0.74rem;
    text-align: center;
    margin: 4px 0 8px;
}

/* ── range bar ───────────────────────────────────────────────────────────── */

.sal-range-track {
    position: relative;
    height: 14px;
    background: var(--sal-track);
    border-radius: 7px;
    cursor: default;
    margin-top: 4px;
}

.sal-range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--sal-ramp-3);
    border-radius: 7px;
    transition: left var(--sal-motion) var(--sal-ease), width var(--sal-motion) var(--sal-ease);
}

.sal-range-median {
    position: absolute;
    top: -5px;
    bottom: -5px;
    width: 3px;
    margin-left: -1.5px;
    background: var(--sal-ramp-5);
    border-radius: 2px;
    transition: left var(--sal-motion) var(--sal-ease);
}

.sal-range-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.sal-range-scale-mid {
    color: var(--text);
}

/* Motion for every chart mark. charts.js starts each mark at its previous
   geometry and these transitions carry it to the new one (DURATION there
   matches --sal-motion). Reduced motion gets instant updates. */
.sal-body {
    --sal-motion: 0.52s;
    --sal-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
    .sal-body {
        --sal-motion: 0s;
    }
}

/* ── histogram ───────────────────────────────────────────────────────────── */

.sal-hist {
    display: flex;
    align-items: flex-end;
    gap: 2px;                 /* the 2px surface gap between adjacent fills */
    height: 120px;
}

.sal-hist-bin {
    flex: 1;
    min-width: 0;
    background: var(--sal-ramp-1);
    border-radius: 3px 3px 0 0;
    transition: background var(--sal-motion) var(--sal-ease), height var(--sal-motion) var(--sal-ease);
}

.sal-hist-bin.is-mid {
    background: var(--sal-ramp-3);
}

.sal-hist-bin:hover {
    background: var(--sal-ramp-5);
}

.sal-hist-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── horizontal bars ─────────────────────────────────────────────────────── */

.sal-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sal-bar-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 74px;
    align-items: center;
    gap: 12px;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: transform var(--sal-motion) var(--sal-ease);
}

/* USD figures carry "/year", so the value column widens — a fixed width, not
   max-content, so every track in a chart still ends at the same x. */
.sal-currency-usd .sal-bar-row {
    grid-template-columns: 108px minmax(0, 1fr) 96px;
}

.sal-bar-label {
    font-size: 0.85rem;
    color: var(--muted-strong);
    transition: color var(--sal-motion) var(--sal-ease);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sal-bar-track {
    height: 18px;
    background: var(--sal-track);
    border-radius: 4px;
    overflow: hidden;
}

.sal-bar-fill {
    display: block;
    height: 100%;
    /* Emphasis: everything recedes to ramp-2 until it is the selection. */
    background: var(--sal-ramp-2);
    border-radius: 0 4px 4px 0;
    transition: background var(--sal-motion) var(--sal-ease), width var(--sal-motion) var(--sal-ease);
}

.sal-bar-value {
    font-size: 0.84rem;
    color: var(--muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sal-bar-row:hover .sal-bar-fill {
    background: var(--sal-ramp-4);
}

.sal-bar-row.is-selected .sal-bar-fill {
    background: var(--sal-ramp-5);
}

.sal-bar-row.is-selected .sal-bar-label,
.sal-bar-row.is-selected .sal-bar-value {
    color: var(--text);
}

/* ── step chart (experience ladder) ──────────────────────────────────────── */

.sal-step {
    position: relative;
    height: 190px;
    margin-top: 8px;
}

.sal-step-svg {
    position: absolute;
    inset: 0 0 34px;
    width: 100%;
    height: calc(100% - 34px);
}

.sal-step-line {
    fill: none;
    stroke: var(--sal-ramp-3);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.sal-step-overlay {
    position: absolute;
    inset: 0 0 34px;
}

.sal-step-node {
    position: absolute;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--panel);
    background: var(--sal-ramp-3);
    cursor: pointer;
    transition: background var(--sal-motion) var(--sal-ease), transform var(--sal-motion) var(--sal-ease),
        top var(--sal-motion) var(--sal-ease);
}

.sal-step-node:hover {
    background: var(--sal-ramp-5);
    transform: scale(1.35);
}

.sal-step-node.is-selected {
    background: var(--sal-ramp-5);
    transform: scale(1.45);
}

.sal-step-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22px;
}

/* Each tick is centred on its marker's x, set inline by charts.js. */
.sal-step-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--muted);
    white-space: nowrap;
}

.sal-step-tick.is-selected {
    color: var(--text);
}

/* ── heatmap ─────────────────────────────────────────────────────────────── */

.sal-heat-wrap {
    overflow-x: auto;
}

.sal-heat {
    display: grid;
    gap: 2px;                 /* surface gap between adjacent fills */
    min-width: 620px;
}

.sal-heat-corner {
    display: block;
}

.sal-heat-colhead,
.sal-heat-rowhead {
    font-size: 0.7rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sal-heat-colhead {
    justify-content: center;
    padding-bottom: 4px;
}

.sal-heat-rowhead {
    padding-right: 10px;
}

.sal-heat-rowhead.is-selected {
    color: var(--text);
}

.sal-heat-cell {
    aspect-ratio: 1 / 1;
    min-height: 34px;
    border: 0;
    border-radius: 4px;
    /* Figures must align down the column, which is the same reasoning that
       earned the colour converter its Geist Mono exception in DECISIONS §10. */
    font-family: "Geist Mono", "Geist", monospace;
    font-size: 0.72rem;
    color: var(--bg);
    cursor: pointer;
    transition: transform 0.12s ease, background-color var(--sal-motion) var(--sal-ease),
        color var(--sal-motion) var(--sal-ease);
}

.sal-heat-cell:hover {
    transform: scale(1.08);
}

.sal-heat-s1 { background: var(--sal-ramp-1); color: var(--text); }
.sal-heat-s2 { background: var(--sal-ramp-2); color: var(--text); }
.sal-heat-s3 { background: var(--sal-ramp-3); color: var(--bg); }
.sal-heat-s4 { background: var(--sal-ramp-4); color: var(--bg); }
.sal-heat-s5 { background: var(--sal-ramp-5); color: var(--bg); }

.sal-heat-cell.is-empty {
    background: var(--sal-track);
    cursor: default;
}

.sal-heat-cell.is-selected {
    box-shadow: 0 0 0 2px var(--pure), 0 0 0 4px var(--panel);
}

/* ── callouts ────────────────────────────────────────────────────────────── */

.sal-callout {
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-top: 20px;
}

.sal-callout h3 {
    font-weight: 300;
    font-size: 1.3rem;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 6px;
}

.sal-callout p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
    max-width: 68ch;
}

/* ── meters ──────────────────────────────────────────────────────────────── */

.sal-extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.sal-meter {
    height: 8px;
    background: var(--sal-track);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 12px;
}

.sal-meter-fill {
    height: 100%;
    background: var(--sal-ramp-4);
    border-radius: 4px;
    transition: width var(--sal-motion) var(--sal-ease);
}

/* ── tables ──────────────────────────────────────────────────────────────── */

.sal-table-wrap {
    overflow-x: auto;
}

.sal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    min-width: 560px;
}

.sal-table caption {
    text-align: left;
    color: var(--muted);
    font-size: 0.85rem;
    padding-bottom: 12px;
}

.sal-table th,
.sal-table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--sal-grid);
    white-space: nowrap;
}

.sal-table thead th {
    color: var(--muted);
    font-weight: 400;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sal-table tbody th {
    color: var(--muted-strong);
    font-weight: 400;
}

.sal-table td {
    color: var(--text);
}

.sal-num {
    text-align: right;
    font-family: "Geist Mono", "Geist", monospace;
    font-variant-numeric: tabular-nums;
}

.sal-table-national th,
.sal-table-national td {
    color: var(--text);
    border-bottom: 1px solid var(--border-strong);
}

/* ── methodology ─────────────────────────────────────────────────────────── */

.sal-method {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    background: var(--panel);
}

.sal-method summary {
    cursor: pointer;
    color: var(--muted-strong);
    font-size: 0.92rem;
    list-style: none;
}

.sal-method summary::-webkit-details-marker {
    display: none;
}

.sal-method summary::before {
    content: "＋ ";
    color: var(--muted);
}

.sal-method[open] summary::before {
    content: "－ ";
}

.sal-method-body {
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.7;
}

.sal-method-body p {
    margin: 0 0 12px;
    max-width: 74ch;
}

.sal-method-body strong {
    color: var(--muted-strong);
    font-weight: 500;
}

/* ── tooltip ─────────────────────────────────────────────────────────────── */

.sal-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    pointer-events: none;
    background: var(--surface-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--muted-strong);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    max-width: 260px;
}

.sal-tooltip strong {
    color: var(--text);
    font-weight: 500;
}

/* ── loading ─────────────────────────────────────────────────────────────── */

.sal-loading {
    text-align: center;
    color: var(--muted);
    padding: 72px 0;
    font-size: 0.92rem;
}

.sal-updated-line {
    color: var(--muted);
    font-size: 0.78rem;
    text-align: center;
    margin-top: 56px;
}

/* ── submission page shell ───────────────────────────────────────────────── */

.sal-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}

.sal-main--narrow {
    max-width: 780px;
}

.sal-hero {
    position: relative;
    text-align: center;
    padding-bottom: 8px;
}

.sal-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--muted);
    margin: 0 0 18px;
}

.sal-title {
    font-weight: 200;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 auto 20px;
}

.sal-subtitle {
    max-width: 56ch;
    color: var(--muted);
    font-size: 1.02rem;
    margin: 0 auto 28px;
}

/* ── submission form ─────────────────────────────────────────────────────── */

.sal-main--narrow {
    max-width: 780px;
}

.sal-privacy-note {
    background: var(--panel-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 24px;
    margin-top: 8px;
}

.sal-privacy-note h2 {
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--text);
    margin: 0 0 8px;
}

.sal-privacy-note p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

.sal-privacy-note strong {
    color: var(--muted-strong);
    font-weight: 500;
}

.sal-form {
    margin-top: 32px;
}

.sal-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--panel);
    padding: 22px 24px 24px;
    margin: 0 0 16px;
}

.sal-fieldset legend {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    padding: 0 8px;
}

/* INR/USD switch above the two pay fields. Reuses the dashboard's
   .sal-currency-toggle so the control looks the same in both places. */
.sal-pay-currency {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.sal-pay-currency-label {
    font-size: 0.82rem;
    color: var(--muted);
}

/* The running "≈ ₹19.4 LPA" conversion, shown only in USD mode. */
.sal-pay-converted {
    color: var(--muted-strong);
}

.sal-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.sal-form .sal-field input {
    width: 100%;
    background: var(--surface-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: "Geist", sans-serif;
    font-size: 0.92rem;
    padding: 10px 12px;
}

.sal-form .sal-field input:focus-visible {
    outline: 2px solid var(--pure);
    outline-offset: 2px;
}

.sal-form .sal-field input.has-error,
.sal-form .sal-field select.has-error {
    border-color: var(--muted-strong);
}

/* "Every field is required — NIL to skip", above the first fieldset. */
.sal-form-rule {
    margin: 0 0 20px;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted);
}

.sal-form-rule strong {
    font-weight: 500;
    color: var(--text);
}

.sal-field-hint,
.sal-field-error {
    font-size: 0.76rem;
    margin: 0;
    line-height: 1.45;
}

.sal-field-hint {
    color: var(--muted);
}

.sal-field-error {
    color: var(--muted-strong);
}

.sal-field-error:empty {
    display: none;
}

/* Off-screen rather than display:none — a bot reading the DOM should still find
   something worth filling in. */
.sal-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.sal-form-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.sal-form-status {
    color: var(--muted);
    font-size: 0.86rem;
    margin: 0;
}

.sal-form-done {
    text-align: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 28px;
    margin-top: 32px;
}

.sal-form-done h2 {
    font-weight: 200;
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 12px;
}

.sal-form-done p {
    color: var(--muted);
    max-width: 48ch;
    margin: 0 auto 24px;
    font-size: 0.94rem;
}

/* ── responsive ──────────────────────────────────────────────────────────── */

/* Below this the 12-column grid stops being readable: five-column cards get
   ~180px each. Collapse to six columns and let cards pair up. */
@media (max-width: 1280px) {
    .sal-card--3,
    .sal-card--4,
    .sal-card--5 { grid-column: span 6; }
    .sal-card--6,
    .sal-card--7,
    .sal-card--8 { grid-column: span 12; }
}

/* Sidebar becomes a horizontal rail above the workspace. */
@media (max-width: 1000px) {
    .sal-app {
        grid-template-columns: minmax(0, 1fr);
        padding: 10px;
    }

    /* As a top rail the rule moves from the right edge to the bottom. */
    .sal-sidebar {
        position: static;
        height: auto;
        margin-top: 0;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 14px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .sal-role-nav {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        flex: 1 1 auto;
    }

    .sal-role-btn {
        padding: 8px 12px;
    }

    .sal-sidebar-foot,
    .sal-collapse-btn {
        display: none;
    }

    .sal-topbar {
        top: 10px;
    }
}

@media (max-width: 760px) {
    .sal-app {
        padding: 8px;
        gap: 8px;
    }

    .sal-grid {
        gap: 8px;
    }

    .sal-card { padding: 16px; }
    .sal-card--3,
    .sal-card--4,
    .sal-card--5,
    .sal-card--6,
    .sal-card--7,
    .sal-card--8 { grid-column: span 12; }

    .sal-topbar {
        position: static;
        padding: 16px;
    }

    .sal-topbar-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .sal-topbar-actions {
        justify-content: space-between;
    }

    .sal-card--hero .sal-card-head {
        flex-direction: column;
        gap: 12px;
    }

    .sal-bar-row {
        grid-template-columns: 84px minmax(0, 1fr) 62px;
        gap: 8px;
    }

    .sal-currency-usd .sal-bar-row {
        grid-template-columns: 84px minmax(0, 1fr) 84px;
    }

    .sal-bar-label,
    .sal-bar-value {
        font-size: 0.78rem;
    }

    .sal-step {
        height: 165px;
    }

    /* Eight ticks will not fit; the ladder buttons and the tooltip still name
       every level, so dropping the axis labels loses nothing. */
    .sal-step-axis {
        display: none;
    }

    .sal-step-svg,
    .sal-step-overlay {
        inset: 0;
        height: 100%;
    }

    .sal-card--news {
        flex-direction: column;
        align-items: stretch;
    }

    .sal-scroll-y {
        max-height: none;
    }
}

/* ── submission page (/salary/submit/) ───────────────────────────────────── */

@media (max-width: 760px) {
    .sal-main {
        padding: 40px 16px 72px;
    }
}