/* HFN Rulebook. Tokens, typography, header, buttons, pills and cards are taken over from Dagsrapporten
   (Dagsrapport Mashup/web/index.src.html); the layout is our own: domains, sidebar, grid, article panel, draft bar.
   Light by default, dark via the system setting unless light was chosen, or explicitly via data-theme. */
:root {
  --plane: #f4f4f1; --surface: #fcfcfb; --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7;
  --ring: rgba(11,11,11,0.10); --accent: #1c5cab; --accent-wash: #e3edfa; --good: #006300; --bad: #c22f2f;
  --sel: #009845; --sel-ink: #ffffff; --warn: #b7791f;
  --raised: #fcfcfb; --grid-head: #f4f4f1; --hover: #e3edfa; --headbar: transparent; --headbar-line: transparent; --head-gap: 0px;   /* light stays as it was */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif; --f-body: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}
/* dark: layered (plane < surface < raised), subtle 1 px borders, text contrast WCAG AA or better */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --plane: #0e1116; --surface: #161a21; --raised: #1c212a; --hover: #232935; --ink: #eef1f5; --ink-2: #c9d1db; --muted: #8b95a3; --grid: #242a33; --axis: #2a313c; --ring: rgba(255,255,255,0.07);
  --accent: #6da7ec; --accent-wash: #1b2a3f; --good: #3fbf5a; --bad: #ef6b6b; --sel: #0a7d3c; --warn: #e0b04a; --grid-head: #1c212a; --headbar: #1c212a; --headbar-line: #2a313c; --head-gap: 12px; color-scheme: dark; } }
:root[data-theme="dark"] {
  --plane: #0e1116; --surface: #161a21; --raised: #1c212a; --hover: #232935; --ink: #eef1f5; --ink-2: #c9d1db; --muted: #8b95a3; --grid: #242a33; --axis: #2a313c; --ring: rgba(255,255,255,0.07);
  --accent: #6da7ec; --accent-wash: #1b2a3f; --good: #3fbf5a; --bad: #ef6b6b; --sel: #0a7d3c; --warn: #e0b04a; --grid-head: #1c212a; --headbar: #1c212a; --headbar-line: #2a313c; --head-gap: 12px; color-scheme: dark; }
/* states derived from the tokens, so they follow the theme */
:root {
  --changed: color-mix(in srgb, var(--warn) 22%, var(--surface)); --error: color-mix(in srgb, var(--bad) 16%, var(--surface));
  --error-fg: var(--bad); --ok: var(--good); --ok-soft: color-mix(in srgb, var(--good) 14%, var(--surface));
  --draft: color-mix(in srgb, var(--warn) 12%, var(--surface)); --draft-line: color-mix(in srgb, var(--warn) 45%, var(--surface));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-tap-highlight-color: transparent; }
/* the hidden attribute must win over every explicit display below (.draft, #list-view, .banner ...) */
[hidden] { display: none !important; }
body { background: var(--plane); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45;
       height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; letter-spacing: -0.01em; }
button, select, input, textarea { font: inherit; color: var(--ink); color-scheme: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); } .small { font-size: .82rem; }

/* header (Dagsrapporten: logo | title, search, switches on the right) */
header.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 10px 16px; margin-bottom: var(--head-gap);
                  background: var(--headbar); border-bottom: 1px solid var(--headbar-line); }
.brand { display: flex; align-items: center; gap: 16px; flex: none; }
.logo { display: block; width: 92px; aspect-ratio: 331 / 129; background: var(--ink);
        -webkit-mask: url("logo.png") no-repeat left center / contain; mask: url("logo.png") no-repeat left center / contain; }
.brand-t { display: grid; gap: 1px; padding-left: 16px; border-left: 1px solid var(--axis); }
.brand-t h1 { font-size: 1.375rem; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
/* the local test app must not be mistaken for production */
.testbadge { font-family: var(--f-body); font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: #fff; background: #c2410c;
             border-radius: 999px; padding: 2px 8px; }
/* "How it works": header button + a card under the header */
.howbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--axis); border-radius: 8px;
          background: var(--surface); color: var(--ink-2); font-size: .82rem; font-weight: 500; cursor: pointer; }
