/* vp-nav.css — the top bar's VIBER-OWNED layer: the SECTION MENU (spec §B), the theme
 * switch, and the bar's light-mode colours. One file, loaded by every page that includes
 * auth/_topbar.php AND by the C tool pages, which fetch that include as a fragment from
 * /topbar.php.
 *
 * IT IS DELIBERATELY NOT IN topbar.css OR sippis-shell.css. Those two are hand-maintained
 * copies of one another (sippis-shell.css is the fleet's file and stays byte-identical to
 * /usr/local/share/sippis-app-shell/), and the copy step has dropped the avatar-dropdown
 * rules three separate times. A component added to that arrangement acquires the same
 * failure mode for free. One file has no copy step to forget.
 *
 * 2026-09-27 (screenshot batch 20260927-132224-db78): the menu moved INTO the bar, as pills,
 * next to the brand — it used to be a second row of underlined text under the bar, and the
 * apex pages then repeated it a third time as pills under the page title. Roberto: "we
 * should just have it once, on the top bar … the pills look great". The pill language is the
 * bar's own signed-out one (.topbar-intent-pills / .intent-pill in the shell), so the bar
 * reads as one system signed in and out. Below 64rem the pill row drops to its own line
 * inside the bar; below 46rem (spec §B.3) it is the burger.
 *
 * Colours are literals rather than the shell's tokens because this sheet loads on the tool
 * pages too, where the shell's custom properties are not defined. Light mode is keyed on
 * html[data-vp-theme="light"], which js/vp-theme.js resolves from the family's
 * localStorage.sippisTheme (dark | light | auto → what is actually on screen), so every
 * light rule is written once. */

/* ── the bar's own colour tokens (dark = the shell's literals) ─────────────────── */
.topbar {
  --vp-bar-bg: rgba(10, 30, 38, 0.55);
  --vp-bar-line: rgba(14, 173, 181, 0.18);
  --vp-bar-fg: #f4f7f8;
  --vp-bar-fg-soft: rgba(255, 255, 255, 0.85);
  --vp-bar-track: rgba(255, 255, 255, 0.10);
  --vp-bar-track-line: rgba(255, 255, 255, 0.20);
  --vp-bar-hover: rgba(255, 255, 255, 0.12);
  --vp-bar-cur-bg: #ffffff;
  --vp-bar-cur-fg: #0EADB5;
  --vp-panel-bg: #11313e;             /* opaque: the panel drops over page content */
  --vp-panel-fg: #f4f7f8;
  --vp-panel-line: rgba(14, 173, 181, 0.25);
}
/* Light: the family bar — sippis.com's own light top bar is this teal→orange gradient with
   white controls (admin/css/theme.css --sippis-topbar-bg), so a viber.pics page in light
   mode carries the same bar as every other Sippis page. */
