*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Safari paisutab rõhtvaates teksti omal käel; vt sama rida style.css-is. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── TRANSMARK BRÄND ── */
:root {
  --brand-blue:    #2e3192;
  --brand-blue-l:  #4448b8; /* hele aktsent — gradiendid, hõõgus */
  --brand-blue-d:  #151644; /* tume tausta-/hover-sinine */
  --brand-red:     #ed1c24;
  /* ⚠ VESTLUSVIDINA TOKENID ON `#chat-root` PEAL, MITTE SIIN — vt faili
     „VESTLUSVIDIN" plokki. Siin seisid `--chat-green` ja `--chat-fg` kuni
     30.09.2026; nad kolisid vidina enda juurele, sest sealt on näha, MIDA nad
     puudutavad, ja sealsamas seisab ka nende tuletiste ahel (`color-mix`).
     ⚠ ÄRA TOO NEID SIIA TAGASI: `:root` peal olles on nad kogu lehe omad ja
     järgmine kasutaja väljaspool vidinat teeb nad vaikselt kaheks eri asjaks.

     Miks vidina aktsent EI TULE malli aktsendist (`--tpl-accent`): sama token
     toidab kandideerimisnuppu (#ap-btn gradient) ja vidin oli seetõttu iga
     malli peal kandideerimisnupuga SAMA värvi ning mobiilis pealegi sama kuju.
     Kaks ühesugust riba kohakuti, millest üks saadab kandideerimise ära ja
     teine avab vestluse. */

  --brand-blue-tint:        rgba(46,49,146,.09);
  --brand-blue-tint-strong: rgba(46,49,146,.16);
  --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 12px 28px -14px rgba(46,49,146,.22);
  --shadow-card-dark: 0 1px 2px rgba(0,0,0,.2), 0 16px 32px -14px rgba(0,0,0,.45);
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #eef1f8;
  color: #1e293b;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  transition: background .25s;
}
/* Hele: pehme sinine hõõgus ülal, mitte lame hall */
body:not(.tpl-dark) {
  background:
    radial-gradient(720px 420px at 50% -8%, rgba(46,49,146,.07), transparent 60%),
    #eef1f8;
}
/* Tume mall: kogu lehe taust — pehme hõõgus ülal, süveneb allapoole, mitte lame üksiktoon */
body.tpl-dark {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(68,72,184,.35), transparent 60%),
    var(--brand-blue-d);
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ── STATES (loading / error / success) ── */
.state-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  gap: 14px;
}
.state-icon {
  width: 72px; height: 72px; border-radius: 50%;
  font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.state-icon.ok  { background: var(--brand-blue-tint); color: var(--brand-blue); }
.state-icon.err { background: #fee2e2; color: var(--brand-red); }
/* Tervituslik laineriba edu-ikooni ümber — vaikne, üks-kordne, mitte tüütult korduv */
.state-icon.ok::after {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-blue);
  opacity: 0;
  animation: ring-pulse 1.1s ease-out .15s 1;
}
@keyframes ring-pulse {
  0%   { transform: scale(.85); opacity: .5; }
  100% { transform: scale(1.18); opacity: 0; }
}
.state-wrap h2  { font-size: 21px; font-weight: 700; color: #0f172a; letter-spacing: -.01em; }
.state-sub      { color: #64748b; font-size: 14px; max-width: 400px; }
/* Tume mall: state-wrap ekraanid (edu/viga/laadimine) kuvatakse otse body taustal, vajavad heledat teksti */
body.tpl-dark .state-icon.ok  { background: rgba(255,255,255,.14); color: #fff; }
body.tpl-dark .state-icon.ok::after { border-color: rgba(255,255,255,.6); }
body.tpl-dark .state-wrap h2  { color: #fff; }
body.tpl-dark .state-sub      { color: rgba(255,255,255,.72); }

#ok-role { margin-top: 6px; font-weight: 600; color: var(--brand-blue); }
body.tpl-dark #ok-role { color: #fff; }

/* Spinner */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--brand-blue);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── VESTLUSEST TÄIDETUD VÄLJA VIHJE ──────────────────────────────────────
   ⚠ AINUS ELLUJÄÄNU vanast kuulutuselehe laadistikust. Siin all olid
   `.ap-header`, `.ap-main`, `.job-card`, `.job-hero`, `.ap-grid`, `.af`,
   `.consent-row`, `.ap-form-wrap`, `.ap-submit`, `body.tpl-dark` ja malli
   teemaharu — karjäärilehe ümberkujundus (30.09.2026) jättis nad kõik
   kasutuseta. `.af-hint` jäi, sest `aria-describedby` sihtmärgid on endiselt
   märgendis ja js/chatwidget.js identiteedirida näitab neid. */
.af-hint { font-size: 11px; font-weight: 400; color: var(--career-muted); }
.af-hint[hidden] { display: none; }
/* ── FOOTER ── */
.ap-footer {
  text-align: center;
  padding: 24px 20px;
  font-size: 12px;
  color: #94a3b8;
}
body.tpl-dark .ap-footer { color: rgba(255,255,255,.45); }
.ap-footer a { color: inherit; text-decoration: none; font-weight: 500; }
.ap-footer a:hover { text-decoration: underline; }

/* ── PRIVAATSUSPOLIITIKA MODAAL ── */
.privacy-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.privacy-panel {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.privacy-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e2e8f0;
}
.privacy-panel-head h2 { font-size: 16px; color: #0f172a; font-weight: 700; }
.privacy-panel-head button {
  background: none;
  border: none;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
}
.privacy-panel-body {
  padding: 18px 22px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.65;
  color: #334155;
}
.privacy-panel-body p { margin-bottom: 12px; }
.privacy-panel-body ul { margin: 0 0 12px 20px; }
.privacy-panel-body a { color: var(--brand-blue); }
.privacy-panel-foot {
  padding: 14px 22px;
  border-top: 1px solid #e2e8f0;
  text-align: right;
}
.btn-close-privacy {
  background: var(--brand-blue);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-close-privacy:hover { background: var(--brand-blue-d); }

/* ============================================================
   TELEFON (≤560px)
   ============================================================
   560px, mitte 520px: sama „telefoni" murdekoht mis style.css'is (vt sealset
   RESPONSIIVSUS plokki). Kaks lehte, kolm eri arvu oli ilma põhjuseta.

   ⚠ ASUKOHT FAILIS ON OSA LAHENDUSEST — sama reegel, mis kehtib style.css'is.
   Meediapäring EI tõsta spetsiifilisust: `.consent-row` ploki sees on täpselt
   sama 0-1-0 mis `.consent-row` väljaspool, ja võidab ainult siis, kui tuleb
   HILJEM. Plokk seisis varem faili keskel ja sai sellega hakkama ainult
   sellepärast, et tema kolm reeglit puudutasid elemente, mille baasreeglid
   olid juhtumisi eespool. Iga siia lisatud rida oleks sealt edasi vaikselt
   kaotanud. Ära tõsta seda plokki tagasi ettepoole. */
@media (max-width: 560px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-header { padding: 12px 14px; }
  .ap-main { margin: 20px auto; padding: 0 12px; }
  .ap-form-wrap { padding: 20px 16px 22px; }

  /* Motivatsioonikiri: `rows="4"` + 16px kiri (vt `pointer:coarse` plokk
     ülalpool) mahutab kolm rida, mitte neli. Väli, mis näeb välja
     lõpetatud, kutsub kirjutama vähem. */
  .af textarea { min-height: 120px; }

  /* ⚠ Kaks nõusolekurida on siin lehe kõige tähtsam koht: ilma nendeta
     kandideerimine ei lähe läbi, ja mõlemad on juriidilised kinnitused.
     Puutepind on juba terve rida (`.consent-row` ON `<label>`), aga kaks
     rida vahetult üksteise all on sõrmega kergesti valesti tabatavad —
     eriti kui teksti on kaks rida ja ruudud jäävad 6px kaugusele.
     Kõrgus on vahe, mitte ruudu suurus: 17px ruut on nähtavuse mõttes
     õige ja tema suurendamine ei anna midagi juurde. */
  .consent-row { min-height: 44px; padding: 4px 0; margin-bottom: 12px; }

  /* Saatmisnupp EI ole kleepuv: pikk vorm + kleepuv nupp tähendaks, et nupp
     katab viimase välja (nõusolekuread) täpselt siis, kui neid täidetakse.
     Ta on juba täislaiuses ja vormi lõpus — sellest piisab. */
  .ap-submit { min-height: 48px; }
}

/* ══════════════════════════════════════════════════════════
   AVATUD KOHTADE NIMEKIRI (kohad.html)
   ══════════════════════════════════════════════════════════
   Sama pind ja sama stiilifail mis kandideerimisvormil: kandidaat liigub
   nimekirjast vormi ühe klõpsuga ja lehed ei tohi näida eri majast.
   Nimekiri on ainus koht, kust avatud kohti üldse leiab — varem sai
   kandideerida ainult otselingiga. */

/* Tühja oleku ikoon: neutraalne, mitte veapunane. „Kohti ei ole" ei ole viga. */
.state-icon.muted { background: rgba(15,23,42,.05); color: #94a3b8; }
body.tpl-dark .state-icon.muted { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

/* ⚠ VANA NIMEKIRJA LAADISTIK KUSTUS 30.09.2026 (karjäärilehe ümberkujundus).
   `.jobs-intro`, `.jobs-lead` ja vana `.jobs-city` / `.job-item*` komplekt
   elasid siin ja kirjutasid uusi `.career-*` reegleid üle — mobiilis jäi
   palgale sellest võõras hall pill. Uued reeglid on faili lõpus
   „KARJÄÄRILEHT" plokis. */

/* Link tagasi nimekirja — seisab kandideerimisvormi vea-oleku all, sest
   „see konkurss on lõppenud" on täpselt see hetk, mil kandidaat vajab teed
   ülejäänud kohtadeni. */
.back-to-jobs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-blue);
  text-decoration: none;
}
.back-to-jobs:hover { text-decoration: underline; }
body.tpl-dark .back-to-jobs { color: #fff; }

/* Avatud kuulutuse lõpus olev viide ülejäänud kohtadele.
   ⚠ OMA KLASS, MITTE .back-to-jobs MODIFIKAATOR. Kuju on sama pill nagu
   mujal lehel, aga täidetud aktsendi asemel ääris: see link EI TOHI
   kandideerimisnupuga võistelda. Pärimine tähendaks kolme ülekirjutust
   ühe reegli asemel.
   ⚠ KESKELE EI VII `align-self`. Siin seisis `align-self: center`, aga
   `.career-main` on tavaline plokk — flexi omadus ei tähenda seal midagi ja
   link jäi vaikselt vasakusse serva. Keskele viib `width: fit-content` koos
   `margin: auto`-ga, mis ei sõltu vanema paigutusest.
   ⚠ TUME MALL VAJAB OMA REEGLIT, ja nüüd mitte ainult värvi: valge pind ja
   hele ääris kaoksid --brand-blue-d peal ära. Kontrastid on käsitsi
   kontrollitud — scripts/check-colors.mjs loeb ainult style.css'i ja see fail
   ei ole tema katvuses: hele 8,0:1 (--career-text-2 valgel pinnal), tume
   12,9:1 (#fff 10% valge katte peal #151644-l). */
.more-jobs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 28px auto 0;
  /* min-height, mitte height: suurema brauserifondi juures murduks tekst
     kahele reale ja fikseeritud kõrgus laseks ta nupust välja. */
  min-height: 48px;
  padding: 10px 26px;
  border: 1px solid var(--career-line-2);
  border-radius: var(--career-r-pill);
  background: var(--career-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--career-text-2);
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.more-jobs i { transition: transform .15s ease; }
.more-jobs:hover { background: var(--career-tint-2); border-color: var(--career-field); }
.more-jobs:hover i { transform: translateX(2px); }
body.tpl-dark .more-jobs {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.26);
  color: #fff;
}
body.tpl-dark .more-jobs:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }

/* ============================================================
   VESTLUSVIDIN (js/chatwidget.js)
   ============================================================
   ⚠ KOGU VÄÄRTUSTIK TULEB TOKENITEST. Komponendireeglis ei tohi olla ühtegi
   heksi: vidin istub kuulutusel, mille malli aktsent tuleb andmebaasist, ja
   iga kohapeal kirjutatud värv on koht, mis admini valikut EI JÄRGI. Seda ei
   näita ükski veateade — paneel lihtsalt jääb vale värvi.

   ⚠ AKTSENT ON VAIKEVÄÄRTUS, MITTE OTSUS. `--chat-accent` all seisab
   #2e3192, aga `js/chatwidget.js initChat` kirjutab ta üle
   `chat_settings.accent_color` väärtusega, mille server on kontrastikontrollist
   läbi lasknud (src/settings.js contrastOnWhite, migratsioonid 042 ja 043).
   Seepärast on hover, press ja MÕLEMAD tindid `color-mix`-iga SAMAST tokenist
   tuletatud: kõvakoodis sinised toonid annaksid punase aktsendi peal sinise
   tindi ja admini valik oleks pooleldi eiratud.

   ⚠ KAKS TEEMAT. Kuulutusel on hele ja tume mall (`body.tpl-dark`) ja paneel
   ujub mõlema peal. Paneeli enda pind jääb MEELEGA heledaks mõlemal — vestlus
   on kuulutusest eraldi pind ja tema kontrastid on siis ühed, mitte kaks
   komplekti. Tumedaks läheb ainult see, mis kuulutuse taustal seisab: käivitus-
   mull ja tema silt.

   ⚠ PUNAST SIIN EI OLE, peale `--chat-required`. Tema kannab KAHTE rolli:
   kohustusliku välja tärni ja valideerimisteadet. Need on sama signaal —
   „kohustuslik väli ei ole korras" — ja kaks eri värvi ütleksid, et nad on eri
   asjad. Vidina veateade ei tohi jääda tavatekstist eristamatuks.
   ============================================================ */

#chat-root {
  /* ── Aktsent ja tuletised ── */
  --chat-accent:        #2e3192;
  /* ⚠ TEKSTI VÄRV AKTSENDI PEAL ON OMA TOKEN, MITTE KÕVAKOODIS VALGE, ja see
     on migratsioon 042 kogu mõte. Valge seisis varem kuues eri reeglis ja just
     seepärast EI SAANUD admin heledat aktsenti üldse valida — ainus kaitse
     loetamatuse vastu oli keeld hele toon valida. Server kontrollib paari
     `contrastRatio(accent_color, text_color) >= 4,5` ja kiidab heaks ka heleda
     tausta koos tumeda tekstiga; kõvakoodis valge eiraks selle vaikselt.
     Väärtuse paneb `js/chatwidget.js initChat` `chat.textColor`-ist. */
  --chat-fg:            #ffffff;
  --chat-accent-hover:  color-mix(in srgb, var(--chat-accent) 88%, #000);
  --chat-accent-press:  color-mix(in srgb, var(--chat-accent) 76%, #000);
  --chat-accent-tint:   color-mix(in srgb, var(--chat-accent) 14%, #fff);
  --chat-accent-tint-2: color-mix(in srgb, var(--chat-accent) 6%,  #fff);

  /* ── Tekst ja pinnad ── */
  --chat-text:      #151644;
  --chat-text-2:    #4a4d7a;
  --chat-muted:     #5f6290;
  --chat-surface:   #ffffff;
  --chat-bg:        #f5f6fb;
  --chat-line:      #c8cae9;
  --chat-line-soft: #e3e4f5;

  /* ── Olekud ── */
  --chat-online:   #2f8f57;
  --chat-offline:  #9a9ebf;
  --chat-required: #a10f15;

  /* ── Varjud ── */
  --chat-shadow-panel:  0 20px 50px rgba(21,22,68,.22);
  --chat-shadow-launch: 0 10px 28px rgba(46,49,146,.45);
  --chat-shadow-me:     0 4px 12px rgba(46,49,146,.25);
  --chat-shadow-them:   0 1px 3px rgba(21,22,68,.08), 0 0 0 1px var(--chat-line-soft);
  --chat-shadow-field:  0 2px 8px rgba(21,22,68,.06);
  --chat-shadow-label:  0 4px 14px rgba(21,22,68,.18);
  --chat-focus:         0 0 0 3px var(--chat-accent-tint);

  /* ── Raadiused ── */
  --chat-r-panel: 20px;
  --chat-r-bubble: 18px;
  --chat-r-bubble-tail: 6px;
  --chat-r-pill: 18px;
  --chat-r-field: 16px;
  --chat-r-field-1: 24px;

  /* ⚠ KELLAAJAD PÜSISAMMUGA, AGA ILMA UUT FONTI LAADIMATA. Lehel on DM Sans
     (apply.html) ja AINULT vidinasse toodud teine perekond teeks temast
     kuulutusel külalise. Süsteemi monospace annab sama joonduse ja null
     lisapäringut renderdust blokeerival teel. */
  --chat-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  position: fixed; right: 24px; bottom: calc(24px + var(--cw-kb, 0px)); z-index: 60;
  /* ⚠ `column-reverse`, MITTE `column`, JA SEE EI OLE MAITSE. Mull on DOM-is
     esimene — nii jõuab klaviatuur temani enne paneeli ja fookuse järjekord on
     „ava → sisu". Aga EKRAANIL peab paneel olema mulli KOHAL: `column` andis
     mulli paneeli peale, kus ta kattis päise nurka ja tundus eraldi aknana.
     `column-reverse` pöörab ainult joonistuse, mitte fookuse. */
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
}

/* ── KÄIVITUSMULL ──────────────────────────────────────────────────────────
   ⚠ SILT ON MULLI KOHAL, MITTE TEMA SEES. Tekstiga nupp kasvab sildi pikkusega
   ja muutub ribaks, mis kitsal ekraanil seisab kandideerimisnupu kohal sama
   kujuga — kaks ühesugust riba kohakuti, millest üks saadab kandideerimise ära
   ja teine avab vestluse. Just seda kaevati. Ring jääb ringiks. */
.cw-launch-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.cw-launch-label {
  max-width: 220px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--chat-surface);
  color: var(--chat-text);
  font-size: 13px; font-weight: 600; line-height: 1.3;
  box-shadow: var(--chat-shadow-label);
  text-align: center;
  overflow-wrap: anywhere;
}
/* Tühja sildi korral ei renderda JS teda üldse; see rida on teine kaitse
   selle vastu, et tühi pill jätaks mulli kohale valge täpi. */
.cw-launch-label:empty { display: none; }

.cw-launcher {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--chat-accent);
  color: var(--chat-fg);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--chat-shadow-launch);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.cw-launcher i { font-size: 26px; line-height: 1; }
.cw-launcher:hover  { background: var(--chat-accent-hover); transform: translateY(-1px); }
.cw-launcher:active { background: var(--chat-accent-press); transform: none; }

/* ⚠ FOOKUSRÕNGAS EI OLE KAUNISTUS. Vidin on avalikul lehel, kus klaviatuuriga
   liikuja on tavaline (vormiväljad on kohe kõrval) ja `outline:none` teeks
   nupu tema jaoks nähtamatuks. */
.cw-launcher:focus-visible {
  outline: 2px solid var(--chat-accent); outline-offset: 3px;
}
.cw-x:focus-visible,
.cw-chip:focus-visible,
.cw-cta:focus-visible,
.cw-link:focus-visible,
.cw-send:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.cw-in:focus-visible,
.cw-in:focus { outline: none; border-color: var(--chat-accent); box-shadow: var(--chat-focus); }

/* Punane täpp: vastus on tulnud, aga paneel on kokku pandud.
   ⚠ VÄRV EI TULE AKTSENDIST. Märguanne peab nupust ERINEMA — aktsendivärvi
   täpp aktsendivärvi mullil on nähtamatu. */
.cw-dot {
  position: absolute; top: 4px; right: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--chat-required);
  border: 2px solid var(--chat-surface);
}
body.tpl-dark .cw-dot { border-color: rgba(255,255,255,.9); }

/* Tumedal mallil vajab mull heledat piiri, muidu sulab tumesinise taustaga. */
body.tpl-dark .cw-launcher { box-shadow: var(--chat-shadow-launch), 0 0 0 1px rgba(255,255,255,.22); }
body.tpl-dark .cw-launch-label { background: var(--chat-surface); }

/* ⚠ AVATUD PANEELI AJAL JÄÄB MULL NÄHTAVAKS JA MUUTUB SULGEJAKS — laual.
   Ikoon vahetab js/chatwidget.js. Mobiilis peidetakse ta (vt telefoniplokk):
   seal katab paneel kogu ekraani ja päises on juba oma 44px sulgemisnupp, ehk
   kaks sulgejat korraga. Ta seisis varem paneeli KOHAL ja kattis
   kandideerimisvormi välju — see on see viga, mille peitmine parandas.

   `.cw-hide-launcher` on teine, sõltumatu põhjus: js/apply.js peidab nupu, kui
   saatmisnupp jõuab vaate alumisse ribasse, kus ujuv nupp teda füüsiliselt
   kataks. */
#chat-root.cw-hide-launcher .cw-launch-wrap { display: none; }
/* Avatud paneeli ajal ei ole sildil enam midagi öelda — ta kutsus avama. */
#chat-root.cw-open .cw-launch-label { display: none; }

/* ── PANEEL ────────────────────────────────────────────────────────────────
   ⚠ `max-height` KOLM PIIRI, MITTE ÜKS. `dvh` katab brauseririba, aga MITTE
   iOS-i klaviatuuri — see tuleb `--cw-vh`-st (js/chatwidget.js _syncViewport).
   Varuväärtus hoiab käitumise endisena brauseris, kus visualViewport'i ei ole. */
.cw-panel {
  width: min(380px, calc(100vw - 32px));
  max-height: min(600px, calc(100dvh - 120px), calc(var(--cw-vh, 100dvh) - 120px));
  display: flex; flex-direction: column;
  background: var(--chat-bg);
  border-radius: var(--chat-r-panel);
  overflow: hidden;
  box-shadow: var(--chat-shadow-panel);
}
/* Olekus C on kõrgus fikseeritud, et sõnumiala ei hüppaks iga uue mulli peale. */
.cw-panel.cw-thread { height: 600px; }

/* ⚠ SEE RIDA EI OLE ÜLELIIGNE. `hidden` atribuut peidab elemendi ainult
   BRAUSERI oma laaditabeli reegliga `[hidden]{display:none}`, ja iga AUTORI
   `display` deklaratsioon lööb selle kaskaadis üle — autori laaditabel võidab
   brauseri oma sõltumata spetsiifilisusest. Ilma selleta on `.cw-panel
   { display: flex }` tugevam kui `hidden` ja paneel seisab lehel lahti, kuigi
   JS ütleb `panel.hidden = true`.

   ⚠ jsdom EI PÜÜA seda viga: tema getComputedStyle käsitleb `hidden`-it
   erijuhuna ja vastab `none` ka siis, kui päris brauser näitab `flex`. Seda
   kontrollib test/frontend/chatwidget.test.mjs otse CSS-teksti pealt. */
.cw-panel[hidden] { display: none; }

/* ⚠ TAUSTAKIHT ON AINULT MOBIILIS (vt telefoniplokk failis allpool). Laual on
   paneel väike kaart nurgas ja terve lehe tumendamine oleks pealetükkivus;
   telefonis katab ta praktiliselt kogu ekraani ja tema taga klõpsimine on
   eksitus, mitte valik.

   ⚠ SIIN EI TOHI OLLA z-INDEKSIT, JA SEE ON PARANDUS, MITTE VÄLJAJÄTMINE.
   Siin seisis `z-index: 59` põhjendusega „`.ap-header` (10) peale,
   `.privacy-overlay` (100) alla". See põhjendus oli vale: `#chat-root` on
   `position:fixed; z-index:60` ehk ta LOOB VIRNASTUSKONTEKSTI ja tema lapsed
   ei pääse sealt välja ega puutu nende kahega kunagi kokku. Taustakiht sai
   sellega paneeli PEALE (paneel on `z-index:auto`) ja iga vajutus vidinasse
   läks taustakihti, mis paneeli kinni pani. */
.cw-backdrop {
  position: fixed; inset: 0;
  background: rgba(21,22,68,.5);
  display: none;
}
.cw-backdrop[hidden] { display: none; }

/* Lohistamispide. Sisu ta ei kanna — ainult ütleb, et see pind tuleb alt. */
.cw-grip { display: none; }

/* ── PÄIS ──────────────────────────────────────────────────────────────────
   Valge, mitte aktsent. Aktsendivärvi päis nõuaks tema peal loetavat teksti
   ja seega TEIST kontrastilävendit (see oli `--chat-fg` ja tema kaks
   lävendit); valge päis teeb küsimuse olematuks ja jätab aktsendi sinna, kus
   ta midagi ütleb — nupule ja minu mullile. */
.cw-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 14px 14px 20px;
  background: var(--chat-surface);
  color: var(--chat-text);
  flex: none;
}
/* ⚠ `min-width: 0` EI OLE ÜLELIIGNE. Flex-lapse automaatne alammõõt on tema
   SISU alammõõt, mitte null — pikk ettevõtte nimi hoiaks veergu laiali ja
   lükkaks sulgemisnupu ekraanist välja. */
.cw-head-txt { min-width: 0; flex: 1; }

.cw-avatar {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--chat-accent);
  color: var(--chat-fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}

.cw-company {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--chat-accent);
  overflow-wrap: anywhere;
}
.cw-status {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px;
  font-size: 12px; color: var(--chat-text-2);
  overflow-wrap: anywhere;
}
/* ⚠ TÄPP ON `aria-hidden` KUJU, MITTE TEADE. Olek on kirjas kõrval tekstis
   („Vastame täna kuni 17.00" / „Praegu kinni") — ekraanilugejale piisab
   sellest ja täpi ette lugemine lisaks ainult müra. */
.cw-dot-state { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cw-dot-state.is-on  { background: var(--chat-online); }
.cw-dot-state.is-off { background: var(--chat-offline); }

.cw-x {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--chat-text-2);
  font: inherit; cursor: pointer;
  transition: background .15s, color .15s;
}
.cw-x i { font-size: 18px; }
.cw-x:hover { background: var(--chat-accent-tint-2); color: var(--chat-text); }

/* ── SISU ──────────────────────────────────────────────────────────────────
   ⚠ `overflow-x` PEAB OLEMA KIRJAS, MITTE JÄETUD VAIKEVÄÄRTUSELE — ja see on
   terve selle faili kõige vaiksem reegel. CSS-i overflow-spetsifikatsioon
   ütleb: kui üks telg on `visible` ja teine ei ole, ARVUTUB `visible` ümber
   `auto`-ks. `overflow-y: auto` tegi seetõttu sõnumialast ja jalusest RÕHTSA
   kerimiskasti, ilma et keegi oleks `overflow-x`-i kunagi kirjutanud. Piisas
   ühest sõnast, mis reale ei mahu (e-posti aadress, pikk link, kitsas iPhone),
   ja vestlus hakkas küljetsi liikuma.

   ⚠ `hidden`, MITTE `clip`: `clip` keelab ka programmse kerimise ja
   js/chatwidget.js `_keriFookusNähtavale` kerib siin päris. */
.cw-body {
  overflow-x: hidden;
  overflow-y: auto;
  /* ⚠ KAHANEMISE JÄRJEKORD ON NUMBRIS `100`. Ruumipuuduses jagab flex
     kahanemise SISU SUURUSE järgi ja jalus on suurem kui sõnumiala — ilma
     kaaluta kahaneks just tema, ehk see, mida kandidaat parajasti kirjutab. */
  flex: 1 100 120px; min-height: 0;
  padding: 8px 20px 20px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--chat-bg);
}
.cw-body:empty { display: none; }

/* Olekus C on mullide vahe tihedam kui vormi plokkide vahe. */
.cw-panel.cw-thread .cw-body { gap: 10px; padding-bottom: 16px; }

.cw-sec-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--chat-muted);
}