.howbtn:hover, .howbtn[aria-current="page"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.howbtn svg { width: 16px; height: 16px; }
/* first visit: a small dismissible hint under the header */
.howto-hint { display: flex; align-items: center; gap: 4px; width: fit-content; margin: 0 16px 10px; padding: 3px 4px 3px 12px; border-radius: 999px;
              background: var(--accent-wash); font-size: .84rem; }
.howto-hint .hint-x { border: 0; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 2px 6px; cursor: pointer; }
.howto-hint .hint-x:hover { color: var(--ink); }
/* the "How it works" page replaces domains, sidebar and list area; it scrolls on its own */
body.howto-mode .domains, body.howto-mode .body, body.howto-mode .howto-hint { display: none; }
.howto-page { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 32px; }
.hpage { max-width: 960px; margin: 0 auto; display: grid; gap: 22px; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.hpage .hback { justify-self: start; font-size: .88rem; }
.hpage h1 { font-size: 1.75rem; line-height: 1.15; color: var(--ink); margin: -8px 0 0; outline: none; }
.hpage .hintro { margin: -12px 0 0; font-size: 1.02rem; color: var(--muted); }
.hpage section { display: grid; gap: 8px; }
.hpage h2 { font-size: 1.05rem; color: var(--ink); }
.hpage p, .hpage ul, .hpage ol { margin: 0; }
.hpage ul { padding-left: 20px; display: grid; gap: 6px; }
.hpage b { color: var(--ink); }
.ht-steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 8px; }
.ht-steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; align-items: baseline; }
.ht-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
                       background: var(--accent); color: var(--surface); font-weight: 700; font-size: .82rem; }
.ht-steps li span { grid-column: 2; }
.hcols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; }
@media (max-width: 760px) { .hcols { grid-template-columns: 1fr; } .hpage h1 { font-size: 1.4rem; } }
.hflow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin-bottom: 8px; }
.hf-box { display: grid; gap: 2px; align-content: start; flex: 1 1 150px; min-width: 0; background: var(--plane); border: 1px solid var(--axis);
          border-radius: 10px; padding: 8px 10px; font-size: .8rem; overflow-wrap: anywhere; }
.hf-box b { font-size: .86rem; }
.hf-store { border-color: var(--accent); background: var(--accent-wash); }
.hf-arrow { align-self: center; color: var(--muted); font-size: 1.1rem; }
@media (max-width: 760px) { .howbtn span { display: none; } .hf-arrow { transform: rotate(90deg); flex-basis: 100%; text-align: center; } }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.seg { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; flex: none; }
.seg button { border: 0; border-radius: 0; background: var(--surface); color: var(--ink-2); font-weight: 500; font-size: .82rem; padding: 0 10px; cursor: pointer; }
.seg button:hover { background: var(--hover); }
.seg button + button { border-left: 1px solid var(--axis); }
.seg button[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 700; }
.seg svg { width: 16px; height: 16px; display: block; }
/* smart search: the pill from Dagsrapporten */
.qsearch { position: relative; flex: 1 1 320px; max-width: 520px; min-width: 0; }
.qs-field { position: relative; display: flex; align-items: center; }
.qsearch input { width: 100%; height: 38px; border: 1px solid var(--axis); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 0 16px 0 42px; font-size: .95rem; }
.qsearch input::placeholder { color: var(--muted); }
.qsearch input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.qs-ico { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--accent); pointer-events: none; }
.dropdown { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); padding: 4px; background: var(--raised); color: var(--ink);
            border: 1px solid var(--axis); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 60vh; overflow: auto; }
.dropdown .grp { padding: 6px 8px 2px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dropdown button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font-size: .86rem; cursor: pointer; }
.dropdown button:hover { background: var(--hover); }

/* domains: the view switch of Dagsrapporten */
.domains { display: flex; gap: 4px; padding: 4px; margin: 0 16px 12px; border-radius: 999px; width: fit-content; max-width: calc(100% - 32px); flex-wrap: wrap;
           background: var(--surface); box-shadow: inset 0 0 0 1px var(--ring); }
