/*--------------------------------- litir --------------------------------------------*/
/* Strava-appelsínugulur sem brand-litur fyrir Calcite 5.x og ArcGIS components */
:root {
  --calcite-color-brand: #fc4c02;
  --calcite-color-brand-hover: #ce3e00;
  --calcite-color-brand-press: #af3501;

  /* Samsýnar-blátt, sótt beint úr bókstöfunum í image/SamsynLogo.svg (fill: rgb(10,
     94, 143)). Eigin breyta en ekki --calcite-color-brand: sú er Strava-appelsínugul
     og á við vefinn í heild, en "Um Samsýn"-kaflinn fjallar um Samsýn sjálft, ekki
     Strava-eiginleikann. */
  --samsyn-color-brand: #0a5e8f;
}

/* Ekkert má sjást fyrr en einingarnar frá CDN eru skilgreindar.
   Óskilgreind custom elements eru bara óþekkt mörk fyrir vafranum: hann teiknar
   innihald þeirra sem venjulegan inline-texta. Þess vegna blossaði allur fasti
   textinn úr gluggunum — hjálpin, Strava-innskráningin, hausar spjaldanna — upp á
   hvítum grunni þar til js.arcgis.com/5.1/ náði að skilgreina þær.
   :defined passar við ÖLL innbyggð mörk, svo :not(:defined) hittir eingöngu custom
   elements sem enn hefur ekki verið stigið upp; um leið og skilgreiningin kemur
   hættir reglan að passa af sjálfu sér og engu þarf að taka af í JS.
   visibility og ekki display: none — mörkin halda plássi sínu, svo #mapEl fellur
   ekki saman og kortið teiknast ekki upp úr núlli við skilgreiningu. */
:not(:defined) {
  visibility: hidden;
}

/* Strok niður á síma, á stað sem hvorki kortið né spjald gleypti hreyfinguna, kveikti
   pull-to-refresh vafrans. Síðan endurhlóðst og aðgangstokenið — sem lifir aðeins í
   minni — fór með, svo notandinn lenti á ólokanlega innskráningarglugganum mitt í vinnu.
   Auðframkallanlegt á Android.

   Skjalið á aldrei að skruna: kortið fyllir sýnina og öll spjöld skruna innan sín.
   overflow: hidden tekur því skrunið af, og overscroll-behavior: none tekur bæði
   pull-to-refresh og keðjunina úr innri skrunsvæðum sem endar á rótinni.

   overflow HÉR klippir ekkert: body er static, svo grunnkassi absolute-stöðuðu barnanna
   (#activityPanel, #activityCard, .samsynLogo) er ICB og ekki body. Calcite-gluggarnir
   eru position: fixed innvortis og sleppa líka. Eina barnið í venjulegu flæði er #mapEl,
   nákvæmlega 100%/100%.

   Sé iOS enn að endurhlaða er næsta skref position: fixed með inset: 0 á body — en
   AÐEINS mælt: það gerir body að grunnkassa barnanna hér að ofan, og iOS á það til að
   skruna ekki fókusaðan innslátt undan lyklaborðinu inni í fixed búk. */
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

#mapEl {
  height: 100%;
  width: 100%;
}

/* Hægra megin, fyrir ofan attribution-línuna (mæld 16px há). Vinstra megin lá það
   undir æfingalistanum, sem er opinn sjálfgefið á breiðum skjá og huldi það alveg.

   Klasinn liggur á AKKERINU sem umlykur myndina, ekki myndinni sjálfri: það er
   smellflöturinn sem á að vera staðsettur. display: block svo akkerið sé nákvæmlega á
   stærð myndarinnar — inline akkeri fengi grunnlínubil undir sig og teldist hærra en
   lógóið, sem hefði ýtt því upp fyrir 28px-mörkin. */
.samsynLogo {
  position: absolute;
  display: block;
  bottom: 28px;
  right: 8px;
  z-index: 1;
}

/* Mælitólið sest í bottom-right slottið (mælt 300x59 við hægri brún) og legðist
   ofan á lógóið á meðan mælt er. Það víkur því til hliðar frekar en upp: tólið
   stækkar lóðrétt eftir innihaldi en breiddin er föst. */
body:has(arcgis-distance-measurement-2d) .samsynLogo {
  right: 332px;
}

/* Lokunar-X-ið í mæliglugganum, búið til í toggleMeasurement.
   position: absolute gerir HVORT TVEGGJA og hvorugt er valfrjálst: það heldur hnappnum
   UTAN flex-röðunar slottsins (bottom-right raðar börnum í row-reverse, svo hnappurinn
   hefði annars lagst VIÐ HLIÐINA á glugganum og ýtt lógóinu enn lengra), og það staðsetur
   hann miðað við slot-röðina, sem skreppur saman utan um gluggann. Þess vegna fylgir X-ið
   efri brún hans sjálfkrafa þegar hann vex úr 59px leiðbeiningum í 114px niðurstöðu —
   engin hæðartala er skrifuð hér og ekkert JS mælir hana.

   Sértæknin er MEIRI en #mapEl > calcite-action[slot] hér að neðan, með vilja: sá veljari
   grípur líka þennan hnapp og gefur honum hvítan kassa með skugga, sem á við um stök tól
   ÚTI á kortinu en ekki hnapp sem situr inni í hvítum glugga. Gagnsæi grunnurinn verður að
   fara gegnum --calcite-action-background-color en ekki background-color eingöngu, því
   Calcite málar innri hnappinn eftir breytunni. */
#mapEl > calcite-action[slot].measurementClose {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  background-color: transparent;
  box-shadow: none;
  --calcite-action-background-color: transparent;
  --calcite-action-background-color-hover: var(--calcite-color-foreground-2);
  --calcite-action-background-color-press: var(--calcite-color-foreground-3);
}

/* Pláss fyrir X-ið hægra megin INNI í glugganum. Án þessa liggur leiðbeiningatextinn
   („Start measuring by clicking in the map...") undir krossinum, því hann nýtir fulla
   breidd gluggans.

   --esri-widget-padding er ekki innbrot í skugga-DOM heldur breyta sem arcgis-map setur
   SJÁLFT á slottuð börn (::slotted(*)), og tólið les hana í padding á innri kassanum —
   mælt: .root fer úr „12px 16px" í það sem hér stendur. y-bilið og vinstri hliðin eru
   áfram SDK-gildin, svo aðeins hægri hliðin er okkar tala: 4px brún + 24px hnappur
   (scale s) + 12px bil að texta. */
#mapEl > arcgis-distance-measurement-2d {
  --esri-widget-padding: var(--esri-widget-padding-y) 40px var(--esri-widget-padding-y) var(--esri-widget-padding-x);
}

/* Á farsímaskjá er lógóið minnkað í 72px breidd — myndin ber preserveAspectRatio svo
   hæðin fylgir sjálfkrafa (34 -> ~24px) og haldist innan við 28px-mörkin að neðan.
   Sama brotmark og RESPONSIVE_BREAKPOINT í samsyn.js. */
@media (max-width: 666px) {
  .samsynLogo img {
    width: 72px;
    height: auto;
  }

  /* Á síma er ekkert pláss við hlið mæligluggans til að víkja í: glugginn er 300px
     hvað sem skjábreiddinni líður, svo á 390px skjá stæðu 74px eftir vinstra megin og
     lógóið (72px + brún) klemmdist hálft út fyrir skjáinn — mælt. Það víkur því alveg
     á meðan mælt er og kemur aftur um leið og glugganum er lokað. */
  body:has(arcgis-distance-measurement-2d) .samsynLogo {
    display: none;
  }
}

/*--------------------------------- tól á korti --------------------------------------------*/

/* Stakir hnappar á kortinu fá sama kassaútlit og ArcGIS-tólin.
   appearance="solid" í index.html er nauðsynlegt: sjálfgefið appearance á
   calcite-action er "transparent" og þá verður hover-liturinn hálfgagnsær
   (--calcite-color-transparent-hover) svo kortið skín í gegn. Með "solid"
   notar Calcite ógagnsæju litina: hvítt, og ljósgrátt við hover. */
