/*
 * public/konstruktors2/stils.css
 * =============================================================================
 * JAUNAIS DIZAINS mājas konstruktoram (/konstruktors2), dizaina brīfs v2, 4.
 *
 * Kas te NAV: neviena dzinēja rinda. Lapa lieto to pašu
 * /konstruktors-izstrade-9427.js, to pašu marķējumu un tos pašus id. Mainās
 * TIKAI izkārtojums un stils, un tie visi dzīvo šajā failā (izņemot progresa
 * tekstu un kopsavilkumus, ko rēķina /konstruktors2/palidzi.js - tie ir
 * atvasināti dati, ne stils).
 *
 * Kāpēc tas tā: dzinējs ir 13 000 rindu bez eksportiem, kas pats sevi palaiž
 * pie ielādes un lasa 54 elementus pēc id. Otra lapa uz tā paša dzinēja var
 * pastāvēt tikai tā, ka marķējums paliek tas pats.
 *
 * Brīfa v2 4. sadaļa, punkts pa punktam:
 *  - septiņu segmentu progresa josla augšā panelī, zem tās "3. solis no 7 ·
 *    Forma un izmēri"; nekādu ciparu aplīšos;
 *  - akordeona virsrakstā ķeksis izdarītajiem un vienas rindas kopsavilkums;
 *  - opciju izvēle radio kartītēs divās kolonnās ar siluetu, ne pill-čipos;
 *  - krāsas: apaļi paraugi ar nosaukumu zem tiem;
 *  - cena fiksēta paneļa apakšā, necaurspīdīga; ritinās TIKAI vidus;
 *  - panelis peld ar 16 px atkāpi, augstums calc(100% - 32px), 3D redzams
 *    pa kreisi un zem tā.
 *
 * Krāsas nāk no /alpine-ui.css (--ui-*). Šeit tiek rakstīts izkārtojums,
 * ēnas un formas, nevis zīmola krāsas.
 * =============================================================================
 */

/* Šīs lapas pašas mainīgie. Zīmola krāsas nāk no alpine-ui.css un te netiek
   pārrakstītas; te ir tikai izmēri, kas atkārtojas izkārtojumā. */
:root {
  color-scheme: light;
  --k2-josla-h: 56px;      /* augšējā zīmola josla */
  --k2-kanva-h: clamp(320px, 46vh, 460px);  /* 3D augstums telefonā */
  --k2-panelis-w: 400px;   /* soļu panelis datorā */
  --k2-mala: 16px;         /* peldošā paneļa atkāpe no malas (brīfs v2, 4.) */
  --k2-stikls: rgba(255, 255, 255, .88);
  --k2-stikls-robeza: rgba(255, 255, 255, .7);
  --k2-ena-augsup: 0 -8px 22px -14px rgba(8, 20, 32, .40);
  --k2-tinte-08: rgba(8, 49, 73, .08);
}
/* Iegultā režīmā (iframe Mozello lapā) galveni rāda pati Mozello lapa, un
   alpine-ui.css to te paslēpj. Tad arī lipīgo elementu nobīde ir nulle -
   citādi telefonā zem galvenes paliktu 56 px tukšuma, kur galvenes nav. */
html.iegults { --k2-josla-h: 0px; }

/* ── Karkass ───────────────────────────────────────────────────────────── */

html, body { height: 100%; }
body {
  margin: 0; background: var(--ui-lapa); color: var(--ui-tinte);
  font-family: var(--ui-fonts); font-size: var(--ui-t-m); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}

.lappuse { min-height: 100dvh; display: flex; flex-direction: column; }

/* Augšējā josla: zīmols pa kreisi, viena poga pa labi. Tā ir plāna ar nolūku.
   04.09. atradums vecajā lapā: galvene aizņēma 270 px no 844 px telefona
   ekrāna, un māja sākās zem locījuma. */
header {
  position: sticky; top: 0; z-index: 30;
  height: var(--k2-josla-h); display: flex; align-items: center; gap: var(--ui-a3);
  padding: 0 var(--ui-a4); margin: 0;
  background: var(--ui-karte); border-bottom: 1px solid var(--ui-robeza);
}
/* Zīmols ir tas pats attēls, kas alpinesip.lv galvenē (Gustavs 09.09.2026).
   Fails ir balts zīmējums uz navy plāksnes, ne navy tinte uz caurspīdīga,
   tāpēc tas te stāv tāds, kāds ir, bez filtriem: uz baltas galvenes tā ir
   navy plāksnīte ar balto zīmi, tieši kā mājaslapā.
   Teksta noformējums paliek alt tekstam, ja attēls neielādējas. */
.zime {
  display: flex; align-items: center; flex: none;
  font-weight: 700; letter-spacing: .18em; font-size: var(--ui-t-b);
  color: var(--ui-navy); text-transform: uppercase;
}
.zime img { display: block; height: 28px; width: auto; border-radius: var(--ui-r-s); }
.badge {
  font-size: var(--ui-t-xs); font-weight: 600; letter-spacing: .1em; color: var(--ui-kluss);
  border: 1px solid var(--ui-robeza-2); border-radius: var(--ui-r-s); padding: 2px 10px;
}
header h1 { font-size: var(--ui-t-b); font-weight: 600; color: var(--ui-tinte); margin: 0; }
#atiestatit { margin-left: auto; }

/* Ievada rindkopa te nav vajadzīga: to pašu pasaka pirmais solis, un uz
   telefona tā tikai atstumj māju zem locījuma. Ekrāna lasītājam tā paliek. */
.ievads {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Skats ─────────────────────────────────────────────────────────────── */

.rezgis { flex: 1; position: relative; display: block; margin: 0; }

.lapa {
  background: linear-gradient(#DCEAF4 0%, #EAF1F0 58%, #E4EBE2 100%);
  position: relative; overflow: hidden; border: 0; border-radius: 0; padding: 0;
}
#skices-vieta { position: relative; height: 100%; }
#skices-vieta canvas {
  display: block; width: 100% !important; height: 100% !important;
  border-radius: 0; touch-action: none; cursor: grab;
}
#skices-vieta canvas:active { cursor: grabbing; }
/* Vinjete: viegla stūru aptumšošana, kas ved aci uz centru. Ar CSS tas maksā
   nulli; ar EffectComposer tas maksātu MSAA un bilde kļūtu sliktāka. */
#skices-vieta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(8, 10, 14, .10) 100%);
}

