/* Juhl & Damsgaard - Plantegning (statisk grundplanstegner)
   Dependency-free. Arver sidens palette: --ink / --paper / --line.
   Version 4 - tilføjer tegner, rumtabel, estimat og print-ark. */

/* ============================ 1. Tokens ============================ */

:root {
  --ink: #203943;
  --ink-2: #2c4a56;
  --ink-3: #476570;
  --paper: #f2eee5;
  --paper-2: #f8f5ed;
  --paper-3: #e6decc;
  --line: #ddd8cb;
  --line-2: #c9c2b0;
  --brand: #17646c;
  --brand-2: #0f4a51;
  --brand-soft: #e2efee;
  --warn: #a05a3c;
  --ok: #2f7d4f;
  --danger: #a3341f;
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 20px;
  --shadow-s: 0 1px 2px rgba(32, 57, 67, 0.06);
  --shadow: 0 4px 20px rgba(32, 57, 67, 0.07);
  --shadow-l: 0 16px 40px rgba(32, 57, 67, 0.14);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw: 1320px;
  --canvas-bg: #fdfcf9;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.panning #pt-svg { cursor: grab; }

img { max-width: 100%; display: block; }

a { color: var(--brand-2); }
a:hover { color: var(--brand); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); font-weight: 750; }
h2 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Siden fylder altid hele skærmens bredde. Tekstblokke har stadig en
   læsevenlig linjelængde (max-width i tegn), så det kun er selve
   sidebredden, der er fluid. */
.wrap { width: 100%; max-width: none; margin: 0; padding: 0 clamp(16px, 2.6vw, 44px); }

/* ============================ 2. Topbar ============================ */