/* Beinir afkomendur kortsins EINIR. Veljarinn var calcite-action[slot] og greip þá
   líka hnappa í spjaldahausum (trektina á æfingalistanum), sem fengu þá hvítan
   kassa með skugga innan í hausnum þar sem loka-krossinn er gagnsær.
   Seinni veljarinn er nauðsynlegur af sömu ástæðu og hann er þröngur: hnapparnir
   í .metaToolRow eru hvorki beinir afkomendur #mapEl né með slot-eigind — slottið
   er á röðinni — svo fyrri veljarinn nær ekki til þeirra og þeir stæðu kassalausir. */
#mapEl > calcite-action[slot],
#mapEl > .metaToolRow > calcite-action {
  background-color: var(--calcite-color-foreground-1);
  --calcite-action-background-color: var(--calcite-color-foreground-1);
  --calcite-action-background-color-hover: var(--calcite-color-foreground-2);
  --calcite-action-background-color-press: var(--calcite-color-foreground-3);
  --calcite-action-corner-radius: var(--calcite-corner-radius-xs);
  border-radius: var(--calcite-corner-radius-xs);
  box-shadow: var(--calcite-shadow-md);
  overflow: hidden;
}

/* Lárétta röðin með uppflettiritunum (málrofi, mælaborð, hjálp) á milli
   leitartólsins og grunnkortarofans.

   10px er MÆLT og ekki valið: arcgis-map setur margin-bottom: 10px á hvert
   slottað barn í top-right (mælt í headless Chrome — hver hnappur í stæðunni
   skilar marginBottom "10px"). Lárétta bilið er sama tala svo röðin líti eins
   út og lóðréttu bilin fyrir ofan og neðan hana.

   Röðin þarf ekki hægri-jöfnun sjálf: skuggi arcgis-map notar
   align-items: flex-end á top-right, svo div-inn er ekki teygður og situr
   hægra megin eins og hin tólin.

   Mælaborðshnappurinn er hidden þar til æfingar eru komnar (dashboard.js).
   gap telur ekki display:none börn, svo röðin sýnir tvo hnappa án eyðu á
   milli þeirra fram að því. */
.metaToolRow {
  display: flex;
  gap: 10px;
}

/* Hleðslumerkið, sjá index.html #hladslaMerki. Sama hvítur-kassi-með-skugga-útlit og
   calcite-action hnapparnir hér að ofan (línu 101-110), svo merkið falli inn í röðina
   af kortatólum þótt það sé ekki sjálft calcite-action. */
.hladslaMerki {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-bottom: 10px;
  background-color: var(--calcite-color-foreground-1);
  border-radius: var(--calcite-corner-radius-xs);
  box-shadow: var(--calcite-shadow-md);
  font-size: var(--calcite-font-size--1, 0.8125rem);
  white-space: nowrap;
}

/* [hidden] ræður hér ekki sjálfkrafa: höfundarstílar (þessi skrá) vega alltaf þyngra en
   [hidden] { display: none } úr staðalstíl vafrans, óháð röð eða sértækni (specificity)
   — sá er user-agent-uppruni, þessi er author. Án þessarar reglu situr display: flex
   hér að ofan í gildi og merkið hverfur aldrei, sama hvað JS setur .hidden í. */
.hladslaMerki[hidden] {
  display: none;
}

/* Fáninn á málrofanum. 16x12 svo hann mælist eins og Calcite-táknin í stæðunni
   (scale "m" gefur 16px) — annars stæði hann út úr röðinni.

   object-fit: cover OG föst hæð, ekki height: auto: fánarnir hafa ÓLÍK hlutföll,
   25:18 og 2:1, og með sjálfvirkri hæð hefðu þeir mælst tveir ólíkir hnappar sem
   hoppa til við skipti. Union Jack klippist því lítillega á hliðunum, sem heldur
   öllum krossinum og nær öllu Patreksstrikinu.

   Skuggaramminn er NAUÐSYNLEGUR og ekki skraut: hnappurinn er hvítur
   (--calcite-color-foreground-1) og hvítu fletirnir í báðum fánum hefðu runnið
   saman við hann án brúnar. */
.malFani {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Innskráningarhnappurinn á kortinu. Ólíkt calcite-action hér að ofan er hann
   ekki hvítur kassi heldur heldur brand-litnum (Strava-appelsínugulum), skugginn
   er bara til að lyfta honum frá kortinu. */
calcite-button[slot] {
  border-radius: var(--calcite-corner-radius-xs);
  box-shadow: var(--calcite-shadow-md);
}

/* Grunnkortarofinn er 69x69 á breiðum skjá og tekur of stóran hluta af farsímaskjá.
   Málin (64px myndin og .container utan um hana) eru HARÐKÓÐUÐ inni í skugga-DOM-i
   arcgis-basemap-toggle og engin CSS-breyta er í boði — mælt í headless Chrome — svo
   stílskráin okkar nær ekki til þeirra. zoom (ólíkt transform: scale) erfist inn í
   skuggann OG minnkar kassann í flæðinu, svo tólastæðan fyrir neðan færist upp um leið.
   Mælt: 69px -> 52px. Titillinn ("Loftmynd"/"Kort") er 10px í skugganum og teiknast
   því í ~7,5px — smár, en hann er skýring undir myndinni sem segir sömu sögu og hún.
   Sama brotmark og RESPONSIVE_BREAKPOINT í samsyn.js. */
@media (max-width: 666px) {
  /* Rofinn í þrívíddarglugganum er sami komponent, búinn til í scene.js og án auðkennis —
     hann er beinn afkomandi arcgis-scene. */
  #basemapToggleTool,
  arcgis-scene > arcgis-basemap-toggle {
    zoom: 0.75;
  }
}

/*--------------------------------- Strava innskráning --------------------------------------------*/

.strava-intro {
  text-align: center;
}

.strava-intro p {
  margin: 0 0 1rem;
  font-size: var(--calcite-font-size-0);
}

/* Veljarinn þarf p-ið með sér: .strava-intro p hér að ofan er sértækari en stakur
   klasi og át annars margin-toppinn, svo textinn lá alveg upp við hnappinn. */
.strava-intro p.strava-intro__note {
  margin: 1rem 0 0;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

/* Textinn og orðmerkið sem flex-röð: align-items miðjar orðmerkið lóðrétt á
   textann (grunnlínujöfnun setti það of neðarlega) og gap ræður bilinu nákvæmlega —
   línubilið í markinu telur ekki með milli flex-hluta. */
.stravaConnect {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.stravaLogo {
  width: 77px;
  height: 15px;
}

/*--------------------------------- kvótatilkynning --------------------------------------------*/

/* Neðst fyrir miðju yfir kortinu. Hvorki gluggi né modal: hún má ALDREI loka neinu —
   æfingarnar sem komust inn áður en kvótinn kláraðist eru enn á kortinu og eiga að vera
   skoðanlegar meðan beðið er. Þar liggur allur munurinn á henni og #stravaDialog.

   position: absolute en ekki fixed, sömu ástæðu og .samsynLogo og #activityPanel: body er
   static svo grunnkassinn er ICB hvort eð er (sjá athugasemdina efst í skránni).

   z-index: 2 en EKKI 1: #activityPanel og #activityCard eru bæði á 1 og tilkynningin á að
   liggja ofan á þeim. Hún er það eina á kortinu sem er á 2.

   40px að neðan sleppa við attribution-línuna (mæld 16px) með góðri spássíu — sama
   hugsun og 28px hjá .samsynLogo og 60px hjá #activityCard. */
#kvotiNotice {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  inline-size: min(560px, calc(100% - 30px));
  z-index: 2;
  box-shadow: var(--calcite-shadow-md);
}

/* Útrunnin deilislóð. ÞESSI REGLA ER EKKI SNYRTING HELDUR FORSENDA: calcite-notice er
   venjulegur hlutur í flæði skjalsins, og #mapEl fyllir 100%/100% með overflow: hidden á
   body. Án staðsetningar opnast tilkynningin — .open verður satt — en LENDIR UNDIR
   KORTINU og sést hvergi. Þannig var hún fyrst, og prófið mitt las .open og taldi það
   sannað; það mældi DOM-ástand en ekki sýnileika.

   EFST OG EKKI NEÐST eins og #kvotiNotice. Móttakandi útrunninnar slóðar horfir á TÓMT
   kort — tilkynningin er ekki viðbót við efni sem hann er að skoða, hún ER efnið, og
   hún á að vera það fyrsta sem augað finnur. Þar með rekst hún heldur aldrei á
   kvótatilkynninguna, sem er hvort eð er ólíkleg í sömu andrá: sá sem opnar deilislóð er
   ógestur og sækir engar æfingar.

   72px sleppir tólastæðunni efst til hægri (leit, þys, áttaviti) framhjá á mjóum skjá. */
#deilingNotice {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  inline-size: min(560px, calc(100% - 30px));
  z-index: 2;
  box-shadow: var(--calcite-shadow-md);
}

/* Sama leiðrétting og kvótatilkynningin fær: æfingalistinn tekur vinstri 350px á breiðum
   skjá, svo miðja SKJÁSINS er ekki miðja KORTSINS. Á við eftir að móttakandinn skráir sig
   inn með slóðina enn í veffangastikunni. */
body:has(#activityPanel:not([hidden])) #deilingNotice {
  left: calc(50% + 175px);
}

/* Æfingalistinn tekur vinstri 350px á breiðum skjá, svo miðja SKJÁSINS er ekki miðja
   KORTSINS og tilkynningin sat út í kant. 175px er hálf ACTIVITY_PANEL_WIDTH úr config.js
   — sama tala og mapEl.padding.left notar í setUpResponsiveLayout.
   :has á body frekar en klasa úr JS, sama aðferð og #activityCard notar við #loginTool:
   sýnileiki listans er settur á fleiri en einum stað og klasarnir héldust ekki í hendur. */
body:has(#activityPanel:not([hidden])) #kvotiNotice {
  left: calc(50% + 175px);
}

/* Tíminn stendur í eigin línu og er það eina sem breytist á sekúndu fresti. */
.kvoti__teljari {
  margin-block-start: 0.25rem;
  font-weight: var(--calcite-font-weight-medium);
}

.kvoti__hnappur {
  margin-block-start: 0.5rem;
}

/* Sama brotmark og RESPONSIVE_BREAKPOINT í samsyn.js. */
@media (max-width: 666px) {
  /* Listinn fyllir skjáinn á þessari breidd, svo 175px hliðrunin á ekki við og myndi
     ýta tilkynningunni út af skjánum. Tekin af hér, ekki gerð skilyrt að ofan. */
  #kvotiNotice,
  body:has(#activityPanel:not([hidden])) #kvotiNotice {
    bottom: 15px;
    left: 50%;
  }

  /* Spjald valinnar æfingar sest á BOTNINN á síma og er hæst 60% af hæðinni. Tilkynningin
     fer þá upp fyrir það. 60% er ÞAKIÐ en ekki fasta hæðin, svo þetta skilur eftir bil á
     lágu spjaldi — það er ásættanlegt, því skörun er það eina sem má ekki gerast. */
  body:has(#activityCard:not([hidden])) #kvotiNotice {
    bottom: 62%;
  }
}

/*--------------------------------- listi yfir æfingar --------------------------------------------*/

#activityPanel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 350px;
  max-width: 100%;
  z-index: 1;
}

