/* ============================================================================
   OPTION B "PLATE" — COMPONENT LAYER
   components.css · v3.0.0 · requires tokens.css
   ----------------------------------------------------------------------------
   Option A's component layer, plus:
     · the display face on HEADINGS and display figures only — labels, tables
       and small type stay Plex Sans Condensed, as in Option A
     · accent hairlines that thicken and glow in Dark, and stay quiet in
       Light and Comfort, driven by --bt-accent-weight and --bt-accent-glow
     · the button family, the theme switch and .bt-plate
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bt-ground);
  color: var(--bt-text);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-size-4);
  line-height: var(--bt-lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* Dark sharpens the geometry as well as the palette. */
:root[data-theme="dark"], .bt-terminal { --bt-r-3: 6px; --bt-r-2: 4px; }

/* ---------- Headings · DIN 1451 Mittelschrift ------------------------------
   h1 and h2 are set uppercase with plate tracking — that is where the face
   is doing its plate job. h3 and h4 stay sentence case: an uppercase setting
   is a signal, and a signal repeated at every level stops being one.       */
h1, h2, h3, h4, .bt-ticker, .bt-tile__figure, .bt-plate, .bt-display {
  font-family: var(--bt-font-display);
  font-weight: 600;
  line-height: var(--bt-lh-tight);
  letter-spacing: var(--bt-track-display);
  text-wrap: balance;
  margin: 0;
}
h1, h2, .bt-plate, .bt-display {
  text-transform: uppercase;
  letter-spacing: var(--bt-track-plate);
}
h1 { font-size: var(--bt-size-9); }
h2 { font-size: var(--bt-size-8); }
h3 { font-size: var(--bt-size-7); }
h4 { font-size: var(--bt-size-6); }
h5 {
  font-family: var(--bt-font-plate); font-weight: 600; font-size: var(--bt-size-4);
  text-transform: uppercase; letter-spacing: var(--bt-track-label); margin: 0;
}
p { margin: 0; }
a { color: var(--bt-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--bt-focus-ring); border-radius: var(--bt-r-1);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Layout --------------------------------------------------------- */
.bt-shell    { max-width: var(--bt-max); margin-inline: auto; padding-inline: var(--bt-margin); }
.bt-doc      { max-width: var(--bt-max-doc); }
.bt-stack    { display: flex; flex-direction: column; gap: var(--bt-s4); }
.bt-stack-lg { display: flex; flex-direction: column; gap: var(--bt-rhythm); }
.bt-row      { display: flex; align-items: center; gap: var(--bt-gutter-tight); flex-wrap: wrap; }
.bt-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--bt-gutter); }
.bt-grid     { display: grid; grid-template-columns: repeat(var(--bt-grid-cols), minmax(0, 1fr)); gap: var(--bt-gutter); }
.bt-section  { padding-block: var(--bt-rhythm); }
.bt-app      { display: grid; grid-template-columns: var(--bt-rail) minmax(0, 1fr); min-height: 100%; }
@media (max-width: 900px) { .bt-app { grid-template-columns: minmax(0, 1fr); } }

.bt-eyebrow {
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3);
}
.bt-lede { font-size: var(--bt-size-5); line-height: var(--bt-lh-relaxed); color: var(--bt-text-2); max-width: var(--bt-measure); }
.bt-rule { height: 1px; background: var(--bt-line); border: 0; margin: 0; }
.bt-num  { font-family: var(--bt-font-display); font-variant-numeric: tabular-nums; }
.bt-mono { font-family: var(--bt-font-mono); font-variant-numeric: tabular-nums; font-size: var(--bt-size-3); }

/* ---------- .bt-plate · the identity device --------------------------------
   One figure, read across a room: an auction lot, an invoice total, a
   campaign ID on a printed insertion order. The seal tab on the left is where
   a plate carries its regional stamp.                                       */
