/* Katagami Storybook Chrome — DSKintsugi sigma brand (cream + crimson accent).
 *
 * Single source of truth for sigma-analytics tokens lives at
 * kintsugi-ds/platforms/web/sigma-default.css (--sg-* prefix). Storybook
 * chrome consumes those tokens via the @import below — no hardcoded
 * sigma colors here. Update sigma-default.css to re-skin everywhere.
 *
 * META layer (sidebar + panels, cream + charcoal ink) vs PRODUCT layer
 * (live Katagami previews, dark like the real app).
 */

@import url("sigma-tokens.css");

/* Storybook chrome forces LIGHT theme regardless of OS dark mode. The
 * Katagami product layer inside .sb-live-preview stays dark by design. */
@media (prefers-color-scheme: dark) {
  :root {
    --sg-background:        #FAFAFA;
    --sg-surface:           #FFFFFF;
    --sg-surface-alt:       #F4F4F5;
    --sg-text-primary:      #171717;
    --sg-text-secondary:    #404040;
    --sg-text-muted:        #525252;
    --sg-accent:            #C41E3A;
    --sg-accent-pressed:    #8B1A1A;
    --sg-accent-on:         #FFFFFF;
    --sg-border:            #E5E5E5;
    --sg-border-strong:     #D1D5DB;
    --sg-action-primary:    #C41E3A;
    --sg-code-text:         #F1F5F9;
  }
}

:root {
  color-scheme: light;
  /* Chrome palette — mapped to DSKintsugi sigma semantic tokens */
  --sb-bg:             var(--sg-background);       /* cream #FAFAFA */
  --sb-sidebar:        var(--sg-surface-alt);      /* cream-warm #F5F0E8 */
  --sb-sidebar-hover:  var(--sg-border);           /* stone #E5E5E5 */
  --sb-accent:         var(--sg-accent);           /* crimson #C41E3A (CTA only) */
  --sb-accent-bright:  var(--sg-crimson-bright);   /* #DC143C */
  --sb-gold:           var(--sg-accent);           /* alias — also crimson */
  --sb-gold-dim:       var(--sg-text-muted);       /* charcoal-muted */
  --sb-text:           var(--sg-text-primary);     /* charcoal #171717 */
  --sb-text-dim:       var(--sg-text-secondary);   /* #404040 */
  --sb-text-muted:     var(--sg-text-muted);       /* #525252 */
  --sb-border:         var(--sg-border);           /* stone #E5E5E5 */
  --sb-panel:          var(--sg-surface);          /* white #FFFFFF */
  --sb-panel-border:   var(--sg-border);
  --sb-code-bg:        var(--sg-code-bg);          /* dark on cream */
  --sb-preview-bg:     var(--sg-preview-bg);       /* Katagami emit dark */
  --sidebar-width: 240px;

  /* Katagami production CSS vars — PRODUCT layer (live previews on dark).
   * Re-mapped 2026-05-13: gold #D4AF37 → DSKintsugi sigma palette for distinct
   * data roles. Faustin's dist HTML may still ship its own gold; sweep separately. */
  --ks-color-color-brand-primary: var(--sg-crimson-rest);   /* key metric / button rest */
  --ks-color-color-brand-hover:   var(--sg-crimson);        /* hover */
  --ks-color-color-brand-pressed: var(--sg-crimson-pressed);/* pressed feedback */
  --ks-color-data-cyan:           var(--sg-data-cyan);      /* secondary data role */
  --ks-color-data-purple:         var(--sg-data-purple);    /* tertiary data role */
  --ks-color-surface-primary:     #0A0A0A;                  /* darker than #181818 — closer to ag-background */
  --ks-color-text-primary:        var(--sg-text-primary);     /* charcoal — readable on cream */
  --ks-color-text-soft:           var(--sg-text-muted);       /* muted slate */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--sb-bg);
  color: var(--sb-text);
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ── */
.sb-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sb-sidebar);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 100;
}

