/* Backseat. Mobile first: appen är hela skärmen, aldrig en ram i en ram.
   Design Constitution gäller: tunn neutral ram, ingen asymmetri, inga
   accent-stripes, inga gradienter, ingen glassmorphism. Det gula kommer från
   spelobjektet i knappen, inte från dekor. */

/* Designsystemets MÖRKA tema, se src/Tokens.php och design-tokens.json.
   Värdena får inte ändras här utan att ändras i systemet: ett token som avviker från sin
   källa ser ut att komma ur systemet men gör det inte. Ett test jämför båda vägarna.

   Kontrasten är MÄTT och inte bedömd, med Tokens::kontrast(). Allt gick upp utom texten på
   den gula knappen, som föll från 10,92 till 9,81 och alltså stannar långt över AAA:s 7,0.
   Dämpad text på bakgrunden gick från 5,99 (AA) till 10,08 (AAA). */
:root {
  --bg:#101827; --surface:#172337; --surface-2:#22304A;
  --border:#384963; --border-2:#4A5C78;
  --text:#F8F4EA; --muted:#BAC4D2;
  --gul:#F5C842; --gul-ink:#15243B;
  --warn:#E7B72F; --bad:#EA765F; --ok:#5E9A73;
  /* Tre värden som bara appen har, se Tokens::DARK_BACKDROP och grannarna. De stod
     som råa hexvärden nere i filen till BS-200, alltså utanför allt som en
     palettändring hittar. Ett test förbjuder nu rå hex utanför det här blocket. */
  --backdrop:#0B0D11; --map-bg:#1B1F28; --on-accent:#15243B;
  /* Kartnålens bricka och dess bläck. Läses av app.js och summary-map.js via
     var(), eftersom nålen ritas som inline-stil i en divIcon. Vitt och navy ur
     systemets ljusa palett: nålen ligger på kartan och inte på appens yta. */
  --pin-disc:#FFFFFF; --pin-ink:#15243B;
  --r:12px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent }
html, body { margin:0; height:100% }
body {
  background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  height:100dvh; overflow:hidden;
  display:flex; flex-direction:column;
}
#app { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden }

/* ---- Ytor ---- */
.screen { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden }
.scroll {
  flex:1; min-height:0; overflow-y:auto; padding:16px;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  scrollbar-width:none;
}
.scroll::-webkit-scrollbar { width:0; height:0 }

h1 { font-size:1.7rem; margin:0 0 8px; letter-spacing:-.02em }
h2 { font-size:1.35rem; margin:0 0 6px; letter-spacing:-.01em }
h3 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:20px 0 7px; font-weight:600;
}
/* En h3 som är en MENING och inte en etikett. Standard-h3 är versaler med
   luftad spärrning, alltså en etikett över ett block, och det fungerar för
   "SENASTE FYND" men skriker när rubriken är en hel sats. Klassen fanns
   tidigare som en inline-stil upprepad på FAQ-rubrikerna, vilket är samma
   sak utan namn. Se BS-186. */
h3.prosa {
  font-size:.95rem; text-transform:none; letter-spacing:0;
  color:var(--text); margin:22px 0 8px;
}
p { margin:0 0 12px }
.muted { color:var(--muted) }
.sm { font-size:.82rem }
.xs { font-size:.74rem }
.center { text-align:center }
.hide { display:none !important }

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
}
.card + .card { margin-top:8px }

/* ---- Kontroller ----
   LÅNGFORM och inte `font:` kortform här nedan. Kortformen kräver ett familjenamn
   sist, så `font:700 1.25rem/1 inherit` är OGILTIG och förkastas HELT av
   webbläsaren: `inherit` är inget familjenamn och hela deklarationen faller.
   Upptäckt 2026-07-31 (BS-201). Fyndknappen hade därför renderat i webbläsarens
   standardstorlek och normalvikt sedan den byggdes, inte 1,25rem fet, och samma
   sak gällde bakåtpilen och sheetbtn. Ett test förbjuder mönstret nu.
   `font:inherit` ensamt är däremot giltigt, se .leaflet-container. */
.btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:13px 16px; border-radius:10px; font-size:.95rem;
  font-weight:500; cursor:pointer; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
  font-family:inherit; text-decoration:none;
}
.btn + .btn { margin-top:8px }
.btn:active { transform:translateY(1px) }
.btn.primary { background:var(--gul); color:var(--gul-ink); border-color:transparent; font-weight:600 }
.btn.ghost { background:transparent }
.btn.plain { background:transparent; border-color:transparent; color:var(--muted) }
.btn.danger { background:var(--bad); color:var(--on-accent); border-color:transparent; font-weight:600 }
.btn[disabled] { opacity:.5; pointer-events:none }

