/* The design system.
 *
 * One block per primitive in src/design/. No colour literals — only tokens.
 */

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

.btn {
  --btn-bg: var(--bg-raise);
  --btn-fg: var(--fg);
  --btn-border: var(--border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  min-width: var(--control-h);
  max-width: 100%;
  padding: var(--space-1) var(--control-pad-x);
  border: var(--border-width) solid var(--btn-border);
  border-radius: var(--control-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard);
}

/* Reassigns the custom property, not `background`. Setting `background` here
   won on specificity (0,2,0 vs the base rule's 0,1,0), so every variant's own
   hover — which only reassigns `--btn-bg` — was silently discarded. A primary
   button therefore faded to a 9% tint while its label stayed white: 1.28:1,
   i.e. the main action on every screen disappeared under the cursor. */
.btn:hover { --btn-bg: var(--accent-ghost); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; }

.btn-body { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
/* A label wraps rather than overflows. A button whose words do not fit its
   column used to push its own right edge past the pane and get clipped —
   "Ask Leia for something to read" ran 300px wide in a 292px rail. */
.btn-label { overflow-wrap: break-word; min-width: 0; }
.btn-body > .icon { flex: none; }

.btn[data-variant="primary"] {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-border: var(--accent);
  box-shadow: var(--shadow-pop);
}
.btn[data-variant="primary"]:hover { --btn-bg: var(--accent-ink); --btn-border: var(--accent-ink); }
[data-theme="classic-dark"] .btn[data-variant="primary"]:hover,
[data-theme="8bit"] .btn[data-variant="primary"]:hover { --btn-bg: var(--accent-ink); --btn-fg: var(--on-accent); }

.btn[data-variant="secondary"] { --btn-bg: var(--bg-raise); box-shadow: var(--shadow-soft); }

.btn[data-variant="ghost"] { --btn-bg: transparent; --btn-border: var(--border); }

.btn[data-variant="quiet"] {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--muted);
  font-weight: var(--weight-medium);
}
.btn[data-variant="quiet"]:hover { --btn-fg: var(--fg); --btn-bg: var(--accent-ghost); }

.btn[data-variant="danger"] {
  --btn-bg: var(--danger);
  --btn-fg: var(--on-danger);
  --btn-border: var(--danger);
}
.btn[data-variant="danger"]:hover { --btn-bg: var(--danger-ink); --btn-border: var(--danger-ink); }

.btn[data-size="sm"] { min-height: var(--control-h-sm); min-width: var(--control-h-sm); font-size: var(--text-sm); padding: 0 var(--space-2); }
.btn[data-size="md"] { min-height: var(--control-h-md); min-width: var(--control-h-md); }
.btn[data-size="lg"] { min-height: var(--control-h-lg); min-width: var(--control-h-lg); font-size: var(--text-base); padding: 0 var(--space-5); }

.btn-icon { padding: 0; aspect-ratio: 1; }
.btn-icon .btn-body { gap: 0; }

.btn-row { display: flex; gap: var(--row-gap); align-items: center; }
.btn-row[data-wrap="on"] { flex-wrap: wrap; }
.btn-row[data-align="end"] { justify-content: flex-end; }
.btn-row[data-align="between"] { justify-content: space-between; }

.spinner {
  width: 1em;
  height: 1em;
  border: 2px solid var(--hairline-strong);
  border-top-color: currentColor;
  border-radius: var(--radius-pill);
  animation: leia-spin 700ms linear infinite;
}

@keyframes leia-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ *
 * Chip
 * ------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  color: var(--fg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: default;
}
button.chip { cursor: pointer; }
button.chip:hover { background: var(--accent-ghost); border-color: var(--hairline-strong); }
.chip[aria-pressed="true"], .chip[data-selected="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.chip[data-tone="accent"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.chip-remove { margin-right: calc(var(--space-2) * -1); }

/* ------------------------------------------------------------------ *
 * Toggle
 * ------------------------------------------------------------------ */

.toggle { display: block; }
.toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.toggle-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.toggle-track {
  flex: none;
  width: 2.5rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  padding: 2px;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  transition: background var(--dur-fast) var(--ease-standard);
}

.toggle-thumb {
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-standard);
}

.toggle-input:checked + .toggle-label .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle-input:checked + .toggle-label .toggle-thumb { transform: translateX(1.1rem); }
.toggle-input:focus-visible + .toggle-label .toggle-track {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.toggle-text { display: grid; gap: var(--space-1); }
.toggle-title { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.toggle-desc { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-snug); }

/* ------------------------------------------------------------------ *
 * SegmentedControl
 * ------------------------------------------------------------------ */

.segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: var(--border-width) solid var(--border);
  border-radius: var(--control-radius);
  background: var(--bg-sunken);
}

.segmented-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--control-h) - 6px);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--control-radius) - 2px);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.segmented-item:hover { color: var(--fg); }
.segmented-item[aria-checked="true"] {
  background: var(--bg-raise);
  color: var(--accent-ink);
  box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------------ *
 * SectionHeader — the one header primitive (src/design/header.js)
 * ------------------------------------------------------------------ *
 * Used by Card, Panel and every workbench surface. The layout lives here
 * once; `.card-head` / `.panel-head` / `.surface-head` are skins on top.
 *
 * The contract this block keeps, and test/layout-overflow.test.js asserts:
 *
 *   .ui-head-bar wraps, so the actions can never sit on top of the title.
 *   .ui-head-headings has a real minimum width, so it can never be squeezed
 *     to nothing by a wide action group.
 *   .ui-head-desc is its own full-width row, never a column beside buttons.
 *
 * `--head-title-min` is the minimum, clamped to the container so it still
 * behaves at 320px and at 200% text zoom.
 */

.ui-head {
  --head-title-min: 11rem;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.ui-head-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}

.ui-head-headings {
  display: grid;
  gap: var(--space-1);
  flex: 1 1 var(--head-title-min);
  min-width: min(100%, var(--head-title-min));
}

.ui-head-title { overflow-wrap: break-word; }

.ui-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--row-gap);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.ui-head-desc {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
}

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

