/* Shared app chrome: topbar, nav groups, reading bar, instruments.
 * Used by shell pages and the interactive chart page so /chart
 * matches the rest of Asteria on desktop and mobile.
 */

/* v2: kill the 300ms tap delay on iOS/older Android for all
   interactive chrome. Buttons/links feel instant on touch instead
   of waiting for a possible double-tap-to-zoom gesture. */

a, button, summary, label, input[type="checkbox"], input[type="radio"],
select, .nav-link, .nav-menu-summary, .tweaks-trigger,
.lun-badge, .nav-toggle{
  touch-action:manipulation;}

/* The mobile-only span around the hamburger Account menu only
   surfaces inside the drawer; the desktop copy stays in the
   instrument bar. */

.mobile-only{display:none;}

/* v2 INSTRUMENT: skip link styled as a console hotkey chip. Sits
   centred at the top of the page; only visible when keyboard-focused.
   "JUMP → CONTENT" reads as one with the rest of the instrument
   vocabulary instead of as the bare a11y utility it used to be. */

.shell-skip{position:fixed;top:8px;left:50%;z-index:200;
  transform:translate(-50%,-160%);
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--bg-deep);background:var(--accent-gold);
  border:0.5px solid var(--accent-gold);border-radius:5px;
  padding:8px 16px;text-decoration:none;
  box-shadow:var(--shadow-md);
  transition:transform 180ms var(--ease-out);}

.shell-skip::before{content:"⇥";font-size:13px;font-weight:400;
  letter-spacing:0;line-height:1;}

.shell-skip:focus,
.shell-skip:focus-visible{transform:translate(-50%,0);outline:none;}

/* Universal focus-visible: every keyboard-reachable nav link,
   dropdown, button, switcher gets a gold focus ring. */

.nav-link:focus-visible,
.nav-menu-summary:focus-visible,
.nav-menu-item:focus-visible,
.nav-toggle:focus-visible,
.wordmark:focus-visible,
.err-link:focus-visible{outline:2px solid var(--accent-gold);
  outline-offset:2px;border-radius:var(--radius-sm);}

/* The nav + the chart-name bar are wrapped in .navchrome, which is the
   single sticky pinner on EVERY viewport: so both stay put as you scroll
   (people always see which chart they're reading) without the two bars
   piling up. The ticker is left outside, so it scrolls away. The topbar
   itself is relative so it remains the containing block for the absolute
   dropdown panels. */

.navchrome{position:sticky;top:0;z-index:50;overflow:visible;}

.topbar{position:relative;z-index:2;overflow:visible;
  background:var(--bg-deep);display:flex;align-items:center;
  gap:var(--space-6);padding:var(--space-4) var(--space-6);
  border-bottom:0.5px solid var(--ink-quaternary);}

.nav-toggle{display:none;flex-direction:row;align-items:center;
  justify-content:center;gap:8px;width:auto;min-width:44px;height:40px;
  padding:0 12px;margin-left:auto;
  background:transparent;border:0.5px solid var(--ink-quaternary);
  border-radius:var(--radius-md);cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out);}

.nav-toggle:hover,.topbar.is-open .nav-toggle{
  border-color:var(--accent-gold);}

.nav-toggle-bars{display:flex;flex-direction:column;justify-content:center;
  gap:4px;width:16px;flex:none;}

.nav-toggle-bar{display:block;width:16px;height:1.5px;
  background:var(--ink-secondary);margin:0;
  transition:transform var(--duration-fast) var(--ease-out),
             opacity var(--duration-fast) var(--ease-out);}

.nav-toggle-lab{font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-gold);
  line-height:1;}

.topbar.is-open .nav-toggle .nav-toggle-bar:nth-child(1){
  transform:translateY(5.5px) rotate(45deg);}

.topbar.is-open .nav-toggle .nav-toggle-bar:nth-child(2){opacity:0;}

