/*
 * The application shell, as the Specisoft mockup draws it:
 *
 *   a 236px sidebar rail carrying the brand, the whole navigation as grouped rows with counts,
 *   and a footer with the plan meter and the signed-in user
 *   — and nothing else. There is no top app bar, no tab strip and no action strip; the study
 *   desk instead gets a context header and a numbered workflow ladder.
 *
 * The board is drawn at 1600px+. Below lg the rail becomes an overlay and a slim bar appears
 * to summon it — an adaptation, since a design with no top bar also has no way to open a
 * drawer. Everything else holds its proportions down to tablet portrait.
 *
 * Breakpoints follow MudBlazor's so a rule and a `Breakpoint.Lg` parameter cannot disagree:
 *   xs <600   sm 600–959   md 960–1279   lg 1280–1919   xl 1920+
 */
@layer spec.chrome {
    /* ——————————————————————————————————————————————————————
       Rail
       —————————————————————————————————————————————————————— */
    /*
     * Brand pinned at the top, identity and plan pinned at the bottom, and only the navigation
     * scrolls between them.
     *
     * The mockup scrolls the whole aside, which is fine for the twelve rows it draws. This app
     * has around thirty-five, so that structure put the plan meter and the signed-in user 270px
     * below the fold on a 900px viewport — present in the DOM and invisible in practice.
     */
    .spec-rail {
        --rail-gutter-x: 14px;
        --rail-chevron-slot: 22px;
        /* Rail-local colour: the rail is a deep blue ground, so everything drawn on it reads in
           light ink. Kept local so the canvas palette stays untouched — the desk to the right of
           the rail is still the light technical ground the design system asks for.

           The accents come off the Industry blue ramp rather than being picked by eye: the marker
           and meter take step 300 and the footer links step 200, both of which clear 7:1 on the
           900 ground this sits on. */
        --rail-ink: #f2f7fb;
        --rail-ink-soft: color-mix(in srgb, #f2f7fb 82%, transparent);
        --rail-ink-faint: color-mix(in srgb, #f2f7fb 66%, transparent);
        --rail-line: color-mix(in srgb, #ffffff 22%, transparent);
        --rail-wash: color-mix(in srgb, #ffffff 10%, transparent);
        --rail-wash-strong: color-mix(in srgb, #ffffff 24%, transparent);
        --rail-current-bg: color-mix(in srgb, #ffffff 16%, transparent);
        --rail-current-ink: #ffffff;
        --rail-mark: var(--color-accent-300);
        --rail-link: var(--color-accent-200);
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--spec-rail);
        border-right: 1px solid var(--color-divider);
        overflow: hidden;
    }

    .spec-rail__brand {
        flex: none;
        padding: 16px 14px 12px;
        border-bottom: 1px solid var(--rail-line);
    }

    .spec-rail__wordmark {
        font: var(--weight-semibold) 15px/1 var(--font-heading);
        letter-spacing: var(--tracking-brand);
        text-transform: uppercase;
        color: var(--rail-ink);
    }

    .spec-rail__firm {
        font: var(--weight-regular) 11px/1.4 var(--font-body);
        color: var(--rail-ink-soft);
        margin-top: 5px;
    }

    .spec-rail__nav {
        flex: 1;
        /* Without this the nav refuses to shrink below its content — a flex item's default
           min-height is auto — and overflow-y never engages. */
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 10px;
    }

    .spec-rail__group {
        margin-top: 14px;
    }

    .spec-rail__group-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--rail-gutter-x) 6px;
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--rail-ink-faint);
    }

    /* «χρήση 2024» reads as itself; the heading beside it is the thing that is uppercase. */
    .spec-rail__group-note {
        font-family: var(--font-mono);
        letter-spacing: 0;
        text-transform: none;
        font-weight: var(--weight-regular);
        color: var(--rail-ink-faint);
        white-space: nowrap;
    }

    /* A group that can offer nothing says why, rather than reading as a broken module. */
    .spec-rail__group-reason {
        margin: 0 0 6px;
        padding: 0 14px;
        font-size: 11px;
        line-height: 1.4;
        color: var(--rail-ink-faint);
        text-wrap: pretty;
    }

    /*
     * A row is a 3px left mark plus a label plus an optional count. The mark is the only thing
     * that moves between states, so the label never shifts by a pixel when a route becomes
     * current — which is what a 3px border on every row, transparent when idle, buys.
     */
    /*
     * A row is a label and, where the step has desks of its own, a disclosure beside it. They are
     * two controls because they do two things: the label navigates to the step, the chevron opens
     * what is under it without leaving where you are.
     */
    .spec-rail__row {
        display: flex;
        align-items: stretch;
    }

    .spec-rail__link {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        gap: 8px;
        padding: 5px var(--rail-gutter-x) 5px 11px;
        border: 0;
        border-left: 3px solid transparent;
        background: transparent;
        color: var(--rail-ink);
        font: var(--weight-regular) var(--text-base) / 1.35 var(--font-body);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease-standard),
                    color var(--dur-fast) var(--ease-standard);
    }

    .spec-rail__link:hover {
        background: var(--rail-wash);
        color: var(--rail-ink);
    }

    .spec-rail__link.is-current {
        background: var(--rail-current-bg);
        border-left-color: var(--rail-mark);
        color: var(--rail-current-ink);
        font-weight: var(--weight-semibold);
    }

    /*
     * A step the close has not reached, or a row the role does not carry. Muted by colour at
     * neutral-600 — opacity would fade the whole row including its note, and pointer-events:none
     * would only hide it from a mouse. What actually keeps it unreachable is that it renders as a
     * span with no href.
     */
    .spec-rail__link.is-disabled {
        color: var(--rail-ink-faint);
        cursor: default;
    }

    /* Except a heading: disclosing what is under a step you have not reached is still allowed. */
    .spec-rail__link--heading {
        cursor: pointer;
    }

    .spec-rail__link:focus-visible,
    .spec-rail__disclosure:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -2px;
    }

    /*
     * The desks that belong to a step. Indented and a step down in size, so the eye reads the
     * primaries as the sequence and these as what hangs off one of them.
     */
    .spec-rail__link--secondary {
        padding-left: 25px;
        font-size: 12px;
        color: var(--rail-ink);
    }

    .spec-rail__link--secondary.is-current {
        color: var(--rail-current-ink);
    }

    /*
     * Two markups, one column. A heading owns the › inside the padded link; a destination
     * step parks it on a sibling button so the label can still navigate. Those used to
     * disagree: the button was a flush 22px at the rail edge, the heading › sat 14px in —
     * the same gutter as the group note — so "Αρχικό ισοζύγιο" poked past every arrow under it.
     *
     * The slot is `--rail-chevron-slot` either way. The gutter after it is
     * `--rail-gutter-x` — the same inset as the group note — kept as padding on the
     * disclosure so the gutter stays inside the hit target. box-sizing is content-box
     * so a later border-box reset cannot swallow that gutter into the slot.
     */
    .spec-rail__disclosure {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: content-box;
        width: var(--rail-chevron-slot);
        padding: 0 var(--rail-gutter-x) 0 0;
        border: 0;
        background: transparent;
        color: var(--rail-ink-faint);
        cursor: pointer;
    }

    .spec-rail__disclosure:hover {
        background: var(--rail-wash);
        color: var(--rail-ink);
    }

    .spec-rail__chevron {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--rail-chevron-slot);
        height: var(--rail-chevron-slot);
        font: var(--weight-regular) 13px/1 var(--font-body);
        transition: transform var(--dur-fast) var(--ease-standard);
    }

    .spec-rail__chevron.is-open {
        transform: rotate(90deg);
        transform-origin: center;
    }

    .spec-rail__link--heading .spec-rail__chevron {
        color: var(--rail-ink-faint);
    }

    .spec-rail__link-label {
        flex: 1;
        min-width: 0;
    }

    .spec-rail__badge {
        font: var(--weight-regular) var(--text-2xs) / 1 var(--font-mono);
        padding: 2px 4px;
        border: 1px solid var(--color-neutral-300);
        background: var(--spec-surface);
        color: var(--color-neutral-700);
        white-space: nowrap;
    }

    /* The wrong-role note. Filled rather than hairline, because it is not a count. */
    .spec-rail__badge--locked {
        background: var(--color-neutral-200);
        color: var(--color-neutral-700);
    }

    .spec-rail__link.is-current .spec-rail__badge {
        border-color: var(--color-accent-300);
        background: var(--spec-surface);
        color: var(--color-accent-800);
    }

    /* A subscription hold is the one thing in the rail allowed to shout. */
    .spec-rail__notice {
        margin: 10px;
        padding: 8px 9px;
        background: var(--stop-t);
        border: 1px solid var(--stop-b);
        border-left: 3px solid var(--stop);
    }

    .spec-rail__notice-label {
        font: var(--weight-semibold) 10px/1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--stop);
    }

    .spec-rail__notice-body {
        font-size: 11px;
        line-height: 1.45;
        color: var(--color-neutral-800);
        margin-top: 5px;
    }

    /* —— Rail footer: the plan meter and who is signed in —— */
    .spec-rail__foot {
        flex: none;
        border-top: 1px solid var(--rail-line);
        padding: 10px 14px;
        font-size: 11px;
        color: var(--rail-ink-soft);
    }

    /* The plan row leads to where the subscription actually is. It reads as text until you point
       at it, because it is a statement of fact first and a link second. */
    a.spec-rail__foot-row {
        text-decoration: none;
        color: inherit;
    }

    a.spec-rail__foot-row:hover .spec-rail__foot-value {
        color: var(--rail-link);
    }

    .spec-rail__foot-row {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-2);
    }

    .spec-rail__foot-row + .spec-rail__foot-row {
        margin-top: 3px;
    }

    .spec-rail__foot-value {
        font-weight: var(--weight-semibold);
        color: var(--rail-ink);
    }

    .spec-rail__foot-value--mono {
        font-family: var(--font-mono);
    }

    /* Amber once the firm is at or near its client ceiling — the meter is the only place the
       operator learns a new client will be refused before they try to add one. */
    .spec-rail__foot-value--near-cap {
        color: var(--warn);
    }

    .spec-rail__meter {
        height: 3px;
        background: var(--rail-wash-strong);
        margin-top: 6px;
    }

    .spec-rail__meter-fill {
        height: 3px;
        background: var(--rail-mark);
    }

    .spec-rail__meter-fill--near-cap {
        background: var(--warn);
    }

    /* A long role tag drops to its own line rather than eating the name: "ΔΙΑΧΕΙΡΙΣΤΗΣ
       ΠΛΑΤΦΟΡΜΑΣ" beside a name in 236px truncated the person, which is the half that matters. */
    .spec-rail__user {
        margin-top: 10px;
        padding-top: 9px;
        border-top: 1px dotted var(--rail-line);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: 2px var(--sp-2);
    }

    .spec-rail__user-name {
        color: var(--rail-ink);
        flex: 1 1 8rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .spec-rail__role {
        font: var(--weight-regular) var(--text-2xs) / 1 var(--font-mono);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--rail-ink-faint);
        white-space: nowrap;
    }

    /* The account's two actions, below the identity: where its settings are, and the way out. */
    .spec-rail__foot-actions {
        display: flex;
        gap: var(--sp-3);
        margin-top: 8px;
    }

    .spec-rail__foot-action {
        padding: 4px 0;
        background: none;
        border: 0;
        color: var(--rail-link);
        font-size: 11px;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .spec-rail__foot-action:hover {
        color: var(--rail-ink);
    }

    .spec-rail__foot-action:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: 1px;
    }

    /* No ceiling to meter, so the count states itself and says so. */
    .spec-rail__foot-note {
        color: var(--rail-ink-soft);
    }

    /* ——————————————————————————————————————————————————————
       Narrow-screen bar

       The mockup has no top bar because it is drawn at 1600px, where the rail is always
       present. Below lg the rail is an overlay, and an overlay with no way to open it is a
       dead end — so this appears only there, carrying the toggle and the wordmark.
       —————————————————————————————————————————————————————— */
    .spec-topbar {
        display: none;
    }

    @media (max-width: 1279.95px) {
        .spec-topbar {
            display: flex;
            align-items: center;
            gap: var(--sp-3);
            height: 44px;
            padding: 0 var(--sp-3);
            background: var(--color-neutral-100);
            border-bottom: 1px solid var(--color-divider);
            position: sticky;
            top: 0;
            z-index: var(--z-desk-chrome);
        }

        .spec-topbar__wordmark {
            font: var(--weight-semibold) 14px/1 var(--font-heading);
            letter-spacing: var(--tracking-brand);
            text-transform: uppercase;
        }

        .spec-topbar__toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            padding: 0;
            background: transparent;
            border: 1px solid var(--color-divider);
            color: var(--spec-ink);
            cursor: pointer;
        }

        .spec-topbar__toggle:hover {
            background: var(--wash-ink-7);
        }
    }

    /* ——————————————————————————————————————————————————————
       Study context header
       —————————————————————————————————————————————————————— */
    .spec-study-head {
        padding: 14px var(--gutter) 0;
        background: var(--color-neutral-100);
        border-bottom: 1px solid var(--color-divider);
    }

    /* The ladder and the FINAN strip bring their own 14px above them. With neither — a client
       bound but no μελέτη — the row would otherwise sit on the divider, which the wrapped pill
       line makes obvious. Rejected: a bottom padding on the row itself, which would double the
       gap above the ladder on every route that has one. */
    .spec-study-head:not(:has(.spec-ladder, .spec-finan-tabs)) {
        padding-bottom: 12px;
    }

    .spec-study-head__row {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        flex-wrap: wrap;
    }

    .spec-study-head__back {
        background: none;
        border: 0;
        padding: 0;
        font-size: var(--text-sm);
        color: var(--color-accent-700);
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
    }

    .spec-study-head__back:hover {
        color: var(--color-accent-900);
    }

    .spec-study-head__rule {
        width: 1px;
        height: 14px;
        background: var(--color-divider);
        flex: none;
    }

    /*
     * The client's own slot. A plain link today; the searchable ClientSwitcher drops into this
     * span without the surrounding row moving, which is why the name has a wrapper of its own
     * rather than being the flex child directly.
     */
    .spec-study-head__client {
        display: inline-flex;
        align-items: baseline;
        /*
         * The floor is what keeps the client's name on screen. Every other child of the row is
         * `white-space: nowrap` and so refuses to shrink, which made the name the only item that
         * could absorb the row's overflow — a client carrying μελέτη, χρήση, περίοδος, πρότυπο
         * and a freshness sentence ellipsised its own name down to nothing. With a floor the row
         * can no longer fit, so the pills wrap to a second line instead: the header grows a row
         * rather than deleting the one fact the operator needs.
         *
         * Rejected: `flex: 1 1 <basis>` here. It fixes the same squeeze, but the client then
         * eats the free space and `margin-left: auto` on the pills stops right-aligning them.
         *
         * The floor is a share of the row, not a fixed 14rem: a flat 224px is shorter than most
         * ΑΕ/ΕΠΕ names, so on any row tight enough to reach the floor it ellipsised anyway. A
         * percentage keeps the same guarantee — the other nowrap items still lose the tug-of-war
         * and wrap first — while giving the name room that scales with the row instead of a
         * character count that was already too small.
         */
        flex: 0 1 auto;
        min-width: min(45%, 100%);
    }

    .spec-study-head__name {
        font: var(--weight-semibold) var(--text-lg) / 1 var(--font-heading);
        /* Below ~750px the mockup's 18px is the widest thing in the row; it steps down rather
           than pushing the name into its own ellipsis. Overrides the size in the shorthand. */
        font-size: clamp(15px, 2.4vw, var(--text-lg));
        color: var(--spec-ink);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* ΑΦΜ and ΓΕΜΗ: identifiers, so mono, and never wrapped mid-number. */
    .spec-study-head__ids {
        font: var(--weight-regular) 11px var(--font-mono);
        color: var(--color-neutral-700);
        white-space: nowrap;
    }

    .spec-study-head__pills {
        display: flex;
        gap: 6px;
        margin-left: auto;
        align-items: center;
        flex-wrap: wrap;
        min-width: 0;
    }

    /* Separates what the μελέτη *is* from how fresh its numbers are — the mockup's hairline. */
    .spec-study-head__pill-rule {
        width: 1px;
        height: 16px;
        margin: 0 3px;
        background: var(--color-divider);
        flex: none;
    }

    /* Below md the identifiers are the first to go: the name and the state pills are what the
       operator is reading. The name is no longer clamped here — its slot's floor already holds
       it, and a 16rem cap only re-created the truncation this breakpoint was meant to relieve. */
    @media (max-width: 959.95px) {
        .spec-study-head__ids {
            display: none;
        }

        /* Once the pills own a line of their own, `auto` would hang them off the right edge with
           nothing above them; left-aligned they share the name's edge and read as one column. */
        .spec-study-head__pills {
            margin-left: 0;
            width: 100%;
        }
    }

    /* —— Pills —— */
    .spec-pill {
        font: var(--weight-regular) var(--text-xs) / 1 var(--font-mono);
        padding: 4px 7px;
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
        color: var(--spec-ink);
        white-space: nowrap;
    }

    .spec-pill--accent {
        border-color: var(--color-accent-400);
        background: var(--color-accent-100);
        color: var(--color-accent-800);
    }

    .spec-pill--ok {
        border-color: var(--ok-b);
        background: var(--ok-t);
        color: var(--ok);
    }

    .spec-pill--warn {
        font-family: var(--font-body);
        font-size: 11px;
        padding: 4px 8px;
        border-color: var(--warn-b);
        background: var(--warn-t);
        color: var(--warn);
    }

    .spec-pill--stop {
        font-family: var(--font-body);
        font-size: 11px;
        padding: 4px 8px;
        border-color: var(--stop-b);
        background: var(--stop-t);
        color: var(--stop);
    }

    /*
     * The μελέτη switcher. It stays a native <select> — one control that has to open reliably on
     * a tablet over a dense grid, and the platform positions it better than any popover we would
     * write — but it wears the accent pill, so the header reads as one row of chips rather than
     * a form control that wandered in. The chevron is a background image because `appearance:
     * none` takes the platform's own away.
     */
    select.spec-pill {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 20px;
        /* 24rem is wider than a phone's viewport, and a <select> at its max-width overflows the
           row rather than ellipsising — so the cap yields to the line it sits on. */
        max-width: min(var(--spec-study-select-max-width, 24rem), 100%);
        text-overflow: ellipsis;
        cursor: pointer;
        background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                          linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position: calc(100% - 11px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
        background-size: 4px 4px, 4px 4px;
        background-repeat: no-repeat;
    }

    select.spec-pill:hover {
        border-color: var(--color-accent-700);
    }

    /* The freshness pill carries a sentence, not a code, so it leaves the mono track. */
    .spec-pill--sentence {
        font-family: var(--font-body);
        font-size: 11px;
        padding: 4px 8px;
    }

    /* ——————————————————————————————————————————————————————
       Workflow ladder

       This replaces the tab strip and the action strip both. Each step states its number, its
       name and what it currently holds, so the desk says where the close actually stands
       rather than only where you can click.
       —————————————————————————————————————————————————————— */
    .spec-ladder {
        display: flex;
        gap: 0;
        margin-top: 14px;
        align-items: stretch;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        background: var(--scroll-shadow-on-rail);
        background-color: var(--color-neutral-100);
    }

    /*
     * Steps share the width, and the two long names ("Αποθέματα · Αποσβέσεις · Εξωλογιστικά",
     * "Αποτελέσματα & εκτυπώσεις") take a wider share rather than wrapping to three lines while
     * "Έξοδα" floats in whitespace — the mockup's 1.6/210px against 1/124px.
     */
    .spec-ladder__step {
        position: relative;
        flex: 1 1 0;
        min-width: 124px;
        text-align: left;
        padding: 8px 12px 10px;
        background: transparent;
        border: 0;
        border-top: 3px solid var(--color-neutral-400);
        border-right: 1px solid var(--color-divider);
        color: var(--spec-ink);
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--dur-fast) var(--ease-standard);
    }

    .spec-ladder__step--wide {
        flex-grow: 1.6;
        min-width: 210px;
    }

    .spec-ladder__step:hover:not(.is-locked) {
        background: var(--wash-ink-4);
    }

    /* —— Tones. The top edge is the whole signal; nothing else moves. —— */
    .spec-ladder__step.is-done {
        border-top-color: var(--ok);
    }

    .spec-ladder__step.is-current {
        background: var(--spec-surface);
        border-top-color: var(--color-accent);
    }

    .spec-ladder__step.is-warn {
        border-top-color: var(--warn);
    }

    .spec-ladder__step.is-available {
        border-top-color: var(--color-neutral-400);
    }

    /*
     * Not reached yet. Colour carries it, never opacity: a step faded to 0.72 puts its blocker
     * sentence below the contrast floor, and the blocker is the one thing on a locked step the
     * operator actually needs to read.
     */
    .spec-ladder__step.is-locked {
        border-top-color: var(--color-neutral-300);
        cursor: not-allowed;
    }

    .spec-ladder__step.is-locked .spec-ladder__label {
        color: var(--color-neutral-600);
        font-weight: var(--weight-regular);
    }

    .spec-ladder__head {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .spec-ladder__num {
        font: var(--weight-regular) 10px/1 var(--font-mono);
        color: var(--color-neutral-600);
    }

    .spec-ladder__step.is-current .spec-ladder__num {
        color: var(--color-accent);
    }

    .spec-ladder__label {
        font: var(--weight-semibold) 12px/1.25 var(--font-heading);
        color: var(--spec-ink);
    }

    /*
     * Every step carries one. The mockup never shows a bare name: a step that states only what
     * it is called says nothing about where the close stands, which is the whole point of the
     * strip. 10.5px rather than the mockup's 10px because §3.8 puts the floor there for
     * neutral-700 text.
     */
    .spec-ladder__sub {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: var(--text-xs);
        line-height: 1.35;
        color: var(--color-neutral-700);
        margin-top: 3px;
        text-wrap: pretty;
    }

    /* A step whose own state needs attention says so in its sub-line rather than by
       recolouring its name, so the ladder still reads as a sequence. */
    .spec-ladder__sub--warn {
        color: var(--warn);
    }

    .spec-ladder__sub--stop {
        color: var(--stop);
    }

    .spec-ladder__step.is-locked .spec-ladder__sub {
        color: var(--color-neutral-700);
    }

    /* ——————————————————————————————————————————————————————
       FINAN tab strip

       A FINAN analysis has no close to climb, so the ladder's slot carries the analysis's own
       surfaces instead. Same geometry as the ladder's current step — white with an accent top
       edge — so the two strips read as one piece of chrome in two moods.
       —————————————————————————————————————————————————————— */
    .spec-finan-tabs {
        display: flex;
        gap: 0;
        margin-top: 12px;
        align-items: stretch;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        background: var(--scroll-shadow-on-rail);
        background-color: var(--color-neutral-100);
    }

    .spec-finan-tabs__tab {
        padding: 7px 14px;
        font-size: 12.5px;
        line-height: 1.2;
        color: var(--color-neutral-700);
        background: transparent;
        border: 1px solid var(--color-divider);
        border-bottom: 0;
        border-top: 3px solid transparent;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--dur-fast) var(--ease-standard);
    }

    .spec-finan-tabs__tab + .spec-finan-tabs__tab {
        border-left: 0;
    }

    .spec-finan-tabs__tab:hover:not(.is-current):not(.is-soon) {
        background: var(--wash-ink-4);
    }

    .spec-finan-tabs__tab.is-current {
        background: var(--spec-surface);
        border-top-color: var(--color-accent);
        color: var(--spec-ink);
        font-weight: var(--weight-semibold);
    }

    /* Secondary surfaces: present, reachable, just not where the analysis starts. */
    .spec-finan-tabs__tab.is-secondary {
        color: var(--color-neutral-600);
    }

    /* Named but not built. A span, not a link — and it says «σύντομα» rather than being greyed
       into ambiguity. */
    .spec-finan-tabs__tab.is-soon {
        color: var(--color-neutral-600);
        cursor: default;
    }

    /* The strip scrolls, so an outset ring would be clipped at either end. */
    .spec-finan-tabs__tab:focus-visible {
        outline-offset: calc(-1 * var(--spec-focus-width));
    }

    .spec-finan-tabs__soon {
        font: var(--weight-regular) var(--text-2xs) / 1 var(--font-mono);
        margin-left: 6px;
        color: var(--color-neutral-600);
    }

    /* ——————————————————————————————————————————————————————
       Page head — the firm-level pages (Πελάτες, Έργα, admin)
       —————————————————————————————————————————————————————— */
    .spec-page-head {
        padding: 22px var(--gutter) 14px;
        border-bottom: 1px solid var(--color-divider);
    }

    .spec-page-head__row {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--sp-4);
        flex-wrap: wrap;
    }

    .spec-page-head__eyebrow {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--color-neutral-600);
    }

    .spec-page-head__title {
        font-size: var(--text-2xl);
        margin: 6px 0 0;
    }

    .spec-page-head__aside {
        display: flex;
        gap: 12px;
        align-items: center;
        flex-wrap: wrap;
    }

    .spec-page-head__stat {
        text-align: right;
    }

    .spec-page-head__stat-label {
        font: var(--weight-regular) 10px/1 var(--font-body);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
        color: var(--color-neutral-600);
    }

    .spec-page-head__stat-value {
        font: var(--weight-semibold) 19px/1.1 var(--font-mono);
        margin-top: 3px;
        color: var(--spec-ink);
    }

    .spec-page-head__stat-value--near-cap {
        color: var(--warn);
    }

    .spec-page-head__toolbar {
        display: flex;
        gap: 9px;
        align-items: center;
        margin-top: 16px;
        flex-wrap: wrap;
    }

    .spec-page-head__meta {
        font-size: var(--text-sm);
        color: var(--color-neutral-600);
        margin-left: auto;
        font-family: var(--font-mono);
    }

    /* ——————————————————————————————————————————————————————
       MudBlazor shell surfaces

       The layout keeps MudLayout and MudDrawer — the drawer is what makes the rail responsive
       without hand-rolling an overlay — but neither may bring its Material chrome with it.
       —————————————————————————————————————————————————————— */
    .mud-drawer {
        border-right: 0;
        background: var(--color-neutral-100);
        box-shadow: none;
    }

    .mud-drawer .mud-drawer-content {
        background: var(--color-neutral-100);
    }

    /* There is no app bar, so nothing may reserve room for one. */
    .spec-shell .mud-main-content {
        padding-top: 0;
    }

    .spec-shell .mud-drawer-fixed {
        top: 0;
        height: 100%;
    }
}