/* Kóngablár vallitur á valinni æfingu. Sami litur og SELECTION_COLOR í samsyn.js.
   Tvo tokena þarf: kantinn vinstra megin á valinni línu og fókusrammann sem
   Calcite dregur utan um hana (hann sótti annars brand-litinn og var appelsínugulur).
   Brand-liturinn sjálfur er látinn í friði svo Strava-hnappurinn haldi sínum lit. */
#activityList {
  --calcite-list-selection-border-color: #4169e1;
  --calcite-color-focus: #4169e1;
}

/* Fölur appelsínugulur bakgrunnur á valinni færslu svo hún sé áberandi.
   Með selection-appearance="border" fær línan ekki container--highlight-selected
   heldur container--border-selected, sem hefur engan eigin bakgrunn. Þess vegna er
   grunnliturinn (--calcite-list-background-color) settur hér í staðinn.
   Hover-liturinn þarf líka að fylgja, annars hyrfi appelsínuguli þegar músin
   fer yfir völdu færsluna. Aðrar færslur halda hvítu og gráa hover-litnum. */
#activityList calcite-list-item[selected] {
  --calcite-list-background-color: #ffecd9;
  --calcite-list-background-color-hover: #ffe0c4;
}

.activityMetrics {
  padding-right: 6px;
  text-align: right;
  white-space: nowrap;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

/* Myndavélartáknið og tölurnar hlið við hlið, táknið lóðrétt miðjað yfir báðar
   textalínurnar. Tölurnar halda sinni hægrijöfnun, svo hægri brún listans helst
   bein óháð því hvaða línur eiga myndir. Umbúðirnar eru aðeins til á þeim línum. */
.activityEnd {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* Sami litur og .activityMetrics svo táknið sitji í sama sjónræna lagi og tölurnar */
.activityPhotoIcon {
  flex: 0 0 auto;
  color: var(--calcite-color-text-2);
}

/* Síurnar undir hausnum á æfingalistanum. Skilalína að neðan svo þær lesist
   sem eigin blokk en ekki sem fyrsta færslan í listanum. */
.activityFilters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-block-end: 1px solid var(--calcite-color-border-3);
}


.activityFilters__empty {
  font-size: var(--calcite-font-size--1);
  color: var(--calcite-color-text-3);
}

/*--------------------------------- spjald valinnar æfingar --------------------------------------------*/

/* Spjaldið liggur efst til vinstri. --card-top er bilið niður að því og er stillt
   eftir því hvaða tól situr fyrir í top-left slotti kortsins; max-block-size er
   reiknuð út frá sömu tölu svo hún fylgi sjálfkrafa með.
   calcite-panel fyllir sjálfgefið út í þá hæð sem því er gefin, svo án fit-content
   teygðist spjaldið yfir nær allan skjáinn. Ytri ID-veljari yfirtekur :host-regluna
   í hlutnum sjálfum. Innra skrun panelsins tekur við þegar spjaldið verður of langt;
   60px að neðan sleppa við attribution-línuna með góðum spássíum. */
#activityCard {
  --card-top: 60px;                    /* sleppur við listahnappinn, mældur á 16-48px */
  position: absolute;
  top: var(--card-top);
  left: 15px;
  width: 320px;
  max-width: calc(100% - 30px);
  block-size: fit-content;
  max-block-size: calc(100% - var(--card-top) - 60px);
  z-index: 1;
  box-shadow: var(--calcite-shadow-md);
}

/* Æfingalistinn liggur vinstra megin í 350px breidd á breiðum skjá, spjaldið færist
   til hliðar við hann. Þá er listahnappurinn falinn (setUpResponsiveLayout felur
   hann þegar listinn er opinn) og spjaldið má fara alveg upp í hornið. */
#activityCard.withList {
  --card-top: 15px;
  left: 365px;
}

/* Deild leið: innskráningarhnappurinn situr í top-left slottinu, mældur á 58-93px,
   og er breiðari en spjaldið. Listinn er ekki til í þeirri stöðu svo þetta rekst
   ekki á .withList. :has á body frekar en klasa úr JS — loginTool.hidden er sett á
   þremur stöðum og þeir héldust ekki í hendur. */
body:has(#loginTool:not([hidden])) #activityCard {
  --card-top: 105px;
}

.activityCard {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem;
}

/* Íþrótt og dagsetning undir heitinu. Aðeins hjá sendanda — deild leið hefur
   hvorugt í slóðinni. */
.activityCard__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

.activityCard__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.125rem 0;
  font-size: var(--calcite-font-size--1);
}

.activityCard__label {
  color: var(--calcite-color-text-2);
}

.activityCard__value {
  white-space: nowrap;
  font-weight: var(--calcite-font-weight-medium);
  color: var(--calcite-color-text-1);
}

.activityCard__share {
  margin-top: 0.75rem;
}

.activityCard__scene {
  margin-top: 0.75rem;
}