/* ── KIIRKÜSIMUSED ─────────────────────────────────────────────────────────
   ⚠ PILL ON <button>, MITTE <div>. Klaviatuuriga jõuab temani ainult nii ja
   `aria-pressed` on olemas ainult nupul.

   ⚠ `height: auto` JA `max-width: 100%`: pikk küsimus peab MURDUMA pilli
   sees, mitte üle ääre jooksma. Fikseeritud kõrgusega pill lõikaks teise rea
   ära ja `min-height` üksi ei luba tal kasvada. */
.cw-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-chip {
  flex: none; max-width: 100%;
  min-height: 36px; height: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-r-pill);
  background: var(--chat-surface);
  color: var(--chat-accent);
  font: inherit; font-size: 13px; font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background .15s, border-color .15s;
}
.cw-chip:hover { border-color: var(--chat-accent); background: var(--chat-accent-tint-2); }
.cw-chip[aria-pressed="true"] {
  background: var(--chat-accent-tint);
  border-color: var(--chat-accent);
  color: color-mix(in srgb, var(--chat-accent) 82%, #000);
}
/* Linnuke tuleb ainult valitud pillile; JS lisab ikooni, CSS peidab ta muidu. */
.cw-chip i { font-size: 14px; display: none; }
.cw-chip[aria-pressed="true"] i { display: inline-block; }

/* ── VORM ──────────────────────────────────────────────────────────────────
   ⚠ `overflow-x` SAMAL PÕHJUSEL MIS `.cw-body`-l. Jaluses seisavad e-posti
   väli ja rida „Küsid nimega … · aadress@näide.ee", mille aadressiosas ei ole
   ühtegi murdekohta. */
.cw-foot {
  display: flex; flex-direction: column; gap: 14px;
  overflow-x: hidden;
  /* `min-height: 0` — ilma selleta on flex-lapse alampiir tema sisu kõrgus ja
     ülejääk lõigatakse `.cw-panel { overflow: hidden }` poolt lihtsalt ära,
     ilma kerimisribata. `overflow-y: auto` annab brauserile koha, kuhu
     fokuseeritud väli kerida. */
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 20px 20px;
  background: var(--chat-bg);
}
/* ⚠ OLEKUS A/B KASVAB JALUS, MITTE SÕNUMIALA. Sisu (kiirküsimused, kast, nupp)
   elab tervenisti jaluses ja sõnumiala on tühi — `flex: 1` annab jalusele kogu
   vaba kõrguse, ilma milleta ei saa mobiil teda `justify-content: flex-end`-iga
   pöidla juurde lükata. */
.cw-panel:not(.cw-thread) .cw-foot { flex: 1; padding-top: 8px; }

.cw-quick-wrap { display: flex; flex-direction: column; gap: 8px; }

/* Olekus C on jalus valge riba sõnumiala all, oma joonega. */
.cw-panel.cw-thread .cw-foot {
  padding: 10px 16px;
  background: var(--chat-surface);
  border-top: 1px solid var(--chat-line-soft);
}

.cw-form { display: flex; flex-direction: column; gap: 12px; }
/* ⚠ SILT JA TÄRN ÜHES ÜMBRISES, MITTE KAKS FLEX-LAST. `.cw-lbl` on
   `flex-direction: column` ja paljas tekstisõlm („Nimi ") on SAMA MOODI
   flex-laps nagu `<span class="cw-req">` — ilma ümbriseta kukkus tärn omaette
   reale, sildi alla, 6px vahega. Nägi välja nagu tühi punane rida ja maksis
   rea kõrgust just sellel ekraanil, kus kõrgust ei ole (telefon + klaviatuur,
   vt ploki „KIIRKÜSIMUSED PÖIDLA LÄHEDAL" päist). */
.cw-lbl-txt { display: flex; align-items: baseline; gap: 4px; }
.cw-lbl {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--chat-muted);
}
.cw-req { color: var(--chat-required); }
.cw-hint {
  font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--chat-muted);
}
/* ⚠ TÜHI VIHJE EI TOHI RUUMI VÕTTA, AGA PEAB DOM-I JÄÄMA. Nimeväljal ei ole
   vihjeteksti (võeti ära 09.10.2026), aga `[data-hint]` on koht, kuhu
   `_väliViga` veateate kirjutab — pesa ära võttes kaoks veateade ekraanilt.
   Ilma selle reeglita jätaks tühi span `.cw-lbl` 6px vahe endast maha ja
   väljade all seisaks seletamatu tühik. `display: none` võtab ta ka
   flex-lapsena arvestusest välja. */
