/* ==========================================================================
   g-look.css  -  page chrome that matches the Won't Start guide look.
   LOAD THIS LAST (after g-guide.css). Delete the <link> to undo everything.
   Layout: white header (logo | menu | tag), 3D on the left, white panel on
   the right, navy footer.
   ========================================================================== */

:root {
  --gl-navy: #14284b;
  --gl-blue: #1d4a8f;
  --gl-ink: #14213d;
  --gl-grey: #5b6679;
  --gl-line: #d9dee8;
  --gl-card: #f6f8fb;
  --gl-stage: #e8edf4;
  --gl-head: 86px;
  --gl-foot: 42px;
  --gl-panel: clamp(340px, 32vw, 520px);
}

/* Fonts: brand families from westinghouse.com. Files live in the project root.
   h1 = Westinghouse Sans, h2-h4 = Field Gothic. Family only; sizes/colors stay ours. */
@font-face {
  font-family: "WH Sans";
  src: url("../WHSans.otf") format("opentype");
  font-weight: 100 900; font-style: normal; font-display: block;
}
@font-face {
  font-family: "WH Field Gothic";
  src: url("../FieldGothic-No.54.otf") format("opentype");
  font-weight: 100 900; font-style: normal; font-display: block;
}
:root {
  --gl-font-h1: "WH Sans", "Arial Narrow", Arial, sans-serif;
  --gl-font-h: "WH Field Gothic", "Arial Narrow", Arial, sans-serif;
}
h1 { font-family: var(--gl-font-h1); }
h2, h3, h4 { font-family: var(--gl-font-h); }
/* No one-word last lines (widows) in headings, where the browser supports it. */
h1, h2, h3, h4, .g-title, .gs-title { text-wrap: pretty; }

html body { background: #fff; }

/* 3D area: sits between header and footer, left of the panel ------------- */
html body #v3d-container {
  position: fixed;
  top: var(--gl-head);
  bottom: var(--gl-foot);
  left: 0;
  right: var(--gl-panel);
  width: auto;
  height: auto;
  background: var(--gl-stage);
}

/* Header ------------------------------------------------------------------ */
.g-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--gl-head);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px;
  background: #fff;
  border-bottom: 1px solid var(--gl-line);
}
.g-brand { display: flex; align-items: center; gap: 10px; }
.g-brand img { height: 52px; width: auto; display: block; }
/* Menu pill, centred in the header ---------------------------------------- */
html body .g-menu {
  position: fixed; top: 11px; left: 50%; transform: translateX(-50%);
  z-index: 70;
  display: flex; gap: 4px; padding: 6px;
  background: #fff; border: 1px solid var(--gl-line); border-radius: 14px;
  width: auto; margin: 0;
}
html body .g-menu .g-menu-button {
  font: 600 16px/1 "Segoe UI", Arial, sans-serif;
  color: var(--gl-ink); background: transparent;
  border: 0; border-radius: 10px; padding: 14px 14px;
  cursor: pointer; white-space: nowrap;
}
html body .g-menu .g-menu-button:hover { background: #eef2f9; }
html body .g-menu .g-menu-button.g-current,
html body .g-menu .g-menu-button.g-current:hover {
  background: var(--gl-blue); color: #fff;
}

/* Big title over the 3D area (text switches with the active tab) ---------- */
.g-hero {
  position: fixed; z-index: 40; left: 36px; top: calc(var(--gl-head) + 36px);
  pointer-events: none;
}
.g-hero-kicker {
  margin: 0 0 8px; padding: 6px 10px;
  font: 600 12px/1 "Segoe UI", Arial, sans-serif; letter-spacing: 0.22em;
  color: var(--gl-grey); background: rgba(255,255,255,0.35);
}
.g-hero-title {
  margin: 0;
  font-family: var(--gl-font-h1);
  font-size: clamp(44px, 5vw, 72px); font-weight: 700; line-height: 0.95;
  color: var(--gl-blue); max-width: 260px; text-transform: uppercase;
}
.g-hero-title::before { content: "Startup Guide"; }
body:has(#g-menu-troubleshooting.g-current) .g-hero-title::before { content: "Troubleshooting"; }
body:has(#g-menu-help.g-current) .g-hero-title::before { content: "Help"; }

/* Right-hand panel --------------------------------------------------------- */
html body #g-guide {
  position: fixed; z-index: 50;
  top: var(--gl-head); bottom: var(--gl-foot); right: 0;
  width: var(--gl-panel); max-width: 100%;
  margin: 0; padding: 30px 34px 24px;
  background: #fff; color: var(--gl-ink);
  border: 0; border-left: 1px solid var(--gl-line); border-radius: 0;
  box-shadow: none; overflow-y: auto;
  font-family: "Segoe UI", Arial, sans-serif;
}
#g-guide .g-progress,
#g-guide .g-stage {
  margin: 0 0 6px; font-size: 14px; color: var(--gl-grey);
}
#g-guide .g-label {
  margin: 0 0 8px; font-size: 13px; font-weight: 800;
  letter-spacing: 0.16em; color: var(--gl-blue);
}
#g-guide .g-title {
  margin: 0 0 14px; font-size: 32px; line-height: 1.15; font-weight: 700;
  color: var(--gl-navy); font-family: var(--gl-font-h);
}
#g-guide .g-description {
  margin: 0 0 22px; font-size: 17px; line-height: 1.5; color: var(--gl-ink);
}