/* Kynningarlínan fyrir óinnskráðan móttakanda deildrar leiðar, sjá showActivityCard.
   Sami blái bakgrunnslitur og .hjalp__about (sjá --samsyn-color-brand í :root) svo
   kynningin um Samsýn kannist sjónrænt við sjálfa "Um Samsýn"-blokkina í hjálpinni,
   frekar en að falla inn sem venjuleg æfingatala. Hlekkirnir fá sinn lit eins og venjulega,
   sjá .activityCard__info a/button hér fyrir neðan. */
.activityCard__info {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.625rem;
  border-radius: var(--calcite-corner-radius-xs);
  background-color: color-mix(in srgb, var(--samsyn-color-brand) 8%, var(--calcite-color-foreground-1));
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

/* "sjá nánar" er <button> en ekki <a> (sjá athugasemdina í samsyn.js) — núllstilla
   hnappaútlitið alveg svo hann lesist sem texti, ekki sem eigin stjórntæki. */
.activityCard__info button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.activityCard__info a,
.activityCard__info button {
  color: var(--calcite-color-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.activityCard__info a:hover,
.activityCard__info button:hover {
  color: var(--calcite-color-brand-hover);
}

/* Heilskjár: þrívídd á hálfum skjá er lítils virði, landslagið þarf pláss.
   Innspássía gluggans tekin af svo senan nái út í brún. */
/* GILDRA: tokenarnir heita -size-x og -size-y. Með -size-width/-size-height (sem
   hljóma réttari) gerist EKKERT og senan sat í 129px hæð. Staðfest í keyrslu:
   size-x og size-y gefa 1136x805 í 1184x805 glugga, allt annað hreyfir ekkert. */
.sceneDialog {
  --calcite-dialog-content-space: 0;
  --calcite-dialog-size-x: 100vw;
  --calcite-dialog-size-y: 100vh;
}

.sceneDialog arcgis-scene {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* Viðmiðunarrammi myndastoppshjúpsins, sem er óslotað barn hlutarins. Án þessa leitaði
     position: absolute upp í næsta staðsetta forföður — gluggann eða jafnvel útsýnisrammann —
     og hjúpurinn sæti þá annars staðar en í horni SENUNNAR. */
  position: relative;
}

/* Flugstýringarnar sem ein RÖÐ í efra vinstra horni senunnar. Þær eru tvær og eiga saman —
   hnappurinn og hraðinn — en slottið staflar börnum sínum LÓÐRÉTT, ofan frá og niður eins og
   tólastæðan hægra megin á 2D-kortinu. Umbúðirnar snúa þeim því í röð.
   align-items: flex-start svo hærri hlutinn dragi ekki hinn upp í sína hæð. */
.sceneFlyBar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Sama kassaútlit og ArcGIS-tólin. #mapEl > calcite-action[slot] hér að ofan gefur hnöppunum
   á 2D-kortinu þetta, en sá veljari er VILJANDI bundinn við #mapEl (sjá athugasemdina þar:
   calcite-action[slot] greip líka trektina í spjaldahausnum). Senan fær því sína eigin reglu.
   Hnappur senunnar slapp áður: hann var einn og appearance="solid" gaf hvítan flöt, en hvorki
   skugga né rúnnaða kanta. Það sást ekki fyrr en tveir stóðu hlið við hlið. */
.sceneFlyBar calcite-action {
  --calcite-action-background-color: var(--calcite-color-foreground-1);
  --calcite-action-background-color-hover: var(--calcite-color-foreground-2);
  --calcite-action-background-color-press: var(--calcite-color-foreground-3);
  --calcite-action-corner-radius: var(--calcite-corner-radius-xs);
  border-radius: var(--calcite-corner-radius-xs);
  box-shadow: var(--calcite-shadow-md);
  overflow: hidden;
}

/* Fótur með flettingu, aðeins til þegar fleiri en ein leið valdist á kortinu.
   Teljarinn í miðju og pílurnar út í kant, eins og í korta-popupinum sem þetta
   leysir af hólmi. calcite-panel á sína eigin fótarspássíu, hér þarf bara röðunina. */
.activityCard__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.activityCard__pagerCount {
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

/* Lárétt skrun frekar en að pressa myndirnar saman: spjaldið er 320px og æfing
   getur átt tugi mynda. flex-shrink:0 á smámyndinni sér um að þær haldi stærð. */
.activityCard__photos {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  /* contain og ekki sjálfgefið auto: strok sem heldur áfram eftir að skrunið er á enda
     má ekki keðjast upp á rótina, þar sem það kveikir pull-to-refresh. Rótin er hvort eð
     er óskrunanleg (sjá html, body ofar) svo þetta er öryggisnet. */
  overscroll-behavior-x: contain;
}

/* Fastur ferningur með object-fit:cover, annars afmyndast myndir sem eru ekki
   í 1:1 hlutfalli. */
.activityCard__thumb {
  flex: 0 0 auto;
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
  border-radius: var(--calcite-corner-radius-xs);
  cursor: pointer;
  background-color: var(--calcite-color-foreground-2);
}

.activityCard__thumb:hover {
  outline: 2px solid var(--calcite-color-brand);
  outline-offset: 1px;
}

/*--------------------------------- stækkuð mynd --------------------------------------------*/

.photo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 70vh svo há mynd (símamynd í portrait) sprengi ekki gluggann og fletti-hnapparnir
   haldist sýnilegir. contain, ekki cover: hér má ekkert klippast af. */
.photo__image {
  inline-size: 100%;
  max-block-size: 70vh;
  object-fit: contain;
  background-color: var(--calcite-color-foreground-2);
  border-radius: var(--calcite-corner-radius-xs);
}

/* Viðmiðunarrammi flettihnappanna. flex fjarlægir um leið baseline-bilið
   undir <img> sem annars skekkti lóðréttu miðjuna. */
.photo__frame {
  position: relative;
  display: flex;
}

/* Hnapparnir sitt hvorum megin við miðja myndina. Þeir voru áður í fæti gluggans
   og duttu þá neðst á skjáinn á háum og mjóum glugga, langt frá myndinni sjálfri.
   Dökkur hálfgagnsær hringur les yfir bæði ljósa og dökka mynd. */
.photo__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  --calcite-button-background-color: rgba(0, 0, 0, 0.55);
  --calcite-button-background-color-hover: rgba(0, 0, 0, 0.78);
  --calcite-button-background-color-press: rgba(0, 0, 0, 0.9);
  --calcite-button-text-color: #ffffff;
}

.photo__nav--previous {
  left: 0.75rem;
}

.photo__nav--next {
  right: 0.75rem;
}

.photo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.photo__caption {
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

.photo__counter {
  white-space: nowrap;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-3);
}


/*------------------------- smákortið í myndaglugganum ---------------------------------------*/

/* Grindin er alltaf til, súlan aðeins þegar smákortið er sýnt. Einn klasi úr JS stýrir
   hvorutveggja — og breidd gluggans líka, sjá :has() hér að neðan. */
.photo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.photo-layout--medKorti {
  grid-template-columns: 1fr 300px;
}

/* Kortið er ekki til nema súlan sé til. Hylkið er FAST í markinu, því sýnin má ekki
   endurforeldrast, svo það verður að falla úr flæðinu hér. */
.photo-layout:not(.photo-layout--medKorti) .photoMap {
  display: none;
}

/* align-self: start svo súlan rími við efri kant myndarinnar og teygist ekki með henni.
   Sama 70vh-þak og .photo__image hefur, með 420px þaki að auki: hærra kort af leið gefur
   engu meira en tæki myndina niður. */
.photoMap {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  align-self: start;
  block-size: min(70vh, 420px);
}

/* min-block-size: 0 — ANNARS þrýstir sýnin sér út úr flex-hylkinu og textalínan undir henni
   fer niður fyrir brún gluggans.

   pointer-events: none: kortið er VÍSIR og ekki stjórntæki. Ein lína slekkur á þrennu: sýnin
   getur ekki tekið fókus og stolið örvatökkunum frá flettingunni, skrun yfir kortinu hjá ekki
   glugganum, og kyrri ramminn getur ekki bilað af því notandinn pannaði. Sama ákvörðun og
   .scenePhotoStop tók hér að neðan, þar sem ástæðan er skjalfest.
   ATH: lyklaborðið fylgir EKKI með, sjá key-down-hlustarann í buildPhotoMap. */
.photoMap arcgis-map {
  display: block;
  flex: 1 1 auto;
  min-block-size: 0;
  pointer-events: none;
  border-radius: var(--calcite-corner-radius-xs);
  background-color: var(--calcite-color-foreground-2);
  overflow: hidden;
}

/* min-block-size heldur hæð kortsins ÓBREYTTRI þótt línan sé tóm. Án hennar hoppar kortið um
   14 px í hvert sinn sem flett er á mynd án hnita (MÆLT: 414 px á móti 400 px), og hvert hopp
   er stærðarbreyting á sýninni sem kostar endurteikningu. */
.photoMap__note {
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-3);
  min-block-size: 1rem;
}

/* Öryggisnet: hliðið í showPhotoMap er lesið við OPNUN, svo súlan getur staðið eftir sé
   glugganum breytt á meðan myndin er opin. Sama tvítekning tölunnar og RESPONSIVE_BREAKPOINT
   hefur þegar á tveimur stöðum hér — talan er PHOTO_MAP_MIN_WIDTH í config.js. */
@media (max-width: 900px) {
  .photo-layout--medKorti {
    grid-template-columns: 1fr;
  }

  .photo-layout--medKorti .photoMap {
    display: none;
  }
}


/* --------------------------- myndastopp í flugi (þrívídd) ------------------------------- */

/* Viðmiðunarrammi skástriksins sem liggur ofan á myndavélinni á rofanum. flex svo umbúðirnar
   séu nákvæmlega á stærð hnappsins og raðist eins í .sceneFlyBar sem hin tólin. */
.scenePhotoTool {
  position: relative;
  display: flex;
}

/* MÆLT í headless Chrome: native hidden EITT OG SÉR gerir ekkert hér. `display: flex` að ofan
   er úr höfundarstílskrá og hún vinnur `[hidden] { display: none }` úr vafranum óháð sérhæfni,
   svo rofinn stóð eftir á skjánum líka á æfingu án mynda þótt showPhotoStopTool setti hidden.
   Þessi regla er það sem lætur hann hverfa — sama hugmynd og skástrikið hér að neðan: display
   er stýrt úr OKKAR stílskrá. */
.scenePhotoTool[hidden] {
  display: none;
}

/* Skástrikið: Calcite-táknið `slash` miðjað ofan á myndavélinni. Bæði eru 16 px í sama kassa,
   svo miðjun er allt sem þarf.

   pointer-events: none — smellurinn VERÐUR að fara í hnappinn undir, annars dræpi strikið
   rofann um leið og það birtist.

   Tvöfaldur drop-shadow gefur ljósa kápu í kringum strikið svo það skerist frá myndavélinni
   undir því — sama hugmynd og hvíta kápan undir ferlinum í drawSceneRoute, sem er þar til að
   línan lesist á loftmynd. Tvöfaldur til að byggja upp þéttleika kápunnar; hún er hálfgagnsær
   og einn skuggi gefur veika brún.
   ATH: kápan er ekki stillt af í keyrslu, 1,5px er ágiskun sem má hnika. */
.scenePhotoTool__slash {
  /* Falið sjálfgefið; --off kveikir. Stýrt með display úr OKKAR stílskrá frekar en með native
     hidden á tákninu, sjá showPhotoStopState. */
  display: none;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: var(--calcite-color-text-1);
  filter: drop-shadow(0 0 1.5px var(--calcite-color-foreground-1))
          drop-shadow(0 0 1.5px var(--calcite-color-foreground-1));
}

.scenePhotoTool--off .scenePhotoTool__slash {
  display: block;
}

/* Hjúpurinn sem myndin birtist í þegar flogið stoppar á myndastað.

   Neðst til hægri: efra hægra hornið á tólin (zoom, navigation-toggle, compass) og efra
   vinstra flugstikuna. 28px að neðan sleppa við attribution-línuna, sömu tala og .samsynLogo
   notar hér að ofan (mæld 16px há, með spássíu).

   position: absolute svo hjúpurinn taki ALDREI þátt í flæðinu — sýnin má ekki
   stærðarbreytast í miðju flugi, og hlutur í flæði hefði minnkað hana.

   pointer-events: none er NAUÐSYN og ekki fegurð: sceneClick á að fá smelli á myndanálar, og
   hjúpur sem gleypti þá hefði slökkt á þeim í öllu neðra hægra horninu. Umgjörðin er því ekki
   smellanleg — aðeins þrennt inni í henni fær pointer-events: auto: hnapparnir tveir og
   MYNDIN, sem opnar myndaskoðarann.

   MYNDIN ER STÆRSTI REITURINN og hún er meðvituð málamiðlun: meðan hjúpurinn SÉST tekur hún
   smellina af nálum sem liggja undir henni. Það kostar ekkert í raun — smellur á nál og
   smellur á myndina gera nákvæmlega sama hlutinn (opna myndaskoðarann), og hjúpurinn er
   visibility: hidden þess á milli og gleypir þá ekkert.

   HITT ATRIÐIÐ SEM ÞETTA KREFST: smellur á myndina VERÐUR að kalla pauseFlight sjálfur, því
   pointerdown á hjúpnum kemst ekki til sýnarinnar og watcher-inn á view.interacting kviknar
   aldrei. Án þess héldi flugið áfram bak við opinn myndaglugga og gæti endað í hreinsun með
   hann uppi. Það er gert í openPhotoStopPhoto í flight.js — sjá athugasemdina þar.

   visibility og opacity frekar en display: none, svo innkoman megi vera mjúk. */
.scenePhotoStop {
  position: absolute;
  inset-block-end: 28px;
  inset-inline-end: 15px;
  z-index: 1;
  /* 50% stærri en fyrsta útgáfan (var 32vw / 360px): myndin var of lítil til að sjást í
     flugi. Enn bundin við vw svo hún vaxi ekki yfir senuna á breiðum skjá. */
  inline-size: min(48vw, 540px);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem;
  border-radius: var(--calcite-corner-radius-xs);
  background-color: var(--calcite-color-foreground-1);
  box-shadow: var(--calcite-shadow-md);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease-in-out, visibility 250ms;
}

.scenePhotoStop--visible {
  opacity: 1;
  visibility: visible;
}

/* Viðmiðunarrammi hnappanna, eins og .photo__frame í stóra myndaglugganum. line-height: 0
   svo grunnlínubil undir myndinni bæti ekki nokkrum pixlum við hæð hjúpsins. */
.scenePhotoStop__frame {
  position: relative;
  line-height: 0;
}

/* Hnapparnir standa efst í hægra horni myndarinnar, örin vinstra megin við X-ið: sömu röð og
   lesstefnan, þar sem „áfram" kemur á undan „hætta".

   pointer-events: auto er allur tilgangurinn — hjúpurinn sjálfur er none, sjá að ofan.

   Kringlóttir og scale="s": sama útlit og photo__nav í stóra glugganum en minna, því hér
   liggja þeir ofan á mynd sem er þriðjungur af þeirri stærð. Dökki hálfgagnsæi hringurinn
   er sá sami og þar, af sömu ástæðu: hann les yfir bæði ljósa og dökka mynd, og ljós hnappur
   hyrfi í snjó og himin sem eru algengasta baksviðið á myndum úr æfingum. */
.scenePhotoStop__button {
  position: absolute;
  inset-block-start: 0.375rem;
  z-index: 1;
  pointer-events: auto;
  --calcite-button-background-color: rgba(0, 0, 0, 0.55);
  --calcite-button-background-color-hover: rgba(0, 0, 0, 0.78);
  --calcite-button-background-color-press: rgba(0, 0, 0, 0.9);
  --calcite-button-text-color: #ffffff;
}

.scenePhotoStop__button--close {
  inset-inline-end: 0.375rem;
}

/* Bilið er hnappbreiddin (mæld 24px á scale="s" round) og bil á milli */
.scenePhotoStop__button--next {
  inset-inline-end: 2.375rem;
}

/* FÖST hæð, ekki auto: myndin sem lendir má ekki endurflæða hjúpinn, og endurflæði ofan á
   hreyfðri þrívíddarsenu er sýnilegur hnykkur. contain á foreground-2 og ekki cover — sama
   ákvörðun sem .photo__image tók, af sömu ástæðu: símamyndir í portrait eru algengar og hér
   má ekkert klippast af. Bakgrunnurinn er líka plásshaldarinn þar til myndin kemur.

   pointer-events: auto og cursor: pointer: smellur opnar myndaskoðarann og setur flugið í
   hlé, sama og smámyndirnar í spjaldinu gera. Útlínan við mús er líka sú sama og
   .activityCard__thumb notar — eitt mynstur fyrir „þessi mynd stækkar", ekki tvö. Sjá
   pointer-events-kaflann í .scenePhotoStop hér að ofan. */
.scenePhotoStop__image {
  inline-size: 100%;
  block-size: min(36vh, 330px);
  object-fit: contain;
  background-color: var(--calcite-color-foreground-2);
  border-radius: var(--calcite-corner-radius-xs);
  pointer-events: auto;
  cursor: pointer;
}

.scenePhotoStop__image:hover {
  outline: 2px solid var(--calcite-color-brand);
  outline-offset: 1px;
}

.scenePhotoStop__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-block-size: 1rem;
}

