/* Feltmap — white, quiet, the model is the only colour on the page. */
:root{
  --paper:#ffffff;
  --ink:#3a3d43;
  --text:#5a5e66;
  --soft:#858994;
  --hair:#e7e8eb;
  --wash:#f5f6f7;
  --focus:#2f5bd3;
  --joy:#ceba8d; --love:#ce8d9d; --fear:#a68dcc; --sadness:#8eaed2;
  --anger:#d0907f; --surprise:#8dceca; --disgust:#b3cb90; --shame:#a6abb5;
  --f:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--paper)}
body{color:var(--text); font-family:var(--f); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1200px; margin:0 auto; padding:20px max(20px,env(safe-area-inset-right)) 72px max(20px,env(safe-area-inset-left))}

/* header */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:18px; flex-wrap:wrap}
.brand{color:var(--ink); font-weight:700; font-size:22px; letter-spacing:-0.03em; text-decoration:none; display:flex; align-items:center; gap:9px}
.brand svg{display:block}
.nav-links{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.nav-links a{text-decoration:none; padding:8px 12px; border-radius:999px; font-size:15px}
.nav-links a:hover{background:var(--wash)}

/* type */
h1,h2,h3{color:var(--ink); font-weight:700; letter-spacing:-0.025em; margin:0}
h2{font-size:30px; line-height:1.1}
h3{font-size:19px}
.lede{color:var(--soft); font-size:18px; max-width:46ch; margin:10px 0 0}
.small{font-size:13px; color:var(--soft)}
.error{color:#c43c3c}

/* buttons */
.btn{font:inherit; font-size:15px; font-weight:500; padding:10px 18px; border-radius:999px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; line-height:1.2}
.btn:hover{border-color:#cfd1d6}
.btn.primary{background:var(--ink); border-color:var(--ink); color:#fff}
.btn.primary:hover{background:#2a2c30}
.btn.quiet{border-color:transparent}
.btn.quiet:hover{background:var(--wash)}
.btn.danger{color:#b83232}
.btn:disabled{opacity:.4; cursor:default}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.notice{padding:14px 18px; border-radius:14px; background:var(--wash)}

/* ---------- home ---------- */
.hero{position:relative; margin-top:8px}
.wordmark{font-size:clamp(48px,8.4vw,112px); line-height:.92; letter-spacing:-0.055em; font-weight:700; margin:0; max-width:11ch}
.hero-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; margin-top:18px}
@media (max-width:760px){ .hero-row{grid-template-columns:minmax(0,1fr)} }
.hero-row .cta{display:flex; gap:8px; flex-wrap:wrap}
.hero-stage{height:min(62vh,560px); margin:28px -20px 0; position:relative}
@media (min-width:1240px){ .hero-stage{margin:28px 0 0} }
.read{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:22px 0 0; border-top:1px solid var(--hair); margin-top:8px}
@media (max-width:860px){ .read{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .read{grid-template-columns:minmax(0,1fr)} }
.read b{display:block; font-size:16px}
.read span{color:var(--soft); font-size:14px}
.read .glyph{height:34px; display:flex; align-items:center; margin-bottom:6px}

.gallery{margin-top:72px}
.gal-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px 20px}
.card{text-decoration:none; color:inherit; display:block}
.card .thumb{aspect-ratio:1/1; border-radius:18px; background:var(--wash); display:grid; place-items:center; overflow:hidden; transition:background .2s}
.card:hover .thumb{background:#eef0f2}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode:multiply}
.card .meta{padding:10px 2px 0; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.card .name{font-weight:600}
.card .you{font-size:12px; font-weight:600; background:var(--ink); color:#fff; border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:2px}
.spinner{width:20px; height:20px; border-radius:50%; border:2px solid rgba(0,0,0,.08); border-top-color:rgba(0,0,0,.5); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:48px 20px; text-align:center; color:var(--soft)}

/* ---------- viewer ---------- */
.map-stage{position:relative; overflow:hidden; background:var(--paper); user-select:none; -webkit-user-select:none}
.map-canvas{display:block; position:absolute; inset:0}
.map-labels{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.map-label{position:absolute; left:0; top:0; white-space:nowrap; font-family:"Manrope",var(--f); text-transform:lowercase; letter-spacing:0.01em; will-change:transform;
  text-shadow:0 0 3px rgba(255,255,255,.95),0 0 6px rgba(255,255,255,.8)}
.lbl-center{font-size:15px; color:#3a3d43; font-weight:600}
.lbl-emotion{font-size:15px; color:#3a3d43; font-weight:600}
.lbl-feeling{font-size:11.5px; color:#8a8e98; font-weight:500; pointer-events:auto; cursor:help}
.stage-tools{position:absolute; right:12px; bottom:12px; display:flex; gap:6px; z-index:5}
.stage-tools .btn{font-size:13px; padding:7px 12px; background:rgba(255,255,255,.9); backdrop-filter:blur(6px)}
.stage-hint{position:absolute; left:14px; bottom:14px; font-size:13px; color:var(--soft); z-index:5; pointer-events:none}

.map-page{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start}
@media (max-width:920px){ .map-page{grid-template-columns:minmax(0,1fr)} }
.map-page .map-stage{height:min(78vh,780px); border:1px solid var(--hair); border-radius:22px}
@media (max-width:920px){ .map-page .map-stage{height:64vh} }
.side{display:grid; gap:26px; padding-top:6px}
.side .who{font-size:clamp(34px,4vw,44px); line-height:1; letter-spacing:-0.04em; font-weight:700}
.side .sub{color:var(--soft); margin-top:8px}
.side section + section{border-top:1px solid var(--hair); padding-top:22px}
.bars{display:grid; gap:7px; margin-top:12px}
.bar{display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; align-items:center; font-size:14px}
.bar .track{height:6px; background:var(--wash); border-radius:3px; overflow:hidden}
.bar .fill{height:100%; background:var(--c); border-radius:3px; transition:width .25s}
.legend{display:grid; gap:8px; margin:12px 0 0; padding:0; list-style:none; font-size:14px; color:var(--soft)}
.legend b{color:var(--ink); font-weight:600}
.pager{display:flex; gap:8px; justify-content:space-between}

/* ---------- test ---------- */
.test-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin:8px 0 28px}
.test-head h1{font-size:clamp(40px,6vw,64px); line-height:.95; letter-spacing:-0.05em}
.frame{display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:var(--soft); font-size:14px}
.seg{display:inline-flex; background:var(--wash); border-radius:999px; padding:3px}
.seg button{font:inherit; font-size:14px; border:0; background:transparent; color:var(--ink); padding:6px 14px; cursor:pointer; border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--paper); box-shadow:0 0 0 1px var(--hair); font-weight:600}
.layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:40px; align-items:start}
@media (max-width:920px){ .layout{grid-template-columns:minmax(0,1fr)} }
.tabs{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px}
.tab{font:inherit; font-size:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:0; border-radius:999px; background:transparent; color:var(--soft); cursor:pointer}
.tab:hover{background:var(--wash)}
.tab .dot{width:9px; height:9px; border-radius:50%; background:var(--c)}
.tab .n{font-size:12px; color:var(--soft); font-variant-numeric:tabular-nums}
.tab[aria-selected="true"]{background:var(--wash); color:var(--ink); font-weight:600}
.tab.done .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.sec-head{padding:26px 0 8px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--hair)}
.sec-head h2{font-size:34px; display:flex; align-items:center; gap:12px}
.sec-head h2 i{width:16px; height:16px; border-radius:50%; background:var(--c); display:block}
.sec-head p{margin:0; color:var(--soft); font-size:15px}
.q{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; padding:18px 0; border-bottom:1px solid var(--hair); align-items:center}
.q .name{font-weight:600; font-size:17px}
.q .def{color:var(--soft); font-size:14px}
.q .controls{display:grid; gap:8px; justify-items:end}
@media (max-width:640px){ .q{grid-template-columns:minmax(0,1fr)} .q .controls{justify-items:start} }
.row{display:flex; align-items:center; gap:10px}
.row .rl{width:60px; text-align:right; font-size:13px; color:var(--soft)}
@media (max-width:640px){ .row{flex-wrap:wrap} .row .rl{text-align:left; width:auto; flex-basis:100%} }
.chips{display:flex; gap:4px; flex-wrap:wrap}
.chip{font:inherit; font-size:14px; min-width:38px; padding:7px 10px; border-radius:999px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--c)}
.chip[aria-pressed="true"]{background:var(--c); border-color:var(--c); color:var(--ink); font-weight:600}
.chip.none[aria-pressed="true"]{background:var(--ink); border-color:var(--ink)}
.chip:disabled{opacity:.3; cursor:not-allowed}
.navrow{display:flex; justify-content:space-between; gap:10px; padding:22px 0 0}
.out{position:sticky; top:20px; display:grid; gap:18px}
@media (max-width:920px){ .out{position:static} }
.preview-stage{height:300px; border-radius:20px; background:var(--wash)}
.preview-stage .map-labels{display:none}
.progress{height:4px; background:var(--wash); border-radius:2px; overflow:hidden; margin:10px 0 6px}
.progress i{display:block; height:100%; background:var(--ink); width:0; transition:width .25s}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* nickname picker */
.nick-options{display:grid; gap:6px}
.nick-opt{font:inherit; font-size:16px; text-align:left; padding:10px 14px; border-radius:12px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:10px}
.nick-opt::before{content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid #c4c7cc; flex:none; box-sizing:border-box}
.nick-opt[aria-checked="true"]{border-color:var(--ink)}
.nick-opt[aria-checked="true"]::before{border:4px solid var(--ink)}
.linkbtn{font:inherit; font-size:13px; color:var(--soft); background:none; border:0; padding:8px 0 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}