/* --- Grund ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Två mjuka ljuskällor ger djup utan att dela upp sidan i sektioner. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120ch 80ch at 12% -10%,  rgba(55, 122, 135, 0.42), transparent 62%),
    radial-gradient(90ch  70ch at 92% 8%,    rgba(141, 200, 199, 0.16), transparent 60%),
    radial-gradient(100ch 90ch at 50% 108%,  rgba(43, 98, 112, 0.34), transparent 65%),
    linear-gradient(180deg, var(--ink-850), var(--ink-900) 55%, #040f13);
}

/* Ett nästan omärkligt raster, som i kursens omslagsbild. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(90ch 70ch at 50% 0%, #000 20%, transparent 78%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--mint-200);
  text-decoration-color: rgba(169, 222, 221, 0.35);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}
a:hover { color: var(--mint-100); text-decoration-color: var(--mint-200); }

:focus-visible {
  outline: 2px solid var(--mint-200);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  height: 1px;
  margin: var(--gap-lg) 0;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

::selection { background: rgba(141, 200, 199, 0.28); color: #fff; }

/* --- Återkommande byggstenar ------------------------------------------ */

.wrap {
  width: min(100% - 2.5rem, var(--page));
  margin-inline: auto;
}
.wrap--wide { width: min(100% - 2.5rem, var(--page-wide)); }
.wrap--narrow { width: min(100% - 2.5rem, 78ch); }

/* Etiketter i monospace ger den tekniska kontrasten mot rubrikerna. */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint-300);
  margin: 0 0 var(--gap-sm);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.kicker::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--mint-300), transparent);
  flex: none;
}
.kicker--plain::before { display: none; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: #cfe0e2;
  max-width: 58ch;
}

.muted { color: var(--muted); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}

/* Glas, inte lådor: ytan definieras av ljus uppifrån och en mjuk skugga. */
.card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow), var(--sheen);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out),
              background 0.32s var(--ease);
}
.card--link:hover {
  transform: translateY(-4px);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lift), var(--sheen);
  color: inherit;
}

/* --- Knappar ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--glass-strong);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sheen);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

.btn--primary {
  --btn-bg: linear-gradient(135deg, var(--mint-200), var(--mint-300));
  --btn-fg: #05171c;
  box-shadow: var(--glow-mint);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(169,222,221,.4), 0 24px 60px -22px rgba(141,200,199,.6); }

.btn--ghost { --btn-bg: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.btn--ghost:hover { --btn-bg: var(--glass); }

.btn--sm { padding: 0.55rem 1rem; font-size: var(--fs-xs); }

.btn svg { width: 1em; height: 1em; flex: none; }

/* --- Märken ----------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint-200);
  white-space: nowrap;
}
.badge--locked { color: var(--amber); }
.badge--live   { color: var(--coral); }
.badge--dot::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

/* --- Sidhuvud --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0.75rem 0;
  background: color-mix(in srgb, var(--ink-900) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: box-shadow 0.3s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.brand img { width: 46px; height: 46px; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mint-300);
}

.nav { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }

.nav a {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--glass); }
.nav a[aria-current] { color: var(--text); background: var(--glass-strong); }

.nav__sep { width: 1px; height: 1.4rem; background: var(--hairline); margin: 0 0.5rem; }

/* En knapp inne i navigeringen behåller sin egen textfärg. */
.nav a.btn, .nav a.btn:hover { color: var(--btn-fg); }

.header-tools { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Sökknappen visar sin tangentbordsgenväg. */
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.search-trigger:hover { color: var(--text); background: var(--glass-strong); }
.search-trigger svg { width: 1rem; height: 1rem; }
.search-trigger kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r-xs);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  color: var(--faint);
}

.nav-toggle { display: none; }

/* --- Sidfot ----------------------------------------------------------- */

.site-footer {
  margin-top: var(--gap-2xl);
  padding: var(--gap-xl) 0 var(--gap-lg);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--gap-lg);
  align-items: start;
}
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint-300);
  margin-bottom: 0.9rem;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.footer-links a:hover { color: var(--text); }