.bt-plate {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 3px solid var(--bt-text);
  border-radius: 9px;
  background: var(--bt-surface);
  overflow: hidden;
}
.bt-plate__seal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--bt-s2) var(--bt-s2);
  background: var(--bt-accent); color: var(--bt-cta-ink);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-1); font-weight: 600;
  letter-spacing: var(--bt-track-label); text-transform: uppercase;
}
.bt-plate__value {
  padding: var(--bt-s2) var(--bt-s5);
  font-size: var(--bt-size-8); font-variant-numeric: tabular-nums;
  color: var(--bt-text); display: flex; align-items: center;
}
.bt-plate--sm .bt-plate__value { font-size: var(--bt-size-6); padding: var(--bt-s1) var(--bt-s4); }
.bt-plate--accent { border-color: var(--bt-accent); box-shadow: var(--bt-accent-glow); }
.bt-plate--accent .bt-plate__value { color: var(--bt-accent); }

/* ---------- Bento ---------------------------------------------------------- */
.bt-bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(136px, auto); gap: var(--bt-gutter-tight);
}
.bt-tile {
  grid-column: span 3;
  display: flex; flex-direction: column; gap: var(--bt-s2);
  padding: var(--bt-pad-tile);
  background: var(--bt-surface);
  border: var(--bt-border) solid var(--bt-line);
  border-radius: var(--bt-r-3);
  min-width: 0;
}
/* The accent-owned tile: a hairline in Light and Comfort, a 2px edge with a
   faint bloom in Dark. Same rule, three intensities, no extra classes. */
.bt-tile[data-product] {
  border-color: color-mix(in oklab, var(--bt-accent) 46%, var(--bt-line));
  border-width: var(--bt-accent-weight);
  box-shadow: var(--bt-accent-glow);
}
.bt-tile--lead  { box-shadow: var(--bt-shadow-2); }
.bt-tile--quiet { background: transparent; border-style: dashed; }
.bt-tile--wide  { grid-column: span 6; }
.bt-tile--full  { grid-column: span 12; }
.bt-tile--tall  { grid-row: span 2; }
@media (max-width: 1080px) { .bt-tile { grid-column: span 6; } .bt-tile--wide, .bt-tile--full { grid-column: span 12; } }
@media (max-width: 620px)  { .bt-tile, .bt-tile--wide { grid-column: span 12; } }

.bt-tile__label  { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3); }
.bt-tile__figure { font-size: var(--bt-size-8); font-variant-numeric: tabular-nums; line-height: 1; color: var(--bt-text); }
.bt-tile__figure--accent { color: var(--bt-accent); }
.bt-tile__unit   { font-family: var(--bt-font-plate); font-size: var(--bt-size-3); color: var(--bt-text-3); margin-left: var(--bt-s1); letter-spacing: 0; }
.bt-tile__foot   { margin-top: auto; font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-text-3); }

/* ---------- Rings & progress ---------------------------------------------- */
.bt-rings { display: flex; gap: var(--bt-gutter-wide); flex-wrap: wrap; }
.bt-ring  { display: flex; flex-direction: column; align-items: center; gap: var(--bt-s2); }
.bt-ring__svg   { display: block; filter: drop-shadow(var(--bt-accent-glow)); }
.bt-ring__track { stroke: var(--bt-line); }
.bt-ring__fill  { stroke: var(--bt-accent); stroke-linecap: round; transition: stroke-dashoffset var(--bt-slow) var(--bt-ease); }
.bt-ring__value { font-family: var(--bt-font-display); font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--bt-text); }
.bt-ring__cap   { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-text-3); text-align: center; max-width: 15ch; }

.bt-meter { height: 6px; background: var(--bt-surface-sunken); border-radius: var(--bt-r-full); overflow: hidden; }
.bt-meter__fill { height: 100%; background: var(--bt-accent); border-radius: inherit; }