.scenePhotoStop__caption {
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scenePhotoStop__counter {
  white-space: nowrap;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-3);
}

/* Framvindulínan svarar „hvers vegna stendur allt?" á meðan flughnappurinn segir enn
   „Gera hlé á flugi". Breiddin er sett úr JS í hverjum hlérramma og ekki með CSS-hreyfingu:
   niðurtalningin gengur í römmum og rekur frá klukkunni þegar rammatíðnin fellur, svo
   hreyfing á fastri lengd færi úr fasa við myndina sem hún á að lýsa. */
.scenePhotoStop__track {
  block-size: 3px;
  border-radius: 2px;
  background-color: var(--calcite-color-border-3);
  overflow: hidden;
}

.scenePhotoStop__progress {
  block-size: 100%;
  inline-size: 0;
  background-color: var(--calcite-color-brand);
}

/* Á mjóum skjá er 32vw of lítið til að myndin sjáist og hjúpurinn tekur þá breiddina.
   Sama brotmark og RESPONSIVE_BREAKPOINT í samsyn.js. */
@media (max-width: 666px) {
  .scenePhotoStop {
    inline-size: calc(100% - 30px);
    inset-inline-start: 15px;
  }
}

/*--------------------------------- deila leið --------------------------------------------*/

.share {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Slóðin er löng og á að vera valanleg í heild, en má ekki teygja gluggann. */
.share__url {
  --calcite-input-font-size: var(--calcite-font-size--2);
}
/* Myndavalið í deiliglugganum. Sama mynstur og myndaræman í spjaldinu
   (.activityCard__photos) — lárétt skrun með contain svo strok keðjist ekki upp á
   rótina og kveiki pull-to-refresh. */
.share__pick {
  display: flex;
  gap: 0.375rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
/* GILDRA SEM ER SAMA OG Á CALCITE-HLUTUM: display hér að ofan er HÖFUNDARREGLA og hún
   yfirskrifar [hidden] { display: none } úr vafrablaðinu, því höfundur vinnur UA.
   Án þessarar línu sést ræman áður en hakað er við — mælt. */
.share__pick[hidden] {
  display: none;
}
/* Hnappurinn "Velja allar" yfir ræmunni. Eigin röð frekar en inni í ræmunni sjálfri:
   ræman skrunar lárétt og hnappur sem skrunar burt með myndunum finnst ekki aftur.
   Hægri jöfnun bindur hann við ræmuna fyrir neðan án þess að keppa við merkimiðann. */
/* Líftímavalið: merkimiðinn og fellilistinn á sömu línu. Ekki calcite-label utan um
   hvort tveggja — hún staflar börnum sínum lóðrétt, og þá stæði eins orðs merkimiði
   í heilli línu fyrir ofan lítinn hnapp.
   ENGIN [hidden]-regla hér, ólíkt .share__pick og .share__pickTools: þessi röð er
   FELLD ÚT ÚR GRINDINNI þegar rofinn er slökktur og er því aldrei til í DOM-inu. */
.share__liftimi {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.5rem;
}

.share__pickTools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
/* Ábendingin um stjörnuna. flex: 1 ýtir hnappinum til hægri eins og justify-content
   gerði ein og sér áður en þessi var til — án hennar stæði hnappurinn vinstra megin. */
.share__pickHint {
  flex: 1 1 auto;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}
/* SAMA GILDRA OG Á .share__pick: display hér að ofan er höfundarregla og yfirskrifar
   [hidden] { display: none } úr vafrablaðinu. Án þessarar línu stendur hnappurinn
   sýnilegur áður en hakað er við. */
.share__pickTools[hidden] {
  display: none;
}
.share__pickThumb {
  display: block;
  inline-size: 64px;
  block-size: 64px;
  object-fit: cover;
  border-radius: var(--calcite-corner-radius-xs);
  cursor: pointer;
  background-color: var(--calcite-color-foreground-2);
  /* Óvalin mynd er dempuð en ekki dauf: munurinn á valinni og óvalinni verður að sjást
     í einu augnakasti, því hann er það sem notandinn er að stjórna. */
  opacity: 0.55;
  /* INNDREGIN útlína (neikvætt offset) og ekki útstæð. Ræman er overflow-x: auto, svo
     útstæð útlína klippist af við brúnir hennar — fyrsta og síðasta mynd misstu hana
     að hluta. Inndregin liggur innan myndarinnar og getur ekki klippst. */
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.share__pickThumb:hover {
  opacity: 0.85;
}
.share__pickThumb--valin,
.share__pickThumb--valin:hover {
  opacity: 1;
  outline-color: var(--calcite-color-brand);
}
/* Hnitalaus mynd. Sýnd en dauð: notandinn sá hana í spjaldinu og ræma sem sleppir
   henni þegjandi væri ráðgáta. Skýringin liggur í title. */
.share__pickThumb--daud,
.share__pickThumb--daud:hover {
  opacity: 0.25;
  cursor: not-allowed;
  filter: grayscale(1);
  outline-color: transparent;
}

/* Hjúpur um smámynd + forsíðumerki. position: relative hér er ÖLL ástæðan fyrir
   tilvist hans — merkið er algildisstaðsett (absolute) innan hans og þyrfti annars
   heila ræmuna sem viðmiðun. flex: 0 0 auto flyst hingað úr .share__pickThumb, sem
   var áður beint flex-barn .share__pick. */
.share__pickWrap {
  position: relative;
  flex: 0 0 auto;
}
/* Forsíðumerkið. FALIÐ Á ÓVALDRI MYND — ekki aðeins óvirkt — því merki sem gerir
   ekkert við smell er verra en ekkert merki. birtist um leið og myndin er valin. */
.share__pickForsida {
  position: absolute;
  top: 2px;
  right: 2px;
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.share__pickWrap--valin .share__pickForsida {
  display: flex;
}
/* Núverandi forsíðumynd. Fyllt stjarna og vörumerkjaliturinn — sama litur og
   .share__pickThumb--valin notar fyrir útlínuna, svo táknin tvö lesast sem ein saga. */
.share__pickForsida--virk {
  background-color: var(--calcite-color-brand);
}

/*--------------------------------- mælaborð --------------------------------------------*/

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dashboard__note {
  margin: 0.5rem 0 0;
  font-size: var(--calcite-font-size--2);
  color: var(--calcite-color-text-2);
}

/* auto-fit sér um alla svörun: fjórar flísar á breiðum skjá, ein á síma.
   Stök calcite-tile hefur enga eigin umgjörð, kassinn er dreginn hér. */
.dashboard__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem;
}

.dashboard__tiles calcite-tile {
  background-color: var(--calcite-color-foreground-1);
  border: 1px solid var(--calcite-color-border-2);
  border-radius: var(--calcite-corner-radius-xs);
}

/* Íslandsútlínurnar á hringjaflísinni: Calcite á ekkert slíkt tákn, svo þetta er
   innfelld SVG-slóð í content-start-slottinu (sjá createIcelandIcon í dashboard.js).
   text-3 er nákvæmlega sami tónn og Calcite gefur táknum flísanna — MÆLT hlið við hlið
   við car-táknið, báðir rgb(107, 107, 107) — og currentColor í slóðinni sækir hann hingað.
   Fast display:flex því span er inline sjálfgefið og skildi eftir sig grunnlínubil. */
.dashboard__iceland {
  display: flex;
  color: var(--calcite-color-text-3);
}

/* Ártalssúlur: ártal, súla, tala. Fastar breiddir á endunum svo súlurnar
   standist á milli ára. Talan er í textalit, ekki í lit súlunnar. */
.dashboard__bar {
  display: grid;
  grid-template-columns: 2.75rem 1fr 5.5rem;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--calcite-font-size--1);
}

.dashboard__barLabel {
  color: var(--calcite-color-text-2);
}

.dashboard__barValue {
  text-align: end;
  white-space: nowrap;
  color: var(--calcite-color-text-1);
}

/* Íþróttataflan er fimm súlur og pressast ólæsilega saman á síma,
   min-width kveikir lárétt skrun í staðinn. */
.dashboard__scroll {
  overflow-x: auto;
  /* contain og ekki sjálfgefið auto: strok sem heldur áfram eftir að skrunið er á enda
     má ekki keðjast upp á rótina, þar sem það kveikir pull-to-refresh. Rótin er hvort eð
     er óskrunanleg (sjá html, body ofar) svo þetta er öryggisnet. */
  overscroll-behavior-x: contain;
}

.dashboard__scroll calcite-table {
  min-width: 30rem;
}

/* text-align erfist til slotted innihalds úr shadow-<td>, ekki úr
   calcite-table-cell, þess vegna er jöfnunin sett á span sem er ljós-DOM barn. */
.dashboard__cellEnd {
  display: block;
  text-align: end;
  white-space: nowrap;
}

.dashboard__sport {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}

.dashboard__recordValue {
  padding-right: 6px;
  text-align: right;
  white-space: nowrap;
  font-weight: var(--calcite-font-weight-medium);
  color: var(--calcite-color-text-1);
}

.dashboard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Yfirlitsboxið í tindablokkinni: EIN setning, ekki tala+merking eins og
   .dashboard__tiles calcite-tile fyrir ofan, þess vegna eigin flokkur og ekki
   endurnýtt dálkanet — sjá athugasemdina við yfirlit í createPeaksBlock. Breiðir sig
   yfir alla blokkarbreiddina í stað þess að þrengja sig í 9rem-dálk. */
.dashboard__peaksSummary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--calcite-color-foreground-1);
  border: 1px solid var(--calcite-color-border-2);
  border-radius: var(--calcite-corner-radius-xs);
  color: var(--calcite-color-text-2);
}

