/* Bläddraren på tryggtrafik.se (/skola, /kommun) – ram i sajtens "Nollvision Noir", sidorna i broschyrens egen stil
   (broschyr.css laddas före den här filen). Variablerna heter --r-* för att inte krocka med broschyrens.
   Broschyren kan sätta --page-size, --page-lh och --page-dark-ink (sidornas grundtext). */

:root {
  --r-ink: #06080B; --r-ink2: #0B0F14; --r-surface: #10151C; --r-line: rgba(255, 255, 255, .09);
  --r-lime: #C7F92E; --r-coral: #FF4D2E; --r-cream: #F5F6F2; --r-mut: #8A95A3;
  --r-red: #dd2e3c;
  --r-top: 64px; --r-bar: 76px;
}

html.js body {
  margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: radial-gradient(1200px 700px at 50% 45%, #18202b 0%, var(--r-ink) 70%);
  color: var(--r-cream); font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
}
/* Ramen ligger ovanpå sidorna, så att de får hela fönstret. När den skymmer sidorna gömmer den sig medan man
   läser (html.r-idle, styrs i lasare.js) och kommer tillbaka när musen rör sig. */
.r-top, .r-bar { position: fixed; left: 0; right: 0; transition: transform .35s ease, opacity .35s ease; }
.r-top { top: 0; height: var(--r-top); }
.r-bar { bottom: 0; height: var(--r-bar); }
html.r-idle .r-top { transform: translateY(-100%); opacity: 0; pointer-events: none; }
html.r-idle .r-bar { transform: translateY(100%); opacity: 0; pointer-events: none; }
html.r-idle .r-nav, html.r-idle .r-hint { opacity: 0; pointer-events: none; }
html.r-idle .r-stage { cursor: none; }
html:not(.js) body { background: #d9dde3; }
html:not(.js) .r-top, html:not(.js) .r-stage, html:not(.js) .r-bar { display: none; }
html.js .r-source { display: none; }
button { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ram: topp ---------- */
.r-top {
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
  border-bottom: 1px solid var(--r-line); background: rgba(6, 8, 11, .7); backdrop-filter: blur(10px); z-index: 20;
}
.r-logo img { height: 30px; display: block; }
.r-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; padding-left: 22px; border-left: 1px solid var(--r-line); }
.r-title b { font-family: "Syne", sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.r-title span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--r-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.r-act {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100px;
  background: transparent; border: 1px solid var(--r-line); color: var(--r-cream); text-decoration: none;
  font-weight: 600; font-size: 13.5px; cursor: pointer; transition: .2s;
}
.r-act:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04); }
.r-cta {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 100px; border: 0;
  background: var(--r-lime); color: var(--r-ink); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: .2s; white-space: nowrap;
}
.r-cta span { font-weight: 800; }
.r-cta:hover { background: var(--r-coral); color: var(--r-cream); }
:focus-visible { outline: 2px solid var(--r-lime); outline-offset: 3px; }

/* ---------- scenen ---------- */
.r-stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; perspective: 2600px; touch-action: pan-y; }
.r-fit { position: relative; }
.r-book { position: absolute; top: 0; left: 0; transform-origin: top left; --shift: 0px; user-select: none; -webkit-user-select: none; }
.r-book img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.is-uppslag { touch-action: none; }
.r-book .page {
  margin: 0; box-shadow: none; font-family: var(--body); font-size: var(--page-size, 10pt); line-height: var(--page-lh, 1.42); color: var(--ink);
}
.r-book .page.dark { color: var(--page-dark-ink, #f1eef8); }
.r-book a[href^="#sida-"] { cursor: pointer; }
.r-book .step { transition: transform .2s, box-shadow .2s; }
.r-book .step:hover { transform: translateY(-1mm); box-shadow: 0 2mm 5mm rgba(0, 0, 0, .12); }

/* uppslag */
.is-uppslag { transform-style: preserve-3d; }
.r-leaf {
  position: absolute; top: 0; left: calc(50% + var(--shift)); width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.45, .05, .25, 1), left .75s cubic-bezier(.45, .05, .25, 1);
  cursor: grab; --shade: 0;
}
.dragging .r-leaf { cursor: grabbing; }
.r-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff; }
.r-back { transform: rotateY(180deg); }
.r-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--shade); transition: opacity .2s; }
.r-front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%); }
.r-back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%); }
.r-leaf.flipping .r-face::after { animation: r-shade .75s ease-in-out both; animation-delay: inherit; }
@keyframes r-shade { 0%, 100% { opacity: 0; } 50% { opacity: .4; } }
/* bladets sida mot ryggen får en mjuk vecks-skugga – ser ut som papper */
.r-front { box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.r-back { box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.r-front .page::before, .r-back .page::before { content: ""; position: absolute; top: 0; bottom: 0; width: 14mm; z-index: 5; pointer-events: none; }
.r-front .page::before { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)); }
.r-back .page::before { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0)); }
.is-closed .r-front .page::before, .is-closed .r-back .page::before { opacity: 0; transition: opacity .4s; }
.r-spine {
  position: absolute; top: 0; bottom: 0; left: calc(50% + var(--shift)); width: 2px; margin-left: -1px; z-index: 300;
  background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .4), rgba(0, 0, 0, .25)); pointer-events: none;
  transition: left .75s cubic-bezier(.45, .05, .25, 1), opacity .4s;
}
.is-closed .r-spine { opacity: 0; }

