/* ── Reset & Base ───────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Clip horizontal overflow at the document root too — on real mobile a
   `position: fixed` bar sizes to the layout viewport, so any stray element
   wider than the screen would stretch it and shift fixed/centered content
   (e.g. the Articles pinned section bar) to the right. */
html { overflow: hidden; }

body {
  font-family: var(--font-sans);
  background:  var(--bg0);
  color:       var(--t0);
  height:      100vh;
  display:     flex;
  flex-direction: column;
  overflow:    hidden;
}

/* SPA slot — must propagate the body flex sizing to its child page so
   layouts that expect direct-child flex (e.g. `.main-area { flex:1 }`)
   keep working after we wrapped content in this div. */
#spa-slot {
  flex:           1;
  display:        flex;
  flex-direction: column;
  min-height:     0;
  overflow:       hidden;
}

/* ── Navigation ─────────────────────────────────────────────────── */
.navbar {
  height:      var(--nav-h);
  background:  var(--bg1);
  border-bottom: 1px solid var(--bdr);
  display:     flex;
  align-items: center;
  padding:     0 14px;
  gap:         6px;
  flex-shrink: 0;
  z-index:     300;
  /* tabs that don't fit are confined to the nav-links scroller below —
     never let them push the navbar (and the whole page) wider than the viewport */
  overflow:    hidden;
}

.nav-logo {
  display:         inline-flex;
  flex-direction:  row;
  align-items:     center;          /* mark + wordmark on a shared centerline */
  gap:             9px;
  /* Space Grotesk — geometric display face that pairs with the mark. */
  font-family:     var(--font-brand);
  letter-spacing:  -0.015em;
  white-space:     nowrap;
  text-decoration: none;
  flex-shrink:     0;   /* logo stays pinned at the left */
}
/* Logomark — a flame (natural gas) in a rounded gradient badge. This is what
   makes the lockup read as a logo rather than plain styled text. */
.nav-logo-mark {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  border-radius:   6px;
  box-sizing:      border-box;
  /* Outline badge — accent border + accent flame on a transparent fill. Reads
     light/restrained and works on both the light and dark navbar without any
     inversion. Sized to the wordmark's line height so it doesn't tower over the
     text. Flame fill follows `color` (currentColor). */
  border:          1.5px solid var(--acc);
  background:      transparent;
  color:           var(--acc);
}
.nav-logo-mark svg { width: 14px; height: 14px; display: block; }

.nav-logo-words {
  display:        inline-flex;
  align-items:    baseline;
  gap:            5px;
  line-height:    1.05;
}
.nav-logo .brand-l1 { font-size: 20px; font-weight: 600; color: var(--t0);  }
.nav-logo .brand-l2 { font-size: 20px; font-weight: 600; color: var(--acc); }

.nav-links {
  display:     flex;
  align-items: center;
  gap:         2px;
  margin-left: 24px;
  /* on narrow screens the tab strip scrolls horizontally instead of widening
     the page; logo (left) and nav-right (theme toggle) stay pinned */
  min-width:   0;
  overflow-x:  auto;
  scrollbar-width: none;            /* Firefox — hide the bar, keep the scroll */
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }   /* WebKit/Blink */

.nav-link {
  font-size:      14px;
  font-weight:    500;
  color:          var(--t1);
  text-decoration: none;
  padding:        5px 11px;
  border-radius:  6px;
  transition:     all .13s;
  white-space:    nowrap;
}
.nav-link:hover          { background: var(--bg2); color: var(--t0); }
.nav-link.active         { background: var(--bg3); color: var(--acc); }

/* Insights — coming soon: dimmed but clickable */
.nav-soon                { opacity: .5; }
.nav-soon:hover          { opacity: .8; }
.nav-badge {
  font-family:    var(--font-mono);
  font-size:      8px;
  font-weight:    600;
  letter-spacing: .06em;
  margin-left:    5px;
  padding:        1px 5px;
  border-radius:  4px;
  background:     var(--bg3);
  color:          var(--t2);
  vertical-align: 1px;
}

.nav-sep {
  width:      1px;
  height:     20px;
  background: var(--bdr);
  flex-shrink: 0;
  margin:     0 4px;
}

.nav-right {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;   /* theme toggle stays pinned at the right */
}

