/* =============================================================================
 * KOL components — style-guide / brand-guide set
 * =============================================================================
 * Chrome for the @kolkrabbi/kol-styleguide component set: the combination lab,
 * colour anatomy, mood tiles, logo construction/scaling, type blocks, asset
 * tables. Raided from the monorepo apps/brand styleguide (2026-07).
 *
 * Layer: ships unlayered; kol-theme.css assigns the layer at import —
 *   @import "./kol-components-styleguide.css" layer(components);
 *
 * KOL conformance: resting type + colour live INLINE on the JSX (kol-* type
 * classes + kol colour utilities); only structural props Tailwind can't express
 * (grid templates, absolute positioning, transitions, pseudo-elements) live here.
 *
 * Rules are consolidated here as each component lands. Some were relocated from
 * packages/framework/kol-framework.css (the .kol-combo-* / .kol-anatomy-sample /
 * .kol-mood-tile-* clusters) — theme owns component chrome, framework owns page
 * scaffold.
 * ============================================================================= */

/* =============================================================================
   Mood tile — relocated from packages/framework/kol-framework.css 2026-07-10
   ============================================================================= */

/* ───── Mood tile (image + overlay logomark) ─────
   Wrappers inlined in MoodTile.jsx. CSS retains descendant img positioning
   (cover-crop the photo) + overlay logo sizing. */

.kol-mood-tile-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kol-mood-tile-overlay .kol-brand-logo {
  width: 32%;
  max-width: 180px;
  display: inline-flex;
}

.kol-mood-tile-overlay svg {
  width: 100%;
  height: auto;
}

/* =============================================================================
   Combo lab — relocated from packages/framework/kol-framework.css 2026-07-10
   ============================================================================= */

/* ───── Combo Lab layout primitives — shared structure classes ───── */

.kol-combo-frame {
  border-radius: 4px;
  overflow: hidden;
  transition: background-color 400ms ease, border-color 400ms ease;
}

.kol-combo-slab {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  transition: background-color 400ms ease, color 400ms ease;
}

.kol-combo-slab--end     { justify-content: flex-end; }
.kol-combo-slab--between { justify-content: space-between; }

.kol-combo-label {
  font-family: var(--kol-font-family-sans-compact);
  font-size: 12px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0.08em;
}

