/* Fonts. Roboto (400-600) and Roboto Mono (400-500), served from assets/fonts instead of
 * Google's font host (WEB-7, 2026-10-10): no render-blocking request to another host, no visitor
 * address sent to Google, and the 375px employer header gets the width it is tuned to even when a
 * network blocks Google. The files are Google Fonts' own variable woff2 (Roboto v51, Roboto Mono
 * v31) fetched on 2026-10-10, so the page looks as it did; both families are SIL OFL 1.1 (the
 * licence texts sit beside the files). One file per unicode-range subset, loaded only when a page
 * uses a character in it: latin and latin-ext for the text, math and symbols for the few glyphs
 * the site writes (the arrow, >=, the check mark). Other scripts (Cyrillic, Greek, Vietnamese) are
 * not shipped: nothing on the site is written in them, and a visitor's own font draws them.
 * tools/test-fonts.php holds this block to the files and the weights the stylesheets ask for. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/roboto-math.woff2') format('woff2');
    unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/roboto-symbols.woff2') format('woff2');
    unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AE, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F8D0-1F8D8, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FAC6, U+1FAC8, U+1FACC-1FADD, U+1FADF-1FAEB, U+1FAEF-1FAFA, U+1FB00-1FBFF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/roboto-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/roboto-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Surfaces */
    --bg-base:        #F3F4F5;
    --bg-surface:     #FFFFFF;
    --bg-raised:      rgba(11, 13, 15, 0.06);
    --bg-sunken:      #EBEDEF;
    --hover:          rgba(11, 13, 15, 0.04);

    /* Ink — opacity steps on the ground's ink colour, never a second grey. */
    --text-main:      rgba(11, 13, 15, 0.92);
    --text-secondary: rgba(11, 13, 15, 0.74);
    --text-muted:     rgba(11, 13, 15, 0.58);
    --text-inverse:   #FFFFFF;

    /* Ember action colour. Light-theme actions darken it so it holds 4.5:1
     * with its label; never put white text on the dark-theme ember. */
    --accent:         #B85D1C;
    --accent-hover:   #9C4D16;
    --accent-bright:  #B85D1C;
    --accent-wash:    rgba(184, 93, 28, 0.09);
    --accent-row:     rgba(11, 13, 15, 0.06);
    --on-accent:      #FFFFFF;
    /* Text step of the ember: --accent is the fill; this is the same action
     * hue at the dark step WCAG needs on light grounds (4.13 < 4.5 otherwise). */
    --accent-text:    #9C4D16;

    /* Employer band stays a distinct sunken surface in both themes. */
    --band-bg:        #EBEDEF;
    --band-ink:       rgba(11, 13, 15, 0.92);
    --band-ink-dim:   rgba(11, 13, 15, 0.58);

    /* Chrome (top bars, the job-page apply panel): 0.86 fill + 18px blur. */
    --chrome-bg:      rgba(255, 255, 255, 0.86);
    --chrome-ink:     rgba(11, 13, 15, 0.92);
    --chrome-muted:   rgba(11, 13, 15, 0.58);
    --chrome-border:  rgba(11, 13, 15, 0.10);

    /* Lines. `border` is decorative; `border-strong` bounds controls and is
     * held to 3:1 by the validator. */
    --border:         rgba(11, 13, 15, 0.10);
    --border-strong:  rgba(11, 13, 15, 0.58);
    --focus-ring:     #B85D1C;

    /* Semantic — muted, never neon. */
    --success:        rgba(11, 13, 15, 0.92);
    --warning:        rgba(11, 13, 15, 0.74);
    --danger:         #C8364A;
    /* Crimson as text: the fill/border value already clears 4.5 on light. */
    --danger-text:    #C8364A;
    --success-wash:   rgba(11, 13, 15, 0.06);
    --warning-wash:   rgba(11, 13, 15, 0.06);
    --danger-wash:    rgba(200, 54, 74, 0.09);
    --danger-border:  rgba(200, 54, 74, 0.45);

    /* Application-status lightness ramp: brighter as an applicant moves
     * forward, ember on hire, superseded greys out. */
    --st-pending:     #A3A8AB;
    --st-reviewed:    rgba(11, 13, 15, 0.58);
    --st-shortlisted: rgba(11, 13, 15, 0.92);
    --st-hired:       #B85D1C;
    --st-rejected:    #D5D8DA;

    /* Decay = "gone stale"; superseded = "no longer in play". */
    --decay:          #A3A8AB;
    --superseded:     #D5D8DA;

    /* Console surfaces (Web Admin v4 artboard; README §4 has no token for these).
     * elevated: drawers, menus, bulk bars. field: form controls. border-mid:
     * secondary buttons and chips (between --border and --border-strong).
     * scrim: behind an overlaid drawer. shadow-panel: floating panels. */
    --bg-elevated:    #FFFFFF;
    --bg-field:       #FFFFFF;
    --border-mid:     rgba(11, 13, 15, 0.20);
    --scrim:          rgba(11, 13, 15, 0.42);
    --shadow-panel:   0 16px 40px -16px rgba(92, 48, 14, 0.28);

    /* Employer pigments — identity hue per company (light values). */
    --pigment-0: #9C703F; --pigment-1: #877838; --pigment-2: #647C2E;
    --pigment-3: #3D8A52; --pigment-4: #268472; --pigment-5: #238893;
    --pigment-6: #3F7EA0; --pigment-7: #5A7BB3;

    /* Type — Roboto everywhere; Roboto Mono for figures, timestamps, meta. */
    --font-sans:  'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:  'Roboto Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Scale — only 12/13/14/16/20/28 exist in the system. */
    --fs-xs:   0.75rem;    /* 12 — badges, table meta */
    --fs-sm:   0.8125rem;  /* 13 — labels, secondary */
    --fs-base: 0.875rem;   /* 14 — UI default */
    --fs-md:   0.875rem;   /* 14 — prose */
    --fs-title: 1rem;      /* 16 — row/section titles */
    --fs-lg:   1.25rem;    /* 20 — page heading */
    --fs-xl:   1.25rem;    /* 20 — job title */
    --fs-2xl:  1.75rem;    /* 28 — display (job page only) */

    --lh-tight: 1.25;
    --lh-snug:  1.4;
    --lh-body:  1.6;

    /* 4px baseline */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

    /* Geometry — 12/16/20 plus small 6 and pill. */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 100px;

    /* Elevation. Light keeps the warm-tinted shadows; --shadow-lg, for
     * floating panels, is exactly the v4 README §4 value (one layer). */
    --shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.08);
    --shadow-sm: 0 2px 5px rgba(60, 40, 20, 0.10),
                 0 1px 2px rgba(60, 40, 20, 0.06);
    --shadow-md: 0 6px 18px rgba(60, 40, 20, 0.12),
                 0 2px 6px  rgba(60, 40, 20, 0.07);
    --shadow-lg: 0 18px 38px rgba(60, 40, 20, 0.14);

    --measure: 68ch;         /* prose line length */
    --container: 1180px;
    --container-narrow: 720px;
    /* Header height. Read by the sticky rail, by scroll-margin on anchor
     * targets, and by the header itself — one value, three consumers. */
    --header-h: 64px;

    /* Motion — 150-250ms. Users are in a task. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 120ms;
    --t-base: 180ms;

    /* Semantic z-index scale. No 9999. */
    --z-sticky: 100;
    --z-drawer-backdrop: 200;
    --z-drawer: 210;
    --z-modal-backdrop: 300;
    --z-modal: 310;
    --z-toast: 400;
}
[data-theme="dark"] {
    --bg-base:        #0B0D0F;
    --bg-surface:     #15181B;
    --bg-raised:      rgba(255, 255, 255, 0.06);
    --bg-sunken:      #0E1113;
    --hover:          rgba(255, 255, 255, 0.04);

    --text-main:      rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.74);
    --text-muted:     rgba(255, 255, 255, 0.58);
    --text-inverse:   #0B0D0F;

    --accent:         #D77026;
    --accent-hover:   #E8894A;
    --accent-bright:  #D77026;
    --accent-wash:    rgba(215, 112, 38, 0.09);
    --accent-row:     rgba(255, 255, 255, 0.06);
    --on-accent:      #0B0D0F;
    /* Dark ground is deep enough that the fill value doubles as text. */
    --accent-text:    #D77026;

    --band-bg:        #0E1113;
    --band-ink:       rgba(255, 255, 255, 0.92);
    --band-ink-dim:   rgba(255, 255, 255, 0.58);

    --chrome-bg:      rgba(14, 17, 19, 0.86);
    --chrome-ink:     rgba(255, 255, 255, 0.92);
    --chrome-muted:   rgba(255, 255, 255, 0.58);
    --chrome-border:  rgba(255, 255, 255, 0.10);

    --border:         rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.58);
    --focus-ring:     #D77026;

    --success:        rgba(255, 255, 255, 0.92);
    --warning:        rgba(255, 255, 255, 0.74);
    --danger:         #D84155;
    /* #D84155 on the dark surface is 4.08 — under AA for text. The text step
     * lifts the same crimson until it clears; fills and borders keep --danger. */
    --danger-text:    #E86A7C;
    --success-wash:   rgba(255, 255, 255, 0.06);
    --warning-wash:   rgba(255, 255, 255, 0.06);
    --danger-wash:    rgba(216, 65, 85, 0.09);
    --danger-border:  rgba(216, 65, 85, 0.45);

    --st-pending:     #5C6266;
    --st-reviewed:    rgba(255, 255, 255, 0.58);
    --st-shortlisted: rgba(255, 255, 255, 0.92);
    --st-hired:       #D77026;
    --st-rejected:    #33383C;

    --decay:          #5C6266;
    --superseded:     #33383C;

    --bg-elevated:    #1B1F23;
    --bg-field:       #0F1214;
    --border-mid:     rgba(255, 255, 255, 0.18);
    --scrim:          rgba(0, 0, 0, 0.62);
    --shadow-panel:   0 16px 40px -12px rgba(0, 0, 0, 0.6);

    --pigment-0: #C19361; --pigment-1: #B09F5C; --pigment-2: #89A151;
    --pigment-3: #60AE74; --pigment-4: #46A794; --pigment-5: #44ACB8;
    --pigment-6: #62A1C3; --pigment-7: #7F9ED3;

    /* Dark needs genuinely black shadow and much more of it. */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.50),
                 0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55),
                 0 2px 5px  rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 18px 38px rgba(0, 0, 0, 0.45),
                 0 5px 10px  rgba(0, 0, 0, 0.45);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
 td, th {
    overflow-wrap: anywhere;
}
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    background-color: var(--bg-base);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* No `overflow-x: hidden`. It converts every overflow into permanent
     * clipping instead of a scrollbar, which is how the wide dashboard tables
     * became unreachable on phones rather than merely awkward. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
