/* T4c (helper H60, 2026-10-15; DRAFT): the quote page in the owner's round-3 layout (customer/quote_t4c.html, rendered only when
   t4c_viewer.QUOTE_VIEWER_ENABLED is True). Loaded after site-pages.css, by that template only. Ported from the round-3 mockup
   (C:\qfab-t3\wt-t4b-r3-quote\r3\quote\quote-screen.css, H57) onto the app's tokens (webapp/static/tokens.css): tokens only, no colour
   literal. Breakpoints: 1100px (the 3D room in the page background + the HUD; below it "See your part" opens the pop-up), 861px (two
   holograms side by side; below it they stack, the QUOTE first so the total and its button sit at the top), 480px.
   The pop-up and the room's static grid are CSS; the WebGL canvas is placed here (three.js's style attribute is removed by the script). */

/* ------------------------------------------------------------------ the screen */
.t4c { padding-block: var(--s-6) var(--s-8); }
.t4c-title { margin: 0 0 var(--s-5); }
.t4c-sub { margin-top: var(--s-2); color: var(--c-on-glass-2); overflow-wrap: anywhere; }
.t4c-screen { display: grid; gap: var(--s-5); align-items: start;
  grid-template-columns: minmax(0, 40rem) minmax(18rem, 27rem); grid-template-areas: "parts right"; justify-content: center; }
.t4c-parts { grid-area: parts; min-width: 0; }
.t4c-right { grid-area: right; display: grid; gap: var(--s-5); min-width: 0; }
.t4c-gap { display: none; }
.t4c-card { padding: var(--s-5); min-width: 0; }
@media (max-width: 860px) {
  .t4c-screen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "right" "parts"; }
}
@media (max-width: 480px) { .t4c-card { padding: var(--s-4); } .t4c { padding-top: var(--s-4); } }
.t4c-back { margin-top: var(--s-6); }

/* ------------------------------------------------------------------ type and small parts on the glass */
.t4c-label { display: block; margin: 0 0 var(--s-2); padding: 0; font-family: var(--font-mono); font-size: var(--fs-label);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-orange-tint); }
.t4 .t4c-label--h { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label);
  line-height: var(--lh-snug); color: var(--c-orange-tint); }
.t4c-label .t4c-why, .t4c-label--h .t4c-why { text-transform: none; letter-spacing: 0; color: var(--c-on-glass-muted); font-family: var(--font-sans); }
.t4c-why { color: var(--c-on-glass-muted); }
.t4c-helper { font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4c-muted { color: var(--c-on-glass-muted); }
.t4c-fee { display: block; font-size: var(--fs-label); color: var(--c-on-glass-muted); }
.t4c-unavail { font-size: var(--fs-label); color: var(--c-on-glass-muted); }
.t4c-prewrap { white-space: pre-line; }
.t4 .t4c-form-h { margin: 0 0 var(--s-2); font-size: var(--fs-h3); }
.t4c-parts .t4c-helper { margin-bottom: var(--s-4); }

/* the part row: where the part tabs go once multipart reaches customers */
.t4c-part-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3); border-bottom: var(--bw-1) solid var(--c-holo-edge-soft); }
.t4 .t4c-part-title { display: flex; gap: var(--s-2); align-items: baseline; min-width: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.t4c-idx { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--c-orange-tint); flex: none; }
.t4c-part-name { min-width: 0; }
.t4c-see .t4c-see-mark { width: 16px; height: 16px; color: var(--c-orange-tint); flex: none; }
html:not(.js) .t4c-see { display: none; }

/* ------------------------------------------------------------------ form controls (round 1/3 controls on the glass) */
.t4c-form { display: grid; gap: 0; }
.t4c-field { margin: 0 0 var(--s-5); border: 0; padding: 0; min-width: 0; }
.t4c-select, .t4c-num, .t4c-text { min-height: var(--tap-min); padding: var(--s-2) var(--s-3); background: var(--c-glass-disabled); color: var(--c-on-glass);
  border: var(--bw-1) solid var(--c-on-glass-muted); border-radius: var(--r-1); font: var(--fw-medium) var(--fs-small)/1.3 var(--font-mono); }