.topbar.is-open .nav-toggle .nav-toggle-bar:nth-child(3){
  transform:translateY(-5.5px) rotate(-45deg);}

/* Reading bar: the persistent "whose chart am I in" strip under the
   topbar. Sticky so it stays pinned while a long reading scrolls; that's
   the whole point on mobile, where the nav is hidden behind a tap. */

.readingbar{position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);padding:var(--space-2) var(--space-6);
  background:var(--bg-raised,var(--bg-deep));
  border-bottom:0.5px solid var(--ink-quaternary);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}

.rb-id{display:flex;align-items:center;gap:var(--space-2);
  min-width:0;text-decoration:none;color:inherit;}

.rb-dot{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--accent-gold);box-shadow:0 0 8px var(--accent-gold-soft);}

.rb-eyebrow{flex:none;font-family:var(--font-mono);
  font-size:10px;letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);}

.rb-name{font-family:var(--font-display,var(--font-body));
  font-size:var(--text-sm);color:var(--ink-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-bottom:1px solid transparent;
  transition:border-color var(--duration-fast) var(--ease-out);}

.rb-id:hover .rb-name{border-bottom-color:var(--accent-gold);}

.rb-sep{flex:none;color:var(--ink-quaternary);}

.rb-place{font-size:var(--text-xs);color:var(--ink-tertiary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.rb-kind{flex:none;font-family:var(--font-mono);font-size:10px;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);border:0.5px solid var(--ink-quaternary);
  border-radius:var(--radius-sm);padding:1px 7px;}

.rb-switch{flex:none;font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out);}

.rb-switch:hover{color:var(--accent-gold);}

.rb-id:focus-visible,.rb-switch:focus-visible{
  outline:2px solid var(--accent-gold);outline-offset:2px;
  border-radius:var(--radius-sm);}

.readingbar-dock{display:none;}

@media (max-width:720px){
  .readingbar-dock{
    display:flex;align-items:stretch;justify-content:space-between;
    gap:2px;padding:6px var(--space-3) 8px;
    background:var(--bg-raised,var(--bg-deep));
    border-bottom:0.5px solid var(--ink-quaternary);
    overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .rbd-item{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;min-height:48px;padding:6px 4px;
    border-radius:var(--radius-md);
    font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em;
    text-transform:uppercase;text-decoration:none;white-space:nowrap;
    color:var(--ink-secondary);background:var(--bg-surface);
    border:0.5px solid var(--ink-quaternary);}
  .rbd-ico{flex:none;display:block;opacity:0.9;}
  .rbd-lab{line-height:1.1;}
  .rbd-item:hover,.rbd-item:focus-visible{
    color:var(--accent-gold);border-color:var(--accent-gold);
    outline:none;}
  .rbd-more{color:var(--accent-gold);border-color:var(--accent-gold-soft);}
  .rbd-item.is-active{
    color:var(--accent-gold);border-color:var(--accent-gold);
    background:color-mix(in srgb,var(--accent-gold) 12%,var(--bg-surface));}
}

@media (max-width:640px){
  .readingbar{padding:var(--space-2) var(--space-4);}
  /* On a phone the place + kind tag would crowd the name; drop them and
     keep the one thing that matters: the name. */
  .rb-place,.rb-sep,.rb-kind{display:none;}
}

.wordmark{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-display);font-weight:300;
  font-size:var(--text-lg);letter-spacing:var(--track-tight);
  color:var(--ink-primary);text-decoration:none;}

.nav{display:flex;align-items:center;gap:var(--space-5);flex-wrap:nowrap;}

.nav-pages{display:flex;align-items:center;gap:var(--space-3);
  margin-left:auto;flex:1 1 auto;min-width:0;justify-content:flex-end;}

.nav-groups-mobile{display:none;}

.nav-groups-desktop{display:contents;}

.nav-instruments{display:flex;align-items:center;gap:var(--space-3);
  margin-left:var(--space-5);}

.nav-link{font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out);}

.nav-link:hover{color:var(--ink-secondary);}

