/* ============================================================================
   The Hopkins Institute — PALETTE SWITCHER (dev layer)
   Sibling to the dev annotation layer, and stripped the same way: delete the
   <link> + <script> pair and the inline <head> guard. Production ships ONE
   palette, chosen by the client, and no switcher.

   Like dev-notes.css this file is deliberately PALETTE-INDEPENDENT: it writes
   literal colours, not semantic tokens, because a control that changes the
   palette must not restyle itself while it does so. It has to stay legible over
   newsprint, over plum, and over anything added later. Nothing in here styles
   the page.

   WHERE IT SITS, and why it moved (2026-08-07)
   BOTTOM-LEFT. It used to sit bottom-right, abutting the notes bar. Two things
   changed: the annotation layer was removed, so there is no bar to abut; and
   BugHerd's feedback widget now occupies the right-hand edge. Two fixed overlays
   competing for the same corner is a collision the client would have to work
   around on every page, so this one moved to the opposite corner.

   It still has to clear the hero's Dreamstime credit (.slide__credit,
   bottom:70px), which is a stock-licensing requirement and must stay fully
   legible — that credit is right-aligned, so the left corner is clear of it at
   every width. Bar height stays ~42px.

   And because ANY fixed overlay eventually sits over something (the footer's
   legal row, once you reach the end of the scroll), it collapses to one small
   pill. One click and the page is completely unobstructed.
   ========================================================================= */

/* --pal-h was measured off the notes bar by palette.js. With no notes bar it is
   simply the bar's own height. Kept as a token because the collapse rule and the
   mobile stacking rule both read it. */
:root{ --pal-h:42px; }

.pal-bar{
  position:fixed; z-index:9000; left:16px; right:auto; bottom:16px;
  height:var(--pal-h);
  display:flex; align-items:center; gap:10px;
  padding:0 10px 0 14px;
  background:#241029; color:#F7F3EA;
  border:1px solid rgba(203,174,208,.34);   /* all four sides: no seam to share now */
  box-shadow:0 12px 34px rgba(0,0,0,.42);
  font:500 13px/1.2 "Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 104;
  letter-spacing:.04em;
}
.pal-bar__label{
  font-variation-settings:"wdth" 112; font-weight:400;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(247,243,234,.72); white-space:nowrap;
}
.pal-bar__set{display:flex; gap:0; border:1px solid rgba(203,174,208,.34);}
.pal-bar__opt{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:6px 12px; margin:0; color:#F7F3EA;
  font:500 12px/1 "Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 104;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background 140ms ease, color 140ms ease;
}
.pal-bar__opt+.pal-bar__opt{border-left:1px solid rgba(203,174,208,.34);}
.pal-bar__opt:hover{background:rgba(247,243,234,.14);}
.pal-bar__opt[aria-pressed="true"]{background:#E0AE3C; color:#33193D; font-weight:600;}
.pal-bar__opt:focus-visible{outline:3px solid #E0AE3C; outline-offset:2px;}
.pal-bar__opt[aria-pressed="true"]:focus-visible{outline-color:#F7F3EA;}

/* the switcher's own design note sits in the bar, so the QUESTION back to the
   client is asked next to the thing it is about */
/* .pal-bar__note held the annotation layer's marker for this control. Removed
   with the layer on 2026-08-07; restore it if the layer comes back. */

/* ---- collapse / restore -------------------------------------------------- */
.pal-bar__min{
  appearance:none; background:none; cursor:pointer;
  border:1px solid rgba(203,174,208,.34);
  padding:0; width:24px; height:24px; flex:0 0 auto;
  display:grid; place-items:center; color:#F7F3EA;
  font:600 13px/1 "Archivo",system-ui,sans-serif; letter-spacing:0;
  transition:background 140ms ease;
}
.pal-bar__min:hover{background:rgba(247,243,234,.14);}
.pal-bar__min:focus-visible{outline:3px solid #E0AE3C; outline-offset:2px;}

/* collapsed: the bar reduces to a single pill in the corner. The .dvn-bar rule
   is kept so that restoring the annotation layer collapses both together again;
   it is a layout rule, not a colour one, so dev-notes.css stays untouched. */
html[data-devbar="min"] .dvn-bar{display:none !important;}
html[data-devbar="min"] .pal-bar{
  left:16px; right:auto; height:auto; padding:0; gap:0;
  background:none; border:0; box-shadow:none;
}
/* collapsed, the label and the option set go away entirely and only the pill
   remains. This rule lost its `{display:none}` in an earlier edit, which left a
   dangling selector list that swallowed the pill rule below — so the label and
   the options silently took the PILL styling instead of being hidden, giving
   three pills and a 345px-wide invisible click target across the corner. */
html[data-devbar="min"] .pal-bar__label,
html[data-devbar="min"] .pal-bar__set{display:none;}
html[data-devbar="min"] .pal-bar__min{
  width:auto; height:34px; padding:0 12px;
  background:#241029; box-shadow:0 12px 34px rgba(0,0,0,.42);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-variation-settings:"wdth" 112; font-weight:500;
}

@media print{.pal-bar{display:none !important;}}
@media (prefers-reduced-motion:reduce){
  .pal-bar__opt,.pal-bar__min{transition-duration:.01ms !important;}
}
/* narrow: nothing to stack above any more, so it stays on the 16px baseline.
   Below 900px the hero credit becomes a static line in the caption panel, so
   nothing sits under the bar at these widths either. */
@media (max-width:719px){
  .pal-bar{left:16px; right:auto; bottom:16px;}
}
