/* ── Compact 01a nav (#258) — shared shell across logged-in pages ─────
 *
 * Source of truth: server/static/tmp_frontend_overhaul/chalkboard/
 *   generate_and_navbar/design_handoff_chalkboard_v2/01-nav.html
 *
 * Loaded by every authenticated page. Uses .nav-news (NOT
 * .cb-nav-news) so the existing /version.js unread mechanic still
 * applies — default dot is muted, only `.unread` pulses + glows.
 *
 * Geometry: every interactive trigger (Resources, Account, "What's
 * new" pill) carries a transparent border + constant padding always,
 * and only the background changes between resting / open. This is
 * the no-reflow fix for #260: pre-redesign, opening the avatar
 * dropdown added border + padding that shifted the entire nav row.
 * Now nothing changes size on click.
 */

.cb-nav {
  padding: 20px 0;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(15,15,14,0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.cb-nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; gap: 24px;
}
.cb-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--chalk, #f2ede2); flex-shrink: 0;
}
.cb-brand-mark {
  width: 28px; height: 28px;
  border: 1px solid rgba(212,194,122,0.35);
  border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--fSerif, 'DM Serif Display', Georgia, serif);
  color: var(--accent, #d4c27a);
  font-size: 18px;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}
.cb-brand-name {
  font-family: var(--fSerif, 'DM Serif Display', Georgia, serif);
  font-size: 1.1rem;
  letter-spacing: 0.005em;
}
.cb-nav-tabs { display: flex; gap: 4px; margin-left: 14px; }
.cb-nav-tab {
  font-family: var(--fMono, 'DM Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted, #8a857c);
  padding: 6px 12px;
  border-radius: 4px;
  transition: color 0.15s;
}
.cb-nav-tab:hover { color: var(--text, #e8e4db); }
.cb-nav-tab.active { color: var(--accent, #d4c27a); }
.cb-nav-spacer { flex: 1; }

/* Both Resources + Account triggers ship transparent borders / fixed
 * padding so opening doesn't shift the nav. Only the background +
 * caret rotation change on .open. */
.cb-nav-trigger {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--fMono, 'DM Mono', monospace);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #8a857c);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.cb-nav-trigger:hover { color: var(--text, #e8e4db); }
.cb-nav-trigger.open {
  background: var(--bg2, #15140f);
  border-color: var(--border, rgba(255,255,255,0.08));
  color: var(--text, #e8e4db);
}
.cb-nav-trigger .caret {
  font-size: 0.6rem; opacity: 0.6;
  transition: transform 0.12s;
}
.cb-nav-trigger.open .caret {
  transform: rotate(180deg);
  opacity: 0.8;
}

/* "What's new" pill — wired to /version.js. Default state (read) is
 * a quiet muted dot with no glow; only .unread shows the pulse + ring. */
.nav-news {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  font-family: var(--fMono, 'DM Mono', monospace); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted, #8a857c); text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-news:hover { color: var(--text, #e8e4db); border-color: var(--borderStrong, rgba(255,255,255,0.16)); background: rgba(255,255,255,0.02); }
.nav-news-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted2, #5d5953);  /* muted by default — only .unread brightens it */
  flex-shrink: 0;
  transition: background 0.2s, box-shadow 0.2s;
}
.nav-news.unread {
  color: var(--text, #e8e4db);
  border-color: rgba(212,194,122,0.25);
}
.nav-news.unread:hover {
  border-color: var(--accent, #d4c27a);
  background: var(--accentDim, rgba(212,194,122,0.12));
}
.nav-news.unread .nav-news-dot {
  background: var(--accent, #d4c27a);
  box-shadow: 0 0 0 3px var(--accentDim, rgba(212,194,122,0.12));
  animation: nav-news-pulse 2.2s ease-in-out infinite;
}
.nav-news.unread .nav-news-ver { color: var(--accent, #d4c27a); }
@keyframes nav-news-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Account-trigger geometry: transparent border + constant padding
 * always, so opening doesn't reflow the nav. Avatar sits inside the
 * 1px border budget (radius 999 absorbs it). */
.cb-nav-account-trigger {
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.cb-nav-account-trigger:hover { border-color: var(--border, rgba(255,255,255,0.08)); }
.cb-nav-account-trigger.open {
  background: var(--bg2, #15140f);
  border-color: var(--border, rgba(255,255,255,0.08));
}
.cb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2620, #1a1715);
  border: 1px solid var(--borderStrong, rgba(255,255,255,0.16));
  display: grid; place-items: center;
  font-family: var(--fMono, 'DM Mono', monospace); font-size: 10px;
  color: var(--accent, #d4c27a); letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cb-nav-account-trigger .caret {
  color: var(--muted, #8a857c);
  font-family: var(--fMono, 'DM Mono', monospace);
  font-size: 0.7rem;
  transition: transform 0.12s;
}
.cb-nav-account-trigger.open .caret { transform: rotate(180deg); }

/* Dropdown panels — Resources + Account */
.cb-drop {
  position: absolute;
  background: var(--surface, #1a1918);
  border: 1px solid var(--borderStrong, rgba(255,255,255,0.16));
  border-radius: 8px;
  box-shadow:
    0 14px 36px -8px rgba(0,0,0,0.55),
    0 6px 14px -4px rgba(0,0,0,0.35);
  padding: 8px;
  z-index: 60;
}
.cb-drop[hidden] { display: none; }
.cb-drop-header {
  font-family: var(--fMono, 'DM Mono', monospace);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted2, #5d5953);
  padding: 6px 10px 8px;
}
.cb-drop-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 5px;
  text-decoration: none;
  transition: background 0.12s;
}
.cb-drop-item:hover { background: rgba(212,194,122,0.08); color: var(--chalk, #f2ede2); }
.cb-drop-item-icon {
  width: 16px; margin-top: 1px;
  color: var(--muted2, #5d5953);
  font-family: var(--fSerif, serif); font-size: 0.92rem; line-height: 1;
  text-align: center; flex-shrink: 0;
}
.cb-drop-item-title {
  font-family: var(--fMono, 'DM Mono', monospace); font-size: 0.74rem;
  color: var(--text, #e8e4db); letter-spacing: 0.02em;
}
.cb-drop-item-sub {
  font-family: var(--fBody, 'Lora', serif); font-size: 0.74rem;
  color: var(--muted2, #5d5953); line-height: 1.4; margin-top: 2px;
}
.cb-drop-item.danger .cb-drop-item-title { color: var(--danger, #c87a7a); }
.cb-drop-item.accent .cb-drop-item-title { color: var(--accent, #d4c27a); }
.cb-drop-sep { height: 1px; background: var(--border, rgba(255,255,255,0.08)); margin: 6px 4px; }

.cb-drop-account-head { padding: 10px 10px 12px; }
.cb-drop-account-eyebrow {
  font-family: var(--fMono, 'DM Mono', monospace); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted2, #5d5953); margin-bottom: 4px;
}
.cb-drop-account-email {
  font-family: var(--fMono, 'DM Mono', monospace); font-size: 0.78rem;
  color: var(--chalk, #f2ede2);
  word-break: break-all;
}
.cb-drop-account-tag {
  font-family: var(--fMono, 'DM Mono', monospace); font-size: 0.62rem;
  color: var(--muted2, #5d5953); margin-top: 4px; letter-spacing: 0.06em;
}
.cb-drop-spend { padding: 6px 10px 10px; }
.cb-drop-spend-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.cb-drop-spend-label {
  color: var(--muted, #8a857c); font-family: var(--fMono, monospace); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.cb-drop-spend-value {
  color: var(--text, #e8e4db); font-family: var(--fMono, monospace); font-size: 0.7rem;
}
.cb-drop-spend-bar {
  height: 4px; background: var(--bg2, #15140f); border-radius: 2px; overflow: hidden;
}
.cb-drop-spend-bar > div {
  height: 100%; background: var(--accent, #d4c27a);
  transition: width 0.3s, background 0.3s;
}
/* Three-stage tinting matches the in-page #spendWarning banner.
 * notice (≥50%) keeps the gold accent — gentle nudge only.
 * warn   (≥75%) bumps to amber.
 * cap    (≥100%) is red — the user can't fire new jobs at this level. */
.cb-drop-spend-bar.notice > div { background: var(--accent, #d4c27a); }
.cb-drop-spend-bar.warn   > div { background: var(--warn,   #d4a35a); }
.cb-drop-spend-bar.cap    > div { background: var(--danger, #c87a7a); }

/* Below ~720px: drop label text on the "What's new" pill, leave the
 * pulse + version stamp visible so the affordance still reads. */
@media (max-width: 720px) {
  .nav-news-label { display: none; }
  .nav-news { padding: 5px 8px; }
}