/* ───────────────────────────────────────────────────────────
   dieter / system.css · c-001 · v0.1
   reset + primitives + 14 components
   ─────────────────────────────────────────────────────────── */

@import url('tokens.css');

/* ── reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  line-height: 1.5;
  letter-spacing: var(--track-norm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--invert-fg); }

/* ── type primitives ───────────────────────────────────────── */
.t-hero {
  font: var(--w-heavy) clamp(var(--t-48), 7vw, var(--t-96))/0.92 var(--font-sans);
  letter-spacing: var(--track-tight);
}
.t-h1   { font: var(--w-heavy) var(--t-42)/0.95 var(--font-sans); letter-spacing: var(--track-tight); }
.t-h2   { font: var(--w-bold) var(--t-28)/1     var(--font-sans); letter-spacing: var(--track-snug); }
.t-h3   { font: var(--w-bold) var(--t-22)/1.1   var(--font-sans); letter-spacing: var(--track-near); }
.t-h4   { font: var(--w-bold) var(--t-18)/1.2   var(--font-sans); letter-spacing: var(--track-near); }
.t-lead { font: var(--w-regular) var(--t-15)/1.55 var(--font-sans); color: var(--fg-muted); }
.t-body { font: var(--w-regular) var(--t-13)/1.55 var(--font-sans); }
.t-meta { font: var(--w-medium)  var(--t-10)/1.5  var(--font-mono); color: var(--fg-muted); letter-spacing: var(--track-wide); }
.t-code { font: var(--w-medium)  var(--t-11)/1.4  var(--font-mono); }
.t-cap  { font: var(--w-medium)  var(--t-8)/1     var(--font-mono); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--fg-faint); }

.t-mute { color: var(--fg-muted); }
.t-faint{ color: var(--fg-faint); }
.t-fg   { color: var(--fg); }
.t-accent { color: var(--accent); }

.light { color: var(--fg-muted); font-weight: var(--w-regular); }
.slash { color: var(--accent); font-weight: var(--w-regular); }

/* ── layout primitives ─────────────────────────────────────── */
.frame { max-width: var(--max-w); margin: 0 auto; padding: var(--s-32) var(--gutter) var(--s-80); }
.row   { display: flex; align-items: center; gap: var(--s-12); }
.between { display: flex; justify-content: space-between; align-items: center; }
.stack { display: flex; flex-direction: column; }
.hr    { height: var(--line-w); background: var(--border); border: 0; }

/* ── navbar / top-bar — n-001 ──────────────────────────────── */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--s-16);
  border-bottom: var(--line-w) solid var(--border);
  font-size: var(--t-12);
}
.navbar-crumbs { display: flex; gap: var(--s-24); color: var(--fg-muted); }
.navbar-crumbs a { color: var(--fg-muted); transition: color var(--dur-quick) var(--ease); }
.navbar-crumbs a:hover,
.navbar-crumbs .active { color: var(--fg); font-weight: var(--w-medium); }
.navbar-right {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
}

/* ── eyebrow — e-001 ───────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--w-medium);
  color: var(--accent);
}

/* ── meta panel — mp-001 (key/value list) ──────────────────── */
.meta-panel {
  border: var(--line-w) solid var(--border);
  background: var(--bg-raised);
  padding: var(--s-20);
}
.meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: var(--s-8) 0;
  border-bottom: var(--line-w) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-11);
}
.meta-row:last-child { border-bottom: 0; }
.meta-row .k { color: var(--fg-muted); }
.meta-row .v { color: var(--fg); font-weight: var(--w-medium); }

/* ── button — b-001 primary, b-002 ghost, link-mono ────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-10);
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding: var(--s-14) var(--s-18);
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  text-transform: lowercase;
  letter-spacing: var(--track-wide);
  transition: background var(--dur-quick) var(--ease),
              color var(--dur-quick) var(--ease);
}
.btn:hover  { filter: brightness(0.92); }
.btn:active { background: var(--accent); color: var(--invert-fg); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--fg); border: var(--line-w) solid var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn-arrow { font-family: var(--font-sans); font-size: var(--t-16); }

.link-mono {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--accent);
  font-weight: var(--w-medium);
}
.link-mono:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── input — i-001 ─────────────────────────────────────────── */
.input {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  background: var(--bg);
  border: var(--line-w) solid var(--fg);
  padding: var(--s-12) var(--s-14);
}
.input-prefix {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--accent);
  font-weight: var(--w-semibold);
}
.input-text {
  flex: 1;
  font-size: var(--t-12);
  color: var(--fg-muted);
}
.input-text strong { color: var(--fg); font-weight: var(--w-medium); }
.kbd {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-muted);
  border: var(--line-w) solid var(--border);
  padding: var(--s-2) var(--s-6);
  background: var(--bg-raised);
}

