/* AlpineSIP rīku dizaina sistēma. Viens fails trim lapām: mājas konstruktors,
   Posi siju konstruktors, Posi siju kalkulators. Lapas raksta tikai savus
   izkārtojuma stilus; krāsas, atstarpes, rādiusi, ēnas, fonti un pamata
   vadīklas nāk no šejienes. Rīki dzīvo iframe iekšā Mozello lapā
   (docs/konstruktors/mozello-integracija.md), tāpēc te nav ne fiksētu galveņu,
   ne 100vh pieņēmumu ārpus media vaicājumiem.

   Kāpēc tieši šie skaitļi: navy un saule ir alpinesip.lv zīmola krāsas. Viss
   pārējais ir neitrāls, lai 3D aina un cena ir vienīgais, kas piesaista aci. */

/*
 * FONTS. Līdz 09.09.2026 te bija Poppins tieši tāpēc, ka tas ir mājaslapas
 * fonts un rīks dzīvo iframe iekšā tajā pašā lapā. Gustava 09.09.2026 lēmums
 * ir IBM Plex Sans visām sistēmām, tāpēc te tagad ir tas. Sekas jāzina:
 * kamēr alpinesip.lv paliek uz Poppins, iegultais rīks ar apkārtējo lapu
 * vairs nesakrīt. Ja tas nav vēlams, viens žetons zemāk to atgriež.
 *
 * Pašhostēts, ne no fonts.googleapis.com. Fonts dzīvo TE, dizaina sistēmā, ne
 * katras lapas failā: līdz 09.09.2026 mājas konstruktors to hostēja pats, bet
 * siju konstruktors ņēma no Google - divi ceļi vienam un tam pašam zīmola
 * fontam. Iemesli tie paši, kas CRM priekšskatījumā: klienta pārlūks katrā
 * ielādē neaiziet uz svešu serveri, lapa strādā arī tad, kad Google ir
 * nesasniedzams, un CSP paliek bez trešām pusēm. Divi apakškopumi: latin un
 * latin-ext (latviešu garumzīmes un mīkstinājumi ir latin-ext).
 */