.dashboard__peaksSummary calcite-icon {
  flex-shrink: 0;
  color: var(--calcite-color-text-3);
}

.dashboard__peaksSummary p {
  margin: 0;
}

/* Stjórnirnar í tindablokkinni: kortarofinn vinstra megin, röðunin hægra megin.
   flex-wrap en ekki dálkanet: merkingarnar eru misbreiðar á málunum tveimur, og á síma
   eiga þær að falla hvor í sína línu frekar en að pressast saman í fasta dálka.

   LOFTIÐ ER BÆÐI ÚTLIT OG VIRKNI. calcite-block staflar börnum sínum ÁN bils, svo röðin
   var nákvæmlega jafnhá hnappnum og lá þétt upp við hvort tveggja (MÆLT: röðin 24 px,
   neðri brún yfirlitsboxins = efri brún raðarinnar = 380, neðri brún raðarinnar = efsta
   lína listans = 404). Fókusramminn sem Calcite dregur UTAN hnappsins átti þá hvergi
   heima og listalínan lagðist ofan á hann — hann skarst neðan af. Millibilið hér er eina
   viðgerðin sem þarf: enginn forfaðir klippir (aðeins html/body bera overflow: hidden). */
.dashboard__peaksTools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-block: 0.875rem 0.5rem;
}

