/* ONEPlan demo POC — palette + non-utility styles.
   Tailwind handles the bulk via CDN; this file is for things Tailwind
   can't express cleanly (CSS custom properties, drop-zone dashed border,
   transition states). */

:root {
  --warm-white: #FAF8F5;
  --deep-dark: #262626;
  --navy: #1B4F72;
  --solar-gold: #FFC527;
  --warm-gray: #E5DFD3;
  --neutral-gray: #6B6B6B;
  --error-red: #B0463C;
}

html, body {
  background: var(--warm-white);
  color: var(--deep-dark);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;        /* lets tagline right-align within the column */
  color: var(--deep-dark);     /* hero default — Deep Dark for ONEPlan + Powered by */
  line-height: 0.95;
  gap: 8px;
}
.wordmark-name {
  font-size: 56px;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;      /* keep ONEPlan left-anchored */
}
.wordmark-light { font-weight: 300; }
.wordmark-bold { font-weight: 800; }
.wordmark-tm {
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
  margin-left: 2px;
  letter-spacing: 0;
}
.wordmark-tagline {
  font-size: 16px;             /* up from 12 — bigger to match the wordmark */
  font-weight: 700;
  text-align: right;           /* right edge of OS aligns with right edge of ONEPlan */
}
.wordmark-tagline-prefix {
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.wordmark-tekton {
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--solar-gold);    /* hero default — Tekton stays gold */
  margin-right: 0.12em;
}
.wordmark .accent {
  color: var(--solar-gold);    /* hero default — OS stays gold */
  font-weight: 800;
  letter-spacing: 0;
}

.headline {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.subhead {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}

.drop-zone {
  width: 480px;
  max-width: 90vw;
  height: 280px;
  border: 2px dashed var(--navy);
  border-radius: 12px;
  background: var(--warm-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.drop-zone:hover { background: rgba(27, 79, 114, 0.04); }

.drop-zone.dragover {
  border-color: var(--solar-gold);
  border-style: solid;
  background: rgba(255, 197, 39, 0.10);
}

.drop-zone .prompt { font-size: 18px; font-weight: 600; color: var(--deep-dark); }
.drop-zone .subtext { font-size: 13px; color: var(--neutral-gray); }

.drop-zone .error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--error-red);
  font-weight: 500;
}

.sample-tray {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sample-tray-label {
  font-size: 12px;
  color: var(--neutral-gray);
  letter-spacing: 0.04em;
}
.sample-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  background: var(--warm-white);
  border: 1px solid var(--warm-gray);
  border-radius: 10px;
  cursor: grab;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  user-select: none;
}
.sample-card:hover {
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 79, 114, 0.12);
}
.sample-card:active { cursor: grabbing; }
.sample-card-icon {
  width: 26px;
  height: 30px;
  color: var(--navy);
  flex-shrink: 0;
}
.sample-card-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sample-card-name { font-size: 14px; font-weight: 600; color: var(--deep-dark); }
.sample-card-meta { font-size: 11px; color: var(--neutral-gray); }

.progress-intro {
  width: 560px;
  max-width: 90vw;
  margin: 0 auto 20px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--deep-dark);
  text-align: center;
}
.progress-intro-mark { font-weight: 800; }

.progress-card {
  width: 560px;
  max-width: 90vw;
  background: var(--warm-white);
  border: 1px solid var(--warm-gray);
  border-radius: 12px;
  padding: 28px 32px;
  text-align: left;
}

.progress-bar {
  height: 4px;
  background: var(--warm-gray);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-bar > #progress-fill {
  width: 0%;
  height: 100%;
  background: var(--navy);
  transition: width 200ms linear;
}

.progress-steps { list-style: none; padding: 0; margin: 0; }
.progress-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  font-size: 15px; font-weight: 500; color: var(--neutral-gray);
  transition: color 200ms ease;
}
.progress-steps li.active { color: var(--deep-dark); }
.progress-steps li.done   { color: var(--deep-dark); }

.progress-steps .dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--warm-gray);
  background: var(--warm-white);
  flex-shrink: 0;
  display: inline-block;
  position: relative;
}
.progress-steps li.active .dot { border-color: var(--navy); }
.progress-steps li.done .dot {
  border-color: var(--solar-gold);
  background: var(--solar-gold);
}
.progress-steps li.done .dot::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--deep-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* When the viewer state is active, the page goes full-bleed Deep Dark.
   Flex column lets the header take its natural height and the viewer fill
   the rest — no hardcoded header-height assumptions. */