/*
 * IBM PLEX SANS, mainīgais fonts (Gustava lēmums 09.09.2026, Poppins vietā).
 *
 * Viens fails uz apakškopu, ne astoņi: mainīgais fonts sedz visu 100-700
 * diapazonu, tāpēc nav ne sintētiska treknuma, ne astoņu pieprasījumu. Faili
 * ir tie paši, ko lieto CRM priekšskatījums (/fonti) - viens fonts, viena
 * kopija, un nomainot to, mainās abas puses reizē.
 */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonti/plex-sans-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonti/plex-sans-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* krāsas */
  --ui-navy: #083149;
  --ui-navy-2: #0F4A6B;
  --ui-tinte: #12202B;
  --ui-kluss: #5E6A74;
  --ui-kluss-2: #8A949C;
  --ui-robeza: #E4E8EC;
  --ui-robeza-2: #CBD3DA;
  --ui-robeza-vadikla: #828E99;   /* 3,4:1 uz balta: WCAG 1.4.11 pogām un ievadēm */
  --ui-zeme: #F4F5F7;
  --ui-karte: #FFFFFF;
  --ui-lapa: #FAFBFC;
  --ui-saule: #E8B23A;
  --ui-saule-2: #FBF1D6;
  --ui-zals: #1F6F4A;
  --ui-zals-2: #E4F3EB;
  --ui-sarkans: #A62C1F;
  --ui-sarkans-2: #F8E7E4;

  /* fonts */
  --ui-fonts: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  /*
   * Skala pārtaisīta 09.09.2026 (Impeccable detektors, C plūsma). Divi atsevišķi
   * defekti, viens labojums katram:
   *  - --ui-t-xs bija 11px: funkcionāls teksts (birkas, čipi, izmēru cipi) zem
   *    12px grīdas nedrīkst būt (tiny-text/undersized-ui-text: #dimensiju-cips,
   *    span.padoms, div.padoms siju konstruktorā).
   *  - --ui-t-b un --ui-t-l bija 15/17px: konstruktors2 un siju-konstruktors
   *    "flat-type-hierarchy" - lielākais blakusesošais solis bija 1,20 (h1/body),
   *    kaut mērķis ir vismaz 1,25. Abi jaunie soļi tagad ir 1,25+.
   */
  --ui-t-xs: 12px;                 /* 11 -> 12: floors funkcionālo tekstu */
  --ui-t-s: 12.5px;                /* nemainīts, jau virs 12px grīdas */
  --ui-t-m: 14px;
  --ui-t-b: 16px;                  /* 15 -> 16: solis pret --ui-t-s = 1,28 (bija 1,20) */
  --ui-t-l: 20px;                  /* 17 -> 20: solis pret --ui-t-b = 1,25 (bija 1,13) */
  --ui-t-xl: 21px;
  --ui-t-d: clamp(24px, 2.6vw, 30px);

  /* atstarpes: 4 8 12 16 24 32 */
  --ui-a1: 4px; --ui-a2: 8px; --ui-a3: 12px; --ui-a4: 16px; --ui-a5: 24px; --ui-a6: 32px;

  /* forma */
  --ui-r-s: 10px;
  --ui-r-m: 14px;
  --ui-r-l: 18px;
  --ui-r-pill: 999px;
  --ui-ena-1: 0 1px 2px rgba(8, 49, 73, .06), 0 1px 1px rgba(8, 49, 73, .04);
  --ui-ena-2: 0 6px 18px rgba(8, 49, 73, .08), 0 1px 3px rgba(8, 49, 73, .06);
  --ui-ena-3: 0 14px 36px rgba(8, 49, 73, .14), 0 2px 6px rgba(8, 49, 73, .08);
  /*
   * Kustība (dizaina brīfs v2, 9.1). Tie paši četri ilgumi, kas /crm2, un tie
   * dzīvo TIKAI te: konstruktora lapu CSS milisekundes neraksta, tāpēc "mazāk
   * kustības" ir viens bloks faila apakšā, ne rinda katrā failā.
   */
  --ui-t-press: 80ms;      /* nospiešana, hover, čips */
  --ui-t-ui: 220ms;         /* slēdzis, akordeons, birka */
  --ui-t-sheet: 320ms;      /* panelis un modālis ienāk */
  --ui-t-sheet-out: 200ms;  /* un aiziet ātrāk */
  --ui-t-skats: 250ms;      /* soļa maiņa */
  --ui-t-indikators: 900ms; /* cikliskais ielādes pulss */
  --ui-e-out: cubic-bezier(.2, .7, .2, 1);
  --ui-e-loksne: cubic-bezier(.32, .72, 0, 1);
  /* Saīsinājums vecajām deklarācijām: ilgums un līkne vienā vērtībā. */
  --ui-kustiba: var(--ui-t-ui) var(--ui-e-out);

  /* skāriena mērķis: nekad zem 44 px telefonā */
  --ui-skariens: 44px;
}

* { box-sizing: border-box; }
/* [hidden] uzvar jebkuru autora display: citādi .ui-slidnis (grid) un .ui-poga
   (inline-flex) paliek redzami arī tad, kad JS tos slēpj ar hidden, un
   akordeons nestrādā vispār (adversāra atradums 05.09.2026). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ui-zeme); color: var(--ui-tinte);
  font: 400 var(--ui-t-m)/1.5 var(--ui-fonts);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: var(--ui-t-d); }
h2 { font-size: var(--ui-t-l); }
h3 { font-size: var(--ui-t-b); }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }

/* ── Kartīte ───────────────────────────────────────────── */
/* Pulējums 05.09.2026 (Gustavs: "modernākas, clean, profesionālākas"):
   mīkstāka, divslāņu ēna un caurspīdīga robeža rgba(11,31,51,.06) - tā ir
   viena un tā pati navy tinte, kas atkārtojas visā šajā sadaļā (čipa hover,
   primārās pogas ēnas), nevis jauna krāsa; skaitļi 11,31,51 nav --ui-navy
   RGB (8,49,73) - tie ir apzināti mazliet citādi, tuvāk neitrālai tintei, ne
   zīmola navy, tāpēc ēnas/robežas neizskatās pēc zīmola krāsas, kas noplūdusi. */
