/* ENOK BrandMaps — framework styles. Zero dependencies, CSP-safe.
 * Chrome uses the ENOK adobe palette (light default, dark alternate via
 * [data-bm-theme="dark"]). The board itself renders in the *generated* brand's
 * tokens (--bm-* set on .bm-board by BrandMaps.render), so the preview is a
 * living, in-brand artefact — not a screenshot of one.
 * ENOK · enok.com · on The Cloud. Ora · Claude Opus 4.8 · Claude Code — 2026-07-26.
 */
.bm-app {
  --c-bg: #f2ede3; --c-panel: #fbf8f1; --c-line: #e5ddcc; --c-line-soft: #ece5d6;
  --c-ink: #2e2a24; --c-ink2: #6e6558; --c-ink3: #a49883; --c-chip: #efe8da; --c-hover: #f1ebde;
  --c-ok: #6b8f5e;
  --r: 14px;
  font-family: "Open Procured Standard", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.15px;
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  display: block;
}
[data-bm-theme="dark"] .bm-app, .bm-app[data-bm-theme="dark"] {
  --c-bg: #0b0b0d; --c-panel: #141417; --c-line: #232329; --c-line-soft: #1d1d22;
  --c-ink: #f4f4f6; --c-ink2: #a2a2ab; --c-ink3: #63636d; --c-chip: #1d1d22; --c-hover: #1a1a1f;
  --c-ok: #8fb87f;
}

/* ---- controls ---- */
.bm-controls { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.bm-field { display: flex; gap: 10px; }
.bm-input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--c-ink);
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 999px;
  padding: 12px 18px; outline: none; transition: border-color .18s, box-shadow .18s;
}
.bm-input::placeholder { color: var(--c-ink3); }
.bm-input:focus { border-color: var(--c-ink2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-ink3) 22%, transparent); }

.bm-btn {
  font: inherit; font-size: 13px; color: var(--c-ink2); background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.bm-btn:hover { color: var(--c-ink); border-color: var(--c-ink3); background: var(--c-hover); }
.bm-btn.primary { color: #fbf9f4; background: #2e2a24; border-color: #2e2a24; padding: 11px 22px; font-size: 14px; }
[data-bm-theme="dark"] .bm-btn.primary { color: #17171a; background: #ececf1; border-color: #ececf1; }
.bm-btn.primary:hover { opacity: .9; }
.bm-btn.is-ok { color: #fff; background: var(--c-ok); border-color: var(--c-ok); }

.bm-moods { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-mood {
  font: inherit; font-size: 12px; color: var(--c-ink2); background: transparent;
  border: 1px solid var(--c-line); border-radius: 999px; padding: 6px 13px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.bm-mood:hover { color: var(--c-ink); border-color: var(--c-ink3); }
.bm-mood.is-on { color: var(--c-ink); border-color: var(--c-ink); background: var(--c-chip); }
.bm-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- the board (renders in the generated brand's own tokens) ---- */
.bm-board {
  --bm-paper: #f5f1ea; --bm-panel: #fbf9f4; --bm-ink: #211d18; --bm-ink-soft: #6b6155;
  --bm-line: #e6ddce; --bm-accent: #b06a3a; --bm-accent-soft: #ecd9c8; --bm-support: #6d8f5e;
  --bm-r: 12px; --bm-display: Georgia, serif; --bm-text: system-ui, sans-serif;
  background: var(--bm-paper); color: var(--bm-ink);
  border: 1px solid var(--bm-line); border-radius: calc(var(--bm-r) + 8px);
  padding: 30px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 1px 2px rgba(40, 34, 26, .05), 0 18px 40px -28px rgba(40, 34, 26, .35);
}
.bm-board.is-in { animation: bm-rise .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes bm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.bm-board__head { display: flex; align-items: center; gap: 16px; }
.bm-mark {
  width: 60px; height: 60px; flex: none; color: var(--bm-accent);
  background: var(--bm-panel); border: 1px solid var(--bm-line);
  border-radius: var(--bm-r); display: grid; place-items: center;
}
.bm-mark svg { width: 40px; height: 40px; }
.bm-wordmark { font-family: var(--bm-display); font-size: clamp(26px, 5vw, 38px); line-height: 1.05; }
.bm-meta { font-family: var(--bm-text); font-size: 12px; color: var(--bm-ink-soft); margin-top: 4px; }
.bm-code { font-variant-numeric: tabular-nums; letter-spacing: .4px; }

.bm-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.bm-swatch {
  aspect-ratio: 1 / 1.15; border-radius: var(--bm-r); padding: 8px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  border: 1px solid color-mix(in srgb, var(--bm-ink) 12%, transparent); overflow: hidden;
}
.bm-swatch__role { font-family: var(--bm-text); font-size: 10px; opacity: .8; }
.bm-swatch__hex { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; letter-spacing: -.3px; }

.bm-type { display: flex; gap: 18px; align-items: stretch; }
.bm-type__specimen {
  font-family: var(--bm-display); font-size: 76px; line-height: 1; color: var(--bm-accent);
  flex: none; width: 96px; display: grid; place-items: center;
  background: var(--bm-panel); border: 1px solid var(--bm-line); border-radius: var(--bm-r);
}
.bm-type__body { min-width: 0; }
.bm-h { font-family: var(--bm-display); font-size: clamp(18px, 3vw, 24px); line-height: 1.2; }
.bm-p { font-family: var(--bm-text); font-size: 14px; line-height: 1.6; color: var(--bm-ink-soft); margin: 8px 0 0; }
.bm-pairnote { font-family: var(--bm-text); font-size: 11.5px; color: var(--bm-ink-soft); margin-top: 10px; opacity: .85; }

.bm-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bm-kws { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-kw {
  font-family: var(--bm-text); font-size: 12px; color: var(--bm-ink);
  background: var(--bm-accent-soft); border-radius: 999px; padding: 5px 12px;
}
.bm-tagline { font-family: var(--bm-display); font-size: 15px; color: var(--bm-ink-soft); font-style: italic; }

.bm-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--bm-text); font-size: 11.5px; color: var(--bm-ink-soft); }
.bm-tokens__lbl { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; }
.bm-rchip {
  width: 34px; height: 26px; display: grid; place-items: center; font-size: 10px;
  color: var(--bm-ink-soft); background: var(--bm-panel); border: 1px solid var(--bm-line);
}
.bm-tokens__note { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .bm-swatches { grid-template-columns: repeat(4, 1fr); }
  .bm-type { flex-direction: column; }
  .bm-type__specimen { width: 100%; font-size: 60px; padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bm-board.is-in { animation: none; }
  .bm-input, .bm-btn, .bm-mood { transition: none; }
}