/*
 * segmnt component library v1 — reference CSS.
 * Spec: brand/COMPONENTS.md. Gallery: brand/components-demo.html.
 *
 * Load after theme.css. Every value is a token from theme.css; the only
 * literals allowed are 0, 1px/2px hairlines, percentages and unitless numbers
 * (brand/src/components.test.ts enforces this).
 *
 * Classes are prefixed `sg-` so they can live next to the dashboard's legacy
 * styles while pages migrate. Variants and sizes are data attributes; states
 * use native attributes (disabled, aria-invalid, aria-busy, aria-current,
 * aria-selected, aria-sort) so styling cannot drift from semantics.
 * Logical properties throughout: the same CSS serves LTR and RTL.
 */

/* ---------- Shared ---------- */

.sg-focusable:focus-visible,
.sg-button:focus-visible,
.sg-input:focus-visible,
.sg-check input:focus-visible,
.sg-switch input:focus-visible,
.sg-tab:focus-visible,
.sg-nav a:focus-visible,
.sg-table th button:focus-visible,
.sg-card[data-interactive]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.sg-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sg-icon {
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  flex: none;
}

/* Icons that imply direction (arrows, chevrons) flip in RTL. */
[dir="rtl"] .sg-icon[data-directional] {
  transform: scaleX(-1);
}

/* ---------- Button ---------- */

.sg-button {
  --_bg: var(--color-surface);
  --_fg: var(--color-text);
  --_border: var(--color-border-strong);
  --_bg-hover: var(--color-surface-sunken);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-4);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  text-decoration: none;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

.sg-button:hover { background: var(--_bg-hover); }
.sg-button:active { transform: translateY(1px); }

.sg-button[data-variant="primary"] {
  --_bg: var(--color-primary);
  --_fg: var(--color-on-primary);
  --_border: var(--color-primary);
  --_bg-hover: var(--color-primary-hover);
}
.sg-button[data-variant="primary"]:active { --_bg-hover: var(--color-primary-active); }

.sg-button[data-variant="ghost"] {
  --_bg: transparent;
  --_fg: var(--color-primary);
  --_border: transparent;
  --_bg-hover: var(--color-primary-soft);
}

.sg-button[data-variant="danger"] {
  --_bg: var(--color-danger);
  --_fg: var(--color-on-danger);
  --_border: var(--color-danger);
  --_bg-hover: var(--color-danger-hover);
}

.sg-button[data-size="sm"] {
  min-block-size: var(--size-control-sm);
  padding-inline: var(--space-3);
  font-size: var(--font-size-xs);
}
.sg-button[data-size="lg"] {
  min-block-size: var(--size-control-lg);
  padding-inline: var(--space-6);
  font-size: var(--font-size-md);
}

.sg-button[data-icon-only] {
  padding-inline: 0;
  inline-size: var(--size-control-md);
}
.sg-button[data-icon-only][data-size="sm"] { inline-size: var(--size-control-sm); }

.sg-button[data-block] { inline-size: 100%; }

.sg-button:disabled,
.sg-button[aria-disabled="true"] {
  --_bg: var(--color-surface-sunken);
  --_fg: var(--color-text-subtle);
  --_border: var(--color-border);
  --_bg-hover: var(--color-surface-sunken);
  cursor: not-allowed;
  transform: none;
}
.sg-button[data-variant="ghost"]:disabled,
.sg-button[data-variant="ghost"][aria-disabled="true"] {
  --_bg: transparent;
  --_border: transparent;
  --_bg-hover: transparent;
}

/* Loading keeps the label for width stability and screen readers; the spinner overlays it. */
.sg-button[aria-busy="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.sg-button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--space-4);
  block-size: var(--space-4);
  border: 2px solid var(--_fg);
  border-inline-end-color: transparent;
  border-radius: var(--radius-full);
  animation: sg-spin calc(var(--duration-deliberate) * 2) linear infinite;
}

@media (pointer: coarse) {
  .sg-button { min-block-size: var(--size-touch); }
  .sg-button[data-icon-only] { inline-size: var(--size-touch); }
}

.sg-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ---------- Field (label + control + hint + error) ---------- */

.sg-field {
  display: grid;
  gap: var(--space-2);
}

.sg-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.sg-label .sg-optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.sg-hint {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
}

.sg-field-error {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-danger);
}
.sg-field-error:empty { display: none; }

/* ---------- Input / Select / Textarea ---------- */

.sg-input {
  inline-size: 100%;
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-3);
  font: inherit;
  font-size: var(--font-size-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
textarea.sg-input {
  padding-block: var(--space-2);
  min-block-size: calc(var(--size-control-md) * 2);
  resize: vertical;
}
select.sg-input { padding-inline-end: var(--space-8); }

.sg-input::placeholder { color: var(--color-text-subtle); }
.sg-input:hover { border-color: var(--color-text-muted); }
.sg-input:focus-visible { border-color: var(--color-focus-ring); outline-offset: 0; }

.sg-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}
.sg-input[aria-invalid="true"]:focus-visible { outline-color: var(--color-danger); }

.sg-input:disabled {
  color: var(--color-text-subtle);
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.sg-input[readonly] {
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
}
.sg-input[data-mono] {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Machine values (URLs, keys, IDs) stay LTR inside RTL forms. */
.sg-input[dir="ltr"] { text-align: start; }

@media (pointer: coarse) {
  .sg-input { min-block-size: var(--size-touch); }
}

/* Control with an attached action (copy, reveal). */
.sg-input-group {
  display: flex;
  align-items: stretch;
}
.sg-input-group .sg-input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.sg-input-group .sg-button {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: -1px;
}

/* ---------- Checkbox / Radio ---------- */

.sg-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-block-size: var(--size-control-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.sg-check input {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin: 0;
  margin-block-start: var(--space-1);
  flex: none;
  accent-color: var(--color-primary);
  cursor: inherit;
}
.sg-check:has(input:disabled) {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
.sg-check .sg-hint { display: block; }

/* ---------- Switch (instant-apply settings only) ---------- */

.sg-switch {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.sg-switch input {
  appearance: none;
  position: relative;
  margin: 0;
  inline-size: var(--space-10);
  block-size: var(--space-6);
  flex: none;
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  cursor: inherit;
  transition: background-color var(--duration-base) var(--easing-standard);
}
.sg-switch input::before {
  content: "";
  position: absolute;
  inset-block-start: var(--space-1);
  inset-inline-start: var(--space-1);
  inline-size: var(--space-4);
  block-size: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-base) var(--easing-standard);
}
.sg-switch input:checked { background: var(--color-primary); }
.sg-switch input:checked::before { transform: translateX(var(--space-4)); }
[dir="rtl"] .sg-switch input:checked::before { transform: translateX(calc(var(--space-4) * -1)); }
.sg-switch:has(input:disabled) { color: var(--color-text-subtle); cursor: not-allowed; }
.sg-switch input:disabled { opacity: 0.5; }

/* ---------- Form ---------- */

.sg-form {
  display: grid;
  gap: var(--space-6);
  max-inline-size: var(--size-container-sm);
}
.sg-fieldset {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
}
.sg-fieldset legend {
  padding: 0;
  margin-block-end: var(--space-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}
.sg-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-2);
}

/* ---------- Alert (inline status: form summary, page banners) ---------- */

.sg-alert {
  --_tone: var(--color-on-primary-soft);
  --_soft: var(--color-primary-soft);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--_soft);
  border: 1px solid var(--_tone);
  border-inline-start-width: 2px;
  border-radius: var(--radius-md);
}
.sg-alert > .sg-icon { color: var(--_tone); }
.sg-alert-title { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.sg-alert ul { margin: var(--space-1) 0 0; padding-inline-start: var(--space-5); }
.sg-alert a { color: inherit; font-weight: var(--font-weight-medium); }
/* Actions sit under the message, never in the trailing column: at 390px a trailing
   button squeezes the title onto 2-3 lines. The trailing column is for dismiss only. */
.sg-alert-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.sg-alert[data-tone="success"] { --_tone: var(--color-success); --_soft: var(--color-success-soft); }
.sg-alert[data-tone="warning"] { --_tone: var(--color-warning); --_soft: var(--color-warning-soft); }
.sg-alert[data-tone="danger"] { --_tone: var(--color-danger); --_soft: var(--color-danger-soft); }

/* ---------- Badge ---------- */

.sg-badge {
  --_fg: var(--color-text-muted);
  --_bg: var(--color-surface-sunken);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  white-space: nowrap;
  color: var(--_fg);
  background: var(--_bg);
  border-radius: var(--radius-full);
  justify-self: start;
}
/* Dot = second carrier besides colour; the text label is the primary one. */
.sg-badge::before {
  content: "";
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-full);
  background: currentColor;
}
.sg-badge[data-count] { font-variant-numeric: tabular-nums; }
.sg-badge[data-count]::before { content: none; }
.sg-badge[data-tone="success"] { --_fg: var(--color-success); --_bg: var(--color-success-soft); }
.sg-badge[data-tone="warning"] { --_fg: var(--color-warning); --_bg: var(--color-warning-soft); }
.sg-badge[data-tone="danger"] { --_fg: var(--color-danger); --_bg: var(--color-danger-soft); }
.sg-badge[data-tone="info"] { --_fg: var(--color-on-primary-soft); --_bg: var(--color-primary-soft); }
.sg-badge[data-tone="progress"] { --_fg: var(--color-on-primary-soft); --_bg: var(--color-primary-soft); }
.sg-badge[data-tone="progress"]::before { animation: sg-pulse var(--duration-deliberate) var(--easing-standard) infinite alternate; }

/* ---------- Card ---------- */

.sg-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.sg-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.sg-card-title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
}
.sg-card-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sg-card-foot {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.sg-card[data-variant="flat"] { box-shadow: var(--shadow-0); }
.sg-card[data-variant="sunken"] { background: var(--color-surface-sunken); border-color: transparent; box-shadow: var(--shadow-0); }
.sg-card[data-density="compact"] { padding: var(--space-4); gap: var(--space-3); }

/* Whole card is one link: put the <a> on the title and stretch its hit area. */
.sg-card[data-interactive] {
  position: relative;
  transition:
    border-color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard);
}
.sg-card[data-interactive] .sg-card-title a { color: inherit; text-decoration: none; }
.sg-card[data-interactive] .sg-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sg-card[data-interactive]:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-2); }
.sg-card[data-interactive]:has(a:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.sg-card[data-interactive] a:focus-visible { outline: none; }
.sg-card[aria-current="true"] { border-color: var(--color-primary); }

.sg-stat { display: grid; gap: var(--space-1); }
.sg-stat-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sg-stat-value {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* ---------- Table ---------- */

.sg-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.sg-table-wrap:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.sg-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.sg-table caption {
  padding: var(--space-4);
  text-align: start;
  font-weight: var(--font-weight-semibold);
}
.sg-table th,
.sg-table td {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  text-align: start;
  vertical-align: middle;
  border-block-end: 1px solid var(--color-border);
}
.sg-table thead th {
  position: sticky;
  inset-block-start: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  background: var(--color-surface-sunken);
}
.sg-table tbody tr:last-child > * { border-block-end: 0; }
.sg-table tbody tr:hover { background: var(--color-bg); }
.sg-table tbody tr[aria-selected="true"] { background: var(--color-primary-soft); }

.sg-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Dates, sizes, short codes: values that read wrong when split ("Oct 13, / 2026"). */
.sg-table [data-nowrap] { white-space: nowrap; }
.sg-table [data-actions] { text-align: end; white-space: nowrap; inline-size: 1%; }
.sg-table [data-select] { inline-size: 1%; }
.sg-table .sg-cell-primary { font-weight: var(--font-weight-medium); color: var(--color-text); }
.sg-table .sg-cell-secondary { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sg-table td[data-mono] { font-family: var(--font-mono); font-size: var(--font-size-xs); }

.sg-table[data-density="compact"] th,
.sg-table[data-density="compact"] td { padding-block: var(--space-2); }

/* Sortable header: the <button> is the target; aria-sort on <th> is the state. */
.sg-table th button {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.sg-table th button:hover { color: var(--color-text); }
.sg-table th button::after { content: "↕"; color: var(--color-text-subtle); }
.sg-table th[aria-sort="ascending"] button::after { content: "↑"; color: var(--color-text); }
.sg-table th[aria-sort="descending"] button::after { content: "↓"; color: var(--color-text); }

/* Full-width row for empty / error / loading states inside the table body. */
.sg-table td[data-state] { padding: var(--space-12) var(--space-4); text-align: center; }

.sg-table-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-block-start: 1px solid var(--color-border);
}

/* Below md, tables marked data-stack become one card per row. Each td needs data-label. */
@media (width < 768px) {
  .sg-table[data-stack] thead { position: absolute; clip-path: inset(50%); }
  .sg-table[data-stack] tr { display: grid; gap: var(--space-1); padding: var(--space-4); border-block-end: 1px solid var(--color-border); }
  .sg-table[data-stack] tbody tr:last-child { border-block-end: 0; }
  .sg-table[data-stack] td { display: flex; gap: var(--space-3); justify-content: space-between; padding: 0; border: 0; text-align: end; }
  .sg-table[data-stack] td::before { content: attr(data-label); font-family: var(--font-sans); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: start; }
  .sg-table[data-stack] td[data-primary],
  .sg-table[data-stack] td[data-select] { display: block; text-align: start; }
  .sg-table[data-stack] td[data-primary]::before,
  .sg-table[data-stack] td[data-select]::before,
  .sg-table[data-stack] td[data-actions]::before,
  .sg-table[data-stack] td[data-state]::before { content: none; }
  .sg-table[data-stack] td[data-actions] { justify-content: flex-start; padding-block-start: var(--space-2); }
  .sg-table[data-stack] td[data-state] { display: block; padding: var(--space-8) 0; text-align: center; }
}

/* ---------- Modal (native <dialog>) ---------- */

.sg-modal {
  inline-size: min(100% - var(--space-8), var(--size-container-sm));
  max-block-size: min(100% - var(--space-8), 90dvh);
  padding: 0;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.sg-modal[data-size="sm"] { inline-size: min(100% - var(--space-8), calc(var(--size-container-sm) * 0.7)); }
.sg-modal[data-size="lg"] { inline-size: min(100% - var(--space-8), var(--size-container-md)); }
.sg-modal::backdrop { background: var(--color-overlay); }
.sg-modal[open] { display: flex; flex-direction: column; overflow: hidden; }

.sg-modal[open] { animation: sg-modal-in var(--duration-slow) var(--easing-enter); }
.sg-modal[open]::backdrop { animation: sg-fade-in var(--duration-slow) var(--easing-enter); }

.sg-modal-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1 1 auto;
  min-block-size: 0;
}
.sg-modal-head {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-6) var(--space-6) var(--space-2);
}
.sg-modal-title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
}
.sg-modal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6) var(--space-6);
  overflow-y: auto;
  color: var(--color-text-muted);
}
.sg-modal-foot {
  display: flex;
  flex-wrap: wrap-reverse;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-sunken);
  border-block-start: 1px solid var(--color-border);
  border-end-start-radius: var(--radius-xl);
  border-end-end-radius: var(--radius-xl);
}

/* Mobile: bottom sheet, full-width stacked actions. */
@media (width < 480px) {
  .sg-modal,
  .sg-modal[data-size] {
    inline-size: 100%;
    max-inline-size: 100%;
    margin-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .sg-modal-foot { border-radius: 0; }
  .sg-modal-foot .sg-button { flex: 1 1 100%; }
}

/* ---------- Navigation: top bar, primary nav, tabs, breadcrumb ---------- */

.sg-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-6);
  align-items: center;
  min-block-size: var(--space-16);
  padding-inline: var(--space-6);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
}
.sg-topbar-brand { display: flex; align-items: center; flex: none; }
.sg-topbar-brand img { block-size: var(--space-6); }
.sg-topbar-end {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-inline-start: auto;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sg-nav ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}
.sg-nav a:hover { color: var(--color-text); background: var(--color-surface-sunken); }
.sg-nav a[aria-current="page"] { color: var(--color-on-primary-soft); background: var(--color-primary-soft); }

/* Below md the nav drops under the brand row and scrolls sideways; no hamburger for ≤ 6 items. */
@media (width < 768px) {
  .sg-topbar { flex-wrap: wrap; gap: 0 var(--space-3); padding-inline: var(--space-4); min-block-size: auto; }
  .sg-topbar-brand,
  .sg-topbar-end { min-block-size: var(--space-12); }
  .sg-topbar .sg-nav { order: 3; inline-size: 100%; overflow-x: auto; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); padding-block-end: var(--space-2); }
  .sg-nav a { min-block-size: var(--size-touch); white-space: nowrap; }
}