.ui-karte {
  background: var(--ui-karte); border: 1px solid rgba(11, 31, 51, .06);
  border-radius: var(--ui-r-l);
  box-shadow: 0 1px 3px rgba(11, 31, 51, .06), 0 8px 24px rgba(11, 31, 51, .06);
}

/* ── Pogas ─────────────────────────────────────────────── */
/* Fokusa gredzenu (2px --ui-navy, 2px offset) VISĀM pogām un čipiem jau dod
   universālais `:focus-visible` augšā - te to nedublējam. (Divas vietas ŠAJĀ
   failā PĀRRAKSTA to ar nolūku, ne dublē: .ui-solis-galva h2 button, jo
   `all: unset` to nodzēš, un .ui-parslegs input, jo pats input ir vizuāli
   paslēpts un gredzens jāliek uz blakus esošā .ui-slidis.) */
.ui-poga {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-a2);
  min-height: var(--ui-skariens); padding: 0 var(--ui-a4);
  border-radius: var(--ui-r-pill); border: 1px solid var(--ui-robeza-vadikla);
  background: var(--ui-karte); color: var(--ui-tinte); font-weight: 500;
  transition: background var(--ui-kustiba), border-color var(--ui-kustiba),
    box-shadow var(--ui-kustiba), transform var(--ui-kustiba);
}
/* Sekundārā (kontūras) poga: hover dabū vieglu navy tintes fonu, ne tikai
   robežas krāsu - .galvena un .klusa zemāk to pārraksta ar savu fonu. */
.ui-poga:hover { border-color: var(--ui-navy); background: rgba(11, 31, 51, .04); }
.ui-poga:active { transform: translateY(1px); }
.ui-poga.galvena {
  background: var(--ui-navy); border-color: var(--ui-navy); color: #fff;
  box-shadow: 0 1px 2px rgba(11, 31, 51, .2);
}
.ui-poga.galvena:hover {
  background: var(--ui-navy-2); border-color: var(--ui-navy-2);
  box-shadow: 0 4px 12px rgba(11, 31, 51, .18);
}
/* Primārajai pogai scale, ne translateY: pacēlums der kontūras pogai, bet
   pildītai pogai ar ēnu translateY izskatās pēc lēciena, ne piespiediena. */
.ui-poga.galvena:active { transform: scale(.97); }
.ui-poga.klusa { border-color: transparent; background: transparent; color: var(--ui-kluss); }
.ui-poga.klusa:hover { background: var(--ui-zeme); color: var(--ui-tinte); }
.ui-poga svg { width: 18px; height: 18px; flex: none; }
.ui-poga:disabled, .ui-cips:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* Čips: izvēle no dažām vērtībām. aria-pressed nosaka izskatu, ne klase. */
.ui-cips {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--ui-skariens); padding: 0 14px; border-radius: var(--ui-r-pill);
  border: 1px solid var(--ui-robeza-vadikla); background: var(--ui-karte);
  color: var(--ui-tinte); font-size: var(--ui-t-s); font-weight: 500;
  transition: background var(--ui-t-press) var(--ui-e-out),
    border-color var(--ui-t-press) var(--ui-e-out),
    box-shadow var(--ui-t-press) var(--ui-e-out),
    transform var(--ui-t-press) var(--ui-e-out);
}
.ui-cips:hover { border-color: var(--ui-navy); background: rgba(11, 31, 51, .04); }
/* .97, ne .98 (brīfs v2, 9.4): uz telefona divi procenti ir tieši tas, ko var
   just, un tā ir vienīgā atbilde uz pieskārienu, kas nav krāsas maiņa. */