.t4c-select { width: 100%; max-width: 22rem; cursor: pointer; }
.t4c-select option { background: var(--c-graphite-deep); color: var(--c-on-glass); }
.t4c-num { width: 6.5rem; }
.t4c-num--sm { width: 4.5rem; min-height: var(--tap-min); }
.t4c-text { width: 100%; }
.t4c-text--zip { max-width: 10rem; }
.t4c-select:hover, .t4c-num:hover, .t4c-text:hover { border-color: var(--c-holo-edge-strong); }
.t4c-select:focus-visible, .t4c-num:focus-visible, .t4c-text:focus-visible { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: var(--focus-offset); }

.t4c-current { min-height: 1.3em; margin: 0 0 var(--s-1); color: var(--c-orange-on-glass); font: var(--fw-medium) var(--fs-small)/1.3 var(--font-mono); }
.t4c-ends { display: flex; justify-content: space-between; max-width: 32rem; color: var(--c-on-glass-muted); font: var(--fw-regular) var(--fs-label)/1.2 var(--font-mono); }
.t4c-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: 32rem; height: var(--tap-min); margin: 0; background: transparent; cursor: pointer; --fill: 50%; }
.t4c-range[data-v="0"] { --fill: 0%; } .t4c-range[data-v="1"] { --fill: 25%; } .t4c-range[data-v="2"] { --fill: 50%; }
.t4c-range[data-v="3"] { --fill: 75%; } .t4c-range[data-v="4"] { --fill: 100%; }
.t4c-range::-webkit-slider-runnable-track { height: var(--bw-2); border-radius: 1px;
  background: linear-gradient(90deg, var(--c-orange) var(--fill), var(--c-on-glass-muted) var(--fill)); }
.t4c-range::-moz-range-track { height: var(--bw-2); background: var(--c-on-glass-muted); }
.t4c-range::-moz-range-progress { height: var(--bw-2); background: var(--c-orange); }
.t4c-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 2px; transform: rotate(45deg);
  background: var(--c-graphite-deep); border: var(--bw-2) solid var(--c-orange-tint);
  transition: transform var(--d-spring-snap) var(--ease-spring-snap); }
.t4c-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 2px; transform: rotate(45deg); background: var(--c-graphite-deep); border: var(--bw-2) solid var(--c-orange-tint); }
.t4c-range:hover::-webkit-slider-thumb { transform: rotate(45deg) scale(1.15); box-shadow: var(--glow-1); }
.t4c-range:focus-visible { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: var(--focus-offset); }

.t4c-opt { display: flex; gap: var(--s-3); align-items: flex-start; min-height: var(--tap-min); padding: var(--s-2) 0; color: var(--c-on-glass-2); font-size: var(--fs-small); cursor: pointer; }
.t4c-opt > input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-orange); cursor: pointer; }
.t4c-opt.is-dim { opacity: .5; }
.t4c-qty-inline { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-label); color: var(--c-on-glass-muted); }

.t4c-swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.t4c-swatch { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: var(--bw-1) solid var(--c-holo-rule); border-radius: var(--r-1); background: var(--c-glass-disabled); color: var(--c-on-glass);
  font: var(--fw-medium) var(--fs-small)/1.2 var(--font-mono); cursor: pointer; }
.t4c-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.t4c-chip { width: 22px; height: 22px; flex: none; border-radius: 2px; box-shadow: 0 0 0 var(--bw-1) var(--c-on-glass-muted); }
.t4c-swatch:hover { border-color: var(--c-holo-edge-strong); }
.t4c-swatch:has(input:checked) { border-color: var(--c-orange); box-shadow: inset 0 0 0 1px var(--c-orange); }
.t4c-swatch:has(input:focus-visible) { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: var(--focus-offset); }

