/* ═══════════════════════════════════════════════════════════
   toddoo-brand.css — the brand kit's components as plain-markup classes (AGENTS.md v3.2, kit commit dd14694).
   Served at /assets/toddoo-brand.css; load /assets/toddoo-tokens.css first.

   Class names are the kit's own (AGENTS.md §23, "copy these structures exactly"): .glass-subtle/.glass/
   .glass-elevated/.glass-solid, .btn + .btn-p/-s/-op/-os/-bl + .btn-sm/-md/-lg (+ .btn-ico, .danger), .badge + -s/-w/-e/-i/-n,
   .tabs > .tab (.on), .tbl, .card/.card-title/.card-body/.card-meta, .kpi*, .field/.lbl/.inp/.field-error (+ .req, .help: R-27),
   .toggle/.check/.radio, .toast, .modal*, .breadcrumb, .pagination. Where §23 names nothing, the kit's own words:
   .loop (+ .loop-16/-24/-40/-64), .sidebar/.sidebar-item/.sidebar-label, .topbar, .scroll-glass, .t-label/.t-meta/
   .t-card-title.

   Every rule is wrapped in :where() (zero specificity), so a page's own CSS always wins. Colours, sizes and
   radii come from the tokens (var(--…)); the only literal colours are the kit's fixed ones (#00C8C8 focus ring,
   status colours, white text on red).
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Glass (§7): five layers, four levels; level = stacking depth (page-level surfaces are L1) ── */
:where(.glass-subtle, .card) { --_g-fill: var(--glass-1); --_g-b: var(--glass-b1); --_g-hi: var(--glass-hi1); --_g-blur: var(--glass-blur-1, 16px); --_g-ref: var(--glass-reflect-1); --_g-noise: var(--glass-noise-1); --_g-at: 30% 20%; --_g-glow: 0 0 0 transparent; }
:where(.glass) { --_g-fill: var(--glass-2); --_g-b: var(--glass-b2); --_g-hi: var(--glass-hi2); --_g-blur: var(--glass-blur-2, 24px); --_g-ref: var(--glass-reflect-2); --_g-noise: var(--glass-noise-2); --_g-at: 30% 20%; --_g-glow: 0 0 0 transparent; }
:where(.glass-elevated) { --_g-fill: var(--glass-3); --_g-b: var(--glass-b3); --_g-hi: var(--glass-hi3); --_g-blur: var(--glass-blur-3, 36px); --_g-ref: var(--glass-reflect-3); --_g-noise: var(--glass-noise-3); --_g-at: 25% 15%; --_g-glow: 0 0 20px rgba(0,200,200,.04); }
:where(.glass-solid) { --_g-fill: var(--glass-4); --_g-b: var(--glass-b4); --_g-hi: var(--glass-hi4); --_g-blur: var(--glass-blur-4, 50px); --_g-ref: var(--glass-reflect-4); --_g-noise: var(--glass-noise-4); --_g-at: 25% 15%; --_g-glow: 0 0 30px rgba(0,200,200,.06); }
:where(.glass-subtle, .glass, .glass-elevated, .glass-solid) {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-2xl, 16px);
  background: var(--_g-fill);
  -webkit-backdrop-filter: blur(var(--_g-blur)); backdrop-filter: blur(var(--_g-blur));
  box-shadow: inset 0 0 0 1px var(--_g-b), inset 1px 1px 0 0 var(--_g-hi), var(--_g-glow);
}
:where(.glass-subtle, .glass, .glass-elevated, .glass-solid)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at var(--_g-at), var(--_g-ref) 0%, transparent 60%);
}
:where(.glass-subtle, .glass, .glass-elevated, .glass-solid)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--_g-noise); mix-blend-mode: overlay;
}
:where(:where(.glass-subtle, .glass, .glass-elevated, .glass-solid) > *) { position: relative; z-index: 1; }
/* a page card is L1 glass by default (§10.8, R-34): the same five layers, but nothing inside is clipped (a menu may
   reach out of a card); its corners hold the layers by themselves */
:where(.card) {
  position: relative; isolation: isolate; background: var(--_g-fill);
  -webkit-backdrop-filter: blur(var(--_g-blur)); backdrop-filter: blur(var(--_g-blur));
  box-shadow: inset 0 0 0 1px var(--_g-b), inset 1px 1px 0 0 var(--_g-hi), var(--_g-glow);
}
:where(.card)::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at var(--_g-at), var(--_g-ref) 0%, transparent 60%); }
:where(.card)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: var(--_g-noise); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
:where(.card > *) { position: relative; z-index: 1; }
:where(.card:not(.glass-subtle, .glass, .glass-elevated, .glass-solid)) { overflow: visible; }

/* ── 2. Cards and KPI (§10.8, §23): radius 16px, padding 24px (16 compact), hover brightens + scale(1.01) ── */
:where(.card) { display: block; padding: var(--sp-6, 24px); border-radius: var(--radius-2xl, 16px); color: var(--text1); transition: transform var(--dur-small, 150ms) var(--ease-out, ease-out), box-shadow var(--dur-small, 150ms) var(--ease-out, ease-out); }
/* a card that is a button or a link (a clickable media card): no browser border or button look, the edge stays the
   glass ring; keyboard focus shows the kit's ring */
:where(button.card, a.card) { width: 100%; margin: 0; border: 0; font: inherit; text-align: inherit; color: inherit; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
:where(button.card:focus-visible, a.card:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
:where(.card.compact) { padding: var(--sp-4, 16px); }
:where(:where(a.card, button.card, .card.interactive):hover) { transform: scale(1.01); --_g-b: var(--glass-b3); }
:where(.card-title) { display: flex; align-items: center; gap: var(--sp-2, 8px); font-size: 13px; font-weight: 700; color: var(--text1); }
:where(.card-body) { margin-top: var(--sp-1, 4px); font-size: 11px; font-weight: 400; color: var(--text2); }
:where(.card-meta) { margin-top: var(--sp-2, 8px); font-size: 10px; font-weight: 500; color: var(--text3); letter-spacing: .02em; }
:where(.kpi) { padding: var(--kpi-px, 20px); border-radius: var(--kpi-radius, 12px); }
:where(.kpi-label) { font-size: max(10px, var(--kpi-label, 10px)); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); }
:where(.kpi-value) { margin-top: var(--sp-1, 4px); font-size: var(--kpi-value, 28px); font-weight: 700; color: var(--text1); font-variant-numeric: tabular-nums; }
:where(.kpi-trend) { margin-top: var(--sp-1, 4px); font-size: var(--kpi-trend, 10px); font-weight: 600; color: var(--text2); }
:where(.kpi-trend.up) { color: var(--kpi-trend-up, var(--success)); }
:where(.kpi-trend.down) { color: var(--kpi-trend-down, var(--red)); }
/* L-4: one value per currency, each with its code after the amount; stacked, or side by side with .inline */
:where(.kpi-values) { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1, 4px); }
:where(.kpi-values .kpi-value) { margin-top: 0; }
:where(.kpi-values.inline) { flex-direction: row; flex-wrap: wrap; column-gap: var(--sp-4, 16px); }
:where(.kpi-values:not(.inline) .kpi-value:not(:first-child)) { font-size: var(--kpi-value-more, 18px); }
:where(.kpi-values.equal .kpi-value) { font-size: var(--kpi-value, 28px); }
:where(.kpi-value .cur) { margin-inline-start: 4px; font-size: var(--kpi-cur, 11px); font-weight: 700; letter-spacing: .5px; color: var(--text3); }