html[data-vp-theme="light"] .topbar {
  --vp-bar-bg: linear-gradient(135deg, #0EADB5 0%, #F26430 100%);
  --vp-bar-line: transparent;
  --vp-bar-track: rgba(255, 255, 255, 0.16);
  --vp-bar-track-line: rgba(255, 255, 255, 0.34);
  --vp-bar-hover: rgba(255, 255, 255, 0.22);
  --vp-bar-cur-fg: #0a8a91;
  --vp-panel-bg: #ffffff;
  --vp-panel-fg: #12262d;
  --vp-panel-line: rgba(18, 38, 45, 0.14);
}
html[data-vp-theme="light"] .topbar { background: var(--vp-bar-bg); border-bottom-color: var(--vp-bar-line); }
html[data-vp-theme="light"] .user-menu-dropdown { background: var(--vp-panel-bg); border-color: var(--vp-panel-line); box-shadow: 0 10px 30px rgba(18, 38, 45, 0.18); }
html[data-vp-theme="light"] .user-menu-dropdown hr { border-top-color: rgba(18, 38, 45, 0.10); }
html[data-vp-theme="light"] .user-menu-name,
html[data-vp-theme="light"] .user-menu-item { color: var(--vp-panel-fg); }
html[data-vp-theme="light"] .user-menu-email { color: #4b5f67; }
html[data-vp-theme="light"] .user-menu-item:hover { background: rgba(14, 173, 181, 0.10); }
/* the tool pages paint every descendant of the injected bar #f4f7f8 (topbar.css); a white
   panel needs its ink back at that same specificity */
html[data-vp-theme="light"] #viber-topbar .user-menu-dropdown,
html[data-vp-theme="light"] #viber-topbar .user-menu-dropdown *,
html[data-vp-theme="light"] #viber-topbar .user-menu-name { color: var(--vp-panel-fg); }
html[data-vp-theme="light"] #viber-topbar .user-menu-email { color: #4b5f67; }

/* ── the section menu: a pill group, inside the bar, between the brand and the controls ── */
.vp-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  order: 2;                              /* brand · MENU · actions */
}
.topbar-actions { order: 3; }
.vp-nav-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--sippis-ctrl-h, 38px);
  max-width: 100%;
  box-sizing: border-box;
  padding: 3px;
  margin: 0 0 0 0.6rem;
  border-radius: 999px;
  background: var(--vp-bar-track);
  border: 1px solid var(--vp-bar-track-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vp-nav-row::-webkit-scrollbar { display: none; }

.vp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: calc(var(--sippis-ctrl-h, 38px) - 8px);
  padding: 0 0.9rem;
  border-radius: 999px;
  color: var(--vp-bar-fg-soft);
  font-size: 0.92rem;                    /* spec §D: section nav 0.92rem */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.vp-nav-link:hover { background: var(--vp-bar-hover); color: var(--vp-bar-fg); }
.vp-nav-link.cur { background: var(--vp-bar-cur-bg); color: var(--vp-bar-cur-fg); }
.vp-nav-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 1px; }
/* topbar.css forces `#viber-topbar .topbar * { color: #f4f7f8 }` on the tool pages; the
   active pill is white and needs its own ink there (same fix topbar.css makes for
   .intent-pill.active) */
#viber-topbar .vp-nav-link.cur { color: var(--vp-bar-cur-fg); }