img, svg { max-width: 100%; }
svg { flex-shrink: 0; }
h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-tight);
    color: var(--text-main);
    text-wrap: balance;
    font-weight: 600;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4, h5, h6 { font-size: var(--fs-base); }
p { text-wrap: pretty; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
table, time { font-variant-numeric: tabular-nums; }
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent-wash); color: var(--text-main); }
::placeholder { color: var(--text-muted); opacity: 1; }
:root {
    /* Checkboxes, radios, progress and range controls. */
    accent-color: var(--accent-text);
    /* Firefox scrollbars. */
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
}
input, textarea, select, [contenteditable] { caret-color: var(--accent-text); }

/* ==========================================================================
   Tap, focus and native controls (design_handoff_revamp README §0/§5,
   code/style-additions.css). Uses only tokens defined above.

   Fixes the blue flash on tap and the blue/light native controls.
   ========================================================================== */

/* 1. No browser tap highlight. Mobile Chrome/Safari paint a blue or grey box
      on every tapped link, button and row. Pressed feedback comes from the
      existing .btn:active nudge and the row hover/active states below. */
* { -webkit-tap-highlight-color: transparent; }

/* 2. Tell the browser which theme is showing, so native selects, date
      pickers, scrollbars, autofill and form controls render in the right
      scheme instead of the default light/blue. */
:root              { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* 3. Pressed state for anything tappable that isn't a .btn. It replaces the
      highlight we removed in (1) with the product's own ink step. */
button:not(.btn):active,
[role="button"]:active,
.reg-row-hit:active { background-color: var(--hover); }
.btn:active:not(:disabled) { background-image: linear-gradient(var(--hover), var(--hover)); }

/* 4. Autofill: Chrome paints a pale blue/yellow fill and dark text on
      autofilled fields, which is unreadable on the dark ground. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-sunken) inset;
    box-shadow: 0 0 0 1000px var(--bg-sunken) inset;
    -webkit-text-fill-color: var(--text-main);
    caret-color: var(--accent-text);
    transition: background-color 9999s ease-out 0s;
}

/* 5. Native <select> dropdown list and <option> rows follow the theme. */
select, option { background-color: var(--bg-surface); color: var(--text-main); }

/* 6. Date/time picker icons. `color-scheme: dark` (2, above) already draws
      them light on the dark theme; the invert() this rule used to add turned
      them back to dark-on-dark (seen on the v4 console, 2026-09-26). Only the
      opacity step stays, matching the other secondary icons. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: 0.74; }

/* 7. Search inputs: the WebKit cancel "x" is blue in Safari. */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* 8. Focus: the existing `:focus-visible` rule (ember) stays. Belt and
      braces for browsers that paint a default ring on mouse click: */
:focus:not(:focus-visible) { outline: none; }

/* 9. Firefox paints a dotted inner focus border on buttons. */
button::-moz-focus-inner { border: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border: 3px solid var(--bg-base);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }}
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* The sign-up forms' honeypot (lib/sign-in.php JSB_SIGNUP_TRAP): off-screen and
   aria-hidden, not display:none, which a script that reads styles would skip. */
.trap-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip-link {
    position: absolute;
    left: var(--sp-2);
    top: -100px;
    z-index: var(--z-toast);
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-2); color: var(--on-accent); }
.text-muted { color: var(--text-muted); }
/* Tap targets (README §4): "at least 44×44px everywhere. The visible mark may be
 * smaller than its target." A control drawn smaller than 44px keeps a 44px target:
 * an invisible ::after centred on it, at least 44px each way. Mark it .b-hit, or
 * list it here where the markup is drawn by script; the two lists are one list.
 * Not for links stacked closer than 44px, whose targets would overlap: those get
 * a 44px box (.footer-col a, .link-list a). Detector: tests/tests/tap-targets.spec.ts. */
:where(.b-hit, .bh-logo, .jc-title, .bf-inner a, .acct-btn, .auth-switch-btn, .pagination button, #contactEmail a,
       .c-link, .c-btn--sm, .c-seg button, .c-fp-headline, .td-headline, .td-quick, .c-saved-apply, .c-token-x, .c-active-chip, .c-active-clear) { position: relative; }
:where(.b-hit, .bh-logo, .jc-title, .bf-inner a, .acct-btn, .auth-switch-btn, .pagination button, #contactEmail a,
       .c-link, .c-btn--sm, .c-seg button, .c-fp-headline, .td-headline, .td-quick, .c-saved-apply, .c-token-x, .c-active-chip, .c-active-clear)::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
.site-main {
    flex: 1 0 auto;
    width: 100%;
}
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}
.container-narrow { max-width: var(--container-narrow); }
.job-detail-content { max-width: var(--measure); }
#jobContent > * { max-width: var(--measure); }
.job-detail-content > * + * { margin-top: var(--sp-4); }

.demo-banner, .api-down-banner {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.demo-banner { background: var(--warning-wash); color: var(--text-main); }
.api-down-banner { background: var(--danger-wash); color: var(--text-main); }
.demo-banner a, .api-down-banner a { color: var(--accent-text); font-weight: 500; }
/* Links stacked in a list (README §4 "Tap targets"): each a 44px box, so the
 * list's gap goes, and the list gives back the box's room above its first line
 * and below its last ((44px - the 22px line) / 2), so the text keeps its place. */
.link-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.search-bar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out);
}
.search-bar:hover { box-shadow: var(--shadow-lg); }
.search-bar:focus-within {
    border-color: var(--accent-text);
    box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-wash);
}
.search-field {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--sp-2) var(--sp-4);
    min-width: 0;
}
.search-field + .search-field { border-left: 1px solid var(--border); }
.search-field label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
}
/* The whole field is its input's target (README §4, 44px): the label, under the
 * input, fills the field, so a tap on the field's padding focuses the input. */
.search-field { position: relative; z-index: 0; }
.search-field label::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.search-field input {
    width: 100%;
    padding: 0;
    font: inherit;
    color: var(--text-main);
    background: transparent;
    border: 0;
    border-radius: 0;
}
.search-field input:focus-visible { outline: none; }
.search-bar .btn {
    border-radius: 0;
    border: 0;
    padding-inline: var(--sp-6);
    flex-shrink: 0;
}