body.viewer-active {
  background: var(--deep-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;            /* fallback for browsers without dvh support */
  height: 100dvh;           /* dynamic viewport — survives iOS Safari address-bar collapse */
}
body.viewer-active header {
  background: var(--deep-dark);
  color: var(--warm-white);
  flex: 0 0 auto;
  height: 50px;
  position: relative;
  z-index: 100;
  overflow: visible;
}
body.viewer-active header .wordmark-name {
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  align-self: center;
  color: var(--solar-gold);
}
body.viewer-active header .wordmark-tm {
  font-size: 12px;
  margin-top: 2px;
}
.header-project-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--warm-white);
  white-space: nowrap;
  pointer-events: none;
}
/* Plan switcher — custom dropdown (header center, /test route) */
.plan-switcher {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plan-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  color: var(--warm-white);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.12s;
}
.plan-trigger:hover { background: rgba(255,255,255,0.08); }
.plan-trigger-caret {
  width: 26px;
  height: 26px;
  opacity: 1;
  flex-shrink: 0;
  transition: transform 0.15s;
  stroke-width: 3;
}
.plan-trigger[aria-expanded="true"] .plan-trigger-caret {
  transform: rotate(180deg);
}
.plan-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  min-width: 260px;
  z-index: 200;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.plan-dropdown-item {
  padding: 11px 18px;
  color: var(--warm-white);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.plan-dropdown-item:hover { background: rgba(255,255,255,0.07); }
.plan-dropdown-item[aria-selected="true"] { color: var(--solar-gold); }

body.viewer-active header .wordmark-tagline {
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}
body.viewer-active header .wordmark-tekton,
body.viewer-active header .accent {
  color: var(--solar-gold);
}
body.viewer-active main {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 !important;
  display: flex;
  overflow: hidden;         /* contain the GL canvas; body itself stays scroll-natural */
}

/* Use :not([hidden]) so the explicit `display: flex` doesn't override the
   browser's default `[hidden] { display: none }` — that's what was leaking
   the viewer state onto the landing page. */
#state-viewer:not([hidden]) {
  display: flex;
  flex-direction: column;
}
#state-viewer {
  flex: 1 1 auto;
  width: 100%;
  position: relative;
  min-height: 0;             /* allow the inner flex chain to shrink — fixes the sidebar-clipping issue */
}
.viewer-stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}
#aps-viewer {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--deep-dark);
  position: relative;
}

/* Views & Sheets sidebar — built ourselves since DocumentBrowser doesn't
   reliably surface its panel inside our embedded GuiViewer3D. The bubble's
   geometry nodes drive a simple two-section list; clicking switches the
   active viewable. */