/* Kanvas iekšējās zīmes. Tās ir mazas un stāv stūros, lai neaizsegtu māju. */
#skices-vieta .stamps {
  position: absolute; right: var(--ui-a4); bottom: var(--ui-a3); font-size: var(--ui-t-xs);
  /* .1em -> .04em (detektors 09.09. wide-tracking): tik plata burtstarpa der
     lieliem versāļiem virsrakstiem, ne šim mazajam ūdenszīmes tekstam - .04em
     saskan ar pārējo mazo tekstu šajā failā (.padoms, .kg-puse). */
  letter-spacing: .04em; color: rgba(18, 32, 43, .42); user-select: none; pointer-events: none; z-index: 2;
}
.lapa .padoms {
  position: absolute; left: 50%; bottom: var(--ui-a3); transform: translateX(-50%);
  font-size: var(--ui-t-xs); font-weight: 500; letter-spacing: .04em; color: var(--ui-navy);
  background: var(--k2-stikls); border: 1px solid var(--k2-stikls-robeza);
  border-radius: var(--ui-r-s); padding: 5px 14px;
  pointer-events: none; user-select: none; white-space: nowrap; z-index: 2;
}
#kompass {
  position: absolute; right: var(--ui-a4); top: var(--ui-a4); width: 40px; height: 40px;
  border-radius: 50%; background: var(--k2-stikls); border: 1px solid var(--k2-stikls-robeza);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--ui-t-s); color: var(--ui-navy);
  pointer-events: none; user-select: none; will-change: transform; z-index: 2;
  box-shadow: var(--ui-ena-1);
}
.kompass-bulta { position: absolute; top: 3px; }
/* Poga "Pievilkt ceļu" (14.10.2026): redzama tikai pēc mājas pagriešanas vai
   pabīdīšanas, brīvās zonas vidū virs padoma. translate, ne transform, jo
   .galvena:active jau lieto transform: scale. */
.pievilkt-celu {
  position: absolute; left: 50%; bottom: calc(var(--ui-a3) + var(--ui-skariens)); translate: -50% 0;
  z-index: 3; white-space: nowrap; box-shadow: var(--ui-ena-2);
}
#dimensiju-cips {
  position: absolute; left: var(--ui-a4); top: var(--ui-a4); max-width: 46%;
  font-size: var(--ui-t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-navy);
  background: var(--k2-stikls); border: 1px solid var(--k2-stikls-robeza); border-radius: var(--ui-r-s);
  padding: var(--ui-a1) var(--ui-a3); pointer-events: none; user-select: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; z-index: 2; box-shadow: var(--ui-ena-1);
}

/* ── Soļu panelis ──────────────────────────────────────────────────────── */
/*
 * Panelis ir TRĪS DAĻU kaste, ne viens ritināms bloks (brīfs v2, 4.):
 *   augšā  progresa josla un soļa teksts,
 *   vidū   .pults-saturs - VIENĪGAIS, kas ritinās,
 *   apakšā cena, necaurspīdīga, ar ēnu uz augšu.
 * No tā izriet arī 7. soļa kļūdas labojums: virsraksts nekad nepaslēpjas aiz
 * progresa joslas, jo josla vairs nav lipīga - tā vienkārši nav ritināmajā
 * daļā.
 */
.pults { display: flex; flex-direction: column; min-width: 0; background: var(--ui-karte); }
.pults > .ui-solu-nav { flex: none; }
.solu-teksts { flex: none; }

/*
 * SEGMENTU PROGRESA JOSLA. Septiņi vienādi segmenti, katrs klikšķināms; tā ir
 * VIENĪGĀ soļu navigācija lapā. Cipars pogā paliek ekrāna lasītājam (pogai ir
 * arī aria-label ar soļa nosaukumu), bet vizuāli to nes segments un teksts zem
 * joslas - brīfs v2 ciparus aplīšos aizliedz gan augšā, gan virsrakstos.
 * Tooltip (title) liek palidzi.js no paša soļa virsraksta, lai nosaukums
 * nedzīvotu divās vietās.
 *
 * Poga ir 44 px augsta, redzamais segments 6 px: skāriena mērķis ir viss
 * augstums, ne josliņa. Bez tā telefonā segmentā trāpīt nevar.
 */
.ui-solu-nav { display: flex; gap: 4px; flex-wrap: nowrap; }
.ui-solu-nav button {
  flex: 1 1 0; min-width: 0; height: var(--ui-skariens); padding: 0;
  border: 0; background: transparent; color: transparent;
  font-size: 0; line-height: 0; position: relative; border-radius: var(--ui-r-s);
}
.ui-solu-nav button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 6px; margin-top: -3px; border-radius: 3px; background: var(--ui-robeza-2);
  transition: background var(--ui-kustiba), transform var(--ui-kustiba);
}
/* Vienāda specifiskuma pārraksti dizaina sistēmai (tur segments ir apaļa poga
   ar pildījumu): fails ielādējas pēc alpine-ui.css, tāpēc uzvar. */
.ui-solu-nav button.pabeigts { border-color: transparent; color: transparent; }
.ui-solu-nav button[aria-current="step"] { background: transparent; border-color: transparent; color: transparent; }
.ui-solu-nav button.pabeigts::before { background: var(--ui-navy); }
/* Aktīvais segments ir biezāks, bet augstumu te NEANIMĒ: izkārtojuma
   īpašību animācija pārlūkam liek pārrēķināt izkārtojumu katrā kadrā, un tas
   notiek uz tā paša pavediena, kur 3D renderēšanas cilpa (tests
   konstruktors-demo.test.mjs to tur ciet abiem konstruktoriem). scaleY dara
   to pašu bez pārrēķina. */
.ui-solu-nav button[aria-current="step"]::before {
  background: var(--ui-saule); transform: scaleY(1.34);
}
@media (hover: hover) and (pointer: fine) {
  .ui-solu-nav button:hover::before { background: var(--ui-navy-2); }
  .ui-solu-nav button[aria-current="step"]:hover::before { background: var(--ui-saule); }
}

/* "3. solis no 7 · Forma un izmēri". Tekstu raksta palidzi.js. */
.solu-teksts {
  font-size: var(--ui-t-s); font-weight: 600; color: var(--ui-navy);
  margin: 2px 0 0; min-height: 1.3em;
}

/* ── Akordeons ─────────────────────────────────────────────────────────── */
/* Soļi paneļa iekšienē ir akordeona rindas, ne atsevišķas kartītes: panelis
   pats jau ir balta kartīte, un kartīte kartītē uz balta fona ir tikai ēnu
   troksnis. Robeža starp rindām dara to pašu darbu. */
