/* =============================================================================
   areas/onboarding.css: the wizard layout (.wiz-*, .wiz) and the setup steps
   (.onb-*, .door, .grid-res). Loaded on every page by the head partial; every
   selector is prefixed so nothing leaks into other screens.
   Enrollment part 2 (2026-10-27): six named steps, the saved building drawn
   beside every step (a sticky sheet from 64rem, a compact drawing above the
   title on phones), white sheets on the canvas with the card shadow, no box
   outlines, controls with a 1.5 px edge.
   ========================================================================== */
@layer areas {

/* ---------------------------------------------------------------- layout */
.wiz-body { min-height: 100vh; min-height: 100dvh; background: var(--color-canvas); }
.wiz-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--topbar-h); padding: var(--space-2) var(--gutter);
  background: var(--color-canvas); border-bottom: 0;
}
.wiz-top__brand { display: inline-flex; color: var(--color-brand); }
.wiz-top__logo { display: block; height: 1.5rem; width: auto; aspect-ratio: 10000 / 2446; }
.wiz-top__end { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--space-1) var(--space-2); }

.wiz-steps { max-width: 76rem; margin: 0 auto; padding: var(--space-3) var(--gutter) 0; }
.wiz-steps__count { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text); }
.wiz-steps__current { color: var(--color-text); }
/* phones: the text line plus six short segments, no percentage */
.wiz-steps__bar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .375rem; margin: var(--space-2) 0 0; padding: 0; list-style: none; max-width: 24rem; }
.wiz-seg { height: 6px; border-radius: 3px; background: var(--color-surface-sunken); }
.wiz-seg--done { background: var(--color-action); }
.wiz-seg--current { background: linear-gradient(to right, var(--color-action) 50%, var(--color-surface-sunken) 50%); }
.wiz-steps__list { display: none; margin: var(--space-3) 0 0; padding: 0; list-style: none; gap: var(--space-1) var(--space-2); }
@media (min-width: 48rem) {
  .wiz-steps__count, .wiz-steps__bar { display: none; }
  .wiz-steps__list { display: flex; flex-wrap: wrap; }
}
.wiz-step__link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h-min); padding: 0 var(--space-3) 0 var(--space-1);
  border-radius: var(--radius-control); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm);
}
a.wiz-step__link:hover .wiz-step__label { text-decoration: underline; }
.wiz-step__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 8px; font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  border: 0; font-weight: var(--weight-bold); font-size: var(--text-sm);
  background: var(--color-surface-sunken); color: var(--color-text-muted);
}
.wiz-step__mark .icon { width: 1.125rem; height: 1.125rem; }
.wiz-step--done .wiz-step__link { color: var(--color-text); }
.wiz-step--done .wiz-step__mark { background: var(--color-action); color: var(--color-on-action); }
.wiz-step--current .wiz-step__link { color: var(--color-text); font-weight: var(--weight-bold); background: var(--color-surface-selected); }
.wiz-step--current .wiz-step__mark { background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-action); color: var(--color-action); }