.nav-link.is-active{color:var(--accent-gold);}

.nav-menu{position:relative;}

.nav-menu-summary{list-style:none;cursor:pointer;}

.nav-menu-summary::-webkit-details-marker{display:none;}

.nav-menu-summary::marker{content:"";}

.nav-menu[open]>.nav-menu-summary:not(.is-active){
  color:var(--ink-secondary);}

.nav-menu-panel{position:absolute;top:calc(100% + var(--space-3));left:0;
  display:flex;flex-direction:column;min-width:148px;
  background:var(--bg-elevated);border:0.5px solid var(--ink-quaternary);
  border-radius:5px;padding:var(--space-2);box-shadow:var(--shadow-md);
  z-index:60;
  /* A tall group (Readings) must never run past the fold: cap the
     panel to the space under the topbar and scroll inside itself. */
  max-height:calc(100vh - 120px);overflow-y:auto;
  overscroll-behavior:contain;}

.nav-menu-item{display:block;width:100%;box-sizing:border-box;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);text-decoration:none;text-align:left;
  padding:var(--space-2) var(--space-3);border-radius:3px;
  transition:color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);}

.nav-menu-item:hover{color:var(--ink-secondary);
  background:var(--bg-surface);}

.nav-menu-item.is-active{color:var(--accent-gold);}

.nav-group-summary{display:inline-flex;align-items:center;gap:4px;}

.nav-ico{display:inline-block;vertical-align:-2px;margin-right:5px;
  opacity:0.72;flex:none;}

.nav-group-summary.is-active .nav-ico,
.nav-link.is-active .nav-ico{opacity:1;color:var(--accent-gold);}
.nav-msection h3 .nav-ico{margin-right:8px;opacity:0.8;}
.nav-group-panel{min-width:300px;max-width:380px;padding:var(--space-2);
  display:flex;flex-direction:column;gap:1px;}

.nav-group-section-head{font-family:var(--font-mono);font-size:11px;
  font-weight:600;letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--accent-gold);
  padding:var(--space-3) var(--space-3) var(--space-1);
  border-top:0.5px solid var(--ink-quaternary);
  margin-top:var(--space-2);}

.nav-group-section-head:first-child{border-top:none;margin-top:0;
  padding-top:var(--space-2);}

.nav-item-g{flex:none;width:1.25em;font-size:13px;line-height:1.2;
  color:var(--accent-gold);text-align:center;opacity:0.92;}

.nav-group-item-row,.nav-mitem-row{display:flex;align-items:center;
  gap:var(--space-2);min-width:0;}

.nav-group-item{display:flex;flex-direction:column;gap:2px;
  width:100%;box-sizing:border-box;
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  text-decoration:none;cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out);}

.nav-group-item:hover{background:var(--bg-surface);}

.nav-group-item-label{font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--ink-primary);letter-spacing:0;text-transform:none;}

.nav-group-item-blurb{font-family:var(--font-body);
  font-size:var(--text-xs);color:var(--ink-tertiary);
  line-height:var(--leading-normal);letter-spacing:0;
  text-transform:none;}

.nav-group-item.is-active .nav-group-item-label{color:var(--accent-gold);}

.nav-group-item.is-active{background:var(--accent-gold-soft);}

.nav-group[data-nav-group="readings"] .nav-group-panel,
.nav-group[data-nav-group="glossary"] .nav-group-panel,
.nav-group[data-nav-group="today"] .nav-group-panel{
  left:auto;right:0;}

.nav-msection{border-bottom:0.5px solid var(--ink-quaternary);
  padding-bottom:var(--space-2);}

.nav-msection:last-of-type{border-bottom:none;padding-bottom:0;}

.nav-msection-head{font-family:var(--font-mono);
  font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--ink-tertiary);margin:0;
  padding:var(--space-3) var(--space-2) var(--space-2);}

.nav-msection-head.is-active{color:var(--accent-gold);}