/* ── Left product nav rail (expand-on-hover) ────────────────────────
   Thin icon strip flush to the left edge on the user-facing product pages
   (Dashboard / Price / Articles / Weather / Assessment). Rendered in base.html
   only when `show_rail` is set; the page content is inset by the collapsed width
   (see `body.has-nav-rail #spa-slot`) and the expanded rail overlays it. */
/* Collapsed: a thin strip flush to the left edge, full height below the navbar,
   icons grouped at the TOP. On hover (or keyboard focus) the whole rail widens and
   slides its labels in, overlaying the page content — then snaps back to the thin
   strip on mouse-out. Pure CSS: the width transition does the sliding. */
.nav-rail {
  position:        fixed;
  left:            0;
  top:             var(--nav-h);
  bottom:          0;
  width:           52px;             /* collapsed strip width */
  z-index:         880;
  display:         flex;
  flex-direction:  column;
  align-items:     stretch;
  justify-content: flex-start;       /* icons at the top */
  gap:             6px;
  padding:         12px 6px;
  overflow:        hidden;           /* clip the labels while collapsed */
  /* Dark mode: a hair above the page bg so the strip reads as a surface, with a
     faint lit right edge instead of a heavy border (subtle separation). */
  background:      #161a24;
  border-right:    1px solid rgba(255, 255, 255, .07);
  transition:      width .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease;
}
.nav-rail:hover,
.nav-rail:focus-within {
  width:      210px;                 /* expanded — room for [icon] label rows */
  box-shadow: 16px 0 44px rgba(0, 0, 0, .5);   /* lift over the content it overlays */
}
body.light .nav-rail {
  /* Light mode: white strip separated from the grey canvas by a hairline; the
     overlay shadow only appears once expanded. */
  background:   #fff;
  border-right: 1px solid #e9ecf2;
}
body.light .nav-rail:hover,
body.light .nav-rail:focus-within {
  box-shadow: 10px 0 30px rgba(16, 24, 40, .12), 2px 0 8px rgba(16, 24, 40, .05);
}
/* Each item is a full-width row: a fixed icon on the left + a label that only
   shows once the rail is expanded. The icon's left offset is identical in both
   states (padding-left here never changes), so expanding reads as the label
   sliding in — the icons themselves never jump. */
