/* ═══════════════════════════════════════════════════════════
   BRAVOS — RESPONSIVE CORRECTIONS
   Loaded last so it can correct the earlier sheets without
   editing them. Every rule here traces to a measured failure in
   the Playwright audit (scratchpad/resp_audit.py), not a guess.

   Deliberately NOT here: `overflow-x: hidden` on html/body. It
   would hide horizontal overflow rather than fix it, and it
   breaks position:sticky. The audit is the guard instead.
   ═══════════════════════════════════════════════════════════ */

/* ── Safe universal guards ───────────────────────────────── */

/* Media should never dictate layout width. */
img, video, canvas, svg, iframe, embed, object {
  max-width: 100%;
}

img, video { height: auto; }

/* Flex and grid children default to min-width:auto, which refuses to shrink
   below their content and is the usual cause of a stubborn overflow. */
.container > *,
.nav-inner > *,
.footer-grid > *,
.hero-inner > * {
  min-width: 0;
}

/* Long unbroken strings — emails, URLs, file names — must wrap rather than
   push the page wide. `anywhere` only kicks in when there is no better break. */
p, li, td, th, dd, dt, blockquote,
h1, h2, h3, h4, h5, h6,
.footer-contact-list li,
.bd-file-name, .bd-folder-name, .bd-share-person-email {
  overflow-wrap: anywhere;
}

/* Tables are the classic silent overflow. Let them scroll in place. */
table { max-width: 100%; }

/* ── Navbar ──────────────────────────────────────────────────
   The desktop nav needs 834px to lay out its seven links plus the
   auth buttons, but the hamburger only appeared at <=768px. That
   left 769-833px — iPad Air at 820px sits right in it — rendering
   the Sign Up button ~14px past the right edge on every page.
   The mobile nav now starts at 900px, clear of the 834px floor.
   ──────────────────────────────────────────────────────────── */

/* ── The eight-link band (trap 14) ──────────────────────────────────────────
   Adding Resume to the bar took the seven-link measurement from 834px to
   1068px, while the hamburger still only takes over at 900px. That left
   901-1067px overflowing: the links spilled past their own container and
   Sign Up sat outside the right edge — the same defect the 769-833px dead
   band was, one breakpoint further up.

   Handing every 1024px laptop and landscape iPad a hamburger to fix it would
   be a worse trade, so the bar tightens through the band instead. Padding and
   gaps only; nothing is hidden and no font shrinks, and full spacing returns
   at 1101px. Measured, not guessed — see the widths in tests/browser/nav_check.py. */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-inner  { padding: 0 14px; gap: 4px; }
  .nav-links  { gap: 0; }
  .nav-link   { padding: 7px 7px; }
  .nav-auth   { gap: 6px; }
}


@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    padding: 16px;
    gap: 4px;
    border-top: 1px solid var(--gray-100);
    box-shadow: var(--shadow-lg);
    transform: translateY(-110%);
    z-index: 999;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;

    /* Sliding it out of view is not enough. translateY(-110%) still leaves the
       panel's lower edge at y≈28px, and it stayed visibility:visible /
       pointer-events:auto — an invisible strip across the top of every page
       that swallowed clicks meant for the content underneath. Hiding it also
       takes its links out of the tab order while the menu is closed. */
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--trans), visibility var(--trans);
  }

  .nav-links.open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  /* margin-left:auto, not a justify-content change on .nav-inner. Below 900px
     .nav-links becomes a fixed sheet and .nav-auth is hidden, so the flex row
     holds only the logo and the hamburger — with nothing between them they
     packed together on the left, leaving the button next to the wordmark and
     the whole right half of the bar empty. The auto margin eats the free space
     instead, and it keeps working whatever else is or isn't in the row. */
  .hamburger { display: flex; margin-left: auto; }
  .nav-auth  { display: none; }

  /* ── The sheet ──
     It was a 359px-tall floating card in a 932px viewport, so the page showed
     through beneath it and it read as a half-finished dropdown. Anchoring the
     bottom makes it a proper full-height sheet with nothing behind it. */
  .nav-links {
    /* Explicit height rather than top+bottom. The auto-stretch resolved to a
       29px box here, and dvh is the better unit anyway: it tracks the mobile
       browser's collapsing address bar, which vh does not. */
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    bottom: 0;
    max-height: none;
    border-top: 1px solid var(--gray-100);
    box-shadow: none;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 2px;

    /* main.css sets align-items:center for the horizontal desktop bar. Once
       the flex direction turns vertical that centres every row — the reason
       the links, the active pill and the buttons all floated mid-panel. */
    align-items: stretch;
    justify-content: flex-start;
  }

  .nav-links li { width: 100%; }

  /* Inside the sheet the rows are full width, so the link can say what it
     actually is. Pair with .nav-full in main.css. */
  .nav-short { display: none; }
  .nav-full  { display: inline; }

  /* .nav-link is an <a>, inline by default, so the previous `width:100%` did
     nothing at all and the tap target was only as wide as the word itself. */
  .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: .98rem;
    font-weight: 500;
    text-align: left;
    white-space: normal;
    position: relative;
  }

  /* The desktop hover underline animates oddly in a vertical sheet. */
  .nav-link::after { display: none; }

  /* Current page reads as a full row with a left marker instead of a pill
     hovering in the middle of the panel. */
  .nav-link.nav-active {
    background: rgba(10,10,10, .07);
    color: var(--navy);
    font-weight: 600;
  }

  .nav-link.nav-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--navy);
  }

  /* Auth pinned to the foot of the sheet, full width. `margin-top:auto` needs
     the sheet to be full height, which is why the explicit height matters. */
  .nav-menu-auth {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
  }

  .nav-menu-auth .btn-nav-login,
  .nav-menu-auth .btn-nav-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
  }
}

