/**
 * Grunnregler som må gjelde overalt.
 *
 * Ikke en komponent - de få reglene som ellers må gjentas i hver enkelt
 * fil, pluss avstandsskalaen: den er temauavhengig og må finnes før noen
 * komponent lastes, og `base/` er det eneste som alltid lastes først.
 */

/* Avstandsskala, 4px-trinn. Brukes som `var(--space-N)` uten reserveverdi
   i alle komponenter; komponent-CSS og side-CSS definerer den ALDRI selv. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

/* Rom i paneler og kort. kant: side eller panel mot kanten.
   kort: polstring i kort. mellom: avstand mellom kort og seksjoner = kant.
   Like på PC og mobil. Lesevennlig profil i size.css. */
:root {
  --ds1-rom-kant: 8px;
  --ds1-rom-kort: 10px;
  /* Jaktleder: mer luft mellom kort stablet i høyden, som i Profil (16 px). Ttas har rom-kant (8 px). */
  --ds1-rom-mellom: var(--space-4, 16px);
}

/* Jaktleder: Normal-profilen (uten data-ui-size) har appens tekstskala, ikke ttas sin 13/12 px.
   Komponenter fra ttas skriver var(--tt-ui-text, 13px); her får de temaets brødtekst (15 px) og
   feltetikettens 12 px, og valgene i nedtrekk står i brødtekst. size.css overstyrer dem når data-ui-size er satt. */
:root {
  --tt-ui-text: var(--ui-font-base, 0.9375rem);
  --tt-ui-label: 12px;
  --tt-ui-option: var(--tt-ui-text);
}
/* Appens skall setter data-ui-size fra designmalens «Størrelse» (Normal/Lesevennlig). Da følger temaets
   --ui-font-* profilen, som i /design (design/assets/app.css), så meny, skall og ui-type-scale.css får samme størrelse. */
html[data-ui-size] {
  --ui-font-base: var(--tt-ui-text);
  --ui-font-sm: var(--tt-ui-text);
  --ui-font-xs: var(--tt-ui-label);
}

/**
 * `hidden` skal skjule. Alltid.
 *
 * Nettleserens standard er `[hidden] { display: none }` med LAVEST mulig
 * spesifisitet. Enhver komponent som setter `display: flex` på sin egen
 * klasse vinner dermed over den, og elementet blir stående synlig selv om
 * attributtet er satt. Det er en stille feil: JS-en gjor riktig, DOM-en ser
 * riktig ut, men brukeren ser noe annet.
 *
 * Før denne regelen lappet komponentene det hver for seg - filvelger,
 * tool-rail, faner og form-controls hadde hver sin variant. Det er ikke noe
 * en komponentforfatter skal trenge å huske på.
 */
[hidden] {
  display: none !important;
}

/* Skjult for øyet, lest av skjermleser.
 *
 * `clip-path` framfor `display: none` og `visibility: hidden`: begge de to
 * fjerner elementet fra skjermleseren også, og da er poenget borte.
 * Elementet må være i tilgjengelighetstreet, bare ikke synlig.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Når den skjulte teksten skal fram ved tastaturfokus - typisk
   «hopp til innhold»-lenker. */
.sr-only-fokuserbar:focus,
.sr-only-fokuserbar:focus-visible {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}

/* Felles inntoning for popovere og paneler.
 *
 * Lå i `datotidvelger.css`, men ble også brukt av `tallvelger.css`. En
 * komponent skal ikke være avhengig av at en ANNEN komponent tilfeldigvis
 * er lastet: uten datovelgeren fikk tallvelgeren ingen animasjon, og
 * ingenting feilet - den bare stod stille.
 *
 * `base/` lastes alltid, så her når begge den.
 */
@keyframes ds1SlideIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Rollesymboler som monokrome SVG-masker følger tekstfargen i knapper, lister og kartmarkører. */
.fas:is(.fa-jl-rifle, .fa-jl-driver, .fa-jl-hundefoerer, .fa-jl-hytte, .fa-jl-baalsted, .fa-jl-jakttaarn),
.fa-solid:is(.fa-jl-rifle, .fa-jl-driver, .fa-jl-hundefoerer, .fa-jl-hytte, .fa-jl-baalsted, .fa-jl-jakttaarn) { width: auto; }
.fas:is(.fa-jl-rifle, .fa-jl-driver, .fa-jl-hundefoerer, .fa-jl-hytte, .fa-jl-baalsted, .fa-jl-jakttaarn)::before,
.fa-solid:is(.fa-jl-rifle, .fa-jl-driver, .fa-jl-hundefoerer, .fa-jl-hytte, .fa-jl-baalsted, .fa-jl-jakttaarn)::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
.fas.fa-jl-rifle::before, .fa-solid.fa-jl-rifle::before {
  -webkit-mask-image: url("ikoner/rifle.svg");
          mask-image: url("ikoner/rifle.svg");
}
.fas.fa-jl-driver::before, .fa-solid.fa-jl-driver::before {
  -webkit-mask-image: url("ikoner/driver.svg");
          mask-image: url("ikoner/driver.svg");
}
.fas.fa-jl-hundefoerer::before, .fa-solid.fa-jl-hundefoerer::before {
  -webkit-mask-image: url("ikoner/hundefoerer.svg");
          mask-image: url("ikoner/hundefoerer.svg");
}