.bt-board { display: flex; flex-direction: column; gap: var(--bt-s1); }
.bt-board__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center; gap: var(--bt-gutter-tight);
  padding: var(--bt-s2); border-radius: var(--bt-r-2); font-size: var(--bt-size-4);
}
.bt-board__row--you { background: var(--bt-accent-wash); box-shadow: inset 2px 0 0 var(--bt-accent); }
.bt-board__rank  { font-family: var(--bt-font-display); color: var(--bt-text-3); font-variant-numeric: tabular-nums; }
.bt-board__score { font-family: var(--bt-font-display); font-variant-numeric: tabular-nums; }

/* ---------- Badges & deltas ------------------------------------------------ */
.bt-badge {
  display: inline-flex; align-items: center; gap: var(--bt-s1);
  padding: 2px var(--bt-s2);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  letter-spacing: var(--bt-track-label); text-transform: uppercase;
  border-radius: var(--bt-r-1);
  background: var(--bt-neutral-wash); color: var(--bt-text-2);
  white-space: nowrap;
}
.bt-badge--positive { background: var(--bt-positive-wash); color: var(--bt-positive); }
.bt-badge--warning  { background: var(--bt-warning-wash);  color: var(--bt-warning); }
.bt-badge--critical { background: var(--bt-critical-wash); color: var(--bt-critical); }
.bt-badge--info     { background: var(--bt-info-wash);     color: var(--bt-info); }
.bt-badge--product  { background: var(--bt-accent-wash);   color: var(--bt-accent); }

.bt-delta { font-family: var(--bt-font-display); font-variant-numeric: tabular-nums; font-weight: 600; }
.bt-delta--up   { color: var(--bt-up); }
.bt-delta--down { color: var(--bt-down); }
.bt-delta--flat { color: var(--bt-flat); }

/* ============================================================================
   BUTTON FAMILY — three styles, one geometry
     .bt-btn--ink     dark on light  · the workhorse
     .bt-btn--invert  light on dark  · washes, splashes, dark rails, terminal
     .bt-btn--cta     accent fill    · one per view
   Contrast direction is fixed in every theme by --bt-ink-max/--bt-paper-max.
   ========================================================================== */
.bt-btn {
  --_h: 38px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bt-s2);
  min-height: var(--_h); padding: 0 var(--bt-s4);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-3); font-weight: 600;
  letter-spacing: var(--bt-track-label); text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--bt-r-2);
  cursor: pointer;
  transition: background var(--bt-fast) var(--bt-ease), border-color var(--bt-fast) var(--bt-ease), transform var(--bt-fast) var(--bt-ease);
}
.bt-btn:active { transform: translateY(1px); }
.bt-btn[disabled], .bt-btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }

.bt-btn--ink { background: var(--bt-paper-max); color: var(--bt-ink-max); border-color: var(--bt-ink-soft); }
.bt-btn--ink:hover  { background: color-mix(in oklab, var(--bt-paper-max) 92%, var(--bt-ink-max)); }
.bt-btn--ink:active { background: color-mix(in oklab, var(--bt-paper-max) 86%, var(--bt-ink-max)); }

.bt-btn--invert { background: var(--bt-ink-max); color: var(--bt-paper-max); border-color: var(--bt-paper-soft); }
.bt-btn--invert:hover  { background: color-mix(in oklab, var(--bt-ink-max) 88%, var(--bt-paper-max)); }
.bt-btn--invert:active { background: color-mix(in oklab, var(--bt-ink-max) 80%, var(--bt-paper-max)); }

.bt-btn--cta { background: var(--bt-accent); color: var(--bt-cta-ink); border-color: var(--bt-accent); box-shadow: var(--bt-accent-glow); }
.bt-btn--cta:hover  { background: color-mix(in oklab, var(--bt-accent) 88%, var(--bt-ink-max)); }
.bt-btn--cta:active { background: color-mix(in oklab, var(--bt-accent) 78%, var(--bt-ink-max)); }