/* calcite-label ber eigin neðri spássíu sem skildi rofann eftir skakkan við hliðina á
   röðuninni. Höfundarregla á hýsilinn vinnur á :host-reglunni inni í skugga-DOM-inu —
   ytri skjalastílar hafa forgang á hýsil, óháð sértækni. */
.dashboard__peaksTools calcite-label {
  margin-block-end: 0;
}

.dashboard__peaksSort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--calcite-font-size--1);
  color: var(--calcite-color-text-2);
}

/*--------------------------------- hjálp --------------------------------------------*/

.hjalp {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Kaflinn um Samsýn fær annan bakgrunn en hinir svo hann skeri sig úr sem fyrsta
   blokkin í hjálpinni — sjálft efnið (hver stendur á bak við vefinn) er annars eðlis
   en notkunarleiðbeiningarnar sem fylgja. Host-reglan vinnur á :host-reglunni í
   skugga-DOM-inu calcite-block ber sjálft, MÆLT í Calcite 5.1 (sjá athugasemdina við
   .hjalp__heading um sama fyrirbæri). color-mix við --samsyn-color-brand (sjá :root)
   en ekki --calcite-color-brand: kaflinn fjallar um Samsýn sjálft, svo liturinn á að
   kannast við fyrirtækið frekar en við Strava-appelsínugulan sem vefurinn notar annars. */
.hjalp__about {
  background-color: color-mix(in srgb, var(--samsyn-color-brand) 8%, var(--calcite-color-foreground-1));
  border-radius: var(--calcite-corner-radius-xs);
}

/* Lógóið situr í sömu línu og fyrirsögnin (content-start, sjá athugasemdina þar).
   24px hæð er mælt jafnhátt textanum í kring að teknu tilliti til línubils — hærra
   gildi ýtti fyrirsögninni niður fyrir tákn blokkarinnar. Ekkert margin: lógóið er
   EINA barnið í fyrirsögninni núna, svo ekkert er að skilja það frá. */
.hjalp__logo {
  height: 24px;
  width: auto;
  vertical-align: middle;
}

/* Fyrirsögnin (lógóið eitt) er content-start slot en ekki heading-eigindin, því hún ber
   hlekk á samsyn.is og eigindin tekur aðeins streng. Slotið erfir ekki stíl titilsins:
   mælt í Calcite 5.1 gefur .heading 14px/500/1.375 í text-1, en content-start fær
   14px/400/normal í text-3. Letursstærðin stemmir af sjálfu sér, hitt er stillt hér.
   Tákngildin en ekki hrátölur, svo birtustillingin haldi. Enginn eigin litur á sjálfan
   hlekkinn (.hjalp__heading a) — hann ber bara lógóið, engan sýnilegan texta sem
   merkjaliturinn myndi skipta máli fyrir. */
.hjalp__heading {
  font-weight: var(--calcite-font-weight-medium);
  line-height: 1.375;
  color: var(--calcite-color-text-1);
}

/* Sjálfgefið padding á ol er ~2.5rem og ýtir textanum langt frá tákni blokkarinnar.
   1.25rem heldur tölunum inni en textanum vinstra megin, í línu við hitt efnið. */
.hjalp__steps {
  margin: 0;
  padding-inline-start: 1.25rem;
  font-size: var(--calcite-font-size--1);
  line-height: 1.5;
  color: var(--calcite-color-text-2);
}

/* Frásagnartexti Um Samsýn-kaflans — málsgreinar, ekki tölusett skref, því á hvorki
   padding-inline-start né markers eins og .hjalp__steps. Annars sami stíll og hinir
   kaflarnir svo hann falli ekki úr takti sjónrænt. */
.hjalp__about-text {
  margin: 0;
  font-size: var(--calcite-font-size--1);
  line-height: 1.5;
  color: var(--calcite-color-text-2);
}

.hjalp__about-text p {
  margin: 0;
}

.hjalp__about-text p + p {
  margin-top: 0.375rem;
}

/* Esri-hlekkurinn: sama regla og .hjalp__steps a hér fyrir neðan, svo liturinn
   stemmi við restina af hjálpinni frekar en vafra-sjálfgefna bláan. */
.hjalp__about-text a {
  color: var(--calcite-color-brand);
  text-underline-offset: 2px;
}

.hjalp__about-text a:hover {
  color: var(--calcite-color-brand-hover);
}

.hjalp__steps li + li {
  margin-top: 0.375rem;
}

/* Hnappaheitin eru feitletruð til að þekkjast aftur á skjánum. b erfir lit
   móðurinnar, sem er text-2 og of dauft fyrir feitt letur. */
.hjalp__steps b {
  font-weight: var(--calcite-font-weight-medium);
  color: var(--calcite-color-text-1);
}

/* Tenglar í hjálpinni. Merkjaliturinn en ekki sjálfgefna vafrabláa: hún er skær og
   köld og les illa á móti Calcite-tónunum í kring, og fylgir ekki birtustillingunni.
   Venjulegt <a> og ekki calcite-link: það síðara er hnappur inni í hlut með skuggarót,
   sem erfir hvorki letursstærð listans né hleður sig fyrr en Calcite er komið. */
.hjalp__steps a {
  color: var(--calcite-color-brand);
  text-underline-offset: 2px;
}

.hjalp__steps a:hover {
  color: var(--calcite-color-brand-hover);
}

/* Sama brotmark og RESPONSIVE_BREAKPOINT í samsyn.js */
@media (max-width: 666px) {
  /* Spjaldið sest á BOTNINN í fullri breidd, eins og upplýsingaglugginn í Borgarvefsjá.
     Efst til vinstri huldi það leiðina sem notandinn var að smella á; neðst liggur það
     þar sem minnst er að skoða og kortið fyrir ofan helst sýnilegt.

     top: auto er nauðsyn en ekki snyrtimennska: grunnreglan bindur top við --card-top
     og án þess að taka það úr sambandi stæði spjaldið teygt milli --card-top og botns.
     max-width: none af sömu ástæðu — calc(100% - 30px) í grunnreglunni héldi 15px
     spássíu til hliðanna og breiddin yrði ekki 100%.

     Listinn fyllir skjáinn á þessari breidd og er falinn þegar æfing er valin, svo
     .withList hliðrunin (left: 365px) á ekki við og er tekin af hér með.

     block-size: fit-content úr grunnreglunni heldur spjaldinu áfram jafnlágu og efnið
     segir til um; max-block-size setur þakið og innra skrun calcite-panel tekur við
     verði efnið lengra. Lógóið og attribution-línan hverfa undir spjaldið á meðan það
     er opið — það er meðvitað, þau koma aftur um leið og því er lokað. */
  #activityCard,
  #activityCard.withList {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-block-size: 60%;
  }

  /* Tölurnar í tvo dálka: sjö línur í einum dálki gerðu spjaldið óþarflega hátt.
     Aðeins .activityCard__row tekur hálfa breidd — meta-línan, myndaröndin og
     hnapparnir spanna báða dálka. Röðunin ræðst af DOM-röðinni sem showActivityCard
     býr til, svo engin JS-breyting fylgir. */
  .activityCard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
    row-gap: 0;
    padding: 0.5rem 0.75rem;
  }

  .activityCard > :not(.activityCard__row) {
    grid-column: 1 / -1;
  }

  .activityCard__meta {
    margin-bottom: 0.25rem;
  }

  /* Minna letur er MÆLING en ekki smekkur: hálfur dálkur er ~162px á 360px skjá og
     "Tími á hreyfingu" + "1:23:24" mælist um 160px í --1. Á --2 er svigrúmið nægt.
     Gildið heldur nowrap úr grunnreglunni, svo brotni eitthvað er það merkimiðinn. */
  .activityCard__row {
    padding: 0;
    font-size: var(--calcite-font-size--2);
  }

  /* Hnapparnir hlið við hlið, en AÐEINS þegar báðir eru til. Deild leið á engan
     deilingarhnapp og æfing án ferils engan þrívíddarhnapp; stakur hnappur í hálfri
     breidd liti út eins og villa. Systkinaveljararnir tveir hitta því hvorugan nema
     parið sé heilt og yfirtaka þá 1 / -1 regluna hér að ofan.

     GILDRA: grid-column: auto á BÁÐUM dugði ekki. Tölulínurnar eru sjö — oddatala —
     svo síðasta þeirra skilur eftir autt hólf í dálki 2, og sjálfvirka röðunin setti
     þrívíddarhnappinn í það hólf VIÐ HLIÐINA á „Mesta hæð" og deilinguna eina í næstu
     röð. Mælt í headless Chrome: grid-template-rows varð 20px 14px 14px 14px 40px 40px.
     Fasti dálkurinn 1 á fyrri hnappnum neyðir hann niður í næstu röð þar sem dálkur 1
     er laus, og sá seinni lendir þá sjálfkrafa í dálki 2 í sömu röð. */
  .activityCard__scene:has(~ .activityCard__share) {
    grid-column: 1;
  }

  .activityCard__scene ~ .activityCard__share {
    grid-column: auto;
  }

  /* Sama gildi á báðum svo þeir sitji jafnhátt þegar þeir standa í sömu röð */
  .activityCard__scene,
  .activityCard__share {
    margin-top: 0.5rem;
  }

  .dashboard {
    gap: 0.5rem;
  }

  .dashboard__bar {
    grid-template-columns: 2.5rem 1fr 4.75rem;
    font-size: var(--calcite-font-size--2);
  }
}

