/* Roadaro — shared top action bar.
   Linked AFTER each page's own <style> so the nav looks identical everywhere:
   same link set/order/labels, one class (.nl), one active style (.nl.on).
   The active style is theme-agnostic (gold underline + subtle wash, inherits the
   page's own text color) so it reads on both light and dark pages without
   depending on per-page vars like --navy. */
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0;}
.nl{padding:6px 11px;border-radius:6px;font-size:11px;font-weight:700;
    color:var(--t2,#5a6275);text-decoration:none;white-space:nowrap;
    transition:background .12s,color .12s;cursor:pointer;}
.nl:hover{background:rgba(128,128,128,.12);}
.nl.on{background:rgba(128,128,128,.14);box-shadow:inset 0 -2px 0 #c8901a;font-weight:800;}

/* Far-right utility cluster: weather - diesel - settings gear - theme toggle.
   Appended after everything else in the bar; margin-left:auto shoves it to the
   right edge even on bars whose own right block lacks one. Child order is fixed
   by CSS so async mount timing cannot shuffle it. */
.nav-utils{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding-left:12px;flex:none;}
.nav-utils #rw-chip{order:1;margin-right:0;}
.nav-utils #rw-fuel{order:2;margin-right:0;}
.nav-utils .ra-gear{order:3;}
.nav-utils theme-toggle,.nav-utils .rnav-toggle{order:4;margin-left:0;}

/* Dark-mode toggle dropped into the bar by roadaro-nav.js (this PC's feature). */
.rnav-toggle{display:inline-flex;align-items:center;line-height:0;margin-left:8px;flex:none;}

/* The dispatch command bar (.top) is now the same LIGHT bar as every other page,
   so its .nl links use the shared light style above — no dark-bar override needed.
   (.dispnav was the retired duplicate navbar.) */

/* Removed the old neon-blue underline on .nl. Every nav link now uses the SINGLE
   origin-fill hover applied by roadaro-nav.js (to all .nl), so the animation is
   identical everywhere and there's no flash of a second animation before the JS
   enhances a link. Active tab falls back to the gold style: .nl.on (inset, line
   above) for an un-enhanced link, .nl.on.ob-on (gold wash, below) once enhanced. */

/* RoadaroAI button kept in the top bar — replaces the floating FAB on dispatch. */
body.ai-in-nav #rai-fab{display:none!important;}
.ai-navbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:9px;
  border:1px solid rgba(247,213,136,.5);background:linear-gradient(140deg,#d39a22,#a8740f);color:#fff;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;margin-right:8px;
  box-shadow:0 4px 14px rgba(200,144,26,.3);transition:filter .15s,transform .1s,box-shadow .15s;}
.ai-navbtn:active{transform:translateY(1px);}
.ai-navbtn i{font-size:15px;}

/* Origin-fill hover — a circle fills the button from the cursor, label inverts.
   Applied by roadaro-nav.js to the dispatch action buttons, the Ask AI button,
   and the customizable pinned tools (.ra-qbtn). */
.ob-on{position:relative;overflow:hidden!important;isolation:isolate;transition:color .3s cubic-bezier(.16,1,.3,1)!important;}
.ob-on>.obfill{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);pointer-events:none;
  z-index:0;background:var(--obfill,#e6a82e);transition:transform .5s cubic-bezier(.16,1,.3,1);}
.ob-on>.oblabel{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;}
.ob-on:hover{color:var(--obink,#10130a)!important;}
.ob-on:hover .oblabel,.ob-on:hover .oblabel i{color:var(--obink,#10130a)!important;}
.ob-on:active{transform:scale(.985);}
.top2 > button.ob-on:not(.ai-navbtn),.ra-quick .ra-qbtn.ob-on,.nl.ob-on{--obfill:#e6a82e;--obink:#10130a;}
.ai-navbtn.ob-on,.top2 > button.ai-navbtn.ob-on{--obfill:#062a3d;--obink:#ffffff;}

/* Nav TABS (Menu, Dispatch, Enter Loads, …) adopt the same fill-button look:
   gold fill from the cursor on hover, a solid gold active tab. Drops the old
   neon-blue underline. */
.nl.ob-on,.ra-qbtn.ob-on{border-radius:8px;padding:7px 13px;font-weight:700;}
.nl.ob-on::after{display:none!important;}
.nl.ob-on:hover{background:transparent;}
.nl.on.ob-on{background:rgba(200,144,26,.16);color:var(--navy,#00394d)!important;font-weight:800;box-shadow:none!important;}
.nl.on.ob-on .oblabel{color:var(--navy,#00394d)!important;}
/* (.top .nl uses the shared light active style above — no dark-bar override.) */
[data-theme="dark"] .nl.on.ob-on,[data-theme="dark"] .nl.on.ob-on .oblabel{color:#f0c46a!important;}

/* Pinned quick-tools on the dispatch bar (.top) — SAME look as the fixed .nl
   tabs (owner: "they should all look like the default one"). The old light-pill
   treatment (border + 999px radius + gold icons) made pins read as a different
   species from the tabs beside them. */
.top .ra-quick{gap:2px;}
.top .ra-qbtn{padding:7px 13px;border-radius:8px;font-size:11px;font-weight:700;gap:6px;
  background:transparent;border:0;color:var(--t2,#5a6275);}
.top .ra-qbtn:hover{background:rgba(128,128,128,.12);color:var(--navy,#00394d);}
.top .ra-qbtn i{color:inherit;font-size:13px;opacity:.85;}
.top .ra-gear{height:30px;border-radius:999px;border:1px solid var(--border,#dce0ea);background:rgba(128,128,128,.10);color:var(--t2,#5a6275);}
.top .ra-gear:hover{background:rgba(128,128,128,.18);}

/* Brand mark in dark mode — the inline logo SVGs hardcode stroke="#00394d"
   (brand navy), which is invisible on the dark surface ladder. Recolor the
   stroke app-wide via exact attribute match (same fix messages.html:53 already
   shipped locally); the gold inner mark stays brand-gold in both themes per
   DESIGN.md §2. This file loads after every page's own <style>, so it wins. */
[data-theme="dark"] svg path[stroke="#00394d"]{stroke:#9ecbff;}

/* Ask AI — slight glowy yellow button. */
.ai-navbtn,.top2 > button.ai-navbtn{background:linear-gradient(140deg,#fbd34d,#e6a82e)!important;
  border:1px solid rgba(255,228,150,.8)!important;color:#3a2606!important;height:30px!important;font-weight:800!important;
  box-shadow:0 0 15px rgba(245,200,70,.5)!important;}
.ai-navbtn:hover,.top2 > button.ai-navbtn:hover{box-shadow:0 0 24px rgba(245,200,70,.75)!important;}
.ai-navbtn i{color:#3a2606!important;}