/* Delte layout-primitiver — IKKE fargetokens (se tokens.css) og IKKE
   forsidens navigasjonsmodell (avgjøres i Fase 4). Bare det som er likt
   overalt, uansett hvilken side eller hvilket spill det er. */

.wrap{
  max-width:var(--width-wide);
  margin:0 auto;
  padding-left:calc(var(--space-6) + env(safe-area-inset-left));
  padding-right:calc(var(--space-6) + env(safe-area-inset-right));
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

button{
  font:inherit; color:inherit;
  background:none; border:0; padding:0; cursor:pointer;
}

/* Sekundærknapp: SAMME form/vekt som `.player-start-btn` (padding/
   avrunding/skriftstørrelse), men uten fylt bakgrunn — bare en kant i
   merkefargen, så den aldri kan forveksles med primærvalget (som har
   merkefargen som FYLL). Brukt rett under/ved siden av en primærknapp for
   et alternativt, mindre fremtredende valg — f.eks. "Start et nytt spill"
   under "Fortsett spillet" på en spillside med en runde i gang, se
   core/game-shell/page.js. Standard-mønsteret for denne typen
   sekundærhandling andre steder på siden også. */
.btn-outline{
  display:block;
  width:100%;
  font-weight:700; font-size:var(--text-body); text-align:center;
  color:var(--aksent);
  background:transparent;
  border:var(--border-w) solid var(--aksent);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
  margin:0 0 var(--space-6);
}
.btn-outline:hover{ background:color-mix(in srgb, var(--aksent) 12%, transparent); }
/* Rett under `.player-start-btn` (spillsidens "Fortsett spillet" →
   "Start et nytt spill", se core/game-shell/page.js) skal de to lese som
   ETT par med knapper, ikke to løst relaterte ting — nuller ut den fylte
   knappens egen `margin-bottom` (player-management.css) i akkurat denne
   sammenhengen, en liten fast avstand i stedet. */
.player-start-btn:has(+ .btn-outline){ margin-bottom:var(--space-2); }

/* Header-rad: tittel til venstre, ÉN handling til høyre, begge på SAMME
   linje — samme mønster som forsidens "Spillere ... Endre ›"
   (`.player-roster-head`, core/player-management/player-management.css).
   Standard for dialoger/ark med en tittel + en lukk-/endre-lignende
   handling (bunnarket i sheet.js, bekreftelsesdialogen i confirm.js). */
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3);
}
.panel-head h1, .panel-head h2{ font-size:var(--text-md); margin:0; }

/* "Lukk"-knappen selv — standard for HELE siden (bunnarket i sheet.js OG
   bekreftelsesdialogen i confirm.js), alltid inni en `.panel-head` som gir
   selve plasseringen (til høyre). */
.dialog-close{
  flex-shrink:0;
  font-weight:700; color:var(--aksent); font-size:var(--text-sm);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
}
.dialog-close:hover{ background:var(--card-hover); }

/* Stille versjonstall helt nederst — DELT mellom forsiden (nettsidens
   egen versjon, `/version.json`) og en spillside (spillets EGEN versjon,
   `game.json`, se core/game-shell/page.js) — samme visuelle vekt begge
   steder, bare ulik tekst. Står UTENFOR `.wrap` begge steder (egen
   søsken-element etter/rundt `#app`), samme oppskrift som topplinjen:
   border-top kant til kant på mobil, egen max-width/padding holder
   teksten på linje med resten av siden på bredere skjermer. */
.site-footer{
  max-width:var(--width-wide); margin:var(--space-8) auto 0;
  padding:var(--space-5) calc(var(--space-6) + env(safe-area-inset-right))
    calc(var(--space-5) + env(safe-area-inset-bottom))
    calc(var(--space-6) + env(safe-area-inset-left));
  border-top:var(--border-w) solid var(--line);
  text-align:center;
}
.site-version{
  margin:0;
  font-size:var(--text-2xs);
  opacity:0.5;
  font-variant-numeric:tabular-nums;
}