/* ⭐CASCADE LAYERS (#2920, 2026-09-22): this file is the `nerm` layer. The
   order is declared once, below, and repeated inline by build-web.js so
   the world page fixes it before any stylesheet loads. Inside a layer,
   load order and specificity still decide between THIS file's rules;
   between files, the layer decides, always. */
@layer base, module, skin, nerm, corners;
@layer nerm {
/* world-nerm-beats.css — the tutorial states of the Nerm box (#2385).
 *
 * Two states on top of what world-skin.css already draws, and nothing else:
 * the box OFFERS (there is something to hear, tap it) and the box TEACHES
 * (it is saying a beat rather than an ambient quip).
 *
 * A separate file rather than more of world-skin.css on purpose: three other
 * working copies were holding world-skin.css when this was written, and a new
 * file collides with none of them. It is linked AFTER the skin, so these
 * rules win on order where specificity is equal.
 *
 * ── THE BOX LIVES IN TWO PLACES, AND BOTH NEED SAYING ────────────────────
 *
 * world-target.js builds the Nerm panel into the rail and then lets the FOOT
 * bar adopt it once the foot exists (Wray, 2026-09-05: "move nerms frame so
 * it shows in the bottom rail"). world-skin.css therefore styles it twice,
 * and the foot copy is scoped `#wt-foot .wt-line` — an ID, which out-specifies
 * any plain-class rule here. A single class-only override would silently lose
 * in the configuration that actually ships.
 *
 * Worse, `#wt-foot` is `height: var(--sk-foot); overflow: hidden`, so a box
 * inside it cannot grow at all: unclamping the line there would clip the beat
 * instead of showing it.
 *
 * So while a beat plays, the box STANDS UP out of the bar: `position: fixed`
 * lifts it clear of the foot's clip (no ancestor sets a transform, so a fixed
 * descendant escapes `overflow: hidden`), it grows upward off its `bottom`
 * anchor, and it settles back into the bar when the beat is dismissed.
 *
 * Drawn-chrome rules apply (#1953): bitmap type, parchment, no soft modern
 * glow, no gradient, no rounded card. The pulse is STEPPED rather than eased,
 * so it reads as drawn rather than as a CSS effect.
 */

/* ══ OFFERING: there is a beat waiting, and the box is now pressable ═══════
 *
 * The cue has to survive being parchment on a navy rail, so it is a hard gold
 * edge that blinks in whole steps rather than a soft halo. */
body.skin-majesty .wt-nerm--offers {
  cursor: pointer;
  outline: 2px solid var(--sk-gold, #a28155);
  outline-offset: 2px;
  animation: wt-nerm-offer 1.4s steps(1, end) infinite;
}

/* the foot clips its children, so the offset ring would be shaved there */
body.skin-majesty #wt-foot .wt-nerm--offers {
  outline-offset: 0;
}

/* Blinks gold to NOTHING, not gold to a second colour. The skin's
 * `--sk-gold` is #a28155, a muted gold, so a hardcoded second stop is a
 * guess that can land LIGHTER than the first and make the pulse read
 * backwards in value. Fading to transparent is right whatever the palette
 * does next, and value is what the eye is reading here anyway. */
@keyframes wt-nerm-offer {
  0%   { outline-color: var(--sk-gold, #a28155); }
  50%  { outline-color: transparent; }
  100% { outline-color: var(--sk-gold, #a28155); }
}

/* The face leans in while there is something to say. One pixel step, not a
 * bounce: the art is a 34px stamp and anything smoother reads as blur. */
body.skin-majesty .wt-nerm--offers .wt-face {
  animation: wt-nerm-lean 1.4s steps(1, end) infinite;
}

@keyframes wt-nerm-lean {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* A player who has asked for less motion still gets the outline, because the
 * outline is the information. Only the blinking goes. */
@media (prefers-reduced-motion: reduce) {
  body.skin-majesty .wt-nerm--offers,
  body.skin-majesty .wt-nerm--offers .wt-face {
    animation: none;
  }
}

/* ══ TEACHING: let the beat actually be readable ═══════════════════════════
 *
 * world-skin.css clamps `.wt-line` to TWO lines, which is right for an
 * ambient quip ("floor. riveting.") and wrong for a beat: every beat in the
 * curriculum is two or three sentences and would be cut mid-word. */

/* the rail configuration, where the box is already fixed and free to grow */
body.skin-majesty .wt-nerm--beat {
  align-items: flex-start;
}

body.skin-majesty .wt-nerm--beat .wt-face {
  /* the face stays with the first line rather than centring on a tall box */
  margin-top: 2px;
}

body.skin-majesty .wt-nerm--beat .wt-line {
  -webkit-line-clamp: unset;
  display: block;
  overflow-y: auto;
  /* capped so a long beat on a short phone cannot become a wall of parchment
   * covering the room the player is standing in */
  max-height: 40vh;
}

/* THE FOOT CONFIGURATION. Every selector here carries `#wt-foot` so it beats
 * the skin's own ID-scoped rules; without that the two below lose and the
 * beat is clipped to two lines at the bar's smaller size. */
body.skin-majesty #wt-foot .wt-nerm--beat {
  position: fixed;
  left: calc(var(--fx, 0px) + 12px);
  bottom: calc(var(--sk-foot) + 8px);
  width: 340px;
  max-width: calc(var(--fw, 100vw) - 24px);
  /* clear of the foot itself, which sits at 36 */
  z-index: 60;
  margin-left: 0;
  align-items: flex-start;
}

/* ⭐NERM STEPS ASIDE FOR A LEFT WINDOW (2026-09-12). The left dock used to
 * stop 50px short of the foot to keep off him and grew onto him anyway once
 * the beat panel stood up (measured: Rooms ended at y984, the panel ran
 * y835-1005). Now the window runs to the foot like the right one and every
 * bottom-left Nerm surface moves to the window's right edge while one is
 * open. The shell publishes `--ws-left-edge` (the open sheet's measured
 * right edge, viewport-absolute) on <body> and marks it `ws-left-open`;
 * both come off when the sheet closes, so he walks back. 16 is the air
 * between the parchment and him. Same rule, same number, for the ambient
 * strip in world-skin.css and the guide's bubble in nerm-guide.css. */
body.skin-majesty.ws-left-open #wt-foot .wt-nerm--beat {
  left: calc(var(--ws-left-edge, 0px) + 16px);
}

body.skin-majesty #wt-foot .wt-nerm--beat .wt-line {
  -webkit-line-clamp: unset;
  display: block;
  overflow-y: auto;
  max-height: 40vh;
  /* the bar shrinks him to 15px to fit a strip. Standing up, he gets the
   * reading size the rail copy already uses. */
  font-size: 19px;
}
}
/* end of @layer nerm */