.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-main);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.chip:hover { background: var(--bg-sunken); border-color: var(--border-strong); }
.chip svg { color: var(--text-muted); }
.chip:hover svg { color: var(--text-main); }
.section-title {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: 600;
}
.result-count { color: var(--text-muted); font-size: var(--fs-sm); }
.job-list { display: flex; flex-direction: column; gap: var(--sp-3); }


/* 36px buttons 8px apart: each one's 44px target ("Tap targets" above) meets the next's. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    justify-content: center;
    padding: var(--sp-5) 0;
}
.pagination:empty { display: none; }
.pagination button {
    min-width: 36px;
    min-height: 36px;
    padding: 0 var(--sp-2);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
}
.pagination button:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-main); }
.pagination button.active {
    background: var(--accent);
    border-color: var(--accent-text);
    color: var(--on-accent);
    font-weight: 600;
}
.pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
.pagination .dots { color: var(--text-muted); padding: 0 var(--sp-1); }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0 var(--sp-4);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out),
                box-shadow var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
/* 6.7 — the three button variants. Flat: no shadows on any of them. */
.btn-primary {
    padding: 0 20px;
    font-size: var(--fs-base);
    font-weight: 600;
    background: var(--accent);
    color: var(--on-accent);
}
.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    color: var(--on-accent);
}
.btn-outline {
    background: transparent;
    border-color: var(--border);
    color: var(--text-main);
}
.btn-outline:hover:not(:disabled) {
    background: var(--hover);
    color: var(--text-main);
}
 .input {
    width: 100%;
    min-height: 40px;
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-size: var(--fs-base);
    color: var(--text-main);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--t-fast) var(--ease-out);
}
 .input:hover { border-color: var(--text-muted); }
 .input:disabled { background: var(--bg-sunken); color: var(--text-muted); cursor: not-allowed; }
.form-hint {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: var(--sp-1);
    max-width: var(--measure);
}
td a {
    display: inline-block;
    min-height: 24px;
    padding-block: 3px;
}
fieldset { border: none; }
legend { font-weight: 600; margin-bottom: var(--sp-2); }
.card, .panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-4);
}
.page-header {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
}
.page-header h1 { font-family: var(--font-serif); letter-spacing: -0.01em; }
.page-header p { color: var(--text-secondary); margin-top: var(--sp-2); max-width: var(--measure); }
.page-header.container-narrow { max-width: var(--container-narrow); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
thead th {
    position: sticky;
    top: 0;
    text-align: left;
    padding: var(--sp-3);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
td { padding: var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text-main); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--bg-raised); }
.toast-container {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: min(380px, calc(100vw - var(--sp-6)));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-left-width: 1px;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-main);
}
@media (prefers-reduced-motion: no-preference) {.toast { animation: toast-in var(--t-base) var(--ease-out) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger-text); }
.toast.warning { border-color: var(--warning); }
.toast-label { font-weight: 600; }
.toast.success .toast-label { color: var(--success); }
.toast.error .toast-label { color: var(--danger-text); }
.toast.warning .toast-label { color: var(--warning); }
.toast-close {
    margin-left: auto;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--fs-md);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.toast-close:hover { background: var(--bg-raised); color: var(--text-main); }
.skeleton-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.skeleton {
    background: var(--bg-raised);
    border-radius: var(--radius-sm);
    height: 0.75rem;
}
.skeleton-block { height: 40px; width: 40px; }
.skeleton-title { height: 1.1rem; width: 45%; margin-bottom: var(--sp-2); }
.skeleton-line { width: 70%; margin-bottom: var(--sp-2); }
.skeleton-line-short { width: 30%; }
@media (prefers-reduced-motion: no-preference) {.skeleton { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }}
.empty-state {
    text-align: center;
    padding: var(--sp-7) var(--sp-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.empty-state h2, .empty-state h3 { font-family: var(--font-serif); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.empty-state p { color: var(--text-secondary); max-width: 48ch; margin-inline: auto; }
.empty-state .btn { margin-top: var(--sp-4); }
.empty-state-icon { color: var(--text-muted); margin-bottom: var(--sp-3); }
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    background: oklch(0 0 0 / 0.5);
    padding: var(--sp-4);
    overflow-y: auto;
}
.modal-overlay.active { display: grid; place-items: center; }
.modal {
    position: relative;
    z-index: var(--z-modal);
    width: 100%;
    max-width: 560px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    max-height: calc(100vh - var(--sp-7));
    overflow-y: auto;
}
/* The wrong-door box (Site Map §2): the account belongs at the other door. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    text-decoration: none;
}
.back-link:hover { color: var(--accent-text); text-decoration: underline; }
.job-detail-content { font-size: var(--fs-md); max-width: var(--measure); }
.job-detail-content h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    margin: var(--sp-6) 0 var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.job-detail-content p, .job-detail-content li { color: var(--text-main); line-height: var(--lh-body); }
.job-detail-content ul, .job-detail-content ol { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
/* A list of links alone (about.html): 44px boxes, as .footer-col above. */
.job-detail-content .link-list { gap: 0; margin-block: calc(var(--sp-2) - 11px) -11px; }

@media (max-width: 620px) {.search-bar { flex-direction: column; align-items: stretch; }
 .input, .search-field input {
        font-size: 16px;
    }
.search-field + .search-field {
        border-left: 0;
        border-top: 1px solid var(--border);
    }
.search-field { flex: 0 0 auto; }
.search-bar .btn { width: 100%; }
.modal { padding: var(--sp-4); }}
.search-bar {
    border-color: var(--text-main);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}
.search-bar .btn { padding-inline: var(--sp-7); font-weight: 600; }
.section-title { font-size: var(--fs-xl); }
.job-list { gap: var(--sp-2); }
.page-header { padding-top: var(--sp-7); padding-bottom: var(--sp-3); }
.job-detail-content {
    max-width: none;
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
}
.job-detail-content > * { max-width: var(--measure); }
.job-detail-content h2 { margin-top: var(--sp-5); }
#applyPanel { border-top-color: var(--border); }
#applyPanel .section-title {
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--accent);
}
#applyPanel .section-title { font-size: var(--fs-xl); }
.card, .panel {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.panel-header { padding-bottom: var(--sp-4); }
 .input { border-radius: var(--radius-md); }
@media (max-width: 620px) {.job-detail-content { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.card, .panel {
        border-radius: var(--radius-md);
    }}
.btn { min-height: 44px; }
.page-header h1 {
    font-size: clamp(2rem, 1.7rem + 1.25vw, 3rem);
    line-height: 1.08;
}
.page-header h1::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 2px;
    margin-top: var(--sp-3);
    background: var(--accent);
}
.page-header p {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
}
.container-narrow > .job-detail-content {
    margin-bottom: var(--sp-8);
    padding: clamp(var(--sp-5), 4vw, var(--sp-8));
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.container-narrow > .panel + .job-detail-content { margin-top: var(--sp-5); }

.container-narrow > .job-detail-content h2 {
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) {/* Phones keep the looser footer rhythm they had: 44px boxes 8px apart. */
.page-header {
        padding-top: var(--sp-6);
        padding-bottom: var(--sp-4);
    }
.page-header p { font-size: var(--fs-base); }
.container-narrow > .job-detail-content {
        padding: var(--sp-5);
        border-radius: var(--radius-md);
    }
}
@media print {.bh, .bf, .toast-container, .demo-banner, .api-down-banner, .pagination { display: none !important; }
body { background: #fff; color: #000; }}
/* 1b job page: "What you will do" bullets and the lighter "More from" rows. */


.console {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 56px;
    padding: 0 6px 0 var(--sp-4);
    border-radius: var(--radius-lg);
}
.console input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-base);
    color: var(--text-main);
    outline: none;
}
.console input::placeholder { color: var(--text-muted); }

.reg-row {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 150px 44px;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.reg-row-hit { position: absolute; inset: 0; border-radius: inherit; }
.reg-row-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.reg-row:hover { background: var(--hover); }
.reg-row.is-selected { background: var(--bg-raised); }
.reg-row-title {
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-main);
}
.reg-row-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}
.reg-row-meta .co { color: var(--text-secondary); }
.reg-row-side { display: grid; justify-items: end; gap: 4px; }
.reg-row-pay { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 500; font-variant-numeric: tabular-nums; }
.reg-row-pay.none { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sm); color: var(--text-muted); }
.reg-row-sub {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.mark-ring {
    --size: 40px;
    --age-frac: 0;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    /* 6.1: the arc is K% of the circle, and its colour fades from the
       pigment toward --decay by the same fraction as the listing ages. */
    background: conic-gradient(
        color-mix(in oklch, var(--pigment, var(--decay)) calc(var(--age-frac) * 100%), var(--decay)) calc(var(--age-frac) * 1turn),
        var(--border) 0
    );
}
.mark-ring .mark {
    width: calc(var(--size) - 6px);
    height: calc(var(--size) - 6px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-surface);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
}
.mark-ring .mark img { width: 100%; height: 100%; object-fit: cover; }
.mark-ring--lg { --size: 56px; }
.mark-ring--lg .mark { font-size: var(--fs-base); }
.mark-ring--sm { --size: 32px; }
.mark-solid {
    background: var(--pigment, var(--decay));
}
.level-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}
.level-bar { width: 3px; border-radius: 1px; background: var(--border); }
.level-bar.lit { background: var(--text-secondary); }
.seg {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-md);
    background: var(--bg-base);
    border: 1px solid var(--border);
}
.seg button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 36px;
    border: 0;
    border-radius: 9px;
    background: none;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.seg button:hover { color: var(--text-main); }
.seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-main); font-weight: 500; }
.chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--sp-3);
    border-radius: 14px;
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    text-decoration: none;
    background: none;
    cursor: pointer;
}
a.chip:hover, button.chip:hover { background: var(--hover); color: var(--text-main); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--bg-raised); color: var(--text-main); }

/* 1b sets the top-bar sign-in and the breadcrumb as plain ink; hover still shows. */

@media (max-width: 860px) {
.reg-row { grid-template-columns: 40px minmax(0, 1fr) 44px; }
.reg-row .reg-row-side { display: none; }
.console { flex-wrap: wrap; height: auto; padding: var(--sp-2); }
.console input { height: 44px; }

}

/* == slice S3 company page 3i (Post a job 3h is the employer console's since S13d) == */

/* The public company page (company.html; the console's Company page draws its own preview):
 * 56px mark, name 20/600 with the verified tick, a 12px meta line, the about
 * text, a hairline, then "Open positions". */
.company-card {
    display: grid;
    gap: var(--sp-4);
    min-width: 0;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    line-height: 1.5;
}
.company-card-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
/* 6.1: at 56px the inner disc is 8px smaller. */
.company-card .mark-ring--lg .mark { width: 48px; height: 48px; }
.company-card-id { display: grid; gap: var(--sp-1); min-width: 0; }
.company-card-name {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.company-card-name svg { color: var(--text-secondary); }
.company-card-meta { font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.company-card-meta a { position: relative; color: inherit; text-decoration: none; }
.company-card-meta a::after { content: ""; position: absolute; inset: -13px 0; }
.company-card-meta a:hover { color: var(--text-main); text-decoration: underline; }
.company-card-about {
    margin: 0;
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.company-card-rule { height: 1px; background: var(--border); }
.company-card-title { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: var(--text-secondary); }
.company-card-positions { display: grid; gap: var(--sp-4); min-width: 0; }
/* company.html: the same card, centred at the narrow measure. */
.company-page {
    display: grid;
    gap: var(--sp-4);
    width: 100%;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-7);
}
.company-page .back-link { justify-self: start; min-height: 44px; }
/* The not-found / error slot is a grid item; empty, it must not add a gap. */
.company-card-status:empty { display: none; }
/* The notice in that slot sits inside the card's own border: no dashed frame of its own. */
.company-card-status .empty-state { border: 0; }

@media (max-width: 620px) {
    .company-card { padding: var(--sp-4); }
}
/* == end S3 == */


/* Shared chrome: the theme button and the avatar menu
 * (main.js renderAccountMenu), on the board, job.html and the consoles. */
/* One icon button: sun while dark, moon while light (v3). */
.theme-btn { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: var(--radius-md); border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; padding: 0; }
.theme-btn:hover { background: var(--hover); }


/* Avatar menu (board and workspaces) */
.acct { position: relative; }
.acct-btn { display: flex; align-items: center; gap: var(--sp-2); height: 44px; padding: 0 var(--sp-2) 0 var(--sp-1); border-radius: 22px; border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; }
.acct-btn:hover { background: var(--hover); }
.acct-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: var(--fs-xs); font-weight: 600; }
.acct-menu { position: absolute; right: 0; top: 52px; width: 260px; padding: var(--sp-2); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: grid; gap: 2px; z-index: 30; }
.acct-menu[hidden] { display: none; }
.acct-who { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.acct-name { font-size: var(--fs-base); font-weight: 600; color: var(--text-main); }
.acct-email { font-size: var(--fs-xs); color: var(--text-muted); overflow-wrap: anywhere; }
.acct-item { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 0 var(--sp-3); border-radius: 10px; font: 400 var(--fs-base) var(--font-sans); color: var(--text-main); text-decoration: none; background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; }
.acct-item:hover { background: var(--hover); color: var(--text-main); text-decoration: none; }
.acct-count { margin-left: auto; font: 500 var(--fs-xs) var(--font-mono); color: var(--text-muted); }
.acct-rule { height: 1px; background: var(--border); margin: 6px 0; }
.acct-signout { color: var(--text-secondary); }

/* =========================================================================
 * The job board (index.html) — 1:1 with `Job Board v3 - Web.dc.html`
 * =========================================================================
 * Header, search band (signed-out hero / signed-in welcome and nudge), the
 * list, the detail. No job selected: the list is the full content width (max
 * 1280). Selected at ≥1024px: 5fr list / 7fr detail, the detail sticky; below
 * 1024px the detail is full-screen.
 *
 * Sizes, alphas and radii are the artboard's own, not only README §4's list
 * (user, 2026-10-01: the board 1:1 with its artboard): 17px card titles, 15px
 * inputs and big buttons, 18px logo, 26px detail title, a 0.18 field hairline.
 * The few values the artboard draws that the shared tokens do not hold are
 * board tokens below, scoped to .board-page, so the consoles and the README
 * token tests keep the shared values.
 */
.board-page, .bh, .bf {
    --b-raised: #FFFFFF;
    --b-hair2: rgba(11, 13, 15, 0.20);
    --b-sel: rgba(11, 13, 15, 0.06);
    --b-ember-soft: rgba(184, 93, 28, 0.10);
    --b-head: rgba(243, 244, 245, 0.88);
    --b-shadow: 0 16px 40px -16px rgba(92, 48, 14, 0.28);
    --b-scrim: rgba(11, 13, 15, 0.42);
    --text-muted: rgba(11, 13, 15, 0.62);
    --accent-hover: #9E4E14;
    /* The artboard draws the company marks in the same pigments in both themes. */
    --pigment-0: #C19361; --pigment-1: #B09F5C; --pigment-2: #89A151; --pigment-3: #60AE74;
    --pigment-4: #46A794; --pigment-5: #44ACB8; --pigment-6: #62A1C3; --pigment-7: #7F9ED3;
}
.board-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.5;
}
[data-theme="dark"] .board-page, [data-theme="dark"] .bh, [data-theme="dark"] .bf {
    --b-raised: #1B1F23;
    --b-hair2: rgba(255, 255, 255, 0.18);
    --b-sel: rgba(255, 255, 255, 0.08);
    --b-ember-soft: rgba(215, 112, 38, 0.14);
    --b-head: rgba(11, 13, 15, 0.86);
    --b-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
    --b-scrim: rgba(0, 0, 0, 0.62);
    --text-muted: rgba(255, 255, 255, 0.58);
    --accent-hover: #E8894A;
    --hover: rgba(255, 255, 255, 0.05);
}
.board-page.auth-open, .board-page.detail-open { overflow: hidden; }
/* The artboard's links: no underline until hovered. */
.board-page a { text-decoration: none; }
.board-page a:hover { color: var(--accent-hover); text-decoration: underline; }
.board-page ::selection { background: var(--b-ember-soft); }
/* The same on the public pages' header and footer, which sit outside .board-page. */
.bh a, .bf a { text-decoration: none; }
.bh a:hover, .bf a:hover { color: var(--accent-hover); text-decoration: underline; }
.bh .bh-btn { text-decoration: none; }
.bh .bh-btn--line:hover { color: var(--text-main); text-decoration: none; }
.bh .bh-btn--fill:hover { color: var(--on-accent); text-decoration: none; }

/* Header */
.bh { position: sticky; top: 0; z-index: 20; background: var(--b-head); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.bh-inner { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 32px; }
.bh .bh-logo { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-main); text-decoration: none; white-space: nowrap; }
.bh-logo span { color: var(--accent); }
.bh .bh-logo:hover { color: var(--text-main); text-decoration: none; }
.bh-nav { display: flex; align-items: stretch; gap: 4px; height: 64px; }
.bh .bh-nav-item { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; font-weight: 400; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.bh .bh-nav-item:hover { color: var(--text-main); text-decoration: none; }
.bh .bh-nav-item.is-active { color: var(--text-main); font-weight: 600; box-shadow: inset 0 -2px 0 var(--text-main); }
.bh-nav-count { font: 500 12px var(--font-mono); color: var(--text-muted); }
.bh-spacer { flex: 1; }
.bh-actions { display: flex; align-items: center; gap: 8px; }
.bh .bh-link { display: flex; align-items: center; height: 44px; padding: 0 12px; font-size: 14px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.bh .bh-link:hover { color: var(--text-main); text-decoration: none; }
.bh-link[hidden] { display: none; }
.bh-account { display: flex; align-items: center; gap: 8px; }
.bh .theme-btn { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; padding: 0; }
.bh .theme-btn:hover { background: var(--hover); border-color: var(--b-hair2); }
.bh .theme-btn svg { width: 18px; height: 18px; }
.bh-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 12px; font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; flex: none; }
.bh-btn--line { border: 1px solid var(--b-hair2); background: transparent; color: var(--text-main); }
.bh-btn--line:hover { background: var(--hover); }
.bh-btn--fill { border: none; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.bh-btn--fill:hover { background: var(--accent-hover); }
.bh-signin, .bh-register { flex: none; }
/* The avatar menu (main.js renderAccountMenu), drawn the board's way. */
.bh .acct-btn { height: 40px; padding: 0 8px 0 4px; border-radius: 20px; gap: 8px; border: 1px solid var(--border); }
.bh .acct-avatar { width: 32px; height: 32px; font: 600 12px var(--font-sans); }
.bh .acct-menu { top: 48px; width: 260px; padding: 8px; border-radius: 16px; background: var(--b-raised); box-shadow: var(--b-shadow); }
.bh .acct-who { padding: 8px 12px 12px; }
.bh .acct-name { font-size: 14px; }
.bh .acct-email { font-size: 12px; }
.bh .acct-item { gap: 12px; min-height: 40px; height: 40px; padding: 0 12px; font-size: 14px; }

/* Search band */
.bs { border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.bs[hidden] { display: none; }
.bs-inner { max-width: 1280px; margin: 0 auto; padding: 32px 24px 20px; display: grid; gap: 16px; }
.bs-hero { display: grid; gap: 4px; }
.bs-hero[hidden] { display: none; }
.board-page .bs-title { margin: 0; font-family: var(--font-sans); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-main); text-wrap: pretty; }
.bs-sub { font-size: 14px; color: var(--text-muted); }

/* Signed-out hero: "get found" (AUDIT, Home hero) */
.bhero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 32px 48px; align-items: center; padding: 8px 0 12px; }
.bhero-pitch { display: grid; gap: 18px; align-content: start; min-width: 0; }
.bhero-pill { justify-self: start; width: max-content; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--b-hair2); font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.bhero-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-main); }
.board-page .bhero-title { margin: 0; font-family: var(--font-sans); font-size: 28px; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.bhero-title-a { display: block; font-weight: 400; color: var(--text-muted); }
.bhero-title-b { display: block; font-weight: 600; color: var(--text-main); }
.bhero-mark { background: var(--b-sel); box-shadow: inset 0 -2px 0 var(--text-main); padding: 0 6px; margin: 0 -2px; border-radius: 6px 6px 0 0; }
.bhero-lede { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 40ch; text-wrap: wrap; }
.bhero-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.bhero-cta { height: 52px; padding: 0 24px; border-radius: 14px; border: none; background: var(--accent); color: var(--on-accent); font: 600 15px var(--font-sans); cursor: pointer; white-space: nowrap; }
.bhero-cta:hover { background: var(--accent-hover); }
.bhero-cta--line { padding: 0 20px; border: 1px solid var(--b-hair2); background: transparent; color: var(--text-main); font-weight: 500; }
.bhero-cta--line:hover { background: var(--hover); }
.bhero-promises { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.bhero-promises li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.bhero-promises svg { color: var(--text-main); flex: none; }
.bhero-demo { display: grid; gap: 12px; min-width: 0; max-width: 460px; justify-self: center; width: 100%; }
.bhero-demo-label { font: 500 12px var(--font-mono); color: var(--text-muted); }
.bhero-card { display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--b-hair2); background: var(--bg-base); }
.bhero-row { display: flex; gap: 12px; align-items: center; }
.bhero-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--b-sel); font: 600 13px var(--font-sans); }
.bhero-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bhero-who-t { font-weight: 600; }
.bhero-who-s { font-size: 13px; color: var(--text-muted); }
.bhero-otw { font-size: 12px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--b-hair2); color: var(--text-main); white-space: nowrap; }
.bhero-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.bhero-skill { height: 28px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); display: inline-flex; align-items: center; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.bhero-lock { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.bhero-approach { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--bg-surface); border: 1px solid var(--border); margin-left: 24px; box-shadow: var(--b-shadow); }
.bhero-approach-head { display: flex; gap: 10px; align-items: center; }
.bhero-approach-mark { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--pigment-4); }
.bhero-approach-mark span { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-surface); display: grid; place-items: center; font: 600 10px var(--font-sans); }
.bhero-approach-co { font-weight: 500; font-size: 14px; }
.bhero-approach-meta { font-size: 12px; color: var(--text-muted); }
.bhero-approach-text { font-size: 14px; line-height: 1.5; color: var(--text-main); text-wrap: pretty; }
.bhero-approach-actions { display: flex; gap: 8px; }
.bhero-approach-reply, .bhero-approach-no { height: 36px; padding: 0 14px; border-radius: 12px; font: 600 13px var(--font-sans); display: inline-flex; align-items: center; }
.bhero-approach-reply { background: var(--accent); color: var(--on-accent); }
.bhero-approach-no { border: 1px solid var(--b-hair2); font-weight: 500; color: var(--text-secondary); }
.bhero-steps { list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px 0; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-base); }
.bhero-step { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 12px; }
.bhero-step-n { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 500 13px var(--font-mono); background: transparent; color: var(--text-secondary); border: 1px solid var(--b-hair2); }
.bhero-step:last-child .bhero-step-n { background: var(--text-main); color: var(--bg-base); border-color: var(--text-main); }
.bhero-step-text { display: grid; gap: 1px; min-width: 0; }
.bhero-step-t { font-weight: 600; font-size: 14px; white-space: nowrap; }
.bhero-step-s { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.bhero-step:not(:last-child)::after { content: ""; flex: 1; min-width: 16px; height: 1px; background: var(--b-hair2); }
.bhero-or { font-size: 13px; color: var(--text-muted); padding-top: 4px; }

/* Signed in, discovery off: "Employers can't find you yet" */
.bnudge { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--b-hair2); background: var(--bg-base); }
.bnudge[hidden] { display: none; }
.bnudge-text { flex: 1 1 280px; display: grid; gap: 4px; }
.bnudge-t { font-weight: 600; }
.bnudge-b { font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }
.bnudge-meter { display: grid; gap: 6px; flex: 0 1 200px; }
.bnudge-meter-row { display: flex; justify-content: space-between; font: 400 12px var(--font-mono); color: var(--text-muted); }
.bnudge-track { display: block; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.bnudge-fill { display: block; height: 100%; background: var(--text-main); }
.bnudge-go { height: 44px; padding: 0 16px; border-radius: 12px; border: none; background: var(--accent); color: var(--on-accent); font: 600 14px var(--font-sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; text-decoration: none; }
.board-page .bnudge-go:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }

/* Search */
.bs-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bs-field { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--b-hair2); background: var(--bg-base); color: var(--text-main); cursor: text; margin: 0; }
.bs-field svg { color: var(--text-muted); flex: none; }
.bs-field:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
.bs-field--what { flex: 2 1 280px; }
.bs-field--where { flex: 1 1 200px; }
.board-page .bs-field input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; color: var(--text-main); font: 400 15px var(--font-sans); outline: none; padding: 1px 2px; box-shadow: none; border-radius: 0; }
.bs-field input::placeholder { color: var(--text-muted); }
.bs-field input::-webkit-search-cancel-button { display: none; }
.bs-go { flex: 0 0 auto; height: 52px; padding: 0 28px; border-radius: 14px; border: none; background: var(--accent); color: var(--on-accent); font: 600 15px var(--font-sans); cursor: pointer; }
.bs-go:hover { background: var(--accent-hover); }
.bs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.type-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; flex: none; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); position: relative; }
.type-chip::after { content: ""; position: absolute; inset: -5px 0; }
.type-chip:hover { border-color: var(--b-hair2); }
.type-chip.is-on { background: var(--b-ember-soft); border-color: var(--accent); color: var(--accent); }
.bs-clear { font: 400 13px var(--font-sans); color: var(--accent); cursor: pointer; padding: 0 8px; border: none; background: none; height: 36px; position: relative; }
.bs-clear::after { content: ""; position: absolute; inset: -4px 0; }
.bs-hiring { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: var(--text-muted); }
.bs-hiring[hidden] { display: none; }
.bs-hiring-co { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); white-space: nowrap; }
.bs-hiring-co::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pigment, var(--decay)); }

