/* ════════════════════════════════════════════════════════════════
   Brand Hub — global UI styles
   Imported by every tool. Tool-specific styles go in tool folders.
   ════════════════════════════════════════════════════════════════ */

:root {
  --ui-ink: #1A1A1A;
  --ui-ink-mid: #3C3C3C;
  --ui-ink-light: #6B6B6B;
  --ui-ink-faint: #B8B8B8;
  --ui-rule: #D4D4D4;
  --ui-row-bg: #F6F6F4;
  --ui-canvas: #F4F4F0;
  --ui-toolbar: #111110;
  --ui-shadow: rgba(0,0,0,.18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Text-selection palette (global) ─────────────────────────
   Default: black background + white text — works on light surfaces
   (every standard page body, modals, document canvas, etc.).
   Dark surfaces invert: white background + black text.
   ui.css is loaded on every page, so this rule applies everywhere
   without per-page wiring. */
::selection      { background: #000; color: #fff; }
::-moz-selection { background: #000; color: #fff; }

/* Dark surfaces — invert so selection stays legible. */
body.archive-mode ::selection,
body.archive-mode ::-moz-selection,
.bh-header ::selection,
.bh-header ::-moz-selection,
.dirty-bar ::selection,
.dirty-bar ::-moz-selection {
  background: #fff;
  color: #000;
}

/* html bg matches body so the overscroll "bounce" area doesn't flash
   the browser default white above/below the page on macOS. */
html {
  background: var(--ui-canvas);
}
body {
  font-family: var(--brand-font-english);
  background: var(--ui-canvas);
  color: var(--ui-ink);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ─── PASSWORD GATE (soft, client-side) ─── */
#bh-password-gate {
  position: fixed; inset: 0;
  background: var(--brand-primary-red-dark);
  z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand-font-english);
  padding: 24px;
}
.bh-pg-card {
  background: #fff;
  border-radius: 10px;
  padding: 36px 40px 32px;
  width: 380px;
  max-width: 92vw;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.bh-pg-title {
  font-size: 18px; font-weight: 500;
  margin-bottom: 6px;
  color: var(--ui-ink);
}
.bh-pg-sub {
  font-size: 13px;
  color: var(--ui-ink-light);
  margin-bottom: 22px;
  line-height: 1.5;
}
.bh-pg-form {
  display: flex; flex-direction: column; gap: 10px;
}
.bh-pg-form input {
  padding: 11px 14px;
  border: 1px solid var(--ui-rule);
  border-radius: 5px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ui-ink);
  text-align: center;
}
.bh-pg-form input:focus {
  outline: none;
  border-color: var(--brand-primary-red);
}
.bh-pg-form button {
  padding: 11px 16px;
  background: var(--brand-primary-red);
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 14px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.bh-pg-form button:hover { background: #AA1100; }
.bh-pg-error {
  color: var(--brand-primary-red);
  font-size: 12px;
  margin-top: 12px;
}

/* ─── NOTIFICATION BANNER (Figma 66:2497) ─── */
/* Pinned at the very top of the viewport (sticky stacked above the
   header). Furiosa "Medium Red" lives in the brand palette as
   primary-red-medium. Height ≈ 34px (8px pad + 14px font · 1.3 lh + 8px). */
.bh-banner {
  position: sticky; top: 0; z-index: 199;
  background: var(--brand-primary-red-medium);
  padding: 8px 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: var(--brand-font-english);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--brand-primary-white);
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.bh-banner a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
.bh-banner a:hover { opacity: 0.85; }

/* ─── HEADER (Figma 66:2576) ─── */
/* Pinned just below the banner (sticky stacking — banner takes ~34px,
   so the header offsets by that). */
.bh-header {
  position: sticky; top: 34px; z-index: 200;
  background: var(--brand-primary-black);
  height: 50px;
  display: flex; align-items: center;
  padding: 0 96px;
  gap: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.bh-logo {
  display: inline-flex; align-items: center;
  color: var(--brand-primary-white);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}
.bh-logo svg { height: 26px; width: auto; display: block; }

/* Page-level action slot — pages with setRight() inject buttons here.
   Pushed to the right via auto-margin; nav follows immediately after. */
.bh-header-r {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}

/* Legacy crumb slot — kept hidden so existing pages that target it
   by id (setCrumb / getElementById) still work without a crash. */
.bh-crumb { display: none; }

/* Global nav (right side). 4 items, 24px gap, 16px Medium white. */
.bh-header-nav {
  display: flex; align-items: center; gap: 24px;
  flex-shrink: 0;
}
.bh-nav-item {
  font-family: var(--brand-font-english);
  font-size: 16px; font-weight: 500;
  line-height: 1.55;
  color: var(--brand-primary-white);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: color .12s;
}
.bh-nav-item:hover { color: var(--brand-primary-red); }
.bh-nav-trigger { font-family: inherit; }
.bh-nav-chev {
  font-size: 11px;
  display: inline-block;
  transition: transform .15s;
}
.bh-nav-trigger.is-open .bh-nav-chev { transform: rotate(180deg); }

/* Narrow viewports: shrink horizontal padding so the nav still fits */
@media (max-width: 1100px) {
  .bh-banner { padding: 8px 32px; }
  .bh-header { padding: 0 32px; gap: 16px; }
  .bh-header-nav { gap: 18px; }
  .bh-nav-item { font-size: 14px; }
}

.bh-user {
  font-family: var(--brand-font-mono);
  font-size: 11px; color: #555550;
}

/* ─── BUTTONS ─── */
.bh-btn {
  font-family: var(--brand-font-english);
  font-size: 11.5px; font-weight: 500;
  padding: 6px 14px; border-radius: 5px; cursor: pointer;
  border: none; display: inline-flex; align-items: center; gap: 5px;
  transition: all .12s;
}
.bh-btn:disabled { opacity: .4; cursor: not-allowed; }
.bh-btn-ghost {
  background: transparent; color: #888882;
  border: 1px solid #252522;
}
.bh-btn-ghost:hover:not(:disabled) {
  background: #1A1A18; color: #BBBBB6;
}
.bh-btn-primary {
  background: var(--brand-primary-red); color: #fff;
}
.bh-btn-primary:hover:not(:disabled) { background: #AA1100; }
.bh-btn-save {
  background: #1E1E1C; color: #CACAC4;
  border: 1px solid #2E2E2A;
}
.bh-btn-save:hover:not(:disabled) { background: #272724; }

/* ─── LAYOUT ─── */
/* Canonical page container. 1400px max content width, 60px padding on
   all four sides — used as the global UI rule for every list/content
   page on the platform. Tool views (e.g., the document editor) opt
   out and manage their own layout. */
.bh-page-body {
  max-width: 1400px; margin: 0 auto;
  padding: 60px;
}
.bh-page-title {
  font-size: 24px; font-weight: 500;
  margin-bottom: 4px;
}
.bh-page-sub {
  font-family: var(--brand-font-mono);
  font-size: 11px; color: var(--ui-ink-light);
  margin-bottom: 32px;
}
.bh-section {
  margin-bottom: 40px;
}
.bh-section-title {
  font-family: var(--brand-font-mono);
  font-size: 10px; color: var(--ui-ink-light);
  text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: 14px;
}

/* ─── TOAST ─── */
.bh-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ui-toolbar); color: #CCCCC6;
  font-family: var(--brand-font-mono); font-size: 11px;
  padding: 9px 18px; border-radius: 6px; border: 1px solid #252522;
  opacity: 0; transition: opacity .18s, transform .18s;
  pointer-events: none; z-index: 999; white-space: nowrap;
}
.bh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── BUTTONS — danger variant (delete) ─── */
.bh-btn-danger {
  background: var(--brand-primary-red); color: #fff;
}
.bh-btn-danger:hover:not(:disabled) { background: #AA1100; }

/* ─── MODAL (form overlay used by admin actions) ─── */
.bh-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .42);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
}
.bh-modal-card {
  width: min(440px, 92vw);
  background: #fff; border-radius: 8px;
  padding: 22px 22px 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.bh-modal-title {
  font-size: 15px; font-weight: 500;
  margin-bottom: 16px;
}
.bh-modal-form {
  display: flex; flex-direction: column; gap: 12px;
}
.bh-field {
  display: flex; flex-direction: column; gap: 5px;
}
.bh-field-label {
  font-family: var(--brand-font-mono);
  font-size: 10px; color: var(--ui-ink-light);
  text-transform: uppercase; letter-spacing: .08em;
}
.bh-field input,
.bh-field textarea,
.bh-field select {
  font-family: var(--brand-font-english);
  font-size: 13px; color: var(--ui-ink);
  background: #fff;
  border: 1px solid var(--ui-rule); border-radius: 5px;
  padding: 8px 10px;
  outline: none;
  transition: border-color .12s;
}
.bh-field input:focus,
.bh-field textarea:focus,
.bh-field select:focus { border-color: var(--brand-primary-red); }
.bh-field input:disabled,
.bh-field textarea:disabled,
.bh-field select:disabled {
  background: #F2F2EE; color: var(--ui-ink-light); cursor: not-allowed;
}
.bh-field-hint {
  font-family: var(--brand-font-mono);
  font-size: 10px; color: var(--ui-ink-light);
}
.bh-field-counter {
  font-family: var(--brand-font-mono);
  font-size: 10px;
  color: var(--ui-ink-faint);
  text-align: right;
  margin-top: 4px;
}
.bh-field-counter.is-near { color: var(--brand-primary-red); }

/* ── Custom dropdown (Figma node 68:25) ──────────────────────
   Used in place of native <select> for the filter pills on the
   archive views. Trigger styling lives with the call-site (e.g.
   .archive-pill); the panel lives here so any caller gets the
   same visual. */
.bh-dropdown-panel {
  position: absolute;
  z-index: 1000;
  min-width: 169px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
/* Override [hidden]'s default display:none with our display:flex above
   means we have to opt back in to hiding when the attribute is set. */
.bh-dropdown-panel[hidden] { display: none; }
.bh-dropdown-item {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--brand-font-english);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #444;
  text-align: left;
  white-space: nowrap;
}
.bh-dropdown-item:hover { color: #000; }
.bh-dropdown-item.is-active {
  color: #000;
  font-weight: 600;
}
.bh-dropdown-rule {
  border: 0;
  border-top: 1px solid #DCDCDC;
  margin: 0;
}
.bh-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 12px;
}
.bh-checkbox-item {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--brand-font-english);
  font-size: 13px;
  color: var(--ui-ink);
  cursor: pointer;
}
.bh-checkbox-item input { margin: 0; cursor: pointer; }
.bh-checkbox-item input:disabled { cursor: not-allowed; }
.bh-add-inline { margin-top: 8px; }
.bh-add-toggle {
  background: transparent;
  border: 1px dashed var(--ui-rule);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: var(--brand-font-mono);
  font-size: 11px;
  color: var(--ui-ink-light);
  cursor: pointer;
}
.bh-add-toggle:hover { border-color: var(--brand-primary-red); color: var(--brand-primary-red); }
.bh-add-row {
  display: flex; gap: 6px; align-items: center;
}
.bh-add-row input {
  flex: 1;
  padding: 6px 9px;
  border: 1px solid var(--ui-rule);
  border-radius: 4px;
  font-size: 13px;
}
.bh-add-row input:focus { border-color: var(--brand-primary-red); outline: none; }
.bh-add-row .bh-btn { padding: 6px 12px; font-size: 12px; }
.bh-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 8px;
}