/*
 * The employer workspace — the authenticated surface.
 *
 * ═══ WHY THIS IS A FIFTH SHEET AND NOT AN EDIT TO components.css ═══════════
 *
 * `components.css` is loaded by BOTH documents. The public marketplace's look
 * was reviewed and approved in Blocks 2A and 2B, and changing a shared sheet to
 * restyle the workspace would move public pages nobody asked to move. So the
 * workspace gets its own sheet, loaded only by `layouts/base.latte`, and it
 * consumes the SAME tokens.
 *
 * `PublicShellTest` asserts the two documents share only `tokens.css` and that
 * the workspace never loads `public.css`. That still holds: this file is the
 * workspace's own, and the public shell does not load it.
 *
 * ═══ IT DEFINES NO COLOUR OF ITS OWN ═══════════════════════════════════════
 *
 * Every value below is a `var(--…)` from `tokens.css`. There is no hex, no
 * `rgb(`, no `hsl(` anywhere in this file — `SpanishExpansionTest::testNo\
 * ComponentHardCodesABrandColour()` scans for all of them with comments
 * stripped, and this sheet was added to that sweep rather than left outside it.
 *
 * ═══ AND IT ADDS NO JAVASCRIPT ═════════════════════════════════════════════
 *
 * The mobile navigation is `<details>`/`<summary>`, as on the public side. The
 * application has zero scripts and this sprint adds none.
 *
 * ═══ MOBILE-FIRST, AND NO TRUNCATION ANYWHERE ══════════════════════════════
 *
 * Every unqualified rule is the narrow-screen rule; every `@media` is
 * `min-width` and only adds. No `text-overflow`, no line clamp, no `nowrap` on
 * translated content, no fixed text heights: Spanish runs half again as long as
 * English and the layout grows rather than hiding the difference.
 */

/* ══════════════════════════════════════════════════════ the header ════════ */

/*
 * TWO ROWS, AND THE SPLIT IS THE POINT. The bar says who you are working as;
 * the strip below says what you can do. A single row of ten links is what made
 * this look like an internal CRUD tool.
 */
.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}

.ws-bar__inner,
.ws-nav__inner,
.page {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.ws-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-3);
}

.ws-brand {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-md);
    text-decoration: none;
}

/*
 * ─── THE LOGO IS SIZED BY WIDTH, NOT BY HEIGHT ────────────────────────────
 *
 * Block 2A corrected a logo that was too small to read: the mark carries a
 * tagline under the wordmark, and sizing by height crushed it. The rule there
 * is width-based and so is this one. The workspace bar is denser than the
 * marketing header, so these are a step smaller — but well clear of the size
 * that made the tagline unreadable, and the desktop step is the width at which
 * 2A measured the tagline as legible.
 */
.ws-brand__logo {
    display: block;
    width: 9rem;
    height: auto;
}

@media (min-width: 30em) {
    .ws-brand__logo {
        width: 11rem;
    }
}

@media (min-width: 48em) {
    .ws-brand__logo {
        width: 14rem;
    }
}

/*
 * "You are managing your company." Hidden on a phone, where the bar has room
 * for the mark and the controls and nothing else — it is orientation, not
 * information, and the navigation strip below already says the same thing.
 */
.ws-bar__context {
    display: none;
    margin: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

@media (min-width: 62em) {
    .ws-bar__context {
        display: block;
    }
}

.ws-bar__account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-inline-start: auto;
}