/* Buttons ------------------------------------------------------------------ */
#g-guide .g-choices { display: grid; gap: 12px; margin: 0 0 8px; }
#g-guide .g-button {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; padding: 18px 20px;
  font: 600 17px/1.3 "Segoe UI", Arial, sans-serif; color: var(--gl-navy);
  background: var(--gl-card); border: 1px solid var(--gl-line);
  border-radius: 12px; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
#g-guide .g-button:hover { border-color: var(--gl-blue); background: #fff; box-shadow: 0 2px 8px rgba(20,40,75,.10); }
#g-guide .g-symbol {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gl-blue); color: #fff; font-weight: 700; font-size: 15px;
}
#g-guide .g-button-copy { display: grid; gap: 4px; }
#g-guide .g-button-copy strong { font-size: 17px; color: var(--gl-navy); }
#g-guide .g-hint { font-size: 14px; font-weight: 400; color: var(--gl-grey); }

/* Single Continue button: solid blue, not a card */
#g-guide .g-button.g-primary {
  justify-content: center; width: auto; min-width: 160px;
  color: #fff; background: var(--gl-blue); border-color: var(--gl-blue);
  border-radius: 10px; padding: 14px 28px;
}
#g-guide .g-button.g-primary:hover {
  background: #163b73; border-color: #163b73;
  box-shadow: 0 2px 8px rgba(20,40,75,.10); text-decoration: none;
}

/* Back / Restart row -------------------------------------------------------- */
#g-guide .g-navigation {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gl-line);
}
#g-guide .g-navigation .g-button { width: auto; }
#g-guide .g-back-button {
  padding: 14px 20px; font-weight: 500; color: var(--gl-ink);
  background: #fff; border-radius: 10px;
}
#g-guide .g-back-button:disabled { color: #9aa3b2; cursor: default; box-shadow: none; }
#g-guide .g-button.g-restart {
  background: none; border: 0; box-shadow: none; padding: 10px 6px;
  font-weight: 500; color: var(--gl-navy); text-decoration: underline;
}
#g-guide .g-message { margin: 14px 0 0; font-size: 14px; color: var(--gl-grey); }

/* Footer ------------------------------------------------------------------- */
.g-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--gl-foot);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; background: var(--gl-navy); color: #fff;
  font: 400 12px/1 "Segoe UI", Arial, sans-serif;
}

/* force the menu into the header */
#v3d-container .g-shell .g-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 11px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 200 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: #fff !important;
  pointer-events: auto !important;
}
#v3d-container .g-shell .g-menu .g-menu-button {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* header: no background, no line, never blocks clicks */
html body .g-topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* menu: no shadow, always clickable */
#v3d-container .g-shell .g-menu {
  box-shadow: none !important;
  filter: none !important;
  pointer-events: auto !important;
}
#v3d-container .g-shell .g-menu .g-menu-button {
  pointer-events: auto !important;
  box-shadow: none !important;
}