/* the delivery rows: quote-page.js sets style.display on them (CSSOM; not a style attribute in the markup). Without script the CSS
   below gives today's first state: the ZIP row only with local delivery chosen, the re-slicing note hidden until the form submits. */
.t4c-form:not(:has(#ful-delivery:checked)) #zip-row { display: none; }
.t4c-update { margin: var(--s-4) 0 0; }
.t4c-status { display: none; margin-top: var(--s-3); padding: var(--s-3); border: var(--bw-1) solid var(--c-holo-edge-soft); border-radius: var(--r-1);
  font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4c-spin { display: inline-block; margin-right: var(--s-2); }
.t4c-inline-form { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.t4c-inline-form input[type=file] { max-width: 100%; color: var(--c-on-glass-2); font-size: var(--fs-small); min-height: var(--tap-min); }

/* ------------------------------------------------------------------ the quote hologram: the TOTAL at the top, ONE button under it */
.t4 .t4c-price { margin: var(--s-1) 0 0; font: var(--fw-medium) var(--fs-display)/1 var(--font-mono); letter-spacing: -.02em; color: var(--c-on-glass);
  text-shadow: var(--glow-text); white-space: nowrap; }
.t4 .t4c-price-sub { margin: var(--s-2) 0 var(--s-4); color: var(--c-on-glass-2); font-size: var(--fs-small); }
.t4c-pay { width: 100%; }
.t4 .t4c-pay-helper { margin: var(--s-2) 0 0; }
.t4c-bd { width: 100%; margin-top: var(--s-4); border-collapse: collapse; border-top: var(--bw-1) solid var(--c-holo-edge); font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4c-bd td { padding: var(--s-2) 0; border-bottom: var(--bw-1) solid var(--c-holo-rule); vertical-align: top; }
.t4c-bd td + td { padding-left: var(--s-3); text-align: right; white-space: nowrap; font-family: var(--font-mono); color: var(--c-on-glass); font-variant-numeric: tabular-nums; }
.t4c-note { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-left: var(--bw-3) solid var(--c-orange-tint); font-size: var(--fs-small); color: var(--c-on-glass-2); }
.t4c-note--est strong { display: block; font-size: var(--fs-body); }
.t4c-note-sub { font-size: var(--fs-label); color: var(--c-on-glass-muted); margin-top: var(--s-1); }
.t4c-note-guarantee { margin-top: var(--s-2); padding-top: var(--s-2); border-top: var(--bw-1) solid var(--c-holo-rule); font-size: var(--fs-label); }
.t4c-contact { color: var(--c-on-glass); }
.t4c-drawings { margin: var(--s-3) 0; padding-left: var(--s-5); }
.t4c-drawing .t4c-helper { margin-bottom: var(--s-3); }

/* ------------------------------------------------------------------ the stats (owner Q3/Q5): small; each enlarges ON ITS OWN on hover, focus or tap */
.t4c-stats { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); }
.t4c-stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--s-1) var(--s-2);
  background-color: var(--c-glass-menu); border: var(--bw-1) solid var(--c-holo-edge-soft); border-radius: var(--r-1);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; transform-origin: 50% 100%; cursor: default;
  transition: transform var(--d-spring-snap) var(--ease-spring-snap), border-color var(--d-spring-snap) var(--ease-spring-snap), box-shadow var(--d-spring-snap) var(--ease-spring-snap); }
.t4c-stat dt { font: var(--fw-medium) 0.625rem/1.2 var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-orange-tint); }
.t4c-stat dd { margin: 0; display: flex; flex-direction: column; }
.t4c-stat .v1 { color: var(--c-on-glass); font: var(--fw-medium) 0.75rem/1.3 var(--font-mono); white-space: nowrap; }
.t4c-stat .v2 { color: var(--c-on-glass-2); font: var(--fw-regular) 0.6875rem/1.3 var(--font-mono); white-space: nowrap; }
.t4c-stat:hover, .t4c-stat:focus-visible, .t4c-stat.is-big { transform: scale(1.6); z-index: 2; border-color: var(--c-holo-edge); box-shadow: var(--glow-2); }
.t4c-stat:focus { outline: none; }
.t4c-stat:focus-visible { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: var(--focus-offset); }
.t4c-stats--pop { justify-content: flex-start; margin-top: var(--s-4); }
.t4c-stats--pop .t4c-stat { flex: 1 1 5.5rem; transform-origin: 50% 50%; }
.t4c-stats--pop .t4c-stat dt { font-size: 0.6875rem; }
.t4c-stats--pop .t4c-stat .v1 { font-size: var(--fs-label); }
.t4c-stats--pop .t4c-stat:hover, .t4c-stats--pop .t4c-stat:focus-visible, .t4c-stats--pop .t4c-stat.is-big { transform: scale(1.25); }
.t4c-box-note { margin-top: var(--s-2); font-size: var(--fs-label); color: var(--c-on-glass-muted); text-align: center; }
.t4c-viewer .t4c-box-note { text-align: left; }
/* the box note describes the 3D view: shown only while the 3D view is drawn */
.t4c-viewer:not([data-mode="webgl"]) .t4c-box-note, .t4c-gap:not(:has(.t4c-room[data-mode="webgl"])) .t4c-box-note { display: none; }
/* H73: the box note only when the picked file could not be drawn (a parse failure / over the limit); the revisit line only for the box
   shown because this browser no longer has the file (data-source="box", set by quote-t4c.js) */
.t4c-gap:not([data-source="failed"]) .t4c-box-note, .t4c-dialog:not([data-source="failed"]) .t4c-box-note { display: none; }
.t4c-revisit { display: none; margin-top: var(--s-2); font-size: var(--fs-label); color: var(--c-on-glass-2); text-align: center; }
.t4c-viewer .t4c-revisit { text-align: left; }
.t4c-gap[data-source="box"] .t4c-revisit, .t4c-dialog[data-source="box"] .t4c-revisit { display: block; }
.t4c-simplified { display: none; margin-top: var(--s-2); font-size: var(--fs-label); color: var(--c-on-glass-muted); text-align: center; }
.t4c-viewer .t4c-simplified { text-align: left; }
.t4c-gap[data-detail="simplified"] .t4c-simplified, .t4c-dialog[data-detail="simplified"] .t4c-simplified { display: block; }

/* ------------------------------------------------------------------ the pop-up (native <dialog>: the page behind is inert; Esc closes) */
.t4c-dialog { padding: 0; margin: auto; border: 0; background: transparent; color: inherit; overflow: visible;
  width: min(52rem, calc(100vw - 2 * var(--gutter))); max-width: none; max-height: calc(100vh - 2 * var(--gutter)); }
.t4c-dialog::backdrop { background: var(--c-scrim); }
.t4c-dialog .t4c-viewer { background-color: var(--c-glass-menu); background-image: none; box-shadow: var(--glow-2), var(--shadow-glass);
  max-height: calc(100vh - 2 * var(--gutter)); overflow: auto; overscroll-behavior: contain; }
@media (max-width: 560px) {
  .t4c-dialog { width: 100vw; height: 100vh; max-height: 100vh; margin: 0; }
  .t4c-dialog .t4c-viewer { min-height: 100vh; max-height: 100vh; border-radius: 0; }
}
.t4c-viewer-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.t4 .t4c-viewer-head h2 { flex: 1 1 auto; min-width: 0; font-size: var(--fs-h3); }
.t4c-v-part { display: block; color: var(--c-on-glass-2); font-size: var(--fs-small); font-weight: var(--fw-medium); font-family: var(--font-mono); overflow-wrap: anywhere; }
.t4c-stage { position: relative; aspect-ratio: 16 / 10; min-height: 14rem; overflow: hidden; touch-action: none;
  border: var(--bw-1) solid var(--c-holo-edge-soft); background-color: var(--c-void);
  background-image: linear-gradient(var(--c-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-major) 1px, transparent 1px);
  background-size: var(--grid-minor) var(--grid-minor), var(--grid-minor) var(--grid-minor); }
@media (max-width: 480px) { .t4c-stage { aspect-ratio: 1 / 1; min-height: 0; } }
.t4c-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; touch-action: none; }
.t4c-stage canvas:focus-visible, .t4c-room-stage canvas:focus-visible { outline: var(--focus-width) solid var(--c-focus-on-dark); outline-offset: calc(-1 * var(--focus-width) - 4px); }
canvas.is-grabbing { cursor: grabbing; }
.t4c-stage-msg { display: none; position: absolute; inset: 0; padding: var(--s-5); flex-direction: column; justify-content: center; color: var(--c-on-glass-2); }
.t4c-viewer[data-mode="fallback"] .t4c-stage-msg, .t4c-viewer[data-mode="nodims"] .t4c-stage-msg { display: flex; }
.t4c-state { margin: 0 0 var(--s-2); }

