/* dash — the live dashboard window. Namespace: dh-
   Three pieces on the screen: heading, one line, the app window. Everything
   inside the window is the embed's own (assets/dash/embed.css, inside the
   iframe); nothing here reaches in. */

.dh{
  --dh-ease:cubic-bezier(.16,1,.3,1);
  --dh-ink:#24202d;
  --dh-muted:#91889d;
  --dh-line:#ddd7e6;
  --dh-shell:#f7f6f4;   /* the app's own paper ground, so the box never flashes white */
  --dh-w:1280;
  --dh-h:840;
  position:relative;
  /* RD round 7: the whole section has to land in one screen, so the
     head gives up some of its air and the window is capped by height below. */
  padding:clamp(44px,5vw,72px) 5vw;
  overflow:hidden;
}
.dh-inner{max-width:1500px;margin:0 auto}

/* ---------- head ---------- */
.dh-head{max-width:760px;margin:0 auto clamp(22px,2.6vw,34px);text-align:center}
.dh-eyebrow{
  margin:0 0 14px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:var(--gv-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:#8b7f9b;
}
.dh-h{
  margin:0;
  font-size:var(--gv-h2);
  font-weight:650;letter-spacing:-.04em;line-height:1.02;
  color:var(--dh-ink);text-wrap:balance;
}
.dh-sub{
  margin:14px auto 0;max-width:46ch;
  font-size:clamp(15px,1.15vw,18px);line-height:1.5;
  color:var(--dh-muted);text-wrap:pretty;
}

/* ---------- the window ---------- */
.dh-window{
  position:relative;
  max-width:1360px;margin:0 auto;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--dh-line);
  box-shadow:
    0 1px 2px #24113814,
    0 22px 60px -25px #24113840,
    0 60px 120px -40px #2411384d;
  overflow:hidden;
  isolation:isolate;
}
.dh-bar{
  display:flex;align-items:center;gap:7px;
  height:36px;padding:0 16px;
  background:#fbfafc;
  border-bottom:1px solid #ebe7f0;
}
.dh-dot{width:9px;height:9px;border-radius:50%;background:#e2ddea}
.dh-url{
  margin-left:14px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;letter-spacing:.02em;color:#b3aabd;
}

/* The box the frame lives in. Fixed aspect so it never collapses while the
   embed loads; the app's own ground colour so the poster's edges match. */
.dh-screen{
  position:relative;
  aspect-ratio:var(--dh-w) / var(--dh-h);
  background:var(--dh-shell);
  overflow:hidden;
}
.dh-poster{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;object-position:top left;
  background:var(--dh-shell);
  transition:opacity .45s ease;
}
.dh-live .dh-poster{opacity:0;pointer-events:none}
.dh-frame{
  position:absolute;top:0;left:0;z-index:1;
  width:calc(var(--dh-w) * 1px);height:calc(var(--dh-h) * 1px);
  border:0;display:block;background:var(--dh-shell);
  transform-origin:0 0;
  transform:scale(var(--dh-scale,1));
  pointer-events:none;  /* it is a picture of the product, not the product */
}
.dh-frame:not([src]){visibility:hidden}

/* Poster-first states: phones and reduced motion get a play button instead
   of a 5 MB autoplay. */
.dh-play{
  position:absolute;left:50%;bottom:8%;z-index:3;
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px 10px 13px;
  border:1px solid #ffffff2e;border-radius:99px;
  background:#29193bf0;color:#fff;
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 12px 30px -10px #24113880;
  backdrop-filter:blur(10px);
  transition:transform .16s var(--dh-ease),background-color .2s ease;
}
.dh-play:active{transform:translateX(-50%) scale(.97)}
@media(hover:hover) and (pointer:fine){.dh-play:hover{background:#29193b}}
.dh-play[hidden]{display:none}

/* ---------- reveal ---------- */
.dh-head,.dh-window{
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease,transform .8s var(--dh-ease);
}
.dh.dh-in .dh-head,.dh.dh-in .dh-window{opacity:1;transform:none}
.dh.dh-in .dh-window{transition-delay:.08s}

/* ---------- phone ---------- */
@media(max-width:640px){
  .dh{padding-left:4vw;padding-right:4vw}
  .dh-window{border-radius:14px}
  .dh-bar{height:28px;padding:0 12px;gap:5px}
  .dh-dot{width:7px;height:7px}
  .dh-url{display:none}
  .dh-play{bottom:6%;padding:9px 14px 9px 11px;font-size:12.5px}
}

@media(prefers-reduced-motion:reduce){
  .dh-head,.dh-window{opacity:1;transform:none;transition:none}
  .dh-poster{transition:none}
  .dh-play{transition:none}
}

/* ===========================================================================
   RD round 7 — one screen, and as big as one screen allows.

   The window is a fixed 1280x840 picture, so its width is tied to its height:
   at 1.5238:1 every 100px of height it cannot have costs 152px of width. The
   first pass left 328px of the viewport to the head and the paddings and the
   window came out ~790px wide, which RD read as small — correctly. So this
   pass buys width by giving height back:

     - the section's padding drops from 72px a side to about 28px
     - the head loses its air (12px under the eyebrow, 20px under the block)
     - the sub is one line of copy instead of two

   --dh-chrome is what is left for everything that is not the screen: the two
   paddings, the head, and the window's own 36px title bar. The cap is then the
   widest window whose whole section still fits, and it rises on its own with
   the viewport — on a full-screen 1080p window it lands near 1100px, and on
   anything taller it reaches the 1360px design ceiling.

   It cannot be pushed to the page edges AND stay one screen at this aspect:
   at ~560px of free height, ~850px of width IS the whole screen. Wider than
   that means either cropping the bottom of the dashboard or letting the
   section run past the fold.

   dash.js reads the resulting width and scales the iframe to it, so nothing
   inside the frame has to change. Width-constrained screens (phones, narrow
   laptops) keep the old behaviour: there the column is the smaller limit.
   =========================================================================== */
@media(min-width:901px){
  .dh{--dh-chrome:216px;padding-block:clamp(20px,2.6vh,32px)}
  .dh-head{margin-bottom:clamp(16px,1.8vh,22px)}
  .dh-eyebrow{margin-bottom:10px}
  .dh-sub{margin-top:10px;max-width:none}
  .dh-window{max-width:min(1360px,calc((100svh - var(--dh-chrome)) * 1.5238))}
}