.kol-combo-number {
  font-family: var(--kol-font-family-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.02em;
}

.kol-combo-stage--fill {
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.kol-combo-logo {
  display: inline-flex;
  color: currentColor;
}

/* 60 / 30 / 10 */
.kol-combo-stage--ratio { display: flex; }
.kol-combo-stage--ratio > :nth-child(1) { flex: 1; }
.kol-combo-stage--ratio > :nth-child(2) { flex: 3; }
.kol-combo-stage--ratio > :nth-child(3) { flex: 6; }

/* Tower */
.kol-combo-stage--tower {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.kol-combo-stage--tower > * { flex: 1; }

/* Quad split */
.kol-combo-stage--quad { display: flex; }
.kol-combo-stage--quad > * { flex: 1; }

.kol-combo-quad-col {
  display: flex;
  flex-direction: column;
}
.kol-combo-quad-col > * { flex: 1; }

/* Card row */
.kol-combo-stage--card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.kol-combo-card {
  flex: 1;
  min-height: 240px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: background-color 400ms ease, color 400ms ease;
}

.kol-combo-card--end     { justify-content: flex-end; }
.kol-combo-card--between { justify-content: space-between; }

/* Stripe row */
.kol-combo-stage--stripe-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.kol-combo-stripe-row {
  display: flex;
  flex: 1;
  align-items: stretch;
  width: 100%;
}

.kol-combo-stripe-bar {
  display: flex;
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.kol-combo-stripe-seg { transition: background-color 400ms ease; }
.kol-combo-stripe-seg--6 { flex: 6; }
.kol-combo-stripe-seg--3 { flex: 3; }
.kol-combo-stripe-seg--1 { flex: 1; }

.kol-combo-stripe-group { display: flex; }
.kol-combo-stripe-group--3 { flex: 3; }
.kol-combo-stripe-group--1 { flex: 1; }

.kol-combo-stripe-neutral {
  border-top: 1px solid var(--stripe-rule, transparent);
  border-bottom: 1px solid var(--stripe-rule, transparent);
}

.kol-combo-stripe-accent-border {
  border: 1.73px solid var(--stripe-accent, transparent);
}

.kol-combo-stripe-method {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--kol-font-family-sans-compact);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 100%;
  color: white;
  pointer-events: none;
}

/* Applied card */
.kol-combo-stage--applied {
  display: flex;
  height: 100%;
  min-height: 360px;
  width: 100%;
}

.kol-combo-applied-plate {
  flex: 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color 400ms ease, color 400ms ease;
}

.kol-combo-applied-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kol-combo-applied-surface { flex: 3; }
.kol-combo-applied-band--lg { flex: 2; }
.kol-combo-applied-band--sm { flex: 1; }
.kol-combo-applied-band { transition: background-color 400ms ease; }

.kol-combo-applied-accent-strip {
  display: flex;
  gap: 8px;
}

.kol-combo-applied-accent-chip {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  transition: background-color 400ms ease;
}

/* ───── Foundations · combo lab ───── */

.kol-combo-lab {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
  border: 1px solid var(--kol-fg-08);
  border-radius: 4px;
  background: var(--kol-fg-02);
}

.kol-combo-controls { margin-bottom: 24px; }

.kol-combo-stage-wrap {
  flex: 1;
  margin-bottom: 24px;
  padding: 32px;
  background: var(--kol-fg-02);
  border-radius: 4px;
  min-height: 440px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.kol-combo-stage-anim {
  width: 100%;
  height: 100%;
  animation: kol-combo-fade 260ms ease;
  display: flex;
  align-items: stretch;
}

.kol-combo-stage-anim > * { width: 100%; height: 100%; }

/* In fullbleed mode, let the lab fill the section */
.kol-page--fullbleed .kol-combo-lab { flex: 1; }
.kol-page--fullbleed .kol-combo-stage-wrap { min-height: 520px; }


.kol-combo-readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 32px;
  padding-top: 16px;
  border-top: 1px solid var(--kol-fg-08);
}

/* Combo Lab — control rows (Layout / Palette / Logo selectors) */
.kol-combo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.kol-combo-row-label { min-width: 72px; }

.kol-combo-row-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kol-combo-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.kol-combo-footer-desc { flex: 1; }

.kol-combo-randomize {
  padding: 8px 16px;
  background: transparent;
  color: var(--kol-fg-80);
  border: 1px solid var(--kol-fg-16);
  border-radius: 4px;
  font-family: var(--kol-font-family-mono, monospace);
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.kol-combo-randomize:hover {
  color: var(--kol-surface-on-primary);
  border-color: var(--kol-fg-48);
  background: var(--kol-fg-04);
}

/* Combo Lab — live palette readout rows */
.kol-combo-swatch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.kol-combo-swatch-chip {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 3px;
  transition: background 400ms ease;
}

.kol-combo-swatch-label {
  min-width: 88px;
  font-weight: 600;
}

.kol-combo-swatch-hex {
  font-family: var(--kol-font-family-mono, monospace);
}

.kol-combo-summary { margin-top: 16px; }

/* =============================================================================
   Color anatomy — relocated from packages/framework/kol-framework.css 2026-07-10
   ============================================================================= */

/* ═════════════════════════════════════════════════════════════════════
   Color Anatomy — token composition samples

   Wrappers inlined in ColorAnatomy.jsx; figure margin via Preflight.
   CSS retains the descendant typography for figcaption + inline <code>.
   ═════════════════════════════════════════════════════════════════════ */

/* mono, upright (2026-07-30 user ruling) — the italic sans rode in with the
 * styleguide raid unsanctioned; Right Grotesk's italic is a placeholder cut,
 * not for use. Captions speak the doc-caption voice: mono 12, no slant. */
.kol-anatomy-sample figcaption {
  margin-top: 12px;
  font-family: var(--kol-font-family-mono);
  font-size: 12px;
  color: var(--kol-fg-48);
  font-style: normal;
}

.kol-anatomy-sample code {
  font-family: var(--kol-font-family-mono, monospace);
  font-size: 11px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
  opacity: 1;
}