.pults-saturs > .solis {
  background: transparent; border: 0; border-top: 1px solid var(--ui-robeza);
  border-radius: 0; box-shadow: none;
  padding: var(--ui-a4) 0; gap: var(--ui-a3);
}
.pults-saturs > .solis:first-child { border-top: 0; }
.ui-solis-galva { flex-wrap: wrap; row-gap: 2px; column-gap: var(--ui-a2); }
.ui-solis-galva h2 button { font-size: var(--ui-t-l); font-weight: 600; }

/* Ķeksis izdarītajam solim. Cipara aplītis (.ui-solis-nr) te vairs nav
   cipars: brīfs v2 tos aizliedz. Aplītis parādās TIKAI izdarītajam solim, un
   tajā ir ķeksis - tā virsrakstu rinda paliek tīra, kamēr nav ko rādīt. */
.ui-solis-nr { display: none; }
.solis.pabeigts .ui-solis-nr {
  display: block; position: relative; width: 20px; height: 20px;
  font-size: 0; color: transparent; background: var(--ui-navy);
}
.solis.pabeigts .ui-solis-nr::after {
  content: ""; position: absolute; inset: 4px; background: var(--ui-karte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Vienas rindas kopsavilkums ar izvēlēto. Elementu veido palidzi.js un liek
   galvas beigās; flex-wrap to nogādā savā rindā zem virsraksta. Atvērtā solī
   tas ir lieks - izvēles tur ir redzamas pašas. */
.solis-kops {
  flex: 1 0 100%; font-size: var(--ui-t-s); color: var(--ui-kluss);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.solis.akt .solis-kops { display: none; }

/* ── Cena ──────────────────────────────────────────────────────────────── */

/* Detektors 09.09. sauc šo par "nested-cards" (karte kartē): tas TIKAI izskatās
   pēc kartes strukturāli, jo tai ir sava ēna paneļa iekšā. Fons ir tas pats
   var(--ui-karte), kas panelim (bez kontrasta - ne karte), un ēna ir vienvirziena
   uz augšu, ne apkārtēja: tā ir lipīgas apakšjoslas pacēluma norāde virs
   ritinošā saraksta (sk. faila galvas komentāru "cena, necaurspīdīga, ar ēnu
   uz augšu"), ne otra karte. Nemainīts. */
.apaksa-josla {
  display: flex; align-items: center; gap: var(--ui-a3);
  padding: var(--ui-a3) var(--ui-a4);
  background: var(--ui-karte); border-top: 1px solid var(--ui-robeza);
  box-shadow: var(--k2-ena-augsup);
}
.apaksa-cena { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1; }
.apaksa-cena-birka {
  font-size: var(--ui-t-xs); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ui-kluss);
}
#cena-josla { font-size: var(--ui-t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Mērvienība nāk no #cena kā <small> bez atstarpes. Cenas kartītē to atdala
   .ui-cena small (alpine-ui.css), bet joslā tā klase nav, un 08.09. kadros
   summa bija "61 600EUR". */
#cena-josla small { font-size: .55em; font-weight: 500; color: var(--ui-kluss); margin-left: 5px; }
.apaksa-josla .ui-poga { white-space: nowrap; }
/* Pēdējā solī joslā ir trīs lietas: Atpakaļ, summa un gala darbība. Uz 400 px
   paneļa tās trīs vienā rindā saspiež "Saņemt PDF ar tāmi" divās rindās, un
   divrindu poga ir tieši tas, ko Gustavs 08.09. kadros aizrādīja. Gala
   darbība tad iet savā rindā, pilnā platumā - tā tā ir arī izcelta. */
.apaksa-josla:has(.solis-beigu-darbiba:not([hidden])) { flex-wrap: wrap; row-gap: var(--ui-a2); }
.apaksa-josla:has(.solis-beigu-darbiba:not([hidden])) .solis-beigu-darbiba { flex: 1 0 100%; }

/* ── Telefons (līdz 1023 px) ───────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* Galvene telefonā: zīmols un viena poga. Birka un virsraksts te neietilpst,
     un, kad tie mēģina, "Sākt no sākuma" izlien aiz labās malas. Virsraksts
     paliek ekrāna lasītājam, birka ir informācija izstrādei, ne klientam. */
  .badge { display: none; }
  /* Logo ir 238 px plats; ar to un pogu 390 px joslā virsrakstam vietas nav,
     un aprauts "Mājas konstru..." nav noderīgāks par neko. Virsraksts paliek
     ekrāna lasītājam, un logo pasaka to pašu: kur tu esi. */
  header h1 {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  header { padding: 0 var(--ui-a3); gap: var(--ui-a2); }
  .zime img { height: 24px; }
  .zime { margin-right: auto; }
  /* Poga vienā rindā: 56 px joslā divrindu teksts izspiež joslu ārā no sava
     augstuma, un zem tā parādās šķautne. */
  #atiestatit { padding: 0 var(--ui-a3); font-size: var(--ui-t-s); white-space: nowrap; }

  /* Kanva lipīga augšā, panelis ritinās zem tās. Viens nemainīgs augstums:
     divi augstumi, kas pārslēdzas ritinot, katrā kadrā pārrēķina WebGL kadru
     buferi, un tas izskatās kā raustīšanās (Gustavs, 05.09.). */
  .lapa { position: sticky; top: var(--k2-josla-h); z-index: 5; box-shadow: var(--ui-ena-2); }
  #skices-vieta { height: var(--k2-kanva-h); }
  .lapa .padoms { display: none; }
  .pievilkt-celu { bottom: var(--ui-a3); }

  .pults { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Progresa josla telefonā ir LIPĪGA tieši zem kanvas, ne peldošs pill virs
     3D skata: uz jaunā, necaurspīdīgā paneļa tā ir paneļa daļa, un josla, kas
     stāv uz balta, ir lasāma bez stikla un ēnas. */
  .pults > .ui-solu-nav,
  .solu-teksts {
    position: sticky; z-index: 6; background: var(--ui-karte);
    padding-left: var(--ui-a4); padding-right: var(--ui-a4);
  }
  .pults > .ui-solu-nav { top: calc(var(--k2-josla-h) + var(--k2-kanva-h)); padding-top: var(--ui-a2); }
  .solu-teksts {
    top: calc(var(--k2-josla-h) + var(--k2-kanva-h) + var(--ui-a2) + var(--ui-skariens));
    padding-bottom: var(--ui-a2); border-bottom: 1px solid var(--ui-robeza);
  }
  /* --ui-a3 (12) -> --ui-a4 (16): detektors 09.09. body-text-viewport-edge uz
     p.ui-piezime - garās piezīmes (73 un 140 rakstzīmes) pieskārās ekrāna
     malai. DESIGN.md 2.3: lapas mala telefonā ir 16, ne 12. Augšējo zīmola
     joslu (header) NEMAINU: tur ir nowrap poga "Sākt no sākuma", un 4px
     mazāk vietas tur ir risks, ko nevar pārbaudīt bez pārlūka. */
  .pults-saturs { padding: 0 var(--ui-a4); }
  /* scrollIntoView neko nezina par lipīgo joslu virs saraksta. Bez šī soļa
     virsraksts pēc "Tālāk" aizritinātos tieši zem tās - tā ir tā pati 7. soļa
     kļūda, tikai telefonā. */
  .pults-saturs > .solis {
    scroll-margin-top: calc(var(--k2-josla-h) + var(--k2-kanva-h) + var(--ui-skariens) + var(--ui-a6));
  }

  /* Cena telefonā ir fiksēta apakšā: īkšķis ir tur, un summa nedrīkst
     pazust ritinot (DESIGN.md 6.4).
     Platums ar 100vw, ne ar left/right: 0. Ar left/right pārlūks šai
     fiksētajai joslai deva 422 px uz 390 px ekrāna, un "Tālāk" poga izgāja
     aiz labās malas. Mērīts pārlūkā, ne uz aci. */
  .apaksa-josla {
    position: fixed; left: 0; right: auto; bottom: 0; width: 100vw; z-index: 40;
    padding-bottom: calc(var(--ui-a3) + env(safe-area-inset-bottom));
  }

  #solis-atpakal { display: none; }
}

/* ── Dators (no 1024 px) ───────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .lappuse { height: 100dvh; overflow: hidden; }
  /* Debesu gradients zem VISA loga, ne tikai zem kanvas: ap peldošo paneli
     citādi paliktu pelēkas lietotnes fona joslas, un tieši tās Gustavs redz
     kā "nav premium sajūtas". */
  .rezgis { overflow: hidden; background: linear-gradient(#DCEAF4 0%, #EAF1F0 58%, #E4EBE2 100%); }

  /*
   * Kanva aizpilda VISU logu, arī zem paneļa (Gustavs 09.09.: "lai tas pats
   * konstruktora attēls būtu redzams arī kreisajā un apakšējā malā").
   *
   * Māja tomēr nepaliek zem paneļa: palidzi.js pasaka dzinējam, cik pikseļu pa
   * labi panelis aizsedz (data-kadra-atkape uz kanvas konteinera), un dzinējs
   * kadrē māju brīvajā zonā ar kameras skata nobīdi. Sk. konstruktors-demo.js
   * funkciju kadraAtkape. Bez tā atribūta dzinējs uzvedas tieši tāpat kā līdz
   * šim, tāpēc izstrādes lapa nemainās.
   */
  .lapa { position: absolute; inset: 0; }
  #skices-vieta { height: 100%; }
  /* Kompass, zīmogs un padoms turas brīvajā zonā: aiz paneļa tie būtu tikpat
     kā nebūtu. Brīvā zona ir logs bez paneļa un tā abām malām. */
  #kompass, #skices-vieta .stamps {
    right: calc(var(--k2-panelis-w) + var(--k2-mala) * 2 + var(--ui-a4));
  }
  .lapa .padoms, .pievilkt-celu { left: calc((100% - var(--k2-panelis-w) - var(--k2-mala) * 2) / 2); }

  /* Panelis: balta, necaurspīdīga kartīte ar 16 px atkāpi visapkārt un
     augstumu calc(100% - 32px) - 3D paliek redzams pa kreisi un zem tā.
     Detektors 09.09. šo apmali + --ui-ena-3 (36px izpludums) sauc par
     "gpt-thin-border-wide-shadow" - te tas ir DESIGN.md 2.4 izņēmums ar
     nolūku ("Karte - vai nu apmale, vai ēna, ne abas, izņemot peldošās"):
     šis ir vienīgais peldošais panelis lapā, tāpēc abas paliek. Nemainīts. */
  .pults {
    position: absolute; top: var(--k2-mala); right: var(--k2-mala);
    width: var(--k2-panelis-w); height: calc(100% - var(--k2-mala) * 2);
    border: 1px solid var(--ui-robeza); border-radius: var(--ui-r-l);
    box-shadow: var(--ui-ena-3); overflow: hidden;
  }
  .pults > .ui-solu-nav { padding: var(--ui-a4) var(--ui-a4) 0; }
  .solu-teksts { padding: 0 var(--ui-a4) var(--ui-a3); }
  /* Robeža starp nekustīgo galvu un ritināmo sarakstu. Bez tās ritinātais
     saturs pielīp progresa tekstam, un pirmā redzamā rinda izskatās pēc tā
     turpinājuma (08.09. kadrs: "5. solis no 7 · Fasāde un logi" un zem tā
     bez atstarpes cita soļa kopsavilkums). */
  .pults-saturs {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 var(--ui-a4); scrollbar-width: thin;
    border-top: 1px solid var(--ui-robeza);
  }
  .apaksa-josla { flex: none; }
  #solis-atpakal { order: -1; }
}

/* ── Tosts ─────────────────────────────────────────────────────────────── */

.tosts {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(8px);
  max-width: min(92vw, 460px); padding: var(--ui-a3) var(--ui-a4);
  border-radius: var(--ui-r-m); background: var(--ui-tinte); color: #fff;
  font-size: var(--ui-t-s); line-height: 1.45; text-align: center;
  box-shadow: var(--ui-ena-3); opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--ui-kustiba), transform var(--ui-kustiba);
}
.tosts.rada { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 1024px) { .tosts { bottom: var(--ui-a5); } }

/* =============================================================================
 * SOĻU IEKŠIENE. Klases zīmē dzinējs, un tā marķējums te netiek aiztikts:
 * mainās tikai vērtības. Brīfa v2 4. punkts "opciju izvēle bez pill-čipiem"
 * tāpēc ir CSS uzdevums, ne marķējuma - pill kļūst par kartīti uz vietas.
 * ============================================================================= */

.solis-kermenis { display: grid; gap: var(--ui-a4); margin-top: var(--ui-a2); }
/* Grid un flex vienumu noklusējuma min-width ir auto (= satura min-content),
   tāpēc VIENS plats bērns paneļa dziļumā izstiepj visu ķēdi līdz paneļa malai
   un tālāk. Šī rinda to aptur katrā līmenī, ne tikai tur, kur to pamana. */
.pults-saturs, .solis, .solis-kermenis, .ui-lauks, .ui-slidnis,
.cipi, .formas, .cena-karte, .fakti { min-width: 0; }
#sparna-izmeri { display: grid; gap: var(--ui-a4); }
.solis-sevron { flex: none; color: var(--ui-kluss); transition: transform var(--ui-kustiba); }
/* aria-expanded dzīvo uz h2 > button, ne uz .ui-solis-galva pašas
   (sk. solu-nav.js) - :has() to noķer neatkarīgi no tā, kurš nes atribūtu. */
.ui-solis-galva:has([aria-expanded="true"]) .solis-sevron { transform: rotate(180deg); }

/* Skārienierīcēs :hover paliek "pielipis" pēc pieskāriena. Koplietotais
   alpine-ui.css hover liek bez nosacījuma (to lieto arī citas lapas), tāpēc šai
   lapai tas te tiek atcelts uz pamatvērtībām. Bloks stāv PIRMS kartīšu
   stāvokļiem zemāk, lai .akt un aria-pressed uzvarētu pēc secības. */
@media (hover: none), (pointer: coarse) {
  .ui-poga:hover { border-color: var(--ui-robeza-vadikla); background: var(--ui-karte); }
  .ui-poga.galvena:hover {
    background: var(--ui-navy); border-color: var(--ui-navy);
    box-shadow: 0 1px 2px rgba(11, 31, 51, .2);
  }
  .ui-poga.klusa:hover { border-color: transparent; background: transparent; color: var(--ui-kluss); }
  .ui-cips:hover { border-color: var(--ui-robeza-2); background: var(--ui-karte); }
}

/* ── Radio kartītes ─────────────────────────────────────────────────────
   Formas kartītes (.forma-k) jau bija tieši tas paraugs, ko brīfs prasa,
   tāpēc pārējais tiek pielīdzināts tām, ne otrādi: divas kolonnas, siluets
   pa kreisi, izvēlētajai 2 px navy robeža un ķeksis stūrī. */
.formas, .cipi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-a2); }
/* Nepāra pēdējā kartīte aizņem abas kolonnas: puse rindas ar tukšumu blakus
   izskatās pēc pazudušas kartītes, ne pēc izvēles beigām. Paneļa kartītes ir
   izņēmums: tur kolonnas ir trīs, un trešā ir tieši rindas beigas, ne
   pārpalikums (09.09. kadrā "224 mm" bija izplūdusi pāri visai rindai). */