.card {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  padding: var(--pane-pad);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-raise);
  box-shadow: var(--shadow-soft);
}
.card-flush { padding: 0; }

/* Skin only — the layout comes from .ui-head above. */
.card-title { font-size: var(--text-lg); }
.card-body { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; }

.card[data-tone="accent"] { border-color: var(--accent-soft); background: var(--accent-soft); }
.card[data-tone="danger"] { border-color: var(--danger-soft); }

.panel { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; min-height: 0; }
/* Skin only — the layout comes from .ui-head above. The left rail is the
   narrowest place a header appears, so its minimum title is set here rather
   than letting the shared 11rem default fight a 246px column. */
.panel-head { --head-title-min: 9rem; }
.panel-title { font-size: var(--text-xl); }
.panel-body { display: flex; flex-direction: column; gap: var(--stack-gap); min-width: 0; }

/* ------------------------------------------------------------------ *
 * Callout
 * ------------------------------------------------------------------ */

.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raise);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.callout-icon { flex: none; display: inline-flex; margin-top: 0.1em; }
.callout-body { display: grid; gap: var(--space-2); min-width: 0; }
.callout-title { font-weight: var(--weight-semibold); }
.callout-text { color: var(--muted); }
.callout-actions { display: flex; gap: var(--row-gap); flex-wrap: wrap; }

.callout[data-tone="info"] { background: var(--info-soft); border-color: var(--info-soft); color: var(--info-ink); }
.callout[data-tone="success"] { background: var(--success-soft); border-color: var(--success-soft); color: var(--success-ink); }
.callout[data-tone="warn"] { background: var(--warn-soft); border-color: var(--warn-soft); color: var(--warn-ink); }
.callout[data-tone="danger"] { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger-ink); }
.callout[data-tone="accent"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.callout[data-tone] .callout-text { color: inherit; }

/* ------------------------------------------------------------------ *
 * EmptyState
 * ------------------------------------------------------------------ */

.empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: var(--border-width) dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--pane);
  max-width: 44rem;
}
.empty-state.is-compact { padding: var(--space-4); }

.empty-art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.empty-art .icon { width: 1.4rem; height: 1.4rem; }

.empty-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
}
.empty-body { color: var(--muted); max-width: 48ch; }
.empty-actions { display: flex; gap: var(--row-gap); flex-wrap: wrap; margin-top: var(--space-1); }

/* ------------------------------------------------------------------ *
 * Skeleton
 * ------------------------------------------------------------------ */

.skeleton { display: grid; gap: var(--space-2); padding: var(--space-1) 0; }
.skeleton-line {
  display: block;
  height: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  animation: leia-pulse 1.4s var(--ease-standard) infinite;
}
.skeleton[data-variant="block"] .skeleton-line { height: 8rem; }