/* ==========================================================================
   MOBILE (phone, small tablet portrait): 3D on top, guide as a bottom sheet.
   Header = slim logo row + full-width menu row. Uses dvh so the browser
   toolbar showing/hiding does not change the layout.
   ========================================================================== */
@media (max-width: 900px) {
  :root { --gl-head: 96px; --gl-foot: 0px; --gl-panel: 0px; --gl-sheet: 46vh; }
  @supports (height: 1dvh) { :root { --gl-sheet: 46dvh; } }

  .g-footer, .g-hero { display: none; }

  html body .g-topbar { height: 44px; padding: 0 14px; justify-content: flex-start; }
  .g-brand img { height: 30px; }

  /* menu: full-width segmented bar under the logo */
  #v3d-container .g-shell .g-menu {
    top: 44px !important; left: 0 !important; right: 0 !important;
    transform: none !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 4px 10px 6px !important;
    border: 0 !important; border-bottom: 1px solid var(--gl-line) !important;
    border-radius: 0 !important;
  }
  #v3d-container .g-shell .g-menu .g-menu-button {
    min-height: 40px; padding: 8px 4px !important; font-size: 14px !important;
    text-align: center;
  }

  /* 3D fills everything above the sheet */
  html body #v3d-container {
    top: var(--gl-head); left: 0; right: 0; bottom: var(--gl-sheet);
  }

  /* guide = bottom sheet */
  html body #g-guide {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    height: var(--gl-sheet); max-height: none;
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-left: 0; border-top: 1px solid var(--gl-line);
    -webkit-overflow-scrolling: touch;
  }
  #g-guide .g-title { font-size: 25px; margin-bottom: 10px; }
  #g-guide .g-description { font-size: 16px; margin-bottom: 16px; }
  #g-guide .g-button { padding: 12px 16px; min-height: 48px; }
  #g-guide .g-choices { gap: 8px; }
  #g-guide .g-choices .g-button { padding: 10px 14px; gap: 12px; }
  #g-guide .g-symbol { flex-basis: 30px; width: 30px; height: 30px; font-size: 14px; }
  #g-guide .g-hint { font-size: 13px; }
  #g-guide .g-navigation { margin-top: 14px; padding-top: 12px; }
}

/* Very small phones: give the 3D a bit more room */
@media (max-width: 900px) and (max-height: 700px) and (orientation: portrait) {
  :root { --gl-sheet: 50vh; }
  @supports (height: 1dvh) { :root { --gl-sheet: 50dvh; } }
}

