/* ==========================================================================
   Kompanya design system
   One typeface for everything, the way FlexJobs sets its pages: Halcyon,
   which is a licensed face — anyone who has it installed gets it — then Open
   Sans (served from Google Fonts) for everybody else, then the system faces
   behind both. Headings and body share the family — weight is what separates
   them.

   The face is named in exactly two places: --font-heading below, and the
   Google Fonts link in resources/views/partials/head.blade.php. Changing the
   site's typeface is changing those two lines and nothing else.
   ========================================================================== */

:root {
    /* Primary (orange) */
    --primary: #F97316;
    --primary-dark: #C2410C;
    --primary-soft: #FDBA74;
    --primary-tint: #FFF1E6;

    /* Secondary (deep navy) */
    --navy: #1E2A44;
    --navy-light: #33415E;
    --navy-muted: #93A3C0;
    --navy-tint: #EDF1F7;

    /* Neutral & semantic */
    --ink: #1C1917;
    --ink-soft: #57534E;
    --line: #D6D3D1;

    --success: #15803D;
    --success-bg: #DCFCE7;
    --danger: #B91C1C;
    --danger-bg: #FEE2E2;
    --warning: #92400E;
    --warning-bg: #FEF3C7;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(30, 42, 68, .08), 0 4px 16px rgba(30, 42, 68, .06);
    --font-heading: halcyon, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: var(--font-heading);
}

* { box-sizing: border-box; }

/* Nothing on the site scrolls sideways. The one thing measured against the
   window rather than the page — the search band, which reaches both edges — is
   a hair wider than the page whenever a scrollbar is taking room out of the
   window, and that hair is cut off here rather than turned into a scrollbar of
   its own. Clipped rather than hidden: hidden would make this a scroller and
   take sticky and overhanging panels with it. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

/* No background colour anywhere behind a page. What separates a card from the
   page it sits on is its own border and shadow, not a tint underneath it. */
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--navy);
    line-height: 1.25;
    margin: 0 0 .5rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; font-weight: 500; }

p { margin: 0 0 1rem; }

/* 600 is the heaviest weight the site uses, so the browser's own bold — which
   is 700 — is brought down to it rather than sitting a step above everything
   the stylesheet sets. */
strong, b { font-weight: 600; }