.cw-hint:empty { display: none; }
/* Vigane väli: ääris ja abitekst SAMA värvi — vt ploki päise selgitust. */
.cw-lbl.is-bad .cw-in { border-color: var(--chat-required); }
.cw-lbl.is-bad .cw-hint { color: var(--chat-required); }

.cw-in {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-r-field);
  background: var(--chat-surface);
  color: var(--chat-text);
  font: inherit; font-size: 13.5px;
  box-shadow: var(--chat-shadow-field);
  transition: border-color .15s, box-shadow .15s;
}
.cw-in::placeholder { color: var(--chat-muted); }
.cw-ta { min-height: 92px; resize: none; }
/* Üherealine väli on pill, mitte kast. */
.cw-in-1 { min-height: 44px; padding: 0 16px; border-radius: var(--chat-r-field-1); }

/* ── SAATMISNUPP ───────────────────────────────────────────────────────────
   Silt vasakul, ring paremal. ⚠ `justify-content: space-between` JA
   `text-align: left` mõlemad: ainult esimene jätaks pika sildi keskele. */
.cw-send {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px;
  padding: 0 8px 0 18px;
  border: 0; border-radius: var(--chat-r-field-1);
  background: var(--chat-accent);
  color: var(--chat-fg);
  font: inherit; font-size: 14px; font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.cw-send:hover:not(:disabled)  { background: var(--chat-accent-hover); }
.cw-send:active:not(:disabled) { background: var(--chat-accent-press); }
.cw-send-ring {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--chat-accent-hover);
  display: flex; align-items: center; justify-content: center;
}
.cw-send-ring i { font-size: 16px; }
/* ⚠ `opacity .45` JA `disabled` MÕLEMAD. Ainult hägustatud nupp on endiselt
   vajutatav ja saadaks tühja küsimuse; ainult `disabled` ei ütle silmale, MIKS
   ta ei tööta. */
