/* tradesman.bg platform site — shared structure.
   Colours, type, radius and spacing come only from tokens set by a direction file.
   Root: <html data-direction="spec|ledger|signal">, body.tb-root is the size container. */
@layer tb-reset, tb-base, tb-theme;

@layer tb-reset {
  body.tb-root { margin: 0; min-height: 100vh; }
  .tb-root, .tb-root *, .tb-root ::before, .tb-root ::after { box-sizing: border-box; }
  .tb-root :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend, table, blockquote) { margin: 0; padding: 0; }
  .tb-root :where(ul, ol) { list-style: none; }
  .tb-root :where(fieldset) { border: 0; min-width: 0; }
  .tb-root :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
  .tb-root :where(table) { border-collapse: collapse; border-spacing: 0; }
}

@layer tb-base {
  [data-direction] { --tap: 2.75rem; --row-pad-y: .55rem; --row-pad-x: var(--space-3); }
  .tb-root {
    container: site / inline-size; position: relative;
    background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-family-base); font-size: var(--font-size-md); font-weight: var(--font-weight-regular);
    line-height: 1.55; overflow-wrap: break-word; hyphens: auto;
  }
  :where(.tb-root) a { color: var(--color-link); text-underline-offset: .18em; text-decoration-thickness: from-font; }
  :where(.tb-root) a:hover { color: var(--color-link-hover); }
  .tb-root :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .tb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tb-skip { position: absolute; z-index: 60; inset-inline-start: var(--space-2); top: -10rem; padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-text); }
  .tb-skip:focus { top: var(--space-2); }
  .tb-wrap { max-width: var(--layout-max-width); margin-inline: auto; padding-inline: var(--layout-gutter); }
  .tb-mono { font-family: var(--font-family-mono); }
  .tb-muted { color: var(--color-text-muted); }
  .tb-n { color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
  .tb-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; min-width: 0; }

  /* Type */
  .tb-eyebrow { font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-eyebrow); hyphens: manual; }
  .tb-h1, .tb-h2, .tb-h3 { font-family: var(--font-family-heading); font-weight: var(--font-weight-heading); line-height: var(--heading-line, 1.1); letter-spacing: var(--heading-tracking, 0); text-transform: var(--heading-case, none); text-wrap: balance; hyphens: manual; }
  .tb-h1 { font-size: min(var(--font-size-3xl), 11cqi); }
  .tb-h2 { font-size: min(var(--font-size-2xl), 8.5cqi); }
  .tb-h3 { font-size: var(--font-size-lg); line-height: 1.25; }
  .tb-lede { font-size: var(--font-size-lg); color: var(--color-text-muted); max-width: 62ch; text-wrap: pretty; hyphens: manual; }
  .tb-prose { max-width: 68ch; display: grid; gap: var(--space-3); text-wrap: pretty; }
  .tb-prose h2 { font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); margin-top: var(--space-4); hyphens: manual; }

  /* Buttons */
  .tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap); padding: var(--space-2) var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-weight: var(--font-weight-bold); line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; hyphens: manual; overflow-wrap: normal; text-wrap: balance; }
  :where(.tb-root) a.tb-btn { color: var(--color-text); }
  .tb-btn:hover { background: var(--color-surface-sunken); }
  .tb-root .tb-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .tb-root .tb-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
  .tb-btn--lg { min-height: 3.25rem; padding-inline: var(--space-6); font-size: var(--font-size-lg); }
  .tb-btn--sm { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--font-size-sm); }
  .tb-btn--block { width: 100%; }
  .tb-btn--ghost { background: transparent; border-color: transparent; text-decoration: underline; }
  .tb-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

  /* Header */
  .tb-header { position: relative; z-index: 20; background: var(--color-header-bg); color: var(--color-on-header); border-bottom: var(--border-width) solid var(--color-header-border); }
  .tb-header :where(a) { color: inherit; }
  .tb-header__in { display: flex; align-items: center; gap: var(--space-3) var(--space-5); min-height: 4rem; }
  .tb-brand { display: inline-flex; align-items: center; gap: .55em; flex: none; text-decoration: none; font-family: var(--font-family-brand); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); letter-spacing: -.01em; hyphens: manual; }
  .tb-brand__mark { width: 1.7em; height: auto; aspect-ratio: 55 / 50; flex: none; display: block; }
  .tb-brand__a { fill: var(--color-brand-mark-a); }
  .tb-brand__b { fill: var(--color-brand-mark-b); }
  .tb-brand__word { letter-spacing: var(--brand-tracking, .06em); line-height: 1; white-space: nowrap; }
  .tb-brand__tld { color: var(--color-brand-tld); }
  .tb-brand:hover .tb-brand__b { fill: var(--color-brand-mark-b-hover, var(--color-brand-mark-b)); }
  .tb-nav { display: none; gap: var(--space-1); flex: 1; }
  .tb-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); text-decoration: none; font-weight: var(--font-weight-medium); border-radius: var(--radius-sm); white-space: nowrap; }
  .tb-nav a:hover { background: var(--color-header-hover); }
  .tb-nav [aria-current="page"] { box-shadow: inset 0 -3px 0 var(--color-header-accent); }
  .tb-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
  .tb-signin { display: none; align-items: center; min-height: var(--tap); padding: 0 var(--space-2); font-size: var(--font-size-sm); white-space: nowrap; }
  .tb-lang { display: flex; width: max-content; border: var(--border-width) solid var(--color-header-line); border-radius: var(--radius-md); overflow: hidden; flex: none; }
  .tb-lang a { display: grid; place-items: center; min-height: calc(var(--tap) - 2 * var(--border-width)); min-width: 2.5rem; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-decoration: none; }
  .tb-lang [aria-current="true"] { background: var(--color-on-header); color: var(--color-header-bg); }
  .tb-header__cta { display: none; }
  .tb-menu > summary { display: grid; place-items: center; min-width: var(--tap); min-height: var(--tap); padding: 0 var(--space-3); border: var(--border-width) solid var(--color-header-line); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); list-style: none; cursor: pointer; }
  .tb-menu > summary::-webkit-details-marker { display: none; }
  .tb-menu__panel { position: absolute; inset-inline: 0; top: 100%; display: grid; gap: var(--space-1); padding: var(--space-3) var(--layout-gutter) var(--space-5); background: var(--color-header-bg); border-bottom: var(--border-width) solid var(--color-header-border); box-shadow: var(--elevation-2); }
  .tb-menu__panel a:not(.tb-btn) { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; font-weight: var(--font-weight-medium); border-bottom: 1px solid var(--color-header-line); }
  .tb-menu__panel .tb-btn { margin-top: var(--space-3); }
  .tb-header .tb-hsearch { display: none; flex: 1; max-width: 34rem; }

  /* Search field (shared) */
  .tb-search { display: flex; min-width: 0; width: 100%; }
  .tb-search .tb-input { border-start-end-radius: 0; border-end-end-radius: 0; min-width: 0; flex: 1; }
  .tb-search .tb-btn { border-start-start-radius: 0; border-end-start-radius: 0; flex: none; white-space: nowrap; }
  .tb-search--lg .tb-input, .tb-search--lg .tb-btn { min-height: 3.5rem; }
  .tb-search--lg .tb-input { font-size: var(--font-size-lg); padding-inline: var(--space-4); }
  .tb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .tb-chip { display: inline-flex; align-items: center; gap: .4em; min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm); text-decoration: none; white-space: nowrap; hyphens: manual; }
  :where(.tb-root) a.tb-chip { color: var(--color-text); }
  .tb-chip:hover { background: var(--color-surface-sunken); }
  .tb-chip[aria-pressed="true"], .tb-chip[aria-current] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .tb-chip__x { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-inline-end: -.5rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; font-size: 1.15em; line-height: 1; cursor: pointer; }
  .tb-chip__x:hover { background: var(--color-surface-sunken); }
  button.tb-chip { cursor: pointer; font: inherit; font-size: var(--font-size-sm); }
  .tb-root .tb-btn[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary-ink); color: var(--color-on-primary); }

  /* Sections */
  .tb-section { padding-block: var(--section-pad); }
  .tb-section--band { background: var(--color-band-bg); }
  .tb-section--inverse { background: var(--color-inverse-bg); color: var(--color-on-inverse); --color-text: var(--color-on-inverse); --color-text-muted: var(--color-on-inverse-muted); --color-link: var(--color-on-inverse); --color-link-hover: var(--color-on-inverse); --color-eyebrow: var(--color-inverse-eyebrow); --color-border: var(--color-inverse-line); }
  .tb-section__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); max-width: 52rem; }
  .tb-section__foot { margin-top: var(--space-5); }

  /* Hero */
  .tb-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; padding-block: var(--hero-pad); }
  .tb-hero__text { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
  .tb-hero__media { min-width: 0; }
  .tb-hero__note { font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .tb-callouts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .tb-callouts li { display: flex; gap: var(--space-2); align-items: baseline; }
  .tb-callouts b { font-family: var(--font-family-mono); color: var(--color-eyebrow); }

  /* Product glimpse (a supplier shop in a frame) */
  .tb-window { border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--elevation-2); overflow: hidden; color: var(--color-text); }
  .tb-window__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .tb-window__url { padding: .2em .6em; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tb-gl { display: grid; grid-template-columns: minmax(0, 1fr); font-size: var(--font-size-sm); }
  .tb-gl__brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-sample-brand); color: var(--color-on-sample-brand); font-weight: var(--font-weight-bold); }
  .tb-gl__brand span:last-child { margin-inline-start: auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
  .tb-gl__logo { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; background: var(--color-on-sample-brand); color: var(--color-sample-brand); font-size: .7rem; font-weight: var(--font-weight-bold); border-radius: 2px; }
  .tb-gl__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
  .tb-gl__title { font-weight: var(--font-weight-bold); line-height: 1.25; hyphens: manual; }
  .tb-gl__facets { display: grid; gap: var(--space-2); align-content: start; }
  .tb-gl__facet { display: grid; gap: var(--space-1); }
  .tb-gl__facet > span { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-muted); hyphens: manual; }
  .tb-gl__opts { display: flex; flex-wrap: wrap; gap: 4px; }
  .tb-gl__opt { padding: .1em .5em; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-family-mono); font-size: var(--font-size-xs); white-space: nowrap; }
  .tb-gl__opt.is-on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
  .tb-gl__basket { display: grid; gap: var(--space-1); padding: var(--space-3); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-size: var(--font-size-xs); }
  .tb-gl__basket strong { font-size: var(--font-size-sm); }
  .tb-gl__basket div { display: flex; justify-content: space-between; gap: var(--space-2); }

  /* Tables (glimpse, Excel preview, class comparison) */
  .tb-table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overscroll-behavior-x: contain; }
  .tb-table { width: 100%; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums lining-nums; }
  .tb-table :is(th, td) { padding: var(--row-pad-y) var(--row-pad-x); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
  .tb-table thead th { background: var(--color-table-head-bg); color: var(--color-table-head-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); vertical-align: bottom; white-space: normal; min-width: 4rem; line-height: 1.25; hyphens: manual; }
  .tb-table tbody tr:last-child > * { border-bottom: 0; }
  .tb-table .is-num { text-align: end; }
  .tb-table tbody tr:hover > * { background: color-mix(in oklch, var(--color-surface-sunken) 70%, var(--color-surface)); }
  .tb-table--sticky :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); white-space: normal; min-width: 10rem; max-width: 13rem; box-shadow: inset -1px 0 0 var(--color-border); }
  .tb-table--sticky thead th:first-child { z-index: 2; background: var(--color-table-head-bg); }
  .tb-table th[aria-sort] a, .tb-sort { color: inherit; text-decoration: none; display: inline-flex; gap: .3em; align-items: center; }
  .tb-sort::after { content: "↕"; opacity: .55; }
  th[aria-sort="ascending"] .tb-sort::after { content: "↑"; opacity: 1; }
  th[aria-sort="descending"] .tb-sort::after { content: "↓"; opacity: 1; }
  .tb-item { display: grid; line-height: 1.3; }
  .tb-item__name { font-weight: var(--font-weight-bold); text-decoration: none; }
  .tb-item__name:hover { text-decoration: underline; }
  .tb-item__sku { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .tb-item__meta { display: none; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
  .tb-item__meta .tb-price, .tb-item__meta .tb-onreq { font-size: var(--font-size-xs); }
  .tb-scroll-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); }
  .tb-table-note { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--space-2); }

  /* Badges, prices */
  .tb-badge { display: inline-flex; align-items: center; gap: .45em; padding: .2em .6em; border-radius: var(--radius-pill); background: var(--_bg); color: var(--_fg); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); line-height: 1.3; white-space: nowrap; hyphens: manual; }
  .tb-badge::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
  .tb-badge--in { --_bg: var(--color-success-bg); --_fg: var(--color-success-text); }
  .tb-badge--low { --_bg: var(--color-warning-bg); --_fg: var(--color-warning-text); }
  .tb-badge--low::before { background: linear-gradient(90deg, currentColor 50%, transparent 0); box-shadow: inset 0 0 0 1.5px currentColor; }
  .tb-badge--order { --_bg: var(--color-info-bg); --_fg: var(--color-info-text); }
  .tb-badge--order::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
  .tb-badge--ask { --_bg: var(--color-surface-sunken); --_fg: var(--color-text); }
  .tb-badge--ask::before { content: "?"; width: auto; height: auto; background: none; line-height: 1; }
  .tb-badge--new { --_bg: var(--color-success-bg); --_fg: var(--color-success-text); }
  .tb-badge--new::before { content: "+"; width: auto; height: auto; background: none; }
  .tb-badge--chg { --_bg: var(--color-info-bg); --_fg: var(--color-info-text); }
  .tb-badge--chg::before { content: "~"; width: auto; height: auto; background: none; }
  .tb-badge--del { --_bg: var(--color-danger-bg); --_fg: var(--color-danger-text); }
  .tb-badge--del::before { content: "−"; width: auto; height: auto; background: none; }
  .tb-price { font-weight: var(--font-weight-bold); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .tb-onreq { font-weight: var(--font-weight-bold); white-space: nowrap; }
  .tb-vat { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }

  /* Model: own shop + marketplace */
  .tb-model { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
  .tb-model__card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; }
  .tb-model__card--main { border-width: calc(var(--border-width) * 2); border-color: var(--color-model-main); }
  .tb-model__tag { justify-self: start; }
  .tb-model__addr { font-family: var(--font-family-mono); font-size: var(--font-size-sm); padding: var(--space-2) var(--space-3); background: var(--color-surface-sunken); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
  .tb-model__shops { display: grid; gap: var(--space-1); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
  .tb-model__shops li { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
  .tb-model__shops li.is-you { border-color: var(--color-model-main); font-weight: var(--font-weight-bold); }
  .tb-model__link { display: grid; place-items: center; align-content: center; gap: var(--space-1); padding: var(--space-2); text-align: center; font-size: var(--font-size-sm); color: var(--color-text-muted); hyphens: manual; }
  .tb-model__link::before { content: "↓"; font-size: var(--font-size-xl); line-height: 1; color: var(--color-eyebrow); }
  .tb-shoplink { font-weight: var(--font-weight-bold); white-space: nowrap; }
  .tb-shoplink::after { content: " →"; }
  .tb-model__note { margin-top: var(--space-4); font-weight: var(--font-weight-bold); }

  /* Features */
  .tb-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--feature-gap); }
  .tb-feature { display: grid; gap: var(--space-2); align-content: start; padding: var(--feature-pad); border-top: var(--feature-rule) solid var(--color-border-strong); }
  .tb-feature__title { font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-heading); line-height: 1.2; text-transform: var(--heading-case, none); hyphens: manual; text-wrap: balance; }
  .tb-feature p { color: var(--color-text-muted); text-wrap: pretty; }
  .tb-feature__eg { justify-self: start; font-family: var(--font-family-mono); font-size: var(--font-size-xs); padding: .3em .6em; border-radius: var(--radius-sm); background: var(--color-surface-sunken); color: var(--color-text); hyphens: manual; }

  /* Excel onboarding */
  .tb-excel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .tb-steps { display: grid; gap: var(--space-3); counter-reset: st; }
  .tb-steps > li { counter-increment: st; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 var(--space-3); }
  .tb-steps > li::before { content: counter(st); grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-step); background: var(--color-step-bg); color: var(--color-on-step); font-family: var(--font-family-mono); font-weight: var(--font-weight-bold); }
  .tb-steps strong { line-height: 1.3; padding-top: .35rem; }
  .tb-steps span { color: var(--color-text-muted); font-size: var(--font-size-sm); text-wrap: pretty; }
  .tb-diff__sum { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--color-border); align-items: center; font-size: var(--font-size-sm); }
  .tb-diff__sum .tb-actions { margin-inline-start: auto; }
  .tb-old { text-decoration: line-through; color: var(--color-text-muted); }

  /* Teasers */
  .tb-teaser { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-6); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
  .tb-teaser__price { font-family: var(--font-family-heading); font-size: min(var(--font-size-3xl), 13cqi); font-weight: var(--font-weight-heading); line-height: 1; white-space: nowrap; }
  .tb-teaser__price small { font-family: var(--font-family-base); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
  .tb-teaser ul { display: grid; gap: var(--space-1); font-size: var(--font-size-sm); }
  .tb-teaser li::before { content: "— "; color: var(--color-eyebrow); }

  /* Pricing */
  .tb-billing { display: inline-flex; gap: 2px; padding: 3px; border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface); }
  .tb-billing label { position: relative; display: inline-flex; align-items: center; gap: .4em; min-height: 2.5rem; padding: 0 var(--space-4); border-radius: var(--radius-pill); cursor: pointer; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); hyphens: manual; white-space: nowrap; }
  .tb-billing input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .tb-billing label:has(:checked) { background: var(--color-primary); color: var(--color-on-primary); }
  .tb-billing label:has(:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .tb-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: stretch; margin-top: var(--space-5); }
  .tb-plan { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--space-4); padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; }
  .tb-plan--featured { border-width: calc(var(--border-width) * 2); border-color: var(--color-plan-featured); box-shadow: var(--elevation-2); }
  .tb-plan__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); }
  .tb-plan__name { font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); text-transform: var(--heading-case, none); line-height: 1.1; hyphens: manual; }
  .tb-plan__flag { padding: .2em .65em; border-radius: var(--radius-pill); background: var(--color-plan-featured); color: var(--color-on-plan-featured); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); white-space: nowrap; hyphens: manual; }
  .tb-plan__price { display: grid; gap: 2px; }
  .tb-plan__amount { font-family: var(--font-family-heading); font-size: var(--font-size-3xl); font-weight: var(--font-weight-heading); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tb-plan__amount small { font-family: var(--font-family-base); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
  .tb-plan__annual { display: none; }
  .tb-pricing:has(#bill-annual:checked) .tb-plan__monthly, .tb-pricing:has([data-bill="annual"]:checked) .tb-plan__monthly { display: none; }
  .tb-pricing:has(#bill-annual:checked) .tb-plan__annual, .tb-pricing:has([data-bill="annual"]:checked) .tb-plan__annual { display: grid; gap: 2px; }
  .tb-plan__limits { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); font-size: var(--font-size-sm); padding-block: var(--space-3); border-block: 1px solid var(--color-border); }
  .tb-plan__limits dt { color: var(--color-text-muted); }
  .tb-plan__limits dd { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
  .tb-checks { display: grid; gap: var(--space-2); font-size: var(--font-size-sm); align-content: start; }
  .tb-checks li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: var(--space-2); }
  .tb-checks li::before { content: "✓"; font-weight: var(--font-weight-bold); color: var(--color-check); }
  .tb-checks .is-inherit { font-weight: var(--font-weight-bold); }
  .tb-checks .is-inherit::before { content: "＋"; }
  .tb-import { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-band-bg); border: var(--border-width) solid var(--color-border); }
  .tb-import__facts { display: grid; gap: var(--space-3); }
  .tb-import__facts li { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
  .tb-import__facts b { font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); line-height: 1.1; hyphens: manual; }
  .tb-faq { display: grid; border-top: var(--border-width) solid var(--color-border-strong); }
  .tb-faq details { border-bottom: 1px solid var(--color-border); }
  .tb-faq summary { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; min-height: 3.25rem; padding-block: var(--space-3); font-weight: var(--font-weight-bold); cursor: pointer; list-style: none; hyphens: manual; }
  .tb-faq summary::-webkit-details-marker { display: none; }
  .tb-faq summary::after { content: "+"; flex: none; font-family: var(--font-family-mono); font-size: var(--font-size-lg); }
  .tb-faq details[open] summary::after { content: "−"; }
  .tb-faq details p { padding-bottom: var(--space-4); max-width: 68ch; color: var(--color-text-muted); text-wrap: pretty; }

  /* Marketplace */
  .tb-mhero { display: grid; gap: var(--space-4); padding-block: var(--hero-pad); max-width: 56rem; }
  .tb-stats { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .tb-stats b { font-family: var(--font-family-heading); font-size: var(--font-size-xl); color: var(--color-text); font-weight: var(--font-weight-heading); margin-inline-end: .3em; font-variant-numeric: tabular-nums; }
  .tb-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
  .tb-classgroup { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .tb-classgroup h3 { font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-heading); text-transform: var(--heading-case, none); line-height: 1.15; hyphens: manual; }
  .tb-classgroup ul { display: grid; }
  .tb-classgroup a { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; min-height: 2.5rem; padding-block: var(--space-2); border-top: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
  .tb-classgroup a:hover { color: var(--color-link); text-decoration: underline; }
  .tb-crumbs { font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
  .tb-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
  .tb-crumbs li + li::before { content: "/" / ""; color: var(--color-text-muted); margin-inline-end: var(--space-2); }
  .tb-crumbs [aria-current] { color: var(--color-text-muted); }
  .tb-page-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
  .tb-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-info-text); font-size: var(--font-size-sm); text-wrap: pretty; }
  .tb-refine { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin-bottom: var(--space-4); }
  .tb-refine__sort { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
  .tb-results { display: grid; border-top: var(--border-width) solid var(--color-border-strong); }
  .tb-result { display: grid; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "supplier supplier" "stock price" "go go"; align-items: center; }
  .tb-result__main { grid-area: main; display: grid; gap: var(--space-2); min-width: 0; }
  .tb-result__name { font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.3; text-decoration: none; hyphens: manual; }
  .tb-result__name:hover { text-decoration: underline; }
  .tb-specs { display: flex; flex-wrap: wrap; gap: 4px; }
  .tb-specs li { display: inline-flex; gap: .35em; padding: .15em .5em; border-radius: var(--radius-sm); background: var(--color-surface-sunken); font-size: var(--font-size-xs); white-space: nowrap; hyphens: manual; }
  .tb-specs li span { color: var(--color-text-muted); }
  .tb-specs li b { font-family: var(--font-family-mono); font-weight: var(--font-weight-bold); }
  .tb-result__supplier { grid-area: supplier; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--font-size-sm); align-items: baseline; }
  .tb-result__supplier strong { hyphens: manual; }
  .tb-result__stock { grid-area: stock; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .tb-result__price { grid-area: price; display: grid; justify-items: end; text-align: end; line-height: 1.25; }
  .tb-result__price .tb-price, .tb-result__price .tb-onreq { font-size: var(--font-size-md); }
  .tb-result__go { grid-area: go; }
  .tb-go { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-decoration: none; hyphens: manual; }
  :where(.tb-root) a.tb-go { color: var(--color-text); }
  .tb-go:hover { background: var(--color-surface-sunken); }
  .tb-go::after { content: "→"; flex: none; }
  .tb-go small { display: block; font-weight: var(--font-weight-regular); color: var(--color-text-muted); font-size: var(--font-size-xs); }

  .tb-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
  .tb-filters > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); padding: 0 var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-weight: var(--font-weight-bold); cursor: pointer; list-style: none; }
  .tb-filters > summary::-webkit-details-marker { display: none; }
  .tb-filters[open] > summary { margin-bottom: var(--space-3); }
  .tb-facet { padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
  .tb-facet:first-child { border-top: 0; padding-top: 0; }
  .tb-facet > legend { float: left; width: 100%; margin-bottom: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); hyphens: manual; }
  .tb-facet > legend + * { clear: both; }
  .tb-facet__etim { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
  .tb-check { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--font-size-sm); cursor: pointer; }
  .tb-check input { width: 1.125rem; height: 1.125rem; margin: 0; flex: none; accent-color: var(--color-primary-ink); }
  .tb-check .tb-n { margin-inline-start: auto; }
  .tb-check:has(:disabled) { color: var(--color-text-muted); }
  .tb-chipcheck { position: relative; display: inline-flex; align-items: center; gap: .35em; min-height: 2.5rem; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); font-family: var(--font-family-mono); font-size: var(--font-size-sm); cursor: pointer; white-space: nowrap; }
  .tb-chipcheck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .tb-chipcheck .tb-n { color: inherit; font-family: var(--font-family-base); }
  .tb-chipcheck:has(:checked) { background: var(--color-primary); border-color: var(--color-primary-ink); color: var(--color-on-primary); }
  .tb-chipcheck:has(:checked)::before { content: "✓"; }
  .tb-chipcheck:has(:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
  .tb-chipset { display: flex; flex-wrap: wrap; gap: var(--space-1); }

  .tb-empty { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6) var(--space-5); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); max-width: 48rem; }
  .tb-empty__title { font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); line-height: 1.15; text-transform: var(--heading-case, none); text-wrap: balance; hyphens: manual; }
  .tb-empty ul { display: grid; gap: var(--space-1); font-size: var(--font-size-sm); list-style: disc; padding-inline-start: 1.2em; }

  /* Forms */
  .tb-formlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; padding-block: var(--space-6) var(--section-pad); }
  .tb-form { display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
  .tb-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tb-field { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
  .tb-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); hyphens: manual; }
  .tb-label .tb-opt { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
  .tb-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .tb-req { color: var(--color-danger-text); }
  .tb-input, .tb-select, .tb-textarea { width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: max(1rem, var(--font-size-md)); }
  .tb-textarea { min-height: 6rem; resize: vertical; }
  .tb-input::placeholder, .tb-textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
  .tb-radios { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .tb-radio { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); hyphens: manual; }
  .tb-radio input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-primary-ink); }
  .tb-radio:has(:checked) { border-color: var(--color-primary-ink); box-shadow: inset 0 0 0 1px var(--color-primary-ink); font-weight: var(--font-weight-bold); }
  .tb-consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--font-size-sm); cursor: pointer; }
  .tb-consent input { width: 1.25rem; height: 1.25rem; margin: .1em 0 0; accent-color: var(--color-primary-ink); }
  .tb-aside { display: grid; gap: var(--space-5); align-content: start; }
  .tb-panel { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-band-bg); }
  .tb-panel dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-4); font-size: var(--font-size-sm); }
  .tb-panel dt { color: var(--color-text-muted); }
  .tb-thanks { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); background: var(--color-success-bg); color: var(--color-success-text); max-width: 46rem; }
  .tb-thanks .tb-h1 { font-size: min(var(--font-size-2xl), 9cqi); }

  /* How it works */
  .tb-path { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); counter-reset: path; }
  .tb-path > li { counter-increment: path; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
  .tb-path > li::before { content: counter(path); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--color-step-bg); color: var(--color-on-step); font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); border-radius: var(--radius-step); }
  .tb-path :is(h2, h3) { font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-heading); text-transform: var(--heading-case, none); line-height: 1; hyphens: manual; }
  .tb-path p { color: var(--color-text-muted); text-wrap: pretty; }
  .tb-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
  .tb-deflist { display: grid; gap: var(--space-3); }
  .tb-deflist li { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); text-wrap: pretty; }
  .tb-deflist strong { hyphens: manual; }
  .tb-deflist span { color: var(--color-text-muted); }
  .tb-notneed { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-size: var(--font-size-sm); }
  .tb-mail { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--elevation-2); font-size: var(--font-size-sm); }
  .tb-mail__head { display: grid; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
  .tb-mail__from { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .tb-mail ul { display: grid; gap: var(--space-1); }
  .tb-mail li { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-family-mono); font-size: var(--font-size-xs); }
  .tb-draft { justify-self: start; padding: .2em .6em; border-radius: var(--radius-sm); background: var(--color-warning-bg); color: var(--color-warning-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); }

  /* Footer */
  .tb-footer { background: var(--color-footer-bg); color: var(--color-on-footer); font-size: var(--font-size-sm); --color-text: var(--color-on-footer); --color-text-muted: var(--color-on-footer-muted); --color-link: var(--color-on-footer); --color-link-hover: var(--color-on-footer); --color-border: var(--color-footer-line); }
  .tb-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-5); padding-block: var(--space-7) var(--space-5); }
  .tb-footer h2 { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); hyphens: manual; }
  .tb-footer ul { display: grid; gap: var(--space-1); }
  .tb-footer ul a { min-height: 1.75rem; display: inline-flex; align-items: center; }
  .tb-footer__base { display: grid; gap: var(--space-2); padding-block: var(--space-4) var(--space-6); border-top: 1px solid var(--color-footer-line); font-size: var(--font-size-xs); color: var(--color-on-footer-muted); }
  .tb-footer .tb-lang { border-color: var(--color-footer-line); justify-self: start; }
  .tb-footer .tb-lang [aria-current="true"] { background: var(--color-on-footer); color: var(--color-footer-bg); }

  /* ---------- responsive ---------- */
  @container site (max-width: 29.99rem) {
    .tb-header .tb-brand { font-size: var(--font-size-sm); gap: .45em; }
    .tb-header .tb-brand__word { letter-spacing: .03em; }
    .tb-header__in { gap: var(--space-2); }
    .tb-lede { font-size: var(--font-size-md); }
    .tb-actions > .tb-btn { flex: 1 1 100%; }
    .tb-search--lg { flex-wrap: wrap; gap: var(--space-2); }
    .tb-search--lg .tb-input, .tb-search--lg .tb-btn { border-radius: var(--radius-md); flex: 1 1 100%; }
    .tb-diff__sum .tb-actions { margin-inline-start: 0; width: 100%; }
  }
  @container site (max-width: 47.99rem) { .tb-plan--featured { order: -1; } }
  @container site (min-width: 40rem) {
    .tb-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-span-2 { grid-column: 1 / -1; }
    .tb-model { grid-template-columns: minmax(0, 1fr) 7rem minmax(0, 1fr); }
    .tb-model__link::before { content: "→"; }
    .tb-teaser { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); }
    .tb-gl__body { grid-template-columns: 9.5rem minmax(0, 1fr); }
    .tb-gl__title, .tb-gl__basket { grid-column: 1 / -1; }
    .tb-result { grid-template-columns: minmax(0, 1fr) 9rem 10rem; grid-template-areas: "main stock price" "supplier supplier go"; }
    .tb-result__go { justify-self: end; }
    .tb-result__stock { justify-content: flex-start; }
  }
  @container site (max-width: 47.99rem) {
    .tb-path > li { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-4); }
    .tb-path > li::before { grid-row: span 2; width: 2.5rem; height: 2.5rem; font-size: var(--font-size-lg); }
    .tb-item__meta { display: block; }
    .tb-col-wide { display: none; }
  }
  @container site (min-width: 48rem) {
    .tb-scroll-hint { display: none; }
    .tb-nav, .tb-header__cta { display: inline-flex; }
    .tb-menu { display: none; }
    .tb-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb-excel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .tb-import { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tb-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tb-formlayout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  }
  @container site (min-width: 64rem) {
    .tb-signin { display: inline-flex; }
    .tb-root[data-area="market"] .tb-header .tb-hsearch { display: flex; }
    .tb-root[data-area="market"] .tb-nav { flex: none; }
    .tb-layout { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-5); }
    .tb-table--sticky { --row-pad-x: .55rem; }
    .tb-table--sticky :is(th, td):first-child { max-width: none; min-width: 0; }
    .tb-table--sticky .tb-item__name { white-space: nowrap; }
    .tb-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tb-result { grid-template-columns: minmax(0, 1fr) 12rem 8.5rem 9rem 14rem; grid-template-areas: "main supplier stock price go"; }
    .tb-result__supplier { display: grid; }
    .tb-gl__body { grid-template-columns: 9rem minmax(0, 1fr); }
    .tb-gl__basket { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-items: baseline; }
  }
  @supports selector(::details-content) {
    @container site (min-width: 64rem) {
      .tb-filters > summary { display: none; }
      .tb-filters::details-content { content-visibility: visible; display: block; block-size: auto; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tb-root *, .tb-root ::before, .tb-root ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  }
}