/* ── tabs — tb-001 horizontal underline ────────────────────── */
.tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: var(--line-w) solid var(--border);
  overflow-x: auto;
}
.tab {
  padding: var(--s-8) var(--s-10) var(--s-10);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-medium);
  color: var(--fg-muted);
  border-bottom: var(--line-w-2) solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-quick) var(--ease);
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

/* ── badge — bd-001 ────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-9);
  font-weight: var(--w-medium);
  padding: var(--s-2) var(--s-6);
  letter-spacing: var(--track-wide);
}
.badge--ok    { background: var(--green);  color: var(--paper); }
.badge--new   { background: var(--orange); color: var(--paper); }
.badge--warn  { background: var(--yellow); color: var(--ink); }
.badge--danger{ background: var(--red);    color: var(--paper); }
.badge--ghost { background: transparent; color: var(--fg-muted); border: var(--line-w) solid var(--border); }

/* ── dot — d-001 status dot ────────────────────────────────── */
.dot {
  display: inline-block;
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-circle);
  background: var(--fg-faint);
}
.dot--orange { background: var(--orange); }
.dot--yellow { background: var(--yellow); }
.dot--blue   { background: var(--blue); }
.dot--green  { background: var(--green); }
.dot--red    { background: var(--red); }
.dot--pink   { background: var(--pink); }
.dot--led    { background: var(--green); box-shadow: var(--glow-led); }

/* ── avatar — av-001 ───────────────────────────────────────── */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-circle);
  background: var(--accent);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-15);
  text-transform: lowercase;
}

/* ── icon — ic-001 (lucide) ────────────────────────────────── */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
.icon--sm svg { width: 12px; height: 12px; stroke-width: 2; }
.icon--lg svg { width: 20px; height: 20px; stroke-width: 1.5; }

.item-icon svg     { width: 18px; height: 18px; stroke-width: 1.75; }
.check svg         { width: 10px; height: 10px; stroke-width: 3; }
.btn-arrow svg     { width: 16px; height: 16px; stroke-width: 2; }
.input-prefix svg  { width: 14px; height: 14px; stroke-width: 2; }
.kbd svg           { width: 11px; height: 11px; stroke-width: 2; }

/* ── card — c-001 base, c-002 selected, c-003 featured ─────── */
.card {
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  padding: var(--s-14);
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
.card:hover { background: var(--bg-raised); }
.card--selected { border-color: var(--fg); background: var(--bg-raised); }
.card--featured { border-color: var(--fg); background: var(--bg-raised); }
.card--raised   { background: var(--bg-raised); }
.card--inset    { background: var(--bg-raised); border-color: var(--border); }

.item { display: flex; align-items: center; gap: var(--s-12); }
.item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  color: var(--fg);
  flex-shrink: 0;
}
.item-icon--ink { background: var(--invert-bg); color: var(--invert-fg); border-color: var(--invert-bg); }
.item-icon.col-orange { color: var(--orange); }
.item-icon.col-yellow { color: var(--yellow); }
.item-icon.col-blue   { color: var(--blue); }
.item-icon.col-green  { color: var(--green); }
.item-icon.col-red    { color: var(--red); }
.item-icon.col-pink   { color: var(--pink); }
.item-content { flex: 1; min-width: 0; }
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-4);
}
.item-name {
  font-family: var(--font-sans);
  font-size: var(--t-14);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-near);
}
.item-code {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-muted);
}
.item-desc {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
}
.item-meta {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.item-meta-sep::before { content: '/'; color: var(--fg-faint); margin-right: var(--s-2); }

.check {
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: var(--paper);
  border-radius: var(--r-circle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-11);
  font-weight: var(--w-bold);
}

/* ── stat strip — st-001 ───────────────────────────────────── */
.stat-strip {
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding: var(--s-14);
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
}
.stat-cell { text-align: left; }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--t-8);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  margin-bottom: var(--s-4);
  text-transform: lowercase;
}
.stat-value {
  font-family: var(--font-sans);
  font-size: var(--t-18);
  font-weight: var(--w-bold);
  line-height: 1;
  color: var(--invert-fg);
}
.stat-value--accent { color: var(--accent); }

/* ── lcd — l-001 · system readout (crisp, v0.1) ────────────── */
.lcd {
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding: var(--s-16);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.7;
}
.lcd-row { display: flex; justify-content: space-between; }
.lcd .ok      { color: var(--green); }
.lcd .pending { color: var(--yellow); }
.lcd .err     { color: var(--red); }
.lcd .dim     { color: var(--fg-faint); }