.cw-send:disabled { opacity: .45; cursor: default; }

/* ── IDENTITEEDIRIDA ──────────────────────────────────────────────────────
   ⚠ ÜKS RIDA, KOLME PUNKTIGA. Pikk aadress murraks muidu jaluse laiali ja
   pikk nimi lükkaks „Muuda" lingi välja. `min-width: 0` on siin see, mis
   `text-overflow`-il üldse töötada laseb. */
.cw-ident {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--chat-muted);
}
.cw-ident-txt {
  min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cw-ident-name { color: var(--chat-text); font-weight: 500; }
.cw-link {
  flex: none;
  border: 0; background: none; padding: 0;
  color: var(--chat-accent); font: inherit; font-size: 12px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* Valideerimis- ja saatmisteade. Vt ploki päist, miks ta on `--chat-required`. */
.cw-err { font-size: 12px; color: var(--chat-required); }

/* ── SULETUD OLEKU TEADE ──────────────────────────────────────────────────
   ⚠ TEKST ÜTLEB, MILLAL VASTUS TULEB, mitte „varsti". Kandidaat, kes ei tea,
   kas vastus tuleb kümne minuti või kolme päeva pärast, jääb lehte lahti
   hoidma või kirjutab uuesti. Aeg tuleb SERVERILT (`chat.opensAt`) — vt
   js/chatwidget.js päist, miks vidin teda ise ei arvuta. */
.cw-closed {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--chat-accent-tint);
  color: color-mix(in srgb, var(--chat-accent) 82%, #000);
  font-size: 12.5px; line-height: 1.45;
}
.cw-closed i { font-size: 16px; flex: none; margin-top: 1px; }

/* ── SÕNUMID ───────────────────────────────────────────────────────────────
   ⚠ SAATJA NURK ON 6px, TEISED 18px. Mull ilma suunata näeb välja nagu kaart,
   mitte nagu jutt — ja „kes ütles" peab olema näha ilma silti lugemata. */
.cw-day {
  align-self: center;
  font-family: var(--chat-mono);
  font-size: 11px;
  color: var(--chat-muted);
}
.cw-msg { display: flex; flex-direction: column; gap: 4px; max-width: 80%; }
.cw-visitor { align-self: flex-end; align-items: flex-end; }
.cw-msg-meta {
  font-family: var(--chat-mono);
  font-size: 11px;
  color: var(--chat-muted);
}
.cw-bubble {
  padding: 10px 14px;
  border-radius: var(--chat-r-bubble);
  background: var(--chat-surface);
  color: var(--chat-text);
  font-size: 13.5px; line-height: 1.45;
  box-shadow: var(--chat-shadow-them);
  border-bottom-left-radius: var(--chat-r-bubble-tail);
  /* ⚠ `anywhere`, MITTE `break-word`, ja vahe on kogu mõte: ainult `anywhere`
     kahandab ka elemendi MIN-CONTENT laiust. `break-word` murrab joonistamisel,
     aga jätab alammõõdu endiseks ja flex-lapsel ei lase seetõttu kahaneda. */
  overflow-wrap: anywhere;
}
.cw-visitor .cw-bubble {
  background: var(--chat-accent);
  color: var(--chat-fg);
  box-shadow: var(--chat-shadow-me);
  border-bottom-left-radius: var(--chat-r-bubble);
  border-bottom-right-radius: var(--chat-r-bubble-tail);
}

/* Automaatvastus: sama mull, aga sildiga. ⚠ SILT ON MULLI SEES, mitte kõrval —
   kandidaat peab enne lugemist teadma, et see ei ole inimese kirjutatud lause. */
.cw-ai-tag {
  /* ⚠ OMAETTE REAL, MITTE TEKSTI SEES. `inline-flex` üksi jättis sildi esimese
     lause ETTE, ühte ritta — ta luges siis nagu lause algus („Automaatvastus
     Jah, CE-kategooria on nõutud"), mitte nagu märgis. Spets ütleb „sees
     ÜLEVAL". `width: fit-content` hoiab tausta sildi laiune, mitte terve rea. */
  display: flex; width: fit-content;
  align-items: center; gap: 4px;
  margin-bottom: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--chat-accent-tint-2);
  color: var(--chat-accent);
  font-size: 11px; font-weight: 600;
}
.cw-ai-tag i { font-size: 12px; }

/* Üleandmine värbajale: keskel, neutraalne, ilma mulli suunata. */
.cw-sys {
  align-self: center; max-width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--chat-accent) 8%, var(--chat-line-soft));
  color: var(--chat-text-2);
  font-size: 12px;
}
.cw-sys i { font-size: 13px; flex: none; }

/* ── VESTLUSE SISESTUSRIDA ────────────────────────────────────────────────
   Üherealine pill: väli kasvab kuni 120px, nupp on ring tema sees. */
.cw-compose { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.cw-compose-pill {
  display: flex; align-items: flex-end; gap: 6px;
  flex: 1; min-width: 0;
  padding: 4px 4px 4px 14px;
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-r-field-1);
  background: var(--chat-surface);
  box-shadow: var(--chat-shadow-field);
}
.cw-compose-pill:focus-within { border-color: var(--chat-accent); box-shadow: var(--chat-focus); }
/* ⚠ `min-width: 0` ON KOHUSTUSLIK. `<textarea>` alammõõdu annab `cols`
   (vaikimisi 20 märki) ja `pointer: coarse` all on kiri 16px — see teeb
   ~185px, millest flex-lapsel ILMA selle reata kahaneda ei lasta. */
.cw-compose-pill .cw-in {
  flex: 1; min-width: 0;
  min-height: 36px; max-height: 120px;
  padding: 8px 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  resize: none;
}
.cw-compose-pill .cw-in:focus { box-shadow: none; }
.cw-send-round {
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--chat-accent);
  color: var(--chat-fg); font: inherit;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.cw-send-round i { font-size: 18px; }
.cw-send-round:hover:not(:disabled)  { background: var(--chat-accent-hover); }
.cw-send-round:active:not(:disabled) { background: var(--chat-accent-press); }
.cw-send-round:disabled { opacity: .45; cursor: default; }
.cw-compose .cw-err { flex: 1 0 100%; }

/* Kiirküsimused sisestusrea kohal: ÜKS rida, mis kerib küljetsi.
   ⚠ `flex-wrap: nowrap` ja `white-space: nowrap` mõlemad: esimene hoiab rea
   ühes reas, teine hoiab pilli enda murdumast. Siin on murdumine VALE — rida
   kerib ja kahe-realine pill lõhuks kerimiskõrguse. */
.cw-quick-row {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  margin-bottom: 8px;
  scrollbar-width: none;
}
.cw-quick-row::-webkit-scrollbar { display: none; }
.cw-quick-row .cw-chip {
  min-height: 0; padding: 6px 12px;
  font-size: 12px; white-space: nowrap; overflow-wrap: normal;
}

/* ── „KANDIDEERI" VASTUSE ALL ──────────────────────────────────────────────
   ⚠ EI OLE `.cw-send` KOOPIA: see nupp ei saada midagi, vaid viib lehel edasi,
   ja täidetud nupp sõnumivoo sees loeks „saada" nupuna. */
