*, *::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;
  /* ⚠ VESTLUSE ROHELINE EI TULE MALLIST. `--tpl-accent` seab js/apply.js:106
     kuulutuse malli aktsentvärvist ja täpselt sama token toidab
     kandideerimisnuppu (#ap-btn gradient) — vidin oli seetõttu iga malli peal
     kandideerimisnupuga SAMA värvi ja mobiilis pealegi sama kuju. Kaks
     ühesugust riba kohakuti, millest üks saadab kandideerimise ära ja teine
     avab vestluse.

     Kontrast valge tekstiga 5,84:1 (nõue 4,5:1). Heledam roheline langeb kohe
     alla nõude — #10916b annab juba 3,97:1.

     ⚠ SEE ON VARUVÄÄRTUS. Kehtiva tooni valib admin („Vestluse seaded",
     chat_settings.accent_color) ja js/chatwidget.js seab ta juurele
     `style.setProperty('--chat-green', …)`. Siia jääb ta selleks, et vidin
     oleks õiget värvi ka enne, kui JS on jõudnud jooksma — ja siis, kui
     seadete lugemine ebaõnnestus.
     ⚠ Lävendit ei kontrolli ükski skript: scripts/check-colors.mjs loeb
     tokeneid style.css-ist, mitte siit, ja kasutaja valitud väärtust ei ole
     paigalduse ajal veel olemas. Valve on serveris (src/settings.js
     contrastOnWhite), igal salvestusel. */
  --chat-green:   #0a7355;
  /* Teksti värv aktsendi PEAL (nupp, päis, „Saada", külastaja mull).
     ⚠ SAMA LUGU MIS `--chat-green`-IL: see on VARUVÄÄRTUS. Kehtiva tooni valib
     admin (chat_settings.text_color, migratsioon 042) ja js/chatwidget.js seab
     ta juurele. Valge oli siin kuni 14.09.2026 kõvakoodis kuues eri reeglis —
     just seepärast ei saanud heledat tausta üldse valida.
     ⚠ PAARI LOETAVUST OTSUSTAB SERVER (src/routes/chatsettings.js, kaks
     lävendit). Siin ei ole midagi, mis valet paari kinni püüaks. */
  --chat-fg:      #fff;

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

