/* bas.css — appens gemensamma grund: farger, typografi, avstand och
   komponenter. Alla vyer bygger pa variablerna och klasserna har.

   Systemet i korthet (dokumenterat i DESIGN.md):
   - Fargerna ligger i tre lagen: ljust som standard, morkt via
     prefers-color-scheme och morkt via temavaxlaren (data-tema).
     Alla par ar valda for WCAG AA i bada lagena.
   - Typskalan har tre niva: h1 (sidans amne), h2 (sektion), brodtext.
     Damat och .liten for sekundar information.
   - Avstandsskalan (--luft-*) gar i steg om 4/8/12/16/24/40.
   - Ytor: --bg ar sidbotten, --yta ar kort och paneler. Kort avgransas
     med ram, inte skugga — lugnare och fungerar i bada lagena. */

:root {
  --bg: #f6f5f1;
  --yta: #ffffff;
  --ram: #e1dfd8;
  --text: #1c1b18;
  --dampad: #5f5c55;
  --accent: #1f5fa8;
  --accent-svag: #e8eff9;
  --ratt: #1c7a4a;
  --fel: #b3261e;
  --radie: 10px;

  /* nya tokens — komplement, inget gammalt namn har rorts */
  --radie-liten: 7px;
  --luft-1: 4px;
  --luft-2: 8px;
  --luft-3: 12px;
  --luft-4: 16px;
  --luft-5: 24px;
  --luft-6: 40px;
  --maxbredd: 1100px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="ljust"]) {
    --bg: #131316;
    --yta: #1d1d23;
    --ram: #34343d;
    --text: #eceae4;
    --dampad: #a3a097;
    --accent: #7fb0ee;
    --accent-svag: #22334b;
    --ratt: #62c08c;
    --fel: #ef8b83;
  }
}

:root[data-tema="morkt"] {
  --bg: #131316;
  --yta: #1d1d23;
  --ram: #34343d;
  --text: #eceae4;
  --dampad: #a3a097;
  --accent: #7fb0ee;
  --accent-svag: #22334b;
  --ratt: #62c08c;
  --fel: #ef8b83;
}

* { box-sizing: border-box; }
/* Faltkontrollerna var utelamnade: datum-, tid- och textfalt fick ingen
   synlig markering alls nar de fokuserades med tangentbord, sa den som
   tabbar genom planen eller valkomstflodet sag inte var hen var. */
:where(button, a, [tabindex], summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* #vy-prov ar display:flex — utan detta slar den ut hidden-attributet */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* rem, inte px: med en hardkodad pixelstorlek star brodtexten still nar
     anvandaren hojt teckenstorleken i telefonen, medan allt rem-satt vaxer
     — och da blir smatexten storre an det den beskriver. */
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--accent-svag); }

.vy { max-width: var(--maxbredd); margin: 0 auto; padding: var(--luft-5) var(--luft-4) 72px; }
/* Lasbar radlangd: .vy ar 1100 px bred, och brodtext gick upp mot 150
   tecken per rad pa laptop och storre. Kort och listor far vara breda,
   lopande text inte. :where() ger regeln specificitet 0,0,1, sa att
   smalare klassregler som .ingress (52ch) fortfarande vinner. */
:where(.vy) p { max-width: 72ch; }

/* ---------- typografi ----------
   h1: en per vy, sidans amne. h2: sektionsrubrik. Sekundart satts med
   .dampad och .liten — aldrig med en fjarde rubrikstorlek. */
h1 {
  font-size: 1.5rem; line-height: 1.2; font-weight: 700;
  letter-spacing: -.015em; margin: 0 0 6px;
  text-wrap: balance;
}
h2 {
  font-size: 1.125rem; line-height: 1.3; font-weight: 650;
  letter-spacing: -.005em; margin: 30px 0 10px;
  text-wrap: balance;
}
h3 { font-size: 1rem; line-height: 1.35; margin: 20px 0 8px; }
/* Sidrubrik i passvyer (drill, misstag): en riktig h1 for skarmlasare,
   men med samma utseende som den fetstilta rad den ersatte. */
.passrubrik { font-size: 1rem; line-height: 1.35; letter-spacing: 0; margin: 0; text-wrap: wrap; }
.topp { margin: 0 0 22px; }
.ingress { color: var(--dampad); margin: 0 0 8px; max-width: 52ch; }
.dampad { color: var(--dampad); }
.liten { font-size: .85rem; }