/* ── 3. Typography roles (§5, §10.8): label, meta, card title ── */
:where(.t-label) { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); }
:where(.t-meta) { font-size: 10px; font-weight: 500; color: var(--text3); }
:where(.t-card-title) { font-size: 13px; font-weight: 700; color: var(--text1); }

/* ── 4. Buttons (§10.1, §23): pill or circle; fill ↔ outline swap on hover and pressed ── */
:where(.btn) {
  --_btn-c: var(--teal); --_btn-on: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2, 8px);
  height: var(--btn-h-md, 40px); padding: 0 var(--btn-px-md, 20px); border-radius: var(--btn-radius, 999px);
  border: var(--btn-border, 1.5px) solid var(--_btn-c); background: var(--_btn-c); color: var(--_btn-on);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background var(--dur-small, 150ms) var(--ease-out, ease-out), color var(--dur-small, 150ms) var(--ease-out, ease-out), border-color var(--dur-small, 150ms) var(--ease-out, ease-out), transform var(--dur-micro, 100ms) linear;
}
:where(.btn svg), :where(.btn .ico) { width: 1.15em; height: 1.15em; fill: currentColor; flex: 0 0 auto; }
:where(.btn-sm) { height: var(--btn-h-sm, 32px); padding: 0 var(--btn-px-sm, 14px); font-size: 11px; }
:where(.btn-lg) { height: var(--btn-h-lg, 48px); padding: 0 var(--btn-px-lg, 28px); font-size: 14px; }
:where(.btn-s) { --_btn-c: var(--grey); }
:where(.btn.danger) { --_btn-c: var(--red); --_btn-on: #FFFFFF; }
/* filled styles: outline on hover and pressed */
:where(:where(.btn-p, .btn-s, .btn.danger):where(:hover, :active, .pressed)) { background: transparent; color: var(--_btn-c); }
/* outline styles: transparent with the colour, filled on hover and pressed */
:where(.btn-op) { background: transparent; color: var(--_btn-c); }
:where(.btn-os) { --_btn-c: var(--grey); background: transparent; color: var(--_btn-c); }
:where(:where(.btn-op, .btn-os):where(:hover, :active, .pressed)) { background: var(--_btn-c); color: var(--_btn-on); }
:where(.btn-op.danger, .btn-os.danger) { background: transparent; color: var(--_btn-c); }
:where(:where(.btn-op.danger, .btn-os.danger):where(:hover, :active, .pressed)) { background: var(--_btn-c); color: var(--_btn-on); }
/* blank: text only, gains an outline */
:where(.btn-bl) { background: transparent; border-color: transparent; color: var(--_btn-c); }
:where(.btn-bl:where(:hover, :active, .pressed)) { border-color: var(--_btn-c); background: transparent; color: var(--_btn-c); }
:where(.btn:active), :where(.btn.pressed) { transform: scale(var(--interact-scale, .98)); }
:where(.btn:focus-visible) { outline: none; box-shadow: var(--btn-focus, 0 0 0 2px var(--bg), 0 0 0 4px #00C8C8); }
:where(.btn:disabled), :where(.btn[aria-disabled="true"], .btn.disabled) { opacity: var(--btn-disabled-op, var(--btn-disabled-opacity, .4)); cursor: not-allowed; transform: none; pointer-events: none; }
/* dark mode: a disabled FILLED button turns neutral at full opacity (the bright teal at 40 % still looked enabled on the
   dark page); light mode keeps the kit's 40 %. Outline and blank buttons keep the opacity in both modes. */
:where(:root) { --btn-disabled-bg: var(--border); --btn-disabled-fg: var(--text2); --btn-disabled-op: 1; }
:where(.light) { --btn-disabled-bg: initial; --btn-disabled-fg: initial; --btn-disabled-op: initial; }
:where(.btn:not(.btn-op, .btn-os, .btn-bl):is(:disabled, [aria-disabled="true"], .disabled)) { background: var(--btn-disabled-bg, var(--_btn-c)); border-color: var(--btn-disabled-bg, var(--_btn-c)); color: var(--btn-disabled-fg, var(--_btn-on)); }
:where(.btn:is(.btn-op, .btn-os, .btn-bl):is(:disabled, [aria-disabled="true"], .disabled)) { opacity: var(--btn-disabled-opacity, .4); }
/* icon-only: a circle */
:where(.btn-ico) { width: var(--btn-icon-md, 36px); height: var(--btn-icon-md, 36px); padding: 0; border-radius: var(--btn-icon-radius, 50%); }
:where(.btn-ico.btn-sm) { width: var(--btn-icon-sm, 28px); height: var(--btn-icon-sm, 28px); }
:where(.btn-ico.btn-lg) { width: var(--btn-icon-lg, 44px); height: var(--btn-icon-lg, 44px); }

/* ── 5. Badges (§10.7): filled pill, neutral words; never clickable ── */
:where(.badge) { display: inline-flex; align-items: center; gap: 6px; padding: var(--badge-py, 4px) var(--badge-px, 12px); border-radius: var(--badge-radius, 999px); font-size: var(--badge-font, 10px); font-weight: 700; line-height: 1.2; white-space: nowrap; vertical-align: middle; }
:where(.badge-s) { background: var(--badge-success-bg); color: var(--badge-success-text); }
:where(.badge-w) { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
:where(.badge-e) { background: var(--badge-error-bg); color: var(--badge-error-text); }
:where(.badge-i) { background: var(--badge-info-bg); color: var(--badge-info-text); }
:where(.badge-n) { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }
:where(.badge-n)::before { content: ""; width: var(--badge-dot, 5px); height: var(--badge-dot, 5px); border-radius: 50%; background: currentColor; }
/* L-2: several badges in one place (a table cell: Overdue + Part paid) */
:where(.badges) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }

/* ── 6. Tabs (§10.13): pill system; selected = 1.5px outline, hover = tint, pressed = teal fill ── */
:where(.tabs) { display: flex; flex-wrap: wrap; gap: var(--tab-gap, 4px); padding-bottom: var(--sp-2, 8px); border-bottom: var(--tab-divider, 1px solid var(--glass-b2)); }
:where(.tab) {
  display: inline-flex; align-items: center; gap: var(--sp-2, 8px); padding: var(--tab-py, 8px) var(--tab-px, 16px);
  border: var(--tab-border, 1.5px) solid transparent; border-radius: var(--tab-radius, 999px); background: transparent;
  color: var(--text3); font: inherit; font-size: var(--tab-font, 13px); font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background var(--dur-small, 150ms), color var(--dur-small, 150ms), border-color var(--dur-small, 150ms), transform var(--dur-micro, 100ms);
}
:where(.tab:hover) { background: var(--interact-hover-bg, var(--accent-dim)); color: var(--teal); }
:where(.tab:active) { background: var(--interact-press-bg, var(--teal)); color: var(--interact-press-text, var(--bg)); transform: scale(var(--interact-scale, .98)); }
:where(.tab.on, .tab[aria-selected="true"]) { border-color: var(--interact-select-border, var(--accent)); background: var(--interact-select-bg, transparent); color: var(--accent); }
:where(.tab:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
/* .tabs.line: text tabs, the chosen one underlined (a page's main sections); the pill tabs stay for sub-sections and filters */
:where(.tabs.line) { gap: 24px; padding-bottom: 0; }
:where(.tabs.line .tab) { padding: 12px 2px; border: 0; border-radius: 0; background: none; color: var(--text2); }
:where(.tabs.line .tab:hover) { background: none; color: var(--text1); }
:where(.tabs.line .tab:active) { background: none; color: var(--text1); transform: none; }
:where(.tabs.line .tab.on, .tabs.line .tab[aria-selected="true"]) { border: 0; background: none; color: var(--text1); box-shadow: inset 0 -3px 0 var(--tab-line-color, var(--accent)); }

/* ── 7. Table (§10.9): 10px header (the kit says 9; 10 is our floor for any text), pill row hover, outline pill for the selected row, no zebra ── */
:where(.tbl) { width: 100%; border-collapse: separate; border-spacing: 0 var(--tbl-row-gap, 2px); font-size: var(--tbl-body-font, 12px); color: var(--text2); }
:where(.tbl th) { padding: var(--tbl-cell-py, 10px) var(--tbl-cell-px, 16px); border-bottom: 1px solid var(--border); text-align: left; font-size: max(10px, var(--tbl-header-font, 10px)); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); white-space: nowrap; }
:where(.tbl td) { height: var(--tbl-row-h, 44px); padding: var(--tbl-cell-py, 10px) var(--tbl-cell-px, 16px); border-top: 1.5px solid transparent; border-bottom: 1.5px solid transparent; font-weight: 400; transition: background var(--tbl-flash-dur, 150ms); }
:where(.tbl tbody tr td) { box-shadow: 0 1px 0 0 var(--border); }
:where(.tbl td.primary) { color: var(--text1); font-weight: 600; }
:where(.tbl td:first-child) { border-left: 1.5px solid transparent; border-top-left-radius: var(--tbl-row-radius, 999px); border-bottom-left-radius: var(--tbl-row-radius, 999px); }
:where(.tbl td:last-child) { border-right: 1.5px solid transparent; border-top-right-radius: var(--tbl-row-radius, 999px); border-bottom-right-radius: var(--tbl-row-radius, 999px); }
:where(.tbl tbody tr:hover td) { background: var(--accent-dim); box-shadow: none; }
:where(.tbl tbody tr:where(.on, [aria-selected="true"]) td) { background: transparent; border-color: var(--accent); box-shadow: none; }
:where(.tbl tbody tr:where(.on, [aria-selected="true"]) td:not(:first-child)) { border-left-color: transparent; }
:where(.tbl tbody tr:where(.on, [aria-selected="true"]) td:not(:last-child)) { border-right-color: transparent; }
:where(.tbl th.sortable) { cursor: pointer; }
:where(.tbl :is(th, td).num) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* L-5: an action column (its header is empty): the buttons at the end of the row */
:where(.tbl :is(th, td).actions) { width: 1%; text-align: right; white-space: nowrap; }
:where(.tbl td.actions > * + *) { margin-inline-start: var(--sp-1, 4px); }
/* L-3: the grand total, a tfoot row (or tr.total): bold, a line above, no hover */
:where(.tbl tfoot td, .tbl tr.total td) { color: var(--text1); font-weight: 700; box-shadow: inset 0 1px 0 0 var(--border); border-radius: 0; }
:where(.tbl tfoot tr:hover td, .tbl tr.total:hover td) { background: transparent; }
/* phones (§17, R-33): a .tbl.cards becomes one card per row, each value under its column's name (data-label on the
   cells; toddoo.brand.tableCards(table) copies them from the header) */
@media (max-width: 639px) {
  :where(.tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td) { display: block; width: 100%; }
  :where(.tbl.cards thead) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.tbl.cards tbody tr) { margin-bottom: var(--sp-2, 8px); padding: var(--sp-2, 8px) 0; border: 1px solid var(--border); border-radius: var(--radius-xl, 12px); }
  :where(.tbl.cards td) { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: var(--sp-3, 12px); align-items: baseline; height: auto; padding: 6px var(--sp-4, 16px); border: 0; border-radius: 0; box-shadow: none; overflow-wrap: anywhere; }
  :where(.tbl.cards td)::before { content: attr(data-label); font-size: var(--tbl-header-font, 9px); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); }
  :where(.tbl.cards td:not([data-label]))::before, :where(.tbl.cards td[data-label=""])::before { content: none; }
  :where(.tbl.cards td:not([data-label]), .tbl.cards td[data-label=""]) { grid-template-columns: minmax(0, 1fr); }
  :where(.tbl.cards tbody tr:hover td) { background: none; }
  :where(.tbl.cards tbody tr:hover) { background: var(--accent-dim); }
  :where(.tbl.cards tbody tr:where(.on, [aria-selected="true"])) { border-color: var(--accent); }
  /* numbers at the end of their line; the action cell has no label and puts its buttons at the end */
  :where(.tbl.cards td.num) { text-align: end; }
  :where(.tbl.cards td.num)::before { text-align: start; }
  :where(.tbl.cards td.actions) { display: flex; justify-content: flex-end; gap: var(--sp-1, 4px); width: 100%; padding-top: var(--sp-2, 8px); }
  :where(.tbl.cards td.actions)::before { content: none; }
  :where(.tbl.cards td.actions:empty) { display: none; }
  /* the grand total: its own tinted card after the rows */
  :where(.tbl.cards tfoot, .tbl.cards tfoot tr) { display: block; width: 100%; }
  :where(.tbl.cards tfoot tr, .tbl.cards tr.total) { padding: var(--sp-2, 8px) 0; border: 1px solid var(--accent); border-radius: var(--radius-xl, 12px); background: var(--accent-dim); }
  :where(.tbl.cards tfoot td, .tbl.cards tr.total td) { box-shadow: none; }
  :where(.tbl.cards tfoot td:empty, .tbl.cards tr.total td:empty) { display: none; }
}
:where(.tbl th.sortable)::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }

/* ── 8. Top bar (§8.3): 52px, 20px sides, hairline; glass or --hdr-bg ── */
:where(.topbar) { display: flex; align-items: center; gap: var(--sp-4, 16px); height: var(--header-h, 52px); padding: 0 20px; background: var(--hdr-bg); border-bottom: 1px solid var(--hdr-border); color: var(--text1); }
:where(.topbar.glass-subtle) { border-radius: 0; box-shadow: inset 0 -1px 0 0 var(--hdr-border); border-bottom: 0; }

/* ── 8b. Page content (§11.4, §17, R-32): .main is the content area beside the sidebar (48px sides from 1024px, 32px
   on tablets, 16px on phones); .content inside it is at most 1200px (--max-content), centred, so a 32-inch screen
   gets whitespace instead of stretched pages ── */
:where(.main) { display: block; min-width: 0; padding-inline: var(--page-px, 48px); }
:where(.content) { display: block; width: 100%; max-width: var(--max-content, 1200px); margin-inline: auto; min-width: 0; }
@media (max-width: 1023px) { :where(.main) { padding-inline: 32px; } }
@media (max-width: 639px) { :where(.main) { padding-inline: 16px; } }

/* ── 9. Sidebar (§10.13): floating container (L1 glass per §7.2, 16px radius), circle items ── */
:where(.sidebar) { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2, 8px); width: var(--sb-w-icon, 48px); padding: var(--sp-4, 16px) 0; border-radius: var(--radius-2xl, 16px); }
:where(.sidebar.text) { align-items: stretch; width: var(--sb-w-text, 200px); padding: var(--sp-4, 16px) var(--sp-2, 8px); }
:where(.sidebar-item) {
  display: inline-grid; place-items: center; width: var(--sb-icon-size, 36px); height: var(--sb-icon-size, 36px); padding: 0;
  border: 2px solid transparent; border-radius: 50%; background: transparent; color: var(--text2); cursor: pointer; text-decoration: none;
  transition: background var(--dur-small, 150ms), color var(--dur-small, 150ms), transform var(--dur-micro, 100ms);
}
:where(.sidebar-item svg) { width: 20px; height: 20px; fill: currentColor; }
:where(.sidebar-item:hover) { background: var(--accent-dim); color: var(--text1); }
:where(.sidebar-item:active) { background: var(--accent-dim); transform: scale(.95); }
:where(.sidebar-item.on, .sidebar-item[aria-current]) { background: var(--teal); border-color: var(--accent); color: var(--bg); }
:where(.sidebar.text .sidebar-item) { display: flex; justify-content: flex-start; gap: var(--sp-2, 8px); width: auto; height: auto; padding: var(--sb-item-py, 8px) var(--sb-item-px, 14px); border: 1.5px solid transparent; border-radius: var(--sb-item-radius, 999px); font-size: 14px; }
:where(.sidebar.text .sidebar-item:active) { transform: scale(.98); }
:where(.sidebar.text .sidebar-item.on, .sidebar.text .sidebar-item[aria-current]) { background: transparent; border-color: var(--accent); color: var(--accent); }
:where(.sidebar-item:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
:where(.sidebar-label) { padding: var(--sp-2, 8px) var(--sp-2, 8px) var(--sp-1, 4px); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--text3); }
/* tablet (§17, 640–1023px): a text sidebar whose items carry icons folds to the 48px icon rail. The words stay as the
   items' names for screen readers (font-size 0, not hidden); section labels step aside. An icon rail (.sidebar without
   .text) is already that, so nothing changes for it; a sidebar of words only stays as it is (nothing to fold to). */