.cw-cta {
  align-self: flex-start;
  margin: 2px 0 4px;
  padding: 9px 14px;
  border: 1.5px solid var(--chat-accent); border-radius: var(--chat-r-pill);
  background: transparent;
  color: var(--chat-accent); font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.cw-cta:hover { background: var(--chat-accent-tint-2); }

/* „Küsimus läks teele" koos sellega, MILLAL vastus tuleb. */
.cw-note {
  font-size: 12px; color: var(--chat-text-2);
  background: var(--chat-accent-tint-2); border-radius: 12px;
  padding: 9px 12px; margin: 0;
}

/* Honeypot. ⚠ `display:none` EI SOBI: osa botte jätab peidetud välja täitmata
   just selle reegli järgi ja lõks jääks tühjaks. Väli on visuaalselt ära, aga
   DOM-is olemas — sama võte mis apply.html vormil.
   ⚠ `left: -9999px` on NEGATIIVNE meelega: LTR-suunas ei kasva sellest
   kerimisala, positiivne nihe tekitaks lehele rõhtsa keri. */
.cw-hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; opacity: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   KÄESEADME KUJU
   ══════════════════════════════════════════════════════════════════════════
   ⚠ PÄRING PEAB OLEMA TÄPSELT SAMA, MIS js/config.js `MOBILE_MQ`, ja seda
   võrdleb test/frontend/chatwidget.test.mjs otse stringiga. Kaks eri päringut
   tähendaksid, et `isMobileUI()` avab täisekraani, aga CSS annab talle kaardi
   kuju — või vastupidi, ilma ühegi veateateta.

   ⚠ SEE EI OLE `(hover:none) and (pointer:coarse)` ÜKSI. Paljas puutetingimus
   on tõene ka 1920px puutemonitoril ja tahvlirežiimi lülitatud sülearvutil,
   kus täisekraan katab kogu töölaua ilma ühegi põhjuseta. Seepärast on puuteharu
   `max-width:900px` taga ja teine haru katab iga kitsa akna, ka hiirega.

   ⚠ 44px SIHTMÄRGID JA 16px VÄLJAD SIIA EI TULE. Nemad sõltuvad SISESTUSVIISIST,
   mitte laiusest (telefon rõhtasendis on ~780px ja suumib täpselt samamoodi) —
   nad elavad `pointer: coarse` plokis faili lõpus. */
@media (hover:none) and (pointer:coarse) and (max-width:900px), (max-width:640px) {
  #chat-root { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--cw-kb, 0px)); }

  /* ⚠ MOBIILIS ON MULL AVATUD PANEELI AJAL PEIDUS. Paneel katab kogu ekraani
     ja päises on juba oma sulgemisnupp; nähtav mull tähendaks kahte sulgejat
     ning ta seisaks paneeli peal, kattes välju. */
  #chat-root.cw-open .cw-launch-wrap { display: none; }

  /* ── TÄISEKRAAN ──
     ⚠ KÕIK KOLM OLEKUT, mitte ainult vestlus. Kitsal ekraanil ei ole kaardi
     jaoks ruumi ka esimese küsimuse ega suletud teate puhul.

     ⚠ `width: auto` ON KOHUSTUSLIK, MITTE VAIKEVÄÄRTUS. Põhireegel ülalpool
     ütleb `width: min(380px, …)` ja meediapäring EI võta teda ära — ta tuleb
     siin nimeliselt üle kirjutada. Ilma selle reata jäi telefonis kehtima
     380px paneel, mis istus vasakus servas ja jättis paremale lahtist ekraani
     (mõõdetud WebKitis: 393px vaateaval `left: 0, right: 361`).
     ⚠ JA MITTE `width: 100%`: koos `inset`-iga on see ÜLEMÄÄRATUD ja laiuseks
     jääks 100% ESIALGSEST sisaldajast, mis iOS-il on PAIGUTUSE vaateava —
     näpuga suumides visuaalsest laiem. */
  .cw-panel {
    /* ⚠ `bottom: var(--cw-kb)` JA `height: var(--cw-vh)` MÕLEMAD, mitte
       `inset: 0`. `100dvh` katab brauseririba, aga MITTE iOS-i klaviatuuri:
       paneel jääks `position:fixed` põhja, mis on klaviatuuri all, ja
       sisestusrida kaoks sõrme alt. Nihe ja kõrgus tulevad
       `js/chatwidget.js _syncViewport`-ist (visualViewport) — Androidil teeb
       sama töö `interactive-widget=resizes-content` apply.html-is, iOS seda ei
       toeta. Ilma klaviatuurita on `--cw-kb` 0 ja `--cw-vh` terve ekraan, ehk
       paneel ON täisekraan. */
    position: fixed; left: 0; right: 0; top: auto;
    bottom: var(--cw-kb, 0px);
    width: auto; max-width: 100%;
    height: min(100dvh, var(--cw-vh, 100dvh)); max-height: none;
    border-radius: 0;
    box-shadow: none;
    /* Klaviatuuri kõrgus tuleb js/chatwidget.js `_syncViewport`-ist; kodunupu
       riba `env()`-ist. `max()`, mitte pelk `env()`: riba puudumisel on inset 0. */
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  .cw-panel.cw-thread { height: min(100dvh, var(--cw-vh, 100dvh)); }

  .cw-backdrop { display: block; }
  .cw-backdrop[hidden] { display: none; }

  /* Päis on lehe ülaserv, mitte kaardi oma — joon annab talle piiri. */
  .cw-head {
    padding: 14px 12px 14px 16px;
    box-shadow: 0 1px 0 var(--chat-line-soft);
  }

  /* ── KIIRKÜSIMUSED PÖIDLA LÄHEDAL ──
     ⚠ Sõnumiala venib täisekraanil pikaks ja ülaservas olevad pillid jääksid
     sõrmest kaugele. Sisu tuleb lükata alla, `column` paneb pillid üksteise
     alla — rida kõrvuti teeks kitsal ekraanil kolmerealisi pille. Olekus C
     jääb keriv RIDA alles (ta on sisestusrea kohal, juba pöidla juures).

     ⚠⚠ ALLA LÜKKAB `margin-top: auto`, MITTE `justify-content: flex-end`, JA
     SEE ON PARANDUS, MITTE MAITSEKÜSIMUS. `.cw-foot` ON kerimiskonteiner
     (`overflow-y: auto` ülalpool) ja flexi `justify-content: flex-end` tekitab
     kerimiskonteineris KÄTTESAAMATU ÜLEJÄÄGI: kui sisu ei mahu, voolab ta välja
     ALGUSSERVAST ehk ÜLEVALT, seda ei arvestata `scrollHeight`-i ja `scrollTop`
     ei saa olla negatiivne — ülespoole kerida EI SAA. Väli lihtsalt kaob päise
     taha ja sinna ta jääbki.

     Nii juhtuski Androidi Chromes: klaviatuur kahandab
     `interactive-widget=resizes-content` tõttu paigutuse vaateava, jalusesse
     jääb ~300px ja vorm (kiirküsimused + küsimusekast + nimi + e-post + nupp)
     on ~340px. Mõõdetud Chromiumis 393px laiusel:
       flex-end:   nähtav 380px → kast top=71 (päis lõpeb 72) — JUBA päise taga;
                   nähtav 300px → kast top=-9, ekraanist väljas;
                   `scrollHeight == clientHeight` MÕLEMAL, ehk kerimist ei ole.
       auto-marg.: kast top=103 mõlemal, `scrollHeight` 340 > 308/228 — kerib.
     Auto-marginaal käitub teisiti, sest ta neelab AINULT positiivse vaba ruumi:
     ülejäägis arvutub ta nulliks, sisu algab ülalt ja konteiner kerib ise.
     ⚠ Seega: `.cw-foot` sisse EI TOHI panna `justify-content`-i, mis lükkab
     sisu lõppu. Sama lõks kehtib `align-items`-i ja `place-content`-i kohta. */
  .cw-panel:not(.cw-thread) .cw-foot { justify-content: flex-start; }
  .cw-panel:not(.cw-thread) .cw-foot > :first-child { margin-top: auto; }
  .cw-panel:not(.cw-thread) .cw-quick { flex-direction: column; flex-wrap: nowrap; }
  .cw-panel:not(.cw-thread) .cw-chip {
    width: 100%;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 15px;
  }

  /* Küsimusekast on kaks rida, mitte kolm: täisekraanil on kiirküsimused ja
     nupp tähtsamad kui neljas tühi rida. */
  .cw-ta { min-height: 68px; }
  .cw-quick-row .cw-chip { width: auto; border-radius: var(--chat-r-pill); font-size: 12px; }
}

/* ── LIIKUMISE VÄHENDAMINE ─────────────────────────────────────────────────
   ⚠ SEE PLOKK PUUDUS SIIT TERVENISTI, kuigi style.css-il ta on ja js/apply.js
   `_scrollToApply` küsib sama eelistust ise. Kandidaadi lehel on liikumist
   ROHKEM kui rakenduses: pulseeriv rõngas õnnestumise ikooni ümber, lõputult
   pöörlev spinner, ujuv vestlusnupp ja alt tõusev paneel. Vestibulaarhäirega
   inimese jaoks ei ole see ilustus — pöörlev element võib teha halvaks.

   ⚠ `animation: none` SPINNERILE OLEKS VALE. Peatatud spinner näeb välja nagu
   kinni jooksnud leht; tema ainus ülesanne on öelda „käib". Seepärast ta
   AEGLUSTUB (2,4 s), mitte ei kao — liikumine jääb märgatavaks, aga ei ole
   enam rahutu.

   ⚠ `scroll-behavior` on siin ka. Sujuv kerimine „Kandideeri" nupu peale käib
   `scrollIntoView`-st (js/apply.js küsib eelistust ise), aga CSS-i pealt
   tulnud kerimine läheks temast mööda. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .state-icon.ok::after { animation: none; opacity: 0; }
  .spinner { animation-duration: 2.4s; }

  /* Üleminekud jäävad alles, aga muutuvad silmapilkseks: `none` jätaks mõne
     brauseri `transitionend` kuulari ootele, lühike kestus mitte. */
  .cw-launcher, .cw-panel, .cw-backdrop, .cw-chip, .cw-cta,
  .job-item, .ap-submit, .cw-send, .cw-in, .more-jobs i {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ============================================================
   PUUTE-SISESTUS (pointer:coarse)
   ============================================================
   ⚠ SEE EI OLE LAIUS, VAID SISESTUSVIIS — täpselt sama plokk ja sama põhjus
   mis style.css faili lõpus.

   iOS Safari suumib lehe sisse, kui FOKUSEERITUD välja font-size on alla 16px,
   ega suuma kunagi tagasi. Sissesuumitud leht on rõhtselt lohistatav — ja
   just see oli 16.09.2026 kaebus: „kohe avamisel, portree, terve leht liigub
   paneeli all".

   ⚠ VESTLUSVIDIN FOKUSEERIB VÄLJA ISE (js/chatwidget.js togglePanel → esimene
   tühi `.cw-in`). Kasutaja ei pea midagi puudutama: paneel avaneb, väli saab
   fookuse, iOS suumib. Sellepärast on see rida vidina jaoks HÄDAVAJALIK, mitte
   viisakus.

   ⚠⚠ PLOKI ASUKOHT FAILIS ON OSA LAHENDUSEST — TA PEAB OLEMA VIIMANE.
   Meediapäring EI tõsta spetsiifilisust: `@media (hover: none) and (pointer: coarse) { .cw-in }`
   on 0-1-0 täpselt nagu `.cw-in` ja võidab AINULT järjekorra pealt. See plokk
   seisis varem faili keskel (rida ~571) ja `.cw-in { font: inherit;
   font-size: 13.5px }` tuli 450 rida hiljem — parandus oli kirjas, aga ta oli
   SURNUD. Mõõtsin WebKitis: fokuseeritud vestluskasti kiri oli 13,5px, kuigi
   `pointer: coarse` kehtis ja kandideerimisvormi väljad (defineeritud ENNE
   seda plokki) said oma 16px kätte. Kaks välja ühes failis, üks kaitstud ja
   teine mitte, ilma ühegi veateateta.

   `font: inherit` `.cw-in`-i juures teeb asja hullemaks: lühivorm lähtestab ka
   `font-size`, seega hilisem reegel kirjutab üle ka siis, kui ta ise suurust
   ei nimetaks.

   Miks mitte 560px sees: telefon rõhtsalt on ~780px ja suumib samamoodi.
   Miks mitte maximum-scale=1: see keelaks ka näpuga suumimise. */
@media (hover: none) and (pointer: coarse) {
  .af input,
  .af textarea,
  .af select,
  .cw-in { font-size: 16px; }

  /* ⚠ 44px ON ALAMPIIR, MITTE SOOVITUS, JA TA KUULUB SIIA, MITTE LAIUSE ALLA.
     Sõrme suurus ei muutu akna laiusega: telefon rõhtasendis on ~780px ja
     tabab täpselt sama halvasti. Sulgemisnupp oli 28×28 — tabatav ainult õnne
     peale, ja tema kõrval on saatmine, mille vale vajutamine saadab
     poolelioleva küsimuse ära. */
  .cw-x { width: 44px; height: 44px; }
  .cw-x i { font-size: 20px; }
  .cw-chip { min-height: 44px; }
  .cw-send { min-height: 52px; }
  .cw-send-round { width: 44px; height: 44px; }
  /* Link „Muuda" on tekst, mitte nupp — tema puutepind tuleb polsterdusest,
     et ta ei kasvataks identiteedirea kõrgust kahekordseks. */
  .cw-link { padding: 12px 0; }
  .cw-in-1 { min-height: 48px; }
}

/* ============================================================
   KARJÄÄRILEHT (kohad.html üldvaade + apply.html kuulutus)
   ============================================================
   ⚠ KOGU VÄÄRTUSTIK TULEB TOKENITEST. Komponendireeglis ei tohi olla heksi —
   sama nõue mis vestlusvidinal allpool ja samal põhjusel: kaks lehte jagavad
   seda faili ja kohapeal kirjutatud värv läheb teisest lahku vaikselt.

   ⚠ MIKS NEED EI VIITA `--chat-*` TOKENITELE, kuigi palett on sama.
   Vestluse tokenid elavad `#chat-root` PEAL, mitte `:root` peal, ja faili
   vestlusploki päis keelab otsesõnu nende `:root`-i toomise („järgmine
   kasutaja väljaspool vidinat teeb nad vaikselt kaheks eri asjaks").
   Skoobist väljas oleks `var(--chat-text)` lihtsalt määramata.
   Väärtused on seega teadlikult samad, aga omaette — ja seda paari tuleb
   käsitsi koos hoida.

   ⚠ AKTSENT ON SIIN FIKSEERITUD, MITTE PÄRITUD, ja see on tahtlik.
   `js/chatwidget.js initChat` kirjutab `--chat-accent` jooksu ajal serverist
   tulnud vestluse värviga üle ja `js/apply.js` seab malli `--tpl-accent`.
   Kumbagi lugedes värvuks kogu karjäärileht ümber siis, kui keegi muudab
   VESTLUSE või MALLI värvi — ja kontrastiarvud, mis on siin üle kontrollitud,
   kehtiksid ainult vaikeväärtuse juures.
   ============================================================ */

:root {
  --career-bg:            #f5f6fb;
  --career-surface:       #ffffff;
  --career-text:          #151644;
  --career-text-2:        #4a4d7a;
  --career-muted:         #5f6290;

  --career-accent:        #2e3192;
  --career-accent-hover:  #262880;
  --career-accent-press:  #1f216c;

  --career-tint:          #e3e4f5;
  --career-tint-2:        #f0f1fa;
  --career-line:          #e3e4f5;
  --career-line-2:        #d9dcec;
  --career-field:         #8f92c4;
  --career-required:      #a10f15;
  /* Kriipsjoone toon CV alal — spetsis anti ta reegli sees, aga siin ei tohi
     ühtegi heksi komponendis olla. */
  --career-dash:          #a3a6d8;

  /* ⚠ AINULT KOLM KOHTA (vt spetsi punkt 6): üldvaate kikri joon, kuulutuse
     sissejuhatuse vasak joon ja logo enda „S" (see tuleb pildiga kaasa).
     Punast nuppu, teksti ega äärist siin ei ole. Kohustuslik tärn kannab
     `--career-required`, mis on eraldi token ja eraldi tähendus. */
  --career-mark:          #ed1c24;

  /* Talendipanga kutse täidetud ilme. ⚠ JS KIRJUTAB MÕLEMA ÜLE
     (js/kohad.js applyCareer, career_settings.pool_bg/pool_fg); need
     vaikeväärtused hoiavad nupu tervena siis, kui `GET /public/career`
     ebaõnnestub — `_loadCareer` tagastab vaikselt null. ⚠ `var(--career-accent)`,
     MITTE uus heks: süsteemisinine ei tohi selles failis teist korda seista. */
  --career-pool-bg:       var(--career-accent);
  --career-pool-fg:       #fff;

  --career-hero-gradient: linear-gradient(135deg, #151644 0%, #1f216c 55%, #2e3192 100%);

  /* ⚠ ÜLEMINE LÄBIPAISTMATUS ON SPETSI OMAST (.25/.1) KÕRGEM — .32/.30 —
     ja see on spetsi enda juhis („Vajadusel tõsta kihi c ülaposa
     läbipaistmatust, mitte teksti värvi"). Arvutus: pildikiht on `opacity:.5`,
     seega valge foto annab gradiendi heledaimas punktis (#2e3192) pinna
     (150,152,200) ja valge tekst sellel on 2,8:1. Sama pind .25 katte all on
     4,2:1 — ENDISELT ALLA LÄVE. .32 annab 4,8:1. Lõpliku arvu mõõdan
     brauseris komposiidi pealt, mitte arvutusest. */
  /* ⚠ NELI PEATUST, MITTE KOLM. Kahe peatusega (.30 → läbipaistmatu taust)
     toimub kogu nähtav muutus viimasel paaril protsendil — alfa
     eelkorrutamise tõttu — ja hero alla tekkis terav horisontaalne õmblus.
     Vahepeatus 82% peal venitab ülemineku päriselt laiali. */
  /* ⚠ ÜHTLANE KATE, MITTE ÜLEMINEK — ja kate PEAB JÄÄMA.
     Varem hääbus see kiht hero alumises servas lehe taustavärviks. Kasutaja
     võttis ülemineku teadlikult maha: hero lõpeb nüüd puhta servaga.
     Tumendus ise EI OLE kosmeetika, vaid ainus asi, mis hoiab valge teksti
     fotol loetavana — pildikiht on `opacity:.5` ja valge foto annab gradiendi
     heledaimas punktis pinna, kus valge tekst on 2,8:1. Katteta kukuks
     lühikirjeldus mõõdetult 2,5:1 peale.
     ⚠ ÜHTLUS LAHENDAS KA TEISE MURE: üleminekuga sõltus kontrast sellest,
     KUS tekst hero's parasjagu seisis, ja lühem hero surus lühikirjelduse
     heledasse ossa. Ühtlasel kattel ei ole heledat osa. */
  --career-hero-scrim: rgba(21,22,68,.42);

  --career-shadow-card:       0 20px 50px rgba(21,22,68,.18);
  --career-shadow-card-hover: 0 24px 56px rgba(21,22,68,.26);

  --career-r-card:  20px;
  --career-r-field: 12px;
  --career-r-pill:  28px;
}

/* ── HERO: kolm kihti ─────────────────────────────────────────────────────
   Kihid on absoluutselt üksteise peal ja hero ise on `position:relative`,
   et päis ja sisu saaksid `z-index`-iga nende ette jääda. */
.career-hero {
  position: relative;
  width: 100%;
  background: var(--career-hero-gradient);
  display: flex;
  flex-direction: column;
}
.career-hero-img,
.career-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.career-hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Mobiilis kärbitakse keskelt — vasak serv annaks portreepildil tühja tausta. */
  object-position: center;
  opacity: .5;
}
/* ⚠ `pointer-events:none` EI OLE kosmeetika: kate katab kogu hero ja ilma
   selleta ei saa ükski tema all olev link ega nupp klõpsu kätte.
   ⚠ JA `background` PEAB SIIN OLEMA. Token üksi ei tee midagi — kate jäi
   ühes versioonis läbipaistvaks ja pildi tumendus tuli ainult `opacity:.5`-st.
   Paistis peaaegu õige, aga hele foto oleks valge teksti alla jätnud 2,8:1. */
.career-hero-scrim {
  background: var(--career-hero-scrim);
  pointer-events: none;
}

.career-hero > .career-top,
.career-hero > .career-hero-inner { position: relative; z-index: 1; }

/* ── PÄIS: läbipaistev, hero peal ─────────────────────────────────────── */
.career-top {
  height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(200,202,233,.18);
}
/* ⚠ LOGO ON ALATI SIIN JA TEKST TEDA EI ASENDA. Valge variant, sest päis
   seisab tumeda gradiendi peal. */
.career-logo { height: 26px; width: auto; display: block; }
/* ⚠ RING ON SIIT MEELEGA ÄRA VÕETUD (19.10.2026). Silt seisis ovaalses pillis
   (läbipaistev valge täidis + `--career-r-pill`) ja see kuju ei istunud päise
   rahuliku ilmega. Silt ise JÄÄB — ta ütleb, mis leht see on —, aga ta on nüüd
   tekst, mitte märgis. Taust ja raadius ei tohi tagasi tulla ilma uue
   põhjuseta.
   ⚠ KAKS EELVAADET PEAVAD SAMA KUJU KANDMA: `style.css` `.vt-pv-badge`
   (kuulutuse mall) ja `.cp-pv-badge` (karjäärilehe seaded). Ringiga eelvaade
   näitaks kuju, mida kandidaat ei näe.
   ⚠ VALGE, MITTE `--career-tint`: server jõustab karjäärilehe päisel VALGE
   teksti kontrasti (src/settings.js heroContrast). Tumedam toon jääks sellest
   garantiist välja täpselt siis, kui admin valib lubatud piiri peal oleva
   paleti. Pealkiri `.career-h1` on samal põhjusel valge. */
.career-badge {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* ── HERO SISU ────────────────────────────────────────────────────────── */
/* ⚠ SIIN OLI `flex: 1` JA SEE OLI TÜHJA ALA PÕHJUS. Hero on flex-veerg; sisu
   venis `min-height`-ini välja ja alltekstist ploki lõpuni jäi kümneid
   piksleid tühja. Kõrgus tuleb nüüd sisust ja paddingust. */
.career-hero-inner {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Kikker: 18×3px punane joon + arv. Ainus punane üldvaates. */
.career-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #c8cae9;
}
.career-kicker::before {
  content: "";
  width: 18px; height: 3px;
  background: var(--career-mark);
  border-radius: 2px;
  flex: 0 0 auto;
}

/* ⚠ `clamp`, MITTE MURDEKOHT. Vahemikus 360–412px on kolm levinud telefoni ja
   üks fikseeritud suurus on neist ühe jaoks alati vale: pealkiri murdus kolmele
   reale ja ajas hero poole ekraani suuruseks. */
.career-h1 {
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
  margin-top: 16px;
}
.career-sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--career-tint);
  max-width: 560px;
  margin-top: 14px;
}

/* ── SISUALA ──────────────────────────────────────────────────────────── */
.career-main {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── FOOKUS ───────────────────────────────────────────────────────────── */
.career-hero a:focus-visible,
.career-main a:focus-visible,
.career-main button:focus-visible,
.career-main input:focus-visible,
.career-main textarea:focus-visible {
  outline: 2px solid var(--career-accent);
  outline-offset: 3px;
}
/* Hero peal on aktsent tumedal taustal loetamatu — seal valge. */
.career-hero a:focus-visible { outline-color: #fff; }

/* ── ÜLDVAADE: töökohakaardid ─────────────────────────────────────────── */
.career-jobs { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

/* ⚠ KLASSINIMI `jobs-city` JÄÄB. Teda lukustab test (linnarühmitus,
   test/frontend/kohad.test.mjs) ja ta on seal käitumise valvur, mitte
   kosmeetika — ümbernimetamine teeks testist tühja linnukese.

   Linnapealkiri oli väike hall tekst ja rühmad sulasid üheks nimekirjaks.
   Nüüd on ta tume pill hero sama tooniga: grupi algus on näha ühe pilguga.
   ⚠ `align-self: flex-start` ON VAJALIK — `.career-jobs` on flex-veerg ja
   ilma selleta veniks pill üle kogu laiuse, muutudes ribaks, mis kaartidega
   kaalult võistleb. */
.jobs-city {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: var(--career-text);
  color: #fff;
  border-radius: var(--career-r-pill);
  padding: 8px 16px;
  margin: 26px 0 10px;
}
.career-jobs .jobs-city:first-child { margin-top: 2px; }
.jc-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Eraldaja ja arv on vaiksemad: nad täpsustavad, aga ei konkureeri nimega.
   ⚠ Kontrast #151644 peal: eraldaja .55 = 4,6:1, arv .82 = 10,3:1. */
.jc-sep   { color: rgba(255,255,255,.55); font-size: 12px; }
.jc-count { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 500; }

/* Terve kaart on link — klõpsupind peab olema kogu ala, mitte sõna. */
.job-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 24px 24px 28px;
  background: var(--career-surface);
  border-radius: var(--career-r-card);
  box-shadow: var(--career-shadow-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
.job-item:hover { box-shadow: var(--career-shadow-card-hover); transform: translateY(-2px); }

.job-item h2 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--career-text); }

/* Siltide rida: ametikoht, asukoht, vahetus. */
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.job-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--career-r-pill);
  background: var(--career-tint-2);
  color: #191b58;
  font-size: 12px;
  font-weight: 500;
}
.job-tag i { font-size: 14px; }

.job-item-lead {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--career-text-2);
}

/* Parem veerg: palk ja tegevusnupp. */
.job-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
/* ⚠ KLASSINIMI `job-salary-chip` JÄÄB — teda lukustab palgakuju test. */
.job-salary-chip {
  font-size: 18px;
  font-weight: 700;
  color: var(--career-accent);
  white-space: nowrap;
}
.job-salary-unit { font-size: 13px; font-weight: 400; color: var(--career-muted); }

.job-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 6px 0 20px;
  border-radius: var(--career-r-pill);
  background: var(--career-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease;
}
.job-item:hover .job-item-cta { background: var(--career-accent-hover); }
.job-item:active .job-item-cta { background: var(--career-accent-press); }
.job-item-cta .cta-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--career-accent-hover);
  flex: 0 0 auto;
}
.job-item-cta .cta-ring i { font-size: 16px; }