.wiz-main { max-width: 48rem; margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-8); }
.wiz-main:focus { outline: none; }
.wiz-main .banners:empty { display: none; }
.wiz__content { min-width: 0; }
/* the building beside the step: above the title on phones, a sticky sheet from 64rem */
.wiz--draw { display: flex; flex-direction: column; gap: var(--space-4); }
.wiz--draw .wiz__side { order: -1; min-width: 0; }
.wiz__side .facade { margin: 0; }
@media (min-width: 64rem) {
  .wiz--draw { max-width: 76rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); gap: var(--space-7); align-items: start; }
  .wiz--draw .wiz__side { order: 0; }
  .wiz__sticky { position: sticky; top: var(--space-5); }
}
/* phones: the help link keeps its icon, its word stays for screen readers */
@media (max-width: 30rem) {
  .wiz-top__help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* toasts at the top on phones, never over the answer buttons */
@media (max-width: 56.24rem) {
  .wiz-body #toasts { top: calc(var(--space-3) + env(safe-area-inset-top)); bottom: auto; }
}
@media (min-width: 56.25rem) {
  .wiz-body #toasts { left: auto; right: var(--gutter); top: auto; bottom: var(--space-5); }
}

/* ---------------------------------------------------------------- common */
html.js .onb-nojs { display: none; }
.onb-card { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-5); }
@media (max-width: 36rem) { .onb-card { padding: var(--space-4); } }
.onb-form + .onb-form { margin-top: var(--space-4); }
.onb-fieldset { margin: 0 0 var(--space-5); padding: 0; border: 0; min-width: 0; }
.onb-fieldset + .onb-fieldset { padding-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); }
.onb-fieldset__legend { margin-bottom: var(--space-3); padding: 0; font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.field__optional { font-weight: var(--weight-regular); color: var(--color-text-muted); }
.onb-pair { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30rem) { .onb-pair { grid-template-columns: max-content minmax(0, 1fr); } }
.onb-pair .field { max-width: none; }
.onb-input--short { max-width: 10rem; }
.onb-input--mid { max-width: 18rem; }
.onb-legal { margin-top: var(--space-6); }
.onb-note { margin-top: var(--space-3); max-width: var(--measure); }
.onb-line { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 0; max-width: var(--measure); color: var(--color-text); }
.onb-line > .icon { flex: none; margin-top: .15em; color: var(--color-action); }
.wiz .joel { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.wiz .joel__img { flex: none; width: 4rem; height: 4rem; border-radius: var(--radius-control); object-fit: cover; background: var(--color-surface-sunken); }
.wiz .joel__body { min-width: 0; }
.wiz .joel__text { margin: 0; line-height: 1.5; }
.wiz .joel__mail { margin: var(--space-1) 0 0; font-weight: var(--weight-semibold); }
.wiz .joel__mail a { display: inline-flex; align-items: center; min-height: var(--control-h-min); }
.onb-joel { margin-top: var(--space-6); }
.onb-joel--door { margin: 0; padding: 0; box-shadow: none; background: transparent; }

/* ---------------------------------------------------------------- Kuka olet? (legacy) */
.onb-roles { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .onb-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onb-role, .onb-answer {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  width: 100%; margin: 0; padding: var(--space-5);
  text-align: left; font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--color-surface); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); min-height: 72px;
  transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.onb-role:hover, .onb-answer:hover { box-shadow: inset 0 0 0 2px var(--color-action), var(--shadow-card); }
.onb-role:focus-visible, .onb-answer:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.onb-role[aria-busy="true"], .onb-answer[aria-busy="true"], .onb-role[aria-pressed="true"], .onb-answer[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-action), var(--shadow-card); }
.onb-role { min-height: 10rem; }
.onb-role__icon { width: 2.25rem; height: 2.25rem; color: var(--color-action); }
.onb-role__title, .onb-answer__title { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.onb-role__desc, .onb-answer__hint { font-size: var(--text-base); color: var(--color-text-2); }
.onb-role__chosen { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-action); }

/* ---------------------------------------------------------------- Talo */
.onb-types { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.onb-buildings { margin-bottom: var(--space-4); }
.onb-buildings__icon { width: 1.5rem; height: 1.5rem; color: var(--color-action); }
.onb-more { margin-top: var(--space-5); }
.onb-more__summary, .onb-change__summary {
  display: inline-flex; align-items: center; min-height: var(--control-h-min); cursor: pointer;
  color: var(--color-link); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px;
}
.onb-more[open] > .onb-more__summary { margin-bottom: var(--space-3); }
.onb-sum { margin: 0 0 var(--space-1); }
.onb-sum__text { margin: 0; font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.onb-change { margin: 0 0 var(--space-4); }
.onb-change[open] > .onb-change__summary { margin-bottom: var(--space-3); }
.onb-change__body { padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border-subtle); }
.onb-numbering { margin: 0 0 var(--space-5); }
.onb-numbering[hidden] { display: none; }
.onb-talo__save { margin: 0 0 var(--space-3); }
.onb-edit { margin-top: var(--space-2); }
.onb-edit[open] > .onb-change__summary { margin-bottom: var(--space-3); }
.onb-edit__body { padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.onb-areas { margin: 0 0 var(--space-5); }
.onb-preview { margin-top: var(--space-4); }
.onb-preview[hidden] { display: none; }
.onb-units td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.onb-units__input { min-height: var(--control-h-min); width: 100%; max-width: 10rem; }
.onb-dup { margin: 0 0 var(--space-3); max-width: var(--measure); }
.onb-dup[hidden], .onb-units__dup[hidden] { display: none; }
.onb-units__dup {
  display: flex; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-1);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--status-problem-fg);
}
.onb-units__dup .icon { width: 1rem; height: 1rem; flex: none; margin-top: .15em; }
[data-onb-only][hidden] { display: none !important; }
@supports selector(:has(*)) {
  .onb-talo:not(:has([data-onb-type][value="kerrostalo"]:checked)) [data-onb-only~="kerrostalo"] { display: none; }
  .onb-talo:not(:has([data-onb-type][value="rivitalo"]:checked)):not(:has([data-onb-type][value="paritalo"]:checked)):not(:has([data-onb-type][value="omakotitalo"]:checked)) [data-onb-only~="rivitalo"] { display: none; }
  .onb-talo:not(:has([data-onb-type][value="omakotitalo"]:checked)) [data-onb-only="omakotitalo"] { display: none; }
}
/* house rows (ENR-32): the name field takes the room a number does not need */
.onb-units__input.onb-units__name { max-width: 22rem; }
.wiz-draw .facade { margin: 0; }

/* ---------------------------------------------------------------- Varoittimet */
.onb-answers { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
.onb-answer { padding: var(--space-4) var(--space-5); min-height: var(--control-h-lg); }
.onb-need-more {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); max-width: var(--measure);
  background: var(--status-attn-bg); color: var(--status-attn-fg); border: 0; border-radius: var(--radius-card);
}
.onb-need-more .icon { flex: none; margin-top: .1em; }
.onb-notes { margin-top: var(--space-6); }
.onb-private { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; max-width: var(--measure); font-weight: var(--weight-semibold); }
.onb-private .icon { flex: none; margin-top: .15em; color: var(--color-action); }

/* ---------------------------------------------------------------- Asukkaat */
.onb-counter { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.onb-counter .icon { color: var(--color-action); margin-top: .1em; flex: none; }
/* four doors: full-width rows of equal weight, one opens in place */
.doors { margin: 0 0 var(--space-6); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.door + .door { border-top: 1px solid var(--color-border-subtle); }
.door__summary {
  display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  min-height: 72px; cursor: pointer; list-style: none;
}
.door__summary::-webkit-details-marker { display: none; }
.door__summary:hover { background: var(--color-surface-sunken); }
.door__summary:focus-visible { outline: var(--focus-ring); outline-offset: calc(var(--focus-offset) * -1 - 3px); }
.door[open] > .door__summary { background: var(--color-surface-selected); }
.door__icon { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1em; color: var(--color-action); }
.door__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.door__title { font-family: var(--font-heading); font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.door__desc { color: var(--color-text-2); line-height: 1.5; }
.door__chev { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .3em; color: var(--color-text-2); transition: transform var(--dur-fast) var(--ease-out); }
.door[open] .door__chev { transform: rotate(180deg); }
.door__body { padding: var(--space-4) var(--space-5) var(--space-5); }
@media (max-width: 36rem) { .door__summary, .door__body { padding-left: var(--space-4); padding-right: var(--space-4); } }
.door__form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.door__form .field { width: 100%; max-width: none; margin: 0; }
/* the isännöitsijä's CSV-file route under the paste form (QA 2026-10-27) */
.door__alt { margin: var(--space-4) 0 0; display: flex; align-items: center; min-height: var(--control-h-min); font-weight: var(--weight-semibold); }
.onb-paste { width: 100%; min-height: 12rem; font-variant-numeric: tabular-nums; }
.door__joel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
/* the typing grid: label · name · email; one block per apartment on phones */
.grid-res { width: 100%; display: grid; gap: 0; }
.grid-res__head { display: none; }
.grid-res__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-subtle); }
.grid-res__row:first-of-type { border-top: 0; }
.grid-res__apt { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.grid-res__cell { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.grid-res__cell .input { width: 100%; }
.grid-res__lbl { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.grid-res__known { overflow-wrap: anywhere; }
.grid-res__row--err { background: var(--status-problem-bg); margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius-tile); }
@media (min-width: 40rem) {
  .grid-res__head, .grid-res__row { grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-3); align-items: center; }
  /* house names (ENR-32) get a wider first column and wrap inside it */
  .grid-res--houses .grid-res__head, .grid-res--houses .grid-res__row { grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1.2fr); }
  .grid-res__apt { overflow-wrap: anywhere; }
  .grid-res__head { display: grid; padding: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
  .grid-res__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .grid-res__row--done .grid-res__known { grid-column: 2 / -1; }
}
/* the data-protection panel, the notice and the email rows */
.onb-panel { margin: 0 0 var(--space-5); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface-sunken); }
.onb-panel__title { margin: 0 0 var(--space-3); font-size: var(--text-md); }
.onb-panel p { margin: 0 0 var(--space-2); max-width: var(--measure); }
.onb-panel p:last-child { margin-bottom: 0; }
.onb-rows { margin: 0 0 var(--space-6); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.onb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); }
.onb-row + .onb-row { border-top: 1px solid var(--color-border-subtle); }
.onb-row--stack { flex-direction: column; align-items: stretch; }
.onb-row--stack .onb-row__text { flex: none; }
.onb-row__text { flex: 1 1 18rem; min-width: 0; }
.onb-row__title { margin: 0; font-size: var(--text-md); }
.onb-row__desc { margin: .25rem 0 0; color: var(--color-text-2); }
.onb-mail { margin: 0; }
.onb-mail .email-preview__summary { margin-left: 0; }

/* ---------------------------------------------------------------- Testauspyyntö */
.onb-sum-list { list-style: none; margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3);
  background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.onb-sum-list:empty { display: none; }
.onb-sum-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: 1.35; }
.onb-sum-list__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-action); margin-top: .05em; }
.onb-self__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.onb-self__check { max-width: 36rem; }
.onb-self__apt { margin-top: var(--space-3); }
@supports selector(:has(*)) { .onb-self:not(:has(#self-check:checked)) .onb-self__apt { display: none; } }
.onb-send__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-6); }
.onb-send__actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
@media (min-width: 40rem) { .onb-send__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 42rem; } }