/* The list */
.bm { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 24px 48px; }
.bm-view { display: grid; gap: 16px; }
.bm-view[hidden] { display: none; }
.bm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bm-head-text { display: flex; align-items: baseline; gap: 12px; }
.board-page .bm-title { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.5; color: var(--text-main); }
.bm-count { font: 400 13px var(--font-mono); color: var(--text-muted); }
.bm-sort { position: relative; display: inline-flex; align-items: center; }
/* Drawn as a 20px line of text; the select's own box is 44px tall (README §4), its margins give the room back. */
.board-page .bm-sort select { appearance: none; -webkit-appearance: none; border: none; background: transparent; color: var(--text-muted); font: 400 13px var(--font-sans); cursor: pointer; padding: 0; height: 44px; margin-block: -12px; box-shadow: none; width: auto; text-align: right; }
.board-page .bm-sort select:hover { color: var(--text-main); }
.bm-grid { display: grid; gap: 24px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.bm-grid.is-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bm-list { display: grid; gap: 12px; min-width: 0; }

/* A job card */
.jc { display: grid; gap: 12px; padding: 20px; border-radius: 16px; background: var(--bg-surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.jc:hover { border-color: var(--b-hair2); box-shadow: var(--b-shadow); }
.jc.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--b-ember-soft); }
.jc-top { display: flex; align-items: flex-start; gap: 14px; }
.board-page .mark-ring { background: var(--pigment, var(--decay)); }
.board-page .jc .mark-ring, .board-page .bd-head .mark-ring { --size: 44px; }
.board-page .jc .mark, .board-page .bd-head .mark { font: 600 13px var(--font-sans); color: var(--text-main); }
.jc-head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jc-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-page .jc-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-main); text-decoration: none; }
.board-page .jc-title:hover { color: var(--text-main); text-decoration: underline; }
.jc-new { height: 20px; padding: 0 8px; border-radius: 10px; background: var(--b-ember-soft); color: var(--accent); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; }
.jc-company { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); }
.jc-tick { color: var(--accent); flex: none; }
.jc-save { width: 40px; height: 40px; flex: none; margin: -8px -8px 0 0; display: grid; place-items: center; border-radius: 12px; border: none; background: transparent; cursor: pointer; color: var(--text-muted); padding: 0; }
.jc-save:hover { background: var(--hover); }
.jc-save.is-saved { color: var(--accent); }
.jc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; color: var(--text-secondary); }
.jc-fact { display: inline-flex; align-items: center; gap: 6px; }
.jc-fact svg { color: var(--text-muted); flex: none; }
.jc-pay { font: 500 14px var(--font-mono); color: var(--text-main); }
.jc-nopay { color: var(--text-muted); }
.jc-snippet { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 90ch; text-wrap: pretty; }
.jc-foot { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); }
.jc-level { display: inline-flex; align-items: center; gap: 6px; }
.jc-applied { margin-left: auto; color: var(--accent); font-weight: 500; }
/* The artboard's level bars: 5/8/11px, lit in ink 2, the rest the 0.18 hairline. */
.board-page .level-bars { gap: 2px; }
.board-page .jc-level .level-bars { height: 11px; }
.board-page .level-bar { background: var(--b-hair2); }
.board-page .level-bar.lit { background: var(--text-secondary); }