/* "See your part" is the narrow-screen way in; at 1100 px and wider the part is already in the page background */
@media (min-width: 1100px) { .t4c-see { display: none; } }

/* ------------------------------------------------------------------ 1100 px and wider: the room in the page BACKGROUND (owner Q3) */
@media (min-width: 1100px) {
  .t4c-screen { grid-template-columns: minmax(18rem, 27rem) minmax(12rem, 1fr) minmax(18rem, 26rem); grid-template-areas: "parts gap right"; justify-content: stretch; }
  .t4c-right { position: sticky; top: calc(var(--h-header) + var(--s-4)); }
  /* the gap and its ancestors let the pointer through to the room; the holograms, the HUD and the canvas take it back */
  body:has(.t4c-screen), .page:has(.t4c-screen), main:has(.t4c-screen), .t4c, .t4c-screen, .t4c-gap { pointer-events: none; }
  body:has(.t4c-screen) > :not(.page), .page:has(.t4c-screen) > :not(main), .t4c-title, .t4c-back, .t4c-screen > .holo, .t4c-right, .t4c-hud,
  .t4c-room-stage canvas, .t4c-room-msg { pointer-events: auto; }
  .t4c-gap { grid-area: gap; align-self: stretch; display: flex; flex-direction: column; min-width: 0; }
  /* the room: FIXED behind everything (z-index -1 in the root stacking context: under the header, the holograms and the footer) */
  .t4c-room { position: fixed; inset: 0; z-index: -1; background-color: var(--c-void); }
  .t4c-room-stage { position: absolute; inset: 0; }
  .t4c-room-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; touch-action: none; }
  /* the static grid room: the fallback without WebGL (and the room before the 3D view loads, or without script) */
  .t4c-room-static { position: absolute; inset: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 38%; }
  .t4c-room[data-mode="webgl"] .t4c-room-static { display: none; }
  .t4c-room-wall, .t4c-room-floor { position: absolute; left: -20%; right: -20%;
    background-image: linear-gradient(var(--c-grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-major) 1px, transparent 1px),
      linear-gradient(var(--c-grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--c-grid-minor) 1px, transparent 1px);
    background-size: var(--grid-major) var(--grid-major), var(--grid-major) var(--grid-major), var(--grid-minor) var(--grid-minor), var(--grid-minor) var(--grid-minor); }
  .t4c-room-wall { top: 0; height: 58%; border-bottom: var(--bw-1) solid var(--c-holo-edge); }
  .t4c-room-floor { top: 58%; height: 90%; transform-origin: 50% 0; transform: rotateX(72deg); }
  /* the state messages sit in the gap, a little above the middle of the screen */
  .t4c-room-msg { position: sticky; top: 38vh; margin: var(--s-8) auto 0; max-width: 22rem; text-align: center; }
  .t4c-msg { display: none; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-4);
    background-color: var(--c-glass-menu); border: var(--bw-1) solid var(--c-holo-edge-soft); border-radius: var(--r-1); color: var(--c-on-glass-2); }
  .t4c-gap:has(.t4c-room[data-mode="fallback"]) .t4c-msg--fallback, .t4c-gap:has(.t4c-room[data-mode="nodims"]) .t4c-msg--nodims { display: flex; }
  /* the HUD: a small strip of stats along the bottom of the page, in the gap */
  .t4c-hud { position: sticky; bottom: var(--s-4); margin-top: auto; padding-top: var(--s-8); }
}