a { color: var(--primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* Layout ------------------------------------------------------------------ */

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-narrow { max-width: 720px; }

/* No room kept at the top: the page starts against the bar above it, so a band
   written across the top of a listing meets the navigation rather than floating a
   gap below it. The space at the bottom stays — that one is the footer's. */
.page { padding: 0 0 3rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Detail page: main content + a fixed-width aside. */
.grid-detail { grid-template-columns: 1fr 300px; }

/* A job listing: the search band across the top, and under it the results with
   whatever the page keeps beside them. The areas are placed by name rather than
   by source order, so restacking them on a phone is a matter of renaming the
   rows.

   The Job Hub is the whole width; the homepage has a column beside its results
   for the hiring locations and the maps, which is what :has() is asking about.
   Nothing is written into that column unless there is something to put there, so
   the page never keeps a 260px gap for an empty aside. */
.grid-listing {
    grid-template-columns: 1fr;
    grid-template-areas:
        "search"
        "results";
    align-items: start;
    /* The band is the height of the band, whatever stands under it: naming the
       rows sends every bit of spare height into the results row rather than
       sharing it out and landing half of it as a gap under the search. */
    grid-template-rows: auto 1fr;
}

/* The search band is the width of the page, so it lies over both columns and
   whatever is beside the listing starts under it. */
.grid-listing:has(> aside) {
    grid-template-columns: 260px 1fr;
    grid-template-areas:
        "search search"
        "aside  results";
}

.grid-listing > .listing-search { grid-area: search; }
.grid-listing > aside { grid-area: aside; }
.grid-listing > section { grid-area: results; }

/* Nothing in the listing may make the listing wider than the page it is on.
   Left alone, a column's floor is the widest thing inside it that refuses to be
   narrowed, and on a phone that is the filter strip: the strip is one row that
   scrolls sideways, so laid end to end it asks for every filter at once — some
   600px of them — and the column grows to meet it. The page goes sideways with
   it, and the band, which measures its own bleed against the column, is handed a
   width bigger than the window: the colour stops short of both edges and the box
   is dragged off centre. Naught is the floor the strip is built to scroll
   against, and it is what keeps the listing the width of the page. */
.grid-listing > * { min-width: 0; }

/* Filter / multi-field form rows that reflow to fit the available width. */
.auto-grid {
    display: grid;
    gap: .6rem;
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* A province/municipality pair that belongs to the grid around it rather than
   sharing one cell of it — the two selects line up with the fields beside them.
   The form-group's own bottom margin has to go with it: the row is aligned on
   its baseline, so a margin under only two of the fields lifts those two above
   the rest of them. */
.location-pair { display: contents; }
.location-pair > .form-group { margin-bottom: 0; }

/* The search row's second field, and the municipality that joins it when a
   location is what is being searched by. Both belong to the row's own grid
   rather than to a cell of it, so the wrapper steps out of the way. */
.search-mode { display: contents; }

/* Under the field it changes. The row it sits in is aligned on its top edge
   rather than its bottom, so a line under one of the fields leaves the fields
   themselves lined up with each other. */
.search-mode-change {
    display: block;
    font-size: .78rem;
    margin-top: .3rem;
}

.search-mode-change[hidden] { display: none; }

.listing-search .auto-grid { align-items: start; }

/* The search box and the filters under it are one question asked twice, so they
   are read out of one band in the soft end of the site's primary colour: what
   narrows the listing is a block of the brand across the top of the page, light
   enough to be read off rather than a slab of the full orange, and the results
   below it sit on the page itself the way every other card does.

   The colour runs the whole width of the window at every size — the band is a
   band, not a card, so it has no edges of its own to round off. It is written
   inside the container like everything else, and steps back out of it: the
   margin is the distance from the middle of the band to the edge of the window,
   which is exactly how far there is to go, and the padding is that same distance
   again — so the colour reaches the edges while what is written on it stays
   lined up with the results underneath. */
.listing-search {
    background: var(--primary-soft);
    margin-inline: calc(50% - 50vw);
    padding: 1rem calc(50vw - 50%);
}

/* Anything written straight onto that colour reads in the navy, which is the
   darkest thing the palette has and the plainest against a tint. */
.listing-search a { color: var(--navy); }
.listing-search a:hover { color: var(--navy-light); }

@media (max-width: 860px) {
    .grid-2, .grid-3, .grid-detail { grid-template-columns: 1fr; }

    /* One column, and whatever is beside the listing below it: the filters are
       under the search box now, so the hiring locations and the maps are what
       would otherwise stand between a phone and the jobs it came for. Nothing
       spans two rows here, so the row sizing that keeps the wide layout honest
       is dropped with it. */
    .grid-listing,
    .grid-listing:has(> aside) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "results"
            "aside";
        grid-template-rows: none;
    }
}

/* The search row on a phone: the box to type in and the field beside it each
   get the whole width rather than a share of it. */
@media (max-width: 640px) {
    .listing-search .auto-grid { grid-template-columns: 1fr; }
}

.flex { display: flex; gap: .75rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }

.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.text-muted { color: var(--ink-soft); }
.text-small { font-size: .85rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Top navigation ----------------------------------------------------------- */
/* The bar is white, and it stays at the top of the page rather than over it: it
   scrolls away with everything else, and what follows it begins where it ends.
   Nothing is drawn under it — no hairline, no shadow — so the white simply runs
   into whatever the page opens with, which on a listing is the search band's own
   colour meeting it edge to edge. The eye goes to the brand and the active link
   rather than to a rule between them. */

.navbar {
    background: #fff;
    color: var(--ink);
}

.navbar-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 60px;
    flex-wrap: wrap;
    padding: .4rem 0;
}

.brand {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--navy);
    letter-spacing: -.02em;
}

.brand:hover { text-decoration: none; }
.brand .dot { color: var(--primary); }

.nav-links { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }

.nav-link {
    color: var(--ink-soft);
    padding: .45rem .8rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: .92rem;
}

.nav-link:hover { color: var(--navy); background: var(--navy-tint); text-decoration: none; }

/* Where you are is said twice — a warm tint and the orange underline — so it
   still reads without relying on colour alone. */
.nav-link.active { color: var(--primary-dark); background: var(--primary-tint); font-weight: 600; }
.nav-link.active { box-shadow: inset 0 -2px 0 var(--primary); }

.nav-spacer { flex: 1; }

/* Nav menu wrapper + mobile hamburger toggle */
.nav-menu { display: flex; flex: 1; align-items: center; gap: 1.25rem; }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    padding: 9px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-toggle:hover { background: var(--navy-tint); }
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
}

/* On the front bar it is the small size. It only ever shows on a phone, beside
   a 28px logo and above the menu it opens, and at 42px square it read as the
   loudest thing on the bar. The admin sidebar keeps the larger one: there it is
   the only control in its band. */
.navbar .nav-toggle {
    width: 32px;
    height: 32px;
    gap: 4px;
    padding: 7px 6px;
}

/* The admin sidebar is still dark, so its hamburger stays white. */
.admin-sidebar .nav-toggle:hover { background: var(--navy-light); }
.admin-sidebar .nav-toggle span { background: #fff; }

/* Impersonation banner ----------------------------------------------------- */

.impersonation-bar {
    background: var(--warning-bg);
    color: var(--warning);
    font-size: .88rem;
    font-weight: 500;
    padding: .5rem 0;
    border-bottom: 1px solid var(--primary-soft);
}
.impersonation-bar .btn-ghost { background: #fff; }

/* Buttons ------------------------------------------------------------------ */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background .15s ease;
}

.btn:hover { background: var(--primary-dark); text-decoration: none; color: #fff; }

.btn-secondary { background: var(--navy); }
.btn-secondary:hover { background: var(--navy-light); }

.btn-outline {
    background: transparent;
    color: var(--primary-dark);
    border-color: var(--primary);
}
.btn-outline:hover { background: var(--primary-tint); color: var(--primary-dark); }

.btn-ghost {
    background: transparent;
    color: var(--navy-light);
    border-color: var(--line);
}
.btn-ghost:hover { background: var(--navy-tint); color: var(--navy); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #7F1D1D; }

.btn-sm { padding: .3rem .7rem; font-size: .82rem; }
.btn-block { display: block; width: 100%; }

/* Cards -------------------------------------------------------------------- */

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
}

.card + .card { margin-top: 1rem; }

.card-title { margin-bottom: 1rem; }

.feed-card {
    display: block;
    /* The save pill sits in the card's own top-right corner. */
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--shadow);
    transition: border-color .15s ease;
    color: inherit;
}

/* Hovering only warms the border. The card used to lift a pixel with it, which
   read as the whole listing twitching under the pointer. */
.feed-card:hover { border-color: var(--primary-soft); text-decoration: none; }
.feed-card + .feed-card { margin-top: .9rem; }
.feed-card.featured { border-left: 4px solid var(--primary); }

.feed-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--navy); margin: 0; }

