/* 30-desktop-topbar.css — Desktop Studio · in-session TOP BAR (handoff 1:1)
   ─────────────────────────────────────────────────────────────────────
   Founder (2026-06-16): make the chat-screen top bar follow the mock. The
   mock's top bar is SESSION CHROME, not the global nav:
     · brand cell (dot + stanzai)              — over the left rail
     · centre: breadcrumb (History / title / phase-pip) + Writer's-mode
     · actions: New song · history · help · settings · avatar — over right rail
   The three cells align to the rail widths (grid var(--dt-left-w) 1fr
   var(--dt-right-w)), divided by hairlines, under the gold seam that already
   lives on #dtTopBar::after (PR #556).

   In a session the global nav tabs (Home/Start/Library/Vault) HIDE and the
   breadcrumb takes over (founder-approved: nav via brand→home + left rail).
   Other screens (home/library/vault) keep the existing nav top bar untouched.

   Writer's mode (founder-approved): the pen toggle collapses BOTH rails and
   hands the centre the full width — reusing the same transform mechanism as
   the collapse affordances. Click again (the toggle stays in the bar) to exit.

   Scope: >=1024 + body.session-active. Linked LAST so it wins the cascade.
   Plain static CSS — no prompts/schemas/model-facing content. */

@media (min-width: 1024px) {

  /* ── Session-only / non-session-only visibility gates ── */
  .dt-sess-only { display: none; }
  body.session-active .dt-sess-only { display: inline-flex; }
  body.session-active .dt-tb-spacer.dt-sess-only { display: block; }
  body.session-active .dt-nonsess-only { display: none; }
  /* Breadcrumb + writer toggle: hidden by default, shown only in-session
     (without this they leak onto Library/Vault/Profile top bars). */
  .dt-crumbs, .dt-writer-toggle { display: none; }

  /* ════════════════ Three rail-aligned cells ════════════════ */
  body.session-active .dt-topbar-inner {
    grid-template-columns: var(--dt-left-w) 1fr var(--dt-right-w);
  }
  /* Cells fill their column; hairline dividers between them (handoff
     .tb-cell + .tb-cell { border-left }). Left cell carries no side border. */
  body.session-active .dt-topbar-left   { justify-self: stretch; border-right: none; padding: 0 20px; gap: 10px; }
  body.session-active .dt-topbar-center { justify-self: stretch; justify-content: space-between; border-left: 1px solid var(--hair); padding: 0 20px; gap: 12px; }
  body.session-active .dt-topbar-right  { justify-self: stretch; border-left: 1px solid var(--hair); padding: 0 20px; gap: 4px; }

  /* ── Brand cell — dot + stanzai (font already set by 24-desktop-studio) ── */
  body.session-active .dt-topbar-mark { gap: 10px; padding: 6px 8px; margin-left: -8px; border-radius: 8px; transition: background var(--state-dur) var(--easing-standard); }
  body.session-active .dt-topbar-mark:hover { background: var(--dt-float); }

  /* ── Centre: hide nav tabs + plain label, show breadcrumb + writer toggle ── */
  body.session-active .dt-nav-item,
  body.session-active #dtTopLabel { display: none !important; }

  body.session-active .dt-crumbs { display: flex; align-items: center; gap: 8px; color: var(--t3); font-size: 13px; min-width: 0; }
  body.session-active .dt-crumb-link {
    color: var(--t2); padding: 3px 6px; margin: -3px -6px; border-radius: 6px; cursor: pointer;
    background: transparent; border: none; font-family: var(--font-body, 'Outfit', sans-serif); font-size: 13px;
    transition: color var(--state-dur) var(--easing-standard), background var(--state-dur) var(--easing-standard);
  }
  body.session-active .dt-crumb-link:hover { color: var(--t1); background: var(--dt-float); }
  body.session-active .dt-crumb-sep { color: var(--t4); }
  body.session-active .dt-crumb-now { color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
  body.session-active .dt-crumb-pip {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(var(--gold-rgb), 0.08); border: 1px solid rgba(var(--gold-rgb), 0.28);
    color: var(--gold); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    transition: opacity .35s var(--easing-standard);
  }
  body.session-active .dt-crumb-pip[hidden] { display: none; }
  body.session-active .dt-crumb-pip::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6); }
  /* Freeform: pip is barely visible until a section activates it (founder).
     Guided never gets .dormant, so it stays full. */
  body.session-active .dt-crumb-pip.dormant { opacity: 0.3; }

  /* ── Writer's-mode toggle (handoff .writer-toggle) ── */
  body.session-active .dt-writer-toggle {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--hair); background: var(--dt-raised); color: var(--t2);
    font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
    transition: color var(--state-dur) var(--easing-standard), border-color var(--state-dur) var(--easing-standard), background var(--state-dur) var(--easing-standard);
  }
  body.session-active .dt-writer-toggle svg { width: 13px; height: 13px; }
  body.session-active .dt-writer-toggle:hover { color: var(--t1); border-color: var(--line, rgba(var(--ivory-rgb),0.13)); }
  body.writer-mode.session-active .dt-writer-toggle {
    background: rgba(var(--gold-rgb), 0.10); border-color: rgba(var(--gold-rgb), 0.4); color: var(--stz-gold-hi, #e8c070);
  }

  /* ── Right cell: New-song pill (handoff .new-quick) + spacer ── */
  body.session-active .dt-new-quick {
    align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(var(--gold-rgb), 0.32); background: rgba(var(--gold-rgb), 0.06);
    color: var(--stz-gold-hi, #e8c070); cursor: pointer;
    font-family: var(--font-body, 'Outfit', sans-serif); font-weight: 500; font-size: 13px;
    transition: background var(--state-dur) var(--easing-standard), border-color var(--state-dur) var(--easing-standard);
  }
  body.session-active .dt-new-quick svg { width: 13px; height: 13px; }
  body.session-active .dt-new-quick:hover { background: rgba(var(--gold-rgb), 0.12); border-color: rgba(var(--gold-rgb), 0.5); }
  body.session-active .dt-tb-spacer { flex: 1; }

  /* ════════════════ WRITER'S MODE — collapse both rails ════════════════
     Independent overlay state (does not touch the user's left/right-collapsed
     prefs). #v9SongBrain transform works because the entrance fill is
     `backwards` (PR #564), so the cascade transform lands. */
  body.writer-mode .tabbar      { transform: translateX(-100%); pointer-events: none; }
  body.writer-mode #v9SongBrain { transform: translateX(100%);  pointer-events: none; }
  body.writer-mode .dt-left-reopen,
  body.writer-mode .dt-right-reopen { display: none !important; }
  body.writer-mode.session-active #s-session,
  body.writer-mode.session-active .v9-input-area,
  body.writer-mode.session-active .hist-drawer { left: 0; right: 0; }
}