/* UI Parts — copy-paste component gallery. Page chrome below; the demoed components' own
   CSS lives in the same file too (classes prefixed ui-) so the live preview renders with the
   exact rules a visitor copies out. */

.flush { margin-top: 0; }

/* ---- theme control panel ---- */
.panel-theme .row { margin-bottom: 10px; }
.panel-theme input[type="color"] { width: 56px; min-width: 56px; padding: 2px; min-height: 40px; }
.panel-theme input[type="range"] { width: auto; }
.panel-theme input[type="radio"] { width: auto; margin: 0 4px 0 0; }
.panel-theme output { font-variant-numeric: tabular-nums; margin-left: 6px; color: var(--muted); }
.radiogroup { flex-wrap: wrap; }
.radiogroup label { display: inline-flex; align-items: center; gap: 2px; }

/* ---- gallery list chrome ---- */
#gallery-list { margin-top: 12px; }
.ui-gallery-item { margin-bottom: 16px; }
.ui-gallery-head { justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.ui-gallery-head h2 { margin: 0; font-size: 18px; }
.ui-fav { min-width: 40px; font-size: 18px; line-height: 1; padding: 6px 10px; }
.ui-fav[aria-pressed="true"] { background: var(--chip); border-color: var(--accent); color: var(--accent); }
#count { font-weight: 400; }

/* ---- the live-preview "canvas": everything under here carries the shared token set ---- */
.ui-theme {
  --ui-accent: #0b6e4f; --ui-accent-ink: #ffffff;
  --ui-radius: 10px; --ui-space: 10px;
  --ui-bg: #ffffff; --ui-surface: #f7f5f0; --ui-fg: #1d1b16; --ui-line: #e3ded2; --ui-muted: #625d52;
  --ui-danger: #b3261e; --ui-danger-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  .ui-theme:not([data-mode="light"]) {
    --ui-bg: #14130f; --ui-surface: #1e1c17; --ui-fg: #f1ede4; --ui-line: #34302a; --ui-muted: #a8a193; --ui-accent-ink: #0d1a14;
  }
}
.ui-theme[data-mode="dark"] {
  --ui-bg: #14130f; --ui-surface: #1e1c17; --ui-fg: #f1ede4; --ui-line: #34302a; --ui-muted: #a8a193; --ui-accent-ink: #0d1a14;
}
.ui-preview {
  background: var(--ui-bg); color: var(--ui-fg); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  padding: var(--ui-space); margin: 10px 0; overflow-x: auto;
}
.ui-preview input[type="checkbox"], .ui-preview input[type="radio"] { width: auto; }

/* ---- code viewer ---- */
.ui-codetabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ui-codetabs button { min-height: 36px; padding: 4px 10px; font-size: 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; }
.ui-codetabs button[aria-selected="true"] { border-bottom-color: var(--accent); font-weight: 600; }
.ui-codepanel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 0 0 8px;
  font: 13px/1.5 var(--mono); overflow-x: auto; white-space: pre; max-height: 260px; }
.ui-codeview .row { margin-top: 6px; }
[data-copy-status] { min-height: 1.2em; display: inline-block; }

/* ================= demoed components (ui-*) ================= */

/* buttons */
.ui-btn-row { display: flex; flex-wrap: wrap; gap: var(--ui-space); margin-bottom: var(--ui-space); }
.ui-btn { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--ui-radius); border: 1px solid transparent; min-height: 40px; line-height: 1.2; cursor: pointer;
  padding: calc(var(--ui-space) * 0.9) calc(var(--ui-space) * 1.6); }
.ui-btn-primary { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: var(--ui-accent); }
.ui-btn-secondary { background: var(--ui-surface); color: var(--ui-fg); border-color: var(--ui-line); }
.ui-btn-ghost { background: transparent; color: var(--ui-fg); border-color: transparent; }
.ui-btn-danger { background: var(--ui-danger); color: var(--ui-danger-ink); border-color: var(--ui-danger); }
.ui-btn-sm { min-height: 32px; padding: calc(var(--ui-space) * 0.5) calc(var(--ui-space) * 1.1); font-size: 13px; }
.ui-btn-lg { min-height: 48px; padding: calc(var(--ui-space) * 1.1) calc(var(--ui-space) * 2); font-size: 17px; }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }

/* input with label + error */
.ui-field { margin-bottom: var(--ui-space); }
.ui-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--ui-fg); }
.ui-input { font: inherit; width: 100%; background: var(--ui-surface); color: var(--ui-fg); border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius); padding: calc(var(--ui-space) * 0.7) calc(var(--ui-space) * 0.9); min-height: 40px; }
.ui-input[aria-invalid="true"] { border-color: var(--ui-danger); }
.ui-error { color: var(--ui-danger); font-size: 13px; margin: 4px 0 0; }
.ui-hint { color: var(--ui-muted); font-size: 13px; margin: 4px 0 0; }

/* select */
.ui-select { font: inherit; width: 100%; background: var(--ui-surface); color: var(--ui-fg); border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius); padding: calc(var(--ui-space) * 0.7) calc(var(--ui-space) * 0.9); min-height: 40px; }

/* checkbox / switch */
.ui-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; color: var(--ui-fg); }
.ui-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ui-accent); margin: 0; }
.ui-switch { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; cursor: pointer; color: var(--ui-fg); }
.ui-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ui-switch-track { width: 40px; height: 24px; border-radius: 99px; background: var(--ui-line); border: 1px solid var(--ui-line);
  position: relative; flex: 0 0 auto; transition: background .15s; }
.ui-switch-track::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ui-surface); transition: transform .15s; }
.ui-switch input:checked + .ui-switch-track { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-switch input:checked + .ui-switch-track::before { transform: translateX(16px); }
.ui-switch input:focus-visible + .ui-switch-track { outline: 3px solid var(--ui-accent); outline-offset: 2px; }

/* form layout */
.ui-form { max-width: 480px; }
.ui-fieldset { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: var(--ui-space); margin: 0 0 var(--ui-space); }
.ui-fieldset legend { padding: 0 6px; font-weight: 600; color: var(--ui-fg); }
.ui-form-row { display: flex; gap: var(--ui-space); flex-wrap: wrap; }
.ui-form-row .ui-field { flex: 1 1 140px; }
.ui-form-actions { display: flex; gap: var(--ui-space); }

/* card */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: var(--ui-space); max-width: 320px; }
.ui-card-title { margin: 0 0 6px; font-size: 17px; color: var(--ui-fg); }
.ui-card-body { margin: 0 0 var(--ui-space); color: var(--ui-muted); font-size: 14px; }
.ui-card-actions { display: flex; gap: 8px; }

