/* tui.css — shared DPN terminal chrome for the whole Fortress site.
   Palette tokens live here ONCE; every page (public + backstage) links this.
   Frames are CSS-drawn (border + legend), never literal box-drawing characters,
   so they reflow cleanly and survive the mobile breakpoint. */

:root{
  --void:#0A0A0F; --smoke:#2D2D3A; --bone:#E8E4DC;
  --cyan:#00F5FF; --toxic:#39FF14; --gold:#FFB800; --ember:#FF6B35; --magenta:#FF2D95;
  --mute:#8a8a96; --dim:#5a5a66; --line:#18181f; --panel:#13131b;
}

*{box-sizing:border-box}
body{background:var(--void);color:var(--bone);font:16px/1.7 ui-monospace,"JetBrains Mono",monospace;margin:0}
a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--gold)}

/* ── Frame — Nathan's "hero section": the page's main titled content panel.
      Title legend rides the top border; the .statusbar rides the bottom border
      (void background "breaks" the line, the TUI look). The hero spans the canvas;
      readable prose inside is centered via .post's measure (style.css), not padded. ── */
.frame{position:relative;border:1px solid var(--smoke);margin:1.6rem 0;padding:1.1rem 1rem 1.3rem}
.frame > .ftitle{
  position:absolute;top:0;left:1rem;transform:translateY(-50%);
  background:var(--void);padding:0 .55rem;
  color:var(--gold);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
}
.frame > .ftitle::before{content:"\276F\00a0";color:var(--toxic)}   /* ❯ */

.statusbar{
  position:absolute;left:1rem;bottom:0;transform:translateY(50%);
  background:var(--void);padding:0 .55rem;
  display:flex;gap:.85rem;align-items:center;flex-wrap:nowrap;
  font-size:.64rem;letter-spacing:.06em;color:var(--mute);white-space:nowrap;
}
.statusbar .k{color:var(--cyan)}                    /* the [key] chip */
.statusbar .sep{color:var(--smoke)}                 /* · between hints */

/* ── Inline TUI glyphs (controlled, fixed spots only) ── */
.prompt::before{content:"\276F\00a0";color:var(--toxic)}        /* ❯ prefix */
.leader{flex:1 1 auto;min-width:1.2rem;align-self:center;border-bottom:1px dotted var(--smoke);margin:0 .5rem;transform:translateY(-2px)}

/* ── Topbar (shared, was duplicated inline across backstage) ── */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;background:var(--void);border-bottom:1px solid var(--smoke);padding:.5rem 1rem;font-size:.76rem;letter-spacing:.05em;flex-wrap:wrap}
.tb-brand{display:flex;align-items:center;gap:.4rem;color:var(--gold);font-weight:700;letter-spacing:.18em;text-decoration:none}
.tb-logo{height:20px;width:auto}
.tb-about{color:var(--bone);text-decoration:none;white-space:nowrap;letter-spacing:.1em;opacity:.8}
.tb-air{color:var(--magenta);text-decoration:none;white-space:nowrap}
.tb-air.off{color:var(--dim)}
.tb-now{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cyan)}
.tb-chat{color:var(--gold);text-decoration:none;white-space:nowrap}
.tb-user{color:var(--cyan);text-decoration:none;white-space:nowrap}
.tb-out{color:var(--mute);text-decoration:none;white-space:nowrap}
.topbar a:hover{filter:brightness(1.35)}

/* ── Keybar: a static bottom hint strip for app-like pages (the reader),
      where the border-riding .statusbar doesn't fit a full-height layout. ── */
.keybar{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;flex:none;border-top:1px solid var(--smoke);background:var(--void);padding:.45rem 1rem;font-size:.66rem;letter-spacing:.06em;color:var(--mute)}
.keybar .k{color:var(--cyan)}
.keybar .sep{color:var(--smoke)}

/* ── Backstage nav tabs (shared) ── */
nav.tabs{display:flex;gap:2px;border-bottom:1px solid var(--smoke);padding:0 18px}
nav.tabs a{padding:10px 16px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--mute);border-bottom:2px solid transparent}
nav.tabs a.active{color:var(--cyan);border-bottom-color:var(--cyan)}
nav.tabs a.locked{color:#3a3a44;cursor:not-allowed}

@media (max-width:640px){
  /* On narrow screens the statusbar becomes a normal bottom strip so it can
     wrap without overflowing the frame. */
  .frame{padding:1rem .8rem}
  .statusbar{position:static;transform:none;left:auto;background:transparent;padding:.6rem 0 0;margin-top:.8rem;border-top:1px solid var(--smoke);flex-wrap:wrap;white-space:normal}
}