/* A job's name in a listing: upper case, and let out by 0.04rem — enough to give
   a line of capitals the air it needs to be read at a glance, without setting the
   title as a row of separate letters. The wording only — the Featured and Urgent
   badges beside it are set the way every badge on the site is, which is why the
   class is on the link and not on the line it is in. */
.job-title {
    text-transform: uppercase;
    letter-spacing: .04rem;
}
.feed-meta { color: var(--ink-soft); font-size: .85rem; margin-top: .25rem; }
.feed-address { font-size: .75rem; }
.feed-excerpt { color: var(--ink-soft); font-size: .9rem; margin: .5rem 0 0; }

.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: var(--font-heading);
    flex-shrink: 0;
}

/* A company's own picture, at the head of its public page. Contained rather
   than cropped: a logo is the wrong thing to cut a square out of. */
.company-logo {
    display: block;
    max-width: 200px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 0 .9rem;
}

/* Badges ------------------------------------------------------------------- */

.badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--navy-tint);
    color: var(--navy-light);
    white-space: nowrap;
}

.badge-primary { background: var(--primary-tint); color: var(--primary-dark); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-muted { background: var(--navy-tint); color: var(--ink-soft); }

/* Forms -------------------------------------------------------------------- */

.form-group { margin-bottom: 1rem; }

label {
    display: block;
    font-weight: 500;
    font-size: .88rem;
    color: var(--navy);
    margin-bottom: .3rem;
}

/* The heading over a group of radios: a <label> there would belong to one of
   them, so it is a span that reads exactly like one. */
.form-label {
    display: block;
    font-weight: 500;
    font-size: .88rem;
    color: var(--navy);
    margin-bottom: .4rem;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="url"], input[type="search"],
input[type="tel"], select, textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: .95rem;
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
}

