/* Kumbh Sans (SIL Open Font License; owner, 13 Oct), served by the portal itself so no visitor's address goes to Google (audit, low).
   One variable file per script range covers weights 400-700. */
@font-face { font-family: 'Kumbh Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/kumbh-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kumbh Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/kumbh-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* JEF Layoutportal – design system (light and clean). Shared by the staff app and the customer page. */
:root{
  color-scheme:light;
  --bg:#f5f6f8;
  --surface:#ffffff;
  --subtle:#f9fafb;
  --border:#e4e7ec;
  --border-strong:#d0d5dd;
  --text:#101828;
  --text-2:#475467;
  --muted:#5b6478;
  --brand:#030335;            /* JEF navy */
  /* JEF blue (Pantone 2736 C): actions only (main buttons, links, focus). White text on it is 10:1. */
  --primary:#223683; --primary-hover:#1a2a6a; --primary-soft:#e8ebf5; --primary-ink:#223683;
  /* JEF navy: where you are (selected tab, nav item, toggle, option) - never something to click */
  --sel:#030335; --sel-bg:#e9e9f1; --sel-edge:#c9c9dc;
  /* Secondary buttons: a grey fill so they never read as an input field */
  --btn2:#eceef3; --btn2-hover:#e0e3ea; --btn2-edge:#d5d9e2;
  --go:#9ad17d; --go-hover:#86c268; --go-ink:#0b2a10;          /* JEF green: confirm / approve */
  --change:#fbc684; --change-hover:#f7b263; --change-ink:#3d2400; /* JEF light orange: request changes */
  --danger:#c4320a; --danger-soft:#fef3f2; --danger-ink:#912018;
  --kill:#f49587; --kill-hover:#ee7f6f; --kill-ink:#030335;    /* JEF light red: delete / remove for good */
  --warn-soft:#fffaeb; --warn-ink:#93370d;
  /* Status pills */
  --s-grey-bg:#f2f4f7; --s-grey:#344054;
  --s-blue-bg:#e9e9f1; --s-blue:#030335;      /* ready to send: navy tint, not the action blue */
  --s-amber-bg:#fef0c7; --s-amber:#93370d;
  --s-red-bg:#fee4e2; --s-red:#912018;
  --s-green-bg:#cae0ae; --s-green:#2b4716;    /* JEF light green */
  --s-done-bg:#d1e9dd; --s-done:#064e3b;
  /* Status dots, pins and edges of tinted panels */
  --dot-grey:#98a2b3; --dot-amber:#f79009; --dot-red:#d92d20; --dot-green:#17b26a; --dot-done:#067647;
  --edge-blue:#c9cfe6; --edge-amber:#fde3a0; --edge-red:#fecdca; --edge-green:#b3cf91;
  --placeholder:#737c8e; --hover:#eef0f3;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 4px 12px rgba(16,24,40,.08);
  --shadow-lg:0 20px 40px rgba(16,24,40,.18);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Kumbh Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;font-feature-settings:"tnum" 1,"cv11" 1}
small{font-size:max(12px,.85em)} /* the browser default (smaller) drops under the 12px floor */
::selection{background:var(--primary);color:#fff}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance;line-height:1.25}
h1{font-size:1.625rem}
h2{font-size:1.125rem}
h3{font-size:1rem}
p{margin:0}
a{color:var(--primary);text-underline-offset:3px}
a:not(.btn):hover{text-decoration-thickness:2px}
.muted{color:var(--muted)}
.small{font-size:13px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:#cdd2da transparent}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:8px 16px;border-radius:var(--r-sm);
  border:1px solid var(--btn2-edge);background:var(--btn2);color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:hover{background:var(--btn2-hover);color:var(--text)}
.btn .ic{width:17px;height:17px;vertical-align:0}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn.go{background:var(--go);border-color:var(--go);color:var(--go-ink)}
.btn.go:hover{background:var(--go-hover);border-color:var(--go-hover);color:var(--go-ink)}
.btn.change{background:var(--change);border-color:var(--change);color:var(--change-ink)}
.btn.change:hover{background:var(--change-hover);border-color:var(--change-hover);color:var(--change-ink)}
.btn.danger{background:var(--kill);border-color:var(--kill);color:var(--kill-ink)}
.btn.danger:hover{background:var(--kill-hover);border-color:var(--kill-hover);color:var(--kill-ink)}
.btn.ghost{border-color:transparent;background:none;box-shadow:none;color:var(--text-2)}
.btn.ghost:hover{background:var(--hover);color:var(--text)}
/* Quiet: a free-standing secondary action (item actions, "Rediger", "Tag opgaven"). The hairline says "button"; no fill, so the one filled button stays the main action. */
.btn.quiet{background:transparent;border-color:var(--btn2-edge);box-shadow:none;color:var(--text-2);font-weight:500}
.btn.quiet:hover{background:var(--hover);border-color:var(--border-strong);color:var(--text)}
.btn.link{border:0;background:none;box-shadow:none;padding:0;min-height:0;color:var(--primary);font-weight:600}
.btn.link:hover{text-decoration:underline;color:var(--primary-hover);background:none}
.btn.link.del,.btn.link.del:hover{color:var(--danger)} /* a text button that deletes */
.icon-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}
.btn.lg{min-height:48px;font-size:15px;padding:12px 20px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}
/* MID8: a working button says so at once: a spinning ring and "Vent …" in place of its label, and it can't be pressed twice */
.btn[aria-busy=true]{position:relative;pointer-events:none;opacity:.85;-webkit-text-fill-color:transparent} /* keeps its width: nothing around it moves */
.btn[aria-busy=true] > svg{visibility:hidden}
.btn[aria-busy=true]::before{content:"Vent …";-webkit-text-fill-color:currentColor;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:600}
html[lang=en] .btn[aria-busy=true]::before{content:"Please wait …"}
.btn[aria-busy=true]::after{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border:0;background:none;border-radius:var(--r-sm);color:var(--muted);cursor:pointer;padding:0}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn .ic{width:18px;height:18px}

/* ---------- Forms ---------- */
/* No spin arrows on number fields: they were clicked by mistake and the digits ran together (focus group round 3). */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
label,.label{display:block;font-size:14px;font-weight:500;color:var(--text-2);margin:0 0 6px}
.req{color:var(--danger)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=date],select,textarea{
  width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:9px 12px;min-height:42px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
/* Our own chevron with air to the edge (the browser's sat flush right); stroke = --text-2, as a data URI cannot read variables. */
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px 16px}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[readonly]{background:var(--subtle);color:var(--text-2)}
[aria-invalid=true]{border-color:var(--danger)!important;box-shadow:0 0 0 4px var(--danger-soft)!important}
.field{margin:0 0 18px}
.field-err{color:var(--danger);font-size:13px;margin-top:6px}
.hint{font-size:13px;color:var(--muted);margin-top:6px;max-width:75ch}
.row{display:grid;gap:0 16px}
@media (min-width:640px){.row.c2{grid-template-columns:1fr 1fr}.row.c3{grid-template-columns:repeat(3,1fr)}}
.check{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--text);font-size:15px;font-weight:400;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary);flex:none}
/* Pill options for radio / checkbox questions */
.opts,.seg{display:flex;flex-wrap:wrap;gap:8px}
.opts input,.seg input,.choice input{position:absolute;opacity:0;width:1px;height:1px}
.opts label,.seg label{margin:0;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid var(--border-strong);border-radius:999px;
  background:var(--surface);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}
