/* ==========================================================================
   WDOS Studio — Brand Kit page stylesheet (brand-kit.html only)
   --------------------------------------------------------------------------
   Loaded AFTER studio.css. Two consumption layers, deliberately different:

   1. Page chrome (sidebar panels, buttons, hints) — reuses studio.css
      classes and the --chrome-* tokens; never restated here.
   2. Brand sheets (.bk-sheet and everything inside) — consume the kit's
      --kit-* tokens DIRECTLY. Each sheet is a wrapper carrying data-kit
      (canonical kits, resolved by kits.css) or runtime-inline --kit-*
      custom properties (user drafts, applied by brand-kit.js via
      el.style.setProperty — programmatic CSSOM is CSP-safe under
      style-src 'self'; verified empirically on the K1 CSP). The :root
      alias layer in tokens.css is intentionally bypassed inside sheets:
      --surface-base & co. are substituted at :root and would never see a
      wrapper-scoped kit, whereas direct var(--kit-*) lookups inherit from
      the sheet wrapper.

   TOKEN RULE (same E1–E5 discipline as studio.css): literal values appear
   ONLY in the :root token layer below. Component rules reference var(--*)
   exclusively; permitted literals: E1 unitless 0, E2 intrinsic keywords,
   E3 the chrome breakpoint restated in @media as 1023px (stacked ceiling
   of --bp-chrome 1024px), E4 .sr-only, E5 %
   and fr.
   ========================================================================== */

:root {
  /* sheet layout */
  --bk-sheet-gap: var(--sp-6);
  --bk-sheet-pad: var(--sp-6);
  --bk-draft-min: 460px;          /* side-by-side compare floor for draft sheets */
  --bk-swatch-min: 210px;         /* swatch grid min column */
  --bk-chip: 40px;                /* swatch chip size */
  --bk-radius-demo: 44px;         /* radius specimen box */
  --bk-spacing-bar-h: 10px;
  --bk-shadow-demo: 96px;         /* shadow specimen box height */
  --bk-sample-max: 720px;
  --bk-hero-pad: var(--sp-6);
  --bk-code-col: 12ch;            /* monospaced token-name column */
  --bk-code-col-sm: 10ch;
  /* sheet type (chrome-independent; sheets are kit content) */
  --bk-sheet-title: 20px;
  --bk-section-title: 13px;
  --bk-group-title: 11px;
  --bk-specimen-sample: 18px;
  --bk-meta: 12px;
  /* tracking for the small caps group titles */
  --bk-tracking-caps: 0.08em;
}

/* --- page layout ------------------------------------------------------------
   Normal-flow two-column grid (no fixed app-shell): the sidebar holds the
   kit picker, the creator form, the extractor and the drafts panel; the
   canvas column holds the draft zone (JS) and the six pre-rendered canonical
   brand sheets. Stacks below the chrome breakpoint. */
.brandkit-grid {
  display: grid;
  grid-template-columns: minmax(var(--controls-min), var(--controls-max)) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.brandkit-sidebar { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.brandkit-sidebar .page-head { margin-bottom: 0; }
.brandkit-canvas { min-width: 0; display: flex; flex-direction: column; gap: var(--bk-sheet-gap); }

@media (max-width: 1023px) {
  .brandkit-grid { grid-template-columns: minmax(0, 1fr); }
}

/* draft zone: one draft per row; two+ drafts compare side-by-side */
.bk-draft-zone { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bk-sheet-gap); }
.bk-draft-zone[data-count="2"],
.bk-draft-zone[data-count="3"],
.bk-draft-zone[data-count="4"] {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--bk-draft-min), 100%), 1fr));
}
.bk-draft-zone:empty { display: none; }

/* --- the brand sheet ----------------------------------------------------------
   The sheet interior is KIT content: surfaces/text from the wrapper kit. */