/* Safari draws search fields as pills with its own inner decoration; strip it
   back so they sit flush with every other field. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--primary-soft);
    outline-offset: 0;
    border-color: var(--primary);
}

textarea { min-height: 110px; resize: vertical; }

.form-hint { font-size: .8rem; color: var(--ink-soft); margin-top: .25rem; }
.form-error { font-size: .82rem; color: var(--danger); margin-top: .25rem; }
.text-danger { color: var(--danger); }

/* The AI Assistant tray above the description editor: a tinted well, so what
   the assistant is being fed reads as separate from the post itself. */
.ai-panel {
    margin: .5rem 0 .75rem;
    padding: .9rem 1rem .75rem;
    border: 1px dashed var(--primary-soft);
    border-radius: var(--radius-sm);
    background: var(--primary-tint);
}

.ai-panel textarea { min-height: 0; }
.ai-panel .form-group { margin-bottom: .6rem; }

/* One resource's worth of permissions on the role form. */
.permission-group {
    margin-top: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--navy-tint);
    border-radius: var(--radius-sm);
}

.checkbox-row { display: flex; align-items: center; gap: .5rem; }
.checkbox-row label { margin: 0; font-weight: 400; }
.checkbox-row input { width: auto; }

/* A short set of radios laid out along one line rather than down the page —
   for a question whose answers are single words, like the account type at
   sign-up. It wraps, so a narrow phone stacks them rather than clipping them. */
.radio-row { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }

.radio-inline {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.radio-inline input { width: auto; margin: 0; flex-shrink: 0; }

/* Toggle switch ------------------------------------------------------------ */

.toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
    position: absolute; inset: 0;
    background: var(--line);
    border-radius: 999px;
    transition: background .15s ease;
    cursor: pointer;
}
.toggle .slider::before {
    content: "";
    position: absolute;
    width: 20px; height: 20px;
    left: 3px; top: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.toggle input:checked + .slider { background: var(--primary); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

.hub-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--navy-tint);
}
.hub-toggle-row:last-child { border-bottom: 0; }

/* Alerts ------------------------------------------------------------------- */

.alert {
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 500;
}

.alert-success { background: var(--success-bg); color: var(--success); }
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-info { background: var(--primary-tint); color: var(--primary-dark); }
.alert-warning { background: var(--warning-bg); color: var(--warning); }

/* Tables ------------------------------------------------------------------- */

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

table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    background: #fff;
}

.table th {
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
    padding: .6rem .75rem;
    border-bottom: 2px solid var(--line);
}

.table td { padding: .65rem .75rem; border-bottom: 1px solid var(--navy-tint); vertical-align: top; }

/* A parked edit, word by word: what comes out and what goes in, so an admin
   reads the change rather than two paragraphs of the same text. */
.diff-cell { max-width: 32rem; white-space: pre-wrap; word-break: break-word; }

.diff-out, .diff-in { border-radius: 3px; padding: 0 .12rem; text-decoration: none; }
.diff-out { background: var(--danger-bg); color: var(--danger); text-decoration: line-through; }
.diff-in { background: var(--success-bg); color: var(--success); }

.diff-key { display: inline-flex; gap: .4rem; margin-left: .25rem; }
.table tr:hover td { background: var(--navy-tint); }

/* Pagination ----------------------------------------------------------------- */

.pagination { display: flex; gap: .35rem; margin-top: 1.5rem; flex-wrap: wrap; }

.pagination a, .pagination span {
    padding: .35rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: .88rem;
    color: var(--navy-light);
}

.pagination a:hover { border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }
.pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pagination .disabled { color: var(--line); }

/* Category chips ------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
    display: inline-block;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy-light);
    font-size: .85rem;
    font-weight: 500;
}

.chip:hover { border-color: var(--primary); color: var(--primary-dark); text-decoration: none; }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Job listing filters --------------------------------------------------------- */
/* The bar under a job listing's search box. Every group is a link that says what
   it narrows and opens on the choices when the pointer reaches it. It wraps
   rather than scrolls, so no filter is ever off the end of it on a narrow
   screen. */

/* Positioned, because the panels are placed against the bar rather than against
   the links they belong to. A panel hung off its own link falls off the side of
   the page as soon as that link is near the right of a narrow column — and which
   filter is open is already said twice, by the caret and by the wording
   deepening, so the panel does not have to say it a third time.

   --filter-panel is the one place the two placements are named, and the script
   reads it rather than carrying a copy of the breakpoint: "link" is a panel under
   the link it belongs to, "bar" is a panel under the whole bar. */
