/* Design system for Snapply: docs/tasks/DESIGN.md (operator-approved 2026-10-10 on the home page, 2026-10-11 for
   every page). Palette, radii and type scale are that file's; one face (Inter, self-hosted in static/fonts, as the
   substitute DESIGN.md names for Aeonik) with weights 400 and 500 only. No external font request is made anywhere.

   Two themes: dark (the DESIGN.md canvas, default) and light (mint-frost canvas, white cards, the same green). The
   light one is the block `:root[data-theme="light"]` below plus the "Light theme" section at the very end of this file.
   Every colour used anywhere in this file must be one of the variables below, never a bare hex value.
   Rules written as `html[data-theme] .x` are the DESIGN.md layer: the attribute is on every page's <html>, so they
   beat the older single-class rules above them without changing a template. */
:root {
  /* DESIGN.md palette (docs/tasks/DESIGN.md), by its own token names */
  --color-obsidian-shell: #132322;
  --color-pure-white: #ffffff;
  --color-mint-frost: #edf7f5;
  --color-deep-abyss: #0e1a19;
  --color-charcoal: #070f0f;
  --color-fog-border: #d0d3d3;
  --color-stone-border: #b2b6b4;
  --color-slate-text: #828786;
  --color-graphite-fill: #424f4f;
  --color-neon-pulse: #3ddc91;
  --color-mint-whisper: #97ddbc;
  --color-signal-yellow: #ffcd48;
  /* Shades of the same green / yellow / slate for TEXT on light grounds (the bright ones fail contrast on white) */
  --color-green-ink: #0b7d4a;
  --color-amber-ink: #7a5600;
  --color-ink-soft: #566160;

  /* Typography: Aeonik -> Inter, AeonikFono -> Inter (optical size is not shipped; weights 400 / 500 only) */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: var(--font-sans);   /* DESIGN.md has no monospace: figures use the display face with tabular digits */

  /* Radius: cards 20, small elements 10, buttons and tabs 56, large cards 60 */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 20px;
  --radius-xl: 20px;

  /* Surfaces: obsidian canvas, deep card on it, a tile inside the card goes back to obsidian */
  --bg: var(--color-obsidian-shell);
  --panel: var(--color-deep-abyss);
  --surface-2: var(--color-obsidian-shell);
  --input-bg: var(--color-obsidian-shell);
  --border: var(--color-graphite-fill);
  --text: var(--color-pure-white);
  --muted: var(--color-slate-text);

  --accent: var(--color-neon-pulse);
  --accent-rgb: 61, 220, 145;
  --accent-text: var(--color-obsidian-shell);
  --danger: var(--color-signal-yellow);

  /* The focus card is DESIGN.md's "Light Content Card" */
  --inverse-bg: var(--color-mint-frost);
  --inverse-text: var(--color-obsidian-shell);
  --inverse-muted: var(--color-graphite-fill);
  --inverse-border: var(--color-fog-border);
  --inverse-surface: var(--color-mint-frost);
  --inverse-ok: var(--color-obsidian-shell);
  --inverse-warn: var(--color-signal-yellow);

  --mark-tile: var(--color-deep-abyss);
  --mark-stroke: var(--color-pure-white);
  --mark-accent: var(--color-neon-pulse);

  /* Status colours: green, yellow and white are the only voices */
  --success-bg: var(--color-obsidian-shell);
  --success-text: var(--color-neon-pulse);
  --success-border: var(--color-mint-whisper);
  --fail-bg: var(--color-obsidian-shell);
  --fail-text: var(--color-signal-yellow);
  --fail-border: var(--color-signal-yellow);
  --warning-bg: var(--color-obsidian-shell);
  --warning-text: var(--color-signal-yellow);
  --warning-border: var(--color-signal-yellow);

  --shadow-sm: none;
  --shadow-md: rgba(0, 0, 0, 0.04) 1px 0px 9px 2px;
  color-scheme: dark;
}
/* Light theme: the same system turned over. Canvas = mint frost, cards = white, text = obsidian, the focus card becomes
   the dark card that floats on the light canvas ("never a light card on a light card"). Green stays the one voice:
   fills and buttons keep the neon, text that is green on a light ground uses its ink shade. */
:root[data-theme="light"] {
  --bg: var(--color-mint-frost);
  --panel: var(--color-pure-white);
  --surface-2: var(--color-mint-frost);
  --input-bg: var(--color-mint-frost);
  --border: var(--color-fog-border);
  --text: var(--color-obsidian-shell);
  --muted: var(--color-ink-soft);
  --danger: var(--color-amber-ink);

  --inverse-bg: var(--color-obsidian-shell);
  --inverse-text: var(--color-pure-white);
  --inverse-muted: var(--color-stone-border);
  --inverse-border: var(--color-graphite-fill);
  --inverse-surface: var(--color-deep-abyss);
  --inverse-ok: var(--color-neon-pulse);

  --success-bg: color-mix(in srgb, var(--color-neon-pulse) 20%, var(--color-pure-white));
  --success-text: var(--color-green-ink);
  --success-border: var(--color-mint-whisper);
  --fail-bg: color-mix(in srgb, var(--color-signal-yellow) 26%, var(--color-pure-white));
  --fail-text: var(--color-amber-ink);
  --fail-border: var(--color-signal-yellow);
  --warning-bg: color-mix(in srgb, var(--color-signal-yellow) 26%, var(--color-pure-white));
  --warning-text: var(--color-amber-ink);
  --warning-border: var(--color-signal-yellow);

  --shadow-md: rgba(0, 0, 0, 0.05) 1px 0px 9px 2px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Visible keyboard focus everywhere, on every interactive element — the one
   thing the previous stylesheet had no rule for at all. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

h1 {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--text);
}
/* Section labels: small uppercase eyebrow. (The brass left-border
   "legal marginalia" of the 2026-08-21 design was dropped in the
   2026-10-01 redesign.) Dashboard panels use .panel-title instead. */
h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.96px;
  line-height: 1.4;
  margin: 0 0 16px;
}

a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

.topbar {
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text); text-decoration: none; flex-shrink: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
}
.brand:hover { color: var(--accent); }
.brand:hover .brand-mark { filter: brightness(1.15); }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; transition: filter .15s ease; }
.brand-h1 { display: flex; align-items: center; gap: 10px; }
.brand-h1 .brand-mark { width: 34px; height: 34px; }
.topbar-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.topbar-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 18px; flex-shrink: 0; }

.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.nav-link {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 11px; border-radius: var(--radius-sm); background: none; border: none;
  cursor: pointer; font-family: inherit; line-height: 1.3;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger::after { content: "\25BE"; margin-left: 5px; font-size: 10px; opacity: .7; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 20;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px; min-width: 220px;
}
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text);
  text-decoration: none; font-size: 14px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--accent); }
.lang-switcher { display: flex; gap: 6px; }
.lang-link {
  color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600;
  padding: 3px 7px; border-radius: var(--radius-sm); letter-spacing: .03em;
  transition: background-color .15s ease, color .15s ease;
}
.lang-link:hover { color: var(--text); background: var(--surface-2); }
.lang-active { color: var(--accent-text); background: var(--accent); }
.lang-active:hover { color: var(--accent-text); background: var(--accent); }
/* One pill, a sun and a moon; the side in use is the green one (green = an active state) */
.theme-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 56px; background: var(--panel); }
.theme-link {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border-radius: 50%; color: var(--muted); text-decoration: none; box-sizing: border-box;
  transition: background-color .15s ease, color .15s ease;
}
.theme-link svg { width: 18px; height: 18px; display: block; }
.theme-link:hover { color: var(--text); }
.theme-active, .theme-active:hover { background: var(--color-neon-pulse); color: var(--color-obsidian-shell); }
.login-card-switchers { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 16px; }
.logout-form { margin: 0; }
.impersonation-banner {
  background: var(--warning-bg); border-bottom: 1px solid var(--warning-border); color: var(--warning-text);
  padding: 9px 28px; font-size: 13px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.impersonation-banner form { margin: 0; }
.impersonation-banner .link-btn { color: var(--warning-text); }

.table-scroll { overflow-x: auto; margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.admin-table { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--panel); }
.admin-table th, .admin-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table th {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; background: var(--panel);
}
.admin-table form { display: inline; margin: 0; }
.temp-password-box {
  background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius-md);
  padding: 16px 18px; margin: 14px 0; font-size: 14px; box-shadow: var(--shadow-sm);
}
.temp-password-box code {
  background: var(--input-bg); border: 1px solid var(--border); font-family: var(--font-mono);
  padding: 2px 8px; border-radius: var(--radius-sm); font-size: 15px;
}
.link-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 0; text-decoration: underline; text-underline-offset: 2px;
  transition: color .15s ease;
}
.link-btn:hover { color: var(--accent); }

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 34px 32px; width: 100%; max-width: 380px;
}
.login-card h1 { font-size: 21px; margin: 0 0 4px; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 0 0 22px; line-height: 1.5; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; margin-bottom: 16px; font-weight: 500; }
.login-card input[type=email], .login-card input[type=password] {
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  transition: border-color .15s ease;
}
.login-card input[type=email]:focus, .login-card input[type=password]:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}