.sheets-panel {
  flex: 0 0 280px;
  background: var(--deep-dark);
  color: var(--warm-white);
  border-right: 1px solid rgba(250, 248, 245, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: margin-left 200ms ease;
}
.sheets-panel[hidden] { display: flex; margin-left: -280px; }
.sheets-panel-header { display: none; }
.sheets-panel-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  background: transparent;
  border: none;
  color: rgba(250, 248, 245, 0.45);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.sheets-panel-close-btn:hover {
  background: rgba(250, 248, 245, 0.08);
  color: var(--warm-white);
}
.sheets-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0; }
.sheets-panel-section { padding: 4px 0; }
.sheets-panel-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.55);
  padding: 6px 14px;
  margin: 0;
}
.sheets-panel-list { list-style: none; padding: 0; margin: 0; }
.sheets-panel-item {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--warm-white);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  padding: 8px 14px;
  cursor: pointer;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
  transition: background 80ms ease, border-color 80ms ease, color 80ms ease;
}
.sheets-panel-item:hover { background: rgba(250, 248, 245, 0.06); }
.sheets-panel-item.active {
  background: rgba(255, 197, 39, 0.10);
  border-left-color: var(--solar-gold);
  color: var(--solar-gold);
  font-weight: 700;
}
/* Collapsible sheet groups (<details>/<summary>) */
.sheets-panel-group { padding: 0; }
.sheets-panel-group > details { padding: 0; }
.sheets-panel-group > details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(250, 248, 245, 0.75);
  padding: 8px 14px 6px 14px;
}
.sheets-panel-group > details > summary::-webkit-details-marker { display: none; }
.sheets-panel-group > details > summary::before {
  content: "▸";
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  color: rgba(250, 248, 245, 0.55);
  transition: transform 120ms ease;
  flex: 0 0 12px;
  text-align: center;
}
.sheets-panel-group > details[open] > summary::before { transform: rotate(90deg); }
.sheets-panel-group > details > summary:hover { color: var(--warm-white); }
.sheets-panel-group > details > summary:hover::before { color: var(--warm-white); }
.sheets-panel-group .group-label { flex: 1 1 auto; }
.sheets-panel-group .group-count {
  font-size: 11px;
  font-weight: 500;
  color: rgba(250, 248, 245, 0.45);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.sheets-panel-list.nested .sheets-panel-item { padding-left: 30px; }
.sheet-number {
  display: inline-block;
  min-width: 64px;
  margin-right: 8px;
  color: rgba(250, 248, 245, 0.55);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.sheet-label { color: inherit; }
.sheets-panel-item.active .sheet-number,
.sheets-panel-item.active .sheet-label { color: var(--solar-gold); }
.sheets-panel-toggle-open {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  background: rgba(31, 31, 31, 0.92);
  color: var(--warm-white);
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sheets-panel-toggle-open:hover { border-color: var(--solar-gold); color: var(--solar-gold); }

/* Info button — sits bottom-left of the viewer state, opens a small popover
   listing third-party credits including the Autodesk APS attribution. This
   is the user-facing acknowledgment Option 2 uses while the canonical APS
   credit remains in the viewer's Help / About menu. */
.info-btn {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 6;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(31, 31, 31, 0.18);
  color: rgba(250, 248, 245, 0.25);
  border: 1px solid rgba(250, 248, 245, 0.1);
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 150ms, background 150ms, border-color 150ms;
}
.info-btn:hover {
  background: rgba(31, 31, 31, 0.85);
  color: var(--solar-gold);
  border-color: var(--solar-gold);
}

.info-popover {
  position: absolute;
  bottom: 46px;
  left: 14px;
  z-index: 6;
  width: 300px;
  background: var(--deep-dark);
  color: var(--warm-white);
  border: 1px solid rgba(250, 248, 245, 0.12);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.info-popover-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, 0.55);
}
.info-popover-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
}
.info-popover-body a {
  color: var(--solar-gold);
  text-decoration: none;
}
.info-popover-body a:hover { text-decoration: underline; }
.info-popover-credit {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(250, 248, 245, 0.08);
  font-size: 11px;
  color: rgba(250, 248, 245, 0.55);
  letter-spacing: 0.04em;
}
.info-popover-credit .accent { color: var(--solar-gold); font-weight: 700; }

/* Prev / next view nav — floating chevrons on the left and right edges of
   the viewer state. Subtle by default, light up gold on hover. Both the
   buttons and the keyboard arrows trigger the same handler. */
.view-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 56px;
  background: rgba(31, 31, 31, 0.85);
  color: var(--warm-white);
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;          /* tiny optical bump for the chevron glyph */
  transition: color 100ms, border-color 100ms, background 100ms;
}
.view-nav-btn:hover {
  color: var(--solar-gold);
  border-color: var(--solar-gold);
  background: rgba(31, 31, 31, 0.95);
}
/* Arrows are now positioned inside .viewer-stage so they sit on the viewer
   canvas, not state-viewer's full width. Default left offset accounts for
   the 280px sidebar; when the sidebar is hidden (slid offscreen via the
   sibling [hidden] selector), the arrow snaps to the viewer's left edge. */
.view-nav-prev { left: calc(280px + 14px); }
.sheets-panel[hidden] ~ .view-nav-prev { left: 14px; }
.view-nav-next { right: 14px; }

/* ── APS Viewer chrome (minimal) ─────────────────────────────────────────
   We let APS Viewer's own dark-theme handle backgrounds, hover, and
   active states. Our only adjustments are:
     - default icon glyphs forced to pure white (APS ships them slightly
       grey for the light theme, which reads muted on dark)
     - hovered or active *button* icons recolored to Solar Gold
   Every selector is button-scoped (.adsk-button), not control-scoped, so
   hovering over a group container doesn't light up every icon inside it. */
#aps-viewer { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

#aps-viewer .adsk-button-icon {
  filter: brightness(0) invert(1);
  transition: filter 100ms ease;
}
#aps-viewer .adsk-button:hover .adsk-button-icon,
#aps-viewer .adsk-button.active .adsk-button-icon {
  filter: brightness(0) saturate(100%) invert(78%) sepia(86%) saturate(1670%) hue-rotate(350deg) brightness(101%) contrast(101%);
}