/* ---- Dialog ----
   Ersätter confirm() och prompt(). Ligger över hela skärmen men i appens egna
   former: tunn neutral ram, ingen gradient, ingen oskärpa. Se docs/DECISIONS.md. */
.modal {
  position:fixed; inset:0; z-index:60; display:flex; align-items:center;
  justify-content:center; padding:20px; background:rgba(6,8,12,.72);
  animation:modalin 120ms ease-out;
}
.modalbox {
  width:100%; max-width:340px; background:var(--surface); color:var(--text);
  border:1px solid var(--border-2); border-radius:var(--r); padding:18px 16px 14px;
}
.modaltext { margin:0 0 14px; font-size:.95rem; line-height:1.45 }
.modalbox .field { margin-bottom:12px }
/* Avbryt till vänster, bekräfta till höger, lika breda: ingen av dem ska vara
   den som fingret råkar träffa. */
.modalacts { display:flex; gap:8px }
.modalacts .btn { margin:0; flex:1 }
@keyframes modalin { from { opacity:0 } to { opacity:1 } }
@media (prefers-reduced-motion:reduce) { .modal { animation:none } }

input[type=text] {
  width:100%; padding:12px 13px; border-radius:10px; font-size:1rem;
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:inherit;
}
input[type=email], textarea {
  width:100%; padding:12px 13px; border-radius:10px; font-size:1rem;
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  font-family:inherit; line-height:1.5; resize:vertical;
}
/* Det fanns INGEN fokusring i stilmallen, sa den som navigerar med tangentbord kunde
   inte se var fokus lag. :focus-visible och inte :focus, sa ringen inte dyker upp vid
   musklick. Gult ar produktens accent och ligger hogt mot alla ytor.
   INGEN border-radius har: outline foljer redan elementets egen radie, sa ett vardet har
   hade andrat FORMEN pa runda knappar i det ogonblick de fick fokus. */
:focus-visible { outline:2px solid var(--gul); outline-offset:2px }
input[type=text]:focus, input[type=email]:focus, textarea:focus {
  outline:none; border-color:var(--border-2);
}

/* Honeypot i kontaktformuläret. Gömd för människor, men inte med display:none:
   en del bottar hoppar över just det. Fältet tas ur flödet i stället. */
.nope {
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0;
}
label.lbl { display:block; font-size:.8rem; color:var(--muted); margin:0 0 5px }
.field + .field { margin-top:12px }

.code-input {
  font:600 1.6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.3em; text-align:center; padding:16px;
}

/* ---- Startsida ---- */
.hero { padding:34px 0 26px; text-align:center }
.hero svg { margin:0 auto 16px; display:block }
.hero .claim { color:var(--muted); max-width:270px; margin:0 auto }
.trustrow {
  display:flex; gap:14px; justify-content:center; margin-top:22px;
  color:var(--muted); font-size:.72rem; flex-wrap:wrap;
}

/* ---- Toppraden i spelvyn ---- */
.topbar {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom:1px solid var(--border);
}
.topbar .tname {
  flex:1; font-weight:500; font-size:.9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Bakåtknapp i toppraden. Träffytan är 40px trots att tecknet är litet:
   den ska gå att träffa med tummen i en bil i rörelse. */
.iconbtn {
  flex-shrink:0; width:32px; height:40px; margin-left:-8px;
  background:none; border:none; cursor:pointer; padding:0;
  color:var(--muted); font-weight:400; font-size:1.6rem; line-height:1;
  font-family:inherit;
  display:flex; align-items:center; justify-content:center;
}
.iconbtn:active { color:var(--text) }
/* Ledarknappen. Bredare än bakåtpilen eftersom den bär en ritad ikon och inte
   ett tecken, och den ska inte klämmas ihop när resenamnet är långt. */
.iconbtn.wide { width:40px; margin:0; flex-shrink:0 }

.code {
  font:600 .8rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em; color:var(--muted); background:var(--surface);
  border:1px solid var(--border); border-radius:6px; padding:6px 8px;
  cursor:pointer; font-family:ui-monospace,Menlo,monospace;
}

/* ---- Egen poäng ----
   Ligger UTANFÖR rullningsytan, mellan toppraden och listan. Bakgrunden är en
   fältkörning där spelvyn var högre än telefonskärmen: det första som försvann
   uppåt när man rullade var poängsiffran, alltså precis det tal spelet handlar
   om. Listan under får rulla, den är en lista. Siffran ska stå still.

   Måtten är knappa med flit: varje pixel här är en pixel mindre för listan. */
.mine {
  padding:11px 16px 8px; text-align:center; position:relative;
  flex-shrink:0; border-bottom:1px solid var(--border);
}
.mine .lbl { font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted) }
.mine .num {
  font-size:2.7rem; line-height:1.05; font-weight:250; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; margin:1px 0 0;
}
.mine .shout { color:var(--muted); font-size:.8rem; margin-top:2px }
.mine .shout b { color:var(--gul); font-weight:600 }

