/* Custorian side navigation panel: the fixed vertical tab rail on the right edge.
   Extracted from index-foundation.html on 17 Sep 2026 so it can go on every page,
   including the legacy-design ones (registry, standard, privacy, terms, donation,
   conformity guide) that do not load foundation.css.

   Self-contained on purpose: no reset, no custom-property dependency, nothing that
   reaches outside .sidetabs. Values fall back to literals so a page without the
   foundation tokens still renders the panel correctly. */

.sidetabs {
  /* Above every page header on the site: the foundation top bar sits at 60, the
     legacy registry/standard/guide headers at 100. Dialogs go above this again
     (200), so an open modal still covers the rail. */
  position:fixed; right:0; top:50%; z-index:110;
  /* Nudged down by half a header so the rail centres in the space BELOW the
     sticky top bar rather than the whole viewport. It draws above the bar, so
     without this its first tab sits on the bar's own background. */
  transform:translateY(calc(-50% + 29px));
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  max-height:96vh; margin:0; padding:0; list-style:none;
}

.sidetabs .sidetab {
  writing-mode:vertical-rl;
  font-family:var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  /* Transparent at rest: the page shows straight through, and the tab is just
     an outline. Every lit state below fills it violet. */
  color:var(--violet, #5B41C2); background:transparent;
  border:1px solid rgba(91,65,194,.45); border-right:none;
  border-radius:5px 0 0 5px; padding:20px 13px;
  transform:translateX(9px);
  margin:0; cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), background .24s ease, color .24s ease, box-shadow .24s ease, border-color .24s ease;
}

/* .solid is carried by the Take action tab. It used to be permanently filled;
   it now sits transparent like the rest and only lights up on interaction. */
.sidetabs .sidetab.solid { background:transparent; color:var(--violet, #5B41C2); border-color:rgba(91,65,194,.45); }

/* Lit: hovered, keyboard-focused, being pressed, or the page you are on. */
.sidetabs .sidetab:hover,
.sidetabs .sidetab:focus-visible,
.sidetabs .sidetab:active,
.sidetabs .sidetab.solid:hover,
.sidetabs .sidetab.solid:focus-visible,
.sidetabs .sidetab.solid:active,
.sidetabs .sidetab[aria-current="page"] {
  transform:translateX(0); background:var(--violet, #5B41C2); color:#fff;
  border-color:var(--violet, #5B41C2); box-shadow:-8px 0 24px rgba(91,65,194,.3); outline:none;
}

/* Pressed goes a shade deeper than hover, so a click reads as a click. */
.sidetabs .sidetab:active,
.sidetabs .sidetab.solid:active {
  background:var(--violet-d, #46329E); border-color:var(--violet-d, #46329E);
}

.sidetabs .sidetab[aria-current="page"] { cursor:default; }

/* Over a full-bleed black band the violet outline vanishes, so the resting tab
   switches to white. Set by sidetabs.js; the lit states below are unaffected,
   because a violet fill with white text reads on either background. */
.sidetabs .sidetab.on-dark,
.sidetabs .sidetab.solid.on-dark {
  color:#fff; border-color:rgba(255,255,255,.5);
}

/* A lit tab always wins over the dark-background variant, whichever order the
   classes land in. */
.sidetabs .sidetab.on-dark:hover,
.sidetabs .sidetab.on-dark:focus-visible,
.sidetabs .sidetab.on-dark:active,
.sidetabs .sidetab.on-dark[aria-current="page"] {
  color:#fff; border-color:var(--violet, #5B41C2);
}

/* Six tabs stack taller than a short laptop viewport, so tighten them rather than
   letting the rail run off the top and bottom of the screen. */
@media (max-height:900px) {
  .sidetabs { gap:5px; }
  .sidetabs .sidetab { font-size:10.5px; letter-spacing:.12em; padding:15px 11px; }
}

/* Shorter again on a laptop-height window. The rail draws above the sticky top
   bar, so if it runs the full height its first tab sits on the bar's paper
   background and the white label washes out. Tightening keeps the whole rail
   inside the space below the bar. */
@media (max-height:760px) {
  .sidetabs { gap:4px; }
  .sidetabs .sidetab { font-size:9.5px; letter-spacing:.1em; padding:12px 10px; }
}

/* Below the desktop breakpoint the rail would cover content: the top bar carries
   the same destinations there. */
@media (max-width:1180px) {
  .sidetabs { display:none; }
}

/* --- MOBILE MENU (28 Sep 2026) ----------------------------------------------
   Below 1180px the rail is hidden and the top bar only carries Back and Home, so
   phones had no way to reach the other sections. sidetabs.js builds a Menu button
   and a drop-down panel from the rail's own tabs, so the destinations stay in one
   place. Nothing here renders above 1180px: the desktop rail is unchanged. */
.navmenu-btn, .navmenu { display:none; }

@media (max-width:1180px) {
  .navmenu-btn {
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--violet, #5B41C2); background:var(--card, #FFFDF9);
    border:1px solid rgba(91,65,194,.45); border-radius:100px;
    padding:6px 13px; line-height:1.5; cursor:pointer; white-space:nowrap;
    -webkit-appearance:none; appearance:none; margin-left:auto;
  }
  .navmenu-btn:hover, .navmenu-btn:focus-visible, .navmenu-btn[aria-expanded="true"] {
    color:#fff; background:var(--violet, #5B41C2); border-color:var(--violet, #5B41C2); outline:none;
  }
  .navmenu-btn .bars { display:inline-block; width:13px; height:9px; position:relative; }
  .navmenu-btn .bars::before, .navmenu-btn .bars::after, .navmenu-btn .bars i {
    content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:1px;
  }
  .navmenu-btn .bars::before { top:0; }
  .navmenu-btn .bars i { top:3.75px; }
  .navmenu-btn .bars::after { bottom:0; }

  /* Pages without a foundation top bar get the button pinned top right instead. */
  .navmenu-btn.floating { position:fixed; top:12px; right:12px; z-index:130; box-shadow:0 4px 14px rgba(14,14,16,.12); }

  .navmenu {
    position:fixed; top:58px; right:12px; z-index:130;
    width:min(300px, calc(100vw - 24px)); max-height:calc(100vh - 76px); overflow:auto;
    background:var(--card, #FFFDF9); border:1px solid var(--line, #e2ddd3);
    border-top:2px solid var(--violet, #5B41C2); border-radius:4px;
    box-shadow:0 18px 44px rgba(14,14,16,.2); padding:6px 0;
  }
  .navmenu.open { display:block; }
  .navmenu a, .navmenu button {
    display:block; width:100%; text-align:left; text-decoration:none; cursor:pointer;
    font-family:var(--sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink, #0E0E10); background:none; border:none; border-bottom:1px solid var(--hair, #ebe6dc);
    padding:14px 18px; -webkit-appearance:none; appearance:none;
  }
  .navmenu > :last-child { border-bottom:none; }
  .navmenu a:hover, .navmenu a:focus-visible, .navmenu button:hover, .navmenu button:focus-visible {
    background:rgba(91,65,194,.07); color:var(--violet, #5B41C2); outline:none;
  }
  .navmenu a[aria-current="page"] { color:var(--violet, #5B41C2); box-shadow:inset 3px 0 0 var(--violet, #5B41C2); }
  .navmenu .solid { color:var(--violet, #5B41C2); }
}