/* ==========================================================================
   Beaufort Intelligence — Consultancy REUSABLE COMPONENTS
   Device frames (laptop / phone / tablet / browser) + screen content
   (dashboard cards, SVG path-draw charts, count-up numbers).
   All motion is transform/opacity only. Frames are pure CSS; section agents
   drop "screen content" markup into the .device__screen slot.
   See CONVENTIONS.md for markup templates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DEVICE SCENE WRAPPER
   A .device-scene gives perspective so 3D transforms read correctly.
   Set --tilt / --open via inline style or by main.js / GSAP to animate.
   -------------------------------------------------------------------------- */
.device-scene {
  perspective: 1600px;
  perspective-origin: 50% 40%;
  display: flex; justify-content: center; align-items: center;
  width: 100%;
}
.device { transform-style: preserve-3d; position: relative; }
.device__screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--bg-deep);
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168,200,224,0.06), transparent 70%);
}
.device__bezel-glow { position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(168,200,224,0.10), inset 0 1px 0 rgba(255,255,255,0.04); }

/* ===== LAPTOP =================================================
   Lid opens via rotateX. Drive --lid (0 = closed flat, 1 = open ~90deg).
   GSAP/ScrollTrigger can scrub --lid from 0 -> 1. */
.laptop { width: min(620px, 88vw); }
.laptop__lid {
  position: relative;
  transform-origin: 50% 100%;
  transform: rotateX(calc((1 - var(--lid, 1)) * -88deg));
  transition: transform .8s var(--ease-out);
  will-change: transform;
}
.laptop__display {
  position: relative;
  border: 10px solid #15181E;
  border-radius: 16px 16px 0 0;
  background: #0A0C10;
  box-shadow: 0 0 0 1px rgba(168,200,224,0.10), 0 30px 60px -20px rgba(0,0,0,0.7);
  aspect-ratio: 16 / 10;
}
.laptop__display .device__screen { border-radius: 6px; height: 100%; }
.laptop__base {
  height: 14px; margin-top: -1px;
  background: linear-gradient(#23272F, #15181E);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 24px -10px rgba(0,0,0,0.8);
  position: relative;
}
.laptop__base::after { /* trackpad notch */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 90px; height: 5px; border-radius: 0 0 6px 6px; background: rgba(0,0,0,0.45);
}

/* ===== PHONE =================================================
   rotateY tilt / spin. Drive --spin (deg) for the tilt or spin. */
.phone { width: min(260px, 62vw); }
.phone__body {
  position: relative;
  border: 9px solid #15181E;
  border-radius: 38px;
  background: #0A0C10;
  aspect-ratio: 9 / 19.5;
  box-shadow: 0 0 0 1px rgba(168,200,224,0.10), 0 30px 60px -20px rgba(0,0,0,0.7);
  transform: rotateY(var(--spin, 0deg));
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.phone__body .device__screen {
  border-radius: 28px; height: 100%;
  /* Safe-area inset so screen CONTENT never tucks under the notch.
     The notch sits at top:9px and is 22px tall (inside the 9px body border),
     so content must clear ~31px from the screen top. --phone-safe is the
     amount the screen's content root pads down; sections reuse this token so
     every phone mockup, in every section, starts its UI below the notch. */
  --phone-safe: 26px;
}
.phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; background: #0A0C10; border-radius: 0 0 14px 14px; z-index: 3;
}
/* The notch overlaps the very top of the screen; push the immediate content
   root down by the safe-area inset. .screen-ui already owns the screen padding,
   so we ADD to its top padding rather than replace it. Sections whose phone
   content root is not .screen-ui (s5 .s5-faces, s6 .s6-app) opt in below. */
.phone__body .device__screen > .screen-ui { padding-top: calc(clamp(10px, 2.4cqw, 20px) + var(--phone-safe)); }

/* ===== TABLET ================================================= */
.tablet { width: min(440px, 80vw); }
.tablet__body {
  position: relative;
  border: 12px solid #15181E;
  border-radius: 26px;
  background: #0A0C10;
  aspect-ratio: 4 / 3;
  box-shadow: 0 0 0 1px rgba(168,200,224,0.10), 0 30px 60px -20px rgba(0,0,0,0.7);
  transform: rotateY(var(--spin, 0deg)) rotateX(var(--tilt, 0deg));
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.tablet__body .device__screen { border-radius: 14px; height: 100%; }

/* ===== BROWSER WINDOW ========================================= */
.browser { width: min(720px, 92vw); }
.browser__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #14171D;
  border: 1px solid rgba(168,200,224,0.10);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: #2C313A; display: block; }
.browser__bar {
  flex: 1; height: 24px; border-radius: 6px;
  background: #0C0E13; border: 1px solid rgba(168,200,224,0.08);
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--steel);
  letter-spacing: 0.5px; overflow: hidden; white-space: nowrap;
}
.browser__viewport {
  border: 1px solid rgba(168,200,224,0.10);
  border-radius: 0 0 12px 12px;
  background: var(--bg-deep);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.7);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.browser__viewport .device__screen { height: 100%; }

/* --------------------------------------------------------------------------
   SCREEN CONTENT — dashboard cards, charts, figures
   Drop these inside any .device__screen. Palette-locked, mono figures.
   -------------------------------------------------------------------------- */
.screen-ui { padding: clamp(10px, 2.4cqw, 20px); height: 100%; display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.screen-ui__bar { display: flex; align-items: center; gap: 8px; }
.screen-ui__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--steel);
}
.screen-ui__pill {
  margin-left: auto; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--green-live);
  border: 1px solid rgba(59,208,122,0.4); border-radius: 999px; padding: 3px 9px;
  display: inline-flex; align-items: center; gap: 6px;
}
.screen-ui__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-live); box-shadow: 0 0 8px rgba(59,208,122,0.9); }