.float {
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  font-size:2rem; font-weight:600; color:var(--gul); pointer-events:none;
  animation:fl 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fl {
  0%   { opacity:0; transform:translate(-50%,10px) scale(.8) }
  18%  { opacity:1; transform:translate(-50%,-4px) scale(1) }
  100% { opacity:0; transform:translate(-50%,-140px) scale(1) }
}
.bump { animation:bp 320ms ease-out }
@keyframes bp { 0%{transform:scale(1)} 35%{transform:scale(1.11)} 100%{transform:scale(1)} }

@media (prefers-reduced-motion: reduce) {
  .float, .bump { animation:none }
  .float { opacity:0 }
}

/* ---- Rader ---- */
.row { display:flex; align-items:center; gap:10px; padding:9px 0 }
.row + .row { border-top:1px solid var(--border) }
.row .rk { width:14px; color:var(--muted); font-size:.78rem; font-variant-numeric:tabular-nums }
.row .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.row.me .nm { font-weight:600 }
.row .pt { font-variant-numeric:tabular-nums; font-weight:600 }
.row .when { color:var(--muted); font-size:.74rem; white-space:nowrap }
/* Klickbara rader ar <button> och inte <div>, sa tangentbord, Enter, Blanksteg och
   ratt roll foljer med gratis. Priset ar att knappens egna stilar maste nollas: annars
   kommer UA:ns gra bakgrund, tva pixlars ram, centrerad text och Arial 13px. */
.row.tap-row {
  cursor:pointer; width:100%; margin:0; text-align:left;
  background:none; border:0; color:inherit; font:inherit;
}
/* Skiljelinjen MÅSTE stå här och inte bara i `.row + .row`. Båda väger lika (två klasser),
   så källordningen avgör, och `border:0` ovanför står senare. Utan den här raden tog
   knappnollningen bort linjerna mellan raderna. Uppmätt: borderTopWidth blev 0px.
   Vilken rad som helst före, inte bara en annan tap-row: i fyndlistan ligger osynkade
   fynd först som `.row.pending`, alltså en vanlig div. */
.row + .row.tap-row { border-top:1px solid var(--border) }
.dot { width:9px; height:9px; border-radius:50%; flex-shrink:0 }

/* ---- Kollapsbara sektioner ---- */
.fold {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden; margin-top:7px;
}
.fold > summary {
  padding:11px 14px; cursor:pointer; display:flex; align-items:center;
  gap:8px; font-size:.9rem; list-style:none;
  /* 42px hög träffyta även med den knappare paddingen: den ska gå att träffa
     med tummen i en bil i rörelse. */
  min-height:42px; box-sizing:border-box;
}
.fold > summary::-webkit-details-marker { display:none }
.fold > summary::after { content:"\203A"; margin-left:auto; color:var(--muted); transition:transform 160ms }
.fold[open] > summary::after { transform:rotate(90deg) }
.fold .body { padding:0 14px 14px }
.badge {
  font-size:.68rem; color:var(--muted); background:var(--bg);
  border:1px solid var(--border); border-radius:99px; padding:2px 7px;
}
.badge.warn { color:var(--warn); border-color:var(--warn) }

/* ---- Karta ---- */
#map {
  height:240px; border-radius:9px; background:var(--surface-2);
  /* Leaflet ritar egna paneler ovanpå; utan detta läcker de utanför radien. */
  overflow:hidden; z-index:0;
}
.leaflet-container { background:var(--map-bg); font:inherit }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background:var(--surface); color:var(--text);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.leaflet-popup-content { margin:10px 12px; font-size:.85rem }
.leaflet-popup-close-button { color:var(--muted) !important }
.leaflet-control-attribution {
  background:rgba(18,20,26,.75) !important; color:var(--muted) !important;
  font-size:.62rem !important;
}
.leaflet-control-attribution a { color:var(--muted) !important }