/* ── Clearing the fixed navbar ───────────────────────────────
   .navbar is position:fixed, so it covers whatever sits at the top of the
   document. Only .hero, .page-hero and .auth-panel-right ever compensated —
   every other page (Saved Jobs, My Applications, job detail, Post a Job,
   Register) put its heading straight under the header, at every width
   including 1920px desktop.

   Rather than patch each wrapper, give <main> the offset once and exclude
   the sections that already include it. Pages added later inherit the fix.
   ──────────────────────────────────────────────────────────── */

body:not(.bd-page):not(.nrb-page) #main-content:not(:has(> .hero)):not(:has(> .page-hero)) {
  padding-top: var(--nav-h);
}

/* Full-height panels must lose the same amount or the page gains a scrollbar. */
body:not(.bd-page):not(.nrb-page) #main-content:not(:has(> .hero)):not(:has(> .page-hero)) .auth-layout {
  min-height: calc(100vh - var(--nav-h));
}

/* ── Full-height centred sections on short viewports ─────────
   .hero is min-height:100vh with align-items:center. When its content is
   taller than the viewport — a landscape phone, a short desktop window, a
   Nest Hub — centred flex overflows in BOTH directions, so the top of the
   heading is pushed above y=0 and disappears behind the fixed navbar.

   `safe center` is the fix: it centres normally, but falls back to start
   alignment the moment content would overflow, so nothing is ever cut off
   at the top. The explicit short-viewport rule backs it up for browsers
   without `safe` support.
   ──────────────────────────────────────────────────────────── */

.hero,
.page-hero,
.auth-split {
  align-items: safe center;
}

@media (max-height: 760px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-h) + 36px);
    padding-bottom: 52px;
  }
}

/* Landscape phones are short and wide — same problem, tighter budget. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    padding-top: calc(var(--nav-h) + 24px);
    padding-bottom: 36px;
  }
  .hero-heading { font-size: clamp(1.5rem, 5vh, 2.2rem); }
}

/* ── Touch devices ───────────────────────────────────────────
   A tap leaves :hover applied until you tap elsewhere, so the last
   link touched stays highlighted and reads as the current page —
   two rows appearing "selected" at once. Only paint hover where a
   real pointer exists.
   ──────────────────────────────────────────────────────────── */

@media (hover: none) {
  .nav-link:hover:not(.nav-active),
  .bd-nav-item:hover:not(.active) {
    background: transparent;
    color: var(--gray-600);
  }

  /* Keep a press state so taps still feel responsive. */
  .nav-link:active:not(.nav-active) { background: rgba(10,10,10, .07); }
}

/* ── Tablet band (601–900px) ─────────────────────────────── */

