/* The standing trident (Chris, 1 Nov; nav.js draws it in, edge-marks.js draws the metal). The handle's trident rises from the
   edge to stand along the right side; the desk's sections are jewelled beads on its shaft, each gem coloured by what its
   section holds (green all in hand, amber waiting on Chris, red something wrong or late, plain brass nothing to say). The
   bead under the finger swells and its gem brightens, and a card beside it says what it holds. Nothing lies behind it (Chris,
   1 Nov: no wash, no panel, no halo): the forged metal stands straight over the page and only the gems glow, each its own small
   light. Only transform and opacity move while the finger does; no filter anywhere. The colours are fixed, not the theme's. */
@media (max-width: 699px) {
  .nav-rail {
    display: block; position: fixed; inset: 0; z-index: 42; overflow: hidden; pointer-events: none;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  }
  .nav-rail[hidden] { display: none; }
  /* The one element that turns: transform-origin is the middle tine's point (nav.js MID, half edge-marks.js STAND_W). It takes the finger, the page never. */
  .nav-staff {
    position: absolute; left: 0; top: 0; width: 80px; transform-origin: 40px 0; touch-action: none; pointer-events: auto;
    will-change: transform; -webkit-tap-highlight-color: transparent;
  }
  .nav-rail.closing .nav-staff { pointer-events: none; }
  .nav-staff > .mark-standing { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
  .mark-standing .tri-glint { transform: skewX(-18deg) translateX(0); }
  .nav-rail.cancel .nav-staff { opacity: 0.62; }
  .nav-beads { position: absolute; inset: 0; }

  /* A bead: a round cabochon in a brass setting, on a carved ring round the shaft. The button itself is bare (a wide target,
     nothing painted), ::before the ring and ::after the gem with its own small glow, painted in that order whether or not it
     is swollen. */
  .nav-dot {
    --gem: #c9963c; --gem-hi: #fff2c4; --gem-lo: #5f3f10; --glow: rgba(255, 214, 130, 0); --size: 16px;
    position: absolute; left: 40px; width: 40px; height: 40px; min-height: 0; min-width: 0; margin: -20px 0 0 -20px; padding: 0;
    border: 0; border-radius: 50%; color: transparent; font-size: 0; text-shadow: none; box-shadow: none; cursor: pointer;
    background: none;
  }
  .nav-dot::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 6px; margin: -3px 0 0 -12px; border-radius: 3px;
    background: linear-gradient(to bottom, #3d2808, #f6dc96 28%, #c9963c 50%, #7a5418 78%, #2e1e06);
    box-shadow: 0 0 0 0.6px #1b1004, inset 4px 0 0 -3px rgba(46, 30, 6, 0.8), inset -4px 0 0 -3px rgba(46, 30, 6, 0.8);
  }
  .nav-dot::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: var(--size); height: var(--size);
    margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #ffffff 0 7%, var(--gem-hi) 18%, var(--gem) 52%, var(--gem-lo) 92%);
    box-shadow: 0 0 0 1.4px #f0cd76, 0 0 0 2.4px #1b1004, 0 0 7px 1px var(--glow);
  }
  .nav-dot.focus::after { box-shadow: 0 0 0 1.4px #f6dc96, 0 0 0 2.4px #1b1004, 0 0 10px 2px var(--glow); }
  /* Nothing to say: a smaller plain brass bead. */
  .nav-dot:not([class*="lv-"]) { --size: 9px; --gem: #9a6a22; --gem-hi: #e9c47a; --gem-lo: #3d2808; }
  .nav-dot:not([class*="lv-"])::before { width: 18px; height: 5px; margin: -2.5px 0 0 -9px; }
  .nav-dot.lv-calm { --gem: #2fae64; --gem-hi: #b8f3cb; --gem-lo: #0a3f20; --glow: rgba(80, 225, 140, 0.5); }
  .nav-dot.lv-ask { --gem: #ff8a1c; --gem-hi: #ffdca6; --gem-lo: #7a2a00; --glow: rgba(255, 150, 40, 0.65); }
  .nav-dot.lv-alert { --gem: #e2424a; --gem-hi: #ffc6c6; --gem-lo: #5c0a10; --glow: rgba(255, 74, 82, 0.7); }
  .nav-dot.near { transform: scale(1.22); }
  .nav-dot.focus { transform: scale(1.7); z-index: 1; }
  .nav-dot:not([class*="lv-"]).focus { --glow: rgba(255, 226, 150, 0.55); }
  .nav-dot:focus-visible { outline: 2px solid #f6dc96; outline-offset: -6px; }

  /* The Room's lift: round brass buttons with the floor's number, ringed in its level's colour. */
  .nav-rail.lift .nav-dot {
    width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; color: #2a1c06; font: 700 13px/1 var(--mono);
    background: radial-gradient(circle at 34% 28%, #fff1c2, #e2b75e 40%, #c9963c 62%, #7a5418);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(60, 36, 4, 0.45), 0 0 0 2px #1b1004;
  }
  .nav-rail.lift .nav-dot::before, .nav-rail.lift .nav-dot::after { content: none; }
  .nav-rail.lift .nav-dot.lv-calm { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px #2fae64, 0 0 0 3.2px #1b1004, 0 0 8px rgba(80, 225, 140, 0.5); }
  .nav-rail.lift .nav-dot.lv-ask { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px #f0a43a, 0 0 0 3.2px #1b1004, 0 0 8px rgba(255, 176, 64, 0.55); }
  .nav-rail.lift .nav-dot.lv-alert { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 2px #e2424a, 0 0 0 3.2px #1b1004, 0 0 8px rgba(255, 74, 82, 0.6); }
  .nav-rail.lift .nav-dot.focus { transform: scale(1.32); }
  .nav-rail.lift .nav-dot.near { transform: scale(1.1); }

  /* The card: hung beside its bead, left of the trident, above the bead (below it near the head), with a gold thread to it. */
  .nav-card {
    --lv: #e8c46c; --lv-glow: rgba(232, 196, 108, 0.35);
    display: block; position: fixed; right: 66px; top: 0; z-index: 43; box-sizing: border-box;
    width: max-content; min-width: 168px; max-width: min(272px, calc(100vw - 82px));
    padding: 10px 14px 12px 17px; border-radius: 14px; overflow: visible; color: #f7f0e2;
    border: 1px solid rgba(240, 205, 118, 0.42);
    background: linear-gradient(155deg, #2a241b 0%, #17140f 58%, #120f0b 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 244, 207, 0.14);
    pointer-events: none; opacity: 0; scale: 0.9; transform: translateY(-100%); transform-origin: 100% 100%;
  }
  .nav-card.below { transform: translateY(0); transform-origin: 100% 0; }
  .nav-card.on { opacity: 1; scale: 1; }
  .nav-card.lv-calm { --lv: #4fd388; --lv-glow: rgba(80, 225, 140, 0.4); }
  .nav-card.lv-ask { --lv: #ffb347; --lv-glow: rgba(255, 176, 64, 0.45); }
  .nav-card.lv-alert { --lv: #ff6b70; --lv-glow: rgba(255, 74, 82, 0.5); }
  /* The level's stripe down its left side. */
  .nav-card::before {
    content: ''; position: absolute; left: 6px; top: 11px; bottom: 11px; width: 3px; border-radius: 2px;
    background: var(--lv);
  }
  /* The thread from the card's corner to the bead. */
  .nav-card::after {
    content: ''; position: absolute; right: -27px; bottom: -13px; width: 32px; height: 1.5px; transform-origin: 0 50%;
    transform: rotate(27deg); background: linear-gradient(to right, rgba(240, 205, 118, 0.85), var(--lv));
  }
  .nav-card.below::after { bottom: auto; top: -13px; transform-origin: 0 50%; transform: translateY(14px) rotate(-27deg); }
  .nav-card-eyebrow { display: flex; justify-content: space-between; gap: 14px; font: 700 10.5px/1.2 var(--font); letter-spacing: 0.11em; text-transform: uppercase; }
  .nav-card-level { color: var(--lv); }
  .nav-card-count { color: rgba(247, 240, 226, 0.46); font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
  .nav-card-name { display: block; margin-top: 5px; font: 700 19px/1.2 var(--font); letter-spacing: 0.005em; color: #fbf6ea; }
  .nav-card-line { display: block; margin-top: 3px; font: 400 13.5px/1.35 var(--font); color: #cbc1ae; }
  .nav-card-faces { display: flex; gap: 5px; margin-top: 8px; }
  .nav-card-faces:empty { display: none; }
  .nav-face { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #2a241b; box-shadow: 0 0 0 1.5px #c9963c; }
  .nav-face svg { display: block; width: 100%; height: 100%; }
  .nav-card.lift { right: 70px; }
  /* Back at the edge: the card stays solid and readable, its section greyed, and it says letting go stays here. */
  .nav-card.cancel { border-style: dashed; }
  .nav-card.cancel .nav-card-name, .nav-card.cancel .nav-card-faces, .nav-card.cancel .nav-card-eyebrow { opacity: 0.45; }
  .nav-card.cancel .nav-card-line { color: #8f8676; }
  .nav-card.cancel .nav-card-line::after { content: ' · let go to stay here'; color: #fbf6ea; font-weight: 600; }
}
@media (max-width: 699px) and (prefers-reduced-motion: no-preference) {
  .nav-dot { transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .nav-rail.cancel .nav-staff, .nav-staff { transition: opacity 0.18s; }
  .nav-card { transition: opacity 0.14s ease-out, scale 0.34s cubic-bezier(0.3, 1.7, 0.5, 1); }
  .nav-card.on { transition: opacity 0.14s ease-out, scale 0.34s cubic-bezier(0.3, 1.7, 0.5, 1), translate 0.28s cubic-bezier(0.25, 1.3, 0.4, 1), transform 0.2s ease-out; }
  /* A red gem breathes. */
  .nav-rail:not(.lift) .nav-dot.lv-alert::after { animation: nav-gem-breathe 1.8s ease-in-out infinite; }
  /* As it stands, a glint runs once over the head. */
  .nav-rail.up .mark-standing .tri-glint { animation: nav-stand-glint 0.9s ease-out 0.25s 1 both; }
}
@keyframes nav-gem-breathe {
  0%, 100% { box-shadow: 0 0 0 1.4px #f0cd76, 0 0 0 2.4px #1b1004, 0 0 5px 0 rgba(255, 74, 82, 0.5); }
  50% { box-shadow: 0 0 0 1.4px #f0cd76, 0 0 0 2.4px #1b1004, 0 0 11px 2px rgba(255, 74, 82, 0.85); }
}
@keyframes nav-stand-glint { 0% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(110px); } }