.domains button { border: 0; border-radius: 999px; padding: 6px 14px; font-family: var(--f-display); font-weight: 500; font-size: .9rem; color: var(--ink-2); background: none; cursor: pointer; }
.domains button:not(:disabled):not(.on):hover { background: var(--hover); color: var(--ink); }
.domains button.on { background: var(--accent); color: var(--surface); font-weight: 700; }
.domains button:disabled { cursor: default; color: var(--muted); }

/* body: sidebar card | main (the grid takes the rest) */
.body { flex: 1; display: flex; gap: 12px; min-height: 0; padding: 0 16px 12px; }
.side { flex: none; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ring); padding: 12px; overflow-x: hidden; overflow-y: auto; }
.side { width: 230px; position: relative; transition: width .2s ease, padding .2s ease; }
.side-in { width: 206px; transition: opacity .15s ease; }
/* collapse button: top right of the card; collapsed the card is a 44 px rail that only shows it */
.side .side-toggle { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.side .side-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.side .side-toggle svg { width: 16px; height: 16px; display: block; transition: transform .2s ease; }
.side.collapsed { width: 44px; padding: 8px; overflow: hidden; }
.side.collapsed .side-in { opacity: 0; visibility: hidden; }
.side.collapsed .side-toggle svg { transform: rotate(180deg); }
.side.no-anim, .side.no-anim * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .side, .side-in, .side .side-toggle svg { transition: none; } }
.side .h { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin: 10px 4px 4px; }
.side .h:first-child { margin-top: 6px; margin-right: 36px; }   /* leaves room for the collapse button */
.side button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 8px; font-size: .88rem; cursor: pointer; }
.side button:hover { background: var(--hover); }
.side button.on { background: var(--accent-wash); color: var(--accent); font-weight: 700; }
.side-in { overflow-wrap: anywhere; }
/* lists: icon, title, saved-entry count */
.side .lrow { display: flex; align-items: center; gap: 8px; }
.side .licon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.side .lrow.on .licon { color: var(--accent); }
.side .lt { flex: 1; min-width: 0; }
.side .lcount { flex: none; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--plane); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; }
/* rules: collapsible, grouped by what they apply to */
.side .rules-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 6px 4px;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.side .rules-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.side .rules-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.side .rgroup { font-size: .68rem; color: var(--muted); margin: 8px 6px 2px; font-weight: 600; }
.side .rrow { display: flex; align-items: baseline; gap: 8px; padding: 4px 6px; font-size: .82rem; line-height: 1.3; color: var(--ink-2); }
.side .rrow .rid { flex: none; min-width: 30px; text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: .7rem; font-weight: 600;
  border: 1px solid var(--axis); border-radius: 6px; padding: 0 4px; color: var(--ink-2); }
.side .rrow .rt { flex: 1; min-width: 0; }
.side .rrow.cur { box-shadow: inset 3px 0 0 var(--accent); }
.side .rrow.cur .rid { border-color: var(--accent); color: var(--accent); }
.side .rrow.all { color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .side .rules-toggle svg { transition: none; } }
.img-head { display: grid; place-items: center; width: 100%; color: var(--ink-2); }
.img-head svg { width: 16px; height: 16px; }
dialog .dlg-sub { margin: 12px 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
dialog .ed-r { margin-bottom: 8px; }
dialog .ed-r select, dialog .ed-r input[type="date"] { width: 220px; max-width: 100%; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
#list-view { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.rulehint { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--ring); border-radius: 10px; padding: 9px 12px; font-size: .9rem; color: var(--ink-2); }
.rulehint a { color: var(--accent); font-weight: 700; cursor: pointer; }

/* buttons (Dagsrapporten) */
.btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 34px; border: 1px solid var(--axis); background: var(--surface);
       color: var(--ink-2); border-radius: 8px; padding: 0 12px; font-weight: 500; font-size: .84rem; white-space: nowrap; }
.btn:hover { border-color: var(--accent); color: var(--ink); background: var(--hover); }
.btn.p { background: var(--accent); border-color: var(--accent); color: var(--surface); font-family: var(--f-display); font-weight: 700; }
.btn.p:hover { color: var(--surface); }
.btn.p:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn:disabled { opacity: .45; cursor: default; }
body.viewer .edit { display: none; }
.link { color: var(--accent); cursor: pointer; font-weight: 600; background: none; border: 0; padding: 0; font: inherit; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* list search */
.find { display: flex; gap: 8px; align-items: flex-start; }
.find textarea { flex: 1; resize: vertical; min-height: 38px; max-height: 160px; border: 1px solid var(--axis); border-radius: 19px; padding: 8px 16px;
                 background: var(--surface); font-size: .92rem; }
.find textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.find .btn { height: 38px; border-radius: 999px; padding: 0 16px; }

/* quick filters: the value pills of Dagsrapporten's list boxes (selected = green) */
.quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.quick .qlabel { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-right: 4px; }
.qchip { padding: 3px 11px; border-radius: 999px; font-size: .82rem; font-weight: 500; line-height: 1.35; color: var(--ink-2); background: none; border: 1px solid var(--axis); cursor: pointer; }
.qchip:hover { border-color: var(--accent); color: var(--ink); }
.qchip.on { background: var(--sel); border-color: var(--sel); color: var(--sel-ink); font-weight: 600; }

/* active filters: Dagsrapporten's selection chips (green wash, x to remove); status chips are quiet tags */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; font-size: .82rem; }
.fchip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--sel) 14%, transparent); border: 0; border-radius: 999px;
         padding: 3px 8px 3px 10px; cursor: pointer; font-size: .82rem; }
