/* public/skata-dial.css - AlpineSIP mājas konstruktora kompass (mājas
   orientācijas vadīkla).

   VĒSTURE. Līdz 05.09.2026 šis fails zīmēja horizontālu vilkšanas lenti zem
   3D kanvas ("skata pagriešanas dial"). Gustavs 05.09.: "nav forši, nav
   patīkami, nav profesionāli" - grib risinājumu kā labos 3D konfiguratoros.
   Fails tagad zīmē KOMPASU PAŠĀ 3D SKATĀ: kompaktu, stiklveida pogu kanvas
   #skices-vieta apakšējā kreisajā stūrī (#kompass-poga), kas klikšķinot
   atver riņķveida vadīklu turpat kanvā (#kompass-gredzens). Dati un ceļš
   (st.orientacija, liktOrientaciju, dialPielipt) nemainās - sk.
   konstruktors-demo.js sadaļu "Skata pagriešanas dial: KOMPASS".

   ID KONFLIKTS: kanvas stūrī jau ir cits, dekoratīvs #kompass elements
   (kameras azimuta rādītājs, aria-hidden, HTML/JS ārpus šī faila
   atbildības) - tāpēc šeit viss ir #kompass-poga / #kompass-gredzens / kg-*,
   NEVIS #kompass.

   Tokeni no public/alpine-ui.css (--ui-*). Katram tokenam ir droša rezerve
   (otrā vērtība `var()` iekšā), ja alpine-ui.css kāda iemesla dēļ nav
   ielādēts vai ielādēts pēc šī faila - kompass tad izskatās gandrīz tāpat,
   tikai bez zīmola smalkumiem.

   09.09.2026: rezerves skaitļi (11px, 17px) sinhronizēti ar alpine-ui.css
   jauno tipogrāfijas skalu (detektora tiny-text/flat-type-hierarchy
   labojums), lai rezerve arī tad, kad tā reāli nostrādā, nerāda veco,
   pārāk mazo izmēru. */

/* ── Kompasa poga ────────────────────────────────────────────────────────
   48x48 px stikla aplis kanvas iekšā. Izmēri un krāsas šeit ir Fable dizaina
   lēmuma LITERĀLĀS vērtības (05.09.2026), ne dizaina sistēmas žetoni - šī ir
   vienīgā vieta lapā ar šo tieši šo stikla efektu, tāpēc konsekvence ar
   pārējām pogām nav mērķis. */