.bt-btn--ghost  { background: transparent; color: var(--bt-text-2); border-color: transparent; }
.bt-btn--ghost:hover { background: var(--bt-surface-sunken); color: var(--bt-text); }
.bt-btn--danger { background: transparent; color: var(--bt-critical); border-color: var(--bt-critical); }
.bt-btn--danger:hover { background: var(--bt-critical-wash); }
.bt-btn--sm { --_h: 28px; padding: 0 var(--bt-s3); font-size: var(--bt-size-2); }
.bt-btn--lg { --_h: 48px; padding: 0 var(--bt-s6); font-size: var(--bt-size-4); }
.bt-btn--icon  { padding: 0; width: var(--_h); }
.bt-btn--block { display: flex; width: 100%; }
.bt-btn--loading { color: transparent; position: relative; pointer-events: none; }
.bt-btn--loading::after {
  content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: bt-spin 700ms linear infinite;
}
.bt-btn--loading.bt-btn--ink::after    { border-color: var(--bt-ink-max); border-top-color: transparent; }
.bt-btn--loading.bt-btn--invert::after { border-color: var(--bt-paper-max); border-top-color: transparent; }
.bt-btn--loading.bt-btn--cta::after    { border-color: var(--bt-cta-ink); border-top-color: transparent; }
@keyframes bt-spin { to { transform: rotate(360deg); } }

.bt-btn-group { display: inline-flex; }
.bt-btn-group .bt-btn { border-radius: 0; margin-left: -1px; }
.bt-btn-group .bt-btn:first-child { border-radius: var(--bt-r-2) 0 0 var(--bt-r-2); margin-left: 0; }
.bt-btn-group .bt-btn:last-child  { border-radius: 0 var(--bt-r-2) var(--bt-r-2) 0; }

/* ============================================================================
   THEME SWITCH — one control, three options, in brightness order.
   A radiogroup: only one can be true, and arrow keys move between them. Each
   option carries a literal swatch of the palette it selects — the only
   literals in this stylesheet, and literal on purpose, since a swatch must
   show the theme you are switching TO.
   ========================================================================== */
.bt-themeswitch {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--bt-surface-sunken);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-r-2);
}
.bt-themeswitch__opt {
  display: inline-flex; align-items: center; gap: var(--bt-s2);
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  color: var(--bt-text-3);
  padding: var(--bt-s1) var(--bt-s3); border-radius: var(--bt-r-1);
  transition: background var(--bt-fast) var(--bt-ease), color var(--bt-fast) var(--bt-ease);
}
.bt-themeswitch__opt::before {
  content: ""; width: 11px; height: 11px; border-radius: var(--bt-r-full);
  border: 1px solid var(--bt-line-strong); flex: none;
}
.bt-themeswitch__opt[value="light"]::before   { background: #F4F5F4; }
.bt-themeswitch__opt[value="comfort"]::before { background: #121719; }
.bt-themeswitch__opt[value="dark"]::before    { background: #000406; }
.bt-themeswitch__opt:hover { color: var(--bt-text-2); }
/* The live option. Marked the same whether the visitor chose it or it was
   resolved from the OS — the switch reports the mode, not its provenance.
   The :root arms paint it on the first frame: the no-flash snippet in the head
   has already set data-theme, so the mark does not wait for the controller. */
.bt-themeswitch__opt[aria-checked="true"],
:root[data-theme="light"]   .bt-themeswitch__opt[value="light"],
:root[data-theme="comfort"] .bt-themeswitch__opt[value="comfort"],
:root[data-theme="dark"]    .bt-themeswitch__opt[value="dark"],
:root:not([data-theme])     .bt-themeswitch__opt[value="light"] { background: var(--bt-surface); color: var(--bt-text); box-shadow: var(--bt-shadow-1); }
/* No data-theme at all (scripting off, no server-side mode): fall back to the
   OS the same way the token sheet does, so the mark still agrees with the page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bt-themeswitch__opt[value="light"]   { background: transparent; color: var(--bt-text-3); box-shadow: none; }
  :root:not([data-theme]) .bt-themeswitch__opt[value="comfort"] { background: var(--bt-surface); color: var(--bt-text); box-shadow: var(--bt-shadow-1); }
}
.bt-themeswitch__opt:focus-visible { box-shadow: var(--bt-focus-ring); }
.bt-themeswitch--icons .bt-themeswitch__opt { padding: var(--bt-s1) var(--bt-s2); gap: 0; }
.bt-themeswitch--icons .bt-themeswitch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.bt-themebar { display: inline-flex; align-items: center; gap: var(--bt-gutter-tight); }

/* ---------- Fields --------------------------------------------------------- */
.bt-field { display: flex; flex-direction: column; gap: var(--bt-s1); }
.bt-field__label { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-2); }
.bt-input {
  min-height: 38px; padding: 0 var(--bt-s3);
  background: var(--bt-surface-inset); color: var(--bt-text);
  border: var(--bt-border) solid var(--bt-line-strong); border-radius: var(--bt-r-1);
  font-family: var(--bt-font-ui); font-size: var(--bt-size-4);
}
.bt-input--num { font-family: var(--bt-font-display); font-variant-numeric: tabular-nums; text-align: right; }
.bt-field__help  { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-text-3); }
.bt-field__error { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-critical); }

