/* Layout: ett hotellrum. Startsidan är ett fönster med fem rullgardiner; varje övning är en egen vy i en smal läsekolumn. */
:root{
  --bg:#EDF1EF; --surface:#F8FAF9; --ink:#15262D; --muted:#53676D; --line:#C9D5D3; --soft:#DDEBE8;
  --accent:#0D7472; --accent-ink:#FFFFFF;
  --curtain:#31405E; --curtain-2:#29364F; --curtain-ink:#E6EBF3;
  --sky:#CFE5E8; --sea:#2A8790; --sun:#E3A53C; --frame:#D5DDDA;
  --o-media:#B5687A; --o-tonar:#C79D4A; --o-partner:#7E8FAA; --o-vuxen:#7F8F63; --o-foraldrar:#B07A52; --o-eget:var(--accent);
  --f-display:"Gloock", Georgia, "Times New Roman", serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1A1F; --surface:#15252B; --ink:#E3EBE9; --muted:#97AAAC; --line:#2A3D44; --soft:#1B3236;
    --accent:#3DB5AD; --accent-ink:#06201F;
    --curtain:#2C3A57; --curtain-2:#253049; --curtain-ink:#DCE3F0;
    --sky:#1C2E44; --sea:#135861; --sun:#E8B456; --frame:#22343B;
    --o-media:#CB8092; --o-tonar:#D4AE5E; --o-partner:#93A4C0; --o-vuxen:#98A97A; --o-foraldrar:#C98F64;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1A1F; --surface:#15252B; --ink:#E3EBE9; --muted:#97AAAC; --line:#2A3D44; --soft:#1B3236;
  --accent:#3DB5AD; --accent-ink:#06201F;
  --curtain:#2C3A57; --curtain-2:#253049; --curtain-ink:#DCE3F0;
  --sky:#1C2E44; --sea:#135861; --sun:#E8B456; --frame:#22343B;
  --o-media:#CB8092; --o-tonar:#D4AE5E; --o-partner:#93A4C0; --o-vuxen:#98A97A; --o-foraldrar:#C98F64;
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:0 64px}
.wrap{max-width:860px; margin:0 auto}
.col{max-width:680px}
h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0; line-height:1.15}
h1{font-size:clamp(30px, 5.4vw, 46px)}
h2{font-size:clamp(23px, 3.6vw, 30px)}
h3{font-size:20px}
p{margin:0}
.lead{font-size:18px; color:var(--muted); max-width:62ch}
.eyebrow{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.stack{display:flex; flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g40{gap:40px}

/* topbar */
.top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-block:18px; border-bottom:1px solid var(--line); margin-bottom:36px}
.brand{font-family:var(--f-display); font-size:21px; display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer}
.brand-mark{width:22px; height:22px; border-radius:3px; background:linear-gradient(var(--curtain) 0 45%, var(--sky) 45% 70%, var(--sea) 70%)}
nav{display:flex; flex-wrap:nowrap; gap:4px; overflow-x:auto; max-width:100%; min-width:0; scrollbar-width:thin; padding-bottom:2px}
.nav-btn{background:none; border:1px solid transparent; border-radius:999px; padding:6px 13px; font-size:14px; cursor:pointer; color:var(--muted)}
.nav-btn:hover{color:var(--ink)}
.nav-btn[aria-current="page"]{border-color:var(--line); background:var(--surface); color:var(--ink)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:6px; padding:10px 16px; font-weight:600; font-size:15px; cursor:pointer; border:1px solid var(--line); background:var(--surface)}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.link{background:none; border:0; padding:0; color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; font-size:14px}
.link:hover{color:var(--ink)}
.tag{display:inline-block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding:2px 7px; border-radius:3px; background:var(--soft); color:var(--muted)}

/* ---------- Hotellrummet ---------- */
.window{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; padding:10px; background:var(--frame); border-radius:6px; height:min(360px, 62vw); min-height:250px}
.pane{position:relative; overflow:hidden; border-radius:3px; border:0; padding:0; cursor:pointer; text-align:left;
  background:
    radial-gradient(circle at 70% 46%, var(--sun) 0 7%, transparent 7.5%),
    linear-gradient(var(--sky) 0 52%, var(--sea) 52% 100%)}
.pane:disabled{cursor:not-allowed}
.blind{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:12px 4px 10px;
  color:var(--curtain-ink); background:repeating-linear-gradient(180deg, var(--curtain) 0 13px, var(--curtain-2) 13px 15px);
  transition:transform 1.1s cubic-bezier(.6,.05,.25,1)}
.blind::after{content:""; position:absolute; left:50%; bottom:-14px; width:2px; height:14px; background:var(--curtain-2)}
.pane-num{font-family:var(--f-mono); font-size:13px; opacity:.8}
.pane-title{writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-display); font-size:clamp(15px, 2.4vw, 21px); line-height:1.1; white-space:nowrap}
.pane-state{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; opacity:.85; text-align:center}
.pane:not(:disabled):hover .blind{transform:translateY(calc(var(--lift, 0) * -1% - 4%))}
.blind{transform:translateY(calc(var(--lift, 0) * -1%))}
.pane-legend{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; padding:0 10px; margin-top:10px}
.pane-legend div{font-size:12px; color:var(--muted); text-align:center; line-height:1.3}
.room-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:10px; min-width:0}
.big{font-family:var(--f-mono); font-size:34px; line-height:1; font-variant-numeric:tabular-nums}