/* ---------------------------------------------------------------- Testauspyyntö lähti */
.onb-own { margin: 0 0 var(--space-5); }
.onb-own__title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.onb-own p { margin: 0 0 var(--space-2); max-width: var(--measure); }
.onb-own__state { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0 !important; font-weight: var(--weight-semibold); }
.onb-own__state--done { color: var(--status-ok-fg); }
.onb-plan { margin: 0 0 var(--space-5); }
.onb-plan__list { margin: var(--space-3) 0 0; padding: 0; list-style: none; background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.onb-plan__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-4) var(--space-5); font-variant-numeric: tabular-nums; }
.onb-plan__list li + li { border-top: 1px solid var(--color-border-subtle); }
.onb-plan__list li > span { flex: 1 1 18rem; min-width: 0; }
.onb-kit { margin-bottom: var(--space-5); }
.onb-sent__actions { margin-top: var(--space-5); }


/* ---------------------------------------------------------------- Tarkista talot (talot spec 4.1)
   The buildings list: one row per kerrostalo / rivitalo with the type's tile
   art, its name, ":type · :range" and its own homes (and rappus) fields;
   paritalot and houses one row each. At ≤ 36 rem the fields wrap under the name. */
.onb-blist { margin: 0 0 var(--space-5); padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border-subtle); }
.onb-blist__title { margin: 0 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.onb-blist__rows { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.onb-b {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-control); background: var(--color-surface-sunken, var(--color-canvas));
}
.onb-b__art { width: 3.25rem; height: 2rem; display: block;
  --td-b: var(--draw-ground); --td-r: var(--draw-type-roof); --td-w: var(--draw-wait-fill); --td-g: var(--draw-ground); }
.onb-b__svg { display: block; width: 3.25rem; height: 2rem; }
.onb-b__svg .b { fill: var(--td-b); } .onb-b__svg .r { fill: var(--td-r); } .onb-b__svg .w { fill: var(--td-w); } .onb-b__svg .g { fill: var(--td-g); }
.onb-b__main { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.onb-b__name { font-weight: var(--weight-semibold); line-height: 1.3; overflow-wrap: anywhere; }
.onb-b__meta { font-size: var(--text-sm); color: var(--color-text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* two fixed columns, so "Asuntoja" is always the first column, also in a row without rappus */
.onb-b__fields { display: grid; grid-template-columns: 5rem 5rem; gap: var(--space-3); }
.onb-b__field { display: flex; flex-direction: column; gap: .25rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.onb-b__input { width: 5rem; font-variant-numeric: tabular-nums; }
@container (max-width: 36rem) {
  .onb-b { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .onb-b__fields { grid-column: 2; }
}
@media (max-width: 36rem) {
  .onb-b { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .onb-b__fields { grid-column: 2; }
}
.onb-floors { margin: 0 0 var(--space-5); }
.onb-floors .choices__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.onb-floors .choice { flex: 1 1 12rem; }
.onb-units__head th {
  padding: var(--space-4) var(--space-3) var(--space-2); text-align: left; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--color-text); border-bottom: 1px solid var(--color-border-subtle); background: transparent;
}
}