.legend {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  margin-top:9px; font-size:.72rem; color:var(--muted);
}
.legend span { display:inline-flex; align-items:center; gap:5px }
/* Teckenförklaringen: färgprick, bokstav, namn. Bokstaven låg förut INUTI pricken,
   alltså på spelarfärgen, och klarade då inte kontrastkravet mot någon av de tio
   färgerna. Nu ligger den på appens yta där kontrasten redan är 16:1, och pricken
   bär bara färgen. Se BS-201.
   Pricken är därmed dekor och behöver ingen textfärg, men den behöver fortfarande
   en form: 12px i stället för 16px, eftersom den inte längre rymmer ett tecken. */
.pindot {
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
  display:inline-block; border:1px solid var(--border-2);
}
.pinletter { font-weight:700; margin:0 1px 0 5px }

/* ---- Aktionsfältet, tumzonen ---- */
.actions {
  flex-shrink:0; border-top:1px solid var(--border); background:var(--bg);
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
}
.tap {
  width:100%; border:none; border-radius:14px; padding:17px 16px;
  background:var(--gul); color:var(--gul-ink); cursor:pointer;
  font-weight:700; font-size:1.25rem; line-height:1; font-family:inherit;
  display:flex; align-items:center;
  justify-content:center; gap:10px; letter-spacing:-.01em;
}
.tap:active { transform:translateY(1px) }
.tap.cool { opacity:.45; pointer-events:none }
.tap.busy { opacity:.7 }
.subacts { display:flex; gap:8px; margin-top:9px }
.subacts button {
  flex:1; background:transparent; border:1px solid var(--border);
  color:var(--muted); border-radius:9px; padding:9px; font-size:.8rem;
  cursor:pointer; font-family:inherit;
}
.status { min-height:1.2em; margin:9px 0 0; text-align:center; font-size:.74rem; color:var(--muted) }
/* Tom statusrad ska inte reservera hojd. Raden star tom nastan hela resan, och
   den halva textraden var en av de sista pixlarna mellan spelvyn och en skarm
   utan rullning. */
.status:empty { min-height:0; margin:0 }
.status.bad { color:var(--bad) }
.status.warn { color:var(--warn) }

/* Kö-indikator. Ska vara läsbar men inte skrika: att fynd väntar är normalt
   på en bilresa, inte ett fel. */
.sync { min-height:0; margin:8px 0 0; text-align:center; font-size:.74rem; color:var(--muted) }
.sync:empty { margin:0 }
.sync.warn { color:var(--warn) }
.sync.bad { color:var(--bad) }

/* Osynkade fynd i listan. Ingen färgad vänsterkant: bara dämpad text plus
   märket "väntar", enligt Design Constitution. */
.row.pending .nm { color:var(--muted) }

/* Målväljare. Ersätter prompt(), som blockerar JS-tråden och därmed även
   tömningen av kön, och som ser ut som ett systemfel i en installerad app. */
.sheet { margin-bottom:9px }

/* Etiketten pa agarknappen i topbaren. Ikonen stod ensam och gick darfor inte att hitta:
   enda vagen till "Avsluta resan" ledde genom den. Graden ar liten med avsikt, knappen ska
   inte konkurrera med resans namn. */
.iconbtn .iconlbl { margin-left:5px; font-size:.78rem; font-weight:600; letter-spacing:.01em }
.sheetbtn {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:13px 14px; margin-bottom:6px; border-radius:10px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); font-weight:500; font-size:.95rem; font-family:inherit;
}
.sheetbtn:active { transform:translateY(1px) }
.sheetbtn .pts { color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums }

/* ---- Regelval ---- */
.opt { display:flex; align-items:center; gap:11px; padding:11px 0; cursor:pointer }
.opt + .opt { border-top:1px solid var(--border) }
.opt input { width:18px; height:18px; accent-color:var(--gul); flex-shrink:0 }
/* Spelikonen i spelvalet. Dämpad som standard, full färg när spelet är valt, så
   ikonen bekräftar valet i stället för att konkurrera med det. Monokrom och i
   `currentColor`, se BS-213. */
