/* Ärevarv identity: rounded, chunky, warm. Fredoka speaks, Barlow Condensed counts, Nunito explains.
   Hard 4 px lifts, no blur. Red is his line; sun is a medal; forest is done; lake is calm. */

body { font: 500 17px/1.45 var(--sans); }
h1, h2, h3, .sh-h { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.n { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--lake-d); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--sun); }

/* ---------- buttons: press down like a key ---------- */
.btn {
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 16px; background: #D63527; color: #fff;
  font: 600 18px/1 var(--serif); letter-spacing: .01em; box-shadow: 0 4px 0 var(--red-d);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--red-d); }
.btn.quiet { background: var(--card); color: var(--ink); border: 2px solid var(--rule); box-shadow: 0 4px 0 var(--rule); font-weight: 600; }
.btn.quiet:active { box-shadow: 0 0 0 var(--rule); }
.btn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-d); }
.btn.green { background: var(--forest); color: #fff; box-shadow: 0 4px 0 var(--forest-d); }

/* ---------- bottom bar: four icons, the current one in a red pill ---------- */
#bar { background: var(--card); border-top: 2px solid var(--rule); height: calc(var(--bar) + var(--safe-b)); }
#bar a { flex-direction: column; gap: 2px; font: 700 12px/1 var(--sans); letter-spacing: .02em; color: var(--ink-2); }
#bar a svg { width: 26px; height: 26px; padding: 4px 14px; box-sizing: content-box; border-radius: 14px; transition: background .2s, color .2s; }
#bar a span { padding: 0; border: 0; }
#bar a[aria-current="page"] { color: var(--ink); }
#bar a[aria-current="page"] svg { background: #FDE3DF; color: var(--red); }
#bar a[aria-current="page"] span { border: 0; }
body.staged #bar { visibility: hidden; }

/* ---------- the door ---------- */
#door { background: var(--paper); }
.door-hasse { display: grid; place-items: center; min-height: 140px; margin-bottom: 4px; }
.door-h { font: 700 34px/1 var(--serif); margin: 0 0 8px; color: var(--ink); }
#door p { font: 600 20px/1.3 var(--serif); }
#door input { border: 2px solid var(--rule); border-radius: 14px; background: var(--card); }
#door input:focus { border-color: var(--lake-d); outline: none; }

/* ---------- Hem ---------- */
#v-hem .scroll { background: var(--paper); }
.h-wrap { max-width: 560px; margin: 0 auto; padding: calc(var(--safe-t) + 6px) 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.h-top { display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.logo { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 25px/1 var(--serif); letter-spacing: .01em; text-transform: uppercase; }
.logo .mark { width: 34px; height: 34px; }
.mark .ring { stroke-dasharray: 100 0; }
.mark.open .ring { stroke-dasharray: 84 16; }
.mark.draw .ring { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: draw 1s .1s var(--ease) forwards; }
.mark.draw .head { opacity: 0; animation: fadein .3s .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
.h-gear { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--ink-2); }
.h-gear svg { width: 26px; height: 26px; }
.card { background: var(--card); border: 2px solid var(--rule); border-radius: 22px; box-shadow: var(--lift); padding: 16px; }
.sec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec h2 { margin: 0; font-size: 22px; }
.sec span { color: var(--ink-2); font-size: 15px; font-weight: 700; }

/* the week */
.h-streak { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.h-ring .mark { width: 64px; height: 64px; display: block; }
.h-ring:not(.saved) .mark .ring { stroke: #C9BFAE; stroke-dasharray: 84 16; }
.h-ring.saved .mark { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.06); } }
.h-sn { display: flex; flex-direction: column; line-height: 1; }
.h-sn .big { font: 700 54px/0.9 var(--num); color: var(--red); letter-spacing: -.01em; }
.h-sn span { font: 600 18px/1.2 var(--serif); margin-top: 4px; }
.h-wk { text-align: right; color: var(--ink-2); font: 600 15px/1.35 var(--sans); }
.h-wk b { font: 700 22px/1 var(--num); color: var(--ink); }
.days { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 16px 0 0; padding: 0; }
.days li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.days .dl { font: 800 13px/1 var(--sans); color: var(--ink-2); }
.days .dd { width: min(36px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; }
.days .done .dd { background: var(--forest); box-shadow: 0 3px 0 var(--forest-d); }
.days .done .dd svg { width: 22px; height: 22px; }
.days .today .dd { background: var(--card); border: 3px solid var(--red); animation: nudge 2.4s ease-in-out infinite; }
.days .today .dl { color: var(--now); }
.days .later .dd { background: transparent; border: 2px dashed var(--rule); }
@keyframes nudge { 50% { transform: scale(1.1); } }
.h-wk-note { margin: 12px 0 0; font: 600 16px/1.3 var(--serif); color: var(--ink-2); text-align: center; }

/* the lap */
.h-lap { padding: 14px 14px 16px; overflow: hidden; background: linear-gradient(180deg, #EAF5FB 0%, var(--card) 62%); }
.h-lap-head { display: flex; align-items: center; justify-content: space-between; }
.badge { font: 700 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; background: #D63527; color: #fff; padding: 7px 12px; border-radius: 99px; }
.h-lap-km { font: 700 40px/1 var(--num); }
.h-lap-km small { font: 700 20px var(--num); color: var(--ink-2); }
.globe-slot { position: relative; width: 100%; aspect-ratio: 1; margin: 2px auto 0; max-width: 420px; }
.globe-box { position: absolute; inset: 0; display: grid; place-items: center; }
.globe-box .flat-lap { width: 86%; height: 86%; transition: opacity .6s; }
.globe-box.gl .flat-lap { opacity: 0; position: absolute; }
.globe-gl { position: absolute; inset: 0; }
.globe-gl canvas { width: 100% !important; height: 100% !important; display: block; touch-action: pan-y; }
.h-lap-foot { text-align: center; }
.h-where { font: 600 21px/1.25 var(--serif); margin: 6px 0 12px; }
.h-leg { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: 700 14px/1 var(--sans); color: var(--ink-2); }
.h-leg .bar { height: 14px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
.h-leg .bar i { display: block; height: 100%; background: var(--red); border-radius: 99px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.h-next { margin: 10px 0 12px; font: 700 15px/1.3 var(--sans); color: var(--ink); }
.h-lap-more { min-height: 44px; padding: 0 16px; font: 700 15px var(--sans); color: var(--lake-d); border-radius: 12px; }

/* Hasse */
.h-hasse { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px; padding: 0 4px; }
.h-hasse-btn { display: block; padding: 0; border-radius: 20px; }
.h-hasse .hasse-bubble { margin-bottom: 18px; }

/* Jonas */
.h-jonas { background: #FFF2CF; border-color: #F4D98A; }
.h-jonas.done { background: var(--sun); border-color: var(--sun-d); }
.h-j-main { display: block; text-decoration: none; color: inherit; }
.h-j-who { display: flex; align-items: center; gap: 0; }
.av { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 17px var(--serif); color: #fff; background: var(--lake-d); border: 3px solid var(--card); flex: none; }
.av.p { background: var(--red); }
.av.j { background: var(--forest); margin-left: -10px; }
.h-j-t { font: 600 21px var(--serif); margin-left: 10px; }
.h-j-num { margin-top: 10px; }
.h-j-num b { font: 700 46px/1 var(--num); }
.h-j-num span { font: 700 22px var(--num); color: var(--ink-2); }
.h-j-bar { height: 18px; border-radius: 99px; background: rgba(27,26,46,.08); overflow: hidden; margin-top: 8px; }
.h-j-bar i { display: block; height: 100%; background: var(--red); border-radius: 99px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.16); }
.h-j-sub { margin: 10px 0 0; font: 600 15px/1.35 var(--sans); color: var(--ink); }
.h-jonas .btn { margin-top: 12px; width: 100%; }
.h-jonas.done .btn.sun { background: var(--card); box-shadow: 0 4px 0 var(--sun-d); }
.h-others { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 2px dashed rgba(27,26,46,.12); display: grid; gap: 4px; }
.h-others a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-decoration: none; min-height: 44px; }
.h-others .av { width: 30px; height: 30px; font-size: 14px; border-width: 0; }
.h-others .nm { font: 600 17px var(--serif); }
.h-others .n { font: 700 18px var(--num); color: var(--ink-2); }

/* medals: CSS coins that turn */
.medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.medal { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; border-radius: 16px; text-align: center; }
.m-l { font: 700 13px/1.2 var(--sans); max-width: 11ch; }
.m-p { font: 700 13px/1 var(--num); color: var(--ink-2); letter-spacing: .02em; }
.coin { --c: var(--sun); --d: var(--sun-d); --t: var(--ink); position: relative; width: 78px; height: 78px; perspective: 400px; display: block; }
.coin.red { --c: var(--red); --d: var(--red-d); --t: #fff; }
.coin.lake { --c: var(--lake); --d: var(--lake-d); --t: var(--ink); }
.coin.forest { --c: var(--forest); --d: var(--forest-d); --t: #fff; }
.coin .c-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--pop); }
.coin .c-face, .coin .c-back { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; }
.coin .c-face {
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%), var(--c);
  border: 4px solid var(--d); box-shadow: inset 0 -5px 0 rgba(0,0,0,.14), 0 4px 0 var(--d);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--t); overflow: hidden;
}
.coin .c-face::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-80%); animation: shine 5.5s ease-in-out infinite; }
.coin .c-back { background: var(--d); transform: rotateY(180deg); border: 4px solid var(--d); }
.coin b { font: 700 27px/0.9 var(--num); letter-spacing: -.01em; }
.coin small { font: 800 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
.coin .mark { width: 40px; height: 40px; }
.coin .mark .ring { stroke: #fff; }
.coin.sun .mark .ring { stroke: var(--red); }
.coin.locked .c-face { background: #EFE6D6; border-color: #DCCFB8; box-shadow: inset 0 -5px 0 rgba(0,0,0,.06), 0 4px 0 #DCCFB8; color: #9C9384; }
.coin.locked .c-face::after { display: none; }
.coin .c-prog { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); pointer-events: none; }
.medal:hover .c-in, .medal:focus-visible .c-in { transform: rotateY(360deg); }
.medal:active .coin { transform: scale(.94); }
@keyframes shine { 0%, 70% { transform: translateX(-80%); } 85%, 100% { transform: translateX(80%); } }
.coin.l { width: 156px; height: 156px; margin: 0 auto; }
.coin.l b { font-size: 56px; }
.coin.l small { font-size: 16px; }
.coin.l .mark { width: 84px; height: 84px; }
.coin.l .c-in { animation: spin-in 1.4s var(--pop) both; }
@keyframes spin-in { from { transform: rotateY(-540deg) scale(.6); } }

/* the road: a lap of nodes, left-middle-right like a path through a park */
.h-road { padding: 6px 0 0; }
.h-road .sec { padding: 0 4px; }
.road { list-style: none; margin: 0; padding: 8px 0 0; position: relative; }
.road::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 30px; width: 0; border-left: 6px dotted #E2D3B8; transform: translateX(-3px); }
.road li { position: relative; display: flex; padding: 10px 0; }
.road li.pos-l { justify-content: flex-start; padding-left: 4%; }
.road li.pos-m { justify-content: center; }
.road li.pos-r { justify-content: flex-end; padding-right: 4%; }
.r-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; text-align: left; max-width: 92%; position: relative; z-index: 1; background: var(--paper); border-radius: 20px; padding: 6px 12px 6px 6px; }
.pos-r .r-item { flex-direction: row-reverse; text-align: right; padding: 6px 6px 6px 12px; }
.node { --c: var(--lake); --d: var(--lake-d); width: 66px; height: 66px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); box-shadow: 0 5px 0 var(--d), inset 0 -4px 0 rgba(0,0,0,.12); }
.node svg { width: 34px; height: 34px; }
.node.red { --c: var(--red); --d: var(--red-d); }
.node.sun { --c: var(--sun); --d: var(--sun-d); }
.node.sun svg path, .node.sun svg circle, .node.sun svg rect { stroke: var(--ink); }
.node.sun svg path[fill="#fff"], .node.sun svg circle[fill="#fff"] { fill: var(--ink); }
.node.forest { --c: var(--forest); --d: var(--forest-d); }
.node.big { width: 82px; height: 82px; }
.node.big svg { width: 44px; height: 44px; }
.node.locked { --c: #E7DCC8; --d: #D3C4AA; }
.node.locked svg rect, .node.locked svg path { fill: #B5A88F; stroke: #B5A88F; }
.node.now { width: 88px; height: 88px; --c: var(--card); --d: var(--red); border: 4px solid var(--red); overflow: visible; }
.node.now .hasse { margin-top: -18px; }
.r-txt { display: flex; flex-direction: column; min-width: 0; }
.r-y { font: 700 15px/1 var(--num); letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; }
.r-txt b { font: 600 18px/1.2 var(--serif); margin: 3px 0 2px; }
.r-d { font: 500 14px/1.35 var(--sans); color: var(--ink-2); }
.is-locked .r-txt b { color: var(--ink-2); }
.is-now .r-y { color: var(--now); }
.road .r-item:active .node { transform: translateY(4px); box-shadow: 0 1px 0 var(--d); }

/* Jonas only */
.h-gift { border-style: dashed; }
.h-gift textarea { width: 100%; border: 2px solid var(--rule); border-radius: 14px; padding: 12px; font: 500 17px/1.4 var(--sans); background: var(--paper); resize: vertical; }
.h-gift textarea:focus { outline: none; border-color: var(--lake-d); }
.h-gift .row2 { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.h-gift .fl { display: block; font: 700 14px var(--sans); color: var(--ink-2); margin-bottom: 6px; }
.fine { font: 500 14px/1.4 var(--sans); color: var(--ink-2); margin: 10px 0 0; }
.h-foot { text-align: center; color: var(--ink-2); font: 500 13px/1.4 var(--sans); padding: 8px 0 0; }
.h-foot p { margin: 2px 0; }

/* ---------- sheets ---------- */
.sheet { border-top: 0; border-radius: 26px 26px 0 0; background: var(--card); box-shadow: 0 -6px 0 rgba(27,26,46,.06); max-width: 640px; margin: 0 auto; }
.sheet .grip { width: 44px; height: 5px; border-radius: 99px; background: var(--rule); }
.sheet .x { border-radius: 14px; color: var(--ink-2); }
.sheet-back { background: rgba(27, 26, 46, .32); }
.sh-h { font-size: 26px; margin: 4px 0 8px; line-height: 1.15; }
.lap-sheet p, .medal-sheet p { margin: 0 0 12px; }
.lap-sheet .btn { width: 100%; margin: 12px 0 0; }
.road-list { list-style: none; margin: 4px 0 12px; padding: 0; }
.road-list li { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; padding: 8px 0; border-bottom: 2px solid var(--paper-2); align-items: baseline; }
.road-list .rk { font: 700 18px var(--num); color: var(--ink-2); text-align: right; }
.road-list .rn { display: flex; flex-direction: column; }
.road-list .rn b { font: 600 17px var(--serif); }
.road-list .rn span { font-size: 14px; color: var(--ink-2); }
.road-list li.done .rk { color: var(--forest); }
.road-list li.done .rn b::after { content: ' ✓'; color: var(--forest); }
.medal-sheet { text-align: center; padding-top: 4px; }
.m-big { padding: 8px 0 14px; }
.m-when { font: 700 15px var(--sans); color: var(--ink-2); }
.m-say { display: flex; align-items: flex-end; gap: 4px; text-align: left; margin-top: 14px; }
.m-say .hasse-bubble { margin-bottom: 14px; }

/* ---------- the stage ---------- */
#stage { position: fixed; inset: 0; z-index: 60; background: var(--paper); opacity: 0; transition: opacity .4s var(--ease); overflow: hidden; }
#stage.on { opacity: 1; }
#stage.out { opacity: 0; pointer-events: none; }
.st-skip { position: absolute; top: calc(var(--safe-t) + 10px); right: 12px; min-height: 44px; padding: 0 16px; border-radius: 14px; font: 700 15px var(--sans); color: var(--ink-2); z-index: 3; background: rgba(255,247,234,.8); }

.intro .st-logo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px;
  font: 700 40px/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; transition: top .8s var(--ease), left .8s var(--ease), transform .8s var(--ease), font-size .8s var(--ease), gap .8s; }
.intro .st-logo .mark { width: 120px; height: 120px; transition: width .8s var(--ease), height .8s var(--ease); }
.intro .st-logo span { opacity: 0; animation: fadein .5s .5s forwards; }
.intro.globe .st-logo { top: calc(var(--safe-t) + 18px); left: 16px; transform: none; flex-direction: row; font-size: 22px; gap: 8px; }
.intro.globe .st-logo .mark { width: 30px; height: 30px; }
.st-globe { position: absolute; left: 50%; top: calc(50% + 10px); width: min(94vw, calc(100vh - 330px), 640px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: opacity .8s var(--ease), transform 1s var(--ease); }
.intro.globe .st-globe { opacity: 1; transform: translate(-50%, -50%); }
.st-count { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 72px); display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .6s .4s; }
.intro.globe .st-count { opacity: 1; }
.st-count b { font: 700 64px/0.95 var(--num); color: var(--ink); }
.st-count .st-lab { font: 800 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.st-count .st-unit { font: 700 18px/1 var(--num); color: var(--ink-2); letter-spacing: .1em; text-transform: uppercase; }
.st-count.closed b { color: var(--red); animation: pop .5s var(--pop); }
.st-count.two .st-lab { color: #fff; background: #D63527; padding: 6px 10px; border-radius: 99px; }
@keyframes pop { 40% { transform: scale(1.18); } }
.st-cap { position: absolute; left: 16px; right: 16px; top: calc(50% + 14px + min(47vw, calc(50vh - 165px), 320px)); text-align: center; font: 600 22px/1.25 var(--serif); margin: 0; min-height: 1.3em; }
.st-hasse { position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-b) + 92px); display: flex; align-items: flex-end; gap: 4px; transform: translateX(110%); transition: transform .9s var(--ease); }
.intro.hasse-in .st-hasse { transform: none; }
.st-hasse .hasse-bubble { margin-bottom: 18px; }
.st-go { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-b) + 22px); max-width: 420px; margin: 0 auto; animation: rise .5s var(--pop); }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.intro.hasse-in .st-cap { opacity: 0; } /* the bubble says it now; the caption would sit under it */

/* 1 000 km */
.fira { background: var(--sun) !important; }
.fira .st-skip { background: rgba(255,255,255,.5); color: var(--ink); }
.f-hasse { position: absolute; left: 50%; top: calc(var(--safe-t) + 54px); transform: translateX(-50%); animation: hop 1.2s var(--pop) both; }
@keyframes hop { from { transform: translate(-50%, 60px) scale(.6); opacity: 0; } }
.f-body { position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 236px); bottom: 0; overflow-y: auto; padding: 0 20px calc(var(--safe-b) + 24px); text-align: center; max-width: 520px; margin: 0 auto; }
.f-kick { font: 800 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 6px; }
.f-num { display: flex; flex-direction: column; align-items: center; }
.f-num b { font: 700 96px/0.9 var(--num); letter-spacing: -.01em; }
.f-num span { font: 700 20px var(--num); letter-spacing: .08em; text-transform: uppercase; }
.fira.hit .f-num b { color: var(--red-d); animation: pop .6s var(--pop); }
.f-h { font: 700 30px/1.15 var(--serif); margin: 18px 0 8px; opacity: 0; transform: translateY(12px); transition: all .5s var(--ease); }
.f-p { margin: 0 0 16px; font-weight: 600; opacity: 0; transition: opacity .5s .2s; }
.f-card { margin: 0 0 20px; background: var(--card); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 5px 0 var(--sun-d); transform: rotate(-1.5deg) translateY(16px); opacity: 0; transition: all .7s .4s var(--pop); text-align: left; }
.f-card blockquote { margin: 0; font: 500 21px/1.35 var(--serif); white-space: pre-line; }
.f-card figcaption { margin-top: 10px; font: 600 19px var(--serif); text-align: right; color: var(--now); }
.f-btns { opacity: 0; transition: opacity .5s .9s; }
.f-btns .btn { width: 100%; }
.fira.told .f-h, .fira.told .f-p, .fira.told .f-card, .fira.told .f-btns { opacity: 1; transform: none; }
.fira.told .f-card { transform: rotate(-1.5deg); }
.f-burst { position: absolute; left: 50%; top: calc(var(--safe-t) + 330px); width: 0; height: 0; z-index: 2; pointer-events: none; }
.f-burst i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: var(--c); border-radius: 50%; opacity: 0;
  animation: burst var(--t) var(--ease) forwards; }
.f-burst i.b1 { border-radius: 3px; width: 10px; height: 18px; }
.f-burst i.b2 { background: none; border: 4px solid var(--c); }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } }

/* ---------- Kartan in the new clothes: floating pieces over the colour map ---------- */
.k-top { background: transparent; border: 0; padding: calc(var(--safe-t) + 10px) 12px 0; pointer-events: none; }
.k-name { display: flex; align-items: center; gap: 8px; background: var(--card); border: 2px solid var(--rule); border-radius: 16px; box-shadow: var(--lift);
  padding: 8px 14px 8px 10px; font: 600 19px/1 var(--serif); }
.k-name .mark { width: 22px; height: 22px; }
.k-year { font: 700 30px/1 var(--num); background: var(--card); border: 2px solid var(--rule); border-radius: 16px; box-shadow: var(--lift); padding: 7px 12px; }
.k-bottom { left: 10px; right: 10px; bottom: 10px; border: 2px solid var(--rule); border-radius: 22px; background: var(--card); box-shadow: var(--lift); padding: 4px 12px 8px; }
.k-play button.play { border: 0; border-radius: 50%; background: #D63527; box-shadow: 0 4px 0 var(--red-d); }
.k-play button.play svg path, .k-play button.play svg rect { fill: #fff; }
.k-play button.play:active { transform: translateY(4px); box-shadow: none; }
.scrub .line { height: 6px; border-radius: 99px; background: var(--paper-2); top: calc(50% - 3px); }
.scrub .knob { width: 22px; height: 22px; top: calc(50% - 11px); border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 0 var(--red-d); transform: translateX(-11px); }
.scrub .lab { font: 700 12px var(--num); letter-spacing: .04em; }
.scrub .tick { background: #CDBFA6; }
.k-chip { border: 2px solid var(--rule); border-radius: 99px; box-shadow: var(--lift); background: var(--card); font-weight: 700; }
.inset .fr { border: 2px solid var(--rule); border-radius: 14px; background: var(--paper-2); }
.inset span { font: 600 14px var(--serif); }
.course-tag { border: 2px solid var(--ink); border-radius: 99px; box-shadow: 0 3px 0 var(--ink); font: 700 15px var(--sans); background: var(--card); }
.course-tag .n { font: 700 16px var(--num); color: var(--now); }
.place { font: 600 15px/1 var(--serif); }
#map .maplibregl-ctrl-bottom-right { bottom: 150px; }

/* ---------- Lopp, Pass, Sällskap ---------- */
.g-wrap { padding-top: calc(var(--safe-t) + 6px); }
.g-head { padding: 6px 16px 12px; }
.g-head h1 { margin: 0; font-size: 30px; line-height: 1.1; }
.g-head .g-sub { margin: 6px 0 0; color: var(--ink-2); font: 600 16px/1.35 var(--sans); }
.g-big { display: flex; gap: 10px; margin: 14px 0 0; }
.g-big div { flex: 1; background: var(--card); border: 2px solid var(--rule); border-radius: 18px; box-shadow: var(--lift); padding: 10px 12px; }
.g-big b { display: block; font: 700 34px/1 var(--num); }
.g-big span { font: 700 13px/1.2 var(--sans); color: var(--ink-2); }
.g-feature { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 4px 16px 14px; padding: 14px; text-decoration: none; color: inherit;
  background: var(--lake); border-radius: 22px; box-shadow: 0 5px 0 var(--lake-d); }
.g-feature .gf-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--card); display: grid; place-items: center; box-shadow: 0 3px 0 var(--lake-d); }
.g-feature .gf-ic svg { width: 36px; height: 36px; }
.g-feature b { display: block; font: 600 20px/1.2 var(--serif); }
.g-feature span { font: 600 15px/1.35 var(--sans); }
.g-feature:active { transform: translateY(5px); box-shadow: 0 0 0 var(--lake-d); }
.g-feature.locked { background: var(--paper-2); box-shadow: 0 5px 0 var(--rule); }
.lg { margin: 0 12px; background: var(--card); border: 2px solid var(--rule); border-radius: 22px; overflow: hidden; box-shadow: var(--lift); }
.lg li { border-bottom: 2px solid var(--paper-2); }
.lg li:last-child { border-bottom: 0; }
.lg .yr { font: 700 20px/1.1 var(--num); color: var(--ink-2); }
.lg .race { font: 600 17px/1.25 var(--serif); }
.lg .tm { font: 700 20px/1.1 var(--num); }
.lg .pl { font: 700 14px var(--num); letter-spacing: .02em; }
.lg .cm { font: 500 16px/1.4 var(--sans); color: var(--ink-2); }
.lg .mg { font: 500 16px/1.4 var(--sans); }
.lg li.hundred .row { border: 0; }
.lg li.hundred .yr { color: var(--now); }
.lg li.hundred .h100-t { font: 600 17px var(--serif); color: var(--ink-2); }
.lg li.honour { background: #FFF2CF; }
.lg li.honour .race::before { content: '★ '; color: var(--sun-d); }
.lg a.rowlink { display: block; text-decoration: none; color: inherit; }
.lg li.gold { background: #FFF2CF; }
.lg li.gold .race::after { content: " · personbästa"; font: 700 14px var(--sans); color: var(--ink-2); }
.yh { background: var(--paper); border-bottom: 0; padding: 14px 16px 8px; font: 700 15px var(--sans); }
.yh > .n:first-child { font: 700 24px/1 var(--num); }
.ps { margin: 0 12px; background: var(--card); border: 2px solid var(--rule); border-radius: 20px; overflow: hidden; }
.ps a, .ps .ps-row { border-bottom: 2px solid var(--paper-2); padding: 10px 14px; }
.ps li:last-child a { border-bottom: 0; }
.ps li.mgap a { border-top: 0; }
.ps .tt { font: 600 17px/1.25 var(--serif); }
.ps .d { font: 700 13px var(--sans); }
.ps .v { font: 600 14px/1.4 var(--sans); color: var(--ink-2); }
.ps .v { white-space: nowrap; }
.ps .v .k { font: 700 19px/1 var(--num); color: var(--ink); }
.ps a.now .tt::before { background: var(--red); }
.sk { margin: 0 12px; }
.sk a { border: 2px solid var(--rule); border-radius: 18px; margin-bottom: 8px; background: var(--card); box-shadow: var(--lift); }
.sk .who { font: 600 20px var(--serif); }
.filter-h { border: 2px solid var(--rule); border-radius: 16px; background: var(--card); margin: 0 12px 12px; font-weight: 700; }
.filter-h .x { width: 44px; height: 44px; display: grid; place-items: center; text-decoration: none; font-size: 24px; }
.tomap-w { margin: 0 12px 12px; }
.tomap-w .btn { width: 100%; }

/* ---------- Passet, Klockan, Loppet: rounder, warmer ---------- */
.p-title input { font: 600 28px/1.2 var(--serif); }
.p-map { border-radius: 22px; overflow: hidden; margin: 12px 0 0; border: 2px solid var(--rule); }
.p-map .tr { stroke: var(--red); stroke-width: 3; }
.cells { border-top: 0; gap: 8px; margin-top: 12px; }
.cell { background: var(--card); border: 2px solid var(--rule); border-radius: 16px; padding: 10px 12px; }
.bib { border: 3px solid var(--ink); border-radius: 18px; background: var(--card); }
.bib .b-t { font: 700 56px/1 var(--num); }
.bib .b-c { font: 500 20px/1.35 var(--serif); }
.l-clock { font: 700 64px/1 var(--num); }
.l-title { font: 600 22px var(--serif); }
.l-lead { display: grid; grid-template-columns: auto 1fr; gap: 4px; align-items: end; margin: 6px 0 4px; }
.l-lead .hasse-bubble { margin-bottom: 12px; font-size: 17px; }
.l-course .r.gold { fill: var(--sun); stroke: var(--ink); stroke-width: 2; }
.toggle .sw { border-radius: 99px; border-color: var(--ink-2); }
.toggle .sw::after { border-radius: 50%; }
.toggle[aria-checked="true"] .sw { background: var(--forest); border-color: var(--forest); }
.toggle[aria-checked="true"] .sw::after { background: #fff; }
.seg { border: 2px solid var(--rule); border-radius: 16px; overflow: hidden; background: var(--card); }
.seg a + a { border-left: 2px solid var(--rule); }
.seg a[aria-current="page"] { background: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (min-width: 900px) {
  .h-wrap { max-width: 1040px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 24px; }
  .h-top, .h-foot { grid-column: 1 / -1; }
  .h-lap { grid-column: 2; grid-row: 2 / span 3; }
  .h-road, .h-medals, .h-gift { grid-column: 1 / -1; }
  .h-road .road { max-width: 620px; margin: 0 auto; }
}
.yg .ps a { grid-template-columns: auto 1fr auto; align-items: center; }
.ps .th { width: 48px; height: 48px; border-radius: 12px; background: #EEF3E6; display: block; overflow: hidden; }
.ps .th svg { width: 48px; height: 48px; display: block; }
.ps .th.none { background: var(--paper-2); }
.coin small.long { font-size: 7.5px; letter-spacing: .04em; }
.coin b.long { font-size: 22px; }
.coin.l small.long { font-size: 13px; }
.coin.l b.long { font-size: 44px; }
/* Samma ålder: a pill that turns green when on */
.toggle { border: 2px solid var(--rule); border-radius: 99px; background: var(--card); color: var(--ink); font: 700 15px var(--sans); padding: 0 16px; box-shadow: 0 3px 0 var(--rule); }
.toggle[aria-checked="true"] { background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: 0 3px 0 var(--forest-d); }
.l-goal h2 { border-bottom: 0; font: 600 20px var(--serif); }
.l-goal-h { display: flex; align-items: center; justify-content: space-between; }
.goal-row { border-bottom: 2px solid var(--paper-2); }
.goal-row .y, .goal-row .t { font-family: var(--num); font-size: 19px; }
.l-sw { font: 700 15px var(--sans); }
.l-switch .l-sw.off { color: var(--ink-2); }
.l-scrub input { accent-color: var(--red); }
.empty-rule { border-top: 2px dashed var(--rule); margin: 16px 0; }
.l-speed { font: 700 15px var(--num); letter-spacing: .04em; border-radius: 12px; padding: 4px 10px; background: var(--paper-2); min-height: 36px; }
/* Inställningar: soft fields, Fredoka headings */
.kl-h { font: 600 26px var(--serif); padding: 8px 0; }
.kl h2 { font: 600 20px var(--serif); border-bottom: 0; margin: 24px 0 4px; padding: 0; }
.kl input[type=date], .kl input[type=text], .kl input[type=datetime-local], .kl input:not([type]), .kl input[inputmode] {
  width: 100%; min-height: 52px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); padding: 0 14px; font: 600 17px var(--sans); }
.kl input:focus { outline: none; border-color: var(--lake-d); }
.kl .fl { font: 700 14px var(--sans); }
.kl .foot { font: 600 17px var(--serif); }
.p-top .back { border-radius: 14px; }
@media (min-width: 960px) {
  #bar { border-right: 2px solid var(--rule); border-top: 0; height: auto; gap: 6px; }
  #bar a { height: 76px; }
  .sheet { border: 2px solid var(--rule); border-radius: 26px; box-shadow: 0 6px 0 rgba(27,26,46,.1); }
  .medals { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .k-bottom { left: 24px; right: auto; width: min(760px, calc(100% - 48px)); bottom: 24px; }
}
.f-prev { display: inline-block; margin: 0 0 8px; padding: 6px 12px; border-radius: 99px; background: var(--ink); color: #fff; font: 700 13px var(--sans); }
.door-hasse { min-height: 190px; }

/* review fixes */
#stage:focus { outline: 0; }
.intro .globe-box:not(.gl):not(.flat) .flat-lap { opacity: 0; }
.logo-who { font: 700 13px var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: 0; align-self: flex-end; padding-bottom: 3px; }
@media (min-width: 900px) { .medals { grid-template-columns: repeat(9, 1fr); } }
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 40px; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--paper-2); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--paper-2); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 0 var(--red-d); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 0 var(--red-d); }
.l-goal-h { border-bottom: 2px solid var(--rule); }
.line-in input { width: 100%; min-height: 52px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); padding: 0 14px; font: 500 17px var(--sans); margin-top: 16px; }
.line-in input:focus { outline: none; border-color: var(--lake-d); }
.coin { width: 86px; height: 86px; }
.coin small { font-size: 10.5px; }
.coin small.long { font-size: 8.5px; }
.l-speed, .toggle, .course-tag { min-height: 44px; }
.splits th { border-bottom: 2px solid var(--rule); }
.splits .bar i { height: 8px; border-radius: 99px; background: var(--red); display: block; }
.sec-h { border-bottom: 2px solid var(--rule); font: 600 20px var(--serif); }
.days a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; min-height: 44px; }
.days a:active .dd { transform: translateY(3px); box-shadow: none; }
@media (min-width: 700px) { .st-hasse { max-width: 560px; margin: 0 auto; } }
.h-takt { margin: -6px 0 10px; font: 600 14px/1.35 var(--sans); color: var(--ink-2); }

/* craft pass: views arrive, the first Hem rises, coins turn under a thumb, a red loading line */
.view.on > .scroll { animation: viewin .18s var(--ease); }
@keyframes viewin { from { opacity: 0; transform: translateY(6px); } }
#load { height: 3px; background: var(--red); border-radius: 0 3px 3px 0; }
.h-wrap.first > * { animation: rise-in .42s var(--ease) both; }
.h-wrap.first > *:nth-child(2) { animation-delay: .04s; }
.h-wrap.first > *:nth-child(3) { animation-delay: .08s; }
.h-wrap.first > *:nth-child(4) { animation-delay: .12s; }
.h-wrap.first > *:nth-child(5) { animation-delay: .16s; }
.h-wrap.first > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
.medal.flip .c-in { animation: coinflip .9s var(--pop); }
@keyframes coinflip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }

/* Efter passet: a run written into the ledger. Calm: one count, one dot, one line of his own. */
.efter { display: flex; flex-direction: column; overflow-y: auto; padding: calc(var(--safe-t) + 24px) max(20px, calc((100vw - 520px) / 2)) calc(var(--safe-b) + 24px); }
.efter .e-say { display: flex; align-items: flex-end; gap: 4px; min-height: 120px; animation: e-run .9s var(--ease) .15s both; }
.efter .e-say .hasse-bubble { margin-bottom: 16px; flex: 1; }
@keyframes e-run { from { transform: translateX(105vw); } }
.efter .e-body { text-align: center; margin-top: 12px; }
.e-num { display: flex; flex-direction: column; align-items: center; }
.e-num b { font: 700 104px/0.9 var(--num); letter-spacing: -.01em; }
.e-num span { font: 700 20px var(--num); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.efter.landed .e-num b { animation: e-stamp .5s var(--pop); }
@keyframes e-stamp { 40% { transform: scale(1.06); } }
.e-sub { margin: 8px 0 0; font: 700 17px var(--sans); color: var(--ink-2); min-height: 1.3em; }
.e-week { margin: 22px auto 0; max-width: 360px; background: var(--card); border: 2px solid var(--rule); border-radius: 20px; padding: 2px 12px 14px; }
.e-week .days a { pointer-events: none; }
.efter .days li.fresh .dd { transform: scale(0); }
.efter.landed .days li.fresh .dd { animation: e-dot .55s var(--pop) .1s both; }
@keyframes e-dot { from { transform: scale(0); } 70% { transform: scale(1.18); } to { transform: scale(1); } }
.e-lap, .e-rank, .e-line, .e-btns { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.efter.landed .e-lap { opacity: 1; transform: none; transition-delay: .35s; }
.efter.landed .e-rank { opacity: 1; transform: none; transition-delay: .55s; }
.efter.landed .e-line { opacity: 1; transform: none; transition-delay: .75s; }
.efter.landed .e-btns { opacity: 1; transform: none; transition-delay: .95s; }
.e-lap { margin: 20px 0 0; font: 700 22px var(--num); letter-spacing: .02em; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.e-lap b { color: var(--now); font-weight: 700; }
.e-rank { margin: 8px 0 0; font: 600 17px var(--serif); color: var(--forest-d); }
.e-line { margin: 18px auto 0; max-width: 420px; text-align: left; }
.e-line .line-in input { margin-top: 0; }
.e-btns { display: grid; gap: 12px; margin: 22px auto 0; max-width: 420px; }
@media (prefers-reduced-motion: reduce) { .efter .e-say { animation: none; } .e-lap, .e-rank, .e-line, .e-btns { transition: none; } }
.line-in { border-bottom: 0; position: relative; display: block; }
.line-in input { padding-right: 76px; }
.line-in .saved { position: absolute; right: 14px; bottom: 26px; transform: translateY(50%); font: 700 14px var(--sans); color: var(--forest-d); pointer-events: none; }
.efter > .e-say { margin-top: auto; }
.efter > .e-body { margin-bottom: auto; }
@media (max-height: 700px) { .e-num b { font-size: 84px; } .efter .e-say { min-height: 100px; } .e-week { margin-top: 14px; } .e-lap { margin-top: 14px; } .e-btns { margin-top: 16px; } }
.place-list { list-style: none; margin: 4px 0 8px; padding: 0; max-height: 52vh; overflow-y: auto; }
.place-list a { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 2px solid var(--paper-2); color: inherit; text-decoration: none; min-height: 44px; }
.place-list b { font: 600 18px var(--serif); }
.place-list span { font: 600 15px var(--sans); color: var(--ink-2); }
.globe-gl canvas { cursor: grab; }

/* ---------- Lopp and Pass: the finder */
.g-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 16px; }
.g-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--lake); color: #fff; text-decoration: none; box-shadow: 0 4px 0 var(--lake-d); min-height: 64px; }
.g-tile:active { transform: translateY(4px); box-shadow: none; }
.g-tile .gf-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--card); display: grid; place-items: center; }
.g-tile .gf-ic svg { width: 26px; height: 26px; }
.g-tile b { display: block; font: 600 15px/1.2 var(--serif); }
.g-tile span span { font: 700 12px/1.3 var(--sans); opacity: .9; }
.g-tile.locked { background: var(--paper-2); color: var(--ink-2); box-shadow: 0 4px 0 var(--rule); }
.finder { display: flex; flex-direction: column; }
.f-search { position: relative; margin: 0 16px; }
.f-search .f-glass { position: absolute; left: 14px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.f-q { width: 100%; min-height: 52px; border: 2px solid var(--rule); border-radius: 16px; background: var(--card); padding: 0 48px 0 46px; font: 600 17px var(--sans); color: var(--ink); box-shadow: 0 3px 0 var(--rule); -webkit-appearance: none; appearance: none; }
.f-q::-webkit-search-cancel-button { display: none; }
.f-q::placeholder { color: var(--ink-2); opacity: .85; font-weight: 500; }
.f-q:focus { outline: none; border-color: var(--lake-d); box-shadow: 0 3px 0 var(--lake-d); }
.f-clr { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper-2); font: 700 22px/1 var(--sans); color: var(--ink); }
.f-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 6px; scrollbar-width: none; scroll-padding: 0 16px; }
.f-chips::-webkit-scrollbar { display: none; }
.f-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 2px solid var(--rule); background: var(--card); font: 700 15px var(--sans); color: var(--ink); box-shadow: 0 3px 0 var(--rule); white-space: nowrap; }
.f-chip .n { font: 700 14px var(--num); color: var(--ink-2); }
.f-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 3px 0 #000; }
.f-chip[aria-pressed="true"] .n { color: #fff; opacity: .75; }
.f-chip:active { transform: translateY(3px); box-shadow: none; }
.f-chart { margin: 10px 16px 0; padding: 14px 14px 10px; }
.ch-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.ch-read { margin: 0; font: 700 15px var(--sans); color: var(--ink-2); }
.ch-read b { font: 700 19px var(--num); color: var(--ink); letter-spacing: .02em; }
.ch-x { border: 0; background: var(--paper-2); border-radius: 99px; padding: 0 12px; min-height: 32px; font: 700 13px var(--sans); color: var(--ink); }
.ch-bars { display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end; height: 96px; margin-top: 8px; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ch-bar { height: 100%; display: flex; align-items: flex-end; justify-content: center; border: 0; background: none; padding: 0 1px; }
.ch-bar i { display: block; width: 100%; max-width: 18px; background: var(--forest); border-radius: 4px 4px 1px 1px; transition: background .15s, opacity .15s; }
.ch-bars.has-sel .ch-bar i { background: var(--rule); }
.ch-bar.sel i, .ch-bars .ch-bar.sel i { background: var(--red); }
.ch-bar.hov i { background: var(--forest-d); }
.ch-bars.has-sel .ch-bar.hov:not(.sel) i { background: var(--ink-2); }
.ch-bar:focus-visible { outline: 3px solid var(--lake-d); outline-offset: -1px; border-radius: 4px; }
.ch-ticks { display: grid; grid-template-columns: repeat(var(--n, 14), 1fr); margin-top: 4px; border-top: 2px solid var(--rule); padding-top: 4px; }
.ch-ticks span { font: 700 11px var(--num); color: var(--ink-2); text-align: center; white-space: nowrap; overflow: visible; }
.ch-race { display: block; width: 100%; height: auto; margin-top: 6px; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
.ch-race .grid { stroke: var(--rule); stroke-width: 1.5; }
.ch-race .ax { font: 700 11px var(--num); fill: var(--ink-2); }
.ch-race .trend { fill: none; stroke: var(--rule); stroke-width: 2; stroke-linejoin: round; }
.ch-race .dot { fill: var(--ink-2); stroke: var(--card); stroke-width: 2; }
.ch-race .dot.best { fill: var(--sun); stroke: var(--ink); stroke-width: 2; }
.ch-race .dot.sel { fill: var(--red); }
.ch-race .lab { font: 700 12px var(--num); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.ch-play { display: flex; width: 100%; margin: 10px 0 2px; }
.ch-grid { display: block; width: 100%; height: auto; margin-top: 14px; cursor: pointer; }
.ch-grid .mo { font: 700 7px var(--sans); fill: var(--ink-2); }
.ch-leg { display: flex; align-items: center; gap: 4px; margin-top: 8px; font: 700 12px var(--sans); color: var(--ink-2); }
.ch-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ch-leg span:first-child { margin-right: 2px; }
.ch-leg span:nth-last-child(2) { margin-left: 2px; }
.ch-leg-r { margin-left: auto; }
.f-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 16px 8px; }
.f-count { margin: 0; font: 700 15px var(--sans); color: var(--ink-2); }
.f-seg { display: inline-flex; background: var(--paper-2); border-radius: 99px; padding: 3px; gap: 2px; flex: none; }
.f-seg button { border: 0; background: none; border-radius: 99px; min-height: 36px; padding: 0 12px; font: 700 14px var(--sans); color: var(--ink-2); }
.f-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 0 var(--rule); }
.f-empty { margin: 8px 16px; padding: 24px 16px; text-align: center; background: var(--card); border: 2px dashed var(--rule); border-radius: 20px; }
.f-empty p { margin: 0 0 12px; font: 600 18px var(--serif); }
.f-list .more { height: 1px; }
.ps.ranked { counter-reset: rk; }
@media (min-width: 900px) { .g-tiles, .f-search, .f-chart, .f-tools { margin-left: 16px; margin-right: 16px; } }
.g-tile b { font-size: 15px; }
.g-tile > span:last-child { min-width: 0; }
.f-tools { flex-wrap: wrap; row-gap: 8px; }
.f-seg { margin-left: auto; }
.ch-grid .mo { font-size: 9.5px; }
.ch-play { justify-content: center; }
.g-tile { color: var(--ink); }

/* ---------- patrikspringer: the public homepage, and Patrik's pen ---------- */
.logo, .intro .st-logo { text-transform: none; letter-spacing: 0; }
.h-top { align-items: flex-start; padding-top: 4px; }
.h-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.h-id .logo-who { font: 500 15px/1.35 var(--sans); color: var(--ink-2); align-self: auto; padding: 0; max-width: 30ch; margin: 0; }
.h-login, .kl-login button { background: none; border: 0; padding: 12px 8px; min-height: 44px; font: 600 14px var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kl-login { text-align: center; margin: 18px 0 0; }

/* pencils: only when he is signed in */
.pencil { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--ink-2); flex: none; }
.pencil svg { width: 16px; height: 16px; }
.pen-field { display: flex; align-items: center; gap: 6px; }
.pen-field input { flex: 1; min-width: 0; }
.line-in.pen-field .pencil { position: absolute; right: 14px; top: calc(16px + 26px); transform: translateY(-50%); pointer-events: none; }
.line-in.pen-field input:focus ~ .pencil, .line-in.pen-field .saved.on ~ .pencil { opacity: 0; }
.p-title-t { display: block; font: 600 28px/1.2 var(--serif); padding: 4px 0; overflow-wrap: anywhere; }
.p-line { font: 500 19px/1.4 var(--serif); margin: 18px 0 0; }
.p-cut { font: 500 14px/1.4 var(--sans); color: var(--ink-2); margin: 8px 0 0; }
.pen-row { position: relative; }
.pen-row .rowlink, .pen-row > .row { padding-right: 44px; }
.pen-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 12px; cursor: pointer; color: var(--ink-2); }
.pen-btn:hover { background: var(--paper-2); }
.lg li.hundred .hd-open { display: flex; align-items: center; width: 100%; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lg li.hundred .hd-open .row { flex: 1; }
.rp-add-li { list-style: none; padding: 10px 0 6px; border: 0 !important; }
.rp-add { width: 100%; }
.hid-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font: 700 12px/1.6 var(--sans); vertical-align: 2px; }
.is-hidden .race, .is-hidden .tm, .is-hidden .tt { opacity: .55; }
.pen-pulse .pencil { animation: pen-pulse 1.1s var(--pop) 2; }
@keyframes pen-pulse { 50% { transform: scale(1.35); color: var(--now); } }
@media (prefers-reduced-motion: reduce) { .pen-pulse .pencil { animation: none; } }

/* Sparat · Ångra */
/* left and right 16 px, as wide as its words (up to 520 px), centred: a centred left:50% box could only ever be half the screen */
.pen-toast { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: 520px; bottom: calc(var(--bar) + var(--safe-b) + 14px); transform: translateY(20px); z-index: 60; display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border-radius: 18px; padding: 6px 6px 6px 18px; min-height: 52px; font: 700 15px var(--sans); box-shadow: 0 4px 0 #0B0D1F, 0 8px 22px rgba(27,26,46,.22);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.pen-toast.on { opacity: 1; transform: none; pointer-events: auto; }
.pen-toast .pen-dot { display: none; }
.pen-toast > span:first-child { flex: 1; text-wrap: balance; line-height: 1.25; padding: 6px 0; }
#sheet.on ~ .pen-toast, body:has(#sheet.on) .pen-toast { bottom: auto; top: calc(env(safe-area-inset-top) + 12px); }
.pen-undo { flex: none; background: rgba(255,255,255,.1); border: 0; color: var(--sun); font: 800 15px var(--sans); min-height: 44px; padding: 0 16px; border-radius: 12px; cursor: pointer; }
.pen-undo:focus-visible { outline: 2px solid var(--sun); }
body.staged .pen-toast { display: none; }

/* the door: sign in, connect a phone */
.pen-sheet .sh-h { margin-top: 4px; }
.pen-sheet input[type=text], .rp input { width: 100%; min-height: 52px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); padding: 0 14px; font: 500 18px var(--sans); }
.pen-sheet input:focus { outline: none; border-color: var(--lake-d); }
#pen-code { font: 700 22px var(--num); letter-spacing: .12em; text-transform: uppercase; }
.pen-sheet .row2 { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.pen-sheet .row2 .btn { flex: 1 1 auto; }
.pen-step { font: 700 13px var(--sans); color: var(--ink-2); margin: 0; letter-spacing: .04em; }
.pen-other { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--rule); }
.pen-other .btn { width: 100%; }
.pen-cheer { display: flex; align-items: flex-end; gap: 10px; padding: 8px 0; }
.pen-cheer .bubble { flex: 1; }
.rp .row2 .grow { flex: 1 1 140px; min-width: 0; }
.rp-chips { margin-top: 10px; }
.btn.small { min-height: 44px; padding: 0 14px; font-size: 15px; }
.btn:disabled, .btn[disabled] { opacity: .45; box-shadow: none; transform: none; cursor: default; }
.pen-sheet .status:not(:empty) { color: var(--now); font-weight: 700; margin: 8px 0 0; }
.btn.danger { background: var(--red-d); box-shadow: 0 4px 0 #7d1d16; }

/* Inställningar */
.kl-switch { margin-top: 4px; }
.kl-sw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 600 17px var(--sans); min-height: 48px; }
.switch { position: relative; width: 56px; height: 34px; border-radius: 999px; border: 0; background: var(--rule); cursor: pointer; flex: none; transition: background .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(27,26,46,.25); transition: transform .2s var(--ease); }
.switch[aria-checked=true] { background: var(--forest); }
.switch[aria-checked=true] i { transform: translateX(22px); }
.switch:focus-visible { outline: 3px solid var(--lake-d); outline-offset: 2px; }
.kl-keys, .kl-hist { list-style: none; margin: 8px 0 0; padding: 0; }
.kl-keys li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.kl-keys .kk-n { font: 500 15px/1.4 var(--sans); }
.kk-ask { flex-basis: 100%; }
.kk-ask p { margin: 4px 0 8px; font: 500 15px/1.4 var(--sans); }
.kk-ask .row2 { display: flex; gap: 8px; }
.kl-hist li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 500 15px/1.35 var(--sans); }
.kl-hist .kh-t { color: var(--ink-2); grid-row: span 2; font-size: 15px; }
.kl-hist .kh-v { color: var(--ink-2); overflow-wrap: anywhere; }
.kl-hist a { color: inherit; }
.p-fix { margin: 26px 0 0; border-top: 1px solid var(--rule); padding-top: 6px; }
.p-fix summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font: 700 16px var(--sans); color: var(--ink-2); }
.p-fix input { width: 100%; min-height: 52px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); padding: 0 14px; font: 500 18px var(--sans); }
.p-fix .row2 { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.p-fix .grow { flex: 1 1 140px; }

/* Lopp nummer 100 */
.hundra .hd-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; border-bottom: 2px dashed var(--ink); padding: 10px 2px; font: 600 19px/1.25 var(--serif); min-height: 52px; text-align: left; }
.hundra .hd-race { min-width: 0; overflow-wrap: anywhere; }
.hundra .hd-nr { font: 700 28px var(--num); color: var(--now); }
.hundra .hd-t { font: 700 24px var(--num); }
.hundra .hd-coin { display: grid; place-items: center; margin: 22px 0 6px; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .6s var(--pop); }
.hundra.hit .hd-coin { opacity: 1; transform: none; }
.hundra .hd-coin .coin { width: 112px; height: 112px; }
.hundra .hd-hasse { position: absolute; left: 16px; right: 16px; bottom: calc(24px + var(--safe-b) + 120px); display: flex; align-items: flex-end; gap: 8px; }
.hundra .f-body { position: absolute; left: 16px; right: 16px; top: calc(70px + var(--safe-t)); bottom: calc(24px + var(--safe-b) + 230px); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.hundra .f-btns { position: fixed; left: 16px; right: 16px; bottom: calc(18px + var(--safe-b)); display: grid; gap: 10px; opacity: 0; transition: opacity .3s; }
.hundra.told .f-btns { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* go-live pass: details from the UI review */
.lg .hid-tag { grid-column: 2 / 4; justify-self: start; margin-left: 0; }
.cells .cell.fill { visibility: hidden; }
#sheet-body .row2 .btn { margin: 0; }
#sheet-body .row2 { margin: 16px 0 0; gap: 10px; flex-wrap: wrap; }
.f-seg button { min-height: 44px; }
.p-who { display: inline-block; margin: 2px 16px 0; padding: 6px 0; font: 700 15px var(--sans); color: var(--ink-2); text-decoration: none; }
.p-who:hover, .p-who:focus-visible { color: var(--ink); text-decoration: underline; }
.p-gone { margin: 24px 16px; }
.p-gone p { font: 600 19px var(--serif); margin: 0 0 14px; }
.rp textarea { width: 100%; min-height: 96px; border: 2px solid var(--rule); border-radius: 14px; background: var(--card); padding: 12px 14px; font: 500 17px/1.4 var(--sans); resize: vertical; }
.rp textarea:focus { outline: none; border-color: var(--lake-d); }
.rp-pub { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 10px; margin: 12px 0 4px; min-height: 44px; font: 700 16px var(--sans); cursor: pointer; }
.rp-pub input { width: 24px; height: 24px; accent-color: var(--ink); margin: 0; }
.rp-pub small { grid-column: 2; font: 500 14px var(--sans); color: var(--ink-2); }
.lg .cm-own { font-size: 13px; font-weight: 700; color: var(--ink-2); opacity: .8; }
.kk-ask { margin-top: 10px; }
.quiet *, .quiet *::before, .quiet *::after { animation-play-state: paused !important; }