.ws-bar__link {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.ws-bar__link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.ws-locale {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.ws-locale__link {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.ws-locale__link:hover {
    background: var(--color-surface-raised);
    color: var(--color-primary);
}

/* ── the workspace strip ─────────────────────────────────────────────────── */

.ws-nav {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.ws-nav__inner {
    padding-block: var(--space-2);
}

/*
 * Both navigations are in the markup and `display` hides one at a time. Never
 * `visibility`: a hidden-but-focusable duplicate menu is a keyboard user
 * tabbing through invisible links.
 */
.ws-nav__desktop {
    display: none;
}

.ws-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-nav__link {
    display: block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--color-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-entrance),
                color var(--duration-fast) var(--ease-entrance);
}

.ws-nav__link:hover {
    background: var(--color-surface-raised);
    color: var(--color-primary);
}

.ws-menu {
    position: relative;
}

.ws-menu__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-raised);
    color: var(--color-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    list-style: none;
}

/* The default disclosure triangle, removed in both engines that draw one. */
.ws-menu__summary::-webkit-details-marker {
    display: none;
}

.ws-menu__summary::marker {
    content: "";
}

.ws-menu__bars {
    display: grid;
    gap: 3px;
}

.ws-menu__bars span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: var(--radius-sm);
    background: currentColor;
}

.ws-menu__panel {
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-md);
}

.ws-menu__list {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-menu__list a {
    display: block;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-heading);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.ws-menu__list a:hover {
    background: var(--color-surface);
}

@media (min-width: 48em) {
    .ws-nav__desktop {
        display: block;
    }

    .ws-menu {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════ accessibility ═════ */

/*
 * ─── A CLASS THAT WAS BEING USED AND HAD NEVER BEEN DEFINED ───────────────
 *
 * `visually-hidden` appears on the job list's last column header, which reads
 * "Abrir" and exists so the column of links is announced rather than nameless.
 * No stylesheet in this application defined it, so it did nothing: the word sat
 * visible above a column of buttons, and the screenshot is how it was found.
 *
 * THE RULE HIDES WITHOUT REMOVING. `display: none` and `visibility: hidden` are
 * both wrong here — each takes the text out of the accessibility tree too,
 * which deletes the very thing the markup added. Clipping to a 1px box leaves
 * the element rendered and announced while occupying no visible space.
 *
 * `white-space: nowrap` is deliberate and is the one exception to this sheet's
 * no-nowrap rule: the element is already invisible, so there is no text that
 * could be clipped, and without it a long Spanish label can force a scrollbar
 * on the page it is hidden from.
 */
.visually-hidden {
    position: absolute;
    /*
     * ─── AND IT IS PINNED, WHICH IS NOT DECORATION ────────────────────────
     *
     * The usual recipe leaves the offsets at `auto`, which places the box at
     * its STATIC position — where it would have sat in flow. The job list's
     * hidden column header sits in the last cell of a table that is 570px wide
     * inside a 360px phone, and its containing block is the viewport rather
     * than the scrolling wrapper, so a 1px invisible box landed 210px past the
     * right edge of the document and gave the whole page a horizontal
     * scrollbar. The 360px screenshot is how that was found; `overflow-x` on
     * the table wrapper cannot prevent it, because an absolutely positioned
     * descendant is not laid out inside that wrapper at all.
     *
     * Pinning the box to the origin removes the static position from the
     * equation entirely. Nothing is visible either way — this decides only
     * WHERE the invisible 1px box is, and the origin is the one place that can
     * never extend the page.
     */
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════ the page container ════ */

.page {
    padding-block: var(--space-6) var(--space-8);
}

/*
 * ─── THE PAGE HEADING SYSTEM ──────────────────────────────────────────────
 *
 * Every workspace screen opens with a title and, usually, one primary action.
 * Before this sprint each template invented its own arrangement, which is why
 * no two pages looked related. `.page-head` is the one arrangement: heading on
 * the left, actions on the right, stacked on a phone.
 */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
}

.page-head__text {
    /* A measure rather than a width: a long Spanish page title wraps to two
       lines instead of pushing the action button off the row. */
    max-width: 44ch;
}

/*
 * The action cluster. `flex-wrap` rather than a fixed row because "Publicar un
 * empleo nuevo" beside "Ver la página pública" is two long Spanish labels, and
 * on a narrow screen they must stack rather than shrink.
 */
.page-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/*
 * The subtitle inside the head is already constrained by `.page-head__text`,
 * so it does not carry the wider `--measure` the standalone lead uses.
 */
.page-head .lead {
    margin: 0;
    max-width: none;
}

.page-head h1,
.page h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-heading);
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-heading);
    text-wrap: balance;
}

