/* App shell: the ambient hearth glow, tab nav, and view switching. */

body.hkc-has-bar { padding-top: var(--bar); }
/* when the shared bar is collapsed, drop our sticky offset to match (var(--bar)
   resolves at :root, so override it here at the body where the collapse class lives) */
body.hkc-collapsed { --bar: 0px; }

/* --- ambient firelight, bottom of screen. calm by default, breathes when live --- */
.hearth-glow {
  position: fixed; inset: auto 0 0 0; height: 42vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 130%, var(--glow) 0%, rgba(240,161,90,.06) 42%, transparent 68%);
  opacity: .5; transition: opacity 1.2s var(--ease);
}
.hearth-glow.is-lit {
  background:
    radial-gradient(130% 90% at 50% 132%, var(--glow-hot) 0%, rgba(228,100,43,.09) 45%, transparent 70%);
  opacity: 1; animation: flicker 6s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { opacity: .92; } 25% { opacity: 1; } 50% { opacity: .84; } 72% { opacity: .97; }
}

.app { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 28px) calc(var(--mantel-h) + 28px); }

/* --- tabs --- */
.tabs {
  position: sticky; top: var(--bar); z-index: 5;
  display: flex; align-items: center; gap: .3rem;
  padding: .7rem 0 .55rem; margin-bottom: .4rem;
  background: linear-gradient(var(--bg) 62%, transparent);
}
.tabs__btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-display); font-size: var(--step-1); font-weight: 600;
  color: var(--ink-mute); padding: .1rem .2rem; letter-spacing: -.01em;
  position: relative; transition: color .2s var(--ease);
}
.tabs__btn.is-active { color: var(--ink); }
.tabs__btn.is-active::after {
  content: ""; position: absolute; left: .2rem; right: .2rem; bottom: -.28rem; height: 2px;
  background: var(--ember); border-radius: 2px;
}
.tabs__spacer { flex: 1; }
.tabs__who {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line);
  background: var(--bg-hi); color: var(--ember-soft); cursor: pointer;
  font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  display: grid; place-items: center;
}

.view { display: none; }
.view.is-active { display: block; animation: rise .35s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.btn-ghost {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  border-radius: 999px; padding: .38rem .8rem; font-size: var(--step--1); cursor: pointer;
  letter-spacing: .02em; transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--ember); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .hearth-glow, .view, .view.is-active { animation: none !important; transition: none; }
}