/* ---------- Tables & the exchange ----------------------------------------- */
.bt-table-wrap { overflow-x: auto; border: var(--bt-border) solid var(--bt-line); border-radius: var(--bt-r-2); }
.bt-table { width: 100%; border-collapse: collapse; font-size: var(--bt-size-3); }
.bt-table th {
  position: sticky; top: 0;
  background: var(--bt-surface-sunken); color: var(--bt-text-3);
  font-family: var(--bt-font-plate); font-weight: 600; font-size: var(--bt-size-2);
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  text-align: left; padding: var(--bt-s2) var(--bt-s3); white-space: nowrap;
}
.bt-table td { padding: 0 var(--bt-s3); height: var(--bt-row-h); border-top: var(--bt-border) solid var(--bt-line); color: var(--bt-text-2); }
.bt-table td.bt-td-num { font-family: var(--bt-font-display); font-variant-numeric: tabular-nums; text-align: right; color: var(--bt-text); font-size: var(--bt-size-4); }
.bt-table tbody tr:hover td { background: var(--bt-accent-wash); }

.bt-ladder { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bt-gutter); }
.bt-ladder__col { display: flex; flex-direction: column; gap: 1px; }
.bt-ladder__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: var(--bt-s1) var(--bt-s2);
  font-family: var(--bt-font-display); font-variant-numeric: tabular-nums;
  font-size: var(--bt-size-4);
  background-repeat: no-repeat; background-position: right center;
}
.bt-ladder__row--bid   { color: var(--bt-up);   background-image: linear-gradient(var(--bt-up-wash), var(--bt-up-wash)); }
.bt-ladder__row--offer { color: var(--bt-down); background-image: linear-gradient(var(--bt-down-wash), var(--bt-down-wash)); background-position: left center; }
.bt-ladder__qty { font-family: var(--bt-font-plate); color: var(--bt-text-2); }
.bt-ticker { font-variant-numeric: tabular-nums; font-size: var(--bt-size-10); }

/* ---------- Panels, lists, splash ----------------------------------------- */
.bt-panel { background: var(--bt-surface); border: var(--bt-border) solid var(--bt-line); border-radius: var(--bt-r-2); padding: var(--bt-pad-panel); }
.bt-list  { display: flex; flex-direction: column; }
.bt-list__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--bt-gutter-tight); align-items: start;
  padding: var(--bt-s3) 0; border-top: var(--bt-border) solid var(--bt-line);
}
.bt-list__item:first-child { border-top: 0; }
.bt-list__title { font-weight: 500; color: var(--bt-text); }
.bt-list__meta  { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); color: var(--bt-text-3); }
.bt-list__item--unread { box-shadow: inset 2px 0 0 var(--bt-accent); padding-left: var(--bt-s3); }
.bt-avatar {
  width: 28px; height: 28px; border-radius: var(--bt-r-full); flex: none;
  display: grid; place-items: center;
  background: var(--bt-accent-wash); color: var(--bt-accent);
  font-family: var(--bt-font-display); font-size: var(--bt-size-3); font-weight: 600;
}