.fchip em { font-style: normal; color: var(--muted); }
.fchip b { font-weight: 500; }
.fchip .x { color: var(--muted); font-size: 1rem; line-height: 1; }
.fchip:hover { background: color-mix(in srgb, var(--sel) 24%, transparent); }
.fchip:hover .x { color: var(--bad); }
.fclear { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: .82rem; padding: 3px 4px; cursor: pointer; }
.fclear:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip { font-size: .78rem; color: var(--muted); border: 1px solid var(--axis); border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.chip.warn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 8%, transparent); }

.toolbar { display: flex; gap: 2px 4px; align-items: center; flex-wrap: wrap; min-width: 0; }
.toolbar .btn { height: 32px; padding: 0 10px; border-color: transparent; background: none; }
.toolbar .btn:hover { border-color: var(--axis); background: var(--hover); }
.selcount { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.banner { background: var(--draft); box-shadow: inset 0 0 0 1px var(--draft-line); padding: 7px 12px; border-radius: 10px; font-size: .88rem; }

/* the grid: a Dagsrapporten card; AG Grid quartz follows our tokens, so the theme switch also switches the grid */
.grid { flex: 1; min-height: 320px; border-radius: 14px; overflow: hidden; color-scheme: inherit; }
.grid.ag-theme-quartz { color-scheme: inherit; }   /* quartz must not force light date-picker icons in dark mode */
.grid.ag-theme-quartz {
  --ag-background-color: var(--surface); --ag-foreground-color: var(--ink); --ag-secondary-foreground-color: var(--muted);
  --ag-header-background-color: var(--grid-head); --ag-header-foreground-color: var(--ink-2); --ag-border-color: var(--grid);
  --ag-row-border-color: var(--grid); --ag-odd-row-background-color: var(--surface); --ag-row-hover-color: var(--hover);
  --ag-input-focus-box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); --ag-cell-horizontal-border: solid transparent;
  --ag-selected-row-background-color: color-mix(in srgb, var(--accent) 14%, transparent); --ag-range-selection-border-color: var(--accent);
  --ag-active-color: var(--accent); --ag-checkbox-checked-color: var(--accent); --ag-input-focus-border-color: var(--accent);
  --ag-invalid-color: var(--bad); --ag-checkbox-unchecked-color: var(--muted); --ag-disabled-foreground-color: var(--muted);
  --ag-input-border-color: var(--axis); --ag-control-panel-background-color: var(--raised); --ag-menu-background-color: var(--raised); --ag-modal-overlay-background-color: color-mix(in srgb, var(--surface) 70%, transparent);
  --ag-tooltip-background-color: var(--raised); --ag-popup-shadow: 0 8px 24px rgba(0,0,0,.18); --ag-wrapper-border-radius: 14px;
  --ag-font-family: var(--f-body); --ag-font-size: 13px; --ag-header-column-resize-handle-color: var(--axis);
}
.grid .ag-header-cell-text { font-weight: 600; }
.grid .ag-floating-filter-input input[type="date"] { min-width: 0; font-size: 12px; padding: 0 2px; color-scheme: inherit; }
.grid .ag-floating-filter-input input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 2px; padding: 0; opacity: .8; }
.grid .ag-input-field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.grid .ag-cell-focus:not(.ag-cell-range-selected):focus-within { border-color: var(--accent) !important; }
.grid .ag-floating-filter-input input[type="text"] { font-size: 12px; }
.grid .empty { pointer-events: auto; display: grid; gap: 8px; justify-items: center; max-width: 440px; padding: 16px; text-align: center; color: var(--ink-2); font-size: .92rem; }
.cell-changed { background: var(--changed) !important; }
.cell-error { background: var(--error) !important; color: var(--error-fg); }

