:root{--bg:#f4f1ea;--panel:#fff;--ink:#222;--accent:#e8720c;--ok:#1a7a3a;--warn:#b77900;--err:#b3261e;--line:#ddd}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.topbar{background:#111;color:#fff;padding:12px 18px}.brand{font-size:20px;font-weight:700}.sub{opacity:.8;font-size:13px}
.steps{display:flex;gap:6px;padding:10px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.steps button{flex:1;padding:10px;border:1px solid var(--line);background:#fafafa;border-radius:8px;cursor:pointer;font-size:14px}
.steps button.active{background:#111;color:#fff;border-color:#111}
.layout{display:grid;grid-template-columns:minmax(380px,480px) 1fr;gap:12px;padding:12px;max-width:1400px;margin:0 auto}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
.hidden{display:none}
h2{margin:0 0 8px}.hint{color:#555;font-size:13px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.formgrid label{display:flex;flex-direction:column;font-size:13px;gap:4px}
.formgrid input,.formgrid select,.formgrid textarea,.grid3 input{padding:8px;border:1px solid #bbb;border-radius:8px;font-size:14px}
.span2{grid-column:span 2}
.btnrow{display:flex;gap:8px;margin-top:10px}.btnrow.wrap{flex-wrap:wrap}
button{padding:9px 14px;border-radius:8px;border:1px solid #bbb;background:#fff;cursor:pointer}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.wall-legend{font-size:12px;color:#555;margin-top:8px}
.vlist{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.vitem{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px;background:#fafafa;font-size:13px}
.vitem.selected{outline:2px solid var(--accent)}
.vitem .meta{opacity:.75}
#viewerWrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
#viewer{height:520px;background:#0e141b}
.viewerbar{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font-size:12px;color:#444;flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 3px 0 8px}.dot.inde{background:#2f80ed}.dot.uden{background:#27ae60}.dot.bund{background:#9b51e0}.dot.side{background:#f2c94c}.dot.top{background:#eb5757}
.gotchas{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.g{border-radius:10px;padding:10px 12px;font-size:13px;border:1px solid}
.g.obs{background:#fff7e0;border-color:#e8c547}.g.info{background:#eaf2ff;border-color:#8fb4ff}.g.vigtigt{background:#fdeceb;border-color:#f19999}.g.fejl{background:#fdeceb;border-color:var(--err)}
.g b{display:block;margin-bottom:2px}
/* Kompakt hensyn-indikator + modal (erstatter stakken af farvede bokse) */
.notice{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 12px;font-size:13px}
.notice h4{margin:0 0 2px;font-size:14px}
.notice .sub{color:#555;font-size:12px;margin-bottom:8px}
.notice-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #111;background:#111;color:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.notice-btn.warn{background:#fff;color:#111;border-color:#111}
.notice-btn .pill{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;font-size:12px;padding:0 6px;background:#fff;color:#111}
.notice-btn .pill.red{background:var(--err);color:#fff}
.notice-btn .pill.amber{background:#e8a800;color:#111}
.notice.ok{border-color:#cfe3d3;background:#f4faf5}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.hidden{display:none}
.modal-card{background:#fff;border-radius:14px;max-width:620px;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:16px}
.modal-body{padding:14px 16px;overflow:auto}
.msec{margin:0 0 14px}
.msec h5{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#555}
.mrow{display:flex;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;font-size:13px;line-height:1.45;background:#fafafa}
.mrow .ico{flex-shrink:0}
.mrow.err{background:#fdf0f0;border-color:#e5a3a3}
.msec ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.mcard{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;background:#fcfcfc}
.mcard h3{margin:0 0 4px;font-size:15px}
.mcard{min-width:0;overflow:hidden}
.mcard .mgrid{display:grid;grid-template-columns:1fr;gap:6px;margin:8px 0}
.mcard .mgrid label{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;background:#fff;min-width:0;overflow-wrap:break-word;line-height:1.35}
.mcard .mgrid input{margin-right:6px;flex-shrink:0}
@media(min-width:1100px){.mcard .mgrid{grid-template-columns:1fr 1fr}}
.mcard select{padding:6px;border-radius:6px}
.ordre{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:10px;font-size:13px}
.ordre table{width:100%;border-collapse:collapse;font-size:13px}
.ordre th,.ordre td{border:1px solid #ddd;padding:6px;text-align:left}
footer{padding:14px;text-align:center;color:#666;font-size:12px}
@media(max-width:950px){.layout{grid-template-columns:1fr}#viewer{height:380px}}
@media print{
  .steps,.right,#viewerWrap,.viewerbar,.btnrow,footer,.modal,#modal,.topbar{display:none!important}
  .layout{display:block;max-width:none;padding:0}
  .left{width:100%}
  .panel{border:none;padding:0;margin:0}
  .panel[data-panel]:not([data-panel="5"]){display:none!important}
  .panel[data-panel="5"]{display:block!important}
  .ordre{border:none;padding:0}
}