.bt-splash {
  position: relative; overflow: hidden;
  border-radius: var(--bt-r-3);
  padding: var(--bt-rhythm) var(--bt-pad-panel);
  background: var(--bt-accent-wash);
  border: var(--bt-accent-weight) solid color-mix(in oklab, var(--bt-accent) 44%, var(--bt-line));
  display: flex; flex-direction: column; gap: var(--bt-gutter-tight);
}
.bt-splash__kicker { color: var(--bt-accent); }

/* ---------- Six-column footer --------------------------------------------- */
.bt-footer { border-top: var(--bt-border) solid var(--bt-line); background: var(--bt-surface); padding-block: var(--bt-rhythm); }
.bt-footer__cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--bt-gutter-wide); }
@media (max-width: 1000px) { .bt-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .bt-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bt-footer__col  { display: flex; flex-direction: column; gap: var(--bt-s2); }
.bt-footer__head { font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 600; text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3); }
.bt-footer__link { font-size: var(--bt-size-3); color: var(--bt-text-2); text-decoration: none; }
.bt-footer__link:hover { color: var(--bt-text); text-decoration: underline; }

/* ---------- Document surface ---------------------------------------------- */
.bt-document { font-family: var(--bt-font-doc); font-size: var(--bt-size-5); line-height: var(--bt-lh-relaxed); color: var(--bt-text); max-width: var(--bt-max-doc); }
.bt-document__masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--bt-gutter-wide); padding-bottom: var(--bt-s3); border-bottom: 2px solid var(--bt-text); }
.bt-document__meta { font-family: var(--bt-font-display); font-size: var(--bt-size-3); font-variant-numeric: tabular-nums; color: var(--bt-text-2); text-align: right; }