/* reduced motion: the stats still enlarge (a state, not an animation), with no transition (the tokens zero the durations) */

/* PM 20261101-0030Z (the owner): whenever the real 3D model can't be shown (no WebGL, a revisit, a load or parse failure, STEP) the part is
   a cube of "?" and a bubble reads t4c_viewer's no3d_bubble. Without WebGL the cube is this CSS one (inside the fallback message, above its
   lines); with WebGL but no model, quote-room3d.js draws the cube and the --gl bubble sits over it. The real 3D path shows none of this.
   No style attribute anywhere (the strict CSP): placement is in this sheet only. */
.t4c-no3d { display: none; flex-direction: column; align-items: center; gap: var(--s-3); margin: 0 auto var(--s-4); }
.t4c-no3d-bubble { position: relative; display: inline-block; margin: 0; padding: 0.4em 0.95em; border-radius: 999px;
  background: var(--c-orange-tint); color: var(--c-void); font-weight: 700; font-size: 0.95rem; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 0.35); pointer-events: none; }
.t4c-no3d-bubble::after { content: ""; position: absolute; left: 50%; bottom: -0.4em; width: 0.8em; height: 0.8em; background: inherit;
  transform: translateX(-50%) rotate(45deg); z-index: -1; }
.t4c-qcube-wrap { --q: 5.5rem; width: var(--q); height: var(--q); perspective: 30rem; }
.t4c-qcube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(30deg);
  animation: t4c-qspin 40s linear infinite; }