.nav-msub-head{font-family:var(--font-mono);font-size:11px;
  font-weight:600;letter-spacing:var(--track-widest);
  text-transform:uppercase;color:var(--accent-gold);
  padding:var(--space-2) var(--space-3) var(--space-1);}

.nav-mitem{display:flex;flex-direction:column;gap:2px;
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  text-decoration:none;min-height:44px;justify-content:center;
  transition:background var(--duration-fast) var(--ease-out);}

.nav-mitem:hover{background:var(--bg-surface);}

.nav-mitem-label{font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--ink-primary);}

.nav-mitem-blurb{font-family:var(--font-body);
  font-size:var(--text-xs);color:var(--ink-tertiary);
  line-height:var(--leading-normal);}

.nav-mitem.is-active .nav-mitem-label{color:var(--accent-gold);}

.nav-mitem.is-active{background:var(--accent-gold-soft);}

.nav-mitem:focus-visible{outline:2px solid var(--accent-gold);
  outline-offset:2px;}

/* Account chip / dropdown: sits last in the nav. */

.account-link{color:var(--accent-gold);}

.device-menu .nav-menu-panel{right:0;left:auto;
  min-width:240px;max-width:280px;}

.device-panel p{font-size:var(--text-xs);color:var(--ink-secondary);
  line-height:var(--leading-loose);margin:0 0 var(--space-2);}

.device-panel p:last-child{margin-bottom:0;}

.account-menu .nav-menu-panel{right:0;left:auto;min-width:200px;}

.account-email{font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);color:var(--ink-tertiary);
  padding:var(--space-2) var(--space-3) var(--space-3);
  border-bottom:0.5px solid var(--ink-quaternary);
  margin-bottom:var(--space-2);word-break:break-all;}

.account-logout-form{margin:0;}

.account-logout-form button{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-tertiary);background:transparent;border:none;
  padding:var(--space-2) var(--space-3);border-radius:3px;
  cursor:pointer;width:100%;text-align:left;
  transition:color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);}

.account-logout-form button:hover{color:var(--ink-secondary);
  background:var(--bg-surface);}

/* Lift the page content above the debug grid pseudo-element (z-index:0).
   Scope this to the main column + footer ONLY: the chrome (topbar,
   reading bar, ticker) already carries its own z-index, and clobbering
   it here was sinking the nav drawer under the ticker / reading bar. */

/* The topbar holds the nav. Keep it above the page; when its mobile
   drawer is open, lift it above the sticky transit ticker (z-index:49)
   and reading bar so every nav row, Charts first, stays tappable. */

body .topbar{z-index:30;}

body .topbar.is-open{z-index:60;}

body.density-compact .topbar{padding:var(--space-2) var(--space-5);}

/* v2 INSTRUMENT: lunation badge in the topbar. Links to /moon. */

.lun-badge{display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px 3px 6px;
  border:0.5px solid var(--ink-quaternary);border-radius:4px;
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-secondary);cursor:pointer;
  text-decoration:none;
  transition:border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);}

.lun-badge:hover{border-color:var(--accent-gold);
  color:var(--accent-gold);}

.lun-svg{display:block;flex:none;}

.lun-lab{color:var(--ink-secondary);}

.lun-pct{color:var(--ink-secondary);opacity:0.85;}

@media (min-width:721px) and (max-width:1024px){
  /* Tablet: tighten chrome so four dropdowns + instruments fit. */
  .topbar{gap:var(--space-4);padding:var(--space-3) var(--space-5);}
  .nav{gap:var(--space-3);}
  .nav-instruments{margin-left:var(--space-3);gap:var(--space-2);}
  .nav-group-panel{min-width:260px;max-width:340px;}
  .wordmark{font-size:var(--text-md);}
}