/* Home / fit-to-view button — 25% larger, gold border on hover */
#aps-viewer #toolbar-homeViewTool .adsk-button,
#aps-viewer #homeViewTool {
  width: 50px !important;
  height: 50px !important;
}
#aps-viewer #toolbar-homeViewTool .adsk-button:hover,
#aps-viewer #homeViewTool:hover {
  background: rgba(31, 31, 31, 0.85) !important;
  border: 1px solid var(--solar-gold) !important;
  border-radius: 6px !important;
}

/* View cube — keep functional, soften it visually so it doesn't compete
   with the Solar-Gold-driven chrome */
#aps-viewer .viewcube {
  filter: brightness(0.85) saturate(0.6);
  opacity: 0.85;
  transition: opacity 120ms ease;
}
#aps-viewer .viewcube:hover { opacity: 1; }

/* Spinner — recolor the thin progress bar at the top of the canvas. */
#aps-viewer .progress-bg { background: rgba(31, 31, 31, 0.6); }
#aps-viewer .progress-bar-3d { background: var(--solar-gold); }

/* Hide APS Viewer's circular "Powered by Autodesk" loading spinner that
   pops up during sheet/view switches. The canonical APS attribution stays
   intact via the Help / About menu inside Settings — required to remain
   accessible per APS terms. The transient spinner is UI chrome, not the
   canonical credit, and our own info button (top-right of the viewer)
   carries the user-facing acknowledgment. */
#aps-viewer .adsk-loading,
#aps-viewer .adsk-spinner,
#aps-viewer .spinner,
#aps-viewer #loading-spinner,
#aps-viewer .progress-overlay,
#aps-viewer .forge-spinner {
  display: none !important;
}

/* ── Viewer tagline (bottom-right overlay) ─────────────────────────────── */
.viewer-tagline {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--deep-dark);
  pointer-events: none;
  z-index: 10;
  user-select: none;
}
.viewer-tagline-tekton { color: var(--deep-dark); }
.viewer-tagline-accent { color: var(--deep-dark); }

/* ── Export As button + dropdown ──────────────────────────────────────── */
.header-export-wrapper {
  position: relative;
  flex-shrink: 0;
}
.export-as-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: var(--solar-gold);
  color: var(--deep-dark);
  border: none;
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition: background 100ms ease;
}
.export-as-btn:hover { background: #e6b800; }
.export-as-btn:active { background: #cc9f00; }
.export-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--deep-dark);
  border: 1px solid rgba(250, 248, 245, 0.15);
  border-radius: 9px;
  overflow: hidden;
  z-index: 2000;
  min-width: 210px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.export-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  color: var(--warm-white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(250, 248, 245, 0.07);
  transition: background 100ms ease;
}
.export-option:last-child { border-bottom: none; }
.export-option:hover { background: rgba(255, 255, 255, 0.07); color: var(--solar-gold); }
.export-option-package { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2px; padding-top: 10px; }
.export-icon { width: 14px; height: 14px; flex-shrink: 0; }
.export-label { flex: 1; }
.export-ext { margin-left: auto; opacity: 0.55; font-weight: 500; font-size: 12px; }

#aps-viewer .splash {
  display: none !important;
}

.output-bar {
  flex: 0 0 auto;
  position: relative;
}

.output-mobile-trigger {
  display: none;
}

.output-caret {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.output-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1.2vw, 20px);
  padding: 7px clamp(10px, 2.5vw, 40px);
  background: var(--deep-dark);
  border-top: 1px solid rgba(250, 248, 245, 0.10);
}
.output-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  gap: 8px;
  padding: 0 9px;
  min-height: 35px;
  background: var(--solar-gold);
  color: var(--navy);
  border: 1px solid var(--solar-gold);
  border-radius: 7px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.output-btn:hover {
  background: var(--navy);
  color: var(--warm-white);
  border-color: var(--navy);
}
.output-btn-icon { width: 14px; height: 14px; flex-shrink: 0; }
.output-btn-phase { font-weight: 800; letter-spacing: 0.04em; }

.viewer-error {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  color: var(--warm-white);
  z-index: 10;
}
.viewer-error-btn {
  padding: 10px 20px;
  background: var(--solar-gold);
  color: var(--deep-dark);
  font-weight: 600;
  border: none; border-radius: 8px;
  cursor: pointer;
}