/* ── knob — k-001 control affordance ───────────────────────── */
.knob {
  aspect-ratio: 1;
  background: var(--bg);
  border: 1.5px solid var(--fg);
  border-radius: var(--r-circle);
  position: relative;
  width: 100%;
}
.knob::after {
  content: '';
  position: absolute;
  top: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  width: var(--s-2);
  height: var(--s-8);
  background: var(--fg);
}
.knob--active { background: var(--accent); border-color: var(--accent); }
.knob--active::after { background: var(--bg); }
.knob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8);
}

/* ── status bar — sb-001 (device chrome) ───────────────────── */
.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-14) var(--s-22) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-medium);
  color: var(--fg);
}

/* ── device frame — df-001 ─────────────────────────────────── */
.device {
  aspect-ratio: 9/19.5;
  background: var(--ink);
  padding: var(--s-8);
  border-radius: var(--r-device);
  border: var(--line-w) solid #444;
  box-shadow: var(--shadow-device);
}
.device-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: var(--r-screen);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── section label — sl-001 ────────────────────────────────── */
.section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) 0 var(--s-8);
}
.section-label h4 {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-medium);
  color: var(--fg-muted);
}

/* ── notes grid — nt-001 ───────────────────────────────────── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--line-w) solid var(--border);
  border-left: var(--line-w) solid var(--border);
}
.note {
  padding: var(--s-28);
  border-right: var(--line-w) solid var(--border);
  border-bottom: var(--line-w) solid var(--border);
  background: var(--bg);
}
.note h4 .num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-medium);
  color: var(--accent);
  margin-bottom: var(--s-8);
}
.note p {
  font-size: var(--t-13);
  color: var(--fg-muted);
  line-height: 1.65;
  margin-top: var(--s-12);
}

/* ── swatches / docs ───────────────────────────────────────── */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0;
  border-top: var(--line-w) solid var(--border);
  border-left: var(--line-w) solid var(--border);
}
.swatch {
  border-right: var(--line-w) solid var(--border);
  border-bottom: var(--line-w) solid var(--border);
  background: var(--bg);
}
.swatch-fill {
  aspect-ratio: 4/3;
  border-bottom: var(--line-w) solid var(--border);
}
.swatch-meta {
  padding: var(--s-12) var(--s-14);
  font-family: var(--font-mono);
  font-size: var(--t-10);
}
.swatch-name { color: var(--fg); font-weight: var(--w-medium); display: block; margin-bottom: var(--s-2); }
.swatch-hex  { color: var(--fg-muted); text-transform: uppercase; }
.swatch-var  { color: var(--fg-faint); }