@media (max-width:720px){
  /* Safe-area aware padding: keep the env() insets that the base
     tokens.css rule supplies; a plain padding override here would
     silently drop them on notched phones / the PWA. */
  .topbar{padding:max(var(--space-3),env(safe-area-inset-top))
      max(var(--space-4),env(safe-area-inset-right))
      var(--space-3)
      max(var(--space-4),env(safe-area-inset-left));
    gap:var(--space-3);}
  .wordmark{margin-right:auto;}
  /* On mobile only the page-links collapse into the hamburger drawer.
     The instrument bar (lunation / tweaks) stays visible on the right
     edge so preferences are one tap away without opening the drawer. */
  .nav-toggle{display:inline-flex;order:99;
    background:color-mix(in srgb,var(--accent-gold) 12%,transparent);
    border-color:var(--accent-gold);min-height:44px;}
  .nav-toggle-bar{background:var(--accent-gold);}
  .nav-toggle-lab{display:inline !important;color:var(--accent-gold);}
  /* Real "Menu" label lives in the HTML (.nav-toggle-lab); do not
     re-add via ::after or it reads "Menu Menu". */
  .nav-groups-desktop{display:none;}
  .nav-groups-mobile{display:flex;flex-direction:column;
    gap:var(--space-1);width:100%;}
  body.nav-drawer-open{overflow:hidden;}
  /* Lead-in when drawer opens with a chart loaded */
  .topbar.is-open .nav-pages::before{
    content:"Your chart resources";
    display:block;font-family:var(--font-mono);font-size:10px;
    letter-spacing:0.22em;text-transform:uppercase;
    color:var(--accent-gold);padding:0 0 var(--space-2);
    margin:0 0 var(--space-2);
    border-bottom:0.5px solid var(--ink-quaternary);}
  .nav-pages{position:absolute;top:100%;left:0;right:0;z-index:60;
    display:flex;flex-direction:column;align-items:stretch;margin:0;
    flex:none;width:100%;gap:var(--space-2);padding:var(--space-4);
    background:var(--bg-elevated);
    border-bottom:0.5px solid var(--ink-quaternary);
    box-shadow:var(--shadow-md);
    transform:translateY(-6px);opacity:0;pointer-events:none;
    transition:transform var(--duration-fast) var(--ease-out),
               opacity var(--duration-fast) var(--ease-out);}
  .topbar.is-open .nav-pages{transform:translateY(0);opacity:1;
    pointer-events:auto;
    /* The open drawer scrolls itself instead of overflowing the
       viewport (Readings alone is taller than a phone screen).
       vh fallback first for browsers without dvh. */
    max-height:calc(100vh - 96px);
    max-height:calc(100dvh - 96px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .nav-instruments{margin-left:0;gap:6px;flex:none;align-items:center;}
  /* Compact the instrument bar: drop the % (Moon word stays), keep
     Tweaks + Menu labels so nothing is icon-only on a phone. */
  .nav-instruments .lun-badge .lun-pct{display:none;}
  .nav-instruments .lun-badge .lun-lab{display:inline !important;}
  .nav-instruments .tweaks-lab{display:inline !important;}
  .nav-instruments .lun-badge,
  .nav-instruments .tweaks-trigger{
    min-height:40px;padding:4px 8px;flex:none;}
  /* The device badge moves into the hamburger drawer (the
     .mobile-only wrapper there flips to display:block on mobile). */
  .nav-instruments .account-link,
  .nav-instruments .account-menu{display:none;}
  .mobile-only{display:block;}
  .mobile-only .account-link,
  .mobile-only .account-menu{display:block;}
  .mobile-only .account-menu .nav-menu-panel{position:static;
    box-shadow:none;background:var(--bg-surface);width:100%;
    margin-top:var(--space-1);}
  /* Drawer rows: labels always readable */
  .nav-msection-head,
  .nav-mitem-label,
  .nav-group-item-label{display:block !important;}
  .nav-mitem-blurb{display:block;}
  /* Trim mobile GPU work: half the starfield, drop the blend
     mode on the calibration grid (soft-light is expensive on
     mobile GPUs and barely visible at small sizes). */
  .nav-link{padding:var(--space-2) var(--space-3);
    font-size:var(--text-sm);
    min-height:44px;display:flex;align-items:center;}
  /* Comfortable thumb targets on every drawer row. */
  .nav-group-item,.nav-menu-item{min-height:44px;}
  .nav-menu{position:static;}
  .nav-menu-panel{position:static;margin-top:var(--space-1);
    width:100%;box-shadow:none;background:var(--bg-surface);}
  /* Override desktop min/max widths on the grouped Readings panel so
     it stretches to drawer width on small phones (the 300px desktop
     min-width would otherwise push past the 320px viewport edge). */
  .nav-group-panel{min-width:0;max-width:none;}
  /* The tweaks drawer is right-anchored to its own mid-bar trigger on
     desktop; on a 320-375px phone that pushes the panel's left edge
     off-screen. Anchor it to the topbar instead so it becomes a
     full-width sheet that can never leave the viewport. */
  .nav-instruments .tweaks{position:static;}
  .nav-instruments .tweaks-panel{left:var(--space-3);
    right:var(--space-3);width:auto;}
  /* Reading dock labels stay visible under the sticky chrome. */
  .rbd-lab{display:block !important;}
  .rbd-item{min-height:48px;}
  /* The topbar is pinned on every viewport (see the base rule); the open
     mobile drawer just needs to clear the bars beneath it. */
}

/* Very narrow phones: keep words, just tighten spacing — never drop labels. */
@media (max-width:360px){
  .nav-toggle-lab,
  .tweaks-lab,
  .lun-lab,
  .tt-close-lab,
  .rbd-lab{letter-spacing:0.08em;font-size:9px;}
  .nav-instruments{gap:4px;}
  .wordmark{font-size:var(--text-md);}
  .lun-svg{width:16px;height:16px;}
}

/* Chart-page tool strip: Save / Edit / Share / Export under the shared topbar. */
.chart-toolbar{
  display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;
  gap:var(--space-2) var(--space-4);
  padding:var(--space-2) var(--space-6);
  border-bottom:0.5px solid var(--ink-quaternary);
  background:var(--bg-raised,var(--bg-deep));
  position:relative;z-index:40;
}
.chart-toolbar .cn-link,.chart-toolbar .cn-here,.chart-toolbar .cn-menu-summary{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--ink-tertiary);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out);
  min-height:44px;display:inline-flex;align-items:center;
  touch-action:manipulation;
}
.chart-toolbar .cn-link:hover,.chart-toolbar .cn-menu-summary:hover{
  color:var(--ink-secondary);
}
.chart-toolbar .cn-link-save{
  color:var(--bg-deep) !important;
  background:var(--accent-gold) !important;
  border:0.5px solid var(--accent-gold) !important;
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3) !important;
  justify-content:center;
}
.chart-toolbar .cn-link-save:hover{opacity:0.9;color:var(--bg-deep) !important;}
.chart-toolbar .cn-menu{position:relative;}
.chart-toolbar .cn-menu-summary{list-style:none;}
.chart-toolbar .cn-menu-summary::-webkit-details-marker{display:none;}
.chart-toolbar .cn-menu-summary::marker{content:"";}
.chart-toolbar .cn-menu[open] > .cn-menu-summary{color:var(--accent-gold);}
.chart-toolbar .cn-menu-panel{
  position:absolute;top:calc(100% + var(--space-2));right:0;z-index:80;
  min-width:220px;padding:var(--space-2);
  background:var(--bg-elevated);
  border:0.5px solid var(--ink-quaternary);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  max-height:min(70vh,calc(100dvh - 120px));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.chart-toolbar .cn-menu-item{
  display:flex;align-items:center;width:100%;box-sizing:border-box;text-align:left;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--ink-secondary);background:none;border:none;
  padding:var(--space-3);text-decoration:none;cursor:pointer;
  border-radius:var(--radius-sm);min-height:44px;
  touch-action:manipulation;
}
.chart-toolbar .cn-menu-item:hover{
  color:var(--ink-primary);background:var(--bg-surface);
}
.chart-toolbar .cn-share-panel{min-width:min(320px,92vw);max-width:min(360px,92vw);}
.chart-toolbar .cn-share-eyebrow{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--accent-gold);margin-bottom:var(--space-2);
}
.chart-toolbar .cn-share-url{
  width:100%;box-sizing:border-box;
  font-family:var(--font-mono);font-size:11px;
  color:var(--ink-primary);background:var(--bg-surface);
  border:0.5px solid var(--ink-quaternary);border-radius:var(--radius-sm);
  padding:var(--space-2);
}
.chart-toolbar .cn-share-row{
  display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);
  flex-wrap:wrap;
}
.chart-toolbar .cn-share-copy{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--accent-gold);background:transparent;
  border:0.5px solid var(--accent-gold-soft);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);cursor:pointer;min-height:44px;
  touch-action:manipulation;
}
.chart-toolbar .cn-share-copy:hover{background:var(--accent-gold-soft);}
.chart-toolbar .cn-share-copy.is-copied{color:var(--bg-deep);background:var(--accent-gold);}
.chart-toolbar .cn-share-note{
  font-size:10px;letter-spacing:var(--track-wide);color:var(--ink-tertiary);line-height:1.4;
}
.chart-toolbar .cn-tools-note{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-tertiary);
  margin:0;flex:1 1 auto;line-height:1.4;
}
.chart-toolbar .cn-tools{display:contents;}
.chart-toolbar .cn-here{color:var(--accent-gold);cursor:default;}
.chart-toolbar .cn-link-compare{
  color:var(--accent-gold) !important;
  border:0.5px solid var(--accent-gold);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3) !important;
}
.chart-toolbar .cn-link-compare:hover{background:var(--accent-gold-soft);}