.cipi:not(.panela-kartites) > .cips:last-child:nth-child(odd) { grid-column: 1 / -1; }

.forma-k, .cips {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--ui-a2);
  min-height: var(--ui-skariens); padding: var(--ui-a2) var(--ui-a5) var(--ui-a2) var(--ui-a3);
  border: 1px solid var(--ui-robeza-2); border-radius: var(--ui-r-m);
  background: var(--ui-karte); color: var(--ui-tinte);
  font: inherit; font-size: var(--ui-t-s); font-weight: 500; text-align: left;
  cursor: pointer; position: relative;
  transition: border-color var(--ui-kustiba), background var(--ui-kustiba);
}
@media (hover: hover) and (pointer: fine) {
  .forma-k:hover, .cips:hover { border-color: var(--ui-navy); background: var(--k2-tinte-08); }
}
.forma-k:active, .cips:active { transform: scale(.99); }
.forma-k.akt,
.cips.akt, .cips[aria-pressed="true"] {
  border-color: var(--ui-navy); border-width: 2px; color: var(--ui-navy);
  background: var(--k2-tinte-08);
  padding: calc(var(--ui-a2) - 1px) calc(var(--ui-a5) - 1px) calc(var(--ui-a2) - 1px) calc(var(--ui-a3) - 1px);
}
.forma-k svg, .cips svg { flex: none; width: 22px; height: 18px; }
.forma-k .pl { fill: none; stroke: currentColor; stroke-width: 2; }
.forma-k.akt .pl { stroke: var(--ui-navy); }