.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248, 245, 237, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 750; color: var(--ink); text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img { height: 34px; width: auto; border-radius: 4px; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a {
  padding: 7px 11px; border-radius: var(--radius-s);
  color: var(--ink-2); text-decoration: none; font-size: 0.9rem; font-weight: 550;
}
.top nav a:hover { background: var(--brand-soft); color: var(--brand-2); }
.top nav a[aria-current="page"] { background: var(--brand); color: #fff; }

/* ============================ 3. Hero ============================ */

.hero { padding: clamp(28px, 5vw, 56px) 0 clamp(12px, 2vw, 20px); }
.eyebrow {
  display: inline-block; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--brand-2); background: var(--brand-soft);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.lede { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.14rem); color: var(--ink-2); max-width: 68ch; }

.steps {
  list-style: none; display: grid; gap: 10px; padding: 0; margin: 22px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.steps li {
  display: flex; gap: 10px; align-items: baseline;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 14px;
  font-size: 0.9rem; color: var(--ink-2);
}
.steps b {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 0.78rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============================ 3b. Adgangsgate ============================ */

/* Programmet er låst indtil navn, telefon og mail er lagt ind.
   Baggrunden er IKKE dækket helt - brugeren skal kunne se tegneren og
   forstå hvad de er ved at gå ind til. Et sløret dæksel peger på
   dialogen uden at skjule indholdet. */
.gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: start center;
  padding: clamp(16px, 4vh, 56px) clamp(16px, 4vw, 32px);
  /* Baggrund kun halvt dækket, så tegneren kan skimtes */
  background: rgba(32, 57, 67, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  animation: gate-fade 0.18s ease-out;
}
/* Sidens indhold er ofte længere end skærmen (5.000+ px). Derfor centrerer
   vi kortet i det synlige udsnit frem for i hele dokumentet, ellers lå det
   højt oppe og brugeren skulle scrolle for at nå det. */
@media (min-height: 780px){
  .gate { align-content: center; }
}
/* Paa korte skaerme (baerbar, delt vindue) skal kortet bare ligge i toppen
   og vaere scrollbart, frem for at blive presset sammen.
   Kortet er 687 px hoejt ved de nuvaerende vaerdier, saa en 700 px
   skaerm har kun 13 px luft. Derfor strammes padding og tekst lidt
   mere, saa det passer med raad til skygge. */
@media (max-height: 780px){
  .gate {
    align-content: start;
    /* 4vh er 28 px paa en 700 px skaerm, og kortet er 668. Paddingen
       spiser den luft, der skal til for at kortet passer helt. */
    padding-top: 12px;
  }
  .gate-card { padding: 14px 18px; }
  .gate-card h2 { font-size: 1.05rem; margin-bottom: 5px; }
  .gate-lead { font-size: 0.82rem; margin-bottom: 11px; }
  .gate-card .field { margin-bottom: 8px; }
  .gate-legal { margin-top: 8px; font-size: 0.71rem; }
  /* .eyebrow har sin egen margin-top, som ellers skubber kortet 12px ned */
  .gate-card .eyebrow { margin: 0 0 7px; font-size: 0.66rem; }
}
@keyframes gate-fade { from { opacity: 0; } to { opacity: 1; } }
.gate[hidden] { display: none; }
.gate-card {
  position: relative;
  width: 100%; max-width: 520px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l, 14px);
  /* Kortet skal kunne passe paa en 700 px hoej baerbar, saa padding og
     tekststaerrelser er sat forsvarligt i forhold til det. */
  padding: clamp(18px, 2.6vw, 30px);
  /* Kraftigere skygge, fordi den nu ligger over indhold */
  box-shadow: 0 24px 60px rgba(20, 40, 48, 0.28), 0 4px 12px rgba(20, 40, 48, 0.16);
  animation: gate-rise 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes gate-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.gate-card h2 { margin: 0 0 8px; font-size: clamp(1.12rem, 0.98rem + 0.7vw, 1.4rem); }
.gate-lead {
  margin: 0 0 16px; font-size: 0.88rem; color: var(--ink-2);
  max-width: 46ch;
}
.gate-lead em { color: var(--ink); font-style: normal; font-weight: 650; }
.gate-err {
  margin: 0 0 16px; padding: 10px 12px;
  font-size: 0.86rem; font-weight: 600; color: #8f2f22;
  background: #fdf3f1; border: 1px solid #e6c8c1; border-radius: 6px;
}
.gate-err[hidden] { display: none; }
.gate-card .field { margin-bottom: 11px; }
.gate-legal {
  margin: 11px 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--ink-3);
}
.gate-legal b { color: var(--ink-2); }

/* Når dialogen er lukket uden oplysninger: en tydelig invitation
   tilbage til tegneren, i stedet for at brugeren bliver låst fast. */
.gate-return {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin: 0 0 14px; padding: 14px 16px;
  background: var(--brand-soft);
  border: 1px solid #c8dedd;
  border-radius: var(--radius-sm, 8px);
}
.gate-return[hidden] { display: none; }
.gate-return p {
  margin: 0; flex: 1 1 320px;
  font-size: 0.86rem; color: var(--ink-2); line-height: 1.5;
}
.gate-return em { color: var(--ink); font-style: normal; font-weight: 650; }
.gate-return .btn { flex: none; }

/* Luk-knap i hjørnet: slipper brugeren forbi uden at give oplysninger,
   så dialogen ikke bliver en fælde. */
.gate-close {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--ink-3);
  background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.gate-close:hover { color: var(--ink); background: var(--paper-3); border-color: var(--line); }

/* "Se bare på siden først" - samme hensigt, men tydeligere valg */
.gate-skip {
  display: block; width: 100%; margin: 10px 0 0;
  padding: 8px 12px;
  font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line-2); border-radius: 6px;
}
.gate-skip:hover { background: var(--paper-3); color: var(--ink); }

/* Når porten er lukket, må siden stadig kunne scrolles - brugeren skal
   kunne se tegneren og læse teksten bagved dialogen. */
body.gated { overflow: auto; }
/* ...men markøren skal ikke se ud som om der kan tegnes endnu. */
body.gated #pt-svg { cursor: default; }

/* Trin-markering over en sektion */
.step-tag {
  display: inline-block; margin: 0 0 8px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft);
}