/* hörnet som viker upp sig: saknad hörnbit (scenens färg) + baksidan av papperet */
.r-peel {
  position: absolute; bottom: 0; width: 30mm; height: 30mm; z-index: 290; pointer-events: none;
  transform: translateZ(3px) scale(0); transition: transform .28s cubic-bezier(.3, .7, .2, 1);
  filter: drop-shadow(-1.5mm -1.5mm 2.5mm rgba(0, 0, 0, .28));
}
.r-peel-r { right: calc(0px - var(--shift)); transform-origin: 100% 100%;
  background: linear-gradient(to top left, #0a0e13 50%, transparent 50%), linear-gradient(to bottom right, #fff 10%, #e9eaec 42%, #c9ccd1 50%); }
.r-peel-l { left: var(--shift); transform-origin: 0 100%;
  background: linear-gradient(to top right, #0a0e13 50%, transparent 50%), linear-gradient(to bottom left, #fff 10%, #e9eaec 42%, #c9ccd1 50%); }
.peel-r .r-peel-r, .peel-l .r-peel-l { transform: translateZ(3px) scale(.5); }
.peel-near.peel-r .r-peel-r, .peel-near.peel-l .r-peel-l { transform: translateZ(3px) scale(1); }
.peek .r-peel-r { animation: r-peek 1.6s ease-in-out; }
@keyframes r-peek { 0%, 100% { transform: translateZ(3px) scale(0); } 35%, 60% { transform: translateZ(3px) scale(.85); } }

/* enkel */
.is-enkel { perspective: 2000px; }
.r-single {
  position: absolute; inset: 0; background: #fff; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .5s; will-change: transform;
}
.r-single.is-prev { transform: translateX(-108%) rotateY(18deg); opacity: 0; }
.r-single.is-next { transform: translateX(108%) rotateY(-18deg); opacity: 0; }
.r-single.is-cur { z-index: 2; }

/* pilar */
.r-nav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 10; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--r-line); background: rgba(16, 21, 28, .8); color: var(--r-cream); cursor: pointer;
  display: grid; place-items: center; transition: .2s, opacity .35s; backdrop-filter: blur(6px);
}
.r-nav svg { width: 22px; height: 22px; }
.r-nav:hover:not(:disabled) { background: var(--r-lime); color: var(--r-ink); border-color: var(--r-lime); }
.r-nav:disabled { opacity: .25; cursor: default; }
.r-prev { left: 22px; } .r-next { right: 22px; }
.r-hint {
  position: absolute; bottom: calc(var(--r-bar) + 14px); left: 50%; translate: -50% 0; margin: 0; padding: 7px 14px; border-radius: 100px;
  background: rgba(16, 21, 28, .85); border: 1px solid var(--r-line); font-size: 12.5px; color: var(--r-mut);
  transition: opacity .6s; pointer-events: none; white-space: nowrap; z-index: 10;
}
.r-hint.gone { opacity: 0; }

/* ---------- ram: botten med vägremsa ---------- */
.r-bar { display: flex; align-items: center; gap: 24px; padding: 0 22px; border-top: 1px solid var(--r-line); background: rgba(6, 8, 11, .7); z-index: 20; }
.r-road { flex: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; position: relative; min-width: 0; }
.r-road::before { content: ""; position: absolute; left: 12px; right: 12px; top: 8px; border-top: 2px dashed rgba(255, 255, 255, .18); }
.r-road button { position: relative; background: none; border: 0; padding: 0 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.r-road i { width: 14px; height: 14px; border-radius: 50%; background: var(--r-ink); border: 2px solid rgba(255, 255, 255, .4); transition: .25s; }
.r-road em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--r-mut); white-space: nowrap; transition: .25s; }
.r-road button:hover i { border-color: var(--r-lime); }
.r-road button:hover em { color: var(--r-cream); }
.r-road .passed i { background: rgba(255, 255, 255, .4); }
.r-road .here i { background: var(--r-red); border-color: #fff; box-shadow: 0 0 0 5px rgba(221, 46, 60, .3); transform: scale(1.15); }
.r-road .here em { color: #fff; }
.r-rider {
  position: absolute; top: -21px; left: 0; width: 20px; height: 18px; translate: -50% 0; pointer-events: none;
  color: var(--r-lime); transition: left .9s cubic-bezier(.45, .05, .25, 1);
}
.r-rider svg { width: 20px; height: 18px; stroke-width: 1.9; display: block; }
.r-rider.back svg { transform: scaleX(-1); }
.r-rider.riding { animation: r-ride .9s ease-in-out; }
@keyframes r-ride { 0%, 100% { translate: -50% 0; } 25%, 75% { translate: -50% -2px; } 50% { translate: -50% 0; } }
.r-bar-right { display: flex; align-items: center; gap: 16px; }
.r-count { font-size: 13px; color: var(--r-mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.r-ctas { display: flex; gap: 8px; }

/* ---------- miniatyrer ---------- */
.r-thumbs { position: fixed; inset: 0; z-index: 50; background: rgba(6, 8, 11, .86); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; }
.r-thumbs[hidden] { display: none; }
.r-thumbs-in { width: min(1100px, 100%); max-height: 100%; overflow: auto; }
.r-thumbs-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.r-thumbs-head b { font-family: "Syne", sans-serif; font-size: 22px; }
.r-thumbs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.r-thumb { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.r-thumb-page { aspect-ratio: 210 / 297; overflow: hidden; position: relative; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .2s; }
.r-thumb-page .page { position: absolute; top: 0; left: 0; margin: 0; box-shadow: none; transform-origin: top left; transform: scale(var(--ts, .2)); font-family: var(--body); font-size: var(--page-size, 10pt); line-height: var(--page-lh, 1.42); color: var(--ink); }
.r-thumb:hover .r-thumb-page, .r-thumb:focus-visible .r-thumb-page { transform: translateY(-4px); }
.r-thumb span { display: block; margin-top: 8px; font-size: 13px; color: var(--r-mut); }
.r-thumb span b { color: var(--r-cream); margin-right: 4px; }
.r-x { background: none; border: 1px solid var(--r-line); color: var(--r-cream); width: 38px; height: 38px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.r-x:hover { border-color: var(--r-lime); color: var(--r-lime); }

/* ---------- lupp ---------- */
.r-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(6, 8, 11, .94); overflow: auto; padding: 64px 40px 40px; overscroll-behavior: contain; }
.r-zoom[hidden] { display: none; }
.r-zoom-in { position: relative; margin: 0 auto; }
.r-zoom-page { position: absolute; top: 0; overflow: hidden; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.r-zoom-page .page { position: absolute; top: 0; left: 0; margin: 0; box-shadow: none; transform-origin: top left; font-family: var(--body); font-size: var(--page-size, 10pt); line-height: var(--page-lh, 1.42); color: var(--ink); }
.r-zoom-page .page.dark { color: var(--page-dark-ink, #f1eef8); }
.r-zoom-x { position: fixed; top: 14px; right: 18px; z-index: 61; background: rgba(16, 21, 28, .9); }

/* ---------- intresseanmälan ---------- */
.r-dlg { border: 1px solid var(--r-line); border-radius: 18px; background: var(--r-surface); color: var(--r-cream); padding: 30px 30px 26px; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.r-dlg::backdrop { background: rgba(6, 8, 11, .75); backdrop-filter: blur(4px); }
.r-dlg form { display: grid; gap: 12px; position: relative; }
.r-dlg .r-x { position: absolute; top: -12px; right: -10px; }
.r-kick { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--r-lime); }
.r-dlg h2 { font-family: "Syne", sans-serif; font-weight: 800; font-size: 26px; line-height: 1.1; margin: 0; }
.r-dlg-lead { margin: 0 0 4px; color: var(--r-mut); font-size: 14px; }
.r-dlg label { display: grid; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--r-mut); }
.r-dlg input, .r-dlg select, .r-dlg textarea {
  font: inherit; font-size: 15px; letter-spacing: 0; color: var(--r-cream); background: var(--r-ink2);
  border: 1px solid var(--r-line); border-radius: 10px; padding: 11px 12px;
}
.r-dlg textarea { min-height: 96px; resize: vertical; }
.r-dlg input:focus, .r-dlg select:focus, .r-dlg textarea:focus { outline: none; border-color: var(--r-lime); }
.r-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.r-submit { margin-top: 6px; padding: 14px 20px; border: 0; border-radius: 100px; background: var(--r-lime); color: var(--r-ink); font-weight: 700; font-size: 15px; cursor: pointer; }
.r-submit:hover:not(:disabled) { background: var(--r-coral); color: var(--r-cream); }
.r-submit:disabled { opacity: .6; }
.r-err { margin: 0; color: var(--r-coral); font-size: 13.5px; }
.r-err a { color: inherit; }
.r-done { text-align: center; padding: 10px 0; display: grid; gap: 10px; justify-items: center; }
.r-done[hidden] { display: none; }
.r-check { width: 56px; height: 56px; border-radius: 50%; background: var(--r-lime); color: var(--r-ink); display: grid; place-items: center; font-size: 28px; font-weight: 800; }
.r-done p { margin: 0 0 8px; color: var(--r-mut); }
.hp { position: absolute; left: -9999px; }

/* ---------- smala skärmar ---------- */
@media (max-width: 999px), (max-aspect-ratio: 11/10) {
  :root { --r-top: 56px; --r-bar: 64px; }
  .r-title { display: none; }
  .r-act span { display: none; }
  .r-act { padding: 9px 11px; }
  .r-top { gap: 12px; padding: 0 14px; }
  .r-actions > .r-cta { display: none; }
  .r-nav { display: none; }
  .r-road em { display: none; }
  .r-road::before { top: 6px; }
  .r-bar { padding: 0 14px; gap: 14px; }
  .r-count { display: none; }
  .r-cta { padding: 10px 14px; font-size: 13px; }
  .r-thumbs-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .r-zoom { padding: 60px 12px 24px; }
  .r-row2 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .r-cta span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .r-leaf, .r-single, .r-spine, .r-rider, .r-peel { transition: none !important; }
  .r-rider.riding, .peek .r-peel-r { animation: none; }
  .r-leaf.flipping .r-face::after { animation: none; }
}