/* S1 core components. Every selector starts with .s1- ; nothing here styles an element or a legacy class.
 * Tokens live in s1-tokens.css. Reference: docs/design/1.0-mockups/s1-components.html */

.s1-panel { background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); font: var(--s1-text-base)/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-panel-head { display: flex; justify-content: space-between; align-items: center; padding: var(--s1-space-3) 18px; border-bottom: 1px solid var(--s1-line-soft); background: var(--s1-panel-head); border-radius: var(--s1-radius-panel) var(--s1-radius-panel) 0 0; font: 700 15.5px var(--s1-font-display); }
.s1-panel-head a, .s1-panel-link { font: 600 var(--s1-text-small) var(--s1-font-ui); color: var(--s1-mute); text-decoration: none; }
.s1-panel-body { padding: 14px 18px; }

.s1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--s1-radius-control); padding: 9px 16px; background: var(--s1-ink); color: var(--s1-on-ink); font: 700 14px var(--s1-font-ui); cursor: pointer; }
.s1-btn:hover { background: var(--s1-ink-hover); }
.s1-btn:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1-btn[disabled] { opacity: .5; cursor: default; }
.s1-btn--ghost { background: var(--s1-panel); color: var(--s1-ink); border: 1px solid var(--s1-line); padding: 8px 14px; font-weight: 600; }
.s1-btn--ghost:hover { background: var(--s1-panel-head); }
.s1-btn--small { padding: 6px 12px; font-size: var(--s1-text-small); }

.s1-status-line { display: flex; align-items: center; gap: var(--s1-space-3); background: var(--s1-panel); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); padding: var(--s1-space-3) var(--s1-space-4); font: var(--s1-text-base)/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-status-line-title { font-weight: 700; }
.s1-status-line-detail { font-size: var(--s1-text-small); color: var(--s1-mute); }
.s1-status-line--late { box-shadow: inset 4px 0 0 var(--s1-late); }
.s1-status-line--wait { box-shadow: inset 4px 0 0 var(--s1-wait); }
.s1-status-line--wait .s1-status-line-title { color: var(--s1-wait); }
.s1-status-line--soon { box-shadow: inset 4px 0 0 var(--s1-soon); }
.s1-status-line--new .s1-status-line-title { color: var(--s1-ink); }
.s1-status-line--clear .s1-status-line-title { color: var(--s1-mute); font-weight: 600; }

.s1-stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s1-space-1); margin: 20px 0 6px; padding: 0; list-style: none; font: var(--s1-text-micro) var(--s1-font-ui); }
.s1-stepper > li { color: var(--s1-mute); }
.s1-stepper > li::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--s1-track); margin-bottom: 6px; }
.s1-stepper > .is-done { color: var(--s1-ink-2); }
.s1-stepper > .is-done::before, .s1-stepper > .is-current::before { background: var(--s1-ink); }
.s1-stepper > .is-current { color: var(--s1-ink); font-weight: 700; }

.s1-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--s1-avatar); color: var(--s1-ink-2); font: 700 12.5px var(--s1-font-ui); flex: none; }
.s1-avatar--you { background: var(--s1-ink); color: var(--s1-on-ink); }

.s1-empty { display: flex; justify-content: space-between; align-items: center; gap: var(--s1-space-3); border: 1.5px dashed var(--s1-line); border-radius: var(--s1-radius-empty); padding: var(--s1-space-3) 14px; color: var(--s1-ink-2); font: var(--s1-text-base)/1.45 var(--s1-font-ui); }