.opt .ikon { flex-shrink:0; display:flex; color:var(--muted) }
.opt:has(input:checked) .ikon { color:var(--gul) }
.opt .t { flex:1 }
.opt .t b { display:block; font-weight:500; font-size:.9rem }
.opt .t span { color:var(--muted); font-size:.75rem }
.opt .pts { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums }

/* ---- Spelarchips ---- */
.players { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px }
.chip {
  display:inline-flex; align-items:center; gap:7px; padding:7px 11px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:99px; font-size:.85rem;
}
.chip button {
  background:none; border:none; color:var(--muted); cursor:pointer;
  padding:0 0 0 2px; font-size:1rem; line-height:1; font-family:inherit;
}
.chip.add { color:var(--muted); cursor:pointer; border-style:dashed }

/* ---- Dela ---- */
.bigcode {
  font:600 2.9rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em; margin:8px 0 4px;
}
.linkline {
  font-size:.74rem; color:var(--muted); word-break:break-all;
  font-family:ui-monospace,Menlo,monospace;
}

.note { font-size:.72rem; color:var(--muted); text-align:center; margin-top:12px }

/* ---- Dokumentsidor (summeringen) ----
   Spelvyn är en app som fyller skärmen. Summeringen är en sida som ska rulla,
   delas och läsas i en chattens inbyggda webbläsare, så den behöver motsatt
   grundlager. */
body.doc { height:auto; min-height:100dvh; overflow:visible; display:block }

/* Länkar i löpande text. Browserns standardblått är nästan oläsligt mot den
   mörka bottnen, och understrykningen är det som bär betydelsen. */
a { color:var(--text); text-decoration:underline; text-decoration-color:var(--border-2);
    text-underline-offset:3px }
a:hover { text-decoration-color:var(--muted) }
.note a, .xs a { color:var(--muted) }
.sheetpage {
  max-width:520px; margin:0 auto;
  padding:28px 18px calc(40px + env(safe-area-inset-bottom));
}
.sheetpage h1 { font-size:1.6rem; margin:0 0 6px; letter-spacing:-.02em }
.kicker {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted); margin:0 0 10px;
}

.winner { text-align:center; padding:26px 0 18px }
.winner .lbl {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
}
.winner .who {
  font-size:2.1rem; font-weight:600; letter-spacing:-.02em; margin:2px 0 2px;
  overflow-wrap:break-word;
}

.stats { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.stat {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:12px;
}
.stat .v {
  font-size:1.45rem; font-weight:500; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat .k { font-size:.7rem; color:var(--muted); margin-top:2px; line-height:1.35 }

/* Dokumentsidornas rubriker och löptext. Spelvyns h2 är en skärmrubrik, här är
   det en avsnittsrubrik i en artikel. */
.doc h2 {
  font-size:1.12rem; margin:28px 0 8px; letter-spacing:-.01em;
  color:var(--text); text-transform:none;
}
.doc h2:first-of-type { margin-top:22px }
.lead { font-size:1rem; color:var(--muted) }
.doc ul { margin:0 0 8px; padding-left:20px; color:var(--muted); font-size:.9rem }
.doc ul li { margin:0 0 4px }
.doc .card p:last-child { margin-bottom:0 }

.cta {
  margin-top:26px; padding:20px 16px; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
}
.cta-inline { margin:18px 0 8px }
.cta p { margin:0 0 12px }
.cta .xs { margin:10px 0 0 }

/* Summeringens karta är inte kollapsad: här är den poängen med sidan. */
.doc #map { height:280px; margin-top:4px }

@media (max-width:380px) {
  .stats { grid-template-columns:1fr }
}
.backlink {
  display:inline-block; color:var(--muted); font-size:.85rem;
  text-decoration:none; margin-bottom:12px; cursor:pointer; background:none;
  border:none; padding:0; font-family:inherit;
}

.spinner { text-align:center; color:var(--muted); padding:40px 16px; font-size:.85rem }

/* Granskningsvy på desktop. Mobilen är grundläget och rörs inte. */
@media (min-width:560px) and (min-height:640px) {
  body { background:var(--backdrop); align-items:center; justify-content:center; padding:20px }
  #app {
    flex:none; width:100%; max-width:420px; height:min(860px, calc(100dvh - 40px));
    border:1px solid var(--border); border-radius:22px; overflow:hidden;
    background:var(--bg);
  }
  .topbar { padding-top:12px }
  .actions { padding-bottom:16px }
  .scroll { scrollbar-width:thin }
  .scroll::-webkit-scrollbar { width:4px }
  .scroll::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:9px }
}