.opts label:hover,.seg label:hover{border-color:var(--sel)}
/* LET5: a chosen option is light blue with a thick edge and a tick, everywhere */
.opts input:checked+label,.seg input:checked+label{background:var(--sel-bg);border-color:var(--sel);box-shadow:inset 0 0 0 1px var(--sel);color:var(--sel);font-weight:600}
.opts input:focus-visible+label,.seg input:focus-visible+label,.choice input:focus-visible+label{outline:2px solid var(--primary);outline-offset:2px}
.opts input:checked+label::before,.seg input:checked+label::before{flex:none;content:"";width:10px;height:6px;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice label{margin:0;display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border-strong);border-radius:var(--r);cursor:pointer;background:var(--surface);color:var(--text);font-weight:400}
.choice label .ic{color:var(--muted);margin-top:1px}
.choice label b{display:block;font-weight:600;font-size:14px}
.choice label small{display:block;color:var(--muted);font-size:13px}
.choice label{position:relative}
.choice input:checked+label{border-color:var(--sel);background:var(--sel-bg);box-shadow:inset 0 0 0 2px var(--sel)}
.choice input:checked+label::after{content:"";position:absolute;top:12px;right:14px;width:10px;height:6px;border:solid var(--sel);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.choice input:checked+label .ic{color:var(--sel)}
@media (max-width:480px){.choice{grid-template-columns:1fr}}
.with-unit{display:flex;align-items:center;gap:8px}
.with-unit input{max-width:140px}
.with-unit span{color:var(--muted);font-size:14px}

/* Drop zone */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px 16px;border:1.5px dashed var(--border-strong);
  border-radius:var(--r);background:var(--subtle);color:var(--text-2);cursor:pointer;margin:0;font-weight:400;transition:all .15s}