/* Extern länk får en diskret pil. */
a[data-external]::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.3em;
  font-size: 0.82em;
  opacity: 0.65;
  transform: translateY(-0.05em);
}

.footer-bottom {
  margin-top: var(--gap-lg);
  padding-top: var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--fs-xs);
  color: var(--faint);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.rise-logo { height: 34px; width: auto; opacity: 0.9; }
.rise-mark { display: flex; align-items: center; gap: 0.9rem; }

/* --- Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Rubriken mäts mot sin egen spalt, inte mot fönstret.
   Med en fönsterbaserad storlek låg rubriken kvar på 96px hela vägen från
   1280px till 1600px, medan spalten krympte från ~718px till ~649px — och
   då sprack "Rustad att leda i och för framtid" till tre rader. Vid 1600px
   växte containern och den fick plötsligt plats igen.

   När storleken istället följer spaltbredden blir förhållandet mellan text
   och spalt konstant, och radbrytningen därmed identisk vid alla bredder.
   Rubriken blir något mindre på en smalare skärm, vilket är hela poängen. */
.hero__copy {
  container-type: inline-size;
  container-name: hero;
}

.hero__title {
  /* Storleken följer spaltbredden, så förhållandet mellan text och spalt
     är konstant och radbrytningen densamma vid alla fönsterbredder.
     Längsta raden ("i och för framtid") är 7,75em bred, uppmätt. Vid 12cqi
     fyller den 93 % av spalten — tillräckligt med luft för att en annan
     motors teckenrendering inte ska tippa den till en tredje rad. */
  font-size: clamp(2.75rem, 12cqi, 6rem);
  margin: 0 0 1.1rem;
  letter-spacing: -0.035em;
  /* Brytningen står i markupen. text-wrap: balance gav tre rader istället
     för två i vissa motorer, och en hero-rubrik är för viktig för att
     lämnas åt en algoritm som beter sig olika på olika ställen. */
  text-wrap: initial;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(115deg, var(--mint-100), var(--mint-300) 45%, var(--teal-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead { font-size: var(--fs-lead); color: #c9dddf; max-width: 46ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--gap-lg);
}

.hero__art { position: relative; display: grid; place-items: center; }
.hero__logo {
  width: min(100%, 380px);
  filter: drop-shadow(0 30px 70px rgba(0, 0, 0, 0.5));
}

/* Vågformen ekar kursens omslagsbild. Den lever bara diskret. */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 84px;
  margin-top: var(--gap);
  width: 100%;
  /* Masken ger vågformen sin kuvertform. Den finns i CSS så att figuren
     ser vettig ut även innan skriptet har kört. */
  -webkit-mask-image: radial-gradient(ellipse 62% 118% at 50% 50%,
                        #000 22%, rgba(0,0,0,.35) 55%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 118% at 50% 50%,
                #000 22%, rgba(0,0,0,.35) 55%, transparent 82%);
}
.wave span {
  flex: 1 1 0;
  max-width: 6px;
  height: 72%;
  min-height: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--mint-200), var(--teal-400));
  transform-origin: center;
  animation: pulse 2.6s var(--ease) infinite;
  opacity: 0.85;
}
@keyframes pulse {
  0%, 100% { height: 12%; opacity: 0.45; }
  50%      { height: var(--h, 60%); opacity: 1; }
}

/* Nedräkningen: sajtens enda riktigt stora siffra. */
.countdown {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-top: var(--gap-lg);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow), var(--sheen);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.countdown:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), var(--sheen); color: inherit; }

.countdown__num {
  display: grid;
  place-items: center;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(150deg, rgba(141,200,199,.16), rgba(80,159,163,.06));
  min-width: 6.5rem;
}
.countdown__days {
  font-family: var(--font-display);
  font-size: 2.9rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--mint-200);
}
.countdown__unit {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.35rem;
}
.countdown__body { padding: 1.1rem 1.6rem 1.1rem 1.3rem; display: grid; align-content: center; gap: 0.25rem; }
.countdown__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-300);
}
.countdown__title { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.02em; }
.countdown__when { font-size: var(--fs-sm); color: var(--muted); }