/* ── ÜLDVAADE: „Ei leidnud sobivat kohta?" ────────────────────────────── */
#tp-section { margin: 28px 0 0; }
.career-panel {
  background: var(--career-surface);
  border: 1px solid var(--career-line-2);
  border-radius: var(--career-r-card);
  overflow: hidden;
}
.career-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.career-panel-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--career-tint);
  color: var(--career-accent);
  flex: 0 0 auto;
}
.career-panel-ring i { font-size: 19px; }
.career-panel-titles { flex: 1; min-width: 0; }
.career-panel-t { font-size: 15px; font-weight: 600; color: var(--career-text); }
.career-panel-s { font-size: 13px; color: var(--career-text-2); margin-top: 2px; }
.career-panel-chev { color: var(--career-muted); transition: transform .18s ease; flex: 0 0 auto; }
.career-panel-head[aria-expanded="true"] .career-panel-chev { transform: rotate(180deg); }
.career-panel-body { padding: 0 20px 20px; }

/* ── KUTSE TÄIDETUD ILME (career_settings.pool_look = 'solid') ──────────────
   Hele kaart jäi kaartidega ühte tooni ja nimekirja lõpus seetõttu märkamatuks,
   kuigi ta on ainus tee külastajale, kellele ükski koht ei sobi.

   ⚠ AINULT PÄIS VÄRVUB. `.career-panel-body` (väljad, nõusolekud, saatenupp)
   jääb valgeks: värviline vorm nõuaks iga välja kontrasti uuesti üle vaatamist,
   ja kokkupandud olekus ONGI päis see nupp, mida admin kujundab.

   ⚠ IGA TOON TULEB NENDEST KAHEST PROPERTYST. Kõvakodeeritud heks või
   `rgba(255,255,255,…)` siin tähendaks, et pööratud valik (hele taust, tume
   tekst) annab nähtamatu ringi — ja ükski veateade seda ei näitaks. Sama muster
   mis `--chat-accent-hover`-il selle faili alguses.

   ⚠ RINGI IKOON ON DEKORATIIVNE (sama info seisab kõrval tekstis), seega tema
   peal lävendit EI nõuta — mõõdetud paar on tekst ja taust. Siin ei ole
   puuduvat kontrolli, vaid teadlik piir. */
