/* FIRE 0.6 · original open-horizon identity. Load after the app stylesheets. */
@font-face {
  font-family: FireDisplay;
  src: url('./assets/fonts/fire-display-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.app-header {
  min-height: 106px;
  height: auto;
  padding: calc(19px + var(--fire-safe-top, env(safe-area-inset-top, 0px))) max(24px, calc((100vw - 1232px) / 2)) 19px;
  gap: 24px;
  background: #0c2c25;
  background-image: radial-gradient(ellipse at 9% 0, #a46d3521, transparent 48%);
  border-bottom: 1px solid #ccb48b30;
  color: #fff4de;
}
.app-header .brand-lockup {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: 0;
  text-decoration: none;
  border-radius: 6px;
}
.fire-identity {
  --fire-progress: .60;
  --fire-halo-opacity: .30;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  pointer-events: none;
  user-select: none;
}
.fire-identity__emblem {
  position: relative;
  isolation: isolate;
  display: block;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
}
.fire-identity__halo {
  position: absolute;
  inset: -15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #e6ae7959, #d2934c13 48%, transparent 70%);
  opacity: var(--fire-halo-opacity);
  transform-origin: 50% 40%;
}
.fire-identity__emblem svg { width: 100%; height: 100%; overflow: visible; }
.fire-identity__sun-base,
.fire-identity__sun { stroke-width: 5.2; }
.fire-identity__sun-base { stroke: #9c7957; }
.fire-identity__sun { stroke: #efb67f; stroke-opacity: var(--fire-progress); }
.fire-identity__horizon { stroke: #fff2d8; stroke-width: 3.2; }
.fire-identity__reflection { stroke: #8ca498; stroke-width: 3; }
.fire-identity__reflection-end { stroke: #627f71; stroke-width: 2.5; }
.fire-identity__type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}
.fire-identity__title {
  display: block;
  margin: 0;
  padding: 0;
  color: #fff4de;
  font-family: FireDisplay, Waterside, Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: .96;
  letter-spacing: .105em;
  text-indent: -.015em;
  white-space: nowrap;
  text-shadow: none;
}
.fire-identity__subtitle {
  display: block;
  color: #d6d9c6;
  font-family: Waterside, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.25;
  white-space: nowrap;
}
.fire-identity.is-ambient .fire-identity__halo {
  animation: fire-dawn-breathe 6s ease-in-out infinite;
}
.fire-identity.is-acknowledged .fire-identity__halo {
  animation: fire-dawn-acknowledge 900ms ease-out both;
}
.app-header .desktop-nav { margin-left: auto; }
.app-header .nav-button {
  border-radius: 11px;
  color: #c5d2c8;
  min-height: 44px;
}
.app-header .nav-button.active {
  background: #f0d1a612;
  color: #edc393;
}
.app-header .header-actions { flex: 0 0 auto; gap: 8px; }
.app-header .header-actions .icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid #d6e0d12e;
  border-radius: 14px;
  color: #e3e6d6;
  background: #f2ead503;
}
.app-header .header-actions .icon-button:hover { background: #f2ead510; }

@keyframes fire-dawn-breathe {
  0%, 100% { opacity: var(--fire-halo-opacity); transform: scale(.98); }
  50% { opacity: calc(var(--fire-halo-opacity) * .65); transform: scale(1.09); }
}
@keyframes fire-dawn-acknowledge {
  0% { opacity: var(--fire-halo-opacity); transform: scale(1); }
  35% { opacity: .85; transform: scale(1.19); }
  100% { opacity: var(--fire-halo-opacity); transform: scale(1); }
}

@media (max-width: 1000px) and (min-width: 701px) {
  .app-header { gap: 16px; padding-right: 24px; padding-left: 24px; }
  .app-header .nav-button { padding: 11px 12px; }
  .fire-identity { gap: 11px; }
  .fire-identity__emblem { width: 48px; height: 48px; flex-basis: 48px; }
  .fire-identity__title { font-size: 44px; }
}
@media (max-width: 700px) {
  .app-header {
    min-height: 94px;
    height: auto;
    padding: calc(16px + var(--fire-safe-top, env(safe-area-inset-top, 0px))) 18px 16px;
    gap: 12px;
  }
  .app-header .brand-lockup { gap: 0; }
  .fire-identity { gap: 11px; }
  .fire-identity__emblem { width: 44px; height: 44px; flex-basis: 44px; }
  .fire-identity__type { gap: 5px; }
  .fire-identity__title { font-size: 40px; letter-spacing: .10em; }
  .fire-identity__subtitle { font-size: 10.5px; letter-spacing: 0; }
  .app-header .desktop-nav { display: none; }
  .app-header .header-actions { margin-left: auto; gap: 8px; }
}
@media (max-width: 370px) {
  .app-header { padding-right: 16px; padding-left: 16px; gap: 10px; }
  .fire-identity { gap: 9px; }
  .fire-identity__emblem { width: 40px; height: 40px; flex-basis: 40px; }
  .fire-identity__title { font-size: 38px; }
  .fire-identity__subtitle { font-size: 10px; }
}
@media (max-width: 330px) {
  .app-header { padding-right: 12px; padding-left: 12px; gap: 8px; }
  .fire-identity { gap: 7px; }
  .fire-identity__emblem { width: 32px; height: 32px; flex-basis: 32px; }
  .fire-identity__title { font-size: 34px; }
  .fire-identity__subtitle { font-size: 9.5px; }
  .app-header .header-actions { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fire-identity__halo { animation: none !important; transform: none !important; }
}
@media (forced-colors: active) {
  .app-header { background: Canvas; border-color: CanvasText; color: CanvasText; }
  .fire-identity__title, .fire-identity__subtitle { color: CanvasText; }
  .fire-identity__halo { display: none; }
  .fire-identity__emblem svg path { stroke: CanvasText; stroke-opacity: 1; }
  .app-header .header-actions .icon-button { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .app-header .nav-button { color: ButtonText; }
  .app-header .nav-button.active { background: Highlight; color: HighlightText; }
}