/* =============================================================================
   Quasar Glass Control (quasar-glass-control.html)
   -----------------------------------------------------------------------------
   The page itself is the Safiery product-page layout: store.css styles its .pdp,
   .pdp-rail and .pdp-story markup, and quasar-bundle-page.css the shared Glass
   configurator. This file only adds what Control has of its own: the SVG film
   and diagram (.qgcf-*), and the "How it connects" section around them.
   Line language shared with the other Glass bundle films (quasar-bundle-page.css):
   solid orange --qb-power for electrical power, dotted cyan --qb-data for data.
   ========================================================================== */

/* ---- the film, in the standard .pdp-journey player ------------------------- */
.qgc-page .pdp-journey-stage > svg.qgcf,
.qgc-diagram > svg.qgcf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qgc-page .pdp-journey-glass-control .pdp-journey-poster img { width: min(88%, 420px); height: auto; margin: 0;
  border-radius: 12px; background: #fff; }

/* ---- SVG parts ------------------------------------------------------------------ */
.qgcf text { font-family: var(--body); }
.qgcf-bay { fill: rgba(16, 26, 44, .55); stroke: rgba(126, 160, 205, .22); stroke-width: 1.5; }
.qgcf-line { fill: none; stroke: rgba(148, 176, 214, .5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qgcf-shell { stroke: rgba(148, 176, 214, .62); stroke-width: 2.5; }
.qgcf-floor { stroke: rgba(148, 176, 214, .34); }
.qgcf-faint { stroke: rgba(148, 176, 214, .24); }
.qgcf-pipe { stroke: #52657f; stroke-width: 3; }
.qgcf-drip { fill: #7dd6fc; }
.qgcf-fixture { fill: #c8d3e0; }
.qgcf-plate { fill: #182438; stroke: #6f87a6; stroke-width: 2; }
.qgcf-socket { fill: #0d1726; stroke: #8ea3bf; stroke-width: 2; }
.qgcf-feed { stroke-width: 3; }
.qgcf-tag { font-family: var(--mono); fill: var(--qb-power, #f5a142); letter-spacing: .04em; }
.qgcf-note { font-family: var(--mono); letter-spacing: .04em; }
.qgcf-note.is-data { fill: var(--qb-data, #22d3ee); }
.qgcf-chip { fill: rgba(245, 161, 66, .12); stroke: rgba(245, 161, 66, .55); stroke-width: 1.5; }
.qgcf-chip.is-free { fill: transparent; stroke: rgba(148, 176, 214, .3); }
.qgcf-chip-text { font-family: var(--mono); fill: #f7c98f; letter-spacing: .04em; }
.qgcf-engrave { font-family: var(--mono); font-weight: 600; fill: #173a8c; }
.qgcf-wordmark { font-family: var(--mono); font-weight: 600; fill: #3a3630; }
.qgcf-battery { fill: #152238; stroke: #6f87a6; stroke-width: 2; }
.qgcf-battery-nub { fill: #6f87a6; }
.qgcf-battery-text { font-family: var(--mono); fill: #cfe0f5; }
.qgcf-strip { fill: #0c1726; stroke: rgba(148, 176, 214, .4); stroke-width: 1.5; }
.qgcf-callout { fill: rgba(148, 176, 214, .08); }
.qgcf-terminal { fill: #1b2940; stroke: #6f87a6; stroke-width: 1.5; }
.qgcf-terminal.is-on { fill: var(--qb-power, #f5a142); stroke: var(--qb-power-hi, #ffe0b0); }
.qgcf-terminal-num { font-family: var(--mono); fill: var(--text-mut); }
.qgcf-card { fill: #09101d; stroke: rgba(126, 160, 205, .35); stroke-width: 1.5; }
.qgcf-map-name { fill: var(--text); }
.qgcf-map-name.is-free { fill: var(--text-mut); }
.qgcf-map-state { font-family: var(--mono); fill: var(--text-mut); }
.qgcf-map-state.is-on { fill: var(--text); font-weight: 600; }
.qgcf-caption, .qgcf-final-title { font-family: var(--display); font-weight: 700; fill: var(--text); letter-spacing: -.01em; }
.qgcf-ui-bar { fill: #c9d6ea; }
.qgcf-ui-name { fill: #eef4fb; font-weight: 600; }
.qgcf-ui-state { fill: #a9bbd3; }
.qgcf-ui-state.is-on { fill: #ffffff; font-weight: 600; }
.qgcf-ui-value { fill: #ffffff; font-family: var(--display); font-weight: 700; }
.qgcf-cta { cursor: pointer; }
.qgcf-cta-bg { fill: var(--brand); }
.qgcf-cta-text { fill: #ffffff; font-weight: 700; }
.qgcf-label { fill: var(--text-dim); }
.qgcf-label-strong { font-family: var(--display); font-weight: 700; fill: var(--text); }
.qgcf-mono { font-family: var(--mono); fill: var(--text-mut); letter-spacing: .08em; }
.qgcf-dim-ring { fill: none; stroke: #ffd08a; stroke-width: 1.6; }
.qgcf-dim-fill { fill: #ffd08a; }

/* ---- How it connects: the frozen, annotated drawing beside its explanation ---- */
.qgc-page .qgc-diagram-media { aspect-ratio: auto; }
.qgc-diagram { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.qgc-diagram noscript img { width: 100%; height: 100%; object-fit: contain; background: var(--tile); }
.qgc-key { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--text-dim); font-size: 14.5px; line-height: 1.5; }
.qgc-key li { display: flex; align-items: center; gap: 12px; }
.qgc-key b { color: var(--text); font-weight: 600; }
.qgc-key-power, .qgc-key-data { flex: none; width: 34px; border-radius: 2px; }
.qgc-key-power { height: 4px; background: var(--qb-power, #f5a142); }
.qgc-key-data { height: 4px; background: radial-gradient(circle, var(--qb-data, #22d3ee) 1.5px, transparent 1.8px) 0 50% / 9px 4px repeat-x; }

/* ---- Grow beyond switching: a product without its own photo gets an icon tile ---- */
.qgc-page .pdp-complete-media .qgc-grow-glyph { display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--surface-soft); color: var(--brand-ink); }
.qgc-grow-glyph svg { width: 28px; height: 28px; }

/* Phones: the film and the diagram recompose to a portrait drawing (4:5), so wires
   and labels keep their size instead of shrinking into a landscape box. */
@media (max-width: 700px) {
  .qgc-diagram { aspect-ratio: 4 / 5; }
}

/* The expansion rows hold two links (the product, and Add), so the row itself is
   not a link and does not lift on hover the way a single-link row does. */
.qgc-page .qgc-grow-row { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .qgc-page .qgc-grow-row:hover { transform: none; border-color: var(--line-2); background: var(--surface); }
  .qgc-grow-row b a:hover { color: var(--brand-ink); }
}
.qgc-grow-row b a { color: inherit; }
.qgc-grow-row b a:focus-visible, .qgc-grow-add:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; border-radius: 4px; }
.qgc-grow-add { flex: none; }
.qgc-grow-row[hidden] { display: none; }