.container { max-width: 980px; margin: 0 auto; padding: 28px; }
.container-wide { max-width: 1280px; padding-top: 34px; }
/* Admin user list: as wide as the screen allows, so no status or action wraps to a second line */
.container-admin { max-width: 1760px; }
.admin-table-nowrap th, .admin-table-nowrap td { white-space: nowrap; }
.admin-table-nowrap { min-width: 0; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.empty {
  color: var(--muted); font-size: 14px; text-align: center; padding: 36px 20px;
  border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--panel);
}
.intro-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 22px; margin-bottom: 20px;
}
.intro-panel-compact { margin-top: 10px; margin-bottom: 0; }
.intro-lead { font-size: 14.5px; line-height: 1.6; margin: 0 0 12px; }
.intro-details { margin-bottom: 20px; }
.intro-details > summary {
  cursor: pointer; color: var(--accent); font-size: 13.5px; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.intro-details > summary::-webkit-details-marker { display: none; }
.intro-details > summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.intro-details[open] > summary::before { transform: rotate(90deg); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.source-types {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 18px;
}
@media (max-width: 760px) { .source-types { grid-template-columns: 1fr; } }
.source-type {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px;
}
.source-type-title { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.source-type-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.step { display: flex; gap: 10px; align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
  color: var(--accent-text); font-size: 12.5px; font-weight: 700; display: flex;
  align-items: center; justify-content: center;
}
.step-title { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.step-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.next-step-hint {
  margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--warning-text);
  background: var(--warning-bg); border-radius: var(--radius-sm); padding: 5px 10px; display: inline-block;
}
.next-step-hint a { color: inherit; text-decoration: underline; }

.cards { display: flex; flex-direction: column; gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }
.card-body p { margin: 5px 0; font-size: 14px; }
.card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; letter-spacing: .01em; }
.badge-on { background: var(--success-bg); color: var(--success-text); }
.badge-off { background: var(--fail-bg); color: var(--fail-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.vac-gate-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vac-gate-badges .badge[title] { cursor: help; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; background: var(--panel); cursor: pointer;
  font-size: 14px; font-family: inherit; font-weight: 500; line-height: 1.3;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .7; cursor: default; transform: none; }
.btn:disabled:hover { background: var(--panel); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); border-color: var(--accent); }
.btn-danger { border-color: var(--fail-border); color: var(--danger); background: transparent; }
.btn-danger:hover { background: var(--fail-bg); border-color: var(--danger); }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }

.form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.form-section {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm);
}
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; }
.hint { color: var(--muted); font-size: 12.5px; margin: -5px 0 0; line-height: 1.55; font-weight: 400; }
.form input[type=text], .form input[type=email], .form input[type=number], .form input[type=time], .form select {
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; font-weight: 400;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form input[type=text]:focus, .form input[type=email]:focus, .form input[type=number]:focus,
.form input[type=time]:focus, .form select:focus, .form textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.form input[type=checkbox] { margin-right: 7px; accent-color: var(--accent); width: 15px; height: 15px; }
.no-spinner { -moz-appearance: textfield; }
.no-spinner::-webkit-outer-spin-button, .no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.check-label { flex-direction: row !important; align-items: center; font-weight: 400 !important; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > label { flex: 1 1 140px; min-width: 0; }
.days { display: flex; gap: 10px 14px; flex-wrap: wrap; }
.day-check { flex-direction: row !important; align-items: center; font-size: 13px; font-weight: 400 !important; }
.test-results { max-width: 640px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.test-ok { color: var(--success-text); font-size: 13px; }
.test-fail { color: var(--fail-text); font-size: 13px; }
.key-missing { color: var(--warning-text); font-size: 12px; font-weight: 600; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.file-input-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.file-input-wrap input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.file-input-wrap label.btn { margin: 0; }

.vac-section { margin-top: 30px; }
.vac-section-head { margin-bottom: 14px; }
.vac-section-head h2 { margin-bottom: 5px; }
.vac-section-head .hint { margin-top: 0; }
.vac-section-count {
  background: var(--surface-2); color: var(--text); font-weight: 700;
  padding: 1px 9px; border-radius: 999px; font-size: 12px; margin-left: 6px;
  letter-spacing: 0; text-transform: none;
}
.vac-search { display: flex; gap: 8px; margin-bottom: 16px; }
.vac-search input[type=text] {
  flex: 1; min-width: 0; background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
}
.vac-search input[type=text]:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18);
}
.vac-list { display: flex; flex-direction: column; gap: 10px; }
.vac-item {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.vac-title { font-size: 15.5px; }
.vac-title a { color: var(--text); font-weight: 600; text-decoration: none; }
.vac-title a:hover { color: var(--accent); }
.vac-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.vac-salary { margin-top: 5px; font-size: 13px; }
.tag { background: var(--surface-2); padding: 1px 7px; border-radius: 5px; font-size: 12px; }
.vac-closed { opacity: 0.55; }
.badge-closed { background: var(--fail-bg); color: var(--fail-text); padding: 1px 8px; border-radius: 999px; font-size: 11px; margin-left: 8px; vertical-align: middle; font-weight: 600; }
.badge-new { background: var(--success-bg); color: var(--success-text); padding: 1px 8px; border-radius: 999px; font-size: 11px; margin-left: 8px; vertical-align: middle; font-weight: 700; letter-spacing: .03em; }
.update-banner {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-md); padding: 11px 16px; margin-bottom: 12px; font-size: 14px;
}
.update-banner-running { display: flex; align-items: center; gap: 12px; }
.spinner {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.vac-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; flex-wrap: wrap; }
.vac-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vac-actions form { margin: 0; }
.tag-attribution { color: var(--muted); text-decoration: none; }
.tag-attribution:hover { color: var(--accent); }
.source-attribution { margin-top: 24px; font-size: 12px; color: var(--muted); }
.source-attribution a { color: var(--muted); }
.vac-facts { display: grid; grid-template-columns: max-content 1fr; gap: 9px 20px; margin: 0; font-size: 14px; }
.vac-facts dt { color: var(--muted); }
/* Long unbroken strings (company names, URLs inside descriptions) would
   otherwise push the grid past the viewport on a phone — the same
   min-content overflow that broke the salary row earlier. */
.vac-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vac-description { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.attachment-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attachment-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 13px;
  font-size: 14px; overflow-wrap: anywhere;
}
.form textarea {
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: var(--radius-sm); font-family: inherit; font-size: 14px; resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.btn-small { padding: 5px 11px; font-size: 12.5px; }

.ats-score-block { display: flex; align-items: center; gap: 20px; margin: 18px 0 26px; flex-wrap: wrap; }
.ats-score-circle {
  width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 26px; font-weight: 600; border: 3px solid var(--border); flex-shrink: 0;
  background: var(--panel);
}
.score-good { border-color: var(--success-border); color: var(--success-text); }
.score-mid { border-color: var(--warning-border); color: var(--warning-text); }
.score-low { border-color: var(--fail-border); color: var(--fail-text); }
.ats-score-label { font-size: 16px; font-weight: 600; margin-bottom: 4px; }

.ats-checks { display: flex; flex-direction: column; gap: 10px; }
.ats-check-item { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; }
.ats-check-title { font-weight: 600; margin-bottom: 4px; }
.ats-check-detail { color: var(--muted); font-size: 13px; }
.ats-ok .ats-check-title { color: var(--success-text); }
.ats-warning .ats-check-title { color: var(--warning-text); }
.ats-fail .ats-check-title { color: var(--fail-text); }

@media (max-width: 640px) {
  .container { padding: 18px 16px; }
  .topbar { padding: 12px 16px; }
  .impersonation-banner { padding: 9px 16px; }
  h1 { font-size: 32px; line-height: 1.22; }
  .page-header { flex-direction: column; align-items: stretch; }
  .form-section { padding: 16px; }
  .login-card { padding: 26px 22px; }
}

/* Email composer (application page): one sheet shaped like a mail client —
   header rows, borderless body, attachment chips — then the send bar. */
.mail-form { display: flex; flex-direction: column; gap: 12px; }
.mail-sheet {
  background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; overflow: hidden;
}
.mail-row {
  display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px;
  padding: 2px 14px; border-bottom: 1px solid var(--border);
}
.mail-row-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.mail-row input {
  background: transparent; border: 0; color: var(--text); font: inherit; font-size: 14px;
  padding: 10px 0; min-width: 0; width: 100%;
}
.mail-row input:focus, .mail-body:focus { outline: none; }
.mail-row:focus-within { box-shadow: inset 2px 0 0 var(--accent); }
.mail-body {
  background: transparent; border: 0; color: var(--text); font: inherit; font-size: 14px; line-height: 1.6;
  padding: 14px; resize: vertical; min-height: 220px;
}
.mail-body:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.mail-attachments {
  display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border-top: 1px solid var(--border); background: var(--panel);
}
.mail-attachments .mail-row-label { padding-top: 6px; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); font-size: 13px; cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.attach-chip:hover { border-color: var(--muted); }
.attach-chip input { accent-color: var(--accent); margin: 0; }
.attach-chip:has(input:not(:checked)) { opacity: .55; }
.attach-chip:has(input:not(:checked)) .attach-name { text-decoration: line-through; }
.attach-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.attach-kind { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.attach-size { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.mail-send { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.mail-account { margin: 0; font-size: 14px; }
.access-choice {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px 12px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.access-choice legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
.access-choice label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.access-choice input { accent-color: var(--accent); margin-top: 3px; }
.access-choice .hint { margin: 2px 0 0; display: inline-block; }
.access-choice.access-missing { border-color: var(--warning-border); background: var(--warning-bg); }
.mail-ok { border-left-color: var(--success-border); }
.mail-other { border-top: 1px solid var(--border); padding-top: 12px; }
.mail-other summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.mail-other[open] summary { margin-bottom: 10px; }
.mail-other .form-actions { margin: 10px 0 6px; }
.mail-imap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.mail-imap label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.mail-imap input {
  background: var(--input-bg); border: 1px solid var(--border); color: var(--text);
  padding: 8px 10px; border-radius: var(--radius-sm); font: inherit; font-size: 14px; min-width: 0;
}
.mail-imap input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 640px) {
  .mail-row, .mail-attachments { grid-template-columns: 1fr; gap: 2px; }
  .mail-row { padding: 6px 12px; }
  .mail-imap { grid-template-columns: 1fr; }
  .attach-name { max-width: 180px; }
}

/* ===================================================================
   Dashboard "Radar" (index.html, 2026-10-01). Bento grid of panels around
   a radar plot of the last 14 days of vacancies. Data comes from
   main.py::_radar_ctx; every color is a variable (see top of file).
   =================================================================== */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.accent-text { color: var(--accent); }
ol.steps { list-style: none; margin: 0; padding: 0; }
.step-num {
  width: auto; height: auto; border-radius: 0; background: none; color: var(--accent);
  font-family: var(--font-mono); font-size: 20px; font-weight: 500; line-height: 1.2;
}
.btn-large { padding: 12px 20px; border-radius: var(--radius-md); font-size: 14.5px; font-weight: 600; }
.pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--success-bg); color: var(--success-text);
}
.kind-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; margin-right: 6px; vertical-align: 1px; }
.kind-chip-company { background: var(--success-bg); color: var(--success-text); }
.kind-chip-board { background: var(--panel); color: var(--muted); border: 1px solid var(--border); }

/* First visit */
.hero { padding: 28px 0 36px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.hero-title { font-size: 46px; line-height: 1.08; letter-spacing: -0.035em; margin: 0; }
.hero-lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 22px 24px; margin-bottom: 20px;
}
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-title {
  font-size: 18px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: -0.01em; margin: 0;
}
.panel-link { font-size: 14px; font-weight: 600; text-decoration: none; }

/* Profile switcher — shown only when a candidate has more than one profile
   (item 6, OPEN follow-ups); a single-profile dashboard never renders it. */
.profile-switcher { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.profile-switcher-item {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.profile-switcher-item:hover { color: var(--text); border-color: var(--muted); }
.profile-switcher-item.is-active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}

/* Header row */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-head-text { display: flex; flex-direction: column; gap: 6px; }
.dash-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); flex-shrink: 0; }
.status-dot-off { background: var(--muted); box-shadow: none; }
.status-dot-warn { background: var(--warning-text); box-shadow: none; }
.dash-title { font-size: 42px; line-height: 1.05; letter-spacing: -0.035em; margin: 0; }
.dash-sub { margin: 0; font-size: 15px; color: var(--muted); }
.dash-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-actions form { margin: 0; }

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 34px; }
.bento > .panel { margin-bottom: 0; }
.radar-panel { grid-column: span 7; }
.focus-wrap { grid-column: span 5; display: flex; }
.pipe-panel { grid-column: span 8; }
.next-panel { grid-column: span 4; }
.feed-panel { grid-column: span 12; padding: 0; overflow: hidden; }
.feed-panel .panel-head { padding: 20px 24px 0; }

/* Radar plot */
.radar-body { display: flex; gap: 28px; align-items: center; }
.radar-plot {
  position: relative; width: 100%; max-width: 400px; aspect-ratio: 1 / 1; flex-shrink: 0;
  border-radius: 50%; background: var(--input-bg); border: 1px solid var(--border); overflow: hidden;
}
.radar-ring {
  position: absolute; border-radius: 50%; border: 1px dashed var(--border);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.radar-ring-1 { width: 18%; height: 18%; border-style: solid; background: rgba(var(--accent-rgb), .07); }
.radar-ring-2 { width: 29%; height: 29%; }
.radar-ring-3 { width: 52%; height: 52%; }
.radar-ring-4 { width: 92%; height: 92%; }
.radar-axis { position: absolute; left: 50%; top: 2%; bottom: 2%; width: 1px; background: var(--border); }
.radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), 0) 50deg, rgba(var(--accent-rgb), 0) 360deg);
  animation: radar-sweep 6s linear infinite; pointer-events: none;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.radar-ring-label {
  position: absolute; left: 51.5%; font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  line-height: 1; pointer-events: none;
}
.radar-side-label {
  position: absolute; top: 50%; transform: translateY(-50%); margin-top: 12px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  pointer-events: none;
}
.radar-side-label-company { left: 5%; color: var(--accent); }
.radar-side-label-board { right: 5%; color: var(--muted); }
.radar-dot {
  position: absolute; width: 11px; height: 11px; padding: 0; margin: 0; border-radius: 50%;
  transform: translate(-50%, -50%); cursor: pointer; box-sizing: border-box;
  transition: transform .15s ease, box-shadow .15s ease;
}
.radar-dot-company { background: var(--accent); border: 2px solid var(--accent); }
.radar-dot-board { background: transparent; border: 2px solid var(--text); }
.radar-dot-warn { background: var(--warning-text); border-color: var(--warning-text); }
.radar-dot-fresh { width: 14px; height: 14px; }
.radar-dot:hover { transform: translate(-50%, -50%) scale(1.35); }
.radar-dot[aria-pressed="true"] { width: 18px; height: 18px; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .28); z-index: 2; }
.radar-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.radar-count-num { font-family: var(--font-mono); font-size: 40px; font-weight: 500; line-height: 1; }
.radar-count-desc { font-size: 13px; color: var(--muted); margin-top: 4px; }
.radar-legend { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.radar-legend li { display: flex; align-items: center; gap: 8px; }
.legend-mark { width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0; display: inline-block; }
.legend-company { background: var(--accent); }
.legend-board { border: 2px solid var(--text); }
.legend-warn { background: var(--warning-text); }

/* Focus card (inverted surface) */
.focus-card {
  flex: 1; background: var(--inverse-bg); color: var(--inverse-text); border-radius: var(--radius-xl);
  padding: 26px; display: flex; flex-direction: column; gap: 16px;
}
.focus-card[hidden] { display: none; }
.focus-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.focus-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inverse-muted); }
.focus-muted { color: var(--inverse-muted); font-size: 14px; }
.focus-titles { display: flex; flex-direction: column; gap: 6px; }
.focus-title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.focus-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.focus-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--inverse-border); }
.focus-chip-solid { background: var(--inverse-text); color: var(--inverse-bg); border-color: var(--inverse-text); }
.focus-checks { background: var(--inverse-surface); border-radius: var(--radius-md); padding: 14px 16px; }
.focus-checks-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.focus-checks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.focus-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.check-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--inverse-surface);
}
.check-ok { background: var(--inverse-ok); }
.check-warn { background: var(--inverse-warn); }
.check-pending { background: var(--inverse-border); color: var(--inverse-text); }
.focus-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.focus-actions form { margin: 0; }
.focus-btn-primary, .focus-btn-primary:hover {
  background: var(--inverse-text); color: var(--inverse-bg); border-color: var(--inverse-text);
}
/* Size and shape live in the plain selector only: a :hover rule that sets padding is stronger than any later
   plain-state rule (the compact tier's smaller padding), so the button used to GROW on hover and push the card and
   the radar around. */
.focus-btn-primary { padding: 11px 16px; border-radius: var(--radius-md); }
.focus-btn-primary:hover { filter: brightness(1.2); }
.focus-btn { background: transparent; color: var(--inverse-text); border-color: var(--inverse-border); padding: 11px 14px; border-radius: var(--radius-md); }
.focus-btn:hover { background: var(--inverse-surface); border-color: var(--inverse-border); }