@keyframes leia-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ------------------------------------------------------------------ *
 * Badge / Avatar / ProgressDots
 * ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-raise);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.badge[data-tone="accent"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft); }
.badge[data-tone="success"] { background: var(--success-soft); color: var(--success-ink); border-color: var(--success-soft); }
.badge[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-soft); }
.badge[data-tone="danger"] { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-soft); }
.badge[data-tone="info"] { background: var(--info-soft); color: var(--info-ink); border-color: var(--info-soft); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  flex: none;
}
.avatar[data-size="sm"] { width: 1.5rem; height: 1.5rem; font-size: var(--text-sm); }
.avatar[data-size="lg"] { width: 2.5rem; height: 2.5rem; font-size: var(--text-lg); }

.progress-dots { display: inline-flex; gap: var(--space-2); }
.progress-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--border);
  transition: background var(--dur-fast) var(--ease-standard), width var(--dur-fast) var(--ease-standard);
}
.progress-dot[data-state="done"] { background: var(--accent-soft); }
.progress-dot[data-state="current"] { background: var(--accent); width: 1.25rem; }

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

.field { display: grid; gap: var(--space-1); }
.field-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

.field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg);
}
.field-required { color: var(--danger); margin-left: 0.15em; }
.field-hint { font-size: var(--text-sm); color: var(--muted); line-height: var(--leading-snug); }
.field-error { font-size: var(--text-sm); color: var(--danger-ink); font-weight: var(--weight-medium); }
.field-error[hidden] { display: none; }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--control-radius);
  background: var(--bg-raise);
  color: var(--fg);
  font-size: var(--text-md);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--hairline-strong); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input:disabled, .textarea:disabled, .select:disabled { opacity: 0.6; cursor: not-allowed; }

.textarea { resize: vertical; line-height: var(--leading-body); }

.select {
  appearance: none;
  padding-right: var(--space-6);
  cursor: pointer;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-left: var(--space-8); }
.input-icon {
  position: absolute;
  left: var(--space-3);
  display: inline-flex;
  color: var(--muted);
  pointer-events: none;
}

.field-group {
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}
.field-group-legend { padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
.field-group-desc { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.field-group-body { display: grid; gap: var(--stack-gap); }
.field-group[data-columns="2"] .field-group-body { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* ------------------------------------------------------------------ *
 * Tabs (generic, in-view)
 * ------------------------------------------------------------------ */

.tabs { display: flex; flex-direction: column; gap: var(--stack-gap); min-height: 0; }
.tabs-list {
  display: flex;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--hairline);
}
.tabs-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.tabs-tab:hover { color: var(--fg); }
.tabs-tab[aria-selected="true"] { color: var(--accent-ink); border-bottom-color: var(--accent); }
.tabs-panel:focus-visible { outline-offset: calc(var(--focus-offset) * -1); }

/* ------------------------------------------------------------------ *
 * Menu
 * ------------------------------------------------------------------ */

.menu {
  position: absolute;
  z-index: var(--z-overlay);
  min-width: 13rem;
  max-width: 20rem;
  padding: var(--space-1);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--overlay-bg);
  box-shadow: var(--shadow-lift);
}
.menu[hidden] { display: none; }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
}
.menu-item:hover:not(:disabled) { background: var(--accent-ghost); }
.menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-item[data-danger="true"] { color: var(--danger-ink); }
.menu-icon-space { width: 1.15em; flex: none; }
.menu-item-text { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.menu-item-label { font-weight: var(--weight-medium); }
.menu-item-desc { font-size: var(--text-xs); color: var(--muted); }
.menu-shortcut {
  font-size: var(--text-xs);
  color: var(--muted);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.3em;
}
.menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--divider); }

/* ------------------------------------------------------------------ *
 * Stepper
 * ------------------------------------------------------------------ */

.stepper { display: grid; gap: var(--space-2); list-style: none; }
.stepper-step { display: flex; }
.stepper-button, .stepper-static {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  color: inherit;
}
.stepper-button { cursor: pointer; }
.stepper-button:hover { background: var(--accent-ghost); }
.stepper-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--bg-sunken);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.stepper-step[data-state="current"] .stepper-marker { background: var(--accent); color: var(--on-accent); }
.stepper-step[data-state="done"] .stepper-marker { background: var(--accent-soft); color: var(--accent-ink); }
.stepper-text { display: grid; gap: 0.1rem; }
.stepper-label { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.stepper-desc { font-size: var(--text-sm); color: var(--muted); }

/* ------------------------------------------------------------------ *
 * Overlays
 * ------------------------------------------------------------------ */

.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.overlay[hidden] { display: none; }

.overlay-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(var(--blur-sm));
}

