:root {
  color-scheme: light dark;

  /* Tumeroheline ja tumepruun. Roheline kannab tegevust (nupud, lingid,
     fookus), pruun kannab pinda (paber, kaardid, jooned) — nii ei võistle
     kaks tumedat tooni sama töö pärast. */
  --roheline: #1b4332;
  --roheline-hele: #2d6a4f;
  --pruun: #3f2d20;
  --pruun-hele: #6b5545;

  --ink: #241a12;
  --paper: #faf6f0;
  --ink-soft: color-mix(in srgb, var(--ink) 66%, transparent);
  --line: color-mix(in srgb, var(--pruun) 22%, transparent);
  --surface: color-mix(in srgb, var(--pruun) 6%, transparent);
  --surface-strong: color-mix(in srgb, var(--pruun) 11%, transparent);
  --accent: var(--roheline);
  --accent-ink: #fdfcfa;

  --radius: 0.5rem;
  --gap: 1rem;
  --laius: 60rem;

  /* Muster: peen diagonaaljoonte kiht paberi peal. Elab muutujas, sest teda
     kasutab nii body kui tühja oleku plokk. */
  --muster: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--pruun) 4%, transparent) 7px 8px
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --roheline: #74c69d;
    --roheline-hele: #95d5b2;
    --pruun: #d8c3ae;
    --pruun-hele: #b99e85;

    --ink: #ece4da;
    --paper: #17130f;
    --line: color-mix(in srgb, var(--pruun) 26%, transparent);
    --surface: color-mix(in srgb, var(--pruun) 7%, transparent);
    --surface-strong: color-mix(in srgb, var(--pruun) 12%, transparent);
    --accent: var(--roheline);
    --accent-ink: #10221a;
    --muster: repeating-linear-gradient(
      135deg,
      transparent 0 7px,
      color-mix(in srgb, var(--pruun) 5%, transparent) 7px 8px
    );
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* `hidden` peab võitma iga layout'i reegli allpool. Ilma selleta muudab
   näiteks .c9 display:flex peidetud honeypot'i nähtavaks ja päris kasutaja
   täidab selle ära — päring kaob vaikselt ära. */
[hidden] {
  display: none !important;
}

/* Lingid kannavad rohelist. Ilma selleta jääb brauseri sinine alles ja lööb
   kogu paleti katki — nupud on rohelised, lingid siniseks. */
a {
  color: var(--roheline);
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, var(--roheline) 40%, transparent);
  transition: text-decoration-color 0.15s ease;
}

a:hover {
  text-decoration-color: var(--roheline);
}

/* [c1] app shell / juurkonteiner */
.c1 {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  background-image: var(--muster);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
}

/* [c2] päis + navigatsioon. Mobiilis virn, laiemal ekraanil rida. */
.c2 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--paper);
  /* Kaks joont: peenike pruun ja selle all jäme roheline. Päis peab lõppema
     nähtavalt ka siis, kui sisu algab heleda kaardiga. */
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -4px 0 -3px var(--roheline);
}