/* stat tile */
.ui-stat-row { display: flex; flex-wrap: wrap; gap: var(--ui-space); }
.ui-stat { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: var(--ui-space); min-width: 140px; }
.ui-stat-label { display: block; font-size: 13px; color: var(--ui-muted); }
.ui-stat-value { display: block; font-size: 26px; font-weight: 700; color: var(--ui-fg); margin: 2px 0; }
.ui-stat-delta { font-size: 13px; font-weight: 600; }
.ui-stat-up { color: #1a7f37; }
.ui-stat-down { color: var(--ui-danger); }

/* table: zebra + responsive scroll */
.ui-table-wrap { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.ui-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.ui-table th, .ui-table td { text-align: left; padding: calc(var(--ui-space) * 0.7) var(--ui-space); white-space: nowrap; }
.ui-table thead th { background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); color: var(--ui-fg); font-size: 13px; }
.ui-table tbody tr:nth-child(even) { background: var(--ui-surface); }
.ui-table tbody td { border-bottom: 1px solid var(--ui-line); color: var(--ui-fg); }

/* badge */
.ui-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: var(--ui-line); color: var(--ui-fg); }
.ui-badge-accent { background: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-badge-success { background: #1a7f37; color: #fff; }
.ui-badge-danger { background: var(--ui-danger); color: var(--ui-danger-ink); }

/* alert / toast */
.ui-alert { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: var(--ui-space); margin-bottom: 8px; font-size: 14px; }
.ui-alert-success { background: #eaf6ee; border-color: #bfe3c9; color: #0d3b1e; }
.ui-alert-danger { background: #fdeceb; border-color: #f3b9b3; color: #5c130d; }
.ui-theme[data-mode="dark"] .ui-alert-success { background: #123821; border-color: #1f5c37; color: #c9f1d4; }
.ui-theme[data-mode="dark"] .ui-alert-danger { background: #3a1210; border-color: #6b211c; color: #ffd9d4; }
@media (prefers-color-scheme: dark) {
  .ui-theme:not([data-mode="light"]) .ui-alert-success { background: #123821; border-color: #1f5c37; color: #c9f1d4; }
  .ui-theme:not([data-mode="light"]) .ui-alert-danger { background: #3a1210; border-color: #6b211c; color: #ffd9d4; }
}
.ui-toast { background: var(--ui-fg); color: var(--ui-bg); border-radius: var(--ui-radius); padding: calc(var(--ui-space) * 0.8) var(--ui-space);
  margin-top: 8px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ui-toast button { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; min-height: 24px; }

/* modal dialog */
.ui-modal { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 0; background: var(--ui-surface); color: var(--ui-fg);
  max-width: 400px; width: 90vw; }
.ui-modal::backdrop { background: rgba(0, 0, 0, .5); }
.ui-modal-body { padding: var(--ui-space); }
.ui-modal-body h2 { margin: 0 0 8px; font-size: 18px; }
.ui-modal-body p { margin: 0 0 var(--ui-space); color: var(--ui-muted); font-size: 14px; }
.ui-modal-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* tabs */
.ui-tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--ui-line); flex-wrap: wrap; }
.ui-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: calc(var(--ui-space) * 0.7) var(--ui-space);
  color: var(--ui-muted); cursor: pointer; font: inherit; min-height: 40px; }
.ui-tab[aria-selected="true"] { color: var(--ui-fg); border-bottom-color: var(--ui-accent); font-weight: 600; }
.ui-tabpanel { padding: var(--ui-space) 4px; color: var(--ui-fg); font-size: 14px; }

/* accordion (native details/summary) */
.ui-accordion { border: 1px solid var(--ui-line); border-radius: var(--ui-radius); margin-bottom: 8px; background: var(--ui-surface); }
.ui-accordion summary { cursor: pointer; padding: var(--ui-space); font-weight: 600; color: var(--ui-fg); list-style: none; }
.ui-accordion summary::-webkit-details-marker { display: none; }
.ui-accordion summary::before { content: "+"; display: inline-block; width: 1em; color: var(--ui-accent); }
.ui-accordion[open] summary::before { content: "\2212"; }
.ui-accordion-body { padding: 0 var(--ui-space) var(--ui-space); color: var(--ui-muted); font-size: 14px; }

/* navbar that collapses on mobile */
.ui-navbar { display: flex; align-items: center; gap: var(--ui-space); flex-wrap: wrap; background: var(--ui-surface);
  border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: calc(var(--ui-space) * 0.7) var(--ui-space); }
.ui-navbar-brand { font-weight: 700; color: var(--ui-fg); margin-right: auto; }
.ui-navbar-toggle { display: none; background: transparent; border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  min-height: 36px; padding: 4px 10px; color: var(--ui-fg); cursor: pointer; }
.ui-navbar-links { display: flex; gap: var(--ui-space); flex-wrap: wrap; width: 100%; }
.ui-navbar-links a { color: var(--ui-fg); text-decoration: none; padding: 6px 4px; }
.ui-navbar-cta { color: var(--ui-accent); font-weight: 600; }
@media (max-width: 560px) {
  .ui-navbar-toggle { display: inline-block; }
  .ui-navbar-links { display: none; flex-direction: column; order: 3; }
  .ui-navbar-links.ui-open { display: flex; }
}

/* pagination */
.ui-pagination { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ui-page-btn { min-width: 36px; min-height: 36px; border: 1px solid var(--ui-line); background: var(--ui-surface); color: var(--ui-fg);
  border-radius: var(--ui-radius); cursor: pointer; font: inherit; }
.ui-page-current { background: var(--ui-accent); color: var(--ui-accent-ink); border-color: var(--ui-accent); }
.ui-page-ellipsis { color: var(--ui-muted); padding: 0 4px; }

/* empty state */
.ui-empty { text-align: center; border: 1px dashed var(--ui-line); border-radius: var(--ui-radius); padding: calc(var(--ui-space) * 2) var(--ui-space); color: var(--ui-muted); }
.ui-empty-title { font-weight: 700; color: var(--ui-fg); margin: 0 0 4px; font-size: 16px; }
.ui-empty-body { margin: 0 0 var(--ui-space); }