.scale-row {
  display: grid;
  grid-template-columns: 120px 80px 1fr;
  align-items: baseline;
  padding: var(--s-14) 0;
  border-bottom: var(--line-w) solid var(--border);
}
.scale-row .name { font-family: var(--font-mono); font-size: var(--t-10); color: var(--fg-muted); }
.scale-row .val  { font-family: var(--font-mono); font-size: var(--t-10); color: var(--fg-faint); }
.scale-row .ex   { color: var(--fg); }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  border-top: var(--line-w) solid var(--border);
  border-left: var(--line-w) solid var(--border);
}
.spec {
  padding: var(--s-20);
  border-right: var(--line-w) solid var(--border);
  border-bottom: var(--line-w) solid var(--border);
  background: var(--bg);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.spec-code {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--accent);
  margin-bottom: var(--s-12);
}
.spec-name {
  font-family: var(--font-sans);
  font-size: var(--t-15);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-near);
  margin-bottom: var(--s-4);
}
.spec-desc {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: var(--s-16);
}
.spec-demo {
  padding: var(--s-16);
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex: 1;
}
.spec-demo > * {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.jp-footer {
  margin-top: var(--s-80);
  padding: var(--s-40) var(--gutter) var(--s-60);
  border-top: var(--line-w) solid var(--border);
  text-align: center;
}
.jp-footer-text {
  font-family: var(--font-jp);
  font-size: var(--t-11);
  color: var(--fg-muted);
  line-height: 1.8;
  max-width: 500px;
  margin: 0 auto var(--s-16);
}
.jp-footer-meta {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
}

/* ── theme toggle — th-001 ─────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-6) var(--s-10);
  border: var(--line-w) solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-wide);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
.theme-toggle:hover { background: var(--bg-raised); border-color: var(--fg-muted); }
.theme-toggle svg   { width: 12px; height: 12px; stroke-width: 2; }

.theme-toggle [data-icon-night],
.theme-toggle [data-label-night] { display: none; }
:root.theme-night .theme-toggle [data-icon-day],
:root.theme-night .theme-toggle [data-label-day]   { display: none; }
:root.theme-night .theme-toggle [data-icon-night],
:root.theme-night .theme-toggle [data-label-night] { display: inline-flex; }

/* day/night demo pair */
.theme-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--line-w) solid var(--border);
}
.theme-pair > div {
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.theme-pair > div + div { border-left: var(--line-w) solid var(--border); }
.theme-pair .day   { background: var(--paper); color: var(--ink); }
.theme-pair .night { background: var(--night); color: var(--milk); }
.theme-pair .tp-label {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: currentColor;
  opacity: 0.6;
  margin-bottom: var(--s-8);
  letter-spacing: var(--track-wide);
}
.theme-pair .tp-strip {
  padding: var(--s-14);
  display: flex;
  justify-content: space-between;
}
.theme-pair .day   .tp-strip { background: var(--ink);  color: var(--paper); }
.theme-pair .night .tp-strip { background: var(--milk); color: var(--night); }
.theme-pair .tp-strip .v { font: var(--w-bold) var(--t-18)/1 var(--font-sans); }
.theme-pair .tp-strip .v.a { color: var(--orange); }
.theme-pair .tp-strip .k { font: var(--w-medium) var(--t-8)/1 var(--font-mono); letter-spacing: var(--track-cap); opacity: 0.6; margin-bottom: var(--s-4); }

/* ═══════════════════════════════════════════════════════════
   v0.2 extended primitives
   forms · feedback · data · navigation · content · layout
   ═══════════════════════════════════════════════════════════ */

/* ── form field — ff-001 · label + control + helper/error ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.form-field-label {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
}
.form-field-label .req { color: var(--accent); margin-left: var(--s-2); }
.form-field-helper {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-faint);
  letter-spacing: var(--track-wide);
}
.form-field-error {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--red);
  letter-spacing: var(--track-wide);
}

/* ── native text input — i-002 ─────────────────────────────── */
.field {
  width: 100%;
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  padding: var(--s-10) var(--s-12);
  font-family: var(--font-sans);
  font-size: var(--t-13);
  color: var(--fg);
  outline: 0;
  transition: border-color var(--dur-quick) var(--ease);
}
.field:hover  { border-color: var(--fg-muted); }
.field:focus  { border-color: var(--fg); }
.field::placeholder { color: var(--fg-faint); }
.field[aria-invalid="true"] { border-color: var(--red); }
.field:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── textarea — ta-001 ─────────────────────────────────────── */
.textarea {
  width: 100%;
  min-height: 88px;
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  padding: var(--s-10) var(--s-12);
  font-family: var(--font-sans);
  font-size: var(--t-13);
  line-height: 1.55;
  color: var(--fg);
  outline: 0;
  resize: vertical;
  transition: border-color var(--dur-quick) var(--ease);
}
.textarea:focus { border-color: var(--fg); }
.textarea::placeholder { color: var(--fg-faint); }

/* ── select — sl-001 ───────────────────────────────────────── */
.select-wrap { position: relative; display: inline-block; width: 100%; }
.select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  padding: var(--s-10) var(--s-32) var(--s-10) var(--s-12);
  font-family: var(--font-sans);
  font-size: var(--t-13);
  color: var(--fg);
  outline: 0;
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease);
}
.select:focus { border-color: var(--fg); }
.select-wrap::after {
  content: '';
  position: absolute;
  right: var(--s-14); top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--fg-muted);
  border-bottom: 1.5px solid var(--fg-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ── checkbox — cb-001 ─────────────────────────────────────── */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  cursor: pointer;
  user-select: none;
  font-size: var(--t-13);
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-box {
  width: 16px; height: 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
.checkbox input:checked + .checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox-box svg { width: 10px; height: 10px; opacity: 0; stroke-width: 3; color: var(--paper); }
.checkbox input:checked + .checkbox-box svg { opacity: 1; }
.checkbox input:focus-visible + .checkbox-box { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── radio — r-001 ─────────────────────────────────────────── */
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  cursor: pointer;
  user-select: none;
  font-size: var(--t-13);
}
.radio input { position: absolute; opacity: 0; pointer-events: none; }
.radio-dot {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-circle);
  background: var(--bg);
  position: relative;
  flex-shrink: 0;
  transition: border-color var(--dur-quick) var(--ease);
}
.radio-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: var(--r-circle);
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease);
}
.radio input:checked + .radio-dot { border-color: var(--accent); }
.radio input:checked + .radio-dot::after { opacity: 1; }

/* ── toggle — tg-001 switch ────────────────────────────────── */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  cursor: pointer;
  user-select: none;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track {
  width: 32px; height: 18px;
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--fg-muted);
  transition: transform var(--dur-quick) var(--ease),
              background var(--dur-quick) var(--ease);
}
.toggle input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle input:checked + .toggle-track .toggle-thumb {
  background: var(--bg);
  transform: translateX(14px);
}
.toggle-label {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
}

/* ── range — rg-001 slider ─────────────────────────────────── */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  outline: 0;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border-radius: var(--r-circle);
  cursor: grab;
}
.range::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--accent);
  border: 0;
  border-radius: var(--r-circle);
  cursor: grab;
}
.range:active::-webkit-slider-thumb { cursor: grabbing; }