.filter-bar {
    --filter-panel: link;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.1rem;
    margin-top: .6rem;
}

/* A link rather than a button: nothing is drawn around it and nothing is drawn
   under it either — the pointer is what opens it, so there is no click for an
   underline to promise. Nothing here changes size when one opens, so opening a
   filter never moves the bar under the search box. */
.filter-drop-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem 0;
    border: 0;
    background: none;
    color: var(--navy);
    font-size: .87rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* The wording, which carries no line of its own: a filter opens on hover, and an
   underline on something that is not waiting to be clicked reads as a promise the
   bar does not keep. */
.filter-drop-name {
    text-decoration: none;
}

/* The browser's own disclosure triangle, in both dialects: the caret below is
   the one this bar draws. */
.filter-drop-link::-webkit-details-marker { display: none; }
.filter-drop-link::marker { content: ""; }

.filter-drop-link:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }

/* Which one the pointer is on, and which one is open — the same filter now, so
   both say it the same way: the wording and its caret deepen to --primary-dark
   and stay there until the pointer leaves. Down rather than up, because the box
   under it is a tint: white on it is barely there, and the full --primary is only
   a shade off the box itself. */
.filter-drop-link:hover,
.filter-drop[open] > .filter-drop-link {
    color: var(--primary-dark);
}

/* Down at rest, up while it is open — one square with two of its sides drawn,
   turned a quarter further round. */
.filter-caret {
    width: .4rem;
    height: .4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.12rem) rotate(45deg);
}

.filter-drop[open] > .filter-drop-link .filter-caret {
    transform: translateY(.06rem) rotate(225deg);
}

/* How many answers a closed filter is holding, so nothing is narrowing the
   listing out of sight. Drawn in --primary-dark on the box's tint: a white pill
   there has barely an edge to it, and the full --primary is the colour the box is
   already a shade of. */
.filter-drop-count {
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--primary-dark);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

/* What it opens: a panel under the bar and over the listing, rather than one
   that pushes the listing down. Never wider than the bar, and starting where the
   bar starts, so it cannot reach past the edge of the page whatever the width.

   Flush against the link above it rather than a few pixels clear: the pointer is
   what holds it open, and a gap between the two is a gap the pointer crosses on
   the way in — which would be the pointer leaving the filter. */
.filter-drop-panel {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 13rem;
    max-width: 100%;
    padding: .8rem .9rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

/* One button for the whole box, under the filters rather than beside the field
   to type in: what was typed, what was picked and every filter opened on the way
   down are one question, and Search is what asks it. There is no Apply of its
   own — a bar that has to be applied before it is searched is the same search
   asked for twice. */
.search-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: .8rem;
}

/* On a phone the bar is one row that scrolls under the thumb rather than a block
   that wraps: every filter is still on it, in the order they are written, and
   swiping sideways is what reaches the ones past the edge. A wrapped bar put
   eight filters between the search field and the jobs; a strip puts the first of
   them there and keeps the rest a swipe away.

   The scrollbar is left undrawn: a phone's is an overlay that fades anyway, and
   the filter cut off at the edge is what says the row goes on. */
@media (max-width: 640px) {
    .filter-bar {
        --filter-panel: window;
        flex-wrap: nowrap;
        gap: 1.1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        /* The focus ring on the last filter is drawn outside the link, so the
           strip is given the room to keep it rather than clipping it. */
        padding-bottom: .2rem;
    }

    .filter-bar::-webkit-scrollbar { display: none; }

    /* Each filter at its own width, on one line: a link squeezed to fit is a
       link the strip has nothing to scroll past. */
    .filter-drop { flex: 0 0 auto; }
    .filter-drop-link { white-space: nowrap; }

    /* Measured from the window rather than from the bar, which is why it can
       hang under its own filter at all: the strip clips whatever grows out of
       it, and a panel placed against the window is not inside the strip to be
       clipped. Where it lands is the script's, off the filter it belongs to;
       how wide it may grow is here, so it never reaches past the screen. */
    .filter-drop-panel {
        position: fixed;
        /* Neither offset given, so a panel opened before the script has run is
           already where it belongs: no top and no left is the place it would
           have taken in the flow — under its own filter — measured against the
           window instead of laid out inside the strip. */
        top: auto;
        left: auto;
        max-width: calc(100vw - 1.5rem);
    }
}

