/* =========================================================
   TFB — Night Mode + Signal Breathing Glow + Mobile Polish
   Loaded alongside style.css / tfb.css / command-center inline.
   Activated by body.tfb-night (set by tfb-theme.js).
   Respects prefers-reduced-motion.
   ========================================================= */


/* ---------------------------------------------------------
   1. SIGNAL BREATHING GLOW
   Applied to every yellow element across the design system.
   3.6s ease-in-out — a slow, calm breath. Two sources of
   illumination (filter drop-shadow + box-shadow) so the glow
   reads both around shaped elements (ribbons, chips) AND
   around rectangular elements (cards, buttons).
   --------------------------------------------------------- */
@keyframes tfb-signal-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 230, 0, 0));
    box-shadow: 0 0 0 0 rgba(255, 230, 0, 0);
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(255, 230, 0, 0.55));
    box-shadow: 0 0 28px rgba(255, 230, 0, 0.22);
  }
}
@keyframes tfb-signal-breathe-text {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 230, 0, 0); }
  50%      { text-shadow: 0 0 18px rgba(255, 230, 0, 0.55); }
}
/* Applied to shaped yellow ribbons, bars, chips, buttons */
.tfb-streak,
.tfb-hero .ribbon,
.hero-ribbon,
.auth-ribbon,
.sidebar-brand::before,
.tfb-chip.signal,
.chip.signal,
.tfb-btn-signal,
.btn-signal,
.stat-tile.signal,
.tfb-stat.signal,
.nav-item.active,
#buffer-fill {
  animation: tfb-signal-breathe 3.6s ease-in-out infinite;
  will-change: filter, box-shadow;
}
/* Applied to yellow text elements (logo, stat values on signal bg) */
#header h1,
.stat-tile.signal .stat-value,
.tfb-stat.signal .tfb-stat-value {
  animation: tfb-signal-breathe-text 3.6s ease-in-out infinite;
}
/* Steward avatar pulses too — it's a yellow square identity mark */
.steward-avatar {
  animation: tfb-signal-breathe 3.6s ease-in-out infinite;
}
/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .tfb-streak,
  .tfb-hero .ribbon,
  .hero-ribbon,
  .auth-ribbon,
  .sidebar-brand::before,
  .tfb-chip.signal,
  .chip.signal,
  .tfb-btn-signal,
  .btn-signal,
  .stat-tile.signal,
  .tfb-stat.signal,
  .nav-item.active,
  #buffer-fill,
  #header h1,
  .stat-tile.signal .stat-value,
  .tfb-stat.signal .tfb-stat-value,
  .steward-avatar {
    animation: none !important;
  }
}


/* ---------------------------------------------------------
   2. NIGHT MODE PALETTE — the paper-themed pages
   Inverts paper → ink, tames the signal yellow so it glows
   rather than blinds. Applied when body has .tfb-night.
   --------------------------------------------------------- */
body.tfb-night {
  --tfb-paper:       #0E0F12;
  --tfb-paper-pure:  #16181D;
  --tfb-ink:         #E7E4DC;
  --tfb-signal:      #E8CF28;   /* dimmed from #FFE600 */
  --tfb-signal-ink:  #C9A924;
  --tfb-n-05:        #1D2028;
  --tfb-n-10:        #252830;
  --tfb-n-20:        #3A3D45;
  --tfb-n-40:        #6B6E77;
  --tfb-n-60:        #9C9FA8;
  --tfb-n-80:        #C2C4CB;
  --tfb-clay:        #FF7A52;
  --tfb-ivy:         #5FBF6A;
  --tfb-sky:         #8EB3FF;
  --tfb-plum:        #B57FB5;
  --shadow-print:    4px 4px 0 #000;
  --shadow-signal:   4px 4px 0 rgba(232, 207, 40, 0.75);
}
/* mix-blend-mode: multiply doesn't work on dark backgrounds,
   so convert the streak and ribbons to plain opacity. */
body.tfb-night .tfb-streak,
body.tfb-night .hero-ribbon,
body.tfb-night .tfb-hero .ribbon,
body.tfb-night .auth-ribbon {
  mix-blend-mode: normal;
  opacity: 0.88;
}
/* Dim the breathing glow a touch so the eye has somewhere to rest */
body.tfb-night .tfb-streak,
body.tfb-night .tfb-hero .ribbon,
body.tfb-night .hero-ribbon,
body.tfb-night .auth-ribbon,
body.tfb-night .sidebar-brand::before,
body.tfb-night .tfb-chip.signal,
body.tfb-night .chip.signal,
body.tfb-night .tfb-btn-signal,
body.tfb-night .btn-signal,
body.tfb-night .stat-tile.signal,
body.tfb-night .tfb-stat.signal,
body.tfb-night .nav-item.active,
body.tfb-night #buffer-fill {
  animation-name: tfb-signal-breathe-night;
}
@keyframes tfb-signal-breathe-night {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(232, 207, 40, 0));
    box-shadow: 0 0 0 0 rgba(232, 207, 40, 0);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(232, 207, 40, 0.45));
    box-shadow: 0 0 22px rgba(232, 207, 40, 0.25);
  }
}