/* ---------- Ankomst ---------- */
.controls{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:13px; font-weight:600; color:var(--muted)}
.field input[type=number]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); font-family:var(--f-mono)}
.field input[type=range]{width:100%; accent-color:var(--accent)}
.field output{font-family:var(--f-mono); font-size:15px}
.stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.stat{background:var(--surface); padding:18px 16px; display:flex; flex-direction:column; gap:6px; min-width:0}
.stat .num{font-family:var(--f-mono); font-size:clamp(26px, 5vw, 40px); line-height:1; font-variant-numeric:tabular-nums}
.stat .lbl{font-size:13px; color:var(--muted)}
.stat.warn .num{color:var(--o-media)}
@media (max-width:520px){ .stats{grid-template-columns:1fr} }
.years{display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:4px; max-width:520px}
.yr{aspect-ratio:1; border-radius:2px; position:relative; overflow:hidden; background:var(--line)}
.yr.left{background:var(--sea)}
.yr.left::after{content:""; position:absolute; left:0; right:0; bottom:0; height:var(--screen, 0%); background:var(--curtain)}
.yr.now{outline:2px solid var(--sun); outline-offset:1px}
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.sw{width:12px; height:12px; border-radius:2px; display:inline-block; flex:none}
.verdict{font-family:var(--f-display); font-size:clamp(20px, 3.2vw, 26px); line-height:1.3; max-width:30ch; text-wrap:balance}
.letter{border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:20px; display:flex; flex-direction:column; gap:14px}
.letter textarea{width:100%; min-height:120px; resize:vertical; border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:12px; line-height:1.5}
.sealed{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.envelope{width:84px; height:56px; flex:none; border-radius:4px; background:var(--soft); border:1px solid var(--line); position:relative; overflow:hidden}
.envelope::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom right, transparent 49.5%, var(--line) 50%, transparent 51%), linear-gradient(to bottom left, transparent 49.5%, var(--line) 50%, transparent 51%); background-size:100% 70%; background-repeat:no-repeat}
.envelope::after{content:""; position:absolute; left:50%; top:48%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--o-media)}
.note{font-size:14px; color:var(--muted)}

