/* ═══════════════════════════════════════════════════════════════════════
   site-nav.css — the ONE definition of the shared site header.

   Every page that carries the shared header links this file LAST, after
   its own inline <style> / theme.css / cells.css, so these rules win on
   equal specificity. It owns exactly two things:

     1. the "Objects" dropdown (a <details>, no JS — works on touch), and
     2. the responsive ladder that decides which tabs survive which width.

   Both used to live per-page, and had drifted: different pages hid
   different tabs at different breakpoints, and the ui/ pages had no
   dropdown styling at all. Keeping the ladder here is what makes the
   header genuinely IDENTICAL on every page rather than identical by
   discipline. Tabs are selected by data-nav, never by href — an href
   selector has to be spelled differently in showcase/ than in ui/ and
   that is precisely how the drift started.

   Three pages are deliberately standalone — ui/survey.html and the two
   per-cell difference viewers (ui/cell-aladin.html, ui/cell-viewer.html).
   They are full-bleed tools that own the whole viewport, so instead of the
   tab set they carry a single back-to-Overview button in the top-left
   corner.  That button (.backhome) is defined here too, so "the header" has
   exactly one definition either way.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the grouped "Objects" tab ─────────────────────────────────────────
   Two flat tabs do not fit; <details> keeps it usable on touch, where a
   :hover menu never opens, and needs no JS. */
.tab-group{position:relative}
.tab-group>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);padding:7px 12px;transition:color .3s;
}
.tab-group>summary::-webkit-details-marker{display:none}
.tab-group>summary::marker{content:''}
.tab-group>summary:hover,.tab-group[open]>summary,.tab-group.here>summary{color:var(--ink)}
.tab-group>summary .caret{
  width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--e-out);
}
.tab-group[open]>summary .caret{transform:rotate(-135deg) translateY(1px)}
.tab-menu{
  position:absolute;top:calc(100% + 4px);right:0;z-index:70;min-width:210px;
  display:flex;flex-direction:column;padding:5px;
  background:var(--card-2);border:1px solid var(--line);border-radius:4px;
  box-shadow:var(--shadow);backdrop-filter:blur(10px);
}
.tab-menu a{padding:9px 11px;white-space:nowrap;letter-spacing:.12em}
.tab-menu a::after{left:11px;right:11px;bottom:5px}

/* ── the control pair, top right ──────────────────────────────────────
   Every header carries the same two buttons: ambient sound, then night ⇄
   plate. The sound button's "on" arcs are drawn always and revealed by
   aria-pressed, so the pressed state is one attribute rather than a second
   icon — and a screen reader reads the same fact the eye does. The showcase
   pages defined this rule inline; it lives here now so ui/ gets it too. */
.btn-i .on-mark{opacity:0;transition:opacity .25s}
.btn-i[aria-pressed="true"] .on-mark{opacity:1}
.btn-i[aria-pressed="true"]{color:var(--cy);border-color:var(--cy)}

/* ── the responsive ladder ────────────────────────────────────────────
   Seven tabs fit above ~980px, so at every desktop width the header is
   literally the same set on every page. Below that they drop in a fixed
   order, least-load-bearing first, and everything dropped stays reachable
   from the footer of every page. Measured, not guessed: three short tabs
   is the budget at 390px before .ctrl is pushed off the right edge with
   no scrollbar — invisible and unclickable. Cells survives to 390px because
   it is one of the two destinations every page's closing CTA points at. */
@media (max-width:980px){
  .nav-links .tab[data-nav="guide"]{display:none}
}
@media (max-width:760px){
  /* Overview goes here rather than earlier only because the brand mark on
     the left already links home — it is the one tab with a duplicate. */
  .nav-links .tab[data-nav="overview"],
  .nav-links .tab[data-nav="tutorials"]{display:none}
  .nav-links a{padding:7px 8px}
}
@media (max-width:700px){ .nav-links .tab-group{display:none} }
@media (max-width:470px){ .brand-txt{display:none} }


/* ── standalone pages: the top-left way back ──────────────────────────
   ui/survey.html and the per-cell difference viewers replace the tab set
   with this one control.  It is a bordered button rather than a bare link
   because on a full-bleed tool it is the ONLY exit, and a text link that
   reads as body copy gets missed. */
.backhome{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--ff-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);padding:6px 12px 6px 10px;
  border:1px solid var(--line);border-radius:2px;
  transition:color .3s,border-color .3s,background .3s;
}
.backhome:hover,.backhome:focus-visible{
  color:var(--cy);border-color:var(--cy);
  background:color-mix(in srgb,var(--cy) 8%,transparent);
}
.backhome svg{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--e-out);
}
.backhome:hover svg{transform:translateX(-3px)}
/* The wordmark can go on a phone; the way out never can. */
@media (max-width:470px){ .backhome span{display:none} .backhome{padding:6px 9px} }

/* Layout of a standalone header: [back] [title] ——— [any local links] [theme].
   The title takes the slack so .ctrl is pinned right and nothing floats in the
   middle; the per-cell viewers keep two local links and they sit beside it. */
/* .nav-links already carries margin-left:auto in all three stylesheets, which
   is exactly what is wanted here: it pushes the local links AND .ctrl to the
   right edge, leaving the back button and the wordmark on the left.  Do NOT add
   a second auto margin (e.g. on .brand-txt or .ctrl) — two of them SPLIT the
   free space and strand the links mid-header instead of pinning them right. */
/* A local link marked data-opt is the one a standalone header can afford to
   drop; whatever is left still gets the reader off this page. */
@media (max-width:560px){ .nav-links .tab[data-opt]{display:none} }

/* theme.css sizes .nav by height, ui/cells.css and the showcase pages size it by
   padding, and the padded ones shrink 4px under their own narrow rules. Pin the
   floor so the header is the same height on every page at every width. */
.nav{min-height:67px}