/*
 * Linen UI — components.css
 * Retro desktop-app aesthetic. Source Code Pro monospace.
 * Warm parchment palette with inset 3-D buttons and floating window chrome.
 */

/* ─── NAV BAR ────────────────────────────────────────────────────────────────── */

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  gap: var(--space-3);
}

.nav-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ─── NAV LINK ───────────────────────────────────────────────────────────────── */

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-foreground);
  font-size: var(--font-size-sm);
  font-family: inherit;
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
  text-decoration: none;
}

.nav-link:hover,
.nav-link.is-active {
  background: var(--color-surface-recessed);
}

/* ─── INSET BUTTON (signature 3-D effect) ────────────────────────────────────── */

/*
 * Structure: <button class="inset-button"><span>Label</span></button>
 * The ::before creates the deep shadow hole.
 * The <span> is the raised face with glare-top / shadow-bottom.
 * On :active, everything shifts down.
 */
.inset-button {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  padding: 1px;
  background: var(--color-surface);
  border: 0;
  border-bottom: 1px solid var(--color-surface-raised);
  border-radius: var(--radius-xs);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-1px);
  transition: transform var(--duration-fast);
}

.inset-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-surface-recessed);
  border-radius: var(--radius-xs);
}

.inset-button > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-xs);  /* slightly rounder than outer */
  border-top:    1px solid var(--color-surface-raised);
  border-bottom: 1px solid var(--color-surface-recessed);
  padding: var(--space-1) var(--space-3);
  color: var(--color-foreground);
  white-space: nowrap;
  z-index: 1;
  transition: border-color var(--duration-fast);
}

.inset-button:hover > span {
  background: var(--color-surface-raised);
}

.inset-button:active {
  transform: translateY(0);
}

.inset-button:active > span {
  border-top-color:    var(--color-surface-recessed);
  border-bottom-color: var(--color-surface-recessed);
}

.inset-button:disabled,
.inset-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Yellow variant */
.inset-button.yellow::before {
  background: var(--color-btn-yellow-hover);
}
.inset-button.yellow > span {
  background: var(--color-btn-yellow);
  border-top-color:    color-mix(in srgb, var(--color-btn-yellow) 60%, white);
  border-bottom-color: var(--color-btn-yellow-hover);
  color: var(--color-btn-yellow-text);
}
.inset-button.yellow:hover > span {
  background: color-mix(in srgb, var(--color-btn-yellow) 85%, white);
}

/* Pink/salmon variant */
.inset-button.pink::before {
  background: var(--color-btn-pink-hover);
}
.inset-button.pink > span {
  background: var(--color-btn-pink);
  border-top-color:    var(--color-btn-pink-glare, #ffefeb);
  border-bottom-color: var(--color-btn-pink-hover);
  color: var(--color-btn-pink-text);
}
.inset-button.pink:hover > span {
  background: color-mix(in srgb, var(--color-btn-pink) 90%, white);
}

/* Accent variant (crimson) */
.inset-button.accent::before {
  background: var(--color-brand-accent-hover);
}
.inset-button.accent > span {
  background: var(--color-brand-accent);
  border-top-color:    color-mix(in srgb, var(--color-brand-accent) 60%, white);
  border-bottom-color: var(--color-brand-accent-hover);
  color: var(--color-foreground-on-accent);
}
.inset-button.accent:hover > span {
  background: color-mix(in srgb, var(--color-brand-accent) 85%, white);
}

/* Big variant */
.inset-button.big > span {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  padding: var(--space-5) var(--space-8);
  width: 100%;
}

/* Full width */
.inset-button.full {
  width: 100%;
}

/* ─── SCREEN BUTTON (recessed tab effect) ─────────────────────────────────────── */

/*
 * Structure: <button class="screen-button"><span>Label</span></button>
 * The tab-like bottom edge uses ::before + ::after pseudo-elements.
 */
.screen-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-screen-glare);
  border: 0.5px solid var(--color-border-strong);
  padding: 4px var(--space-3) 8px;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

.screen-button > span {
  display: block;
  position: relative;
  z-index: 3;
  color: var(--color-screen-text);
}

.screen-button::before {
  content: '';
  position: absolute;
  inset: auto 0.5px 0.5px;
  height: 6px;
  background: var(--color-border-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1;
}

.screen-button::after {
  content: '';
  position: absolute;
  inset: 0 0 3px;
  background: var(--color-screen-glare);
  border-radius: var(--radius-xs);
  box-shadow: 0 0.5px var(--color-border-strong), 0 1px 0 0 var(--color-screen-shade);
  z-index: 2;
}

.screen-button:active::before { height: 3px; }
.screen-button:active::after  { bottom: 1px; }

.screen-button:disabled::before { height: 0; }
.screen-button:disabled { padding-bottom: var(--space-1); cursor: not-allowed; opacity: 0.6; }

/* ─── PATTERN BUTTON (80×80 preview tile) ─────────────────────────────────────── */

.pattern-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--color-screen-shade);
  border: 0.5px solid var(--color-border-strong);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.pattern-button svg,