/* ── search — sr-001 ───────────────────────────────────────── */
.search {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  padding: var(--s-10) var(--s-12);
  transition: border-color var(--dur-quick) var(--ease);
}
.search:focus-within { border-color: var(--fg); }
.search svg { color: var(--fg-muted); width: 14px; height: 14px; flex-shrink: 0; }
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font-family: var(--font-sans);
  font-size: var(--t-13);
  color: var(--fg);
  min-width: 0;
}
.search input::placeholder { color: var(--fg-faint); }
.search .kbd { flex-shrink: 0; }

/* ── banner — bn-001 alert ─────────────────────────────────── */
.banner {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: var(--s-12);
  align-items: start;
  padding: var(--s-12) var(--s-14);
  border: var(--line-w) solid var(--border);
  background: var(--bg-raised);
}
.banner > svg { width: 14px; height: 14px; margin-top: 2px; }
.banner-title {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  text-transform: lowercase;
  letter-spacing: var(--track-wide);
  margin-bottom: var(--s-2);
}
.banner-body { font-size: var(--t-12); color: var(--fg-muted); line-height: 1.55; }
.banner--info    { border-color: var(--blue);   background: color-mix(in srgb, var(--blue) 6%, var(--bg)); }
.banner--info    .banner-title, .banner--info    > svg { color: var(--blue); }
.banner--warn    { border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, var(--bg)); }
.banner--warn    .banner-title, .banner--warn    > svg { color: color-mix(in srgb, var(--yellow) 70%, var(--ink)); }
.banner--danger  { border-color: var(--red);    background: color-mix(in srgb, var(--red) 6%, var(--bg)); }
.banner--danger  .banner-title, .banner--danger  > svg { color: var(--red); }
.banner--ok      { border-color: var(--green);  background: color-mix(in srgb, var(--green) 6%, var(--bg)); }
.banner--ok      .banner-title, .banner--ok      > svg { color: var(--green); }
.banner-dismiss {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-faint);
  cursor: pointer;
  letter-spacing: var(--track-wide);
  background: transparent; border: 0;
}

/* ── tooltip — tt-001 ──────────────────────────────────────── */
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip {
  position: absolute;
  bottom: calc(100% + var(--s-6));
  left: 50%;
  transform: translateX(-50%);
  background: var(--invert-bg);
  color: var(--invert-fg);
  padding: var(--s-4) var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease);
  z-index: var(--z-overlay);
}
.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip { opacity: 1; }

/* ── progress — pr-001 bar ─────────────────────────────────── */
.progress {
  width: 100%;
  height: 6px;
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease);
}
.progress--indeterminate .progress-bar {
  width: 30%;
  animation: progress-slide 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes progress-slide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(420%); }
}

/* ── spinner — spn-001 ─────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 1.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--r-circle);
  animation: spinner-rot 0.8s linear infinite;
}
.spinner--lg { width: 20px; height: 20px; border-width: 2px; }
.spinner--sm { width: 10px; height: 10px; border-width: 1.5px; }
@keyframes spinner-rot { to { transform: rotate(360deg); } }

/* ── skeleton — sk-001 ─────────────────────────────────────── */
.skel {
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  position: relative;
  overflow: hidden;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg) 9%, transparent), transparent);
  transform: translateX(-100%);
  animation: skel-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes skel-shimmer { to { transform: translateX(100%); } }
.skel--line   { height: 10px; }
.skel--head   { height: 24px; max-width: 60%; }
.skel--block  { aspect-ratio: var(--ar-card); }
.skel--circle { aspect-ratio: var(--ar-square); border-radius: var(--r-circle); }
.skel-stack > * + * { margin-top: var(--s-8); }

/* ── modal — md-001 dialog ─────────────────────────────────── */
.modal-scrim {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--s-24);
}
.modal-scrim.is-open { display: flex; }
.modal {
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  width: min(480px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-14) var(--s-18);
  border-bottom: var(--line-w) solid var(--border);
}
.modal-title {
  font-family: var(--font-sans);
  font-size: var(--t-15);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-near);
}
.modal-close {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  cursor: pointer;
  letter-spacing: var(--track-wide);
  background: transparent; border: 0;
}
.modal-body { padding: var(--s-18); overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--s-8);
  padding: var(--s-14) var(--s-18);
  border-top: var(--line-w) solid var(--border);
}