/* Application path */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pipe-stage { background: var(--surface-2); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pipe-label { font-size: 13px; color: var(--muted); }
.pipe-num { font-family: var(--font-mono); font-size: 32px; font-weight: 500; line-height: 1; }
.pipe-bar { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.pipe-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.pipe-stage-attention .pipe-num { color: var(--warning-text); }
.pipe-stage-attention .pipe-bar > span { background: var(--warning-text); }
.pipe-attention {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 16px;
  border-radius: var(--radius-md); border: 1px solid var(--warning-border); background: var(--warning-bg); font-size: 14px;
}
.pipe-attention-text { flex: 1; }
.pipe-attention a { color: var(--warning-text); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* Next run (solid accent tile) */
.next-panel {
  background: var(--accent); color: var(--accent-text); border-radius: var(--radius-xl); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.next-title { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.next-countdown { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
.next-when { font-size: 14px; }
.next-candidate { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 6px; }
.next-candidate-label { font-size: 13px; font-weight: 600; }
.next-bar { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.next-bar > span { display: block; height: 100%; background: var(--accent-text); }
.next-candidate a { color: var(--accent-text); font-weight: 700; font-size: 14px; }

/* Latest vacancies */
.feed { list-style: none; margin: 0; padding: 0; }
.feed-row {
  display: grid; grid-template-columns: 56px 12px minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
  padding: 14px 24px; border-top: 1px solid var(--border);
}
.feed-age { font-size: 13px; color: var(--muted); }
.feed-main { min-width: 0; display: flex; flex-direction: column; }
.feed-title { color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-title:hover { color: var(--accent); }
.feed-meta { font-size: 13px; color: var(--muted); }
.feed-tags { display: flex; gap: 6px; align-items: center; }
.feed-tags .badge-new { margin-left: 0; }
.feed-empty { padding: 0 24px 22px; }

/* Profiles under the dashboard */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.card-stats > div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; }
.card-stats .mono { font-size: 15px; font-weight: 500; }

@media (max-width: 1080px) {
  .radar-panel, .focus-wrap, .pipe-panel, .next-panel { grid-column: span 12; }
}
@media (max-width: 760px) {
  .radar-body { flex-direction: column; align-items: stretch; }
  .radar-plot { margin: 0 auto; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-row { grid-template-columns: 44px 10px minmax(0, 1fr); padding: 12px 16px; }
  .feed-tags, .feed-row > .btn { grid-column: 3; justify-self: start; }
  .cards-grid { grid-template-columns: 1fr; }
  .dash-title { font-size: 32px; }
  .hero-title { font-size: 34px; }
  .next-countdown { font-size: 28px; }
}

/* AI assistant window */
.agent-card { max-width: 760px; margin-top: 16px; }
.agent-score { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.agent-score-num { font-size: 28px; font-weight: 600; color: var(--accent); }
.agent-score-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.agent-score-bar span { display: block; height: 100%; background: var(--accent); }
.agent-chat { max-width: 760px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.agent-msg { padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); max-width: 88%; }
.agent-msg-candidate { align-self: flex-end; background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.agent-msg-body { white-space: pre-wrap; }
.agent-usage { margin-top: 16px; }

.agent-draft { margin: 12px 0 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.agent-draft textarea { width: 100%; }

/* "Prepare the application" on the application page: the fit analysis and the questions with ready answers */
.agent-fit { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.agent-fit h3 { margin: 0 0 4px; }
.agent-fit h4 { margin: 12px 0 4px; font-size: 15px; }
.agent-fit ul { margin: 0; padding-left: 20px; }
.agent-questions-block { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.agent-questions-block h3 { margin: 0 0 8px; }
.agent-questions { gap: 14px; }
.agent-q { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px 14px; margin: 0; min-width: 0; }
.agent-q legend { padding: 0 6px; margin-left: -6px; font-weight: 500; font-size: 15px; line-height: 1.4; }
.agent-q-about { margin: 2px 0 8px; }
.agent-q-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.form .agent-q-option { flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; font-weight: 400; }
.agent-q-option input { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.agent-q-option:has(input:checked) { border-color: var(--accent); }
.agent-q-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.form .agent-q-own { font-weight: 400; }
.agent-q select { max-width: 100%; margin: 6px 0 10px; }

.agent-code { font-size: 32px; letter-spacing: 6px; font-weight: 600; color: var(--accent); }

/* Settings: where to get the Snapply bookmark */
.form-section.bookmark-section { flex-direction: row; align-items: center; gap: 16px; }
.bookmark-section img { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.bookmark-section-text { flex: 1; min-width: 0; }
.bookmark-section-text h2 { margin-top: 0; }
.bookmark-section-text p { margin: 4px 0 0; }
@media (max-width: 640px) { .form-section.bookmark-section { flex-wrap: wrap; } .bookmark-section .btn { width: 100%; text-align: center; } }

/* Skip link: first stop for the keyboard, visible only while focused */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 1000; padding: 8px 14px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text, #fff); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* Help assistant: a pill at the bottom right that opens a small chat panel (app/help_bot.py) */
.help-widget { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column;
  align-items: flex-end; gap: 12px; pointer-events: none; }
.help-widget > * { pointer-events: auto; }
.help-fab { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-text); font: 600 15px var(--font-sans);
  box-shadow: var(--shadow-md); cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.help-fab:hover { filter: brightness(1.08); }
.help-fab:active { transform: translateY(1px); }
.help-fab:focus-visible, .help-icon-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.help-widget.is-open .help-fab-label { display: none; }
.help-widget.is-open .help-fab { padding: 0 12px; }
.help-panel { width: 380px; height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden; }
.help-panel[hidden] { display: none; }
.help-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--border); }
.help-head h2 { flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0;
  font: 600 16px var(--font-sans); color: var(--text); text-transform: none; letter-spacing: normal; }
.help-head .brand-mark { width: 26px; height: 26px; }
.help-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.help-icon-btn:hover { background: var(--surface-2); color: var(--text); }
.help-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.help-msg { max-width: 88%; padding: 9px 12px; border-radius: var(--radius-md); line-height: 1.45; font-size: 14px;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.help-msg-bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.help-msg-user { align-self: flex-end; background: rgba(var(--accent-rgb), .16); border: 1px solid rgba(var(--accent-rgb), .35);
  border-bottom-right-radius: 4px; }
.help-msg-wait { color: var(--muted); font-style: italic; }
.help-msg-error { background: var(--fail-bg); color: var(--fail-text); border: 1px solid var(--fail-border); }
.help-privacy { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
/* An answer taken from the Help page: link buttons under the text and "ask the assistant anyway" (help-widget.js) */
.help-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.help-link { display: inline-block; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: 13.5px; line-height: 1.35; text-decoration: none; white-space: normal; }
.help-link:hover, .help-link:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.help-more { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 13px; text-decoration: underline; cursor: pointer; }
.help-more:hover, .help-more:focus-visible { color: var(--text); }
.help-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.help-form textarea { flex: 1; min-height: 44px; max-height: 120px; resize: vertical; margin: 0; font: 14px/1.4 var(--font-sans);
  background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 10px; }
.help-send { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex-shrink: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .help-widget { right: 16px; bottom: 16px; left: 16px; }
  .help-panel { width: 100%; height: min(70vh, calc(100vh - 96px)); }
}
@media (prefers-reduced-motion: reduce) { .help-fab { transition: none; } }
@media print { .help-widget { display: none; } }

/* Admin: AI usage and cost per candidate (app/usage_report.py) */
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }
.usage-intro { margin: 0 0 8px; }
.usage-note { margin-top: 10px; max-width: 90ch; }
.usage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 6px; }
.usage-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.usage-tile-n { font: 600 24px var(--font-mono); letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.usage-tile-l { margin-top: 4px; color: var(--muted); font-size: 13px; }

.usage-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.usage-table th.num { min-width: 84px; }
.usage-table td.usage-app { white-space: normal; min-width: 240px; }

/* Cover letter check on the application page */
.letter-checks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.letter-checks .lc-bad { color: var(--warning-text); }
.letter-checks .lc-info { color: var(--muted); }

/* ===================================================================
   Home page in the DESIGN.md style (docs/tasks/DESIGN.md, 2026-10-10).
   Scoped to html[data-theme] (index.html sets it through base.html's
   body_class block), so no other page changes. The layer is written for the dark
   canvas; the light theme (end of this file) re-points the few colours it pins.
   How it works: the palette below uses DESIGN.md's own token names and is
   mapped onto the variables every rule above already reads, which re-skins
   the top bar, the dashboard and the help widget in one place. Only
   palette colours are used: green, yellow and white are the only voices,
   no gradients, weights stay at 400 (body) and 500 (display).
   Font: Inter, self-hosted (app/static/fonts, SIL OFL) as the substitute
   DESIGN.md names for Aeonik / AeonikFono - no third-party font request.
   =================================================================== */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html[data-theme] body {
  font-size: 16px; line-height: 1.5; letter-spacing: -0.08px;
  font-feature-settings: "ss01" 1, "cv11" 1;
}
/* The thin weights are the signature: nothing above 400, display text 500 */
html[data-theme] * { font-weight: 400; }

/* Eyebrow: 9px caps, 0.45px tracking, green on dark sections */
html[data-theme] .pill, html[data-theme] .focus-label, html[data-theme] .next-title {
  font-family: var(--font-display); font-size: 9px; line-height: 1.3; letter-spacing: 0.45px;
  text-transform: uppercase; padding: 0; background: none; border-radius: 0; color: var(--accent);
}
html[data-theme] .focus-label { color: var(--inverse-muted); }

/* Navigation bar: dark, no border, no shadow */
html[data-theme] .topbar { background: var(--bg); border-bottom: 0; padding: 16px 24px; }
html[data-theme] .brand { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: 0; }
html[data-theme] .brand-mark { width: 32px; height: 32px; }
html[data-theme] .brand:hover { color: var(--text); }
html[data-theme] .nav-link { color: var(--text); font-size: 15px; border-radius: 56px; padding: 8px 16px; }
html[data-theme] .nav-link:hover { background: var(--panel); }
html[data-theme] .nav-dropdown-menu { border: 0; border-radius: var(--radius-lg); }
html[data-theme] .nav-dropdown-menu a:hover { color: var(--text); }
html[data-theme] .lang-link { border-radius: 56px; font-size: 14px; letter-spacing: 0; }
html[data-theme] .link-btn { font-size: 14px; }

/* Page frame: 1200px, 24px gutters */
html[data-theme] .container-wide { max-width: 1200px; padding: 32px 24px 80px; }

/* Buttons: pills. Primary = neon pulse with obsidian text, everything else is the white-outlined ghost pill */
html[data-theme] .btn {
  padding: 14px 28px; border-radius: 56px; border: 1.5px solid var(--color-pure-white);
  background: transparent; color: var(--color-pure-white);
  font-size: 16px; line-height: 1.5; letter-spacing: -0.08px; justify-content: center;
}
html[data-theme] .btn:hover { background: var(--color-charcoal); border-color: var(--color-pure-white); }
html[data-theme] .btn:active { transform: none; }
html[data-theme] .btn-primary, html[data-theme] .btn-primary:hover {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme] .btn-primary:hover { filter: brightness(1.06); }
html[data-theme] .btn-large { padding: 14px 28px; font-size: 16px; border-radius: 56px; }
html[data-theme] .btn-small { padding: 8px 20px; font-size: 14px; }
html[data-theme] .btn-danger { border-color: var(--color-signal-yellow); color: var(--color-signal-yellow); }
html[data-theme] .btn-danger:hover { background: var(--color-charcoal); border-color: var(--color-signal-yellow); }
/* Green is rationed: only the page's main actions are green, the per-profile run buttons are ghost pills */
html[data-theme] .card .btn-primary, html[data-theme] .feed-row .btn-primary {
  background: transparent; border-color: var(--color-pure-white); color: var(--color-pure-white);
}

/* Type */
html[data-theme] h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0; color: var(--text); text-wrap: balance; }
html[data-theme] .dash-title { font-size: 48px; line-height: 1.12; }
html[data-theme] .hero-title { font-size: 64px; line-height: 1.1; }
html[data-theme] .panel-title, html[data-theme] .card-head h3 {
  font-family: var(--font-display); font-size: 24px; line-height: 1.4; letter-spacing: 0.96px; text-transform: none; color: inherit;
}
html[data-theme] .muted, html[data-theme] .small, html[data-theme] .dash-status, html[data-theme] .dash-sub { font-size: 14px; }
html[data-theme] .dash-sub { color: var(--text); font-size: 16px; }
html[data-theme] .mono { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
html[data-theme] .status-dot { box-shadow: none; }
html[data-theme] .card-body b { color: var(--muted); }

/* Cards: 20px radius, 24px padding, no border, depth from luminance */
html[data-theme] .panel, html[data-theme] .card, html[data-theme] .empty {
  border: 0; border-radius: 20px; padding: 24px; box-shadow: none;
}
html[data-theme] .empty { padding: 48px 24px; }
html[data-theme] .bento { gap: 24px; margin-bottom: 80px; }
html[data-theme] .feed-panel { padding: 0; }
html[data-theme] .feed-panel .panel-head { padding: 24px 24px 0; }
html[data-theme] .panel-head { margin-bottom: 24px; }
html[data-theme] .panel-link { font-size: 16px; }
html[data-theme] .section-head { margin-bottom: 24px; }
html[data-theme] .cards-grid { gap: 24px; margin-bottom: 0; }
html[data-theme] .dash-head { margin-bottom: 48px; gap: 24px; }
html[data-theme] .dash-head-text { gap: 16px; }
html[data-theme] .dash-actions { gap: 16px; }
html[data-theme] .card-actions { gap: 12px; margin-top: 24px; }
html[data-theme] .card-body p { font-size: 16px; margin: 8px 0; }
html[data-theme] .badge { font-size: 14px; padding: 2px 12px; letter-spacing: 0; }
html[data-theme] .badge-off { background: transparent; color: var(--muted); border: 1px solid var(--border); }
html[data-theme] .badge-new { font-size: 14px; padding: 0 10px; letter-spacing: 0; }
html[data-theme] .tag { font-size: 14px; border-radius: 56px; padding: 2px 12px; }
html[data-theme] .kind-chip { font-size: 14px; border-radius: 56px; padding: 2px 12px; }
html[data-theme] .kind-chip-board { border: 1px solid var(--border); }
html[data-theme] .next-step-hint { font-size: 14px; border-radius: 56px; padding: 6px 16px; }
html[data-theme] .vac-search input[type=text] {
  border: 1.5px solid var(--border); border-radius: 56px; padding: 12px 24px; font-size: 16px;
}
html[data-theme] .vac-search input[type=text]:focus { border-color: var(--accent); box-shadow: none; }

/* Profile switcher = DESIGN.md "Tab Pill Navigation" */
html[data-theme] .profile-switcher { gap: 8px; margin-bottom: 24px; }
html[data-theme] .profile-switcher-item {
  padding: 12px 24px; border: 0; border-radius: 56px; background: transparent;
  color: var(--color-slate-text); font-size: 16px; letter-spacing: -0.08px;
}
html[data-theme] .profile-switcher-item:hover { color: var(--text); }
html[data-theme] .profile-switcher-item.is-active { background: var(--color-neon-pulse); color: var(--color-obsidian-shell); }

/* Radar: flat luminance steps, no gradient sweep */
html[data-theme] .radar-sweep { display: none; }
html[data-theme] .radar-plot { border: 0; background: var(--color-obsidian-shell); }
html[data-theme] .radar-ring { border-color: var(--color-graphite-fill); }
html[data-theme] .radar-ring-1 { background: var(--color-deep-abyss); border-style: solid; }
html[data-theme] .radar-axis { background: var(--color-graphite-fill); }
html[data-theme] .radar-ring-label { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.45px; }
html[data-theme] .radar-side-label { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.45px; }
html[data-theme] .radar-dot[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--color-obsidian-shell), 0 0 0 5px var(--color-pure-white);
}
html[data-theme] .radar-count-num { font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1.12; color: var(--accent); }
html[data-theme] .radar-count-desc { font-size: 14px; margin-top: 8px; }
html[data-theme] .radar-legend { font-size: 14px; padding-top: 16px; }
html[data-theme] .radar-side { gap: 24px; }

/* Focus card = Light Content Card: mint frost, 60px radius, 48px padding */
html[data-theme] .focus-card {
  border-radius: 60px; padding: 48px; gap: 24px; box-shadow: var(--shadow-md);
}
html[data-theme] .focus-title { font-family: var(--font-display); font-size: 32px; line-height: 1.22; font-weight: 500; letter-spacing: 0; }
html[data-theme] .focus-muted { font-size: 14px; }
html[data-theme] .focus-chip { font-size: 14px; border-color: var(--inverse-text); }
html[data-theme] .focus-chip-solid { background: var(--inverse-text); color: var(--inverse-bg); }
html[data-theme] .focus-checks { background: transparent; border-radius: 0; border-top: 1px solid var(--inverse-border); padding: 24px 0 0; }
html[data-theme] .focus-checks-title { font-size: 16px; margin-bottom: 16px; }
html[data-theme] .focus-checks li { font-size: 14px; }
html[data-theme] .check-icon { color: var(--color-mint-frost); }
html[data-theme] .check-warn { color: var(--color-obsidian-shell); }
html[data-theme] .check-pending { background: var(--inverse-border); color: var(--inverse-text); }
html[data-theme] .focus-actions { gap: 12px; }
html[data-theme] .focus-btn-primary, html[data-theme] .focus-btn-primary:hover {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme] .focus-btn-primary { padding: 14px 28px; border-radius: 56px; }
html[data-theme] .focus-btn { background: transparent; border-color: var(--inverse-text); color: var(--inverse-text); padding: 14px 28px; border-radius: 56px; }
html[data-theme] .focus-btn:hover { background: var(--inverse-border); border-color: var(--inverse-text); }

/* Application path */
html[data-theme] .pipe { gap: 24px; }
html[data-theme] .pipe-stage { padding: 24px; gap: 16px; }
html[data-theme] .pipe-label { font-size: 14px; }
html[data-theme] .pipe-num { font-family: var(--font-display); font-size: 48px; font-weight: 500; line-height: 1.12; color: var(--text); }
html[data-theme] .pipe-bar { background: var(--border); }
html[data-theme] .pipe-stage-attention .pipe-num { color: var(--color-signal-yellow); }
html[data-theme] .pipe-attention { margin-top: 24px; padding: 16px 24px; border-radius: 56px; font-size: 14px; }
html[data-theme] .pipe-attention a { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }

/* Next run: a deep card with the countdown as the stat highlight */
html[data-theme] .next-panel { background: var(--panel); color: var(--text); border-radius: 20px; padding: 24px; gap: 16px; }
html[data-theme] .next-countdown { font-family: var(--font-display); font-size: 40px; line-height: 1.2; font-weight: 500; letter-spacing: 0; color: var(--accent); }
html[data-theme] .next-when { font-size: 16px; }
html[data-theme] .next-candidate { border-top: 1px solid var(--border); padding-top: 16px; gap: 8px; }
html[data-theme] .next-candidate-label { font-size: 14px; }
html[data-theme] .next-bar { background: var(--border); }
html[data-theme] .next-bar > span { background: var(--accent); }
html[data-theme] .next-candidate a { color: var(--text); font-size: 14px; }

/* Latest vacancies */
html[data-theme] .feed-row { padding: 16px 24px; gap: 16px; }
html[data-theme] .feed-title:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme] .feed-meta, html[data-theme] .feed-age { font-size: 14px; }
html[data-theme] .feed-empty { padding: 0 24px 24px; }
html[data-theme] .legend-board { border-color: var(--color-pure-white); }

/* First visit: left-aligned hero with the radar as its illustration, light "how it works" card */
html[data-theme] .hero { padding: 48px 0 80px; align-items: stretch; text-align: left; }
html[data-theme] .hero.hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
html[data-theme] .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
html[data-theme] .hero-lead { font-size: 18px; line-height: 1.45; color: var(--text); max-width: 46ch; }
html[data-theme] .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
html[data-theme] .hero-art { display: flex; justify-content: center; }
html[data-theme] .hero-art .radar-plot { max-width: 420px; background: var(--color-deep-abyss); }
html[data-theme] .hero-art .radar-ring-1 { background: var(--color-obsidian-shell); }
html[data-theme] .panel-light {
  --text: var(--color-obsidian-shell);
  --muted: var(--color-graphite-fill);
  --border: var(--color-fog-border);
  --panel: var(--color-mint-frost);
  --surface-2: var(--color-mint-frost);
  --accent: var(--color-obsidian-shell);
  --success-bg: var(--color-obsidian-shell);
  --success-text: var(--color-mint-frost);
  background: var(--color-mint-frost); color: var(--color-obsidian-shell);
  border-radius: 60px; padding: 48px; margin-bottom: 24px; box-shadow: var(--shadow-md);
}
html[data-theme] .panel-light .panel-title { font-size: 40px; line-height: 1.2; font-weight: 500; letter-spacing: 0; margin-bottom: 32px; }
html[data-theme] .source-types { gap: 24px; margin-bottom: 32px; }
html[data-theme] .source-type { padding: 24px; border: 1px solid var(--border); background: transparent; border-radius: 20px; }
html[data-theme] .source-type-title { font-size: 18px; font-family: var(--font-display); margin-bottom: 8px; }
html[data-theme] .source-type-desc { font-size: 16px; }
html[data-theme] .steps { gap: 24px; }
html[data-theme] .step { flex-direction: column; gap: 8px; }
html[data-theme] .step-num { font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1.22; }
html[data-theme] .step-title { font-size: 18px; margin-bottom: 8px; }
html[data-theme] .step-desc { font-size: 16px; }

@media (max-width: 1080px) {
  html[data-theme] .hero.hero-split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html[data-theme] .hero-art { justify-content: flex-start; }
  html[data-theme] .hero-title { font-size: 48px; line-height: 1.12; }
}
@media (max-width: 760px) {
  html[data-theme] .container-wide { padding: 24px 16px 64px; }
  html[data-theme] .hero-title, html[data-theme] .dash-title { font-size: 40px; line-height: 1.2; }
  html[data-theme] .focus-card, html[data-theme] .panel-light { border-radius: 32px; padding: 24px; }
  html[data-theme] .panel-light .panel-title { font-size: 32px; line-height: 1.22; }
  html[data-theme] .focus-title { font-size: 24px; line-height: 1.4; }
  html[data-theme] .pipe-num { font-size: 32px; line-height: 1.22; }
  html[data-theme] .next-countdown { font-size: 32px; }
  html[data-theme] .bento { margin-bottom: 64px; }
}

/* Header buttons light up in the page's own style: the green pill of an active tab */
html[data-theme] .nav-link, html[data-theme] .lang-link, html[data-theme] .link-btn, html[data-theme] .nav-dropdown-menu a {
  transition: background-color .15s ease, color .15s ease;
}
html[data-theme] .nav-link:hover, html[data-theme] .nav-link:focus-visible,
html[data-theme] .nav-dropdown-trigger[aria-expanded="true"],
html[data-theme] .lang-link:hover, html[data-theme] .link-btn:hover,
html[data-theme] .nav-dropdown-menu a:hover, html[data-theme] .nav-dropdown-menu a:focus-visible {
  background: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme] .link-btn { padding: 6px 14px; border-radius: 56px; text-decoration: none; color: var(--text); font-size: 14px; }
html[data-theme] .nav-dropdown-menu { padding: 8px; }
html[data-theme] .nav-dropdown-menu a { padding: 8px 16px; border-radius: 56px; }
html[data-theme] .nav-link:focus-visible, html[data-theme] .link-btn:focus-visible { outline-offset: 2px; }

/* Screens: on a desktop window the page scrolls block by block with a smooth snap.
   Each block is sized to fit the window (size tiers by window height), so a block is always seen whole.
   Windows lower than 440 px (CSS px: display scaling of 125-150% on a laptop makes the window "shorter") and phones
   keep the plain flowing page. */
:root { --topbar-h: 68px; }   /* height of the sticky top bar, used by the screens below */
html[data-theme] .focus-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (min-width: 1081px) and (min-height: 440px) {
  :root:has(.screen) { scroll-snap-type: y mandatory; scroll-behavior: smooth; scroll-padding-top: var(--topbar-h, 68px); }
  html[data-theme] .topbar { position: sticky; top: 0; z-index: 30; }
  html[data-theme] main.container-wide { padding-top: 0; padding-bottom: 0; }   /* beats the .container padding of the layer below */
  html[data-theme] .screen {
    min-height: calc(100vh - var(--topbar-h, 68px)); padding-block: 8px;
    display: flex; flex-direction: column; justify-content: center;
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  html[data-theme] .hero.screen { padding-block: 8px; }
  html[data-theme] .screen .bento, html[data-theme] .screen .cards-grid { margin-bottom: 0; }
  html[data-theme] .screen .panel-light { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  :root:has(.screen) { scroll-behavior: auto; }
}
/* On the dashboard the help button is a round icon: its label would sit on the bottom right of the screen's last row */
@media (min-width: 1081px) and (min-height: 440px) {
  :root:has(.screen) .help-fab { padding: 0; width: 48px; justify-content: center; }
  :root:has(.screen) .help-fab-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
/* One screen holds radar, focus card, application path and next run (operator, 2026-10-11), so the
   window sizes below are compact on purpose. Windows from 440 px high (below 730 the content is scaled down,
   see "Short windows" below); a roomy tier from 1000 px. */
@media (min-width: 1081px) and (min-height: 440px) {
  /* The left half is the radar with everything that belongs to it (its numbers, legend and the next search run);
     the right half holds the focus card and, under it, the application path (operator, 2026-10-11). */
  html[data-theme] .radar-panel { grid-column: 1 / span 7; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  html[data-theme] .focus-wrap { grid-column: 8 / span 5; grid-row: 1; }
  html[data-theme] .pipe-panel { grid-column: 8 / span 5; grid-row: 2; }
  html[data-theme] .screen-radar .bento { gap: 16px; }
  html[data-theme] main.container-wide:has(.screen) { max-width: 1440px; }   /* a wide window gives the radar room */
  html[data-theme] .dash-title { font-size: 32px; line-height: 1.22; }
  html[data-theme] .dash-head { margin-bottom: 12px; gap: 16px; }
  html[data-theme] .dash-head-text { gap: 4px; }
  html[data-theme] .dash-sub { font-size: 14px; }
  html[data-theme] .profile-switcher { margin-bottom: 6px; }
  html[data-theme] .profile-switcher-item { padding: 6px 16px; font-size: 15px; }
  html[data-theme] .dash-actions .btn { padding: 10px 24px; }

  /* radar */
  html[data-theme] .radar-panel { padding: 16px 24px; }
  html[data-theme] .radar-panel .panel-head { margin-bottom: 8px; }
  html[data-theme] .radar-panel .panel-title { font-size: 18px; line-height: 1.3; letter-spacing: 0; }
  html[data-theme] .radar-panel .panel-head .muted { display: none; }   /* the plot is explained by its legend */
  html[data-theme] .radar-body { gap: 20px; }
  html[data-theme] .radar-count-num { font-size: 32px; line-height: 1.2; }
  html[data-theme] .radar-count-desc { margin-top: 2px; }
  html[data-theme] .radar-side { gap: 10px; }
  html[data-theme] .radar-legend { padding-top: 8px; gap: 2px; }
  html[data-theme] .radar-side > p.muted { display: none; }   /* the focus card repeats the empty state */

  /* focus card */
  html[data-theme] .focus-card { padding: 20px 28px; gap: 8px; }
  html[data-theme] .focus-title { font-size: 24px; line-height: 1.3; -webkit-line-clamp: 2; }
  html[data-theme] .focus-why { display: none; }
  html[data-theme] .focus-checks { padding-top: 10px; }
  html[data-theme] .focus-checks-title { display: none; }
  html[data-theme] .focus-checks ul { gap: 2px; }
  html[data-theme] .focus-btn-primary, html[data-theme] .focus-btn { padding: 8px 14px; font-size: 14px; }
  html[data-theme] .focus-actions { gap: 8px; }

  /* application path and next run: one compact row */
  html[data-theme] .pipe-panel, html[data-theme] .next-panel { padding: 14px 24px; }
  html[data-theme] .pipe-panel .panel-head { margin-bottom: 10px; gap: 8px 16px; flex-wrap: nowrap; align-items: center; }
  html[data-theme] .pipe-panel .panel-title { white-space: nowrap; }
  html[data-theme] .pipe-attention { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
    font-size: 14px; line-height: 1.3; gap: 8px; }
  html[data-theme] .pipe-attention-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  html[data-theme] .pipe { gap: 12px; }
  html[data-theme] .pipe-stage {
    padding: 10px 14px; gap: 4px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }
  html[data-theme] .pipe-num { grid-column: 1; grid-row: 1; font-size: 32px; line-height: 1.2; }
  html[data-theme] .pipe-label { grid-column: 2; grid-row: 1; line-height: 1.25; }
  html[data-theme] .pipe-bar { grid-column: 1 / -1; grid-row: 2; }
  html[data-theme] .next-panel { gap: 6px; }
  html[data-theme] .next-countdown { font-size: 32px; line-height: 1.2; }
  html[data-theme] .next-when { display: none; }
  html[data-theme] .next-candidate {
    margin-top: 0; padding-top: 10px; gap: 4px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
  html[data-theme] .next-bar { grid-column: 1 / -1; grid-row: 2; }

  /* other blocks */
  html[data-theme] .feed-row { padding: 12px 24px; }
  html[data-theme] .panel-light { padding: 32px 40px; }
  html[data-theme] .panel-light .panel-title { font-size: 32px; margin-bottom: 16px; }
  html[data-theme] .source-types { margin-bottom: 16px; gap: 16px; }
  html[data-theme] .hero-title { font-size: 48px; line-height: 1.12; }
  html[data-theme] .hero-art .radar-plot { max-width: 340px; }
  html[data-theme] .empty { padding: 20px 24px; }
  html[data-theme] .source-type { padding: 16px 20px; }
  html[data-theme] .source-type-desc, html[data-theme] .step-desc { font-size: 14px; }
  html[data-theme] .step-title { font-size: 16px; margin-bottom: 4px; }
  html[data-theme] .step-num { font-size: 24px; line-height: 1.4; }

  /* The radar: as large as the left half allows. Its plot takes the whole height of the panel body (a square, so the
     width follows), the numbers and the next search run stand beside it. `contain: size` keeps the plot from asking
     for height of its own: the panel is as tall as the focus card + the path on the right. */
  html[data-theme] .radar-body {
    flex: 1 1 0; min-height: 220px; display: grid; gap: 24px; align-items: stretch;
    grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr);
  }
  html[data-theme] .radar-stage { container-type: size; min-height: 0; display: grid; place-items: center; }
  html[data-theme] .radar-panel .radar-plot { width: min(100cqw, 100cqh); height: auto; max-width: none; aspect-ratio: 1 / 1; flex: none; }
  html[data-theme] .radar-panel .radar-dot { width: 14px; height: 14px; }
  html[data-theme] .radar-panel .radar-dot-fresh { width: 18px; height: 18px; }
  html[data-theme] .radar-panel .radar-dot[aria-pressed="true"] { width: 22px; height: 22px; }
  html[data-theme] .radar-panel .radar-ring-label { font-size: 12px; }
  html[data-theme] .radar-panel .radar-side-label { font-size: 11px; }
  html[data-theme] .radar-side { flex: 1; justify-content: center; gap: 14px; }
  html[data-theme] .radar-side .next-panel {
    background: transparent; border-radius: 0; padding: 12px 0 0; border-top: 1px solid var(--border);
    margin-top: 4px; gap: 4px;
  }
  html[data-theme] .radar-side .next-countdown { font-size: 26px; }
  html[data-theme] .radar-side .next-candidate { padding-top: 8px; margin-top: 6px; }
  /* the path is half the width now: two rows of two stages */
  html[data-theme] .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-theme] .pipe-panel .panel-head { flex-wrap: wrap; }
  html[data-theme] .pipe-panel .panel-title { white-space: normal; }
}
/* Roomy tier: tall windows get a little more air and a larger radar */
@media (min-width: 1081px) and (min-height: 1000px) {
  html[data-theme] .focus-card { padding: 32px 40px; gap: 14px; }
  html[data-theme] .focus-why { display: block; }
  html[data-theme] .focus-checks-title { display: block; }
  html[data-theme] .screen-radar .bento { gap: 24px; }
  html[data-theme] .pipe-panel, html[data-theme] .next-panel { padding: 24px; }
  html[data-theme] .dash-title { font-size: 40px; line-height: 1.2; }
}


/* Short windows (operator, 2026-10-11: a laptop with Windows display scaling of 125-150% has a browser window of only
   ~550-700 CSS px, and the dashboard fell back to the flowing page, without the blocks): the compact sizes above need
   up to ~655 px per block plus the bar. Below 730 px of window height the content of each block is scaled so the
   block still fits whole. Measured: the tallest block (German labels, a window 1100 px wide) is 654 px;
   scale <= (window height - bar - padding) / 654, rounded down to a step. Physical text size stays readable because
   such a screen has 1.25-1.5 device pixels per CSS pixel. The steps are cumulative ("from this height up"), the last
   matching one wins, so a fractional window height never falls between two ranges. Below 440 px: the flowing page. */
@media (min-width: 1081px) and (min-height: 440px) { html[data-theme] .screen > * { zoom: .54; } }
@media (min-width: 1081px) and (min-height: 470px) { html[data-theme] .screen > * { zoom: .58; } }
@media (min-width: 1081px) and (min-height: 500px) { html[data-theme] .screen > * { zoom: .62; } }
@media (min-width: 1081px) and (min-height: 530px) { html[data-theme] .screen > * { zoom: .66; } }
@media (min-width: 1081px) and (min-height: 560px) { html[data-theme] .screen > * { zoom: .7; } }
@media (min-width: 1081px) and (min-height: 590px) { html[data-theme] .screen > * { zoom: .75; } }
@media (min-width: 1081px) and (min-height: 620px) { html[data-theme] .screen > * { zoom: .8; } }
@media (min-width: 1081px) and (min-height: 650px) { html[data-theme] .screen > * { zoom: .85; } }
@media (min-width: 1081px) and (min-height: 690px) { html[data-theme] .screen > * { zoom: .9; } }
@media (min-width: 1081px) and (min-height: 730px) { html[data-theme] .screen > * { zoom: 1; } }

/* ===================================================================
   The other pages in the DESIGN.md style (2026-10-11). The palette, radii and weights come from the :root
   mapping and the layer above; this section sets the sizes and shapes of the components those pages use.
   Small text never goes below 14px (DESIGN.md's smallest body size), cards are 20px with no border, inputs are
   10px, buttons are pills, tables use hairlines.
   =================================================================== */
html[data-theme] .login-card h1 { font-size: 32px; line-height: 1.22; }
html[data-theme] .container { padding: 32px 24px 80px; }
html[data-theme] .page-header { margin-bottom: 32px; gap: 16px; }
html[data-theme] .panel-link, html[data-theme] .link-accent { color: var(--accent); }
html[data-theme] :is(.hint, .muted, .small, .vac-meta, .vac-salary, .tag, .badge-closed, .mail-row-label, .attach-kind,
  .attach-size, .attach-name, .ats-check-detail, .test-ok, .test-fail, .key-missing, .source-attribution, .usage-tile-l,
  .login-card .sub, .help-privacy, .check-label, .day-check, .vac-facts, .source-type-desc, .step-desc, .letter-checks) {
  font-size: 14px; line-height: 1.45;
}

/* Cards: 20px, no border, depth from luminance */
html[data-theme] :is(.form-section, .vac-item, .intro-panel, .update-banner, .ats-check-item, .login-card,
  .usage-tile, .agent-card, .agent-msg, .test-results) {
  border: 0; border-radius: 20px; box-shadow: none;
}
html[data-theme] :is(.form-section, .intro-panel, .ats-check-item, .login-card) { padding: 24px; }
html[data-theme] .login-card { padding: 40px 32px; max-width: 420px; }
html[data-theme] .vac-item { padding: 20px 24px; }
html[data-theme] .update-banner { background: var(--panel); }
html[data-theme] .agent-msg { background: var(--panel); }
html[data-theme] .agent-msg-candidate { background: var(--surface-2); border: 1px solid var(--success-border); }
html[data-theme] .vac-list { gap: 16px; }
html[data-theme] .cards { gap: 24px; }
html[data-theme] .form { gap: 24px; }
html[data-theme] .form-section { gap: 16px; }
html[data-theme] .temp-password-box { border: 1.5px solid var(--accent); border-radius: 20px; box-shadow: none; }

/* Vacancy list and detail */
html[data-theme] .vac-title { font-size: 18px; line-height: 1.45; }
html[data-theme] .vac-title a { text-decoration: none; }
html[data-theme] .vac-title a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme] .vac-section { margin-top: 48px; }
html[data-theme] .vac-section-count { font-size: 14px; border-radius: 56px; padding: 2px 12px; background: var(--panel); }
html[data-theme] .badge-new, html[data-theme] .badge-closed { border-radius: 56px; }
html[data-theme] .vac-description { font-size: 16px; line-height: 1.6; }

/* Inputs: 10px, 1.5px hairline, green on focus (no glow) */
html[data-theme] :is(main, .login-card) :is(input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=hidden], [type=button]), select, textarea):not(.mail-row input, .mail-body, .vac-search input) {
  font-size: 16px; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--input-bg);
  letter-spacing: -0.08px;
}
html[data-theme] .vac-search input[type=text] { border-radius: 56px; padding: 12px 24px; }
html[data-theme] :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: none; outline: none; }
html[data-theme] :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-theme] :is(input, select, textarea)::placeholder { color: var(--muted); opacity: 1; }
html[data-theme] .form label, html[data-theme] .login-card label { font-size: 14px; gap: 8px; }
html[data-theme] .mail-row input, html[data-theme] .mail-body { font-size: 16px; }
html[data-theme] .mail-sheet { border-radius: 20px; border-color: var(--border); }
html[data-theme] .access-choice { border-radius: 20px; border: 1.5px solid var(--border); }
html[data-theme] .access-choice legend { font-size: 14px; }

/* Buttons in dense places keep the pill but are compact */
html[data-theme] :is(.admin-table, .table-scroll, .attachment-list, .vac-actions, .vac-footer, .mail-other, .impersonation-banner) .btn {
  padding: 8px 20px; font-size: 14px;
}
html[data-theme] .vac-actions .btn-primary { background: transparent; border-color: var(--color-pure-white); color: var(--color-pure-white); }
html[data-theme] .link-btn { text-decoration: none; }

/* Tables */
html[data-theme] .table-scroll { border: 0; border-radius: 20px; background: var(--panel); }
html[data-theme] .admin-table { background: transparent; }
html[data-theme] .admin-table th, html[data-theme] .admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
html[data-theme] .admin-table th { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--muted); background: transparent; }
html[data-theme] .admin-table tbody tr:hover { background: var(--surface-2); }
html[data-theme] .admin-table tfoot td { background: var(--surface-2); border-top: 1px solid var(--border); }
html[data-theme] .usage-tile { background: var(--panel); padding: 20px 24px; }
html[data-theme] .usage-tile-n { font-family: var(--font-display); font-size: 24px; font-weight: 500; letter-spacing: 0; }

/* ATS check, score, agent window */
html[data-theme] .ats-score-circle { width: 88px; height: 88px; font-size: 32px; font-weight: 500; letter-spacing: 0; background: var(--panel); }
html[data-theme] .ats-score-label { font-size: 18px; }
html[data-theme] .ats-check-title { font-size: 16px; }
html[data-theme] .agent-score-num { font-size: 32px; font-weight: 500; letter-spacing: 0; }
html[data-theme] .agent-score-bar { height: 8px; background: var(--surface-2); }
html[data-theme] .agent-code { font-weight: 500; }
html[data-theme] .attach-chip { border-radius: 56px; font-size: 14px; }

/* Misc */
html[data-theme] .spinner { border-color: var(--border); border-top-color: var(--accent); }
html[data-theme] .step-num { font-family: var(--font-display); }
html[data-theme] .bookmark-section img { border-radius: 10px; }
@media (max-width: 760px) {
  html[data-theme] .container { padding: 24px 16px 64px; }
  html[data-theme] .login-card { padding: 32px 24px; }
}

/* Spacing of the blocks that sit directly in <main> (intro lines, standalone cards, list footers) */
html[data-theme] main > .hint { margin: 0 0 24px; }
html[data-theme] main > .form-section, html[data-theme] main > .intro-panel, html[data-theme] main > .update-banner { margin-bottom: 24px; }
html[data-theme] main > :is(.test-fail, .test-ok) { margin: 0 0 16px; }
html[data-theme] .vac-list { margin-bottom: 24px; }
html[data-theme] .vac-search { margin-bottom: 24px; }

/* Smooth scrolling to anchors (the header's "Vacancies" menu, in-page links) and the highlight of the list item
   the candidate returns to (base.html script). The sticky top bar is 68px, so targets stop below it. */
html { scroll-behavior: smooth; }
html[data-theme] [id] { scroll-margin-top: calc(88px / var(--page-zoom, 1)); }
@keyframes return-flash {
  0%, 55% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 2px transparent; }
}
html[data-theme] .return-flash { animation: return-flash 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html[data-theme] .return-flash { animation: none; box-shadow: 0 0 0 2px var(--accent); }
}

/* A draft whose vacancy is gone (Application.vacancy_gone): a yellow note in the list and a banner on the draft */
html[data-theme] .vac-gone .vac-title a { color: var(--muted); }
html[data-theme] .vacancy-gone-note { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
html[data-theme] .vacancy-gone-note .badge { margin-right: 8px; }
html[data-theme] .vacancy-gone-banner {
  margin: 0 0 24px; padding: 20px 24px; border-radius: 20px; max-width: 720px;
  background: var(--panel); border: 1.5px solid var(--warning-border); color: var(--text);
}
html[data-theme] .vacancy-gone-banner h2 { color: var(--warning-text); margin: 0 0 8px; font-size: 18px; letter-spacing: 0; }
html[data-theme] .vacancy-gone-banner p { margin: 0 0 8px; }
html[data-theme] .vacancy-gone-banner p:last-child { margin-bottom: 0; }

/* ===================================================================
   Header structure and the PHONE layout (operator, 2026-10-11).
   Header = brand | menu (the nav and the right-hand controls). From 1120px down the menu folds behind a burger
   button: one compact bar that stays pinned on every page, the menu opens under it as a sheet.
   =================================================================== */
html[data-theme] .topbar { position: sticky; top: 0; z-index: 40; flex-wrap: wrap; justify-content: flex-start; gap: 8px 26px; }
html[data-theme] .topbar-menu { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 26px; }
html[data-theme] .topbar-right { margin-left: auto; }
html[data-theme] .nav-burger { display: none; }

/* Medium windows: the inline header (six links, the theme and language switches, Logbook, Admin, Log out) must stay
   ONE row - the dashboard blocks are sized for a 68px bar - so spacing tightens before the burger takes over, in two
   steps. Measured 2026-10-14 with an admin's header (the widest case: Logbook + Admin) in de / ru / en, every 3-6 px
   from 1121 to 1700: one row everywhere; the burger starts at 1120px. A new header item needs the same measurement. */
@media (min-width: 1121px) and (max-width: 1520px) {
  html[data-theme] .topbar { padding-left: 16px; padding-right: 16px; column-gap: 14px; }
  html[data-theme] .topbar-menu { column-gap: 10px; }
  html[data-theme] .brand { font-size: 22px; }
  html[data-theme] .nav-link { padding: 8px 9px; font-size: 14px; }
  html[data-theme] .topbar-right { column-gap: 4px; }
  html[data-theme] .link-btn { padding: 6px 9px; }
}
@media (min-width: 1121px) and (max-width: 1260px) {
  html[data-theme] .topbar { padding-left: 10px; padding-right: 10px; column-gap: 6px; }
  html[data-theme] .topbar-menu { column-gap: 2px; }
  html[data-theme] .brand { font-size: 19px; gap: 8px; }
  html[data-theme] .nav-link { padding: 8px 4px; }
  html[data-theme] .link-btn { padding: 6px 4px; }
  html[data-theme] .topbar-right { column-gap: 2px; }
}

@media (max-width: 1120px) {
  html[data-theme] .topbar { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; min-height: 56px; }
  html[data-theme] .brand { font-size: 20px; gap: 8px; }
  html[data-theme] .brand-mark { width: 30px; height: 30px; }
  html[data-theme] .nav-burger {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    border: 0; border-radius: 56px; background: var(--panel); color: var(--text); cursor: pointer; padding: 0;
  }
  html[data-theme] .nav-burger:hover, html[data-theme] .topbar.is-open .nav-burger { background: var(--accent); color: var(--accent-text); }
  html[data-theme] .nav-burger .burger-cross { display: none; }
  html[data-theme] .topbar.is-open .nav-burger .burger-bars { display: none; }
  html[data-theme] .topbar.is-open .nav-burger .burger-cross { display: inline; }

  html[data-theme] .topbar-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex: none;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 12px;
    padding: 8px 12px 16px; background: var(--panel); border-radius: 0 0 20px 20px; box-shadow: var(--shadow-md);
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
  }
  html[data-theme] .topbar.is-open .topbar-menu { display: flex; }

  html[data-theme] .main-nav { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; }
  html[data-theme] .nav-link { width: 100%; text-align: left; font-size: 16px; padding: 10px 16px; }
  html[data-theme] .nav-dropdown-trigger::after { display: none; }
  html[data-theme] .nav-dropdown-trigger { pointer-events: none; color: var(--muted); padding-bottom: 4px; font-size: 14px; }
  html[data-theme] .nav-dropdown-menu {
    display: block; position: static; margin: 0; padding: 0 0 8px; min-width: 0; background: none; box-shadow: none; border-radius: 0;
  }
  html[data-theme] .nav-dropdown-menu a { font-size: 16px; padding: 10px 16px; white-space: normal; }

  html[data-theme] .topbar-right {
    flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-left: 0;
    padding-top: 12px; border-top: 1px solid var(--border);
  }
  html[data-theme] .lang-link { padding: 8px 14px; font-size: 14px; }
  html[data-theme] .link-btn { padding: 10px 16px; font-size: 15px; }
  html[data-theme] .impersonation-banner { padding: 8px 12px; font-size: 14px; gap: 8px; }
}

@media (max-width: 760px) {
  html[data-theme] { scroll-padding-top: 64px; }
  html[data-theme] [id] { scroll-margin-top: 72px; }
  html[data-theme] .btn { padding: 12px 20px; }
  html[data-theme] .help-widget { right: 12px; bottom: 12px; left: auto; }
  html[data-theme] .help-widget.is-open { left: 12px; }
  html[data-theme] .help-fab { padding: 0; width: 48px; justify-content: center; }
  html[data-theme] .help-fab-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* start page (dashboard) */
  html[data-theme] .container-wide { padding: 16px 12px 88px; }
  html[data-theme] .profile-switcher {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px 12px; padding: 0 12px 4px; scrollbar-width: none;
  }
  html[data-theme] .profile-switcher::-webkit-scrollbar { display: none; }
  html[data-theme] .profile-switcher-item { flex: none; padding: 8px 16px; font-size: 15px; }
  html[data-theme] .dash-head { margin-bottom: 16px; gap: 12px; align-items: stretch; }
  html[data-theme] .dash-title { font-size: 32px; line-height: 1.2; }
  html[data-theme] .dash-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme] .dash-actions form { display: contents; }
  html[data-theme] .dash-actions .btn { width: 100%; justify-content: center; padding: 12px 8px; font-size: 15px; }

  html[data-theme] .bento { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
  html[data-theme] .screen-radar .bento > .focus-wrap { order: 1; }
  html[data-theme] .screen-radar .bento > .radar-panel { order: 2; }
  html[data-theme] .screen-radar .bento > .pipe-panel { order: 3; }
  html[data-theme] .screen-radar .bento > .next-panel { order: 4; }
  html[data-theme] .panel, html[data-theme] .next-panel { padding: 16px; border-radius: 20px; }
  html[data-theme] .panel-head { margin-bottom: 12px; }
  html[data-theme] .panel-title { font-size: 20px; line-height: 1.3; letter-spacing: 0.5px; }

  html[data-theme] .focus-card { padding: 20px; border-radius: 32px; gap: 10px; }
  html[data-theme] .focus-title { font-size: 22px; line-height: 1.3; }
  html[data-theme] .focus-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme] .focus-actions form { display: contents; }
  html[data-theme] .focus-actions .btn { width: 100%; justify-content: center; }
  html[data-theme] .focus-btn-primary { grid-column: 1 / -1; }

  html[data-theme] .radar-panel .panel-head .muted { display: none; }
  html[data-theme] .radar-body { flex-direction: column; align-items: stretch; gap: 16px; }
  html[data-theme] .radar-plot { max-width: 280px; margin: 0 auto; }
  html[data-theme] .radar-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html[data-theme] .radar-legend { grid-column: 1 / -1; }
  html[data-theme] .radar-side > p.muted { display: none; }
  html[data-theme] .radar-count-num { font-size: 36px; }

  html[data-theme] .pipe { grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme] .pipe-stage { padding: 12px; }
  html[data-theme] .pipe-num { font-size: 32px; }
  html[data-theme] .pipe-panel .panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  html[data-theme] .pipe-attention { width: 100%; padding: 10px 14px; border-radius: 20px; }
  html[data-theme] .next-countdown { font-size: 28px; }

  html[data-theme] .feed-panel .panel-head { padding: 16px 16px 0; }
  html[data-theme] .feed-row { padding: 12px 16px; gap: 6px 10px; }
  html[data-theme] .feed-row > .btn { width: 100%; justify-content: center; justify-self: stretch; padding: 10px 16px; font-size: 14px; }
  html[data-theme] .feed-panel .vac-search { padding: 0 16px 12px !important; }
  html[data-theme] .section-head { margin-bottom: 12px; }
  html[data-theme] .card { padding: 16px; }
  html[data-theme] .card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme] .card-actions form { display: contents; }
  html[data-theme] .card-actions .btn { width: 100%; justify-content: center; padding: 10px 8px; font-size: 14px; }

  /* first visit */
  html[data-theme] .hero { padding: 8px 0 32px; }
  html[data-theme] .hero.hero-split { gap: 24px; }
  html[data-theme] .hero-art { display: none; }
  html[data-theme] .hero-title { font-size: 32px; line-height: 1.2; }
  html[data-theme] .hero-lead { font-size: 16px; }
  html[data-theme] .hero-actions { flex-direction: column; width: 100%; gap: 8px; }
  html[data-theme] .hero-actions .btn { width: 100%; justify-content: center; }
  html[data-theme] .panel-light { padding: 24px 20px; border-radius: 32px; }
  html[data-theme] .panel-light .panel-title { font-size: 24px; margin-bottom: 16px; }
  html[data-theme] .steps, html[data-theme] .source-types { gap: 12px; }

  /* inner pages */
  html[data-theme] .page-header { gap: 12px; margin-bottom: 20px; }
  html[data-theme] .page-header .btn, html[data-theme] .page-header > div { max-width: 100%; }
  html[data-theme] .vac-item { padding: 16px; }
  html[data-theme] .vac-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  html[data-theme] .vac-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-theme] .vac-actions form { display: contents; }
  html[data-theme] .vac-actions .btn { width: 100%; justify-content: center; }
  html[data-theme] .form-section { padding: 16px; }
  html[data-theme] .form-actions .btn, html[data-theme] .form-actions button { flex: 1 1 auto; justify-content: center; }
}

/* Phone refinements: the dashboard is a short, tappable stack - what to do now first, the plot last */
@media (max-width: 760px) {
  html[data-theme] .screen-radar .bento > .focus-wrap { order: 1; }
  html[data-theme] .screen-radar .bento > .pipe-panel { order: 2; }
  html[data-theme] .screen-radar .bento > .next-panel { order: 3; }
  html[data-theme] .screen-radar .bento > .radar-panel { order: 4; }

  /* focus card */
  html[data-theme] .focus-card { padding: 18px; gap: 8px; }
  html[data-theme] .focus-title { font-size: 20px; -webkit-line-clamp: 3; }
  html[data-theme] .focus-why, html[data-theme] .focus-checks-title { display: none; }
  html[data-theme] .focus-checks { padding-top: 10px; }
  html[data-theme] .focus-checks ul { gap: 4px; }
  html[data-theme] .focus-checks li { font-size: 14px; }
  html[data-theme] .focus-actions { margin-top: 4px; }
  html[data-theme] .focus-btn-primary, html[data-theme] .focus-btn { padding: 11px 12px; font-size: 14px; }

  /* application path: 2 x 2 compact tiles */
  html[data-theme] .pipe-stage {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 10px 12px;
  }
  html[data-theme] .pipe-num { grid-column: 1; grid-row: 1; font-size: 28px; line-height: 1.1; }
  html[data-theme] .pipe-label { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 1.25; }
  html[data-theme] .pipe-bar { grid-column: 1 / -1; grid-row: 2; }
  html[data-theme] .pipe-panel .panel-head { margin-bottom: 8px; }
  html[data-theme] .pipe-panel .panel-link { font-size: 14px; }
  html[data-theme] .pipe-attention { font-size: 14px; padding: 8px 12px; }

  /* next run */
  html[data-theme] .next-panel { gap: 8px; padding: 14px 16px; }
  html[data-theme] .next-countdown { font-size: 24px; }
  html[data-theme] .next-when { display: none; }
  html[data-theme] .next-candidate { padding-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
  html[data-theme] .next-bar { grid-column: 1 / -1; grid-row: 2; }

  /* radar: counts as two tiles, a small plot, the legend in one wrapping row */
  html[data-theme] .radar-panel .panel-title { font-size: 18px; }
  html[data-theme] .radar-body { gap: 12px; }
  html[data-theme] .radar-plot { max-width: 220px; }
  html[data-theme] .radar-side { gap: 8px; }
  html[data-theme] .radar-count { background: var(--surface-2); border-radius: 20px; padding: 10px 12px; }
  html[data-theme] .radar-count-num { font-size: 28px; line-height: 1.1; }
  html[data-theme] .radar-count-desc { font-size: 12px; line-height: 1.3; margin-top: 2px; }
  html[data-theme] .radar-legend { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding-top: 8px; font-size: 13px; }
  html[data-theme] .radar-ring-label { display: none; }

  /* latest vacancies: four rows, the action under the title */
  html[data-theme] .feed-row:nth-child(n+5) { display: none; }
  html[data-theme] .feed { padding-bottom: 4px; }
  html[data-theme] .feed-row { grid-template-columns: 10px minmax(0, 1fr); gap: 6px 10px; align-items: start; }
  html[data-theme] .feed-age { display: none; }
  html[data-theme] .feed-row > .legend-mark { margin-top: 6px; }
  html[data-theme] .feed-tags { grid-column: 2; flex-wrap: wrap; }
  html[data-theme] .feed-row > .btn { grid-column: 2; width: auto; justify-self: start; padding: 8px 16px; }
  html[data-theme] .feed-title { white-space: normal; overflow: visible; }

  /* profiles: name, status, three numbers, actions */
  html[data-theme] .card-body p { display: none; }
  html[data-theme] .card-body p.next-step-hint { display: block; }
  html[data-theme] .card-head h3 { font-size: 20px; }
  html[data-theme] .card-actions { margin-top: 12px; }
}
@media (max-width: 760px) {
  html[data-theme] .feed-panel { padding: 0; }
  html[data-theme] .feed-panel .panel-head { padding: 16px 16px 0; margin-bottom: 8px; }
  html[data-theme] .vac-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
  html[data-theme] .vac-search .btn { padding: 12px 18px; }
}
@media (max-width: 760px) {
  html[data-theme] h1 { font-size: 26px; line-height: 1.25; }
}

/* Visa sponsorship history (app/sponsorship.py): a neutral tag on the vacancy card, a note on the detail page,
   and the "I need a visa" switch under the search box. Palette colours only, text never below 14 px. */
html[data-theme] .tag-sponsor { text-decoration: none; color: var(--text); }
html[data-theme] .tag-sponsor:hover { color: var(--accent); }
html[data-theme] .sponsor-note ul { margin: 8px 0 8px 20px; padding: 0; }

/* Closed vacancies sit in their own collapsed group under the live results (vacancies.html) */
html[data-theme] .vac-closed-group > summary { cursor: pointer; font-size: 18px; list-style: none; color: var(--muted); }
html[data-theme] .vac-closed-group > summary::-webkit-details-marker { display: none; }
html[data-theme] .vac-closed-group > summary::before { content: "\25B8"; margin-right: 8px; font-size: 14px; }
html[data-theme] .vac-closed-group[open] > summary::before { content: "\25BE"; }
html[data-theme] .vac-closed-group .vac-list { margin-top: 16px; }

/* Help page (FAQ): chips with the topics, one collapsible card per question, a "go there" row of pills */
html[data-theme] .faq-intro { font-size: 16px; color: var(--muted); margin: 0 0 24px; }
html[data-theme] .faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
html[data-theme] .faq-chip {
  padding: 8px 20px; border: 1px solid var(--border); border-radius: 56px; color: var(--text);
  font-size: 16px; text-decoration: none;
}
html[data-theme] .faq-chip:hover, html[data-theme] .faq-chip:focus-visible {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme] .faq-group { margin: 0 0 48px; scroll-margin-top: calc((var(--topbar-h, 68px) + 16px) / var(--page-zoom, 1)); }
html[data-theme] .faq-group > h2 { font-size: 24px; font-weight: 500; margin: 0 0 16px; }
html[data-theme] .faq-item {
  background: var(--panel); border-radius: 20px; margin: 0 0 8px;
  scroll-margin-top: calc((var(--topbar-h, 68px) + 16px) / var(--page-zoom, 1));
}
html[data-theme] .faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.35;
}
html[data-theme] .faq-item > summary::-webkit-details-marker { display: none; }
html[data-theme] .faq-item > summary::after { content: "+"; flex: none; font-size: 26px; line-height: 1; color: var(--accent); }
html[data-theme] .faq-item[open] > summary::after { content: "\2212"; }
html[data-theme] .faq-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 20px; }
html[data-theme] .faq-answer { padding: 0 24px 24px; font-size: 16px; line-height: 1.55; }
html[data-theme] .faq-answer p { margin: 0 0 16px; }
html[data-theme] .faq-answer :is(ol, ul) { margin: 0 0 16px; padding-left: 22px; }
html[data-theme] .faq-answer li { margin: 0 0 8px; }
html[data-theme] .faq-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-theme] .faq-ask { margin-top: 48px; }
html[data-theme] .faq-ask h2 { font-size: 24px; font-weight: 500; margin: 0 0 8px; }
html[data-theme] .faq-ask p { margin: 0 0 16px; }
@media (max-width: 760px) {
  html[data-theme] .faq-nav { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 24px; scrollbar-width: none; }
  html[data-theme] .faq-nav::-webkit-scrollbar { display: none; }
  html[data-theme] .faq-chip { flex: none; padding: 8px 16px; font-size: 15px; }
  html[data-theme] .faq-item > summary { padding: 16px 18px; font-size: 17px; }
  html[data-theme] .faq-answer { padding: 0 18px 20px; }
  html[data-theme] .faq-group { margin-bottom: 32px; }
}

/* Operator page: stored assistant answers (admin_help_answers.html) */
html[data-theme] .page-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-theme] .helpans-answer { margin-top: 8px; white-space: pre-wrap; font-size: 14px; max-width: 70ch; }

/* Display scaling (operator, 2026-10-11): on a laptop with Windows scaling of 125-150% the browser reports
   devicePixelRatio 1.25-1.5, the window is only ~1264 CSS px wide and every 16 px text is 20-24 device px - the
   pages look "enlarged" next to the dashboard (whose blocks are scaled to fit, see "Short windows"). Pages that are
   not a dashboard (no .screen block) therefore scale their content, so text is about as big as on a 100% screen.
   `--page-zoom` is also divided out of the anchor offsets above, so a link target still lands under the bar. Only
   desktop-width windows; phones (high ratio, narrow window) and 100% screens are untouched. */
:root { --page-zoom: 1; }
@media (min-width: 1081px) and (min-resolution: 1.2dppx) { :root:not(:has(.screen)) { --page-zoom: .85; } }
@media (min-width: 1081px) and (min-resolution: 1.4dppx) { :root:not(:has(.screen)) { --page-zoom: .75; } }
@media (min-width: 1081px) and (min-resolution: 1.9dppx) { :root:not(:has(.screen)) { --page-zoom: 1; } }
html[data-theme] main#main-content { zoom: var(--page-zoom, 1); }

/* Entries of the candidate profile (work, education, languages): a compact list - the text on the left, the delete
   button on the right of the SAME row, hairlines between entries. (They were vacancy cards, with the button on a
   row of its own and 20 px of padding: three one-line languages took half a screen.) */
html[data-theme] .entry-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 8px; }
html[data-theme] .entry {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0;
  border-top: 1px solid var(--border);
}
html[data-theme] .entry:first-child { border-top: 0; }
html[data-theme] .entry-main { min-width: 0; }
html[data-theme] .entry-title { font-size: 17px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
html[data-theme] .entry-meta { color: var(--muted); font-size: 14px; line-height: 1.45; margin-top: 2px; }
html[data-theme] .entry-desc { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 6px 0 0; white-space: pre-line; }
html[data-theme] .entry-actions { margin: 0; flex: none; }
@media (max-width: 520px) {
  html[data-theme] .entry { flex-direction: column; align-items: stretch; gap: 8px; }
  html[data-theme] .entry-actions .btn { width: 100%; }
}

/* Text areas (operator, 2026-10-11): what the candidate types and what the model writes must be readable without
   scrolling inside a small box. They start tall, and grow to their text (base.html script; `field-sizing` does the
   same natively where the browser has it). The candidate form and the cover-letter form are as wide as the page. */
html[data-theme] .form.form-wide { max-width: none; }
html[data-theme] main textarea { min-height: 9rem; line-height: 1.55; max-height: 85vh; field-sizing: content; }
html[data-theme] main textarea[name=summary_text] { min-height: 13rem; }
html[data-theme] main textarea[name=skills] { min-height: 6.5rem; }
html[data-theme] main textarea[name=description] { min-height: 11rem; }
html[data-theme] main textarea#cover-letter-text { min-height: 28rem; }
html[data-theme] main textarea.mail-body { min-height: 20rem; }
html[data-theme] main .agent-draft textarea { min-height: 10rem; }

/* The assistant's send button is a round button with a paper-plane icon. The general pill-button padding (28 px
   at the sides) squeezed the icon of this 48 px button to nothing and left an empty green pill. */
html[data-theme] .help-send {
  width: 48px; height: 48px; min-width: 48px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] .help-send svg { width: 22px; height: 22px; flex: none; }

/* Typography (operator, 2026-10-11: a lone word such as "страницу" on a second line of an intro): paragraphs, list
   items, hints and labels avoid a single-word last line (`text-wrap: pretty`), headings balance their lines. The
   intro paragraphs have no character cap any more - they take the width of the page, so a one-line text stays on
   one line - and a title followed by such a paragraph sits closer to it. */
html[data-theme] :is(p, li, dd, summary, label, .hint, .muted, .faq-intro, .entry-desc, .vac-meta) { text-wrap: pretty; }
html[data-theme] :is(h1, h2, h3, .panel-title, .focus-title) { text-wrap: balance; }
html[data-theme] .page-header:has(+ :is(p, .hint, .muted, .faq-intro)) { margin-bottom: 12px; }

/* One column width (operator, 2026-10-11: "make it square"): the cards of a page are as wide as the page. They were
   capped one by one (480 / 540 / 640 / 720 px inline), so the right edge of a page was a staircase. The admin tables
   keep their own wider container. */
html[data-theme] main .form { max-width: none; }
html[data-theme] main > .form-section, html[data-theme] main > form, html[data-theme] main > .panel { max-width: none; }

/* Admin tables with a fixed number of visible rows (admin_users.html): the rest scrolls inside, the heads stay put. */
html[data-theme] .rows-scroll { overflow-y: auto; overflow-x: auto; }
html[data-theme] .rows-scroll .admin-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }

/* The focus card's buttons grow a little on hover - by transform only, which takes no room: nothing around them
   (the card, the path, the radar) moves. */
html[data-theme] .focus-actions .btn { transition: transform .15s ease, background-color .15s ease, border-color .15s ease; transform-origin: center; }
html[data-theme] .focus-actions .btn:hover, html[data-theme] .focus-actions .btn:focus-visible { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { html[data-theme] .focus-actions .btn { transition: none; } }

/* ===================================================================
   Light theme (operator request 2026-10-11): the dark system turned over, same shapes, same green.
   The tokens are in `:root[data-theme="light"]` at the top. This section only re-points what the DESIGN.md
   layer pins to a dark-canvas colour (white ghost buttons, obsidian radar disc ...) and the text that is green or
   yellow on a dark ground (it takes its ink shade on a light one). Written last so that it wins at equal weight.
   =================================================================== */
html[data-theme="light"] body { background: var(--bg); color: var(--text); }

/* Keyboard focus: the neon ring vanishes on white, the obsidian one does not */
html[data-theme="light"] a:focus-visible, html[data-theme="light"] button:focus-visible,
html[data-theme="light"] input:focus-visible, html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible, html[data-theme="light"] [tabindex]:focus-visible,
html[data-theme="light"] :is(input, select, textarea):focus-visible,
html[data-theme="light"] .attach-chip:has(input:focus-visible),
html[data-theme="light"] .faq-item > summary:focus-visible { outline-color: var(--color-obsidian-shell); }
html[data-theme="light"] :is(input, select, textarea):focus,
html[data-theme="light"] .vac-search input[type=text]:focus { border-color: var(--color-obsidian-shell); }

/* Green TEXT on a light ground takes the ink shade */
html[data-theme="light"] a:hover, html[data-theme="light"] .brand:hover, html[data-theme="light"] .link-btn:hover,
html[data-theme="light"] .vac-title a:hover, html[data-theme="light"] .tag-attribution:hover,
html[data-theme="light"] .feed-title:hover, html[data-theme="light"] .tag-sponsor:hover,
html[data-theme="light"] .accent-text, html[data-theme="light"] .radar-side-label-company,
html[data-theme="light"] .agent-score-num, html[data-theme="light"] .agent-code,
html[data-theme="light"] .panel-link, html[data-theme="light"] .link-accent,
html[data-theme="light"] .radar-count-num, html[data-theme="light"] .next-countdown,
html[data-theme="light"] .faq-item > summary::after,
html[data-theme="light"] .pill, html[data-theme="light"] .next-title { color: var(--color-green-ink); }
html[data-theme="light"] .focus-label { color: var(--inverse-muted); }

/* Header: the green pill of the active tab keeps its obsidian text; the plain links stay obsidian */
html[data-theme="light"] .topbar { background: var(--bg); }
html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-link:focus-visible,
html[data-theme="light"] .nav-dropdown-trigger[aria-expanded="true"], html[data-theme="light"] .lang-link:hover,
html[data-theme="light"] .link-btn:hover, html[data-theme="light"] .nav-dropdown-menu a:hover,
html[data-theme="light"] .nav-dropdown-menu a:focus-visible { background: var(--color-neon-pulse); color: var(--color-obsidian-shell); }
html[data-theme="light"] .nav-dropdown-menu { box-shadow: var(--shadow-md); }

/* Buttons: the ghost pill is obsidian-outlined and fills with obsidian on hover; green stays the primary action */
html[data-theme="light"] .btn { border-color: var(--color-obsidian-shell); color: var(--color-obsidian-shell); background: transparent; }
html[data-theme="light"] .btn:hover { background: var(--color-obsidian-shell); border-color: var(--color-obsidian-shell); color: var(--color-pure-white); }
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary:hover {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme="light"] .card .btn-primary, html[data-theme="light"] .feed-row .btn-primary,
html[data-theme="light"] .vac-actions .btn-primary {
  background: transparent; border-color: var(--color-obsidian-shell); color: var(--color-obsidian-shell);
}
html[data-theme="light"] .card .btn-primary:hover, html[data-theme="light"] .feed-row .btn-primary:hover,
html[data-theme="light"] .vac-actions .btn-primary:hover {
  background: var(--color-obsidian-shell); color: var(--color-pure-white); filter: none;
}
html[data-theme="light"] .btn-danger { border-color: var(--color-amber-ink); color: var(--color-amber-ink); }
html[data-theme="light"] .btn-danger:hover { background: var(--color-amber-ink); border-color: var(--color-amber-ink); color: var(--color-pure-white); }
/* Buttons that sit on the dark focus card keep inverse colours */
html[data-theme="light"] .focus-btn { background: transparent; border-color: var(--color-pure-white); color: var(--color-pure-white); }
html[data-theme="light"] .focus-btn:hover { background: var(--color-graphite-fill); border-color: var(--color-pure-white); color: var(--color-pure-white); }
html[data-theme="light"] .focus-btn-primary, html[data-theme="light"] .focus-btn-primary:hover {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}

/* Cards: white on the mint canvas, depth from luminance and DESIGN.md's whisper of a shadow */
html[data-theme="light"] .panel, html[data-theme="light"] .card, html[data-theme="light"] .empty,
html[data-theme="light"] .faq-item, html[data-theme="light"] .table-scroll,
html[data-theme="light"] .feed-panel, html[data-theme="light"] .next-panel { box-shadow: var(--shadow-md); }
html[data-theme="light"] .panel-light {
  --panel: var(--color-pure-white); --surface-2: var(--color-mint-frost);
  background: var(--color-pure-white); color: var(--color-obsidian-shell);
}
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--color-ink-soft); opacity: .8; }