.vp-nav-count {
  font-size: 0.82rem;          /* the floor (spec §D) — do not go below it */
  font-weight: 700;
  line-height: 1.5;
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
  background: #F26430;
  color: #22110a;
}
.vp-nav-count.zero { background: rgba(255, 255, 255, 0.16); color: #b9c8cd; }
.vp-nav-link.cur .vp-nav-count.zero { background: rgba(14, 173, 181, 0.14); color: #0a8a91; }
#viber-topbar .vp-nav-count { color: #22110a; }
#viber-topbar .vp-nav-count.zero { color: #b9c8cd; }

/* ── the theme switch: the family control (sippis.com admin/css/theme.css .theme-toggle,
   account.sippis.com's header). Same height as every other control in the bar. ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--sippis-ctrl-h, 38px);
  box-sizing: border-box;
  padding: 0 14px;
  margin: 0;
  background: var(--vp-bar-track, rgba(255, 255, 255, 0.10));
  color: var(--vp-bar-fg, #f4f7f8);
  border: 1px solid var(--vp-bar-track-line, rgba(255, 255, 255, 0.20));
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.theme-toggle:hover { background: var(--vp-bar-hover, rgba(255, 255, 255, 0.20)); }
.theme-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; }
.theme-toggle .icon { font-size: 1rem; line-height: 1; }
.theme-toggle .label { line-height: 1; }

/* ── the burger, below 46rem (spec §B.3) ──────────────────────────────────────
 * A <details>/<summary> disclosure, NOT a script. Three reasons, in order:
 *   1. the tool pages inject this markup with innerHTML, which never executes a <script>
 *      the fragment carries — so a scripted burger would silently not work there;
 *   2. the tool page's CSP needs a nonce the fragment does not know;
 *   3. it works with JavaScript off.
 * It sits at the end of the bar's controls; its panel drops below the bar, full width. */
.vp-burger { display: none; position: static; }
.vp-burger > summary { list-style: none; cursor: pointer; display: inline-flex; }
.vp-burger > summary::-webkit-details-marker { display: none; }
.vp-burger-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: var(--sippis-ctrl-h, 38px);
  height: var(--sippis-ctrl-h, 38px);
  padding: 9px 8px;
  box-sizing: border-box;
  border: 1px solid var(--vp-bar-track-line, rgba(255, 255, 255, 0.20));
  background: var(--vp-bar-track, rgba(255, 255, 255, 0.10));
  border-radius: 999px;
}
.vp-burger-btn i { display: block; height: 2px; width: 100%; background: var(--vp-bar-fg, #f4f7f8); border-radius: 2px; }
.vp-burger[open] .vp-burger-btn { background: var(--vp-bar-cur-bg, #fff); }
.vp-burger[open] .vp-burger-btn i { background: var(--vp-bar-cur-fg, #0EADB5); }

.vp-burger-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0 0.5rem;
  background: var(--vp-panel-bg, #11313e);
  border-bottom: 1px solid var(--vp-panel-line, rgba(14, 173, 181, 0.25));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  z-index: 60;
  isolation: isolate;                 /* its own stacking context: nothing under the bar shows through */
}
.vp-burger-panel .vp-nav-link {
  height: auto;
  border-radius: 0;
  padding: 0.7rem 1.2rem;
  font-size: 0.95rem;
  color: var(--vp-panel-fg, #f4f7f8);
}
.vp-burger-panel .vp-nav-link:hover { background: rgba(14, 173, 181, 0.12); color: var(--vp-panel-fg, #f4f7f8); }
.vp-burger-panel .vp-nav-link.cur {
  background: rgba(14, 173, 181, 0.10);
  color: var(--vp-panel-fg, #f4f7f8);
  box-shadow: inset 3px 0 0 #0EADB5;
}
#viber-topbar .vp-burger-panel .vp-nav-link { color: var(--vp-panel-fg, #f4f7f8); }

/* ── widths ───────────────────────────────────────────────────────────────────── */
@media (max-width: 64rem) {
  /* the pill row takes its own line inside the bar: brand and controls first, menu under */
  .vp-nav { order: 9; flex-basis: 100%; }
  .vp-nav-row { margin-left: 0; }
}
@media (max-width: 46rem) {
  .vp-nav { display: none; }          /* the desktop row */
  .vp-burger { display: block; }
}
@media (min-width: 46.01rem) {
  .vp-burger-panel { display: none; } /* the panel never shows on desktop */
}
@media (max-width: 640px) {
  .theme-toggle { padding: 0 0.6rem; font-size: 0.82rem; gap: 0; }
  .theme-toggle .label { display: none; }   /* the glyph alone on a phone */
}
@media (prefers-reduced-motion: reduce) {
  .vp-nav-link, .theme-toggle { transition: none; }
}

/* ── THE SUB-BAR (2026-09-28, screenshot batch 20260928-233309-1616, item 8) ──────────
 * "The top row stays the same as before, but when we select Screenshot or Files, the
 * additional part becomes a submenu … a bar that goes from one side of the screen to the
 * other, maybe with a colour that's halfway between the top bar and the background. In the
 * centre, we put the new submenu."
 *
 * So a section's OWN views are never entries in the bar's pill group any more. They live in
 * a second, full-width strip directly under the bar, centred: the tool pages build it from
 * ADMIN + CAPS (tpls/ss.html, vpNavMount()) and the settings pages render it server-side
 * (lib/settings.php, vp_settings_nav_html()) — one class, one look. It sits INSIDE
 * #viber-topbar on the tool pages, so it is sticky with the bar.
 *
 * Colour: halfway between the bar (rgba(10,30,38,.55) over the page gradient) and the page
 * itself — the same tint at half the alpha, blurred like the bar. Light mode: a pale teal
 * wash between the family's gradient bar and the paper. The current entry is a filled pill
 * in the brand teal, deliberately NOT the bar's white pill, so the two levels read as two
 * levels. */
.vp-subnav {
  --vp-sub-bg: rgba(10, 30, 38, 0.30);
  --vp-sub-line: rgba(14, 173, 181, 0.14);
  --vp-sub-fg: #cfdbde;
  --vp-sub-fg-hover: #f4f7f8;
  --vp-sub-hover: rgba(255, 255, 255, 0.08);
  --vp-sub-cur-bg: rgba(14, 173, 181, 0.28);
  --vp-sub-cur-fg: #ffffff;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 1rem;
  background: var(--vp-sub-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vp-sub-line);
}
html[data-vp-theme="light"] .vp-subnav {
  --vp-sub-bg: rgba(14, 173, 181, 0.10);
  --vp-sub-line: rgba(18, 38, 45, 0.10);
  --vp-sub-fg: #12262d;
  --vp-sub-fg-hover: #12262d;
  --vp-sub-hover: rgba(18, 38, 45, 0.07);
  --vp-sub-cur-bg: #0a8a91;
  --vp-sub-cur-fg: #ffffff;
}
.vp-subnav-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vp-subnav-row::-webkit-scrollbar { display: none; }
.vp-subnav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 30px;
  padding: 0 0.85rem;
  border-radius: 999px;
  color: var(--vp-sub-fg);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.vp-subnav a:hover { background: var(--vp-sub-hover); color: var(--vp-sub-fg-hover); }
.vp-subnav a.cur { background: var(--vp-sub-cur-bg); color: var(--vp-sub-cur-fg); }
.vp-subnav a:focus-visible { outline: 2px solid rgba(14, 173, 181, 0.85); outline-offset: 1px; }
/* the tool pages force every descendant of the injected bar to #f4f7f8 (topbar.css) — the
   sub-bar is a sibling of .topbar, not a descendant, so it keeps its own ink; but it lives
   inside the sticky wrapper, whose bottom margin used to be the bar's. */
#viber-topbar .vp-subnav { margin: 0 0 18px; }
#viber-topbar .topbar { margin-bottom: 0; }
#viber-topbar > .topbar:last-child { margin-bottom: 18px; }   /* no sub-bar (no entries): the old gap */
@media (max-width: 46rem) {
  .vp-subnav { padding: 0.3rem 0.6rem; justify-content: flex-start; }
  .vp-subnav a { font-size: 0.84rem; padding: 0 0.7rem; }
}

/* ── The language control: flag + code (2026-10-02, Roberto) ─────────────────────────────
   Lives HERE and not in topbar.css / sippis-shell.css for the same reason the nav does:
   this is the one bar sheet BOTH contexts load (the shell pages and the tool pages), and
   sippis-shell.css must stay byte-identical to the shared shell. A <details>: the summary
   is the pill, the panel drops under it like the avatar menu. */
.vp-lang { position: relative; }
.vp-lang > summary {
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
  height: 38px; box-sizing: border-box; padding: 0 .7rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--vp-bar-track-line, rgba(255,255,255,.2));
  background: var(--vp-bar-track, rgba(255,255,255,.1)); color: var(--vp-bar-fg, #f4f7f8);
  font: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
}
.vp-lang > summary::-webkit-details-marker { display: none; }
.vp-lang > summary:hover { background: var(--vp-bar-hover, rgba(255,255,255,.12)); }
.vp-lang > summary:focus-visible { outline: 2px solid rgba(14,173,181,.7); outline-offset: 2px; }
.vp-flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex: none;
           box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.vp-lang-panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 60;
  width: 15rem; max-height: min(70vh, 26rem); overflow-y: auto; padding: .35rem;
  background: var(--vp-panel-bg, #11313e); color: var(--vp-panel-fg, #f4f7f8);
  border: 1px solid var(--vp-panel-line, rgba(14,173,181,.25)); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  text-align: left;              /* the hero centres its text; a menu reads from the edge */
}
.vp-lang-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 8px;
                color: inherit; text-decoration: none; font-size: .9rem; }
.vp-lang-item:hover, .vp-lang-item:focus-visible { background: rgba(14,173,181,.14); text-decoration: none; }
.vp-lang-item.cur { font-weight: 700; background: rgba(14,173,181,.10); }
.vp-lang-name { flex: 1; text-align: start; }
.vp-lang-item-code { font-size: .82rem; opacity: .7;  letter-spacing: .04em; }
html[data-vp-theme="light"] .vp-lang > summary { color: #ffffff; border-color: rgba(255,255,255,.55);
                                                 background: rgba(255,255,255,.16); }
html[data-vp-theme="light"] .vp-lang-panel { box-shadow: 0 10px 30px rgba(18,38,45,.18); }
/* the tool pages' theme.css styles every <a> in the fragment; keep the menu's own colours */
#viber-topbar .vp-lang-item { color: var(--vp-panel-fg, #f4f7f8); }
@media (max-width: 30rem) { .vp-lang > summary { padding: 0 .5rem; } .vp-lang-code { display: none; } }