/* ---------- Fasadarkeologen ---------- */
.dig{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:28px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px}
@media (max-width:640px){ .dig{grid-template-columns:1fr} }
.strata{display:flex; flex-direction:column; border-radius:4px; overflow:hidden; min-height:220px; background:var(--soft)}
.stratum{min-height:10px; transition:flex-grow .6s ease}
.ground{height:10px; background:repeating-linear-gradient(90deg, var(--o-vuxen) 0 3px, transparent 3px 7px); opacity:.7}
.strata-key{display:flex; flex-direction:column; gap:7px; font-size:14px}
.strata-key div{display:grid; grid-template-columns:12px 1fr auto; gap:9px; align-items:center}
.strata-key .c{font-family:var(--f-mono); color:var(--muted)}
.headline-num{font-family:var(--f-display); font-size:clamp(28px, 4.6vw, 38px); line-height:1.1}
.add{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px}
@media (max-width:560px){ .add{grid-template-columns:1fr 1fr} .add input{grid-column:1 / -1} }
.add input,.add select{padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); min-width:0}
.finds{display:flex; flex-direction:column; gap:10px; list-style:none; padding:0; margin:0}
.find{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; border-left:5px solid var(--line)}
.find-head{display:flex; gap:10px; align-items:flex-start; justify-content:space-between}
.find-text{font-size:16px; font-weight:500; min-width:0; overflow-wrap:anywhere}
.find-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.x{background:none; border:0; color:var(--muted); cursor:pointer; font-size:20px; line-height:1; padding:2px 6px; border-radius:4px}
.x:hover{color:var(--ink); background:var(--soft)}
.ask{font-size:13px; color:var(--muted); font-weight:600}
.origins{display:flex; flex-wrap:wrap; gap:6px}
.ob{border:1px solid var(--line); background:transparent; border-radius:999px; padding:4px 11px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.ob .sw{width:9px; height:9px; border-radius:50%}
.ob:hover{border-color:var(--muted)}
.ob[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.probe{background:var(--soft); border-radius:6px; padding:12px 14px; display:flex; flex-direction:column; gap:10px}
.probe q{font-family:var(--f-display); font-size:18px; quotes:"\201D" "\201D"}
.probe .row{display:flex; gap:8px; flex-wrap:wrap}
.probe .btn{padding:6px 12px; font-size:14px}
.checks{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:8px}
.check{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); cursor:pointer; font-size:15px}
.check input{margin-top:4px; accent-color:var(--accent); flex:none}
.commit{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:14px}
.commit select{padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); max-width:100%}
.days{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; max-width:360px}
.day{aspect-ratio:1; border-radius:4px; border:1px solid var(--line); display:grid; place-items:center; font-family:var(--f-mono); font-size:13px; color:var(--muted)}
.day.done{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.day.today{outline:2px solid var(--sun); outline-offset:1px}
hr{border:0; border-top:1px solid var(--line); margin:0}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:6px; font-size:14px; opacity:0; pointer-events:none; transition:opacity .3s}
.toast.show{opacity:1}
/* ---------- Ärlighetskorten ---------- */
.rules{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px 20px; display:flex; flex-direction:column; gap:10px}
.rules ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
.players{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px}
.player{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:10px; min-width:0}
.player input[type=text]{padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); font-size:17px; min-width:0}
.field-l{font-size:13px; font-weight:600; color:var(--muted)}
.tick{display:flex; gap:9px; align-items:flex-start; font-size:15px; cursor:pointer}
.tick input{margin-top:4px; accent-color:var(--accent); flex:none}
.levels{border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; min-width:0}
.levels legend{margin-bottom:10px; padding:0}
.lvl{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; position:relative; min-width:0}
.lvl input{position:absolute; opacity:0; pointer-events:none}
.lvl-name{font-family:var(--f-display); font-size:20px}
.lvl:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.lvl:has(input:disabled){opacity:.55; cursor:not-allowed}
.lvl:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.start-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.play-top{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline}
.qcard{background:repeating-linear-gradient(180deg, var(--curtain) 0 13px, var(--curtain-2) 13px 15px); color:var(--curtain-ink); border-radius:10px;
  padding:clamp(22px, 5vw, 40px); display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:290px; animation:deal .45s ease-out}
@keyframes deal{from{transform:translateY(10px) rotate(-.6deg)}}
.qto{font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; opacity:.85}
.qtext{font-family:var(--f-display); font-size:clamp(26px, 4.6vw, 40px); line-height:1.2; text-wrap:balance; max-width:22ch}
.qfoot{font-size:14px; opacity:.8}
.qactions{display:flex; flex-wrap:wrap; gap:10px}
.stopbtn{width:100%; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 16px; border-radius:8px; border:2px solid var(--o-media);
  background:transparent; color:var(--o-media); font-family:var(--f-display); font-size:26px; cursor:pointer}