/* Profile tabs */
html[data-theme="light"] .profile-switcher-item { color: var(--muted); }
html[data-theme="light"] .profile-switcher-item:hover { color: var(--text); }
html[data-theme="light"] .profile-switcher-item.is-active { background: var(--color-neon-pulse); color: var(--color-obsidian-shell); }

/* Radar: a mint disc on the white card, quiet rings, an obsidian ring around the chosen dot */
html[data-theme="light"] .radar-plot { background: var(--color-mint-frost); }
html[data-theme="light"] .radar-ring { border-color: var(--color-stone-border); }
html[data-theme="light"] .radar-ring-1 { background: var(--color-pure-white); }
html[data-theme="light"] .radar-axis { background: var(--color-fog-border); }
html[data-theme="light"] .radar-dot[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--color-mint-frost), 0 0 0 5px var(--color-obsidian-shell);
}
html[data-theme="light"] .radar-dot-warn, html[data-theme="light"] .legend-warn { background: var(--color-signal-yellow); border-color: var(--color-amber-ink); }
html[data-theme="light"] .status-dot-warn { background: var(--color-signal-yellow); }
html[data-theme="light"] .legend-board { border-color: var(--color-obsidian-shell); }
html[data-theme="light"] .hero-art .radar-plot { background: var(--color-pure-white); }
html[data-theme="light"] .hero-art .radar-ring-1 { background: var(--color-mint-frost); }
html[data-theme="light"] .pipe-bar, html[data-theme="light"] .next-bar { background: var(--color-fog-border); }
html[data-theme="light"] .pipe-stage-attention .pipe-num { color: var(--color-amber-ink); }
html[data-theme="light"] .pipe-stage-attention .pipe-bar > span { background: var(--color-signal-yellow); }
html[data-theme="light"] .pipe-attention a { color: var(--color-amber-ink); text-decoration: underline; }

