/* ============================================================
   NEXTRUM — exemplen på startsidan (2026-10-22)

   "Så ser ni att det funkar" (index.html och en/index.html, 1d), sist
   efter startsidans stilar. Rapporten, studieplanen och vyn är ritade
   som i vyerna (rapportkortet i nextrum-arbetsyta.css, läget i ockra
   för Bra), men med startsidans tokens, för vyernas stilmallar laddas
   inte här. Inga hexkoder, så mörkt läge följer med.

   Utan skript står delarna under varandra (.ex-panel med rubrik). Med
   skript (.ar-flikar, nextrum-exempel.js) är de flikar: rubriken göms
   för ögat och en panel i taget syns. Siffrorna i kortet hör ihop med
   listan bredvid och är dekor: content med tom alt-text, så att en
   skärmläsare inte läser upp dem, och listan är en <ol>.
   ============================================================ */

.nx-ex{position:relative}
.nx-ex [hidden]{display:none !important}

/* Flikarna: en rad med tre lika breda val på papperets lugna yta, den
   valda som ett kort. På en telefon står ikonen över texten, så att
   "Er vy som förälder" får bryta utan att raden blir för bred. */
.ex-flikar{
  margin-top:clamp(32px,4vw,52px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  max-width:720px;padding:6px;border-radius:22px;background:var(--pap-2);
}
.ex-flik{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:10px 14px;border:0;border-radius:16px;background:none;cursor:pointer;
  font:inherit;font-size:.98rem;font-weight:650;letter-spacing:-.012em;line-height:1.2;color:var(--bl-2);
  -webkit-tap-highlight-color:transparent;
  transition:background-color .25s var(--e-mjuk),color .25s var(--e-mjuk),box-shadow .25s var(--e-mjuk);
}
.ex-flik svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ex-flik:hover{color:var(--bl)}
.ex-flik[aria-selected="true"]{background:var(--yta);color:var(--bl);box-shadow:var(--sk-1)}
.ex-flik[aria-selected="true"] svg{color:var(--acc)}
/* I mörkt läge är --yta och --pap-2 nästan samma: den valda tar --bricka. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ex-flik[aria-selected="true"]{background:var(--bricka)}
}
:root[data-theme="dark"] .ex-flik[aria-selected="true"]{background:var(--bricka)}
.ex-flik:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:620px){
  .ex-flik{flex-direction:column;gap:6px;padding:10px 6px;font-size:.84rem;text-align:center}
}

/* Panelerna. Utan skript har varje panel sin rubrik och luft emellan. */
.ex-paneler{margin-top:clamp(28px,3.4vw,44px)}
.ex-panel + .ex-panel{margin-top:clamp(44px,5vw,72px)}
.ex-panel-rubrik{margin:0 0 18px;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.025em;font-weight:700;color:var(--bl)}
.ar-flikar .ex-panel + .ex-panel{margin-top:0}
.ar-flikar .ex-panel-rubrik{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ex-panel:focus-visible{outline:2px solid var(--acc);outline-offset:6px;border-radius:28px}
/* Var i berättelsen delen står: när familjen ser den, i fetstil, och
   en mening om vad den är. Står kvar med flikarna, när rubriken göms. */
.ex-panel-intro{
  margin:0 0 clamp(12px,1.6vw,20px);max-width:62ch;
  font-size:clamp(1.04rem,1.3vw,1.18rem);line-height:1.55;color:var(--bl-2);text-wrap:pretty;
}
.ex-panel-intro b{color:var(--bl);font-weight:700}
@media (prefers-reduced-motion:no-preference){
  html:not([data-motion="still"]) .ar-flikar .ex-panel{animation:ex-in .42s var(--e-ut)}
}
@keyframes ex-in{from{opacity:0;translate:0 10px}}

/* Kortet och förklaringen bredvid, under varandra smalare än 960 px. */
.ex-scen{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start;
}
@media (min-width:960px){.ex-scen{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center}}

.ex-kort{
  --ex-pad:clamp(26px,2.6vw,36px);
  position:relative;margin:14px 0 0;
  padding:var(--ex-pad);border-radius:26px;
  background:var(--yta);border:1px solid var(--ln);box-shadow:var(--sk-2);
}
/* Tejpen: att det är ett exempel, uppe i hörnet som en lapp man satt dit. */
.ex-tejp{
  position:absolute;top:0;right:clamp(14px,2vw,26px);translate:0 -55%;rotate:2.2deg;z-index:1;
  --tejp-tand:5px;padding:7px calc(var(--tejp-tand) + 12px) 8px;gap:1px;
}
.ex-tejp .nx-tejp-stor{font-size:1rem;letter-spacing:-.015em}
.ex-tejp .nx-tejp-liten{font-size:.74rem}

/* Siffrorna i kortet, som pekar på förklaringen. En ruta får sin i
   hörnet; en text får sin i kortets marginal, i höjd med första raden,
   så att den aldrig står på en bokstav. En grupp i vyn får sin framför
   rubriken. */
[data-ex-nr]{position:relative}
[data-ex-nr]::after{
  content:attr(data-ex-nr) / "";
  position:absolute;top:-9px;left:-9px;
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc);color:var(--acc-ink);
  font-family:var(--f-mono);font-size:11px;font-weight:600;line-height:1;
  box-shadow:0 0 0 3px var(--yta);
}

/* ---------- Rapporten (som rapportkortet i vyerna) ---------- */
.ex-huvud{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.ex-avatar{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);color:var(--bl-3);
}
.ex-avatar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ex-titel{margin:0;font-size:1.18rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--bl)}
.ex-meta{margin:4px 0 0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:.86rem;line-height:1.45;color:var(--bl-3)}
.ex-meta span + span::before{content:"·";margin:0 .5em;opacity:.7}
/* Smalt står avsändaren på en egen rad, så att en punkt aldrig börjar raden. */
@media (max-width:520px){
  .ex-meta span:first-child{flex-basis:100%}
  .ex-meta span:nth-child(2)::before{content:none}
}
.ex-gick{
  align-self:start;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 12px 5px 10px;border-radius:999px;font-size:.84rem;font-weight:650;
  background:var(--ockra-soft);color:var(--ockra-text);
}
.ex-gick::before{
  content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;rotate:-45deg;
}
.ex-gick[data-ex-nr]::after{left:auto;right:-9px}
.ex-text[data-ex-nr]::after,.ex-mal[data-ex-nr]::after{left:calc(var(--ex-pad) / -2 - 10px);top:calc(.8em - 10px)}
.ex-grupp[data-ex-nr]::after,.ex-delrub[data-ex-nr]::after{top:-2px;left:0}
.ex-grupp[data-ex-nr] .ex-grupp-rubrik,.ex-delrub[data-ex-nr]{padding-left:28px;min-height:16px}
.ex-ekv{white-space:nowrap}
.ex-text{
  margin:20px 0 0;font-size:clamp(1.02rem,1.25vw,1.1rem);line-height:1.66;color:var(--bl);text-wrap:pretty;
}
.ex-duo{
  margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
}
@media (min-width:560px){.ex-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ex-duo > div{padding:14px 16px;border-radius:16px;background:var(--tint)}
.ex-duo small{display:block;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--bl-3)}
.ex-duo b{display:block;margin-top:4px;font-size:.98rem;font-weight:650;line-height:1.4;color:var(--bl)}
@media (max-width:520px){
  .ex-huvud{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .ex-avatar{width:40px;height:40px}
  .ex-gick{grid-column:2;justify-self:start}
}

/* ---------- Studieplanen (som i Mina lektioner) ---------- */
.ex-plan-topp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ex-uppd{font-size:.84rem;color:var(--bl-3)}
.ex-tag{
  display:inline-block;margin-top:16px;padding:5px 12px;border-radius:999px;
  font-size:.84rem;font-weight:650;background:var(--acc-soft);color:var(--acc-text);
}
.ex-mal{margin:16px 0 0;font-size:1.02rem;line-height:1.55;color:var(--bl)}
.ex-veckor{
  list-style:none;margin:18px 0 0;padding:16px 18px;border-radius:16px;background:var(--tint);
  display:grid;gap:10px;
}
.ex-veckor li{font-size:.98rem;line-height:1.5;color:var(--bl-2)}
.ex-veckor b{color:var(--bl);font-weight:650}

/* ---------- Vyn (Översikt) ----------
   Menyn till vänster på en bred skärm, som vyns sidomeny; smalare står
   bara innehållet, för en meny som inte går att använda är bara brus. */
.ex-vy{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:760px){.ex-vy{grid-template-columns:minmax(0,170px) minmax(0,1fr)}}
.ex-meny{list-style:none;margin:0;padding:0 18px 0 0;border-right:1px solid var(--ln);display:none}
@media (min-width:760px){.ex-meny{display:grid;align-content:start;gap:2px}}
.ex-meny li{padding:8px 12px;border-radius:12px;font-size:.88rem;color:var(--bl-3)}
.ex-meny li.ar-vald{background:var(--tint);color:var(--bl);font-weight:650}
.ex-vy-kropp{display:grid;gap:16px;min-width:0}
.ex-vy-under{margin:3px 0 0;font-size:.9rem;color:var(--bl-3)}
.ex-grupp-rubrik{margin:0 0 8px;font-size:.8rem;font-weight:650;letter-spacing:.02em;color:var(--bl-3)}
.ex-rad{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;
  padding:13px 16px;border-radius:16px;background:var(--tint);border-left:3px solid var(--ln-2);
  color:inherit;text-decoration:none;
}
/* Lägets färg: ockra väntar på någon, mossa klart (som i vyerna). */
.ex-rad.ar-ockra{border-left-color:var(--ockra)}
.ex-rad.ar-mossa{border-left-color:var(--mossa)}
.ex-rad-mitt{display:grid;gap:2px;min-width:0}
.ex-rad-mitt b{font-size:.98rem;font-weight:650;color:var(--bl)}
.ex-rad-mitt span{font-size:.88rem;line-height:1.4;color:var(--bl-2)}
.ex-rad-mitt .ex-rad-not{color:var(--ockra-text)}
.ex-knappar{display:flex;gap:8px}
.ex-knapp{
  padding:7px 14px;border-radius:999px;border:1px solid var(--ln-2);
  font-size:.82rem;font-weight:650;color:var(--bl);background:var(--yta);
}
.ex-knapp.ar-fylld{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.ex-lage{
  padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:650;
  background:var(--mossa-soft);color:var(--mossa-text);
}
.ex-sa{padding:16px 18px;border-radius:16px;background:var(--tint);display:grid;gap:10px}
/* Så går det: samma fördelning som ritaFordelningar() ritar, en stapel
   och en förklaring, med lägenas färger (mossa bra, ockra mitten, lera
   följ upp). Ett läge utan något står tonat. */
.ex-delrub{
  margin:0;display:flex;align-items:baseline;gap:10px;
  font-size:.86rem;font-weight:650;color:var(--bl);
}
.ex-delrub + .ex-fd + .ex-delrub{margin-top:8px}
.ex-delrub em{margin-left:auto;font-style:normal;font-weight:500;font-size:.8rem;color:var(--bl-3)}
.ex-fd{display:grid;gap:10px}
.ex-stapel{display:flex;gap:3px;height:12px}
.ex-stapel i{flex:1;border-radius:100px;background:var(--bl-3)}
.ex-fd-lista{display:flex;flex-wrap:wrap;gap:6px 18px}
.ex-fd-lista > span{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--bl-2)}
.ex-fd-lista > span.ar-tom{opacity:.5}
.ex-fd-lista i{width:9px;height:9px;border-radius:50%;background:var(--bl-3);flex:none}
.ex-fd-lista b{font-family:var(--f-mono);font-size:.82rem;font-weight:600;color:var(--bl)}
.ex-stapel i.ar-bra,.ex-fd-lista i.ar-bra{background:var(--mossa)}
.ex-stapel i.ar-mitten,.ex-fd-lista i.ar-mitten{background:var(--ockra)}
.ex-stapel i.ar-folj,.ex-fd-lista i.ar-folj{background:var(--acc)}

/* ---------- Förklaringen bredvid kortet ---------- */
.ex-forklaring{list-style:none;margin:0;padding:0;counter-reset:ex;display:grid;gap:16px}
.ex-forklaring li{
  counter-increment:ex;position:relative;padding-left:40px;
  font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.55;color:var(--bl-2);
}
.ex-forklaring li::before{
  content:counter(ex);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--acc);color:var(--acc-lugn);
  font-family:var(--f-mono);font-size:12px;font-weight:600;
}
.ex-forklaring b{color:var(--bl);font-weight:650}

/* ---------- Under exemplen ---------- */
.ex-fot{
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--ln);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;
}
.ex-fot-text{
  margin:0;max-width:24ch;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.08;letter-spacing:-.035em;font-weight:750;
  color:var(--bl);text-wrap:balance;
}
.ex-fot .btn svg{width:16px;height:16px;margin-left:10px}
/* Tryggheten under knappen: gratis att fråga, inget som binder, svar inom
   ett dygn (laxhjalp-eller-privatlarare.html och startsidans steg). */
.ex-fot-not{flex-basis:100%;margin:0;font-size:.95rem;color:var(--bl-3)}
@media (min-width:760px){.ex-fot-not{text-align:right}}