.stopbtn span{font-family:var(--f-body); font-size:13px; color:var(--muted)}
.stopbtn:hover{background:var(--soft)}
.endcard{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px}
.row{display:flex; gap:10px; flex-wrap:wrap}
/* ---------- Modstrappan ---------- */
.stairs{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; align-items:end; height:220px}
.stair{height:var(--h); border:1px solid transparent; border-radius:4px 4px 0 0; background:var(--soft); color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; font-family:var(--f-mono); font-size:15px; min-width:0}
.stair small{font-family:var(--f-body); font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.stair.done{background:var(--accent); color:var(--accent-ink)}
.stair.current{background:var(--curtain); color:var(--curtain-ink)}
.stair:disabled{cursor:not-allowed; background:repeating-linear-gradient(135deg, var(--soft) 0 6px, transparent 6px 12px); border-color:var(--line); border-style:dashed}
.stair[aria-pressed="true"]{outline:2px solid var(--sun); outline-offset:2px}
.mod-grid{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:16px; align-items:start}
@media (max-width:680px){ .mod-grid{grid-template-columns:1fr} }
.mcard{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px; display:flex; flex-direction:column; gap:14px; min-width:0}
.mchallenge{font-family:var(--f-display); font-size:clamp(22px, 3.4vw, 28px); line-height:1.25; text-wrap:balance}
.fear{display:flex; flex-direction:column; gap:6px}
.fear label{font-size:14px; font-weight:600}
.fear-row{display:flex; gap:14px; align-items:center}
.fear-row input{flex:1; min-width:0; accent-color:var(--o-media)}
.fear-row output{font-family:var(--f-mono); font-size:26px; min-width:2ch; text-align:right}
.fear .scale{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding-right:44px}
.mcard textarea{width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:10px 12px; line-height:1.5}
.pair{display:flex; gap:24px; flex-wrap:wrap}
.pair div{display:flex; flex-direction:column; gap:2px}
.pair .num{font-family:var(--f-mono); font-size:30px; line-height:1}
.quote{border-left:3px solid var(--line); padding-left:12px; color:var(--muted); font-style:italic; overflow-wrap:anywhere}
.gap-rows{display:flex; flex-direction:column; gap:10px}
.gap-row{display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:center; font-size:13px}
.track{position:relative; height:18px; margin:0 7px}
.track::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px dashed var(--line)}
.track .ln{position:absolute; top:calc(50% - 1.5px); height:3px; background:var(--line)}
.track .dot{position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%}
.dot.before{background:var(--o-media)}
.dot.after{background:var(--accent)}
.gap-scale{display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; font-size:11px; color:var(--muted)}
.gap-scale div{display:flex; justify-content:space-between; font-family:var(--f-mono)}
/* ---------- Plastpåsestunder ---------- */
.pres-sum{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:28px; align-items:end; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px}
@media (max-width:640px){ .pres-sum{grid-template-columns:1fr} }
.strip,.strip-lab{display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:4px}
.strip{height:96px; align-items:end; border-bottom:1px solid var(--line)}
.sday{display:flex; flex-direction:column-reverse; align-items:center; gap:4px; height:100%; padding-bottom:4px}
.sday i{width:min(12px, 80%); aspect-ratio:1; border-radius:50%; background:var(--accent)}
.sday.today{background:var(--soft); border-radius:3px 3px 0 0}
.strip-lab span{text-align:center; font-size:11px; color:var(--muted); font-family:var(--f-mono)}
.ex-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px}
.ex{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:8px; min-width:0}
.ex h3{font-size:21px}
.ex .meta{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.ex p{font-size:14px; color:var(--muted); flex:1}
.player{background:repeating-linear-gradient(180deg, var(--curtain) 0 13px, var(--curtain-2) 13px 15px); color:var(--curtain-ink); border-radius:10px; padding:clamp(20px, 4vw, 32px);
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:28px; align-items:center}
@media (max-width:560px){ .player{grid-template-columns:1fr; justify-items:center; text-align:center} }
.ring{position:relative; width:168px; height:168px; flex:none}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring .trk{stroke:currentColor; opacity:.2}
.ring .prg{stroke:var(--sun); transition:stroke-dashoffset .25s linear}
.ring .t{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--f-mono); font-size:30px}
.pl-body{display:flex; flex-direction:column; gap:14px; min-width:0}
.pl-step{font-family:var(--f-display); font-size:clamp(21px, 3.2vw, 27px); line-height:1.3; text-wrap:balance}
.pl-meta{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; opacity:.85}
.tapbtn{width:118px; height:118px; border-radius:50%; border:0; background:var(--sun); color:var(--curtain); font-family:var(--f-display); font-size:22px; cursor:pointer; flex:none}
.tapbtn:active{transform:scale(.96)}
.tap-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
@media (max-width:560px){ .tap-row,.player .row{justify-content:center} }
.clar{display:flex; gap:6px; flex-wrap:wrap}
.clar button{width:40px; height:40px; border-radius:6px; border:1px solid var(--line); background:transparent; font-family:var(--f-mono); cursor:pointer}
.clar button[aria-checked="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.bars{display:inline-flex; gap:2px; vertical-align:middle}
.bars i{width:5px; height:12px; border-radius:1px; background:var(--line)}
.bars i.on{background:var(--accent)}
.times{display:flex; gap:10px; flex-wrap:wrap}
.time{font-family:var(--f-mono); font-size:26px; padding:8px 14px; border:1px solid var(--line); border-radius:6px; background:var(--bg)}
/* ---------- Harmoni eller må bra ---------- */
.hbars{display:flex; gap:10px; align-items:flex-end; min-height:150px}
.hcol{flex:1; max-width:60px; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0}
.hbar{width:100%; height:110px; display:flex; flex-direction:column; border-radius:3px; overflow:hidden; background:var(--soft)}
.hbar .out{background:var(--o-tonar)}
.hbar .in{background:var(--accent)}
.hcol .mono{font-size:11px; color:var(--muted); white-space:nowrap}
.hcol.ex .hbar{opacity:.55}
.moment{display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:1px solid var(--line)}
.moment input[type=text]{padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); min-width:0}
.moment textarea{width:100%; min-height:80px; resize:vertical; border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:10px 12px; line-height:1.5}
.cgroup{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.cgroup .glab{font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--muted); width:64px; flex:none}
.qsmall{font-family:var(--f-display); font-size:20px; line-height:1.3}
.minibar{display:inline-flex; height:8px; width:110px; border-radius:4px; overflow:hidden; background:var(--soft); vertical-align:middle}
.minibar i:first-child{background:var(--accent)}
.minibar i:last-child{background:var(--o-tonar)}
.opened{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:clamp(20px, 4vw, 32px); display:flex; flex-direction:column; gap:14px}
.opened textarea{width:100%; min-height:140px; resize:vertical; border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:12px; line-height:1.55}
.young{margin:0; font-family:var(--f-display); font-size:clamp(22px, 3.4vw, 30px); line-height:1.35; padding:20px 24px; background:var(--soft); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere}
/* ---------- Sparande, sällskap, balkong ---------- */
.nav-btn{white-space:nowrap; flex:none}
a.btn, a.btn:visited{text-decoration:none; color:var(--ink)}
.vh{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.sync{display:flex; gap:8px; align-items:baseline; font-size:15px}
.sync i{width:8px; height:8px; border-radius:50%; background:var(--o-tonar); flex:none}
.sync.ok i{background:var(--accent)}
.exp, .find textarea{width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:6px; background:var(--bg); padding:10px 12px; line-height:1.5}
.exp{font-family:var(--f-mono); font-size:12px}
.rem-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.rem-row label{flex-basis:100%}
.mcard input[type=text], .mcard input[type=date], .card input[type=time], .card select, .mcard select{padding:9px 12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); min-width:0; max-width:100%}
.code{font-family:var(--f-mono); font-size:22px; letter-spacing:.12em}
.member{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.member img{width:32px; height:32px; border-radius:50%; background:var(--soft)}
.mname{font-weight:600}
.pdots{display:flex; gap:3px}
.pdots i{width:12px; height:24px; border-radius:2px; background:var(--soft); position:relative; overflow:hidden}
.pdots b{position:absolute; left:0; right:0; bottom:0; background:var(--accent)}
@media (max-width:600px){
  .top{flex-direction:column; align-items:stretch; gap:10px}
  .window{height:300px}
  .pane-title{font-size:14px}
  .pane-legend div{font-size:10px}
}
/* ---------- Guidning, exempel, tillgänglighet ---------- */
.skip{position:absolute; left:16px; top:-60px; z-index:20; background:var(--ink); color:var(--bg); padding:8px 12px; border-radius:6px; text-decoration:none}
.skip:focus{top:calc(8px + env(safe-area-inset-top, 0px))}
main:focus{outline:none}
h1[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.nextcard{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:16px 24px; align-items:center; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sun); border-radius:8px; padding:18px 20px}
@media (max-width:560px){ .nextcard{grid-template-columns:1fr} }
.nextcard h2{font-size:clamp(20px, 3vw, 25px)}
.nextcard ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; color:var(--muted)}
.exblock{display:flex; flex-direction:column; gap:10px; padding:14px; border:1px dashed var(--line); border-radius:8px}
.exblock .find{opacity:.8}
.danger{color:var(--o-media)}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }