/* =========================================================================
   CONTROL ROOM, PREMIUM TIER

   The product ladder has tiers, and until now the Control Room did not: a
   business on the premium build opened the same room as a business on the
   essential one. This layer is the difference, and it is deliberately ADDITIVE.
   It loads AFTER the room's own styles.css and only ever raises the finish, so
   the baseline room stays exactly as it is and nothing regresses when a demo is
   not on this tier.

   What separates the two, in one line each:
     light      one flat gradient per surface, versus layered sources that fall
                across a panel the way real light does
     edge       a single hairline, versus a gold rim with an inner highlight
                above it and a darkened lip below, the jewel-tile logic applied
                to a whole surface
     depth      a border, versus a shadow stack a card genuinely sits on
     type       a size, versus a scale, with the display face carrying more
     texture    a colour, versus the dot grid under everything

   Every value here hangs off the room's OWN tokens (--panel, --gold, --line,
   --serif), never a hardcoded colour, so each trade keeps its own palette and
   only the finish changes. Drop this file in, link it after styles.css, done.

   ONE RULE, learned by breaking it: this layer touches FINISH ONLY, never
   layout and never a room's own decorative pseudo-elements. The first version
   set `.stat:after { height: 3px }` because the roofing room draws a coloured
   rule across the top of a tile. The landscaping room draws a full-height bar
   down the LEFT of one, and the override flattened it to a 3px stub. Same
   class, different design, and a shared layer has no business knowing which.
   So: background, border, shadow, texture and type scale, nothing else.
   ========================================================================= */

:root {
  --pr-rim: color-mix(in srgb, var(--gold) 42%, transparent);
  --pr-rim-soft: color-mix(in srgb, var(--gold) 17%, transparent);
  --pr-glow: color-mix(in srgb, var(--gold) 12%, transparent);
  --pr-shadow: rgba(4, 8, 14, 0.55);
}

/* ---- the room itself: layered light and the dot grid -------------------- */
body {
  background-image:
    radial-gradient(120% 80% at 84% -8%, var(--pr-glow), transparent 58%),
    radial-gradient(90% 60% at 6% 4%, rgba(255, 255, 255, 0.045), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: auto, auto, 32px 32px;
  background-attachment: fixed, fixed, fixed;
}

/* ---- the topbar earns a gold rule and a deeper blur --------------------- */
.topbar {
  border-bottom-color: var(--pr-rim-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -28px var(--pr-shadow);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.brand-text .room {
  font-size: 1.12rem;
  letter-spacing: -0.005em;
}
/* The tier, said out loud but quietly. It is the plan they are on, and a demo
   that shows the premium finish should be willing to name it. */
.brand-text .room::after {
  content: "Premium";
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.16em 0.5em 0.2em;
  border-radius: 999px;
  border: 1px solid var(--pr-rim);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold);
  font-family: var(--sans, inherit);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: 0.28em;
}

/* ---- panels and cards: the jewel-tile edge on a whole surface ----------- */
.panel,
.stat,
.card,
.wo-card,
.crew-panel,
.contact-panel {
  position: relative;
  background-image:
    radial-gradient(120% 100% at 100% 0%, var(--pr-glow), transparent 56%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  border-color: var(--pr-rim-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 20px 44px -26px var(--pr-shadow);
}
.panel:hover,
.stat:hover,
.card:hover,
.wo-card:hover {
  border-color: var(--pr-rim);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 26px 54px -24px var(--pr-shadow),
    0 0 0 1px var(--pr-rim-soft);
}

/* ---- the type scale opens up --------------------------------------------
   Above phone only. Each room sets its own tighter scale in a max-width query,
   and this file loads last, so an unscoped bump here would win on a phone and
   overflow the tile. Finish is shared; layout stays the room's own. */
@media (min-width: 561px) {
  .stat .num {
    font-size: 3.5rem;
    letter-spacing: -0.028em;
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  }
  .view-title {
    font-size: clamp(1.62rem, 3.4vw, 2.25rem);
    letter-spacing: -0.018em;
  }
  .panel h3 {
    font-size: 1.42rem;
    letter-spacing: -0.012em;
  }
}
.view-sub {
  opacity: 0.9;
}

/* ---- buttons get a real surface, not a fill ----------------------------- */
.btn-primary,
.btn.primary {
  background-image: linear-gradient(150deg,
    color-mix(in srgb, var(--gold) 18%, transparent), transparent 62%);
  border-color: var(--pr-rim);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px -14px var(--pr-shadow);
}
.btn-primary:hover,
.btn.primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 16px 32px -14px var(--pr-shadow);
}

/* ---- motion: the lift is tactile, never a jump -------------------------- */
.stat,
.panel,
.card,
.wo-card {
  transition:
    transform 0.34s cubic-bezier(0.16, 0.84, 0.28, 1),
    border-color 0.34s ease,
    box-shadow 0.34s ease;
}
.stat:hover,
.card:hover,
.wo-card:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .stat,
  .panel,
  .card,
  .wo-card {
    transition: none;
  }
  .stat:hover,
  .card:hover,
  .wo-card:hover {
    transform: none;
  }
}