.t4c-qcube > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--q) * 0.55);
  font-weight: 800; color: var(--c-orange-tint); background: var(--c-graphite-deep); border: 2px solid var(--c-orange-tint);
  backface-visibility: hidden; }
.t4c-qcube > span:nth-child(1) { transform: translateZ(calc(var(--q) / 2)); }
.t4c-qcube > span:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--q) / 2)); }
.t4c-qcube > span:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--q) / 2)); }
.t4c-qcube > span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--q) / 2)); }
.t4c-qcube > span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--q) / 2)); }
.t4c-qcube > span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--q) / 2)); }
@keyframes t4c-qspin { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .t4c-qcube { animation: none; } }
@media (max-width: 480px) { .t4c-qcube-wrap { --q: 4rem; } .t4c-no3d-bubble { font-size: 0.85rem; } }
/* without WebGL: inside the fallback messages (the pop-up's stage message; the wide room's message) */
.t4c-stage-msg .t4c-no3d { display: flex; }
.t4c-gap:has(.t4c-room[data-mode="fallback"]) .t4c-room-msg .t4c-no3d, .t4c-gap:has(.t4c-room[data-mode="nodims"]) .t4c-room-msg .t4c-no3d { display: flex; }
/* with WebGL but no real model: the bubble over the drawn cube */
.t4c-no3d-bubble--gl { display: none; }
.t4c-gap:not([data-source="model"]):not([data-source="pending"]):has(.t4c-room[data-mode="webgl"]) .t4c-room-msg .t4c-no3d-bubble--gl { display: inline-block; }
.t4c-gap:has(.t4c-room[data-mode="webgl"]) .t4c-room-msg { pointer-events: none; }
.t4c-stage > .t4c-no3d-bubble--gl { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); z-index: 1; }
.t4c-dialog:not([data-source="model"]):not([data-source="pending"]) .t4c-viewer[data-mode="webgl"] .t4c-stage > .t4c-no3d-bubble--gl { display: inline-block; }