/* Keep text DARK on yellow backgrounds in night mode — contrast sink.
   tfb-ink flips to light in night, which is illegible on signal-yellow
   fills. The override must NOT cascade into nested elements that
   themselves have a dark background (e.g. .alert-meta "INFO" tag).
   So: force dark on the container + known text-content children only. */
body.tfb-night .tfb-chip.signal,
body.tfb-night .chip.signal,
body.tfb-night .tfb-btn-signal,
body.tfb-night .btn-signal,
body.tfb-night .tfb-stat.signal,
body.tfb-night .tfb-stat.signal .tfb-stat-label,
body.tfb-night .tfb-stat.signal .tfb-stat-value,
body.tfb-night .tfb-stat.signal .tfb-stat-sub,
body.tfb-night .stat-tile.signal,
body.tfb-night .stat-tile.signal .stat-label,
body.tfb-night .stat-tile.signal .stat-value,
body.tfb-night .stat-tile.signal .stat-sub,
body.tfb-night .mark,
body.tfb-night .alert-banner,
body.tfb-night .alert-banner .alert-title,
body.tfb-night .alert-banner .alert-body,
body.tfb-night .alert-banner .alert-link,
body.tfb-night .alert-banner .alert-dismiss,
body.tfb-night .nav-item.active {
  color: #0A0A0A;
}
/* .alert-meta is a dark-bg chip inside the yellow banner — restore
   its original yellow-on-dark contrast in night mode */
body.tfb-night .alert-banner .alert-meta {
  color: var(--tfb-signal);
}
/* nav-num in active nav-item: mid-dark for the number prefix */
body.tfb-night .nav-item.active .nav-num { color: #2A2925; }

/* Night mode for style.css (chat.html — already dark, but tune down
   the brightest gold so it breathes instead of stabs the eye). */
body.tfb-night {
  --primary:      #E8CF28;
  --primary-dim:  #B59426;
  --primary-muted:rgba(232, 207, 40, 0.08);
  --primary-ghost:rgba(232, 207, 40, 0.04);
}
body.tfb-night #header h1 {
  text-shadow: 0 0 14px rgba(232, 207, 40, 0.18);
}


/* ---------------------------------------------------------
   3. MOBILE POLISH
   Tap targets ≥ 44px, no horizontal scroll, larger body
   text, thinner streak, tightened hero spacing.
   --------------------------------------------------------- */
@media (max-width: 560px) {
  /* tap targets */
  .tfb-btn,
  .tfb-btn-ghost,
  .tfb-btn-primary,
  .tfb-btn-signal,
  .btn-ghost,
  .btn-primary,
  .btn-signal,
  .nav-item,
  #auth-google-btn {
    min-height: 44px;
  }
  .tfb-input, .tfb-textarea {
    min-height: 44px;
    font-size: 16px;  /* prevents iOS Safari auto-zoom */
  }
  .tfb-chip, .chip { height: 26px; padding: 0 12px; }

  /* no horizontal scroll */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* tighter containers */
  .tfb-container, .tfb-container-wide { padding: 14px; }
  .tfb-hero h1, .hero-title {
    font-size: clamp(26px, 6.6vw, 38px);
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }
  .tfb-hero .body, .hero-body { padding: 16px 18px; }

  /* Helsinki streak — thinner on phones, stays visible but doesn't dominate */
  .tfb-streak { width: 10px; right: clamp(10px, 4vw, 40px); }

  /* auth card — tighten the big paper card */
  .auth-card { padding: 28px 24px; }
  .auth-title { font-size: 34px; }
}


/* ---------------------------------------------------------
   4. COMMAND-CENTER MOBILE SHELL
   Sidebar collapses to a left-slide drawer; topbar grows a
   hamburger menu button; ledger hides non-essential columns;
   card grid stacks.
   --------------------------------------------------------- */