.s1-table { width: 100%; border-collapse: collapse; background: var(--s1-panel); font: var(--s1-text-base)/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-table th { text-align: left; padding: 10px 14px; background: var(--s1-panel-head); border-bottom: 1px solid var(--s1-line); font: 700 var(--s1-text-micro) var(--s1-font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--s1-mute); }
.s1-table td { padding: 11px 14px; border-top: 1px solid var(--s1-line-soft); vertical-align: middle; }
.s1-table tbody tr:first-child td { border-top: 0; }
.s1-table-group td { background: var(--s1-panel-head); font-weight: 700; color: var(--s1-ink-2); }

/* ---- Stage 2 primitives (Project screen). Values: the "S1 Project visual contract" in the Stage 2 plan. ---- */

.s1-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s1-btn--icon { padding-left: 10px; padding-right: 10px; }
/* Button labels never break mid-label; an empty state's action keeps its own width and the text takes the rest. */
.s1-btn { white-space: nowrap; }
.s1-empty > .s1-btn, .s1-empty > a { flex: none; white-space: nowrap; }
.s1-btn--ghost[disabled]:hover { background: var(--s1-panel); }
.s1-text-btn { border: 0; background: none; padding: 0; color: var(--s1-ink); font: 600 var(--s1-text-small) var(--s1-font-ui); cursor: pointer; text-decoration: none; }
.s1-text-btn:hover { text-decoration: underline; }
.s1-text-btn:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; border-radius: 4px; }
.s1-text-btn--late { color: var(--s1-late); }
.s1-panel-foot { padding: 10px 18px; border-top: 1px solid var(--s1-line-soft); background: var(--s1-panel-head); border-radius: 0 0 var(--s1-radius-panel) var(--s1-radius-panel); font: var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-mute); }

/* Tabs (page-1 .tabs). Roving tabindex and arrow keys belong to the screen controller. */
.s1-tabs { display: flex; flex-wrap: wrap; gap: var(--s1-space-1); border-top: 1px solid var(--s1-line-soft); padding: 0 var(--s1-space-4); }
.s1-tab { display: inline-flex; align-items: center; gap: var(--s1-space-1); border: 0; background: none; padding: var(--s1-space-3); font: 600 14px/1.45 var(--s1-font-ui); color: var(--s1-mute); cursor: pointer; text-decoration: none; }
.s1-tab:hover { color: var(--s1-ink-2); }
.s1-tab[aria-selected="true"] { color: var(--s1-ink); box-shadow: inset 0 -2px 0 var(--s1-ink); }
.s1-tab:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: -2px; border-radius: 6px; }
.s1-tab-count { background: var(--s1-canvas); color: var(--s1-ink-2); border-radius: var(--s1-radius-pill); padding: 1px 7px; font-size: 11.5px; line-height: 1.45; }

/* Segmented control (page-4 .seg): buttons with aria-pressed. */
.s1-segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); overflow: hidden; vertical-align: middle; }
.s1-segmented-item { border: 0; border-left: 1px solid var(--s1-line-soft); background: none; padding: 6px var(--s1-space-3); font: 600 var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-mute); cursor: pointer; }
.s1-segmented-item:first-child { border-left: 0; }
.s1-segmented-item:hover { color: var(--s1-ink); }
.s1-segmented-item[aria-pressed="true"] { background: var(--s1-ink); color: var(--s1-on-ink); }
.s1-segmented-item:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: -2px; }
.s1-segmented-item[disabled] { opacity: .5; cursor: default; }