@media (min-width: 640px) and (max-width: 1023px) {
  :where(.sidebar.text:has(.sidebar-item svg)) { align-items: center; width: var(--sb-w-icon, 48px); padding: var(--sp-4, 16px) 0; }
  :where(.sidebar.text:has(.sidebar-item svg) .sidebar-item) { display: inline-grid; place-items: center; gap: 0; width: var(--sb-icon-size, 36px); height: var(--sb-icon-size, 36px); padding: 0; border: 2px solid transparent; border-radius: 50%; font-size: 0; }
  :where(.sidebar.text:has(.sidebar-item svg) .sidebar-item.on) { background: var(--teal); border-color: var(--accent); color: var(--bg); }
  :where(.sidebar.text:has(.sidebar-item svg) .sidebar-item[aria-current]) { background: var(--teal); border-color: var(--accent); color: var(--bg); }
  :where(.sidebar.text:has(.sidebar-item svg) .sidebar-label) { display: none; }
}

/* ── 9b. The logotype (§3, §19): the official file, recoloured per mode through the CurrentColor variant
   (teal mode system: #1A7587 light, #00C8C8 dark); never narrower than 100px. Markup:
   <span class="logo" role="img" aria-label="Toddoo"></span>   (.logo.on-dark for white on the gradient or imagery) ── */
:where(.logo) {
  display: inline-block; flex: 0 0 auto; width: 110px; min-width: 100px; aspect-ratio: 398.83 / 135.85; vertical-align: middle;
  background: var(--teal);
  -webkit-mask: url(logo/toddoo-logotype-currentcolor.svg) center / contain no-repeat;
  mask: url(logo/toddoo-logotype-currentcolor.svg) center / contain no-repeat;
}
:where(.logo.on-dark) { background: #FFFFFF; }
@media (forced-colors: active) { :where(.logo) { background: CanvasText; } }

/* ── 10. The Loop (§3, §10.17): exact CSS; the loader at 16/24/40/64 ── */
:where(.loop) {
  display: inline-block; flex: 0 0 auto; width: 180px; height: 180px; border-radius: 50%;
  background:
    radial-gradient(circle at 10% 10%, #1A7587 0%, transparent 55%),
    radial-gradient(circle at 90% 10%, #00F3FF 0%, transparent 53%),
    radial-gradient(circle at 90% 90%, #1A7587 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, #00FFCE 0%, transparent 57%),
    #18A5AC;
  -webkit-mask: radial-gradient(farthest-side, transparent 48%, black 49%);
  mask: radial-gradient(farthest-side, transparent 48%, black 49%);
  animation: loopSpin var(--spinner-speed, 6s) linear infinite;
}
@keyframes loopSpin { to { transform: rotate(360deg); } }
:where(.loop-16) { width: var(--spinner-xs, 16px); height: var(--spinner-xs, 16px); }
:where(.loop-24) { width: var(--spinner-sm, 24px); height: var(--spinner-sm, 24px); }
:where(.loop-40) { width: var(--spinner-md, 40px); height: var(--spinner-md, 40px); }
:where(.loop-64) { width: var(--spinner-lg, 64px); height: var(--spinner-lg, 64px); }

/* ── 11. Glass scrollbar (§10.4): 5px pill thumb with a soft teal glow, no arrows; on .scroll-glass and inside it ── */
:where(.scroll-glass, .scroll-glass *) { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb-dark) transparent; }
:where(.light .scroll-glass, .light .scroll-glass *, .scroll-glass.light) { scrollbar-color: var(--scroll-thumb-light) transparent; }
:where(.scroll-glass, .scroll-glass *)::-webkit-scrollbar { width: var(--scroll-w, 5px); height: var(--scroll-w, 5px); }
:where(.scroll-glass, .scroll-glass *)::-webkit-scrollbar-track { background: transparent; margin: 8px; }
:where(.scroll-glass, .scroll-glass *)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:where(.scroll-glass, .scroll-glass *)::-webkit-scrollbar-thumb { min-height: var(--scroll-min-h, 36px); border-radius: 999px; background: rgba(255,255,255,.20); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.25), 0 0 4px rgba(0,200,200,.25), 0 0 10px rgba(0,200,200,.12); }
:where(.scroll-glass, .scroll-glass *)::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
:where(.light .scroll-glass, .light .scroll-glass *, .scroll-glass.light)::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), 0 0 4px rgba(0,200,200,.25), 0 0 10px rgba(0,200,200,.12); }
:where(.light .scroll-glass, .light .scroll-glass *, .scroll-glass.light)::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.22); }
:where(.sidebar.scroll-glass, .sidebar .scroll-glass)::-webkit-scrollbar-track { margin: 24px 0; }
:where(.scroll-glass, .scroll-glass *)::-webkit-scrollbar-corner { background: transparent; }