/* Focus card: dark here, so its marks go the other way round */
html[data-theme="light"] .check-icon { color: var(--color-obsidian-shell); }
html[data-theme="light"] .check-pending { color: var(--color-pure-white); }
html[data-theme="light"] .focus-chip { border-color: var(--color-graphite-fill); }
html[data-theme="light"] .focus-chip-solid { background: var(--color-pure-white); color: var(--color-obsidian-shell); border-color: var(--color-pure-white); }

/* Tags, banners and chips written on the dark system */
html[data-theme="light"] .faq-chip:hover, html[data-theme="light"] .faq-chip:focus-visible {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme="light"] .impersonation-banner { background: var(--color-signal-yellow); color: var(--color-obsidian-shell); border-bottom-color: var(--color-signal-yellow); }
html[data-theme="light"] .impersonation-banner .link-btn { color: var(--color-obsidian-shell); }
html[data-theme="light"] .temp-password-box { border-color: var(--color-obsidian-shell); }

/* ===================================================================
   Company logos (company_logos.py): a square tile left of the title. White tile on purpose - a logo is drawn for a
   light ground, and a transparent PNG must read in both themes. No logo stored = nothing is drawn (no placeholder).
   =================================================================== */
.co-logo {
  --co-size: 52px;
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: var(--co-size); height: var(--co-size); padding: 5px; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--color-fog-border); background: var(--color-pure-white);
}
.co-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.co-logo-sm { --co-size: 40px; padding: 4px; border-radius: 10px; }
.co-logo-md { --co-size: 52px; }
.co-logo-lg { --co-size: 64px; border-radius: 14px; }

.vac-head { display: flex; align-items: flex-start; gap: 16px; }
.vac-head-text { flex: 1; min-width: 0; }
.detail-head { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; }
.detail-head-text { min-width: 0; }
.detail-head-text h1 { margin: 0; }
html[data-theme] .detail-company { color: var(--muted); font-size: 16px; margin-top: 4px; }
.focus-head { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.focus-head .focus-titles { min-width: 0; flex: 1; }
.focus-head .co-logo { --co-size: 56px; }
.feed-main-logo { flex-direction: row; align-items: center; gap: 12px; }
.feed-main-text { min-width: 0; display: flex; flex-direction: column; }
.feed-main-text .feed-title { display: block; }

/* The compact tiers of the first screen keep the card's height: a smaller tile */
@media (min-width: 1081px) and (max-height: 729px) { .focus-head .co-logo { --co-size: 44px; } }
@media (max-width: 760px) {
  .focus-head .co-logo { --co-size: 44px; }
  .vac-head { gap: 12px; }
  .co-logo-md { --co-size: 44px; }
  .co-logo-lg { --co-size: 52px; }
  .detail-head { gap: 14px; }
}

/* Logo.dev's free plan asks for a visible link where its logos appear (shown only on a page that has one) */
.logo-attribution { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.logo-attribution a { color: inherit; }
html[data-theme] .feed-panel .logo-attribution { margin: 0; padding: 8px 24px 16px; }

/* The radar's two counts open the vacancies page at their section. Colours only on hover (see the HOVER RULE in CLAUDE.md). */
a.radar-count-link, a.radar-count-link:hover { color: inherit; text-decoration: none; }
.radar-count-link { display: block; border-radius: 20px; }
.radar-count-link .radar-count-desc { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .15s ease; }
.radar-count-link:hover .radar-count-desc, .radar-count-link:focus-visible .radar-count-desc { text-decoration-color: currentColor; }
.radar-count-link:hover .radar-count-num, .radar-count-link:focus-visible .radar-count-num { color: var(--color-neon-pulse); }
html[data-theme="light"] .radar-count-link:hover .radar-count-num,
html[data-theme="light"] .radar-count-link:focus-visible .radar-count-num { color: var(--color-green-ink); }

/* ===================================================================
   Vacancy list and application list (operator 2026-10-11 / 12): wide cards, a large logo, the type a little above the
   page's own. ONE knob: --list-k scales the whole card (1 = the first enlarged version, logo 104 px); the operator asked
   for 30% less on the 12th, so 0.7. Type never goes below its floor (14 px body, 18 px title - DESIGN.md's minimum).
   Scoped to .vac-list on the pages with `container-list`; the dashboard and the vacancy page keep their sizes.
   =================================================================== */
html[data-theme] main.container-list { max-width: 1440px; }
html[data-theme] .vac-list { --list-k: .7; }
html[data-theme] .vac-list .vac-item { padding: calc(28px * var(--list-k)) calc(32px * var(--list-k)); border-radius: calc(24px * var(--list-k)); }
html[data-theme] .vac-list .vac-head { gap: calc(28px * var(--list-k)); align-items: center; }
html[data-theme] .vac-list .co-logo-md { --co-size: calc(104px * var(--list-k)); padding: calc(8px * var(--list-k)); border-radius: calc(20px * var(--list-k)); }
html[data-theme] .vac-list .vac-title { font-size: max(18px, calc(24px * var(--list-k))); line-height: 1.35; }
html[data-theme] .vac-list .vac-meta { font-size: max(14px, calc(18px * var(--list-k))); line-height: 1.45; margin-top: 6px; }
html[data-theme] .vac-list .vac-meta .tag, html[data-theme] .vac-list .vac-title .badge,
html[data-theme] .vac-list .vac-title .badge-new, html[data-theme] .vac-list .vac-title .badge-closed,
html[data-theme] .vac-list .vac-gate-badges .badge, html[data-theme] .vac-list .vac-gate-badges .tag { font-size: 14px; padding: 3px 12px; }
html[data-theme] .vac-list .vac-gate-badges { margin-top: calc(14px * var(--list-k)); }
html[data-theme] .vac-list .vac-salary { font-size: max(14px, calc(18px * var(--list-k))); margin-top: 10px; }
html[data-theme] .vac-list .vac-footer { margin-top: calc(20px * var(--list-k)); gap: 16px; }
html[data-theme] .vac-list .vac-footer .muted, html[data-theme] .vac-list .vac-footer .small { font-size: 14px; }
html[data-theme] .vac-list .vac-actions .btn, html[data-theme] .vac-list .vac-actions .btn-small { font-size: 14px; padding: 9px 20px; }
@media (max-width: 760px) {
  html[data-theme] .vac-list .vac-item { padding: 16px; border-radius: 20px; }
  html[data-theme] .vac-list .vac-head { gap: 14px; align-items: flex-start; }
  html[data-theme] .vac-list .co-logo-md { --co-size: 60px; padding: 5px; border-radius: 14px; }
  html[data-theme] .vac-list .vac-actions .btn { padding: 10px 14px; }
}

/* Admin logbook (/admin/logbook): AI cost per candidate and per day, subscription calculator */
.logbook-periods { align-items: center; }
.logbook-section { margin-top: 32px; }
.logbook-calc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; margin: 8px 0 16px; }
.logbook-calc-form input[type=number] { width: 100%; }
.logbook-fits td { background: var(--surface-2); font-weight: 500; }
.logbook-bar-col { width: 28%; min-width: 120px; }
.logbook-bar { display: block; height: 8px; border-radius: 999px; background: var(--accent); min-width: 2px; }

.fill-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fill-actions form { margin: 0; }

/* Vacancies page: two windows (job boards / personalized search), 2026-10-15. Tabs on top, the way into the
   other window at the end of the list. Same pill look as the profile switcher; green only for the active window
   and for the end-of-list button. */
.vac-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.vac-tab {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); text-decoration: none; font-size: 15px;
}
.vac-tab:hover { color: var(--text); border-color: var(--muted); }
.vac-tab-active, .vac-tab-active:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.vac-switch { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 28px 0 8px; }
.vac-switch .hint { margin: 0; }
html[data-theme] .vac-tab-active, html[data-theme] .vac-tab-active:hover {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}
html[data-theme] .vac-tab-active .vac-section-count { color: inherit; }
html[data-theme] .vac-tab { padding: 12px 24px; border: 0; border-radius: 56px; background: transparent; color: var(--color-slate-text); font-size: 16px; }
html[data-theme] .vac-tab:hover { color: var(--text); }

/* Vacancy window tabs: the same white-outlined pills as every other button */
html[data-theme] .vac-tab {
  padding: 14px 28px; border: 1.5px solid var(--color-pure-white); border-radius: 56px;
  background: transparent; color: var(--color-pure-white); font-size: 16px; line-height: 1.5; letter-spacing: -0.08px;
}
html[data-theme] .vac-tab:hover { background: var(--color-charcoal); border-color: var(--color-pure-white); color: var(--color-pure-white); }
html[data-theme] .vac-tab-active, html[data-theme] .vac-tab-active:hover {
  background: var(--color-neon-pulse); border-color: var(--color-neon-pulse); color: var(--color-obsidian-shell);
}

/* Vacancy tab counts stay readable on the green active tab */
html[data-theme] .vac-tab-active .vac-section-count,
html[data-theme] .vac-tab-active:hover .vac-section-count {
  background: var(--color-obsidian-shell); color: var(--color-pure-white);
}