/* ==========================================================================
   PHONE LANDSCAPE (short screens): 3D on the left, guide on the right.
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --gl-head: 48px; --gl-foot: 0px; --gl-side: 44vw; }
  .g-footer, .g-hero { display: none; }

  html body .g-topbar { height: 48px; padding: 0 14px; justify-content: flex-start; }
  .g-brand img { height: 26px; }

  #v3d-container .g-shell .g-menu {
    top: 6px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    display: flex !important;
    gap: 4px !important;
    padding: 3px !important;
    border: 1px solid var(--gl-line) !important;
    border-radius: 12px !important;
  }
  #v3d-container .g-shell .g-menu .g-menu-button {
    min-height: 34px; padding: 7px 14px !important; font-size: 13px !important;
  }

  html body #v3d-container {
    top: var(--gl-head); left: 0; bottom: 0; right: var(--gl-side);
  }
  html body #g-guide {
    top: var(--gl-head); bottom: 0; left: auto; right: 0;
    width: var(--gl-side); max-height: none;
    height: calc(100vh - var(--gl-head)); height: calc(100dvh - var(--gl-head));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 0; border-left: 1px solid var(--gl-line);
  }
  #g-guide .g-title { font-size: 20px; margin-bottom: 8px; }
  #g-guide .g-description { font-size: 14px; line-height: 1.4; margin-bottom: 12px; }
  #g-guide .g-button { padding: 10px 14px; min-height: 44px; font-size: 15px; }
  #g-guide .g-navigation { margin-top: 12px; padding-top: 12px; }
}

/* Hamburger menu + transparent header (phones, portrait and landscape) -------- */
.g-menu-toggle, .g-burger { display: none; }
@media (max-width: 820px), (max-height: 520px) and (orientation: landscape) {
  :root { --gl-head: 56px; }
  html body .g-topbar { background: #fff; border-bottom: 1px solid var(--gl-line); height: 56px; padding: 0 14px; }
  .g-brand img { height: 32px; }
  html body #v3d-container { top: var(--gl-head); }
  .g-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 6px; right: 8px; z-index: 80;
    width: 44px; height: 44px; border-radius: 8px; cursor: pointer; pointer-events: auto;
    background: rgba(255,255,255,.85); border: 1px solid var(--gl-line);
  }
  .g-burger span, .g-burger span::before, .g-burger span::after {
    content: ""; display: block; width: 22px; height: 2.5px; border-radius: 2px;
    background: #14264b; position: relative;
  }
  .g-burger span::before { position: absolute; top: -7px; }
  .g-burger span::after { position: absolute; top: 7px; }
  #v3d-container .g-shell .g-menu {
    display: none !important;
    top: 56px !important; left: auto !important; right: 8px !important; transform: none !important;
    width: 220px !important; grid-template-columns: 1fr !important;
    padding: 6px !important; gap: 4px !important;
    background: #fff !important; border: 1px solid var(--gl-line) !important; border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; z-index: 80 !important;
  }
  #g-menu-toggle:checked ~ .g-menu { display: grid !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .g-burger { right: calc(var(--gl-side) + 8px); }
  #v3d-container .g-shell .g-menu { right: calc(var(--gl-side) + 8px) !important; }
}


/* Tablet / small laptop (901-1400px): slimmer logo, no tag, menu stays centred */
@media (min-width: 901px) and (max-width: 1400px) {
  .g-brand img { height: 40px; }
}