/* ============================ 4. Cards + grid ============================ */

.grid-2 {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
  align-items: start;
  padding-bottom: 40px;
}
/* På brede skærme må tegneren tage en større del, så grundplanen bliver
   stor nok at måle på. */
@media (min-width: 1700px) {
  .grid-2 { grid-template-columns: minmax(0, 2fr) minmax(420px, 0.85fr); }
}
@media (max-width: 980px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.sticky-side { display: grid; gap: clamp(16px, 2vw, 26px); }
@media (min-width: 981px) {
  .sticky-side { position: sticky; top: 78px; }
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: var(--shadow-s);
  margin-top: clamp(16px, 2vw, 26px);
}
.grid-2 > div > .card:first-child, .editor-card { margin-top: clamp(16px, 2vw, 26px); }

.card-note { color: var(--ink-3); font-size: 0.9rem; margin: -4px 0 16px; max-width: 72ch; }
.hint { color: var(--ink-3); font-size: 0.82rem; margin: 10px 0 0; }

.empty, .empty-cell {
  color: var(--ink-3); font-size: 0.9rem;
  background: var(--paper-3); border-radius: var(--radius-s);
  padding: 14px; margin: 0;
}

/* ============================ 5. Knapper ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radius-s);
  font: inherit; font-weight: 600; font-size: 0.92rem;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.06s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--paper-3); color: var(--ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 0.83rem; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 7px;
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  background: var(--paper-2); color: var(--ink-2);
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.icon-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.house-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================ 6. Editor: bar + værktøjer ============================ */

.editor-card { padding-bottom: 20px; }

.editor-bar {
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: center; justify-content: space-between;
  padding: 12px; margin-bottom: 10px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line-2); background: var(--paper-2);
  color: var(--ink-2); font: inherit; font-size: 0.86rem; font-weight: 600;
  cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.tool:hover { background: #fff; color: var(--ink); }
.tool[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.tool-k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px;
  background: rgba(32, 57, 67, 0.1); font-size: 0.68rem; font-weight: 800;
  font-family: var(--mono);
}
.tool[aria-pressed="true"] .tool-k { background: rgba(255, 255, 255, 0.24); }

.bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.inline { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.toggles { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.zoom { display: flex; gap: 4px; }

.chk, .check {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 0.84rem; color: var(--ink-2); cursor: pointer;
  line-height: 1.45;
}
.chk input, .check input {
  width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); flex: none; cursor: pointer;
}

.tool-hint {
  margin: 0 0 10px; font-size: 0.85rem; color: var(--ink-3);
  padding-left: 2px;
}

/* Møbel-vælgeren, kun synlig med møbel-værktøjet aktivt */
.furn-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm, 8px);
}
.furn-bar-lbl {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); flex: none;
}
.furn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.furn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 7px;
  font: inherit; font-size: 0.82rem; font-weight: 500; line-height: 1.2;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.furn-chip:hover { border-color: var(--brand); color: var(--ink); }