/* Status control (page-1 .sel): wraps one native select; the dot carries meaning through data-tone. */
/* The select fills the whole pill (its padding clears the dot and the \25BE), so a tap anywhere on the control opens it. */
.s1-status-control { position: relative; display: inline-flex; align-items: stretch; border: 1px solid var(--s1-line); border-radius: calc(var(--s1-radius-control) - 1px); padding: 0; background: var(--s1-panel); color: var(--s1-ink); font: 600 13.5px/1.45 var(--s1-font-ui); vertical-align: middle; }
.s1-status-control::before { content: ""; position: absolute; left: 10px; top: 50%; margin-top: -4px; pointer-events: none; width: 8px; height: 8px; border-radius: 50%; background: var(--s1-mute); }
.s1-status-control[data-tone="wait"]::before { background: var(--s1-wait); }
.s1-status-control[data-tone="soon"]::before { background: var(--s1-soon); }
.s1-status-control[data-tone="mute"]::before { background: var(--s1-mute); }
.s1-status-control[data-tone="ink"]::before { background: var(--s1-ink); }
.s1-status-control::after { content: "\25BE"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--s1-ink); }
.s1-status-control-select { appearance: none; -webkit-appearance: none; border: 0; background: none; box-sizing: border-box; margin: 0; padding: var(--s1-space-1) 26px; font: inherit; color: inherit; cursor: pointer; }
.s1-status-control-select:focus { outline: none; }
.s1-status-control:has(.s1-status-control-select:focus-visible) { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1-status-control:has(.s1-status-control-select:disabled) { color: var(--s1-mute); }
.s1-status-control:has(.s1-status-control-select:disabled) .s1-status-control-select { cursor: default; }
.s1-status-control[aria-busy="true"] { opacity: .6; cursor: progress; }
.s1-status-control--readonly { align-items: center; padding: var(--s1-space-1) 10px var(--s1-space-1) 26px; }
.s1-status-control--readonly::after { content: none; }

/* Interactive and compact phase steppers (page-1 .steps, page-4 .mini .steps). Each li holds one full-cell button;
 * the bar is the button's ::before. Negative block margins keep the visual rhythm while the hit area is >=44px. */
.s1-stepper--interactive > li::before, .s1-stepper--compact > li::before { content: none; }
.s1-step { display: block; width: 100%; min-height: 44px; margin: -8px 0; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.s1-step::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--s1-track); margin-bottom: 6px; }
.s1-stepper > .is-done .s1-step::before, .s1-stepper > .is-current .s1-step::before { background: var(--s1-ink); }
.s1-stepper > .is-current .s1-step { font-weight: 700; cursor: default; }
.s1-stepper > .is-current .s1-step-label::after { content: " \25CF"; }
.s1-step:hover:not([disabled]) { color: var(--s1-ink); }
.s1-step:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 0; border-radius: 4px; }
.s1-step[disabled] { opacity: 1; }
.s1-stepper[aria-busy="true"] .s1-step { cursor: progress; opacity: .6; }
.s1-stepper-caption { display: none; margin: 0 0 6px; font: 600 var(--s1-text-micro)/1.45 var(--s1-font-ui); color: var(--s1-ink-2); }
/* width:auto + start-justified fixed-max tracks: bars sit at 60px when there is room and shrink (never overflow) in narrow or intrinsically sized parents. */
.s1-stepper--compact { grid-auto-columns: minmax(0, 60px); justify-content: start; gap: 3px; width: auto; min-width: 0; margin: 0; }
.s1-stepper--compact .s1-step { padding: 19px 0; }
.s1-stepper--compact .s1-step::before { height: 5px; margin: 0; }
.s1-stepper--compact .s1-step-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Avatar stack (page-4 .mini). */
.s1-avatar-stack { display: inline-flex; align-items: center; padding-left: 6px; color: inherit; text-decoration: none; border-radius: var(--s1-radius-pill); }
.s1-avatar-stack > .s1-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--s1-panel); }
.s1-avatar-stack:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1-avatar img, .s1-avatar-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Key/value grid (page-1 .kv). */
.s1-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; margin: 0; font: 14px/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-kv--narrow { grid-template-columns: 120px minmax(0, 1fr); }
.s1-kv > dt, .s1-kv-key { margin: 0; color: var(--s1-mute); }
.s1-kv > dd, .s1-kv-value { margin: 0; overflow-wrap: anywhere; }

/* Chips (page-1 .chip): toggles carry aria-pressed or aria-expanded. */
.s1-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-pill); padding: var(--s1-space-1) 10px; background: var(--s1-panel); color: var(--s1-ink-2); font: 600 12.5px/1.45 var(--s1-font-ui); cursor: pointer; text-decoration: none; }
.s1-chip:hover { border-color: var(--s1-ink-2); }
.s1-chip[aria-pressed="true"], .s1-chip[aria-expanded="true"] { border-color: var(--s1-ink); color: var(--s1-ink); }
.s1-chip:focus-visible, .s1-chip-remove:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1-chip--removable { cursor: default; padding-right: var(--s1-space-1); }
.s1-chip-remove { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--s1-mute); font: 700 14px/1 var(--s1-font-ui); cursor: pointer; }
.s1-chip-remove:hover { background: var(--s1-canvas); color: var(--s1-ink); }
.s1-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Pills (page-4 .pill): neutral, or tone text and border on a white fill. There is no green pill. */
.s1-pill { display: inline-block; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-pill); padding: 2px 9px; margin: 1px 3px 1px 0; background: var(--s1-panel); color: var(--s1-ink-2); font: 600 12.5px/1.45 var(--s1-font-ui); white-space: nowrap; }
.s1-pill--soon { color: var(--s1-soon); border-color: var(--s1-soon); }
.s1-pill--late { color: var(--s1-late); border-color: var(--s1-late); }