@media (max-width: 900px) and (min-width: 601px) {
  /* Two columns reads better than one on a tablet. */
  .features-grid,
  .why-grid,
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid    { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ── Small phones (<=420px) ──────────────────────────────── */

@media (max-width: 420px) {
  .container { padding: 0 14px; }

  /* Any grid still asking for a wide minimum collapses to one column. */
  .jb-jobs-grid,
  .features-grid,
  .why-grid,
  .resources-grid,
  .team-grid,
  .stats-row { grid-template-columns: 1fr !important; }

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

/* ── Galaxy Z Fold 5 folded / very narrow (<=360px) ──────── */

@media (max-width: 360px) {
  .container { padding: 0 12px; }

  .logo-wordmark { font-size: .95rem; letter-spacing: 1px; }

  /* The Drive's New button is fixed-padded; give it room to breathe. */
  .bd-new-btn { padding: 13px 20px 13px 16px; font-size: 13.5px; }
  .bd-content { padding: 14px 12px 24px; margin: 6px 6px 0; }
  .bd-crumbstrip { margin: 0 6px; padding: 9px 14px; }
  .bd-page-title { font-size: 18px; }
  .bd-topbar { padding: 8px 10px; gap: 6px; }
  .bd-search-form { height: 42px; padding: 0 14px; gap: 10px; }

  /* Two tiles per row is still readable at 344px. */
  .bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bd-file-thumb { height: 78px; }

  .bd-modal-box { padding: 20px; border-radius: 16px; }
  .bd-share-row { flex-wrap: wrap; }
  .bd-share-row .bd-modal-input { flex: 1 1 100%; }
}

/* ── Short viewports (Nest Hub 600px tall, phones landscape) ─ */

@media (max-height: 620px) and (min-width: 901px) {
  /* Drive is a fixed-height shell; on a short screen the sidebar
     must scroll rather than push the storage meter off-screen. */
  .bd-nav { overflow-y: auto; }
  .bd-sidebar { padding-top: 10px; }
  .bd-new-wrap { padding-bottom: 10px; }
}

/* ── Recruiter portals ───────────────────────────────────────
   All three portal shells are two-column grids on desktop: the dashboard rail
   (248px + 1fr), the auth split (46% / 54%) and the chooser (1fr / 1fr). Each
   has to become a single column on a phone or the content column ends up too
   narrow to hold its own children.

   The audit caught the chooser doing exactly that — two cards side by side put
   the page 14px past the viewport on a folded Galaxy Z Fold 5 at 344px.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .rc-choose-grid { grid-template-columns: 1fr; }

  .rc-auth { grid-template-columns: 1fr; }
  .rc-auth-side { padding: 34px 24px; }
  .rc-auth-h { font-size: 1.7rem; }
  .rc-auth-main { padding: 32px 22px; }

  /* The rail used to become a banner stacked above the content here, about
     600px of links before the page started. It now stays a sidebar down to
     768px and is a drawer below that: see "Phone shells" at the end. */
  .rc-main { padding: 22px 18px 44px; }
}

@media (max-width: 900px) {
  /* The resume viewer and the candidate panel stack rather than share a row. */
  .rc-two-col { grid-template-columns: 1fr; }
  .rc-resume { height: 460px; }
}

@media (max-width: 700px) {
  /* Three salary/vacancy columns are unreadable below ~700px. */
  .rc-grid3 { grid-template-columns: 1fr; }
  .rc-filterbar .rc-input { max-width: none; }
  /* A 72% bubble on a phone leaves a useless sliver of gutter. */
  .rc-msg-bubble { max-width: 88%; }
  .rc-form-foot { justify-content: stretch; }
  .rc-form-foot .rc-btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .rc-grid2 { grid-template-columns: 1fr; }
  .rc-choose { padding: 0 14px 56px; }
  .rc-choose-card { padding: 22px 18px; }
  .rc-stats { grid-template-columns: 1fr 1fr; }
  .rc-stat { padding: 14px; }
  .rc-stat-n { font-size: 1.5rem; }
  .rc-table th, .rc-table td { padding-left: 12px; padding-right: 12px; }
}

/* ── Print ───────────────────────────────────────────────── */

@media print {
  .navbar, .footer, .bd-sidebar, .bd-topbar, .flash-stack { display: none !important; }
  body { padding-top: 0 !important; }
}

/* ── Portal auth header on very narrow screens ──
   The three links fit everywhere except a folded Galaxy Z Fold (344px), where
   they pushed 2px of horizontal scroll onto all six recruiter auth pages. The
   two browse links are conveniences; the seeker sign-in is the one that stops
   somebody being stuck on the wrong door, so that is the one that stays. */
@media (max-width: 460px) {
  .rc-authbar { padding: 0 12px; gap: 8px; }
  .rc-authbar-links a:nth-child(1),
  .rc-authbar-links a:nth-child(2) { display: none; }
  .rc-authbar-links a { padding: 8px 6px; font-size: .8rem; }
  .rc-authbar-word { font-size: .85rem; letter-spacing: .04em; }
}

/* ── Home (hh-) ──────────────────────────────────────────────
   The home page's layout breakpoints, kept here with every other
   responsive rule. Grid tracks are minmax(0,1fr), never a bare 1fr: a
   bare 1fr is minmax(auto,1fr) and grows to its widest card's content,
   and the one-line job description is nowrap, which ran a single-column
   track to 485px on a 390px phone in the design preview.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hh-title { font-size: 3.1rem; }
  .hh-float-1 { right: -6px; }
  .hh-float-2 { right: -10px; }
}

@media (max-width: 900px) {
  .hh-hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 48px 28px; }
  /* "Preview matches the PDF" hangs 14px below the card; with no room
     under it the chip sat across the rule above the counts. */
  .hh-score { max-width: 340px; margin-bottom: 30px; }
  .hh-jobs,
  .hh-feats,
  .hh-portals,
  .hh-res { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hh-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hh-split + .hh-split { margin-top: 56px; }
  .hh-split-flip .hh-vis { order: 0; }
  .hh-cta-in { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .hh-wrap { padding: 0 18px; }
  .hh-title { font-size: 2.4rem; }
  .hh-lead { font-size: 1rem; }
  /* The search bar stacks by its own width now: a container query in
     home.css, since its column is narrow on desktops too. */
  .hh-hero-cta .hh-btn { flex: 1; }
  .hh-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .hh-jobs,
  .hh-feats,
  .hh-portals,
  .hh-res { grid-template-columns: minmax(0, 1fr); }
  .hh-sec { padding-block: 52px; }
  .hh-sh h2,
  .hh-split h2,
  .hh-cta h2 { font-size: 1.7rem; }
  .hh-float-1 { top: -12px; right: 8px; }
  .hh-float-2 { bottom: -14px; right: 8px; }
  .hh-cta-row .hh-btn { flex: 1; }
}

@media (max-width: 420px) {
  .hh-wrap { padding: 0 14px; }
  .hh-title { font-size: 2.1rem; }
}

/* ────────────────────────────────────────────────────────────
   Phone shells (October 2026)

   Measured before this: no page was wider than the screen, but on a phone
   - the candidate rail was a black strip scrolling sideways, its last tabs
     cut off ("Job...", "M..."), and it stayed that way on tablets up to 980px;
   - the recruiter rail stacked above every page, about 600px of links;
   - recruiter tables squeezed to one letter per line ("STATU S");
   - job search showed a screen of filters before the first job, and job
     detail put the side boxes above the job, Apply 1.5 screens down;
   - the docked Messaging bar sat over the bottom of every page.

   Widths: below 768px is a phone (tab bar, drawers, cards); 768px and up
   keeps the sidebars. The design is the "Bravos Responsive Design" canvas.

   Layers, against the list in CLAUDE.md trap 5: tab bar and apply bar 1040
   (under the 1050 message dock they replace, which is hidden where they
   show), backdrop 1190, sheets and drawers 1200.
   ──────────────────────────────────────────────────────────── */

/* Shared backdrop, created by drawer.js. */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(0, 0, 0, .48);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s;
}
.drawer-backdrop.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
html.drawer-is-open { overflow: hidden; }

/* Hidden at every width unless a phone rule below shows them. */
.sd-tabbar, .sd-sheet, .rc-topbar, .rc-rail-close,
.jb-apply-bar, .jb-filter-toggle, .jb-filter-close { display: none; }

/* Never break a status word or a column heading mid-word ("Expire d",
   "APPLICAN TS" at 1024px). */
.rc-pill, .sd-pill, .rc-table th { white-space: nowrap; }

/* ── Tablets: the sidebars stay sidebars ── */

@media (min-width: 768px) and (max-width: 980px) {
  /* seeker_dashboard.css turns the rail into a sideways strip at 980px.
     Between 768 and 980 there is room for a narrow column instead. */
  .sd-wrap { grid-template-columns: 196px minmax(0, 1fr); gap: 18px; }
  .sd-rail {
    position: sticky; flex-direction: column; overflow-x: visible;
    gap: 2px; padding: 12px 8px;
  }
  .sd-rail-label, .sd-rail-foot { display: block; }
  .sd-rail a { white-space: normal; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .rc-shell { grid-template-columns: 216px minmax(0, 1fr); }
}

/* ── Phones ── */

@media (max-width: 767px) {

  /* Candidate shell. The rail lives in the More sheet instead.
     #main-content already pads by --nav-h, so adding it again here (as
     seeker_dashboard.css does) left an 80px gap under the navbar. */
  .sd-wrap {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 16px 28px;
  }
  .sd-wrap > .sd-rail { display: none; }
  .msg-public { padding-top: 14px; }

  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.has-applybar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-tabbar .msgdock,
  body.has-applybar .msgdock { display: none; }

  .sd-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: var(--white); border-top: 1px solid var(--gray-200);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sd-tab {
    flex: 1 1 0; min-width: 0; min-height: 60px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; cursor: pointer; padding: 0;
    font-family: var(--font); font-size: .69rem; font-weight: 600;
    color: var(--gray-500); text-decoration: none;
  }
  .sd-tab svg { width: 22px; height: 22px; display: block; }
  .sd-tab.is-active { color: var(--gray-900); }
  .sd-tab.is-active::before {
    content: ""; position: absolute; top: 0; left: 26%; right: 26%;
    height: 2px; background: var(--gray-900); border-radius: 0 0 2px 2px;
  }
  .sd-tab-badge {
    position: absolute; top: 6px; left: calc(50% + 5px);
    min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 9px; background: var(--c-orange-deep); color: #ffffff;
    font-size: .66rem; font-weight: 700; line-height: 18px; text-align: center;
  }

  /* The More sheet: the rail, restyled as a light list. */
  .sd-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border-radius: 18px 18px 0 0;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden;
    transition: transform .24s ease, visibility .24s;
  }
  .sd-sheet.is-open { transform: none; visibility: visible; }
  .sd-sheet-head {
    position: sticky; top: 0; background: var(--white); z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 6px 6px 16px;
  }
  .sd-sheet-grip {
    position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: var(--gray-200);
  }
  .sd-sheet-head h2 { margin: 0; font-size: 1.1rem; color: var(--gray-900); }
  .sd-sheet-close {
    width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; color: var(--gray-900);
  }
  .sd-sheet-close svg { width: 20px; height: 20px; }
  .sd-sheet .sd-rail {
    position: static; display: flex; flex-direction: column; gap: 0;
    background: none; border-radius: 0; padding: 0 8px; overflow: visible;
  }
  .sd-sheet .sd-rail a {
    min-height: 46px; padding: 0 10px; color: var(--gray-900);
    font-size: .95rem; white-space: normal;
  }
  .sd-sheet .sd-rail a:hover { background: var(--gray-100); color: var(--gray-900); }
  .sd-sheet .sd-rail a.is-active { background: var(--gray-100); color: var(--gray-900); }
  .sd-sheet .sd-rail a .sd-ct { color: var(--gray-500); opacity: 1; }
  .sd-sheet .sd-rail-label { display: block; color: var(--gray-500); padding: 12px 10px 4px; }
  .sd-sheet .sd-rail-foot {
    display: block; margin: 10px 2px 0; padding: 12px 10px; border-top: 0;
    border-radius: var(--r); background: var(--success-tint); color: var(--gray-700);
  }
  .sd-sheet .sd-rail-foot b { color: var(--gray-900); }

  /* Card headers stack (title, then hint) instead of two squeezed columns.
     The hints carry an inline margin-left:auto, hence !important. */
  .sd-main .rc-card-head { flex-wrap: wrap; row-gap: 2px; }
  .sd-main .rc-card-head > .rc-muted-txt { margin-left: 0 !important; flex-basis: 100%; }
  .sd-funnel-foot > span[style] { margin-left: 0 !important; }

  /* Recruiter shell: a top bar, and the rail as a drawer. */
  .rc-shell { grid-template-columns: minmax(0, 1fr); }
  .rc-topbar {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; z-index: 1040;
    height: 56px; padding: 0 12px 0 4px; background: var(--rc-rail);
  }
  .rc-topbar-btn {
    width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center; color: #ffffff;
  }
  .rc-topbar-btn svg { width: 22px; height: 22px; }
  .rc-topbar-org {
    color: #ffffff; font-weight: 700; font-size: 1rem; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rc-topbar-kind { margin-top: 0; flex: none; }
  .rc-rail {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1200;
    width: min(318px, 86vw); height: auto;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .24s ease, visibility .24s;
    padding-top: 12px;
  }
  .rc-rail.is-open { transform: none; visibility: visible; }
  .rc-rail-close {
    display: grid; place-items: center; position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: #ffffff;
  }
  .rc-rail-close svg { width: 20px; height: 20px; }
  .rc-nav a { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .rc-main { padding: 18px 16px 40px; }

  /* Recruiter tables become one card per row. table_cards.js copies each
     column heading onto its cells; without it (no JS) the table keeps its
     columns and scrolls in .rc-scroll, which is still readable. */
  .rc-table.has-labels thead { display: none; }
  .rc-table.has-labels,
  .rc-table.has-labels tbody,
  .rc-table.has-labels tr,
  .rc-table.has-labels td { display: block; width: 100%; box-sizing: border-box; }
  .rc-table.has-labels tr { padding: 12px 16px; border-top: 1px solid var(--rc-line); }
  .rc-table.has-labels tbody tr:first-child { border-top: 0; }
  .rc-table.has-labels td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 4px 0; border-top: 0; text-align: right; overflow-wrap: anywhere;
  }
  .rc-table.has-labels td[data-label]::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: left;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--rc-muted);
  }
  .rc-table.has-labels td:first-child {
    display: block; text-align: left; font-size: .95rem; font-weight: 600; padding-bottom: 6px;
  }
  .rc-table.has-labels td:first-child::before { display: none; }
  .rc-table.has-labels tr:hover td { background: none; }

  /* Forms: short pairs share a row; the third field takes its own. */
  .rc-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-grid3 > :nth-child(3) { grid-column: 1 / -1; }

  /* Save stays in reach on a long form. overflow:clip, not hidden: hidden
     makes the card a scroll container and sticky would stick inside it. */
  .rc-card.rc-form { overflow: clip; }
  .rc-form-foot { position: sticky; bottom: 0; z-index: 5; }
  body.has-tabbar .rc-form-foot { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .rc-form-foot > * { flex: 1 1 0; justify-content: center; }

  /* Job detail: pinned Apply. */
  .jb-apply-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--gray-200);
  }
  .jb-apply-bar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .jb-apply-bar-info b { font-size: .92rem; color: var(--gray-900); }
  .jb-apply-bar-info span {
    font-size: .78rem; color: var(--gray-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .jb-apply-bar-btn {
    flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
    border-radius: 12px; background: var(--gray-900); color: #ffffff;
    font-weight: 700; font-size: .95rem; text-decoration: none;
  }
  .jb-apply-bar-btn:hover { background: #333333; color: #ffffff; }
}

@media (max-width: 900px) {
  /* Job detail: the job first, the side boxes under it. jobs.css had them
     first (order:-1), which put Apply 1.5 screens down. */
  .jb-detail-sidebar { order: 0; }

  /* Messages: no empty "Pick a conversation" box under the list. */
  .msg-split:not(.has-open) .msg-pane { display: none; }

  /* Job search: filters are a sheet opened from the results header. */
  .jb-filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1200;
    max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 18px 18px 0 0; border: 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden;
    transition: transform .24s ease, visibility .24s;
  }
  .jb-filters.is-open { transform: none; visibility: visible; }
  .jb-filter-hd { gap: 12px; }
  .jb-filter-clear { margin-left: auto; }
  .jb-filter-close {
    display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px 0;
    border: 0; background: none; cursor: pointer; color: var(--gray-900);
  }
  .jb-filter-close svg { width: 20px; height: 20px; }
  .jb-filter-option { min-height: 36px; margin-bottom: 0; }
  .jb-filter-toggle {
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    min-height: 40px; padding: 0 14px; border-radius: 10px;
    border: 1.5px solid var(--gray-900); background: var(--white); color: var(--gray-900);
    font-family: var(--font); font-size: .85rem; font-weight: 700; cursor: pointer;
  }
  .jb-filter-toggle svg { width: 17px; height: 17px; }
  .jb-filter-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange-deep); }
  .jb-results-hd { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; gap: 10px; }
  .jb-results-count { flex-basis: 100%; }
}