/* Nimi ja üherealine positsioon on üks link, aga kaks rida. */
.c2 > a:first-child {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.c2 > a:first-child strong {
  color: var(--roheline);
  letter-spacing: 0.02em;
}

.c2 > a:first-child span {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.c2 nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* [c3] põhisisu */
.c3 {
  flex: 1;
  width: 100%;
  max-width: var(--laius);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* [c4] sektsioon — vertikaalne plokk */
.c4 + .c4 {
  margin-top: 3rem;
}

/* [c5] rida. Mobiilis üks veerg, ruumi tekkides mitu — ilma murdepunktita,
   nii et layout ei pea lehe laiust teadma. */
.c5 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap);
  align-items: start;
}

/* [c6] veerg */
.c6 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/* [c7] kaart */
.c7 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  /* Kaart on läbipaistmatu, et muster tema alt läbi ei paistaks — muidu
     muutub tekst loetamatuks. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--roheline);
  border-radius: var(--radius);
}

.c7 > :first-child {
  margin-top: 0;
}

.c7 > :last-child {
  margin-bottom: 0;
}

/* [c8] vormiplokk */
.c8 {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 34rem;
}

/* [c9] välja grupp: label + input + abitekst + viga */
.c9 {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.c9 input,
.c9 select,
.c9 textarea {
  font: inherit;
  width: 100%;
  padding: 0.5rem 0.65rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.c9 textarea {
  resize: vertical;
}

.c9 small {
  color: var(--ink-soft);
}

/* [c10] esmane nupp, [c11] teisene nupp. Mõlemad kehtivad nii <button> kui
   <a> peal, sest kumbki võib olla see element, mis semantiliselt sobib. */
.c10,
.c11 {
  font: inherit;
  display: inline-block;
  align-self: start;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.c10 {
  color: var(--accent-ink);
  background: var(--roheline);
  border-color: var(--roheline);
}

.c10:hover {
  background: var(--roheline-hele);
  border-color: var(--roheline-hele);
}

.c11 {
  color: var(--pruun);
  background: var(--paper);
  border-color: var(--pruun);
}

.c11:hover {
  color: var(--accent-ink);
  background: var(--pruun);
}

/* [c12] loend, [c13] loendi element */
.c12 {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

.c12:not(ol) {
  list-style: none;
}

.c13 {
  min-width: 0;
}

/* Nummerdatud sammud kannavad numbrit infona, seega need jäävad nähtavaks ja
   saavad kaardi kuju. */
ol.c12 {
  gap: var(--gap);
  counter-reset: samm;
}

ol.c12 > .c13 {
  padding: 1rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--pruun);
  border-radius: var(--radius);
}

ol.c12 dt {
  font-weight: 600;
}

ol.c12 dd {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
}

/* [c14] tabel */
.c14 {
  width: 100%;
  border-collapse: collapse;
}

.c14 th,
.c14 td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* [c15] staatusmärgend */
.c15 {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--pruun);
  border-radius: 999px;
  background: var(--surface);
  color: var(--pruun);
  font-size: 0.8rem;
}

/* [c16] jalus */
.c16 {
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  max-width: var(--laius);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.c16 p {
  margin: 0;
}

/* [c17] dialoog / drawer */
.c17 {
  width: min(38rem, calc(100vw - 2rem));
  padding: 1.25rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.c17::backdrop {
  background: rgb(0 0 0 / 45%);
}

/* [c18] laadimisindikaator. htmx paneb päringu ajaks .htmx-request külge;
   ilma selleta on element olemas, aga nähtamatu — ka ekraanilugejale, kuni
   tal on midagi öelda. */
.c18 {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.c18.htmx-request {
  opacity: 1;
  visibility: visible;
}

/* [c19] veateate plokk */
.c19 {
  padding: 0.75rem 1rem;
  border: 1px solid currentcolor;
  border-radius: var(--radius);
  color: #b3261e;
}

@media (prefers-color-scheme: dark) {
  .c19 {
    color: #f2b8b5;
  }
}

/* [c20] edenemisriba / sammunäidik */
.c20 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block: 1rem;
}

.c20 progress {
  flex: 1;
  max-width: 20rem;
  accent-color: var(--roheline);
}

/* [c21] külgpaneel (admin). Mobiilis ülemine riba, laiemal ekraanil veerg —
   selle vahetuse teeb container/media query allpool. */
.c21 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

/* [c22] tühja oleku plokk */
.c22 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-image: var(--muster);
  border: 1px dashed var(--pruun-hele);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

.c22 p {
  margin: 0;
}

/* Fookus peab olema nähtav igal pool, kus saab klõpsata või tabuleerida. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* Laiem ekraan: päis läheb reaks, admin külgpaneel veeruks. */
@media (min-width: 48rem) {
  .c2 {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .c21 {
    flex-direction: column;
    align-items: start;
    width: 14rem;
    min-height: 100dvh;
    border-bottom: 0;
    border-inline-end: 1px solid var(--line);
  }
}

/* ── Admin ────────────────────────────────────────────────────────────────
   Sama klassikaart, teine paigutus. Admin ei saa oma klasse juurde — ta
   kasutab c1...c22 ja lisab ainult selle, mis puudutab paigutust. */

.admin-paigutus {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  min-height: 100dvh;
}

.admin .c3 {
  max-width: none;
  padding: 1.5rem 1.25rem 3rem;
}

/* [c21] külgpaneel kannab admini oma tooni, et sisemist poolt ei aetaks
   avalikuga segamini. */
.c21 {
  background: var(--pruun);
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 20%, transparent);
}

.c21 a,
.c21 strong {
  color: var(--paper);
}

.c21 a {
  text-decoration-color: color-mix(in srgb, var(--paper) 45%, transparent);
}

.c21 a:hover {
  color: var(--roheline-hele);
}

/* Pipeline: viis veergu, mis mobiilis virna lähevad ja laual kõrvuti jäävad.
   Kitsam minmax kui üldisel [c5] real, sest veerge on viis, mitte kolm. */
.pipeline {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: start;
  gap: 0.75rem;
}

.pipeline .c6 {
  gap: 0.6rem;
}

.pipeline h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--roheline);
  font-size: 0.95rem;
}

/* Pipeline'i kaardid on tihedamad kui avaliku poole omad — neid vaadatakse
   korraga kahekümne kaupa, mitte ükshaaval. */
.pipeline .c7 {
  gap: 0.35rem;
  padding: 0.7rem 0.8rem;
  font-size: 0.9rem;
}

.pipeline .c7 h4 {
  margin: 0;
  font-size: 0.95rem;
}

.pipeline .c7 p {
  margin: 0;
  color: var(--ink-soft);
}

.pipeline .c7 .c5 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.pipeline .c10,
.pipeline .c11 {
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
}

.pipeline .c22 {
  padding: 0.9rem;
  font-size: 0.85rem;
}

@media (min-width: 48rem) {
  .admin-paigutus {
    flex-direction: row;
  }

  .admin-paigutus > .c3 {
    flex: 1;
    min-width: 0;
  }
}