/* Minimal global styles to prove composition works */
:root { color-scheme: light dark; }
html, body { margin: 0; font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
main { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
h1, h2, h3 { line-height: 1.2; }
ul { padding-left: 1.25rem; }

/* Theme variables (DROP-IN UPGRADE: derived from --seed) */
:root {
  /* seed color users can set (JS can update this var) */
  --seed: oklch(62% 0.12 260); /* indigo-ish default */

  /* light-mode monochrome ramp from seed */
  --mono-1:  color-mix(in oklab, white 92%, var(--seed));
  --mono-2:  color-mix(in oklab, white 88%, var(--seed));
  --mono-3:  color-mix(in oklab, white 84%, var(--seed));
  --mono-4:  color-mix(in oklab, white 78%, var(--seed));
  --mono-5:  color-mix(in oklab, white 72%, var(--seed));
  --mono-6:  color-mix(in oklab, white 66%, var(--seed));
  --mono-7:  color-mix(in oklab, white 58%, var(--seed));
  --mono-8:  color-mix(in oklab, white 50%, var(--seed));
  --mono-9:  color-mix(in oklab, white 42%, var(--seed));
  --mono-10: color-mix(in oklab, white 34%, var(--seed));
  --mono-11: color-mix(in oklab, white 26%, var(--seed));
  --mono-12: color-mix(in oklab, black 10%,  var(--seed));

  /* map your existing tokens */
  --bg:      var(--mono-1);
  --text:    color-mix(in oklab, var(--mono-12) 90%, black);
  --muted:   color-mix(in oklab, var(--mono-11) 55%, var(--text) 45%);
  --border:  color-mix(in oklab, var(--mono-12) 12%, white);
  --surface: var(--mono-2);

  /* single accent preserved, but derived from ramp */
  --accent:  var(--mono-10);

  /* functional colors stay “on brand” by tinting from seed */
  --success: color-mix(in oklab, var(--seed) 30%, oklch(70% 0.16 142));
  --warning: color-mix(in oklab, var(--seed) 22%, oklch(78% 0.18 85));
  --danger:  color-mix(in oklab, var(--seed) 22%, oklch(65% 0.20 25));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --mono-1:  color-mix(in oklab, rgba(0, 0, 0, 0.47) 86%, var(--seed));
    --mono-2:  color-mix(in oklab, black 82%, var(--seed));
    --mono-3:  color-mix(in oklab, black 78%, var(--seed));
    --mono-4:  color-mix(in oklab, black 72%, var(--seed));
    --mono-5:  color-mix(in oklab, black 66%, var(--seed));
    --mono-6:  color-mix(in oklab, black 60%, var(--seed));
    --mono-7:  color-mix(in oklab, black 52%, var(--seed));
    --mono-8:  color-mix(in oklab, black 44%, var(--seed));
    --mono-9:  color-mix(in oklab, black 36%, var(--seed));
    --mono-10: color-mix(in oklab, black 28%, var(--seed));
    --mono-11: color-mix(in oklab, black 20%, var(--seed));
    --mono-12: color-mix(in oklab, white 8%,  var(--seed));

    --bg:      var(--mono-1);
    --text:    color-mix(in oklab, white 92%, var(--mono-12));
    --muted:   color-mix(in oklab, var(--text) 60%, var(--mono-10) 40%);
    --border:  color-mix(in oklab, var(--mono-12) 22%, white 4%);
    --surface: color-mix(in oklab, var(--mono-1) 70%, var(--mono-2));
    --accent:  var(--mono-11);

    --success: color-mix(in oklab, var(--seed) 35%, oklch(70% 0.16 142));
    --warning: color-mix(in oklab, var(--seed) 26%, oklch(78% 0.18 85));
    --danger:  color-mix(in oklab, var(--seed) 26%, oklch(65% 0.20 25));
  }
}

[data-theme='dark'] {
  /* dark-mode ramp */
  --mono-1:  color-mix(in oklab, rgba(0, 0, 0, 0.47) 86%, var(--seed));
  --mono-2:  color-mix(in oklab, black 82%, var(--seed));
  --mono-3:  color-mix(in oklab, black 78%, var(--seed));
  --mono-4:  color-mix(in oklab, black 72%, var(--seed));
  --mono-5:  color-mix(in oklab, black 66%, var(--seed));
  --mono-6:  color-mix(in oklab, black 60%, var(--seed));
  --mono-7:  color-mix(in oklab, black 52%, var(--seed));
  --mono-8:  color-mix(in oklab, black 44%, var(--seed));
  --mono-9:  color-mix(in oklab, black 36%, var(--seed));
  --mono-10: color-mix(in oklab, black 28%, var(--seed));
  --mono-11: color-mix(in oklab, black 20%, var(--seed));
  --mono-12: color-mix(in oklab, white 8%,  var(--seed));

  --bg:      var(--mono-1);
  --text:    color-mix(in oklab, white 92%, var(--mono-12));
  --muted:   color-mix(in oklab, var(--text) 60%, var(--mono-10) 40%);
  --border:  color-mix(in oklab, var(--mono-12) 22%, white 4%);
  --surface: color-mix(in oklab, var(--mono-1) 70%, var(--mono-2));
  --accent:  var(--mono-11);

  --success: color-mix(in oklab, var(--seed) 35%, oklch(70% 0.16 142));
  --warning: color-mix(in oklab, var(--seed) 26%, oklch(78% 0.18 85));
  --danger:  color-mix(in oklab, var(--seed) 26%, oklch(65% 0.20 25));
}
html { background: var(--bg); color: var(--text); }

/* Chrome */
.site-chrome {
  position: sticky; top: 0; z-index: 1000;
  display: grid; grid-template-columns: auto 1fr auto; gap: .75rem;
  align-items: center;
  padding: .5rem .75rem; border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
}
.back-btn, .theme-toggle {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); border-radius: 10px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.breadcrumb { font-size: .9rem; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; opacity: .9; transition: max-width .2s ease, opacity .2s ease; }
/* Keep it subtle on narrow screens; reveal on hover */
@media (max-width: 640px) {
  .breadcrumb { max-width: 0; opacity: 0; }
  .site-chrome:hover .breadcrumb,
  .site-chrome .header-start:hover ~ .header-center .breadcrumb { max-width: 100%; opacity: 1; padding-left: .25rem; }
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }

/* Buttons demo */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-radius: .6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none; /* ← add this */
}

