/* ============================================================
   HireSide — single global stylesheet (sectioned by component)
   ============================================================ */

/* --- tokens & reset --- */
:root {
  /* Brand palette sampled from static/images/logo.png:
     emblem blue #146fb6 · "Hire" charcoal #373737 · "Side" blue #2c539a */
  --navy-900: #0f1c34;
  --navy-800: #2c539a;
  --navy-700: #1262a0;
  --ink: #373737;
  --muted: #5b6472;
  --line: #e3e7ee;
  --bg: #f7f9fc;
  --card: #ffffff;
  --accent: #146fb6;
  --accent-dark: #105992;
  --accent-on-dark: #50a8ec;   /* brand blue lightened for navy backgrounds */
  --danger: #c0392b;
  --required: #dc2626;        /* the "required" asterisk: a clear red (owner, 2026-10-09) */
  --warn-bg: #fdf6e3;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16, 32, 54, .08), 0 8px 24px rgba(16, 32, 54, .06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* the HTML hidden attribute must beat component display rules */
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--navy-800); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   APP SHELL — Stripe-style left sidebar (authenticated app only)
   ============================================================ */
body.app { background: var(--bg); }
.app-sidebar {
  position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: 248px; z-index: 50;
  background: #fff; border-inline-end: 1px solid var(--line); color: var(--ink);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.side-logo { display: flex; align-items: center; padding: 4px 8px 20px; }
.side-logo:hover { text-decoration: none; }
.side-logo img { height: 60px; width: auto; display: block; }

.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .95rem; font-weight: 500; }
.side-item i { width: 18px; text-align: center; font-size: .95rem; color: var(--muted); }
.side-item:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.side-item:hover i { color: var(--navy-800); }
.side-item.active { background: #e9f1fb; color: var(--accent-dark); }
.side-item.active i { color: var(--accent); }
/* the lines between the nav groups (owner 2026-10-15) - a short upright line in the phone top bar */
.side-sep { display: block; flex: none; height: 1px; margin: 6px 12px; background: var(--line); }
/* the Inbox unread count (messages.js) - here, not in messages.css, which only the inbox pages load */
.side-badge { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
  height: 20px; padding: 0 6px; border-radius: 10px; background: #d93a3a; color: #fff; font-size: .72rem; font-weight: 700; }

/* A short window (zoomed in, a laptop screen): the nav list scrolls and the
   storage card + profile stay pinned at the bottom, never pushed off-screen. */
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; margin-inline: -4px; padding-inline: 4px; }
.side-bottom { flex: none; margin-top: auto; padding-top: 8px; }
@media (min-width: 821px) and (max-height: 760px) {
  .app-sidebar { padding-top: 12px; padding-bottom: 10px; }
  .side-logo { padding-bottom: 12px; }
  .side-logo img { height: 46px; }
  .side-item { padding-top: 6px; padding-bottom: 6px; }
  .side-quota { padding-top: 7px; padding-bottom: 7px; }
  .side-quota-meta { display: none; }
}
.side-user { position: relative; padding-top: 10px; border-top: 1px solid var(--line); }
.user-pill { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: none; background: transparent; color: var(--ink); cursor: pointer; text-align: start; font-family: inherit; }
.user-pill:hover, .user-pill.open { background: var(--bg); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; }
.user-pill-meta { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 0; }
.user-pill-name { font-size: .85rem; font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-pill > i { color: var(--muted); font-size: .72rem; }

.user-menu { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22); padding: 6px; }
.user-menu-head { padding: 9px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-name { font-weight: 700; color: var(--navy-900); font-size: .9rem; }
.user-menu-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; }
.user-menu a:hover { background: var(--bg); text-decoration: none; }
.user-menu a i { width: 16px; text-align: center; color: var(--muted); }
.user-menu a.danger { color: var(--danger); }
.user-menu a.danger i { color: var(--danger); }

.app-main { margin-inline-start: 248px; min-height: 100vh; min-width: 0;
  /* Screen6: the signed-in page never scrolls sideways - wide content (the board, tables, the CV)
     scrolls inside its own box. The page grew because a .sr-only label (position: absolute) in a
     board card or table cell far to the right was placed against the page, not its scroll box.
     relative = such labels belong to main, clip (not hidden) cuts them and keeps position: sticky working. */
  position: relative; overflow-x: clip; }
body.app .container { max-width: none; width: 100%; margin: 0; padding: 30px 44px; }
body.app .page-head { margin-top: 4px; }
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-menu .menu-btn { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; width: 100%; border: none; background: none; cursor: pointer; text-align: start; font-family: inherit; }
.user-menu .menu-btn:hover { background: var(--bg); }
.user-menu .menu-btn i { width: 16px; text-align: center; color: var(--muted); }
.user-menu .menu-form { margin: 0; }
.user-menu .menu-btn.danger, .user-menu .menu-btn.danger i { color: var(--danger); }

/* --- settings modal (Stripe/Slack-style, section nav) --- */
.modal-overlay { position: fixed; inset: 0; background: rgba(11, 32, 54, .5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(11, 32, 54, .35); position: relative; }
.modal-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 2; }
.modal-close:hover { background: #e2e6ee; color: var(--navy-900); }
.settings-modal { display: grid; grid-template-columns: 196px 1fr; width: min(760px, 100%); height: 62vh; min-height: 460px; max-height: 92vh; overflow: hidden; }
.settings-nav { background: var(--bg); border-inline-end: 1px solid var(--line); padding: 18px 12px; }
.settings-nav-title { font-weight: 700; color: var(--navy-900); padding: 4px 10px 12px; font-size: 1.05rem; }
.set-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: 8px; color: var(--ink); font-size: .92rem; cursor: pointer; text-align: start; font-family: inherit; }
.set-tab i { width: 16px; text-align: center; color: var(--muted); }
.set-tab:hover { background: #fff; }
.set-tab.active { background: #e9f1fb; color: var(--accent-dark); font-weight: 600; }
.set-tab.active i { color: var(--accent); }
.settings-panels { padding: 30px 28px 26px; overflow-y: auto; }
.set-panel h3 { color: var(--navy-900); margin-bottom: 16px; }
.photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.photo-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; overflow: hidden; flex-shrink: 0; }
.photo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-msg { margin-inline-start: 12px; font-size: .85rem; font-weight: 600; }
.set-msg:empty { display: none; }
.set-msg.ok { color: #0d7a56; }
.set-msg.err { color: var(--danger); }
/* Screen5: an error goes on its own line under the button (it wrapped untidily beside it) */
.set-msg.err { display: block; margin: 10px 0 0; line-height: 1.45; }
@media (max-width: 620px) {
  .settings-modal { grid-template-columns: 1fr; }
  .settings-nav { border-inline-end: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; }
  .settings-nav-title { width: 100%; }
  .set-tab { width: auto; }
}

@media (max-width: 820px) {
  .app-sidebar { position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; padding: 10px 14px; border-inline-end: none; border-bottom: 1px solid var(--line); }
  .side-logo { padding: 0; padding-inline-end: 8px; }
  .side-logo img { height: 36px; }
  .side-nav { flex-direction: row; gap: 2px; margin-inline-start: 6px; flex: none; overflow: visible; }
  .side-item span { display: none; }
  .side-sep { width: 1px; height: 20px; margin: 0 4px; align-self: center; }
  .side-user { margin-top: 0; margin-inline-start: auto; padding-top: 0; border-top: none; }
  .user-pill-meta, .user-pill > i { display: none; }
  .user-pill { padding: 4px; background: transparent; }
  .user-menu { inset-inline-start: auto; inset-inline-end: 0; bottom: auto; top: calc(100% + 8px); width: 240px; }
  .app-main { margin-inline-start: 0; }
  body.app .container { padding: 20px; }
}

/* ---- Screen50: collapse the desktop sidebar to a 72px icon rail ----
   html.side-collapsed is set before first paint (app_base.html head) and toggled by
   static/js/sidebar.js. Desktop only - the phone top bar (<= 820px) ignores it.
   The labels stay in the DOM (visually hidden) so screen readers still read them. */
.side-logo .side-logo-mark, .side-toggle { display: none; }
.side-tip { position: fixed; z-index: 500; transform: translateY(-50%); pointer-events: none; white-space: nowrap;
  background: #14243a; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.3; padding: 6px 10px;
  border-radius: 7px; box-shadow: 0 6px 18px rgba(11, 32, 54, .25); }
[data-theme="dark"] .side-tip { background: #2b3b52; border: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 821px) {
  .app-sidebar { transition: width .18s ease, padding .18s ease; }
  .app-main { transition: margin-inline-start .18s ease; }
  .side-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; z-index: 3;
    top: 30px; inset-inline-end: -13px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
    border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .66rem; cursor: pointer;
    box-shadow: 0 1px 4px rgba(11, 32, 54, .14); transition: color .12s, border-color .12s; }
  .side-toggle:hover { color: var(--accent); border-color: var(--accent); }
  .side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .side-toggle-ico { display: inline-flex; transition: transform .18s ease; }
  /* the chevron points at the side the sidebar folds to: start when open, end when collapsed */
  [dir="rtl"] .side-toggle-ico, html.side-collapsed .side-toggle-ico { transform: scaleX(-1); }
  html[dir="rtl"].side-collapsed .side-toggle-ico { transform: none; }

  html.side-collapsed .app-sidebar { width: 72px; padding-inline: 14px; }
  html.side-collapsed .app-main { margin-inline-start: 72px; }
  html.side-collapsed .side-logo { justify-content: center; padding-inline: 0; }
  html.side-collapsed .side-logo-full { display: none; }
  html.side-collapsed .side-logo .side-logo-mark { display: block; width: 38px; height: 38px; }

  html.side-collapsed .side-item { justify-content: center; gap: 0; padding-inline: 0; position: relative; }
  html.side-collapsed .side-item i { font-size: 1.05rem; }
  html.side-collapsed .side-item > span:not(.side-badge),
  html.side-collapsed .side-quota-label,
  html.side-collapsed .user-pill-meta {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  html.side-collapsed .side-sep { margin: 6px 10px; }
  html.side-collapsed .side-item .side-badge { position: absolute; top: 1px; inset-inline-end: 1px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: .62rem; box-shadow: 0 0 0 2px var(--card); }

  html.side-collapsed .co-switch-btn { justify-content: center; padding: 6px 0; }
  html.side-collapsed .co-switch-text, html.side-collapsed .co-switch-caret { display: none; }
  html.side-collapsed .co-switch-menu { width: 260px; min-width: 0; }
  html.side-collapsed .co-switch-none { font-size: 0; text-align: center; }
  html.side-collapsed .co-switch-none i { font-size: 1rem; }

  html.side-collapsed .side-quota { padding: 8px 5px; text-align: center; }
  html.side-collapsed .side-quota-head { justify-content: center; margin-bottom: 5px; }
  html.side-collapsed .side-quota-meta { display: none; }

  html.side-collapsed .user-pill { justify-content: center; padding: 6px 0; }
  html.side-collapsed .user-pill > i, html.side-collapsed .user-pill > svg { display: none; }
  /* the account menu opens upward and outward over the page (inline-start edge of the rail) */
  html.side-collapsed .user-menu { left: auto; right: auto; inset-inline-start: 0; width: 240px; }
}
/* The phone top bar between 481 and 820px: with every nav item (+ the 2026-10-15 group lines) it
   ran 16px past a 700px window and squeezed the logo to nothing. The logo and the account end
   keep their size, the company chip shows only its initial, and the nav scrolls sideways when
   the window is narrower still (the <= 480px rule in jobs.css does the same for phones). */
@media (max-width: 820px) {
  .app-sidebar .side-logo, .app-sidebar .side-bottom { flex: none; }
  .app-sidebar .side-nav { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
}
@media (min-width: 481px) and (max-width: 820px) {
  .app-sidebar .co-switch-text { display: none; }
  .app-sidebar .co-switch-btn { padding-inline-end: 22px; }
}
@media (min-width: 821px) and (prefers-reduced-motion: reduce) {
  .app-sidebar, .app-main, .side-toggle-ico { transition: none; }
}

/* --- top navigation --- */
.nav {
  background: var(--navy-900);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 62px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo img { height: 26px; width: auto; display: block; }
/* Full HireSide logo (folder + wordmark) rendered white for the dark nav/footer. */
.nav-logo-full { height: 56px !important; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-brand .nav-logo-full { height: 56px !important; }
@media (max-width: 600px) { .nav-logo-full { height: 40px !important; } .footer-brand .nav-logo-full { height: 46px !important; } }
.nav-logo em { color: var(--accent-on-dark); font-style: normal; }
.nav-links { display: flex; gap: 18px; align-items: center; margin-inline-start: auto; }
.nav-links a { color: #d6deea; font-size: .95rem; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.active { color: #fff; font-weight: 600; }

/* --- app store badges in the top nav --- */
.store-btns { display: flex; align-items: center; gap: 8px; }
.store-btn { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 0; background: none; padding: 0; transition: opacity .15s; }
.store-btn img { height: 34px; width: auto; display: block; border-radius: 6px; }
/* The Font Awesome kit rewrites <i> to <svg>, so both need hiding. */
.store-btn i, .store-btn svg { display: none; font-size: 1.05rem; }
.store-btn:hover { opacity: .85; text-decoration: none; }
/* Narrow screens: the two full badges are ~230px of nav, so collapse to icons. */
@media (max-width: 900px) {
  .store-btns { gap: 6px; }
  .store-btn img { display: none; }
  .store-btn i, .store-btn svg { display: block; width: 1em; height: 1em; }
  .store-btn { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .28); color: #d6deea; }
  .store-btn:hover { opacity: 1; color: #fff; border-color: rgba(255, 255, 255, .55); }
}

/* --- buttons --- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-outline { background: transparent; color: var(--navy-800); border: 1.5px solid var(--navy-800); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --- hero (marketing) --- */
.hero {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%, var(--navy-700) 100%);
  color: #fff;
  padding: 84px 0 72px;
}
.hero h1 {
  font-size: 2.7rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 640px;
}
.hero h1 em { color: var(--accent-on-dark); font-style: normal; }
.hero p.lead {
  margin: 18px 0 30px;
  font-size: 1.15rem;
  color: #c8d3e2;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.country-chips { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: .9rem;
  color: #e5ecf5;
}

/* --- sections --- */
.section { padding: 64px 0; }
.section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { font-size: 1.9rem; letter-spacing: -.02em; color: var(--navy-900); }
.section .sub { color: var(--muted); margin: 8px 0 34px; max-width: 620px; }

/* --- cards & grids --- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.08rem; color: var(--navy-900); margin-bottom: 8px; }
.card p { font-size: .93rem; color: var(--muted); }
.card .meta { font-size: .8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.badge {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 600;
}

/* --- steps (how it works) --- */
.steps { counter-reset: step; }
.step { position: relative; padding-inline-start: 0; }
.step .num {
  display: inline-flex;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  margin-bottom: 12px;
}

/* --- pricing --- */
.price-card { text-align: start; position: relative; }
.price-card.featured { border-color: var(--accent); border-width: 2px; }
.price-card .plan { font-weight: 700; color: var(--navy-900); }
.price-card .price { font-size: 2rem; font-weight: 700; margin: 10px 0; color: var(--navy-900); }
.price-card .price small { font-size: .9rem; color: var(--muted); font-weight: 400; }
.price-card .price .per { font-size: .95rem; font-weight: 600; color: var(--muted); }
.grid-4 .price-card .price { font-size: 1.75rem; }
/* the premium (2 TB) tier */
.price-card.price-premium { border-color: var(--accent); }
.plan-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.price-card ul { list-style: none; margin: 16px 0 22px; }
.price-card li { padding: 5px 0; padding-inline-start: 24px; position: relative; font-size: .92rem; color: var(--ink); }
.price-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; }

/* --- forms (inputs) --- */
.form-card { max-width: 460px; margin: 56px auto; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--navy-900); }
.field .help { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy-700);
}
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.field .field-error { font-size: .8rem; color: var(--danger); margin-top: 3px; }
.field-check { display: flex; align-items: center; gap: 8px; }
/* ADR-0206: a setting that belongs to the one above it (Settings - Companies) */
.co-matchgovid { margin-inline-start: 26px; }
label.co-matchgovid { margin-top: 10px; }
.field.co-govidlabel, .st-card .set-panel .field.co-govidlabel { margin-top: 10px; max-width: 380px; }   /* ADR-0222: what the ID is called */
.co-govidlabel select { width: 100%; }
.field-check input { width: auto; }

/* --- alerts --- */
.alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; }
.alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; }
.alert-success { background: #e2f5ec; color: #0d7a56; border: 1px solid #bfe8d9; }
.alert-info { background: #e8f0fb; color: var(--navy-800); border: 1px solid #cdddf3; }
/* Standing state that isn't an error. Amber so it reads as "needs you", not "went wrong". */
.alert-warn { background: #fdf6e7; color: #8a5a12; border: 1px solid #f0e0bd; }

/* --- tables --- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.table th { text-align: start; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafbfd; }

/* --- app layout --- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 24px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; color: var(--navy-900); letter-spacing: -.02em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.stat .n { font-size: 1.9rem; font-weight: 700; color: var(--navy-900); }
.stat .l { font-size: .85rem; color: var(--muted); }
#savebar { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 14px 0; margin-top: 10px; }
#savebar .container { display: flex; gap: 10px; align-items: center; }
#savestatus { font-size: .85rem; color: var(--muted); margin-inline-start: auto; }

/* --- app helpers --- */
.muted { color: var(--muted); font-size: .88rem; }
.crumbs { font-size: .88rem; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs strong { color: var(--navy-900); }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.linklike { background: none; border: none; color: var(--navy-800); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 0; font-family: inherit; }

/* --- footer --- */
.footer { background: var(--navy-900); color: #9fb0c6; margin-top: 72px; padding: 44px 0 30px; font-size: .9rem; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; }
.footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.footer-brand img { height: 22px; width: auto; }
.footer-brand .wordmark { color: #fff; font-weight: 700; font-size: 1.05rem; }
.footer-brand .wordmark em { color: var(--accent-on-dark); font-style: normal; }
.footer a { color: #9fb0c6; display: block; padding: 2px 0; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .fine { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: .8rem; }

/* --- cookie consent (ADR-0096) ---
   A card pinned to the foot of the public pages, never a full-screen wall: the
   page stays readable behind it. Above the page, below any modal (200). */
.cookie-consent {
  position: fixed; inset-inline: 16px; bottom: 16px; z-index: 150;
  max-width: 880px; margin-inline: auto;
  display: flex; align-items: center; gap: 22px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 2px 6px rgba(16, 32, 54, .10), 0 18px 48px rgba(16, 32, 54, .22);
  padding: 18px 22px;
  animation: cookie-consent-in .28s ease-out;
}
.cookie-consent-text { flex: 1; min-width: 0; }
.cookie-consent h2 { font-size: 1rem; color: var(--navy-900); margin-bottom: 3px; }
.cookie-consent p { font-size: .88rem; line-height: 1.5; color: var(--muted); }
.cookie-consent p a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.cookie-consent-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; flex-shrink: 0; }
/* Same box for both choices — refusing is not the smaller button. */
.cookie-consent-actions .btn { min-width: 138px; border: 1.5px solid transparent; }
.cookie-consent-actions .btn-outline { border-color: var(--navy-800); }
.cookie-consent-actions .btn:focus-visible { outline: 3px solid rgba(20, 111, 182, .35); outline-offset: 2px; }
@keyframes cookie-consent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookie-consent { animation: none; } }
@media (max-width: 720px) {
  .cookie-consent { flex-direction: column; align-items: stretch; gap: 14px; inset-inline: 10px; bottom: 10px; padding: 16px; }
  .cookie-consent-actions .btn { min-width: 0; }
}
@media print { .cookie-consent { display: none; } }

/* --- responsive --- */
@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 2.1rem; }
  .stats { grid-template-columns: 1fr; }
  .fields-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-links { gap: 12px; }
  .nav-links a.nav-secondary { display: none; }
}

/* premium features (ADR-0035) — kebab count chip + the grant checklist modal */
.feat-count { display: inline-block; min-width: 17px; padding: 0 5px; margin-inline-start: 2px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; }
.feat-list { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.feat-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.feat-row:hover { border-color: var(--accent); background: var(--accent-tint, #f3f8fd); }
.feat-row input { width: auto; margin-top: 2px; flex: none; }
.feat-name { display: block; font-weight: 600; font-size: .92rem; color: var(--navy-900); }
.feat-desc { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }

/* impersonation banner */
.imp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #3a2a00; color: #ffe9b0; border: 1px solid #6b5100;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .92rem;
}
.imp-banner a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.imp-banner a:hover { text-decoration: underline; }
.imp-stop { margin: 0; }
.imp-stop button { font: inherit; color: #fff; font-weight: 600; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.imp-stop button:hover { text-decoration: underline; }

/* admin panel */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; }
.atab {
  padding: 9px 16px; text-decoration: none; color: var(--muted); font-weight: 600;
  font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atab:hover { color: var(--ink); }
.atab.on { color: var(--accent); border-bottom-color: var(--accent); }

/* admin left sub-nav */
.admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; margin-top: 18px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.anav {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 9px;
  text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.anav i { width: 18px; text-align: center; color: var(--muted); font-size: 1rem; }
.anav:hover { background: var(--hover, #f1f4f9); color: var(--ink); }
.anav:hover i { color: var(--accent); }
.anav.on { background: var(--accent-soft, #e8f1fb); color: var(--accent); border-color: var(--accent-line, #cfe2f6); }
.anav.on i { color: var(--accent); }
.admin-content { min-width: 0; }
@media (max-width: 760px) {
  .admin-layout { grid-template-columns: 1fr; gap: 14px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .anav span { display: none; }
  .anav { padding: 9px 12px; }
}

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; position: relative;
}
.kpi-ic { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; }
.kpi-val { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kpi-lbl { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.kpi-warn .kpi-val { color: #b0620a; }
.kpi-warn .kpi-ic { color: #b0620a; }

.admin-table td, .admin-table th { vertical-align: middle; }
.admin-table .admin-actions { text-align: end; white-space: nowrap; }
/* Let row kebab menus escape the table box (the base .table clips with
   overflow:hidden for its rounded corners; re-round the corner cells here). */
.admin-table { overflow: visible; }
.admin-table tr:first-child th:first-child { border-start-start-radius: var(--radius); }
.admin-table tr:first-child th:last-child { border-start-end-radius: var(--radius); }
.admin-table tr:last-child td:first-child { border-end-start-radius: var(--radius); }
.admin-table tr:last-child td:last-child { border-end-end-radius: var(--radius); }

/* status / role pills (data-driven, Fasana convention) */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.pill.admin        { background: rgba(143,106,0,.14);  color: #8a6a00; }
.pill.subscriber   { background: rgba(20, 111, 182,.12); color: var(--accent); }
.pill.subuser      { background: #eef1f6;              color: var(--muted); }
.pill.active       { background: rgba(13,122,86,.14);  color: #0d7a56; }
.pill.pending      { background: rgba(176,98,10,.14);  color: #b0620a; }
.pill.disabled     { background: rgba(204,47,66,.12);  color: #c22f42; }
.pill.access-full  { background: rgba(13,122,86,.12);  color: #0d7a56; }
.pill.access-view  { background: #eef1f6;              color: var(--muted); }

/* kebab row menu (native <details>) */
.kebab { position: relative; display: inline-block; }
.kebab > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  font-size: 1.15rem; user-select: none;
}
.kebab > summary::-webkit-details-marker { display: none; }
.kebab > summary:hover { background: #eef1f6; color: var(--ink); }
.kebab-menu {
  position: absolute; inset-inline-end: 0; top: 34px; z-index: 40; min-width: 184px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 6px; text-align: start;
}
/* Opened near the bottom of the window it opens upwards (ctxmenu.js sets .kebab-up) */
.kebab.kebab-up > .kebab-menu { top: auto; bottom: 34px; }
.kebab-menu form { margin: 0; }
/* Screen90: links and buttons are one item - the same font (a <button> otherwise takes the
   browser's Arial), the same line height (links were taller), and the icon in a fixed column so
   every label starts at the same place. Font Awesome swaps the <i> for an <svg>, so both match. */
.kebab-menu a, .kebab-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  padding: 8px 10px; border-radius: 7px; color: var(--ink);
  font: inherit; font-size: .88rem; font-weight: 400; line-height: 1.35;
}
.kebab-menu a:hover, .kebab-menu button:hover { background: #f2f5fa; text-decoration: none; }
.kebab-menu a.danger, .kebab-menu button.danger { color: #c22f42; }
.kebab-menu a > i, .kebab-menu a > svg, .kebab-menu button > i, .kebab-menu button > svg {
  flex: 0 0 16px; width: 16px; text-align: center; }

/* ---------- Job-post quota: sidebar meter (ADR-0107) ---------- */
.side-quota { display: block; width: 100%; text-align: start; padding: 10px 12px; border-radius: 10px;
  background: rgba(20, 111, 182,.07); border: 1px solid rgba(20, 111, 182,.14); cursor: pointer; margin-bottom: 10px; }
.side-quota:hover { background: rgba(20, 111, 182,.12); border-color: rgba(20, 111, 182,.28); }
.side-quota-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.side-quota-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.side-quota-label i { margin-inline-end: 5px; }
.side-quota-pct { font-size: 11px; font-weight: 700; color: var(--accent); }
.side-quota-bar { height: 6px; background: rgba(20, 111, 182,.13); border-radius: 999px; overflow: hidden; }
.side-quota-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #50a8ec); border-radius: 999px; min-width: 2px; transition: width .2s; }
.side-quota-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); }
.side-quota.is-warn .side-quota-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.side-quota.is-warn .side-quota-pct { color: #d97706; }
.side-quota.is-danger .side-quota-fill { background: linear-gradient(90deg, #f87171, #fca5a5); }
.side-quota.is-danger .side-quota-pct { color: #ef4444; }

/* ---------- Context menu ---------- */
/* Screen2 (3rd round): the styled suggestion list for <input list> (ui.js) - the same look as the
   app's menus, not the browser's datalist popup */
.hs-suggest { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 60; margin: 0; padding: 6px; list-style: none;
  max-height: 260px; overflow: auto; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(11, 32, 54, .16); }
.hs-suggest li { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: .9rem; color: var(--ink); }
.hs-suggest li:hover, .hs-suggest li.is-active { background: rgba(20, 111, 182, .1); color: var(--accent); }
[data-theme="dark"] .hs-suggest { background: #1c2735; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.ctx { position: fixed; z-index: 300; min-width: 194px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 4px 10px rgba(11,32,54,.14), 0 12px 34px rgba(11,32,54,.16); padding: 6px; }
.ctx[hidden] { display: none; }
.ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.ctx-item i { width: 16px; text-align: center; color: var(--muted); }
.ctx-item:hover { background: #eaf2fb; }
.ctx-item:hover i { color: var(--accent); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger i { color: var(--danger); }
.ctx-item.danger:hover { background: #fdecea; }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 6px; }
tr.dragging { opacity: .4; }

.row-end { width: 44px; text-align: end; }

.ctx-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 320;
  background: #0f1c34; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 8px;   /* fixed navy: dark mode flips --navy-900 */
  box-shadow: 0 8px 24px rgba(11,32,54,.3); }
.ctx-toast[hidden] { display: none; }

/* ---------- App toast (HireSide.Toast) ----------
   Success/error feedback for actions that happen inside a modal — notably the
   settings panels, where a save often re-renders the panel and would wipe an
   inline message. z-index sits above every overlay (modals are 200-320). */
.app-toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 400;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.app-toast { display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px));
  background: #0d7a56; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.35;
  padding: 12px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(11,32,54,.34);
  animation: app-toast-in .18s ease-out; }
.app-toast.is-err { background: #c0392b; }
.app-toast.is-out { animation: app-toast-out .22s ease-in forwards; }
.app-toast i { font-size: 1rem; flex: none; }
@keyframes app-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes app-toast-out { to { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .app-toast, .app-toast.is-out { animation: none; } }
.field .help.is-err { color: var(--danger); font-weight: 600; }
.field input.has-err { border-color: var(--danger); }

/* ---------- Confirm / alert / prompt dialogs (static/js/ui.js) ----------
   The app's replacement for native confirm()/alert()/prompt(). Built on
   .modal-overlay/.modal-card so it inherits the card, shadow and dark theme
   the Share-link and Email-file modals already use. */
.dlg-overlay { z-index: 500; }          /* above every modal — a modal may raise one */
.dlg-card { width: min(440px, 100%); padding: 26px 24px 22px; }
.dlg-head { display: flex; gap: 14px; align-items: flex-start; padding-inline-end: 26px; }
.dlg-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 1.05rem; }
.dlg-icon.tone-warn { background: #fdf3e0; color: #b57b12; }
.dlg-icon.tone-danger { background: #fdecea; color: var(--danger); }
.dlg-icon.tone-info { background: #eaf2fb; color: var(--accent); }
.dlg-icon.tone-ok { background: #e7f5ec; color: #1d8a4c; }
.dlg-copy { min-width: 0; flex: 1; padding-top: 2px; }
.dlg-card h3 { margin: 0; font-size: 1.12rem; color: var(--navy-900); line-height: 1.35; }
/* Messages quote user-typed names — wrap them instead of overflowing the card. */
.dlg-text { margin: 7px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5;
  white-space: pre-line; overflow-wrap: anywhere; }
.dlg-text[hidden] { display: none; }
/* optional list in a confirm (e.g. the jobs a team member is taken off) */
.dlg-list-label { margin: 12px 0 6px; font-size: .86rem; font-weight: 600; color: var(--navy-900); }
.dlg-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; }
.dlg-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; font-size: .88rem; overflow-wrap: anywhere; }
.dlg-list li + li { border-top: 1px solid var(--line); }
.dlg-list li strong { color: var(--ink); font-weight: 600; }
.dlg-list li span { color: var(--muted); font-size: .8rem; }
.dlg-note { margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: #fdf3e0; color: #7a5208;
  font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.dlg-field { margin: 18px 0 0; }
.dlg-check { margin: 14px 0 0; font-size: .88rem; align-items: flex-start; }
.dlg-check input { margin-top: 3px; }
.dlg-check[hidden] { display: none; }
.dlg-check-help { color: var(--muted); }
.dlg-field.is-err input { border-color: var(--danger); }
.dlg-field.is-err .help { color: var(--danger); font-weight: 600; }
.dlg-field label[hidden] { display: none; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dlg-actions .btn[hidden] { display: none; }
@media (max-width: 460px) {
  .dlg-actions { flex-direction: column-reverse; }
  .dlg-actions .btn { width: 100%; }
}

/* ---------- Form modals ---------- */
/* A plain padded form card (settings modal gets its own
   spacing from the grid; this variant restores padding + width for the form). */
.modal-form { width: min(440px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px 24px; }
.modal-form h3 { margin: 0 0 18px; padding-inline-end: 28px; font-size: 1.2rem; color: var(--navy-900); }
.modal-form .btn-primary { margin-top: 4px; }
/* Optional extra fields inside a form modal — two-up grid
   tucked behind a disclosure so the common case stays a two-field form. */
.modal-form .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.modal-form .field-grid .field.wide { grid-column: 1 / -1; }
.modal-form textarea { min-height: 78px; resize: vertical; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; }
.pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.kebab-menu button[disabled] { opacity: .45; cursor: not-allowed; }

/* team management (settings modal) */
.team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.team-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.team-who { display: flex; flex-direction: column; margin-inline-end: auto; min-width: 0; }
.team-name { font-weight: 600; color: var(--ink); }
.team-mail { font-size: .8rem; color: var(--muted); }
.team-acts { display: flex; gap: 12px; flex-shrink: 0; }
.team-acts .linklike { font-size: .82rem; }
.team-count { font-size: .82rem; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.team-add { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.team-kebab { flex-shrink: 0; }
.linklike.danger { color: #c22f42; }

/* ---------- Duotone icons in HireSide blue (fa-duotone fa-light) ---------- */
.fa-duotone {
  --fa-primary-color: var(--accent);
  --fa-secondary-color: var(--accent);
  --fa-secondary-opacity: 0.32;
}
/* Keep icons legible where they sit on a filled/colored surface, or must match
   the element's own colour (white on buttons, red on danger items). */
.btn-primary .fa-duotone, .btn-navy .fa-duotone, .btn-danger .fa-duotone, .fab .fa-duotone,
.danger .fa-duotone, .ctx-item.danger .fa-duotone, .kebab-menu .danger .fa-duotone,
.imp-banner .fa-duotone, .side-logo .fa-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
}

/* ---------- Dashboard charts (Home) ---------- */
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.chart-title { font-weight: 700; color: var(--navy-900); font-size: .92rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.chart-title i { color: var(--accent); }
.chart-wrap { position: relative; height: 210px; }
.chart-foot { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 10px; }

/* ---- social sign-in (Google / Apple) on login + signup ---- */
.social-auth { margin-top: 18px; }
.social-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; margin: 4px 0 16px; }
.social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gsi-wrap { display: flex; justify-content: center; }
/* Apple sign-in button — sized to match the 300px Google button below it */
.apple-signin-btn { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 300px; margin: 10px auto 0; padding: 0; height: 40px; border-radius: 4px;
  background: #000; color: #fff; border: 1px solid #000; cursor: pointer;
  font-size: 15px; font-weight: 500; font-family: inherit; }
.apple-signin-btn:hover { background: #1a1a1a; }
[data-theme="dark"] .apple-signin-btn { background: #fff; color: #000; border-color: #fff; }
[data-theme="dark"] .apple-signin-btn:hover { background: #e8e8e8; }

/* ---- account pages: story on one side, form on the other (auth_base.html, ADR-0094) ---- */
body.auth-page .footer { display: none; }
.auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: calc(100vh - 62px); }
.auth-art { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 10% 0%, #1262a0 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, #0e6f8f 0%, transparent 55%),
              linear-gradient(160deg, #0f1c34 0%, #0f2d4c 55%, #12314f 100%); }
.auth-art-glow { position: absolute; width: 520px; height: 520px; inset-inline-end: -160px; top: -140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,167,224,.35), transparent 65%); filter: blur(10px); }
.auth-art-inner { position: relative; max-width: 560px; margin: 0 auto; padding: 64px 48px; display: flex; flex-direction: column; gap: 22px; height: 100%; justify-content: center; }
.auth-art-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #d6e8f8; }
.auth-art-title { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.14; letter-spacing: -.02em; font-weight: 800; color: #fff; text-wrap: balance; }
.auth-art-title span { background: linear-gradient(90deg, #7ac7ff, #8fe3cf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-art-lede { color: #c7d6e6; font-size: 1.02rem; line-height: 1.6; }
.auth-art-points { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.auth-art-points li { display: flex; align-items: center; gap: 12px; color: #e3ecf6; font-size: .95rem; }
.auth-art-points i, .auth-art-points svg { color: #7ac7ff; width: 18px; flex-shrink: 0; }
/* The art sits on navy whatever the theme, so its duotone icons take the light blue rather than --accent. */
.auth-art .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; }
/* Log in / sign up: the story block and the product showcase (_hero_showcase.html). */
.auth-art-story { display: flex; flex-direction: column; gap: 22px; }
.auth-art.has-showcase .auth-art-inner { padding-block: 48px; gap: 26px; }
.auth-art.has-showcase .showcase { max-width: 460px; width: 100%; }

/* the product illustration (templates/_shortlist_mock.html): a ranked shortlist
   with match scores and one quoted reason. Used on the auth panel and the home hero. */
.mock-panel { background: rgba(255,255,255,.97); color: #1d2a3a; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 8px; font-size: .88rem; text-shadow: none; text-align: start; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #edf0f5; margin-bottom: 2px; }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #e4e8ef; }
.mock-bar em { margin-inline-start: 8px; font-style: normal; font-size: .76rem; color: #6b7686; font-weight: 600; }
.mock-head { padding: 2px 2px 4px; }
.mock-head-title { font-weight: 700; color: #373737; font-size: .98rem; }
.mock-head-sub { color: #6b7686; font-size: .76rem; margin-top: 2px; }
.mock-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #f4f7fb; }
.mock-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: #2c539a; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; }
.mock-row-main { flex: 1; min-width: 0; }
.mock-row-name { font-weight: 600; color: #373737; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-row-sub { color: #6b7686; font-size: .74rem; }
.mock-score { flex-shrink: 0; min-width: 42px; text-align: center; font-size: .82rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; }
.mock-score.ok { background: #e2f5ec; color: #0d7a56; }
.mock-score.mid { background: #fdf1d8; color: #8a5a12; }
.mock-quote { margin: -2px 0 2px; padding: 7px 12px; border-inline-start: 3px solid #146fb6; background: #eef5fc; border-radius: 0 8px 8px 0;
  color: #2c539a; font-size: .76rem; font-style: italic; }
[dir="rtl"] .mock-quote { border-radius: 8px 0 0 8px; }
.mock-quote i { color: #146fb6; margin-inline-end: 4px; font-style: normal; }
.mock-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: 10px;
  background: #146fb6; color: #fff; font-size: .8rem; font-weight: 600; }
.mock-foot .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; }

/* "Coming soon" marker on features that are not live yet (homepage). */
.soon-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: #eaf2fb; color: #2c539a; margin-bottom: 10px; }
.soon-badge.on-dark { background: rgba(255,255,255,.14); color: #d6e8f8; margin: 0 6px 0 0; vertical-align: 1px; }
.soon-note { font-size: .95rem; margin-top: 16px; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--card); }
.auth-box { width: min(440px, 100%); }
.auth-title { font-size: 1.7rem; line-height: 1.25; margin-bottom: 6px; color: var(--navy-900); letter-spacing: -.01em; }
.auth-sub { color: var(--muted); margin-bottom: 22px; line-height: 1.5; }
.auth-title + .alert, .auth-title + form { margin-top: 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 30px; }
.auth-tab { text-align: center; padding: 10px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--muted); }
.auth-tab:hover { color: var(--navy-900); text-decoration: none; }
.auth-tab.on { background: var(--card); color: var(--navy-900); box-shadow: 0 1px 3px rgba(11,32,54,.12), 0 1px 1px rgba(11,32,54,.06); }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.auth-label-row a { font-size: .82rem; }
.auth-submit { display: block; width: 100%; margin-top: 22px; padding-top: 12px; padding-bottom: 12px; }
.auth-submit i, .auth-submit svg { margin-inline-start: 6px; }
.auth-switch { margin-top: 20px; font-size: .9rem; color: var(--muted); text-align: center; }
.auth-inline { margin: -6px 0 16px; }
.auth-box .social-auth { margin-top: 22px; }

@media (max-width: 900px) {
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-art-inner { padding: 36px 24px; gap: 14px; }
  .auth-art .mock-panel, .auth-art-points, .auth-art .showcase { display: none; }
  .auth-art-story { gap: 14px; }
  .auth-panel { padding: 36px 20px 56px; align-items: flex-start; }
}
@media (max-width: 560px) {
  .auth-art-lede { display: none; }
  /* The tabs already offer both, and the phone nav has no room for them. */
  body.auth-page .nav-links > a[href$="/login"], body.auth-page .nav-links > a[href$="/signup"] { display: none; }
  .auth-art-inner { padding: 26px 20px; }
}

/* ============================================================
   MARKETING SITE v2 — hero video landing (NativeSync-style, HireSide blue)
   ============================================================ */
.home-hero-dark .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; }
.home-hero-dark .nav .nav-logo span,
.home-hero-dark .nav .nav-links a { color: #fff; }
.home-hero-dark .nav .nav-links a.btn-primary { color: #fff; }
.home-hero-dark .nav .nav-links a:not(.btn):hover { color: #cfe1f4; }

.m-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ---- hero ---- */
.hero-v2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; }
.hero-v2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 80% 0%, #16324e 0%, #0f1c34 55%); }
.hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No video: a quiet brand-blue glow and dot grid, drawn in CSS. */
.hero-v2-bg-plain { background:
  radial-gradient(800px 520px at 85% 20%, rgba(20,111,182,.45) 0%, transparent 65%),
  radial-gradient(700px 480px at 0% 100%, rgba(44,83,154,.40) 0%, transparent 60%),
  radial-gradient(120% 120% at 80% 0%, #16324e 0%, #0f1c34 55%); }
.hero-v2-bg-plain::after { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); }
.hero-v2-inner.has-mock { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.hero-v2-mock { max-width: 400px; width: 100%; justify-self: end; }
.hero-v2-mock.is-showcase { max-width: 440px; }
@media (max-width: 960px) {
  .hero-v2-inner.has-mock { grid-template-columns: minmax(0, 1fr); }
  .hero-v2-mock { display: none; }
  /* The employers showcase stays on tablets / phones, under the copy. */
  .hero-v2-mock.is-showcase { display: block; justify-self: center; margin-top: 8px; }
}

/* ---- Employers hero showcase (templates/_hero_showcase.html, static/js/showcase.js) ----
   Five product views in one card. All views share one grid cell, so the card keeps the
   height of the tallest and nothing jumps when they change. */
.showcase { position: relative; }
.showcase-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.showcase-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px 9px; border: 0; border-radius: 9px; background: transparent; color: #b9cde2; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 600; line-height: 1.15; overflow: hidden; transition: background .2s, color .2s; }
.showcase-tab :is(i, svg) { font-size: 1rem; color: #8cc8f5; transition: color .2s, transform .2s; }
.showcase-tab span:not(.showcase-tab-bar) { max-width: 100%; overflow: hidden; text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.showcase-tab:hover { color: #fff; background: rgba(255,255,255,.07); }
.showcase-tab.is-active { color: #0f1c34; background: #fff; }
.showcase-tab.is-active :is(i, svg) { color: #146fb6; transform: scale(1.08); }
.showcase-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the progress line under the active tab: fills over one interval (JS sets the duration) */
.showcase-tab-bar { position: absolute; inset-inline: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(20,111,182,.15); opacity: 0; }
.showcase-tab-bar::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: #146fb6; }
.showcase.is-playing .showcase-tab.is-active .showcase-tab-bar { opacity: 1; }
.showcase.is-playing .showcase-tab.is-active .showcase-tab-bar::after { animation: sc-progress var(--sc-interval, 5500ms) linear forwards; }
.showcase.is-paused .showcase-tab.is-active .showcase-tab-bar::after { animation-play-state: paused; }
@keyframes sc-progress { to { width: 100%; } }

.showcase-stage { display: grid; perspective: 1200px; }
.showcase-view { grid-area: 1 / 1; min-height: 404px; }
.showcase-view > .mock-foot { margin-top: auto; }        /* footers line up at the bottom of every view */
.js-showcase .showcase-view { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.975) rotateX(4deg);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1), visibility 0s linear .55s; }
.js-showcase .showcase-view.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js-showcase .showcase-view.is-leaving { opacity: 0; visibility: visible; transform: translateY(-10px) scale(.985); }

/* staggered entrance of the rows inside the view that just became active (--d set by showcase.js) */
.js-showcase .showcase-view.is-active .sc-in { animation: sc-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0s); }
@keyframes sc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.showcase-pause { position: absolute; inset-inline-end: -6px; bottom: -14px; width: 30px; height: 30px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); cursor: pointer;
  background: rgba(15,28,52,.85); color: #fff; font-size: .7rem; box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.js-showcase .showcase-pause { display: inline-flex; }
.showcase-pause:hover { background: #146fb6; }
.showcase-pause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* 1. job ad */
.sc-prompt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; border-radius: 10px; background: #f3f0ff;
  color: #4b3c99; font-size: .76rem; font-style: italic; }
.sc-prompt :is(i, svg) { color: #7a5ce0; font-style: normal; margin-top: 2px; }
.sc-section { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 0; }
.sc-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7686; }
html[lang="ur"] .sc-label, html[lang="ar"] .sc-label { text-transform: none; letter-spacing: 0; }
.sc-line { height: 7px; border-radius: 4px; width: var(--w, 80%); background: linear-gradient(90deg, #e3e9f2, #eef2f8); }
.js-showcase .showcase-view.is-active .sc-line { animation: sc-type .9s cubic-bezier(.3,.7,.3,1) both; }
.js-showcase .showcase-view.is-active .sc-line:nth-child(3) { animation-delay: .25s; }
.js-showcase .showcase-view.is-active .sc-line:nth-child(4) { animation-delay: .45s; }
@keyframes sc-type { from { width: 0; } }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: #e8f1fb; color: #1d4f86; }
.sc-chip.soft { background: #f1f4f8; color: #44515f; }
.sc-chip :is(i, svg) { color: #146fb6; }
.sc-check { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; background: #e2f5ec; color: #0d6a4b;
  font-size: .78rem; font-weight: 600; }

/* 2. shortlist */
.sc-meter { flex: 0 0 54px; height: 6px; border-radius: 3px; background: #e6ebf2; overflow: hidden; }
.sc-meter span { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #50a8ec, #146fb6); }
.js-showcase .showcase-view.is-active .sc-meter span { animation: sc-fill 1s .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sc-fill { from { width: 0; } }

/* 3. evidence */
.sc-hero-row { background: #eef5fc; }
.sc-ring { --v: 0; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#0d9a6c calc(var(--v) * 1%), #dfe6ee 0); }
.sc-ring b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0d7a56; font-size: .86rem; }
.sc-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sc-reasons li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 10px; border-radius: 9px; background: #f7f9fc; }
.sc-reasons :is(i, svg) { margin-top: 2px; font-size: .95rem; flex-shrink: 0; }
.sc-reasons :is(i, svg).ok { color: #0d9a6c; }
.sc-reasons :is(i, svg).q { color: #c58a1b; }
.sc-reasons b { display: block; font-size: .8rem; color: #2a3646; }
.sc-q { display: block; font-size: .74rem; color: #2c539a; font-style: italic; margin-top: 1px; }
.sc-q-muted { color: #8a5a12; font-style: normal; }

/* 4. interview */
.sc-voice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 6px; border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 0%, #e7f1fb 0%, #f7f9fc 70%); }
.sc-orb { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
.sc-orb img { position: relative; width: 40px; height: 40px; object-fit: contain; z-index: 1; }
.sc-orb > span { position: absolute; inset: 0; border-radius: 50%; background: rgba(20,111,182,.18); }
.js-showcase .showcase-view.is-active .sc-orb > span { animation: sc-pulse 2.2s ease-out infinite; }
.js-showcase .showcase-view.is-active .sc-orb > span + span { animation-delay: 1.1s; }
@keyframes sc-pulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.sc-wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.sc-wave span { width: 3px; height: 30%; border-radius: 2px; background: #146fb6; opacity: .75; }
.js-showcase .showcase-view.is-active .sc-wave span { animation: sc-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
@keyframes sc-wave { 0% { height: 18%; } 50% { height: 95%; } 100% { height: 40%; } }
.sc-voice-meta { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: #6b7686; font-weight: 600; }
.sc-live { width: 7px; height: 7px; border-radius: 50%; background: #e0464b; box-shadow: 0 0 0 3px rgba(224,70,75,.18); }
.sc-bubble { max-width: 88%; padding: 8px 11px; border-radius: 12px; font-size: .78rem; line-height: 1.4; }
.sc-bubble.ai { align-self: flex-start; background: #eef5fc; color: #1d3c63; border-end-start-radius: 4px; }
.sc-bubble.me { align-self: flex-end; background: #146fb6; color: #fff; border-end-end-radius: 4px; }

/* 5. decision */
.sc-funnel { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.sc-stage { display: grid; grid-template-columns: 82px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: .78rem; color: #44515f; }
.sc-stage-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-stage b { text-align: end; color: #2a3646; }
.sc-stage-bar { height: 10px; border-radius: 5px; background: #eef2f7; overflow: hidden; }
.sc-stage-bar span { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, #2c539a, #50a8ec); }
.js-showcase .showcase-view.is-active .sc-stage-bar span { animation: sc-fill .9s .3s cubic-bezier(.2,.8,.2,1) both; }
.sc-confirm { margin-top: 4px; padding: 11px 12px; border-radius: 12px; border: 1px solid #dbe5f0; background: #fff;
  box-shadow: 0 10px 26px rgba(16,40,70,.12); }
.sc-confirm-t { font-weight: 700; color: #2a3646; font-size: .86rem; display: flex; align-items: center; gap: 7px; }
.sc-confirm-t :is(i, svg) { color: #146fb6; }
.sc-confirm-s { font-size: .74rem; color: #6b7686; margin-top: 3px; }
.sc-confirm-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.sc-btn { padding: 5px 12px; border-radius: 8px; font-size: .74rem; font-weight: 700; background: #146fb6; color: #fff; }
.sc-btn.ghost { background: transparent; color: #44515f; border: 1px solid #d5dde8; }
.js-showcase .showcase-view.is-active .sc-btn:not(.ghost) { animation: sc-press 2.4s 1.2s ease-in-out infinite; }
@keyframes sc-press { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(20,111,182,0); } 80% { box-shadow: 0 0 0 5px rgba(20,111,182,.25); } }

/* ---- job seeker showcase (templates/_seeker_showcase.html) ---- */
.sc-search { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; padding: 5px; border-radius: 11px; background: #eef3f9; }
.sc-search span { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; background: #fff; color: #2a3646;
  font-size: .8rem; font-weight: 600; box-shadow: 0 1px 2px rgba(16,40,70,.06); }
.sc-search :is(i, svg) { color: #146fb6; }
.sc-logo { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: .78rem; font-weight: 800; }
.sc-logo-1 { background: linear-gradient(135deg, #146fb6, #2c539a); }
.sc-logo-2 { background: linear-gradient(135deg, #e0773a, #c4512b); }
.sc-logo-3 { background: linear-gradient(135deg, #18a07a, #0d7a56); }
.sc-pay { flex-shrink: 0; font-size: .74rem; font-weight: 700; color: #0d7a56; background: #e2f5ec; padding: 3px 8px; border-radius: 999px; }
.sc-upload { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; border: 1px dashed #b9cde2; background: #f7fafd; }
.sc-upload > :is(i, svg):first-child { font-size: 1.4rem; color: #d1453b; }
.sc-upbar { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: #e3e9f2; overflow: hidden; }
.sc-upbar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #50a8ec, #146fb6); }
.js-showcase .showcase-view.is-active .sc-upbar span { animation: sc-fill 1.1s .2s cubic-bezier(.3,.7,.3,1) both; }
.sc-upok { flex-shrink: 0; color: #0d9a6c; font-size: 1.05rem; }
.js-showcase .showcase-view.is-active .sc-upok { animation: sc-rise .4s 1.3s both; }
.sc-fields { display: flex; flex-direction: column; gap: 6px; }
.sc-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: #f4f7fb; font-size: .78rem; }
.sc-field > span { color: #6b7686; }
.sc-field > b { color: #2a3646; font-weight: 600; min-width: 0; }
.sc-disclose { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 9px; background: #fff7e6; color: #7a5310; font-size: .74rem; line-height: 1.4; }
.sc-disclose :is(i, svg) { margin-top: 2px; flex-shrink: 0; }
.sc-track { padding: 10px 12px; border-radius: 12px; background: #eef5fc; display: flex; flex-direction: column; gap: 10px; }
.sc-track-h { display: flex; align-items: center; gap: 12px; }
.sc-status { flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #eef2f7; color: #44515f; }
.sc-status.is-on { background: #146fb6; color: #fff; }
.sc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .68rem; color: #6b7686; }
.sc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.sc-steps li::before { content: ""; position: absolute; top: 5px; inset-inline-start: -50%; width: 100%; height: 2px; background: #cfdbe8; }
.sc-steps li:first-child::before { display: none; }
.sc-steps li.done::before, .sc-steps li.now::before { background: #146fb6; }
.sc-steps li > span { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #cfdbe8; }
.sc-steps li.done > span { background: #146fb6; border-color: #146fb6; }
.sc-steps li.now > span { border-color: #146fb6; box-shadow: 0 0 0 4px rgba(20,111,182,.18); }
.sc-steps li.now { color: #146fb6; font-weight: 700; }
.js-showcase .showcase-view.is-active .sc-steps li.now > span { animation: sc-press 2.4s .8s ease-in-out infinite; }
.sc-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #146fb6; box-shadow: 0 0 0 3px rgba(20,111,182,.2); }
.sc-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-slot { padding: 6px 11px; border-radius: 9px; border: 1px solid #d5dde8; font-size: .76rem; font-weight: 600; color: #2a3646; background: #fff; }
.sc-slot.is-on { background: #146fb6; border-color: #146fb6; color: #fff; }
.js-showcase .showcase-view.is-active .sc-slot.is-on { animation: sc-press 2.4s 1s ease-in-out infinite; }

@media (max-width: 480px) {
  .showcase-tab span:not(.showcase-tab-bar) { display: none; }
  .showcase-tab { padding: 10px 4px; }
  .showcase-view { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js-showcase .showcase-view, .js-showcase .showcase-view.is-active .sc-in, .showcase-tab :is(i, svg),
  .js-showcase .showcase-view.is-active .sc-line, .js-showcase .showcase-view.is-active .sc-meter span,
  .js-showcase .showcase-view.is-active .sc-stage-bar span, .js-showcase .showcase-view.is-active .sc-btn,
  .js-showcase .showcase-view.is-active .sc-orb > span, .js-showcase .showcase-view.is-active .sc-wave span { animation: none !important; transition: none !important; transform: none; }
}
.hero-v2-scrim { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%),
  linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); }
.hero-v2-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 150px 32px 110px; }
/* No overlay filter over the video — keep text legible with a shadow on the text only. */
.hero-v2-copy { max-width: 660px; text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.hero-v2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600;
  letter-spacing: .02em; color: #cfe1f4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px; border-radius: 999px; }
.hero-v2-pulse { width: 8px; height: 8px; border-radius: 50%; background: #50a8ec; box-shadow: 0 0 0 0 rgba(94,167,224,.6); animation: heroPulse 2s infinite; }
@keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(94,167,224,.55); } 70% { box-shadow: 0 0 0 9px rgba(94,167,224,0); } 100% { box-shadow: 0 0 0 0 rgba(94,167,224,0); } }
.hero-v2-title { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; margin: 20px 0 0; letter-spacing: -.02em; }
.hero-v2-title .grad {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #eef3f9;                       /* bright, so it always reads on the dark video */
  animation: gradGlow 3.2s ease-in-out infinite;
}
@keyframes gradGlow {
  0%, 100% { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 14px rgba(94,167,224,.45); }
  50%      { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 30px rgba(122,199,255,.9), 0 0 60px rgba(94,167,224,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-v2-title .grad { animation: none; text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 20px rgba(122,199,255,.7); }
}
.hero-v2-lede { font-size: 1.12rem; line-height: 1.62; color: #d6e2ee; margin: 20px 0 0; max-width: 600px; }
.hero-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Employer sign in / create account under the hero CTAs: small outlined buttons, readable on the navy hero. */
.hero-v2-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.hero-v2-signin-q { font-size: .92rem; color: #d6e2ee; margin-inline-end: 2px; }
.hero-v2-signin-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 10px;
  font-size: .92rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.38);
  transition: background .15s, border-color .15s, transform .15s; }
.hero-v2-signin-btn i { color: #8cc8f5; }
.hero-v2-signin-btn:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); transform: translateY(-1px); }
.hero-v2-signin-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) { .hero-v2-signin-btn { flex: 1 1 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hero-v2-signin-btn, .hero-v2-signin-btn:hover { transition: none; transform: none; } }
.hero-v2-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0 0; padding: 0; }
.hero-v2-proof li { font-size: .92rem; color: #cfe1f4; display: flex; align-items: center; gap: 8px; }
.hero-v2-proof i { color: #50a8ec; }

/* ---- buttons ---- */
.btn-v2 { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 11px; font-weight: 600;
  font-size: .96rem; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; border: 1px solid transparent; }
.btn-v2:hover { text-decoration: none; transform: translateY(-1px); }
.btn-v2-primary { background: #fff; color: var(--navy-900); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.btn-v2-primary:hover { background: #eaf2fb; color: var(--navy-900); }
.btn-v2-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-v2-ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-v2-ghost-dark { background: transparent; color: var(--accent); border-color: var(--line); }
.btn-v2-ghost-dark:hover { background: var(--bg); color: var(--accent-dark); }

/* ---- section rhythm ---- */
.section-v2 { padding: 92px 0; }
.section-v2-alt { background: #fafbfd; }
.section-v2-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.eyebrow-v2 { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 12px; }
.eyebrow-v2.on-dark { color: #7fb6e6; }
.title-v2 { font-size: clamp(1.7rem, 3.3vw, 2.4rem); line-height: 1.16; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.title-v2.on-dark { color: #fff; }
.lede-v2 { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-top: 14px; }
.lede-v2.on-dark { color: #cbd8e6; }

/* ---- trust strip ---- */
.strip-v2 { background: #f6f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.strip-v2 .m-container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.strip-v2-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.strip-v2-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; }
.strip-v2-langs li { font-size: .92rem; font-weight: 600; color: var(--navy-800); display: flex; align-items: center; gap: 8px; }
.strip-v2-langs i { color: var(--accent); }

/* ---- how it works ---- */
.how-v2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.how-v2-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.how-v2-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.how-v2-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); opacity: .35; }
.how-v2-body h3 { color: var(--navy-900); font-size: 1.12rem; margin: 8px 0 8px; display: flex; align-items: center; gap: 9px; }
.how-v2-body h3 i { color: var(--accent); }
.how-v2-body p { color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ---- quote band ---- */
.quote-band { background: var(--navy-900); color: #fff; padding: 60px 0; }
.quote-big { text-align: center; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; color: #eaf2fb; max-width: 900px; margin: 0 auto; }

/* ---- bento ---- */
.bento-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bento-v2-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; }
.bento-v2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.bento-v2-card-lg { grid-column: span 2; background: linear-gradient(135deg, #146fb6, #16324e); color: #fff; border-color: transparent; }
.bento-v2-icon { width: 46px; height: 46px; border-radius: 12px; background: #eaf2fb; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; }
.bento-v2-card-lg .bento-v2-icon { background: rgba(255,255,255,.16); color: #fff; }
.bento-v2-card h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 8px; }
.bento-v2-card-lg h3 { color: #fff; font-size: 1.4rem; }
.bento-v2-card p { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.bento-v2-card-lg p { color: #d6e2ee; }

/* ---- who ---- */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.who-card { text-align: center; padding: 28px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.who-card i { font-size: 1.9rem; color: var(--accent); }
.who-card h3 { color: var(--navy-900); font-size: 1.1rem; margin: 14px 0 8px; }
.who-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* ---- security band ---- */
.security-band { background: var(--navy-900); color: #fff; padding: 84px 0; }
.security-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.security-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #eaf2fb; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; font-size: .92rem; }
.security-list i { color: #50a8ec; font-size: 1.05rem; }

/* ---- stats ---- */
.stat-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-v2-n { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; }
.stat-v2-l { color: var(--muted); font-size: .9rem; margin-top: 6px; }

/* ---- FAQ ---- */
.faq-v2 { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--navy-900); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { color: var(--muted); font-size: .95rem; line-height: 1.6; padding: 0 0 16px; margin: 0; }

/* ---- CTA band ---- */
.cta-v2 { padding: 90px 0; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #eaf2fb 0%, #fff 60%); }
.cta-v2-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.cta-v2-lede { color: var(--muted); font-size: 1.08rem; margin: 14px auto 30px; max-width: 560px; }

@media (max-width: 900px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr 1fr; }
  .bento-v2-card-lg { grid-column: span 2; }
  .security-inner { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr; }
  .bento-v2-card-lg { grid-column: span 1; }
  .security-list { grid-template-columns: 1fr; }
  .hero-v2-inner { padding: 120px 22px 80px; }
  .hero-v2-scrim { background: linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,.75) 60%, rgba(11,32,54,.9) 100%); }
}

/* Match SweetAlert2 inputs/selects to the app's field styling (Create Folder dialog, etc.)
   The side inset matters: `margin: 6px 0` with `width: 100%` made the field span
   the popup edge to edge while the title and text above it stayed inset, so it
   looked wedged into the corners. 1.6em is SweetAlert2's own content inset. */
.swal2-popup .swal2-input,
.swal2-popup .swal2-select {
  width: calc(100% - 3.2em); box-sizing: border-box; height: auto; margin: 6px 1.6em 0;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; box-shadow: none;
}
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-select:focus { outline: none; border-color: var(--navy-700); box-shadow: none; }
.btn-icon { padding-inline-start: 12px; padding-inline-end: 12px; }
.btn-icon i { margin: 0; }
#starFilterBtn.on { background: #fff7e0; border-color: #e8b93c; color: #96700e; }
#starFilterBtn.on i { color: #e8b93c; }

/* format-aware date field (replaces native type=date) */
.df-wrap { position: relative; display: flex; align-items: stretch; }
.df-text { flex: 1; padding-inline-end: 38px; }
.df-btn {
  position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 36px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; border-radius: 0; border-start-end-radius: 8px; border-end-end-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.df-btn:hover { color: var(--accent); background: #f2f5fa; }
.df-cal {
  display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 90;
  width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(16,32,54,.18); padding: 10px;
}
.df-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.df-cal-title { display: flex; gap: 5px; }
.df-sel {
  border: 1px solid var(--line); background: #fff; color: var(--navy-900);
  border-radius: 7px; padding: 3px 5px; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.df-sel:hover { border-color: var(--accent); }
.df-nav { border: 0; background: #f2f5fa; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 1.05rem; color: var(--ink); line-height: 1; }
.df-nav:hover { background: var(--accent); color: #fff; }
.df-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.df-dowc { text-align: center; font-size: .68rem; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.df-day { border: 0; background: transparent; height: 30px; border-radius: 7px; cursor: pointer; font-size: .84rem; color: var(--ink); }
.df-day:hover { background: #eef1f6; }
.df-day.df-today { box-shadow: inset 0 0 0 1.5px var(--accent-line, #cfe2f6); }
.df-day.df-sel { background: var(--accent); color: #fff; font-weight: 700; }
.df-grid.df-mgrid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.df-mgrid .df-day { height: 34px; }
.df-cal-title:not(:has(select)) { font-weight: 700; color: var(--ink); }
.df-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.df-link { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: .82rem; font-weight: 600; }
.df-link:hover { text-decoration: underline; }

/* ============================================================
   DARK MODE — applied only when <html data-theme="dark">.
   Only the authenticated app shell (app_base.html) sets the
   attribute, so the public marketing site stays light.
   ============================================================ */
:root[data-theme="dark"] {
  --required: #f87171;
  --navy-900: #eaf1f8;   /* these read as strong TEXT in the app → flip light */
  --navy-800: #cbd8e8;
  --navy-700: #a3c0df;
  --ink: #dce4ed;
  --muted: #93a1b3;
  --line: #2b3644;
  --bg: #0e1621;
  --card: #161f2b;
  --accent: #4f99e6;
  --accent-dark: #7cb6ee;
  --danger: #ef7b70;
  --warn-bg: #2b2617;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
}

/* App-chrome surfaces that hardcode white in light mode. */
[data-theme="dark"] .app-sidebar { background: var(--card); }

/* Elevated popovers/menus/modals — one step lighter than the page. */
[data-theme="dark"] .user-menu,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .ctx,
[data-theme="dark"] .kebab-menu,
[data-theme="dark"] .df-cal,
[data-theme="dark"] .set-tab:hover { background: #1c2735; }

/* Form fields. */
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #1c2836; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] ::placeholder { color: var(--muted); opacity: .85; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* SweetAlert dialogs. */
[data-theme="dark"] .swal2-popup { background: #1c2735; color: var(--ink); }
[data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--ink); }
[data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-select, [data-theme="dark"] .swal2-textarea {
  background: #1c2836; color: var(--ink); border-color: var(--line); }

/* HireSide dialogs — the card itself is covered by the .modal-card rule above;
   only the icon badge needs its own (tinted, not washed-out) dark values. */
[data-theme="dark"] .dlg-icon.tone-warn { background: rgba(255,193,7,.14); color: #e8c07a; }
[data-theme="dark"] .dlg-note { background: rgba(255,193,7,.12); color: #e8c07a; }
[data-theme="dark"] .dlg-icon.tone-danger { background: rgba(192,57,43,.18); color: #ef8a7d; }
[data-theme="dark"] .dlg-icon.tone-info { background: rgba(20, 111, 182,.20); color: #7db4e8; }
[data-theme="dark"] .dlg-icon.tone-ok { background: rgba(29,138,76,.18); color: #6fc793; }

/* Navy-filled button: --navy-800 flips to a light TEXT color in dark, so give it its own fill. */
[data-theme="dark"] .btn-navy { background: #24405c; color: #fff; }
[data-theme="dark"] .btn-outline { border-color: var(--line); }

/* Sidebar + row states (light tints → subtle dark-accent). */
[data-theme="dark"] .side-item.active { background: rgba(79,153,230,.16); color: var(--accent-dark); }
[data-theme="dark"] .side-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .side-item.active i { color: var(--accent-dark); }
[data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,.03); }

/* The dark-mode toggle button in the user menu. */
.menu-btn .fa-moon, .menu-btn .fa-sun-bright { width: 16px; }

/* ---- Dark-mode polish: tinted chips, badges, alerts, hovers, panels ---- */
/* Neutral gray chips / hovers → subtle raised surface. */
[data-theme="dark"] .modal-close,
[data-theme="dark"] .pill.subuser,
[data-theme="dark"] .pill.access-view,
[data-theme="dark"] .table th { background: rgba(255,255,255,.06); color: var(--muted); }

[data-theme="dark"] .modal-close:hover,
[data-theme="dark"] .kebab > summary:hover,
[data-theme="dark"] .kebab-menu button:hover,
[data-theme="dark"] .kebab-menu a:hover,
[data-theme="dark"] .df-day:hover,
[data-theme="dark"] .df-btn:hover,
[data-theme="dark"] .df-nav,
[data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,.08); }

/* Accent tints. */
[data-theme="dark"] .set-tab.active,
[data-theme="dark"] .ctx-item:hover { background: rgba(79,153,230,.16); color: var(--accent-dark); }
[data-theme="dark"] .alert-info { background: rgba(79,153,230,.14); color: #a9cdf3; border: 1px solid rgba(79,153,230,.3); }
[data-theme="dark"] .alert-success { background: rgba(63,174,134,.14); color: #6fd0a6; border: 1px solid rgba(63,174,134,.3); }
[data-theme="dark"] .alert-warn { background: rgba(214,158,46,.14); color: #e0b45f; border: 1px solid rgba(214,158,46,.3); }

/* Danger / red. */

[data-theme="dark"] .ctx-item.danger:hover { background: rgba(239,123,112,.16); color: #f19d95; }
[data-theme="dark"] .alert-error { background: rgba(239,123,112,.14); color: #f19d95; border: 1px solid rgba(239,123,112,.3); }

/* Toasts keep a solid fill in both themes (white text needs the contrast);
   dark mode just lifts them off the darker page. */
[data-theme="dark"] .app-toast { background: #12946a; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
[data-theme="dark"] .app-toast.is-err { background: #d1483a; }
[data-theme="dark"] .set-msg.ok { color: #4fc79b; }

/* Warn / amber. */

[data-theme="dark"] #starFilterBtn.on { background: rgba(224,137,74,.18); color: #e6b06a; }

/* White HireSide logo on the dark sidebar. */
[data-theme="dark"] .side-logo img { filter: brightness(0) invert(1); }

/* ===================== Admin Users — job-post quota (ADR-0107) ===================== */
.jp-cell { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.jp-cell strong { color: var(--ink); }
.jp-cell.jp-full strong { color: var(--danger); }

/* ===================== Admin Users — search / filters / pagination ===================== */
.admin-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.admin-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; }
.admin-search i { color: var(--muted); font-size: .9rem; }
.admin-search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--ink); font-size: .88rem; }
.admin-filter { border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  padding: 9px 12px; font-size: .84rem; cursor: pointer; }
.admin-count { margin-inline-start: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.admin-empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: .9rem; }
.admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; }
.admin-pageinfo { font-size: .82rem; color: var(--muted); }
.admin-pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
[data-theme="dark"] .admin-search, [data-theme="dark"] .admin-filter { background: var(--card); }

/* Settings: Account tab (delete account) */
.set-tab-danger { color: #c22f42 !important; margin-top: auto; }
.danger-zone { border: 1px solid rgba(204,47,66,.35); background: rgba(204,47,66,.05);
  border-radius: 12px; padding: 16px 18px; font-size: .92rem; color: var(--ink); }

/* ============================================================
   Language switcher (ADR-0070) — public nav, globe pill + dropdown menu
   ============================================================ */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  color: #e8eef7; font-size: .85rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
  cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover,
.lang-switch[open] summary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lang-switch summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-switch summary .fa-globe { font-size: .95rem; }
.lang-switch .lang-caret { font-size: .62rem; opacity: .8; transition: transform .2s; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }

/* Same card look as the app's .user-menu. */
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22);
  animation: lang-menu-in .14s ease-out; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Scoped under .nav .nav-links (and the dark home hero) so it beats the nav's
   white link colour rules. */
.nav .nav-links .lang-menu a,
.home-hero-dark .nav .nav-links .lang-menu a { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px; border-radius: 7px; color: var(--ink); font-size: .9rem; font-weight: 500; }
.nav .nav-links .lang-menu a:hover,
.home-hero-dark .nav .nav-links .lang-menu a:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.nav .nav-links .lang-menu a.active,
.home-hero-dark .nav .nav-links .lang-menu a.active { color: var(--navy-800); font-weight: 700; }
.lang-menu a i { font-size: .8rem; color: var(--navy-700); }
.lang-names { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.lang-english { font-size: .74rem; font-weight: 400; color: var(--muted); }

/* ===== Right-to-left (ADR-0087) =====
   Most direction handling above uses logical properties (margin-inline-*,
   inset-inline-*, text-align:start/end ...), which render identically in LTR
   and mirror automatically under <html dir="rtl">. This section covers what
   logical properties cannot express: transforms, gradients angled along the
   x-axis, icon mirroring, LTR islands (emails, codes), and Arabic / Urdu typography.
   Everything here is scoped to [dir="rtl"] / [lang="ar|ur|ms|zh|es"], so it
   never affects English. */

/* Directional icons (chevrons, arrows) marked up with class "rtl-flip". */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* Progress / usage bars fill from the inline start, so their gradients run
   the other way. Specificity mirrors the LTR rules it overrides. */
[dir="rtl"] .side-quota-fill { background: linear-gradient(270deg, var(--accent), #50a8ec); }
[dir="rtl"] .side-quota.is-warn .side-quota-fill { background: linear-gradient(270deg, #f59e0b, #fbbf24); }
[dir="rtl"] .side-quota.is-danger .side-quota-fill { background: linear-gradient(270deg, #f87171, #fca5a5); }

/* Marketing hero: the scrim is darkest behind the copy, which sits on the
   right in RTL. */
[dir="rtl"] .hero-v2-scrim { background:
  linear-gradient(270deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%),
  linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); }

/* LTR islands: emails, passwords, phone numbers, URLs and code stay
   left-to-right (so "@", "." and digits don't reorder) but hug the RTL
   inline end like the surrounding fields. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .user-menu-mail,
[dir="rtl"] .user-pill-sub,
[dir="rtl"] .team-mail { direction: ltr; text-align: end; }
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }

/* Arabic typography — Noto Sans Arabic is loaded in <head> when Lang is 'ar'. */
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] button { font-family: "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* Arabic is a joined script: any letter-spacing breaks the joins, and it has
   no letter case. Neutralise the selectors that set either. */

html[lang="ar"] .nav-logo,
html[lang="ar"] .hero h1,
html[lang="ar"] .section h2,
html[lang="ar"] .card .meta,
html[lang="ar"] .plan-tag,
html[lang="ar"] .table th,
html[lang="ar"] .page-head h1,
html[lang="ar"] .side-quota-label,
html[lang="ar"] .hero-v2-eyebrow,
html[lang="ar"] .hero-v2-title,
html[lang="ar"] .eyebrow-v2,
html[lang="ar"] .title-v2,
html[lang="ar"] .strip-v2-label,
html[lang="ar"] .quote-big,
html[lang="ar"] .stat-v2-n,
html[lang="ar"] .cta-v2-title,
html[lang="ar"] .df-dowc { letter-spacing: normal; text-transform: none; }

/* Urdu typography (ADR-0124). Noto Nastaliq Urdu - the Nastaliq style Pakistani
   readers expect (Naskh reads as Arabic to them) - self-hosted and subset to the
   Arabic-script ranges (static/fonts, SIL OFL 1.1, ~200 KB variable 400-700).
   unicode-range means Latin text (names, emails, English terms) keeps the UI font
   and the file is only fetched where Urdu text is on screen. :lang(ur) also
   covers Urdu islands on other pages (a job ad or an interview in Urdu).
   Nastaliq is tall and slanted, so it needs a generous line height (~2) and
   never takes letter-spacing, capitals or italics. */
@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("/static/fonts/NotoNastaliqUrdu-urdu.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}
:lang(ur),
html[lang="ur"] body,
html[lang="ur"] input,
html[lang="ur"] select,
html[lang="ur"] textarea,
html[lang="ur"] button { font-family: "Noto Nastaliq Urdu", "Segoe UI", system-ui, -apple-system, sans-serif; }
:lang(ur) { line-height: 2; font-style: normal; letter-spacing: normal; }
html[lang="ur"] body { line-height: 2; }
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3,
html[lang="ur"] .hero-v2-title, html[lang="ur"] .title-v2, html[lang="ur"] .cta-v2-title,
html[lang="ur"] .page-head h1 { line-height: 1.75; }
/* Controls: room for Nastaliq's ascenders / descenders without clipping. */
html[lang="ur"] .btn, html[lang="ur"] .btn-v2, html[lang="ur"] input, html[lang="ur"] select,
html[lang="ur"] textarea, html[lang="ur"] .badge, html[lang="ur"] .chip, html[lang="ur"] .tab,
html[lang="ur"] .set-tab, html[lang="ur"] .side-item { line-height: 1.9; }
/* A <select> sizes its box from the font's metrics, not line-height: give Nastaliq's
   tall kaf / gaf room so the chosen option is not clipped at the top. */
html[lang="ur"] select { min-height: 3em; padding-block: 2px; }
/* Two-word Urdu labels ("لاگ اِن کریں") must not wrap into a tall stack in the top bar. */
html[lang="ur"] .nav-links > a, html[lang="ur"] .nav-links .btn { white-space: nowrap; }
@media (max-width: 480px) { html[lang="ur"] .nav-links { gap: 8px; } html[lang="ur"] .nav-links > a { font-size: .85rem; } }
html[lang="ur"] .nav-logo,
html[lang="ur"] .hero h1,
html[lang="ur"] .section h2,
html[lang="ur"] .card .meta,
html[lang="ur"] .plan-tag,
html[lang="ur"] .table th,
html[lang="ur"] .page-head h1,
html[lang="ur"] .side-quota-label,
html[lang="ur"] .hero-v2-eyebrow,
html[lang="ur"] .hero-v2-title,
html[lang="ur"] .eyebrow-v2,
html[lang="ur"] .title-v2,
html[lang="ur"] .strip-v2-label,
html[lang="ur"] .quote-big,
html[lang="ur"] .stat-v2-n,
html[lang="ur"] .cta-v2-title,
html[lang="ur"] .df-dowc,
:lang(ur) em, :lang(ur) i:not([class*="fa-"]) { letter-spacing: normal; text-transform: none; font-style: normal; }

/* Malay: long compound words can overflow narrow nav items, tabs, menus and
   buttons. break-word only breaks a word that would otherwise overflow and
   does not change min-content sizing, so layouts stay put. */
html[lang="ms"] .set-tab,
html[lang="ms"] .side-item,
html[lang="ms"] .user-menu a,
html[lang="ms"] .user-menu .menu-btn,
html[lang="ms"] .kebab-menu a,
html[lang="ms"] .kebab-menu button,
html[lang="ms"] .ctx-item,
html[lang="ms"] .btn { overflow-wrap: break-word; }

/* Simplified Chinese: system CJK faces (no web font — a CJK web font is
   megabytes). Letter-spacing and uppercase transforms mean nothing for Han
   characters and only loosen the text, so neutralise them as for Arabic. */
html[lang="zh"] body,
html[lang="zh"] input,
html[lang="zh"] select,
html[lang="zh"] textarea,
html[lang="zh"] button { font-family: "Segoe UI", -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; }

html[lang="zh"] .nav-logo,
html[lang="zh"] .hero h1,
html[lang="zh"] .section h2,
html[lang="zh"] .card .meta,
html[lang="zh"] .plan-tag,
html[lang="zh"] .table th,
html[lang="zh"] .page-head h1,
html[lang="zh"] .side-quota-label,
html[lang="zh"] .hero-v2-eyebrow,
html[lang="zh"] .hero-v2-title,
html[lang="zh"] .eyebrow-v2,
html[lang="zh"] .title-v2,
html[lang="zh"] .strip-v2-label,
html[lang="zh"] .quote-big,
html[lang="zh"] .stat-v2-n,
html[lang="zh"] .cta-v2-title,
html[lang="zh"] .df-dowc { letter-spacing: normal; text-transform: none; }

/* Spanish runs ~25% longer than English: same overflow guard as Malay. */
html[lang="es"] .set-tab,
html[lang="es"] .side-item,
html[lang="es"] .user-menu a,
html[lang="es"] .user-menu .menu-btn,
html[lang="es"] .kebab-menu a,
html[lang="es"] .kebab-menu button,
html[lang="es"] .ctx-item,
html[lang="es"] .btn { overflow-wrap: break-word; }

/* ===== Legal pages: Terms of Service, Privacy Policy ===== */
.legal { max-width: 860px; margin: 0 auto 64px; }
.legal .legal-meta { color: var(--muted); font-size: .9rem; margin: -12px 0 20px; }
.legal .legal-note { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; font-size: .9rem; margin-bottom: 20px; }
.legal .legal-body { padding: 28px 32px; line-height: 1.65; color: var(--ink); }
.legal .legal-body h2 { font-size: 1.2rem; color: var(--navy-900); margin: 34px 0 10px; scroll-margin-top: 90px; }
.legal .legal-body h2:first-of-type { margin-top: 8px; }
.legal .legal-body h3 { font-size: 1rem; color: var(--navy-900); margin: 22px 0 8px; }
.legal .legal-body p { margin: 0 0 12px; }
.legal .legal-body ul, .legal .legal-body ol { margin: 0 0 14px; padding-inline-start: 22px; }
.legal .legal-body li { margin: 0 0 6px; }
.legal .legal-body strong { color: var(--navy-900); }
.legal .legal-caps { text-transform: none; font-weight: 600; }
.legal .legal-toc { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin: 0 0 8px; }
.legal .legal-toc-title { font-weight: 600; color: var(--navy-900); margin-bottom: 8px; }
.legal .legal-toc ol { columns: 2; column-gap: 28px; margin: 0; font-size: .92rem; }
.legal .legal-toc li { break-inside: avoid; }
.legal .legal-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .9rem; }
.legal .legal-table th, .legal .legal-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; vertical-align: top; }
.legal .legal-table th { background: var(--bg); color: var(--navy-900); font-weight: 600; }
.legal .legal-table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  .legal .legal-body { padding: 20px 16px; }
  .legal .legal-toc ol { columns: 1; }
}

/* Signup's agreement line (Terms / Privacy). */
.auth-legal { font-size: .8rem; color: var(--muted); text-align: center; margin: 14px 0 0; line-height: 1.5; }
.auth-legal a { color: var(--accent); }

/* ============================================================
   Company profile (ADR-0109) — sidebar block + Settings -> Company
   ============================================================ */
.side-company { display: flex; align-items: center; gap: 9px; width: 100%; margin: -10px 0 14px; padding: 6px 8px;
  border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: start; font-family: inherit; color: var(--muted); }
.side-company:hover { background: var(--bg); color: var(--navy-900); }
.side-company-logo { width: 24px; height: 24px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-size: .72rem; color: var(--muted); }
.side-company-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.side-company-name { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 820px) { .side-company { display: none; } }
.company-logo-box { border-radius: 14px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.company-logo-box img { object-fit: contain; background: #fff; }
.slug-row { display: flex; align-items: stretch; }
.slug-prefix { display: flex; align-items: center; padding: 0 10px; font-size: .85rem; color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-inline-end: none; border-start-start-radius: 8px; border-end-start-radius: 8px; white-space: nowrap; }
.field .slug-row input { border-start-start-radius: 0; border-end-start-radius: 0; min-width: 0; }

/* ============================================================
   Candidate portal /c/ (ADR-0110)
   ============================================================ */
body.cand-page { background: var(--bg); min-height: 100vh; }
.cand-top { background: var(--card); border-bottom: 1px solid var(--line); }
.cand-top-inner { max-width: 880px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
.cand-logo img { height: 40px; width: auto; display: block; }
.cand-who { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.cand-who form { margin: 0; }
.cand-who-mail { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.cand-main { padding: 40px 20px 60px; }
.cand-box { margin: 20px auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 34px 30px; box-shadow: var(--shadow); }
.cand-wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.cand-h1 { font-size: 1.6rem; color: var(--navy-900); margin: 0; }
.cand-card { padding: 22px 24px; }
.cand-card h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.cand-card h3 i { color: var(--accent); }
.cand-empty { text-align: center; padding: 18px 10px 8px; }
.cand-empty > i { font-size: 2.2rem; color: var(--accent); }
.cand-empty p { max-width: 460px; margin: 10px auto 0; }
@media (max-width: 560px) { .cand-who-mail { display: none; } .cand-box { padding: 26px 18px; } }

/* --- Job-seeker avatar menu (templates/_cand_menu.html) — the job-seeker top bar
       (light) and the public header (navy), so link colours are pinned here. --- */
.cm-menu { position: relative; }
.cm-trigger { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 3px 8px 3px 3px; border-radius: 999px; border: 1px solid transparent; transition: background .15s, border-color .15s; }
.cm-trigger::-webkit-details-marker { display: none; }
.cm-trigger:hover, .cm-menu[open] .cm-trigger { background: var(--bg); border-color: var(--line); }
.cm-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cm-caret { font-size: .62rem; color: var(--muted); transition: transform .15s; }
.cm-menu[open] .cm-caret { transform: rotate(180deg); }
.cm-avatar { border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, #146fb6, #2c539a); }
.cm-avatar-sm { width: 36px; height: 36px; font-size: .88rem; }
.cm-avatar-md { width: 44px; height: 44px; font-size: 1rem; }
.cm-panel { position: absolute; z-index: 80; top: calc(100% + 8px); inset-inline-end: 0; width: 272px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(11, 32, 54, .2);
  animation: cm-in .14s ease-out; }
@keyframes cm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cm-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.cm-who-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cm-who-text strong { color: var(--navy-900); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-who-text span { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-links { display: flex; flex-direction: column; }
.cm-panel a, .cm-panel .cm-btn, .cm-out button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border-radius: 9px;
  color: var(--ink); font: inherit; font-size: .92rem; background: none; border: 0; cursor: pointer; text-align: start; }
.cm-panel a i, .cm-panel .cm-btn i, .cm-out button i { width: 18px; text-align: center; color: var(--muted); }
.cm-panel a:hover, .cm-panel .cm-btn:hover, .cm-out button:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; }
.cm-panel a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.cm-panel a[aria-current="page"] i { color: var(--accent); }
.cm-sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.cm-out { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.cm-out button:hover, .cm-out button:hover i { color: var(--danger); }
/* On the navy public header. */
.nav .cm-trigger:hover, .nav .cm-menu[open] .cm-trigger { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }
.nav .cm-caret { color: #d6deea; }
.nav .cm-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.nav .nav-links .cm-panel a { color: var(--ink); font-size: .92rem; }
.nav .nav-links .cm-panel a:hover { color: var(--navy-900); }
.nav .nav-links .cm-panel a[aria-current="page"] { color: var(--accent); }
@media (max-width: 420px) { .cm-panel { width: min(272px, calc(100vw - 24px)); } }
@media (prefers-reduced-motion: reduce) { .cm-panel { animation: none; } .cm-caret { transition: none; } }

/* ============================================================
   Admin audit log (ADR-0111)
   ============================================================ */
.audit-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; margin-bottom: 14px; }
.audit-filters .field { margin-bottom: 10px; }
.audit-filter-btns { display: flex; gap: 8px; margin-bottom: 10px; }
.audit-scroll { overflow-x: auto; }
.audit-table td { font-size: .84rem; vertical-align: top; }
.audit-data { font-size: .76rem; word-break: break-all; }
.audit-verify { font-size: .88rem; font-weight: 600; }
.audit-verify.ok { color: #0d7a56; }
.audit-verify.bad { color: var(--danger); }
.pill.audit-user { background: rgba(20, 111, 182, .12); color: var(--accent); }
.pill.audit-candidate { background: rgba(13, 122, 86, .14); color: #0d7a56; }
.pill.audit-admin { background: rgba(143, 106, 0, .14); color: #8a6a00; }
.pill.audit-system { background: #eef1f6; color: var(--muted); }

/* Settings - Company: the job feeds opt-out (ADR-0154) */
.co-feeds-link { margin: 4px 0 16px; }
/* Screen107 / ADR-0224: the ways candidates can take the AI interview (account owner only) */
.co-ivmodes-h { display: block; margin-bottom: 6px; }
.co-ivmodes-opts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 4px; }
/* Settings -> Integrations: Manage job boards (ADR-0155) */
.bd-pause { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.bd-pause input { margin-top: 4px; flex: none; }
.bd-note { margin: 0 0 12px; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bd-grid.bd-paused { opacity: .55; }
.bd-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bd-card.on { border-color: var(--accent); }
.bd-head { display: flex; align-items: center; gap: 10px; }
.bd-head > div { flex: 1; min-width: 0; }
.bd-logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--bg); flex: none; }
.bd-region { font-size: 12px; }
.bd-state { font-size: 12px; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--bg); }
.bd-card.on .bd-state { background: var(--accent); color: #fff; }
.bd-about { margin: 0; font-size: 13px; }
.bd-feed { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.bd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.bd-li { margin: 0; }
/* Super Admin: the job feeds table (ADR-0155) */
.bd-admin { width: 100%; border-collapse: collapse; font-size: 14px; }
.bd-admin th, .bd-admin td { text-align: start; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bd-admin input { width: 100%; min-width: 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; font: 12px ui-monospace, Consolas, monospace; background: var(--bg); color: var(--ink); }

/* --- scrollbars: thin, rounded, in the brand blue (light and dark) ---
   Standard properties for Firefox / current Chrome & Edge; ::-webkit-scrollbar for Safari.
   Places that hide their bar (tab strips: scrollbar-width: none) keep doing so - their class
   rules are more specific than these. */
:root { --sb-thumb: rgba(20, 111, 182, .32); --sb-thumb-hover: rgba(20, 111, 182, .55); }
:root[data-theme="dark"] { --sb-thumb: rgba(80, 168, 236, .30); --sb-thumb-hover: rgba(80, 168, 236, .55); }
@supports (scrollbar-color: auto) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* validate.js: a checkbox / radio wrapped in its label gets its message right under the label,
   full width (Screen4) - never squeezed beside the text. */
label + .field-error[data-hs-v] { display: block; margin: -4px 0 12px; }
label.invalid { border-color: var(--danger); }

/* The "required" asterisk, red on every page (owner, 2026-10-09): the employer app (.req-star),
   the apply form (.cr-req), the interview pre-check (.iv-req), the proposal form (.req) and the
   job seeker's profile. One rule here, so a page that doesn't load jobs.css gets it too. */
.req-star, .cr-req, .iv-req, .pr-form .req { color: var(--required, #dc2626) !important; font-weight: 700; }

/* Issues1 #3 (2026-10-09): no native-looking dropdowns. Every select gets the app's look: the base
   (border, radius, padding, colours) on the bare element - any component rule still wins - and the
   chevron / appearance / end padding one step stronger, so a component that sets `background`
   never loses its arrow. The open list is the browser's own (it can't be styled) - native selects
   stay for keyboard and screen-reader use. Multi-line selects keep the native look. */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%235b6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2393a1b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select {
  font-family: inherit; font-size: .95rem; line-height: 1.3; color: var(--ink);
  background-color: #fff; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 9px 12px; min-height: 40px; max-width: 100%; cursor: pointer;
}
select:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: var(--select-chevron); background-repeat: no-repeat;
  background-position: right 11px center; background-size: 12px 12px;
  padding-inline-end: 34px;
}
[dir="rtl"] select:not([multiple]):not([size]) { background-position: left 11px center; }
select:hover:not(:disabled) { border-color: #c5ccd6; }
select:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(20, 111, 182, .15); }
select:disabled { opacity: .6; cursor: not-allowed; }
[data-theme="dark"] select:hover:not(:disabled) { border-color: #3a4757; }

/* Screen124 (2026-10-17): the OPEN list in the app's look too - rounded, the theme's border and
   card colour, a soft shadow, rounded rows and the accent for the chosen one - where the browser
   can style it (customizable select, Chrome / Edge 135+). Elsewhere the list stays the browser's
   own; the closed control above is the same everywhere. Our chevron stays (the built-in icon hides). */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]) { appearance: base-select; display: inline-flex; align-items: center; }
  select:not([multiple]):not([size])::picker-icon { display: none; }
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
    box-shadow: 0 14px 32px rgba(16, 32, 54, .16); padding: 4px; margin-block: 4px; max-block-size: min(340px, 60vh);
    overflow-y: auto; min-inline-size: anchor-size(width);
  }
  select:not([multiple]):not([size]) option {
    padding: 7px 10px; border-radius: 6px; font-size: .92rem; color: var(--ink); background: transparent; cursor: pointer;
  }
  select:not([multiple]):not([size]) option::checkmark { display: none; }
  select:not([multiple]):not([size]) option:hover,
  select:not([multiple]):not([size]) option:focus-visible { background: rgba(20, 111, 182, .09); outline: none; }
  select:not([multiple]):not([size]) option:checked { background: rgba(20, 111, 182, .14); color: var(--accent); font-weight: 600; }
  select:not([multiple]):not([size]) option:disabled { color: var(--muted); cursor: default; }
  select:not([multiple]):not([size]) optgroup { font-weight: 700; color: var(--muted); font-size: .8rem; padding: 6px 8px 2px; }
  [data-theme="dark"] select:not([multiple]):not([size])::picker(select) { box-shadow: 0 14px 32px rgba(0, 0, 0, .45); }
  [data-theme="dark"] select:not([multiple]):not([size]) option:hover,
  [data-theme="dark"] select:not([multiple]):not([size]) option:focus-visible { background: rgba(79, 153, 230, .14); }
  [data-theme="dark"] select:not([multiple]):not([size]) option:checked { background: rgba(79, 153, 230, .2); }
}

/* ============================================================
   The HireSide Assistant (ADR-0219) - floating button + chat panel
   ============================================================ */
.ai-fab { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; border: 0;
  cursor: pointer; background: var(--accent); color: #fff; font-size: 1.15rem; box-shadow: 0 6px 20px rgba(12, 100, 174, .38);
  display: inline-flex; align-items: center; justify-content: center; transition: transform .15s, box-shadow .15s, background .15s; }
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(12, 100, 174, .46); }
.ai-fab.is-open { background: #0f1c34; }   /* Screen180: a fixed navy - --navy-900 flips light in dark mode */
.ai-panel { position: fixed; inset-inline-end: 22px; bottom: 86px; z-index: 60; width: min(390px, calc(100vw - 44px));
  height: min(580px, calc(100vh - 130px)); display: flex; flex-direction: column; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 48px rgba(11, 32, 54, .22); }
.ai-head { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 13px 15px; background: #0f1c34;
  color: #fff; font-weight: 600; font-size: .95rem; }
.ai-head i { color: #ffd166; margin-inline-end: 4px; }
.ai-close { background: none; border: 0; color: #cfe1f4; cursor: pointer; font-size: 1rem; padding: 2px 4px; }
.ai-close:hover { color: #fff; }
.ai-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { max-width: 88%; padding: 9px 13px; border-radius: 13px; font-size: .89rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.ai-bot { align-self: flex-start; background: #f1f5fa; color: var(--ink); border-end-start-radius: 4px; }
.ai-user { align-self: flex-end; background: var(--accent); color: #fff; border-end-end-radius: 4px; }
.ai-msg.is-thinking { opacity: .55; letter-spacing: .18em; }
.ai-li { display: block; padding-inline-start: 14px; position: relative; }
.ai-li::before { content: "•"; position: absolute; inset-inline-start: 2px; }
.ai-starters { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-starter { font: inherit; font-size: .8rem; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--accent); cursor: pointer; }
.ai-starter:hover { border-color: var(--accent); }
.ai-form { flex: none; display: flex; gap: 8px; padding: 11px 11px 6px; border-top: 1px solid var(--line); }
.ai-form input { flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: .89rem; background: var(--card); color: var(--ink); }
.ai-form input:focus { outline: none; border-color: var(--accent); }
.ai-send { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
.ai-send:disabled { opacity: .5; cursor: default; }
.ai-foot { flex: none; font-size: .72rem; padding: 0 14px 9px; }
@media (max-width: 560px) {
  .ai-panel { inset-inline: 10px; width: auto; bottom: 80px; height: calc(100vh - 120px); }
  .ai-fab { inset-inline-end: 14px; bottom: 14px; }
}
[data-theme="dark"] .ai-bot { background: #1c2836; color: #e7edf5; }
[data-theme="dark"] .ai-starter { background: #1c2836; }
/* Screen113 (ADR-0225): Settings -> Companies, extra time and the owner's adjustment note */
#coAdjust .field-check { margin-bottom: 4px; }
.co-adjust-lbl { display: block; margin-top: 12px; }
#coAdjust textarea { width: 100%; }

/* ADR-0228: Settings -> System Logs (the account owner only) */
.sl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sl-head p { margin: 4px 0 0; max-width: 640px; }
.sl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.sl-filters .field { margin: 0; }
.sl-filters .field label { font-size: .78rem; margin-bottom: 4px; }
.sl-filters .field input, .sl-filters .field select { height: 36px; min-height: 36px; padding-block: 0; font-size: .88rem; border-width: 1px; max-width: 200px; }
.sl-filters .sl-f-q { flex: 1 1 200px; }
.sl-filters .sl-f-q input { width: 100%; max-width: none; }
.sl-f-act { display: flex; gap: 8px; }
.sl-count { margin: 0 0 8px; font-size: .86rem; }
.sl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.sl-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sl-table th { text-align: start; padding: 9px 10px; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sl-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.sl-table tr:last-child td { border-bottom: 0; }
.sl-no { color: var(--muted); width: 44px; }
.sl-when { white-space: nowrap; }
.sl-co { display: block; font-size: .76rem; }
.sl-act { font-size: .8rem; background: var(--bg); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.sl-det { min-width: 220px; font-size: .82rem; overflow-wrap: anywhere; }
.sl-det div + div { margin-top: 2px; }
.sl-pages { margin-top: 12px; }
@media (max-width: 720px) { .sl-filters .field, .sl-filters .field select, .sl-filters .field input { flex: 1 1 140px; max-width: none; width: 100%; } }