/* =========================================================
   Skitse – udseende

   Samme retning som Billededokumentation: værktøj, ikke
   hjemmeside. Mørkeblå topbjælke, hvid arbejdsflade, hårfine
   streger, næsten rette hjørner og én accentfarve.

   Forskellen er at indholdet her er et lærred der skal fylde
   alt hvad der er tilbage, når topbjælke, værktøjslinje og
   bundlinje har taget deres. Derfor er hele appen et
   flex-gitter i fuld skærmhøjde – siden ruller ikke.
   ========================================================= */
:root{
  --ink:#15191d;
  --ink-2:#5b636b;
  --ink-3:#8c949c;

  --linje:#e3e6e9;
  --linje-2:#ccd1d6;

  --flade:#ffffff;
  --bund:#eef0f2;
  --tryk:#f2f4f6;

  --brand:#14304d;
  --brand-2:#1d4470;
  --brand-svag:#e8eef5;

  --groen:#186b46;
  --roed:#993027;

  --r:4px;
  --pad:14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  margin:0;background:var(--bund);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  user-select:none;
}
button,input,select,textarea{font-family:inherit;font-size:16px;color:inherit}

.ic{
  width:19px;height:19px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.app{height:100%;display:flex;flex-direction:column;min-height:0;background:var(--flade);position:relative}

/* ---------- Topbjælke ---------- */
.appbar{
  background:var(--brand);color:#fff;flex:0 0 auto;z-index:20;
  padding:calc(10px + env(safe-area-inset-top, 0px)) var(--pad) 10px;
}
.appbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.appbar-titel{min-width:0}
.appbar h1{
  margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar p{
  margin:2px 0 0;font-size:12.5px;color:rgba(255,255,255,.62);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar-knapper{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-right:-8px}
.ikonknap{
  background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;
  width:38px;height:38px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.ikonknap:active{background:rgba(255,255,255,.14);color:#fff}
.ikonknap[disabled]{color:rgba(255,255,255,.26)}

/* ---------- Lærred ---------- */
.laerred{
  flex:1;min-height:0;position:relative;background:#fff;overflow:hidden;
}
#tegning{
  position:absolute;inset:0;width:100%;height:100%;
  touch-action:none;display:block;
}
.hjaelp{
  position:absolute;left:10px;top:10px;right:64px;
  font-size:12px;line-height:1.35;color:var(--ink-3);pointer-events:none;
}
.maaler{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  background:rgba(20,48,77,.93);color:#fff;border-radius:var(--r);
  padding:5px 11px;font-size:13px;font-weight:600;letter-spacing:.01em;
  pointer-events:none;white-space:nowrap;
}
.zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.zoomknap{
  width:38px;height:38px;border:1px solid var(--linje-2);background:rgba(255,255,255,.94);
  border-radius:var(--r);color:var(--ink-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.zoomknap:active{background:var(--tryk)}
.maalestok{
  position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--ink-3);
  pointer-events:none;display:flex;align-items:center;gap:7px;
}
.maalestok i{display:block;height:5px;border:1px solid var(--ink-3);border-top:0;font-style:normal}

/* ---------- Panel (det valgte) ---------- */
.panel{
  flex:0 0 auto;background:var(--flade);border-top:1px solid var(--linje);
  padding:10px var(--pad);max-height:42vh;overflow-y:auto;
}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.panel-navn{font-size:13px;font-weight:600;letter-spacing:.02em}
.panel-luk{background:none;border:0;color:var(--ink-3);padding:4px;cursor:pointer;display:flex}
.felter{display:flex;flex-wrap:wrap;gap:8px}
.felt{display:flex;flex-direction:column;gap:3px;flex:1 1 90px;min-width:78px}
.felt label{font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.felt-ind{display:flex;align-items:baseline;gap:4px;border:1px solid var(--linje-2);border-radius:var(--r);padding:6px 8px;background:var(--flade)}
.felt-ind input{border:0;outline:0;background:none;width:100%;min-width:0;padding:0;font-size:15px}
.felt-ind span{font-size:11.5px;color:var(--ink-3);flex:0 0 auto}
.felt-ind:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--brand-svag)}
.knaprk{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.knap{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linje-2);
  background:var(--flade);border-radius:var(--r);padding:9px 12px;font-size:14px;
  cursor:pointer;color:var(--ink);
}
.knap:active{background:var(--tryk)}
.knap.fare{color:var(--roed);border-color:#e4c9c6}

/* ---------- Målrækker ----------
   Et mål er en knap, ikke et skrivefelt. Trykker man på den, kommer
   appens eget taltastatur op nedefra – telefonens eget tastatur
   lægger sig oven på skærmen og dækker netop den OK-knap man skal
   ramme. */
.maalrk{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  border:1px solid var(--linje-2);background:var(--flade);border-radius:var(--r);
  padding:9px 12px;cursor:pointer;color:var(--ink);font-size:15px;text-align:left;flex:1 1 140px;
}
.maalrk:active{background:var(--tryk)}
.maalrk-e{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.maalrk-v{font-weight:600;white-space:nowrap}
.maalrk-v i{font-style:normal;font-weight:400;font-size:11.5px;color:var(--ink-3);margin-left:2px}
.maalrkker{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Taltastatur ---------- */
/* Tastaturet skal kunne rammes med en tommelfinger uden at fylde den
   halve skærm – tegningen skal helst stadig kunne ses bagved. */
.pad-vis{
  display:flex;align-items:baseline;justify-content:center;gap:6px;
  padding:6px 0 8px;border-bottom:1px solid var(--linje);margin-bottom:8px;
}
.pad-tal{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1}
.pad-tal.hint{color:var(--ink-3);font-weight:400}
.pad-enhed{font-size:15px;color:var(--ink-3)}
/* NB: klassen hedder talpad og ikke pad. «pad» er allerede navnet på
   den luft der lægges i et ark, og to ting med samme navn gjorde
   hele arket til et gitter med fire spalter. */
.talpad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.talpad button{
  border:1px solid var(--linje-2);background:var(--flade);border-radius:var(--r);
  font-size:18px;font-weight:500;padding:9px 0;cursor:pointer;color:var(--ink);
}
.talpad button:active{background:var(--tryk)}
.talpad .bred{grid-column:span 2}
.talpad .ok{grid-row:span 2;background:var(--brand);color:#fff;border-color:var(--brand);font-size:17px;font-weight:600}
.talpad .ok:active{background:var(--brand-2)}
.talpad .lys{color:var(--ink-2);font-size:18px}
.pad-note{margin:8px 0 0;font-size:11.5px;color:var(--ink-3);text-align:center;line-height:1.35}

/* ---------- Tilstandsbjælke (mens et rum flyttes) ---------- */
.modebar{
  position:absolute;left:10px;right:10px;top:10px;z-index:5;
  display:flex;align-items:center;gap:10px;
  background:rgba(20,48,77,.95);color:#fff;border-radius:var(--r);padding:7px 8px 7px 13px;
}
.modebar span{flex:1;min-width:0;font-size:13px;line-height:1.3}
.modebar button{
  border:0;background:#fff;color:var(--brand);border-radius:var(--r);
  padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;flex:0 0 auto;
}
/* Den knap der sætter tallene i kraft. Sort = noget du trykker på. */
.knap.ja{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
.knap.ja:active{background:var(--brand-2)}
.panel-note{margin:9px 0 0;font-size:11.5px;line-height:1.35;color:var(--ink-3)}
.knap.fuld{flex:1 1 100%;justify-content:center}
.knap[disabled]{opacity:.45}

/* ---------- Værktøjslinje ---------- */
.vaerktoej{
  flex:0 0 auto;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
  border-top:1px solid var(--linje);background:var(--flade);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.vaerktoej::-webkit-scrollbar{display:none}
/* Så lav som den kan være og stadig rammes med en finger: hele
   resten af skærmen skal bruges til tegningen. */
.vt{
  flex:0 0 auto;width:58px;padding:6px 2px 6px;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-2);
  border-bottom:2px solid transparent;
}
.vt .ic{width:20px;height:20px}
.vt span{font-size:9.5px;letter-spacing:.01em;line-height:1}
.vt:active{background:var(--tryk)}
.vt.valgt{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* Værktøjslinjen er det nederste, så den skal selv holde afstand til
   telefonens egen streg nederst på skærmen. */
.vaerktoej{padding-bottom:var(--safe-b)}

/* ---------- Ark (bundark) ---------- */
.skygge{position:fixed;inset:0;background:rgba(16,22,28,.42);z-index:40}
.ark{
  position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--flade);
  border-radius:12px 12px 0 0;max-height:86vh;display:flex;flex-direction:column;
  padding-bottom:var(--safe-b);
}
.ark-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px var(--pad) 11px;border-bottom:1px solid var(--linje);flex:0 0 auto;
}
.ark-top h2{margin:0;font-size:16px;font-weight:600}
.ark-krop{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 12px}
.ark-krop.pad{padding:8px var(--pad) 12px}

.raekke{
  display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;
  padding:13px var(--pad);text-align:left;cursor:pointer;font-size:15px;color:var(--ink);
  border-bottom:1px solid var(--linje);
}
.raekke:last-child{border-bottom:0}
.raekke:active{background:var(--tryk)}
.raekke .ic{color:var(--ink-2)}
.raekke b{font-weight:600}
.raekke small{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;font-weight:400}
.raekke-tekst{flex:1;min-width:0}
.raekke.valgt{color:var(--brand)}
.raekke.valgt .ic{color:var(--brand)}
.raekke.fare{color:var(--roed)}
.raekke.fare .ic{color:var(--roed)}

/* kontakt (til/fra) */
.kontakt{width:44px;height:26px;border-radius:13px;background:var(--linje-2);position:relative;flex:0 0 auto;transition:background .13s}
.kontakt i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .13s}
.raekke[aria-pressed="true"] .kontakt{background:var(--brand)}
.raekke[aria-pressed="true"] .kontakt i{left:21px}

/* symbolvælger */
.grupnavn{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:14px var(--pad) 6px}
.symgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;padding:0 var(--pad)}
.symgitter.bred{grid-template-columns:repeat(auto-fill,minmax(114px,1fr))}
/* Inde i panelet er der luft nok i forvejen */
.panel .symgitter{padding:0;margin-top:2px}
/* De fire billeder af hvilken vej døren åbner: kvadratiske, så en
   lodret væg fylder lige så meget som en vandret. */
.doergitter{grid-template-columns:repeat(4,1fr)}
.doergitter .sym canvas{height:62px}
.sym{
  border:1px solid var(--linje);border-radius:var(--r);background:var(--flade);
  padding:6px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;
}
.sym:active{background:var(--tryk)}
.sym canvas{width:100%;height:52px;display:block}
.sym span{font-size:10.5px;color:var(--ink-2);text-align:center;line-height:1.2}
.sym small{display:block;font-size:9.5px;color:var(--ink-3);margin-top:1px}
.sym.valgt{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
/* Kan hives ud af arket og ned på tegningen. touch-action:none, fordi
   browseren ellers opfatter trækket som en rulning i listen. */
.sym.traekbar{touch-action:none}
/* Værktøjslinjen ruller på tværs, så dér må browseren beholde de
   vandrette bevægelser – vi tager kun dem opad, ned på tegningen. */
.vt.traekbar-op{touch-action:pan-x}
.ark-note{margin:0;padding:10px var(--pad) 2px;font-size:12px;line-height:1.35;color:var(--ink-3)}

/* Mens noget hives ud, trækker arket sig i baggrunden, så man kan se
   hvor man lægger det. */
.ark,.skygge{transition:opacity .12s}
.ark.traekker{opacity:.07}
.skygge.traekker{opacity:0}

/* sagsfelter */
.sagsfelt{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--linje);padding:9px var(--pad)}
.sagsfelt label{flex:0 0 104px;font-size:12px;color:var(--ink-3)}
.sagsfelt input,.sagsfelt textarea{flex:1;min-width:0;border:0;outline:0;background:none;padding:4px 0;font-size:15px;resize:none}
.sagsfelt button{background:none;border:0;color:var(--ink-3);padding:4px;cursor:pointer;display:flex;flex:0 0 auto}
.sagsfelt button:active{color:var(--brand)}

/* ---------- Dialog ---------- */
.dialog-lag{
  position:fixed;inset:0;z-index:50;background:rgba(16,22,28,.42);
  display:flex;align-items:center;justify-content:center;padding:22px;
}
.dialog{
  background:var(--flade);border-radius:8px;width:100%;max-width:340px;padding:18px var(--pad) 14px;
}
.dialog h3{margin:0 0 4px;font-size:16px;font-weight:600}
.dialog p{margin:0 0 12px;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.dialog input,.dialog select{
  width:100%;border:1px solid var(--linje-2);border-radius:var(--r);padding:10px;background:var(--flade);
}
.dialog input:focus{outline:0;border-color:var(--brand-2);box-shadow:0 0 0 2px var(--brand-svag)}
.dialog-knapper{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.dialog-knapper .knap.ja{background:var(--brand);color:#fff;border-color:var(--brand)}
.forslag{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.forslag button{
  border:1px solid var(--linje-2);background:var(--flade);border-radius:14px;
  padding:6px 11px;font-size:13px;cursor:pointer;color:var(--ink-2);
}
.forslag button:active{background:var(--tryk)}

/* ---------- Besked nederst ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(76px + var(--safe-b));transform:translateX(-50%);
  background:rgba(20,26,32,.94);color:#fff;padding:9px 15px;border-radius:var(--r);
  font-size:13.5px;z-index:60;max-width:86vw;text-align:center;
}

/* ---------- Stor skærm: telefonramme, som i Billededokumentation ---------- */
@media (min-width:900px) and (min-height:700px){
  body{background:#d9dde1;display:flex;align-items:center;justify-content:center}
  .app{
    position:relative;width:398px;height:846px;max-height:calc(100vh - 40px);
    border-radius:26px;overflow:hidden;box-shadow:0 20px 44px rgba(12,18,24,.26);
  }
  .skygge,.ark,.dialog-lag{position:absolute}
}