.bk-sheet {
  background: var(--kit-surface-base);
  color: var(--kit-text-primary);
  border: var(--border-w) solid var(--chrome-border-default);
  border-radius: var(--radius-lg);
  padding: var(--bk-sheet-pad);
  display: flex;
  flex-direction: column;
  gap: var(--bk-sheet-gap);
  font-family: var(--kit-font-sans);
  min-width: 0;
}
.bk-sheet[data-sheet-kind="draft"] { border-color: var(--chrome-status-warning); }
/* the hidden attribute must win over display:flex above (picker show/hide) */
.bk-sheet[hidden] { display: none; }

.bk-sheet-head { display: flex; flex-direction: column; gap: var(--sp-1); }
.bk-sheet-title {
  margin: 0;
  font-family: var(--kit-font-display);
  font-size: var(--bk-sheet-title);
  line-height: var(--line-height-heading);
  color: var(--kit-text-primary);
}
.bk-sheet-meta { margin: 0; font-size: var(--bk-meta); color: var(--kit-text-secondary); }
.bk-sheet-meta code { color: var(--kit-text-primary); }
.bk-sheet-stamp { margin: 0; font-size: var(--bk-meta); color: var(--chrome-status-warning); }

.bk-section { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.bk-section-title {
  margin: 0;
  font-size: var(--bk-section-title);
  letter-spacing: var(--bk-tracking-caps);
  text-transform: uppercase;
  color: var(--kit-text-muted);
  border-bottom: var(--border-w) solid var(--kit-border-subtle);
  padding-bottom: var(--sp-2);
}
.bk-note { font-weight: normal; text-transform: none; letter-spacing: 0; color: var(--kit-text-muted); font-size: var(--bk-meta); margin: 0; }
.bk-group-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--bk-group-title);
  letter-spacing: var(--bk-tracking-caps);
  text-transform: uppercase;
  color: var(--kit-text-muted);
}

/* swatches */
.bk-swatches {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--bk-swatch-min), 100%), 1fr)); gap: var(--sp-2);
}
.bk-swatch {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3);
  background: var(--kit-surface-raised);
  border: var(--border-w) solid var(--kit-border-subtle);
  border-radius: var(--kit-radius-md, var(--radius-md));
  padding: var(--sp-2);
  min-width: 0;
}
.bk-swatch-chip {
  width: var(--bk-chip); height: var(--bk-chip); flex: none;
  border-radius: var(--kit-radius-sm, var(--radius-sm));
  border: var(--border-w) solid var(--kit-border-default);
}
.bk-swatch-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bk-swatch-meta code { color: var(--kit-text-primary); overflow-wrap: anywhere; }
.bk-swatch-label { color: var(--kit-text-muted); font-size: var(--bk-meta); }
.bk-swatch-value { flex-basis: 100%; font-family: var(--kit-font-mono); font-size: var(--bk-meta); color: var(--kit-text-secondary); overflow-wrap: anywhere; }

/* the 27 color-role chips: background is the kit token (glow is a shadow) */
.bk-c-surface-base { background: var(--kit-surface-base); }
.bk-c-surface-sunken { background: var(--kit-surface-sunken); }
.bk-c-surface-raised { background: var(--kit-surface-raised); }
.bk-c-surface-raised-2 { background: var(--kit-surface-raised-2); }
.bk-c-surface-overlay { background: var(--kit-surface-overlay); }
.bk-c-text-primary { background: var(--kit-text-primary); }
.bk-c-text-secondary { background: var(--kit-text-secondary); }
.bk-c-text-muted { background: var(--kit-text-muted); }
.bk-c-text-inverse { background: var(--kit-text-inverse); }
.bk-c-accent-primary { background: var(--kit-accent-primary); }
.bk-c-accent-primary-hover { background: var(--kit-accent-primary-hover); }
.bk-c-accent-primary-muted { background: var(--kit-accent-primary-muted); }
.bk-c-accent-text { background: var(--kit-accent-text); }
.bk-c-link-color { background: var(--kit-link-color); }
.bk-c-accent-secondary { background: var(--kit-accent-secondary); }
.bk-c-border-subtle { background: var(--kit-border-subtle); }
.bk-c-border-default { background: var(--kit-border-default); }
.bk-c-border-strong { background: var(--kit-border-strong); }
.bk-c-status-success { background: var(--kit-status-success); }
.bk-c-status-success-muted { background: var(--kit-status-success-muted); }
.bk-c-status-warning { background: var(--kit-status-warning); }
.bk-c-status-warning-muted { background: var(--kit-status-warning-muted); }
.bk-c-status-error { background: var(--kit-status-error); }
.bk-c-status-error-muted { background: var(--kit-status-error-muted); }
.bk-c-status-info { background: var(--kit-status-info); }
.bk-c-status-info-muted { background: var(--kit-status-info-muted); }
.bk-c-glow-primary { background: var(--kit-surface-raised); box-shadow: var(--kit-glow-primary); }