@media (min-width: 48em) {
    .page-head h1,
    .page h1 {
        font-size: var(--font-size-3xl);
    }
}

.page h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-heading);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
}

.page h3 {
    margin: 0 0 var(--space-2);
    color: var(--color-heading);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-heading);
}

.page .lead {
    max-width: var(--measure);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-body);
}

/* ══════════════════════════════════════════════════════════ surfaces ══════ */

/*
 * The card is the workspace's unit of content, and it now matches the public
 * marketplace's: white on the soft-blue page, generous radius, one hairline
 * border and a shadow tinted with the brand's own deep blue rather than grey.
 */
body {
    background: var(--color-surface);
}

.card,
.panel {
    /*
     * The margin is on the surface itself rather than on a wrapper, because
     * most workspace screens are a bare sequence of sections with no wrapper to
     * put a `gap` on — the verification screen stacks two `<div class="panel">`
     * straight into `<main>`, and without this they met with no seam at all.
     */
    margin-block: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 48em) {
    .card,
    .panel {
        padding: var(--space-6);
    }
}

.card > :first-child,
.panel > :first-child {
    margin-block-start: 0;
}

.card > :last-child,
.panel > :last-child {
    margin-block-end: 0;
}

/*
 * ─── `.panel` IS A SECTION, NOT A COLUMN ──────────────────────────────────
 *
 * Before this sprint `.panel` was a 30rem column, because the only pages using
 * it were sign-in and registration. That is no longer true: billing stacks four
 * `.panel` sections down the page and verification stacks four more, and giving
 * those a 32rem cap left each screen as a narrow strip of boxes hugging the
 * left edge of a wide page — which is what the first screenshot of the billing
 * screen showed.
 *
 * So the narrow measure moved to the pages that actually are one form. `.panel`
 * itself now just means "a section with the card's surface".
 */
.panel {
    max-width: none;
}

/*
 * ─── THE SIGN-IN AND REGISTRATION COLUMN ──────────────────────────────────
 *
 * Sign in, register, change password, confirm your address. A login form spread
 * across 60rem makes the eye travel an empty page to reach a field, so these
 * keep the narrow measure — and, being the whole page, are centred in it.
 */
.panel--auth {
    max-width: 32rem;
    margin-inline: auto;
    margin-block-start: var(--space-6);
}

@media (min-width: 48em) {
    .panel--auth {
        margin-block-start: var(--space-8);
    }
}

/* A stack of cards, which is what most workspace screens are. */
.stack {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.stack > li {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════ buttons ═══════ */

/*
 * One button system, matching the public `.pbutton` proportions so a client
 * moving from the homepage into the workspace sees the same control.
 *
 * `min-height` rather than a fixed height: the box has a floor so a row of
 * buttons lines up, and it still grows for a long Spanish label rather than
 * clipping one.
 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-surface-raised);
    color: var(--color-heading);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-heading);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-entrance),
                box-shadow var(--duration-fast) var(--ease-entrance),
                background var(--duration-fast) var(--ease-entrance);
}

.button {
    border-color: var(--color-border-strong);
}

.button:hover {
    background: var(--color-surface);
}

/*
 * THE PRIMARY ACTION IS OBVIOUS. Filled, brand blue, lifted. Every workspace
 * screen should have exactly one, and the secondary actions beside it are
 * outlined rather than filled so the eye is never asked to choose between two
 * equally loud controls.
 */
.button--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: var(--shadow-md);
}

.button--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(-1px);
}

.button--secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface-raised);
    color: var(--color-heading);
}