/* Every choice is in the panel, however many there are: a list long enough to
   outgrow the panel scrolls inside it. Nothing is folded away behind a "View
   more" — a filter that hides half its answers is a filter half of the listing
   cannot be narrowed by. */
.filter-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-height: 15rem;
    overflow-y: auto;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .87rem;
    font-weight: 400;
    color: var(--ink-soft);
    cursor: pointer;
}

.filter-option:hover { color: var(--primary-dark); }
.filter-option input { width: auto; margin: 0; flex-shrink: 0; }

/* Passing a job on ------------------------------------------------------------ */
/* Icons only, with the wording kept for anyone reading the page aloud. */

.share-links { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.share-label {
    font-size: .82rem;
    color: var(--ink-soft);
    margin-right: .15rem;
}

.share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy-light);
    cursor: pointer;
}

.share-link:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
    text-decoration: none;
}

/* A company's video. The frame keeps the player's own shape at any width, so
   the page never has to guess a height for it. */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--navy-tint);
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Putting a job aside. A pill rather than one of the round share buttons: it
   is the only control on a card, so it says what it does in words. Saved, it
   fills in — the bookmark is solid and the pill takes the primary tint, so a
   listing shows at a glance which of them are already put by. */
.save-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-soft);
    cursor: pointer;
}

.save-toggle:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.save-toggle.is-saved {
    border-color: var(--primary-soft);
    background: var(--primary-tint);
    color: var(--primary-dark);
}

/* On a card it sits in the corner, and the title keeps clear of it — the title
   is the only line long enough to reach that far across. */
.feed-card .save-toggle { position: absolute; top: .9rem; right: .9rem; }
.feed-card .save-toggle + .feed-title { padding-right: 6rem; }

/* The report flag borrows the share button's shape but never its colour —
   flagging a post is not something to invite by accident. */
.report-flag { display: inline-flex; }
.report-link { color: var(--ink-soft); }
.report-link:hover { border-color: var(--danger); color: var(--danger); }

/* Read aloud, never drawn. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Admin layout ---------------------------------------------------------------- */

.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }

.admin-sidebar {
    background: var(--navy);
    color: #fff;
    padding: 1.25rem .9rem;
}

/* The admin sidebar keeps the dark chrome, so its brand keeps the white. */
.admin-sidebar .brand { display: block; padding: 0 .5rem .9rem; font-size: 1.2rem; color: #fff; }

.admin-sidebar-top { display: flex; align-items: center; justify-content: space-between; }
.admin-sidebar-top .brand { padding-bottom: .9rem; }

.admin-nav { display: flex; flex-direction: column; gap: 2px; }

.admin-nav a {
    color: var(--navy-muted);
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
}

.admin-nav a:hover { background: var(--navy-light); color: #fff; text-decoration: none; }
.admin-nav a.active { background: var(--primary); color: #fff; }

.admin-nav .nav-section {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--navy-muted);
    padding: .9rem .75rem .25rem;
    font-family: var(--font-heading);
    font-weight: 500;
}

.admin-main { padding: 1.75rem 2rem 3rem; max-width: 1100px; }

@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-main { padding: 1.25rem 1rem 3rem; }
}

/* Stats -------------------------------------------------------------------- */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow);
}

.stat-card .stat-value {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--navy);
}

.stat-card .stat-label { color: var(--ink-soft); font-size: .85rem; font-weight: 500; }

/* Footer ------------------------------------------------------------------- */

.footer {
    background: #fff;
    color: var(--ink-soft);
    padding: 2rem 0;
    margin-top: 3rem;
    font-size: .88rem;
    border-top: 1px solid var(--line);
}

.footer a { color: var(--navy-light); font-weight: 500; }
.footer a:hover { color: var(--primary-dark); }
.footer .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: .75rem; }

/* Auth pages ----------------------------------------------------------------- */

.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
}

/* Resume ------------------------------------------------------------------- */

.resume-header { border-bottom: 3px solid var(--primary); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.resume-header-row { display: flex; align-items: flex-start; gap: 1rem; }
.resume-header-row > div { min-width: 0; }

/* The 2x2 ID photo, kept square whatever shape was uploaded. */
.resume-photo {
    flex: none;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--navy-tint);
}
.resume-section-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--primary-dark);
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .08em;
    margin: 1.5rem 0 .5rem;
}

