/* ── the bars and sliders of every atlas, in the molecular viewer's style ──
   Since v12.0, at the owner's word, the viewer (scripts/molecular/viewer/
   base.css) is the model for the bar along the foot of every atlas and for
   every slider: its panel material and hairline, its ink and soft ink for
   the buttons, its sans (Flux, the site's own) at its size for their names,
   a lit button a block of its ink, and its slider, a rounded track with a
   big round thumb in its accent, bordered in the panel's solid. The file is
   linked after each page's own styles so it has the last word on the bar
   and the sliders, and on nothing else: the sheets keep their places and
   their look. The viewer keeps its own rules. Since v12.1, at the owner's
   word, the bar is a grey island, light grey on the light theme and dark
   grey on the dark, standing in from the screen's edges and bordered all
   round as the Brodmann Area Atlas's bar always did (the island rules at
   the end of the bar section). */
:root{
  --bar-panel:rgba(246,250,251,.86); --bar-solid:#F6FAFB; --bar-ink:#1B2A33; --bar-soft:#4E5E67;
  --bar-line:rgba(27,42,51,.13); --bar-track:rgba(27,42,51,.22); --bar-accent:#28666F; --bar-accent-ink:#FFFFFF;
  --bar-fill:rgba(229,231,234,.9); --bar-fill-solid:#E5E7EA;
  /* the island's whole height from the stage's foot: the bar, the gap under it and the home indicator's room */
  --isle:calc(var(--bar-h, 64px) + var(--gap, 14px) + env(safe-area-inset-bottom, 0px));
}
:root[data-theme="dark"]{
  --bar-panel:rgba(15,23,29,.84); --bar-solid:#121B21; --bar-ink:#E3ECEF; --bar-soft:#A7B6BD;
  --bar-line:rgba(227,236,239,.14); --bar-track:rgba(227,236,239,.26); --bar-accent:#7FC3CB; --bar-accent-ink:#0D1B20;
  --bar-fill:rgba(42,46,50,.9); --bar-fill-solid:#2A2E32;
}

/* the bar, and the views' bar at the top of the four-view pages (v12.33),
   which wears the same island and buttons */
.panelbar, .viewbar{
  color:var(--bar-ink); background:var(--bar-fill); border-color:var(--bar-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
}
.viewbar{ border:1px solid var(--bar-line); }
.panelbar .panelbar-btns, .panelbar .panelbar-end, .panelbar .pbtn.pbtn-ref, .viewbar .viewbar-slice{ border-color:var(--bar-line); }
.panelbar .pbtn, .viewbar .pbtn{ color:var(--bar-soft); }
.panelbar .pbtn span, .viewbar .pbtn span{ font-family:'Flux','Afacad Flux',system-ui,-apple-system,sans-serif; font-weight:400; font-size:.6rem; letter-spacing:.14em; line-height:1; }
/* a hovered button takes the ink; the lit rule and the greyed rule stand after it at the same weight, so a lit
   button keeps its paper (v12.37: a :not(:disabled) here outranked the lit rule and the lit button's name and
   icon vanished into its block on hover) and a greyed one stays grey */
@media (hover: hover){ .panelbar .pbtn:hover, .viewbar .pbtn:hover{ color:var(--bar-ink); } }
/* a bar button given the hidden attribute stays out of the bar, which .pbtn's display would otherwise undo */
.panelbar .pbtn[hidden], .viewbar .pbtn[hidden]{ display:none; }
.panelbar .pbtn:active, .viewbar .pbtn:active{ color:var(--bar-ink); }
.panelbar .pbtn.active, .panelbar .pbtn[aria-pressed="true"], .panelbar .pbtn[aria-expanded="true"],
.viewbar .pbtn.active, .viewbar .pbtn[aria-pressed="true"]{ background:var(--bar-ink); color:var(--bar-fill-solid); }
.panelbar .pbtn.active span, .panelbar .pbtn[aria-pressed="true"] span, .panelbar .pbtn[aria-expanded="true"] span,
.viewbar .pbtn.active span, .viewbar .pbtn[aria-pressed="true"] span{ font-weight:600; }
/* greyed: Slice while a flat view is shown (v12.33), and Regions while Slice is off or a flat view is shown (v12.37) */
.viewbar .pbtn:disabled{ background:none; color:var(--bar-soft); opacity:.32; }
/* the readouts at the bar's start, in the bar's inks */
.panelbar .stat .k, .panelbar .stat .v small, .panelbar .probe-hint{ color:var(--bar-soft); }
.panelbar .stat .v{ color:var(--bar-ink); }
.panelbar .probe-btn{ border-bottom-color:var(--bar-line); }
.panelbar .probe-btn[aria-pressed="true"], .panelbar .probe-btn .dot{ border-color:var(--bar-ink); }
@media (hover: hover){ .panelbar .probe-btn:hover{ border-bottom-color:var(--bar-ink); } }
.screen.one.land .pbtn span{ font-size:.5rem; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more){
  .panelbar, .viewbar{ background:var(--bar-fill-solid); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* the island (v12.1): on the pages whose bar is the screen's last row the
   bar stands in from the screen's edges and its foot, bordered all round,
   as the Brodmann Area Atlas's bar does in its grid. The sheets still rise
   from behind it: the stage reaches down behind the bar, its padding
   keeping the views and the sheets the gap above it, and the bar stands
   over the stage. Upright on a phone the sheets stand at the island's
   width with their foot tucked behind it; held sideways the bar is the
   screen's last column and stands in the same way, the sheets as before. */
.screen > .panelbar{
  position:relative; z-index:30;
  margin:0 var(--gap, 14px) calc(var(--gap, 14px) + env(safe-area-inset-bottom, 0px));
  border:1px solid var(--bar-line); padding-bottom:.45rem;
}
.screen > .deck > .stage{ margin-bottom:calc(-1 * var(--isle)); padding-bottom:calc(var(--gap, 14px) + var(--isle)); }
.screen > .deck > .stage .pop{ bottom:calc(var(--gap, 14px) + var(--isle)); max-height:min(72%, calc(100% - var(--isle) - 2 * var(--gap, 14px) - var(--vbar, 0px))); }
.screen.one > .deck > .stage{ padding-bottom:calc(var(--gap, 14px) + var(--isle)); }
.screen.one > .deck > .stage .pop{
  left:var(--gap, 14px); right:var(--gap, 14px); width:auto; bottom:calc(var(--isle) - 12px);
  border-left:1px solid var(--hair); border-right:1px solid var(--hair);
  max-height:min(76%, calc(100% - var(--isle) - var(--vbar, 0px)));
}
.screen.one.land > .panelbar{
  margin:var(--gap, 14px) var(--gap, 14px) calc(var(--gap, 14px) + env(safe-area-inset-bottom, 0px)); padding-bottom:.3rem;
}
.screen.one.land > .deck > .stage{ margin-bottom:0; padding-bottom:0; }
.screen.one.land > .deck > .stage .pop{ left:0; right:0; width:auto; bottom:0; border-left:0; border-right:0; max-height:calc(100% - var(--vbar, 0px)); }
/* the two sheets whose height is set by name, the receptor window and the
   network ring, keep to the room above the island as the others do, and
   below the views' bar where a page has one (v12.33) */
.screen > .deck > .stage #popRx{ height:max(min(84%, calc(100% - var(--isle) - 2 * var(--gap, 14px) - var(--vbar, 0px))), min(560px, calc(100% - var(--isle) - var(--gap, 14px) - var(--vbar, 0px)))); }
.screen.one > .deck > .stage #popRx{ height:calc(100% - var(--isle) - var(--vbar, 0px)); }
.screen.one.land > .deck > .stage #popRx{ height:calc(100% - var(--vbar, 0px)); }
.screen > .deck > .stage #popRing{ height:min(88%, calc(100% - var(--isle) - 2 * var(--gap, 14px) - var(--vbar, 0px))); }
.screen.one > .deck > .stage #popRing{ height:auto; max-height:min(76%, calc(100% - var(--isle) - var(--vbar, 0px))); }
.screen.one.land > .deck > .stage #popRing{ height:calc(100% - var(--vbar, 0px)); max-height:calc(100% - var(--vbar, 0px)); }
/* the newsletter card stands above the island; where the bar is a column
   the card keeps to the foot */
body.atlas-screen:has(> main.screen) .vn-news{ bottom:calc(var(--isle) + 14px); }
body.atlas-screen:has(> main.screen.one.land) .vn-news{ bottom:max(14px, env(safe-area-inset-bottom, 0px)); }

/* a squat phone (v12.23), the closed iPhone Duo's outer display, whose
   screen is shorter for its width than any other iPhone's: the page's
   script marks the screen .short there, where one view stands at a time
   and the views' bar loses All (atlas-views.css), the four together being
   thumbnails on a screen so short. The bar keeps the foot there as on any
   phone upright: from v12.23 to v12.26 it stood down the right edge, beside
   the status column the Duo itself keeps there, which was one bar too many
   (v12.27, at the owner's word) */

/* while a keyboard has shortened the page (a field has the focus and the
   window has lost a keyboard's height, which navbar.js marks vn-typing,
   v12.23) the bar steps aside rather than ride up over the keys, and the
   views take its room until the keyboard goes */
:root.vn-typing .screen > .panelbar, :root.vn-typing .ba-screen > .panelbar{ display:none; }
:root.vn-typing .screen > .deck > .stage{ margin-bottom:0; padding-bottom:var(--gap, 14px); }
:root.vn-typing .screen.one > .deck > .stage{ padding-bottom:0; }

/* the sliders: the viewer's, a rounded track and a big round thumb in the
   accent with the panel's solid about it */
input[type="range"]:not(.slice-range){
  -webkit-appearance:none; appearance:none; height:30px; margin:0; padding:0;
  background:transparent; cursor:pointer; accent-color:var(--bar-accent);
}
input[type="range"]:not(.slice-range)::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:var(--bar-track); }
input[type="range"]:not(.slice-range)::-webkit-slider-thumb{
  -webkit-appearance:none; width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:var(--bar-accent); border:4px solid var(--bar-solid); box-shadow:0 1px 5px rgba(0,0,0,.35);
}
input[type="range"]:not(.slice-range)::-moz-range-track{ height:6px; border-radius:3px; background:var(--bar-track); }
input[type="range"]:not(.slice-range)::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--bar-accent); border:4px solid var(--bar-solid); box-shadow:0 1px 5px rgba(0,0,0,.35);
}
input[type="range"]:not(.slice-range):focus-visible{ outline:2px solid var(--bar-accent); outline-offset:2px; border-radius:8px; }
/* the slice tool's edge sliders take the same track and thumb; their strips
   and sizes stay viewer.css's, so a finger still finds them; the centre
   mark across each track is the bar's soft ink */
.slice-range{ --slice-mark:var(--bar-soft); }
.slice-range::-webkit-slider-runnable-track{ background:var(--bar-track); border-radius:3px; }
.slice-range::-moz-range-track{ background:var(--bar-track); border-radius:3px; }
.slice-range::-webkit-slider-thumb{ background:var(--bar-accent); border:3px solid var(--bar-solid); box-shadow:0 1px 5px rgba(0,0,0,.35); }
.slice-range::-moz-range-thumb{ background:var(--bar-accent); border:3px solid var(--bar-solid); box-shadow:0 1px 5px rgba(0,0,0,.35); }
.slice-range:focus-visible{ outline:2px solid var(--bar-accent); }
:root:not([data-theme="dark"]) .slice-range::-webkit-slider-runnable-track{ background:var(--bar-track); }
:root:not([data-theme="dark"]) .slice-range::-moz-range-track{ background:var(--bar-track); }
:root:not([data-theme="dark"]) .slice-range:focus-visible{ outline-color:var(--bar-accent); }