/* type specimens */
.bk-specimens { display: flex; flex-direction: column; gap: var(--sp-3); }
.bk-specimen {
  background: var(--kit-surface-raised);
  border: var(--border-w) solid var(--kit-border-subtle);
  border-radius: var(--kit-radius-md, var(--radius-md));
  padding: var(--sp-3);
}
.bk-specimen p { margin: 0; }
.bk-specimen-role { font-size: var(--bk-meta); color: var(--kit-text-muted); }
.bk-specimen-sample { font-size: var(--bk-specimen-sample); line-height: var(--line-height-heading); color: var(--kit-text-primary); }
.bk-specimen-display .bk-specimen-sample { font-family: var(--kit-font-display); font-weight: var(--kit-font-weight-display, var(--font-weight-display)); }
.bk-specimen-sans .bk-specimen-sample { font-family: var(--kit-font-sans); }
.bk-specimen-mono .bk-specimen-sample { font-family: var(--kit-font-mono); }
.bk-specimen-stack { font-family: var(--kit-font-mono); font-size: var(--bk-meta); color: var(--kit-text-secondary); overflow-wrap: anywhere; }

/* type scale */
.bk-scale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.bk-scale-step { display: flex; align-items: baseline; gap: var(--sp-3); border-bottom: var(--border-w) solid var(--kit-border-subtle); padding-block: var(--sp-1); }
.bk-scale-name { font-family: var(--kit-font-mono); font-size: var(--bk-meta); color: var(--kit-text-muted); min-width: var(--bk-code-col); }
.bk-scale-sample { color: var(--kit-text-primary); font-family: var(--kit-font-display); line-height: var(--line-height-heading); }
.bk-scale-value { margin-inline-start: auto; font-family: var(--kit-font-mono); font-size: var(--bk-meta); color: var(--kit-text-secondary); }
.bk-text-hero .bk-scale-sample { font-size: var(--kit-text-hero, var(--text-hero)); }
.bk-text-h1 .bk-scale-sample { font-size: var(--kit-text-h1, var(--text-h1)); }
.bk-text-h2 .bk-scale-sample { font-size: var(--kit-text-h2, var(--text-h2)); }
.bk-text-h3 .bk-scale-sample { font-size: var(--kit-text-h3, var(--text-h3)); }
.bk-text-body .bk-scale-sample { font-size: var(--kit-text-body, var(--text-body)); }
.bk-text-sm .bk-scale-sample { font-size: var(--kit-text-sm, var(--text-sm)); }
.bk-text-xs .bk-scale-sample { font-size: var(--kit-text-xs, var(--text-xs)); }
.bk-text-xxs .bk-scale-sample { font-size: var(--kit-text-xxs, var(--text-xxs)); }