/* Ķeksis stūrī izvēlētajai kartītei. Aplītis ir viens elements: navy fons un
   balts ķeksis kā fona attēls, tāpēc marķējumam nekas nav jāpieliek. */
.forma-k.akt::after,
.cips.akt::after, .cips[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ui-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* SIP paneļa biezums: trīs kartītes, ne izvēlne (brīfs v2, 8. sadaļa).
   Kartītes veido palidzi.js; tās ir garākas par pārējām, jo katrā ir trīs
   rindas: biezums, serde un U vērtība. */
.panela-kartites { grid-template-columns: 1fr 1fr 1fr; }
.panela-karte {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: var(--ui-a2) var(--ui-a3);
}
.panela-karte.akt, .panela-karte[aria-pressed="true"] {
  padding: calc(var(--ui-a2) - 1px) calc(var(--ui-a3) - 1px);
}
.panela-karte .pk-biezums { font-size: var(--ui-t-b); font-weight: 600; }
.panela-karte .pk-serde { font-size: var(--ui-t-xs); color: var(--ui-kluss); }
.panela-karte.akt .pk-serde { color: var(--ui-navy-2); }
.panela-karte .pk-u { font-size: var(--ui-t-xs); font-variant-numeric: tabular-nums; color: var(--ui-kluss); }
.panela-karte.akt .pk-u { color: var(--ui-navy-2); }
/* Ķeksis stūrī te aizsegtu U vērtību, un izvēlēto jau nes robeža un fons. */
.panela-karte.akt::after, .panela-karte[aria-pressed="true"]::after { content: none; }

/* Siluets kartītē. Maska nes tikai formu; pildījums ir currentColor, tāpēc
   ikona seko kartītes tekstam un izvēlētajā kļūst navy pati, bez otras
   krāsas faila. */
#jumta-cipi .cips::before,
#materialu-cipi .cips::before,
#saules-cipi .cips::before {
  content: ""; flex: none; width: 24px; height: 16px; background: currentColor;
  -webkit-mask: var(--k2-ikona) center/contain no-repeat;
  mask: var(--k2-ikona) center/contain no-repeat;
}

#jumta-cipi [data-jumts="divslipju"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 14 L12 4 L23 14 Z' fill='black'/%3E%3C/svg%3E"); }
#jumta-cipi [data-jumts="cetrslipju"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 14 L6 5 L18 5 L23 14 Z' fill='black'/%3E%3C/svg%3E"); }
#jumta-cipi [data-jumts="pusvalma"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 14 L5 7 L8 3 L16 3 L19 7 L23 14 Z' fill='black'/%3E%3C/svg%3E"); }
#jumta-cipi [data-jumts="vienslipes"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 14 L2 9 L22 3 L22 14 Z' fill='black'/%3E%3C/svg%3E"); }
#jumta-cipi [data-jumts="plakans"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 10 L22 10 L22 14 L2 14 Z' fill='black'/%3E%3C/svg%3E"); }