.tfb-mobile-menu {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1.5px solid var(--tfb-ink, #0A0A0A);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: inherit;
  flex-shrink: 0;
}
.tfb-mobile-menu:hover { background: var(--tfb-ink, #0A0A0A); color: var(--tfb-paper, #F4F1EA); }

.tfb-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 999;
  animation: tfb-backdrop-fade 180ms ease;
}
@keyframes tfb-backdrop-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  .tfb-mobile-menu { display: inline-flex; }

  /* Sidebar becomes an overlay drawer */
  #app .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh !important;
    width: 86vw;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.85,0,0.15,1);
    z-index: 1000;
    box-shadow: 8px 0 32px rgba(0,0,0,0.45);
  }
  #app .sidebar.open { transform: translateX(0); }
  #app .sidebar.open ~ .tfb-sidebar-backdrop,
  body:has(#app .sidebar.open) .tfb-sidebar-backdrop { display: block; }

  /* Main column takes full width */
  #app .main { width: 100%; }

  /* Topbar tightens */
  .topbar { padding: 10px 14px !important; gap: 10px !important; }
  .search-box { display: none !important; }
  .crumbs { min-width: 0; overflow: hidden; }
  .crumb { font-size: 10px; }

  /* Card grid stacks — 6-card hero becomes a single column */
  .card-span-4, .card-span-6, .card-span-8 { grid-column: span 12 !important; }
  .card { padding: 16px; }

  /* Ledger drops non-essential columns on tight screens */
  .ledger-head, .ledger-row,
  .tfb-ledger-head, .tfb-ledger-row {
    grid-template-columns: 80px 1.4fr 70px !important;
    font-size: 11px;
    gap: 6px;
    padding: 10px;
  }
  .ledger-row .dest,
  .ledger-head span:nth-child(3),
  .ledger-head span:nth-child(4),
  .ledger-row .amt,
  .tfb-ledger-row .dest,
  .tfb-ledger-head span:nth-child(3),
  .tfb-ledger-head span:nth-child(4),
  .tfb-ledger-row .amt {
    display: none !important;
  }

  /* view host */
  .view { padding: 14px !important; }

  /* Hero type scales down */
  .hero-title { font-size: clamp(36px, 9vw, 54px) !important; }
  .hero-dek { font-size: 14px; }

  /* Agents grid goes 2-up then 1-up */
  .agents-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 420px) {
  .agents-grid { grid-template-columns: 1fr !important; }
  .ledger-head, .ledger-row,
  .tfb-ledger-head, .tfb-ledger-row {
    grid-template-columns: 70px 1fr 60px !important;
  }
}


/* ---------------------------------------------------------
   5. THEME TOGGLE BUTTON
   Floating lower-right, 48px target, keyboard-focusable.
   --------------------------------------------------------- */
/* Default (floating-fallback) placement: bottom-LEFT.
   Used only when tfb-theme.js can't find a static header to dock
   into. Most pages have a .tfb-subhead or .topbar and will use the
   .tfb-theme-toggle--docked variant below. */
.tfb-theme-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 48px;
  height: 48px;
  background: var(--tfb-ink, #0A0A0A);
  color: var(--tfb-paper, #F4F1EA);
  border: 1.5px solid var(--tfb-signal, #FFE600);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  z-index: 10001;
  transition: transform 180ms ease, box-shadow 180ms ease;
  user-select: none;
  padding: 0;
}
.tfb-theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-signal, 4px 4px 0 #FFE600);
}
.tfb-theme-toggle:focus-visible {
  outline: 2px solid var(--tfb-signal, #FFE600);
  outline-offset: 3px;
}
.tfb-theme-toggle:active { transform: translateY(0); }
body.tfb-night .tfb-theme-toggle {
  background: var(--tfb-signal);
  color: var(--tfb-paper);
  border-color: var(--tfb-ink);
}

@media (max-width: 560px) {
  .tfb-theme-toggle {
    width: 44px; height: 44px;
    font-size: 20px;
    bottom: 16px; left: 16px;
  }
}
/* When embedded in iframe, the parent owns the toggle — don't duplicate */
body.tfb-embedded .tfb-theme-toggle { display: none !important; }

/* Docked variant: toggle lives inside a static header (.tfb-subhead,
   .topbar, or auth card) — no floating, no overlap with page CTAs. */
.tfb-theme-toggle--docked {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 34px;
  height: 34px;
  font-size: 15px;
  flex-shrink: 0;
  margin-left: 8px;
  border-radius: 999px;
}
@media (max-width: 560px) {
  .tfb-theme-toggle--docked {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin-left: 6px;
  }
}
/* Auth-card variant: center it under the sign-in button at small scale */
.tfb-theme-toggle--docked.tfb-theme-toggle--auth {
  margin-top: 16px;
  align-self: flex-start;
}