/* --- Modulkort -------------------------------------------------------- */

.section { padding: var(--gap-2xl) 0 0; }
.section__head { max-width: 60ch; margin-bottom: var(--gap-lg); }

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
}

.module {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 15rem;
  overflow: hidden;
  isolation: isolate;
}
.module__no {
  position: absolute;
  right: -0.4rem;
  bottom: -2.2rem;
  z-index: -1;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.038);
  pointer-events: none;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease-out);
}
.module:hover .module__no { color: rgba(141, 200, 199, 0.11); transform: translateY(-6px); }

.module__title { font-size: 1.28rem; margin: 0; }
.module__desc { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.module__meta {
  margin-top: auto;
  padding-top: var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.module__go { color: var(--mint-300); transition: transform 0.25s var(--ease-out); }
.module:hover .module__go { transform: translateX(4px); }

/* --- Innehållstext ---------------------------------------------------- */

/* Löptexten håller läsbar radlängd — det är inte en begränsning utan hela
   poängen; en rad på 900px är tröttsam att läsa. Men figurer, tabeller,
   bilder och spelare bryter ut till hela spalten, så att de ligger i linje
   med filmavsnittet nedanför istället för att sluta halvvägs.
   Vänsterkanten är gemensam, bara högerkanten skiljer. */
.prose {
  max-width: none;
  font-size: var(--fs-prose);
  /* Längre rader tål — och kräver — mer luft mellan raderna. */
  line-height: 1.7;
}
/* Två tak, det snävaste vinner:
   - 74ch håller radlängden nere på breda skärmar
   - 82 % håller kvar den synliga skillnaden mot brett innehåll på smala,
     där spalten annars hinner ikapp textblocket och allt blir lika brett.
   Resultatet är korta rader på en liten skärm och ett block som alltid
   ligger på ungefär 82 % av spalten. */
.prose > * { max-width: min(var(--measure), 82%); }

.prose > .figure,
.prose > .embed,
.prose > .scroller,
.prose > table,
.prose > pre,
.prose > p:has(> img:only-child),
.prose > p:has(> a:only-child > img:only-child) {
  max-width: 100%;
}

/* :has() saknas i äldre motorer. Där hamnar bilden kvar på textbredd,
   vilket fungerar — den blir bara mindre. Figurerna och spelarna, som är
   det mesta av det breda innehållet, bryter ut oavsett. */

.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.4em; scroll-margin-top: 6rem; }
.prose h3 { margin-top: 1.9em; scroll-margin-top: 6rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 0.45em; }
.prose li::marker { color: var(--mint-300); }
.prose strong { color: #fff; }
.prose blockquote {
  margin: 1.8em 0;
  padding: 0.2em 0 0.2em 1.5em;
  border-left: 2px solid var(--mint-300);
  font-size: var(--fs-lead);
  font-style: italic;
  color: #cfe0e2;
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
  background: var(--glass-sunk);
  color: var(--mint-200);
}
.prose pre {
  padding: 1.2rem 1.4rem;
  border-radius: var(--r);
  background: var(--glass-sunk);
  box-shadow: var(--sheen);
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: var(--text); }
.prose img { border-radius: var(--r); box-shadow: var(--shadow); margin: 1.8em 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin: 1.8em 0;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.prose th { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-300); }

/* Tabeller och breda figurer får rulla för sig själva. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Callouts --------------------------------------------------------- */

.callout {
  --accent: var(--mint-300);
  position: relative;
  margin: 2em 0;
  padding: 1.2rem 1.5rem 1.2rem 1.6rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: var(--sheen);
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  inset-block: 0; left: 0;
  width: 3px;
  background: var(--accent);
}
.callout__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.callout__body > *:last-child { margin-bottom: 0; }
.callout--tips    { --accent: var(--mint-300); }
.callout--info    { --accent: var(--teal-400); }
.callout--varning { --accent: var(--amber); }
.callout--citat {
  --accent: var(--mint-200);
  font-size: var(--fs-lead);
  font-style: italic;
  padding-left: 2.6rem;
}
.callout--citat::after {
  content: "\201D";
  position: absolute;
  left: 0.9rem; top: 0.35rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
}

/* --- Videoinbäddning -------------------------------------------------- */

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 2em 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--glass-sunk);
  box-shadow: var(--shadow);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Figurer ---------------------------------------------------------- */

.figure {
  margin: 2.5em 0;
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow), var(--sheen);
}
.figure figcaption {
  margin-top: 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.figure figcaption strong {
  color: var(--mint-300);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.figure-missing {
  padding: 0.8rem 1rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.fig-svg { width: 100%; height: auto; overflow: visible; }

.fig-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.fig-line--dominant { stroke: var(--coral); }
.fig-line--emerge   { stroke: var(--mint-300); }
.fig-line--muted    { stroke: var(--faint); stroke-width: 1.5; }
.fig-line--accent   { stroke: var(--teal-400); stroke-width: 1.5; }
.fig-line--dashed   { stroke-dasharray: 7 7; }

.fig-fill-emerge { fill: var(--mint-300); }
.fig-fill-muted  { fill: var(--faint); }
.fig-fill-accent { fill: var(--teal-400); }

.fig-dots circle { stroke: none; }
.fig-dots--dominant circle { fill: var(--coral); opacity: 0.85; }
.fig-dots--emerge circle   { fill: var(--mint-300); opacity: 0.9; }

.fig-hier circle { fill: var(--muted); }
.fig-hier path { fill: none; stroke: var(--muted); stroke-width: 1.4; }

.fig-t {
  font-family: var(--font-body);
  fill: var(--text);
  font-size: 14px;
}
.fig-t--sm     { font-size: 12.5px; fill: var(--muted); }
.fig-t--mid    { text-anchor: middle; }
.fig-t--muted  { fill: var(--faint); }
.fig-t--label  { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.fig-t--dominant { fill: var(--coral); }
.fig-t--emerge   { fill: var(--mint-300); text-anchor: middle; }
.fig-t--layer  { font-family: var(--font-display); font-size: 19px; fill: #fff; }
.fig-t--above  { fill: var(--ink-900); }

.fig-berg--above { fill: var(--mint-200); opacity: .92; }
.fig-berg--below { fill: var(--teal-700); opacity: .55; }
.fig-berg-outline { fill: none; stroke: var(--mint-200); stroke-width: 1.5; opacity: .5; }
.fig-water { fill: none; stroke: var(--mint-300); stroke-width: 2; opacity: .75; }
.fig-tick { stroke: var(--hairline); stroke-width: 1; }

.fig-t--notehead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  fill: var(--mint-300);
}
.fig-t--note { font-size: 12.5px; fill: var(--muted); }

/* Maskin ↔ ekosystem */
.spectrum__direction {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--coral);
}
.spectrum__direction::before,
.spectrum__direction::after { content: ""; height: 1px; flex: 1; }
.spectrum__direction::before { background: linear-gradient(90deg, transparent, var(--coral)); }
.spectrum__direction::after  { background: linear-gradient(90deg, var(--coral), transparent); }
.spectrum__direction span { flex: none; }

.spectrum__table { width: 100%; border-collapse: collapse; }
.spectrum__table th {
  padding-bottom: 1rem;
  text-align: center;
  vertical-align: bottom;
}
.spectrum__pole {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -.02em;
}
.spectrum__table th:first-child .spectrum__pole { color: var(--muted); }
.spectrum__table th:last-child  .spectrum__pole { color: var(--mint-200); }
.spectrum__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--faint);
}
.spectrum__table td {
  padding: .7rem 1rem;
  font-size: var(--fs-sm);
  border-top: 1px solid var(--hairline-soft);
  width: 50%;
}
.spectrum__table td:first-child { text-align: right; color: var(--muted); }
.spectrum__table td:last-child  { text-align: left; }
.spectrum__table tr { position: relative; }
.spectrum__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.spectrum__note {
  margin: 0;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: var(--glass-strong);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}
.spectrum__note strong { color: var(--mint-200); }

/* MTO */
.mto { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--gap-lg); align-items: center; }
.mto__venn { width: 100%; }
.mto__circle { stroke-width: 1.5; }
.mto__circle--m { fill: color-mix(in srgb, var(--rose) 42%, transparent); stroke: var(--rose); }
.mto__circle--o { fill: color-mix(in srgb, var(--rose) 34%, transparent); stroke: var(--rose); }
.mto__circle--t { fill: color-mix(in srgb, var(--rose) 50%, transparent); stroke: var(--rose); }
.mto__letter {
  font-family: var(--font-display);
  font-size: 30px;
  fill: #2a0d14;
  text-anchor: middle;
}
.mto__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--gap); }
.mto__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: .6rem;
}
.mto__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mto__col li {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-left: .9rem;
  position: relative;
  line-height: 1.45;
}
.mto__col li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--rose);
}