.timeline-item { padding: .6rem 0; border-bottom: 1px solid var(--navy-tint); }
.timeline-item:last-child { border-bottom: 0; }

/* Business hours ------------------------------------------------------------- */

.business-hours-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .35rem 0;
    border-bottom: 1px solid var(--navy-tint);
}

.business-hours-row:last-child { border-bottom: 0; }
.business-hours-row input[type="time"] { width: auto; margin: 0; }

/* Floating support box (Employer Hub) ---------------------------------------- */

.support-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; }

.support-chat-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(30, 42, 68, .25);
    cursor: pointer;
    user-select: none;
}

.support-chat-button:hover { background: var(--primary-dark); }

.support-chat-panel {
    display: none;
    width: 320px;
    max-width: calc(100vw - 2.5rem);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(30, 42, 68, .22);
    margin-bottom: .6rem;
    overflow: hidden;
}

.support-chat-checkbox:checked ~ .support-chat-panel { display: block; }
.support-chat-checkbox:checked ~ .support-chat-button { display: none; }

.support-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    background: var(--navy);
    color: #fff;
    padding: .85rem 1rem;
}

.support-chat-header .text-small { color: var(--navy-muted); }

.support-chat-close {
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--navy-muted);
}

.support-chat-close:hover { color: #fff; }

.support-chat-body { padding: 1rem; max-height: 60vh; overflow-y: auto; }
.support-chat-body .form-group { margin-bottom: .75rem; }
.support-chat-body input[readonly] { background: var(--navy-tint); color: var(--ink-soft); }

@media (max-width: 480px) {
    .support-chat { right: .75rem; bottom: .75rem; left: .75rem; }
    .support-chat-panel { width: 100%; }
    .support-chat-button { width: 100%; justify-content: center; }
}

/* Responsiveness rating + its tooltip ---------------------------------------- */

.responsiveness { display: inline-flex; align-items: center; gap: .35rem; }
.responsiveness-score { font-weight: 600; color: var(--primary-dark); }

.tooltip { position: relative; display: inline-flex; cursor: help; }

/* The question mark itself — brand orange, as asked for. */
.tooltip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--primary-tint);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
}

.tooltip-body {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + .4rem);
    z-index: 75;
    width: 280px;
    max-width: 78vw;
    padding: .75rem;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(30, 42, 68, .2);
    font-weight: 400;
    text-align: left;
}

.tooltip:hover .tooltip-body,
.tooltip:focus .tooltip-body,
.tooltip:focus-within .tooltip-body { display: block; }

.tooltip-body > strong { display: block; margin-bottom: .25rem; }
.tooltip-body .text-small { display: block; color: var(--ink-soft); }

.tooltip-scale { display: block; margin-top: .5rem; font-size: .78rem; color: var(--ink-soft); }
.tooltip-scale span { display: block; }
.tooltip-scale b { color: var(--primary-dark); }

/* Navbar submenu (the @handle menu) ------------------------------------------ */
/* Checkbox-driven, like the mobile nav toggle — no JavaScript. */

.nav-submenu { position: relative; }

.nav-submenu > label { cursor: pointer; user-select: none; }

.nav-submenu-items {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .35rem);
    z-index: 70;
    min-width: 160px;
    padding: .35rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(30, 42, 68, .18);
}

.nav-submenu-checkbox:checked ~ .nav-submenu-items { display: block; }

.nav-submenu-items a {
    display: block;
    padding: .45rem .6rem;
    border-radius: 6px;
    color: var(--ink);
    font-size: .9rem;
}

.nav-submenu-items a:hover { background: var(--navy-tint); text-decoration: none; }
.nav-submenu-items a.active { color: var(--primary-dark); font-weight: 600; }

@media (max-width: 768px) {
    /* Stacked nav — let the submenu sit in the flow rather than float. */
    .nav-submenu-items { position: static; box-shadow: none; border: 0; padding: 0 0 0 .75rem; }
}

/* Dismissible dialog --------------------------------------------------------- */
/* Driven by a hidden checkbox — no JavaScript. The backdrop doubles as a
   dismiss target, sitting behind the panel. */

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(30, 42, 68, .55);
    padding: 1rem;
    align-items: center;
    justify-content: center;
}

.modal-toggle:checked ~ .modal-backdrop { display: flex; }