.dialog-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  width: min(34rem, 100%);
  max-height: calc(100vh - var(--space-8));
  overflow: auto;
  padding: var(--pane-pad);
  border: var(--border-width) solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--overlay-bg);
  box-shadow: var(--shadow-lift);
}
.dialog-panel[data-size="sm"] { width: min(26rem, 100%); }
.dialog-panel[data-size="lg"] { width: min(48rem, 100%); }

.dialog-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.dialog-headings { display: grid; gap: var(--space-2); flex: 1; min-width: 0; }
.dialog-title { font-size: var(--text-xl); }
.dialog-desc { color: var(--muted); line-height: var(--leading-snug); }
.dialog-body { display: grid; gap: var(--stack-gap); }
.dialog-consequence { color: var(--danger-ink); font-weight: var(--weight-medium); }
.dialog-footer { display: flex; align-items: center; gap: var(--row-gap); flex-wrap: wrap; }
.dialog-footer .btn:last-child { margin-left: auto; }
.dialog-footer .spacer + .btn { margin-left: 0; }

.overlay-sheet { align-items: stretch; justify-content: flex-start; padding: 0; }
.sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  width: min(24rem, 100%);
  height: 100%;
  overflow: auto;
  padding: var(--pane-pad);
  border-right: var(--border-width) solid var(--hairline);
  background: var(--overlay-bg);
  box-shadow: var(--shadow-lift);
}
.sheet-panel[data-side="right"] { margin-left: auto; border-right: 0; border-left: var(--border-width) solid var(--hairline); }
.sheet-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.sheet-headings { display: grid; gap: var(--space-1); flex: 1; }
.sheet-title { font-size: var(--text-xl); }
.sheet-desc { color: var(--muted); font-size: var(--text-md); }
.sheet-body { display: grid; gap: var(--stack-gap); }

.tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  max-width: 16rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--fg);
  color: var(--bg);
  font-size: var(--text-xs);
  pointer-events: none;
}
.tooltip[hidden] { display: none; }

/* The default corner. The learner shell shifts this clear of the Leia
   composer — see `.toast-host` in styles/shell.css. */
.toast-host {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - var(--space-8)));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--overlay-bg);
  box-shadow: var(--shadow-lift);
  animation: leia-toast-in var(--dur-med) var(--ease-enter);
}
.toast-icon { flex: none; margin-top: 0.1em; color: var(--muted); }
.toast-text { flex: 1; display: grid; gap: var(--space-1); min-width: 0; }
.toast-title { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.toast-message { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
.toast[data-tone="success"] .toast-icon { color: var(--success-ink); }
.toast[data-tone="warn"] .toast-icon { color: var(--warn-ink); }
.toast[data-tone="danger"] .toast-icon { color: var(--danger-ink); }
.toast[data-tone="danger"] { border-color: var(--danger-soft); }

@keyframes leia-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * List / KeyValue
 * ------------------------------------------------------------------ */

.list { display: grid; gap: var(--space-1); list-style: none; }
.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
}
.list.is-dense .list-item { min-height: auto; padding: var(--space-1) var(--space-2); }
.list-item.is-interactive { cursor: pointer; }
.list-item.is-interactive:hover { background: var(--accent-ghost); border-color: var(--hairline); }
.list-item[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.list-icon { flex: none; color: var(--muted); display: inline-flex; }
.list-text { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.list-title { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-subtitle { font-size: var(--text-sm); color: var(--muted); }
.list-meta { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.list-actions { display: flex; gap: var(--space-1); }
.list-empty { padding: var(--space-3); color: var(--muted); font-size: var(--text-md); }

.keyvalue { display: grid; gap: var(--space-2); }
.keyvalue[data-columns="2"] { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.keyvalue-row { display: grid; gap: 0.1rem; }
.keyvalue-key { font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-semibold); }
.keyvalue-hint { display: block; font-weight: var(--weight-regular); }
.keyvalue-value { font-size: var(--text-md); }

.async-region { display: grid; gap: var(--stack-gap); }