/* ── 12. Fields (§10.2, §10.18): label above, pill input (textarea 21px), error = red border + alert icon, neutral text ── */
:where(.field) { display: flex; flex-direction: column; gap: 6px; }
:where(.lbl) { font-size: 12px; font-weight: 600; color: var(--text2); }
:where(.inp) {
  box-sizing: border-box; width: 100%; height: var(--input-h, 42px); padding: 10px var(--input-px, 14px);
  border: var(--input-border, 1.5px solid var(--border)); border-radius: var(--input-radius, 999px);
  background: var(--surface2); color: var(--text1); font: inherit; font-size: 13px;
  transition: border-color var(--dur-small, 150ms), box-shadow var(--dur-small, 150ms);
}
:where(.inp)::placeholder { color: var(--text3); }
:where(.inp:focus) { outline: none; border: var(--input-focus, 1.5px solid var(--accent)); }
:where(.inp:focus-visible) { box-shadow: var(--focus-ring); }
:where(textarea.inp, .inp.textarea) { height: auto; min-height: 80px; padding: 12px 16px; border-radius: var(--textarea-radius, 21px); resize: vertical; }
:where(.inp.err, .inp[aria-invalid="true"]) { border: var(--input-error, 1.5px solid var(--red)); }
:where(.inp.dis, .inp:disabled) { opacity: .4; cursor: not-allowed; }
:where(.field-error) { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--text1); }
:where(.field-error)::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; background: var(--red);
  -webkit-mask: url(icons/alert.svg) center / contain no-repeat; mask: url(icons/alert.svg) center / contain no-repeat;
}
/* required and help (Hanko, 5 Oct, R-27; the kit has no rule yet):
     <label class="lbl" for="n">Company name<span class="req" aria-hidden="true">*</span></label>
     <input class="inp" id="n" required aria-describedby="n-h n-e"> <p class="help" id="n-h">As on the invoice.</p>
   a red * after the label of a required field (screen readers hear "required" from the control), no marker on optional
   ones; help 11px grey (text2, 4.5 : 1) under the field, and the error takes its place while it shows */
:where(.req) { margin-inline-start: 2px; color: var(--red); font-weight: 600; }
:where(.help) { margin: 0; font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--text2); }
:where(.help:empty) { display: none; }
:where(.field:has(.field-error:not([hidden]):not(:empty)) .help) { display: none; }
:where(.help:has(~ .field-error:not([hidden]):not(:empty))) { display: none; }
@media (prefers-contrast: more) { :where(.help) { color: var(--text1); } }
:where(.section-alert) { position: relative; padding: var(--sp-3, 12px) var(--sp-4, 16px); border-left: var(--error-bar, 4px solid #E54535); border-radius: var(--radius-xl, 12px); background: var(--error-tint, rgba(229,69,53,.08)); color: var(--text1); font-size: 12px; }

/* ── 13. Controls (§10.3, §23): toggle 42×24, checkbox 18 (radius 4), radio 18 with a 10px dot ── */
:where(.toggle, .check, .radio) { display: inline-flex; align-items: center; gap: var(--sp-2, 8px); font-size: 13px; color: var(--text1); cursor: pointer; }
:where(.toggle input) { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
:where(.toggle-track) { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px; background: var(--border); transition: background .2s ease; }
:where(.toggle-knob) { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; transition: transform .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
:where(.toggle input:checked + .toggle-track) { background: var(--teal); }
:where(.toggle input:checked + .toggle-track .toggle-knob) { transform: translateX(18px); }
:where(.toggle input:focus-visible + .toggle-track) { box-shadow: var(--focus-ring); }
:where(.toggle input:disabled + .toggle-track) { opacity: .4; cursor: not-allowed; }
:where(:where(.check, .radio) input) { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border); background: var(--surface2); cursor: pointer; display: inline-grid; place-items: center; transition: background .15s, border-color .15s; }
:where(.check input) { border-radius: var(--radius-xs, 4px); }
:where(.check input:checked) { border-color: var(--teal); background: var(--teal); }
:where(.check input:checked)::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border-right: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(45deg); }
:where(.radio input) { border-radius: 50%; }
:where(.radio input:checked) { border-color: var(--teal); }
:where(.radio input:checked)::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }
:where(:where(.check, .radio) input:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
:where(:where(.check, .radio) input:disabled) { opacity: .4; cursor: not-allowed; }

/* ── 14. Toast (§10.15): glass (L2 by default), 3px semantic bar, 12px radius ── */
:where(.toast) { box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--sp-3, 12px); max-width: var(--toast-max-w, 400px); padding: var(--toast-px, 14px); border-radius: var(--toast-radius, 12px); --_toast-c: var(--teal); box-shadow: inset var(--toast-bar, 3px) 0 0 0 var(--_toast-c), inset 0 0 0 1px color-mix(in srgb, var(--_toast-c) 20%, transparent), inset 1px 1px 0 0 var(--_g-hi, transparent); }
:where(.toast-s) { --_toast-c: var(--success); }
:where(.toast-e) { --_toast-c: var(--red); }
:where(.toast-w) { --_toast-c: var(--yellow); }
:where(.toast-i) { --_toast-c: var(--teal); }
:where(.toast-body) { flex: 1 1 auto; min-width: 0; padding-left: var(--sp-1, 4px); }
:where(.toast-title) { font-size: 11px; font-weight: 600; color: var(--text1); }
:where(.toast-msg) { margin-top: 2px; font-size: 10px; font-weight: 400; color: var(--text2); }

/* ── 15. Modal (§10.14): glass (L2), 16px radius, 24px padding, backdrop dim; title 16/700, body 12 ── */
:where(.modal-backdrop) { position: fixed; inset: 0; z-index: var(--z-modal, 1300); display: grid; place-items: center; padding: var(--sp-4, 16px); background: var(--modal-backdrop, rgba(0,0,0,.5)); }
:where(.modal) { box-sizing: border-box; width: min(100%, var(--modal-w, 480px)); padding: var(--modal-px, 24px); border-radius: var(--modal-radius, 16px); animation: toddooModalIn 200ms ease; }
:where(.modal.wide) { width: min(100%, var(--modal-w-lg, 640px)); }
:where(.modal.compact) { width: min(100%, var(--modal-w-sm, 320px)); }
:where(.modal-head) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px); margin-bottom: var(--sp-3, 12px); }
:where(.modal-title) { margin: 0; font-size: 16px; font-weight: 700; color: var(--text1); }
:where(.modal-body) { margin: 0; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text2); }
:where(.modal-actions) { display: flex; justify-content: flex-end; gap: var(--sp-2, 8px); margin-top: var(--sp-6, 24px); }
:where(.modal-close) { width: var(--modal-close-size, 28px); height: var(--modal-close-size, 28px); }
@keyframes toddooModalIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }

/* ── 16. Breadcrumbs and pagination (§10.13, §10.16, §23) ── */
:where(.breadcrumb) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bc-gap, 6px); font-size: var(--bc-font, 11px); }
:where(.breadcrumb a) { color: var(--bc-link-color, var(--text3)); font-weight: 500; text-decoration: none; }
:where(.breadcrumb a:hover) { color: var(--accent); }
:where(.breadcrumb .sep) { color: var(--text3); }
/* touch screens and tablets: each crumb gets a 44 px tall target without changing the look */
@media (pointer: coarse), (max-width: 1023px) { :where(.breadcrumb a) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 4px; } }
:where(.breadcrumb .current) { color: var(--bc-current-color, var(--accent)); font-weight: 400; }
:where(.pagination) { display: flex; align-items: center; gap: var(--pg-gap, 4px); }
:where(.pg-btn) { display: inline-grid; place-items: center; width: var(--pg-size, 36px); height: var(--pg-size, 36px); padding: 0; border: 0; border-radius: var(--pg-radius, 50%); background: transparent; color: var(--text2); font: inherit; font-size: 12px; cursor: pointer; }
:where(.pg-btn:hover) { background: var(--accent-dim); color: #00C8C8; }
:where(.pg-btn.on, .pg-btn[aria-current="page"]) { background: var(--teal); color: var(--bg); font-weight: 600; }
:where(.pg-btn:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
:where(.pg-ellipsis) { display: inline-grid; place-items: center; width: var(--pg-size, 36px); color: var(--text3); }
:where(.pg-count) { margin: var(--sp-2, 8px) 0 0; font-size: 12px; color: var(--text2); }

/* ── 17. Touch (R-25, R-30): on touch and narrow screens buttons get an invisible 44 × 44px tap area, check boxes,
   radios and toggles a 44px label row, and fields 16px text (so iOS does not zoom into them) ── */
@media (pointer: coarse), (max-width: 639px) {
  :where(.btn, .tab, .pg-btn, .sidebar-item) { position: relative; }
  :where(.btn, .tab, .pg-btn, .sidebar-item)::after {
    content: ""; position: absolute;
    top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
    left: min(0px, calc((100% - 44px) / 2)); right: min(0px, calc((100% - 44px) / 2));
  }
  :where(.toggle, .check, .radio) { min-height: 44px; }
  :where(.inp) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.loop) { animation-duration: 12s; }
  :where(.btn, .tab, .card, .sidebar-item, .toggle-track, .toggle-knob) { transition: none; }
  :where(.modal) { animation: none; }
}
@media (forced-colors: active) {
  :where(.btn, .tab, .badge, .sidebar-item, .pg-btn) { border: 1px solid CanvasText; }
}

/* ── 17. Portal parts (the exhibitor portal designs 12–28, Oct 2026): product card, category pills, option chips, the
   "You" pill, icon tiles, media cards, tab counts and the toggle row. Markup only; colours from tokens. ── */

/* 8. product card: <article class="product"><div class="media">…</div><h3 class="name">…</h3>
      <div class="buy"><div class="price">€1,500.00<small>excl. VAT</small></div><a class="btn btn-secondary">View</a></div></article>
      sold out: class="product sold-out" with <span class="badge badge-e flag">Sold out</span> inside .media */
:where(.product) { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-2xl, 16px); background: var(--glass-1, var(--bg)); box-shadow: inset 0 0 0 1px var(--glass-b1, var(--border)); }
:where(.product .media, .media-card .media) { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 1; background: var(--media-bg, var(--accent-dim)); color: var(--text3); overflow: hidden; }
:where(.product .media img, .media-card .media img) { width: 100%; height: 100%; object-fit: cover; display: block; }
:where(.product .media .flag, .media-card .media .flag) { position: absolute; top: 12px; inset-inline-start: 12px; }
/* a flag without a tone (the booth type: Corner, Row): a tinted pill in the accent */
:where(.media .badge.flag:not(.badge-s, .badge-w, .badge-e, .badge-i, .badge-n, .badge-a)) { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); color: var(--accent); }
:where(.product .name) { margin: var(--sp-4, 16px) var(--sp-4, 16px) 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text1); overflow-wrap: anywhere; }
:where(.product .buy) { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3, 12px); margin-top: auto; padding: var(--sp-4, 16px); }
:where(.price) { font-size: 20px; font-weight: 700; color: var(--text1); font-variant-numeric: tabular-nums; line-height: 1.2; }
:where(.price small) { display: block; font-size: 12px; font-weight: 400; color: var(--text2); }
/* a discount: <div class="price"><del>€1,800.00</del> €1,500.00<small>excl. VAT</small></div> */
:where(.price del) { margin-inline-end: 6px; font-size: .7em; font-weight: 500; color: var(--text2); text-decoration-thickness: 1.5px; }
:where(.product.sold-out :is(.media > :not(.flag), .name, .price, .buy .btn)) { opacity: .4; }
:where(.product.sold-out .buy .btn) { pointer-events: none; }

/* 9. category pills: <nav class="cats"><a class="back" href="…">All shops</a><p class="cats-label">Categories</p>
      <a class="cat" aria-current="true">All products <span class="n">9</span></a><a class="cat sub">…</a></nav> */