/* ── empty state — em-001 ──────────────────────────────────── */
.empty {
  padding: var(--s-48) var(--s-24);
  text-align: center;
  border: var(--line-w) dashed var(--border);
  background: var(--bg);
}
.empty-icon {
  width: 40px; height: 40px;
  margin: 0 auto var(--s-16);
  display: flex; align-items: center; justify-content: center;
  border: var(--line-w) solid var(--border);
  color: var(--fg-muted);
}
.empty-icon svg { width: 18px; height: 18px; }
.empty-title {
  font-family: var(--font-sans);
  font-size: var(--t-15);
  font-weight: var(--w-semibold);
  margin-bottom: var(--s-6);
  letter-spacing: var(--track-near);
}
.empty-desc {
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  margin-bottom: var(--s-16);
  max-width: 320px;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ── kpi tile — kp-001 ─────────────────────────────────────── */
.kpi {
  padding: var(--s-16) var(--s-18);
  border: var(--line-w) solid var(--border);
  background: var(--bg);
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
  margin-bottom: var(--s-8);
}
.kpi-value {
  font-family: var(--font-sans);
  font-size: var(--t-28);
  font-weight: var(--w-bold);
  line-height: 1;
  letter-spacing: var(--track-near);
  font-variant-numeric: tabular-nums;
}
.kpi-value .unit {
  font-size: 0.45em;
  font-weight: var(--w-medium);
  color: var(--fg-muted);
  margin-left: var(--s-4);
}
.kpi-value.accent { color: var(--accent); }
.kpi-delta {
  margin-top: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--green);
  letter-spacing: var(--track-wide);
}
.kpi-delta.down { color: var(--red); }

/* ── chip — ch-001 ─────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-4) var(--s-10);
  border: var(--line-w) solid var(--border);
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease);
}
.chip:hover { border-color: var(--fg-muted); }
.chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.chip svg { width: 11px; height: 11px; }
.chip-close { color: var(--fg-faint); }
.chip-close:hover { color: var(--fg); }

/* ── table — tbl-001 ───────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  border: var(--line-w) solid var(--border);
  font-size: var(--t-13);
}
.table th, .table td {
  text-align: left;
  padding: var(--s-10) var(--s-14);
  border-bottom: var(--line-w) solid var(--border);
}
.table thead th {
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: var(--t-9);
  font-weight: var(--w-medium);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
}
.table tbody tr {
  transition: background var(--dur-quick) var(--ease);
}
.table tbody tr:hover { background: var(--bg-raised); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.table .code { font-family: var(--font-mono); font-size: var(--t-11); color: var(--accent); }

/* ── list-row — lr-001 settings-style list ─────────────────── */
.list {
  border: var(--line-w) solid var(--border);
  background: var(--bg);
}
.list-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-14);
  align-items: center;
  padding: var(--s-14) var(--s-16);
  border-bottom: var(--line-w) solid var(--border);
  transition: background var(--dur-quick) var(--ease);
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--bg-raised); }
.list-row-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  color: var(--fg);
  flex-shrink: 0;
}
.list-row-icon svg { width: 14px; height: 14px; }
.list-row-content { min-width: 0; }
.list-row-title {
  font-size: var(--t-13);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-near);
}
.list-row-desc {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  margin-top: var(--s-2);
  letter-spacing: var(--track-wide);
}
.list-row-trailing {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-faint);
  letter-spacing: var(--track-wide);
}

/* ── breadcrumb — bc-001 ───────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--fg-muted); transition: color var(--dur-quick) var(--ease); }
.breadcrumb a:hover { color: var(--fg); }
.breadcrumb .sep { color: var(--fg-faint); }
.breadcrumb .current { color: var(--fg); }

/* ── pagination — pg-001 ───────────────────────────────────── */
.pagination {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-11);
}
.pagination-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 var(--s-8);
  border: var(--line-w) solid var(--border);
  background: var(--bg);
  color: var(--fg-muted);
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease);
  margin-left: -1px;
  letter-spacing: var(--track-wide);
}
.pagination-item:first-child { margin-left: 0; }
.pagination-item:hover { color: var(--fg); background: var(--bg-raised); z-index: 1; }
.pagination-item.active {
  color: var(--accent);
  border-color: var(--accent);
  z-index: 1;
}
.pagination-item.disabled { color: var(--fg-faint); cursor: not-allowed; pointer-events: none; }

