/* The joined clinic builder's own rules (agent J3, 13 Oct 2026). Only the shell's additions, every rule under #app; none
   changes either side's look. Loaded after app.css and the outside's three stylesheets.
   The Outside / Inside switch: the level switch's look (app.css .seg), two buttons; hidden until an inside side is
   registered (app.css [hidden]); it moves into the top bar of the side shown (page.js). */
#app .shell-side { flex: none; }
#app .shell-side[data-on="0"] .seg-ind { transform: none; }
#app .shell-side[data-on="1"] .seg-ind { transform: translateX(100%); }
/* With the switch shown (an inside is mounted): the brand's words give it their room (the switch says which side), and
   its buttons are as narrow as their words. Never on the page while no inside is mounted. */
#app .tb-left:has(> .shell-side:not([hidden])) .brand-text { display: none; }
#app .shell-side button { min-width: 0; padding: 0 14px; }
/* (J4, 14 Oct 2026) the inside still preparing: its button greyed (the same width, so nothing in the bar moves when it
   turns on); a press is heard (the inside goes in once ready, "Preparing the inside" over the view) */
#app .shell-side button[aria-disabled="true"] { color: var(--slate); opacity: 0.5; cursor: progress; }
#app .shell-side button[aria-disabled="true"]:active { transform: none; }
/* "Preparing the inside" over the outside's view while a way in waits for it: the outside's note look, at the top of the
   view (the outside's own notes keep the foot), with the inside's own loading bar */
#app .shell-wait {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 12px; background: var(--aubergine); color: var(--cream);
  font-weight: 600; font-size: 13.5px; line-height: 1.35; white-space: nowrap; box-shadow: 0 10px 30px rgba(26, 15, 46, 0.25); pointer-events: none;
}
#app .shell-wait[hidden] { display: none; }
#app .shell-wait .shell-wait-bar { flex: none; width: 64px; height: 3px; border-radius: 3px; background: rgba(248, 245, 240, 0.25); overflow: hidden; }
#app .shell-wait .shell-wait-bar i { display: block; height: 100%; width: 6%; border-radius: 3px; background: var(--cream); transition: width 300ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: reduce) { #app .shell-wait .shell-wait-bar i { transition: none; } }

/* (join fixes, 13 Oct 2026) The switch in the outside's top bar at every width. It stays first in the bar (where the brand
   is), never scrolled away; everything else gives way around it, only while it shows (the outside's own page and Jamal's
   page without an inside never match these rules). J3's run 3: at 1280 the redo button lay over the Front tab, at 1024
   the tabs were covered. Checked at 1440 to 360 px with the three ways in (_working files - ignore/topbar-lab.html). */
/* 1440 px and wider: the switch 10 px after the DocHelp mark. It takes about 50 px more than the brand's words it
   replaces, so each width where the outside gives a button its words back (size.css, outside.css: "corner" from 1530,
   the wider tabs from 1600, Compare's word from 1680, Realistic picture's from 1800) comes 60 px later; 1440 to 1529 px
   has the narrowest tabs and switch buttons (the sweep with "Fit out a space": the tabs touched the redo button and Day
   at 1440, 1530, 1600, 1680 and 1800 px) */