.draft { display: flex; gap: 10px; align-items: center; padding: 10px 16px; background: var(--draft); border-top: 1px solid var(--draft-line); }
.state { color: var(--muted); padding: 20px 0; }
.rule { background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--ring); padding: 16px 18px; margin-bottom: 12px; max-width: 900px; }
.rule h3 { margin: 0 0 6px; font-size: 1rem; }
.rule .meta { color: var(--muted); font-size: .8rem; margin-top: 8px; }
.rule code { background: var(--plane); padding: 0 4px; border-radius: 4px; }

/* dialogs: a Dagsrapporten card on a dimmed page */
dialog { border: 1px solid var(--axis); border-radius: 14px; padding: 18px 20px; max-width: min(900px, 94vw); background: var(--raised); color: var(--ink);
         box-shadow: 0 12px 32px rgba(0,0,0,.28); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h3 { font-size: 1.05rem; margin-bottom: 8px; }
dialog table { border-collapse: collapse; width: 100%; font-size: .84rem; }
dialog th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 0 8px 6px; }
dialog td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--grid); }
dialog td.pre { white-space: pre-line; }
dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
dialog input, dialog select, dialog textarea { padding: 6px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--plane); }
dialog textarea.wide { width: min(560px, 80vw); display: block; resize: vertical; }
dialog .count { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
dialog .msg { white-space: pre-line; margin: 0 0 4px; max-width: 520px; }
dialog .err { color: var(--error-fg); background: var(--error); border-radius: 8px; padding: 2px 8px; margin: 0; }
dialog .err:empty { display: none; }
.colpick { display: grid; gap: 6px; margin: 8px 0 4px; }
.colpick label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.scroll { max-height: 50vh; overflow: auto; }

/* save in progress: spinner + elapsed seconds, table and comment dimmed */
#dlg-body.busy .dimmable { opacity: .4; pointer-events: none; transition: opacity .2s; }
.saving { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 2px; color: var(--muted); text-align: center; }
.saving .elapsed { font-variant-numeric: tabular-nums; font-size: .78rem; }
.spin { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--accent-wash);
        border-top-color: var(--accent); animation: spin .9s linear infinite; }
.spin.sm { width: 14px; height: 14px; border-width: 2px; vertical-align: -2px; }
.btn.p .spin { border-color: color-mix(in srgb, var(--surface) 35%, transparent); border-top-color: var(--surface); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: pulse 1.6s ease-in-out infinite; border-color: var(--accent); }
  .btn.p .spin { border-color: var(--surface); }
}

/* toasts: bottom right, above the draft bar (Dagsrapporten's toast card) */
.toasts { position: fixed; right: 16px; bottom: 72px; z-index: 50; display: flex; flex-direction: column; gap: 8px;
          width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; background: var(--raised); color: var(--ink);
         border: 1px solid var(--axis); border-left: 4px solid var(--ok); border-radius: 14px; padding: 12px 10px 12px 14px;
         box-shadow: 0 10px 26px rgba(0,0,0,.24); font-size: .84rem; animation: toast-in .18s ease-out; }
