/* Design tokens: appearance (light/dark/system), user accent, glass materials.
   Every colour in a component comes from a token; measured in both themes. */
:root {
  --bp-regular: 860px;           /* documented once; the @media below repeats it (CSS cannot read it) */
  --bg: #f4f5fa;
  --bg-glow-1: color-mix(in srgb, var(--accent) 11%, transparent);   /* the whole interface follows the accent colour (Settings > Appearance) */
  --bg-glow-2: color-mix(in srgb, var(--accent) 5%, transparent);
  --surface: rgba(255, 255, 255, .72);
  --surface-solid: #ffffff;
  --surface-field: #ffffff;
  --text: #1a1c28;
  --text-muted: #525568;
  --lijn: rgba(26, 28, 40, .10);      /* dividers: decoration */
  --rand: #777a8f;                    /* control borders: >= 3:1 on --surface-field */
  --switch-off: #e5e5ea;              /* switches as on iOS: grey track, green when on, white round thumb */
  --switch-on: #34c759;
  --accent: #6c5ce7;
  --on-accent: #ffffff;
  --accent-hover: color-mix(in srgb, var(--accent) 85%, black);
  --accent-subtle: color-mix(in srgb, var(--accent) 14%, transparent);
  --danger: #b4232c;
  --ok: #1d7a3a;
  --glass-blur: saturate(180%) blur(20px);
  --glass-border: rgba(255, 255, 255, .5);
  --shadow: 0 1px 2px rgba(30, 24, 70, .05), 0 10px 28px -12px rgba(30, 24, 70, .16);
  --radius: 16px;
  --radius-sm: 10px;
  --space: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --tabbar-h: 64px;
  color-scheme: light dark;
}

:root[data-theme="dark"] {
  --bg: #0c0d15;
  --bg-glow-1: color-mix(in srgb, var(--accent) 20%, transparent);
  --bg-glow-2: color-mix(in srgb, var(--accent) 8%, transparent);
  --surface: rgba(24, 26, 39, .66);
  --surface-solid: #181a27;
  --surface-field: #12131d;
  --text: #eceef6;
  --text-muted: #b3b6c8;
  --lijn: #2a2d3f;
  --rand: #8a8da6;
  --switch-off: #39393d;
  --switch-on: #30d158;
  --danger: #ff8a90;
  --ok: #6fdc8c;
  --glass-border: rgba(255, 255, 255, .10);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0c0d15;
    --bg-glow-1: color-mix(in srgb, var(--accent) 20%, transparent);
    --bg-glow-2: color-mix(in srgb, var(--accent) 8%, transparent);
    --surface: rgba(24, 26, 39, .66);
    --surface-solid: #181a27;
    --surface-field: #12131d;
    --text: #eceef6;
    --text-muted: #b3b6c8;
    --lijn: #2a2d3f;
    --rand: #8a8da6;
    --switch-off: #39393d;
    --switch-on: #30d158;
    --danger: #ff8a90;
    --ok: #6fdc8c;
    --glass-border: rgba(255, 255, 255, .10);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -12px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 1rem/1.5 var(--font); color: var(--text); background: var(--bg);
  background-image: radial-gradient(60rem 40rem at 0% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(50rem 36rem at 100% 0%, var(--bg-glow-2), transparent 60%);
  background-attachment: fixed; min-height: 100vh; min-height: 100dvh;
}
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
p { margin: 0 0 .5rem; }
a { color: var(--accent); }
.muted { color: var(--text-muted); }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.boot { padding: 2rem; text-align: center; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Glass: floating chrome and cards. Body text stays on solid-enough surfaces. */
.glass {
  background: var(--surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow);
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Layout: one primary navigator at a time, chosen on available width. */
.app { min-height: 100vh; }
.sidebar { display: none; }
.tabbar {
  position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20;
  display: flex; justify-content: space-around; border-radius: 22px; padding: 4px;
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; min-width: 44px;
  justify-content: center; font-size: .72rem; color: var(--text-muted); text-decoration: none; border-radius: 16px; padding: 4px 2px; }
.tabbar a[aria-current="page"] { color: var(--accent); background: var(--accent-subtle); font-weight: 600; }
.tabbar a { min-width: 0; padding-inline: 0; }
.tabbar .nav-label { font-size: .68rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; position: relative; }
.nav-dot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-solid); box-sizing: content-box; }
.nav-dot[hidden] { display: none; }
.icon.mdi { fill: currentColor; stroke: none; }

/* The bar at the bottom of a phone, in two styles (Settings > Appearance): "ios" floats as a glass capsule and "android" is the native bar:
   full width on the edge, a pill behind the active icon. How glassy the iOS one is (0-100) is worked out in JavaScript (`navGlass` in ui.js)
   into plain values, --nav-alpha (the tint) and --nav-blur: Safari drops a backdrop-filter or background whose calc() or color-mix() contains
   a variable, and the bar is then not glass at all. */
:root { --surface-rgb: 255, 255, 255; --nav-alpha: .49; --nav-blur: 24px; }
:root[data-theme="dark"] { --surface-rgb: 24, 26, 39; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-rgb: 24, 26, 39; } }
.tabbar.glass { background: rgba(var(--surface-rgb), var(--nav-alpha));
  -webkit-backdrop-filter: saturate(180%) blur(var(--nav-blur)); backdrop-filter: saturate(180%) blur(var(--nav-blur));
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(255, 255, 255, .12), 0 10px 30px rgba(20, 16, 60, .16); }   /* the lit edge of the glass */
:root[data-theme="dark"] .tabbar.glass { border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar.glass { border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .5); } }
@media (prefers-reduced-transparency: reduce) { .tabbar.glass { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
html[data-nav="android"] { --tabbar-h: 80px; }
html[data-nav="android"] .tabbar.glass { left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; padding: 12px 8px calc(16px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-solid) 90%, var(--accent)); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 -1px 0 var(--lijn), 0 -3px 14px rgba(0, 0, 0, .08); }
html[data-nav="android"] .tabbar a { gap: 4px; min-height: 56px; padding: 0; border-radius: 0; background: none; font-weight: 500; color: var(--text-muted); }
html[data-nav="android"] .tabbar a .nav-icon { width: 64px; height: 32px; border-radius: 16px; transition: background-color .2s ease; }
html[data-nav="android"] .tabbar a[aria-current="page"] { background: none; color: var(--text); font-weight: 700; }
html[data-nav="android"] .tabbar a[aria-current="page"] .nav-icon { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--accent); }
html[data-nav="android"] .tabbar a:active .nav-icon { background: var(--accent-subtle); }
main { padding: 16px 16px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); max-width: 1100px; margin: 0 auto; }
@media (max-width: 859.98px) { main { padding-top: 0; } }                     /* the title bar brings its own top padding */
main:focus { outline: none; }

@media (min-width: 860px) {
  .app { display: grid; grid-template-columns: 248px 1fr; transition: grid-template-columns .2s; }
  .sidebar-collapsed .app { grid-template-columns: 76px 1fr; }
  .tabbar { display: none; }
  main { padding: 32px 32px 48px; width: 100%; }
  .sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; height: calc(100vh - 24px);
    margin: 12px 0 12px 12px; padding: 12px; border-radius: 22px; }
  .sidebar a, .sidebar .collapse, .sidebar .logout { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px;
    border-radius: 12px; color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
  .sidebar a:hover, .sidebar .collapse:hover, .sidebar .logout:hover { background: var(--accent-subtle); }
  .sidebar a[aria-current="page"] { background: var(--accent-subtle); color: var(--accent); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--accent); }                       /* active is not colour alone */
  .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 8px 8px 16px; font-weight: 700; }
  .sidebar .collapse, .sidebar .logout { color: var(--text-muted); }
  .sidebar .lang-switch { margin-top: auto; padding: 0 4px; }
  .sidebar-collapsed .sidebar .lang-switch { flex-direction: column; align-items: center; }
  .sidebar-collapsed .nav-label { display: none; }
  .sidebar-collapsed .sidebar a, .sidebar-collapsed .sidebar .collapse, .sidebar-collapsed .sidebar .logout { justify-content: center; padding: 8px; }
  .sidebar-collapsed .sidebar-brand { justify-content: center; }
}

/* Pages & cards */
.back { display: inline-block; }
.page-intro { margin: 0 0 16px; }

/* The title bar: the header of every page. It stays at the top while the page scrolls, with the page's main button (new order, customer, roll...)
   in it, so that button is always within reach. On a phone it is the bar under the status bar: its padding makes room for the notch / camera cut-out. */
.page-head { position: sticky; top: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: nowrap;
  margin: -16px -16px 12px; padding: calc(env(safe-area-inset-top) + 10px) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  min-height: calc(56px + env(safe-area-inset-top)); background: rgba(var(--surface-rgb), .94);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--lijn); }
.page-head h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-head > div:first-child { display: flex; align-items: center; gap: 12px; min-width: 4.5em; flex: 1 1 0; }
.page-head .back { white-space: nowrap; font-size: .9rem; }
.page-head > .btn, .page-head .row { flex: none; white-space: nowrap; }
.page-head .btn { padding-inline: 12px; }
@media (max-width: 559.98px) {                                           /* a phone: the bar has to hold the title and the button */
  .page-head { gap: 8px; }
  .page-head h1 { font-size: 1.2rem; }
  .page-head .btn { font-size: .9rem; padding-inline: 10px; }
  .page-head .row { gap: 6px; }
  .page-head .row .btn:not(.primary) { font-size: 0; padding-inline: 10px; min-width: 44px; justify-content: center; }   /* secondary buttons: just the icon */
}
@media (min-width: 860px) { .page-head { margin: -32px -32px 20px; padding: 14px 32px; min-height: 64px; } .page-head h1 { font-size: 1.6rem; } }
@media (prefers-reduced-transparency: reduce) { .page-head { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.card { border-radius: var(--radius); padding: 16px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.item { display: flex; flex-direction: column; gap: 10px; }
.item.archived { opacity: .7; }
.link-card { color: inherit; text-decoration: none; }
.link-card:hover { border-color: var(--accent); }
.item-head { display: flex; justify-content: space-between; gap: 8px; }
.stats { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; }
.stats dt { font-size: .78rem; color: var(--text-muted); }
.stats dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.badge { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--accent-subtle); color: var(--text); border: 1px solid var(--accent); }
.badge.muted { border-color: var(--rand); background: none; color: var(--text-muted); }
.meter { height: 8px; border-radius: 99px; background: var(--lijn); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.empty { text-align: center; color: var(--text-muted); grid-column: 1 / -1; }
.notice { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-subtle); }
.error { color: var(--danger); font-weight: 500; }

/* Buttons */
.btn, .link { font: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border-radius: 12px; border: 1px solid var(--rand); background: var(--surface-field); color: var(--text); cursor: pointer; text-decoration: none; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 44px; padding: 6px 12px; font-size: .9rem; }
.btn.icon-only { padding: 6px 10px; }
.btn.big { min-height: 52px; font-size: 1.1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 10px 0; min-height: 44px; text-align: left; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .field .lbl { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.hint { font-size: .8rem; color: var(--text-muted); margin: 0; }
input[type=text], input[type=password], input[type=email], input[type=tel], select, textarea {
  font: inherit; color: var(--text); background: var(--surface-field); border: 1px solid var(--rand);
  border-radius: var(--radius-sm); padding: 8px 12px; min-height: 44px; width: 100%; }
input[type=color] { width: 44px; height: 44px; border: 1px solid var(--rand); border-radius: 50%; padding: 2px; background: var(--surface-field); cursor: pointer; }
textarea { resize: vertical; }
.roll-count { width: 7.5rem; }
.hint.breakable { overflow-wrap: anywhere; }
.roll-count input { text-align: center; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
output.cost { font-weight: 650; font-variant-numeric: tabular-nums; min-height: 44px; display: flex; align-items: center; }

/* Calculation editor */
.editor-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .editor-grid { grid-template-columns: 1fr 340px; } .summary { position: sticky; top: 24px; } }
.two { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .two { grid-template-columns: 2fr 1fr; } }
.lines { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.line { display: grid; gap: 8px 12px; grid-template-columns: 1fr 1fr; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); align-items: end; }
.line > :first-child, .line .cost-field { grid-column: auto; }
.line > .btn.icon-only { justify-self: end; }
@media (min-width: 720px) {
  .line.filament { grid-template-columns: 1.4fr 1.4fr .8fr .8fr .8fr auto; }
  .line.parts { grid-template-columns: 1.6fr .6fr 1fr 1fr .8fr auto; }
  .line.parts.pack { grid-template-columns: 1.4fr 1.3fr .5fr .9fr .9fr .7fr auto; }
  .line.print { grid-template-columns: 1.6fr .6fr .9fr .9fr auto; }
  .line.print.energy { grid-template-columns: 1.4fr .5fr .7fr 1.2fr .8fr .7fr auto; }
  .line.add-printer { grid-template-columns: 1fr 1fr auto; border: 0; }
}
.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 16px; }
.totals dt { color: var(--text-muted); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals .sub { border-top: 1px solid var(--lijn); padding-top: 6px; color: var(--text); font-weight: 600; }
.totals .grand { font-size: 1.15rem; font-weight: 750; color: var(--text); border-top: 2px solid var(--accent); padding-top: 8px; }

/* Settings */
.toggle-row, .list-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--lijn); }
.toggle-row:first-of-type { border-top: 0; }
.toggle-row { padding: 10px 0; }
.toggle-row:has(> .switch) { flex-wrap: nowrap; }                                   /* the switch stays on the right of its text, as in iOS settings */
.toggle-row > div:first-child { flex: 1 1 220px; min-width: 0; }
.toggle-row:has(> .switch) > div:first-child { flex: 1; }
.nav-glass { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.nav-glass input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--accent); min-height: 44px; }
.nav-glass output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.toggle-row p { margin: 2px 0 0; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.segmented { display: inline-flex; border: 1px solid var(--rand); border-radius: 12px; overflow: hidden; }
.seg { min-height: 44px; padding: 8px 16px; background: var(--surface-field); color: var(--text); border: 0; font: inherit; cursor: pointer; }
.seg + .seg { border-left: 1px solid var(--rand); }
.seg[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--rand); background: var(--swatch); cursor: pointer; font-size: 1.2rem; color: #fff; text-shadow: 0 0 3px #000; }
.swatch[aria-pressed="true"] { border: 3px solid var(--text); }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; max-width: none; }
.auth-card { width: min(100%, 460px); display: flex; flex-direction: column; gap: 16px; }
.brand { display: flex; gap: 12px; align-items: center; }
.brand h1 { font-size: 1.3rem; margin: 0; }
.brand p { margin: 0; }
.setup-help { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface-field);
  border: 1px solid var(--rand); border-radius: var(--radius-sm); font-size: .9rem; }
.setup-help h3 { margin: 0; font-size: .95rem; }
.setup-help p { margin: 0; }
.setup-help ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; word-break: break-all; }
.codes { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px;
  background: var(--surface-field); border: 1px solid var(--rand); border-radius: var(--radius-sm); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; }

/* Dialogs & toasts */
/* A pop-up never outgrows the screen: it is as wide as fits (with a gutter), as tall as fits (the content scrolls, the
   X stays), and keeps clear of the notch and the home indicator. */
dialog.sheet { position: relative; border-radius: var(--radius); padding: 0; margin: auto; overflow: hidden;
  width: min(calc(100vw - 24px), 560px); max-width: none;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  color: var(--text); background: var(--surface-solid); overscroll-behavior: contain; }
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(8, 9, 18, .55); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 20px; min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
dialog.sheet h2 { padding-right: 44px; margin-top: 0; }
.sheet-body > p:first-child { padding-right: 44px; margin-top: 0; }
.dialog-x { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.dialog-x:hover { background: var(--accent-subtle); color: var(--text); }
.dialog-x .icon { width: 22px; height: 22px; }
@media (max-width: 480px) { .sheet-body { padding: 16px; } }
#toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
@media (min-width: 860px) { #toasts { bottom: 24px; } }
.toast { padding: 12px 16px; border-radius: 12px; background: var(--surface-solid); color: var(--text); border: 1px solid var(--rand); box-shadow: var(--shadow); }
.toast.error { border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Print file card */
.dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--rand); background: var(--lijn); display: inline-block; }
input[type=file] { font: inherit; color: var(--text); max-width: 100%; }
input[type=url] { font: inherit; color: var(--text); background: var(--surface-field); border: 1px solid var(--rand);
  border-radius: var(--radius-sm); padding: 8px 12px; min-height: 44px; width: 100%; }
.three { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .three { grid-template-columns: 1fr 1fr 1fr; } }

/* Hide costs: blur the cost side of a calculation, keep the selling price readable. */
.blur-costs .private { filter: blur(7px); user-select: none; transition: filter .15s; }
.row.between { justify-content: space-between; flex-wrap: nowrap; }
.row.between h2 { margin: 0; }

/* Switches look like the iOS ones: a 51 x 31 pill, grey when off and green when on, with a white round thumb that slides.
   The button (role=switch) is the one the settings use; a checkbox with class "toggle" gets the same look for the on/off options in forms. */
.switch, input.toggle { --thumb-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .10);
  position: relative; flex: none; width: 51px; height: 31px; padding: 0; margin: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--switch-off); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); transition: background-color .25s ease; -webkit-tap-highlight-color: transparent; }
.switch::before { content: ""; position: absolute; inset: -7px -4px; }                         /* a 44 px touch target around the pill */
.switch .thumb, input.toggle::after { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #ffffff;
  box-shadow: var(--thumb-shadow); transition: transform .25s cubic-bezier(.3, 1.2, .4, 1), width .25s ease; }
.switch:active .thumb, input.toggle:active::after { width: 33px; }                           /* the thumb stretches while pressed, as on iOS */
.switch[aria-checked="true"], input.toggle:checked { background: var(--switch-on); }
.switch[aria-checked="true"] .thumb, input.toggle:checked::after { transform: translateX(20px); }
.switch[aria-checked="true"]:active .thumb, input.toggle:checked:active::after { transform: translateX(14px); }
input.toggle { -webkit-appearance: none; appearance: none; }
input.toggle::after { content: ""; }
.check input.toggle { width: 51px; height: 31px; accent-color: auto; }
.switch:focus-visible, input.toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.switch:disabled, input.toggle:disabled { opacity: .5; cursor: default; }
@media (prefers-reduced-motion: reduce) { .switch, .switch .thumb, input.toggle, input.toggle::after { transition: none; } }
.btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); }

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.beta-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; vertical-align: middle; font-size: .65rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); }
.version { font-size: .72rem; font-weight: 500; color: var(--text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Barcode scanner */
.row.nowrap { flex-wrap: nowrap; }
.row.nowrap input { flex: 1; min-width: 0; }
.footnote { font-size: .8rem; margin: 0; }
.scan-frame { position: relative; overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 4 / 3; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-line { position: absolute; left: 8%; right: 8%; top: 50%; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.scan-frame[hidden], .scan-help[hidden] { display: none; }
.scan-help ol { margin: 6px 0; padding-left: 1.4em; display: grid; gap: 6px; }
.scan-help { margin-bottom: 12px; }
.scan-help p { margin: 0; }

/* Native feel: no pinch/double-tap zoom, no sideways panning or swipe-back rubber band, no tap flash. */
html, body { overscroll-behavior-x: none; touch-action: pan-y; overflow-x: hidden; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
button, .btn, nav a, .seg, .swatch, .switch, .tabbar { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* Installed on a phone: the page runs under the status bar (black-translucent), so keep clear of the
   notch and paint a dark strip behind the (always white) status text, in light mode too. */
html.standalone body { padding-top: env(safe-area-inset-top); }
html.standalone body::before { content: ''; position: fixed; z-index: 200; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top); background: #0c0d15; }
html.standalone .app, html.standalone .auth-wrap { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
html.standalone .sidebar { top: calc(12px + env(safe-area-inset-top)); height: calc(100vh - 24px - env(safe-area-inset-top)); }

/* Banners: install hint and "new version available" */
.banners { position: fixed; z-index: 150; top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; display: flex;
  flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.banner { pointer-events: auto; width: min(100%, 560px); border-radius: var(--radius); padding: 12px 16px; display: flex;
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.banner p { margin: 0; flex: 1 1 240px; }
.banner[data-banner="update"], .banner[data-banner="release"] { border-color: var(--accent); }
.status-line { margin: 0; }
.kv { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.kv > span { min-width: 10em; }
.notice { border: 1px solid var(--rand); border-radius: var(--radius-sm); padding: 12px 16px; }
.notice p { margin: 0; }
.notice ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.notice.muted { color: var(--text-muted); }
.notice.info { border-color: var(--accent); background: var(--accent-subtle); }
.notice.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.notice.danger, .notice.error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type=time], input[type=date] { font: inherit; color: var(--text); background: var(--surface-field); border: 1px solid var(--rand);
  border-radius: var(--radius-sm); padding: 8px 12px; min-height: 44px; width: 100%; }

/* Two-step verification setup */
.qr { align-self: center; background: #fff; padding: 12px; border-radius: var(--radius-sm); line-height: 0; }
.qr img { width: 200px; height: 200px; }
.secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: .06em; word-break: break-all;
  background: var(--surface-field); border: 1px solid var(--rand); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; user-select: all; }

.devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.devices li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--lijn); border-radius: 12px; }
.devices p { margin: 2px 0 0; }
.tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; background: var(--accent, #6c5ce7); color: #fff; }
.status-line { white-space: pre-line; }

.stock { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stock li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--lijn); border-radius: 12px; }
.stock li.out { opacity: .7; }
.stock p { margin: 2px 0 0; }
.stock-total { display: grid; justify-items: end; text-align: right; white-space: nowrap; }
.stock-materials { margin: 0; }
.stock-low { color: var(--danger); font-weight: 600; }

[hidden] { display: none !important; }       /* a component's own `display` must not win over the hidden attribute */

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.filters label { font-size: .875rem; color: var(--text-muted); }
.filters select { min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--rand);
  background: var(--surface-field); color: var(--text); font: inherit; max-width: 100%; }

.lang-switch { display: flex; gap: 6px; align-items: center; }
.auth-card > .lang-switch { align-self: flex-end; }
.flag-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0;
  border: 2px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; }
.flag-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle); }
.flag-btn:hover { background: var(--accent-subtle); }
.flag { width: 30px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }

/* Orders */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .seg { border: 1px solid var(--rand); border-radius: 99px; padding: 6px 14px; }
.chips .seg[aria-pressed="true"] { border-color: var(--accent); }
select.status { width: auto; min-height: 44px; }
@media (min-width: 640px) { .two.even { grid-template-columns: 1fr 1fr; } }
.line.order { grid-template-columns: 1fr 1fr; }
.line.order > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .line.order { grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem 5rem 5.5rem auto; }
  .line.order > :first-child { grid-column: auto; }
  /* a line made from a calculation has one field more (the margin): the description gets a row of its own */
  .line.order.calc { grid-template-columns: 4.5rem 5.5rem minmax(6rem, 1fr) 5rem 6rem auto; }
  .line.order.calc > :first-child { grid-column: 1 / -1; }
}
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; min-width: 0; }
.line.order > .hint { grid-column: 1 / -1; margin: 0; }
.picker { display: grid; gap: 8px; max-height: 50vh; overflow-y: auto; margin: 12px 0; }
.picker-item { width: 100%; justify-content: flex-start; text-align: left; gap: 10px; }
.picker-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.summary h3 { margin: 8px 0 0; font-size: .95rem; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
code { overflow-wrap: anywhere; white-space: normal; }

/* The sub menu of the settings */
.subnav { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 4px; scrollbar-width: thin; }
/* The tabs of a page with something that belongs beside them (the Spoolman sync on Filament): one line, wrapping under the tabs on a narrow screen. */
.subbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; }
.subbar .subnav { margin: 0; min-width: 0; }
.spoolman-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; font-size: .875rem; }
.spoolman-bar[hidden] { display: none; }
@media (max-width: 600px) { .spoolman-bar { flex: 1 1 100%; justify-content: space-between; } }
.subnav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 1px solid var(--rand); border-radius: 99px;
  color: var(--text); text-decoration: none; background: var(--surface-field); white-space: nowrap; }
