/* shared.css — Spanish Book Library shared design tokens (P5.5)
   ------------------------------------------------------------------
   One small file for the things that are the same everywhere: colors,
   base font, corner-radius scale, and the ES/EN language-toggle button
   (byte-identical markup/CSS on every page already, so it's a safe,
   zero-risk first thing to centralize).

   Everything else — header layout, hero sections, grids, cards, forms,
   admin's button/badge variants — stays as page-specific CSS inline in
   each .php file, per the plan from the last P5.5 discussion: pull
   shared TOKENS out, leave page LAYOUT alone.

   2026-07-23: admin.php's palette was unified to match the public
   pages (previously admin had its own dark-green/--faf6ef cream). Only
   --green/--red remain admin-only, kept as functional accents for its
   primary/danger button variants (save vs. delete) — the public pages
   have no equivalent actions, so there's nothing to unify there.

   Include this BEFORE each page's own <style> block, so page-specific
   rules still win on anything they intentionally override.
*/

:root {
  /* Core palette — shared by every page, including admin as of 2026-07-23 */
  --gold:        #c9a84c;
  --gold-hover:  #b89540;
  --dark:        #2c2416;
  --cream:       #f5efe6;
  --ink:         #3a2e1e;   /* body-copy color on cream backgrounds */

  /* Functional accents — admin only (primary/danger actions have no
     public-page equivalent, so these intentionally stay separate) */
  --green:       #2d5a27;
  --green-hover: #1e3d1a;
  --red:         #8b2020;
  --red-hover:   #6e1818;

  /* Shared corner-radius scale */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 20px;
}

/* ── Base ────────────────────────────────────────────────────────── */
body {
  font-family: Georgia, serif;
  background: var(--cream);
  color: var(--dark);
  line-height: 1.6;
}

/* ── Public page header chrome (shared so sizes never drift) ────────
   Used when NOT in immersive shell. Shell pages override below.
*/
body > header {
  background: var(--dark);
  color: var(--cream);
  padding: 20px 40px;
  text-align: center;
  position: relative;
  line-height: 1.4;
  box-sizing: border-box;
}
body > header h1 {
  font-size: 1.8rem;
  margin: 0 0 4px;
  font-weight: bold;
  line-height: 1.25;
}
body > header .subtitle {
  font-size: 0.95rem;
  opacity: 0.8;
  line-height: 1.35;
  margin: 0;
}
body > header .top-right {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 220; /* language / theme menus above page chrome */
}
body > header .header-support {
  display: flex;
  align-items: center;
  gap: 10px;
}
body > header .header-support a {
  color: var(--cream);
  opacity: 0.9;
  text-decoration: none;
  font-size: 1.45rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
body > header .header-support a:hover {
  opacity: 1;
  transform: scale(1.12);
}
body > header .header-support a.support-donate {
  color: #e0a84a;
  opacity: 1;
}
body > header .header-support a.support-contact {
  color: var(--cream);
}

/* ── Immersive public shell (library scene behind every public page) ─
   body.page-shell.page-shell--home|subtle
   --shell-hero: url('assets/themes/…/hero…?v=…') set in the body style attr.
*/
html:has(body.page-shell),
body.page-shell {
  min-height: 100%;
}
body.page-shell {
  background: #2c2416;
  color: var(--dark);
}
body.page-shell .page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #2c2416;
  background-image: var(--shell-hero);
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}
/* Soften lower half of the same image */
body.page-shell .page-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(245, 239, 230, 0) 0%,
    rgba(245, 239, 230, 0) 35%,
    rgba(245, 239, 230, 0.35) 62%,
    rgba(245, 239, 230, 0.58) 100%
  );
}
/* Top dark scrim for title / language control */
body.page-shell .page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(44, 36, 22, 0.78) 0%,
    rgba(44, 36, 22, 0.35) 16%,
    rgba(44, 36, 22, 0.05) 32%,
    transparent 48%
  );
}
/* Subtle mode: more cream wash so book grids / forms stay easy to read */
body.page-shell--subtle .page-bg::before {
  background: linear-gradient(
    to bottom,
    rgba(245, 239, 230, 0.12) 0%,
    rgba(245, 239, 230, 0.45) 28%,
    rgba(245, 239, 230, 0.72) 58%,
    rgba(245, 239, 230, 0.88) 100%
  );
}
body.page-shell--subtle .page-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(44, 36, 22, 0.72) 0%,
    rgba(44, 36, 22, 0.28) 14%,
    rgba(44, 36, 22, 0.04) 26%,
    transparent 40%
  );
}