/* radii / spacing / shadows */
.bk-radii { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.bk-radius-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); color: var(--kit-text-secondary); font-size: var(--bk-meta); }
.bk-radius-item code { color: var(--kit-text-primary); }
.bk-radius-box {
  width: var(--bk-radius-demo); height: var(--bk-radius-demo);
  background: var(--kit-accent-primary-muted);
  border: var(--border-w) solid var(--kit-accent-primary);
}
.bk-r-sm { border-radius: var(--kit-radius-sm, var(--radius-sm)); }
.bk-r-md { border-radius: var(--kit-radius-md, var(--radius-md)); }
.bk-r-lg { border-radius: var(--kit-radius-lg, var(--radius-lg)); }
.bk-r-xl { border-radius: var(--kit-radius-xl, var(--radius-xl)); }
.bk-r-sheet { border-radius: var(--kit-radius-sheet, var(--radius-sheet)); }
.bk-r-full { border-radius: var(--kit-radius-full, var(--radius-full)); }

.bk-spacing { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.bk-spacing-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--bk-meta); color: var(--kit-text-secondary); }
.bk-spacing-item code { color: var(--kit-text-primary); min-width: var(--bk-code-col-sm); }
.bk-spacing-bar { display: block; height: var(--bk-spacing-bar-h); background: var(--kit-accent-primary); border-radius: var(--kit-radius-sm, var(--radius-sm)); }
.bk-sp-1 { width: var(--kit-sp-1, var(--sp-1)); }
.bk-sp-2 { width: var(--kit-sp-2, var(--sp-2)); }
.bk-sp-3 { width: var(--kit-sp-3, var(--sp-3)); }
.bk-sp-4 { width: var(--kit-sp-4, var(--sp-4)); }
.bk-sp-5 { width: var(--kit-sp-5, var(--sp-5)); }
.bk-sp-6 { width: var(--kit-sp-6, var(--sp-6)); }
.bk-sp-8 { width: var(--kit-sp-8, var(--sp-8)); }
.bk-sp-10 { width: var(--kit-sp-10, var(--sp-10)); }
.bk-sp-12 { width: var(--kit-sp-12, var(--sp-12)); }
.bk-sp-16 { width: var(--kit-sp-16, var(--sp-16)); }

.bk-shadows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.bk-shadow-item {
  height: var(--bk-shadow-demo); flex: 1; min-width: min(var(--bk-shadow-demo), 100%);
  display: flex; align-items: flex-end; padding: var(--sp-2);
  background: var(--kit-surface-raised);
  border-radius: var(--kit-radius-md, var(--radius-md));
  font-size: var(--bk-meta); color: var(--kit-text-muted);
}
.bk-sh-subtle { box-shadow: var(--kit-shadow-subtle, var(--shadow-subtle)); }
.bk-sh-medium { box-shadow: var(--kit-shadow-medium, var(--shadow-medium)); }
.bk-sh-prominent { box-shadow: var(--kit-shadow-prominent, var(--shadow-prominent)); }

