/* 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;
}
body.viewer-active .wordmark { color: var(--warm-white); }
body.viewer-active .wordmark-tekton,
body.viewer-active .wordmark .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: #1F1F1F;
  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 {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(250, 248, 245, 0.08);
}
.sheets-panel-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sheets-panel-icon-btn {
  background: transparent;
  border: none;
  color: var(--warm-white);
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
}
.sheets-panel-icon-btn:hover { background: rgba(250, 248, 245, 0.08); }
.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;
}
.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 top-right 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;
  top: 12px;
  right: 12px;
  z-index: 6;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(31, 31, 31, 0.92);
  color: var(--warm-white);
  border: 1px solid rgba(250, 248, 245, 0.18);
  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;
}
.info-btn:hover { color: var(--solar-gold); border-color: var(--solar-gold); }

.info-popover {
  position: absolute;
  top: 46px;
  right: 12px;
  z-index: 6;
  width: 300px;
  background: #1F1F1F;
  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);
}
.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%);
}

/* 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,
#aps-viewer .splash {
  display: none !important;
}

.output-buttons {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 14px 20px;
  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;
  gap: 10px;
  padding: 16px 18px;
  min-height: 56px;
  background: var(--solar-gold);
  color: var(--navy);
  border: 1px solid var(--solar-gold);
  border-radius: 10px;
  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: 18px; height: 18px; 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: 12px 14px; min-height: 50px; }

  /* 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) {
  /* Single-column buttons; full-width tap targets. */
  .output-buttons {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* 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; }
}