/* --- Passidan --------------------------------------------------------- */

.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 var(--gap-lg); }
.page-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--gap);
}

.pass-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.toc { position: sticky; top: 6rem; }
.toc h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint-300);
  margin-bottom: 0.9rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.toc li a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.toc li a:hover { color: var(--text); border-color: var(--mint-300); }
.toc li a[aria-current] { color: var(--mint-200); border-color: var(--mint-300); }
.toc li[data-level="3"] a { padding-left: 1.8rem; font-size: 0.82rem; }

.pass-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  margin-top: var(--gap-2xl);
  flex-wrap: wrap;
}
.pass-nav__link { flex: 1 1 16rem; min-width: 0; }
.pass-nav__link .kicker { margin-bottom: 0.4rem; }
.pass-nav__link--next { text-align: right; }
.pass-nav__link--next .kicker { flex-direction: row-reverse; }
.pass-nav__link--next .kicker::before {
  background: linear-gradient(270deg, var(--mint-300), transparent);
}

/* --- Övningslista på passidan ----------------------------------------- */

.exercise-list { display: grid; gap: var(--gap); }

.exercise-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  overflow: hidden;
  scroll-margin-top: 6rem;
}
.exercise-card__no {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.6rem);
  line-height: 0.85;
  color: rgba(255, 255, 255, 0.14);
  transition: color 0.35s var(--ease);
}
.exercise-card:hover .exercise-card__no { color: rgba(141, 200, 199, 0.42); }
.exercise-card__title { margin: 0 0 0.3rem; font-size: 1.25rem; }
.exercise-card__lead { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.exercise-card__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; }
.exercise-card__go { display: grid; gap: 0.5rem; justify-items: end; }