/* Mobile: fuel choice as three compact cards in one row, shorter sheet = taller 3D view */
@media (max-width: 900px) and (orientation: portrait) {
  #g-screen-su-choose-fuel .g-choices { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #g-screen-su-choose-fuel .g-button { flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; padding: 10px 6px; }
  #g-screen-su-choose-fuel .g-button-copy { display: block; }
  #g-screen-su-choose-fuel .g-button strong { display: block; font-size: 15px; line-height: 1.15; }
  #g-screen-su-choose-fuel .g-hint { display: none; }
  html:has(#g-screen-su-choose-fuel[style*="block"]) { --gl-sheet: max(36dvh, 290px); }
}

/* Hero as a one-line band along the bottom of the 3D view (tablet + phone portrait):
   "TRI-FUEL GENERATOR | STARTUP GUIDE". Desktop (>1100px) keeps the big title block. */
@media (max-width: 1100px) {
  html body .g-hero {
    display: flex; align-items: center; gap: 0;
    left: 0; top: auto; right: auto;
    bottom: var(--gl-foot);
    max-width: calc(100vw - var(--gl-panel));
    padding: 10px 18px;
    background: rgba(255,255,255,.72);
  }
  .g-hero-kicker,
  .g-hero-title {
    margin: 0; padding: 0; background: none;
    font-family: var(--gl-font-h); font-weight: 700; line-height: 1;
    font-size: 26px; letter-spacing: 0.01em; text-transform: uppercase;
    color: var(--gl-blue); max-width: none; white-space: nowrap;
  }
  .g-hero-kicker::after {
    content: ""; display: inline-block; width: 2px; height: 0.9em;
    margin: 0 10px; vertical-align: -0.1em; background: currentColor;
  }
}
@media (max-width: 900px) {
  html body .g-hero { bottom: var(--gl-sheet); max-width: 100vw; padding: 8px 14px; }
  .g-hero-kicker, .g-hero-title { font-size: 21px; }
}
@media (max-width: 380px) {
  .g-hero-kicker, .g-hero-title { font-size: 18px; }
}
/* Short landscape phones: no room, keep it hidden */
@media (max-height: 520px) and (orientation: landscape) {
  html body .g-hero { display: none; }
}

/* Footer: "About this guide" shows a fade-in "Last updated" tooltip
   (date filled in by js/g-last-updated.js). */
.g-about {
  position: relative; cursor: default; pointer-events: auto; outline: none;
}
.g-about::after {
  content: attr(data-updated);
  position: absolute; right: 0; bottom: calc(100% + 12px);
  padding: 8px 12px; border-radius: 6px; white-space: nowrap;
  font: 500 12px/1 "Segoe UI", Arial, sans-serif;
  color: var(--gl-ink); background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.g-about:not([data-updated])::after { display: none; }
.g-about:hover::after,
.g-about:focus-visible::after { opacity: 1; transform: translateY(0); }

/* Desktop/tablet (>900px): menu as a tab bar sitting on the bottom edge of the
   header. Square bottom; outer top corners rounded, inner corners square. */
@media (min-width: 901px) {
  #v3d-container .g-shell .g-menu {
    top: calc(var(--gl-head) - 51px) !important;
    padding: 6px 6px 0 !important;
    border-bottom: 0 !important;
    border-radius: 14px 14px 0 0 !important;
  }
  html body .g-menu .g-menu-button { border-radius: 0; }
  html body .g-menu #g-menu-startup { border-radius: 8px 0 0 0; }
  html body .g-menu #g-menu-help { border-radius: 0 8px 0 0; }
}

/* Title line break "Carbon monoxide / can kill within minutes." is desktop only. */
generator-safety-gate .gs-title-break { display: none; }

/* Safety popup, desktop/tablet (>900px wide, >=600px tall): two-column layout.
   Row 1: icon + SAFETY FIRST | big title. Row 2: DANGER image | intro, emergency
   box, links. Row 3 (light band): checkbox | I AGREE button.
   .gs-content is flattened (display: contents) so all parts share one grid.
   Phones and short screens keep the original single-column popup. */
@media (min-width: 901px) and (min-height: 600px) {
  generator-safety-gate .gs-panel { width: min(1100px, calc(100vw - 48px)); }
  generator-safety-gate #gs-form {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1.25fr) minmax(260px, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas:
      "icon   title title"
      "kicker title title"
      "rules  rules intro"
      "rules  rules emerg"
      "rules  rules links"
      "check  check foot";
    column-gap: 28px;
    padding: clamp(22px, 4vh, 40px) 40px 28px;
    overflow-y: auto;
  }
  generator-safety-gate .gs-content { display: contents; }
  generator-safety-gate .gs-icon {
    grid-area: icon; justify-self: center; align-self: end;
    width: 64px; height: 64px; margin: 0 0 10px;
  }
  generator-safety-gate .gs-icon svg { width: 32px; height: 32px; }
  generator-safety-gate .gs-kicker {
    grid-area: kicker; justify-self: center; align-self: start;
    margin: 0; font-size: 15px; letter-spacing: 0.14em;
  }
  generator-safety-gate .gs-title {
    grid-area: title; align-self: center; margin: 0;
    font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02;
  }
  generator-safety-gate .gs-title-break { display: inline; }
  generator-safety-gate .gs-rules {
    grid-area: rules; align-self: start; margin: clamp(18px, 3vh, 30px) 0 0;
  }
  generator-safety-gate .gs-rules-image { max-height: 52vh; width: 100%; object-fit: contain; }
  generator-safety-gate .gs-intro {
    grid-area: intro; margin: clamp(18px, 3vh, 30px) 0 14px;
    font-size: 17px; line-height: 1.5;
  }
  generator-safety-gate .gs-emergency {
    grid-area: emerg; margin: 0 0 18px; padding: 14px 18px;
    font-size: 15px; line-height: 1.5;
  }
  generator-safety-gate .gs-links {
    grid-area: links; flex-direction: column; align-items: flex-start;
    gap: 12px; margin: 0; font-size: 17px;
  }
  generator-safety-gate .gs-check,
  generator-safety-gate .gs-footer {
    margin-top: clamp(16px, 2.5vh, 26px); background: #eef3f9;
  }
  generator-safety-gate .gs-check {
    grid-area: check; align-items: center; margin-right: -28px;
    padding: 14px 0 14px 16px; border-radius: 9px 0 0 9px; font-size: 13.5px;
  }
  generator-safety-gate .gs-footer {
    grid-area: foot; align-items: center;
    padding: 12px 16px 12px 28px; border-radius: 0 9px 9px 0;
  }
}