.ui-cips:active { transform: scale(.97); }
.ui-cips[aria-pressed="true"], .ui-cips.akt { background: var(--ui-navy); border-color: var(--ui-navy); color: #fff; }
.ui-cipi { display: flex; flex-wrap: wrap; gap: var(--ui-a2); }

/* ── Ievades ──────────────────────────────────────────── */
.ui-lauks { display: grid; gap: 6px; }
.ui-lauks > label, .ui-birka { font-size: var(--ui-t-s); font-weight: 500; color: var(--ui-kluss); }
.ui-ievade {
  width: 100%; min-height: var(--ui-skariens); padding: 0 var(--ui-a3);
  border: 1px solid var(--ui-robeza-vadikla); border-radius: var(--ui-r-s);
  background: var(--ui-karte); font-size: 16px;   /* 16px: iOS tad netuvina */
  transition: border-color var(--ui-kustiba), box-shadow var(--ui-kustiba);
}
.ui-ievade:focus { border-color: var(--ui-navy); box-shadow: 0 0 0 3px rgba(8, 49, 73, .12); outline: none; }
.ui-ievade::placeholder { color: var(--ui-kluss-2); }
select.ui-ievade {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E6A74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Slīdnis ar vērtību labajā pusē. */
.ui-slidnis { display: grid; gap: 6px; }
.ui-slidnis-galva { display: flex; justify-content: space-between; align-items: baseline; }
.ui-slidnis-galva label { font-size: var(--ui-t-s); font-weight: 500; color: var(--ui-kluss); }
.ui-slidnis-vert { font-size: var(--ui-t-m); font-weight: 600; font-variant-numeric: tabular-nums; }
input[type="range"].ui-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0;
}
input[type="range"].ui-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--ui-robeza-2); }
input[type="range"].ui-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ui-robeza-2); }
input[type="range"].ui-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--ui-karte); border: 2px solid var(--ui-navy); box-shadow: var(--ui-ena-2);
}
input[type="range"].ui-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ui-karte);
  border: 2px solid var(--ui-navy); box-shadow: var(--ui-ena-2);
}

/* Pārslēgs: rindā birka un slēdzis, ne rūtiņa. */
.ui-parslegs { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-a3); min-height: var(--ui-skariens); cursor: pointer; }
.ui-parslegs input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-parslegs .ui-slidis {
  flex: none; width: 42px; height: 24px; border-radius: 12px; background: var(--ui-robeza-2); position: relative;
  transition: background var(--ui-kustiba);
}
.ui-parslegs .ui-slidis::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--ui-ena-1); transition: transform var(--ui-kustiba);
}
.ui-parslegs input:checked + .ui-slidis { background: var(--ui-navy); }
.ui-parslegs input:checked + .ui-slidis::after { transform: translateX(18px); }
.ui-parslegs input:focus-visible + .ui-slidis { outline: 2px solid var(--ui-navy); outline-offset: 2px; }

/* ── Soļi ─────────────────────────────────────────────── */
.ui-solis { padding: var(--ui-a5); display: grid; gap: var(--ui-a4); }
.ui-solis-galva { display: flex; align-items: center; gap: var(--ui-a3); }
.ui-solis-nr {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ui-navy); color: #fff; font-size: var(--ui-t-s); font-weight: 600;
}
.ui-solis-galva h2 { flex: 1; }
/* Soļa galvas klikšķis dzīvo POGĀ h2 iekšā, ne uz paša h2: tad ekrāna
   lasītājam virsraksti paliek virsraksti (adversāra atradums 15). */
.ui-solis-galva h2 button {
  all: unset; display: block; width: 100%; cursor: pointer; font: inherit; color: inherit;
  min-height: var(--ui-skariens); border-radius: var(--ui-r-s);
}
.ui-solis-galva h2 button:focus-visible { outline: 2px solid var(--ui-navy); outline-offset: 2px; }
.ui-piezime { font-size: var(--ui-t-s); color: var(--ui-kluss); line-height: 1.5; }

/* Soļu navigācija: numurēti punkti, uz kuriem var klikšķināt. */
.ui-solu-nav { display: flex; gap: var(--ui-a2); flex-wrap: wrap; }
.ui-solu-nav button {
  min-width: var(--ui-skariens); height: var(--ui-skariens); padding: 0 12px; border-radius: var(--ui-r-pill);
  border: 1px solid var(--ui-robeza-vadikla); background: var(--ui-karte); color: var(--ui-kluss);
  font-size: var(--ui-t-s); font-weight: 600;
}
.ui-solu-nav button[aria-current="step"] { background: var(--ui-navy); border-color: var(--ui-navy); color: #fff; }
.ui-solu-nav button.pabeigts { border-color: var(--ui-navy); color: var(--ui-navy); }

/* ── Cena ─────────────────────────────────────────────── */
.ui-cena { font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ui-cena small { font-size: .45em; font-weight: 500; color: var(--ui-kluss); margin-left: 6px; }

/* ── Brīdinājums un zaļā zīme ─────────────────────────── */
.ui-brid { padding: var(--ui-a3) var(--ui-a4); border-radius: var(--ui-r-m); font-size: var(--ui-t-s); line-height: 1.5; }
.ui-brid.sarkans { background: var(--ui-sarkans-2); color: var(--ui-sarkans); }
.ui-brid.zals { background: var(--ui-zals-2); color: var(--ui-zals); }
.ui-brid.saule { background: var(--ui-saule-2); color: #7A5A12; }

/* ── Iegults režīms (iframe Mozello lapā, sk. public/iegulsana.js) ──────
   Galveni un izstrādes zīmi rāda pati Mozello lapa, tāpēc iframe iekšā tās
   slēpj; lapas fons tad ir tas pats, kas Mozello lapai ap iframe. */
html.iegults body > header { display: none; }
html.iegults .badge { display: none; }

/* ── Palīgi ───────────────────────────────────────────── */
.ui-tikai-lasitajam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/*
 * IELĀDES STĀVOKLIS IZVĒLES KARTĪTĒM (brīfs v2, 9.4).
 *
 * Tipveida projekta izvēle pārbūvē visu ainu, un smagākajā gadījumā tas prasa
 * pusotru sekundi. Bez atbildes kartīte tajā laikā izskatās nenospiesta, un
 * cilvēks spiež otrreiz - un tad pārbūve notiek divreiz.
 *
 * Stāvokli uzliek solu-palidzi.js uz pointerdown, PIRMS pārbūves: pārlūks
 * paspēj to uzzīmēt, kamēr klikšķis vēl nav aizgājis. Kustība ir tikai
 * opacity, tāpēc tā nemaksā neko pat pārbūves laikā.
 */
.ui-ielade { position: relative; }
.ui-ielade::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ui-navy); opacity: .10;
  animation: ui-ielade-pulss var(--ui-t-indikators) var(--ui-e-out) infinite alternate;
}
@keyframes ui-ielade-pulss { from { opacity: .06; } to { opacity: .16; } }

/*
 * Lietotāja izvēle "mazāk kustības". VIENĪGĀ vieta konstruktora sistēmā.
 * Žetoni uz nulli ir īstais labojums; zvaigznītes noteikums ir tīkls zem tā.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-t-press: 0ms; --ui-t-ui: 0ms;
    --ui-t-sheet: 1ms; --ui-t-sheet-out: 1ms; --ui-t-skats: 0ms;
  }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}