/* Form field (page-4 .inp): label above a native control. */
.s1-field { display: grid; gap: 6px; min-width: 0; font: 13.5px/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-field-label { font: 600 var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-ink-2); }
.s1-field-control { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); padding: 7px var(--s1-space-3); background: var(--s1-panel); color: var(--s1-ink); font: 13.5px/1.45 var(--s1-font-ui); }
.s1-field-control--multiline { resize: vertical; min-height: 64px; }
.s1-field-control::placeholder { color: var(--s1-mute); }
.s1-field-control:focus { outline: 2px solid var(--s1-ink); outline-offset: 1px; }
.s1-field-control:disabled { background: var(--s1-panel-head); color: var(--s1-mute); }
.s1-field-hint { font-size: var(--s1-text-small); color: var(--s1-mute); }
.s1-field--error .s1-field-control, .s1-field-control[aria-invalid="true"] { border-color: var(--s1-late); }
.s1-field-error { font: 600 var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-late); }

/* Menu (header ⋯ and card Move/More). Styling only: opening, focus and dismissal belong to the controller. */
.s1-menu { display: grid; width: max-content; min-width: 220px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: var(--s1-space-1); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-empty); background: var(--s1-panel); box-shadow: 0 10px 28px color-mix(in srgb, var(--s1-ink) 14%, transparent); font: 600 14px/1.45 var(--s1-font-ui); color: var(--s1-ink); }
.s1-menu[hidden] { display: none; }
.s1-menu-item { display: flex; align-items: center; gap: var(--s1-space-2); min-height: 40px; padding: 0 var(--s1-space-3); border: 0; border-radius: 7px; background: none; color: var(--s1-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.s1-menu-item:hover { background: var(--s1-panel-head); }
.s1-menu-item:focus-visible { background: var(--s1-panel-head); outline: 2px solid var(--s1-ink); outline-offset: -2px; }
.s1-menu-item[aria-disabled="true"], .s1-menu-item[disabled] { color: var(--s1-mute); cursor: default; }
.s1-menu-sep { height: 1px; margin: var(--s1-space-1) 0; background: var(--s1-line-soft); border: 0; }

/* Dialog: a native <dialog> styled as a panel. Submit (ink) sits right of a ghost Cancel. */
.s1-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-panel); background: var(--s1-panel); color: var(--s1-ink); font: var(--s1-text-base)/1.45 var(--s1-font-ui); }
.s1-dialog[open] { display: flex; flex-direction: column; }
.s1-dialog::backdrop { background: color-mix(in srgb, var(--s1-rail) 45%, transparent); }
.s1-dialog > .s1-panel-head { flex: none; }
.s1-dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px; display: grid; gap: var(--s1-space-3); }
.s1-dialog-foot { flex: none; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s1-space-2); padding: var(--s1-space-3) 18px; border-top: 1px solid var(--s1-line-soft); }

/* Board (page-4 .kan / .kc / .card / .tag). Populated columns take 1.4 shares, empty ones 1. */
.s1-board { display: flex; gap: var(--s1-space-3); padding: 14px 18px; align-items: stretch; }
.s1-board-col { flex: 1 1 0; min-width: 0; min-height: 150px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--s1-space-2); padding: 10px; border: 1px solid var(--s1-line-soft); border-radius: var(--s1-radius-empty); background: var(--s1-column); }
.s1-board-col:has(.s1-task) { flex-grow: 1.4; }
.s1-board-col[data-drop-target="true"] { border-color: var(--s1-ink); }
.s1-board-col-head { display: flex; justify-content: space-between; align-items: center; margin: 0; font: 700 var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-ink-2); }
.s1-board-empty { border: 1.5px dashed var(--s1-line); border-radius: 8px; padding: 10px; color: var(--s1-mute); font: var(--s1-text-small)/1.45 var(--s1-font-ui); text-align: center; }
.s1-task { display: grid; gap: 2px; padding: 10px var(--s1-space-3); border: 1px solid var(--s1-line); border-radius: var(--s1-radius-control); background: var(--s1-panel); color: var(--s1-ink); font: var(--s1-text-base)/1.45 var(--s1-font-ui); }
.s1-task:focus-visible { outline: 2px solid var(--s1-ink); outline-offset: 2px; }
.s1-task[aria-busy="true"] { opacity: .6; }
.s1-task[aria-grabbed="true"], .s1-task.is-dragging { opacity: .6; }
.s1-task-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s1-space-2); }
.s1-task-title { font-weight: 700; overflow-wrap: anywhere; }
.s1-task-meta { font-size: var(--s1-text-small); color: var(--s1-mute); overflow-wrap: anywhere; }
.s1-task-due { font: 700 var(--s1-text-micro)/1.45 var(--s1-font-ui); color: var(--s1-mute); }
.s1-task-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.s1-task--late, .s1-task--blocked { box-shadow: inset 4px 0 0 var(--s1-late); }
.s1-task--late .s1-task-due, .s1-task--blocked .s1-task-due { color: var(--s1-late); }
.s1-task--soon { box-shadow: inset 4px 0 0 var(--s1-soon); }
.s1-task--soon .s1-task-due { color: var(--s1-soon); }