#materialu-cipi [data-mat="0"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Crect x='2' y='2' width='3' height='12'/%3E%3Crect x='7' y='2' width='3' height='12'/%3E%3Crect x='12' y='2' width='3' height='12'/%3E%3Crect x='17' y='2' width='3' height='12'/%3E%3C/g%3E%3C/svg%3E"); }
#materialu-cipi [data-mat="1"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Crect x='2' y='3' width='20' height='2.4'/%3E%3Crect x='2' y='7' width='20' height='2.4'/%3E%3Crect x='2' y='11' width='20' height='2.4'/%3E%3C/g%3E%3C/svg%3E"); }
#materialu-cipi [data-mat="2"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Crect x='2' y='3' width='20' height='4'/%3E%3Crect x='2' y='8.5' width='20' height='4' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); }
#materialu-cipi [data-mat="3"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Crect x='2' y='3' width='9' height='5'/%3E%3Crect x='13' y='3' width='9' height='5'/%3E%3Crect x='2' y='9' width='9' height='5'/%3E%3Crect x='13' y='9' width='9' height='5'/%3E%3C/g%3E%3C/svg%3E"); }
#materialu-cipi [data-mat="4"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Crect x='2' y='3' width='6' height='3'/%3E%3Crect x='9' y='3' width='6' height='3'/%3E%3Crect x='16' y='3' width='6' height='3'/%3E%3Crect x='2' y='7' width='4' height='3'/%3E%3Crect x='7' y='7' width='6' height='3'/%3E%3Crect x='14' y='7' width='6' height='3'/%3E%3Crect x='2' y='11' width='6' height='3'/%3E%3Crect x='9' y='11' width='6' height='3'/%3E%3Crect x='16' y='11' width='6' height='3'/%3E%3C/g%3E%3C/svg%3E"); }

#saules-cipi [data-saule="rits"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Cpath d='M12 4.5a4.2 4.2 0 0 1 4.2 4.2H7.8A4.2 4.2 0 0 1 12 4.5z'/%3E%3Crect x='1.5' y='10.2' width='21' height='1.8' rx='.9'/%3E%3Cpath d='M12 0.6l2.4 3h-4.8z'/%3E%3C/g%3E%3C/svg%3E"); }
#saules-cipi [data-saule="pusdiena"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cg stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M12 .8v1.8M12 13.4v1.8M4.5 8H2.7M21.3 8h-1.8M6.7 2.7 5.4 1.4M18.6 1.4l-1.3 1.3M6.7 13.3l-1.3 1.3M17.3 13.3l1.3 1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
#saules-cipi [data-saule="vakars"] { --k2-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='black'%3E%3Cpath d='M12 4.5a4.2 4.2 0 0 1 4.2 4.2H7.8A4.2 4.2 0 0 1 12 4.5z'/%3E%3Crect x='1.5' y='10.2' width='21' height='1.8' rx='.9'/%3E%3Cpath d='M12 3.6l-2.4-3h4.8z'/%3E%3C/g%3E%3C/svg%3E"); }

/* Tipveida projektu KARTĪTES: telefonā horizontāla, ritināma rinda ar
   scroll-snap - katra kartīte 72% platuma, tāpēc redzama nākamās mala kā
   mājiens ritināt, un pati rinda ritinās. Datorā režģis divās kolonnās.
   Saturu (siluetu, nosaukumu, faktu rindu, ķeksi) raksta JS ar T(). */
.projektu-kartes {
  display: flex; gap: var(--ui-a3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--ui-a1); -webkit-overflow-scrolling: touch;
  /* Flex/grid VIENĪBAI noklusējuma min-width ir auto (= satura platums), ne
     0 - bez šīm divām rindām .projektu-kartes izstiepās līdz VISU 11 kartīšu
     platumam (~2428px pie 390px ekrāna), un overflow-x: auto nekad netika
     sasniegts - lapa pati kļuva platāka par ekrānu. */
  min-width: 0; max-width: 100%;
}
.projekta-karte {
  flex: 0 0 72%; min-width: 220px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: var(--ui-a3); border-radius: var(--ui-r-m); border: 1px solid var(--ui-robeza-2);
  background: var(--ui-karte); cursor: pointer; text-align: left; font: inherit; color: inherit;
  position: relative;
  transition: border-color var(--ui-kustiba), background var(--ui-kustiba), box-shadow var(--ui-kustiba);
}
@media (hover: hover) and (pointer: fine) {
  .projekta-karte:hover { border-color: var(--ui-robeza-vadikla); box-shadow: var(--ui-ena-1); }
}
.projekta-karte:active { transform: scale(.98); }
.projekta-karte.akt { border-color: var(--ui-navy); border-width: 2px; background: var(--k2-tinte-08); }
.projekta-karte:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }
.projekta-karte .pk-siluets { width: 64px; height: 40px; color: var(--ui-navy); flex: none; }
.projekta-karte .pk-siluets svg { display: block; width: 100%; height: 100%; }
.projekta-karte .pk-nos { font-size: var(--ui-t-b); font-weight: 600; color: var(--ui-navy); }
.projekta-karte .pk-fakti { font-size: var(--ui-t-s); color: var(--ui-kluss); font-variant-numeric: tabular-nums; }
.projekta-karte .pk-keksis {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ui-navy); color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--ui-kustiba);
}
.projekta-karte.akt .pk-keksis { opacity: 1; }
@media (min-width: 1024px) {
  .projektu-kartes { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; padding-bottom: 0; }
  .projekta-karte { flex: unset; min-width: 0; }
}
/* Senči starp #tipveids-kartes un sekciju ir grid vienumi ar noklusējuma
   min-width: auto - bez šī tie manto 11 kartīšu neaprautu platumu savā PAŠU
   min-content aprēķinā un izstiepj visu lapu. */