.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dash-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.card__label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--steel);
}
.card__value {
  font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 5cqw, 30px); color: var(--ice); line-height: 1;
}
.card__value .unit { font-size: 0.5em; color: var(--steel); margin-left: 3px; }
.card__delta { font-family: var(--font-mono); font-size: 10px; }
.card__delta.up { color: var(--green-live); }
.card__delta.down { color: #E06A6A; }

/* Count-up number: main.js animates [data-count] from 0 -> data-count value */
.figure[data-count] { font-variant-numeric: tabular-nums; }

/* SVG path-draw chart: stroke draws in via dashoffset.
   main.js sets style on [data-draw] paths; CSS provides the transition. */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart [data-draw] {
  fill: none;
  stroke: var(--cyan-glow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.chart [data-draw].is-drawn { stroke-dashoffset: 0; }
.chart [data-draw].accent-gold { stroke: var(--gold-bright); }
.chart .chart__area { fill: url(#bf-area-grad); opacity: 0; transition: opacity 1s ease .4s; }
.chart .chart__area.is-drawn { opacity: 1; }
.chart .chart__grid line { stroke: rgba(168,200,224,0.08); stroke-width: 1; }
.chart .chart__dot { fill: var(--gold-bright); }

/* Tiny inline bar/spark rows */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 8px; }
.bar__name { font-family: var(--font-mono); font-size: 9.5px; color: var(--steel); text-transform: uppercase; letter-spacing: 1px; }
.bar__track { height: 6px; border-radius: 999px; background: rgba(168,200,224,0.10); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-bright));
  transform-origin: left center; transform: scaleX(var(--val, 0));
  transition: transform 1.2s var(--ease-out);
}
.bar__num { font-family: var(--font-mono); font-size: 10px; color: var(--ice); text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .laptop__lid, .phone__body, .tablet__body,
  .chart [data-draw], .chart .chart__area, .bar__fill {
    transition: none !important;
  }
  .chart [data-draw] { stroke-dashoffset: 0 !important; }
  .chart .chart__area { opacity: 1 !important; }
}