/* Stilrundan — Pluggs tokens (apps/plugg/src/styles/index.css), ljust läge. */
:root {
  --ground: #F4F5F9; --paper: #FFFFFF; --ink: #1C2140; --ink-2: #4A5070; --muted: #676D8C; --line: #D9DCE8; --line-2: #EEF0F6;
  --marker: #FFE14D; --marker-2: #FFF4B8; --acc: #5B5BD6; --ok: #17B26A; --ok-bg: #DDF7EA; --ok-ink: #0B7A46; --bad-bg: #FFE3E9; --bad-ink: #C4234A;
  --font-display: "Fredoka", -apple-system, sans-serif; --font-body: "Atkinson Hyperlegible", -apple-system, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--ground); color: var(--ink);
  font: 17px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
h1 { margin: 0; font: 600 2rem/1.1 var(--font-display); letter-spacing: -.01em; }
p { margin: 0; }

#app { height: 100dvh; }
#app.lesson { display: grid; grid-template-columns: minmax(320px, 390px) 1fr; gap: 18px;
  padding: calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 18px); }
@media (max-width: 900px) { #app.lesson { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; } .page { max-height: 44dvh; } }

/* ---- sidan (vänster) ---- */
.page-in { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 20px; overflow-y: auto; }
.page { position: relative; overflow: hidden; min-height: 0; background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }
.kicker { font: 600 .78rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mark { background: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%); padding: 0 .1em; }
.lead { color: var(--ink-2); }
.steps { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; border-radius: 16px; border: 2px solid var(--line); transition: border-color .2s, opacity .2s, box-shadow .2s, transform .2s; }
.step .n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--font-display); background: var(--line-2); }
.step.locked { opacity: .45; }
.step.active { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.step.active .n { background: var(--marker); }
.step.done .n { background: var(--ok); color: #fff; }
.step b { font-family: var(--font-display); font-weight: 600; }
.opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.opt { text-align: left; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  font: 600 1rem var(--font-display); transition: transform .08s, box-shadow .08s, background .15s; }
.opt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.opt.picked { background: var(--marker); }
.opt:disabled { cursor: default; }
.opt:disabled:not(.picked) { opacity: .45; box-shadow: none; border-color: var(--line); }
.why { padding: 14px; border-radius: 16px; background: var(--ok-bg); color: var(--ink); border: 2px solid var(--ok-ink); animation: pop .45s cubic-bezier(.3, 1.5, .5, 1); }
.why.miss { background: var(--marker-2); border-color: var(--ink); }
.why b { font-family: var(--font-display); font-weight: 600; }
.why > b:first-child { display: block; margin-bottom: 4px; }
@keyframes pop { from { transform: scale(.92); opacity: 0; } }
.meters { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; }
.meter { padding: 10px 12px; border-radius: 14px; background: var(--line-2); }
.meter small { display: block; font: 600 .72rem var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meter span { font: 700 1.5rem var(--font-display); font-variant-numeric: tabular-nums; }
.bar { height: 12px; margin-top: 11px; border-radius: 99px; background: var(--paper); border: 2px solid var(--ink); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--acc); }

/* ---- scenen (höger) ---- */
.stagewrap { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.tabs { align-self: center; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.tabs button { min-height: 40px; padding: 0 18px; border-radius: 999px; font: 600 1rem var(--font-display); transition: background .15s; }
.tabs button.on { background: var(--ink); color: #fff; }
.stage { position: relative; flex: 1; min-height: 0; touch-action: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 6px 14px; border-radius: 99px; background: var(--paper); border: 2px solid var(--line); font: 600 .85rem var(--font-display); color: var(--muted); pointer-events: none; }
.hint[hidden] { display: none; }
.why .more { margin-top: 12px; width: 100%; text-align: center; }
.tour { position: absolute; inset: 0; z-index: 3; padding: 22px 20px 20px; display: flex; flex-direction: column; overflow-y: auto; background: var(--paper); border-radius: 19px; animation: pop .3s cubic-bezier(.3, 1.3, .5, 1); }
.tour[hidden] { display: none; }
.tour h2 { margin: 2px 0 6px; font: 600 1.35rem/1.15 var(--font-display); }
.tour p { color: var(--ink-2); }
.tour b { color: var(--ink); }
.tour-n { font: 600 .75rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tour-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 12px; font-size: 1.1rem; color: var(--muted); }
.tour-nav { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; }
.tour h2 { font-size: 1.6rem; margin: 8px 0 10px; }
.tour p { font-size: 1.06rem; line-height: 1.55; }
.tour-nav .opt { flex: 1; text-align: center; }
.fps { position: absolute; right: 8px; bottom: 4px; font: 600 .75rem var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- sidhuvud i ett experiment, reglage i scenen ---- */
.page-top { display: flex; justify-content: space-between; align-items: center; margin: -6px -4px 0; }
.back, .again { min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 12px; font: 600 .95rem var(--font-display); color: var(--acc); text-decoration: none; }
.again { color: var(--muted); }
.why.outro { background: var(--marker-2); border-color: var(--ink); }
.ctrls { position: absolute; z-index: 2; left: 50%; top: 4px; transform: translateX(-50%); display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 100%; }
.ctrls .opt { text-align: center; padding: 8px 16px; }
.ctrls:empty { display: none; }
.meters:empty { display: none; }
/* ---- fast sidhuvud: navigeringen syns ALLTID (även över försättsblad och tur), rubriken står kvar när stegen rullar ---- */
.page { display: flex; flex-direction: column; }
.page-top { flex: none; margin: 0; padding: 6px 10px; border-bottom: 2px solid var(--line-2); }
.page-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-title { flex: none; padding: 14px 20px 10px; }
.page-title h1 { margin: 4px 0 0; }
.page-in { height: auto; flex: 1; min-height: 0; padding: 2px 20px 20px; }
.page-in .lead { margin-top: 0; }
.tour { border-radius: 0 0 19px 19px; }
/* ---- mätarna bor i scenen, nere till vänster ---- */
.stage .meters { position: absolute; z-index: 2; left: 10px; bottom: 12px; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; max-width: calc(100% - 20px); pointer-events: none; }
.stage .meter { min-width: 132px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.stage .meter span { white-space: nowrap; }
.stage .hint { left: auto; right: 14px; bottom: 104px; transform: none; }

/* ---- startsidan ---- */
#app.home { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home-in { max-width: 1120px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 34px) 26px 60px; }
.hero h1 { font-size: 2.7rem; margin: 6px 0 10px; }
.hero .lead { font-size: 1.15rem; max-width: 36em; }
.area { margin: 34px 0 12px; font: 600 .85rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.card:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) { .card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); } }
.thumb { position: relative; aspect-ratio: 16 / 10; background: var(--ground); border-bottom: 2.5px solid var(--ink); display: grid; place-items: center; }
.thumb span { font-size: 3.4rem; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-t { padding: 14px 16px 16px; }
.card h3 { margin: 0 0 4px; font: 600 1.25rem/1.15 var(--font-display); }
.card p { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.badge { position: absolute; top: 10px; right: 10px; padding: 3px 10px; border-radius: 99px; background: var(--ok); color: #fff; border: 2px solid var(--ink); font: 600 .8rem var(--font-display); }
.stage canvas.dark { border-radius: 22px; border: 2.5px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); width: calc(100% - 8px); height: calc(100% - 8px); }
.count { margin: 26px 0 14px; font: 600 .85rem var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chip { font: 600 .7rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-bottom: 4px; }

/* ---- valt läge i reglageraden: fylld bläckknapp med bock ---- */
.ctrls .opt.seg { background: var(--paper); color: var(--ink-2); box-shadow: none; border-color: var(--line); }
.ctrls .opt.seg.picked { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--marker); }
.ctrls .opt.seg.picked::before { content: "✓ "; color: var(--marker); }
.note { position: absolute; z-index: 2; left: 50%; top: 64px; transform: translateX(-50%); padding: 8px 16px; border-radius: 14px; background: var(--marker); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 600 1.05rem var(--font-display); white-space: nowrap; pointer-events: none; }
.note[hidden] { display: none; }
/* ---- försättsbladet ---- */
.intro { z-index: 4; }
.intro h3 { margin: 16px 0 4px; font: 600 .8rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.intro ul { margin: 0; padding-left: 1.15em; color: var(--ink-2); }
.intro li { margin: 5px 0; line-height: 1.45; }
.intro li b, .intro p b { color: var(--ink); }
.intro .tour-nav .opt { flex: 1; }
.page-top span { display: flex; }

.ctrls { flex-wrap: wrap; justify-content: center; gap: 8px; }
.ctrls .opt.seg { padding: 9px 13px; font-size: .95rem; white-space: nowrap; }

.states { position: absolute; z-index: 2; left: 50%; top: 64px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.states:empty { display: none; }
.states span { padding: 6px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--paper); color: var(--muted); font: 600 1rem var(--font-display); white-space: nowrap; opacity: .75; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s; }
.states span.on { opacity: 1; background: var(--marker); border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

.stage .meter { width: 158px; min-width: 0; }
.stage .meter small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .meter span { font-variant-numeric: tabular-nums; }

/* ---- landningssidan: ämnen ---- */
.subjects { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.subj { display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.subj:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
@media (hover: hover) { a.subj:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); } }
.subj h2 { margin: 0 0 4px; font: 600 1.7rem/1.1 var(--font-display); }
.subj p { color: var(--ink-2); margin: 0 0 10px; }
.subj-pics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2.5px solid var(--ink); background: var(--ground); aspect-ratio: 24 / 5; }
.subj-pics img { width: 100%; height: 100%; object-fit: cover; }
.subj-pics img + img { border-left: 2.5px solid var(--ink); }
.subj.soon { border-style: dashed; box-shadow: none; background: transparent; justify-content: center; opacity: .75; }
.subj.soon .chip { color: var(--muted); }
.home .back { margin-left: -10px; }