.modal-dismiss-area { position: absolute; inset: 0; cursor: default; }

.modal-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(30, 42, 68, .3);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    background: var(--navy);
    color: #fff;
    padding: .85rem 1.15rem;
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header h3 { color: #fff; }

.modal-close {
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--navy-muted);
}

.modal-close:hover { color: #fff; }

.modal-body { padding: 1.15rem; }
.modal-body ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.modal-body li { margin-bottom: .25rem; }

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    padding: 0 1.15rem 1.15rem;
}

/* Misc ----------------------------------------------------------------------- */

.inline-form { display: inline; }

/* A <label> that opens a dialog but should read as an inline link. */
.link-button { color: var(--primary-dark); cursor: pointer; }
.link-button:hover { text-decoration: underline; }

/* A <summary> that reads as an inline link: the box under it is one somebody may
   never want, so the wording waits on its own line and the browser's disclosure
   triangle comes off — a triangle says "outline", and this is a link. */
.disclosure-link {
    display: inline-block;
    color: var(--primary-dark);
    cursor: pointer;
    list-style: none;
}

.disclosure-link::-webkit-details-marker { display: none; }
.disclosure-link::marker { content: ""; }
.disclosure-link:hover { text-decoration: underline; }
.disclosure-link:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; }

/* Job title link inside a listing card — inherits the card's heading style. */
.feed-link { color: inherit; }
.feed-link:hover { color: var(--primary-dark); }

.empty-state {
    text-align: center;
    color: var(--ink-soft);
    padding: 2.5rem 1rem;
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* ==========================================================================
   Responsive / mobile
   ========================================================================== */

/* Front navbar collapses into a hamburger menu on narrow screens. */
@media (max-width: 768px) {
    .navbar-inner { gap: .5rem; }

    .nav-toggle { display: flex; }

    .nav-menu {
        display: none;
        flex: 0 0 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        padding: .5rem 0 .35rem;
        /* Opened, the menu is its own band under the bar rather than more of it. */
        border-top: 1px solid var(--navy-tint);
    }

    .nav-toggle-checkbox:checked ~ .nav-menu { display: flex; }

    .nav-menu .nav-links { flex-direction: column; align-items: stretch; gap: .15rem; width: 100%; }
    .nav-menu .nav-spacer { display: none; }

    .nav-link { padding: .6rem .8rem; }

    .nav-menu .btn,
    .nav-menu .inline-form,
    .nav-menu .inline-form .btn { display: block; width: 100%; }
}

/* Admin sidebar collapses into a hamburger menu on narrow screens. */
@media (max-width: 860px) {
    .admin-sidebar { padding: .9rem 1rem; }
    .admin-sidebar-top .brand { padding-bottom: 0; }

    .admin-sidebar .nav-toggle { display: flex; }

    .admin-nav { display: none; padding-top: .75rem; }
    #admin-nav-toggle:checked ~ .admin-nav { display: flex; }
}

/* General small-screen tuning. */
@media (max-width: 640px) {
    .container { padding: 0 .85rem; }

    h1 { font-size: 1.45rem; }
    h2 { font-size: 1.2rem; }

    .card { padding: 1rem 1.1rem; }

    /* Keep header rows (title + actions) from crowding; let actions wrap. */
    .flex-between { align-items: flex-start; }

    /* Search / action forms in page headers stack cleanly. */
    .flex-between form.flex { width: 100%; }
    .flex-between form.flex input[type="text"],
    .flex-between form.flex input[type="email"] { flex: 1; min-width: 0; }

    .auth-card { padding: 1.5rem 1.25rem; }

    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==========================================================================
   Print
   ========================================================================== */
/* A job post is worth printing; the chrome around it is not. */

@media print {
    .navbar,
    .footer,
    .share-links,
    .report-flag,
    .ad-slot,
    .map-card,
    .pagination,
    .btn {
        display: none !important;
    }

    .page { padding: 0; }

    .card {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .grid-detail { grid-template-columns: 1fr; }

    .grid-listing,
    .grid-listing:has(> aside) {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "results"
            "aside";
        grid-template-rows: none;
    }

    /* The band is measured against the window, and a sheet of paper is not one:
       on paper it is a block like any other, inside the margins. */
    .listing-search {
        margin-inline: 0;
        padding: 0;
        background: none;
    }

    a[href]::after { content: ""; }
}