.kompass-poga {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 31, 51, .12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ui-navy, #083149);
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kompass-poga:focus-visible {
  outline: 2px solid var(--ui-navy, #083149);
  outline-offset: 2px;
}
.kompass-poga-loks { fill: none; stroke: var(--ui-robeza-2, #CBD3DA); stroke-width: 1.3; }
.kompass-poga-z {
  font-family: var(--ui-fonts, "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif);
  font-size: 8px;
  font-weight: 700;
  fill: var(--ui-kluss, #5E6A74);
}
/* Adata: TIKAI šis <g> rotē (transform-box: fill-box, lai SVG grupas rotācijas
   centrs ir tās pašas robežlodziņš, ne visa 48x48 viewBox) - Z burts un ārējais
   loks paliek fiksēti, tāpat kā īstam kompasam paliek fiksēts korpuss. */
.kompass-poga-adata {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--ui-t-press) var(--ui-e-out);
}
.kompass-poga-adata path { fill: var(--ui-navy, #083149); }

/* ── Debespuses/grādu birka ─────────────────────────────────────────────
   Pa labi no pogas, tajā pašā stikla stilā, tā paša augstuma vidū. */
.kompass-birka {
  position: absolute;
  left: 64px;
  bottom: 20px;
  font-family: var(--ui-fonts, "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif);
  font-size: var(--ui-t-xs, 12px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ui-navy, #083149);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 31, 51, .12);
  border-radius: var(--ui-r-pill, 999px);
  padding: 3px 10px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* ── "Skats no augšas" poga ─────────────────────────────────────────────
   Tieši virs kompasa pogas, tajā pašā stikla stilā, mazāka (40x40, kā
   sekundāra darbība). Klase pārrakstīta no .ui-poga.klusa uz pašu klasi:
   .ui-poga nesniedz stikla fonu, un šeit tas jāsaskaņo ar #kompass-poga. */
.kompass-augsa {
  position: absolute;
  left: 16px;
  bottom: 68px; /* 12 (poga apakša) + 48 (poga augstums) + 8 (atstarpe) */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 31, 51, .12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--ui-navy, #083149);
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--ui-t-ui) var(--ui-e-out), color var(--ui-t-ui) var(--ui-e-out);
}
.kompass-augsa:focus-visible {
  outline: 2px solid var(--ui-navy, #083149);
  outline-offset: 2px;
}
.kompass-augsa[aria-pressed="true"] {
  background: var(--ui-navy, #083149);
  border-color: var(--ui-navy, #083149);
  color: #fff;
}

/* ── Gredzens (atveras klikšķinot pogu) ─────────────────────────────────
   176 px diametra stikla aplis. Novietojumu (left/top, centrēts uz pogu, bet
   iebīdīts kanvā ja stūrī neietilptu) rēķina JS (novietotGredzenu), CSS te
   dod tikai izmēru, izskatu un atvēršanās animāciju. */
.kompass-gredzens {
  position: absolute;
  left: 0;
  top: 0;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(11, 31, 51, .12);
  box-shadow: var(--ui-ena-3, 0 14px 36px rgba(8, 49, 73, .14), 0 2px 6px rgba(8, 49, 73, .08));
  z-index: 4;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  /* Aizvērts: mazāks un caurspīdīgs (atvēršanās sākumpunkts). Atverot, JS
     pieliek .atv - PATI parādīšana/paslēpšana ir [hidden], ko JS pārslēdz TIEŠI
     ap šo pāreju (sk. atvertGredzenu/aizvertGredzenu), lai (a) ekrāna lasītājs
     un Tab secība to neredz, kad tas ir ciet, un (b) pāreja tomēr paspēj
     notikt (hidden noņemts PIRMS klases pielikšanas, divi rAF, lai pārlūks
     paspēj atrisināt sākuma stāvokli pirms tranzīcijas mērķa). */
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: transform var(--ui-t-ui) var(--ui-e-out), opacity var(--ui-t-ui) var(--ui-e-out);
}
.kompass-gredzens.atv {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.kompass-gredzens[hidden] { display: none; }

.kg-trase { fill: none; stroke: var(--ui-robeza, #E4E8EC); stroke-width: 1; }
.kg-atzime { stroke: var(--ui-kluss-2, #8A949C); stroke-width: 1; }
.kg-atzime.galvena { stroke: var(--ui-kluss, #5E6A74); stroke-width: 2; }
.kg-birka {
  font-family: var(--ui-fonts, "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif);
  font-size: var(--ui-t-xs, 12px);
  font-weight: 600;
  fill: var(--ui-tinte, #12202B);
}
/* Starpvirzieni klusāki par pamatvirzieniem: acs lasa Z A D R pirmos (tas
   pats princips, ko lentes birkas ievēroja pirms 05.09.). */
.kg-birka.sekundara { font-size: 9px; font-weight: 500; fill: var(--ui-kluss, #5E6A74); }

.kg-rokturis {
  fill: var(--ui-navy, #083149);
  stroke: #fff;
  stroke-width: 2;
  cursor: grab;
}
.kg-rokturis:active { cursor: grabbing; }

/* Centra lasījums: HTML overlay virs SVG (nevis SVG <text>), lai fonts un
   atstarpes nāk no tās pašas tipogrāfijas skalas, ko lieto visa lapa. */
.kg-lasijums {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  font-family: var(--ui-fonts, "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif);
}
.kg-gradi {
  font-size: var(--ui-t-l, 20px);
  font-weight: 600;
  color: var(--ui-navy, #083149);
  font-variant-numeric: tabular-nums;
}
.kg-puse {
  font-size: var(--ui-t-xs, 12px);
  color: var(--ui-kluss, #5E6A74);
  letter-spacing: .04em;
  margin-top: 2px;
}

/* prefers-reduced-motion: alpine-ui.css to jau godā globāli (* { transition:
   none !important }), bet šis fails var dzīvot arī lapā, kas alpine-ui.css
   nemaz neielādē - tāpēc sava neatkarīga rezerve. */
@media (prefers-reduced-motion: reduce) {
  .kompass-poga-adata, .kompass-gredzens, .kompass-augsa { transition: none; }
}

/* ── Novietojums, spoguļskats un tipveida slēdzene (14.10.2026) ──────────
   Vadīklas ieliek dzinējs (konstruktors-demo.js, sadaļa "Novietojums,
   spoguļskats un tipveida slēdzene"), tāpēc stils dzīvo šeit, failā, ko
   ielādē abas lapas. Tikai žetoni (DESIGN.md), bez cietām krāsām. */
.novietojums {
  display: grid;
  gap: var(--ui-a3, 12px);
  padding: var(--ui-a4, 16px);
  border: 1px solid var(--ui-robeza, #E4E8EC);
  border-radius: var(--ui-r-m, 14px);
  background: var(--ui-zeme, #F4F5F7);
}
.nov-galva { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ui-a2, 8px); }
.nov-gradi {
  font-size: var(--ui-t-l, 20px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ui-navy, #083149);
}
.nov-pogas { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ui-a2, 8px); }
.nov-poga, .nov-centret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-a2, 8px);
  min-height: var(--ui-skariens, 44px);
  font-variant-numeric: tabular-nums;
}
.nov-centret { justify-self: start; }
.nov-poga[disabled] { opacity: .45; cursor: not-allowed; }
.nov-padoms { margin: 0; }

.spogulis-piez { margin-top: calc(-1 * var(--ui-a2, 8px)); }

/* Tipveida projekta slēdzene: kopsavilkums fiksēto lauku vietā. */
.tipveida-slegts {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ui-a3, 12px);
  padding: var(--ui-a3, 12px) var(--ui-a4, 16px);
  border-radius: var(--ui-r-m, 14px);
  background: var(--ui-zeme, #F4F5F7);
  border: 1px solid var(--ui-robeza, #E4E8EC);
  color: var(--ui-tinte, #12202B);
}
.tipveida-slegts[hidden] { display: none; }
.ts-ikona { color: var(--ui-navy, #083149); }
.ts-teksts { display: grid; gap: 2px; min-width: 0; }
.ts-virsraksts { font-size: var(--ui-t-m, 14px); font-weight: 600; }
.ts-fakti { font-size: var(--ui-t-s, 12.5px); color: var(--ui-kluss, #5E6A74); font-variant-numeric: tabular-nums; }
.individuals-jautajums {
  display: grid;
  gap: var(--ui-a3, 12px);
  padding: var(--ui-a4, 16px);
  border-radius: var(--ui-r-m, 14px);
  background: var(--ui-saule-2, #FBF1D6);
  border: 1px solid var(--ui-saule, #E8B23A);
  color: var(--ui-tinte, #12202B);
}
.individuals-jautajums[hidden] { display: none; }
.individuals-jautajums p { margin: 0; font-size: var(--ui-t-m, 14px); line-height: 1.5; }
.ij-pogas { display: flex; flex-wrap: wrap; gap: var(--ui-a2, 8px); }

/* Slēgtā solī fiksētie lauki ir paslēpti, paliek tikai tas, ko var mainīt
   arī tipveida projektam (apdare, jumta krāsa). */
.tipveida-slegta[data-solis="3"] .solis-kermenis > :not(.tipveida-slegts):not(.individuals-jautajums) { display: none; }
.tipveida-slegta[data-solis="4"] #jumta-cipi,
.tipveida-slegta[data-solis="4"] #slipuma-rinda,
.tipveida-slegta[data-solis="4"] #parkares-rinda,
.tipveida-slegta[data-solis="4"] #pari-visam-rinda,
.tipveida-slegta[data-solis="5"] .logu-rezgis,
.tipveida-slegta[data-solis="5"] .parslegs:has(#panorama),
.tipveida-slegta[data-solis="5"] [data-t="maja.html.logi.panoramaPiez"],
.tipveida-slegta[data-solis="7"] .ui-lauks:has(#panelis) { display: none; }

/* ── Adreses lauks un noteikumu kartīte (14.10.2026) ────────────────────
   Ieteikumu saraksts zem ievades kā kadastrakarte.lv; kartīte 1. un 6. solī
   saka, vai māja ievēro attālumus un apgrūtinājumus. Tikai žetoni. */
.adreses-lauks { position: relative; }
.adreses-ieteikumi {
  position: absolute;
  z-index: 30;
  inset-inline: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: var(--ui-a1, 4px);
  list-style: none;
  max-height: min(320px, 52vh);
  overflow-y: auto;
  background: var(--ui-karte);
  border: 1px solid var(--ui-robeza, #E4E8EC);
  border-radius: var(--ui-r-m, 14px);
  box-shadow: var(--ui-ena-2, 0 10px 30px rgba(8, 49, 73, .14));
}
.adreses-ieteikumi[hidden] { display: none; }
.adreses-ieteikumi li {
  display: grid;
  gap: 2px;
  padding: var(--ui-a2, 8px) var(--ui-a3, 12px);
  border-radius: var(--ui-r-s, 10px);
  cursor: pointer;
  min-height: var(--ui-skariens, 44px);
  align-content: center;
}
.adreses-ieteikumi li[aria-selected="true"],
.adreses-ieteikumi li:hover { background: var(--ui-zeme, #F4F5F7); }
.ai-galva { font-size: var(--ui-t-m, 14px); font-weight: 600; color: var(--ui-tinte, #12202B); }
.ai-aste { font-size: var(--ui-t-s, 12.5px); color: var(--ui-kluss, #5E6A74); }

.noteikumu-karte {
  display: grid;
  gap: var(--ui-a2, 8px);
  padding: var(--ui-a3, 12px) var(--ui-a4, 16px);
  border: 1px solid var(--ui-robeza, #E4E8EC);
  border-radius: var(--ui-r-m, 14px);
  background: var(--ui-karte);
}
.noteikumu-karte[hidden] { display: none; }
.nk-rinda {
  display: grid;
  gap: 2px;
  padding-inline-start: var(--ui-a3, 12px);
  border-inline-start: 3px solid var(--ui-robeza, #E4E8EC);
  font-size: var(--ui-t-s, 12.5px);
  line-height: 1.45;
  color: var(--ui-kluss, #5E6A74);
}
.nk-rinda strong { font-size: var(--ui-t-m, 14px); color: var(--ui-tinte, #12202B); }
.nk-rinda.labi { border-inline-start-color: var(--ui-zals); }
.nk-rinda.bridinajums { border-inline-start-color: var(--ui-saule, #E8B23A); }
.nk-rinda.slikti { border-inline-start-color: var(--ui-sarkans); }
.nk-rinda.slikti strong { color: var(--ui-sarkans); }
.nk-piezime { margin: 0; }
.nk-atruna { font-size: var(--ui-t-s, 12.5px); color: var(--ui-kluss, #5E6A74); }
.nk-atruna > summary {
  cursor: pointer;
  min-height: var(--ui-skariens, 44px);
  display: flex;
  align-items: center;
  font-weight: 500;
  list-style-position: inside;
}
.nk-atruna > summary:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; border-radius: 4px; }
.nk-atruna[open] > summary { color: var(--ui-tinte); }
.nk-atruna .nk-piezime + .nk-piezime { margin-top: var(--ui-a2, 8px); }