/* site.css — the shared frame of every Pinebrook page: page width, masthead (logo + title, nav, as-of line)
   and the sub-tab bar. Loaded by every page AFTER its own <style>, so these rules win.
   Page-specific styling (panels, charts, tables) stays in each page.

   Phones (<= 900px): the logo and title get their own line at the same spot on every page, the nav becomes
   one row you swipe sideways (it never wraps or squeezes the logo), and the as-of line sits under it. */

.wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

.masthead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px;
  padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--border, #1E2430);
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.brand img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; display: block; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--green, #10B981); white-space: nowrap; }
.brand-sub { font-size: 12px; line-height: 1.35; color: var(--text-dim, #8B95A5); margin-top: 1px; }

.mast-right { text-align: right; min-width: 0; }
.pb-nav { display: inline-flex; gap: 2px; background: #12161F; border: 1px solid #1E2430; border-radius: 8px; padding: 3px; max-width: 100%; }
.pb-nav a { font-size: 12px; font-weight: 500; color: #8B95A5; text-decoration: none; padding: 5px 12px; border-radius: 6px; white-space: nowrap; flex-shrink: 0; }
.pb-nav a:hover { color: #F5F7FA; }
.pb-nav a.active { color: #F5F7FA; background: #1E2430; }
.asof { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 12px; color: var(--text-faint, #5B6472); margin-top: 8px; }
.asof .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green, #10B981); margin-right: 6px; vertical-align: 1px; }

.subnav { display: flex; gap: 18px; margin: -8px 0 20px; border-bottom: 1px solid var(--border, #1E2430); }
.subnav a { font-size: 13px; color: var(--text-dim, #8B95A5); text-decoration: none; padding: 8px 0 10px; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.subnav a.active { color: var(--text, #F5F7FA); border-bottom-color: var(--green, #10B981); }

@media (max-width: 900px) {
  .wrap { padding: 20px 16px 64px; }
  .masthead { display: block; padding-bottom: 16px; margin-bottom: 20px; }
  .brand { margin-bottom: 14px; }
  .mast-right { text-align: left; }
  .pb-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pb-nav::-webkit-scrollbar { display: none; }
  .asof { margin-top: 10px; }
  .subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 0; }
  .subnav::-webkit-scrollbar { display: none; }
}