.pattern-button img {
  display: block;
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 3;
}

.pattern-button::before {
  content: '';
  position: absolute;
  inset: auto 0.5px 0.5px;
  height: 6px;
  background: var(--color-border-strong);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 1;
}

.pattern-button::after {
  content: '';
  position: absolute;
  inset: 0 0 3px;
  background: var(--color-screen);
  border-radius: var(--radius-xs);
  box-shadow: 0 0.5px var(--color-border-strong), 0 1px 0 0 var(--color-screen-shade);
  z-index: 2;
}

.pattern-button.is-active {
  border-color: var(--color-brand-accent);
}
.pattern-button.is-active::before {
  background: var(--color-brand-accent);
}

/* ─── WINDOW CHROME ───────────────────────────────────────────────────────────── */

.window {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}

.window-header {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-window) var(--radius-window) 0 0;
  gap: var(--space-2);
  min-height: 44px;
}

.window-header-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  margin: 0 var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  flex: 1;
  color: var(--color-foreground);
}

.window-header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-surface-recessed);
  border: 0;
  border-radius: var(--radius-full);
  color: var(--color-foreground-muted);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0 1px 2px 1px inset,
    rgba(0, 0, 0, 0.05) 0 0 1px 1px inset;
  transition: background var(--duration-fast);
}

.window-header-button > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow:
    rgba(255, 255, 255, 0.15) 0 1px inset,
    rgba(0, 0, 0, 0.08) 0 -1px inset,
    rgba(0, 0, 0, 0.05) 0 1px 2px;
}

.window-header-button:hover > span {
  background: var(--color-surface-raised);
}

.window-content {
  flex: 1;
  overflow: auto;
}

.window-content-inner {
  padding: var(--space-4);
}

/* ─── SCREEN PANEL (monitor aesthetic) ───────────────────────────────────────── */

.screen-panel {
  background: var(--color-screen);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-screen-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-3);
  box-shadow: inset 0 1px var(--color-screen-shade);
}

/* ─── SLIDER ─────────────────────────────────────────────────────────────────── */

.slider-container {
  display: flex;
  flex-wrap: nowrap;
  background: var(--color-screen);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.slider-wrap {
  position: relative;
  flex: 1 1 0;
  height: 2em;
  display: flex;
  align-items: center;
}

.slider-bar {
  position: absolute;
  inset: 0 1em;
  height: calc(100% - 1em);
  margin: auto 0;
  background: var(--color-screen-glare);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.slider-bar-fill {
  position: absolute;
  inset: 0;
  right: calc(100% - var(--slider-fill, 0%));
  background: var(--color-brand-accent);
  opacity: 0.5;
}

input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 100%;
  height: 2em;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  z-index: 1;
  margin: 0;
}

input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: grab;
  transition: background var(--duration-fast);
}

input[type="range"].slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: var(--color-surface-raised);
}

input[type="range"].slider:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.slider-container input[type="number"] {
  width: 3.5rem;
  background: var(--color-screen);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 1px var(--color-screen-shade);
  color: var(--color-screen-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  text-align: center;
}

/* ─── NUMBER INPUT (stepper) ─────────────────────────────────────────────────── */

.number-input {
  display: inline-flex;
  align-items: stretch;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--color-screen);
}

.number-input button {
  background: var(--color-screen);
  border: 0;
  border-left: 0.5px solid var(--color-border-strong);
  color: var(--color-screen-text);
  font-family: var(--font-family-mono);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
  box-shadow: none;
}

.number-input button:first-of-type {
  border-left: 0;
  border-right: 0.5px solid var(--color-border-strong);
}

.number-input button:hover {
  background: var(--color-screen-shade);
}

.number-input input[type="number"] {
  width: 4rem;
  background: var(--color-screen);
  border: 0;
  box-shadow: inset 0 1px var(--color-screen-shade);
  color: var(--color-screen-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  text-align: center;
}

.number-input input[type="number"]:focus {
  outline: none;
  background: var(--color-screen-glare);
}

/* ─── LABEL BOX ──────────────────────────────────────────────────────────────── */

.label-box {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-screen-text);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3);
  gap: var(--space-3);
}

.label-box > label,
.label-box > legend,
.label-box > span.label {
  display: flex;
  align-items: center;
  font-weight: var(--font-weight-normal);
  margin-right: var(--space-2);
  color: var(--color-foreground-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  min-width: 2rem;
}

/* ─── CONTROL SECTION (label + slider row) ───────────────────────────────────── */

.control-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.control-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-foreground-muted);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.control-label__value {
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground);
  font-weight: var(--font-weight-medium);
}

/* ─── TOGGLE GROUP ───────────────────────────────────────────────────────────── */

.toggle-group {
  display: flex;
  flex-wrap: wrap;
  background: var(--color-screen);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  gap: 0;
}