/* --- sample UI (live preview cards) ----------------------------------------- */
.bk-sample { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--bk-sample-max); }
.bk-sample-hero {
  background: linear-gradient(160deg, var(--kit-accent-primary-muted), transparent 70%), var(--kit-surface-sunken);
  border: var(--border-w) solid var(--kit-border-subtle);
  border-radius: var(--kit-radius-sheet, var(--radius-sheet));
  padding: var(--bk-hero-pad);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.bk-sample-eyebrow { margin: 0; font-size: var(--bk-group-title); letter-spacing: var(--bk-tracking-caps); text-transform: uppercase; color: var(--kit-accent-primary); }
.bk-sample-title { margin: 0; font-family: var(--kit-font-display); font-size: var(--kit-text-h2, var(--text-h2)); line-height: var(--line-height-heading); color: var(--kit-text-primary); }
.bk-sample-lede { margin: 0; color: var(--kit-text-secondary); font-size: var(--kit-text-body, var(--text-body)); }
.bk-sample-actions { margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.bk-btn {
  display: inline-block;
  font-size: var(--kit-text-body, var(--text-body));
  border-radius: var(--kit-radius-md, var(--radius-md));
  padding: var(--kit-sp-2, var(--sp-2)) var(--kit-sp-4, var(--sp-4));
  border: var(--border-w) solid transparent;
}
.bk-btn-primary { background: var(--kit-accent-primary); color: var(--kit-accent-text); box-shadow: var(--kit-glow-primary); }
.bk-btn-ghost { background: transparent; color: var(--kit-accent-primary); border-color: var(--kit-border-strong); }
.bk-btn-block { text-align: center; }
.bk-link { color: var(--kit-link-color); }
.bk-sample-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--bk-swatch-min), 100%), 1fr)); gap: var(--sp-4); }
.bk-sample-card, .bk-sample-form {
  background: var(--kit-surface-raised);
  border: var(--border-w) solid var(--kit-border-default);
  border-radius: var(--kit-radius-lg, var(--radius-lg));
  box-shadow: var(--kit-shadow-medium, var(--shadow-medium));
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.bk-sample-card-title { margin: 0; font-family: var(--kit-font-display); font-weight: var(--kit-font-semibold, var(--font-semibold)); color: var(--kit-text-primary); font-size: var(--kit-text-h3, var(--text-h3)); }
.bk-sample-card-body { margin: 0; color: var(--kit-text-secondary); font-size: var(--kit-text-sm, var(--text-sm)); }
.bk-sample-chips { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.bk-sample-chips span {
  font-size: var(--kit-text-xs, var(--text-xs));
  border-radius: var(--kit-radius-full, var(--radius-full));
  padding: var(--kit-sp-1, var(--sp-1)) var(--kit-sp-3, var(--sp-3));
  border: var(--border-w) solid var(--kit-border-subtle);
}
.bk-chip-ok { color: var(--kit-status-success); background: var(--kit-status-success-muted); }
.bk-chip-warn { color: var(--kit-status-warning); background: var(--kit-status-warning-muted); }
.bk-chip-err { color: var(--kit-status-error); background: var(--kit-status-error-muted); }
.bk-chip-info { color: var(--kit-status-info); background: var(--kit-status-info-muted); }
.bk-field-label { font-size: var(--kit-text-xs, var(--text-xs)); color: var(--kit-text-muted); }
.bk-input {
  background: var(--kit-surface-sunken);
  border: var(--border-w) solid var(--kit-border-default);
  border-radius: var(--kit-radius-sm, var(--radius-sm));
  color: var(--kit-text-primary);
  font-size: var(--kit-text-body, var(--text-body));
  padding: var(--kit-sp-2, var(--sp-2)) var(--kit-sp-3, var(--sp-3));
}

/* --- creator / extractor / drafts sidebar panels ----------------------------- */
.bk-color-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); padding-block: var(--sp-1); }
.bk-color-row code { overflow-wrap: anywhere; }
.bk-color-row input[type="color"] { inline-size: var(--touch-min); block-size: var(--touch-min); padding: 0; border: var(--border-w) solid var(--chrome-border-control); border-radius: var(--radius-sm); background: none; }
.bk-color-src { font-size: var(--bk-meta); color: var(--chrome-text-secondary); }
.bk-color-src[data-src="extracted"] { color: var(--chrome-status-success); }
.bk-color-src[data-src="derived"] { color: var(--chrome-status-info); }
.bk-color-src[data-src="default"] { color: var(--chrome-status-warning); }
.bk-group-details { border: var(--border-w) solid var(--chrome-border-subtle); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-block-end: var(--sp-2); }
.bk-group-details summary { cursor: pointer; color: var(--chrome-text-primary); font-weight: var(--font-semibold); }
.bk-seed-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.bk-draft-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-3); }
.bk-status-line { min-height: var(--sp-5); }
.bk-overrides-note { font-size: var(--bk-meta); color: var(--chrome-text-secondary); }

/* draft sheet token editor (per-token override) */
.bk-editor { border: var(--border-w) solid var(--kit-border-subtle); border-radius: var(--kit-radius-md, var(--radius-md)); padding: var(--sp-2) var(--sp-3); }
.bk-editor summary { cursor: pointer; color: var(--kit-accent-primary); }
.bk-editor .bk-color-row input[type="text"] { max-width: 100%; }

/* reduced motion: same global rule as studio.css covers transitions; this
   page adds no animations of its own. */