.nav-rail-btn {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  width:           100%;
  height:          40px;
  flex-shrink:     0;
  padding-left:    9px;
  gap:             13px;
  border-radius:   10px;
  color:           var(--t1);
  text-decoration: none;
  white-space:     nowrap;
  overflow:        hidden;
  transition:      background .13s, color .13s;
}
.nav-rail-btn:hover  { background: rgba(255, 255, 255, .06); color: var(--t0); }
.nav-rail-btn.active { background: rgba(74, 158, 255, .16); color: var(--acc); }
body.light .nav-rail-btn:hover { background: #f0f2f5; }
.nav-rail-btn svg { width: 22px; height: 22px; display: block; flex-shrink: 0; }

/* Inline label — clipped while the rail is the thin strip, fades in once it
   expands (no flyout chip anymore). */
.nav-rail-label {
  font-size:      13px;
  font-weight:    600;
  letter-spacing: .01em;
  line-height:    1;
  color:          var(--t0);
  white-space:    nowrap;
  opacity:        0;
  transition:     opacity .14s ease;
}
.nav-rail:hover .nav-rail-label,
.nav-rail:focus-within .nav-rail-label {
  opacity:          1;
  transition-delay: .04s;        /* let the width start opening before the text */
}

/* "NGIP AI" lockup — colour contrast so the AI tag reads, not the all-caps
   brand. Same weight; AI carries the brand accent. */
.nav-ai-tag { color: var(--acc); }
/* the bright --acc washes out on a white bg — deepen it in light mode so the
   AI tag stays crisp. */
body.light .nav-ai-tag { color: #1668d6; }

/* Sectioned groups — each is divided from what's above by a hairline that spans
   the collapsed strip; the admin/Tools group is additionally pinned to the
   bottom. When the rail expands, each group reveals a small caption (grouphead). */
.nav-rail-group,
.nav-rail-admin {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-top:     6px;
  padding-top:    8px;
  border-top:     1px solid rgba(255, 255, 255, .07);
}
.nav-rail-admin { margin-top: auto; }   /* Tools group sits at the bottom */
body.light .nav-rail-group,
body.light .nav-rail-admin { border-top-color: #e9ecf2; }

/* Section caption — collapsed to nothing on the thin strip (icons only), slides
   open above its group once the rail expands. */
.nav-rail-grouphead {
  height:         0;
  opacity:        0;
  overflow:       hidden;
  padding-left:   11px;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          var(--t2);
  white-space:    nowrap;
  transition:     height .18s ease, opacity .14s ease, margin .18s ease;
}
.nav-rail:hover .nav-rail-grouphead,
.nav-rail:focus-within .nav-rail-grouphead {
  height:           12px;
  opacity:          1;
  margin:           2px 0 1px;
  transition-delay: .04s;
}
/* Emoji-icon addon rows: keep the glyph aligned with the 22px SVG icon column. */
.nav-rail-emoji {
  width:       22px;
  flex-shrink: 0;
  font-size:   17px;
  text-align:  center;
  line-height: 1;
}

/* Page content clears the COLLAPSED rail; the expanded rail overlays it on hover. */
body.has-nav-rail #spa-slot { padding-left: 64px; }

/* ── Mobile nav: hamburger + slide-in drawer ────────────────────────
   Desktop shows the top tab strip (+ the left rail on product pages); the
   hamburger, drawer, and backdrop are hidden there. On ≤900px the tab strip is
   removed, the logo is centered, and the hamburger opens a left drawer holding
   the full navigation. */
.nav-burger {
  display:         none;            /* desktop: hidden — top tabs handle nav */
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  flex-shrink:     0;
  background:      none;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  color:           var(--t1);
  transition:      background .13s, color .13s;
}
.nav-burger:hover { background: var(--bg2); color: var(--t0); }
.nav-burger svg   { width: 24px; height: 24px; display: block; }

.nav-drawer-backdrop {
  display:        none;             /* mobile-only; toggled by the media query */
  position:       fixed;
  inset:          0;
  background:     rgba(8, 12, 20, .5);
  z-index:        990;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .26s ease;
}
.nav-drawer {
  display:        none;             /* mobile-only */
  position:       fixed;
  top:            0;
  left:           0;
  bottom:         0;
  width:          min(82vw, 320px);
  z-index:        1000;
  flex-direction: column;
  background:     var(--bg1);
  transform:      translateX(-100%);
  transition:     transform .26s cubic-bezier(.4, 0, .2, 1);
  overflow-y:     auto;
}
/* Shadow only while open — otherwise the off-screen panel's shadow bleeds past
   the left edge and looks like a faint shade on the page before it's opened. */
body.nav-open .nav-drawer          { transform: translateX(0); box-shadow: 14px 0 44px rgba(0, 0, 0, .42); }
body.light.nav-open .nav-drawer    { box-shadow: 12px 0 36px rgba(16, 24, 40, .16); }
body.nav-open .nav-drawer-backdrop { opacity: 1; pointer-events: auto; }

.nav-drawer-head {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  min-height:      var(--nav-h);
  padding:         10px 12px;
  flex-shrink:     0;
}
.nav-drawer-close {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  flex-shrink:     0;
  background:      none;
  border:          none;
  border-radius:   8px;
  cursor:          pointer;
  color:           var(--t2);
  transition:      background .13s, color .13s;
}
.nav-drawer-close:hover { background: var(--bg2); color: var(--t0); }
.nav-drawer-close svg   { width: 20px; height: 20px; display: block; }

.nav-drawer-body {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  padding:        12px 10px;
}
.nav-drawer-link {
  display:         flex;
  align-items:     center;
  gap:             13px;
  padding:         11px 12px;
  border-radius:   10px;
  color:           var(--t1);
  text-decoration: none;
  font-size:       15px;
  font-weight:     600;
  white-space:     nowrap;
  transition:      background .13s, color .13s;
}
.nav-drawer-link:hover  { background: var(--bg2); color: var(--t0); }
.nav-drawer-link.active { background: rgba(74, 158, 255, .16); color: var(--acc); }
.nav-drawer-link svg    { width: 22px; height: 22px; flex-shrink: 0; }
.nav-drawer-emoji       { width: 22px; text-align: center; flex-shrink: 0; font-size: 17px; }
.nav-drawer-sep         { height: 1px; background: var(--bdr); margin: 10px 12px; }
.nav-drawer-cap {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          var(--t2);
  padding:        14px 12px 4px;
}

@media (max-width: 900px) {
  /* Mobile rail polish is a later pass — hide it and drop the gutter. */
  .nav-rail { display: none; }
  body.has-nav-rail #spa-slot { padding-left: 0; }

  /* Top strip out, hamburger in, logo centered. The logo is taken out of flow
     and centered on the navbar so the hamburger (left) and theme toggle (right)
     can't shift it off-center. */
  .navbar      { position: relative; }
  .nav-links   { display: none; }
  .nav-burger  { display: inline-flex; }
  .nav-drawer-backdrop { display: block; }
  .nav-drawer  { display: flex; }

  .nav-logo {
    /* Centered on the navbar so the hamburger (left) and theme toggle (right)
       can't shift it off-center. */
    position:        absolute;
    left:            50%;
    top:             50%;
    transform:       translate(-50%, -50%);
  }
  /* Phones: drop the badge mark and keep just the wordmark on a single line,
     scaled to clear the hamburger and theme toggle. */
  .nav-logo-mark      { display: none; }
  .nav-logo .brand-l1,
  .nav-logo .brand-l2 { font-size: 20px; }
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  padding:     7px 14px;
  border:      none;
  border-radius: 6px;
  cursor:      pointer;
  font-family: var(--font-sans);
  font-size:   12px;
  font-weight: 500;
  transition:  all .13s;
  white-space: nowrap;
  line-height: 1;
}
.btn-primary  { background: var(--acc);  color: #fff; }
.btn-primary:hover  { background: #6aafff; }
.btn-primary:disabled { background: var(--bg3); color: var(--t2); cursor: not-allowed; }

.btn-success  { background: var(--acc2); color: #0d0f14; }
.btn-success:hover  { background: #00efc0; }
.btn-success:disabled { background: var(--bg3); color: var(--t2); cursor: not-allowed; }

.btn-ghost    { background: var(--bg3); color: var(--t1); border: 1px solid var(--bdr); }
.btn-ghost:hover  { border-color: var(--bdr2); color: var(--t0); }
.btn-ghost.active { background: var(--acc); color: #fff; border-color: var(--acc); }

.btn-warn     { background: transparent; color: var(--warn); border: 1px solid var(--warn); }
.btn-warn:hover   { background: var(--warn); color: #fff; }

.btn-danger   { background: transparent; color: var(--err); border: 1px solid var(--err); }
.btn-danger:hover { background: var(--err); color: #fff; }
.btn-danger:disabled { background: var(--bg3); color: var(--t2); border-color: var(--bdr); cursor: not-allowed; }

.btn-sm   { padding: 5px 11px; font-size: 11px; }
.btn-full { width: 100%; justify-content: center; }

/* ── Toolbar buttons ────────────────────────────────────────────── */
.tbtn {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  width:       34px;
  height:      34px;
  background:  none;
  border:      1px solid transparent;
  border-radius: 6px;
  cursor:      pointer;
  color:       var(--t2);
  transition:  all .12s;
  flex-shrink: 0;
}
.tbtn:hover          { background: var(--bg2); color: var(--t0); }
.tbtn.active         { background: var(--bg3); border-color: var(--acc); color: var(--acc); }
.tbtn:disabled       { opacity: .35; cursor: not-allowed; }
.tbtn:disabled:hover { background: none; color: var(--t2); }

/* ── Panel shared ───────────────────────────────────────────────── */
.ps {
  padding:       10px 11px 9px;
  border-bottom: 1px solid var(--bdr);
}
.pt {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  color:          var(--t2);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom:  7px;
}
.vsep {
  width:      1px;
  height:     22px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  position:     fixed;
  bottom:       20px;
  left:         50%;
  transform:    translateX(-50%);
  background:   var(--bg3);
  border:       1px solid var(--bdr2);
  color:        var(--t0);
  font-family:  var(--font-mono);
  font-size:    10px;
  padding:      5px 14px;
  border-radius: 14px;
  z-index:      9999;
  opacity:      0;
  transition:   opacity .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* ── Spinner ────────────────────────────────────────────────────── */
.spin {
  display:      inline-block;
  width:        11px;
  height:       11px;
  border:       2px solid rgba(74,158,255,.3);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation:    sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg0); }
::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 3px; }

/* ── Save status badge ──────────────────────────────────────────── */
#saveStatus {
  font-family:  var(--font-mono);
  font-size:    10px;
  padding:      3px 8px;
  border-radius: 4px;
  font-weight:  500;
}