/* ---------- knappar ---------- */
.knapp {
  font: inherit;
  font-weight: 500;
  min-height: 44px; /* tumvanligt — pluggandet sker pa bussen */
  padding: 9px 14px;
  border: 1px solid var(--ram);
  background: var(--yta);
  color: var(--text);
  border-radius: var(--radie);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.knapp:hover { border-color: var(--accent); }
.knapp[disabled] { opacity: .4; cursor: default; }
/* Vit text faller under WCAG mot den ljusa accenten i morkt lage.
   --bg ar ljus i ljust lage och mork i morkt — godkant i bada. */
.knapp.primar {
  background: var(--accent); border-color: var(--accent);
  color: var(--bg); font-weight: 600;
}
.lank {
  background: none; border: none; color: var(--dampad);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 8px 0; font: inherit;
}
.knapprad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* ---------- listor och kort ---------- */
.lista { display: grid; gap: 10px; }
.kort {
  display: flex; align-items: center; gap: 12px;
  /* Utan wrap kan textblocket och knappen inte vika ner sig nar
     min-bredderna inte ryms, och vid 200 % textstorlek skrollade sidan i
     sidled med knappen avklippt vid hogerkanten. */
  flex-wrap: wrap;
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 14px 16px;
}
/* .vaxer betyder "ta resten av raden" och anvands aven utanfor .kort —
   utan den generella regeln kollapsade den till innehallets bredd och lat
   syskonet krypa in bredvid. */
/* Inget min-width: 0 har heller — samma fel som .dagens-blocknamn hade.

   .kort har flex-wrap just for att knappen ska vika ner sig under texten
   nar det blir trangt (se kommentaren ovan). min-width: 0 lat textkolumnen
   krympa i stallet: vid 320 px blev den 82 px bred pa startsidan, smalare
   an ordet "(pahittat", och rubriken flodade ut over knappen. Knappen
   behovde aldrig vika ner sig, for kolumnen gav vika forst.

   Med standardvardet kan kolumnen inte bli smalare an sitt langsta ord, och
   da wrappar knappen som det var tankt. Klasser som behover krympa for att
   kunna korta av med ellips satter sin egen min-width: 0 (provtopp-text,
   misstag-topp-text, typrad-namn m.fl.) och paverkas inte. */
.vaxer { flex: 1; overflow-wrap: break-word; }
.kort b { display: block; }
.kort.framhavd { border-color: var(--accent); background: var(--accent-svag); }
.markning {
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--dampad); border: 1px solid var(--ram);
  border-radius: 999px; padding: 3px 9px;
}

/* ---------- huvudnav ---------- */
.huvudnav {
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  border-bottom: 1px solid var(--ram); background: var(--yta);
  position: sticky; top: 0; z-index: 4;
}
.navlank {
  color: var(--dampad); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  padding: 7px 12px; border-radius: 999px;
}
.navlank:hover { color: var(--text); }
.navlank[aria-current="page"] { background: var(--accent-svag); color: var(--accent); }

.navlankar {
  display: flex; gap: 4px; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.navlankar::-webkit-scrollbar { display: none; }
.navlank { flex: none; }

.temaknapp {
  flex: none; border: 1px solid var(--ram); background: var(--yta);
  color: var(--dampad); border-radius: 999px; cursor: pointer;
  width: 34px; height: 34px; font-size: .95rem; line-height: 1;
}
.temaknapp:hover { color: var(--text); border-color: var(--accent); }

/* ---------- resultat ---------- */
.poangkort {
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 20px; margin-top: 16px;
}
.poang-huvud { display: flex; align-items: baseline; gap: 10px; }
.normerad {
  font-size: 3rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.not { color: var(--dampad); margin: 10px 0 0; font-size: .9rem; }
.rapoang { font-size: 1.1rem; margin: 0 0 10px; }
.rattning { display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0; }
.ruta {
  width: 38px; padding: 5px 0; text-align: center; font-size: .78rem;
  border: 1px solid var(--ram); border-radius: var(--radie-liten);
  background: var(--yta); font-variant-numeric: tabular-nums;
}
.ruta.ja { border-color: var(--ratt); color: var(--ratt); }
.ruta.nej { border-color: var(--fel); color: var(--fel); }
.varningsruta {
  display: block;
  border: 1px solid var(--ram); border-left: 3px solid var(--accent);
  background: var(--accent-svag); border-radius: var(--radie-liten);
  padding: 10px 12px; margin: 12px 0; font-size: .9rem;
}

#rekommendation { margin-top: 8px; }

/* Lagring som tog slut mitt i en session — se main.js. Ligger utanfor
   #app och far darfor samma bredd och luft som vyerna sjalva. */
.lagringsfel {
  max-width: var(--maxbredd);
  margin: var(--luft-4) auto 0;
  width: calc(100% - 2 * var(--luft-4));
  box-sizing: border-box;
}

/* ---------- installningar och banners ---------- */
.installning {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 14px 16px;
}
.installning input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.installning span { display: grid; gap: 2px; }

.installbanner {
  position: fixed; left: 12px; right: 12px; z-index: 15;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px;
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 12px 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  max-width: 520px; margin: 0 auto;
}
.installbanner-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.installbanner-knappar { display: flex; gap: 8px; flex: none; }
.installbanner-stang {
  border: none; background: none; color: var(--dampad); cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 0 2px; flex: none;
}
body[data-vy="prov"] .installbanner { display: none; }

.forklaring {
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 12px 14px;
}
.forklaring summary { cursor: pointer; font-weight: 500; }
.forklaring summary::marker { color: var(--dampad); }
.forklaring p { margin: 10px 0 0; color: var(--text); }

.dagsstatus {
  display: flex; gap: 10px; margin-top: 24px;
}
.dagsstatus-post {
  flex: 1; display: grid; gap: 2px; text-align: center;
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie); padding: 14px 10px;
}
.dagsstatus-post b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

/* ---------- vyfixar ----------
   Sma lagningar for saker vy-CSS:en inte tacker. Bara bas.css far andras,
   sa de bor har — flytta garna in dem i respektive vy-CSS vid tillfalle. */

/* Ordvyn lagger sitt innehall direkt i #app utan .vy-ram och hamnade
   darfor kant i kant med skarmen. Samma ram som .vy ger. */
body[data-vy="ord"] #app {
  max-width: var(--maxbredd);
  margin: 0 auto;
  padding: var(--luft-5) var(--luft-4) 72px;
}

