/* Mönstermakeriet – stil
   Layout: verktygspanel till vänster, zoombart mönsterblad (ljust papper i båda teman) till höger. */

/* Typsnitt (latin, från Google Fonts) ligger i typsnitt/ så att appen fungerar offline. Jost är variabelt. */
@font-face{font-family:'Jost';font-weight:400 600;font-display:swap;src:url(../typsnitt/jost.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../typsnitt/atkinson-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../typsnitt/atkinson-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(../typsnitt/plexmono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(../typsnitt/plexmono-500.woff2) format('woff2')}

/* Grundinställningar */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}
/* Språkpar: det språk som inte är valt döljs (se js/sprak.js) */
:root[lang="en"] [data-lang="sv"],:root:not([lang="en"]) [data-lang="en"]{display:none!important}

:root{
  /* Färgerna kommer från loggan: mossgrönt på krämvitt garn. */
  --bg:#F4F1EA; --panel:#FBF9F4; --ink:#252D23; --muted:#5E6859; --line:#DAD3C4;
  --accent:#3A4A37; --accent-ink:#FBF9F4; --well:#EAE4D6; --badge:#EDE6D8; --warn:#83510A; --warn-bg:#F6EBD3;
  --f-display:'Jost', 'Segoe UI', system-ui, sans-serif;
  --f-body:'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151913; --panel:#1D231B; --ink:#ECE7DC; --muted:#A2AA9B; --line:#333B30;
  --accent:#B8C6A6; --accent-ink:#172015; --well:#0E110D; --badge:#252C22; --warn:#E9B86A; --warn-bg:#2D2515; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151913; --panel:#1D231B; --ink:#ECE7DC; --muted:#A2AA9B; --line:#333B30;
  --accent:#B8C6A6; --accent-ink:#172015; --well:#0E110D; --badge:#252C22; --warn:#E9B86A; --warn-bg:#2D2515; color-scheme:dark}

html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 24px;max-width:1500px;margin:0 auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}
.top{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.mark{width:60px;height:60px;padding:8px;box-sizing:border-box;border-radius:50%;background:var(--badge);color:var(--accent);flex:none}
.top h1{font:400 22px/1.1 var(--f-display);margin:0;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.top p{margin:0;color:var(--muted)}
a.brand{text-decoration:none}
.topnav{display:flex;gap:4px;margin-left:auto}
.topnav a{color:var(--muted);text-decoration:none;font-weight:700;font-size:14px;padding:6px 10px;border-radius:6px}
.topnav a:hover{color:var(--accent);background:var(--badge)}
.topnav a:focus-visible,a.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Väljare för tema och språk, används på alla sidor */
.prefs{display:flex;gap:8px;flex:none}
.switch{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none}
.switch label{position:relative;cursor:pointer}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.switch input+span{display:block;padding:6px 11px;font:700 13px/1.2 var(--f-body);color:var(--muted);border-left:1px solid var(--line)}
.switch label:first-child input+span{border-left:0}
.switch input:checked+span{background:var(--accent);color:var(--accent-ink)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px}
.layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.layout{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:16px;min-width:0}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
select,input[type=number]{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%;box-sizing:border-box}
select:focus-visible,input:focus-visible,button:focus-visible,.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:block;text-align:center;padding:9px 4px;font-weight:700;font-size:14px;border-left:1px solid var(--line)}
.seg label:first-child span{border-left:0}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:13px;color:var(--muted);margin:0}
.gauge{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.viewer{display:flex;flex-direction:column;gap:10px;min-width:0}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar button{font:700 15px var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:40px;height:38px;padding:0 12px;cursor:pointer}
.toolbar button:hover{border-color:var(--accent)}
.toolbar .primary:hover{filter:brightness(1.12)}
.toolbar button:disabled{opacity:.45;cursor:default}
#progLbl{font-weight:700;min-width:150px}
#zoomLbl{font-family:var(--f-mono);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.toolbar .hint{margin-left:auto}
.toolbar .primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
#viewport{background:var(--well);border-radius:14px;height:calc(100vh - 170px);min-height:440px;overflow:auto;touch-action:none;cursor:grab;position:relative}
#viewport.drag{cursor:grabbing}
#holder [data-row],#holder [data-step]{cursor:pointer}
@media (max-width:860px){#viewport{height:68vh;min-height:360px}}
#holder{padding:16px;box-sizing:content-box}
#holder svg{display:block;width:100%;height:auto;box-shadow:0 1px 3px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.10);border-radius:2px}
#notes{display:flex;flex-direction:column;gap:6px}
.note{background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:8px 12px;font-size:14px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}