body.page-shell .page-fg {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Transparent header over the scene.
   Max-width matches main content so header and body share one column
   (theme art still shows in the side margins). */
body.page-shell .page-fg > header {
  background: transparent;
  color: var(--cream);
  /* Side padding clears absolute ✉❤ / theme / language so a long title won’t sit under them */
  padding: 16px 200px 10px;
  text-align: center;
  position: relative;
  line-height: 1.4;
  box-sizing: border-box;
  max-width: 1100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.page-shell .page-fg > header h1 {
  font-size: 1.55rem; /* mid size (was 1.8 — felt huge once stacked on mobile) */
  margin: 0 0 4px;
  font-weight: bold;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  overflow-wrap: anywhere;
}
body.page-shell .page-fg > header .subtitle {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.35;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.page-shell .page-fg > header .top-right {
  position: absolute;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 220; /* language / theme menus above site-nav when they overlap */
}
body.page-shell .page-fg > header .header-support {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.page-shell .page-fg > header .header-support a {
  color: var(--cream);
  opacity: 0.9;
  text-decoration: none;
  font-size: 1.45rem; /* envelope + heart, larger hit targets */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
body.page-shell .page-fg > header .header-support a:hover {
  opacity: 1;
  transform: scale(1.12);
}
/* Donate heart — site gold/orange */
body.page-shell .page-fg > header .header-support a.support-donate {
  color: #e0a84a;
  opacity: 1;
}
body.page-shell .page-fg > header .header-support a.support-donate:hover {
  color: #f0bc5c;
}
/* Contact envelope — cream (not orange), same size as heart */
body.page-shell .page-fg > header .header-support a.support-contact {
  color: var(--cream);
}

/* Keep theme + language controls on one baseline */
body.page-shell .page-fg > header .top-right {
  align-items: center;
}
body.page-shell .page-fg > header .theme-picker,
body.page-shell .page-fg > header .lang-toggle {
  display: flex;
  align-items: center;
  line-height: 1;
}
body.page-shell .page-fg > header .theme-picker-btn,
body.page-shell .page-fg > header .lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  box-sizing: border-box;
}

/* Menu pill — only as wide as the links (all shell pages).
   Extra horizontal padding so first/last items (Home / Upload) aren’t cramped. */
body.page-shell .page-fg .site-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto 0; /* gap to content is only .hero-breath + first-block margin */
  padding: 7px 18px;
  background: rgba(36, 29, 18, 0.5);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 999px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
}
body.page-shell .page-fg .site-nav a {
  color: #f5efe6cc;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 6px 14px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
body.page-shell .page-fg .site-nav a:hover { background: #f5efe61a; color: #f5efe6; }
body.page-shell .page-fg .site-nav a.active {
  color: var(--dark);
  background: var(--gold);
  font-weight: bold;
}

/*
 * Exact same distance menu → first content on home and other pages:
 *   hero-breath (16px) + first block margin-top (16px) = 32px below the pill.
 */
body.page-shell .hero-breath {
  flex: 0 0 auto;
  height: 16px;
  pointer-events: none;
}
body.page-shell--home .home-main > .hero,
body.page-shell--subtle .page-main > .controls,
body.page-shell--subtle .page-main > .page-content {
  margin-top: 16px;
}

/* Content column fills remaining height; footer pins to bottom */
body.page-shell .page-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Translucent footer over the scene */
body.page-shell .page-fg > footer,
body.page-shell .page-main > footer {
  margin-top: auto;
  background: rgba(44, 36, 22, 0.62);
  color: var(--cream);
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  position: relative;
  border-top: 1px solid rgba(201, 168, 76, 0.28);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
body.page-shell .page-fg > footer a,
body.page-shell .page-main > footer a {
  color: var(--gold);
  text-decoration: none;
}
body.page-shell .admin-gear {
  position: absolute;
  bottom: 12px;
  right: 20px;
  font-size: 1.9rem;
  opacity: 0.15;
  color: var(--cream);
  text-decoration: none;
  transition: opacity 0.2s;
}
body.page-shell .admin-gear:hover { opacity: 0.55; }

/* Content panels on shell pages — slightly frosted so text stays clear */
body.page-shell--subtle .page-content,
body.page-shell--subtle .controls {
  background: rgba(245, 239, 230, 0.9);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(44, 36, 22, 0.08);
}
body.page-shell--subtle .page-content {
  max-width: 800px;
  padding: 24px 28px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}
body.page-shell--subtle .page-content h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--dark);
  border-bottom: 1px solid #c9a84c66;
  padding-bottom: 10px;
}
body.page-shell--subtle .page-content h3 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
  color: var(--dark);
}
body.page-shell--subtle .page-content p {
  margin-bottom: 14px;
  color: var(--ink);
}
body.page-shell--subtle .page-content a {
  color: var(--gold);
  font-weight: bold;
  text-decoration: none;
}
body.page-shell--subtle .page-content a:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}
/* Gold CTAs need dark text — .page-content a would otherwise paint them gold-on-gold */
body.page-shell--subtle .page-content a.btn-gold {
  color: var(--dark);
  text-decoration: none;
}
body.page-shell--subtle .page-content a.btn-gold:hover {
  color: var(--dark);
  text-decoration: none;
  background: var(--gold-hover);
}

.return-link {
  display: inline-block;
  color: var(--gold);
  text-decoration: none;
  font-size: 0.9rem;
}
.return-link:hover { color: var(--gold-hover); }
.return-link-top { display: block; margin-bottom: 24px; }
.return-link-bottom { margin-top: 24px; }

body.page-shell--subtle .controls {
  padding: 12px 16px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
}

/* Admin shell: frosted main panels so dense UI stays readable */
body.page-shell--admin {
  /* slightly stronger cream so tables/forms stay clear */
}
body.page-shell--admin .page-bg::before {
  background: linear-gradient(
    to bottom,
    rgba(245, 239, 230, 0.2) 0%,
    rgba(245, 239, 230, 0.55) 30%,
    rgba(245, 239, 230, 0.82) 70%,
    rgba(245, 239, 230, 0.9) 100%
  );
}
body.page-shell--admin main,
body.page-shell--admin .admin-section {
  background: rgba(245, 239, 230, 0.92);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(44, 36, 22, 0.08);
}
body.page-shell--admin main {
  margin: 16px auto 24px;
  max-width: 1100px;
  padding: 18px 20px 28px;
}
body.page-shell--admin .admin-section {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
/* Admin menu pill styling lives in admin_shared.css (.admin-nav).
   Do not re-darken the outer nav here — that left dark text on a dark bar
   (admin_shared still had #333 links) and a square full-width strip. */

/* Public theme picker (next to language switcher) */
.theme-picker {
  position: relative;
  flex-shrink: 0;
}
.theme-picker-btn {
  background: transparent;
  border: 1px solid #f5efe6aa;
  color: #f5efe6;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
}
.theme-picker-btn:hover { background: #f5efe622; }
.theme-picker-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  max-width: min(260px, 80vw);
  padding: 6px;
  background: var(--dark);
  border: 1px solid #f5efe655;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 210;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}
.theme-picker.open .theme-picker-menu { display: flex; }
.theme-picker-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: #f5efe6;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}
.theme-picker-item:hover { background: #f5efe622; }
.theme-picker-item.active {
  background: var(--gold);
  color: var(--dark);
  font-weight: bold;
}
.theme-picker-item .tp-hint {
  display: block;
  font-size: 0.72rem;
  opacity: 0.75;
  font-weight: normal;
  margin-top: 2px;
}
.theme-picker-item.active .tp-hint { opacity: 0.85; }
body.page-shell--subtle .support-section {
  background: rgba(237, 228, 210, 0.82);
  border-top: 1px solid rgba(201, 168, 76, 0.4);
  backdrop-filter: blur(2px);
  padding: 30px 20px;
  text-align: center;
}
body.page-shell--subtle .support-section h2 {
  color: var(--dark);
  margin-bottom: 6px;
}
body.page-shell--subtle .support-section p {
  color: #6b5a3a;
  margin-bottom: 18px;
}
body.page-shell--subtle .support-section .support-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
body.page-shell--subtle .support-section .support-buttons a {
  padding: 10px 20px;
  border-radius: 4px;
}
/* Visible contact address (copy-friendly) under Contact buttons */
.contact-email-line {
  flex-basis: 100%;
  width: 100%;
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #6b5a3a;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}
.contact-email-line .contact-email-addr {
  font-weight: 600;
  color: #2c2416;
  letter-spacing: 0.01em;
}

/* Mobile: stack title, then ONE compact row of contact/donate/theme/lang.
   Keep header short so content is not pushed halfway down the screen. */
@media (max-width: 720px) {
  body.page-shell .page-fg > header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px 8px; /* stacked controls — no need for wide side gutters */
    text-align: center;
    max-width: 100%;
  }
  body.page-shell .page-fg > header h1 {
    font-size: 1.35rem;
    line-height: 1.2;
    padding: 0;
    margin: 0 0 2px;
  }
  body.page-shell .page-fg > header .subtitle {
    font-size: 0.82rem;
    line-height: 1.3;
    margin: 0;
  }
  body.page-shell .page-fg > header .top-right {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap; /* one line — they fit if compact */
    gap: 6px;
    margin-top: 8px;
  }
  body.page-shell .page-fg > header .header-support {
    gap: 6px;
    flex-shrink: 0;
  }
  body.page-shell .page-fg > header .theme-picker,
  body.page-shell .page-fg > header .lang-toggle {
    flex-shrink: 0;
    gap: 4px;
  }
  body.page-shell .page-fg > header .theme-picker-btn,
  body.page-shell .page-fg > header .lang-switcher-btn {
    min-height: 2rem;
    padding: 4px 8px;
    font-size: 0.78rem;
  }
  body.page-shell .page-fg > header .header-support a {
    font-size: 1.25rem;
    min-width: 36px;
    min-height: 36px;
  }
  /* Menu: prefer a single row; slightly smaller labels */
  body.page-shell .page-fg .site-nav {
    border-radius: 999px;
    max-width: calc(100% - 12px);
    width: auto;
    padding: 5px 8px;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-shell .page-fg .site-nav::-webkit-scrollbar { display: none; }
  body.page-shell .page-fg .site-nav a {
    padding: 6px 8px;
    font-size: 0.78rem;
    flex-shrink: 0;
  }
  body.page-shell--subtle .page-content {
    margin-left: 14px;
    margin-right: 14px;
    padding: 18px 16px;
  }
  body.page-shell--subtle .controls {
    margin-left: 14px;
    margin-right: 14px;
  }
}

/* ── Language switcher (EN + Local ▾ dropdown) ──────────────────────
   Compact fixed footprint so extra languages never widen the header.
   Two badges only; non-EN options open in an absolutely-positioned
   vertical menu below the Local badge (same pill style).
*/
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
}

.lang-toggle .lang-badge,
.lang-toggle button.lang-badge {
  background: transparent;
  border: 1px solid #f5efe6aa;
  color: #f5efe6;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.lang-toggle .lang-badge:hover { background: #f5efe622; }
.lang-toggle .lang-badge.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
  font-weight: bold;
}

/* Single control: 🌐 + current language + ▾ → full list (incl. English).
   Label width is set in JS to the longest installed native name so the
   pill (and header) do not jump when switching languages. */
.lang-toggle .lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}
.lang-toggle .lang-globe {
  flex-shrink: 0;
  font-size: 1em;
  line-height: 1;
  opacity: 0.95;
}
.lang-toggle .lang-current-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}
.lang-toggle .lang-caret {
  flex-shrink: 0;
  font-size: 0.72em;
  opacity: 0.85;
  line-height: 1;
}
.lang-dropdown-wrap.open .lang-switcher-btn .lang-caret {
  opacity: 1;
}

/* Dropdown: overlays content, never expands the header flex row */
.lang-dropdown-wrap {
  position: relative;
  flex-shrink: 0;
}
.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(240px, 75vw);
  padding: 6px;
  margin: 0;
  background: var(--dark);
  border: 1px solid #f5efe655;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 200;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}
.lang-dropdown-wrap.open .lang-dropdown-menu {
  display: flex;
}
.lang-dropdown-menu .lang-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  padding-left: 12px;
  padding-right: 12px;
}
.lang-dropdown-menu .lang-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-dropdown-menu .lang-item-code {
  flex-shrink: 0;
  font-size: 0.78em;
  opacity: 0.75;
  letter-spacing: 0.04em;
}
/* Keep open menu readable if a page lightens the header */
.lang-dropdown-menu .lang-badge {
  color: #f5efe6;
  border-color: #f5efe655;
}
.lang-dropdown-menu .lang-badge:hover { background: #f5efe622; }
.lang-dropdown-menu .lang-badge.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}
.lang-dropdown-menu .lang-badge.active .lang-item-code {
  opacity: 1;
  font-weight: bold;
}

/* ── Gold action button ───────────────────────────────────────────
   2026-07-25 (P5.5 second pass): the color recipe previously copy-pasted
   with a different class name on every page — .enter-library-btn,
   .cta-box a, .btn-read, .support-buttons a — plus admin's .btn-secondary.
   Each page still keeps its own class for sizing/layout (padding,
   border-radius, display), added alongside this one for color, e.g.
   <a class="enter-library-btn btn-gold">. admin.php's .btn-secondary
   already has its own color rule, left as-is rather than mixed with this.
*/
.btn-gold {
  background: var(--gold);
  color: var(--dark);
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-gold:hover { background: var(--gold-hover); }

/* ── Tooltip (anchored to the element, not the cursor) ───────────────
   2026-07-25: native title="" tooltips are positioned by the browser
   right at/near the cursor, which can't be controlled via CSS — a larger
   system cursor (accessibility setting) ends up covering the text. This
   is a pure-CSS replacement: put the tooltip text in data-tooltip="" on
   any element instead of title="", and it appears anchored just ABOVE
   the element itself, so it's never under the pointer regardless of
   cursor size. Usage: <span data-tooltip="English title here">...</span>
*/
[data-tooltip] { position: relative; }
[data-tooltip]:not([data-tooltip=""]):hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: var(--dark);
  color: var(--cream);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  max-width: 260px;
  width: max-content;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  z-index: 50;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Tooltip, side variant ────────────────────────────────────────────
   2026-07-28 (P6.5): the default tooltip above renders off the top edge
   of the viewport for elements anchored near the very top of the page
   (e.g. the header-support icons at top:16px) — there's no room above
   them for the browser to show it. Add class="tooltip-side" alongside
   data-tooltip="" on any such element to render the tooltip to the left
   instead. Elements with room above (e.g. the footer admin-gear) should
   keep the default (no tooltip-side class needed).
*/
[data-tooltip].tooltip-side:not([data-tooltip=""]):hover::after {
  bottom: auto;
  top: 50%;
  left: auto;
  right: 100%;
  transform: translateY(-50%);
  margin-bottom: 0;
  margin-right: 8px;
}