/*
 * ─── DESTRUCTIVE ACTIONS DO NOT COMPETE ───────────────────────────────────
 *
 * Close, remove and cancel are quiet by default and only reveal their colour
 * on hover. A red button sitting beside "Publish" pulls the eye toward the one
 * control the employer least wants to hit by accident.
 */
.button--danger {
    border-color: var(--color-border-strong);
    background: var(--color-surface-raised);
    color: var(--color-danger);
}

.button--danger:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
}

.button--compact {
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

.button--block {
    display: flex;
    width: 100%;
}

/*
 * A form submit that must look like a link — the logout control in the header,
 * and the quiet secondary actions inside lifecycle forms.
 */
.button--link {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.button--link:hover {
    background: none;
    color: var(--color-primary);
    text-decoration: underline;
    transform: none;
}

.button:disabled,
.button[aria-disabled="true"] {
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/*
 * A row of actions. Wraps rather than scrolls — a row that refuses to wrap is
 * how a page gains horizontal overflow at 320px, which this sprint asserts is
 * exactly zero.
 */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/*
 * ─── AN ACTION IS A CONTROL PLUS THE SENTENCE THAT EXPLAINS IT ────────────
 *
 * The job editor's lifecycle panel offers up to six of these, and each one is a
 * form and a line of help. Before this sprint both were direct children of the
 * flex row above, so the row laid them out as peers: the help text for "pause"
 * sat to the right of the pause button, and the close form — which carries a
 * reason select as well as a button — was pushed into a column of its own
 * beside it. The screenshot of that is what prompted this rule.
 *
 * So a panel of actions stacks, and each action keeps its own explanation
 * directly underneath the control it explains.
 */
.actions:has(.action) {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
}

.action {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.action .note {
    margin: 0;
}

/*
 * The close form's reason select sits above its button rather than beside it,
 * because "why are you closing this?" is a question the employer answers before
 * pressing the control, not a setting alongside it.
 */
.action form {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    width: 100%;
    max-width: 26rem;
}

.action form .field {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════ forms ═════════ */

/*
 * ─── THE FORM IS THE DEMO ─────────────────────────────────────────────────
 *
 * Employer forms are what a client watches for most of a walkthrough, so they
 * get the most attention here: a comfortable measure, real vertical rhythm,
 * inputs with a floor height, hints that read as help rather than as fine
 * print, and errors that are impossible to miss without being alarming.
 */
.field {
    display: grid;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
    max-width: 38rem;
}

.field__label {
    color: var(--color-heading);
    font-weight: var(--font-weight-medium);
}

.field__input {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text);
    font-family: inherit;
    /* 1rem, never smaller: iOS zooms the viewport when a focused input is
       under 16px, which `SpanishExpansionTest` asserts against. */
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
}

.field__input:hover {
    border-color: var(--color-primary);
}

textarea.field__input {
    min-height: 9rem;
    resize: vertical;
}

select.field__input {
    /* A native select, deliberately. A styled one needs script to open, and
       the native control is the accessible one on a phone. */
    padding-block: var(--space-2);
}

.field__hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.field__error {
    display: flex;
    gap: var(--space-2);
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
}

.field--invalid .field__input {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
}

/* A checkbox or radio with its label beside it rather than above it. */
.field--inline {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
}

.field--inline .field__input {
    width: auto;
    min-height: 0;
    margin-block-start: 0.2rem;
    /* A named shape, not a text box: see SHAPE_SELECTORS in
       SpanishExpansionTest. */
    flex: none;
}

.field--inline .field__label {
    font-weight: var(--font-weight-normal);
}

/*
 * ─── SECTIONS TURN A LONG FORM INTO A WORKFLOW ────────────────────────────
 *
 * The job editor is the longest form in the product. Grouped under headed
 * sections it reads as a sequence of decisions; ungrouped it reads as a
 * database table with labels.
 */
.form-section {
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
}

.form-section:last-of-type {
    margin-block-end: var(--space-5);
    padding-block-end: 0;
    border-block-end: 0;
}

.form-section__title {
    margin: 0 0 var(--space-1);
    color: var(--color-heading);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-heading);
}

.form-section__hint {
    margin: 0 0 var(--space-5);
    max-width: var(--measure);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.fieldset-plain {
    margin: 0;
    padding: 0;
    border: 0;
}

/*
 * ─── A GROUPED FIELDSET LOOKS LIKE THIS PRODUCT, NOT LIKE 1998 ────────────
 *
 * The job editor groups the structured fields inside a real `<fieldset>` with a
 * real `<legend>`, which is correct markup and the right thing for a screen
 * reader — and, left unstyled, renders as the browser's default hairline box
 * with the legend notched into it. That default is the single most dated thing
 * on the editor screen.
 *
 * The element and the legend both stay. Only their appearance changes.
 */
.page fieldset:not(.fieldset-plain) {
    margin-block: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.page fieldset:not(.fieldset-plain) > legend {
    padding-inline: var(--space-2);
    color: var(--color-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/*
 * ─── THE CHECKBOX AND RADIO ROW ───────────────────────────────────────────
 *
 * `.field--inline` is a control and its label on one line. The control itself
 * is given a size because a 13px default checkbox beside 16px text is a target
 * nobody can hit on a phone, and `accent-color` tints it with the brand rather
 * than leaving one blue-grey control on an otherwise branded form.
 */
.field--inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-3);
    max-width: var(--measure);
}

.field--inline input[type="checkbox"],
.field--inline input[type="radio"] {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.field--inline label {
    margin: 0;
    color: var(--color-text);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
    cursor: pointer;
}

/*
 * Two fields side by side above 40em — a city and a state, a minimum and a
 * maximum. One column below it, because two 150px inputs are worse than two
 * full-width ones.
 */
.field-row {
    display: grid;
    gap: 0 var(--space-4);
    max-width: 38rem;
}

@media (min-width: 40em) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }

    .field-row .field {
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════ notices ═══════════ */

/*
 * ─── WHY `.note` DID NOT BECOME A BOX ─────────────────────────────────────
 *
 * `.note` appears eighty-three times across the workspace templates, which
 * makes it the most-used class in the product and the obvious lever: turn it
 * into a tinted panel and every screen gains structure in one line.
 *
 * That was this sprint's first attempt, and it was wrong twice over.
 *
 * FIRST, HALF OF THE USES ARE INLINE. `<span class="note">` sits inside table
 * cells, inside list items and mid-sentence beside a member's name — a padded,
 * bordered, rounded box around three words in the middle of a row is not a
 * callout, it is a rendering bug.
 *
 * SECOND, MOST OF THE BLOCK USES ARE NOT CALLOUTS EITHER. The job editor's
 * lifecycle panel states the published date, the expiry date and the last
 * confirmation as three consecutive `<p class="note">`. Boxing each one turns a
 * short list of facts into a stack of three alarms, and a page where everything
 * is emphasised has emphasised nothing.
 *
 * So `.note` stays quiet and stays inline-safe. The panel treatment belongs to
 * the modifiers, which mark the notes that really are warnings, and to
 * `.callout`, which a template opts into deliberately.
 */
.note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

p.note,
div.note {
    margin-block: var(--space-3);
    max-width: var(--measure);
}

/*
 * The opt-in panel. `.callout` is what `.note` was briefly made into, available
 * where a template means it: a disclosure before a payment, a read-only
 * explanation, an empty-state hint.
 */
.callout,
.note--warning,
.note--danger {
    margin-block: var(--space-4);
    padding: var(--space-4);
    max-width: var(--measure);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.note--warning {
    border-inline-start-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
}

.note--danger {
    border-inline-start-color: var(--color-danger);
    background: var(--color-danger-surface);
}

.flash-list {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.flash {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
    line-height: var(--line-height-body);
}

.flash--success {
    border-inline-start-color: var(--color-success);
    background: var(--color-success-surface);
    color: var(--color-success);
}

.flash--error {
    border-inline-start-color: var(--color-danger);
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.flash--notice {
    border-inline-start-color: var(--color-primary);
    background: var(--color-notice-surface);
}

/* ══════════════════════════════════════════════════════════ badges ════════ */

/*
 * ─── A BADGE IS A FACT, NEVER A COMPLIMENT ────────────────────────────────
 *
 * The verified badge is the only one that carries brand colour, and it means
 * "this employer completed verification" — a signal, not a guarantee, and
 * nothing in these rules upgrades it.
 *
 * A PROMOTED PLACEMENT IS DELIBERATELY THE QUIETEST BADGE IN THE SET. The
 * employer paid for a position in a list, which is a fact about the list and
 * not a judgement about the job. `UrgencyBoundaryTest` guards the wording; this
 * guards the visual weight, which is the other half of the same promise.
 */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-heading);
}

.badge--verified {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-brand-deep);
}

.badge--success {
    border-color: var(--color-success);
    background: var(--color-success-surface);
    color: var(--color-success);
}

.badge--warning {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

.badge--muted {
    border-color: var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════ tables and lists ══════ */

/*
 * ─── A TABLE AT DESKTOP, CARDS ON A PHONE ─────────────────────────────────
 *
 * The job list is genuinely tabular — a title, a status, a date, some actions —
 * and a table is the right control for it on a wide screen. At 320px a table
 * is not, and the answer is NOT horizontal scrolling of the page: `.table-scroll`
 * confines the overflow to the table itself so the page never scrolls sideways.
 */
.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table th,
.table td {
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
}

.table thead th {
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

.table tbody tr:last-child th,
.table tbody tr:last-child td {
    border-block-end: 0;
}

.table tbody tr:hover {
    background: var(--color-surface);
}

.inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ══════════════════════════════════════════════════════ empty states ══════ */

/*
 * An honest empty state is a feature. The alternative a young marketplace
 * reaches for — seeded example postings, invented statistics — is inventing
 * evidence, and it is the thing a client's own customers would discover first
 * and trust least. So these are attractive and they say nothing untrue.
 */
.empty {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    padding: var(--space-7) var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: var(--color-surface-raised);
    text-align: start;
}

.empty__title {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.empty__body {
    margin: 0;
    max-width: var(--measure);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
}

/* ══════════════════════════════════════════════ company identity ══════════ */

.company-name {
    margin: 0;
    color: var(--color-heading);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-heading);
}

/*
 * A fixed box with `object-fit: contain`, so a wide logo and a tall one both
 * fit without being stretched and the surrounding layout does not move
 * depending on which the employer uploaded. A named shape rather than a text
 * container — see SHAPE_SELECTORS in SpanishExpansionTest.
 */
.company-logo {
    display: block;
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    object-fit: contain;
}

.trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

/* ── the verification checklist ──────────────────────────────────────────── */

.checklist {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    line-height: var(--line-height-body);
}

.checklist__state {
    flex: none;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
}

.checklist__item--done {
    border-color: var(--color-success);
    background: var(--color-success-surface);
}

.checklist__item--done .checklist__state {
    color: var(--color-success);
}

/* ══════════════════════════════════════════════════════════ footer ════════ */

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.site-footer__inner {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding: var(--space-5) var(--container-padding);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ══════════════════════════════════════════════════ reduced motion ════════ */

/*
 * `base.css` already neutralises transitions under the preference. This is the
 * belt: it removes the hover LIFT as well, so a reduced-motion reader gets a
 * button that changes colour and does not move.
 */
@media (prefers-reduced-motion: reduce) {
    .button--primary:hover {
        transform: none;
    }
}