.ui-lauks:has(#tipveids-kartes),
.solis-kermenis:has(#tipveids-kartes) { min-width: 0; }

/* Faila augšupielāde: redzamais taisnstūris ir <label>, bet klikšķi un
   tastatūru saņem PATS <input type=file>, novietots absolūti pāri visam
   laukam un padarīts neredzams. */
.fails-poga { position: relative; overflow: hidden; }
.fails-poga input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fails-poga:focus-within { outline: 2px solid var(--ui-navy); outline-offset: 2px; }

/* ── Krāsu paraugi ──────────────────────────────────────────────────────
   Brīfs v2, 4.: apaļi paraugi ar nosaukumu ZEM tiem. Nosaukumu nes pats
   paraugs - dzinējs katram uzliek aria-label ar krāsas vārdu, un CSS to
   izvelk ar content: attr(aria-label). Tā vārds un paraugs nevar izklīst,
   un marķējumam nekas nav jāpieliek. */
.palete {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--ui-a2); min-width: 0;
}
/* Vietu birkai tur PATS paraugs ar savu apakšējo malu, ne režģa rindstarpa:
   ar rindstarpu pēdējās rindas birkas paliek ārpus režģa un uzkāpj nākamajai
   sadaļai virsū (08.09. kadros paletes vārdi gulēja uz logu skaitītājiem). */
.paletes-cips {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 46px; padding: 0;
  position: relative; overflow: visible; cursor: pointer;
  border: 2px solid var(--ui-robeza-2);
  transition: transform var(--ui-kustiba), border-color var(--ui-kustiba), box-shadow var(--ui-kustiba);
}
.paletes-cips::after {
  content: attr(aria-label);
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  width: 88px; font-size: var(--ui-t-xs); line-height: 1.25; font-weight: 500;
  color: var(--ui-kluss); text-align: center; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .paletes-cips:hover { transform: translateY(-1px); }
}
.paletes-cips.akt { border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(8, 49, 73, .22); }
.paletes-cips.akt::after { color: var(--ui-navy); font-weight: 600; }
/* Izvēlētās krāsas nosaukums tagad stāv zem paša parauga, tāpēc atsevišķā
   rinda zem paletes ir lieka. Ekrāna lasītājam tā PALIEK: tā ir aria-live
   apgabals, kas nosauc izvēli klikšķa brīdī. */
#jumta-birka, #apdares-birka {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.palete-birka, .statusa-birka { font-size: var(--ui-t-s); color: var(--ui-kluss); margin-top: 6px; min-height: 1.2em; }

/* Viena kolonna VIENMĒR, ne tikai šaurā ekrānā: panelis ir 400 px arī uz
   1440 px loga, un divas kolonnas ar 44 px skaitītājiem tur neietilpst. Līdz
   08.09. to noteica @media (max-width: 880px), tāpēc uz datora režģis izspieda
   visu paneļa saturu aiz tā labās malas. */
.logu-rezgis { display: grid; grid-template-columns: 1fr; gap: var(--ui-a2); min-width: 0; }
.logu-rinda { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-a2); }
.logu-rinda span:first-child { font-weight: 500; font-size: var(--ui-t-m); }
/* Skaitītājs: VIENS segmentēts konteiners, ne divas atsevišķas pogas ar savu
   robežu. Rāmis ap visu bloku ir skāriena mērķis (44 px augsts vienmēr). */
.logu-pogas {
  display: inline-flex; align-items: center; height: 44px; padding: 0 2px; gap: 2px;
  border: 1px solid var(--ui-robeza-vadikla); border-radius: var(--ui-r-s); background: var(--ui-karte);
}
.logu-pogas button {
  font: inherit; font-weight: 600; width: 40px; height: 40px; border-radius: 8px;
  border: none; background: transparent; cursor: pointer; color: var(--ui-navy);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ui-t-press) var(--ui-e-out);
}
@media (hover: hover) and (pointer: fine) {
  .logu-pogas button:hover { background: rgba(11, 31, 51, .04); }
}
.logu-skaits { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.pagalma-pogas { display: flex; gap: var(--ui-a2); flex-wrap: wrap; }
.kadastra-rinda { display: flex; gap: var(--ui-a2); align-items: flex-end; }
.kadastra-rinda .ui-lauks { flex: 1 1 auto; min-width: 0; }
.kadastra-rinda .ikonpoga { flex: none; white-space: nowrap; }

.cena-karte {
  padding: var(--ui-a4); display: grid; gap: var(--ui-a3); background: var(--ui-zeme);
  border-radius: var(--ui-r-m); position: relative; overflow: hidden;
}
/* Vienīgā vieta, kur saules tonis parādās ārpus paša saules čipa: mazs
   akcents cenas kartītes augšā, ne pilna krāsaina josla. Detektors 09.09.
   sauc šo par "side-tab" (akcenta josliņa uz kartes malas) - te tā ir viena,
   4px, DESIGN.md 2.1 pieļautā akcenta krāsa lietota TIEŠI vienu reizi lapā,
   ne dekoratīva josla vairākās vietās. Nemainīts. */
.cena-karte::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ui-saule-2);
}
.cena-rinda { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-a3); flex-wrap: wrap; }
.cena-birka { font-size: var(--ui-t-xs); font-weight: 600; letter-spacing: .09em; color: var(--ui-kluss); }
.cena-piezime { font-size: var(--ui-t-s); color: var(--ui-kluss); }
.fakti { display: flex; gap: var(--ui-a4); flex-wrap: wrap; font-size: var(--ui-t-m); color: var(--ui-kluss); }
.fakti b { color: var(--ui-tinte); font-variant-numeric: tabular-nums; }

.u-vert { font-size: var(--ui-t-s); color: var(--ui-kluss); margin-top: 6px; }
.u-vert b { color: var(--ui-tinte); }

.cips, .forma-k, .paletes-cips, .ui-poga, .logu-pogas button, input[type=range], select {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.cips, .forma-k, .paletes-cips, .ui-poga { -webkit-user-select: none; user-select: none; }

/* Izmērīts pārlūkā, ne uz aci: divkolonnu logu-rezgis ar 44px pogām pie
   ~390px ekrāna platuma neietilpst. Viena kolonna, un kadastra rinda
   lūst divās rindās, lai ievades minimālais platums neizstiepj lapu. */
.logu-rinda span:first-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 880px) {
  .kadastra-rinda { flex-wrap: wrap; }
  .kadastra-rinda .ui-lauks { flex: 1 1 100%; }
}

/* =============================================================================
 * SKĀRIENA MĒRĶI - labojumi tikai ŠAI lapai
 *
 * Slīdņi un paletes čipi koplietotajos failos ir zemāki par 44 px. Tos failus
 * lieto arī dzīvā izstrādes lapa, tāpēc te tos nemaina, bet pārraksta uz
 * vietas: priekšskatījums nedrīkst rādīt mērķus, kurus telefonā nevar trāpīt.
 * ============================================================================= */

.solis input[type="range"] { height: var(--ui-skariens); }
.paletes-cips { min-height: var(--ui-skariens); }
/* Kompasa "No augšas" poga nāk no /skata-dial.css un ir 40 px. */
.kompass-augsa { min-width: var(--ui-skariens); min-height: var(--ui-skariens); }