.sb-logo {
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--sb-border);
}
.sb-logo-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-gold);
}
.sb-logo-sub {
  font-size: 11px;
  color: var(--sb-text-muted);
  margin-top: 2px;
}

.sb-nav { flex: 1; padding: 12px 0; }

.sb-nav-group { margin-bottom: 4px; }
.sb-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  padding: 10px 16px 4px;
  display: block;
}
.sb-nav-item {
  display: block;
  padding: 5px 16px 5px 28px;
  color: var(--sb-text-dim);
  text-decoration: none;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-nav-item:hover {
  background: var(--sb-sidebar-hover);
  color: var(--sb-text);
}
.sb-nav-item.active {
  border-left-color: var(--sb-gold);
  color: var(--sb-gold);
  background: rgba(230,74,107,0.08);
  font-weight: 600;
}

.sb-nav-item-ext {
  font-size: 11px;
  opacity: 0.7;
}
.sb-nav-item-ext::after { content: " ↗"; }

/* ── Main content ── */
.sb-main {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: 32px 40px;
  max-width: 960px;
}

/* ── Page header ── */
.sb-header { margin-bottom: 24px; }
.sb-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.sb-badge-atom    { background: #dbeafe; color: #1d4ed8; }   /* blue-100 / blue-700 */
.sb-badge-molecule{ background: #d1fae5; color: #047857; }   /* emerald-100 / emerald-700 */
.sb-badge-organism{ background: #fef3c7; color: #b45309; }   /* amber-100 / amber-700 */
.sb-badge-surface { background: #e0e7ff; color: #4338ca; }   /* indigo-100 / indigo-700 */

.sb-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--sb-text);
  margin: 0 0 8px;
  line-height: 1.2;
}
.sb-desc {
  font-size: 15px;
  color: var(--sb-text-dim);
  margin: 0;
  line-height: 1.5;
}

/* ── Panels ── */
.sb-panel {
  background: var(--sb-panel);
  border: 1px solid var(--sb-panel-border);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}
.sb-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--sb-panel-border);
  background: var(--sb-sidebar);  /* DSKintsugi --sg-surface-alt */
}

/* ── Knobs ── */
.sb-knobs { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 16px; }
.sb-knob-group { display: flex; align-items: center; gap: 8px; }
.sb-knob-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--sb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 48px;
}
.sb-knob-btn {
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid var(--sb-border);
  background: transparent;
  color: var(--sb-text-dim);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.1s;
}
.sb-knob-btn:hover {
  border-color: var(--sb-gold-dim);
  color: var(--sb-text);
}
.sb-knob-btn.active {
  background: var(--sb-accent);
  border-color: var(--sb-accent);
  color: var(--sg-accent-on);  /* white on crimson */
  font-weight: 700;
}

/* ── Live Preview ── Token-driven: SAME surface as chrome (cream) so the
 * Katagami emit on top reads with the same charcoal ink as the rest of the
 * page. No magic values — references DSKintsugi sigma tokens via --sb-* alias. */
.sb-preview-wrap { padding: 16px; }
.sb-live-preview {
  background: var(--sg-background);   /* cream — matches storybook chrome */
  color: var(--sg-text-primary);      /* charcoal ink */
  border-radius: 6px;
  padding: 20px;
  min-height: 80px;
}

