/* ===== Gemensamt: ikoner i menyn ===== */
nav.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.74rem}
nav.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){nav.tabs button{flex-direction:row;gap:12px;font-size:1rem}}

/* ===== KONSOL: N64/PS1, målade färger, hårda kanter ===== */
html[data-look=console]{--bg:#0a0b0d;--panel:#14161a;--panel2:#1f2227;--line:#030304;--fg:#fff7e0;--muted:#9aa2ab;--gold:#ffd23f;--gold-ink:#2b1a00;--violet:#7fc4c9;--rose:#ff8fb1;--ok:#5de08a;--bad:#ff6a5e;--head:"Jersey 10",monospace;--body:"Jersey 10",monospace;--num:"Jersey 10",monospace;--r:4px}
html[data-look=console] input,html[data-look=console] textarea,html[data-look=console] button,html[data-look=console] .lbl,html[data-look=console] .pill,html[data-look=console] .tag,html[data-look=console] .flow span,html[data-look=console] .pipe small,html[data-look=console] nav.tabs{font-family:"Jersey 10",monospace}
html[data-look=console] body{background:linear-gradient(180deg,#030304 0%,#0a0b0d 55%,#0f1a1c 100%) fixed;font-size:21px;line-height:1.35}
html[data-look=console] h1{color:var(--gold);text-shadow:3px 3px 0 #e2453c,6px 6px 0 #030304;font-weight:400;font-size:3rem;letter-spacing:.02em}
html[data-look=console] h2{color:#fff;text-shadow:2px 2px 0 #030304;font-weight:400;font-size:1.8rem}
html[data-look=console] button{font-size:1rem;font-weight:400}
html[data-look=console] .lbl,html[data-look=console] .pill,html[data-look=console] .tag{font-size:.9rem}
html[data-look=console] .big,html[data-look=console] .todo b,html[data-look=console] .pipe b{font-size:2.2rem}

html[data-look=console] .card,html[data-look=console] .panel,html[data-look=console] .stat,html[data-look=console] dialog{border:3px solid #434952;border-radius:var(--r);box-shadow:5px 5px 0 #030304,inset 0 2px 0 #ffffff14}
html[data-look=console] button{border:3px solid #434952;border-radius:var(--r);background:#2c3138;color:#fff;font-weight:700;box-shadow:3px 3px 0 #030304}
html[data-look=console] button:active{transform:translate(3px,3px);box-shadow:none}
html[data-look=console] button.gold{background:var(--gold);color:var(--gold-ink)}
html[data-look=console] button.ghost{background:none;box-shadow:none}
html[data-look=console] .todo{background:#101216;border:3px solid #434952;border-radius:var(--r)}
html[data-look=console] .todo b{color:var(--gold)}
html[data-look=console] .pipe div,html[data-look=console] .dot{background:#101216;border:3px solid #434952;border-radius:var(--r)}
html[data-look=console] .dot.on{background:var(--gold)}
html[data-look=console] .pill,html[data-look=console] .tag,html[data-look=console] .flow span,html[data-look=console] .seg button{border:2px solid #434952;border-radius:var(--r);background:#101216;color:#fff}
html[data-look=console] .flow .on,html[data-look=console] .seg button[aria-pressed=true]{background:var(--gold);color:var(--gold-ink)}
html[data-look=console] input,html[data-look=console] textarea{border:3px solid #434952;border-radius:var(--r);background:#030304}
html[data-look=console] nav.tabs{background:#030304;border-top:4px solid #030304}
html[data-look=console] nav.tabs button{background:none;border:0;box-shadow:none;color:#9aa2ab}
html[data-look=console] nav.tabs button[aria-current=page]{color:var(--gold);box-shadow:none;background:#1f2227}
html[data-look=console] .thumb{border:3px solid #434952;border-radius:var(--r)}
html[data-look=console] .spark path.l{stroke:var(--gold);stroke-linejoin:miter}
html[data-look=console] .lbl{color:#9aa2ab}

/* ===== Finlir ===== */
.brand{flex-wrap:wrap;gap:4px 12px;align-items:center}
.brand small{order:3;flex-basis:100%;margin-top:-4px}
html[data-look] nav.tabs button{background:none;border:0;box-shadow:none;border-radius:0}
html[data-look=console] nav.tabs button[aria-current=page]{background:#1f2227}
@media (min-width:900px){html[data-look] nav.tabs button{border-radius:10px}}

/* Konsol: Jersey har låg höjd, så små texter behöver mer storlek */
html[data-look=console] .sub,html[data-look=console] small,html[data-look=console] .brand small,html[data-look=console] .post small,html[data-look=console] label,html[data-look=console] .err{font-size:1.1rem}
html[data-look=console] button{font-size:1.2rem}
html[data-look=console] .todo span,html[data-look=console] .val,html[data-look=console] .week,html[data-look=console] .dot{font-size:1.2rem}
html[data-look=console] .lbl,html[data-look=console] .pill,html[data-look=console] .tag,html[data-look=console] .flow span,html[data-look=console] .pipe small{font-size:1.05rem}
html[data-look=console] nav.tabs button{font-size:1.1rem}
html[data-look=console] input,html[data-look=console] textarea{font-size:1.2rem}
html[data-look=console] .thumb .cap{font-size:1rem}

/* Konsol: ingen fuskad fetstil, fonten har bara en vikt */
html[data-look=console],html[data-look=console] *{font-weight:400!important;font-synthesis:none}
html[data-look=console] h1{text-shadow:2px 2px 0 #e2453c,4px 4px 0 #030304}
html[data-look=console] h2{text-shadow:none}

/* ===== Hem: galleri, Studio: stora bilder, Kö: stora kort ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal{position:relative;padding:0;overflow:hidden;aspect-ratio:9/16;min-height:0;display:block;background:var(--panel2)}
.gal img,.gal video{width:100%;height:100%;object-fit:cover;display:block}
.gal span{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;text-align:left;font-size:.95rem;line-height:1.1;color:#fff;background:linear-gradient(#0000,#000d);overflow:hidden;max-height:60%}
.card.studio .thumbs{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.card.studio .thumb{box-shadow:0 6px 18px #0008}
html[data-look=console] .card.studio .thumb,html[data-look=console] .gal{border:3px solid #434952;border-radius:4px;box-shadow:4px 4px 0 #030304}
.qcard{flex-direction:column}
.qcard video{width:100%;max-width:360px;align-self:center}
.qinfo{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:900px){
 .gallery{grid-template-columns:repeat(6,1fr)}
 .qcard{flex-direction:row;gap:24px;align-items:flex-start}
 .qcard video{width:300px;flex:0 0 300px}
 .qinfo{flex:1}
}

/* ===== Kompakt lista och delar ===== */
.clist{display:flex;flex-direction:column;gap:8px}
.crow{display:flex;align-items:center;gap:12px;text-align:left;padding:8px 12px 8px 8px;min-height:64px;background:var(--panel);width:100%}
.cthumb{flex:0 0 44px;height:56px;border-radius:6px;background:var(--panel2);overflow:hidden;display:block}
.cthumb img{width:100%;height:100%;object-fit:cover;display:block}
.cmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cmain b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmain small{color:var(--muted)}
.cgo{color:var(--gold);font-size:1.6rem;line-height:1}
.back{align-self:flex-start;margin-top:12px;min-height:38px;padding:4px 12px}
.slides{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:14px}
.slides>*{min-width:0;margin:0}
.slide.ok{border-color:var(--ok)}
.slidetext{margin:0;font-size:1.05em;overflow-wrap:anywhere}
.sugg{display:flex;flex-direction:column;gap:6px;min-height:3em}
@media (min-width:900px){.slides{grid-template-columns:1fr 1fr}}
.plan{border-left:4px solid var(--gold);padding:8px 12px;background:var(--panel2);border-radius:0 var(--r) var(--r) 0;margin:0 0 12px}
.plan .lbl{color:var(--gold)}
.card .plan{margin:0}

/* Ihopfällda idérader */
.irow{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.irow.tip{border-color:var(--gold)}
.irow.open{border-color:var(--gold)}
.irowh{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;box-shadow:none;border-radius:0;padding:10px 12px;min-height:56px}
.irowh .cmain b{white-space:normal}
.irowh .cmain small{white-space:normal;overflow-wrap:anywhere}
.istar{flex:0 0 1.2em;color:var(--gold);font-size:1.2rem;text-align:center}
.tipline{color:var(--gold)!important}
.irow>.card{border:0;border-top:1px solid var(--line);border-radius:0;margin:0;box-shadow:none}
.irow>.tipbox{margin:10px 12px 0}
html[data-look] .irowh{background:none;border:0;box-shadow:none;align-items:flex-start;padding:10px 12px}
html[data-look] .irowh:active{transform:none}
.irowh .istar{margin-top:2px}.irowh .cgo{margin-top:2px}
.irowh .tipline{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html[data-look] .irow>.card{border:0;border-top:1px solid var(--line);box-shadow:none;border-radius:0}
.plan .val{white-space:pre-line}
.meter{height:14px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok)}
.meter i.hot{background:var(--bad)}
html[data-look=console] .meter{border-radius:2px;border:3px solid #434952;height:20px}
html[data-look=console] .meter i{border-radius:0}
.uses{display:flex;gap:6px;flex-wrap:wrap}
.uses span{font-size:.8rem;border:1px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--muted)}
html[data-look=console] .uses span{font-size:1.05rem;border-radius:2px;border-width:2px}
select{width:100%;min-height:44px;padding:8px 10px;background:#05060a;color:var(--fg);border:3px solid #434952;border-radius:var(--r);font-family:inherit;font-size:1.2rem}
select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== Steg-flöde ===== */
.steps{display:flex;gap:6px;margin:0 0 14px;overflow-x:auto;padding-bottom:4px}
.steps button{flex:1 0 auto;display:flex;align-items:center;gap:6px;min-height:42px;padding:6px 12px;white-space:nowrap}
.steps button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--panel2);font-size:.85rem}
.steps button.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.steps button.done span{background:var(--ok);color:#06140a}
.steps button:disabled{opacity:.4;cursor:not-allowed}
html[data-look=console] .steps button.on{background:var(--gold);color:var(--gold-ink)}
html[data-look=console] .steps button span{border-radius:2px}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.pick{display:flex;flex-direction:column;gap:6px}
.pick .thumb{width:100%}
.pick.on .thumb{outline:3px solid var(--gold);outline-offset:2px}
.vrow{display:flex;gap:10px;align-items:flex-start}
.thumb.mini{flex:0 0 56px;width:56px;aspect-ratio:9/16}

.namelink{background:none;border:0;border-bottom:2px dotted var(--gold);color:var(--gold);padding:0 2px;font:inherit;cursor:pointer;min-height:0}
.namelist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.namebtn{text-align:left;padding:10px 12px;overflow-wrap:anywhere}
@media (max-width:360px){.namelist{grid-template-columns:1fr}}

.namelink.tiny{border:0;font-size:.7em;opacity:.8;margin-left:4px}

.traits{display:flex;flex-direction:column;gap:8px}
.tname{margin:0;font-size:1.3em}
.trait{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-left:4px solid var(--line);background:var(--panel2)}
.trait.s{border-left-color:var(--ok)}
.trait.w{border-left-color:var(--bad)}
.tlabel{flex:0 0 auto;min-width:5.5em;font-size:.75em;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.trait.s .tlabel{color:var(--ok)}
.trait.w .tlabel{color:var(--bad)}
.tval{flex:1;min-width:0;overflow-wrap:anywhere}

/* Full screen viewer */
dialog.viewer,html[data-look=console] dialog.viewer{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#000;color:#fff;overflow:hidden}
dialog.viewer[open]{display:flex;flex-direction:column}
.vstage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.vstage img,.vstage video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.vbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:#000c}
.vclose{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:12px;z-index:2;min-width:48px;min-height:48px;background:#000a;color:#fff;border:0;font-size:1.3rem}
.vnav{position:absolute;top:45%;z-index:2;min-width:44px;min-height:72px;background:#000a;color:#fff;border:0;font-size:2.2rem;padding:0 10px}
.vnav.l{left:4px}.vnav.r{right:4px}
.thumb .full{position:absolute;top:4px;left:4px;min-height:32px;padding:2px 9px;background:#000a;color:#fff;border:0;z-index:1}
.thumb img{cursor:zoom-in}
.vbar{flex-wrap:wrap}
.vbar .err{width:100%}

.fold{padding:0}
.foldsum{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;list-style:none;min-width:0}
.foldsum::-webkit-details-marker{display:none}
.foldimg{width:38px;height:56px;object-fit:cover;border-radius:4px;flex:none}
.foldtxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85em}
.foldbody{display:flex;flex-direction:column;gap:10px;padding:0 12px 12px}

.jobbar{height:10px;background:var(--panel2,#1f2227);border:2px solid var(--muted,#9aa2ab);border-radius:6px;overflow:hidden}
.jobfill{height:100%;background:var(--gold,#ffd23f);transition:width .6s ease}