/* Design system for Foresight: 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.

   Dark only. 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;

  /* 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;
}
/* DESIGN.md is a dark-only system, so there is no light theme any more: the old
   :root[data-theme="light"] block was removed on 2026-10-11, and the theme switcher is hidden
   (the markup and the /set-theme route stay, so a light palette can be added back as one block
   that redefines the variables above). */

* { 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); }
.theme-switcher { display: flex; gap: 2px; }
.theme-link {
  display: flex; align-items: center; justify-content: center; color: var(--text);
  padding: 5px 8px; border-radius: var(--radius-sm); opacity: .45;
  transition: opacity .15s ease, background-color .15s ease;
}
.theme-link svg { width: 16px; height: 16px; display: block; }
.theme-link:hover { opacity: .8; background: var(--surface-2); }
.theme-active { opacity: 1; background: var(--surface-2); }
.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); font-weight: 600;
  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%; }

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

/* Settings: where to get the Foresight 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. DESIGN.md is a dark-only
   system, so the home page stays dark in either theme.
   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; }
html[data-theme] .theme-switcher { display: none; }   /* dark-only system, see the :root comment */

/* 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);
  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 language switch, Admin, Log out) must stay ONE row - the
   dashboard blocks are sized for a 68px bar - so spacing tightens before the burger takes over. Measured with the
   German labels and the Admin button (the widest case): one row from 1106px, the burger starts at 1120px. */
@media (min-width: 1121px) and (max-width: 1360px) {
  html[data-theme] .topbar { padding-left: 16px; padding-right: 16px; column-gap: 16px; }
  html[data-theme] .topbar-menu { column-gap: 12px; }
  html[data-theme] .brand { font-size: 22px; }
  html[data-theme] .nav-link { padding: 8px 10px; font-size: 14px; }
  html[data-theme] .topbar-right { column-gap: 6px; }
  html[data-theme] .link-btn { padding: 6px 10px; }
}

@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; }