/* The four views the atlases share: the 3D Region Atlas, the Network Atlas
   and the Hallucinations study lay out their scans the same way, so the
   look of the scans in either theme and, since v12.33, the views' bar at
   the top of the stage and the views it shows live here, after viewer.css,
   for all three pages (Tractography and Microanatomy take the scans' look
   alone). Until v12.33 each view had a bar of its own, its name, its tools
   and a button that opened it over the grid, and the four were fitted to
   the screen by assets/view-fit.js; the views' bar took the place of all of
   it, at the owner's word. */

/* ── the scans in the light theme ──────────────────────────────────────
   Light, the viewports are white rather than black (the viewers clear to
   white, assets/scan-look.js), and the cutting controls along the 3D box's
   edges, drawn for a black stage, take ink where they took light. */
/* NiiVue paints its canvas's parent black, inline, as it attaches; dark, the
   stage is the page's own black, the paper's #111111, as the scan's ground is
   since v12.1 (scan-look.js) */
:root:not([data-theme="dark"]) .mri-stage{ background:#FFFFFF !important; }
:root[data-theme="dark"] .mri-stage{ background:#111111 !important; }
:root:not([data-theme="dark"]) .slice-edge .ax{ color:#5A5A5A; text-shadow:0 0 4px #FFFFFF, 0 0 4px #FFFFFF; }
:root:not([data-theme="dark"]) .slice-edge.cutting .ax{ color:#111111; }
:root:not([data-theme="dark"]) .slice-range::-webkit-slider-runnable-track{ background:rgba(0,0,0,.28); }
:root:not([data-theme="dark"]) .slice-range::-moz-range-track{ background:rgba(0,0,0,.28); }
:root:not([data-theme="dark"]) .slice-range:focus-visible{ outline-color:#111111; }

/* each view is a container, for the pages that size what floats over it by
   its width (Microanatomy's Reset view) */
.views .view{ container:view / inline-size; }

/* ── the views' bar and the views (v12.33, at the owner's word) ────────
   On the pages with four views (main.screen.quad) the views have no bars,
   names or borders: they fill the stage under one bar, an island like the
   bar along the foot (its inks in bar.css), which holds Slice at the far
   left, greyed while a flat view is shown, Regions beside it, greyed until
   a cut can take them (since v12.37, at the owner's word; shown while
   slicing alone until then), and the views to pick from, All and each one
   alone, on every screen (assets/view-bar.js). All lays the four two by
   two; one view alone fills the stage. Since v12.37, at the owner's word,
   the bar is as wide as its buttons and stands centred, as the header's
   island of tabs does, and where its buttons are wider than the screen it
   takes the width and slides sideways, as the bar along the foot does. The
   rules read .quad alone, so a box of four views anywhere takes them: the
   Brodmann Area Atlas's brain since v12.34, which adds its own for a
   phone; the phone's rules below are the three pages' screens. Since v12.40,
   at the owner's word, view-bar.js slides the bar to the header's island's
   centre, the page's, and the drawer beside the views stands over it where
   the two meet. */
.quad .drawer{ z-index:7; }   /* over the bar's 6; the pages set it position:relative */
.quad .viewbar{
  flex:none; align-self:center; max-width:100%; box-sizing:border-box;
  display:flex; align-items:center; gap:.15rem;
  margin:0 0 var(--gap, 14px); padding:.35rem .45rem;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; white-space:nowrap;
  position:relative; z-index:6;
}
.quad .viewbar::-webkit-scrollbar{ display:none; }
.quad .viewbar-slice, .quad .viewbar-views{ display:flex; gap:.15rem; flex:none; }
.quad .viewbar-slice{ padding-right:.45rem; margin-right:.3rem; border-right:1px solid var(--hair); }
.quad .viewbar .pbtn:disabled{ cursor:default; }
.quad .views .view{ border:0; }
.quad:not(.all) .views{ display:block; }
.quad:not(.all) .views .view{ display:none; height:100%; }
.quad:not(.all) .views .view.shown{ display:flex; }
/* a phone: the bar just under the line that says where the atlas is best
   experienced, in from the edges as the foot's is, its buttons drawn close
   so the seven fit a phone's width, or nearly; the four close-set */
.screen.quad.one .viewbar{ margin:8px var(--gap, 14px) 8px; max-width:calc(100% - 2 * var(--gap, 14px)); padding:.3rem .3rem; }
.screen.quad.one .viewbar .pbtn{ min-width:0; padding:.3rem .42rem .25rem; }
.screen.quad.one .viewbar-slice{ padding-right:.3rem; margin-right:.2rem; }
.screen.quad.one.all .views{ gap:6px; }
/* held sideways the bar stays at the top, its buttons a little lower, and
   in the app it keeps clear of the shell's back button at the top left,
   the same room at the right so it stays centred */
.screen.quad.one.land .viewbar{ margin:6px var(--gap, 14px) 6px; }
.screen.quad.one.land .viewbar .pbtn{ min-height:40px; padding-top:.2rem; padding-bottom:.15rem; gap:.18rem; }
:root[data-shell]:not([data-shell-pad]) .screen.quad.one.land .viewbar{ margin-left:60px; margin-right:60px; max-width:calc(100% - 120px); }
/* a squat phone (the script's .short) shows one view at a time: no All */
.screen.quad.one.short .viewbar [data-view="all"]{ display:none; }