.sg-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-block-end: 1px solid var(--color-border);
}
.sg-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-control-md);
  padding-inline: var(--space-3);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
.sg-tab:hover { color: var(--color-text); }
/* The tab strip scrolls, which would clip an outside ring; draw it inside. */
.sg-tab:focus-visible { outline-offset: -2px; border-radius: var(--radius-md); }
.sg-tab[aria-selected="true"],
.sg-tab[aria-current="page"] { color: var(--color-primary); }
.sg-tab[aria-selected="true"]::after,
.sg-tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}
.sg-tab .sg-badge { margin-inline-start: var(--space-1); }

.sg-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.sg-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--space-2); color: var(--color-text-subtle); }
.sg-breadcrumb a { color: inherit; }
.sg-breadcrumb a:hover { color: var(--color-text); }
.sg-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-medium); }

/* ---------- Empty / Loading / Error states ---------- */

.sg-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-inline-size: var(--size-container-sm);
  margin-inline: auto;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}
.sg-state-art {
  display: grid;
  place-items: center;
  inline-size: var(--space-12);
  block-size: var(--space-12);
  margin-block-end: var(--space-1);
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-full);
}
.sg-state[data-tone="danger"] .sg-state-art { color: var(--color-danger); background: var(--color-danger-soft); }
.sg-state-title {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-semibold);
}
.sg-state-body { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sg-state .sg-button-row { justify-content: center; margin-block-start: var(--space-2); }
.sg-state-detail { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-subtle); }

