.tedee096-finishes { display: flex; gap: 8px; flex-wrap: wrap; padding-block: 10px; }
.tedee096-finishes button { min-inline-size: 44px; min-block-size: 48px; padding: 5px;
  border: 1px solid transparent; border-radius: 3px; background: none; color: var(--ink); cursor: pointer; }
.tedee096-finishes button[aria-pressed="true"] { border-color: var(--ink); }
.tedee096-finishes button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tedee096-finishes bdi { font-size: 10px; }
.tedee096-status:empty { display: none; }
.tedee096-preview { min-block-size: 44px; padding-inline: 12px; border: 1px solid var(--line);
  border-radius: 3px; background: none; color: var(--ink); cursor: pointer; }
.tedee096-preview:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tedee096-preview:disabled { opacity: .55; cursor: default; }

@media (max-width: 720px), (max-width: 1024px) and (orientation: portrait) {
  /* The tab's own heading (owner: "missing a proper heading within the tab itself"), compact above the two rows. */
  :root[data-step="4"] .proto-qrow { padding-block-start: 4px; }
  :root[data-step="4"] h2.q { font-size: 16px; font-weight: 600; line-height: 1.2; }
  /* HX2-MOBILE-LOCK-154 two rows (owner: "we have more room for two rows in there"); round 155 hierarchy (owner: "the
     hiererchy of this tab is still meh"): each row is a small grid, its label read horizontally above the cards
     (row 1 of the grid, column 1) and the cards, plus an active Tedee's controls after its card, in row 2. Each row
     is still its own sideways rail. The heading costs ~24 px, paid back by the 12 px label and card text line boxes and the
     body padding: both rows, labels and heading fit the 375 x 667 sheet. */
  :root[data-step="4"] #body { display: flex; flex-direction: column; gap: 8px; padding-block: 3px 0; }
  :root[data-step="4"] #body > .rows, :root[data-step="4"] .tedee096 {
    display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: max-content;
    justify-content: start; align-items: start; gap: 4px 8px; margin: 0 -16px; padding: 0 16px; border: 0;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
  :root[data-step="4"] #body > .rows::-webkit-scrollbar, :root[data-step="4"] .tedee096::-webkit-scrollbar { display: none; }
  :root[data-step="4"] .tedee096-item { display: contents; }
  :root[data-step="4"] #body > .rows > .cat, :root[data-step="4"] .tedee096 > .cat { display: block; grid-row: 1; grid-column: 1;
    margin: 0; padding-inline-start: 2px; font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; }
  :root[data-step="4"] .xrow {
    grid-row: 2; flex-direction: column; justify-content: center; gap: 1px;
    inline-size: 100px; min-inline-size: 0; min-block-size: 76px; padding: 5px;
    text-align: center; order: 0; scroll-snap-align: start;
  }
  :root[data-step="4"] .xrow img { inline-size: 32px; block-size: 32px; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / .28)); }
  :root[data-step="4"] .xrow .t { flex: none; gap: 1px; line-height: 1.2; }
  :root[data-step="4"] .xrow b { font-size: 13px; font-weight: 600; }
  :root[data-step="4"] .xrow .sub { font-size: 11px; }
  :root[data-step="4"] .xrow .box {
    position: absolute; inset-block-start: 6px; inset-inline-start: 6px;
    inline-size: 16px; block-size: 16px; border-color: rgb(107 104 99 / .45);
  }
  :root[data-step="4"] .xrow[aria-checked="true"] .box { border-color: var(--ink); }
  :root[data-step="4"] .tedee096-controls:not([hidden]) {
    /* Swatches and the preview side by side: stacked they outgrew the card row once the tab gained its heading. */
    grid-row: 2; display: flex; flex-flow: row wrap; align-items: center; align-content: center;
    gap: 2px 8px; min-block-size: 76px; padding-inline-start: 8px; border-inline-start: 1px solid var(--line);
  }
  :root[data-step="4"] .tedee096-controls[hidden] { display: none; }
  :root[data-step="4"] .tedee096:has([data-tedee-toggle="lock"][aria-checked="true"]):has([data-tedee-toggle="keypad"][aria-checked="true"]) .tedee096-controls::before {
    content: attr(aria-label); flex-basis: 100%; font-size: 12px; color: var(--ink-2);
  }
  :root[data-step="4"] .tedee096-finishes { padding: 0; gap: 2px; }
  :root[data-step="4"] .tedee096-finishes button { min-block-size: 44px; }
  :root[data-step="4"] .tedee096-finishes .xvar i {
    inline-size: 20px; block-size: 20px; border-radius: 50%;
  }
  :root[data-step="4"] .tedee096-finishes button[aria-pressed="true"] { border-color: transparent; }
  :root[data-step="4"] .tedee096-finishes button[aria-pressed="true"] i {
    box-shadow: 0 0 0 1.5px var(--ink);
  }
  :root[data-step="4"] .tedee096-preview { font-size: 12px; padding-inline: 8px; }
  :root[data-step="4"] .note { font-size: 11px; line-height: 1.45; margin-block: 4px; }
  :root[data-step="4"] .tedee096-controls > .note { flex-basis: 100%; }
  :root[data-step="4"] [data-tedee-demo-status]:empty { display: none; }
}