/* ── Katagami production component styles (matches dist HTML) ── */
.sb-live-preview .ks-hstack { display: flex; flex-direction: row; }
.sb-live-preview .ks-vstack { display: flex; flex-direction: column; }
.sb-live-preview .ks-zstack { display: grid; grid-template-areas: "layer"; }
.sb-live-preview .ks-grid { display: grid; grid-template-columns: repeat(var(--ks-grid-columns,3), 1fr); }
.sb-live-preview .ks-spacer { flex: 1; }
.sb-live-preview .ks-text { color: var(--ks-color-text-primary); font-size: 13px; line-height: 1.4; }
.sb-live-preview .ks-surface-title { font-size: 20px; font-weight: 700; color: var(--ks-color-color-brand-primary); padding: 8px 0 14px; }
/* Indicator names use the PURPLE data role — premium / named instrument */
.sb-live-preview .ks-indicator-name { font-size: 15px; font-weight: 700; color: var(--ks-color-data-purple); padding: 4px 0; }
.sb-live-preview .ks-metric-strip { gap: 24px; padding: 10px 0; border-bottom: 1px solid rgba(100,116,139,0.2); margin-bottom: 10px; }
.sb-live-preview .ks-metric-strip > .ks-vstack { gap: 2px; }
.sb-live-preview .ks-metric-strip > .ks-vstack > .ks-text:first-child { font-size: 11px; color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sb-live-preview .ks-metric-strip > .ks-vstack > .ks-text:last-child { font-size: 18px; font-weight: 700; color: var(--ks-color-color-brand-primary); }
.sb-live-preview .ks-indicator-kpi-strip { gap: 20px; padding: 6px 0; }
.sb-live-preview .ks-indicator-kpi-strip > .ks-vstack { gap: 2px; }
.sb-live-preview .ks-indicator-kpi-strip > .ks-vstack > .ks-text:first-child { font-size: 10px; color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.sb-live-preview .ks-indicator-kpi-strip > .ks-vstack > .ks-text:last-child { font-size: 15px; font-weight: 600; color: var(--ks-color-text-primary); }
.sb-live-preview .ks-data-table { border: 1px solid rgba(100,116,139,0.15); border-radius: 4px; overflow: hidden; gap: 0; }
.sb-live-preview .ks-data-table .ks-data-table-row,
.sb-live-preview .ks-data-table .ks-data-table-header { gap: 0; }
.sb-live-preview .ks-data-table-header { background: rgba(100,116,139,0.08); }
.sb-live-preview .ks-data-table-header-cell { flex: 1; padding: 7px 10px; font-size: 11px; font-weight: 600; color: var(--sg-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-right: 1px solid rgba(100,116,139,0.08); }
.sb-live-preview .ks-data-table-header-cell:last-child { border-right: none; }
.sb-live-preview .ks-data-table-row { background: #FFFFFF; transition: background 0.08s; }
.sb-live-preview .ks-data-table-row:nth-child(odd) { background: #F4F4F2; }
.sb-live-preview .ks-data-table-row:hover { background: rgba(230, 74, 107, 0.08); }
.sb-live-preview .ks-data-table-cell { flex: 1; padding: 7px 10px; font-size: 13px; color: var(--ks-color-text-primary); background: transparent; }
.sb-live-preview .ks-filter-panel { border: 1px solid rgba(100,116,139,0.15); border-radius: 4px; padding: 12px; margin-bottom: 12px; }
.sb-live-preview .ks-filter-panel-section { margin-bottom: 10px; }
.sb-live-preview .ks-filter-panel-section > .ks-vstack > .ks-text:first-child { font-size: 11px; color: var(--sg-text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
/* Filter chips use the CYAN data role — distinct from CTAs (crimson) and tier indicators (purple) */
.sb-live-preview .ks-filter-panel-option { display: inline-flex; padding: 3px 10px; border: 1px solid rgba(6,182,212,0.35); border-radius: 12px; margin: 2px; cursor: pointer; transition: background 0.12s; }
.sb-live-preview .ks-filter-panel-option:hover { background: rgba(6,182,212,0.12); }
.sb-live-preview .ks-filter-panel-option .ks-text { font-size: 12px; color: var(--ks-color-data-cyan); }
.sb-live-preview .ks-button { padding: 7px 16px; background: var(--ks-color-color-brand-primary); border: none; border-radius: 4px; cursor: pointer; transition: background 0.12s; }
.sb-live-preview .ks-button:hover { background: var(--ks-color-color-brand-hover); }
.sb-live-preview .ks-button:active { background: var(--ks-color-color-brand-pressed); }
.sb-live-preview .ks-button .ks-text { color: #fff; font-weight: 600; font-size: 13px; }
/* Variant: secondary cyan button (info/data role) */
.sb-live-preview .ks-button.ks-button-info { background: var(--ks-color-data-cyan); }
.sb-live-preview .ks-button.ks-button-info:hover { background: #0891B2; }
/* Variant: tertiary purple button (premium/named role) */
.sb-live-preview .ks-button.ks-button-tier { background: var(--ks-color-data-purple); }
.sb-live-preview .ks-button.ks-button-tier:hover { background: #9333EA; }
.sb-live-preview .ks-sparkline { border: 1px solid rgba(100,116,139,0.12); border-radius: 4px; padding: 8px 10px; margin-top: 6px; }
.sb-live-preview .ks-sparkline .ks-text:first-child { font-size: 11px; color: var(--sg-text-muted); }
.sb-live-preview .ks-sparkline .ks-text:last-child { font-size: 12px; color: var(--sg-text-muted); font-style: italic; }
.sb-live-preview .ks-segment-title { font-size: 13px; font-weight: 600; color: var(--sg-text-secondary); padding: 6px 0 4px; border-bottom: 1px solid rgba(100,116,139,0.12); margin-bottom: 6px; }

/* Density variants */
.sb-live-preview[data-density="compact"] .ks-metric-strip { gap: 16px; padding: 6px 0; }
.sb-live-preview[data-density="compact"] .ks-metric-strip > .ks-vstack > .ks-text:last-child { font-size: 15px; }
.sb-live-preview[data-density="compact"] .ks-data-table-header-cell,
.sb-live-preview[data-density="compact"] .ks-data-table-cell { padding: 4px 8px; font-size: 12px; }
.sb-live-preview[data-density="compact"] .ks-surface-title { font-size: 16px; }
.sb-live-preview[data-density="compact"] .ks-text { font-size: 12px; }

.sb-live-preview[data-density="dense"] .ks-metric-strip { gap: 12px; padding: 4px 0; }
.sb-live-preview[data-density="dense"] .ks-metric-strip > .ks-vstack > .ks-text:last-child { font-size: 13px; }
.sb-live-preview[data-density="dense"] .ks-data-table-header-cell,
.sb-live-preview[data-density="dense"] .ks-data-table-cell { padding: 2px 6px; font-size: 11px; }
.sb-live-preview[data-density="dense"] .ks-surface-title { font-size: 14px; }
.sb-live-preview[data-density="dense"] .ks-text { font-size: 11px; }
.sb-live-preview[data-density="dense"] .ks-filter-panel { padding: 8px; }

/* ── Code block ── */
.sb-code-wrap { padding: 0; }
.sb-code {
  background: var(--sb-code-bg);
  color: var(--sg-code-text);  /* light on dark — high contrast */
  font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}
.sb-code .kw { color: #c792ea; }
.sb-code .fn { color: #82aaff; }
.sb-code .st { color: #c3e88d; }
.sb-code .cm { color: #546e7a; }
.sb-code .nu { color: #f78c6c; }

/* ── Props table ── */
.sb-props-wrap { padding: 0; }
.sb-props-table { width: 100%; border-collapse: collapse; }
.sb-props-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  padding: 8px 16px;
  border-bottom: 1px solid var(--sb-panel-border);
  background: var(--sb-sidebar);  /* DSKintsugi --sg-surface-alt */
}
.sb-props-table td {
  padding: 8px 16px;
  font-size: 13px;
  color: var(--sb-text-dim);
  border-bottom: 1px solid var(--sb-panel-border);
  vertical-align: top;
}
.sb-props-table td:first-child { font-family: "SF Mono", Menlo, monospace; color: var(--sb-gold); font-size: 12px; }
.sb-props-table td:nth-child(2) { color: #82aaff; font-family: "SF Mono", Menlo, monospace; font-size: 12px; }
.sb-props-table tr:last-child td { border-bottom: none; }

/* ── Used In ── */
.sb-used-in-wrap { padding: 14px 16px; }
.sb-used-in-list { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sb-used-in-list li a {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  color: var(--sb-gold-dim);
  text-decoration: none;
  font-size: 12px;
  transition: all 0.1s;
}
.sb-used-in-list li a:hover {
  border-color: var(--sb-gold);
  color: var(--sb-gold);
}

/* ── Index grid ── */
.sb-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.sb-index-card {
  display: block;
  padding: 14px 16px;
  background: var(--sb-panel);
  border: 1px solid var(--sb-panel-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--sb-text-dim);
  transition: all 0.12s;
}
.sb-index-card:hover {
  border-color: var(--sb-gold-dim);
  background: rgba(230,74,107,0.06);
  color: var(--sb-text);
}
.sb-index-card-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.sb-index-card-desc { font-size: 12px; color: var(--sb-text-muted); }

/* ── Surface iframe ── */
.sb-iframe-wrap {
  padding: 24px 28px 32px;
  background: var(--sg-surface);
}
.sb-iframe {
  width: 100%;
  height: 760px;
  border: 1px solid var(--sg-border);
  border-radius: 6px;
  display: block;
  background: var(--sg-surface);  /* white card surface */
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(230,74,107,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(230,74,107,0.4); }

/* ── 3-viewport Responsive Preview ─────────────────────────────────────────
 * Per memory/feedback_storybook_3_viewport_breakpoints_and_katagami_primitives.md
 * Each component page renders 3 iframes (375 / 768 / 1280) of its bare
 * sibling page so real @media queries fire at the right viewport widths
 * (not just container widths).
 *
 * Layout: a horizontally-scrolling flex strip. Mobile + tablet show at
 * their natural width; desktop is scaled to 0.6 so the row fits in any
 * chrome content area while keeping the iframe's INTERNAL viewport at
 * 1280 px (media queries still fire correctly).
 */
.sb-responsive-grid {
  display: flex;
  gap: 28px;
  padding: 18px 28px 28px;
  overflow-x: auto;
  align-items: flex-start;
  background: var(--sg-surface);
}
.sb-responsive-cell {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb-responsive-label {
  font-size: 10px;
  color: var(--sb-text-muted, rgba(120,120,120,0.7));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.sb-responsive-iframe {
  border: 1px solid var(--sg-border, rgba(120,120,120,0.25));
  border-radius: 6px;
  background: #fff;
  display: block;
}
/* Desktop preview is scaled 0.6× so the strip stays compact while the
 * IFRAME's internal viewport remains 1280 px (so @media (min-width:1024)
 * still matches inside). transform-origin keeps the top-left aligned. */
.sb-responsive-cell[data-bp="desktop"] {
  width: 768px;       /* visual footprint after scale */
  height: 216px;      /* 360 * 0.6 */
  position: relative;
}
.sb-responsive-cell[data-bp="desktop"] .sb-responsive-iframe {
  transform: scale(0.6);
  transform-origin: top left;
}
.sb-responsive-cell[data-bp="tablet"] .sb-responsive-iframe {
  transform: scale(0.7);
  transform-origin: top left;
}
.sb-responsive-cell[data-bp="tablet"] {
  width: 538px;       /* 768 * 0.7 */
  height: 252px;      /* 360 * 0.7 */
  position: relative;
}
.sb-responsive-cell[data-bp="mobile"] {
  /* mobile renders at natural 1:1 — phone-sized previews shouldn't be scaled */
  width: 375px;
  height: 360px;
}

/* Bare-page reset — used by component.bare.html siblings consumed via iframe.
 * The bare page applies <body class="sb-bare"> to opt into this reset. */
body.sb-bare {
  margin: 0;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  background: #fff;
  color: #1a1a1a;
}