/* nsheader.css — the ONE Northset suite bar (nsheader.js). v2 2026-07-03:
   INK bar everywhere (Lowell's call: unified dark header, same size on every app),
   light/paper dropdowns + context row. Grammar: left = where you are (brand → app
   switcher → section tabs), right = ⌕ · one accent verb · ⋯ · avatar. Screen-level
   tools live in the optional .nsh-ctx paper row below the bar. */
.nsh-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: #16171A; border-bottom: 1px solid #2b2721; position: sticky; top: 0; z-index: 100; font-family: 'Archivo', system-ui, sans-serif; box-sizing: border-box; }
.nsh-bar * { box-sizing: border-box; }

.nsh-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; text-decoration: none; flex: none; }
.nsh-dot { width: 11px; height: 11px; border-radius: 50%; background: #2F7D75; flex: none; }
/* The SVG mark from ct-logo.js — matched to the sidebar's sizing (both +25% 2026-07-21). */
.nsh-brand svg { width: 25px; height: 25px; flex: none; }
.nsh-brand .ct-word { width: auto; height: 19px; flex: none; }
/* was: font-family:'Space Grotesk';font-weight:700, 'Archivo', sans-serif — a stray semicolon
   split the stack, so the fallbacks AND the weight were both dead. Only the dot+text fallback
   uses this now, but it should still be correct. */
.nsh-word { font-family: 'Space Grotesk', 'Archivo', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .06em; color: #f2ede2; line-height: 1; }
.nsh-brand:hover .nsh-word { opacity: .82; }

.nsh-swwrap { position: relative; flex: none; }
.nsh-switch { display: flex; align-items: center; gap: 8px; border: 1px solid #3a352e; border-radius: 8px; padding: 7px 11px; cursor: pointer; background: #1d1a16; }
.nsh-switch:hover { border-color: #6b6358; }
.nsh-sub { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: #b7afa2; font-weight: 700; white-space: nowrap; }
.nsh-chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #8f8677; }

.nsh-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nsh-tabs::-webkit-scrollbar { display: none; }
.nsh-tab { border: none; background: transparent; padding: 7px 12px; border-radius: 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: #a89f92; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nsh-tab:hover { color: #f2ede2; }
.nsh-tab.on { color: #fff; box-shadow: inset 0 -2px 0 #2F7D75; }

.nsh-grow { flex: 1; min-width: 6px; }

/* right-side grammar: ⌕ · primary verb · ⋯ · avatar */
.nsh-ic { width: 34px; height: 34px; border: 1px solid #3a352e; border-radius: 8px; background: transparent; color: #cfc8ba; display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; flex: none; }
.nsh-ic:hover { border-color: #6b6358; color: #fff; }
.nsh-primary { border: none; background: #2F7D75; color: #fff; border-radius: 8px; padding: 8px 15px; font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; flex: none; text-decoration: none; }
.nsh-primary:hover { background: #bf3d18; }
.nsh-morewrap { position: relative; flex: none; }

.nsh-acct { position: relative; flex: none; }
.nsh-av { width: 34px; height: 34px; border-radius: 50%; background: #2F7D75; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; cursor: pointer; }
.nsh-signin { border: 1px solid #2F7D75; background: #2F7D75; color: #fff; border-radius: 8px; padding: 8px 15px; font-weight: 700; font-size: 13px; cursor: pointer; }

/* dropdowns (switcher · overflow · account) — LIGHT paper popovers on the ink bar */
.nsh-menu { position: absolute; top: 46px; z-index: 200; background: #fff; border: 1px solid #16171A; border-radius: 11px; box-shadow: 0 16px 44px rgba(20,18,16,.35); padding: 6px; min-width: 218px; }
.nsh-menu[hidden] { display: none; }
.nsh-switchmenu { left: 0; }
.nsh-accmenu, .nsh-moremenu { right: 0; }
.nsh-mlab { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #6b6358; font-weight: 700; padding: 8px 12px 5px; }
.nsh-app { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #16171A; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.nsh-app:hover { background: #f6f3ec; }
.nsh-app.cur { background: #faf1e9; }
.nsh-appd { width: 8px; height: 8px; border-radius: 50%; background: #2F7D75; flex: none; }
.nsh-cd { margin-left: auto; color: #2F7D75; font-size: 9px; }
.nsh-email { font-family: 'Space Mono', monospace; font-size: 11px; color: #6b6358; padding: 10px 12px; border-bottom: 1px solid #efe9dd; margin-bottom: 4px; word-break: break-all; }
.nsh-mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: #16171A; font-weight: 600; font-size: 13px; cursor: pointer; background: transparent; border: none; text-align: left; }
.nsh-mi:hover { background: #f6f3ec; }
.nsh-appear { justify-content: space-between; cursor: default; }
.nsh-appear:hover { background: transparent; }
.nsh-seg { display: inline-flex; border: 1px solid #e0dace; border-radius: 7px; overflow: hidden; }
.nsh-seg button { border: none; background: transparent; font-family: 'Archivo', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; color: #6b6358; padding: 5px 11px; cursor: pointer; }
.nsh-seg button.on { background: #16171A; color: #f6f3ec; }
.nsh-signout { border-top: 1px solid #efe9dd; border-radius: 0; margin-top: 4px; padding-top: 12px; }

/* context row — the PAPER second row a screen owns (breadcrumbs · title · save state ·
   document tools). Sticky under the bar so the grammar holds while scrolling. */
.nsh-ctx { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 4px 16px; background: #faf8f3; border-bottom: 1px solid #e0dace; position: sticky; top: 56px; z-index: 99; font-family: 'Archivo', system-ui, sans-serif; font-size: 12.5px; color: #6b6358; box-sizing: border-box; }
.nsh-ctx b, .nsh-ctx strong { color: #16171A; }
.nsh-ctx .nsh-grow { flex: 1; }
.nsh-ctool { border: 1px solid #e0dace; border-radius: 7px; background: #fff; color: #3a352e; font-family: 'Archivo', system-ui, sans-serif; font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.nsh-ctool:hover { border-color: #16171A; }
.nsh-ctool svg { width: 13px; height: 13px; vertical-align: -2px; }
.nsh-csave { color: #1f7a4d; font-weight: 700; font-size: 11.5px; white-space: nowrap; }

/* dark mode (user theme): bar is already ink; deepen the popovers + context row */
:root[data-theme="dark"] .nsh-menu { background: #211d17; border-color: #3a352d; }
:root[data-theme="dark"] .nsh-app, :root[data-theme="dark"] .nsh-mi { color: #ece7db; }
:root[data-theme="dark"] .nsh-app:hover, :root[data-theme="dark"] .nsh-mi:hover { background: #2a2620; }
:root[data-theme="dark"] .nsh-app.cur { background: #3a2419; }
:root[data-theme="dark"] .nsh-ctx { background: #211d17; border-color: #322e27; color: #a89f92; }
:root[data-theme="dark"] .nsh-ctx b, :root[data-theme="dark"] .nsh-ctx strong { color: #ece7db; }
:root[data-theme="dark"] .nsh-ctool { background: #2a2620; border-color: #3a352d; color: #cfc8ba; }

/* legacy slots (apps not yet migrated to the grammar keep working) */
.nsh-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; color: #cfc8ba; }
.nsh-crumb .crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.ns-hsearch { display: flex; align-items: center; border: 1px solid #3a352e; border-radius: 8px; padding: 0 11px; height: 36px; flex: none; background: #1d1a16; }
.ns-hsearch input { border: none; outline: none; background: transparent; font-family: 'Archivo', system-ui, sans-serif; font-size: 13px; width: 160px; color: #f2ede2; }

/* section tabs mirrored into the switcher menu — phones only (≤640 shows them) */
.nsh-mtab { display: none; }

@media (max-width: 640px) {
  .nsh-bar { padding: 0 10px; gap: 7px; }
  .nsh-word { display: none; }
  .nsh-tabs { display: none; }                /* sections live in the switcher menu instead */
  .nsh-mtab { display: block; }
  .nsh-grow { min-width: 4px; }
  .nsh-switch { max-width: 38vw; overflow: hidden; }
  .nsh-sub { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nsh-acct { flex: none; }                   /* the avatar never gets pushed off-screen */
  .nsh-primary { padding: 7px 10px; font-size: 12px; }
  .ns-hsearch input { width: 110px; }
  /* context row: ONE line that scrolls sideways — never a wrapped stack */
  .nsh-ctx { padding: 4px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nsh-ctx::-webkit-scrollbar { display: none; }
  .nsh-ctx > * { flex: none; white-space: nowrap; }
  .nsh-ctx .nsh-grow { flex: 1 0 14px; }
  .nsh-ctx .saved { display: none; }          /* the progress bar already says it */
  .nsh-track { width: 54px; }
  .nsh-todomenu { position: fixed; top: 102px; right: 8px; }  /* escapes the row's scroll clip */
}

/* builder completion — lives in the paper row (option A, 2026-07-03) */
.nsh-track { width: 92px; height: 5px; border-radius: 3px; background: #e0dace; overflow: hidden; flex: none; }
.nsh-track i { display: block; height: 100%; background: #2F7D75; transition: width .25s; }
.nsh-track.done i { background: #1f7a4d; }
.nsh-pct { font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; color: #16171A; }
.nsh-todowrap { position: relative; flex: none; }
.nsh-todo { font-size: 11.5px; font-weight: 700; color: #b8862a; cursor: pointer; white-space: nowrap; }
.nsh-todo.ready { color: #1f7a4d; cursor: default; }
.nsh-todomenu { position: absolute; top: 24px; right: 0; z-index: 200; background: #fff; border: 1px solid #16171A; border-radius: 9px; box-shadow: 0 12px 30px rgba(20,18,16,.25); padding: 6px; min-width: 190px; }
.nsh-todomenu[hidden] { display: none; }
.nsh-todoitem { padding: 6px 10px; font-size: 12px; color: #16171A; font-weight: 600; white-space: nowrap; }