/* Empty and failure states */
.board-empty { display: grid; justify-items: start; gap: 8px; padding: 40px 24px; border: 1px dashed var(--b-hair2); border-radius: 16px; }
.board-empty-title { font-size: 16px; font-weight: 600; color: var(--text-main); }
/* The job page's dead ends say it as the page's h1, at the same size. */
.board-page h1.board-empty-title { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: normal; line-height: 1.4; }
.board-empty-body { font-size: 14px; color: var(--text-muted); max-width: 52ch; }
.board-empty-cta { margin-top: 8px; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--b-hair2); background: transparent; color: var(--text-main); font: 500 14px var(--font-sans); cursor: pointer; text-decoration: none; position: relative; }
.board-empty-cta::after { content: ""; position: absolute; inset: -3px 0; }
.board-page .board-empty-cta:hover { background: var(--hover); color: var(--text-main); text-decoration: none; }

/* The detail */
.bd { overflow: auto; background: var(--bg-surface); border: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 88px; height: calc(100vh - 112px); border-radius: 16px; z-index: 1; }
.bd[hidden] { display: none; }
.bd-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 24px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.bd-head-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bd-company { font-size: 14px; font-weight: 500; color: var(--text-main); }
.bd-sub { font-size: 12px; color: var(--text-muted); }
.b-icon-btn { width: 40px; height: 40px; display: grid; place-items: center; flex: none; border-radius: 12px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; }
.b-icon-btn:hover { background: var(--hover); }
.bd-body { padding: 24px; display: grid; gap: 24px; align-content: start; }
.bd-top { display: grid; gap: 16px; }
.board-page .bd-title { margin: 0; font-family: var(--font-sans); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text-main); text-wrap: pretty; }
.bd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px; padding: 16px; border-radius: 14px; background: var(--bg-base); border: 1px solid var(--border); }
.bd-fact { display: grid; gap: 2px; }
.bd-fact-label { font-size: 12px; color: var(--text-muted); }
.bd-fact-value { font-size: 14px; color: var(--text-main); }
.bd-pay { font: 500 14px var(--font-mono); }
.bd-unit { font: 400 12px var(--font-sans); color: var(--text-muted); }
.bd-muted { color: var(--text-secondary); }
.bd-member { display: grid; gap: 24px; }
.bd-actions { display: grid; gap: 8px; }
.bd-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-apply { flex: 1 1 200px; height: 48px; border-radius: 12px; border: none; background: var(--accent); color: var(--on-accent); font: 600 15px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 16px; }
.board-page .bd-apply:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.bd-apply:disabled { opacity: .6; cursor: default; }
.bd-applied { flex: 1 1 200px; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; background: var(--b-ember-soft); color: var(--accent); font-size: 15px; font-weight: 600; }
.bd-save { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--b-hair2); background: transparent; font: 500 14px var(--font-sans); cursor: pointer; color: var(--text-main); }
.bd-save:hover { background: var(--hover); }
.bd-save.is-saved { color: var(--accent); }
.bd-note { font-size: 12px; color: var(--text-muted); }
.bd-section { display: grid; gap: 10px; }
.bd-section-title { font-size: 16px; font-weight: 600; color: var(--text-main); }
.bd-section-label { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.bd-prose { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 68ch; text-wrap: pretty; }
.bd-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); max-width: 68ch; }
.bd-asks { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-ask { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--b-hair2); font-size: 13px; white-space: nowrap; flex: none; color: var(--text-main); }
.bd-level { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-main); }
.bd-more { display: grid; gap: 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.bd-more .bd-section-label { padding-bottom: 6px; }
.bd-more-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; margin: 0 -12px; border-radius: 10px; color: var(--text-muted); text-decoration: none; }
.board-page .bd-more-row:hover { background: var(--hover); text-decoration: none; color: var(--text-muted); }
.bd-more-title { flex: 1; font-size: 14px; color: var(--text-main); }
.bd-more-age { font-size: 12px; }

/* The job page (/jobs/{id}-{slug}): the panel as the page, at the panel's own width (7/12 of the board). */
.bm-view.is-page .bm-head, .bm-view.is-page .bm-list, .bm-view.is-page .pagination { display: none; }
.bm-view.is-page .bm-grid { display: block; }
.bm-view.is-page .bd { position: static; height: auto; overflow: visible; max-width: 720px; margin: 0 auto; }
.bm-view.is-page .bd-head { position: static; border-radius: 16px 16px 0 0; }