/* ── stepper — stp-001 ─────────────────────────────────────── */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
}
.stepper-step {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--fg-muted);
}
.stepper-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--line-w) solid var(--border);
  background: var(--bg);
  border-radius: var(--r-circle);
  font-family: var(--font-mono);
  font-size: var(--t-10);
}
.stepper-step.active .stepper-num { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.stepper-step.done .stepper-num { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.stepper-step.active, .stepper-step.done { color: var(--fg); }
.stepper-sep {
  flex: 1;
  height: var(--line-w);
  background: var(--border);
  min-width: var(--s-16);
}

/* ── segmented control — sg-001 ────────────────────────────── */
.segmented {
  display: inline-flex;
  border: var(--line-w) solid var(--border);
  background: var(--bg);
  padding: 2px;
}
.segmented-item {
  padding: var(--s-6) var(--s-12);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  cursor: pointer;
  background: transparent; border: 0;
  transition: all var(--dur-quick) var(--ease);
}
.segmented-item:hover { color: var(--fg); }
.segmented-item.active {
  background: var(--invert-bg);
  color: var(--invert-fg);
}

/* ── menu — mu-001 dropdown ────────────────────────────────── */
.menu {
  background: var(--bg);
  border: var(--line-w) solid var(--border);
  padding: var(--s-4) 0;
  min-width: 200px;
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--ink) 30%, transparent);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-8) var(--s-12);
  font-size: var(--t-12);
  color: var(--fg);
  cursor: pointer;
  transition: background var(--dur-snap) var(--ease);
  background: transparent; border: 0; width: 100%; text-align: left;
}
.menu-item:hover { background: var(--bg-raised); }
.menu-item svg { width: 12px; height: 12px; color: var(--fg-muted); }
.menu-item .kbd { margin-left: auto; }
.menu-item.danger { color: var(--red); }
.menu-divider { height: var(--line-w); background: var(--border); margin: var(--s-4) 0; }
.menu-label {
  padding: var(--s-6) var(--s-12) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
}

/* ── sidebar — sb-002 vertical nav ─────────────────────────── */
.sidebar {
  background: var(--bg);
  border-right: var(--line-w) solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--s-20) 0;
  min-width: 200px;
}
.sidebar-group { padding: var(--s-4) 0 var(--s-16); }
.sidebar-group-label {
  padding: var(--s-10) var(--s-20) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
}
.sidebar-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-10) var(--s-20);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--w-medium);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all var(--dur-quick) var(--ease);
}
.sidebar-item:hover { color: var(--fg); background: var(--bg-raised); }
.sidebar-item.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--bg-raised);
}
.sidebar-item svg { width: 14px; height: 14px; }
.sidebar-item-code {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
}
.sidebar-item.active .sidebar-item-code { color: var(--accent); }

/* ── code block — cd-001 ───────────────────────────────────── */
.code-block {
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  padding: var(--s-12) var(--s-14);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  line-height: 1.6;
  color: var(--fg);
  overflow-x: auto;
  white-space: pre;
}
.code-block .com { color: var(--fg-muted); }
.code-block .kw  { color: var(--blue); }
.code-block .str { color: var(--green); }
.code-block .num { color: var(--orange); }
.code-inline {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  padding: 1px var(--s-4);
  color: var(--fg);
}

/* ── divider — dv-001 ──────────────────────────────────────── */
.divider {
  border: 0;
  height: var(--line-w);
  background: var(--border);
  margin: var(--s-24) 0;
}
.divider--heavy { height: 2px; background: var(--fg); }
.divider--vert {
  display: inline-block;
  width: var(--line-w); height: 1em;
  background: var(--border);
  margin: 0 var(--s-8);
  vertical-align: middle;
}
.divider-label {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
  margin: var(--s-20) 0;
}
.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  height: var(--line-w);
  background: var(--border);
}

/* ── quote — qu-001 ────────────────────────────────────────── */
.quote {
  border-left: 2px solid var(--accent);
  padding: var(--s-4) var(--s-16);
  font-family: var(--font-sans);
  font-size: var(--t-15);
  color: var(--fg);
  line-height: 1.55;
}
.quote cite {
  display: block;
  margin-top: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  font-style: normal;
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
}

/* ── kbd-row — kr-001 keyboard shortcut display ────────────── */
.kbd-row {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
}
.kbd-row .plus { color: var(--fg-faint); }

/* ═══════════════════════════════════════════════════════════
   v0.3 extended primitives
   chat · sources · data-viz · calendar
   ═══════════════════════════════════════════════════════════ */

/* ── message / chat turn — msg-001 ─────────────────────────── */
.msg {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-16);
}
.msg-role {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-6);
}
.msg-role .avatar {
  width: 30px; height: 30px;
  font-size: var(--t-12);
  border-radius: 0;
  background: var(--bg-raised);
  color: var(--fg);
  border: var(--line-w) solid var(--border);
}
.msg-role .avatar--assistant {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-color: var(--invert-bg);
}
.msg-role-label {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
  letter-spacing: var(--track-cap);
  text-transform: lowercase;
}
.msg-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  padding-top: var(--s-2);
}
.msg-text {
  font-size: var(--t-13);
  line-height: 1.65;
  color: var(--fg);
}
.msg-text p + p { margin-top: var(--s-10); }
.msg-tools { display: flex; gap: var(--s-4); }
.msg-tool {
  display: inline-flex; align-items: center; gap: var(--s-6);
  padding: var(--s-4) var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-faint);
  background: transparent;
  border: var(--line-w) solid transparent;
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease);
}
.msg-tool:hover { color: var(--fg); border-color: var(--border); }
.msg-tool svg { width: 11px; height: 11px; }
.msg-thinking {
  display: inline-flex; align-items: center; gap: var(--s-10);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
}
.msg-thinking .spinner { width: 12px; height: 12px; }

