/* Idlewild Design — the STAGE layer: the glass and the nine elements.
 *
 * Load order on every room page:
 *   tokens.css  →  style.css  →  stage.css  →  <room>.css
 *
 * STAGE ladder PR 2. Fixes room-audit F3 (the stage was a rectangle, not
 * glass) and F4 (boxes inside boxes). It replaces the SURFACE half of
 * .desk-stage in style.css and keeps its grid half, so no markup changes for
 * the glass itself.
 *
 * The values come from the token floor. A room still declares only
 * --room-hue / --room-field / --room-warm; everything here derives from
 * --room-hue, which is why one file skins sixteen rooms.
 *
 * Repo token names differ from the design-pack draft in two places, and this
 * file uses the repo's: --radius-md (there is no --radius) and --font-mono
 * (there is no --mono).
 */

/* ---------- 1 · Ice glass ---------- */
/* The one bordered surface in a room. Anything inside it is frameless. */
.ice,
.desk-stage {
  position: relative;
  border-radius: var(--radius-md, 16px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--room-hue) 14%, transparent), transparent 44%),
    color-mix(in srgb, #0a1016 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--room-hue) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--room-hue) 26%, transparent),
    inset 0 0 48px color-mix(in srgb, var(--room-hue) 7%, transparent),
    0 26px 70px rgba(0, 0, 0, .5);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

/* Without backdrop-filter the translucent fill reads as mud over the set, so
   fall back to a near-opaque field rather than a blur that never happens. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ice,
  .desk-stage {
    background: color-mix(in srgb, #0a1016 84%, transparent);
  }
}

/* .desk-stage-shell used to paint a second fill on top of the stage. The glass
   already carries the top-light gradient, so the shell variant is now a
   no-op kept for the markup that still names it. */
.desk-stage-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--room-hue) 14%, transparent), transparent 44%),
    color-mix(in srgb, #0a1016 58%, transparent);
}

/* ---------- 2 · Corner bevel ---------- */
/* Opt-in. A bevelled surface trades the radius for cut corners and paints its
   own hairline, because clip-path removes the border. */
.ice--bevel {
  --cut: 14px;
  border-radius: 0;
  border: 0;
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.ice--bevel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  clip-path: inherit;
  background: color-mix(in srgb, var(--room-hue) 42%, transparent);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- 3 · No boxes inside the glass ---------- */
/* F4. Inner regions separate with a rule, never with another surface. */
.desk-stage-work,
.desk-stage-panel {
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--room-hue) 18%, transparent);
  border-radius: 0;
  box-shadow: none;
  padding: .7rem 0 0;
}

/* Guard: a card may never live in the glass. This holds the line even where
   the markup still carries the class. */
.desk-stage .card {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---------- 4 · Floor lattice ---------- */
.hud-grid {
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--room-hue) 7%, transparent) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--room-hue) 7%, transparent) 0 1px, transparent 1px 30px);
  transform: perspective(460px) rotateX(64deg);
  transform-origin: bottom;
}

/* ---------- 5 · Scan sweep ---------- */
.hud-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.hud-sweep::after {
  content: "";
  position: absolute;
  inset: -100% 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--room-hue) 40%, transparent), transparent);
  animation: hud-sweep 7s ease-in-out infinite;
}
@keyframes hud-sweep {
  0%, 100% { transform: translateY(0);    opacity: 0; }
  10%      {                              opacity: .12; }
  60%      { transform: translateY(520%); opacity: .12; }
  75%      {                              opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-sweep::after { display: none; animation: none; }
}

/* ---------- 6 · Tick rail ---------- */
.hud-tick {
  height: 10px;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--room-hue) 55%, transparent) 0 1px,
      transparent 1px 12px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 88%, transparent);
          mask-image: linear-gradient(90deg, #000 0 88%, transparent);
}
.hud-tick--major { height: 16px; }

/* ---------- 7 · Frameless chip ---------- */
/* A label over a value. No border, no fill — the glass is the surface. */
.hud-chip {
  display: grid;
  gap: 2px;
}
.hud-chip > .k {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--room-hue) 82%, var(--ink));
}
.hud-chip > .v {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
}

/* .hud-chip-k is the same label on its own — a word that needs no value under
   it. It is what the standard means by "words go in a chip": numbers live in
   brackets and hexagons, words live here. Ported from the Design System's
   styles/stage.css, where the Kitchen's corners and CHECK marks needed it and
   the repo had no equivalent. */
.hud-chip-k {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--room-hue) 82%, var(--ink));
}

/* ---------- 7b · Inner structure ---------- */
/* The standard's answer to a panel inside the glass. The glass is the only
   bordered surface in a room, so inner structure is a hairline top rule and
   spacing — never a second box. Any room reaching for .card inside .ice or
   .desk-stage wants this instead. */