.toggle-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-screen);
  border: 0;
  border-right: 0.5px solid var(--color-border-strong);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--duration-fast);
  white-space: nowrap;
}

.toggle-btn:last-child { border-right: 0; }

.toggle-btn:hover { background: var(--color-screen-shade); }

.toggle-btn.is-active {
  background: var(--color-brand-accent);
  color: var(--color-foreground-on-accent);
}

.toggle-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── INPUT ──────────────────────────────────────────────────────────────────── */

.input {
  display: block;
  width: 100%;
  background: var(--color-screen);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  box-shadow: inset 0 1px var(--color-screen-shade);
  color: var(--color-screen-text);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--duration-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: inset 0 1px var(--color-screen-shade), 0 0 0 2px var(--color-brand-accent-subtle);
}

.input--error {
  border-color: var(--color-error);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea.input {
  resize: vertical;
  min-height: 80px;
}

/* ─── BADGE ──────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  background: var(--color-brand-accent-subtle);
  border: 1px solid currentColor;
  border-radius: var(--radius-xs);
  color: var(--color-brand-accent);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--success { color: var(--color-success); background: var(--color-success-subtle); }
.badge--warning { color: var(--color-warning); background: var(--color-warning-subtle); }
.badge--error   { color: var(--color-error);   background: var(--color-error-subtle);   }
.badge--info    { color: var(--color-info);     background: var(--color-info-subtle);    }

/* ─── CARD ───────────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* ─── MODAL ──────────────────────────────────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-surface-overlay);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal-overlay.is-open {
  display: flex;
}

.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

.modal--sm { max-width: 320px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

.modal__body { padding: var(--space-4); }
.modal__footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ─── TOAST ──────────────────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 280px;
  max-width: 380px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}

.toast.is-visible  { opacity: 1; transform: translateX(0); }
.toast.is-leaving  { opacity: 0; transform: translateX(16px); }

.toast__icon {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  flex-shrink: 0;
  font-family: var(--font-family-mono);
}

.toast--success .toast__icon { color: var(--color-success); }
.toast--error   .toast__icon { color: var(--color-error);   }
.toast--warning .toast__icon { color: var(--color-warning); }
.toast--info    .toast__icon { color: var(--color-info);    }

.toast__content { flex: 1; min-width: 0; }
.toast__title   { margin: 0 0 2px; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.toast__message { margin: 0; font-size: var(--font-size-xs); color: var(--color-foreground-muted); }

.toast__close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-foreground-muted);
  cursor: pointer;
  font-size: var(--font-size-base);
  line-height: 1;
}
.toast__close:hover { color: var(--color-foreground); }

/* ─── SKELETON ───────────────────────────────────────────────────────────────── */

.skeleton {
  display: block;
  background: linear-gradient(90deg, var(--color-surface-recessed) 25%, var(--color-surface-muted) 50%, var(--color-surface-recessed) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-xs);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── SIDEBAR ────────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  min-height: 100%;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}

.sidebar-section {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
  margin: 0;
}

/* ─── ICON BUTTON ────────────────────────────────────────────────────────────── */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-foreground);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background var(--duration-fast);
}

.icon-btn:hover {
  background: var(--color-surface-recessed);
}

/* ─── ACCORDION ──────────────────────────────────────────────────────────────── */

.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.accordion__item + .accordion__item { border-top: 1px solid var(--color-border); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 0;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  cursor: pointer;
  text-align: left;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: background var(--duration-fast);
}
.accordion__trigger:hover { background: var(--color-surface-recessed); }

.accordion__chevron {
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-default);
  color: var(--color-foreground-muted);
}
.accordion__item.is-open .accordion__chevron { transform: rotate(180deg); }

.accordion__body {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  line-height: var(--line-height-relaxed);
  border-top: 1px solid var(--color-border);
  background: var(--color-screen);
}
.accordion__body p { margin: var(--space-3) 0 0; }
.accordion__item.is-open .accordion__body { display: block; }

/* ─── FONT SELECT WRAPPER ────────────────────────────────────────────────────── */

.font-select-wrap {
  position: relative;
  display: inline-flex;
}

.font-select-wrap::after {
  content: '▾';
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-foreground-muted);
  font-size: 10px;
}

select[data-font-select] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-3);
  cursor: pointer;
}

select[data-font-select]:focus {
  outline: none;
  border-color: var(--color-border-focus);
}

/* ─── PREVIEW BOX ────────────────────────────────────────────────────────────── */

.preview-box {
  background: var(--color-screen);
  border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  box-shadow: inset 0 1px var(--color-screen-shade);
}

.preview-box + .preview-box { margin-top: var(--space-5); }

/* ─── UTILS ──────────────────────────────────────────────────────────────────── */

.flow > * + *           { margin-top: 0.8rem; }
.flow-sm > * + *        { margin-top: 0.5rem; }
.demo-row               { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  color: var(--color-foreground-muted);
  margin: 0 0 var(--space-3);
}