.career-panel.is-solid {
  /* Ääris oli heleda kaardi ainus eraldaja; täidetud pind eraldab ise. */
  border-color: transparent;
}
.career-panel.is-solid .career-panel-head {
  background: var(--career-pool-bg);
  color: var(--career-pool-fg);
  transition: background .15s ease;
}
.career-panel.is-solid .career-panel-head:hover {
  background: color-mix(in srgb, var(--career-pool-bg) 92%, #000);
}
.career-panel.is-solid .career-panel-head:active {
  background: color-mix(in srgb, var(--career-pool-bg) 86%, #000);
}
/* ⚠ KÕIK KOLM RIDA TÄIE TUGEVUSEGA: läbipaistvus annaks tuhmima rea, mille
   kontrast on mõõdetust madalam, ja lävend kehtiks ainult pealkirjale
   (vt js/career.js poolContrast). Hierarhia tuleb kirjasuurusest ja -kaalust. */
.career-panel.is-solid .career-panel-t,
.career-panel.is-solid .career-panel-s,
.career-panel.is-solid .career-panel-chev { color: var(--career-pool-fg); }
.career-panel.is-solid .career-panel-ring {
  background: color-mix(in srgb, var(--career-pool-fg) 16%, transparent);
  color: var(--career-pool-fg);
}

/* ── DETAILVAADE: hero sisu ───────────────────────────────────────────── */
.career-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--career-r-pill);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  transition: background .15s ease;
}
.career-back:hover { background: rgba(255,255,255,.2); }

/* Palga- ja klaaspillide rida pealkirja all. */
.career-hero-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.career-pill-salary,
.career-pill-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--career-r-pill);
}
.career-pill-salary {
  background: var(--career-surface);
  color: var(--career-accent);
  font-size: 16px;
  font-weight: 700;
}
.career-pill-glass {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 14px;
}
.career-hero-lead {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--career-tint);
  max-width: 620px;
}

/* ── DETAILVAADE: sisukaardid ─────────────────────────────────────────── */
.career-content { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; }

.career-card {
  background: var(--career-surface);
  border: 1px solid var(--career-line);
  border-radius: var(--career-r-card);
  padding: 28px;
}
/* Sissejuhatus kannab varju ja punast joont — tema on lehe esimene sisu. */
.career-intro {
  background: var(--career-surface);
  border-radius: var(--career-r-card);
  box-shadow: var(--career-shadow-card);
  border-left: 3px solid var(--career-mark);
  padding: 28px 28px 28px 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--career-text-2);
  /* ⚠ `overflow-wrap` ON SIIN MEELEGA. Tekst tuleb admini vabast väljast ja
     seal võib seista murdmatu sõna (URL, pikk liitsõna), mis kitsas vaates
     lükkaks ploki laiemaks. Uut kerimiskasti siia EI teki (`overflow` jääb
     `visible`), seega CLAUDE.md `overflow-x` reegel siia ei ulatu — aga
     mahtumine tuleb ikka lahendada ja komponendi enda reegel on õige koht.
     ⚠ SIIN SEISIS `white-space: pre-line` ja ta oli SURNUD KOOD:
     `formatRichText` mähib iga rea `<p>`/`<li>` sisse ega väljasta ühtegi
     reavahetust, mida `pre-line` saaks säilitada. Ta lubas lugejale
     reavahetuste tuge, mida ta ei andnud. */
  overflow-wrap: anywhere;
}
/* ⚠ TÜHI PLOKK PEAB KADUMA, MITTE SEISMA. `description` võib olla paljas
   reavahetus (vorm salvestas trimmimata) — siis on `seo.js` `if (row.description)`
   TÕENE, `formatRichText` annab tühja stringi, `fillEmpty` ei viska ja lehele
   jääb tühi 28px polsterdusega punase joonega kast. `formatRichText` päis
   annab selle otsuse kutsujale; siin ta tehakse. */
.career-intro:empty { display: none; }

/* ── KUULUTUSE PROOSA: formatRichText väljundi struktuur ───────────────── */
/* ⚠ SIIN EI OLNUD KUNI 21.10.2026 MITTE ÜHTEGI REEGLIT, kuigi `formatRichText`
   on kogu aeg `<p>` ja `<ul>` väljastanud. Koos selle faili esimese reaga
   (`*{margin:0;padding:0}`) tähendas see kahte nähtamatut viga: lõikude vahel
   ei olnud MINGIT vahet ja `<ul>` kaotas oma `padding-inline-start`, nii et
   täpid renderdusid sisukastist VÄLJA, punase äärejoone peale. Tootmises olid
   kõik kirjeldused seetõttu üks kokkukleebitud tekstiplokk ja värbajad
   kirjutasid punkte käsitsi `•` märgiga.
   ⚠ NEED VIIS ARVU ON PAARIS `style.css` `#vf-desc-pv` omadega (admini
   eelvaade) ja `scripts/check-integrity.js` keeldub, kui nad lahku lähevad.
   Eelvaade, mis valetab, on halvem kui eelvaate puudumine. */
#job-desc > :first-child { margin-top: 0; }
#job-desc > :last-child  { margin-bottom: 0; }
#job-desc p  { margin-bottom: 14px; }
#job-desc ul { padding-left: 22px; list-style: disc; margin-bottom: 14px; }
#job-desc ol { padding-left: 22px; list-style: decimal; margin-bottom: 14px; }
#job-desc li { margin-bottom: 6px; }
#job-desc h2 { margin: 22px 0 10px; font-size: 17px; font-weight: 600; color: var(--career-text); }
#job-desc strong { font-weight: 600; color: var(--career-text); }

.career-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.career-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--career-accent);
  margin-bottom: 16px;
}
.career-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.career-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--career-text-2); }
/* ⚠ RÕNGAS ON PÄRIS ELEMENT, MITTE `::before` + ikoonifondi koodipunkt.
   Pseudoelement nõuaks Tableri sisemise `font-family` nime kõvakoodis ja see
   nimi on CDN-i detail, mitte meie oma — versiooni vahetus kustutaks linnukese
   vaikselt, jättes tühja rõnga. */
.career-list-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--career-tint);
  color: var(--career-accent);
  font-size: 13px;
  margin-top: 1px;
}

/* ── DETAILVAADE: kandideerimisvorm ───────────────────────────────────── */
/* ⚠ KERIMISE ANKUR. Vestlusvidina „Kandideeri" nupp kutsub siin
   `scrollIntoView` (js/chatwidget.js) ja ilma varuta maandub vormi pealkiri
   täpselt akna ülaserva, ilma hingamisruumita. Varu oli varem `.ap-form-wrap`
   peal ja seletus rääkis sticky päisest — päis EI OLE enam sticky
   (karjäärilehe ümberkujundus), aga ankur ise on alles ja varu on endiselt
   õige. Valvab test/frontend/chatwidget.test.mjs. */
#ap-form-wrap { scroll-margin-top: 24px; }