/* Live region: polite text; --ok is the only green on S1 and is cleared by the controller after 2 s. */
.s1-live { min-height: 1em; font: 600 var(--s1-text-small)/1.45 var(--s1-font-ui); color: var(--s1-mute); }
.s1-live--ok { color: var(--s1-ok); }
.s1-live--late { color: var(--s1-late); }

@media (max-width: 640px) {
  .s1-text-btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .s1-status-line { flex-wrap: wrap; }
  .s1-empty { flex-wrap: wrap; }
  .s1-stepper { grid-auto-flow: row; grid-auto-columns: auto; }
  .s1-table { display: block; overflow-x: auto; }
  .s1-panel-head { flex-wrap: wrap; gap: var(--s1-space-2) var(--s1-space-3); }

  .s1-tab { min-height: 44px; }
  .s1-segmented-item { min-height: 44px; }
  .s1-status-control { min-height: 44px; box-sizing: border-box; }
  .s1-status-control:not(.s1-status-control--readonly) { padding-block: 0; }
  .s1-status-control-select { min-height: 42px; }
  .s1-chip { min-height: 44px; box-sizing: border-box; }
  .s1-chip-remove { width: 36px; height: 36px; }
  .s1-btn--small, .s1-btn--icon { min-height: 44px; }
  .s1-menu-item { min-height: 44px; }
  .s1-field-control { min-height: 44px; }

  /* One row of bars; labels move to the caption under the bars (replaces the vertical rule above for these). */
  .s1-stepper--interactive { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 4px; }
  .s1-stepper--compact { grid-auto-flow: column; grid-auto-columns: minmax(0, 60px); }
  .s1-stepper--interactive .s1-step::before { margin-bottom: 0; }
  .s1-stepper--interactive .s1-step-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .s1-stepper-caption { display: block; }

  .s1-kv { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); }

  /* Centered on phones too (never a bottom sheet). */
  .s1-dialog { width: calc(100vw - 16px); margin: auto; max-height: calc(100dvh - 16px); border-radius: var(--s1-radius-panel); }
  .s1-dialog-foot > .s1-btn { min-height: 44px; flex: 1 1 auto; }

  .s1-board { flex-direction: column; }
  .s1-board-col, .s1-board-col:has(.s1-task) { flex: none; min-height: 0; }

  .s1-table--stack { display: block; overflow: visible; }
  .s1-table--stack thead { display: none; }
  .s1-table--stack tbody { display: grid; gap: 10px; padding: var(--s1-space-3); }
  .s1-table--stack tr { display: block; border: 1px solid var(--s1-line); border-radius: var(--s1-radius-empty); padding: 6px 0; }
  /* Labelled block: the ::before label takes its own full-width line, then all value children flow together beneath it. */
  .s1-table--stack td, .s1-table--stack tbody tr:first-child td { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; border-top: 0; padding: 6px var(--s1-space-3); }
  .s1-table--stack td > * { min-width: 0; overflow-wrap: anywhere; }
  .s1-table--stack tbody tr td:not([data-label]) { display: block; }
  .s1-table--stack td[data-label]::before { flex: 0 0 100%; }
  .s1-table--stack .s1-pill { white-space: normal; }
  .s1-table--stack td[data-label]::before { content: attr(data-label); font: 700 var(--s1-text-micro)/1.6 var(--s1-font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--s1-mute); }
}