/* Its apply form, in the panel's card language (the dialog's fields). */
.bd-form { display: grid; gap: 16px; padding: 20px; border-radius: 14px; border: 1px solid var(--b-hair2); background: var(--bg-base); }
.bd-field { display: grid; gap: 6px; }
.bd-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.bd-req { font-size: 12px; color: var(--text-muted); }
.bd-req--on { color: var(--accent); font-weight: 500; }
.board-page .bd-input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--b-hair2); background: var(--bg-surface); color: var(--text-main); font: 400 15px var(--font-sans); outline: none; box-shadow: none; width: 100%; min-width: 0; margin: 0; }
.board-page .bd-textarea { height: auto; min-height: 144px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.board-page .bd-input:focus { border-color: var(--accent); }
.board-page .bd-input[aria-invalid="true"] { border-color: var(--danger-text); }
.bd-hint { font-size: 12px; color: var(--text-muted); }
.bd-field-error, .bd-form-error { margin: 0; font-size: 13px; color: var(--danger-text); }
.bd-field-error[hidden], .bd-form-error[hidden] { display: none; }

/* Signed out: the facts, then the sign-in prompt over a ghost of the text */
.gate { display: grid; gap: 16px; padding: 24px; border-radius: 16px; border: 1px solid var(--b-hair2); background: var(--bg-base); }
.gate-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--b-ember-soft); color: var(--accent); }
.gate-text { display: grid; gap: 6px; }
.gate-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); }
.gate-body { font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 56ch; text-wrap: pretty; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gate-btn { white-space: nowrap; height: 44px; padding: 0 20px; border-radius: 12px; border: none; background: var(--accent); color: var(--on-accent); font: 600 14px var(--font-sans); cursor: pointer; }
.gate-btn:hover { background: var(--accent-hover); }
.gate-btn--line { border: 1px solid var(--b-hair2); background: transparent; color: var(--text-main); font-weight: 500; }
.gate-btn--line:hover { background: var(--hover); }
.gate-ghost { display: grid; gap: 10px; opacity: 0.6; }
.gate-ghost span { height: 10px; border-radius: 5px; background: var(--b-sel); }
.gate-ghost span:nth-child(1) { height: 14px; width: 30%; border-radius: 7px; }
.gate-ghost span:nth-child(3) { width: 94%; }
.gate-ghost span:nth-child(4) { width: 82%; }
.gate-ghost span:nth-child(5) { width: 60%; }

/* Applications view */
.ba { display: grid; gap: 16px; max-width: 880px; }
.ba[hidden] { display: none; }
.ba-head { display: grid; gap: 4px; }
.board-page .ba-head .bs-title { line-height: 1.5; }
.ba-list { display: grid; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-surface); overflow: hidden; }
.ba-list .board-empty { border: none; }
/* Show more under the list: how many of how many, and the button; nothing at all when every application is shown. */
.ba-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.ba-more:empty { display: none; }
.ba-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); color: var(--text-main); text-decoration: none; }
.ba-row:last-child { border-bottom: none; }
.board-page .ba-row:hover { background: var(--hover); text-decoration: none; color: var(--text-main); }
.ba-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ba-title { font-size: 15px; font-weight: 600; }
.ba-sub { font-size: 13px; color: var(--text-muted); }
.board-page .ba-row .mark-ring { --size: 40px; }
.board-page .ba-row .mark { font: 600 12px var(--font-sans); color: var(--text-main); }
/* The stage track: four 4px segments, lit in ink as the application moves; "Not selected" ends in the superseded grey. */
.ba-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 280px; margin-top: 8px; }
.ba-step { height: 4px; border-radius: 2px; background: var(--border); }
.ba-step.is-done { background: var(--text-main); }
.ba-step.is-out { background: var(--superseded); }
.ba-hint { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.ba-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--b-hair2); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text-main); }
.ba-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--decay); }
.ba-status--pending .ba-dot { background: var(--decay); }
.ba-status--reviewed .ba-dot { background: var(--text-muted); }
.ba-status--shortlisted .ba-dot { background: var(--text-main); }
.ba-status--hired .ba-dot { background: var(--accent); }
.ba-status--rejected .ba-dot { background: var(--superseded); }

/* Footer */
.bf { border-top: 1px solid var(--border); }
.bf-inner { max-width: 1280px; margin: 0 auto; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--text-muted); }
.bf-inner a { color: var(--text-muted); text-decoration: none; }
.bf-inner a:hover { color: var(--accent-hover); text-decoration: underline; }
/* The header drops "For employers" below 720px (the artboard's width rule), so /employers would be
 * unreachable on a phone: the footer carries it there. Its links are boxes of their own, 44px tall. */
.bf-employers { display: none; }
@media (max-width: 719px) {
    .bf-employers { display: inline-flex; }
    .bf-inner { padding-block: 8px; }
    .bf-inner a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Sign in / register dialog */
.auth-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--b-scrim); display: grid; place-items: center; padding: 16px; }
.auth-scrim[hidden] { display: none; }
.auth-dialog { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto; padding: 28px; border-radius: 20px; background: var(--b-raised); border: 1px solid var(--border); box-shadow: var(--b-shadow); display: grid; gap: 20px; }
.auth-head { display: flex; align-items: flex-start; gap: 12px; }
.auth-head .b-icon-btn { margin: -8px -8px 0 0; }
.auth-head-text { flex: 1; display: grid; gap: 4px; }
.auth-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-main); }
.auth-sub { font-size: 14px; color: var(--text-muted); }
.auth-form { display: grid; gap: 20px; }
.auth-fields { display: grid; gap: 12px; }
.auth-field { display: grid; gap: 6px; }
.auth-field[hidden], .auth-error[hidden], .auth-door[hidden] { display: none; }
.auth-label { font-size: 13px; color: var(--text-secondary); }
.board-page .auth-field input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--b-hair2); background: var(--bg-base); color: var(--text-main); font: 400 15px var(--font-sans); outline: none; box-shadow: none; }
.board-page .auth-field input:focus { border-color: var(--accent); }
.auth-error { margin: 0; font-size: 13px; color: var(--danger-text); }
/* The one box under the sign-up form (16 or older, Terms and Privacy Policy: lib/terms.php), and the button that sends a waiting Google sign-in with it ticked. */
.auth-terms { display: grid; gap: 10px; }
.auth-terms[hidden], .auth-terms [hidden] { display: none; }
.auth-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); cursor: pointer; }
.auth-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.auth-check a { font-weight: 500; text-decoration: underline; }
/* "We have updated our Terms and Privacy Policy": a calm strip at the top of the board's content, never a wall. */
.terms-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--b-hair2); background: var(--bg-surface); }
.terms-notice[hidden] { display: none; }
.terms-notice-text { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.terms-notice-text a { font-weight: 500; text-decoration: underline; }
.terms-notice-btn { min-height: 44px; padding: 0 20px; border-radius: 12px; border: none; background: var(--accent); color: var(--on-accent); font: 600 14px var(--font-sans); cursor: pointer; }
.terms-notice-btn:hover { background: var(--accent-hover); }
.terms-notice-btn:disabled { opacity: .6; cursor: default; }
.terms-notice-error { margin: 0; flex-basis: 100%; font-size: 13px; color: var(--danger-text); }
.terms-notice-error[hidden] { display: none; }
.auth-google { display: grid; gap: 16px; }
.auth-google[hidden] { display: none; }
.auth-google-btn { height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-main); font: 500 14px var(--font-sans); cursor: pointer; }
.auth-google-btn:hover { background: var(--hover); }
.auth-google-btn svg { flex: none; }
.auth-google-btn:disabled { opacity: .6; cursor: default; background: var(--bg-surface); }
.auth-google-note { margin: 0; font-size: 13px; color: var(--text-muted); }
.auth-or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-go { height: 48px; border-radius: 12px; border: none; background: var(--accent); color: var(--on-accent); font: 600 15px var(--font-sans); cursor: pointer; }
.auth-go:hover { background: var(--accent-hover); }
.auth-go:disabled { opacity: .6; cursor: default; }
.auth-forgot { justify-self: start; margin-top: -8px; font-size: 13px; font-weight: 500; position: relative; }
.auth-forgot::after { content: ""; position: absolute; inset: -14px -4px; }
.auth-switch { font-size: 14px; color: var(--text-muted); text-align: center; }
.auth-switch-btn { color: var(--accent); cursor: pointer; font: 500 14px var(--font-sans); background: none; border: none; padding: 0; position: relative; }
.auth-employer { font-size: 13px; color: var(--text-muted); text-align: center; padding-top: 14px; border-top: 1px solid var(--border); }
.auth-employer a { font-weight: 500; position: relative; }
.auth-employer a::after { content: ""; position: absolute; inset: -14px -4px; }
.auth-door { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--b-hair2); background: var(--bg-base); }
.auth-door-t { font-weight: 600; }
.auth-door-b { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.auth-door-go { justify-self: start; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 600 14px var(--font-sans); text-decoration: none; }
.board-page .auth-door-go:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }

