/* ==========================================================================
   MAIN BEACH TOWER — THE SITE ATLAS LAYER (atlas.js)
   --------------------------------------------------------------------------
   Kybos Site Atlas's interface over the film, in the live app's tokens
   (styles.css :root, --atlas-*): Inter; panels #0d1618d9 with 1 px #ffffff1f
   borders, 14 px corners and a 12–14 px blur; cards #172326ec; bars
   #142024cc; the accent #c8863a with dark text; the stage colours.
   Wide screens: the bars top left under the header, the cards bottom left,
   the capture viewer and the timeline to their right. A portrait phone: one
   compact chip under the header, the cards across the foot.
   ========================================================================== */

/* ---- The layer ------------------------------------------------------------ */
.atlas {
  position: absolute; inset: 0; pointer-events: none;
  font: 400 13px/1.35 var(--sans); color: var(--atlas-fg);
}
/* A soft dark veil under the header and the bars, as the app's top bar */
.atlas__veil { position: absolute; inset: 0 0 auto 0; height: 200px; background: linear-gradient(#0a1113c4, #0a111300); }

/* ---- The stage chips and the tools (display only) ---------------------------- */
.atlas-bars {
  position: absolute; left: var(--atlas-inset); top: 92px;
  display: grid; justify-items: start; gap: 6px;
}
.atlas-bar {
  display: flex; gap: 6px; padding: 6px;
  background: var(--atlas-bar); border: 1px solid var(--atlas-line-2); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.atlas-tools { gap: 4px; padding: 5px; }
.atlas-chip {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px;
  font-size: 11px; line-height: 1.2; white-space: nowrap; color: #dfe7e1;
  border: 1px solid var(--atlas-line-2); background: #ffffff08;
  transition: border-color 0.35s, background-color 0.35s, color 0.35s;
}
.atlas-chip i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.atlas-chip.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; }
.atlas-tool {
  display: flex; align-items: center; padding: 7px 12px; border-radius: 9px;
  font-size: 12px; line-height: 1.2; white-space: nowrap; color: #dfe7e1;
  transition: background-color 0.35s, color 0.35s;
}
.atlas-tool.is-on { background: var(--atlas-accent); color: var(--atlas-on-accent); font-weight: 600; }

/* A portrait phone: the stage as one chip, the capture timeline as one line */
.atlas-compact { display: none; }

/* ---- Shared pieces: panels, eyebrows ------------------------------------------ */
.atlas-panel {
  background: var(--atlas-panel); border: 1px solid var(--atlas-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.atlas-eyebrow { font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--atlas-muted); }
.atlas-eyebrow b { color: var(--atlas-accent-text); font-weight: 600; }

/* ---- The words: aligned with the app's margin ------------------------------- */
.copy { left: var(--atlas-inset); }

/* ---- The cards (a stop's words as the app's card; atlas.js decorate) ----------- */
.copy--card {
  bottom: 26px; width: 330px; padding: 20px;
  background: var(--atlas-card); border: 1px solid #ffffff18; border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 15px 55px #0004;
  font-family: var(--sans); color: var(--atlas-fg);
}
.copy--card .eyebrow { margin: 0; font-size: 9px; font-weight: 600; line-height: 1.3; letter-spacing: 1.6px; color: var(--atlas-muted); opacity: 1; }
.copy--card .eyebrow b { color: var(--atlas-accent-text); font-weight: 600; }
.copy--card .copy__title { margin: 8px 0 4px; font: 400 34px/1 var(--serif); letter-spacing: -0.3px; }
.card__sub { margin: 0 0 14px; font-size: 11.5px; line-height: 1.4; color: var(--atlas-muted); }
.is-motion-loading .copy .copy__more { opacity: 0; }

/* the five-stage timeline of a floor */
.card__steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin: 4px 0 12px; padding: 0; list-style: none; }
.card__steps::before { content: ''; position: absolute; top: 12px; left: 10%; right: 10%; height: 2px; background: #fff2; }
.card__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; line-height: 1.2; color: #dfe7e1; text-align: center; }
.card__dot {
  display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 1px; border-radius: 50%;
  font-size: 10px; background: #1b2a2e; border: 1.5px solid #ffffff33; color: var(--atlas-muted);
}
.card__step.is-done .card__dot { background: var(--atlas-accent); border-color: var(--atlas-accent); color: var(--atlas-on-accent); }
.card__step.is-now .card__dot { border: 2px solid var(--atlas-accent-text); color: var(--atlas-accent-text); box-shadow: 0 0 0 4px #e6a75626; }
.card__step small { font-size: 8.5px; color: var(--atlas-muted-2); }

/* a panel inside a card: a title, its status, a line or two */
.card__panel { margin-bottom: 10px; padding: 10px 12px; background: var(--atlas-panel); border: 1px solid var(--atlas-line); border-radius: 12px; }
.card__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card__panel-head h3 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.card__status { font-size: 10px; color: #6fe39a; white-space: nowrap; }
.copy--card .copy__body { max-width: none; margin: 5px 0 0; font-size: 11px; line-height: 1.45; color: var(--atlas-muted); opacity: 1; }
.copy--card > .copy__more > .copy__body:last-child { margin-bottom: 0; }

/* buttons: each goes somewhere in the film (a stop, or into the capture) */
.card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card__btn {
  padding: 8px; border-radius: 9px; border: 1px solid var(--atlas-line); background: #172024a6; color: var(--atlas-fg);
  font: 400 11px/1.3 var(--sans); text-align: center; cursor: pointer; pointer-events: auto;
  transition: transform 0.18s var(--ease-out), filter 0.18s, box-shadow 0.25s, background-color 0.25s;
}
.card__btn:hover { background: #22303499; }
.card__btn--primary { grid-column: 1 / -1; background: var(--atlas-accent); color: var(--atlas-on-accent); border-color: transparent; font-weight: 600; }
.card__btn--primary:hover { background: var(--atlas-accent-text); }
/* pressed by the film as the capture's dwell starts, then lit while the viewer is open */
.card__btn.is-pressed { transform: scale(0.955); filter: brightness(0.86); box-shadow: inset 0 2px 7px #0006, 0 0 0 3px #e6a75647; }
.card__btn.is-active { box-shadow: 0 0 0 2px var(--atlas-accent-text), 0 0 18px #e6a75640; }

/* the site report (stop 8) */
.card__stagebar { display: flex; gap: 2px; height: 8px; margin: 8px 0 10px; border-radius: 4px; overflow: hidden; }
.card__stagebar span { display: block; flex: 0 1 0; height: 100%; transition: flex-grow 0.4s var(--ease-out); }
.card__counts { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 4px 10px; margin: 0; font-size: 11px; color: #dfe7e1; }
.card__counts dt { white-space: nowrap; }
.card__counts dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.card__counts i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--c); }
.card__badge { display: inline-block; margin: 12px 0 4px; padding: 2px 7px; border-radius: 999px; background: #6fe39a22; color: #6fe39a; font-size: 8.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.card__rows { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 6px 0 0; font-size: 11px; color: var(--atlas-muted); }
.card__rows dd { margin: 0; text-align: right; color: var(--atlas-fg); font-weight: 500; }
.card__fine { margin: 10px 0 0; font-size: 9.5px; color: var(--atlas-muted-2); }
.copy--card[data-card='report'] .copy__body { margin-top: 10px; }

/* the foundation pause's BIM check */
.atlas-found { --show: 0; }
.card__checks { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.card__check { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 8px; font-size: 11px; color: #ffffff66; transition: color 0.3s; }
.card__tick { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #ffffff2e; font-size: 9px; font-weight: 700; transition: background-color 0.3s, border-color 0.3s; }
.card__check-value { font-variant-numeric: tabular-nums; color: var(--atlas-muted); white-space: nowrap; }
.card__check.is-checking { color: #dfe7e1; }
.card__check.is-checking .card__tick { border-color: #5fdcef; border-right-color: transparent; animation: atlas-spin 0.9s linear infinite; }
.card__check.is-done { color: var(--atlas-fg); }
.card__check.is-done .card__tick { background: #6fe39a; border-color: #6fe39a; }
.card__check.is-done .card__tick::before { content: '✓'; color: #0d1618; }
.card__check.is-done .card__check-value { color: #6fe39a; }
.card__check--flag { display: none; padding-top: 6px; border-top: 1px solid var(--atlas-line-2); }
.card__check--flag.is-on { display: grid; color: var(--atlas-fg); }
.card__check--flag .card__tick { background: #ff8f7a; border-color: #ff8f7a; }
.card__check--flag .card__tick::before { content: '!'; color: #0d1618; }
.card__check--flag .card__check-value { color: #ff8f7a; }
@keyframes atlas-spin { to { transform: rotate(360deg); } }

/* ---- The capture timeline (from stop 8) ------------------------------------------ */
.atlas-timeline {
  --show: 0;
  position: absolute; left: calc(var(--atlas-inset) + 370px); right: var(--atlas-inset); bottom: 22px;
  padding: 10px 16px 12px;
  opacity: calc(var(--show) * (1 - var(--viewer, 0))); transform: translate3d(0, calc((1 - var(--show)) * 14px), 0);
  visibility: hidden;
}
.atlas.has-timeline .atlas-timeline { visibility: visible; }
.atlas-timeline__track { position: relative; height: 26px; margin-top: 8px; }
.atlas-timeline__track::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: #ffffff22; }
.atlas-timeline__fill { position: absolute; left: 0; top: 12px; height: 2px; background: var(--atlas-accent); transition: width 0.25s linear; }
.atlas-timeline__cap {
  position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%;
  transform: translateX(-50%); background: var(--c); border: 1.5px solid #0d1618; transition: opacity 0.3s;
}
.atlas-timeline__cap.is-later { opacity: 0.22; }
.atlas-timeline__now { position: absolute; top: 2px; width: 2px; height: 22px; background: var(--atlas-accent-text); transform: translateX(-50%); transition: left 0.25s linear; }
.atlas-timeline__marks { position: relative; height: 12px; font-size: 9px; color: var(--atlas-muted-2); }
.atlas-timeline__mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; transition: opacity 0.25s; }
.atlas-timeline__mark.is-first { transform: none; }
.atlas-timeline__mark.is-last { transform: translateX(-100%); }
.atlas-timeline__mark.is-hidden { opacity: 0; }
.atlas-timeline__mark.is-now { color: var(--atlas-accent-text); font-weight: 600; transition: left 0.25s linear; }

/* ---- The capture viewer (stop 6's dwell) ------------------------------------------- */
/* The free area right of the card and under the bars; the frame is the biggest 16:9
   recording (plus its bar) that fits it (atlas.js sets its width). */
.atlas-viewer {
  --open: 0;
  position: absolute; left: calc(var(--atlas-inset) + 354px); right: calc(var(--atlas-inset) + 44px); top: 196px; bottom: 26px;
  display: none; align-items: center; justify-content: center;
}
.atlas-viewer.is-open { display: flex; }
.atlas-viewer__frame {
  position: relative; overflow: hidden;
  background: #0d1618f2; border: 1px solid #ffffff42; border-radius: 24px;
  box-shadow: 0 30px 90px #000a, 0 0 0 1px #00000040;
  opacity: var(--open);
  transform: translate3d(calc((1 - var(--open)) * -26px), calc((1 - var(--open)) * 18px), 0) scale(calc(0.93 + 0.07 * var(--open)));
  transform-origin: 0% 100%;
}
.atlas-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 8px 0 18px; border-bottom: 1px solid var(--atlas-line); }
.atlas-viewer__title { overflow: hidden; font-size: 12px; color: var(--atlas-muted); white-space: nowrap; text-overflow: ellipsis; }
.atlas-viewer__title b { color: var(--atlas-fg); font-weight: 500; }
.atlas-viewer__note::before { content: ' · '; }
.atlas-viewer__tools { display: flex; gap: 3px; }
.atlas-viewer__tools .atlas-tool { padding: 5px 10px; font-size: 11px; }
.atlas-viewer__media { position: relative; aspect-ratio: 16 / 9; background: #0b1214; overflow: hidden; }
.atlas-viewer__poster, .atlas-viewer__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the recording plays into the canvas (atlas.js); the video element itself is never shown */
.atlas-viewer__video { display: none; }
.atlas-viewer__canvas { opacity: 0; }
.atlas-viewer.has-video .atlas-viewer__canvas { opacity: 1; }
.atlas-viewer__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atlas-viewer__layer { position: absolute; inset: 0; }
.atlas-measure__halo { stroke: #000; stroke-opacity: 0.5; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.atlas-measure__line { stroke: var(--atlas-accent-text); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.atlas-measure__end { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--atlas-accent); box-sizing: border-box; }
.atlas-measure__tag {
  position: absolute; transform: translate(14px, -50%);
  padding: 3px 7px; border-radius: 6px; background: #0d1618e6; border: 1px solid var(--atlas-accent-text);
  color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.atlas-measure-panel { position: absolute; right: 14px; top: 14px; width: 220px; padding: 12px 14px 14px; }
.atlas-seg { display: flex; margin: 8px 0 10px; padding: 2px; border-radius: 8px; background: #ffffff0d; }
.atlas-seg span { flex: 1; padding: 5px; border-radius: 6px; text-align: center; font-size: 11px; color: var(--atlas-muted); }
.atlas-seg span.is-on { background: var(--atlas-accent); color: var(--atlas-on-accent); font-weight: 600; }
.atlas-big { font-size: 26px; font-weight: 500; letter-spacing: -0.3px; line-height: 1.2; }
.atlas-rows { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin-top: 6px; font-size: 11px; color: var(--atlas-muted); }
.atlas-rows b { color: var(--atlas-fg); font-weight: 500; text-align: right; }
.atlas-toast {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, var(--rise, 0px));
  display: flex; align-items: center; gap: 10px; padding: 9px 13px; max-width: calc(100% - 28px);
  background: #0d1618f0; border: 1px solid var(--atlas-line); border-radius: 12px; box-shadow: 0 10px 40px #0006;
  font-size: 12px; white-space: nowrap;
}
.atlas-toast__ok { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #6fe39a; color: #0d1618; font-size: 12px; font-weight: 700; }
.atlas-toast code { overflow: hidden; text-overflow: ellipsis; color: var(--atlas-accent-text); font: 11px ui-monospace, Menlo, monospace; }

/* ---- Pins (the viewer's and the foundation pause's) -------------------------------- */
.atlas-pin { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, calc(-100% + var(--rise, 0px))); pointer-events: none; }
.atlas-pin__bubble {
  display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  background: #0d1618e6; border: 1px solid var(--atlas-line); border-radius: 10px;
  font: 400 10.5px/1.2 var(--sans); color: var(--atlas-fg); white-space: nowrap;
}
.atlas-pin__bubble i { display: block; width: 8px; height: 8px; border-radius: 50%; }
.atlas-pin svg { display: block; margin-top: 3px; filter: drop-shadow(0 2px 3px #0007); }

/* ---- The foundation pause's design outlines (in the engine's overlay) ------------------ */
svg.atlas-bim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atlas-bim__halo { fill: none; stroke: rgba(6, 20, 24, 0.55); stroke-width: 3.2; stroke-linejoin: round; }
.atlas-bim__line { fill: none; stroke: #5fdcef; stroke-width: 1.3; stroke-dasharray: 3 2.5; stroke-linejoin: round; }
.atlas-bim__line.is-done { stroke-dasharray: none; fill: #5fdcef1f; }

/* ---- Short wide screens: a slimmer card ---------------------------------------------- */
@media (min-width: 701px) and (max-height: 640px) {
  .copy--card .card__steps, .copy--card .card__stagebar, .copy--card .card__badge, .copy--card .card__rows, .copy--card .card__fine { display: none; }
  .copy--card .card__actions .card__btn:not(.card__btn--primary) { display: none; }
}

/* ---- A portrait phone ---------------------------------------------------------- */
/* One compact row under the header (the stage, and the capture timeline as a line), the
   cards across the foot, compact; the viewer across the top; the 3D stays in between. */
@media (max-width: 700px) {
  .atlas__veil { height: 130px; }
  .atlas-bars, .atlas-timeline { display: none; }
  .atlas-compact { position: absolute; left: var(--atlas-inset); right: var(--atlas-inset); top: 62px; display: flex; align-items: center; gap: 8px; }
  .atlas-compact .atlas-chip { padding: 5px 10px; font-size: 10.5px; background: color-mix(in srgb, var(--c) 18%, #0d1618b0); }
  .atlas-compact__line { overflow: hidden; font-size: 10px; color: #ffffffc0; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 6px #0a1113; }
  .copy--card { left: 12px; right: 12px; width: auto; bottom: 24px; padding: 14px 16px; }
  .copy--card .copy__title { margin: 6px 0 2px; font-size: 28px; }
  .card__sub { margin-bottom: 10px; font-size: 11px; }
  .card__steps { margin-bottom: 8px; }
  .card__step { font-size: 9px; }
  .card__panel { margin-bottom: 8px; padding: 8px 10px; }
  .card__actions .card__btn:not(.card__btn--primary) { display: none; }
  .copy--card[data-card='report'] .card__rows, .copy--card[data-card='report'] .card__badge, .copy--card[data-card='report'] .card__fine { display: none; }
  .atlas-viewer { left: 10px; right: 10px; top: 100px; bottom: auto; height: calc(56.25vw + 24px); align-items: flex-start; }
  .atlas-viewer__frame { border-radius: 16px; transform-origin: 50% 100%; }
  .atlas-viewer__bar { height: 34px; padding: 0 6px 0 12px; }
  .atlas-viewer__title { font-size: 10.5px; line-height: 1.2; }
  .atlas-viewer__title b, .atlas-viewer__note { display: block; overflow: hidden; text-overflow: ellipsis; }
  .atlas-viewer__note { font-size: 9.5px; }
  .atlas-viewer__note::before { content: none; }
  .atlas-viewer__tools .atlas-tool { padding: 4px 7px; font-size: 10px; }
  .atlas-measure-panel { display: none; }
  .atlas-toast { bottom: 8px; padding: 6px 9px; font-size: 10px; gap: 7px; }
  .atlas-toast code { display: none; }
  .atlas-pin__bubble { padding: 4px 7px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .card__check.is-checking .card__tick { animation: none; }
  .atlas-chip, .atlas-tool, .card__btn, .atlas-timeline__fill, .atlas-timeline__now, .atlas-timeline__mark { transition: none; }
}