/* ---------- Print ---------------------------------------------------------- */
@media print {
  :root, :root[data-theme="light"], :root[data-theme="comfort"], :root[data-theme="dark"], .bt-terminal {
    --bt-ground: #FFFFFF; --bt-surface: #FFFFFF; --bt-surface-sunken: #F2F3F2;
    --bt-surface-inset: #FFFFFF;
    --bt-line: #C9CFCD; --bt-line-strong: #8B9694;
    --bt-text: #000000; --bt-text-2: #333B39; --bt-text-3: #5A6664;
    --bt-the-edit: #9A4C13; --bt-ravaki: #4C3B9E; --bt-tejaki: #205838;
    --bt-vedoki: #204B87; --bt-soa: #8C3232; --bt-blowtrumpet: #22626A;
    --bt-accent-glow: 0 0 0 0 transparent;
    --bt-accent-weight: 1px;
    --bt-air: 1;
    color-scheme: light;
  }
  body { background: #FFFFFF; font-size: 10.5pt; }
  .bt-document { font-size: 10.5pt; max-width: none; }
  .bt-tile, .bt-panel { box-shadow: none; break-inside: avoid; }
  .bt-btn { background: transparent !important; color: #000 !important; border-color: #8B9694 !important; }
  .bt-themebar, .bt-themeswitch, .bt-no-print { display: none !important; }
  .bt-plate { border-color: #000; background: #fff; }
  .bt-table thead { display: table-header-group; }
  .bt-table tr { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #5A6664; }
  @page { margin: 18mm 16mm; }
}

/* ---------- Forms: submission feedback ----------------------------------- */
/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything explicitly hidden; aria-hidden on the wrapper keeps it away from
   screen readers, who would otherwise fill it in and be silently rejected. */
.t1-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.t1-formnotice { margin: 0 0 var(--bt-gutter); padding: var(--bt-s3) var(--bt-s4); border: 1px solid var(--bt-line); border-left-width: 3px; border-radius: var(--bt-r-2); background: var(--bt-surface); }
.t1-formnotice p { margin: 0; font-size: var(--bt-size-3); color: var(--bt-text); }
.t1-formnotice:focus { outline: none; box-shadow: var(--bt-focus-ring); }
.t1-formnotice--ok { border-left-color: var(--bt-accent); }
.t1-formnotice--warn { border-left-color: var(--bt-accent-alt, var(--bt-accent)); }
.t1-formnotice--error { border-left-color: var(--bt-danger, #B3261E); }

.bt-field__error { display: block; margin-top: var(--bt-s1); font-family: var(--bt-font-plate); font-size: var(--bt-size-1); color: var(--bt-danger, #B3261E); }
.t1-plate-field__input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--bt-danger, #B3261E); }

/* ---------- Embedded third-party forms ------------------------------------
   Styled by element, not by any plugin's class names: what is inside this
   wrapper belongs to someone else's release cycle. The selectors are specific
   enough to beat a plugin's own stylesheet without !important, and shallow
   enough to survive it being rewritten.
   ------------------------------------------------------------------------ */
.t1-embed { margin: 0 0 var(--bt-gutter); }
.t1-embed form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--bt-s3); margin: 0; }

.t1-embed label { display: block; font-family: var(--bt-font-plate); font-size: var(--bt-size-1); font-weight: 600; text-transform: uppercase; letter-spacing: var(--bt-track-label); color: var(--bt-text-3); }

.t1-embed input[type="text"],
.t1-embed input[type="email"],
.t1-embed input[type="search"],
.t1-embed input[type="tel"],
.t1-embed input[type="number"],
.t1-embed select,
.t1-embed textarea {
  display: block; width: 100%; max-width: 28rem; margin-top: var(--bt-s1);
  padding: var(--bt-s2) var(--bt-s3);
  font: inherit; font-family: var(--bt-font-plate); font-size: var(--bt-size-3);
  letter-spacing: var(--bt-track-label); text-transform: uppercase;
  color: var(--bt-text); background: var(--bt-surface);
  border: 1px solid var(--bt-line-strong); border-radius: var(--bt-r-1);
}
.t1-embed textarea { text-transform: none; letter-spacing: normal; min-height: 7rem; }
.t1-embed input:focus-visible,
.t1-embed select:focus-visible,
.t1-embed textarea:focus-visible { outline: none; box-shadow: var(--bt-focus-ring); }

.t1-embed button,
.t1-embed input[type="submit"],
.t1-embed input[type="button"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--bt-s2) var(--bt-s4);
  font-family: var(--bt-font-plate); font-size: var(--bt-size-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--bt-track-label);
  color: var(--plate-black, #000406); background: var(--bt-accent);
  border: 0; border-radius: var(--bt-r-1); cursor: pointer;
  transition: filter var(--bt-fast) var(--bt-ease);
}
.t1-embed button:hover,
.t1-embed input[type="submit"]:hover { filter: brightness(1.08); }

/* Whatever the plugin says back. Most write it as a paragraph or a div after
   the form; give anything at that level the panel treatment. */
.t1-embed form + p,
.t1-embed form + div,
.t1-embed > p:not(:first-child),
.t1-embed .t1-embed__result {
  margin-top: var(--bt-gutter-tight); padding: var(--bt-s3) var(--bt-s4);
  background: var(--bt-surface-sunken); border-left: 3px solid var(--bt-accent);
  border-radius: var(--bt-r-1); font-size: var(--bt-size-3); color: var(--bt-text);
}

.t1-embed--missing p { margin: 0; padding: var(--bt-s3) var(--bt-s4); border: 1px dashed var(--bt-line-strong); border-radius: var(--bt-r-1); color: var(--bt-text-3); font-size: var(--bt-size-2); }

.t1-verify__label { display: block; margin: 0 0 var(--bt-s1); }