.ice-region {
  padding: .75rem 0 0;
  margin-top: .9rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--room-hue) 22%, transparent);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.ice-region:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- 8 · Station rail ---------- */
/* No trapped content: the rail carries the stations, the week, the reference
   material — all of it readable by scrolling the page. It owned a scrollbar
   until 2026-09-12. */
.hud-rail {
  display: grid;
  gap: .7rem;
  align-content: start;
}
.hud-rail > * {
  padding: .35rem 0 .35rem .65rem;
  border-left: 1px solid color-mix(in srgb, var(--room-hue) 30%, transparent);
}
.hud-rail h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--room-hue) 82%, var(--ink));
}

/* ---------- 9 · Primary action ---------- */
/* One per room. 56px so it clears the 44px touch floor with room to spare. */
.act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--room-hue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--room-hue) 40%, transparent);
  border-radius: var(--radius-sm, 8px);
  color: var(--ice-hot);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.act:hover  { background: color-mix(in srgb, var(--room-hue) 16%, transparent); }
.act:active { background: color-mix(in srgb, var(--room-hue) 22%, transparent); }
.act:focus-visible {
  outline: 2px solid var(--ice-hot);
  outline-offset: 2px;
}

/* ---------- 10 · Step navigation ---------- */
/* The house Back / Next pair for a lesson room. Quiet chrome, not the one
 * action: 44px targets rather than the .act 56px, brass-free, and sitting on
 * the room hue at a lower strength so it never competes with Done.
 *
 * The readout in the middle is a .hud-chip, so "STEP 2 OF 7" is set in the
 * house label style and the count itself is in the numeral face. */
.step-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--room-hue) 22%, transparent);
}
.step-nav-count {
  justify-items: center;
  text-align: center;
}
.step-nav-btn {
  min-height: 44px;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--room-hue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--room-hue) 30%, transparent);
  border-radius: var(--radius-sm, 8px);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.step-nav-btn:hover  { background: color-mix(in srgb, var(--room-hue) 16%, transparent); }
.step-nav-btn:active { background: color-mix(in srgb, var(--room-hue) 22%, transparent); }
.step-nav-btn:focus-visible {
  outline: 2px solid var(--ice-hot);
  outline-offset: 2px;
}
/* An end of the pack. Dimmed and inert, but still occupying its space so the
 * row does not reflow under the reader when they reach step one or the last. */
.step-nav-btn:disabled {
  opacity: .45;
  pointer-events: none;
}

/* Phone: the labels keep their words, the readout drops under them rather
 * than squeezing all three onto one line. */
@media (max-width: 26rem) {
  .step-nav {
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
  }
  .step-nav-count {
    grid-row: 1;
    grid-column: 1 / -1;
  }
}

/* ---------- 11 · Lesson glossary ---------- */
/* A disclosure, not a panel. The glass is the room's only bordered surface, so
 * this is a hairline top rule and spacing — the .ice-region treatment — rather
 * than a second box inside the first.
 *
 * The summary carries a count, because the reader decides whether to spend the
 * click before they spend it. */
.lesson-glossary {
  margin-top: .9rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--room-hue) 22%, transparent);
}
.lesson-glossary-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: 0 .2rem;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--room-hue) 82%, var(--ink));
  cursor: pointer;
  list-style: none;
}
.lesson-glossary-summary::-webkit-details-marker { display: none; }
/* The house has no icon set inside a room, so the affordance is geometry: a
 * hairline chevron drawn from a rotated square, turning a quarter on open. */
.lesson-glossary-summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 260ms cubic-bezier(.32,.08,.24,1);
}
.lesson-glossary[open] > .lesson-glossary-summary::before {
  transform: rotate(45deg);
}
.lesson-glossary-summary:focus-visible {
  outline: 2px solid var(--ice-hot);
  outline-offset: 2px;
}
.lesson-glossary-count {
  margin-left: auto;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.lesson-glossary-list {
  display: grid;
  gap: .7rem;
  margin: .4rem 0 .3rem;
  padding: 0;
}
.lesson-glossary-entry > dt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
}
/* What the letters stand for. This is the thing that was asked for, so it sits
 * beside the term at full ink rather than inside the sentence below it. */
.lesson-glossary-stands {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
.lesson-glossary-entry > dd {
  margin: .18rem 0 0;
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .lesson-glossary-summary::before { transition: none; }
}

/* ---------- Wire art wrapper ---------- */
.wire {
  display: grid;
  place-items: center;
  min-height: 0;
  background: radial-gradient(70% 60% at 50% 62%, color-mix(in srgb, var(--room-hue) 16%, transparent), transparent);
}
.wire img {
  max-width: 100%;
  height: auto;
  filter: saturate(.65) brightness(1.05) contrast(1.05);
}