.furn-chip[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.furn-chip[aria-pressed="true"] .furn-ico { background: #fff; border-color: #fff; }
.furn-ico {
  width: 16px; height: 12px; flex: none;
  border: 1.5px solid var(--ink-3);
  border-radius: 2px;
  background: var(--line-2);
}

/* ============================ 7. Canvas ============================ */

.canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(74vh, 940px);
  min-height: 320px;
  background: var(--canvas-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(32, 57, 67, 0.06);
}
@media (max-width: 700px) { .canvas-wrap { aspect-ratio: 4 / 3.4; max-height: none; } }

#pt-svg {
  display: block; width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}
#pt-svg[data-tool="select"] { cursor: default; }
#pt-svg[data-tool="pan"], #pt-svg[data-tool="calib"] { cursor: grab; }
#pt-svg:focus { outline: none; }
#pt-svg:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.a11y-note { font-size: 0.82rem; color: var(--ink-3); margin: 10px 0 0; }

.statusbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2);
}
.status {
  margin: 0; font-size: 0.86rem; color: var(--ink-2);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.sb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-actions label.btn { cursor: pointer; }

/* ============================ 8. Paneler (bg + props) ============================ */

.panel {
  margin-top: 16px; padding: 16px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h3 { margin-top: 0; }
.calib-info { font-size: 0.86rem; color: var(--ink-2); }
.calib-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 12px 0; }

.props h3 { margin-top: 0; }
.prop-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.prop-lbl { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); min-width: 130px; }
.prop-info {
  margin: 0 0 12px; font-size: 0.9rem; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.prop-hint { margin: 4px 0 0; font-size: 0.82rem; color: var(--ink-3); }
.prop-row input, .prop-row select { width: auto; min-width: 160px; }
.prop-readonly { background: var(--paper-2) !important; color: var(--ink-3); }
.prop-btns { display: inline-flex; align-items: center; gap: 10px; }
.prop-rot {
  font-size: 0.82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 34px;
}
.btn-small {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 5px 10px; cursor: pointer;
  color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 6px;
}
.btn-small:hover { border-color: var(--brand); color: var(--ink); }
.prop-del {
  display: block; width: 100%; margin-top: 14px; padding: 8px 12px;
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  color: #8f2f22; background: #fdf3f1;
  border: 1px solid #e6c8c1; border-radius: 6px;
}
.prop-del:hover { background: #fbe8e4; border-color: #d9a99e; }

/* ============================ 9. Rumtabel ============================ */

.table-scroll { overflow-x: auto; margin: 0 -4px; }
.roomtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 460px; }
.roomtable th {
  text-align: left; font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-3); font-weight: 700;
  padding: 0 8px 8px; border-bottom: 1px solid var(--line-2);
}
.roomtable td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.roomtable tr.is-sel td { background: var(--brand-soft); }
.roomtable tr:last-child td { border-bottom: none; }
.cell-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-input {
  width: 100%; min-width: 110px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; font: inherit; color: inherit;
}
.cell-input:hover { border-color: var(--line-2); }
.cell-input:focus { border-color: var(--brand); background: #fff; }
.cell-select {
  padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--paper-2); font: inherit; font-size: 0.85rem; color: var(--ink-2);
  max-width: 150px;
}
.cell-btns { white-space: nowrap; text-align: right; }
.cell-btns .icon-btn { min-width: 28px; height: 28px; font-size: 0.85rem; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.pill-in { background: var(--brand-soft); color: var(--brand-2); }
.pill-out { background: #e6e0cd; color: #6b5f42; }

.sumline {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sumline b { color: var(--ink); }

/* ============================ 10. Estimat ============================ */

.est-list { display: grid; gap: 2px; }

/* Kolonner: flueben · navn · omfang · beløb · slet.
   Fem kolummer altid, så slet-knappen ikke lander oveni beløbet. */
.est-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(96px, auto) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 6px;
}
.est-row:last-child { border-bottom: none; }
.est-chk { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.est-main { min-width: 0; }
.est-name { font-size: 0.9rem; font-weight: 600; }
.est-meta {
  font-size: 0.76rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.est-qwrap { display: inline-flex; align-items: center; gap: 5px; }
.est-qty {
  width: 74px; padding: 6px 8px; text-align: right;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--paper-2); font: inherit; font-size: 0.86rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.est-unit { font-size: 0.78rem; color: var(--ink-3); min-width: 24px; }
.est-sum {
  grid-column: 4; text-align: right;
  font-size: 0.86rem; font-weight: 650; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.t-unit { font-size: 0.72rem; font-weight: 500; color: var(--ink-3); }

/* Opbrydning af prisen: timer x lon + materialer. Egen linje i rækken. */
.est-break {
  grid-column: 1 / -1;
  font-size: 0.74rem; color: var(--ink-3); line-height: 1.45;
  padding: 3px 0 0 27px; cursor: pointer;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}
.est-break:hover { color: var(--brand); }

/* Prisgrundlaget: time + materialer pr. område */
.cost-box {
  margin-top: 14px; padding: 12px 14px;
  background: var(--paper-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
}
.cost-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.cost-head h3 { margin: 0; font-size: 0.95rem; }
#cost-summary { margin: 0 0 10px; color: var(--ink-2); font-size: 0.8rem; }
.cost-table {
  display: grid; gap: 2px; margin-bottom: 8px;
  font-size: 0.8rem;
}
.cost-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 1fr auto;
  gap: 8px; align-items: center;
  padding: 5px 6px; border-bottom: 1px solid var(--line);
}
.cost-row:last-child { border-bottom: none; }
.cost-row.is-unused { opacity: 0.5; }
.cost-row.is-focus {
  background: var(--brand-soft); border-radius: 5px;
  box-shadow: inset 0 0 0 1px #b9d6d4;
}
.cost-head-row {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-3);
}
.cost-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-num { display: inline-flex; align-items: baseline; gap: 3px; }
.cost-num input {
  width: 74px; padding: 4px 6px; text-align: right;
  font: inherit; font-size: 0.8rem;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: var(--paper-2); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cost-num small { font-size: 0.7rem; color: var(--ink-3); }
.cost-res { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .cost-row { grid-template-columns: minmax(0, 1fr) 1fr 1fr; }
  .cost-res { grid-column: 2 / 4; }
}
.t-muted { color: var(--ink-3); font-weight: 500; }
.est-row > .icon-btn { min-width: 26px; height: 26px; font-size: 0.9rem; align-self: start; margin-top: 2px; }

/* Ikke valgt = huset bevares. Det skal kunne læses med ét blik. */
.est-row.is-off .est-name { color: var(--ink-3); font-weight: 500; }
.est-row.is-off .est-qty { opacity: 0.6; }
.est-row.is-off { background: transparent; }
.est-row:not(.is-off) { background: var(--paper-3); }

@media (min-width: 420px) {
  .est-row > .icon-btn { margin-left: 4px; }
}

/* Trin 2: forklaringen over listen */
.scope-lead {
  margin: 0 0 12px; font-size: 0.9rem; color: var(--ink-2);
  max-width: 62ch;
}
.scope-lead b { color: var(--ink); }
.scope-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 12px;
  margin: 0 0 8px; padding: 8px 12px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
}
.scope-count { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); }
.scope-bar-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.btn-small2 {
  padding: 5px 11px; font-size: 0.8rem; font-weight: 600;
  border-radius: 999px; cursor: pointer;
  color: var(--brand-2); background: var(--brand-soft);
  border: 1px solid transparent;
}
.btn-small2:hover { background: #d3e6e4; color: var(--brand-2); }
.btn-small2[hidden] { display: none; }

/* boligareal-boksen under rumtabellen */
.bolig-box {
  margin-top: 14px; padding: 12px 14px;
  background: var(--brand-soft);
  border: 1px solid #c8dedd;
  border-radius: var(--radius-sm, 8px);
}
.bolig-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.bolig-lbl {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand-2);
}
.bolig-num {
  font-size: 1.15rem; font-weight: 750; color: var(--brand-2);
  font-variant-numeric: tabular-nums;
}
.bolig-box .hint { margin: 0; color: var(--ink-2); max-width: 68ch; }
.bolig-notes {
  margin: 8px 0 0; padding-left: 18px;
  font-size: 0.79rem; color: var(--ink-3); line-height: 1.5;
}
.bolig-notes[hidden] { display: none; }
.pill-bolig {
  margin-left: 4px; background: #f3ece2; color: #7a6444;
}

/* Resumé af tegning + valg, som brugeren kan se inden de sender */
.plan-preview {
  margin: 12px 0 0; padding: 12px 14px;
  font: inherit; font-size: 0.8rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  color: var(--ink-2); background: var(--paper-3);
  border: 1px solid var(--line); border-radius: 6px;
  max-height: 340px; overflow: auto;
  font-variant-numeric: tabular-nums;
}

.scale-box {
  margin-top: 14px; padding: 12px 14px;
  background: var(--paper-3); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.scale-box .field { margin-bottom: 0; }
.scale-box .lbl { display: inline-block; }
.scale-box input { width: 130px; display: inline-block; margin: 0 0 6px; }
.scale-box .hint { margin-top: 0; }

.subadd {
  margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-3); overflow: hidden;
}
.subadd > summary {
  padding: 10px 14px; cursor: pointer; font-size: 0.87rem; font-weight: 600;
  color: var(--ink-2); list-style: none;
}
.subadd > summary::-webkit-details-marker { display: none; }
.subadd > summary::before { content: "＋ "; color: var(--brand); }
.subadd[open] > summary::before { content: "－ "; }
.subadd > summary:hover { color: var(--ink); }
.subadd > *:not(summary) { padding: 0 14px; }
.subadd > *:not(summary):last-child { padding-bottom: 14px; }

.totals {
  margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--line-2);
}
.tline { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 0.9rem; }
.tline-muted { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tline-grand {
  font-size: 1.12rem; font-weight: 750; color: var(--ink);
  padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.tline-grand span:first-child { letter-spacing: -0.01em; }

/* ============================ 11. Materialer + vedligehold ============================ */

.mat-grid { display: grid; gap: 18px; }
.mat-group h3 { margin-bottom: 8px; font-size: 0.88rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 44px; height: 44px; border-radius: 10px;
  border: 2px solid var(--line-2); cursor: pointer; padding: 0;
  background: var(--paper-3);
  transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.is-none {
  background:
    linear-gradient(135deg, transparent 44%, var(--line-2) 44%, var(--line-2) 56%, transparent 56%),
    var(--paper-2);
}
.swatch[aria-pressed="true"] {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}

.seasons { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.season h3 { font-size: 0.9rem; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.season .ic { font-size: 1rem; }
.season ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.season .check { font-size: 0.82rem; align-items: flex-start; }

/* ============================ 12. Formular ============================ */

.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.field { display: block; margin-bottom: 14px; }
.lbl {
  display: block; font-size: 0.8rem; font-weight: 650;
  color: var(--ink-2); margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="url"], select, textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-s);
  background: #fff; font: inherit; font-size: 0.94rem; color: var(--ink);
}
textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
select { cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
input[aria-invalid="true"] { border-color: var(--danger); background: #fdf3f1; }
input[type="range"] { padding: 0; accent-color: var(--brand); }

.calib-form .field { margin-bottom: 0; width: 200px; }
.panel .field { margin-bottom: 12px; }

.alert {
  padding: 12px 14px; border-radius: var(--radius-s);
  font-size: 0.87rem; margin: 0 0 14px;
  border: 1px solid;
}
.alert-ok { background: #e9f5ee; border-color: #b6ddc6; color: #1f5c3a; }
.alert-err { background: #fdf1ef; border-color: #eec4bb; color: #8c2c18; }
.alert-warn { background: #fdf4ec; border-color: #edd6c2; color: var(--warn); margin-top: 10px; }

/* ============================ 13. Footer + toast ============================ */

.foot {
  margin-top: 20px; padding: 26px 0;
  border-top: 1px solid var(--line);
  background: var(--paper-3);
  font-size: 0.85rem; color: var(--ink-3);
}
.foot-in { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.foot a { color: var(--ink-2); }
.sep { opacity: 0.5; }

.toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 16px);
  background: var(--ink); color: #fff;
  padding: 11px 20px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 550;
  box-shadow: var(--shadow-l);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 90; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================ 14. Print ============================ */

.print-sheet, .print-head { display: none; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  html, body { background: #fff; }
  body > *:not(.print-sheet):not(.print-head) { display: none !important; }

  .print-head { display: block; margin-bottom: 6mm; }
  .print-title { font-size: 15pt; font-weight: 750; margin: 0; color: #000; }
  .print-head .card-note { font-size: 8.5pt; color: #555; margin: 1mm 0 0; }

  .print-sheet { display: block; color: #000; }

  .ps-head {
    display: flex; justify-content: space-between; gap: 10mm;
    border-bottom: 1.6pt solid #000; padding-bottom: 3mm; margin-bottom: 4mm;
  }
  .ps-brand { font-size: 8pt; letter-spacing: 0.08em; text-transform: uppercase; color: #444; margin: 0 0 1mm; }
  .ps-title { font-size: 14pt; margin: 0 0 1mm; font-weight: 750; }
  .ps-sub { font-size: 8pt; color: #444; margin: 0; }
  .ps-meta { font-size: 8pt; color: #333; text-align: right; flex: none; }
  .ps-meta p { margin: 0 0 0.8mm; }

  .ps-plan {
    border: 0.6pt solid #999; border-radius: 2mm;
    padding: 2mm; margin-bottom: 4mm; background: #fff;
    page-break-inside: avoid;
  }
  .ps-plan svg { width: 100%; height: auto; max-height: 118mm; display: block; }

  .ps-cols { display: flex; gap: 6mm; align-items: flex-start; }
  .ps-cols > div { flex: 1 1 0; min-width: 0; }
  .ps-cols h2 { font-size: 9.5pt; margin: 0 0 2mm; border-bottom: 0.6pt solid #bbb; padding-bottom: 1mm; }

  .ps-tab { width: 100%; border-collapse: collapse; font-size: 8pt; }
  .ps-tab th, .ps-tab td { text-align: left; padding: 1.1mm 1.5mm; border-bottom: 0.4pt solid #ddd; vertical-align: top; }
  .ps-tab thead th { font-size: 7pt; text-transform: uppercase; letter-spacing: 0.05em; color: #444; border-bottom: 0.8pt solid #888; }
  .ps-tab .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ps-note { font-size: 6.5pt; color: #666; }
  .ps-tab tfoot th { font-size: 8.5pt; border-top: 0.8pt solid #888; border-bottom: none; padding-top: 1.4mm; }

  .ps-tot { margin-top: 3mm; border-top: 0.6pt solid #bbb; padding-top: 2mm; }
  .ps-tot p { display: flex; justify-content: space-between; font-size: 8.5pt; margin: 0 0 1mm; }
  .ps-tot .grand { font-size: 11pt; font-weight: 750; border-top: 0.8pt solid #000; padding-top: 1.6mm; margin-top: 1.6mm; }

  .ps-disc {
    margin: 4mm 0 0; font-size: 7pt; color: #555;
    border-top: 0.4pt solid #ccc; padding-top: 2mm; line-height: 1.4;
  }
}

/* ============================ 15. Responsivt ============================ */

@media (max-width: 760px) {
  .top nav { gap: 0; }
  .top nav a { padding: 6px 8px; font-size: 0.82rem; }
  .editor-bar { padding: 10px; }
  .bar-right { width: 100%; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .est-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .est-qwrap { grid-column: 2 / 3; justify-content: flex-end; }
  .est-sum { grid-column: 3; grid-row: 2; }
}

/* ============================ 16. Print af kun ark (fallback) ============================ */

@media print {
  .no-print { display: none !important; }
}
/* ==========================================================================
   LAESBAR TEKST I VAERKTØJET
   --------------------------------------------------------------------------
   Kortene kan vaere brede paa en stor skaerm. Men en hjaelpetext paa 13 px
   maa ikke fylde 700 px - det blev 106 tegn pr. linje, hvilket er
   umuligt at laese.

   Tre ting var galt foerste gang:
     1. .hint er et inline-element. max-width har INGEN effekt paa
        inline - det skal display vaere inline-block.
     2. p.alert og pre.plan-preview er block-elementer, men de var ikke
        med i vaelgeren, saa de fik ingen bredde overhovedet.
     3. 62ch er ca. 440 px ved 13 px font, altsaa 62 tegn. Det er
        laesbart.
   ========================================================================== */
.hint{
  display:inline-block;
  max-width:62ch;
}
label.check > span,
label.check > div,
.alert,
.plan-preview{
  max-width:62ch;
}