/* Provtoppens rubrik ar ett h1 men prov.css stylar bara 'strong' —
   utan detta radbryts titeln i 1.5rem och trycker ner hela provytan.
   Har: samma kompakta stil som resten av topplisten. */
.provtopp-text h1 {
  font-size: .9rem; font-weight: 650; letter-spacing: 0;
  margin: 0; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Traffytor i svarsblanketten: minst 44 x 44 px (WCAG 2.5.5).
   Cirklarna var 34 px och flaggan annu mindre — for smatt for tumme
   pa buss. Ytan vaxer, layouten ar oforandrad i ovrigt. */
.blankett .alt, .drill-blankett .drill-alt { width: 44px; height: 44px; }
.blankett .flagga { min-width: 44px; min-height: 44px; }

/* Tidsmarkering: uppgiften har dragit over sitt riktmarke (tempo.js).
   Avsiktligt lagmald — inget rott, ingen nedrakning, ingen rorelse som
   drar blicken fran uppgiften. Bara en dampad rad med en liten prick. */
.tidsmarkering {
  /* Ett vanligt textstycke, inte en flexrad: texten ska flyta over raderna
     som all annan text. Pricken ligger inline framfor. */
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--dampad);
  animation: tidsmarkering-in .45s ease-out both;
}
.tidsmarkering-prick {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  transform: translateY(-1px);
}
@keyframes tidsmarkering-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tidsmarkering { animation: none; }
}

/* Notisen om att en nyare version finns. Ligger over innehallet men
   nedanfor navigeringen, och skjuter aldrig undan nagot — den som star
   mitt i en uppgift ska inte tappa bort sig. */
.nyversion {
  /* Spanner mellan kanterna i stallet for att krympa till innehallet —
     annars staplas texten och knapparna i en smal, hog pelare pa mobil. */
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  margin-inline: auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 480px;
  padding: 12px 16px;
  background: var(--yta);
  color: var(--text);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  box-shadow: 0 6px 24px rgb(0 0 0 / .18);
}
.nyversion .knapp { min-height: 44px; }


/* Lankar bar appens accent. Utan den har regeln ritade webblasaren dem i
   sitt eget bla — och lila efter besok — sa appen hade tre olika blaa och
   DESIGN.md:s regel "en accent, blatt betyder interaktivt" gallde inte i
   de nyare vyerna. */
a { color: var(--accent); text-underline-offset: 3px; }
a:visited { color: var(--accent); }

/* Ordmarket i navet — se ritaNav i router.js. Krymper aldrig bort:
   flex: none, sa lankarna som ligger i sin egen skrollyta tar utrymmet
   i stallet. */
.navmarke {
  flex: none;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px 8px 0;
  white-space: nowrap;
}
.navmarke:hover { color: var(--accent); }
@media (max-width: 380px) {
  .navmarke { font-size: .85rem; padding-right: 6px; }
}

/* Telefon: lankarna far en egen rad under ordmarket och temaknappen.

   Pa en rad fick de aldrig plats. De fyra lankarna behover 272 px; bredvid
   ordmarket och temaknappen fanns 158 px vid 320, 215 vid 390 och 255 vid
   430. Skrollytan hindrade sidan fran att svamma over, men Plan lag dold
   till hoger pa varje vanlig telefon — och vid 320 aven Statistik — utan
   nagot som visade att det fanns mer att skrolla till.

   Ordmarket behalls: det ar det enda stallet appen sager sitt namn (se
   ritaNav). Brytpunkten ar den bredd dar allt ryms pa en rad: 24 px
   padding, 101 px marke, 272 px lankar, 34 px temaknapp och tva mellanrum
   a 8 px = 447 px. Skrollytan ligger kvar som reserv for stor textstorlek. */
@media (max-width: 459px) {
  .huvudnav { flex-wrap: wrap; row-gap: 2px; padding-bottom: 6px; }
  .navmarke { margin-right: auto; }
  .navlankar { order: 1; flex: 1 0 100%; justify-content: space-between; }
}

/* Tangentbordstips ("Mellanslag går vidare", "Tangent 1–5 väljer") ar bara
   till nytta med tangentbord. Pa en pekskarm ar de brus — samma heuristik
   som .egna-tangenttips: pekare som hovrar och ar fin. */
.tangenttips { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tangenttips { display: inline; }
}