.drop:hover,.drop.over{border-color:var(--primary);background:var(--primary-soft)}
.drop .ic{width:24px;height:24px;color:var(--primary)}
.drop strong{color:var(--primary);font-weight:600}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop:has(input[aria-invalid=true]){border-color:var(--danger);background:var(--s-red-bg)}
.drop:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.drop-files{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.drop-files:empty{display:none}
.drop-file{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 10px;font-size:13px;color:var(--text)}
.drop-file small{color:var(--muted)}
/* Quality face on each chosen file (util.js QUALITY): readable before anything is uploaded */
.drop-files{flex-direction:column;align-items:stretch;width:100%;max-width:520px}
.drop-file{flex-wrap:wrap;gap:4px 8px;padding:8px 10px;text-align:left;cursor:default}
.drop-file .df-name{flex:1;min-width:0;overflow-wrap:anywhere}
.q-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--s-grey-bg);color:var(--s-grey)}
.q-badge .ic{width:16px;height:16px}
.drop-file .df-note{flex-basis:100%;font-size:12px}
.drop-file.qf-good .q-badge{background:var(--s-green-bg);color:var(--s-green)}
.drop-file.qf-ok{border-color:var(--edge-amber)}
.drop-file.qf-ok .q-badge{background:var(--s-amber-bg);color:var(--s-amber)}
.drop-file.qf-poor{border-color:var(--edge-red);background:var(--danger-soft)}
.drop-file.qf-poor .q-badge{background:var(--s-red-bg);color:var(--s-red)}
.drop-file.qf-poor .df-note{color:var(--danger-ink);font-weight:500}
.drop.has-file .drop-cta{display:none}
.drop-more{display:none}
.drop.collect .drop-more{display:block;order:2;font-size:14px}
.drop.collect .drop-more strong{color:var(--primary)}
.df-remove{width:28px;height:28px;margin:-4px -4px -4px 0}
.drop.compact{padding:12px;flex-direction:row}

/* ---------- Status pills ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap;background:var(--s-grey-bg);color:var(--s-grey)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.plain::before{display:none}
.st-awaiting_layout,.st-sample_needed,.v-draft{background:var(--s-grey-bg);color:var(--s-grey)}
.st-layout_ready,.st-sample_ready{background:var(--s-blue-bg);color:var(--s-blue)}
.st-with_customer,.st-sample_with_customer,.v-pending{background:var(--s-amber-bg);color:var(--s-amber)}
.st-rejected,.st-sample_rejected,.v-rejected{background:var(--s-red-bg);color:var(--s-red)}
.st-approved,.v-approved{background:var(--s-green-bg);color:var(--s-green)}
.st-ordered,.st-in_production{background:var(--s-done-bg);color:var(--s-done)}
.st-paused{background:var(--s-amber-bg);color:var(--s-amber)}
.st-cancelled{background:var(--subtle);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.v-superseded{background:var(--subtle);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot-grey);flex:none}
.dot.st-awaiting_layout,.dot.st-sample_needed{background:var(--dot-grey)}.dot.st-layout_ready,.dot.st-sample_ready{background:var(--sel)}.dot.st-with_customer,.dot.st-sample_with_customer{background:var(--dot-amber)}
.dot.st-rejected,.dot.st-sample_rejected{background:var(--dot-red)}.dot.st-approved{background:var(--dot-green)}.dot.st-ordered,.dot.st-in_production{background:var(--dot-done)}
.dot.st-paused{background:var(--dot-amber)}.dot.st-cancelled{background:var(--muted)}

/* Colour chips */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:3px 10px 3px 4px;border:1px solid var(--border);border-radius:999px;background:var(--surface);white-space:nowrap}
.chip:not(:has(.sw)){padding-left:10px}
.sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(16,24,40,.15);flex:none}

/* ---------- Cards and sections ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:24px}
.callout{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);font-size:14px}
.callout .ic{margin-top:1px}
.callout.info{background:var(--primary-soft);color:var(--primary-ink)}
.callout.warn{background:var(--warn-soft);color:var(--warn-ink)}
.callout.danger{background:var(--danger-soft);color:var(--danger-ink)}
.callout.ok{background:var(--s-green-bg);color:var(--s-green)}
/* Definition list for facts */
.facts{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:10px 16px;margin:0;font-size:14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}