.sg-spinner {
  inline-size: var(--size-icon);
  block-size: var(--size-icon);
  border: 2px solid var(--color-border);
  border-block-start-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: sg-spin calc(var(--duration-deliberate) * 2) linear infinite;
}

.sg-skeleton {
  display: block;
  block-size: var(--space-4);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
  animation: sg-pulse calc(var(--duration-deliberate) * 2) var(--easing-standard) infinite alternate;
}
.sg-skeleton[data-shape="title"] { block-size: var(--space-6); inline-size: 40%; }
.sg-skeleton[data-shape="text"] { inline-size: 80%; }
.sg-skeleton[data-shape="short"] { inline-size: 30%; }
.sg-skeleton[data-shape="thumb"] { block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-md); }
.sg-skeleton[data-shape="pill"] { inline-size: var(--space-16); border-radius: var(--radius-full); }

.sg-progress {
  display: grid;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}
.sg-progress-row { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-muted); }
.sg-progress-row strong { color: var(--color-text); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.sg-progress progress {
  appearance: none;
  inline-size: 100%;
  block-size: var(--space-2);
  overflow: hidden;
  background: var(--color-surface-sunken);
  border: 0;
  border-radius: var(--radius-full);
}
.sg-progress progress::-webkit-progress-bar { background: var(--color-surface-sunken); }
.sg-progress progress::-webkit-progress-value { background: var(--color-primary); border-radius: var(--radius-full); transition: inline-size var(--duration-base) var(--easing-standard); }
.sg-progress progress::-moz-progress-bar { background: var(--color-primary); border-radius: var(--radius-full); }
.sg-progress[data-tone="danger"] progress::-webkit-progress-value { background: var(--color-danger); }
.sg-progress[data-tone="danger"] progress::-moz-progress-bar { background: var(--color-danger); }

/* ---------- Toast ---------- */

.sg-toast-region {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-3);
  inline-size: min(100% - var(--space-8), calc(var(--size-container-sm) * 0.6));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.sg-toast {
  --_tone: var(--color-primary);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-inline-start: 2px solid var(--_tone);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: sg-toast-in var(--duration-slow) var(--easing-enter);
}
.sg-toast > .sg-icon { color: var(--_tone); }
.sg-toast-title { font-weight: var(--font-weight-semibold); }
.sg-toast-body { color: var(--color-text-muted); }
.sg-toast-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-2); }
.sg-toast[data-tone="success"] { --_tone: var(--color-success); }
.sg-toast[data-tone="warning"] { --_tone: var(--color-warning); }
.sg-toast[data-tone="danger"] { --_tone: var(--color-danger); }
.sg-toast[data-leaving] { animation: sg-fade-out var(--duration-base) var(--easing-exit) forwards; }

@media (width < 480px) {
  .sg-toast-region { inset-inline: var(--space-4); inset-block-end: var(--space-4); inline-size: auto; }
}

/* ---------- Motion ---------- */

@keyframes sg-spin { to { transform: rotate(1turn); } }
@keyframes sg-pulse { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes sg-fade-in { from { opacity: 0; } }
@keyframes sg-fade-out { to { opacity: 0; } }
@keyframes sg-modal-in { from { opacity: 0; transform: translateY(var(--space-2)) scale(0.98); } }
@keyframes sg-toast-in { from { opacity: 0; transform: translateY(var(--space-4)); } }

/*
 * Durations already collapse to 0ms. Infinite loops are switched off too: the
 * spinner stays as a static partial ring, and its text label carries the state.
 */
@media (prefers-reduced-motion: reduce) {
  .sg-spinner,
  .sg-button[aria-busy="true"]::after,
  .sg-skeleton,
  .sg-badge[data-tone="progress"]::before { animation: none; }
}