@media (min-width: 1440px) { #app .tb-left:has(> .shell-side:not([hidden])) .brand + .shell-side { margin-left: 10px; } }
/* (top bar small fixes, 14 Oct 2026; design-critic: New build 36 px, the views 42, the switch 44) one height, 44 px, for
   the way in, the views and the switch from 821 px (phones have it already) */
@media (min-width: 821px) {
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip { height: 44px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .views button { height: 38px; }
  /* (design-critic, run 3) undo and redo keep their 36 px look; the touch area the full 44 px, as the switch on phones */
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-history .icon-btn { position: relative; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-history .icon-btn::after { content: ''; position: absolute; inset: -4px 0; }
}
@media (max-width: 1529px) and (min-width: 1440px) {
  #app .out-topbar:has(.shell-side:not([hidden])) .shell-side button { padding: 0 10px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .views button { padding: 0 7px; font-size: 12px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-history { gap: 2px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-history .icon-btn { width: 36px; height: 36px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-history .icon-btn svg { width: 17px; height: 17px; }
}
@media (max-width: 1589px) and (min-width: 821px) { #app .out-topbar:has(.shell-side:not([hidden])) .views .vw-long { display: none; } }
@media (max-width: 1659px) and (min-width: 1530px) { #app .out-topbar:has(.shell-side:not([hidden])) .views button { padding: 0 9px; font-size: 12.5px; } }
@media (max-width: 1739px) and (min-width: 821px) {
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-right #compareBtn span { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-right #compareBtn { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 1859px) and (min-width: 821px) {
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-right #photoBtn span { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-right #photoBtn { width: 44px; padding: 0; justify-content: center; }
}
/* 821 to 1439 px: the switch takes the brand mark's place (the outside's own page does the same with its way in below
   1230 px; the mark stays on the view's corner); the way in is a round button (its name spoken and shown on hover, as
   below 1230 px); the narrowest view tabs and time and level buttons (as at 1100 to 1279 px). (top bar small fixes,
   design-critic: the house mark 10 px from the switch read as a third "go inside") 12 px from the switch, and the chip's
   own "change" arrow instead of the house */
@media (max-width: 1439px) and (min-width: 821px) {
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-left .brand { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .shell-side button { padding: 0 11px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-way { margin-left: 12px; padding-left: 0; border-left: 0; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-history { margin-left: 12px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-label,
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-mark { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-ico { display: inline-flex; color: var(--aubergine); }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-ico svg { width: 20px; height: 20px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .views button { padding: 0 7px; font-size: 12px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-right .seg.three button { padding: 0 9px; }
}
/* 821 to 1259 px: the view tabs do not fit between the sides: Day, Dusk, Night join them (src/main.js timeInRow moves
   them, as the outside does on phones: Jamal's pick 9 Oct) and the row scrolls on its own, a fade at the edge (the
   outside's own page from 1079 px down, size.css) */
@media (max-width: 1259px) and (min-width: 821px) {
  /* (top bar small fixes) 12 px from undo / redo to the first tab, 10 px from the fade to the level switch (were 18 and
     16 + the fade): the tabs row 12 px wider */
  #app .out-topbar:has(.shell-side:not([hidden])) { column-gap: 10px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid { justify-content: flex-start; min-width: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid::-webkit-scrollbar { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid .views { flex: none; margin-right: 0; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid #timeSeg { flex: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid #timeSeg button { min-width: 0; padding: 0 10px; font-size: 12.5px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid > :last-child { margin-right: 20px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-mid.is-along { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
}
/* phones and small tablets: the switch first in the top row, one 44 px pill like the views beside it (38 px buttons inside
   a 3 px rim, the touch area the full 44 px); the way in is the round button 12 px after it, its "change" arrow (as above) */
@media (max-width: 820px) {
  #app .out-topbar:has(.shell-side:not([hidden])) .shell-side { padding: 3px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .shell-side button { position: relative; height: 38px; padding: 0 11px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .shell-side button::after { content: ''; position: absolute; inset: -3px 0; }
  #app .out-topbar:has(.shell-side:not([hidden])) .shell-side .seg-ind { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); }
  #app .out-topbar:has(.shell-side:not([hidden])) .tb-way { margin-left: 12px; }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-label,
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-mark { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-ico { display: inline-flex; color: var(--aubergine); }
  #app .out-topbar:has(.shell-side:not([hidden])) .way-chip-ico svg { width: 20px; height: 20px; }
}
/* phones under 600 px: the way in sits in the sheet's head after undo and redo, with its words (src/main.js wayInSheet
   moves it; the start screen's own phone look, css/start.css), Compare still at the right */
@media (max-width: 599px) {
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick #tbWay { grid-column: 2; grid-row: 1; justify-self: start; min-width: 0; margin: 0; padding: 0; border: 0; }
}
/* under 480 px (design-critic, run 3: the round button there still showed the house, the icon taken off it above, and the
   same house as the Clinic tab): Compare is its 44 px icon, as on desktops with the switch, and the way in keeps its words
   and arrow (Compare had run into them: "Equip or refresh" at 430, "New build" at 360) */
@media (max-width: 479px) {
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick #compareBtn span { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick #compareBtn { width: 44px; padding: 0; justify-content: center; }
}
/* under 330 px "Equip or refresh" still comes within 10 px of Compare: the round button with the arrow (as above) */
@media (max-width: 329px) {
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick .way-chip { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick .way-chip-label, #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick .way-chip-mark { display: none; }
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick .way-chip-ico { display: inline-flex; color: var(--aubergine); }
  #app .out-topbar:has(.shell-side:not([hidden])) ~ .out-panel .ph-quick .way-chip-ico svg { width: 20px; height: 20px; }
}