@media (max-width: 1023px) {
    .bd { position: fixed; inset: 0; top: 0; height: 100%; border-radius: 0; border: none; z-index: 40; }
    .bm-view.is-page .bd { position: static; height: auto; border-radius: 16px; border: 1px solid var(--border); z-index: 1; }
}
/* The artboard's widths: no nav and no "For employers" below 720, no Register below 480. */
@media (max-width: 719px) {
    .bh-nav, .bh .bh-link { display: none; }
}
@media (max-width: 479px) {
    .bh-btn--fill.bh-register { display: none; }
}
/* Profile & CV (/profile, assets/js/seeker-profile.js): the artboard's #profile. */
.pf { display: grid; gap: 20px; max-width: 880px; }
.pf[hidden], .pf-body[hidden] { display: none; }
.pf-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.pf-save { height: 44px; padding: 0 18px; border-radius: 12px; border: none; background: var(--accent); color: var(--on-accent); font: 600 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.pf-save:hover { background: var(--accent-hover); }
.pf-save:disabled, .pf-btn:disabled { opacity: .6; cursor: default; }
.pf-body { display: grid; gap: 20px; }
.pf-card { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-surface); margin: 0; }
.pf-card--summary { gap: 12px; padding: 18px 20px; }
.pf-card-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pf-card-t { font-weight: 600; }
.pf-card-state { font-size: 13px; color: var(--text-muted); }
.pf-card-state.is-on { color: var(--text-main); }
.pf-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-check { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); font-size: 12px; white-space: nowrap; color: var(--text-secondary); }
.pf-mark { color: var(--text-muted); }
.pf-check.is-done .pf-mark { color: var(--text-main); }
.pf-saved { font-size: 14px; color: var(--text-secondary); }
.pf-saved[hidden], .pf-save-error[hidden], .pf-error[hidden], .pf-confirm[hidden] { display: none; }
.pf-save-error, .pf-error { margin: 0; font-size: 13px; color: var(--danger-text); }
.board-page .pf-card-title { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-main); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.pf-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.pf-field--wide { grid-column: 1 / -1; }
.pf-label { font-size: 13px; color: var(--text-secondary); }
.board-page .pf-input { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-base); color: var(--text-main); font: 400 16px var(--font-sans); width: 100%; min-width: 0; box-shadow: none; margin: 0; }
.board-page .pf-input:focus { border-color: var(--accent); outline: none; }
.board-page .pf-input:disabled { color: var(--text-muted); border-color: var(--b-hair2); opacity: 1; }
.board-page .pf-input--mono { font-family: var(--font-mono); }
.board-page .pf-textarea { height: auto; padding: 12px 14px; resize: vertical; }
.pf-input[aria-invalid="true"] { border-color: var(--danger); }
.pf-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--b-hair2); background: transparent; color: var(--text-main); font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.pf-btn:hover { background: var(--hover); }
.pf-btn--44 { flex: none; }
.pf-btn--fill { border: none; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pf-btn--fill:hover { background: var(--accent-hover); }
.pf-btn--danger { border-color: rgba(216, 65, 85, 0.45); color: var(--danger-text); }
.pf-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(216, 65, 85, 0.45); background: var(--danger-wash); font-size: 14px; }
.pf-confirm > span:first-child { flex: 1 1 240px; }
/* Taken out of search by the board's team (plan S15): the reason they were given. */
.pf-hidden { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(216, 65, 85, 0.45); background: var(--danger-wash); font-size: 14px; overflow-wrap: anywhere; }
.pf-hidden[hidden] { display: none; }
.pf-hidden-title { font-weight: 600; }
.pf-note { font-size: 13px; color: var(--text-muted); margin: 0; }
.pf-lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 68ch; text-wrap: pretty; }
.pf-switch { display: flex; align-items: center; gap: 16px; min-height: 52px; width: 100%; padding: 0; border: none; border-top: 1px solid var(--border); background: transparent; color: var(--text-main); font: 400 15px var(--font-sans); cursor: pointer; text-align: left; }
.pf-switch-text { flex: 1; display: grid; gap: 2px; }
.pf-switch-sub { font-size: 13px; color: var(--text-muted); }
.pf-track { flex: none; width: 44px; height: 26px; border-radius: 13px; padding: 2px; display: flex; justify-content: flex-start; background: transparent; border: 1px solid var(--border-strong); }
.pf-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); }
.pf-switch[aria-checked="true"] .pf-track { justify-content: flex-end; background: var(--accent); border-color: var(--accent); }
.pf-switch[aria-checked="true"] .pf-knob { background: var(--on-accent); }
.pf-approaches { display: grid; gap: 12px; }
.pf-approach { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--bg-base); border: 1px solid var(--border); }
.pf-approach-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.board-page .pf-approach .mark-ring { --size: 28px; }
.board-page .pf-approach .mark { font: 600 10px var(--font-sans); color: var(--text-main); }
.pf-approach-co { font-weight: 500; font-size: 14px; }
.pf-approach-meta { font-size: 12px; color: var(--text-muted); }
.pf-approach-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-main); white-space: pre-line; text-wrap: pretty; }
.pf-approach-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-approach-done { font-size: 13px; color: var(--text-muted); }
.pf-reply { display: grid; gap: 8px; }
.pf-hint, .auth-hint { font-size: 12px; color: var(--text-muted); }
/* The word count under the typed CV (seeker-profile.js): muted while it fits, the error colour once it is over 1,000. */
.pf-count { font-size: 13px; color: var(--text-muted); }
.pf-count.is-over { color: var(--danger-text); }
/* Blocked companies (Profile): one row a company, its Unblock at the end. */
.pf-block-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-block { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-base); }
.pf-block-text { display: grid; gap: 2px; min-width: 0; }
.pf-block-co { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.pf-block-meta { font-size: 12px; color: var(--text-muted); }
/* Report and block (assets/js/seeker-safety.js): the dialogs, and the quiet buttons that open them. They are drawn on the
 * board and on the company page, which has no .board-page, so they use the shared tokens only. */
body.sf-open { overflow: hidden; }
.sf-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: grid; place-items: center; padding: 16px; }
.sf-dialog { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 20px; background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border); box-shadow: var(--shadow-panel); display: grid; gap: 16px; align-content: start; }
.sf-dialog:focus { outline: none; }
.sf-head { display: flex; align-items: flex-start; gap: 12px; }
.sf-head .b-icon-btn { margin: -8px -8px 0 0; }
.sf-title { flex: 1; margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-main); overflow-wrap: anywhere; }
.sf-lede { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.sf-form { display: grid; gap: 16px; }
.sf-form[hidden], .sf-error[hidden], .sf-actions[hidden], .sf-result[hidden] { display: none; }
.sf-reasons { display: grid; min-width: 0; margin: 0; padding: 0; border: none; }
.sf-legend { margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 400; color: var(--text-secondary); }
.sf-reason { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; color: var(--text-main); cursor: pointer; }
.sf-reason input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sf-field { display: grid; gap: 6px; min-width: 0; }
.sf-label { font-size: 13px; color: var(--text-secondary); }
.sf-input { display: block; min-height: 96px; font-size: 16px; line-height: 1.5; resize: vertical; }
.sf-input[aria-invalid="true"] { border-color: var(--danger); }
.sf-count { font-size: 13px; color: var(--text-muted); }
.sf-count.is-over { color: var(--danger-text); }
.sf-error { margin: 0; font-size: 13px; color: var(--danger-text); overflow-wrap: anywhere; }
.sf-result { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-main); }
.sf-result:focus { outline: none; }
.sf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-actions .btn { flex: 1 1 120px; }
.sf-link { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding: 0; border: none; background: none; color: var(--text-secondary); font: 500 13px var(--font-sans); text-decoration: underline; cursor: pointer; }
.sf-link:hover { color: var(--text-main); }
.sf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-tools[hidden] { display: none; }
.sf-state { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); }
.sf-state:focus { outline: none; }
.sf-state:empty { display: none; }

/* A view change: a 2px ink bar across the top (README §2b; the artboard's jsbLoad). */
.b-loadbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--text-main); z-index: 90; pointer-events: none; animation: b-load .38s ease-out forwards; }
@keyframes b-load { 0% { width: 0; opacity: 1; } 70% { width: 80%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .b-loadbar { animation: none; opacity: 0; } }
/* == end v3 board == */