/* ── citation badge — cite-001 ─────────────────────────────── */
.cite {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 var(--s-4);
  margin: 0 1px;
  background: var(--bg-raised);
  border: var(--line-w) solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-muted);
  text-decoration: none;
  letter-spacing: 0;
  vertical-align: 2px;
  transition: all var(--dur-quick) var(--ease);
  cursor: pointer;
}
.cite:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* ── source card — src-001 ─────────────────────────────────── */
.source {
  border: var(--line-w) solid var(--border);
  background: var(--bg);
  padding: var(--s-12) var(--s-14);
  cursor: pointer;
  transition: border-color var(--dur-quick) var(--ease);
}
.source:hover { border-color: var(--fg-muted); }
.source-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-8);
}
.source-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-9);
  font-weight: var(--w-bold);
}
.source-title {
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  color: var(--fg);
  letter-spacing: var(--track-near);
  margin-bottom: var(--s-4);
  line-height: 1.4;
}
.source-path {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
  letter-spacing: var(--track-wide);
  margin-bottom: var(--s-8);
  overflow-wrap: anywhere;
}
.source-snippet {
  font-family: var(--font-mono);
  font-size: var(--t-10);
  color: var(--fg-muted);
  line-height: 1.55;
  padding: var(--s-8);
  background: var(--bg-raised);
  border-left: 2px solid var(--accent);
}
.source-snippet mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--fg); padding: 0 2px; }

/* ── score bar — scr-001 inline strength meter ─────────────── */
.score {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-muted);
  letter-spacing: var(--track-wide);
  display: inline-flex; align-items: center; gap: var(--s-6);
}
.score-bar {
  display: inline-block;
  width: 32px; height: 3px;
  background: var(--bg-raised);
  position: relative;
  overflow: hidden;
}
.score-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: var(--accent);
}

/* ── mark / highlight — mk-001 ─────────────────────────────── */
mark, .mark {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--fg);
  padding: 0 2px;
}

/* ── conversation row — conv-001 ───────────────────────────── */
.conv {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-10) var(--s-16);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--dur-quick) var(--ease);
}
.conv:hover { background: var(--bg-raised); }
.conv.active {
  background: var(--bg-raised);
  border-left-color: var(--accent);
}
.conv-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-circle);
  background: var(--fg-faint);
}
.conv.active .conv-dot { background: var(--accent); }
.conv-title {
  font-size: var(--t-12);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conv-time {
  font-family: var(--font-mono);
  font-size: var(--t-9);
  color: var(--fg-faint);
  letter-spacing: var(--track-wide);
}

/* ── composer / chat input — cp-002 ────────────────────────── */
.composer {
  border: var(--line-w) solid var(--fg);
  background: var(--bg);
  transition: border-color var(--dur-quick) var(--ease);
}
.composer:focus-within { border-color: var(--accent); }
.composer-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  padding: var(--s-12) var(--s-14);
  font-family: var(--font-sans);
  font-size: var(--t-13);
  line-height: 1.55;
  color: var(--fg);
  resize: none;
  min-height: 48px;
  max-height: 200px;
}
.composer-input::placeholder { color: var(--fg-faint); }
.composer-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-8) var(--s-10) var(--s-8) var(--s-14);
  border-top: var(--line-w) solid var(--border);
}
.composer-tools { display: flex; gap: var(--s-4); }
.composer-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: var(--line-w) solid transparent;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease);
}
.composer-tool:hover { color: var(--fg); border-color: var(--border); }
.composer-tool svg { width: 14px; height: 14px; }
.composer-send {
  background: var(--accent);
  color: var(--paper);
  border: 0;
  padding: var(--s-6) var(--s-12);
  font-family: var(--font-mono);
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-wide);
  text-transform: lowercase;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-8);
  transition: filter var(--dur-quick) var(--ease);
}
.composer-send:hover { filter: brightness(1.05); }
.composer-send svg { width: 12px; height: 12px; }

/* ── kpi mini variant — kp-002 ─────────────────────────────── */
.kpi--mini { padding: var(--s-10) var(--s-12); }
.kpi--mini .kpi-label { font-size: var(--t-8); margin-bottom: var(--s-6); }
.kpi--mini .kpi-value { font-size: var(--t-18); }
.kpi--mini .kpi-value .unit { font-size: 0.5em; }
.kpi--mini .kpi-delta { font-size: var(--t-9); margin-top: var(--s-6); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .notes-grid { grid-template-columns: 1fr; }
}