/* Mínar deilingar. Listinn og Facebook-athugasemdin undir honum.
   gap frekar en margin á tilkynninguna: hún er stundum ein í glugganum (engar deilingar,
   villa) og bæri þá bil sem á ekkert erindi efst. */
.deilingar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Aðgerðarhnapparnir þrír í hverjum lið ("Afrita slóð" / "Framlengja" / "Taka úr
   deilingu"). Eigin umbúð um actions-end: Calcite skjalfestir enga CSS-breytu fyrir
   innri röðun þeirrar rásar, svo flex-direction verður að stýrast af einhverju sem VIÐ
   eigum (sjá .deilingar__actions í deilingar.js). */
.deilingar__actions {
  display: flex;
  gap: 0.5rem;
}

/* Sama brotmark og RESPONSIVE_BREAKPOINT í samsyn.js. Í lárétta hamnum eru hnapparnir
   óskreppanlegir og label-textinn sem deilir röðinni með þeim kremst niður í núll breidd
   þegar samanlögð breidd fer fram úr dialog-glugganum — það sést sem eins-stafs-á-línu
   í mobile (mælt á skjámynd Sölva). */
@media (max-width: 666px) {
  .deilingar__actions {
    flex-direction: column;
    /* align-self: flex-start ER NAUÐSYNLEGT fyrir bilið hér að neðan: calcite-list-item
       teygir actions-end-slottið sjálfgefið yfir alla línuhæðina (stretch), svo
       padding-block-end eitt og sér hvarf ofan í þá teygju og skilaði 1px bili — MÆLT.
       Með flex-start fær dálkurinn sína eigin innihaldshæð og paddingið verður sýnilegt. */
    align-self: flex-start;
    /* Bil niður á við þegar hnapparnir eru staflaðir: annars liggur "Taka úr deilingu"
       nánast ofan í "Afrita slóð" næsta liðar fyrir neðan, með ekkert nema mjótt
       jaðarstrik .deilingar á milli (sjá gap þar — það gildir milli calcite-list-item,
       ekki innan í þeim). */
    padding-block-end: 0.5rem;
  }

  /* Breiddin og vinstrijöfnunin eru EIGINDI á calcite-button (width="full",
     alignment="start" í deilingar.js), ekki CSS — calcite-button á engan "part" að
     stíla (::part(button) gerir ekkert, MÆLT), og justify-content innan hans fer eftir
     width-eigindinu sjálfu, ekki eftir raunverulegri CSS-breidd. calcite-dropdown fær
     sína breidd hér því trigger-hnappurinn í því erfir hvorugt frá umbúðinni. */
  .deilingar__actions > * {
    width: 100%;
  }
}

/*------------------------------- tindapopup ------------------------------------------*/

/* Innihald popupsins á tindaþekjunni. ArcGIS á umgjörðina sjálfa; hér er aðeins
   innvolsið sem tindaPopup byggir, svo línurnar tvær og hnappurinn fljóti ekki saman. */
.tindarPopup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tindarPopup p {
  margin: 0;
}