/* =============================================================================
 * PUBLISKĀ LAPA (/konstruktors, /konstruktors2)
 *
 * Šeit ir tikai tas, kas atšķir publisko lapu no izstrādes lapas: bez pill
 * pogām, bez izstrādes zīmēm, bez slīdņiem, mobilais pamats, saite uz
 * mājaslapu. Visas krāsas un atstarpes nāk no --ui-* žetoniem.
 * ============================================================================= */

/* Mobilais pamats. Hover stili jau ir ietīti (hover: hover) and (pointer: fine)
   augstāk; user-scalable=no viewport tagā NAV (tuvināšana ir pieejamība). */
html { -webkit-tap-highlight-color: transparent; }
.ui-poga, .soli-poga { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-poga:active, .soli-poga:active { transform: scale(.98); }
/* 16 px: mazākam fontam iOS ievades laukam pieskaroties tuvina lapu. */
.lappuse input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.lappuse select, .lappuse textarea { font-size: 16px; }

/* Bez pill pogām (Gustava prasība). Radiuss 10 px = --ui-r-s. Koplietotais
   alpine-ui.css te netiek mainīts, jo to lieto arī citas lapas. */
.ui-poga, .ui-cips, .ui-solu-nav button, .kompass-birka { border-radius: var(--ui-r-s); }

/* Izstrādes zīmes publiskajā lapā nerāda: birku "IZSTRĀDES VERSIJA" un
   cenas kartītes piezīmi "Dzīvajā versijā ...". Izstrādes lapai (cits HTML)
   tās paliek. */
.badge, .cena-karte > .cena-piezime { display: none; }

/* Galvene kā mājaslapā: logo ir saite uz alpinesip.lv, datorā vēl viena
   teksta saite. Telefonā galvenē vietas nav, tur paliek tikai logo. */
.zime { color: inherit; text-decoration: none; }
.uz-majaslapu {
  margin-left: auto; display: inline-flex; align-items: center; min-height: var(--ui-skariens);
  padding: 0 var(--ui-a3); border-radius: var(--ui-r-s);
  font-size: var(--ui-t-m); font-weight: 500; color: var(--ui-kluss); text-decoration: none; white-space: nowrap;
}
.uz-majaslapu + #atiestatit { margin-left: 0; }
.uz-majaslapu:focus-visible, .zime:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .uz-majaslapu:hover { color: var(--ui-navy); background: var(--ui-zeme); }
}
@media (max-width: 1023px) {
  .uz-majaslapu { display: none; }
}

/* Cena ir diapazons "62 400 - 71 800 EUR bez PVN": mazāks burtu izmērs, lai
   iekļaujas 400 px panelī un 390 px apakšējā joslā, un "bez PVN" ir klusāks. */
.cena-karte .ui-cena { font-size: clamp(22px, 6vw, 28px); }
.ui-cena .bez-pvn, #cena-josla .bez-pvn { font-weight: 400; color: var(--ui-kluss-2); }
#cena-josla { font-size: var(--ui-t-l); white-space: nowrap; }
#cena-josla .bez-pvn { display: block; margin-left: 0; font-size: var(--ui-t-xs); line-height: 1.2; }
/* Cena pēc kontaktiem (14.10.2026): līdz pieteikumam cenas vietā ir poga
   "Uzzināt cenu" gan kartītē, gan apakšējā joslā. Kontūras poga, jo joslā
   galvenā ir "Tālāk". Burtu izmērs savs, ne .ui-cena lielais. */
.cena-uzzinat {
  font-size: var(--ui-t-m); font-weight: 600; letter-spacing: 0; color: var(--ui-navy);
  border-color: var(--ui-navy); white-space: nowrap;
}
#cena-josla .cena-uzzinat { padding: 0 var(--ui-a3); }

/* ── Soļa vadīklas slīdņu vietā (public/solu-palidzi.js, DESIGN.md 6.3) ──
   Slīdnis paliek DOM un dzinējam pieejams, tikai vizuāli paslēpts. Jauno
   vadīklu uzbūvē JS; ja JS neielādējas, slīdnis paliek redzams. */
.vh, .solis input.vh[type="range"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.ui-slidnis.ar-soli .ui-slidnis-vert { display: none; }
.soli { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-a3); }
.soli-poga {
  flex: none; width: 48px; height: 48px; padding: 0; border-radius: 8px;
  border: 1px solid var(--ui-robeza-vadikla); background: var(--ui-karte); color: var(--ui-navy);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background var(--ui-t-press) var(--ui-e-out), transform var(--ui-t-press) var(--ui-e-out);
}
.soli-poga:disabled { opacity: .4; cursor: default; }
.soli-poga:focus-visible, .soli-lauks:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .soli-poga:not(:disabled):hover { background: var(--k2-tinte-08); }
}
.soli-vert { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--ui-a1); }
.soli-lauks {
  font: inherit; font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--ui-tinte); text-align: center; background: transparent; width: auto; min-width: 0; max-width: 100%;
  padding: 0; border: 0; border-bottom: 1px dashed var(--ui-robeza-vadikla); border-radius: 0;
}
.soli-lauks:focus { border-bottom: 1px solid var(--ui-navy); }
.soli-vien { font-size: var(--ui-t-l); font-weight: 500; color: var(--ui-kluss); }

/* ── Izvēles kartītes slīpumam un pārkarei (public/solu-palidzi.js) ──────
   Cilvēks nezina, kādus grādus vajag, tāpēc slīpumu izvēlas pēc izskata.
   Tā pati kartīšu valoda kā jumta tipam: 2 px navy robeža izvēlētajai, ķeksis
   stūrī. Slīdnis paliek DOM (.vh), kartītes tikai vada tā vērtību. */
.izv-kartites { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-a2); }
.izv-karte {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--ui-a1); padding: var(--ui-a3) var(--ui-a2);
  border-radius: var(--ui-r-m);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.izv-karte.akt, .izv-karte[aria-checked="true"] {
  border-color: var(--ui-navy); border-width: 2px; color: var(--ui-navy);
  background: var(--k2-tinte-08);
  padding: calc(var(--ui-a3) - 1px) calc(var(--ui-a2) - 1px);
}
.izv-karte:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .izv-karte:hover { border-color: var(--ui-navy); background: var(--k2-tinte-08); }
}
.izv-karte:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }
.izv-ikona { display: block; line-height: 0; }
.izv-ikona svg { display: block; width: 40px; height: 28px; }
.izv-nos { font-size: var(--ui-t-s); font-weight: 600; }
.izv-sk { font-size: var(--ui-t-xs); font-variant-numeric: tabular-nums; color: var(--ui-kluss); }
.izv-karte.akt .izv-sk { color: var(--ui-navy-2); }