.btn:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn.ghost { background: transparent; }
.btn.icon { width: 36px; height: 36px; justify-content: center; padding: 0; }

/* Spin support for icons */
.icon.spin svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: 999px; font-size: .8rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.badge.accent { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); color: var(--text); }
.badge.success { background: color-mix(in oklab, var(--success) 12%, var(--surface)); border-color: color-mix(in oklab, var(--success) 50%, var(--border)); }
.badge.warning { background: color-mix(in oklab, var(--warning) 12%, var(--surface)); border-color: color-mix(in oklab, var(--warning) 50%, var(--border)); }
.badge.danger { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); border-color: color-mix(in oklab, var(--danger) 50%, var(--border)); }

/* Alert */
.alert { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--surface); }
.alert .title { font-weight: 600; }
.alert.info { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.alert.success { border-color: color-mix(in oklab, var(--success) 50%, var(--border)); background: color-mix(in oklab, var(--success) 10%, var(--surface)); }
.alert.warning { border-color: color-mix(in oklab, var(--warning) 50%, var(--border)); background: color-mix(in oklab, var(--warning) 10%, var(--surface)); }
.alert.danger { border-color: color-mix(in oklab, var(--danger) 50%, var(--border)); background: color-mix(in oklab, var(--danger) 10%, var(--surface)); }

/* Card */
.card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.card .card-header { display:flex; align-items:center; gap:.5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.card .card-body { padding: 1rem; }

/* Tabs */
.tabs { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tabs-nav { display:flex; gap:.25rem; padding:.5rem; border-bottom:1px solid var(--border); flex-wrap: wrap; }
.tabs-nav a { padding:.45rem .75rem; border-radius: 8px; color: var(--muted); text-decoration:none; }
.tabs-nav a.active, .tabs-nav a:hover { color: var(--text); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.tabs-panels { padding: 1rem; }
/* Minimal animated tabs */
.tabs-panels .panel {
  display: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.tabs-panels .panel.active { display: block; opacity: 1; transform: none; }
/* No-JS fallback: use hash routing */
.tabs-panels:has(.panel:target) .panel { display: none; }
.tabs-panels .panel:target { display: block; opacity: 1; transform: none; }
/* Animate HTMX-inserted content */
.tabs-panels .panel .htmx-added { animation: fadeSlideIn 150ms ease both; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Accordion */
.accordion .acc-item { border:1px solid var(--border); border-radius: 10px; background: var(--surface); margin-bottom:.5rem; overflow:hidden; }
.acc-summary { cursor:pointer; list-style:none; padding:.6rem .8rem; font-weight:600; }
.acc-panel { padding: .6rem .8rem; color: var(--muted); }

/* Progress */
.progress { height: 10px; background: color-mix(in oklab, var(--accent) 12%, var(--surface)); border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.progress .progress-bar { height:100%; background: var(--accent); }

/* Inputs & Switch */
.input { display:block; width:100%; padding:.6rem .75rem; border:1px solid var(--border); background: var(--surface); color: var(--text); border-radius:10px; }
.switch { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; }
.switch input[type="checkbox"] { appearance:none; width:40px; height:24px; background: var(--border); border-radius:999px; position:relative; outline:none; transition:background .2s ease; }
.switch input[type="checkbox"]:after { content:''; width:18px; height:18px; background: var(--bg); position:absolute; left:3px; top:3px; border-radius:50%; transition: transform .2s ease; }
.switch input[type="checkbox"]:checked { background: var(--accent); }
.switch input[type="checkbox"]:checked:after { transform: translateX(16px); }