/* Snabblänken syns direkt så att processledaren kan läsa upp den. */
.shortlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem 0.35rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--glass-sunk);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--mint-200);
  white-space: nowrap;
}
.shortlink button {
  display: inline-grid;
  place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.shortlink button:hover { color: var(--mint-200); background: var(--glass-strong); }
.shortlink button svg { width: 0.95rem; height: 0.95rem; }
.shortlink button[data-copied] { color: var(--mint-200); }

/* --- Presentationsvyn för en övning ----------------------------------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 7.5rem;
}

.stage__bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0.9rem 0;
  background: color-mix(in srgb, var(--ink-900) 75%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.stage__bar .wrap { display: flex; align-items: center; gap: var(--gap-sm); width: min(100% - 2.5rem, var(--page-wide)); }
.stage__spacer { margin-left: auto; }

.stage__dots { display: flex; gap: 0.4rem; }
.stage__dots a {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.stage__dots a:hover { background: var(--glass-strong); color: var(--text); }
.stage__dots a[aria-current] {
  background: linear-gradient(135deg, var(--mint-200), var(--mint-300));
  color: #05171c;
}

.stage__body {
  flex: 1;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  position: relative;
}

/* Det stora ordningstalet, precis som i bildspelet. */
.stage__numeral {
  position: absolute;
  left: -0.08em;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  font-family: var(--font-display);
  font-size: min(46vh, 34rem);
  line-height: 0.75;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}

.stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.stage__grid--single { grid-template-columns: minmax(0, 1fr); max-width: 74ch; }

.stage__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  margin-bottom: 0.6rem;
}
.stage__lead {
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  line-height: 1.55;
  color: #d6e6e7;
  margin-bottom: 1.6rem;
}

