/* =========================================================
   Underskrift – udseende

   Samme retning som Billededokumentation og Skitse: 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 denne app er én rullende side. Der er kun
   tre ting på den – hvad der skrives under på, billederne af
   det, og selve underskriften – og de står under hinanden i den
   rækkefølge man bruger dem.
   ========================================================= */
: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%;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{
  min-height:100%;display:flex;flex-direction:column;
  background:var(--bund);max-width:720px;margin:0 auto;
  box-shadow:0 0 0 1px var(--linje);
}

/* ---------- Topbjælke ---------- */
.appbar{
  background:var(--brand);color:#fff;flex:0 0 auto;
  position:sticky;top:0;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)}

/* ---------- Siden ---------- */
.side{
  flex:1;padding:10px var(--pad) calc(24px + var(--safe-b));
  display:flex;flex-direction:column;gap:10px;
}
.kort{background:var(--flade);border:1px solid var(--linje);border-radius:var(--r)}
.kort-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px 9px 12px;border-bottom:1px solid var(--linje);min-height:42px;
}
.kort-top h2{
  margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.kort-krop{padding:11px 12px 12px}
.tal{font-size:12px;color:var(--ink-3)}
.tekstknap{
  display:flex;align-items:center;gap:6px;
  background:none;border:0;padding:4px 6px;margin:-4px -6px -4px 0;
  border-radius:var(--r);color:var(--brand-2);font-size:13px;font-weight:600;cursor:pointer;
}
.tekstknap:active{background:var(--brand-svag)}
.tekstknap .ic{width:16px;height:16px}

/* ---------- Felter ---------- */
.felter{display:flex;flex-wrap:wrap;gap:9px}
.felt{display:flex;flex-direction:column;gap:3px;flex:1 1 120px;min-width:110px;margin-bottom:9px}
.felter .felt{margin-bottom:0}
.felt.bred{flex:2 1 180px}
.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:7px 9px;background:var(--flade);
}
.felt-ind input,.felt-ind textarea{
  border:0;outline:0;background:none;width:100%;min-width:0;padding:0;
  font-size:15px;line-height:1.4;resize:none;user-select:text;
}
.felt-ind textarea{min-height:44px}
.felt-ind:focus-within{border-color:var(--brand-2);box-shadow:0 0 0 2px var(--brand-svag)}
.felt-ind input::placeholder,.felt-ind textarea::placeholder{color:var(--ink-3)}

/* ---------- Underskriftsfeltet ----------
   Feltet har fast forhold mellem bredde og højde, det samme som
   dokumentet regner med. Så bliver underskriften hverken bredere
   eller fladere på papiret end den var på skærmen. */
.padplads{min-height:1px}
.pad{
  position:relative;width:100%;aspect-ratio:12 / 5;
  border:1px solid var(--linje-2);border-radius:var(--r);
  background:var(--flade);overflow:hidden;
}
.pad canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
/* Stregen man skriver ovenpå. Den ligger under lærredet, så
   blækket lægger sig oven på linjen ligesom på papir. */
.pad-linje{
  position:absolute;left:8%;right:8%;bottom:22%;
  display:flex;align-items:center;gap:8px;pointer-events:none;
}
.pad-linje i{flex:1;height:0;border-top:1px solid var(--linje-2)}
.pad-hint{
  position:absolute;left:0;right:0;top:34%;margin:0;text-align:center;
  font-size:13px;color:var(--ink-3);pointer-events:none;
}
.pad.skrevet .pad-hint{display:none}

/* ---------- Billeder ---------- */
.bl-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.bl-gitter:empty{display:none}
.bl{
  position:relative;aspect-ratio:4 / 3;overflow:hidden;
  border:1px solid var(--linje);border-radius:2px;background:var(--tryk);
}
.bl img{width:100%;height:100%;object-fit:cover;display:block}
.bl-fjern{
  position:absolute;right:3px;top:3px;width:22px;height:22px;padding:0;
  border:0;border-radius:11px;background:rgba(16,22,28,.6);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.bl-fjern .ic{width:12px;height:12px;stroke-width:2.2}
/* Mens et billede bliver skaleret ned, står pladsen der allerede, så
   gitteret ikke hopper når det er færdigt. */
.bl.venter{display:flex;align-items:center;justify-content:center}
.bl.venter::after{
  content:'';width:15px;height:15px;border-radius:50%;
  border:1.6px solid var(--linje-2);border-top-color:var(--ink-3);
  animation:snur .7s linear infinite;
}
@keyframes snur{to{transform:rotate(360deg)}}

.knaprk{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.knap{
  display:flex;align-items:center;justify-content:center;gap:7px;
  flex:1 1 auto;min-height:42px;padding:0 13px;
  border:1px solid var(--linje-2);border-radius:var(--r);
  background:var(--flade);color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;
}
.knap:active{background:var(--tryk)}
.knap.ja{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;flex:1 1 100%}
.knap.ja:active{background:var(--brand-2)}
.knap.fuld{flex:1 1 100%}
.knap.fare{color:var(--roed);border-color:#e4c9c6}
.knap[disabled]{opacity:.4}
.knap .ic{width:17px;height:17px}

.fod{margin:2px 2px 0;font-size:11.5px;line-height:1.4;color:var(--ink-3);text-align:center}

/* ---------- Fuldskærm ---------- */
.fuldskaerm{
  position:fixed;inset:0;z-index:60;background:var(--bund);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) 10px calc(8px + var(--safe-b));
}
.fs-top{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 2px;font-size:13px;color:var(--ink-2);min-height:44px;
}
#fs-navn{
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fs-midt{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
/* Lærredet flyttes herind. Rammen holder samme forhold som på siden og
   bliver så stor som der er plads til – både på højkant og på tværs. */
.fs-midt .pad{width:auto;height:auto;max-width:100%;max-height:100%}
.fs-bund{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 2px 0;
}
.fs-vink{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);min-width:0}
.fs-vink .ic{width:16px;height:16px}
.fs-knapper{display:flex;gap:6px;flex:0 0 auto}
.fs-knap{
  display:flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;
  border:1px solid var(--linje-2);border-radius:var(--r);background:var(--flade);
  color:var(--ink);font-size:14px;cursor:pointer;
}
.fs-knap:active{background:var(--tryk)}
.fs-knap .ic{width:16px;height:16px}
#k-fs-luk{border-color:var(--brand);background:var(--brand);color:#fff;font-weight:600}
/* På tværs er der ikke plads til vinket – så ryger det ud og
   knapperne rykker ind på linje med toppen. */
@media (orientation:landscape) and (max-height:520px){
  .fs-vink{display:none}
  .fs-top{min-height:38px;padding:4px 2px}
}

/* ---------- Dialog og toast ---------- */
.dialog-lag{
  position:fixed;inset:0;z-index:80;background:rgba(16,22,28,.4);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.dialog{
  background:var(--flade);border-radius:6px;padding:16px;width:100%;max-width:340px;
  box-shadow:0 6px 28px rgba(16,22,28,.28);
}
.dialog h3{margin:0 0 4px;font-size:16px;font-weight:600}
.dialog p{margin:0 0 4px;font-size:13.5px;color:var(--ink-2);line-height:1.4}
.dialog-knapper{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.dialog-knapper .knap{flex:0 0 auto}

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