/* Help screen: label / description pairs and small notes. */
#g-guide .g-help-list {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px;
  margin: 0 0 20px; font-size: 15px; line-height: 1.45; color: var(--gl-ink);
}
#g-guide .g-help-list dt { font-weight: 700; color: var(--gl-navy); }
#g-guide .g-help-list dd { margin: 0; }
#g-guide .g-help-note { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--gl-grey); }
#g-guide .g-help-note a { color: var(--gl-blue); font-weight: 600; }
@media (max-width: 900px) {
  #g-guide .g-help-list { grid-template-columns: 1fr; gap: 2px; font-size: 14px; }
  #g-guide .g-help-list dd { margin-bottom: 8px; }
}

/* Startup progress bar + section label (built by js/g-steps.js). Replaces the
   old "Step X of Y" line. */
#g-guide #g-progress { display: none; }
#g-guide .g-stepbar { margin: 0 0 14px; }
#g-guide .g-stepbar[hidden] { display: none; }
#g-guide .g-stepbar-track {
  height: 6px; border-radius: 3px; overflow: hidden; background: var(--gl-line);
}
#g-guide .g-stepbar-fill {
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: var(--gl-blue); transition: width .45s ease;
}
#g-guide .g-stepbar-label {
  margin: 12px 0 0; font-size: 13px; font-weight: 800; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gl-blue);
}
@media (max-width: 900px) {
  #g-guide .g-stepbar { margin-bottom: 10px; }
  #g-guide .g-stepbar-label { margin-top: 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #g-guide .g-stepbar-fill { transition: none; }
}

/* Troubleshooting tab hidden until the Troubleshooting port is built (2026-10-16).
   To bring it back, delete this block. Desktop/tablet menu sits on the right. */