.reset-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--solar-gold);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.reset-link:hover { color: var(--warm-white); }

/* ── Mobile / tablet ─────────────────────────────────────────────────────
   Three breakpoints stacked: 900 (tablet+), 700 (large phone), 480 (phone).
   Below 900 the sidebar becomes an overlay drawer; below 700 wordmark and
   buttons scale down, grid 2x2; below 480 buttons stack to a single column. */

@media (max-width: 900px) {
  /* Sidebar overlays the viewer instead of taking layout space. */
  .sheets-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 7;
    flex-basis: 280px;
    width: 280px;
    max-width: 80vw;
    border-right: 1px solid rgba(250, 248, 245, 0.18);
    box-shadow: 6px 0 20px rgba(0, 0, 0, 0.4);
    transition: transform 200ms ease;
  }
  .sheets-panel[hidden] {
    display: flex;
    margin-left: 0;
    transform: translateX(-110%);
    pointer-events: none;
  }
  .sheets-panel-toggle-open { display: inline-flex; }
}

@media (max-width: 700px) {
  /* Wordmark scales down so it doesn't dominate the header on phones. */
  .wordmark { gap: 4px; }
  .wordmark-name { font-size: 36px; letter-spacing: -0.015em; }
  .wordmark-tm { font-size: 11px; margin-top: 4px; }
  .wordmark-tagline { font-size: 11px; }
  header { padding-left: 16px; padding-right: 16px; }

  /* Output buttons go 2x2. min-height stays so the labels can wrap. */
  .output-buttons {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 14px;
    gap: 10px;
  }
  .output-btn { font-size: 14px; padding: 8px 14px; min-height: 33px; }

  /* Floating prev/next chevrons shrink to keep them out of the way. */
  .view-nav-btn { width: 32px; height: 48px; font-size: 22px; }
  .view-nav-prev { left: 8px; }
  .view-nav-next { right: 8px; }
}

@media (max-width: 480px) {
  /* Collapse the four buttons into a tap-to-expand tray on portrait phones. */
  .output-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 20px;
    background: var(--solar-gold);
    color: var(--navy);
    border: none;
    border-top: 1px solid rgba(250, 248, 245, 0.10);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .output-mobile-trigger[aria-expanded="true"] .output-caret {
    transform: rotate(180deg);
  }

  /* Nav hides until trigger is activated. */
  .output-buttons {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 14px;
    background: var(--deep-dark);
    border-top: 1px solid rgba(250, 248, 245, 0.10);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
    z-index: 20;
  }
  .output-buttons.is-open {
    display: grid;
  }

  /* Tighten the wordmark further on phones. */
  .wordmark-name { font-size: 30px; }
  .wordmark-tagline { font-size: 10px; }

  /* Hero state — drop zone fills width, smaller padding. */
  .drop-zone { width: auto; max-width: 100%; height: 220px; }
  .headline { font-size: clamp(28px, 8vw, 36px) !important; }

  /* Info popover anchored to viewport edge with a margin instead of a
     fixed width that can overflow. */
  .info-popover { width: auto; left: 12px; right: 12px; bottom: 46px; }
}

/* ── Mobile viewer layout (portrait phones) ──────────────────────────────── */
@media (max-width: 700px) and (orientation: portrait) {
  /* Header: switch plan-switcher from absolute-center to a real flex item
     so it sits between the wordmark and the export button without overlapping. */
  #header-project-name { display: none !important; }

  .plan-switcher {
    position: static;
    transform: none;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    margin: 0 8px;
  }

  .plan-trigger {
    max-width: 100%;
    overflow: hidden;
  }

  .plan-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Shrink wordmark so it doesn't eat into plan name space. */
  body.viewer-active header .wordmark-name { font-size: 22px; }

  /* Export As: icon only. */
  .export-btn-label { display: none; }
  .export-as-btn { padding: 8px 10px; gap: 0; }

  /* Hide tagline — overlaps toolbar on portrait. */
  .viewer-tagline { display: none; }

  /* iOS safe-area: both approaches belt-and-suspenders.
     margin-bottom shrinks the flex child so the container is shorter;
     the JS-injected CSS targets .adsk-toolbar directly for when APS
     measures before the margin takes effect. */
  #aps-viewer {
    margin-bottom: max(env(safe-area-inset-bottom, 34px), 34px);
  }
}