/* ---------- Slide-over sheet (util.js sheet) ---------- */
dialog.sheet{position:fixed;inset:0 0 0 auto;margin:0;height:100%;max-height:none;width:min(560px,100%);max-width:none;padding:0;border:0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
dialog.sheet[open]{animation:slide-in .3s var(--ease)}
dialog.sheet::backdrop{background:rgba(16,24,40,.45);animation:fade .2s}
.sheet-form{display:flex;flex-direction:column;height:100%}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--border)}
.sheet-head p{color:var(--muted);font-size:14px;margin-top:4px}
.sheet-body{flex:1;overflow-y:auto;padding:24px}
.sheet-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border);background:var(--subtle)}
@keyframes slide-in{from{transform:translateX(40px);opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

/* Lightbox (util.js lightbox) */
dialog.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(16,24,40,.92);color:#fff;grid-template-rows:auto minmax(0,1fr)}
dialog.lightbox[open]{display:grid;animation:fade .2s}
dialog.lightbox::backdrop{background:transparent}
.lightbox header{display:flex;align-items:center;gap:12px;padding:12px 16px}
.lightbox header .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-stage{min-height:0;overflow:auto;display:grid;place-items:center;padding:0 16px 16px}
.lb-stage img{max-width:100%;max-height:100%;background:#fff;border-radius:8px}
.lb-stage.fill{display:block;overflow:hidden}
.lb-stage.fill img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:none;border-radius:0}
.lb-stage iframe{width:min(1100px,100%);height:100%;border:0;background:#fff;border-radius:8px}
.lightbox .icon-btn{color:#fff}
.lightbox .icon-btn:hover,.btn.ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}
.btn.ghost-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.lightbox :focus-visible{outline-color:#fff}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100% - 32px));
  padding:12px 16px;border-radius:var(--r);background:var(--text);color:#fff;box-shadow:var(--shadow-lg);font-size:14px;animation:toast-in .35s var(--ease)}
.toast.err{background:var(--danger-ink)}
.toast-undo{margin-left:6px;padding:4px 10px;min-height:32px;border:1px solid rgba(255,255,255,.45);border-radius:var(--r-sm);background:transparent;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.toast-undo:hover{background:rgba(255,255,255,.12)}
.toast-undo:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}}

/* Comment markers on a layout (K-11) */
.pin-layer{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;line-height:0}
.pin-layer img{display:block;max-width:100%;height:auto}
.pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--dot-red);color:#fff;font-size:12px;font-weight:600;line-height:22px;text-align:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(16,24,40,.35);pointer-events:none}
.pin.static{position:static;transform:none;display:inline-block;flex:none}
.pin-notes{margin:8px 0 0;padding-left:1.4em;font-size:14px}
.pin-notes li+li{margin-top:2px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.flag{width:21px;height:14px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(16,24,40,.12)}
/* Colour list field (forms.js colorField): chips you add one at a time */
.color-list:empty{display:none}
.color-list{margin-bottom:8px}
.color-list .chip{padding-right:4px}
.chip-x{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:2px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;padding:0}
.chip-x:hover{background:var(--hover);color:var(--text)}
.chip-x .ic{width:14px;height:14px}
.color-add{display:flex;gap:8px}
.color-add input{flex:1;min-width:0}
.cmyk-add{margin-top:8px;font-size:14px}
.cmyk-add summary{cursor:pointer;color:var(--primary);font-weight:600;width:fit-content}
.cmyk-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:10px}
.cmyk-row label{display:grid;gap:4px;margin:0;font-size:13px;font-weight:600;color:var(--text-2)}
.cmyk-row input{width:76px}

/* In-page yes/no question (util.js ask) */
dialog.ask{border:0;border-radius:var(--r-lg);padding:24px;width:min(420px,calc(100% - 32px));background:var(--surface);color:var(--text);box-shadow:0 24px 48px -12px rgba(16,24,40,.25)}
dialog.ask[open]{animation:fade .15s}
dialog.ask::backdrop{background:rgba(16,24,40,.45)}
.ask-text{margin:0 0 20px;font-size:15px;line-height:1.5}
.ask-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}

/* "Ingen fil" under the logo upload */
.no-file{margin-top:10px}
.no-file-note{margin-top:12px}
/* MID5: date typed the Danish way, calendar behind a button */
.date-field{position:relative;display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:260px}
.date-field .field-err{order:3;flex-basis:100%;margin:0} /* an error goes under the field, never squeezes it */
.date-field input[type=text]{flex:1;min-width:0}
.date-field .date-native{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.date-read{min-height:1.4em}