.career-form { padding: 32px; }
.career-form-t { font-size: 24px; font-weight: 700; color: var(--career-text); }
.career-form-s { font-size: 14px; color: var(--career-text-2); margin-top: 6px; }

.career-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.career-f { display: flex; flex-direction: column; gap: 7px; }
.career-f-full { grid-column: 1 / -1; }
.career-f label { font-size: 13px; font-weight: 600; color: var(--career-text); }
.career-req { color: var(--career-required); }

.career-f input,
.career-f select,
.career-f textarea {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--career-field);
  border-radius: var(--career-r-field);
  background: var(--career-surface);
  color: var(--career-text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.career-f textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: none; }
.career-f input:focus,
.career-f select:focus,
.career-f textarea:focus {
  border-color: var(--career-accent);
  box-shadow: 0 0 0 3px var(--career-tint);
}
/* Vigane väli: ääris + abitekst selle all. Sama signaal kahes kohas. */
.career-f.is-bad input,
.career-f.is-bad select,
.career-f.is-bad textarea { border-color: var(--career-required); }
.career-opt { font-weight: 400; color: var(--career-muted); }

/* Failivälja brauserinupp ühtlustatud — muidu istub OS-i oma keset kaarti. */
.career-f input[type="file"] { padding: 10px 12px; height: auto; font-size: 13px; }
.career-f input[type="file"]::file-selector-button {
  border: 0;
  border-radius: 7px;
  background: var(--career-tint);
  color: var(--career-accent);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 12px;
  margin-right: 12px;
  cursor: pointer;
}
.career-help { font-size: 12px; color: var(--career-required); }

/* CV: kriipsjoonega ala, lohistamine või klõps. */
.career-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px;
  border: 1.5px dashed var(--career-dash);
  border-radius: var(--career-r-field);
  background: var(--career-bg);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.career-drop:hover,
.career-drop.is-over { border-color: var(--career-accent); background: var(--career-tint-2); }
.career-drop-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--career-tint);
  color: var(--career-accent);
}
.career-drop-t { font-size: 14px; font-weight: 500; color: var(--career-text); }
.career-drop-s { font-size: 12px; color: var(--career-muted); }
/* Valitud fail: nimi + eemaldamine. */
/* ⚠ `[hidden]` VAJAB SIIN OMA REEGLIT. `display:flex` võidab atribuudi
   `hidden` vaikereeglit (UA `display:none`), nii et JS-i `el.hidden = true`
   ei peitnud midagi — tühi failirida seisis vormis enne, kui keegi faili
   valinud oligi. Sama lõks on `.career-drop` peal vastupidi. */
.career-drop[hidden],
.career-file[hidden] { display: none; }

.career-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--career-line-2);
  border-radius: var(--career-r-field);
  background: var(--career-tint-2);
  font-size: 14px;
  color: var(--career-text);
}
.career-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.career-file-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: none; cursor: pointer;
  color: var(--career-muted); font-family: inherit;
}
.career-file-x:hover { background: var(--career-tint); color: var(--career-text); }

.career-consents { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.career-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.45; color: var(--career-text-2); cursor: pointer; }
.career-consent input {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
  accent-color: var(--career-accent);
  cursor: pointer;
}
.career-consent a { color: var(--career-accent); font-weight: 600; }

.career-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  margin-top: 24px;
  padding: 0 8px 0 24px;
  border: 0;
  border-radius: var(--career-r-pill);
  background: var(--career-accent);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.career-submit:hover:not(:disabled) { background: var(--career-accent-hover); }
.career-submit:active:not(:disabled) { background: var(--career-accent-press); }
.career-submit:disabled { opacity: .6; cursor: not-allowed; }
/* ⚠ ANKRUNA VAJAB TA SEDA ÜHT RIDA. Lõppenud kuulutuse teate nupp
   (#ap-closed-link) on `<a>`, mitte `<button>`: ta viib teisele lehele ja
   `<button onclick>` kaotaks keskklõpsu, uues sakis avamise ja lingi
   kopeerimise — kõik kolm on sellel nupul mõttekad. Allajoon tuleks
   brauseri vaikeväärtusest. */
a.career-submit { text-decoration: none; }
.career-submit-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--career-accent-hover);
  flex: 0 0 auto;
}
.career-submit-ring i { font-size: 18px; }

/* ── HERO KÕRGUSED ────────────────────────────────────────────────────── */
/* ⚠ ÜLDVAATEL EI OLE `min-height`-i JA SEE ON TAHTLIK. 400px lükkas kuulutused
   esimesest vaatest välja ja kasutaja ei saanud aru, et all on veel sisu.
   Kõrgus tuleb sisust + paddingust; nii kahaneb hero ka siis, kui pealkiri
   lüheneb.
   ⚠ Kuulutuse lehel `min-height` JÄÄB: seal on hero pilt ise sisu ja liiga
   madal plokk kärbiks fotost tähtsa osa ära. */
.career-hero--detail { min-height: 480px; }
.career-hero--list   .career-hero-inner { padding: 44px 32px 44px; }
.career-hero--detail .career-hero-inner { padding: 36px 32px 0; }

/* Sisualal on all ruumi, et vestlusmull nupu peale ei satuks. */
.career-main { padding-bottom: 72px; }

/* ── MOBIIL ───────────────────────────────────────────────────────────────
   ⚠ Murdekoht on 640px, sama mis ülal `.ap-grid`-il ja style.css-i
   „telefoni" piiril — kolm eri arvu kahe faili peale oli juba korra segadus. */
@media (max-width: 640px) {
  /* ⚠ KATE ON MOBIILIS TUGEVAM, JA SEE ON MÕÕDETUD, MITTE MAITSE. Hero on
     lühem (440 vs 560), aga tekst murdub rohkemale reale — lühikirjeldus
     satub seetõttu suhteliselt madalamale, kohta, kus laual kate juba
     heledaks läheb. Päris fotoga mõõtsin seal 3,69:1. Tume vöö ulatub siin
     76%-ni ja sama mõõtmine annab üle 6:1.
     ⚠ Parandus käib KATTE, MITTE TEKSTI VÄRVI kallal — nii nõuab spets ja
     nii jääb tekst ka gradiendi-only lehel samaks. */
  /* ⚠ MOBIILIL EI OLE ENAM OMA KATET JA SEE ON TAHTLIK. Üleminekuga vajas ta
     seda: tume vöö pidi ulatuma lühikirjelduseni, mis lühemas hero's satub
     suhteliselt madalamale. Ühtlane kate katab kogu hero korraga, nii et
     kõrgus ei mõjuta kontrasti enam kuidagi. */

  .career-top { height: 56px; padding: 0 16px; }
  .career-logo { height: 22px; }
  /* Pill peidetakse: 56px päises võtab ta logo kõrvalt liiga palju. */
  .career-badge { display: none; }

  /* ⚠ ÜLDVAATEL EI OLE TELEFONIS KA `min-height`-i. 300px võttis 740px
     ekraanist 41% ja esimesest kuulutusest paistis vaevu serv — kasutaja ei
     saanud aru, et all on veel midagi. Kuulutuse lehel jääb ta alles, sest
     seal on hero pilt ise sisu. */
  .career-hero--detail { min-height: 380px; }
  .career-hero--list   .career-hero-inner { padding: 22px 16px 24px; }
  .career-hero--detail .career-hero-inner { padding: 16px 16px 0; }

  /* Kuulutuse hero sisu tihedamalt — pealkiri, pillid ja lühikirjeldus
     mahuvad nii lühemasse plokki ilma kärpimata. */
  .career-h1 { margin-top: 12px; }
  .career-hero-pills { margin-top: 14px; gap: 8px; }
  .career-hero-lead { margin-top: 14px; }
  .career-sub { font-size: 15px; }
  .career-hero-lead { font-size: 16px; margin-top: 18px; }
  .career-pill-glass { height: 32px; font-size: 13px; padding: 0 14px; }

  .career-main { padding: 0 16px; }
  .career-content { margin-top: 40px; gap: 14px; }
  .career-cols { grid-template-columns: 1fr; gap: 14px; }
  .career-card { padding: 20px 18px; }
  .career-intro { padding: 20px 18px 20px 21px; font-size: 15px; }
  .career-list li { font-size: 15px; }

  /* Kaart: üks veerg, palk ja ümar noolenupp allservas eraldusjoone all. */
  .job-item { grid-template-columns: 1fr; gap: 0; padding: 20px; }
  .job-item-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--career-line);
  }
  .job-item-cta {
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;            /* silt kaob, jääb ainult nool */
  }
  .job-item-cta .cta-ring { width: 44px; height: 44px; background: none; }
  .job-item-cta .cta-ring i { font-size: 18px; }

  .career-form { padding: 20px 18px; }
  .career-grid { grid-template-columns: 1fr; }
  /* ⚠ 16px EI OLE MAITSE: iOS suumib fokuseeritud välja, mis on alla 16px, ja
     leht hüppab paigast. Väärtus kuulub siia, mitte inline-stiili — seda
     valvab test/frontend/mobile.test.mjs. */
  .career-f input,
  .career-f select,
  .career-f textarea { font-size: 16px; }
  .career-consent input { width: 20px; height: 20px; }

  /* Puutesihtmärgid ja ruum vestlusmulli jaoks. */
  .career-back { height: 44px; padding: 0 18px; }
  .career-panel-head { min-height: 64px; }
  .career-main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* Tühja oleku selgitus. Pealkiri on hero's, siia jääb ainult lause. */
.career-empty {
  font-size: 16px;
  line-height: 1.6;
  color: var(--career-text-2);
  max-width: 620px;
  margin-top: 8px;
}

/* ── ÜLDVAADE: TELEFON ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Kaardi polster oli 20px; 16px annab tekstile sama palju rida, aga toob
     järgmise kaardi serva esimesse vaatesse. */
  .job-item { padding: 16px; }
  .job-item h2 { font-size: 18px; }
  .job-tags { margin-top: 10px; }
  .job-item-lead { margin-top: 10px; }
  .job-item-side { margin-top: 14px; padding-top: 12px; }

  .career-jobs { margin-top: 16px; gap: 10px; }
  .jobs-city { margin: 20px 0 8px; padding: 7px 14px; }
  .career-jobs .jobs-city:first-child { margin-top: 0; }

  .career-sub { font-size: 15px; }
}

/* ── KERIMISE VIHJE ────────────────────────────────────────────────────────
   Peamine vihje on see, et järgmine kaart ulatub ekraani alt sisse — seda
   annab paigutus, mitte see reegel. Õrn hääbumine on tugi neile, kelle
   ekraan on nii madal, et järgmine kaart jääb napilt välja.
   ⚠ ILMUB AINULT SIIS, KUI ALL ON PÄRISELT SISU, ja kaob esimese kerimise
   järel — püsiv hääbumine lehe lõpus loeks katkise paigutusena. Klassi seab
   js/kohad.js, mitte CSS: CSS ei tea, kas leht kerib. */
.scroll-hint::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(180deg, rgba(245,246,251,0) 0%, var(--career-bg) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint::after { transition: opacity .25s ease; }
}