/* ── HEADER ── */
.ap-header {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.ap-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}
.ap-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand-blue-tint);
  color: var(--brand-blue);
  letter-spacing: .01em;
}
.ap-header.tpl-dark {
  background: rgba(21,22,68,.82);
  border-bottom-color: rgba(255,255,255,.08);
}
.ap-header.tpl-dark .ap-badge {
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* ── MAIN ── */
.ap-main {
  max-width: 680px;
  width: 100%;
  margin: 32px auto;
  padding: 0 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── JOB CARD ── */
.job-card {
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.job-card-hero { padding: 0; overflow: hidden; }
body.tpl-dark .job-card { box-shadow: var(--shadow-card-dark); }

/* ── HERO (mall: taustapilt / teema) ── */
.job-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 28px 26px;
  background-size: cover;
  background-position: center;
  background-color: #eef0fa;
}
/* Kui taustapilti pole, saab hero pehme brändigradiendi + vaikse "marsruudi" jooneviibutuse
   (Transmark on logistikaettevõte — sümboolne, mitte sõna-otseses mõttes veokipilt) */
.job-hero:not(.has-bg) {
  background-image:
    radial-gradient(420px 260px at 96% -14%, rgba(237,28,36,.10), transparent 62%),
    linear-gradient(135deg, #eef1fb 0%, #dfe3f7 100%);
}
.job-hero.tpl-dark:not(.has-bg) {
  background-image:
    radial-gradient(420px 260px at 96% -14%, rgba(237,28,36,.18), transparent 62%),
    linear-gradient(135deg, #23266e 0%, var(--brand-blue-d) 100%);
  background-color: var(--brand-blue-d);
}
.job-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cpath d='M-10,205 C 70,150 130,195 200,140 S 320,55 415,15' fill='none' stroke='white' stroke-width='2' stroke-dasharray='1 11' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .16;
  pointer-events: none;
}
.job-hero.has-bg::before { opacity: .22; }
.job-hero h1, .job-hero .job-meta, .job-hero .job-salary-badge,
.job-hero .job-lead { position: relative; z-index: 1; }

.job-hero.has-bg {
  background-image: linear-gradient(180deg, rgba(21,22,68,.20) 0%, rgba(21,22,68,.86) 100%), var(--hero-bg-url);
}
.job-hero.has-bg h1,
.job-hero.tpl-dark h1 { color: #fff; }
.job-hero.has-bg .job-meta,
.job-hero.tpl-dark .job-meta { color: rgba(255,255,255,.82); }
.job-hero.has-bg .job-lead,
.job-hero.tpl-dark .job-lead { color: rgba(255,255,255,.88); }

.job-hero h1 {
  font-size: 27px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
}
.job-meta span { display: flex; align-items: center; gap: 5px; }
.job-meta i { font-size: 14px; opacity: .85; }
.job-salary-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: var(--tpl-accent, var(--brand-blue));
  font-size: 16px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(15,23,42,.16);
}
.job-salary-badge i { font-size: 16px; }

/* Kuulutuse müügilause. Lihttekst — js/apply.js kirjutab selle textContent
   kaudu, mitte _formatRichText'i läbi (vt migratsioon 018). */
.job-lead {
  font-size: 15px;
  line-height: 1.55;
  color: #475569;
  margin-top: 16px;
  max-width: 60ch;
}
.job-lead:empty { display: none; margin: 0; }

.job-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.75;
  padding: 18px 28px 24px;
}
.job-desc:empty { display: none; padding: 0; }
.job-desc p { margin: 0 0 12px; }
.job-desc p:last-child { margin-bottom: 0; }
.job-desc ul { margin: 0 0 12px; padding-left: 20px; }
.job-desc ul:last-child { margin-bottom: 0; }
.job-desc li { margin-bottom: 4px; }
.job-desc strong { color: #1e293b; }
body.tpl-dark .job-desc strong { color: inherit; }

/* ── MIDA PAKUME ── */
.job-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  letter-spacing: -.005em;
}
.job-benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.job-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: #334155;
  line-height: 1.5;
}
.job-benefits-list li::before {
  content: '\ea5e'; /* ti-check */
  font-family: 'tabler-icons' !important;
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--brand-blue-tint);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── FORM ── */
.ap-form-wrap {
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 18px;
  padding: 26px 28px 28px;
  box-shadow: var(--shadow-card);

  /* ⚠ STICKY PÄISEGA ARVESTAMINE KÄIB SIIN, MITTE JS-i ARVUTUSES.
     `.ap-header` on `position:sticky; top:0` ja katab kerimise lõpus lehe
     ülemise servaga sama palju, kui ta ise kõrge on (≈ 61px laual: 14px
     polster + 32px logo; ≈ 57px mobiilis, kus polster on 12px). Vestluse
     „Kandideeri" nupp kutsub `scrollIntoView`-d ja ilma selle varuta maanduks
     vormi pealkiri täpselt päise ALLA — kasutaja näeks vormi, mille algus on
     kadunud, ilma ühegi veateateta. JS-i arvutatud nihe tähendaks sama arvu
     teist koopiat, mis läheb esimese polstri muudatuse peale lahku. */
  scroll-margin-top: 80px;
}
body.tpl-dark .ap-form-wrap { box-shadow: var(--shadow-card-dark); }
.ap-form-wrap h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 22px;
  letter-spacing: -.01em;
}
.ap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
.af { display: flex; flex-direction: column; gap: 6px; }
.af-full { grid-column: 1 / -1; }
.af label { font-size: 12px; font-weight: 600; color: #374151; letter-spacing: .01em; }
/* ⚠ „(valikuline)" on NÄHTAV SILT, mitte kohatäide. Tema toon oli #9ca3af ehk
   2,43:1 — sama number, mille all olev kommentaar juba välja arvutas, aga see
   arvutus muutis ainult kohatäite värvi ja jättis sildi enda puutumata. Sama
   #6b7280 mis kohatäitel: 4,83:1 valgel kaardil, 4,62:1 väljal. */
.opt { font-weight: 400; color: #6b7280; }

/* Eeltäidetud välja märgistus („Täidetud vestlusest"). Sama toon ja suurus,
   mis vidina `.cw-hint`-il — tegemist on sama asjaga lehe kahel poolel.

   ⚠ `display` DEKLAREERIMATA JÄTMINE ON TAHTLIK. Spani peidab `hidden`
   atribuut ja seda teeb brauseri oma reegel `[hidden]{display:none}`, mille
   IGA autori `display` üle kirjutab (0-1-0 vs 0-0-1). Täpselä see viga on
   selles failis juba korra olnud — vt `.cw-panel[hidden]` allpool ja teda
   valvavat testi. Kui sellele reeglile kunagi `display` lisada, PEAB kaasa
   tulema ka `.af-hint[hidden] { display: none }`. */
.af-hint { font-size: 11px; font-weight: 400; color: #64748b; }
.af-hint[hidden] { display: none; }
.af input,
.af textarea,
.af select {
  border: 1.5px solid #e2e5ea;
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  color: #1e293b;
  background: #f8fafc;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
  outline: none;
  width: 100%;
}
.af input:focus,
.af textarea:focus {
  border-color: var(--brand-blue);
  background: #fff;
  box-shadow: 0 0 0 4px var(--brand-blue-tint);
}
/* Kohatäide kannab siin JUHIST („Kirjuta siia oma eesnimi"), mitte äravisatavat
   näidet, seega peab ta loetav olema: brauseri vaikehall (≈#757575) annab
   taustal #f8fafc ainult 4,4:1, #6b7280 annab 4,62:1. Sama toon kannab nüüd
   ka nähtavat `.opt` silti (ülalpool) — tema vana #9ca3af oli 2,43:1. */
.af input::placeholder,
.af textarea::placeholder { color: #6b7280; opacity: 1; }

.af textarea { resize: vertical; min-height: 90px; }

/* Fail-input — ühtlustatud brändi stiiliga, mitte OS-i vaikenupp */
.af input[type="file"] {
  padding: 8px 10px;
  background: #f8fafc;
  cursor: pointer;
}
.af input[type="file"]::file-selector-button {
  border: none;
  border-radius: 7px;
  background: var(--brand-blue-tint);
  color: var(--brand-blue);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  margin-right: 10px;
  cursor: pointer;
  transition: background .15s;
}
.af input[type="file"]::file-selector-button:hover { background: var(--brand-blue-tint-strong); }

/* Consent */
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 18px;
  cursor: pointer;
  line-height: 1.5;
}
.consent-row input[type="checkbox"] {
  margin-top: 2px;
  width: 17px; height: 17px;
  accent-color: var(--brand-blue);
  flex-shrink: 0;
}
.consent-row a { color: var(--brand-blue); text-decoration: none; font-weight: 500; }
.consent-row a:hover { text-decoration: underline; }

/* Error */
.form-err {
  background: #fef2f2;
  border: 1px solid var(--brand-red);
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 12px;
  color: var(--brand-red);
  margin-bottom: 16px;
}

/* Esitusnupp.
   ⚠ KLASS, MITTE ID. Kuju oli seotud `#ap-btn`-iga ja teine avalik vorm
   (talendipanga `#tp-btn`) joonistus seetõttu brauseri vaikenupuna — ühtki
   veateadet, lihtsalt vale nupp. Uus vorm saab `.ap-submit` ja kuju tuleb
   kaasa; id jääb alles, sest JS otsib nuppu tema järgi. */
.ap-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--tpl-accent, var(--brand-blue)) 0%, var(--brand-blue-d) 130%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(46,49,146,.55);
  transition: transform .15s, box-shadow .15s, filter .15s;
  font-family: inherit;
}
.ap-submit:hover  { transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(46,49,146,.6); filter: brightness(1.05); }
.ap-submit:active { transform: translateY(0) scale(.99); }
.ap-submit:disabled { background: #9a9cc9; box-shadow: none; cursor: not-allowed; transform: 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); }

.jobs-intro { margin-bottom: 4px; }
.jobs-intro h1 {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.jobs-lead { color: #64748b; font-size: 14px; margin: 0; max-width: 46ch; }

/* Linnarühm. Päring järjestab linna järgi — pealkiri teeb selle nähtavaks,
   et Tallinna ja Tartu kohti ei peaks silmaga eraldama. */
.jobs-city {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.jobs-city::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(15,23,42,.08);
}

.job-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  margin-bottom: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.job-item:hover,
.job-item:focus-visible {
  transform: translateY(-1px);
  border-color: var(--brand-blue-tint-strong);
  box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 18px 34px -16px rgba(46,49,146,.34);
}
/* Fookusrõngas peab olema nähtav ka siis, kui hiirega midagi ei juhtu:
   terve kaart on üks link ja klaviatuuriga liigutakse just nende vahel. */
.job-item:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }

.job-item-main { flex: 1; min-width: 0; }
.job-item h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  letter-spacing: -.01em;
}
.job-item .job-meta { margin-bottom: 8px; }
.job-item-lead {
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
  margin: 0;
  /* Pikk kirjeldus ei tohi kaarti venitada — täispikkus on üksikvaates. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.job-salary-chip {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
  background: var(--brand-blue-tint);
  padding: 5px 11px;
  border-radius: 20px;
  white-space: nowrap;
}
.job-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
  white-space: nowrap;
}

/* Telefonis läheb palgakiip rea alla, mitte kõrvale: 320px laiuses ei mahu
   pealkiri ja kiip kõrvuti ilma pealkirja murdmata. */
@media (max-width: 560px) {
  .job-item { flex-direction: column; gap: 12px; }
  .job-item-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .jobs-intro h1 { font-size: 22px; }
}

/* 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; }

/* ============================================================
   VESTLUSVIDIN (js/chatwidget.js)
   ============================================================
   ⚠ Vidin ujub kuulutuse peal ja kuulutusel on KAKS teemat (malli hele/tume,
   body.tpl-dark). Ainult heledana kirjutatud paneel jääks tumedal kuulutusel
   loetamatuks — ja seda ei püüa ükski kontroll: scripts/check-colors.mjs
   loeb tokeneid style.css-ist, mitte siit.

   Paneel ise on MÕLEMAS teemas hele. See on tahtlik: vestlus on eraldi
   pind kuulutuse peal, mitte osa temast, ja hele kast tumedal taustal loeb
   paremini kui tume kast tumedal. Tumedas teemas muutub ainult see, mis
   paneelist VÄLJAPOOLE jääb — käivitusnupp ja varjud. */

/* ⚠ `align-items: flex-end` ON MOBIILI PÄRAST. Seal venib juur üle ekraani
   (paneel vajab seda), aga käivitusnupp ei tohi kaasa venida — üle laiuse riba
   oli täpselt see, mis kandideerimisnupuga segunes. */
/* ⚠ `--cw-kb` ON SIIN, MITTE AINULT TELEFONIPLOKIS. Rõhtne telefon on laiem kui
   560px ja saab seega „laua" paigutuse, aga klaviatuur on tal täpselt sama ja
   kattis paneeli alumise otsa. Toeta brauseris on muutuja määramata ja
   varuväärtus 0px jätab kõik endiseks. Muutuja tuleb js/chatwidget.js
   _syncViewport'ist. */
#chat-root {
  position: fixed; right: 20px; bottom: calc(20px + var(--cw-kb, 0px)); z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.cw-launcher {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border: 0; border-radius: 999px;
  background: var(--chat-green);
  color: var(--chat-fg);
  font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(15,23,42,.45);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.cw-launcher:hover  { background: color-mix(in srgb, var(--chat-green) 84%, #000); transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(15,23,42,.5); }
.cw-launcher i      { font-size: 16px; }

/* Punane täpp: vastus on tulnud, aga paneel on kokku pandud.
   ⚠ VÄRV EI TULE `--chat-green` PEALT. Märguanne peab nupust ERINEMA — sama
   toon nupu peal ei ole märguanne, vaid kaunistus. Punane on ainus värv, mis
   selles rakenduses tähendab „vaata siia" (style.css --rd).
   ⚠ `position: absolute` vajab nupul `relative`-i; ilma selleta hüppaks täpp
   lehe nurka ja seda ei annaks ükski test enne brauserit teada. */
.cw-launcher { position: relative; }
.cw-dot {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #e11d48;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.15);
}
body.tpl-dark .cw-dot { border-color: rgba(255,255,255,.9); }
/* ⚠ Tumedal mallil on tume roheline tumedal taustal ja nupu SERV kaob ära,
   kuigi tekst on tema sees loetav. Õhuke valge rõngas annab piiri tagasi;
   heledamaks värvimine viiks teksti kontrasti alla nõude. */
body.tpl-dark .cw-launcher {
  box-shadow: 0 8px 26px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.18);
}

/* ⚠ 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,
.cw-x:focus-visible,
.cw-send:focus-visible,
.cw-in:focus-visible { outline: 2px solid var(--chat-green); outline-offset: 2px; }

.cw-panel {
  width: min(380px, calc(100vw - 32px));
  /* Kolmas piir on nähtava ala kõrgus (klaviatuur maas) — sama põhjus, mis
     `#chat-root` bottom'il ülal. */
  max-height: min(560px, calc(100dvh - 40px), calc(var(--cw-vh, 100dvh) - 40px));
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 24px 48px -18px rgba(15,23,42,.4);
}
body.tpl-dark .cw-panel { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 28px 56px -18px rgba(0,0,0,.75); }

/* ⚠ 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 kahel moel ja tegi
   mobiilis vidina kasutuskõlbmatuks:

     1. `#chat-root` on `position:fixed; z-index:60` ehk ta LOOB
        VIRNASTUSKONTEKSTI. Tema lapsed ei pääse sealt välja ega puutu kunagi
        kokku `.ap-header`i ega `.privacy-overlay`ga — see suhe on juure enda
        z-indeksiga juba lahendatud. Võrdlus, mida see number teenindas, ei ole
        olemas.
     2. Konteksti SEES joonistatakse positiivse z-indeksiga element `z-index:
        auto` õdede PEALE. `.cw-panel` on mobiilis `position:fixed` ILMA
        z-indeksita, seega taustakiht kattis paneeli — kogu ekraani ulatuses,
        sest ta on `inset: 0`. Poolläbipaistva tausta tõttu paistis paneel läbi
        ja nägi välja lihtsalt tuhmim, aga IGA PUUDE TABAS TAUSTAKIHTI, mille
        kuular on `togglePanel(false)`. Paneel sulgus igast vajutusest.

   Järjekorra otsustab nüüd DOM: taustakiht on märgistuses paneelist EES
   (js/chatwidget.js initChat), seega paneel joonistub tema peale. */
.cw-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  display: none;
}
.cw-backdrop[hidden] { display: none; }

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

/* ⚠ AVATUD PANEELI AJAL EI TOHI NUPP PAISTA. Ta seisis varem paneeli KOHAL ja
   kattis kandideerimisvormi välju — täpselt see, mida kasutaja kaebas.
   `.cw-hide-launcher` on teine, sõltumatu põhjus: js/apply.js peidab nupu, kui
   kandideerimisvorm on vaateväljas. */
#chat-root.cw-open .cw-launcher,
#chat-root.cw-hide-launcher .cw-launcher { display: none; }

.cw-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  /* Roheline käib nupult ka siia. Roheline nupp, mis avab malli värvi paneeli,
     näeks välja nagu vale aken — vestlus on kuulutusest eraldi pind. */
  background: var(--chat-green);
  color: var(--chat-fg);
}
/* ⚠ `min-width: 0` EI OLE ÜLELIIGNE. Flex-lapse automaatne alammõõt on tema
   SISU alammõõt, mitte null — pikk ettevõtte nimi või vastaja silt hoiaks
   veergu laiali ja lükkaks sulgemisnupu ekraanist välja. Murdmine peab olema
   lubatud ka keset sõna: nimi võib olla ükskõik mis, sest ta tuleb seadetest. */
.cw-head > div { min-width: 0; }
.cw-title, .cw-status { overflow-wrap: anywhere; }

.cw-title  { font-weight: 700; font-size: 15px; }
/* ⚠ TEKSTIVÄRVI LÄBIPAISTEV TOON, MITTE FIKSEERITUD HALL. Hall satuks heleda
   aktsendi peal alla kontrastiläve. `color-mix` hoiab teda alati sama tooni
   sees, mille admin valis — ka siis, kui see on must. */
.cw-status { font-size: 12px; color: color-mix(in srgb, var(--chat-fg) 85%, transparent); margin-top: 2px; }
/* ⚠ SULGEMISNUPUL EI OLE PUHKEOLEKUS OMA TAUSTA — see on parandus, mitte
   väljajätmine. Siin seisis `--chat-fg` 16% tint ja ta ei andnud ühegi
   aktsendi peal piiri, mida näeks: punase aktsendi (#cc003d) peal on ta
   1,18:1, ehk ruut, mille ainus mõju oli, et „x" nurk paistis teist tooni
   punasena. WCAG 1.4.11 nõuab juhtelemendi piirilt 3:1 ja seda EI SAA
   läbipaistva tindiga lubada: tint liigub alati tausta poole.
   Kogu kontrasti kannab glüüf ise — tema värv on `--chat-fg`, mille loetavuse
   aktsendi peal on server juba kontrollinud (≥ 4,5:1), seega ta on nähtav iga
   lubatud paari korral (punasel 5,78:1). Taust ilmub hoveril, kus ta on seisu
   märk, mitte ainus nähtav osa. */
.cw-x {
  border: 0; background: transparent; color: var(--chat-fg);
  width: 28px; height: 28px; border-radius: 8px;
  cursor: pointer; display: grid; place-items: center; flex: none;
}
.cw-x:hover { background: color-mix(in srgb, var(--chat-fg) 22%, transparent); }
/* ⚠ FOOKUSRAAM EI TOHI OLLA AKTSENDIVÄRVI. See nupp ISE seisab aktsendi peal
   ja aktsent aktsendil on 1:1 — klaviatuuriga liikuja ei näeks, kus ta on.
   Ülal olev ühine `:focus-visible` reegel sobib teistele kolmele (nad on valgel
   taustal), siin läheb ta üle. */
.cw-x:focus-visible { outline-color: var(--chat-fg); }

/* ⚠ `min-height: 0` ON SEE, MIS HOIAB KIRJUTUSKASTI EKRAANIL. Flex-lapse
   automaatne alampiir on tema SISU kõrgus; `min-height: 120px` tegi sellest
   kõva põranda ja kui klaviatuur paneeli lühemaks lõi, ei mahtunud jalus enam
   ära — `.cw-panel { overflow: hidden }` lõikas ta lihtsalt maha ja kandidaat
   ei näinud, mida ta kirjutab. 120px jääb SOOVIKS (flex-basis), mitte
   nõudeks: ruumi olemasolul on ala täpselt sama kõrge kui enne. */
.cw-body {
  /* ⚠ `overflow-x` PEAB OLEMA KIRJAS, MITTE JÄETUD VAIKEVÄÄRTUSELE — ja see on
     terve selle ploki 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` all real allpool tegi seetõttu
     `.cw-body`-st RÕHTSA kerimiskasti, ilma et keegi oleks kunagi kirjutanud
     `overflow-x`-i. Piisas ühest sõnast, mis reale ei mahu (e-posti aadress,
     pikk link, kitsas iPhone), ja vestlus hakkas küljetsi liikuma — täpselt
     see, mida kasutaja 16.09.2026 kirjeldas.

     ⚠ `hidden`, MITTE `clip`: `clip` keelab ka programmse kerimise ja
     js/chatwidget.js `_keriFookusNähtavale` kerib siin päris. Püsttelg jääb
     `auto` peale, ainult rõhtne on kinni — paneelis ei ole kunagi midagi,
     mille juurde peaks küljetsi kerima. */
  overflow-x: hidden;
  /* ⚠ KAHANEMISE JÄRJEKORD ON SIIN 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.
     Suur kahanemistegur ütleb „võta minult, mitte temalt": sõnumiala kahaneb
     nullini ja alles siis, kui sellestki ei piisa, hakkab jalus ise kerima. */
  flex: 1 100 120px; min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: #f6f7fb;
}
.cw-body:empty { display: none; }

.cw-msg      { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.cw-visitor  { align-self: flex-end; align-items: flex-end; }
.cw-msg-who  { font-size: 11px; font-weight: 600; color: #64748b; }
.cw-msg-time { font-size: 10px; color: #94a3b8; }

.cw-bubble {
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;      /* pikk link ei tohi mulli laiaks venitada */
}
.cw-visitor .cw-bubble {
  background: var(--chat-green);
  border-color: transparent;
  color: var(--chat-fg);
}
/* Automaatvastus ja süsteemimärkus on nähtavalt teistsugused: kandidaat peab
   aru saama, et see ei ole inimese kirjutatud lause. */
.cw-ai .cw-bubble     { background: var(--brand-blue-tint); border-color: transparent; }
.cw-system .cw-bubble { background: transparent; border-style: dashed; color: #475569; font-style: italic; }

/* ⚠ JALUS ON PANEELI MÕTE — tema sees on küsimusekast ja „Saada". Ruumi jagades
   annab talle eesõiguse `.cw-body` suur kahanemistegur ülal; siin on kaks asja,
   mis hoiavad ta nähtavana ka siis, kui ta ÜKSI on nähtavast alast kõrgem
   (rõhtne telefon, avatud klaviatuur, küsimus + e-post korraga):

     `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` — ülejääk kerib jaluse SEES ja brauseril on koht, kuhu
                          fokuseeritud väli kerida. */
.cw-foot {
  /* ⚠ SAMA PÕHJUS, MIS `.cw-body`-l ülalpool: `overflow-y: auto` üksi teeb
     rõhtsast teljest `auto`. Siin on see veel tähtsam — jaluses seisavad
     e-posti väli ja rida „Küsid nimega … · aadress@näide.ee", mille
     aadressiosas ei ole ühtegi murdekohta. */
  overflow-x: hidden;
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px 16px; background: #fff; border-top: 1px solid #e2e8f0;
}
/* Sissejuhatav rida: „Vastame E–R 9–17, tavaliselt 15 min jooksul". Serveris
   koostatud (chathours.js chatInfoLine) — vabateksti välja, kuhu kutset
   korrata, ei ole enam olemas.
   ⚠ `:empty` peidab rea täielikult, muidu jätaks tühi <p> 10px augu vormi
   kohale. Sama võte, mis `.cw-body:empty`-l allpool. */
.cw-intro { font-size: 13px; color: #475569; margin-bottom: 10px; }
.cw-intro:empty { display: none; }
.cw-form  { display: flex; flex-direction: column; gap: 10px; }
.cw-lbl   { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #334155; }
.cw-hint  { font-weight: 400; font-size: 11px; color: #64748b; }

.cw-in {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cbd5e1; border-radius: 9px;
  font: inherit; font-size: 13.5px;
  color: #1e293b; background: #fff;
}
.cw-ta { resize: vertical; min-height: 40px; }

.cw-send {
  padding: 10px 14px;
  border: 0; border-radius: 9px;
  background: var(--chat-green);
  color: var(--chat-fg); font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer;
}
.cw-send:disabled { opacity: .6; cursor: default; }

/* Vastamise vorm on üherealine: kast + nupp kõrvuti. */
.cw-compose { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
/* ⚠ `min-width: 0` ON SIIN KOHUSTUSLIK. `<textarea>` alammõõdu annab
   `cols` atribuut (vaikimisi 20 märki) ja `pointer: coarse` all on kiri 16px —
   see teeb ~185px, millest flex-lapsel ILMA selle reata kahaneda ei lasta.
   Kitsal ekraanil (vana iPhone SE, rõhtne klaviatuur, pikem nupusilt) läks
   rida seetõttu laiemaks kui paneel. */
.cw-compose .cw-ta { flex: 1; min-width: 0; }
/* ⚠ VEATEADE ON KOLMAS FLEX-LAPS ja ilma selleta istub ta nupu KÕRVALE, ehk
   surub kasti veel kitsamaks just siis, kui midagi on juba valesti. Terve rea
   laiune alus viib ta kasti ALLA, kuhu ta kuulub. */
.cw-compose .cw-err { flex: 1 0 100%; }

.cw-err { font-size: 12px; color: var(--brand-red); }

/* ── KIIRVASTUSED ──
   Levinud küsimused vestlusmullidena SÕNUMIALAS (mitte vormi kohal).

   ⚠ MULL, MITTE KIIP. Kiipidena vormi kohal olid nad vormi osa — järjekordne
   väli, mis tuleb läbi vaadata. Kuju peab ütlema „see on jutuajamine": sama
   raadius ja sama vasak joondus, mis `.cw-bubble`-il.

   ⚠ ÜKSTEISE ALL, MITTE KÕRVUTI (`flex-direction: column`). Kõrvuti murduks
   pikk küsimus kitsal ekraanil nii, et nupu serv kaob poole sõna pealt.

   ⚠ Nupp TÄIDAB küsimusekasti, ei saada kohe — vt js/chatwidget.js
   quickRepliesHtml. Seetõttu EI OLE ta täidetud roheline: `.cw-send` kuju
   lubaks saatmist. */
.cw-quick { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cw-chip {
  /* 44px alampiir — sama, mis `.cw-x` sai: sõrmega tabatav ilma õnneta. */
  min-height: 44px;
  max-width: 88%;
  border: 1px solid var(--chat-green); border-radius: 12px;
  padding: 10px 13px;
  background: #fff; color: var(--chat-green);
  font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  /* Kiirvastuse teksti kirjutab admin — ühesõnaline URL mahub sinna sama
     hästi kui küsimus. */
  overflow-wrap: anywhere;
}
.cw-chip:hover { background: #f2f8f5; }
.cw-chip:focus-visible { outline: 2px solid var(--chat-green); outline-offset: 2px; }

/* Rida „Küsid nimega …" — kandidaat peab nägema, mida tema nimel saadetakse. */
/* ⚠ `anywhere`, MITTE `break-word`, JA SEE VAHE ON SIIN KOGU MÕTE. Ainult
   `anywhere` kahandab ka elemendi MIN-CONTENT laiust; `break-word` murrab
   joonistamisel, aga jätab alammõõdu endiseks ja flex-lapsel (see rida ON
   flex-kast) ei lase seetõttu kahaneda. Rida kannab e-posti aadressi, milles
   ei ole ühtegi tühikut — kitsal telefonil venitas ta jaluse laiaks ja pani
   paneeli küljetsi kerima. Sama valik ja sama põhjus, mis `.cw-bubble`-il. */
.cw-ident { font-size: 11.5px; color: #64748b; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
.cw-link {
  border: 0; background: none; padding: 0;
  color: var(--chat-green); font: inherit; font-size: 11.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* „Küsimus läks teele" koos sellega, MILLAL vastus tuleb. */
.cw-note {
  font-size: 12px; color: #475569;
  background: #eef2f7; border-radius: 10px;
  padding: 8px 11px; margin: 0;
}

/* „Kandideeri" vastuse all. ⚠ EI OLE `.cw-send` koopia: see nupp ei saada
   midagi, vaid viib lehel edasi, ja täidetud roheline nupp sõnumivoo sees
   loeks „saada" nupuna. Piirjoonega kuju kannab sedasama aktsenti
   (`--chat-green` tuleb serverilt, vt js/chatwidget.js initChat), ilma et
   vidina värv või kuju muutuks. */
.cw-cta {
  align-self: flex-start;
  margin: 2px 0 4px;
  padding: 8px 13px;
  border: 1.5px solid var(--chat-green); border-radius: 9px;
  background: transparent;
  color: var(--chat-green); font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
}
.cw-cta:hover { opacity: .78; }
.cw-cta:focus-visible { outline: 2px solid var(--chat-green); outline-offset: 2px; }

/* 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. */
.cw-hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; opacity: 0;
}

/* Telefonis võtab paneel kogu alaosa — 380px kast 360px ekraanil oleks kitsam
   kui klaviatuur ja jätaks sõnumid kahe sõna laiuseks. */
@media (max-width: 560px) {
  /* ⚠ JUUR EI MÕÕDA PANEELI — see comment ütles varem vastupidist. Paneel on
     allpool ise `position: fixed` ja tema laiuse annab vaateava, mitte see
     kast. `left`/`right`/`bottom` on siin AINULT nupu pärast: nupp jääb
     `align-items: flex-end` tõttu paremasse serva, 12px servast.
     Varem oli siin `.cw-launcher { width: 100% }` ja tulemus oli
     kandideerimisnupuga ühesuurune, ühevärviline riba tema kohal. */
  #chat-root { right: 12px; left: 12px; bottom: 12px; }

  /* ── BOTTOM SHEET ──
     ⚠ PANEEL ASTUB `#chat-root`-i VOOST VÄLJA, NUPP JÄÄB SISSE. Juur on
     `position:fixed` väike kast paremas allnurgas ja tema `align-items:
     flex-end` hoiab NUPPU seal, kus ta on. Paneel vajab tervet laiust ja
     servani ulatuvat põhja, mida flex-laps ei saa — seega on ta ise
     `position:fixed`. Mõlema reegli põhjus jääb sellega alles.

     ⚠ AINULT ÜLANURGAD ÜMARAD ja all servani välja. Hõljuv ümarate servadega
     kaart näitas servade tagant kandideerimisvormi ja tekitas müra — see oli
     üks neljast kaebusest. */
  .cw-panel {
    position: fixed;
    left: 0; right: 0; bottom: var(--cw-kb, 0px);
    /* ⚠ `width: auto` ON KOHUSTUSLIK, MITTE VAIKEVÄÄRTUS. Põhireegel ülalpool
       ütleb `width: min(380px, calc(100vw - 32px))` ja meediapäring EI võta
       teda ära — ta tuleb siin nimeliselt üle kirjutada. Ilma selle reata
       jäi telefonis kehtima 358px laiune paneel, mis istus vasakus servas ja
       jättis paremale 32px lahtist ekraani. Mõõdetud: 390px vaateaval
       `left: 0, right: 358`.

       ⚠ JA MITTE `width: 100%`: koos `left`+`right`-iga on see ÜLEMÄÄRATUD —
       brauser viskab `right`-i ära ja laiuseks jääb 100% ESIALGSEST
       sisaldajast, mis iOS-il on PAIGUTUSE vaateava, näpuga suumides
       visuaalsest laiem. `auto` arvutab laiuse KAHEST NIHKEST ja järgib alati
       seda kasti, milles paneel päriselt seisab. */
    width: auto;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    /* ⚠ KAKS 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. */
    max-height: min(92dvh, var(--cw-vh, 92dvh));
    /* Kodunupu riba. `max()`, mitte pelk `env()`: riba puudumisel on inset 0 ja
       paneeli sisu jääks vastu ekraani serva. */
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

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

  .cw-grip {
    display: block;
    width: 36px; height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: rgba(15,23,42,.18);
    flex: none;
  }

  /* ⚠ 44px ON ALAMPIIR, MITTE SOOVITUS. Sulgemisnupp oli 28×28 — sõrmega
     tabatav ainult õnne peale, ja tema kõrval on „Saada", mille vale
     vajutamine saadab poolelioleva küsimuse ära. */
  .cw-x { width: 44px; height: 44px; }
  .cw-x i { font-size: 20px; }

  /* Päis on nüüd lehe ülaserv, mitte kaardi oma — natuke rohkem õhku. */
  .cw-head { padding: 10px 16px 14px; }
}

/* ── 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 {
    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 (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 (pointer: coarse) {
  .af input,
  .af textarea,
  .af select,
  .cw-in { font-size: 16px; }
}

/* ── Talendipanga vorm (kohad.html tühi olek) ────────────────────────────
   Vorm elab `#state-empty` sees ja taaskasutab `.ap-form-wrap` / `.ap-grid` /
   `.af` reegleid täielikult — siin on ainult see, mis neist puudu jääb:
   pealkirjaploki ja vormi vahe, ning pealkirjaplokk ise ilma `.state-wrap`
   täiskõrguseta (muidu lükkaks ta vormi ekraanilt välja). */
.tp-head { flex: 0 0 auto; padding: 40px 20px 4px; }
.tp-form { margin: 0 auto 40px; max-width: 640px; }

/* Kutseriba `<summary>`. Kuju tuleb `.job-item`-ilt, et ta loeks nimekirja
   viimase reana, mitte võõrkehana lehe lõpus.
   ⚠ `list-style:none` JA webkiti oma reegel mõlemad: ilma nendeta joonistab
   brauser kaardi sisse oma kolmnurga.
   ⚠ Tumedat varianti siia EI TULE — `body.tpl-dark` seab ainult js/apply.js
   üksiku kuulutuse malli järgi ja kohad.html ei sea seda kunagi. Tume reegel
   oleks surnud kood, mis näeb välja nagu kate. */
#tp-section { max-width: 640px; margin: 0 auto 40px; }
.tp-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  list-style: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tp-invite::-webkit-details-marker { display: none; }
.tp-invite:hover {
  border-color: var(--brand-blue-tint-strong);
  box-shadow: 0 10px 24px -12px rgba(46,49,146,.45);
  transform: translateY(-1px);
}
.tp-invite-caret { font-size: 18px; color: var(--brand-blue); transition: transform .15s ease; }
#tp-details[open] .tp-invite-caret { transform: rotate(180deg); }
/* Lahti olles on riba ja vorm ÜKS kaart, mitte kaks kohakuti. Ilma
   `border-bottom`/`border-top` eemalduseta jookseks nende vahel topeltjoon. */
#tp-details[open] .tp-invite {
  border-radius: 16px 16px 0 0;
  border-bottom: none;
  box-shadow: none;
  transform: none;
}
#tp-details[open] .tp-form {
  margin: 0;
  border-radius: 0 0 16px 16px;
  border-top: none;
}