.toast .ticon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); }
.toast .tbody { flex: 1; min-width: 0; }
.toast .tbody b { display: block; font-family: var(--f-display); font-size: .95rem; margin-bottom: 2px; }
.toast .tbody div { color: var(--muted); }
.toast .tclose { flex: none; border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.toast .tclose:hover { color: var(--ink); }
.toast.bad { border-left-color: var(--bad); }
.toast.bad .ticon { background: var(--error); color: var(--bad); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

@media (max-width: 760px) {
  .side { display: none; }
  .body { padding: 0 16px 10px; }
  .qsearch { order: 3; flex: 1 1 100%; max-width: none; }
  .user { display: none; }                       /* keep the width for the smart search */
  .brand-t h1 { font-size: 1.4rem; }
  .find { flex-wrap: wrap; }
  .find textarea { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- article detail panel (from the right, over the table) */
/* artno cell: clickable, selectable text and a copy button on row hover */
.artcell { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.arttext { color: var(--accent); font-weight: 600; user-select: text; cursor: pointer; overflow: hidden; text-overflow: ellipsis; }
.arttext:hover { text-decoration: underline; text-underline-offset: 3px; }
.iconlet { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
           background: none; color: var(--muted); cursor: pointer; }
.iconlet svg { width: 14px; height: 14px; }
.iconlet:hover, .iconlet:focus-visible { color: var(--accent); background: var(--hover); }
.grid .iconlet.hover-only { opacity: 0; }
.grid .ag-row-hover .iconlet.hover-only, .grid .iconlet.hover-only:focus-visible { opacity: 1; }
@media (hover: none) { .grid .iconlet.hover-only { opacity: 1; } }
.art-meta .iconlet { vertical-align: -5px; margin-left: 2px; }
.art-no { user-select: text; }
/* choice values as small badges: Active = locked (red), Inactive = muted */
.cbadge { display: inline-block; font-size: .74rem; font-weight: 600; line-height: 1.5; border-radius: 999px; padding: 0 9px;
          border: 1px solid var(--axis); color: var(--ink-2); }
.cb-active { color: color-mix(in srgb, var(--good) 80%, var(--ink)); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 14%, transparent); }
.cb-inactive { color: color-mix(in srgb, var(--bad) 85%, var(--ink)); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.ed-r select { width: 200px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--plane); }
.ed-r select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.grid .thumb-cell { display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.grid .thumb { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: var(--plane); }
.art-wrap { position: fixed; inset: 0; z-index: 40; }
.art-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .2s ease; }
.art { position: absolute; top: 0; right: 0; bottom: 0; width: min(720px, 92vw); display: flex; flex-direction: column;
       background: var(--surface); color: var(--ink); border-left: 1px solid var(--axis); box-shadow: -12px 0 32px rgba(0,0,0,.22);
       transform: translateX(100%); transition: transform .22s ease; outline: none; }
.art-wrap.open .art-backdrop { opacity: 1; }
.art-wrap.open .art { transform: none; }
@media (prefers-reduced-motion: reduce) { .art, .art-backdrop { transition: none; } }
@media (max-width: 760px) { .art { width: 100vw; border-left: 0; } }
.art-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--raised); border-bottom: 1px solid var(--axis); flex: none; }
.art-bar-t { font-family: var(--f-display); font-weight: 700; font-size: .9rem; color: var(--ink-2); margin-right: auto; }
.art-nav { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.art-pos { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--axis); border-radius: 8px;
           background: var(--surface); color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.iconbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--hover); }
.iconbtn:disabled { opacity: .4; cursor: default; }
.iconbtn svg { width: 16px; height: 16px; }
.art-body { flex: 1; overflow: auto; padding: 16px; display: grid; gap: 12px; align-content: start; }
.art-loading { display: flex; gap: 10px; align-items: center; padding: 24px; color: var(--muted); }
.art-error { color: var(--bad); }
.art-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.art-img { width: 200px; aspect-ratio: 1; border-radius: 12px; background: var(--plane); box-shadow: inset 0 0 0 1px var(--ring);
           display: grid; place-items: center; overflow: hidden; color: var(--muted); }
.art-img img { width: 100%; height: 100%; object-fit: contain; }
.art-img svg { width: 56px; height: 56px; }
.art-id { display: grid; gap: 6px; min-width: 0; }
.art-id h2 { font-size: 1.3rem; line-height: 1.2; overflow-wrap: anywhere; }
.art-sub { color: var(--ink-2); font-size: .9rem; }
.art-meta { color: var(--ink-2); font-size: .88rem; }
.art-no { color: var(--ink); font-variant-numeric: tabular-nums; }
.art-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tagchip { font-size: .74rem; border: 1px solid var(--axis); border-radius: 999px; padding: 1px 9px; color: var(--ink-2); }
.tagchip.accent { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.art-cat { font-size: .84rem; color: var(--muted); }
.acard { background: var(--surface); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ring); padding: 12px 14px; display: grid; gap: 8px; min-width: 0; }
.acard h3 { font-size: .95rem; }
.acard h4 { margin: 4px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.acard-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fl { margin: 0; display: grid; gap: 2px; }
.fl-r { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.fl-r dt { color: var(--ink-2); }
.fl-r dd { margin: 0; font-variant-numeric: tabular-nums; }
.fl-r.win { background: var(--accent-wash); }
.fl-r.win dt, .fl-r.win dd { color: var(--ink); font-weight: 600; }
.badge { display: inline-block; margin-left: 6px; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 1px 8px;
         background: var(--accent); color: var(--surface); vertical-align: 1px; }
.ed-r { display: grid; gap: 4px; }
.ed-r label { font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.ed-r input, .ed-r textarea { width: 100%; padding: 7px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--plane); resize: vertical; }
.ed-r input[type="date"] { width: 200px; max-width: 100%; }
.ed-r input:focus, .ed-r textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ed-r .cell-changed { border-color: var(--warn); }
.ed-r .cell-error { border-color: var(--bad); }
.ed-err { color: var(--bad); font-size: .8rem; }
.ed-err:empty { display: none; }
.scroll-x { overflow-x: auto; }
.atab { border-collapse: collapse; width: 100%; font-size: .84rem; }
.atab th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 0 8px 6px; }
.atab td { padding: 5px 8px; border-top: 1px solid var(--grid); }
.atab .num { text-align: right; font-variant-numeric: tabular-nums; }
.ahist { list-style: none; margin: 0; padding: 0; display: grid; }
.ahist li { display: grid; grid-template-columns: 130px 1fr; gap: 2px 10px; padding: 7px 0; border-top: 1px solid var(--grid); font-size: .86rem; }
.ahist li:first-child { border-top: 0; }
.ah-col { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ah-who { grid-column: 2; color: var(--muted); font-size: .78rem; }
.switch { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--ink-2); cursor: pointer; }
.art-ffind { width: 100%; height: 34px; border: 1px solid var(--axis); border-radius: 999px; padding: 0 14px; background: var(--plane); }
.art-ffind:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.fgroup { border-top: 1px solid var(--grid); padding-top: 6px; }
.fgroup summary { cursor: pointer; font-weight: 600; font-size: .88rem; padding: 4px 0; }
.fdl { margin: 4px 0 6px; display: grid; }
.fdl-r { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 5px 0; border-top: 1px solid color-mix(in srgb, var(--grid) 60%, transparent); }
.fdl-r:first-child { border-top: 0; }
.fdl-r dt { min-width: 0; }
.fd-name { font-size: .86rem; color: var(--ink-2); }
.fd-tech { display: block; color: var(--muted); font-size: .72rem; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.fd-about { display: block; margin-top: 4px; font-size: .78rem; color: var(--ink-2); white-space: pre-line; background: var(--plane); border-radius: 6px; padding: 6px 8px; }
.fdl-r dd { margin: 0; font-size: .86rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.info { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0 4px; font-size: .9rem; line-height: 1; }
.art-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--draft); border-top: 1px solid var(--draft-line); flex: none; }
@media (max-width: 560px) {
  .art-head { grid-template-columns: 1fr; }
  .art-img { width: 160px; }
  .fdl-r, .fl-r, .ahist li { grid-template-columns: 1fr; gap: 2px; }
  .ah-who { grid-column: 1; }
}

dialog .warnline { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 8px; padding: 6px 10px; margin: 0 0 8px; }

/* list title with the age of the product data (Qlik app reload) */
.listhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.list-title { font-size: 1.1rem; }
.data-age { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }