/* 365-Chiptuningfiles – file service portal
   One stylesheet for the customer portal and the admin panel.
   1 tokens · 2 base · 3 shell · 4 components · 5 forms · 6 tables · 7 charts · 8 pages · 9 utilities */

/* ------------------------------------------------------------------ 1 tokens */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); }

:root {
  color-scheme: light;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --page: #eceff1;
  --surface: #ffffff;
  --surface-2: #f5f7f8;      /* table heads, hover rows */
  --surface-3: #eceff1;      /* wells inside a card */
  --line: #dde4e7;           /* dividers */
  --line-strong: #7f929c;    /* input borders (3:1 on the surface) */
  --ink: #263238;
  --ink-2: #546e7a;
  --ink-3: #5f7480;

  --brand: #e5202b;          /* the red of the logo: marks, big numerals, focus */
  --brand-solid: #e5202b;    /* filled buttons / banner: white text is readable on it (4.6:1) */
  --brand-solid-hover: #c8151f;
  --brand-ink: #c8151f;      /* red text and links on light surfaces (5.9:1 on white) */
  --on-brand: #ffffff;

  --side: #333333;
  --side-ink: #ffffff;
  --side-ink-2: #c9c9c9;
  --side-hover: #454545;
  --side-active: #5c5c5c;

  --top: #ffffff;

  --info-bg: #c6e9f5;    --info-ink: #01579b;
  --success-bg: #c8e6c9; --success-ink: #1b5e20;
  --warning-bg: #fdecc0; --warning-ink: #6b4400;
  --danger-bg: #fbd5d5;  --danger-ink: #9b1c1c;
  --neutral-bg: #e3e8eb; --neutral-ink: #37474f;
  --danger-solid: #b3261e;
  --orig-solid: #546e7a;     /* the original file in the file timeline: node and band (white on it: 5.4:1) */
  --ok-solid: #2e7d32;       /* a finished step in the file timeline (white on it: 5.1:1) */

  --series-1: #e5202b;
  --series-2: #2a78d6;
  --series-3: #199e70;
  --grid: #e3e8eb;
  --axis: #b0bec5;

  --shadow: 0 1px 2px rgba(38, 50, 56, 0.14), 0 0 1px rgba(38, 50, 56, 0.10);
  --shadow-pop: 0 8px 24px rgba(38, 50, 56, 0.18), 0 0 1px rgba(38, 50, 56, 0.2);
  --radius: 3px;
  --side-width: 220px;
  --top-height: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #13161a; --surface: #1e2226; --surface-2: #252a2f; --surface-3: #171a1d;
    --line: #2f363c; --line-strong: #77848e;
    --ink: #e7ebee; --ink-2: #b0bcc4; --ink-3: #8e9ca6;
    --brand: #f0323c; --brand-solid: #e5202b; --brand-solid-hover: #f0323c; --brand-ink: #ff6b6b;
    --side: #181b1f; --side-ink: #e7ebee; --side-ink-2: #9aa7b0; --side-hover: #23282d; --side-active: #2e343a;
    --top: #1e2226;
    --info-bg: #0f3547;    --info-ink: #a9dcf5;
    --success-bg: #163f25; --success-ink: #9be3ae;
    --warning-bg: #4a3505; --warning-ink: #ffd480;
    --danger-bg: #4f1c1c;  --danger-ink: #ffb4b4;
    --neutral-bg: #2a3036; --neutral-ink: #c5ced4;
    --danger-solid: #c9372c;
    --orig-solid: #455a64; --ok-solid: #2e7d32;
    --series-1: #f0323c; --series-2: #3987e5; --series-3: #199e70;
    --grid: #2a3036; --axis: #48525a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #13161a; --surface: #1e2226; --surface-2: #252a2f; --surface-3: #171a1d;
  --line: #2f363c; --line-strong: #77848e;
  --ink: #e7ebee; --ink-2: #b0bcc4; --ink-3: #8e9ca6;
  --brand: #f0323c; --brand-solid: #e5202b; --brand-solid-hover: #f0323c; --brand-ink: #ff6b6b;
  --side: #181b1f; --side-ink: #e7ebee; --side-ink-2: #9aa7b0; --side-hover: #23282d; --side-active: #2e343a;
  --top: #1e2226;
  --info-bg: #0f3547;    --info-ink: #a9dcf5;
  --success-bg: #163f25; --success-ink: #9be3ae;
  --warning-bg: #4a3505; --warning-ink: #ffd480;
  --danger-bg: #4f1c1c;  --danger-ink: #ffb4b4;
  --neutral-bg: #2a3036; --neutral-ink: #c5ced4;
  --danger-solid: #c9372c;
  --orig-solid: #455a64; --ok-solid: #2e7d32;
  --series-1: #f0323c; --series-2: #3987e5; --series-3: #199e70;
  --grid: #2a3036; --axis: #48525a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-pop: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------- 2 base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 15px; line-height: 1.35; font-weight: 600; }
h3 { font-size: 14px; line-height: 1.4; font-weight: 600; }
a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
strong, b { font-weight: 600; }
small { font-size: 12.5px; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--brand); color: #fff; }

.icon {
  width: 18px; height: 18px; flex: none; vertical-align: -4px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 15px; height: 15px; vertical-align: -3px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 34px; height: 34px; stroke-width: 1.6; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--surface); color: var(--ink);
  padding: 8px 12px; border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: 8px; }