:where(.cats) { display: flex; flex-direction: column; gap: 2px; }
:where(.cats .back) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-bottom: var(--sp-2, 8px); margin-bottom: var(--sp-2, 8px); border-bottom: 1px solid var(--border); color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; }
:where(.cats .back)::before { content: "‹"; font-size: 18px; line-height: 1; }
:where(.cats-label) { margin: var(--sp-2, 8px) 0 var(--sp-1, 4px); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); }
:where(.cat) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); min-height: 44px; padding: 0 var(--sp-4, 16px); border: 1.5px solid transparent; border-radius: 999px; background: none; color: var(--text2); font: inherit; font-size: 14px; text-align: start; text-decoration: none; cursor: pointer; }
:where(.cat:hover) { background: var(--accent-dim); color: var(--text1); }
:where(.cat[aria-current="true"], .cat[aria-current="page"], .cat.on) { border-color: var(--accent); color: var(--accent); font-weight: 600; }
:where(.cat .n) { font-size: 12px; font-variant-numeric: tabular-nums; }
:where(.cat.sub) { margin-inline-start: var(--sp-4, 16px); font-size: 13px; }
:where(.cat:focus-visible, .cats .back:focus-visible) { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 639px) {
  :where(.cats) { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  :where(.cats .back) { flex-basis: 100%; }
  :where(.cats-label) { display: none; }
  :where(.cat) { justify-content: flex-start; }
  :where(.cat:not([aria-current="true"], [aria-current="page"], .on)) { border-color: var(--border); }
  :where(.cat.sub) { margin-inline-start: 0; }
}

/* 10. option chips: <div class="chips" role="group"><label class="chip"><input type="radio" name="size" value="m">
       Medium <span class="extra">+ € 25</span></label>…</div> (checkbox works the same) */
:where(.chips) { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: var(--sp-2, 8px); }
:where(.chip) { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--sp-4, 16px); border: 1.5px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text1); font-size: 13px; font-weight: 600; cursor: pointer; }
:where(.chip input) { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
:where(.chip .extra) { font-weight: 500; color: var(--text2); font-variant-numeric: tabular-nums; }
:where(.chip:hover) { background: var(--accent-dim); }
:where(.chip:has(input:checked)) { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
:where(.chip:has(input:checked) .extra) { color: var(--accent); }
:where(.chip:has(input:focus-visible)) { box-shadow: var(--focus-ring); }
:where(.chip:has(input:disabled)) { opacity: .45; cursor: not-allowed; }

/* 11. the "You" pill (and other accent pills: Primary, Default): <span class="badge badge-a">You</span> */
:where(.badge-a) { background: var(--accent); color: var(--bg); }

/* 12. icon tile: <span class="icon-tile"><span class="ico" …></span></span>; .icon-tile.square for rows, .lg 78px */
:where(.icon-tile) { display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--icon-tile, 56px); height: var(--icon-tile, 56px); border-radius: 50%; background: var(--accent-dim); color: var(--accent); }
:where(.icon-tile.lg) { --icon-tile: 64px; }
:where(.icon-tile.square) { border-radius: var(--radius-xl, 12px); }
/* a grey tile (the designs' row tiles): .icon-tile.neutral */
:where(.icon-tile.neutral) { background: color-mix(in srgb, var(--text3) 14%, var(--bg)); color: var(--text2); }
:where(.icon-tile svg, .icon-tile .ico) { width: 45%; height: 45%; }

/* 13. media card: <a class="card media-card" href="…"><div class="media">…<span class="badge flag">Corner</span></div>
       <div class="body"><h3 class="title">Booth 102</h3><p class="meta">9.00 m²</p></div></a> (a button works too) */
:where(.card.media-card) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
:where(.media-card .body) { display: grid; gap: 4px; padding: var(--sp-4, 16px); }
:where(.media-card .title) { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text1); }
:where(.media-card .meta) { margin: 0; font-size: 13px; color: var(--text2); }
:where(.media-card .meta b) { color: var(--text1); }
/* a description line (manual cards); values in the meta line never break in the middle ("19 May 2026") */
:where(.media-card .desc) { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:where(.media-card .meta b, .media-card .meta time, .media-card .meta .v) { white-space: nowrap; }
/* .meta.stack: one item per line (a file name, its size, its date); .wrap: a value that may break anywhere (file names) */
:where(.media-card .meta.stack) { display: grid; gap: 2px; }
:where(.media-card .meta .wrap) { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
/* an item that starts with an icon (paperclip + file name): mark it .ico and put the words after the icon in one
   element; the icon stays beside a wrapped value, not above its second line (hanging indent). A plain class, not a
   :has() check: :has() under .meta.stack cost 25-30 ms of style work per inserted element on large pages. */
:where(.media-card .meta .ico) { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
:where(.media-card .meta .ico > :first-child) { flex: none; margin-top: .15em; }
:where(.media-card .meta .ico > :not(:first-child)) { min-width: 0; }

/* 14. tab counts: <button class="tab on">Contact persons <span class="n">3</span></button> */
:where(.tab .n) { font-size: .85em; font-weight: 500; font-variant-numeric: tabular-nums; }
/* tabs keep their own height wherever they are placed (a grid cell, a card) */
:where(.tabs) { align-items: center; align-content: flex-start; }

/* 15b. toggle row: <label class="toggle-row"><span class="tr-text"><b>Make this the primary contact</b>
        <small>Picked automatically at checkout</small></span><span class="toggle"><input type="checkbox"><span class="toggle-track"></span></span></label> */
:where(.toggle-row) { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 16px); min-height: 64px; padding: var(--sp-4, 16px) var(--sp-5, 20px); border-radius: var(--radius-xl, 12px); background: var(--accent-dim); cursor: pointer; }
:where(.toggle-row .tr-text) { display: grid; gap: 2px; min-width: 0; }
:where(.toggle-row b) { font-size: 14px; font-weight: 600; color: var(--text1); }
:where(.toggle-row small) { font-size: 12px; color: var(--text2); }
/* touch: the switch and breadcrumb links are at least 44 × 44 */
@media (pointer: coarse), (max-width: 639px) { :where(.toggle) { min-width: 44px; min-height: 44px; justify-content: center; } }

/* ── 18. v2 redesign parts (Oct 2026): note, booth number, radio-dot chip, summary steps, choice cards ──
   <div class="note danger" role="note"><svg…/><div><b>Deactivate account</b> You can no longer sign in.</div></div>
   tones: (none) = info, .warn, .danger, .success; the words carry the meaning, the colour only helps */
:where(.note) { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 12px; background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); color: var(--text1); font-size: 13px; line-height: 1.5; --_note: var(--accent); }
:where(.note > svg, .note > .ico, .note > toddoo-icon) { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: var(--_note); color: var(--_note); }
:where(.note > div, .note > p) { margin: 0; min-width: 0; }
:where(.note b) { font-weight: 700; }
:where(.note.warn) { --_note: var(--warning, #FFBE0B); background: color-mix(in srgb, var(--_note) 14%, transparent); box-shadow: inset 3px 0 0 var(--_note); }
:where(.note.danger) { --_note: var(--red, #E54535); background: color-mix(in srgb, var(--_note) 12%, transparent); box-shadow: inset 3px 0 0 var(--_note); }
:where(.note.success) { --_note: var(--success, #00A88C); background: color-mix(in srgb, var(--_note) 12%, transparent); box-shadow: inset 3px 0 0 var(--_note); }
/* a booth number in a list row: <span class="booth-no">102</span>; round for short numbers, a pill for longer ones */
:where(.booth-no) { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.booth-no.lg) { min-width: 40px; height: 40px; font-size: 14px; }
:where(.booth-no.muted) { border-color: var(--border); color: var(--text2); }
/* a chip that shows its radio dot: <label class="chip dot"><input type="radio" name="g" value="f"> Female</label> */
:where(.chip.dot)::before { content: ""; flex: 0 0 auto; box-sizing: border-box; width: 16px; height: 16px; border: 1.5px solid var(--border); border-radius: 50%; background: var(--bg); }
:where(.chip.dot:has(input:checked))::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px), var(--bg); }
/* numbered summary steps (checkout): each step says done or empty in words too
   <ol class="sum-steps"><li class="done"><span class="n">1</span><div class="b"><h3>Fiscal identity</h3><p>…</p></div><a class="change" href="#">Change</a></li>
   <li class="empty"><span class="n">2</span><div class="b"><h3>Billing address</h3><p class="hint">Not filled in yet</p></div><button class="btn btn-sm">Add</button></li></ol> */
:where(.sum-steps) { display: grid; gap: var(--sp-3, 12px); margin: 0; padding: 0; list-style: none; }
:where(.sum-steps > li) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3, 12px); padding: 16px; border-radius: var(--radius-2xl, 16px); box-shadow: inset 0 0 0 1px var(--border); }
:where(.sum-steps > li.empty) { box-shadow: none; outline: 1.5px dashed var(--border); outline-offset: -1.5px; }
:where(.sum-steps .n) { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.sum-steps > li.done .n) { background: var(--accent); color: transparent; }
/* .sum-steps.numbers: a done step keeps its number, white in the filled circle (design 40) */
:where(.sum-steps.numbers > li.done .n) { color: var(--on-accent, #FFFFFF); }
:where(.sum-steps:not(.numbers) > li.done .n)::after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 10px; border-right: 2px solid var(--on-accent, #FFFFFF); border-bottom: 2px solid var(--on-accent, #FFFFFF); transform: translate(-50%, -50%) rotate(45deg); }
:where(.sum-steps > li.empty .n) { border-color: var(--border); color: var(--text2); }
:where(.sum-steps h3) { margin: 3px 0 4px; font-size: 14px; font-weight: 700; color: var(--text1); }
:where(.sum-steps .b p) { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text2); overflow-wrap: anywhere; }
:where(.sum-steps .hint) { font-style: italic; }
:where(.sum-steps .change) { align-self: center; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (pointer: coarse), (max-width: 639px) { :where(.sum-steps .change) { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } }
/* choose one of several saved records as cards (native radios: arrows, Tab and forms work as usual)
   <div class="choice-cards" role="radiogroup" aria-label="Billing address"><label class="choice-card"><input type="radio" name="a" value="1">
   <span class="cc-body"><b>Head office</b><span>Zekeringstraat 36B, Amsterdam</span></span><span class="badge badge-n">Default</span></label>…</div> */
:where(.choice-cards) { display: grid; gap: var(--sp-2, 8px); }
:where(.choice-card) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--sp-3, 12px); padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-2xl, 16px); background: var(--bg); color: var(--text1); cursor: pointer; }
:where(.choice-card input) { appearance: none; -webkit-appearance: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px; margin: 2px 0 0; border: 1.5px solid var(--border); border-radius: 50%; background: var(--bg); cursor: pointer; }
:where(.choice-card input:checked) { border-color: var(--accent); }
:where(.choice-card input:checked)::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
:where(.choice-card input:focus-visible) { outline: none; }
:where(.choice-card:hover) { background: var(--accent-dim); }
:where(.choice-card:has(input:checked)) { border-color: var(--accent); background: var(--accent-dim); }
:where(.choice-card:has(input:focus-visible)) { box-shadow: var(--focus-ring); }
:where(.choice-card:has(input:disabled)) { opacity: .45; cursor: not-allowed; }
:where(.choice-card .cc-body) { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--text2); overflow-wrap: anywhere; }
:where(.choice-card .cc-body b) { font-size: 14px; font-weight: 700; color: var(--text1); }

/* data checks: what to fix before the next step (an invoice), as a row of small cards in an outlined box
   <section class="checks"><header class="checks-head"><b>Data checks</b><span>4 to review before the next invoice</span></header>
   <div class="checks-row"><article class="checks-item"><span class="ci" aria-hidden="true">!</span><div><b>VAT number not verified</b>
   <p>The number has not been checked yet.</p><a class="checks-act" href="#">Verify now</a></div></article>…</div></section> */
:where(.checks) { display: grid; gap: var(--sp-3, 12px); padding: 16px; border: 1px solid var(--border); border-radius: var(--card-radius, 16px); }
:where(.checks-head) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--text2); }
:where(.checks-head b) { font-size: 14px; color: var(--text1); }
:where(.checks-row) { display: grid; gap: var(--sp-3, 12px); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
:where(.checks-item) { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--card-radius, 12px); background: var(--checks-item-bg, var(--accent-dim)); }
:where(.checks-item .ci) { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; color: var(--checks-icon, var(--yellow)); }
:where(.checks-item b) { display: block; font-size: 13px; color: var(--text1); }
:where(.checks-item p) { margin: 4px 0 8px; font-size: 12px; line-height: 1.5; color: var(--text2); }
:where(.checks-act) { font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; letter-spacing: var(--btn-tracking, normal); text-transform: var(--btn-case, none); }
:where(.checks-act:hover) { text-decoration: underline; }
@media (pointer: coarse), (max-width: 639px) { :where(.checks-act) { display: inline-flex; align-items: center; min-height: 44px; } }
/* a locked field: shown, not editable — the label with a lock icon, the value as text, a short note why
   <div class="field locked"><span class="lbl">VAT number <svg …lock…></svg></span><p class="val">NL123456789B01</p><p class="help">Verified with VIES. Ask support to change it.</p></div> */
:where(.field.locked .lbl) { display: inline-flex; align-items: center; gap: 6px; }
:where(.field.locked .lbl svg, .field.locked .lbl toddoo-icon) { width: 14px; height: 14px; fill: currentColor; color: var(--text2); }
:where(.field.locked .val) { margin: 0; padding: 4px 0; font-size: 14px; color: var(--text1); overflow-wrap: anywhere; }
:where(.field.locked .help) { margin: 0; font-size: 11px; color: var(--text2); }
/* an empty value in a table or a fact list ("Empty", "—"): muted, so a filled value stands out ("What changed" tables) */
:where(.tbl .none, .none.val) { color: var(--text3); }

/* ── 19. Last on purpose: anything with the hidden attribute stays hidden, whatever kit class it carries
   (.field-error[hidden], .chip[hidden], …). Zero specificity, so a page's own rule may still show it. ── */
:where([hidden]) { display: none; }