.subnav a:hover { border-color: var(--accent); }
.subnav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; }

/* AI product images: the cover in the list, the photo and the made pictures in a calculation */
.cover-thumb { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--rand); background: #fff; }
.ai-source { max-width: 220px; max-height: 220px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--rand); background: #fff; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ai-tile { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ai-tile img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--rand); background: #fff; }
.ai-tile figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Busy: a spinner, and a frame in the shape of the picture to come that pulses */
.spinner { flex: none; width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--rand); border-top-color: var(--accent); animation: ai-spin .8s linear infinite; }
.spinner.small { width: 12px; height: 12px; border-width: 2px; }
.ai-progress { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--rand); border-radius: var(--radius-sm); }
.ai-progress p { margin: 2px 0 0; }
.op-progress { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--rand); border-radius: var(--radius-sm); }
.op-progress[hidden] { display: none; }
.op-progress p { margin: 0; }
.op-bar { width: 100%; height: 8px; accent-color: var(--accent); }
.ai-skeleton { width: 100%; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px dashed var(--rand); background: var(--rand); animation: ai-pulse 1.6s ease-in-out infinite; }
.ai-skeleton.v-square, .ai-skeleton.v-studio { aspect-ratio: 1 / 1; }
.ai-skeleton.v-landscape { aspect-ratio: 3 / 2; }
.ai-skeleton.v-portrait { aspect-ratio: 2 / 3; }
.ai-tile.pending figcaption { flex-direction: column; align-items: flex-start; gap: 0; }
.badge.ai-busy { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.ai-failed ul { margin: 0; padding-left: 18px; }
.ai-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ai-log-row { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--rand); }
.ai-log-row time { color: var(--muted, inherit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-level { font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .03em; }
.log-level.error { color: var(--danger); }
.ai-log-text { min-width: 0; overflow-wrap: anywhere; }
.ai-log-detail { display: block; margin-top: 2px; font-size: .8rem; opacity: .8; }
@media (max-width: 560px) { .ai-log-row { grid-template-columns: auto 1fr; } .ai-log-text { grid-column: 1 / -1; } }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .ai-skeleton { animation: none; } }
.logo-preview { max-width: 220px; max-height: 80px; object-fit: contain; padding: 6px; border: 1px solid var(--rand); border-radius: var(--radius-sm); background: #fff; }

/* Filament: the stock as tiles (two side by side on a phone, more when there is room), the roll icon and the sort buttons */
.item-head .grow { flex: 1; min-width: 0; }
.item-head { align-items: flex-start; }
.spool-icon { flex: none; --spool-colour: var(--lijn); }
.spool-flange { fill: var(--surface-solid); stroke: var(--rand); stroke-width: 1.2; }
.spool-wound { fill: var(--spool-colour); stroke: color-mix(in srgb, var(--spool-colour) 55%, #000); stroke-width: .6; }
.spool-turn { fill: none; stroke: #000; stroke-opacity: .2; stroke-width: .7; }
.spool-hub { fill: var(--surface-solid); stroke: var(--rand); stroke-width: .8; }
.spool-hole { fill: var(--rand); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.filters-details { margin: 0 0 12px; }
.filters-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.filters-details .filters { margin-top: 4px; }
.page-intro { margin-top: 8px; }
.stock-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .stock-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .stock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .stock-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--glass-border);
  box-shadow: var(--shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.tile[hidden] { display: none; }
.tile.low { border-color: var(--danger); }
.tile.out { opacity: .7; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-grams { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tile-name { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.tile p { margin: 0; font-size: .8rem; }
.tile-weights { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-tiles { align-self: center; }
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.sortbar .btn { min-height: 36px; }
.colour-row { gap: 12px; }
.colour-row input[type="color"] { width: 56px; height: 40px; padding: 2px; border-radius: var(--radius-sm); border: 1px solid var(--rand); background: var(--surface-field); }

/* Polish layer: calmer surfaces, clearer hierarchy, finished form controls. Everything comes from the tokens above, so it follows the
   accent colour and both themes. Kept at the end of the file so that it overrides earlier rules without reflowing them. */
:root { --st-new: #5b6178; --st-busy: #9a5b00; --st-sent: #0b64b8; --st-done: var(--ok); --lijn-strong: rgba(26, 28, 40, .16); --ease: cubic-bezier(.2, .7, .2, 1); }
:root[data-theme="dark"] { --st-new: #aab0c8; --st-busy: #f5b84a; --st-sent: #7cc0ff; --lijn-strong: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-new: #aab0c8; --st-busy: #f5b84a; --st-sent: #7cc0ff; --lijn-strong: rgba(255, 255, 255, .14); } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.012em; }
h1, h2 { font-weight: 700; }
.page-head h1 { font-weight: 700; letter-spacing: -.02em; }
.stats dd, .totals dd, output.cost, .tile-grams { font-variant-numeric: tabular-nums; }

/* Cards: a solid surface with a hairline and a soft two-layer shadow; the glass stays for the navigation and pop-ups. */
.card.glass { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--lijn-strong); }
.card { transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.link-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--lijn-strong)); transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(20, 16, 60, .06), 0 16px 32px -14px color-mix(in srgb, var(--accent) 45%, rgba(20, 16, 60, .3)); }
.link-card:active { transform: none; }
.item h3 a { color: var(--text); text-decoration: none; }
.item h3 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.item { gap: 12px; }
.item-head { align-items: flex-start; }
.stats { gap: 8px 28px; padding-top: 12px; border-top: 1px solid var(--lijn); }
.stats dt { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.stats dd { font-size: 1.05rem; font-weight: 700; }
.empty { padding: 32px 16px; border: 1px dashed var(--rand); background: transparent !important; box-shadow: none; }

/* Badges and status */
.badge { border: 0; background: var(--accent-subtle); color: var(--text); padding: 3px 10px; font-weight: 650; letter-spacing: .01em; }
.badge.muted { background: var(--lijn); color: var(--text-muted); }
select.status { --st: var(--st-new); font-weight: 650; padding-left: 32px; border-color: color-mix(in srgb, var(--st) 55%, var(--rand));
  background-color: color-mix(in srgb, var(--st) 11%, var(--surface-field)); }
select.status[data-status="verwerkt"] { --st: var(--st-busy); }
select.status[data-status="verstuurd"] { --st: var(--st-sent); }
select.status[data-status="afgehandeld"] { --st: var(--st-done); }

/* Buttons */
.btn { font-weight: 600; letter-spacing: .005em; transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); }
.btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 7%, var(--surface-field)); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn.primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 8px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, var(--surface-field)); border-color: var(--danger); }
.chips .seg, .subnav a { transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.chips .seg:hover:not([aria-pressed="true"]) { background: var(--accent-subtle); }

/* Form controls: a visible focus state on the field itself, a drawn arrow on every select, a finished file picker */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=url], input[type=time], input[type=date], select, textarea {
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .75; }
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.status:not([multiple]):not([size]) {                          /* the colour dot of the status comes first, the arrow after it */
  background-image: radial-gradient(circle, var(--st) 0 4.5px, transparent 5px),
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: 13px 50%, calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 10px 10px, 5px 5px, 5px 5px; }
input[type=file] { width: 100%; padding: 8px; border: 1px dashed var(--rand); border-radius: var(--radius-sm); background: var(--surface-field); cursor: pointer; }
input[type=file]:hover { border-color: var(--accent); }
input[type=file]::file-selector-button { margin-right: 12px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent-subtle); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: background-color .15s var(--ease); }
input[type=file]::file-selector-button:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.field label, .field .lbl { letter-spacing: .01em; }

/* Navigation */
.sidebar-brand { border-bottom: 1px solid var(--lijn); margin-bottom: 8px; padding-bottom: 14px; }
.brand-name { font-size: 1rem; letter-spacing: -.01em; }
.version { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (min-width: 860px) {
  .sidebar a, .sidebar .collapse, .sidebar .logout { transition: background-color .15s var(--ease), color .15s var(--ease); }
  .sidebar a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 15%, transparent); }
  .sidebar .lang-switch { padding-top: 8px; border-top: 1px solid var(--lijn); }
}
.page-head { border-bottom-color: var(--lijn-strong); }

/* The summary of a calculation and the totals: the number you are after stands out */
.totals .grand { font-size: 1.25rem; letter-spacing: -.01em; }

/* Pop-ups, toasts, auth */
dialog.sheet { border: 1px solid var(--lijn-strong); border-radius: 20px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); }
.toast { border-radius: 14px; border-color: var(--lijn-strong); box-shadow: var(--shadow); }
.auth-card.glass { padding: 28px; border-radius: 24px; }
.brand h1 { letter-spacing: -.02em; }
@media (max-width: 480px) { .auth-card.glass { padding: 20px; } }
.segmented { border-color: var(--lijn-strong); }

/* Settings: the parts as a menu with icons and groups. A column beside the page on a wide screen, a row to swipe on a phone. */
.settings-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.settings-content { min-width: 0; }
.settings-nav { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.settings-nav::-webkit-scrollbar { display: none; }
.settings-group { display: contents; }
.settings-group-title { display: none; }
.settings-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 99px; scroll-snap-align: center;
  border: 1px solid var(--lijn-strong); background: var(--surface-solid); color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.settings-nav a .icon { width: 20px; height: 20px; color: var(--text-muted); }
.settings-nav a:hover { border-color: var(--accent); }
.settings-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; }
.settings-nav a[aria-current="page"] .icon { color: inherit; }
@media (min-width: 860px) {
  .settings-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 24px; }
  .settings-nav { flex-direction: column; gap: 2px; overflow: visible; margin: 0; padding: 8px; position: sticky; top: 88px;
    background: var(--surface-solid); border: 1px solid var(--lijn-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
  .settings-group { display: flex; flex-direction: column; gap: 2px; }
  .settings-group + .settings-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lijn); }
  .settings-group-title { display: block; margin: 6px 12px 4px; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
  .settings-nav a { border: 0; border-radius: 10px; background: none; padding: 8px 12px; gap: 12px; }
  .settings-nav a:hover { background: var(--accent-subtle); }
  .settings-nav a[aria-current="page"] { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }   /* active is not colour alone */
  .settings-nav a[aria-current="page"] .icon { color: var(--accent); }
}

/* A card that folds away: only its heading stays while the button is not expanded */
.fold-head { margin: 0; }
.fold-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; margin: -8px 0; padding: 8px 0;
  background: none; border: 0; border-radius: 10px; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fold-toggle .icon { color: var(--text-muted); transition: transform .2s var(--ease), color .15s var(--ease); }
.fold-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.fold-toggle:hover .icon { color: var(--text); }
.card:has(> .fold-head [aria-expanded="false"]) > :not(.fold-head) { display: none; }
.card:has(> .fold-head [aria-expanded="false"]) { gap: 0; }
.list-row > .item-head { flex: 1 1 18rem; min-width: 0; }       /* the text takes what is left and wraps, so the buttons stay on its right while there is room */
.list-row > .row { flex: none; }