/* Frågetexten ska gå att läsa på en delad skärm. */
.stage__prose { font-size: clamp(1.02rem, 1.5vw, 1.28rem); line-height: 1.7; max-width: 60ch; }
.stage__prose ul, .stage__prose ol { display: grid; gap: 0.7em; padding-left: 1.2em; }
.stage__prose h3 { color: var(--mint-200); font-size: 1.15em; margin-top: 1.6em; }

.stage__note {
  margin-top: 2rem;
  padding: 1rem 1.3rem;
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--sheen);
  font-style: italic;
  color: #cadcde;
  font-size: var(--fs-sm);
}
.stage__figure .figure { margin: 0; }

/* --- Timer ------------------------------------------------------------ */

.timer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.9rem 0 1.1rem;
  background: color-mix(in srgb, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: 0 -1px 0 var(--hairline), 0 -24px 60px -30px rgba(0,0,0,.9);
}
.timer__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  width: min(100% - 2.5rem, var(--page-wide));
  margin-inline: auto;
}
.timer__display {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 4.6ch;
  color: var(--mint-200);
  transition: color 0.3s var(--ease);
}
.timer[data-state="running"] .timer__display { color: #fff; }
.timer[data-state="done"] .timer__display { color: var(--coral); animation: flash 1s steps(2) 6; }
@keyframes flash { 50% { opacity: 0.25; } }

.timer__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 0.15rem;
}
.timer__presets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.timer__presets button {
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.timer__presets button:hover { color: var(--text); background: var(--glass-strong); }
.timer__presets button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--mint-200), var(--mint-300));
  color: #05171c;
  box-shadow: none;
}
.timer__controls { display: flex; gap: 0.5rem; margin-left: auto; }

/* En tunn stapel längs kanten visar hur mycket tid som är kvar. */
.timer__bar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mint-200), var(--teal-400));
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.95s linear;
}

/* --- Filmer ----------------------------------------------------------- */

.videos { display: grid; gap: var(--gap); }
.video-card { display: grid; gap: var(--gap-sm); }
.video-card video {
  width: 100%;
  border-radius: var(--r);
  background: #000;
  box-shadow: var(--shadow);
}
.video-card__meta { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.video-card__title { margin: 0; font-size: 1.15rem; }
.video-card__speaker { font-size: var(--fs-sm); color: var(--mint-300); }
.video-card__desc { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 62ch; }

/* --- Deltagare -------------------------------------------------------- */

.people-tools {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--gap-lg);
}

.field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  min-width: 16rem;
  flex: 1 1 18rem;
}
.field svg { width: 1rem; height: 1rem; color: var(--faint); flex: none; }
.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.field input:focus { outline: none; }
.field input::placeholder { color: var(--faint); }

/* Två lägen, ett val: en segmenterad kontroll istället för två knappar. */
.segmented {
  display: flex;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: var(--sheen);
  flex: none;
}
.segmented a {
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s var(--ease);
}
.segmented a:hover { color: var(--text); }
.segmented a[aria-current] {
  background: linear-gradient(135deg, var(--mint-200), var(--mint-300));
  color: #05171c;
}

.group-picker { flex: none; }
.group-picker select {
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  padding-right: 2.4rem;
  /* Pilen ritas i bakgrunden så att fältet slipper ett extra element. */
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.85rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.group-picker select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mint-300);
}

.active-filter {
  margin: 0 0 var(--gap);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--mint-300) 10%, transparent);
  font-size: var(--fs-sm);
  color: #cfe0e2;
}
.active-filter a { margin-left: 0.5rem; }

/* Bokstavsraden högst upp i den alfabetiska vyn. */
.alphabar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: var(--gap-lg);
  padding: 0.4rem;
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--sheen);
}
.alphabar a {
  display: grid;
  place-items: center;
  min-width: 2rem;
  padding: 0.35rem 0.4rem;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.15s var(--ease);
}
.alphabar a:hover { color: #05171c; background: var(--mint-300); }

.group-block { margin-bottom: var(--gap-lg); }
.group-block { scroll-margin-top: 6rem; }

/* En bokstavsrubrik är en enda tecken och tål att vara stor. */
.group-block--letter .group-block__head > span:first-child {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--mint-200);
  line-height: 1;
}
.group-block[hidden] { display: none; }
.group-block__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint-300);
}
.group-block__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
  order: 1;
}
.group-block__count {
  order: 2;
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  color: var(--muted);
  letter-spacing: 0.08em;
}

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.5rem;
}

.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--sheen);
  transition: background 0.2s var(--ease);
}
.person:hover { background: var(--glass-strong); }
.person[hidden] { display: none; }

.person__initials {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, rgba(141,200,199,.22), rgba(80,159,163,.1));
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mint-200);
  flex: none;
}
.person__body { display: grid; gap: 0.1rem; min-width: 0; }
.person__name {
  font-weight: 700;
  font-size: 0.96rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person__meta {
  display: flex;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  min-width: 0;
}
.person__meta > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person__group {
  flex: none;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.people__empty { color: var(--muted); padding: var(--gap) 0; }
.people__empty[hidden] { display: none; }

/* --- Formulär --------------------------------------------------------- */

.form { display: grid; gap: var(--gap); }
.form label { display: grid; gap: 0.45rem; }
.form label > span {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint-300);
}
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="number"],
.form input[type="datetime-local"],
.form input[type="url"],
.form select,
.form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--glass-sunk);
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: box-shadow 0.2s var(--ease);
}
.form textarea {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  resize: vertical;
  min-height: 12rem;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--mint-300), 0 0 0 3px rgba(141,200,199,.16);
}
.form select { appearance: none; cursor: pointer; }
.form__hint { font-size: var(--fs-xs); color: var(--faint); }
.form__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

.notice {
  padding: 0.9rem 1.2rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  box-shadow: var(--sheen);
}
.notice--error { background: color-mix(in srgb, var(--coral) 16%, transparent); color: #ffd7dd; }
.notice--ok    { background: color-mix(in srgb, var(--mint-300) 14%, transparent); color: var(--mint-100); }

.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.auth-card { max-width: 26rem; }

/* --- Sök -------------------------------------------------------------- */

.hits { display: grid; gap: 0.6rem; }
.hit {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.3rem;
  border-radius: var(--r);
  background: var(--glass);
  box-shadow: var(--sheen);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease-out);
}
.hit:hover { background: var(--glass-strong); transform: translateX(3px); color: inherit; }
.hit__kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint-300);
}
.hit__title { font-family: var(--font-display); font-size: 1.08rem; }
.hit__snippet { font-size: var(--fs-sm); color: var(--muted); }
.hit__snippet mark { background: rgba(141,200,199,.24); color: var(--mint-100); border-radius: 3px; padding: 0 .15em; }

/* Snabbpaletten (⌘K) */
.palette[hidden] { display: none; }
.palette {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(3rem, 12vh, 8rem) 1.25rem 2rem;
  background: rgba(3, 10, 13, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade 0.16s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.palette__panel {
  width: min(100%, 40rem);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink-800) 92%, transparent);
  backdrop-filter: blur(30px) saturate(1.3);
  -webkit-backdrop-filter: blur(30px) saturate(1.3);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.85), var(--sheen);
  overflow: hidden;
  animation: rise 0.22s var(--ease-out);
}
@keyframes rise { from { transform: translateY(-10px); opacity: 0; } }

.palette__input {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.palette__input svg { width: 1.1rem; height: 1.1rem; color: var(--mint-300); flex: none; }
.palette__input input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
}
.palette__input input:focus { outline: none; }
.palette__input input::placeholder { color: var(--faint); }
.palette__esc {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-xs);
  background: var(--glass-sunk);
  color: var(--faint);
}

.palette__results { max-height: min(60vh, 26rem); overflow-y: auto; padding: 0.5rem; }
.palette__group {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.7rem 0.9rem 0.35rem;
}
.palette__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.palette__item[data-active] { background: var(--glass-strong); }
.palette__item .badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; }
.palette__item strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; }
.palette__item span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.palette__item span mark { background: rgba(141,200,199,.24); color: var(--mint-100); border-radius: 3px; }
.palette__empty { padding: 1.6rem 1rem; text-align: center; color: var(--faint); font-size: var(--fs-sm); }

/* --- Felsida ---------------------------------------------------------- */

.error-page { padding: clamp(4rem, 12vw, 9rem) 0; text-align: center; }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: 0.85;
  color: rgba(255,255,255,.06);
  margin-bottom: -0.15em;
}
.error-page .lead { margin-inline: auto; }
.error-page__actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: var(--gap-lg); flex-wrap: wrap; }

/* --- Hjälpklasser ----------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-pill);
  background: var(--mint-200);
  color: #05171c;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.stack { display: grid; gap: var(--gap); }
.stack--sm { gap: var(--gap-sm); }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* --- Responsivt ------------------------------------------------------- */

@media (max-width: 1080px) {
  .pass-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .stage__grid { grid-template-columns: minmax(0, 1fr); }
  .mto { grid-template-columns: minmax(0, 1fr); }
  .mto__venn { max-width: 17rem; margin-inline: auto; }
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: -1; }
  .hero__logo { width: min(72%, 260px); }

  /* I enspaltsläget är spalten hela sidbredden, så spaltmåttet skulle ge
     en orimligt stor rubrik. Här styr fönstret igen. */
  .hero__copy { container-type: normal; }
  .hero__title { font-size: clamp(2.5rem, 8.6vw, 4.5rem); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); }
  .auth-layout__intro { display: none; }
}

@media (max-width: 760px) {
  .wrap, .wrap--wide, .stage__bar .wrap, .timer__inner {
    width: min(100% - 1.75rem, var(--page));
  }

  /* Navigationen blir en panel som fälls ned. */
  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.6rem; height: 2.6rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--glass);
    box-shadow: inset 0 0 0 1px var(--hairline-soft);
    color: var(--text);
    cursor: pointer;
  }
  .nav-toggle svg { width: 1.15rem; height: 1.15rem; }

  .nav {
    position: fixed;
    inset: auto 0.875rem auto 0.875rem;
    top: 4.75rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.75rem;
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--ink-800) 96%, transparent);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: var(--shadow-lift), var(--sheen);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 0.7rem 0.9rem; font-size: var(--fs-body); }
  .nav__sep { width: auto; height: 1px; margin: 0.4rem 0; }

  .search-trigger span, .search-trigger kbd { display: none; }
  .search-trigger { padding: 0.65rem; }

  .exercise-card { grid-template-columns: auto minmax(0, 1fr); }
  .exercise-card__go { grid-column: 1 / -1; justify-items: start; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--gap); }
  .spectrum__notes { grid-template-columns: 1fr; }
  .spectrum__table td { font-size: 0.82rem; padding: 0.6rem 0.5rem; }

  .timer__inner { gap: 0.85rem; }
  .timer__controls { margin-left: 0; width: 100%; }
  .timer__controls .btn { flex: 1; justify-content: center; }
  .stage { padding-bottom: 12rem; }
  .stage__numeral { font-size: 24vh; opacity: 0.7; }
}

/* --- Rörelse och utskrift --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .wave span { height: 40%; }
}

@media print {
  body::before, body::after { display: none; }
  body { background: #fff; color: #111; }
  .site-header, .site-footer, .timer, .stage__bar, .palette, .toc { display: none !important; }
  .card, .figure { box-shadow: none; border: 1px solid #ccc; background: none; }
  .stage__numeral { color: #eee; }
  a { color: #111; }
}