/* Chart page: toolbar lives inside sticky .navchrome so Menu + name +
   Save stay pinned together while the wheel scrolls. */
body.chart-page .navchrome{z-index:55;}
body.chart-page .navchrome .chart-toolbar{
  border-bottom:0.5px solid var(--ink-quaternary);
}

@media (max-width:720px){
  .chart-toolbar{
    padding:8px var(--space-3);
    gap:8px;
    justify-content:stretch;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  }
  /* Every toolbar action keeps its word visible (Save / Edit / Share /
     Export) — no icon-only tools on the chart page. */
  .chart-toolbar .cn-link,
  .chart-toolbar .cn-menu-summary,
  .chart-toolbar .cn-here{
    font-size:11px;letter-spacing:0.1em;
    white-space:nowrap;
  }
  .chart-toolbar .cn-link-save{
    flex:1 1 auto;text-align:center;min-height:48px;
    font-size:11px;letter-spacing:0.12em;
    justify-content:center;
  }
  .chart-toolbar .cn-tool,
  .chart-toolbar .cn-tool-menu > .cn-menu-summary{
    min-height:44px;padding:0 var(--space-2) !important;
    display:inline-flex !important;align-items:center;
  }
  .chart-toolbar .cn-menu-item{
    min-height:48px;font-size:11px;white-space:normal;
  }
  /* Bottom sheet for Share/Export on small screens — stays above the
     home indicator and never clips off the right edge of the topbar. */
  .chart-toolbar .cn-menu-panel{
    position:fixed;left:var(--space-3);right:var(--space-3);
    top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    width:auto;max-width:none;margin:0;
    max-height:min(60vh,calc(100dvh - 160px));
    box-shadow:var(--shadow-md);
    z-index:90;
  }
  .chart-toolbar .cn-tools{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:6px;width:100%;
  }
  .chart-toolbar .cn-tools-note{
    flex:1 1 100%;font-size:10px;order:-1;display:block !important;
  }
  .chart-toolbar .cn-share-copy{
    min-height:44px;
  }
  body.chart-page{
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
}