/* O1d: the Size and rooms section (src/ui/size.js). In the v3 style: cream cards, aubergine when chosen.
   (J2, the join) every rule scoped to the outside builder, :where(#app[data-side="outside"]) as outside.css (no added
   weight: every rule wins and loses as before); scoped by "_working files - ignore/j2-scope-css.mjs". */
:where(#app[data-side="outside"]) .sz .sec-title .sz-auto { margin-left: auto; }
:where(#app[data-side="outside"]) .sz-sub { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--slate); }
:where(#app[data-side="outside"]) .sz-starts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
:where(#app[data-side="outside"]) .sz-start {
  display: block; text-align: left; padding: 8px 10px 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  cursor: pointer; font: inherit; color: var(--ink); min-height: 44px;
}
:where(#app[data-side="outside"]) .sz-start:hover { border-color: var(--lilac); }
:where(#app[data-side="outside"]) .sz-start:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="outside"]) .sz-start[aria-checked="true"] { border-color: var(--aubergine); box-shadow: 0 0 0 1px var(--aubergine); background: var(--lilac-wash); }
:where(#app[data-side="outside"]) .sz-start-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; }
:where(#app[data-side="outside"]) .sz-start-sub { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--slate); }
:where(#app[data-side="outside"]) .sz-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
:where(#app[data-side="outside"]) .sz-label { font-size: 14px; font-weight: 600; color: var(--ink); }
:where(#app[data-side="outside"]) .sz-stepper { display: inline-flex; align-items: center; gap: 6px; }
:where(#app[data-side="outside"]) .sz-step {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; cursor: pointer; color: var(--aubergine); padding: 0;
}
:where(#app[data-side="outside"]) .sz-step:hover { border-color: var(--lilac); }
:where(#app[data-side="outside"]) .sz-step:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
:where(#app[data-side="outside"]) .sz-step svg { width: 14px; height: 14px; }
:where(#app[data-side="outside"]) .sz-val { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; min-width: 76px; }
:where(#app[data-side="outside"]) .sz-num { width: 56px; text-align: center; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); border: 0; background: none; padding: 4px 0; }
:where(#app[data-side="outside"]) input.sz-num { border-bottom: 1px solid var(--line); -moz-appearance: textfield; appearance: textfield; }
:where(#app[data-side="outside"]) input.sz-num::-webkit-outer-spin-button, :where(#app[data-side="outside"]) input.sz-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(#app[data-side="outside"]) input.sz-num:focus { outline: 2px solid var(--orchid); outline-offset: 2px; border-radius: 4px; }
:where(#app[data-side="outside"]) .sz-out { display: inline-block; }
:where(#app[data-side="outside"]) .sz-unit { font-size: 12px; color: var(--slate); }
:where(#app[data-side="outside"]) .sz-row-st { align-items: center; }
:where(#app[data-side="outside"]) .sz-row-st .sz-storeys { flex: 0 0 auto; width: 214px; margin: 0; }
:where(#app[data-side="outside"]) .sz-shape { margin: 2px 0 8px; }
:where(#app[data-side="outside"]) .sz-summary { margin: 0 0 6px; padding: 9px 11px; border-radius: 9px; background: var(--cream-dim); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); }
:where(#app[data-side="outside"]) .sz-summary:empty { display: none; }
:where(#app[data-side="outside"]) .sz.is-busy .sz-summary { opacity: 0.55; }
:where(#app[data-side="outside"]) .sz-notes { margin: 0 0 12px; }
@media (max-width: 820px) {
  :where(#app[data-side="outside"]) .sz-starts { grid-template-columns: 1fr 1fr; }
  :where(#app[data-side="outside"]) .sz-row-st .sz-storeys { width: 190px; }
}

/* O1d: the views in the top bar (Front, Left corner, Right corner, High, Low, Overview): one row of plain buttons */
:where(#app[data-side="outside"]) .views { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: #ECE8E2; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
:where(#app[data-side="outside"]) .views button {
  border: 0; background: none; height: 36px; padding: 0 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--slate); transition: color 200ms, background-color 200ms;
}
:where(#app[data-side="outside"]) .views button:hover { color: var(--aubergine); }
:where(#app[data-side="outside"]) .views button[aria-checked="true"] { background: #fff; color: var(--aubergine); box-shadow: 0 1px 2px rgba(45, 27, 78, 0.12), 0 0 0 1px var(--line); }
:where(#app[data-side="outside"]) .views button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 1px; }
/* (O5, agent J; browser runs 1 and 2: with Realistic picture and Compare in the top bar and undo and redo beside the way
   in, the view tabs ran under both sides at 1100 to 1180 and 1440 to 1599 px) narrower tabs up to 1599 px, "Left" and
   "Right" (no "corner") up to 1499 px, narrower still up to 1199 px (the time and level switches too: outside.css).
   (O6, agent R: measured every few px with the longest way in, "Fit out a space": "corner" from 1530 px, the narrowest
   tabs up to 1299 px; at 1500 to 1529 and 1200 to 1299 the tabs ran under the sides)
   (O7, agent W; O6 review Fix first 3: the overlap ends at about 1240 with "New build" and 1270 with "Fit out a space",
   so the narrowest tabs stop at 1279 px: 1280, the common laptop width, gets the full size back) */
/* (O6, agent R) 821 to 1079 px the view tabs do not fit between the sides at all (run 2: 238 px short at 821, 1 px spare
   at 1060; before O6 too, under both sides): as on a phone they scroll in their own row, a fade at the right edge (and
   the left once moved along), never under the sides */
@media (min-width: 821px) and (max-width: 1079px) {
  :where(#app[data-side="outside"]) .out-topbar .tb-mid { justify-content: flex-start; 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); }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid::-webkit-scrollbar { display: none; }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid .views { flex: none; margin-right: 20px; }
  :where(#app[data-side="outside"]) .out-topbar .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); }
}
@media (max-width: 1599px) { :where(#app[data-side="outside"]) .views button { padding: 0 9px; font-size: 12.5px; } }
@media (max-width: 1529px) and (min-width: 821px) { :where(#app[data-side="outside"]) .views .vw-long { display: none; } }
@media (max-width: 1279px) and (min-width: 821px) { :where(#app[data-side="outside"]) .views button { padding: 0 7px; font-size: 12px; } }
/* (O7, agent W; run 1 sweep: at 1280 the full size left "Fit out a space" 5 px and "Equip or refresh" 1 px each side,
   "New build" 20) the longer ways in keep the narrower tabs and switches up to 1299 px (start.js marks the chip) */
@media (max-width: 1299px) and (min-width: 1280px) {
  :where(#app[data-side="outside"]) .out-topbar:has(.way-chip.way-long) .views button { padding: 0 7px; font-size: 12px; }
  :where(#app[data-side="outside"]) .out-topbar:has(.way-chip.way-long) .tb-right .seg.three button { padding: 0 9px; }
}
@media (max-width: 820px) {
  :where(#app[data-side="outside"]) .out-topbar .tb-mid { min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid::-webkit-scrollbar { display: none; }
  :where(#app[data-side="outside"]) .out-topbar .brand-text { display: none; }
  :where(#app[data-side="outside"]) .views { flex: none; }
  :where(#app[data-side="outside"]) .views button { height: 44px; padding: 0 10px; font-size: 13px; }
  :where(#app[data-side="outside"]) .views .vw-long { display: none; }
  /* (O2 polish, O1d review: the view pills stood 50 px tall beside the 44 px way switch) one 44 px row: the pills are
     38 px inside the 3 px rim, their touch area still the full 44 px; a soft fade at the right edge says more views follow */
  :where(#app[data-side="outside"]) .views button { position: relative; height: 38px; }
  :where(#app[data-side="outside"]) .views button::after { content: ''; position: absolute; inset: -3px 0; }
  /* (phone fade, 14 Oct 2026; design-critic: "390: the tabs row ends in a hard cut, no fade") the fade was there but 24 px
     of the beige track into the near-same cream bar softened one letter: each edge now fades over the room still to move
     that way, at most 40 px at the right and 24 at the left (src/ui/size.js bindViews sets --fade-l and --fade-r as the
     row moves), so the last tab in sight fades out enough to read as more of the row, the left edge once moved along (O6),
     neither edge at its end or when all of it fits, and no jump on reaching an end; the last item ends at the row's edge
     (design-critic: the 20 px it kept clear of the old fade was dead space; 40 px at the left dimmed the chosen Day) */
  :where(#app[data-side="outside"]) .out-topbar .tb-mid { padding: 0 2px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 40px)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 40px)), transparent); }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid > :last-child { margin-right: 0; }
  /* (O6, agent R; Jamal's pick 9 Oct "Move Day/Dusk/Night up") Day, Dusk, Night follow Overview in the same scrolling
     row (main.js moves them), the same 44 px pill as the views: 38 px buttons inside the 3 px rim, the touch area the
     full 44 px; their own group, so the time keeps its meaning beside the views */
  :where(#app[data-side="outside"]) .out-topbar .tb-mid { gap: 8px; }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid #timeSeg { flex: none; padding: 3px; }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid #timeSeg button { position: relative; height: 38px; min-width: 0; padding: 0 11px; font-size: 13px; }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid #timeSeg button::after { content: ''; position: absolute; inset: -3px 0; }
  :where(#app[data-side="outside"]) .out-topbar .tb-mid #timeSeg .seg-ind { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); }
}