/* Jaktleder: kartikoner, egne tegninger i 24-rutenett med strek 2 som Font Awesome-ikonene rundt.
   Samme maskeoppskrift som fa-jl-rifle, men kvadratiske (1,15 em) som FA-ikonene i kartknappene.
   fa-jl-avstandsmaler: avstandsmåler sett fra siden med linse foran og dobbeltpil under.
   fa-jl-del-posisjon-hand: hånd som rekker fram en kartnål, på «Del posisjon».
   fa-jl-gps: lokaliser, en ring med fire merker og prikk i midten, på kartknappen GPS-sporing. */
.fas:is(.fa-jl-avstandsmaler, .fa-jl-del-posisjon-hand, .fa-jl-gps),
.fa-solid:is(.fa-jl-avstandsmaler, .fa-jl-del-posisjon-hand, .fa-jl-gps) { width: auto; }
.fas:is(.fa-jl-avstandsmaler, .fa-jl-del-posisjon-hand, .fa-jl-gps)::before,
.fa-solid:is(.fa-jl-avstandsmaler, .fa-jl-del-posisjon-hand, .fa-jl-gps)::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask: no-repeat center / contain;
          mask: no-repeat center / contain;
}
.fas.fa-jl-avstandsmaler::before, .fa-solid.fa-jl-avstandsmaler::before {
  -webkit-mask-image: url("ikoner/avstandsmaler.svg");
          mask-image: url("ikoner/avstandsmaler.svg");
}
.fas.fa-jl-del-posisjon-hand::before, .fa-solid.fa-jl-del-posisjon-hand::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M15 1.2 C12.6 1.2 10.9 3 10.9 5.3 C10.9 8.1 15 12.8 15 12.8 C15 12.8 19.1 8.1 19.1 5.3 C19.1 3 17.4 1.2 15 1.2 Z M15 3.9 A1.4 1.4 0 1 0 15 6.7 A1.4 1.4 0 1 0 15 3.9 Z'/><rect x='1' y='14.2' width='3' height='8.3' rx='0.8'/><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 21 H13.5 C14.4 21 15.1 20.7 15.8 20.2 L21.2 16.6 C22.2 15.9 21.4 14.4 20.2 14.9 L15.6 17.1'/><path d='M4.5 15.6 H8.8 C10 15.6 11 16.1 11.7 16.9 C12.3 17.6 11.8 18.5 10.9 18.5 H8.4'/></g></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M15 1.2 C12.6 1.2 10.9 3 10.9 5.3 C10.9 8.1 15 12.8 15 12.8 C15 12.8 19.1 8.1 19.1 5.3 C19.1 3 17.4 1.2 15 1.2 Z M15 3.9 A1.4 1.4 0 1 0 15 6.7 A1.4 1.4 0 1 0 15 3.9 Z'/><rect x='1' y='14.2' width='3' height='8.3' rx='0.8'/><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 21 H13.5 C14.4 21 15.1 20.7 15.8 20.2 L21.2 16.6 C22.2 15.9 21.4 14.4 20.2 14.9 L15.6 17.1'/><path d='M4.5 15.6 H8.8 C10 15.6 11 16.1 11.7 16.9 C12.3 17.6 11.8 18.5 10.9 18.5 H8.4'/></g></svg>");
}
.fas.fa-jl-gps::before, .fa-solid.fa-jl-gps::before {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='7'/><path d='M12 1.5 V5 M12 19 V22.5 M1.5 12 H5 M19 12 H22.5'/></g><circle cx='12' cy='12' r='2.6'/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='7'/><path d='M12 1.5 V5 M12 19 V22.5 M1.5 12 H5 M19 12 H22.5'/></g><circle cx='12' cy='12' r='2.6'/></svg>");
}

.fas.fa-jl-hytte::before, .fa-solid.fa-jl-hytte::before {
  -webkit-mask-image: url("ikoner/hytte.svg");
          mask-image: url("ikoner/hytte.svg");
}
.fas.fa-jl-baalsted::before, .fa-solid.fa-jl-baalsted::before {
  -webkit-mask-image: url("ikoner/baalsted.svg");
          mask-image: url("ikoner/baalsted.svg");
}
.fas.fa-jl-jakttaarn::before, .fa-solid.fa-jl-jakttaarn::before {
  -webkit-mask-image: url("ikoner/jakttaarn.svg");
          mask-image: url("ikoner/jakttaarn.svg");
}