/* -------------------------------------------------------------------- 3 shell */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--top-height); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 0 20px 0 0;
  background: var(--top); border-bottom: 1px solid var(--line);
}
.topbar-brand {
  width: var(--side-width); flex: none; height: 100%; display: flex; align-items: center; padding: 0 12px 0 16px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: -0.015em;
}
.topbar-brand img { max-height: 36px; max-width: 170px; }
.topbar-brand img.logo-compact { max-width: 184px; width: auto; height: auto; }
.topbar-brand picture img, .auth-brand picture img { display: block; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--surface); flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-right: 10px;
}
.brand-text { line-height: 1.15; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand-text span { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.logo-light { display: block; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .logo-light { display: none; }
  :root:where(:not([data-theme="light"])) .logo-dark { display: block; }
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.topbar-right { margin-left: auto; flex: none; }        /* the buttons keep their size: when the bar is full, the left side gives way */
.topbar-left { flex: 1 1 0; container: topleft / inline-size; }
@container topleft (max-width: 199px) { .topbar-left .top-link { visibility: hidden; } }     /* no room for "Back to website": not half of it */
.top-link {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.top-link:hover { background: var(--surface-2); }
.top-link .icon { color: var(--brand); }
.top-link.plain .icon { color: var(--ink-2); }
.top-credits { display: inline-flex; align-items: center; gap: 12px; }
.top-credits b { font-weight: 700; font-variant-numeric: tabular-nums; }
.top-credits span { color: var(--ink-2); font-weight: 500; }
.top-buy { margin-left: 8px; }
@media (max-width: 1279px) { .topbar .top-buy { display: none; } }
.top-link.has-low { position: relative; }
.coin-low { display: none; position: absolute; top: 6px; left: 22px; width: 9px; height: 9px; border-radius: 50%; background: #e8a200; box-shadow: 0 0 0 2px var(--top); }
@media (max-width: 640px) { .coin-low { display: block; } }      /* where the amounts are not in the bar (see .top-credits below) */
.nav-toggle { display: none; margin-left: 8px; position: relative; }
.toggle-dot { position: absolute; top: 8px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-solid); box-shadow: 0 0 0 2px var(--top); }
.mobile-only { display: none !important; }

/* language: NL | EN */
.lang-switch { display: inline-flex; margin: 0 4px; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lang-switch button {
  border: 0; background: none; min-height: 26px; padding: 3px 10px; color: var(--ink-2); cursor: pointer;
  font-weight: 700; font-size: 12px; letter-spacing: 0.04em; line-height: 1.2;
}
.lang-switch button + button { border-left: 1px solid var(--line); }
.lang-switch button:hover { background: var(--surface-2); color: var(--ink); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--surface); cursor: default; }
.lang-switch button:focus-visible { outline-offset: -2px; }
.side-lang { display: none; }

/* theme: a switch with the sun or the moon on the knob */
.theme-switch { display: inline-flex; align-items: center; padding: 8px 6px; margin: 0 2px; border: 0; background: none; border-radius: 999px; cursor: pointer; }
.ts-track { position: relative; display: block; width: 44px; height: 24px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line-strong); transition: background 0.2s, border-color 0.2s; }
.theme-switch:hover .ts-track { border-color: var(--ink-2); }
.ts-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.ts-knob .icon { width: 12px; height: 12px; }
.ts-moon { display: none; }
:root[data-theme="dark"] .ts-track { background: var(--side-active); }
:root[data-theme="dark"] .ts-knob { transform: translateX(20px); background: var(--ink); color: var(--page); }
:root[data-theme="dark"] .ts-sun { display: none; }
:root[data-theme="dark"] .ts-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .ts-track { background: var(--side-active); }
  :root:where(:not([data-theme="light"])) .ts-knob { transform: translateX(20px); background: var(--ink); color: var(--page); }
  :root:where(:not([data-theme="light"])) .ts-sun { display: none; }
  :root:where(:not([data-theme="light"])) .ts-moon { display: block; }
}

.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #f9d2d4; color: #8a1c24; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
:root[data-theme="dark"] .avatar { background: #4a2a2e; color: #ffc9cd; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .avatar { background: #4a2a2e; color: #ffc9cd; } }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }

/* dropdown menus are <details> elements: they work without JavaScript */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 40; padding: 6px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none;
  border-radius: var(--radius); color: var(--ink); text-decoration: none; text-align: left; cursor: pointer;
  font-weight: 500;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); }
.menu-panel .icon { color: var(--ink-2); }
.menu-panel hr { margin: 6px 0; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head b { display: block; }
.menu-head span { color: var(--ink-2); font-size: 12.5px; word-break: break-all; }
.menu-choice[aria-pressed="true"] { background: var(--surface-2); font-weight: 600; }
.menu-choice[aria-pressed="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }

.sidebar {
  position: fixed; top: var(--top-height); bottom: 0; left: 0; width: var(--side-width); z-index: 20;
  background: var(--side); color: var(--side-ink); overflow-y: auto; padding: 16px 16px 24px;
}
.side-title { font-size: 12.5px; font-weight: 700; color: var(--side-ink); padding: 4px 0 12px; }
.side-nav a, .side-nav summary {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 12px; margin-bottom: 2px;
  color: var(--side-ink); text-decoration: none; font-weight: 600; font-size: 13.5px; border-radius: 2px;
  cursor: pointer; list-style: none;
}
.side-nav summary::-webkit-details-marker { display: none; }
.side-nav a:hover, .side-nav summary:hover { background: var(--side-hover); }
.side-nav a[aria-current="page"] { background: var(--side-active); }
.side-nav .icon { color: var(--side-ink-2); }
.side-nav a[aria-current="page"] .icon { color: var(--side-ink); }
.side-nav .chev { margin-left: auto; transition: transform 0.15s ease; }
.side-nav details[open] > summary .chev { transform: rotate(180deg); }
.side-sub { padding: 2px 0 6px 28px; }
.side-sub a { font-weight: 500; font-size: 13px; min-height: 32px; padding: 5px 10px; color: var(--side-ink-2); }
.side-sub a:hover, .side-sub a[aria-current="page"] { color: var(--side-ink); }
.side-count {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-solid); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.side-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; color: var(--side-ink-2); }

.main { margin-left: var(--side-width); padding: calc(var(--top-height) + 20px) 24px 40px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head p { color: var(--ink-2); margin-top: 4px; max-width: 70ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.backlink { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.backlink:hover { color: var(--ink); }
.scrim { display: none; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .topbar { padding-right: 10px; }
  .topbar-brand { width: auto; padding: 0 8px 0 12px; }
  .brand-text span { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: none; }
  .nav-open .sidebar { transform: none; box-shadow: var(--shadow-pop); }
  .nav-open .scrim { display: block; position: fixed; inset: var(--top-height) 0 0 0; z-index: 15; background: rgba(0, 0, 0, 0.45); }
  .main { margin-left: 0; padding-left: 14px; padding-right: 14px; }
  .hide-mobile { display: none !important; }
  .side-nav a.mobile-only { display: flex !important; }
  /* the bar must fit on a 320 px phone: the name shrinks, menus stay on the screen */
  .topbar { gap: 2px; }
  .topbar-brand { flex: 0 1 auto; min-width: 0; }
  .brand-text { min-width: 0; }
  .topbar-right { flex: none; }
  .menu-panel { position: fixed; top: calc(var(--top-height) + 4px); right: 8px; max-width: calc(100vw - 16px); }
}
@media (max-width: 600px) {
  .topbar .top-lang { display: none; }
  .side-lang { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .side-lang > span { display: inline-flex; align-items: center; gap: 8px; color: var(--side-ink-2); font-size: 12.5px; font-weight: 600; }
  .side-lang .lang-switch { margin: 0; border-color: rgba(255, 255, 255, 0.35); background: transparent; }
  .side-lang .lang-switch button { color: var(--side-ink-2); }
  .side-lang .lang-switch button + button { border-left-color: rgba(255, 255, 255, 0.2); }
  .side-lang .lang-switch button:hover { background: var(--side-hover); color: var(--side-ink); }
  .side-lang .lang-switch button[aria-pressed="true"] { background: var(--side-ink); color: var(--side); }
}
@media (max-width: 480px) {
  .top-credits { display: none; }
  .brand-text { font-size: 13px; }
  .topbar-brand img.logo-compact { max-width: 150px; }
  .auth-top { flex-wrap: wrap; }
  .auth-brand { flex-basis: 100%; }
  .auth-tools { margin-left: auto; }
  .topbar .top-link { padding: 0 8px; }
}
@media (max-width: 360px) {
  .brand-text { display: none; }
  .topbar-brand img.logo-compact { max-width: 130px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --------------------------------------------------------------- 4 components */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-danger { box-shadow: var(--shadow), inset 3px 0 0 var(--danger-solid); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line); min-height: 50px;
}
.card-head a { font-weight: 600; }
.card-body { padding: 16px; }
.card-body + .card-body { border-top: 1px solid var(--line); }
.card-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-flush { padding: 0; }

.grid { display: grid; gap: 16px; }
.main > :is(.grid, .card, .notice, .credit-banner, .deal-banner) + :is(.grid, .card, .notice, .credit-banner, .deal-banner) { margin-top: 16px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.cols-half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.grid.stretch { align-items: stretch; }
.grid.stretch > .grid { align-items: stretch; }
.span-2 { grid-column: span 2; }
@media (max-width: 1100px) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-main { grid-template-columns: minmax(0, 1fr); } }
/* Mail → Templates: the text on the left, the e-mail it becomes on the right (as wide as a phone) */
.cols-mail { grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); align-items: start; }
@media (max-width: 1100px) { .cols-mail { grid-template-columns: minmax(0, 1fr); } }
/* an e-mail shown in a frame; the script gives the frame the height of the mail */
.mail-frame { display: block; width: 100%; height: 640px; border: 1px solid var(--line); border-radius: var(--radius); background: #e8edef; }
@media (max-width: 800px) { .cols-2, .cols-3, .cols-half { grid-template-columns: minmax(0, 1fr); } .span-2 { grid-column: auto; } }
@media (max-width: 520px) { .cols-4 { grid-template-columns: minmax(0, 1fr); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: 13.5px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-solid-hover); border-color: var(--brand-solid-hover); }
/* Red is the brand colour, so a destructive action is outlined rather than filled: it reads as a warning,
   not as the primary button. */
.btn-danger { background: var(--surface); border-color: var(--danger-solid); color: var(--danger-ink); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-ghost { border-color: transparent; background: none; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-inverse { background: #fff; border-color: #fff; color: #b5121c; }
.btn-inverse:hover { background: #fff1f1; }
.btn-sm { min-height: 30px; padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.link-button { background: none; border: 0; padding: 0; color: var(--brand-ink); text-decoration: underline; cursor: pointer; font-weight: 600; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 11px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; line-height: 1.5; background: var(--neutral-bg); color: var(--neutral-ink);
}
.badge-info { background: var(--info-bg); color: var(--info-ink); }
.badge-success { background: var(--success-bg); color: var(--success-ink); }
.badge-warning { background: var(--warning-bg); color: var(--warning-ink); }
.badge-danger { background: var(--danger-bg); color: var(--danger-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; display: inline-block; }

.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius);
  background: var(--info-bg); color: var(--info-ink);
}
.notice .icon { margin-top: 1px; }
.notice a { color: inherit; font-weight: 600; }
.notice-body { min-width: 0; flex: 1; }
.notice-success { background: var(--success-bg); color: var(--success-ink); }
.notice-warning { background: var(--warning-bg); color: var(--warning-ink); }
.notice-danger, .notice-error { background: var(--danger-bg); color: var(--danger-ink); }
.notice + .notice { margin-top: 8px; }
.error-links { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.error-links:has(li:only-child) { padding-left: 0; list-style: none; }
.notice-close { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 2px; border-radius: 2px; }

/* Messages after an action: small cards at the bottom right that slide up and go away by themselves. */
.toasts {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 360px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toasts:empty { display: none; }
.toast {
  position: relative; overflow: hidden; pointer-events: auto; display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(38, 50, 56, 0.16); padding: 12px 12px 14px 14px;
  animation: toast-in 260ms cubic-bezier(.2, .8, .2, 1) both;
}
.toast.is-leaving { animation: toast-out 180ms ease-in both; }
.toast-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.toast-icon .icon { width: 14px; height: 14px; }
.toast-success .toast-icon { background: var(--success-bg); color: var(--success-ink); }
.toast-info .toast-icon { background: var(--info-bg); color: var(--info-ink); }
.toast-warning .toast-icon { background: var(--warning-bg); color: var(--warning-ink); }
.toast-error .toast-icon { background: var(--danger-bg); color: var(--danger-ink); }
.toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.toast-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.toast-text a { color: inherit; font-weight: 600; }
.toast-close { flex: none; border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 2px; line-height: 0; border-radius: 2px; }
.toast-close:hover { color: var(--ink); }
.toast-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left; background: var(--ink-3);
  animation: toast-bar linear forwards; animation-duration: var(--toast-seconds, 5s);
}
.toast-success .toast-bar { background: var(--success-ink); }
.toast-info .toast-bar { background: var(--info-ink); }
.toast-warning .toast-bar { background: var(--warning-ink); }
.toast-error .toast-bar { background: var(--danger-ink); }
.toast[data-seconds="0"] .toast-bar { display: none; }
.toast:hover .toast-bar, .toast:focus-within .toast-bar, .toast.is-paused .toast-bar { animation-play-state: paused; }
@keyframes toast-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving { animation: none; }
}
@media (max-width: 1100px) {
  .toasts { left: 16px; right: 16px; width: auto; bottom: 76px; max-width: none; }
  body.has-fs-bar .toasts { bottom: 92px; }
}

.stat-value { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--brand); letter-spacing: -0.01em; }
:root[data-theme="dark"] .stat-value { color: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .stat-value { color: #ff6b6b; } }
.stat-label { color: var(--ink); margin-top: 4px; }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stat-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; text-decoration: none; color: inherit; }
.stat-link .stat-value, .stat-link .stat-label { display: block; }
.stat-link .icon { color: var(--brand); }
.stat-link:hover .stat-label { text-decoration: underline; }
@media (max-width: 520px) { .stat-row { gap: 10px; } .stat-value { font-size: 24px; } .stat-label { font-size: 13px; } }

.credit-banner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 20px; border-radius: var(--radius);
  background: var(--brand-solid); color: var(--on-brand); box-shadow: var(--shadow);
}
.credit-banner h2 { width: 100%; font-size: 13.5px; font-weight: 600; margin-bottom: -8px; }
.credit-wallets { display: flex; gap: 32px; flex-wrap: wrap; flex: 1; }
.credit-wallet b { display: block; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.credit-wallet span { font-size: 14px; font-weight: 600; }
.credit-banner .credit-note { flex: 1 0 100%; margin: -10px 0 0; font-size: 12.5px; }
@media (max-width: 640px) {
  .credit-banner { gap: 16px; }
  .credit-wallets { flex: 1 0 100%; gap: 12px 24px; }
  .credit-wallet b { font-size: 26px; }
  .credit-banner .credit-note { margin-top: -6px; }
  .top-credits { display: none; }
}

.empty { text-align: center; padding: 36px 16px; color: var(--ink-2); }
.empty .icon { color: var(--ink-3); margin-bottom: 8px; }
.empty h3 { color: var(--ink); margin-bottom: 4px; font-size: 15px; }
.empty .btn { margin-top: 14px; }

.dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 16px; }
.dl dt { color: var(--ink-2); }
.dl dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .dl dd { margin-bottom: 8px; } }

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a, .tabs button {
  padding: 10px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer;
  color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center;
}
.tabs a[aria-current="page"], .tabs button[aria-selected="true"] { color: var(--brand-ink); border-bottom-color: var(--brand); }
.tab-count { background: var(--neutral-bg); color: var(--neutral-ink); border-radius: 9px; padding: 0 6px; font-size: 12px; }

/* A conversation (tickets, and the messages on a file service) reads like a chat: the other side on the left, your own
   messages on the right (the shop sees its own on the right, the customer theirs). Every message has the initials of who
   wrote it and a bubble; a file is a card in the bubble. A hairline with the date marks a new day, and what the same person
   wrote in the same minute follows in one stack (.msg-more). The markup is in templates/macros/thread.html. Your own side
   takes the brand colour, the other side the neutral ones, so the accent colour of the shop shows. */
.thread { display: flex; flex-direction: column; gap: 14px; }
.card-body.thread { padding-block: 20px 24px; }
.thread-day { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.thread-day::before, .thread-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.msg-mine { flex-direction: row-reverse; }
.msg-more { margin-top: -10px; }
.msg-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-bg);
              color: var(--neutral-ink); font-size: 12px; font-weight: 700; line-height: 1; }
.msg-mine .msg-avatar { background: var(--brand-solid); color: var(--on-brand); }
.msg-internal .msg-avatar { background: var(--warning-ink); color: var(--warning-bg); }
.msg-avatar-space { flex: none; width: 32px; }
.msg-main { min-width: 0; max-width: 620px; display: grid; gap: 4px; justify-items: start; }
.msg-mine .msg-main { justify-items: end; }
.msg-bubble { min-width: 0; max-width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.msg-mine .msg-bubble { border-color: color-mix(in srgb, var(--brand) 24%, var(--surface)); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.msg-internal .msg-bubble { border-color: color-mix(in srgb, var(--warning-ink) 30%, var(--warning-bg)); background: var(--warning-bg); color: var(--warning-ink); }
.msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 4px; font-size: 13px; }
.msg-head b { font-weight: 600; }
.msg-head time { color: var(--ink-2); font-size: 12.5px; }
.msg-internal .msg-head time { color: inherit; }
.msg-ticket { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.icon-link { display: inline-flex; gap: 5px; align-items: center; }
.msg-body { overflow-wrap: anywhere; }
.msg-line { display: flex; align-items: flex-start; gap: 8px; }
.msg-line .msg-body { flex: 1; min-width: 0; }
.msg-line .msg-actions { margin-block: -4px; }
.msg-head + .msg-files { margin-top: 8px; }
.msg-body + .msg-files { margin-top: 10px; }
.msg-foot { margin-top: 6px; }
/* What the shop sent can be changed afterwards: "edited" under the message (both sides see it), the two small buttons
   in its head (the shop only) */
.msg-edited { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 12.5px; }
.msg-internal .msg-edited { color: inherit; }
.msg-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; margin-right: -6px; }
.msg-head .msg-actions { margin-block: -4px; }
.msg-actions form { display: inline-flex; }
.msg-act { position: relative; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
           border: 0; border-radius: 4px; background: transparent; color: var(--ink-3); cursor: pointer; }
.msg-act:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.msg-internal .msg-act { color: inherit; }
.msg-act-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* a file in a message: its extension on a tile, the name (a long one wraps instead of pushing the page sideways on a phone),
   the size and - for the shop - whether the other side fetched it, and the button that downloads it */
.msg-files { display: grid; gap: 8px; min-width: 0; }
.msg-file { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 10px 10px 12px; background: var(--surface);
            border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.msg-mine .msg-file { border-color: color-mix(in srgb, var(--brand) 24%, var(--surface)); }
.file-ext { flex: none; width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; background: var(--neutral-bg);
            color: var(--neutral-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.msg-mine .file-ext, .file-pick .file-ext { background: color-mix(in srgb, var(--brand) 12%, var(--surface));
                                            color: color-mix(in srgb, var(--brand-ink) 75%, var(--ink)); }
.msg-file-main { min-width: 0; flex: 1; }
.msg-file-name { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.msg-file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 2px; color: var(--ink-2); font-size: 12.5px; }
.msg-file .file-state { align-items: flex-start; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.msg-file .file-state > .icon { margin-top: 2px; }
.msg-file .file-state > span { min-width: 0; }
.msg-file-get { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
                border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--ink); }
.msg-file-get:hover { background: var(--surface-2); }
/* under the last message of the shop: did the customer read it */
.msg-receipt { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.msg-receipt-ok { color: var(--success-ink); }
@media (max-width: 520px) {
  .thread { gap: 12px; }
  .msg { gap: 0; }
  .msg-avatar, .msg-avatar-space { display: none; }
  .msg-main { max-width: 94%; }
  .msg-bubble { padding: 10px 12px; }
}

/* what the customer wrote with the upload, on the file service page of the shop: seen at once */
.customer-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
                 border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); }
.customer-note .icon { color: var(--brand); flex: none; margin-top: 2px; }
.customer-note blockquote { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-row > .icon { color: var(--ink-2); }
.file-meta { min-width: 0; flex: 1; }
.file-meta b { display: block; overflow-wrap: anywhere; font-weight: 600; }
.file-meta span { display: block; color: var(--ink-2); font-size: 12.5px; }

/* The files of a file service as a timeline: every station is a moment in the life of the file (the original comes in,
   the result goes out, the customer fetches it). The colours come from the brand variables, so the accent colour of the
   shop is used; only the original has a colour of its own (slate). A station that has not been reached yet is dashed. */
.ftl { --ftl-node: 36px; --ftl-gap: 16px; list-style: none; margin: 0; padding: 20px 20px 22px; }
.ftl-step { position: relative; display: grid; grid-template-columns: var(--ftl-node) minmax(0, 1fr); column-gap: var(--ftl-gap); padding-bottom: 22px; }
.ftl-step:last-child { padding-bottom: 0; }
.ftl-step::before { content: ""; position: absolute; left: calc(var(--ftl-node) / 2 - 1px); top: calc(var(--ftl-node) + 4px); bottom: 4px; width: 2px; background: var(--line-strong); opacity: .55; }
.ftl-step.ftl-next-todo::before { width: 0; background: none; border-left: 2px dashed var(--line-strong); opacity: .75; }
.ftl-step:last-child::before { display: none; }
.ftl-node { width: var(--ftl-node); height: var(--ftl-node); border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--orig-solid); }
.ftl-mod > .ftl-node, .ftl-now > .ftl-node { background: var(--brand-solid); }
.ftl-ok > .ftl-node { background: var(--ok-solid); }
.ftl-now > .ftl-node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 24%, transparent); }
.ftl-todo > .ftl-node { background: var(--surface); color: var(--ink-2); border: 2px dashed var(--line-strong); }
.ftl-main { min-width: 0; }
.ftl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: var(--ftl-node); }
.ftl-head h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.ftl-todo .ftl-head h3 { color: var(--ink-2); }
.ftl-sub { color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.ftl-when { margin-left: auto; color: var(--ink-2); font-size: 12.5px; text-align: right; }
.ftl-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.ftl-note .icon { margin-top: 2px; color: var(--brand-ink); }
.ftl-panel { margin-top: 10px; padding: 14px 16px; min-width: 0; border: 1px solid var(--line); border-left: 4px solid var(--orig-solid); border-radius: var(--radius); background: var(--surface-2); }
.ftl-panel-mod { border-color: color-mix(in srgb, var(--brand) 24%, var(--surface)); border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.ftl-panel-todo { padding: 12px 16px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--ink-2); }
.ftl-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ftl-file + .ftl-file { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ftl-panel-mod .ftl-file + .ftl-file { border-top-color: color-mix(in srgb, var(--brand) 24%, var(--surface)); }
.ftl-file > .icon { color: var(--ink-2); }
.ftl-panel-mod .ftl-file > .icon { color: var(--brand-ink); }
.ftl-meta { min-width: 0; flex: 1 1 300px; }
.ftl-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.ftl-info { display: block; color: var(--ink-2); font-size: 12.5px; }
.ftl-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; }
.ftl-actions form { display: inline-flex; }
.ftl-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: 13px; color: var(--ink-2); }
.ftl-extra b { color: var(--ink); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.ftl-extra .btn { margin-left: auto; }
.ftl-panel > .ftl-extra:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ftl-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--brand) 24%, var(--surface)); }
.ftl-foot-note { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); font-size: 13.5px; }
.ftl-foot-note .icon { margin-top: 2px; color: var(--brand-ink); }
.ftl-panel .ftl-up { gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--brand) 24%, var(--surface)); }
.ftl-panel .ftl-up:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ftl-panel .ftl-up label { font-weight: 600; font-size: 13.5px; }
.ftl-panel .dropzone { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; background: var(--surface); }
.ftl-panel .dropzone input[type="file"] { flex: 1 1 220px; width: 100%; min-width: 0; }
.ftl-panel .dropzone .file-list, .ftl-panel .dropzone .dropzone-error { flex: 1 1 100%; }
/* the little state lines under a file: green when the customer has it */
.file-state.file-state-ok { color: var(--success-ink); }
/* on a phone the buttons go under the file name instead of squeezing it */
@media (max-width: 640px) {
  .msg { max-width: 94%; }
  .file-row { flex-wrap: wrap; row-gap: 8px; }
  .file-row > .file-meta { flex: 1 1 calc(100% - 48px); }
  .file-row > .file-meta + * { margin-left: 36px; }
}
@media (max-width: 640px) {
  .ftl { --ftl-node: 32px; --ftl-gap: 12px; padding: 16px 14px 18px; }
  .ftl-step { padding-bottom: 20px; }
  .ftl-head { gap: 0 8px; }
  .ftl-head h3 { font-size: 16px; }
  .ftl-sub { font-size: 13px; }
  .ftl-when { flex-basis: 100%; margin-left: 0; text-align: left; }
  .ftl-panel { padding: 12px; }
  .ftl-panel-todo { padding: 10px 12px; }
  .ftl-file { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
  .ftl-file > .icon { margin-top: 2px; }
  .ftl-meta { flex: 1 1 calc(100% - 40px); }
  .ftl-actions { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; }
  .ftl-actions > .btn:not(.btn-ghost) { flex: 1 1 auto; }
  .ftl-extra .btn { flex: 1 1 100%; margin: 6px 0 0; }
}

.steps { display: flex; gap: 0; counter-reset: step; }
.step { flex: 1; position: relative; padding-top: 22px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.step::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: var(--line); }
.step::after { content: ""; position: absolute; top: 1px; left: calc(50% - 7px); width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.step-done { color: var(--ink); }
.step-done::before { background: var(--brand); }
.step-done::after { border-color: var(--brand); background: var(--brand); }
.step-now { color: var(--ink); }
.step-now::after { border-color: var(--brand); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }
.pager-links { display: flex; gap: 4px; align-items: center; }
.pager-links a, .pager-links span { min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center; border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-links a:hover { background: var(--surface-2); }
.pager-links [aria-current="page"] { background: var(--brand-solid); color: #fff; }

.order-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; padding: 16px; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
.order-strip > div { scroll-snap-align: start; }
.order-strip a { font-weight: 600; }

.clock { display: flex; gap: 4px; justify-content: center; align-items: center; font-variant-numeric: tabular-nums; }
.clock span { width: 32px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; font-weight: 500; background: var(--surface); }
.clock i { font-style: normal; font-weight: 700; color: var(--ink-2); }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 3px 0; }
.hours td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.hours tr.today td { color: var(--brand-ink); }

.greeting { display: flex; align-items: center; gap: 16px; }
.greeting h1 { font-size: 20px; }
.greeting p { color: var(--ink-2); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ok { color: var(--success-ink); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }

/* My details: how it stands with becoming a customer of the shop at EVC (under the EVC customer number) */
#evc-link-note { font-size: 13px; max-width: 72ch; }
.evc-link-state { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; max-width: 72ch; }
.evc-link-state .icon { flex: none; margin-top: 3px; }
.evc-link-linked { color: var(--success-ink); }
.evc-link-waiting { color: var(--ink-2); }
.evc-link-refused, .evc-link-limited { color: var(--danger-ink); }

.checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .icon { margin-top: 2px; }
.check-done .icon { color: var(--success-ink); }
.check-todo .icon { color: var(--warning-ink); }

/* -------------------------------------------------------------------- 5 forms */
.form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.form-grid .wide, .form-grid-3 .wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 5px; align-content: start; min-width: 0; }
.field > label, .field > .label { font-weight: 600; font-size: 13.5px; }
.field .hint { color: var(--ink-2); font-size: 12.5px; }
.field .error { color: var(--danger-ink); font-size: 13px; font-weight: 500; display: flex; gap: 6px; }
.optional { color: var(--ink-2); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
:root[data-theme="dark"] .input, :root[data-theme="dark"] .select, :root[data-theme="dark"] .textarea { background: var(--surface-3); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) :is(.input, .select, .textarea) { background: var(--surface-3); } }
.textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
/* iPhones zoom into a field whose text is smaller than 16 px */
@media (max-width: 640px) { .input, .select, .textarea { font-size: 16px; } }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-solid); border-width: 2px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input-sm { min-height: 32px; padding: 4px 8px; width: auto; }
.w-md { width: 13em; }
.w-sm { width: 8em; }
.w-xs { width: 5.5em; }
.w-xxs { width: 4em; }
.table-edit td { padding: 6px 8px; }
.table-edit td:first-child { padding-left: 16px; }
.table-edit .actions { white-space: nowrap; }
.input-num { text-align: right; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 10px; align-items: flex-start; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--brand-solid); flex: none; }
.check input { margin: 2px 0 0; }
input[type="file"] { max-width: 100%; font-size: 13.5px; color: var(--ink-2); }
input[type="file"]::file-selector-button {
  margin-right: 12px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--surface-2); }
.check label { font-weight: 500; }
.check .hint { display: block; color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 12px; }
.inline-form { display: inline; }
.select-sm { width: auto; min-height: 30px; padding: 3px 8px; font-size: 13px; }
/* list pages: the up/down arrows and the delete button sit on one line */
.table .actions form { display: inline-block; vertical-align: middle; }
.order-buttons { display: inline-flex; margin-right: 6px; }
.actions-stack { display: inline-grid; gap: 4px; }
.ini-preview { margin: 8px 0 0; padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.actions-stack .btn { width: 100%; justify-content: flex-start; }
.order-buttons .btn[disabled] { opacity: .3; }
/* a grid of checkboxes (options with a tuning type, tuning types with an option) */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .input, .filters .select { width: auto; min-width: 150px; }
.filters .grow { flex: 1; min-width: 180px; }
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 42px; }
.password-toggle { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 38px; border: 0; background: none; cursor: pointer; color: var(--ink-2); border-radius: var(--radius); }

.option-list { display: grid; gap: 8px; }
.option {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: var(--surface);
}
.option:hover { border-color: var(--line-strong); }
.option input { margin: 2px 0 0; }
.option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.option-text { flex: 1; min-width: 0; }
.option-text b { display: block; font-weight: 600; }
.option-text span { color: var(--ink-2); font-size: 12.5px; }
.option-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.type-picker .option { flex-direction: column; gap: 4px; }
.type-picker .option-head { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.type-picker .balance { font-size: 20px; font-weight: 700; color: var(--brand-ink); padding-left: 28px; line-height: 1.2; }
.type-picker .balance small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
/* the upload form: tuning types and options as cards with a credits badge, like a price list */
.type-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.type-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer; background: var(--surface); min-height: 64px;
}
.type-card:hover { border-color: var(--line-strong); }
.type-card:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-2); }
.type-card:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.type-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.type-card input { margin: 3px 0 0; flex: none; }
.type-card-body { flex: 1; min-width: 0; display: grid; gap: 2px; padding-right: 72px; }
.type-card-name { display: flex; gap: 6px; align-items: flex-start; font-weight: 600; }
.type-card-name .icon { color: var(--brand); flex: none; margin-top: 3px; }
.type-card-text { color: var(--ink-2); font-size: 12.5px; }
.credit-badge {
  position: absolute; top: -1px; right: 10px; padding: 2px 8px; border: 1px solid var(--brand); border-top: 0; border-radius: 0 0 8px 8px;
  background: var(--surface); color: var(--brand-ink); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.type-card[hidden] { display: none; }
.delivery-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; }
.delivery-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2e9d4f; box-shadow: 0 0 0 4px var(--success-bg); }
.delivery-note.is-closed .delivery-dot { background: #90a4ae; box-shadow: 0 0 0 4px var(--surface-2); }
.delivery-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--surface)); color: var(--brand-ink);
}
.delivery-pill .icon { flex: none; }
/* closed, or open but a file sent now is only handled when the shop opens again (is-late): the promise is quieter */
.delivery-note.is-closed .delivery-pill, .delivery-note.is-late .delivery-pill { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
/* orange bar */
.delivery-note.style-bar { gap: 12px; flex-wrap: nowrap; font-size: 15px; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 35%, var(--surface)); border-left: 4px solid var(--brand); }
.delivery-note.style-bar > .icon { flex: none; width: 22px; height: 22px; color: var(--brand); }
.delivery-strong { color: var(--brand-ink); font-size: 16px; }
.delivery-note.style-bar.is-closed, .delivery-note.style-bar.is-late { background: var(--surface-2); border-color: var(--line); border-left-color: var(--line-strong); }
.delivery-note.style-bar.is-closed > .icon, .delivery-note.style-bar.is-late > .icon { color: var(--ink-2); }
.delivery-note.style-bar.is-closed .delivery-strong, .delivery-note.style-bar.is-late .delivery-strong { color: var(--ink); }
/* big time on the left */
.delivery-note.style-badge { padding: 0; gap: 0; flex-wrap: nowrap; align-items: stretch; overflow: hidden; }
.delivery-big { flex: none; min-width: 84px; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--brand-solid); color: var(--on-brand); }
.delivery-big b { font-size: 26px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.delivery-big span { font-size: 12px; font-weight: 600; }
.delivery-note.style-badge.is-closed .delivery-big, .delivery-note.style-badge.is-late .delivery-big { background: #78909c; color: #fff; }
.delivery-note.style-badge.is-closed .delivery-big b, .delivery-note.style-badge.is-late .delivery-big b { font-size: 22px; }
.delivery-body { padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.delivery-body b { font-size: 15px; }

/* Management -> Delivery times */
.dt-steps { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.dt-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px 18px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.dt-row:first-child { border-top: 0; }
.dt-headrow { background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
.dt-cell { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-2); }
.dt-cell b { color: var(--ink); }
.dt-num { width: 78px; }
.dt-from { display: inline-block; min-width: 78px; padding: 0 12px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dt-queue { display: grid; gap: 16px; }
.dt-queue > .error { color: var(--danger-ink); font-size: 13px; font-weight: 500; display: flex; gap: 6px; }
.card-body:has(#delivery_by_queue:not(:checked)) .dt-queue { opacity: 0.55; }
.dt-sep { border-top: 1px solid var(--line); margin: 4px 0; }
.field .dt-single { width: 160px; }
.dt-aside { margin-top: 12px; font-size: 13px; }
@media (max-width: 700px) { .dt-row { grid-template-columns: minmax(0, 1fr); } .dt-headrow { display: none; } }
.brand-ink { color: var(--brand-ink); }
.fs-section .card-head h2 { font-size: 16px; }
.fs-section .card-head { border-top: 3px solid var(--brand); border-radius: var(--radius) var(--radius) 0 0; }

.dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 16px 18px; background: var(--surface-2); display: grid; gap: 10px; }
.dropzone.is-over { border-color: var(--brand); background: var(--surface); }
.dropzone-prompt { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 13px; }
.dropzone-prompt b { font-weight: 600; color: var(--ink); }
.dropzone-words { display: grid; gap: 2px; min-width: 0; }
.dropzone-sub { color: var(--ink-2); font-size: 12.5px; }
.dropzone-big { border-color: var(--brand); border-width: 1.5px; padding: 18px 20px; }
.dropzone-big .dropzone-prompt { gap: 14px; }
.dropzone-big .dropzone-prompt > .icon { width: 26px; height: 26px; color: var(--brand); flex: none; }
.dropzone-big { position: relative; cursor: pointer; }
.dropzone-big input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.dropzone-big:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.dropzone-big .dropzone-prompt { cursor: pointer; }
.dropzone-plus { width: 46px; height: 46px; border-radius: 10px; background: var(--brand-solid); color: var(--on-brand); font-size: 30px;
  font-weight: 500; line-height: 1; display: grid; place-items: center; flex: none; }
.dropzone-big .dropzone-prompt b { font-size: 15px; }
.dropzone-status { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
.dropzone-status .muted { font-size: 12.5px; white-space: nowrap; }
.dropzone-status [hidden] { display: none; }
.agreements { display: grid; gap: 10px; }
.dropzone input[type="file"] { width: 100%; }
.file-list { font-size: 13px; color: var(--ink); display: grid; gap: 4px; }
.file-list > div { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; min-width: 0; }
.file-list > div > span { min-width: 0; overflow-wrap: anywhere; }
[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.file-list:empty { display: none; }
/* The drop zone of a ticket (templates/macros/ui.html: area "tickets"): the files that were chosen are cards, like the ones in the
   conversation, each with a button to take it out again (app.js writes them) */
.dropzone-cards { border-radius: 6px; padding: 14px 16px; }
.dropzone-cards .file-list { gap: 8px; }
.dropzone-cards .file-list > .file-pick { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 8px 8px 8px 12px;
                                          background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.dropzone-cards .file-pick .file-ext { width: 34px; height: 34px; font-size: 10.5px; }
.file-pick-main { min-width: 0; flex: 1; display: block; }
.file-pick-name { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.file-pick-size { display: block; margin-top: 1px; color: var(--ink-2); font-size: 12.5px; }
.file-pick-remove { flex: none; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
                    border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); cursor: pointer; }
.file-pick-remove:hover { background: var(--surface-2); color: var(--ink); }
.summary-box { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; }
.summary-line { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
.summary-line.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 16px; }
.summary-line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the compact order summary on the upload page: the total big, the rest small, and what is still missing */
.fs-sum { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; }
.fs-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fs-sum-big { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fs-sum-big b { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fs-sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.fs-sum-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-sum-line > span:last-child { text-align: right; white-space: nowrap; }
.fs-sum-balance { border-top: 1px solid var(--line); padding-top: 8px; }
.fs-note { font-size: 12.5px; margin: 0; }
.fs-need, .fs-ok { border-radius: var(--radius); padding: 8px 10px; font-size: 12.5px; }
.fs-need { background: var(--warning-bg); color: var(--warning-ink); }
.fs-need-title { font-weight: 600; margin-bottom: 5px; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fs-chip {
  font: inherit; font-size: 12.5px; line-height: 1.5; padding: 1px 9px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--warning-ink); border: 1px solid var(--warning-ink);
}
.fs-chip:hover { text-decoration: underline; }
.fs-chip-more { font-size: 12.5px; padding: 1px 4px; }
.fs-ok { background: var(--success-bg); color: var(--success-ink); display: flex; gap: 7px; align-items: flex-start; }
.fs-ok .icon { flex: none; margin-top: 2px; }
.check-all { padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line); font-weight: 600; }
.fs-hint { font-size: 13px; color: var(--warning-ink); }
.btn-primary[disabled] { background: var(--line); border-color: var(--line); color: var(--ink-3); opacity: 1; }
.fs-bar-missing { color: var(--warning-ink); font-weight: 600; }

/* ------------------------------------------------------------------- 6 tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: 9px 16px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.table td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.row-clickable { cursor: pointer; }
.table tbody tr.row-clickable:hover td { background: var(--surface-2); }
.table tbody tr.row-clickable:hover .row-link { text-decoration: underline; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }
/* a screen-reader label in a heading cell stays inside the cell, so a table that scrolls sideways on a phone
   does not make the whole page scroll */
.table th.actions { position: relative; }
.table a.row-link { font-weight: 600; }
.table .sub { display: block; color: var(--ink-2); font-size: 12.5px; }
/* a list with many columns (the customers, with the EVC credits since 1.58.0): less room between the columns, so that it still fits
   next to the menu on a laptop screen; the outer edges keep the room the other lists have */
.table-tight th, .table-tight td { padding-left: 10px; padding-right: 10px; }
.table-tight th:first-child, .table-tight td:first-child { padding-left: 16px; }
.table-tight th:last-child, .table-tight td:last-child { padding-right: 16px; }
/* what is on its way to EVC (or has to be taken back) may wrap when the column is squeezed, instead of making the list scroll sideways */
.table-tight .evc-credits .sub { white-space: normal; }
.table .unread td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.table .unread .row-link { font-weight: 700; }
.table-plain th { background: none; }
/* wide lists scroll sideways on a phone instead of squeezing every column */
@media (max-width: 800px) {
  .table-wrap > .table:has(th:nth-child(5)) { min-width: 820px; }
  .table-wrap > .table:has(th:nth-child(7)) { min-width: 1040px; }
}
.amount-pos { color: var(--success-ink); font-weight: 600; }
.amount-neg { color: var(--danger-ink); font-weight: 600; }

/* ------------------------------------------------------------------- 7 charts */
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.chart-head p { color: var(--ink-2); }
.chart { position: relative; height: 260px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart text { font: 500 11.5px var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { stroke: none; opacity: 0.1; }
.chart .series-bar { stroke: none; }
.chart .s1 { stroke: var(--series-1); } .chart .s1.series-area, .chart .s1.series-bar, .chart .s1.marker { fill: var(--series-1); }
.chart .s2 { stroke: var(--series-2); } .chart .s2.series-area, .chart .s2.series-bar, .chart .s2.marker { fill: var(--series-2); }
.chart .s3 { stroke: var(--series-3); } .chart .s3.series-area, .chart .s3.series-bar, .chart .s3.marker { fill: var(--series-3); }
.chart .marker { stroke: var(--surface); stroke-width: 2; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 120px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-pop); font-size: 12.5px; white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.chart-tip .tip-label { color: var(--ink-2); margin-bottom: 2px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 8px; }
.chart-tip .tip-row b { font-weight: 700; font-size: 14px; color: var(--ink); }
.chart-tip .tip-row span { color: var(--ink-2); }
.tip-key { width: 12px; height: 0; border-top: 2px solid var(--series-1); flex: none; }
.tip-key.k2 { border-top-color: var(--series-2); } .tip-key.k3 { border-top-color: var(--series-3); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 0; border-top: 2px solid var(--series-1); }
.legend .k2 { border-top-color: var(--series-2); } .legend .k3 { border-top-color: var(--series-3); }
.chart-table[hidden] { display: none; }
.chart-table { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.segmented a { padding: 6px 12px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13px; border-right: 1px solid var(--line); white-space: nowrap; }
.segmented a:last-child { border-right: 0; }
.segmented a:hover { background: var(--surface-2); }
.segmented a[aria-current="true"] { background: var(--ink); color: var(--surface); }
.period-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.period-row > span { font-weight: 600; }

/* -------------------------------------------------------------------- 8 pages */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: start center; align-content: start; padding: 28px 16px 48px; }
.auth-top { width: 100%; max-width: 980px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.auth-brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; }
.auth-brand img { max-height: 44px; max-width: 220px; }
.auth-brand picture img { max-height: 40px; max-width: min(360px, 60vw); width: auto; height: auto; }
.auth-tools { display: flex; gap: 4px; align-items: center; }
.auth-grid { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.auth-single { width: 100%; max-width: 460px; }
.auth-wide { width: 100%; max-width: 760px; }
.auth-card { padding: 28px; }
.auth-card h1 { margin-bottom: 6px; }
.auth-card > p { color: var(--ink-2); margin-bottom: 20px; }
.auth-aside { padding: 28px; }
.auth-aside h2 { font-size: 18px; margin-bottom: 12px; }
.auth-aside li { display: flex; gap: 10px; padding: 6px 0; }
.auth-aside li .icon { color: var(--brand); margin-top: 2px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 800px) { .auth-grid { grid-template-columns: minmax(0, 1fr); } }

.frame { width: 100%; height: calc(100vh - var(--top-height) - 150px); min-height: 480px; border: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.qr { background: #fff; padding: 8px; border-radius: var(--radius); width: 196px; height: 196px; display: block; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; font-size: 15px; max-width: 320px; }
.error-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.error-page .card { padding: 36px 32px; max-width: 480px; }
.error-code { font-size: 54px; font-weight: 700; color: var(--brand); line-height: 1; margin-bottom: 8px; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.package { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.package h3 { font-size: 14px; font-weight: 600; }
.package .price { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.package .price small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.package .per { color: var(--ink-2); font-size: 12.5px; }
.package .btn { margin-top: auto; }
.package .per { margin-bottom: 8px; }
.matrix th, .matrix td { padding: 8px 10px; }
.logo-preview { max-height: 60px; max-width: 100%; display: block; }
.logo-box-light { background: #ffffff; }
.logo-box-dark { background: #15171b; }
.matrix .input { min-width: 84px; }
.pay-state { text-align: center; padding: 12px 0; }
.pay-state .icon { color: var(--brand); }
.pay-state.ok-state .icon { color: var(--success-ink); }
.spinner { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 9 utilities */
.muted { color: var(--ink-2); }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
/* The audit log keeps whole texts (a message that was changed or removed): they wrap and keep their line breaks; a long one is folded away behind its first words */
.audit-text { max-width: 62ch; margin-top: 4px; white-space: pre-wrap; }
.audit-text:first-child { margin-top: 0; }
.audit-text .muted { font-size: 12.5px; }
.audit-text > summary { cursor: pointer; white-space: normal; }
.audit-text[open] > summary .audit-gist { display: none; }
.audit-full { margin-top: 3px; padding-left: 12px; border-left: 2px solid var(--line); }
.tnum { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 12px; align-content: start; }
.stack-lg { display: grid; gap: 20px; align-content: start; }
.cluster { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.card-head-inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 0 10px; }
.card-head-inline h3 { margin: 0; font-size: 15px; }
.autofilled { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
.autofill-status { font-size: 13.5px; padding: 8px 12px; border-radius: var(--radius); border-left: 3px solid var(--line-strong); background: var(--surface-2); margin-top: 8px; }
.autofill-status:empty { display: none; }
.autofill-status[data-kind="ok"] { border-color: var(--success-ink); background: var(--success-bg); }
.autofill-status[data-kind="warn"] { border-color: var(--warning-ink); background: var(--warning-bg); }
.autofill-status[data-kind="error"] { border-color: var(--brand); }
.between { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; }
.measure { max-width: 72ch; }
.sticky { position: sticky; top: calc(var(--top-height) + 16px); }
@media (max-width: 1100px) { .sticky { position: static; } }
.narrow { max-width: 720px; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.w-auto { width: auto; }
.test-ribbon { background: var(--warning-bg); color: var(--warning-ink); font-weight: 600; text-align: center; padding: 6px 12px; font-size: 13px; border-radius: var(--radius); margin-bottom: 16px; }

@media print {
  .topbar, .sidebar, .page-actions, .toasts, .no-print { display: none !important; }
  .main { margin: 0; padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* Lists in the customer portal become one block per row on a phone: everything visible
   without swiping sideways. Each cell carries its column name in data-label. */
@media (max-width: 640px) {
  .table-wrap > .table.table-stack { min-width: 0 !important; }
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody { display: block; }
  .table-stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .table-stack td { display: block; border: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .table-stack td.num { text-align: left; }
  .table-stack td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
  .table-stack td.actions { grid-column: 1 / -1; }
  .table-stack .unread td:first-child { box-shadow: none; }
  .table-stack tr.unread { box-shadow: inset 3px 0 0 var(--brand); }
}
.page-head h1, .page-head p { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
/* free text typed by customers (a model name of 80 characters without spaces) must not widen a list */
.cell-text { max-width: 32ch; overflow-wrap: anywhere; }

/* ------------------------------------------------------ upload form helpers */
.more-fields > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px;
  color: var(--ink-2); padding: 4px 0;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary .icon { transition: transform .15s; }
.more-fields[open] > summary .icon { transform: rotate(90deg); }
.more-fields > summary:hover { color: var(--ink); }

/* The bar with the price and the Send button that stays in view on a phone (the summary card
   is far below the fields there). */
.fs-bar { display: none; }
@media (max-width: 1100px) {
  .fs-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .fs-bar-text { min-width: 0; font-size: 13.5px; line-height: 1.35; }
  .fs-bar-text b { font-size: 15px; font-variant-numeric: tabular-nums; }
  .fs-bar-line { display: block; white-space: nowrap; }
  .fs-bar-after { font-size: 12.5px; }
  .fs-bar-after b { font-size: 12.5px; font-weight: 600; }
  .fs-bar .btn { flex: none; }
  body.has-fs-bar .main { padding-bottom: 96px; }
  body.has-fs-bar .bottom-nav { display: none; }
}

/* staff looking at the portal as a customer */
.impersonation-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--ink); color: var(--surface); font-size: 13.5px; font-weight: 500;
}
.impersonation-bar .icon { color: var(--brand); flex: none; }
.impersonation-bar span { flex: 1 1 320px; }
.impersonation-bar form { margin-left: auto; }

/* own prices of a customer group */
.price-matrix .price-col { width: 190px; }
.price-matrix input.input-num { width: 150px; margin-left: auto; text-align: right; }
.price-matrix .error { display: block; }
.price-matrix .per-credit { display: block; font-size: 12px; margin-top: 3px; min-height: 15px; }

/* ------------------------------------------------------- phone navigation */
.bottom-nav { display: none; }
@media (max-width: 960px) {
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; text-decoration: none;
    color: var(--ink-2); font-size: 11.5px; font-weight: 600; position: relative; min-width: 0;
  }
  .bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav a .icon { width: 22px; height: 22px; }
  .bottom-nav a[aria-current="page"] { color: var(--brand-ink); }
  .bottom-nav .side-count { position: absolute; top: 4px; left: calc(50% + 6px); }
  body.has-bottom-nav .main { padding-bottom: 84px; }
}

/* ------------------------------------------------------ customer dashboard */
.active-files { list-style: none; margin: 0; padding: 0; container: active / inline-size; }
.active-files li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--line);
}
.active-files li:last-child { border-bottom: 0; }
.active-files li.row-clickable:hover { background: var(--surface-2); }
.active-files .row-link { font-weight: 700; text-decoration: none; }
.active-files .active-vehicle { min-width: 0; overflow-wrap: anywhere; }
.active-files .active-state { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.active-files .sub { display: block; color: var(--ink-2); font-size: 12.5px; }
@container active (max-width: 619px) {
  .active-files li { grid-template-columns: auto minmax(0, 1fr); padding: 10px 14px; }
  .active-files .active-state { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
  .active-files .btn { grid-column: 1 / -1; justify-self: start; }
}
.expectation { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: 13.5px; border-top: 1px solid var(--line); }
.expectation .icon { color: var(--brand); flex: none; margin-top: 1px; }
.onboarding { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.onboarding li a { font-weight: 600; }
.card .period-row { margin: 0 0 12px; }
.step time { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.revision-box > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-ink); }
.revision-box > summary::-webkit-details-marker { display: none; }
.revision-box > summary:hover { text-decoration: underline; }
.package-marked { border-color: var(--brand); position: relative; }
.package-label { display: inline-block; align-self: flex-start; background: var(--brand-solid); color: #fff; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-bottom: 2px; }

/* -------------------------------------------------------------------- legal documents */
.cols-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .cols-wide { grid-template-columns: minmax(0, 1fr); } }
.segmented { flex-wrap: wrap; max-width: 100%; }
.legal-page { width: 100%; max-width: 820px; }
.legal-links, .legal-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.legal-foot { justify-content: center; border-top: 0; color: var(--ink-2); }
.legal-foot a { color: var(--ink-2); }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.prose { line-height: 1.65; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 12px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 19px; margin-top: 28px; }
.prose h3 { font-size: 16px; margin-top: 22px; }
.prose h4 { font-size: 15px; margin-top: 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose blockquote { border-left: 3px solid var(--line-strong); padding-left: 12px; color: var(--ink-2); }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.prose a { color: var(--brand); }
.side-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.side-legal a { color: var(--side-ink-2); text-decoration: none; }
.side-legal a:hover { text-decoration: underline; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.icon-preview { width: 48px; height: 48px; object-fit: contain; }
input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }

/* customer list: column headers that sort */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--brand-ink); }
.th-sort.is-active { color: var(--ink); }
th.num .th-sort { justify-content: flex-end; }

/* --------------------------------------------------------------- tools page */
.tool-group { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 24px 0 10px; }
.tool-group:first-of-type { margin-top: 4px; }
.tool-gap { height: 18px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tool-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 4px 14px; padding: 18px;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink);
  text-decoration: none; border-top: 3px solid transparent; transition: border-color .15s, box-shadow .15s;
}
a.tool-card:hover { border-top-color: var(--brand); box-shadow: var(--shadow-pop); text-decoration: none; }
a.tool-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tool-icon { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.tool-icon .icon { width: 22px; height: 22px; }
.tool-icon-sm { width: 32px; height: 32px; border-radius: 8px; }
.tool-icon-sm .icon { width: 17px; height: 17px; }
.tone-brand { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand-ink); }
.tone-success { background: var(--success-bg); color: var(--success-ink); }
.tone-warning { background: var(--warning-bg); color: var(--warning-ink); }
.tone-danger { background: var(--danger-bg); color: var(--danger-ink); }
.tone-info { background: var(--info-bg); color: var(--info-ink); }
.tone-neutral { background: var(--neutral-bg); color: var(--neutral-ink); }
.tool-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.tool-name { font-weight: 600; font-size: 15px; }
.tool-text { color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.tool-how { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-ink); font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.tool-row { display: flex; gap: 12px; align-items: center; }
.tool-preview { max-width: 360px; border-top-color: var(--brand); }
.tool-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.tool-images img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); display: block; background: var(--surface); }
.download-list { list-style: none; margin: 0; padding: 8px 16px 14px; display: grid; gap: 8px; }
.download-list a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.icon-picker, .tone-picker { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.icon-picker legend, .tone-picker legend { margin-bottom: 6px; width: 100%; }
.icon-picker label { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink-2); background: var(--surface); }
.icon-picker label:hover { border-color: var(--line-strong); color: var(--ink); }
.icon-picker label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand-ink); background: var(--surface-2); }
.icon-picker label:has(input:focus-visible), .tone-picker label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.icon-picker input, .tone-picker input { position: absolute; opacity: 0; pointer-events: none; }
.tone-picker label { display: inline-flex; gap: 7px; align-items: center; padding: 6px 10px 6px 7px; border: 1px solid var(--line); border-radius: 18px; cursor: pointer; font-size: 13px; background: var(--surface); }
.tone-picker label:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.kind-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kind-cards .type-card-body { padding-right: 0; }
.converter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.converter-form .input-num { width: 140px; }
.converter-result { font-size: 15px; }
.converter-result:empty { display: none; }
/* the dyno chart (a web component with its own styling inside); the chart stays under the fixed top bar when scrolling */
fast-dyno.dyno-tool { display: block; min-height: 320px; --fd-sticky-top: calc(var(--top-height) + 12px); }
.dyno-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; }
.dyno-note .icon { flex: none; }

/* --------------------------------------------- upload form: questions of an option */
.option-item { display: grid; align-content: start; min-width: 0; }
.option-item[hidden] { display: none; }
.options-fuel-note { font-size: 13px; }
.options-fuel-note[hidden] { display: none; }
/* nothing ordered yet ("Only options" without an option): what to do before the form can be sent */
.options-free-note { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.options-free-note[hidden] { display: none; }
.option-item.has-ask:has(input[data-option]:checked) .type-card { border-radius: var(--radius) var(--radius) 0 0; }
.option-ask {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 12px 12px; margin-top: -1px;
  border: 1px solid var(--brand); border-top: 1px dashed var(--line-strong); border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-2); font-size: 13px;
}
.option-ask .field > label, .option-ask .field > .label { font-size: 13px; }
.option-ask .input { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
.option-ask .hint { font-size: 12px; }
.option-ask .segmented label { padding: 5px 10px; font-size: 13px; }
.option-ask[hidden] { display: none; }
.option-ask .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.option-ask > * { min-width: 0; }
.input-unit { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.input-unit .input { width: 100px; }
.segmented { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; width: max-content; max-width: 100%; background: var(--surface); }
.segmented label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; border-right: 1px solid var(--line); }
.segmented label:last-child { border-right: 0; }
.segmented label:has(input:checked) { background: var(--brand-solid); color: var(--on-brand); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -3px; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.dtc-search { position: relative; }
.dtc-list {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 2px); min-width: 100%; width: max-content; max-width: min(460px, calc(100vw - 40px)); display: grid; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-pop);
}
.dtc-list[hidden] { display: none; }
.dtc-item { padding: 8px 10px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; cursor: pointer; }
.dtc-item b { font-variant-numeric: tabular-nums; flex: none; }
.dtc-item.is-current { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--brand); }
.dtc-item.is-chosen b::after { content: " ✓"; color: var(--success-ink); }
.dtc-own { font-weight: 600; color: var(--brand-ink); }
.dtc-more { padding: 7px 10px; font-size: 12px; border-top: 1px solid var(--line); }
.option-ask .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.option-ask .chips[hidden] { display: none; }
.option-ask .chip { display: inline-flex; gap: 6px; align-items: center; min-width: 0; padding: 3px 4px 3px 10px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; max-width: 100%; }
.option-ask .chip .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chip-x { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; }
.chip-x:hover { background: var(--surface-2); color: var(--ink); }
.sub-field { margin-left: 28px; max-width: 480px; }
.answer { display: block; margin-top: 3px; color: var(--ink-2); font-size: 13px; }
.answer b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- updates (news for customers) */
.chip-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-filter :is(a, button) { padding: 5px 14px; border-radius: 16px; background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid var(--line); cursor: pointer; }
.chip-filter :is(a, button):hover { color: var(--ink); border-color: var(--line-strong); }
.chip-filter :is(a[aria-current], button[aria-pressed="true"]) { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); }
.update-list { display: grid; container: upd / inline-size; }
.update-item { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.update-item:first-child { border-top: 0; padding-top: 2px; }
.update-item.has-image { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.update-item > div { display: grid; gap: 4px; min-width: 0; }
.update-thumb img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; display: block; background: var(--surface-2); }
.update-cat { font-size: 12.5px; color: var(--ink-2); }
.update-item h3 { font-size: 16.5px; line-height: 1.35; margin: 0; }
.update-item h3 a { color: var(--ink); text-decoration: none; }
.update-item h3 a:hover { color: var(--brand-ink); text-decoration: underline; }
.update-item time { font-size: 12.5px; color: var(--ink-2); }
.update-item p { margin: 2px 0 0; color: var(--ink); font-size: 14px; line-height: 1.5; }
.update-more { font-size: 13.5px; font-weight: 600; justify-self: start; }
/* a button with an update, next to Read more */
.update-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.update-page .update-actions { margin-top: 0; }
.update-cat .icon { margin-right: 4px; }
/* a pinned update (Keep at the top) is set apart from the news below it; with a picture, the picture is bigger */
.update-item.is-pinned {
  margin: 0 -10px 6px; padding: 14px 10px 14px 13px; border-top: 0; border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand);
}
.update-item.is-pinned + .update-item { border-top: 0; }
.update-item.is-pinned .update-cat { color: var(--brand-ink); font-weight: 600; }
.update-item.is-pinned.has-image { grid-template-columns: 188px minmax(0, 1fr); }
.update-item.is-pinned .update-thumb img { width: 188px; height: 134px; }
@container upd (min-width: 700px) {
  .update-item.is-pinned.has-image { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
  .update-item.is-pinned .update-thumb img { width: 240px; height: 171px; }
}
@container upd (max-width: 460px) {
  .update-item.is-pinned.has-image { grid-template-columns: minmax(0, 1fr); }
  .update-item.is-pinned .update-thumb img { width: 100%; height: auto; aspect-ratio: 7 / 5; }
}
/* a pinned update ("Feature on the dashboard") as a card of its own under Support tickets: the text on the left, the picture
   on the right (above the text on a narrow card, such as a phone). The card answers to its own width, not to the screen. */
.feature-card { container: feat / inline-size; overflow: hidden; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.feature-card.has-image .feature-grid { grid-template-columns: minmax(0, 1fr) clamp(190px, 38%, 360px); }
.feature-copy { display: grid; gap: 8px; align-content: center; justify-items: start; min-width: 0; padding: 20px 22px 20px 24px; }
.feature-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.feature-meta time { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.feature-copy h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.feature-copy h2 a { color: var(--ink); text-decoration: none; }
.feature-copy h2 a:hover { color: var(--brand-ink); text-decoration: underline; }
.feature-copy p { margin: 0; max-width: 56ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.feature-copy .update-actions { margin-top: 6px; }
.feature-visual { display: block; min-width: 0; padding: 16px 16px 16px 0; }
.feature-visual img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; border-radius: 8px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
@container feat (max-width: 699px) {
  .feature-copy { padding: 16px 16px 16px 20px; }
  .feature-copy h2 { font-size: 18px; }
  .feature-visual { padding: 14px 14px 14px 0; }
}
@container feat (max-width: 459px) {
  .feature-card.has-image .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-visual { order: -1; padding: 14px 14px 0; }
  .feature-copy { padding: 14px 18px 18px 20px; }
}
.update-page { overflow: hidden; }
.update-page h1 { font-size: 24px; line-height: 1.3; margin: 2px 0 4px; }
/* the whole picture is shown (a chart or a screenshot is not cropped); a smaller one sits in the middle of a quiet band */
.update-hero { width: 100%; height: auto; max-height: 420px; object-fit: contain; display: block; background: var(--surface-3); }
.update-lead { font-size: 16px; line-height: 1.55; margin: 0; }
.update-image-admin { max-width: 280px; border-radius: var(--radius); display: block; }
@media (max-width: 560px) {
  .update-item.has-image { grid-template-columns: 1fr; }
  .update-thumb img { width: 100%; height: 160px; }
}
.no-credits-note { align-items: center; }
.no-credits-note .btn { flex: none; color: var(--on-brand); text-decoration: none; }
.no-credits-note { flex-wrap: wrap; }
.no-credits-note .notice-body { flex: 1 1 260px; }
.date-field { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 13.5px; }
.date-field .input { min-width: 0; width: auto; }
.period-chips { margin: 14px 0 0; }
.period-chips + .stat-row { margin-top: 16px; }
@media (max-width: 520px) { .date-field { flex: 1 1 100%; } .date-field .input { flex: 1; } }
.order-totals-note { margin-top: 10px; }
@media (max-width: 520px) {
  .order-totals { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .order-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .order-totals .stat-value { font-size: 20px; order: 2; }
}
/* Tools of the kind "table" (a list to look things up in) */
.lookup-filters .select { max-width: 220px; }
.lookup-count { margin-top: 10px; font-size: 13px; }
.lookup-table td { white-space: nowrap; }
.lookup-table td:first-child { font-weight: 600; }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.sort-link:hover { color: var(--ink); text-decoration: underline; }
th[aria-sort] .sort-link { color: var(--ink); }
.column-editor { display: grid; gap: 8px; }
.column-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.column-row .check { margin: 0; }
@media (max-width: 640px) {
  .lookup-table td { white-space: normal; }
  .lookup-filters .select { max-width: none; min-width: 0; flex: 1 1 calc(50% - 4px); }
}
/* Download states (admin: tickets, file services); the conversation itself is further up */
.file-state { display: inline-flex !important; align-items: center; gap: 5px; color: var(--ink-2); font-size: 12.5px; }
.file-state-ok { color: var(--success-ink); }
.form-actions-end { margin-left: auto; }
.table .sub.receipt { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.table .sub.receipt-ok { color: var(--success-ink); }
/* The portal as an app */
.dialog { border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 22px 24px; max-width: min(92vw, 420px); box-shadow: var(--shadow-pop); }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog h2 { margin: 0 0 8px; font-size: 18px; }
.dialog p, .dialog ol { margin: 0 0 12px; color: var(--ink-2); }
.dialog ol { padding-left: 20px; display: grid; gap: 4px; list-style: decimal; }
.dialog form { margin-top: 6px; text-align: right; }
/* The remark from the engineer: a yellow notice on the page, and the same in the pop-up before the download */
.remark .notice-body { overflow-wrap: anywhere; }
.remark .remark-text { display: block; margin-top: 2px; }
.ftl-panel > .remark { margin-bottom: 12px; }
.remark-box { display: grid; gap: 8px; }
.remark-state { display: flex !important; align-items: flex-start; margin: 0; }
.remark-state > .icon { margin-top: 2px; flex: none; }
.remark-edit > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--brand-ink); }
.remark-edit > summary::-webkit-details-marker { display: none; }
.remark-edit > summary:hover { text-decoration: underline; }
.remark-field { display: grid; gap: 6px; }
.remark-field .quick-bar { margin-bottom: 0; }
.remark-confirm { margin-bottom: 16px; }
.remark-confirm .remark-ok { display: grid; gap: 10px; justify-items: start; margin-top: 12px; }
.remark-confirm .remark-ok p { margin: 0; }
.dialog .remark { margin: 0 0 14px; text-align: left; }
.dialog .remark-ok { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Notifications on a phone (My account) */
.push-state { display: grid; gap: 8px; }
.push-state p { display: flex; gap: 6px; align-items: center; margin: 0; }
.push-state .error { color: var(--danger-ink); }
.device-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.device-list li > span { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.device-list .sub { display: block; width: 100%; color: var(--ink-2); font-size: 12.5px; }
/* Files kept by the upload form after an error */
.kept-files { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius); background: var(--success-bg); color: var(--success-ink); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.kept-files-head { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.kept-file { font-weight: 600; overflow-wrap: anywhere; }
.kept-files .hint { flex-basis: 100%; color: inherit; opacity: .85; }
/* Sections of the customer menu */
.side-heading { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--side-ink-2); padding: 14px 12px 4px; }
/* The quick upload in the customer menu */
.quick-upload { margin-top: 18px; }
.quick-drop { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 16px 12px; border: 1.5px dashed var(--side-ink-2); border-radius: var(--radius); color: var(--side-ink); cursor: pointer; }
.quick-drop:hover, .quick-drop.is-over { border-color: var(--brand); background: var(--side-hover); }
.quick-drop b { font-size: 13.5px; }
.quick-drop > span:not(.quick-drop-icon) { font-size: 12px; color: var(--side-ink-2); }
.quick-drop-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--side-hover); display: grid; place-items: center; margin-bottom: 4px; }
.quick-drop-icon .icon { width: 18px; height: 18px; }
.quick-upload.is-busy .quick-drop { opacity: .6; pointer-events: none; }
.quick-drop-busy { font-weight: 600; color: var(--side-ink) !important; }
/* The quick upload sits at the bottom of the customer menu, as low as the window goes; the menu items stay at the top.
   A menu taller than the window scrolls, and the box then follows the last item. Only where the menu is a column next to the page:
   the drawer of a phone or a tablet keeps the box under the items, because the bar at the bottom of that screen covers the lowest part. */
@media (min-width: 961px) {
  .sidebar.has-quick-upload { display: flex; flex-direction: column; }
  .sidebar.has-quick-upload > * { flex: none; }
  .sidebar.has-quick-upload .side-nav { margin-bottom: 16px; }
  .sidebar.has-quick-upload .quick-upload { margin-top: auto; }
}
/* up to 1100 px the bar with the price and the Send button spans the whole width, also over the menu: the box stays above it */
@media (min-width: 961px) and (max-width: 1100px) {
  body.has-fs-bar .sidebar.has-quick-upload { padding-bottom: 88px; }
}

/* Quick messages: a row of buttons above a text field */
.quick-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 8px; }
.quick-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; color: var(--ink-2); margin-right: 2px; }
.quick-chip { max-width: 100%; }
.quick-manage { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.8125rem; }
.quick-text { white-space: pre-wrap; }
.quick-nl { display: block; margin-top: 4px; }

/* ------------------------------------------------------------ user rights (Users → edit) */
.rights-box { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.rights-box[hidden] { display: none; }
.rights-presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rights-group { display: grid; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--line); }
.rights-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.rights-warning { color: var(--warning-ink); }
.rights-warning .icon { vertical-align: -2px; margin-right: 4px; }
.rights-preview { background: var(--side); color: var(--side-ink-2); border-radius: var(--radius); padding: 8px 0 12px; }
.rights-preview-heading { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 12px 14px 4px; }
.rights-preview-item { padding: 6px 14px; font-size: 14px; color: var(--side-ink); }
.rights-preview-note { padding: 10px 14px; font-size: 14px; color: var(--side-ink); }

/* ---- Passing a file service on to a partner */
.option-row { display: grid; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.option-row:first-of-type { border-top: 0; }
.option-row[hidden], [data-ask][hidden] { display: none; }
.forward-box .forward-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Credits on the upload page: one row of pills, or one line when there is nothing to choose. */
.fs-credits { border-top: 3px solid var(--brand); }
.fs-credit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fs-credit-title { font-weight: 700; margin-right: 4px; }
.fs-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-pill {
  display: flex; align-items: center; gap: 9px; min-height: 44px; box-sizing: border-box; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 600;
}
.fs-pill input { margin: 0; flex: none; }
.fs-pill:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-2); }
.fs-pill:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.fs-pill.is-empty:not(:has(input:checked)) { border-color: var(--line); color: var(--ink-2); background: var(--surface-2); }
.fs-pill-bal { font-size: 13px; font-weight: 600; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
.fs-pill.is-empty .fs-pill-bal { color: var(--ink-2); }
.fs-pill a { font-size: 13px; font-weight: 600; }
.fs-tip {
  position: relative; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%; cursor: help; line-height: 1;
  border: 1px solid var(--line-strong); background: none; color: var(--ink-2); font: 700 11px/1 inherit;
}
.fs-tip::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 20;
  width: max-content; max-width: 260px; padding: 8px 10px; border-radius: var(--radius); background: var(--ink); color: var(--surface);
  font-size: 12.5px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; pointer-events: none; display: none;
}
.fs-tip:hover::after, .fs-tip:focus-visible::after, .fs-tip:focus::after { display: block; }
.fs-credit-ask { margin-left: auto; font-size: 13px; }
.fs-credit-one { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.fs-credit-ok { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success-ink); }
.fs-credit-ok.is-warn { background: var(--warning-bg); color: var(--warning-ink); }
.fs-credit-buy { margin-left: auto; font-size: 13px; }
@media (max-width: 700px) { .fs-credit-ask, .fs-credit-buy { margin-left: 0; } .fs-pills { width: 100%; } .fs-pill { flex: 1 1 100%; } }

/* ===================================================================== 10 looks of the upload page
   Settings → File service chooses one: classic (the rules above), steps, workshop or compact. Everything
   below is scoped to .fs-layout-steps / -workshop / -compact, so the classic page is not touched by it. */

/* the chooser in Settings → File service: a little drawing per look */
.layout-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1300px) { .layout-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .layout-choices { grid-template-columns: minmax(0, 1fr); } }
.layout-choice { display: grid; gap: 8px; align-content: start; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.layout-choice:hover { border-color: var(--line-strong); }
.layout-choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-2); }
.layout-choice:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.layout-thumb { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.layout-thumb .wf { display: block; width: 100%; height: auto; }
.layout-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.layout-name input { margin: 0; }
.layout-active { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--success-bg); color: var(--success-ink); font-size: 12px; font-weight: 600; }
.layout-text { color: var(--ink-2); font-size: 12.5px; }
.wf-page { fill: var(--surface-3); }
.wf-card { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.wf-bar { fill: var(--line); }
.wf-line2 { fill: var(--line-strong); opacity: .55; }
.wf-brand { fill: var(--brand); }
.wf-ok { fill: #2e9d4f; }
.wf-ok-soft { fill: var(--success-bg); stroke: #7cc48b; stroke-width: .8; }
.wf-hollow { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.wf-active { stroke: var(--brand); stroke-width: 1.5; }
.wf-dashed { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 2; }
.wf-dash { fill: none; stroke: var(--brand); stroke-width: 1.2; stroke-dasharray: 3 2; }
.wf-tile, .wf-pill { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.wf-tile.wf-on, .wf-pill.wf-on { stroke: var(--brand); stroke-width: 1.6; fill: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.wf-warn { fill: var(--warning-bg); }
.wf-dark { fill: #263238; }
.wf-white { fill: #ffffff; }
.wf-dim { opacity: .5; }
.wf-bottom { fill: var(--surface); stroke: var(--line); stroke-width: 1; }

/* ---- parts shared by the three newer looks */
.fs-layout { --fs-done: #2a8a47; }
.fs-grid { display: grid; gap: 14px 16px; align-items: start; }
.fs-grid-2 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.fs-grid-3 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fs-grid-4 { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.fs-grid > .wide { grid-column: 1 / -1; }
.fs-contents { display: contents; }
.fs-credits-inline { display: block; border-top: 0; }
.fs-credits-inline .fs-credit-one { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 5px 14px 5px 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; }
.fs-credits-inline .fs-credit-ok { width: 20px; height: 20px; }
.fs-credits-inline .fs-credit-buy { margin-left: 4px; }
.fs-credits-inline .fs-credit-row { padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.layout-preview { align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.layout-preview .notice-body { flex: 1 1 260px; }
.layout-preview-buttons { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) { .layout-preview-buttons { margin-left: 0; flex: 1 1 100%; } }
.layout-preview .btn { text-decoration: none; color: var(--ink); font-weight: 600; }
.layout-preview .btn-primary { color: var(--on-brand); }
/* the choice tiles of the workshop and compact looks: the radio button steps aside, the card is the control */
.fs-layout-workshop .type-card > input[type="radio"], .fs-layout-compact .type-card > input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}

/* ============================================================== steps */
.fs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fs-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; align-items: start; scroll-margin-top: calc(var(--top-height) + 12px); }
.fs-step::before { content: ""; position: absolute; left: 16px; top: 46px; bottom: -25px; width: 2px; background: var(--line); border-radius: 1px; }
.fs-step:last-child::before { display: none; }
.fs-step[data-state="done"]::before { background: var(--fs-done); }
.fs-step-no {
  position: relative; z-index: 1; margin-top: 11px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line-strong); color: var(--ink-2); font-weight: 700; font-size: 14px;
}
.fs-step-no .icon { display: none; width: 18px; height: 18px; }
.fs-step[data-state="active"] .fs-step-no { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.fs-step[data-state="done"] .fs-step-no { background: var(--fs-done); border-color: var(--fs-done); color: #fff; }
.fs-step[data-state="done"] .fs-step-no .n, .fs-step[data-state="error"] .fs-step-no .n { display: none; }
.fs-step[data-state="done"] .fs-step-no .fs-step-ok, .fs-step[data-state="error"] .fs-step-no .fs-step-bad { display: block; }
.fs-step[data-state="error"] .fs-step-no { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-solid) 20%, transparent); }
.fs-step[data-state="error"]::before { background: var(--line); }
.fs-step-card { min-width: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1.5px solid transparent; }
.fs-steps.is-live .fs-step.is-open .fs-step-card { border-color: var(--brand); }
.fs-steps.is-live .fs-step:not(.is-open)[data-state="todo"] .fs-step-card { background: transparent; box-shadow: none; border: 1.5px dashed var(--line-strong); }
.fs-steps.is-live .fs-step:not(.is-open)[data-state="todo"] .fs-step-title { color: var(--ink-2); }
.fs-step-head { position: relative; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius); }
.fs-step-head:has(.fs-step-toggle:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
.fs-step-title { font-size: 16px; line-height: 1.3; margin: 0; }
.fs-step-toggle { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: default; }
.fs-step-toggle:focus-visible { outline: none; }
.fs-step-toggle::after { content: ""; position: absolute; inset: 0; }
.fs-steps.is-live .fs-step:not(.is-open) .fs-step-toggle { cursor: pointer; }
.fs-step-tag { font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 4px; background: var(--success-bg); color: var(--success-ink); }
.fs-step-hint, .fs-step-edit { margin-left: auto; font-size: 13px; }
.fs-step-hint { color: var(--ink-2); }
.fs-step-edit { color: var(--brand-ink); font-weight: 600; font-size: 13.5px; }
.fs-step-facts { display: none; margin: 0; padding: 0 16px 14px; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fs-step-facts dt { font-size: 12px; color: var(--ink-2); }
.fs-step-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fs-step-body { display: grid; gap: 18px; padding: 2px 16px 18px; min-width: 0; align-content: start; }
.fs-sub { display: grid; gap: 12px; min-width: 0; align-content: start; }
.fs-sub + .fs-sub { border-top: 1px solid var(--line); padding-top: 16px; }
.fs-sub > h3 { font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fs-sub > h3 .muted { font-weight: 400; font-size: 13px; }
.fs-step-next { display: flex; justify-content: flex-end; }
/* with script the steps fold; without it every step stays open and the folding controls are not shown */
.fs-steps:not(.is-live) :is(.fs-step-edit, .fs-step-hint, .fs-step-next) { display: none; }
.fs-steps:not(.is-live) .fs-step-toggle::after { display: none; }
.fs-steps.is-live .fs-step:not(.is-open) .fs-step-body { display: none; }
.fs-steps.is-live .fs-step.is-open :is(.fs-step-edit, .fs-step-hint) { display: none; }
.fs-steps.is-live .fs-step[data-state="done"] .fs-step-hint { display: none; }
.fs-steps.is-live .fs-step:not([data-state="done"]) .fs-step-edit { display: none; }
.fs-steps.is-live .fs-step[data-state="done"]:not(.is-open) .fs-step-facts { display: grid; }
@media (max-width: 700px) {
  .fs-step { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
  .fs-step-no { width: 28px; height: 28px; font-size: 13px; margin-top: 12px; }
  .fs-step-no .icon { width: 15px; height: 15px; }
  .fs-step::before { left: 13px; top: 42px; }
  .fs-step-head { padding: 12px; }
  .fs-step-body { padding: 2px 12px 14px; }
  .fs-step-facts { padding: 0 12px 12px; }
  .fs-step-hint { display: none; }
}

/* ============================================================ workshop */
.fs-layout-workshop { --ws-dark: #263238; --ws-dark-2: #1f272c; --ws-soft: #b0bec5; --ws-accent: color-mix(in srgb, var(--brand) 55%, #fff); display: block; }
.ws-hero { margin: -20px -24px 0; padding: 26px 24px 86px; background: linear-gradient(180deg, var(--ws-dark-2) 0, var(--ws-dark) 100%); color: #fff; }
.layout-preview ~ .fs-layout-workshop .ws-hero { margin-top: 0; }
.ws-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ws-hero h1 { color: #fff; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.ws-hero p { color: var(--ws-soft); margin-top: 2px; }
.ws-hero .autofill-status { background: rgba(255, 255, 255, 0.07); border-left-color: var(--ws-accent); color: #e7ebee; }
.ws-hero .autofill-status[data-kind="ok"] { border-left-color: #4caf6a; }
.ws-hero .error, .ws-hero .dropzone-error { color: #ffb4b4; }
/* the delivery strip on the dark top */
.ws-hero .delivery-note { background: transparent; border-color: transparent; color: #cfd8dc; padding: 0; }
.ws-hero .delivery-note b { color: #fff; }
.ws-hero .delivery-note .muted { color: var(--ws-soft); }
.ws-hero .delivery-dot { box-shadow: 0 0 0 4px rgba(46, 157, 79, 0.25); }
.ws-hero .delivery-note.is-closed .delivery-dot { background: #90a4ae; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.ws-hero .delivery-pill { background: color-mix(in srgb, var(--brand) 24%, transparent); border-color: color-mix(in srgb, var(--brand) 60%, #fff); color: var(--ws-accent); }
.ws-hero .delivery-note.is-closed .delivery-pill, .ws-hero .delivery-note.is-late .delivery-pill { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: var(--ws-soft); }
.ws-hero .delivery-note.style-bar, .ws-hero .delivery-note.style-badge { padding: 10px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); }
.ws-hero .delivery-note.style-bar { border-left: 4px solid var(--brand); }
.ws-hero .delivery-note.style-bar > .icon, .ws-hero .delivery-strong { color: var(--ws-accent); }
.ws-hero .delivery-note.style-badge { padding: 0; }
.ws-hero .delivery-note.style-bar.is-closed, .ws-hero .delivery-note.style-bar.is-late { border-left-color: #78909c; }
.ws-hero .delivery-note.style-bar.is-closed > .icon, .ws-hero .delivery-note.style-bar.is-closed .delivery-strong,
.ws-hero .delivery-note.style-bar.is-late > .icon, .ws-hero .delivery-note.style-bar.is-late .delivery-strong { color: var(--ws-soft); }
/* the big drop zone */
.ws-drop { margin-top: 20px; display: grid; gap: 12px; }
.ws-drop .dropzone { padding: 24px 26px; border: 2px dashed color-mix(in srgb, var(--brand) 65%, #fff); border-radius: 12px; background: rgba(255, 255, 255, 0.04); gap: 8px; }
.ws-drop .dropzone.is-over { background: rgba(255, 255, 255, 0.11); }
.ws-drop .dropzone:focus-within { outline-color: var(--ws-accent); }
.ws-drop .dropzone-prompt { gap: 20px; color: var(--ws-soft); }
.ws-drop .dropzone-prompt b { color: #fff; font-size: 20px; font-weight: 700; }
.ws-drop .dropzone-plus { width: 60px; height: 60px; border-radius: 14px; font-size: 36px; }
.ws-drop .dropzone-sub { color: var(--ws-soft); font-size: 13.5px; }
.ws-drop .dropzone.has-files .dropzone-prompt { display: none; }
.ws-drop .file-list { font-size: 20px; font-weight: 700; color: #fff; gap: 8px; }
.ws-drop .file-list > div { align-items: center; justify-content: flex-start; gap: 18px; }
.ws-drop .file-list > div::before {
  content: ""; flex: none; width: 60px; height: 60px; border-radius: 14px;
  background: var(--brand-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.ws-drop .file-list .link-button { color: var(--ws-accent); font-size: 14px; }
.ws-drop .dropzone-status { margin-top: 0; background: transparent; border-color: rgba(255, 255, 255, 0.16); color: var(--ws-soft); }
.ws-drop .kept-files { background: rgba(76, 175, 106, 0.18); color: #c8f0d3; }
.ws-read { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ws-read-title { font-size: 12.5px; font-weight: 600; color: var(--ws-accent); }
.ws-read-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-read-chips span { padding: 2px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
/* the panels */
.ws-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-top: -56px; }
.ws-main { display: grid; gap: 18px; min-width: 0; align-content: start; }
.ws-panel { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 22px 24px; background: var(--surface); border-radius: 12px; box-shadow: 0 1px 2px rgba(38, 50, 56, 0.08), 0 10px 30px rgba(38, 50, 56, 0.08); }
.ws-panel > h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.ws-panel > h2 .icon { color: var(--brand); width: 18px; height: 18px; }
.ws-sub { font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; }
.ws-sub .muted { font-weight: 400; font-size: 13px; }
.ws-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 4px; background: var(--success-bg); color: var(--success-ink); }
.ws-more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; padding: 4px 0; }
.ws-more > summary:hover { color: var(--ink); }
.ws-more[open] > summary { margin-bottom: 10px; }
.fs-layout-steps .autofilled, .fs-layout-workshop .autofilled { box-shadow: none; border-color: #7cc48b; background-color: color-mix(in srgb, var(--success-bg) 40%, var(--surface)); }
/* tuning types: big tiles */
.fs-layout-workshop .type-cards:not(.option-cards) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card { flex-direction: column; gap: 0; min-height: 128px; padding: 14px; border-radius: 10px; }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card:has(input:checked) { border: 2px solid var(--brand); padding: 13px; box-shadow: none; background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card-body { padding-right: 0; gap: 4px; }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card-name { flex-direction: column; gap: 10px; font-size: 15px; font-weight: 700; }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card-name .icon { width: 36px; height: 36px; padding: 9px; margin: 0; border-radius: 9px; background: var(--surface-3); color: var(--ink-2); }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card:has(input:checked) .type-card-name .icon { background: var(--brand-solid); color: var(--on-brand); }
.fs-layout-workshop .type-cards:not(.option-cards) .credit-badge { top: 14px; right: 14px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; color: var(--ink); }
.fs-layout-workshop .type-cards:not(.option-cards) .type-card:has(input:checked) .credit-badge { top: 13px; right: 13px; }
/* options: a tidy grid (Compact uses the same rules). All tiles of a row are as high as the highest one (a
   subgrid with two rows per option) and the question of a ticked option (DTC, RPM, loudness) hangs directly
   under its own tile. A browser without subgrid shows every tile at its own height, which is still tidy. */
.fs-layout-workshop .option-cards, .fs-layout-compact .option-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 8px; }
.fs-layout-workshop .option-item:not([hidden]), .fs-layout-compact .option-item:not([hidden]) { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.fs-layout-workshop .option-cards .type-card, .fs-layout-compact .option-cards .type-card { margin-bottom: 8px; }
.fs-layout-workshop .option-ask, .fs-layout-compact .option-ask { margin-top: -9px; margin-bottom: 8px; border: 1px solid var(--brand); border-top: 1px dashed var(--line-strong); }
.fs-layout-workshop .option-cards .type-card { min-height: 54px; padding: 8px 12px; border-radius: 8px; align-items: center; gap: 8px; }
.fs-layout-workshop .option-cards .type-card-body { padding-right: 0; }
.fs-layout-workshop .option-cards .type-card-name { font-size: 14px; line-height: 1.25; }
.fs-layout-workshop .option-cards .type-card-text { font-size: 12px; }
.fs-layout-workshop .option-cards .credit-badge { position: static; padding: 0 0 0 4px; border: 0; background: none; font-size: 12.5px; align-self: center; }
.fs-layout-workshop .option-cards .type-card:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.fs-layout-workshop .option-item.has-ask:has(input[data-option]:checked) .type-card { border-radius: 8px 8px 0 0; }
.fs-layout-workshop .option-ask { border-radius: 0 0 8px 8px; }
/* the dark summary */
.ws-summary { background: #2d3a41; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(38, 50, 56, 0.25); overflow: hidden; }
.ws-summary .card-head { display: none; }
.ws-summary .fs-sum { padding: 20px; gap: 12px; }
.ws-summary .muted { color: var(--ws-soft); }
.ws-summary .fs-sum-total { flex-direction: column; align-items: flex-start; gap: 0; }
.ws-summary .fs-sum-big { font-size: 15px; }
.ws-summary .fs-sum-big b.brand-ink { color: #fff; font-size: 38px; letter-spacing: -0.03em; line-height: 1.1; }
.ws-summary .fs-sum-big span.brand-ink { color: var(--ws-accent); }
.ws-summary .fs-sum-line b { color: #fff; }
.ws-summary .fs-sum-balance { border-top-color: rgba(255, 255, 255, 0.16); }
.ws-summary .fs-need { background: rgba(255, 255, 255, 0.08); color: var(--ws-accent); padding: 10px 12px; }
.ws-summary .fs-chip { background: transparent; color: #ffe3d0; border-color: var(--ws-accent); }
.ws-summary .fs-ok { background: rgba(76, 175, 106, 0.2); color: #c8f0d3; }
.ws-summary .fs-note { color: var(--ws-soft); }
.ws-summary .notice a { color: inherit; }
@media (max-width: 1100px) {
  .ws-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .ws-hero { margin: -20px -14px 0; padding: 22px 14px 70px; }
  .ws-body { margin-top: -48px; }
}
@media (max-width: 700px) {
  .ws-panel { padding: 18px 16px; }
  .ws-drop .dropzone { padding: 18px 16px; }
  .ws-drop .dropzone-prompt { gap: 14px; }
  .ws-drop .dropzone-prompt b { font-size: 17px; }
  .ws-drop .dropzone-plus { width: 48px; height: 48px; font-size: 30px; }
  .ws-drop .file-list { font-size: 16px; }
  .ws-drop .file-list > div::before { width: 44px; height: 44px; background-size: 24px; }
  .fs-layout-workshop .type-cards:not(.option-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 560px) {
  /* on a phone a tile is one row (icon, name, price) instead of a tall block */
  .fs-layout-workshop .type-cards:not(.option-cards) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fs-layout-workshop .type-cards:not(.option-cards) .type-card { flex-direction: row; align-items: center; min-height: 0; gap: 10px; }
  .fs-layout-workshop .type-cards:not(.option-cards) .type-card-body { flex: 1; }
  .fs-layout-workshop .type-cards:not(.option-cards) .type-card-name { flex-direction: row; align-items: center; gap: 12px; }
  .fs-layout-workshop .type-cards:not(.option-cards) .type-card-name .icon { flex: none; }
  .fs-layout-workshop .type-cards:not(.option-cards) .credit-badge,
  .fs-layout-workshop .type-cards:not(.option-cards) .type-card:has(input:checked) .credit-badge { position: static; flex: none; align-self: flex-start; }
}

/* ============================================================ compact */
.fs-layout-compact { display: block; }
.cp-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 16px; }
.cp-head h1 { margin-right: 6px; }
.cp-head .delivery-note { padding: 3px 14px 3px 12px; border-radius: 999px; font-size: 13.5px; }
.cp-head .delivery-note.style-bar { padding: 4px 14px 4px 12px; border-left-width: 1px; border-left-color: color-mix(in srgb, var(--brand) 35%, var(--surface)); }
.cp-head .delivery-note.style-bar > .icon { width: 18px; height: 18px; }
.cp-head .delivery-note.style-badge { padding: 0; }
.cp-head .delivery-big { min-width: 0; padding: 3px 12px; flex-direction: row; gap: 5px; align-items: baseline; }
.cp-head .delivery-big b { font-size: 16px; }
.cp-head .delivery-big span { font-size: 12px; }
.cp-head .delivery-body { padding: 3px 14px; }
.cp-head .delivery-body b { font-size: 13.5px; }
.cp-head .delivery-body .muted { display: none; }
.cp-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "file vehicle" "tuning tuning" "service service" "agree agree"; gap: 16px; align-items: stretch; }
.cp-file { grid-area: file; display: flex; flex-direction: column; }
.cp-vehicle { grid-area: vehicle; }
.cp-tuning { grid-area: tuning; }
.cp-service { grid-area: service; }
.cp-agree { grid-area: agree; }
@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "file" "vehicle" "tuning" "service" "agree"; }
}
.cp-card { padding: 16px 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.cp-file { display: flex; }
.cp-card > h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0; }
.cp-card > h2 .icon { color: var(--brand); }
.cp-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 4px; background: var(--success-bg); color: var(--success-ink); }
.cp-sub { font-size: 13.5px; margin-top: 2px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cp-sub .muted { font-weight: 400; font-size: 13px; }
/* The vehicle in groups (1.61.0): "Vehicle and engine", "Details" and "Power and ECU", and under the file "How was the file read?".
   The columns follow the width of the card, not of the window (next to the file card on a wide window, under it on a narrow one):
   4 on a wide card, 2 on a narrower one, 1 on a phone. A column is never narrower than about 200px, which is wider than the longest
   label ("Hardwarenummer (optioneel)", 190px), so no label runs onto a second line and the fields of a row stay level, also when one
   of them shows an error message or a second box for a typed value. Browsers without container queries keep the two columns. */
.cp-file { container: cpf / inline-size; }
.cp-vehicle { container: cpv / inline-size; }
.cp-card > .cp-group { margin-top: 2px; }
.cp-card > .cp-group + .cp-group { margin-top: 6px; }
.cp-group { display: grid; gap: 12px; min-width: 0; }
.cp-group-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cp-group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.cp-fields > .cp-wide, .cp-fields > .wide { grid-column: 1 / -1; }
.cp-read .cp-fields { grid-template-columns: minmax(0, 1fr); }
@container cpv (min-width: 840px) {
  .cp-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-fields > .cp-wide { grid-column: span 2; }
}
@container cpv (max-width: 419px) {
  .cp-fields { grid-template-columns: minmax(0, 1fr); }
}
@container cpf (min-width: 420px) {
  .cp-read .cp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* power: hp and kW side by side, the unit inside the field at the right */
.power-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.input-suffix { position: relative; display: block; min-width: 0; }
.input-suffix .input { padding-right: 34px; }
.input-suffix .suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-2); pointer-events: none; }
.input-suffix input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.input-suffix input::-webkit-outer-spin-button, .input-suffix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cp-file > .field { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cp-file .dropzone { flex: 1; align-content: center; justify-items: center; text-align: center; padding: 18px 16px; }
.cp-file .dropzone-prompt { flex-direction: column; text-align: center; gap: 10px; }
.cp-file .dropzone-words { justify-items: center; }
.cp-file .dropzone-plus { width: 48px; height: 48px; font-size: 32px; }
.cp-file .dropzone.has-files .dropzone-prompt { display: none; }
.cp-file .file-list { font-weight: 700; justify-items: center; }
.cp-file .file-list > div { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.cp-file .file-list > div > span { overflow-wrap: anywhere; }
.cp-file .dropzone-status { margin-top: 0; padding: 7px 12px; font-size: 12.5px; }
.cp-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 24px; align-items: start; }
.cp-agree .agreements { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px 24px; }
.cp-agree .check-all { grid-column: 1 / -1; }
.fs-layout-compact .autofilled { box-shadow: none; border-color: #7cc48b; background-color: color-mix(in srgb, var(--success-bg) 40%, var(--surface)); }
/* tuning types: one row of tiles; options: the tidy grid of the Workshop block above */
.fs-layout-compact .type-cards:not(.option-cards) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.fs-layout-compact .type-cards:not(.option-cards) .type-card { min-height: 0; padding: 10px 12px; }
.fs-layout-compact .type-cards:not(.option-cards) .type-card:has(input:checked) { border: 2px solid var(--brand); padding: 9px 11px; box-shadow: none; background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.fs-layout-compact .type-cards:not(.option-cards) .type-card-body { padding-right: 0; gap: 1px; }
.fs-layout-compact .type-cards:not(.option-cards) .type-card-name .icon { display: none; }
.fs-layout-compact .type-cards:not(.option-cards) .credit-badge { position: static; flex: none; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; color: var(--ink); }
.cp-options { display: grid; gap: 10px; }
.fs-layout-compact .option-cards .type-card { min-height: 46px; padding: 5px 12px 5px 10px; border-radius: var(--radius); align-items: center; gap: 8px; }
.fs-layout-compact .option-cards .type-card-body { padding-right: 0; }
.fs-layout-compact .option-cards .type-card-name { line-height: 1.2; }
.fs-layout-compact .option-cards .type-card-text { display: none; }
.fs-layout-compact .option-cards .credit-badge { position: static; padding: 0; border: 0; background: none; font-size: 12.5px; align-self: center; }
.fs-layout-compact .option-cards .type-card:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.fs-layout-compact .option-item.has-ask:has(input[data-option]:checked) .type-card { border-radius: var(--radius) var(--radius) 0 0; }
.fs-layout-compact .option-ask { border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 700px) {
  .fs-layout-compact .option-cards .type-card { padding: 8px 12px 8px 10px; }
  .fs-layout-compact .option-cards .type-card-text { display: block; }
  .fs-layout-compact .type-cards:not(.option-cards) { grid-template-columns: minmax(0, 1fr); }
  .cp-card { padding: 14px 14px; }
}
/* the bar at the bottom: on a wide screen it carries the total, what is missing and the Send button */
body.has-fs-bar-wide .toasts { bottom: 92px; }
body.has-fs-bar-wide .main { padding-bottom: 96px; }
@media (max-width: 1100px) {
  .fs-bar-desk { display: none; }
}
@media (min-width: 1101px) {
  .fs-bar-wide {
    display: flex; position: fixed; left: var(--side-width); right: 0; bottom: 0; z-index: 25; align-items: center;
    padding: 10px 28px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(38, 50, 56, 0.10);
  }
  .fs-bar-wide .fs-bar-mobile { display: none; }
  .fs-bar-desk { display: flex; align-items: center; gap: 22px; width: 100%; min-height: 56px; }
  .fs-bar-total { display: grid; line-height: 1.15; flex: none; }
  .fs-bar-total .muted { font-size: 12.5px; }
  .fs-bar-big b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-ink); font-variant-numeric: tabular-nums; }
  .fs-bar-big span { font-size: 13px; font-weight: 600; color: var(--brand-ink); }
  .fs-bar-calc { display: grid; gap: 2px; flex: none; padding-left: 22px; border-left: 1px solid var(--line); font-size: 12.5px; line-height: 1.4; }
  .fs-bar-calc b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
  .fs-bar-need { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; padding: 5px 10px; }
  .fs-bar-need .fs-need-title { margin: 0; white-space: nowrap; }
  .fs-bar-ok { align-items: center; }
  .fs-bar-ok .icon { margin-top: 0; }
  .fs-bar-short { display: inline-flex; align-items: center; gap: 6px; color: var(--warning-ink); font-weight: 600; }
  .fs-bar-send { margin-left: auto; flex: none; }
}
@media (max-width: 1280px) and (min-width: 1101px) {
  .fs-bar-calc { display: none; }
}

/* the field that "Show missing", a chip or an error link has just jumped to */
.fs-nudge { border-radius: var(--radius); animation: fs-nudge 1.7s ease-out; }
@keyframes fs-nudge {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning-ink) 60%, transparent); }
  20% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--warning-ink) 38%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-nudge { animation: none; outline: 2px solid var(--warning-ink); outline-offset: 3px; }
}

/* ===================================================================== 11 the customer picks a look
   Only on the upload page and only when Settings → File service lets customers pick: a row of four small
   buttons above the page (a drawing of the look and its name), outside the upload form. */
.layout-switch { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; }
.layout-switch-label { color: var(--ink-2); font-size: 13px; }
.layout-switch-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.layout-switch-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 11px 4px 4px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.layout-switch-btn:hover { border-color: var(--line-strong); }
.layout-switch-btn.is-active { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface-2); cursor: default; }
.layout-switch-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.layout-switch-thumb { display: block; width: 46px; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; line-height: 0; }
.layout-switch-thumb .wf { display: block; width: 100%; height: auto; }
.layout-switch-warn { flex: 1 1 100%; align-items: center; flex-wrap: wrap; margin: 4px 0 0; }
.layout-switch-warn .notice-body { flex: 1 1 240px; }
/* the dark top of the workshop look sits against the top of the page; the row above it takes that place */
.layout-switch ~ .fs-layout-workshop .ws-hero { margin-top: 0; }
@media (max-width: 700px) {
  .layout-switch { justify-content: flex-start; }
  .layout-switch-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .layout-switch-btn { justify-content: flex-start; }
}

/* ===================================================================== 12 credit deals (acties)
   The banner with the countdown, the pack cards with extra credits, the checkout lines and the admin form. Only the
   portal's own colour tokens are used, so the light and the dark theme both work. */

/* The banner on Buy credits: what the deal is and how long it lasts. */
.deal-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: var(--radius); background: var(--side); color: var(--side-ink);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.deal-main { flex: 1 1 360px; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.deal-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 12px;
  background: var(--brand-solid); color: var(--on-brand); font-size: 12.5px; font-weight: 700;
}
.deal-banner h2 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.deal-banner p { color: var(--side-ink-2); max-width: 62ch; }
.deal-clock { display: grid; gap: 6px; justify-items: end; }
.deal-clock-label { color: var(--side-ink-2); font-size: 12.5px; font-weight: 600; }
.deal-units { display: flex; gap: 8px; }
.deal-units > div { min-width: 60px; padding: 7px 8px 6px; border-radius: var(--radius); background: var(--side-hover); text-align: center; }
.deal-units > div > b { display: block; font-size: 24px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.deal-units > div > span { display: block; color: var(--side-ink-2); font-size: 12px; font-weight: 600; }
.deal-clock small { color: var(--side-ink-2); }
.deal-clock.is-over .deal-units { opacity: 0.55; }
@media (max-width: 640px) {
  .deal-banner { padding: 16px; }
  .deal-banner h2 { font-size: 18px; }
  .deal-clock { justify-items: start; width: 100%; }
  .deal-units { width: 100%; }
  .deal-units > div { flex: 1 1 0; min-width: 0; }
}

/* The dashboard: the same deal as one line. */
.deal-slim {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px;
  border-radius: var(--radius); background: var(--side); color: var(--side-ink); text-decoration: none;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.deal-slim:hover { background: var(--side-hover); }
.deal-slim-text { flex: 1 1 260px; min-width: 0; display: grid; gap: 1px; }
.deal-slim-text b { font-weight: 700; }
.deal-slim-text span { color: var(--side-ink-2); font-size: 12.5px; }
.deal-slim .btn { flex: none; }

/* A package that is part of the deal: the extra credits and what the credit now costs. */
.package-labels { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.package-labels .package-label { margin-bottom: 0; }
.package-label-deal { background: var(--success-bg); color: var(--success-ink); }
.package-bonus {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--success-bg); color: var(--success-ink); font-weight: 600; line-height: 1.3;
}
.package-bonus .icon { margin-top: 1px; }
.package-bonus small { display: block; font-weight: 500; }
.package .per s { color: var(--ink-3); }

/* Checkout: the extra credits of the order. */
.deal-line { display: flex; align-items: flex-start; gap: 8px; color: var(--success-ink); font-weight: 600; margin-top: 6px; }
.deal-line:empty { display: none; }
.deal-line .icon { margin-top: 2px; }
.deal-line small { display: block; font-weight: 500; }
.deal-total { font-weight: 600; }

/* Admin: the form. */
.input-affix { display: flex; }
.input-affix .input { border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; font-variant-numeric: tabular-nums; }
.input-affix > span {
  display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-left: 0; white-space: nowrap;
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-2); color: var(--ink-2); font-weight: 600;
}
.datetime-pair { display: grid; grid-template-columns: minmax(0, 1fr) 10em; gap: 8px; }
.deal-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.deal-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.deal-group h3 { font-size: 14px; }
.deal-group.is-off { background: var(--surface-2); }
.deal-group .notice { padding: 8px 10px; font-size: 12.5px; gap: 8px; }
.deal-sum { font-size: 14.5px; line-height: 1.55; }
.deal-fine { color: var(--ink-2); font-size: 12.5px; }
.deal-lengths { margin-bottom: 0; }
.deal-cap { max-width: 380px; }
.deal-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.deal-row > span:nth-child(n+2) { text-align: right; }
.deal-row-head { padding: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.deal-gets { font-weight: 700; }
.deal-extra { display: block; font-weight: 400; font-size: 12.5px; color: var(--success-ink); }

/* ===================================================================== 13 while a file is read
   The picture in the upload box while the file is sent and read (macros/analyzing.html, moved by static/js/analyze.js)
   and its previews in Settings → File service. Seven styles (ring, bytes, calm, dyno, turbo, border, text) share one
   structure: a mark that moves, a title and a line of explanation per step, a percentage. Only the portal's colour
   tokens are used, so the light and the dark theme both work; the workshop look (dark top) sets its own below.
   Where someone asks for less motion, the rule at the top of this file switches every animation and transition off:
   so each style is written to look right standing still. The plain rules are the finished picture and the animations
   draw the way to it. */
.az {
  --az-accent: var(--brand); --az-ink: var(--ink); --az-ink-2: var(--ink-2); --az-ink-3: var(--ink-3);
  --az-track: color-mix(in srgb, var(--brand) 22%, transparent); --az-well: var(--surface-3); --az-hub2: var(--surface-2);
  --az-ok: var(--success-ink); --az-on-ok: var(--success-bg); --az-border: var(--brand);
  --az-ring: 24px; --az-check: 24px; --az-title: 15px; --az-sub: 12.5px; --az-r: var(--radius); --az-p: 0;
  display: block; min-width: 0; justify-self: stretch;
  margin: -10px; padding: 10px; overflow: hidden;        /* room for a pulse that grows beyond its mark */
}
.az:not([hidden]) { animation: az-in .24s ease-out backwards; }
.az[data-leave] { animation: az-out .2s ease-in both; }
@keyframes az-in { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 180px; } }
@keyframes az-out { from { opacity: 1; max-height: 180px; } to { opacity: 0; max-height: 0; } }
/* the zone with a running border or a bar along its edge: nothing may stick out of its corners */
.dropzone:has(> .az:not([hidden])) { overflow: hidden; }
.dropzone:has(> .az--border:not([hidden]):not([data-state="done"])), .az-demo:has(> .az--border:not([hidden]):not([data-state="done"])) { border-color: transparent; }

.az-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.az-mark { position: relative; flex: none; display: grid; place-items: center; min-width: var(--az-check); min-height: var(--az-check); }
.az-art { display: grid; place-items: center; transition: opacity .2s; }
.az-check { position: absolute; inset: 0; margin: auto; width: var(--az-check); height: var(--az-check); display: grid; place-items: center; border-radius: 50%;
  background: var(--az-ok); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s; }
.az-check svg { stroke: var(--az-on-ok); }
.az-check path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .3s ease-out .1s; }
.az[data-state="done"] .az-art { opacity: 0; }
.az[data-state="done"] .az-check { opacity: 1; transform: none; }
.az[data-state="done"] .az-check path { stroke-dashoffset: 0; }

/* the words: every step has its own, they lie on top of each other so the box does not jump when a step changes */
.az-text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.az-titles, .az-subs { display: grid; }
.az-titles > *, .az-subs > * { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity .2s; }
.az-title { font-size: var(--az-title); font-weight: 600; line-height: 1.4; color: var(--az-ink); }
.az-sub { font-size: var(--az-sub); line-height: 1.4; color: var(--az-ink-2); font-variant-numeric: tabular-nums; }
.az[data-state="upload"] .az-t-upload, .az[data-state="analyze"] .az-t-analyze,
.az[data-state="fill"] .az-t-fill, .az[data-state="done"] .az-t-done { opacity: 1; }
.az[data-state="upload"] .az-s-upload, .az[data-state="analyze"]:not([data-slow]) .az-s-first,
.az[data-state="analyze"][data-slow] .az-s-slow, .az[data-state="fill"] .az-s-fill { opacity: 1; }
.az-pct { display: none; margin-left: auto; padding-left: 8px; font-size: 22px; font-weight: 700; line-height: 1; white-space: nowrap; color: var(--az-ink);
  font-variant-numeric: tabular-nums; }
.az[data-progress][data-state="upload"] .az-pct { display: block; }

/* ring: a turning ring, and a thin bar along the bottom edge of the box */
.az--ring .az-spin { width: var(--az-ring); height: var(--az-ring); border-radius: 50%; border: 3px solid var(--az-track); border-top-color: var(--az-accent); animation: az-spin .9s linear infinite; }
@keyframes az-spin { to { transform: rotate(360deg); } }
.az-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; overflow: hidden; opacity: 0; transition: opacity .2s; }
.az[data-progress] .az-bar { background: color-mix(in srgb, var(--az-accent) 14%, transparent); }
.az[data-state="upload"] .az-bar, .az[data-state="analyze"] .az-bar, .az[data-state="fill"] .az-bar, .az[data-state="done"] .az-bar { opacity: 1; }
.az-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--az-p) * 1%); background: var(--az-accent); opacity: 0; transition: width .25s linear, opacity .2s; }
.az[data-progress][data-state="upload"] .az-fill, .az[data-state="fill"] .az-fill, .az[data-state="done"] .az-fill { opacity: 1; }
.az[data-state="fill"] .az-fill, .az[data-state="done"] .az-fill { width: 100%; }
.az-sweep { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .2s; }
.az[data-state="analyze"] .az-sweep { opacity: 1; }
.az-sweep::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; opacity: .35;
  background: linear-gradient(90deg, transparent, var(--az-accent) 30%, var(--az-accent) 70%, transparent); animation: az-sweep 1.5s ease-in-out infinite; }
@keyframes az-sweep { from { left: -34%; width: 34%; opacity: 1; } to { left: 100%; width: 34%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .az--ring .az-spin { border-right-color: var(--az-accent); } }

/* bytes: the bytes of the file run under a reading head */
.az--bytes .az-row { gap: 6px; }                    /* the dot is 9px in a box as large as the tick that takes its place */
.az--bytes .az-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.az-live { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--az-accent); }
.az-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--az-accent); opacity: 0; animation: az-ping 1.4s ease-out infinite; }
@keyframes az-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.az-well { position: relative; height: 34px; margin-top: 8px; overflow: hidden; border-radius: var(--radius); background: var(--az-well); transition: opacity .2s;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.az[data-state="done"] .az-well { opacity: .35; }
.az-track { display: flex; width: max-content; animation: az-hex 14s linear infinite; }
.az-hx { flex: none; padding-right: .9em; font: 500 12.5px/34px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .07em; color: var(--az-ink-3); white-space: nowrap; }
@keyframes az-hex { to { transform: translateX(-50%); } }
.az-head { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 30px; margin-left: -15px; border: 1.5px solid var(--az-accent); border-radius: 3px;
  background: color-mix(in srgb, var(--az-accent) 14%, transparent); }

/* calm: a file icon that pulses gently, and three dots after the title */
.az--calm .az-icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--az-accent);
  background: color-mix(in srgb, var(--az-accent) 12%, transparent); }
.az--calm .az-icon::after { content: ""; position: absolute; inset: 0; border-radius: 9px; border: 2px solid var(--az-accent); opacity: 0; animation: az-ping-icon 1.6s ease-out infinite; }
@keyframes az-ping-icon { from { transform: scale(1); opacity: .6; } to { transform: scale(1.55); opacity: 0; } }
.az-dots { display: inline-flex; gap: 5px; margin-left: 7px; vertical-align: middle; }
.az-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--az-accent); opacity: .8; animation: az-dot 1.2s ease-in-out infinite; }
.az-dots i:nth-child(2) { animation-delay: .15s; }
.az-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes az-dot { 0%, 80%, 100% { transform: scale(.55); opacity: .35; } 40% { transform: scale(1); opacity: 1; } }

/* dyno: a small dyno run draws itself, power in red and torque in grey, again and again */
.az--dyno .az-row { gap: 18px; }
.az-dyno { position: relative; width: 128px; height: 52px; }
.az-dyno svg { display: block; max-width: none; }
.az-grid { stroke: var(--line-strong); stroke-opacity: .28; stroke-width: .8; }
.az-axes { stroke: var(--line-strong); stroke-width: 1.2; }
.az-curve { stroke-linecap: butt; stroke-dasharray: 100 200; }
.az-tq { stroke: var(--az-ink-2); stroke-width: 2; animation: az-draw-tq 3.6s linear infinite; }
.az-hp { stroke: var(--az-accent); stroke-width: 2.4; animation: az-draw-hp 3.6s linear infinite; }
@keyframes az-draw-tq {
  0% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  56%, 86% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes az-draw-hp {
  0% { stroke-dashoffset: 100; opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  62%, 86% { stroke-dashoffset: 0; opacity: 1; }
  97%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.az-dyno-dot { display: none; }
.az--dyno .az-check { inset: auto; left: 93.75%; top: 21%; margin: calc(var(--az-check) / -2) 0 0 calc(var(--az-check) / -2); }
.az--dyno[data-state="done"] .az-art { opacity: .3; }
.az--dyno[data-state="done"] .az-curve, .az--dyno[data-state="done"] .az-dyno-dot { animation: none; }
@supports (offset-path: path("M0 0")) {
  .az-dyno-dot { position: absolute; left: 0; top: 0; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--az-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--az-accent) 18%, transparent);
    offset-path: path('M8 44 C32 40 54 29 76 15 C86 9 96 6 106 6.5 C112 7 117 9 120 11'); offset-rotate: 0deg; offset-distance: 100%; animation: az-dot-run 3.6s linear infinite; }
}
@keyframes az-dot-run {
  0% { offset-distance: 0%; opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .3, 1); }
  3% { opacity: 1; }
  62%, 86% { offset-distance: 100%; opacity: 1; }
  97%, 100% { offset-distance: 100%; opacity: 0; }
}

/* turbo: the wheel spools up, then blurs into a disc */
.az--turbo .az-row { gap: 14px; }
.az-turbo { position: relative; width: 40px; height: 40px; }
.az-turbo svg { display: block; max-width: none; }
.az-housing { stroke-width: 1.6; stroke: color-mix(in srgb, var(--az-accent) 62%, transparent); animation: az-housing 2.5s linear both; }
@keyframes az-housing { from { stroke: color-mix(in srgb, var(--az-accent) 26%, transparent); } to { stroke: color-mix(in srgb, var(--az-accent) 62%, transparent); } }
.az-rotor { fill: var(--az-accent); transform-origin: 20px 20px; animation: az-spool 3s cubic-bezier(.5, 0, .7, .33) forwards, az-whirl .6716s linear 3s infinite; }
@keyframes az-spool { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes az-whirl { to { transform: rotate(360deg); } }
.az-hub { fill: var(--az-ink); }
.az-hub2 { fill: var(--az-hub2); }
.az-blur { position: absolute; inset: 8.5%; border-radius: 50%; opacity: .4; animation: az-blur-in 2.5s linear both;
  background: radial-gradient(closest-side, transparent 55%, color-mix(in srgb, var(--az-accent) 50%, transparent)); }
@keyframes az-blur-in { from { opacity: 0; } to { opacity: 1; } }

/* border: no spinner at all; the dashed border of the box starts to run around it, the box breathes and the title glints */
.az--border .az-mark { display: none; }
.az--border[data-state="done"] .az-mark { display: grid; }
.az-glow { position: absolute; inset: 0; border-radius: var(--az-r); background: var(--az-accent); opacity: .04; pointer-events: none; animation: az-breathe 2.4s ease-in-out infinite; }
@keyframes az-breathe { 0%, 100% { opacity: 0; } 50% { opacity: .07; } }
.az-ants { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); overflow: visible; pointer-events: none; }
.az-ants rect { fill: none; stroke: var(--az-border); stroke-width: 2px; stroke-dasharray: 5 5; rx: .5px; ry: .5px; animation: az-march .5s linear infinite; }
@keyframes az-march { to { stroke-dashoffset: -10; } }
.az--border .az-title { width: max-content; color: transparent; -webkit-background-clip: text; background-clip: text; animation: az-shine 2.2s linear infinite;
  background-image: linear-gradient(100deg, var(--az-ink) 0 42%, var(--az-accent) 50%, var(--az-ink) 58% 100%); background-size: 300% 100%; background-position: 100% 0; }
@keyframes az-shine { to { background-position: 0 0; } }
.az--border[data-state="done"] .az-title { animation: none; color: var(--az-ink); background: none; }
.az-ants { transition: opacity .3s; }
.az--border[data-state="done"] .az-ants { opacity: 0; }
.az--border[data-state="done"] .az-glow { animation: none; opacity: 0; }
.dropzone:has(> .az--border), .az-demo:has(> .az--border) { transition: border-color .3s; }

/* the line of text under the box: kept for screen readers while the picture shows the same, and the percentage of the text style */
.autofill-status[data-quiet] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.autofill-status:has(.autofill-pct) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.autofill-pct { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the looks of the upload page */
.ws-drop .az { --az-accent: var(--ws-accent); --az-ink: #fff; --az-ink-2: var(--ws-soft); --az-ink-3: var(--ws-soft); --az-track: rgba(255, 255, 255, .18);
  --az-well: rgba(255, 255, 255, .08); --az-hub2: #263238; --az-ok: #4caf6a; --az-on-ok: #0f2f1a; --az-border: color-mix(in srgb, var(--brand) 65%, #fff);
  --az-ring: 28px; --az-check: 28px; --az-title: 16px; --az-sub: 13px; --az-r: 12px; }
.ws-drop .az-ants rect { rx: 9px; ry: 9px; }
.ws-drop .az-bar { background: rgba(255, 255, 255, .12); }
.cp-file .az-row { justify-content: center; text-align: left; }
.cp-file .az-text { flex: 0 1 auto; }
.cp-file .az-pct { margin-left: 0; }
@media (min-width: 1101px) {
  /* beside the vehicle card the file card is only 340px wide: the dyno graph is too wide to share a line with the words */
  .cp-file .az--dyno .az-row { flex-direction: column; gap: 8px; text-align: center; }
  .cp-file .az--dyno .az-pct { padding-left: 0; }
}
@media (max-width: 560px) {
  .az--dyno .az-row { gap: 12px; }
  .az-dyno { width: 96px; height: 39px; }
  .az-dyno svg { width: 96px; height: 39px; }
  .az-dyno-dot { offset-path: path('M6 33 C24 30 40.5 21.75 57 11.25 C64.5 6.75 72 4.5 79.5 4.875 C84 5.25 87.75 6.75 90 8.25'); }
  .az-pct { font-size: 18px; }
}
@media (max-width: 380px) {
  /* a very narrow phone: the dyno graph goes above its words instead of beside them, where they would break over three lines */
  .az--dyno .az-row { flex-direction: column; gap: 8px; text-align: center; }
  .az--dyno .az-pct { margin-left: 0; padding-left: 0; }
}

/* the fields of the form while the file is read: a grey bar where the answer will come (made by analyze.js) */
.az-veiled { position: relative; }
.az-sk { position: absolute; z-index: 1; border-radius: var(--radius); background: var(--surface); opacity: 0; pointer-events: none; transition: opacity .25s; }
.az-sk.is-on { opacity: 1; }
.az-sk::before { content: ""; position: absolute; left: 12px; top: 50%; width: var(--az-sk-w, 46%); height: 10px; margin-top: -5px; border-radius: 5px;
  background: linear-gradient(90deg, var(--az-sk-a) 0 30%, var(--az-sk-b) 50%, var(--az-sk-a) 70% 100%) 100% 0 / 300% 100%; animation: az-shimmer 1.3s linear infinite; }
@keyframes az-shimmer { to { background-position: 0 0; } }
:root { --az-sk-a: color-mix(in srgb, var(--ink) 14%, var(--surface)); --az-sk-b: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --az-sk-a: color-mix(in srgb, var(--ink) 9%, var(--surface)); --az-sk-b: color-mix(in srgb, var(--ink) 20%, var(--surface)); } }
:root[data-theme="dark"] { --az-sk-a: color-mix(in srgb, var(--ink) 9%, var(--surface)); --az-sk-b: color-mix(in srgb, var(--ink) 20%, var(--surface)); }
.az-pop { animation: az-pop 1.4s ease-out; }
@keyframes az-pop {
  0% { box-shadow: 0 0 0 0 transparent; }
  20% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent); }
  100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); }
}

/* Settings → File service: the chooser with a live preview per style */
.az-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.az-choice .layout-name { flex-wrap: wrap; }
.az-demo { position: relative; display: grid; align-content: center; gap: 10px; min-height: 112px; padding: 14px 16px; overflow: hidden;
  border: 1.5px dashed var(--brand); border-radius: var(--radius); background: var(--surface-2); }
.az-demo-file { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.az-demo-strip { margin: 0; }
/* the same picture for the fields, as a loop made of CSS alone: the plain rules are the finished picture */
.az-fdemo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.az-fdemo-field { display: grid; gap: 4px; min-width: 0; }
.az-fdemo-label { font-weight: 600; font-size: 13.5px; }
.az-fdemo-box { position: relative; height: 38px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.az-fdemo-ph, .az-fdemo-val { position: absolute; left: 10px; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.az-fdemo-ph { color: var(--ink-3); opacity: 0; }
.az-fdemo-sk { position: absolute; inset: 0; border-radius: var(--radius); background: var(--surface); opacity: 0; }
.az-fdemo-sk::before { content: ""; position: absolute; left: 12px; top: 50%; width: 46%; height: 10px; margin-top: -5px; border-radius: 5px;
  background: linear-gradient(90deg, var(--az-sk-a) 0 30%, var(--az-sk-b) 50%, var(--az-sk-a) 70% 100%) 100% 0 / 300% 100%; animation: az-shimmer 1.3s linear infinite; }
.az-fdemo[data-on] .az-fdemo-ph { animation: az-fd-ph 7s linear infinite; }
.az-fdemo[data-on] .az-fdemo-sk { animation: az-fd-sk0 7s linear infinite; }
.az-fdemo[data-on] .az-fdemo-val { animation: az-fd-val0 7s linear infinite; }
.az-fdemo[data-on] .az-fdemo-box { animation: az-fd-box0 7s linear infinite; }
.az-fdemo[data-on] .az-fdemo-field:nth-child(2) .az-fdemo-sk { animation-name: az-fd-sk1; }
.az-fdemo[data-on] .az-fdemo-field:nth-child(3) .az-fdemo-sk { animation-name: az-fd-sk2; }
.az-fdemo[data-on] .az-fdemo-field:nth-child(2) .az-fdemo-val { animation-name: az-fd-val1; }
.az-fdemo[data-on] .az-fdemo-field:nth-child(3) .az-fdemo-val { animation-name: az-fd-val2; }
.az-fdemo[data-on] .az-fdemo-field:nth-child(2) .az-fdemo-box { animation-name: az-fd-box1; }
.az-fdemo[data-on] .az-fdemo-field:nth-child(3) .az-fdemo-box { animation-name: az-fd-box2; }
@keyframes az-fd-ph { 0%, 8% { opacity: 1; } 12%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes az-fd-sk0 { 0%, 8% { opacity: 0; } 12%, 42% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes az-fd-sk1 { 0%, 8% { opacity: 0; } 12%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes az-fd-sk2 { 0%, 8% { opacity: 0; } 12%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes az-fd-val0 { 0%, 43% { opacity: 0; } 47%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes az-fd-val1 { 0%, 53% { opacity: 0; } 57%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes az-fd-val2 { 0%, 63% { opacity: 0; } 67%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes az-fd-box0 { 0%, 43% { box-shadow: 0 0 0 0 transparent; } 47% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent); } 55%, 94% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); } 98%, 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes az-fd-box1 { 0%, 53% { box-shadow: 0 0 0 0 transparent; } 57% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent); } 65%, 94% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); } 98%, 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes az-fd-box2 { 0%, 63% { box-shadow: 0 0 0 0 transparent; } 67% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 28%, transparent); } 75%, 94% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent); } 98%, 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 560px) { .az-fdemo { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------- WinOLS files: what may the bot make? (Management → WinOLS files) */
.bw-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bw-pad { padding: 14px 16px 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.bw-pad h3 { font-size: 14.5px; }
.bw-pad .sub { color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
/* a row of a tuning type / of an option: name, (names), choice, buttons */
.bw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); }
.bw-row.opt { grid-template-columns: 200px minmax(0, 1fr) auto auto; }
.bw-row.is-new { background: var(--info-bg); }
.bw-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.bw-sub { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.bw-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 3px; font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
.bw-note .icon { margin-top: 2px; flex: none; }
.bw-warn { color: var(--warning-ink); }
.bw-words { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; min-width: 0; }
.bw-word { padding: 0 8px; border-radius: 10px; background: var(--surface-3); color: var(--ink-2); font-size: 12px; line-height: 20px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bw-more { background: none; border: 1px dashed var(--line-strong); }
.bw-act { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; min-width: 84px; }
.bw-act.one { min-width: 40px; }
.bw-act .btn { color: var(--ink-2); }
/* the three-way choice is a (native) select, tinted by what it says */
.bw-state { min-width: 150px; font-weight: 600; }
.bw-state option { color: var(--ink); background-color: var(--surface); font-weight: 500; }
:root .select.bw-state.auto { background-color: var(--success-bg); border-color: var(--success-ink); color: var(--success-ink); }
:root .select.bw-state.approve { background-color: var(--warning-bg); border-color: var(--warning-ink); color: var(--warning-ink); }
:root .select.bw-state.off { color: var(--ink-2); font-weight: 500; }
/* the names of a tuning type / an option, under its row */
.bw-editor { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius); }
.bw-editor > label { font-weight: 600; }
.bw-editor .hint, .bw-addrow .hint, .card-foot .hint { color: var(--ink-2); font-size: 12.5px; font-weight: 400; }
.bw-editor .check { margin-top: 4px; }
.bw-editor .check label { font-weight: 600; }
.bw-editor .check .hint { display: block; }
/* tuning types that are off: two to a line */
.bw-grouphead { padding: 8px 16px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.bw-offgrid { display: grid; grid-template-columns: 1fr 1fr; }
.bw-offgrid .bw-row { grid-template-columns: minmax(0, 1fr) auto; padding: 7px 16px; }
.bw-offgrid .bw-row:nth-child(odd) { border-right: 1px solid var(--line); }
.bw-offgrid .bw-name { font-weight: 500; color: var(--ink-2); }
/* the options */
.bw-empty { padding: 16px; border-top: 1px solid var(--line); color: var(--ink-2); }
.bw-addrow { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--line); }
.bw-addrow > label { font-weight: 600; }
.bw-menu { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); max-height: 340px; overflow: auto; }
.bw-menu li { padding: 9px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; cursor: pointer; }
.bw-menu li + li { border-top: 1px solid var(--line); }
.bw-menu li:hover, .bw-menu li.hl { background: var(--surface-2); }
.bw-menu li.hl .bw-pick { font-weight: 600; }
.bw-menu .muted { font-size: 12.5px; font-weight: 400; }
.bw-menu li.bw-menu-foot { color: var(--ink-3); cursor: default; font-size: 12.5px; background: none; }
.bw-help { padding: 12px 16px; border-top: 1px solid var(--line); }
.bw-help > summary { cursor: pointer; font-weight: 600; }
.bw-help > p { margin-top: 8px; }
@media (max-width: 600px) {
  .bw-state { min-width: 128px; }
  .bw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bw-row > .bw-act { grid-column: 2; grid-row: 1; }
  .bw-row > .bw-ctl { grid-column: 1 / -1; grid-row: 2; }
  .bw-row.sel > .bw-ctl { grid-column: 2; grid-row: 1; }
  .bw-row:not(.sel) .bw-state { width: 100%; }
  .bw-row.opt { grid-template-columns: minmax(0, 1fr) auto; }
  .bw-row.opt > .bw-w { grid-column: 1 / -1; grid-row: 2; }
  .bw-row.opt > .bw-ctl { grid-row: 3; }
  .bw-row.opt:not(.has-bonus) > .bw-ctl { display: none; }
  .bw-offgrid { grid-template-columns: 1fr; }
  .bw-offgrid .bw-row:nth-child(odd) { border-right: 0; }
}

/* ------------------------------------------------------------------ what the customer needs (file service page of the shop)
   The order at a glance, above everything else: the tuning type with what was ticked, what the customer wrote, the
   vehicle with its ECU and tool, and what is good to know before the file is opened. The WinOLS state is a strip at the foot. */
.need .card-head { gap: 2px 12px; }
.need-credits { color: var(--ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.need-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.need-body-single { grid-template-columns: minmax(0, 1fr); }
.need-order, .need-car { padding: 16px; min-width: 0; }
.need-car { border-left: 1px solid var(--line); align-content: start; }
.need-type { margin: 0 0 18px; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.need-type:last-child { margin-bottom: 0; }
.need-ticks { margin: 0 0 18px; display: grid; gap: 10px; }
.need-ticks:last-child { margin-bottom: 0; }
.need-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.need-tick { flex: none; width: 20px; height: 20px; margin-top: 1px; display: inline-grid; place-items: center; border-radius: 5px;
             border: 1px solid color-mix(in srgb, var(--brand) 50%, var(--surface)); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand-ink); }
.need-tick .icon { width: 14px; height: 14px; }
.need-tick-text { min-width: 0; }
.need-tick-text .answer { font-weight: 400; font-size: 13.5px; }
.need-sub { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.need-car-name { font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.need-car-line { margin: 2px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.need-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 12px 0; font-size: 14px; }
.need-facts dt { color: var(--ink-2); }
.need-facts dd { overflow-wrap: anywhere; }
.need-facts:last-child { margin-bottom: 0; }
.need-car > :first-child { margin-top: 0; }
.need-car-name + .need-flags, .need-car-line + .need-flags { margin-top: 12px; }
.need-flags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-start; }
.need-flags .badge { white-space: normal; align-items: flex-start; border-radius: 12px; padding: 3px 10px; }
.need-flags .badge .icon { flex: none; margin-top: 3px; }
.need-flags .badge { max-width: 100%; }
.need-flags .badge > span { min-width: 0; overflow-wrap: anywhere; }       /* a long word without spaces wraps inside the badge */
.need-foot { padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.need-winols { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.need-winols .icon { flex: none; margin-top: 3px; color: var(--brand-ink); }
.need-winols a { font-weight: 600; white-space: nowrap; }
#winols { scroll-margin-top: calc(var(--top-height) + 12px); }          /* "Details" in the card above lands below the top bar */
@media (max-width: 760px) {
  .need-body { grid-template-columns: minmax(0, 1fr); }
  .need-car { border-left: 0; border-top: 1px solid var(--line); }
  .need-type { font-size: 20px; }
}

/* ---------------------------------------------------------------- the bar at the bottom of an admin file service (1.67.0)
   The buttons that finish the work stay in view while the page scrolls: "Upload only", "Upload and complete" or "Complete". They belong
   to forms higher up the page (the form attribute). On a wide screen the bar starts where the menu ends, on a phone it spans the width
   (two big buttons; the way back to the list is the link at the top there). The page gets room under its last card, and a message that
   slides in stays above the bar. */
.act-bar {
  position: fixed; left: var(--side-width); right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 10px 14px;
  padding: 10px 24px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(38, 50, 56, 0.10);
}
.act-bar-btns, .act-group { display: flex; gap: 8px; }
body.has-act-bar .main { padding-bottom: 104px; }
body.has-act-bar .toasts { bottom: 88px; }
html:has(body.has-act-bar) { scroll-padding-bottom: 88px; }               /* a field that is scrolled into view does not end up behind the bar */
@media (max-width: 960px) {
  .act-bar { left: 0; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .act-bar-back { display: none; }
  .act-bar-btns, .act-group { width: 100%; }
  .act-bar-btns { flex-wrap: wrap; }                                       /* without script two groups can be there: one under the other */
  .act-bar .btn { flex: 1 1 0; min-height: 44px; padding-left: 8px; padding-right: 8px; }
  .act-bar .btn-primary { flex-grow: 1.5; }
  .act-bar .btn:not(.btn-primary) .icon { display: none; }
  body.has-act-bar .main { padding-bottom: 96px; }
  body.has-act-bar .toasts { bottom: 80px; }
  body.nav-open .act-bar { display: none; }                                /* the menu drawer covers the page: no bar over it */
}
@media (max-width: 359px) {                                               /* the smallest phones: no icons, the words may take two lines */
  .act-bar .btn .icon { display: none; }
  .act-bar .btn { white-space: normal; }
}
@media print { .act-bar { display: none; } }

/* ------------------------------------------------------- opening hours on the dashboard */
.hours-card .card-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.hours-card .card-head .icon { color: var(--brand); }
.badge-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.day-pills { display: grid; grid-template-columns: repeat(7, minmax(0, 56px)); gap: 6px; }
.day-pills button {
  padding: 4px 0; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.5; cursor: pointer;
}
.day-pills button:hover { background: var(--surface-3); color: var(--ink); }
.day-pills button.is-today { border-color: var(--brand); color: var(--brand-ink); }
.day-pills button.is-closed { color: var(--ink-3); border-style: dashed; }
.day-pills button[aria-selected="true"] { background: var(--brand-solid); border-color: var(--brand-solid); color: var(--on-brand); }
.day-panel { margin-top: 16px; }
.day-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.day-hours { margin: 2px 0 0; font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.day-hours.is-closed { color: var(--ink-3); }
@media (max-width: 520px) { .day-hours { font-size: 26px; } }

/* the name in the top bar may not push the buttons off the screen */
.topbar .menu > summary > .hide-mobile { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------- low credits, recent files, two columns */
.low-tag {
  font-style: normal; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 16px;
  background: var(--warning-bg); color: var(--warning-ink); vertical-align: 1px; white-space: nowrap;
}
.credit-banner .low-tag { background: #fff; color: var(--brand-ink); font-size: 11px; line-height: 18px; margin-left: 8px; }
.list-label { margin: 0; padding: 8px 20px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.files-card > .active-files + .list-label { margin-top: 0; }
.recent-files { list-style: none; margin: 0; padding: 0; container: recent / inline-size; }
.recent-files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 4px 14px; align-items: center; padding: 9px 20px; border-top: 1px solid var(--line); }
.recent-files li:first-child { border-top: 0; }
.recent-files .row-link { font-weight: 700; text-decoration: none; }
.recent-files .recent-vehicle { min-width: 0; overflow-wrap: anywhere; }
.recent-files .sub { display: block; color: var(--ink-2); font-size: 12.5px; }
.recent-files .recent-date { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.recent-files .recent-credits { min-width: 3.2em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@container recent (max-width: 619px) {
  .recent-files li { grid-template-columns: auto minmax(0, 1fr) auto; padding: 9px 14px; }
  .recent-files .recent-credits { grid-column: 3; grid-row: 1; }
  .recent-files .recent-status { grid-column: 1; grid-row: 2; }
  .recent-files .recent-date { grid-column: 2 / 4; grid-row: 2; }
}
@media (max-width: 640px) { .list-label { padding-left: 14px; } }
/* the dashboard: two columns that run on independently; on a phone one column in the order of the numbers (1.73.0: files, opening hours,
   support, the cards of the news, the list of updates) */
.dash-grid > .stack { min-width: 0; }
@media (max-width: 800px) {
  .dash-grid { gap: 12px; }
  .dash-grid > .stack { display: contents; }
  .dash-files { order: 1; }
  .dash-grid .hours-card { order: 3; }
  .dash-support { order: 4; }
  .dash-grid .feature-card { order: 5; }
  .dash-grid .updates-card, .dash-grid .dash-company { order: 6; }
}
/* in the list of recent files the number has the width of the number above it, so the vehicles line up */
.active-files .row-link, .recent-files .row-link { display: inline-block; min-width: 8.4em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- admin: clicks on the button of an update */
.click-count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- the page Buy credits (1.73.0)
   One price list per credit type: the smallest package at the top and the bigger ones under it, each with a pile of coins that grows with
   the size, what a credit costs in it, what it saves against the smallest package (a bar and a percentage) and the price with the button.
   The balance of the type is in the heading of its list. A package with a label (most chosen, best price) has the colour of the brand. On a
   narrow list (under 720 px) every row is a small card: the size and the price on the first line, what a credit costs and what it saves under
   it, the button next to the price. The lists stand next to each other from 1800 px wide screens. */
.bands { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; align-items: start; }
@media (min-width: 1800px) { .bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.band { margin-top: 30px; max-width: 940px; container: band / inline-size; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.band-title h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.band-title p { margin-top: 3px; color: var(--ink-2); font-size: 14px; }
.band-balances { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.band-balance { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 14px 7px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.band-balance span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.band-balance b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.band-balance .low-tag { align-self: center; }
.band-balance.is-low { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning-ink) 35%, transparent); }
.band-balance.is-low b { color: var(--warning-ink); }
.band-balance.is-low .low-tag { background: var(--warning-ink); color: var(--warning-bg); }

/* the pile of coins */
.coin-pile { display: block; flex: none; overflow: visible; }
.coin-top { fill: color-mix(in srgb, var(--brand) 22%, var(--surface)); stroke: var(--brand); stroke-width: 1.5; }
.coin-side { fill: color-mix(in srgb, var(--brand) 8%, var(--surface)); stroke: var(--brand); stroke-width: 1.5; stroke-linejoin: round; }

.ladder { --rung-cols: 48px minmax(0, 1.55fr) minmax(86px, 0.55fr) minmax(130px, 0.85fr) minmax(112px, 0.65fr) 92px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.ladder-head, .rung { display: grid; grid-template-columns: var(--rung-cols); column-gap: 20px; align-items: center; padding-left: 20px; padding-right: 20px; }
.ladder-head { min-height: 38px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.ladder-head .r { text-align: right; }
.ladder-head .s { padding-left: 14px; }
.rung { min-height: 72px; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--line); }
.ladder-head + .rung { border-top: 0; }
.rung:hover { background: var(--surface-2); }
.rung-marked { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); box-shadow: inset 3px 0 0 var(--brand); }
.rung-marked:hover { background: color-mix(in srgb, var(--brand) 11%, var(--surface)); }

.rung-coins { display: grid; place-items: center; }
.rung-coins .coin-pile { transform: scale(0.82); }
.rung-what { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.rung-count { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.1; }
.rung-count b { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rung-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rung-flags .package-label { margin: 0; white-space: nowrap; }
.rung-bonus { display: inline-flex; align-items: center; gap: 4px; color: var(--success-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rung-bonus .icon { width: 14px; height: 14px; flex: none; }
.rung-note { color: var(--ink-3); font-size: 12px; }

.rung-detail { display: contents; }
.rung-per { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; }
.rung-per-main { display: block; white-space: nowrap; }
.rung-per b { font-size: 16px; font-weight: 600; color: var(--ink); }
.rung-per s { display: block; font-size: 12.5px; color: var(--ink-3); }
.rung-save { display: flex; align-items: center; gap: 10px; padding-left: 14px; }
.rung-meter { flex: 1 1 auto; max-width: 80px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rung-meter svg { display: block; width: 100%; height: 100%; }
.rung-meter rect { fill: color-mix(in srgb, var(--success-ink) 75%, var(--surface)); }
.rung-pct { flex: none; min-width: 34px; font-size: 13px; font-weight: 700; color: var(--success-ink); font-variant-numeric: tabular-nums; }
.rung-none { color: var(--ink-3); }
.rung-price { text-align: right; line-height: 1.2; }
.rung-price b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rung-price small { display: block; font-size: 12px; color: var(--ink-2); }
.rung-list { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3); }
.rung > .btn { width: 100%; min-width: 0; }
.rung:hover > .btn:not(.btn-primary) { border-color: var(--brand); color: var(--brand-ink); }
.rung .only-compact { display: none; }
.rung .only-wide { display: inline; }

@container band (max-width: 899px) {
  .ladder { --rung-cols: 44px minmax(0, 1.25fr) minmax(80px, 0.55fr) minmax(112px, 0.8fr) minmax(108px, 0.65fr) 84px; }
  .ladder-head, .rung { column-gap: 14px; padding-left: 16px; padding-right: 16px; }
  .rung-count b { font-size: 24px; }
  .rung-price b { font-size: 18px; }
}
@container band (max-width: 719px) {
  .ladder-head { display: none; }
  .rung { grid-template-columns: 40px minmax(0, 1fr) minmax(92px, auto); grid-template-areas: "coins what price" "coins detail buy"; gap: 8px 12px; align-items: start; padding: 14px; min-height: 0; }
  .rung-coins { grid-area: coins; align-self: center; }
  .rung-coins .coin-pile { transform: scale(0.7); }
  .rung-what { grid-area: what; }
  .rung-detail { grid-area: detail; display: flex; flex-wrap: wrap; align-items: center; align-self: center; gap: 3px 10px; }
  .rung-per { text-align: left; }
  .rung-per-main { display: inline; }
  .rung-per b { font-size: 15px; }
  .rung-per s { display: inline; margin-left: 6px; }
  .rung-meter, .rung-none { display: none; }
  .rung-pct { min-width: 0; background: var(--success-bg); font-size: 12px; line-height: 18px; padding: 0 7px; border-radius: 9px; }
  .rung-price { grid-area: price; }
  .rung > .btn { grid-area: buy; justify-self: end; align-self: center; width: auto; min-width: 80px; }
  .rung .only-compact { display: inline; }
  .rung .only-wide { display: none; }
  .rung-price b { font-size: 18px; }
  .rung-price .only-compact { display: block; }
}

/* ------------------------------------------------------- admin: the filters as buttons, and the ticket buttons of File services (1.74.0)
   The filters above a list in Beheer (File services, Support tickets, Memos, Deals, EU VAT checks) are buttons that wrap on a narrow screen
   (the one that is open takes the colour of the brand). The ticket button of a file service is a small square with the symbol of the tickets,
   in the last column of the list: with a plus when there is no ticket about the file service yet, filled when there is one (amber: the customer
   waits for your answer, blue: you wait for the customer, grey: finished). Next to it, at the right edge, is the button that deletes the ticket.
   That last column stays at the right edge of the card while a list that is wider than the screen scrolls sideways (a phone). */
.tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.tab-buttons .btn-primary .tab-count { background: rgba(255, 255, 255, 0.26); color: var(--on-brand); }
.tk { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0;
      border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); text-decoration: none; vertical-align: middle; cursor: pointer; }
.tk:hover { background: var(--surface-2); color: var(--brand-ink); border-color: var(--brand); }
.tk .icon-sm { width: 16px; height: 16px; vertical-align: 0; }
.tk-plus { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
           background: var(--ink-2); color: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.tk:hover .tk-plus, .tk:focus-visible .tk-plus { background: var(--brand-solid); color: var(--on-brand); }
.tk-plus .icon { width: 9px; height: 9px; stroke-width: 3.2; }
.tk-reply { background: var(--warning-bg); color: var(--warning-ink); border-color: var(--warning-ink); }
.tk-waiting { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-ink); }
.tk-closed { background: var(--neutral-bg); color: var(--neutral-ink); border-color: var(--line-strong); }
.tk-delete:hover { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-solid); }
.tk-pair { display: inline-flex; align-items: center; gap: 8px; }
.tk-gap { visibility: hidden; }                          /* the place of the delete button in a row without a ticket: the buttons stay level */
.table th.tk-cell, .table td.tk-cell { position: sticky; right: 0; z-index: 1; }
.table td.tk-cell { background: var(--surface); }        /* what scrolls under the column must not show through (a hovered row has its own colour) */
@media (max-width: 800px) {
  .table th.tk-cell, .table td.tk-cell { box-shadow: -1px 0 0 var(--line); }
}
@media (max-width: 640px) {
  .tab-buttons .btn { min-height: 32px; padding: 5px 10px; font-size: 13px; }
  .tk { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------- the files next to each other (1.69.0)
   The Files card of an admin file service sits right under the order, over the full width: on a wide screen the original (download) is
   the box on the left and the modified file (upload) the box on the right, with an arrow between them; the progress bar comes under
   both. The two boxes share their rows (subgrid), so they start and end level. The station of the customer fetching the result, when
   there is one, goes under them. Below 1180 px the boxes would be too narrow: there the files stay one under the other, the timeline
   above (the arrow is not drawn then). A cancelled file service and a requested revision stay at the top of the page, above the files. */
.ftl-arrow { display: none; }
.fs-alerts > .expectation:first-child { border-top: 0; }
@media (min-width: 1180px) {
  .ftl-card .ftl { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: 0; padding: 22px 24px 24px; }
  .ftl-card .ftl > .ftl-step { grid-row: 1 / span 2; grid-template-rows: subgrid; row-gap: 0; padding-bottom: 0; }
  .ftl-card .ftl > .ftl-orig { grid-column: 1; }
  .ftl-card .ftl > .ftl-mod { grid-column: 3; }
  .ftl-card .ftl > .ftl-ok { grid-column: 1 / -1; grid-row: 3; grid-template-rows: auto; margin-top: 22px; }
  .ftl-card .ftl > .ftl-step::before { display: none; }                      /* no line down to the next station: they stand next to each other */
  .ftl-card .ftl > .ftl-step > .ftl-main { display: contents; }              /* the heading and the box take their place in the grid of the station */
  .ftl-card .ftl > .ftl-step .ftl-panel { grid-column: 1 / -1; margin-top: 10px; }
  .ftl-card .ftl > .ftl-mod .ftl-head h3 { color: var(--ink); }              /* the box to work in is not greyed out while it is still empty */
  .ftl-card .ftl > .ftl-arrow { display: grid; place-items: center; grid-column: 2; grid-row: 2; align-self: center; justify-self: center; width: 32px; height: 32px;
                                border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); color: var(--ink-2); }
  .ftl-card .ftl > .ftl-arrow .icon { width: 16px; height: 16px; }
}