#v3d-container .g-shell .g-menu #g-menu-troubleshooting { display: none !important; }
@media (min-width: 901px) {
  #v3d-container .g-shell .g-menu {
    left: auto !important; right: 28px !important; transform: none !important;
  }
  /* thin line along the bottom of the header; the tab bar sits on it */
  html body .g-topbar { border-bottom: 1px solid var(--gl-line) !important; }
}
@media (max-width: 900px) {
  #v3d-container .g-shell .g-menu { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Frosted backing so the hero title stays readable over the 3D model. */
html body .g-hero {
  padding: 12px;
  background-color: rgba(232, 237, 244, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 5px;
}
@media (max-width: 1100px) {
  html body .g-hero { padding: 10px 18px; border-radius: 0 5px 0 0; }
}
@media (max-width: 900px) {
  html body .g-hero { padding: 8px 14px; }
}

/* Help tab: Go Back and Restart do nothing there, so hide them. */
html:has(#g-screen-help[style*="block"]) #g-guide .g-navigation { display: none; }

/* Welcome screen (Figma 2026-10-22): solid grey, dark text, blue pill button.
   Overrides the welcome block in generator-popups.css. */
@font-face {
  font-family: "WH Sans 34";      /* Westinghouse Sans No.34 Demi XCond: title */
  src: url("../WestinghouseSans-No.34.otf") format("opentype"); font-display: block;
}
@font-face {
  font-family: "WH Field 46";     /* Field Gothic No.46 XBold Cond: section titles, button */
  src: url("../FieldGothic-No.46.otf") format("opentype"); font-display: block;
}
@font-face {
  font-family: "WH Field 52";     /* Field Gothic No.52 Reg Compact: body */
  src: url("../FieldGothic-No.52.otf") format("opentype"); font-display: block;
}
/* No.54 Demi Compact (links, bold model names) = "WH Field Gothic" above. */
westinghouse-welcome, westinghouse-welcome .ww-overlay, westinghouse-welcome .ww-content,
westinghouse-welcome .ww-title, westinghouse-welcome .ww-lead,
westinghouse-welcome .ww-section-title, westinghouse-welcome .ww-copy { color: #000; }
westinghouse-welcome .ww-overlay {
  background: #e8e8e8; backdrop-filter: none; -webkit-backdrop-filter: none;
  justify-content: flex-start; align-items: center;
  padding: 40px 24px 40px clamp(24px, 19vw, 320px);
}
westinghouse-welcome .ww-content { width: min(540px, 100%); min-height: 0; margin: auto 0; }
westinghouse-welcome .ww-title {
  font-family: "WH Sans 34", "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 32px; letter-spacing: 0; line-height: 1.05;
}
westinghouse-welcome .ww-lead, westinghouse-welcome .ww-copy {
  font-family: "WH Field 52", Arial, sans-serif; font-weight: 400;
  font-size: 21px; line-height: 1.3; letter-spacing: 0;
}
westinghouse-welcome .ww-lead { margin-top: 12px; }
westinghouse-welcome .ww-lead strong { font-family: "WH Field Gothic", Arial, sans-serif; font-weight: 400; }
westinghouse-welcome .ww-section { margin-top: 30px; }
westinghouse-welcome .ww-section-title {
  font-family: "WH Field 46", "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 19px; letter-spacing: 0; line-height: 1.1;
}
westinghouse-welcome .ww-copy { margin-top: 6px; }
westinghouse-welcome .ww-link {
  color: #295bdd; font-family: "WH Field Gothic", Arial, sans-serif;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
westinghouse-welcome .ww-note {
  margin: 34px 0 0; max-width: 340px; color: #000;
  font-family: "WH Field 52", Arial, sans-serif; font-size: 13.5px; line-height: 1.35;
}
westinghouse-welcome .ww-start {
  align-self: flex-start; width: auto !important;
  margin: 32px 0 0; padding: 0 30px; height: 50px; border-radius: 999px;
  background: #295bdd; color: #fff;
  font-family: "WH Field 46", "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 22px; line-height: 50px;
}
westinghouse-welcome .ww-start:hover { background: #1f4cc2; }
westinghouse-welcome .ww-start:focus-visible { outline: 3px solid #000 !important; outline-offset: 3px; }
@media (max-width: 600px) {
  westinghouse-welcome .ww-overlay {
    align-items: flex-start;
    padding: max(20px, env(safe-area-inset-top)) 24px max(20px, env(safe-area-inset-bottom));
  }
  westinghouse-welcome .ww-content { margin: 0; }
  westinghouse-welcome .ww-title { font-size: clamp(24px, 7.4vw, 30px); }
  westinghouse-welcome .ww-lead, westinghouse-welcome .ww-copy { font-size: clamp(16px, 4.9vw, 20px); line-height: 1.28; }
  westinghouse-welcome .ww-section { margin-top: clamp(14px, 2.6vh, 24px); }
  westinghouse-welcome .ww-section-title { font-size: clamp(15px, 4.6vw, 18px); }
  westinghouse-welcome .ww-note { margin-top: clamp(14px, 2.6vh, 24px); font-size: 12.5px; }
  westinghouse-welcome .ww-start { margin-top: clamp(14px, 2.6vh, 22px); height: 46px; line-height: 46px; font-size: 20px; }
}

/* Page cover: until js/westinghouse-welcome-popup.js runs (it waits behind
   v3d.js), show only the welcome grey so the guide never flashes first.
   Fades out on its own after 4s in case the script never runs. */
html:not(.ww-ready) body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483647;
  background: #e8e8e8; pointer-events: none;
  animation: ww-cover-off 0.3s ease 4s forwards;
}
@keyframes ww-cover-off { to { opacity: 0; visibility: hidden; } }

/* Voiceover mute button (js/g-mute.js), bottom right of the 3D area. */
#g-mute {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.75); color: var(--gl-ink, #1d2433);
}
#g-mute:hover { background: #fff; }
#g-mute:focus-visible { outline: 2px solid var(--gl-blue); outline-offset: 2px; }
#g-mute svg { width: 28px; height: 28px; fill: currentColor; }
/* Phones/tablets: the TRI-FUEL / STARTUP GUIDE band sits at the bottom of
   the 3D area, so lift the button above it. */
@media (max-width: 900px) {
  #g-mute { bottom: 48px; right: 12px; }
}