/* Local navigation toys. Labels and recorded status remain the controls. */
.main-nav.nav-play {
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px;
  margin:0 0 14px;padding:9px 0 18px;overflow:visible;isolation:isolate;
}
/* Three renders physical pixels at devicePixelRatio; CSS geometry stays inside
   the nav. Otherwise the canvas intrinsic width can stretch the page at zoom. */
.main-nav.nav-play>.worker-art {width:100%;max-width:100%;height:calc(100% + 12px);}
.main-nav.nav-play>button[data-tab] {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-width:0;min-height:91px;margin:0;padding:10px 7px 8px;
  border:1px solid #b9d8d2;border-radius:17px;
  color:#224e55;background:linear-gradient(150deg,#fff,#eaf5f2);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 #b6d3cb,0 7px 14px #153b3210;
  font-size:12px;font-weight:650;line-height:1.2;white-space:normal;filter:none;
  transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
:root[data-theme=dark] .main-nav.nav-play>button[data-tab] {
  color:#d5f4f2;border-color:#347b85;
  background:linear-gradient(150deg,#205665,#103542);
  box-shadow:inset 0 1px 0 #a7f7f526,0 3px 0 #061e2b,0 8px 16px #00131c35;
}
.main-nav.nav-play>button[data-tab]>.nav-play-label {position:relative;z-index:1;max-width:100%;text-align:center;overflow-wrap:normal;line-height:1.3;}
.main-nav.nav-play>button[data-tab]>.nav-play-icon {width:34px;height:34px;flex:0 0 34px;margin:0;overflow:visible;filter:drop-shadow(0 2px 2px #001b2b2b);}
.main-nav.nav-play>button[data-tab]>.nav-play-status {display:block;min-height:13px;color:var(--muted);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.12px;}
.main-nav.nav-play>button[data-nav-cue=running]>.nav-play-status {color:#08776e;}
:root[data-theme=dark] .main-nav.nav-play>button[data-nav-cue=running]>.nav-play-status {color:#8effe7;}
.main-nav.nav-play>button[data-nav-cue=waiting]>.nav-play-status,:root[data-theme=dark] .main-nav.nav-play>button[data-nav-cue=waiting]>.nav-play-status {color:var(--muted);font-weight:500;}
.main-nav.nav-play>button[data-nav-cue=attention]>.nav-play-status {color:#934c25;}
:root[data-theme=dark] .main-nav.nav-play>button[data-nav-cue=attention]>.nav-play-status {color:#ffd09f;}
.main-nav.nav-play>button[data-tab].active {
  color:#08484d;border-color:#1a958b;background:linear-gradient(140deg,#c2f5e7,#83dfd1);
  box-shadow:inset 0 1px 0 #edfff8,0 3px 0 #298f85,0 5px 15px #219f8f22;
}
:root[data-theme=dark] .main-nav.nav-play>button[data-tab].active {
  color:#edfffd;border-color:#5cf5df;background:linear-gradient(145deg,#137b86,#10526d);
  box-shadow:inset 0 1px 0 #bbfff570,0 3px 0 #1badab,0 7px 22px #09bec52e;
}
.main-nav.nav-play>button[data-tab].active>.nav-play-label {text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accent-strong);}
.main-nav.nav-play>button[data-nav-cue=attention] {border-color:#c29265;}
:root[data-theme=dark] .main-nav.nav-play>button[data-nav-cue=attention] {border-color:#d5a064;}
.main-nav.nav-play>button[data-tab]:focus-visible {outline:3px solid var(--accent-strong);outline-offset:5px;z-index:2;}
.main-nav.nav-play>button[data-tab]>.nav-count {position:absolute;right:7px;top:7px;min-width:18px;padding:2px 5px;margin:0;border-radius:6px;font-size:10px;line-height:1.2;z-index:2;}
.main-nav.nav-play>button[data-tab]>.nav-play-flourish {position:absolute;right:5px;top:21px;width:37px;height:21px;color:#70c0ae;opacity:0;pointer-events:none;transform:translate(2px,3px) rotate(-10deg);}
:root[data-theme=dark] .main-nav.nav-play>button[data-tab]>.nav-play-flourish {color:#87eddb;}
.nav-play-flourish svg {width:100%;height:100%;display:block;}
@media(hover:hover) {
  .main-nav.nav-play[data-nav-motion=playing]>button[data-tab]:hover {transform:translateY(-2px);border-color:var(--accent-strong);box-shadow:inset 0 1px 0 #b2f9e755,0 5px 0 #207f8033,0 9px 19px #062f3940;}
  .main-nav.nav-play[data-nav-motion=playing]>button[data-tab]:hover>.nav-play-flourish {opacity:.75;transform:translate(0,-2px) rotate(9deg);transition:opacity 180ms ease,transform 240ms ease;}
}
.main-nav.nav-play[data-nav-motion=playing]>button[data-tab]:active {transform:translateY(2px);box-shadow:inset 0 1px 4px #001f3430,0 1px 0 #092a33;}
.main-nav.nav-play[data-nav-motion=playing]>button.nav-play-pressed>.nav-play-icon {animation:nav-toy-nudge 480ms ease both;}
.main-nav.nav-play[data-nav-motion=playing]>button.nav-play-pressed>.nav-play-flourish {animation:nav-paw-spark 520ms ease both;}
@keyframes nav-toy-nudge {0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) translateY(-2px)}60%{transform:rotate(7deg)}}
@keyframes nav-paw-spark {0%{opacity:0;transform:translate(-2px,5px) rotate(-15deg)}40%{opacity:.8}100%{opacity:0;transform:translate(4px,-7px) rotate(15deg)}}
@media(min-width:701px) and (max-width:1100px) {
  .main-nav.nav-play {grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .main-nav.nav-play>button[data-tab] {display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 11px;min-height:70px;padding:12px 16px;text-align:left;}
  .main-nav.nav-play>button[data-tab]>.nav-play-icon {grid-row:1/3;}
  .main-nav.nav-play>button[data-tab]>.nav-play-label {text-align:left;align-self:end;font-size:13px;}
  .main-nav.nav-play>button[data-tab]>.nav-play-status {align-self:start;font-size:11px;}
}
@media(max-width:700px) {
  .main-nav.nav-play {grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 12px;padding:8px 0 17px;}
  .main-nav.nav-play>button[data-tab] {min-height:86px;border-radius:15px;padding:8px 5px;gap:4px;font-size:12px;}
  .main-nav.nav-play>button[data-tab]>.nav-play-icon {width:30px;height:30px;flex-basis:30px;}
  .main-nav.nav-play>button[data-tab]>.nav-play-status {font-size:11px;min-height:13px;}
  .main-nav.nav-play>button[data-tab]>.nav-play-flourish {right:3px;top:18px;width:28px;}
}
@media(max-width:350px) {
  .main-nav.nav-play {gap:8px;}
  .main-nav.nav-play>button[data-tab] {font-size:11px;padding-inline:4px;min-height:91px;}
}
.main-nav.nav-play[data-nav-motion=paused]>button[data-tab],.main-nav.nav-play[data-nav-motion=paused] .nav-play-icon,.main-nav.nav-play[data-nav-motion=paused] .nav-play-flourish {animation:none!important;transition:none!important;transform:none!important;}
.main-nav.nav-play[data-nav-motion=paused] .nav-play-flourish {display:none;}
@media(prefers-reduced-motion:reduce) {
  .main-nav.nav-play>button[data-tab],.main-nav.nav-play .nav-play-icon,.main-nav.nav-play .nav-play-flourish {animation:none!important;transition:none!important;transform:none!important;}
  .main-nav.nav-play .nav-play-flourish {display:none;}
}
@media(forced-colors:active) {
  .main-nav.nav-play>button[data-tab] {border:1px solid ButtonText;box-shadow:none;}
  .main-nav.nav-play>button[data-tab].active {outline:2px solid Highlight;}
  .main-nav.nav-play .nav-play-flourish {display:none;}
}

/* Waiting is quiet text, not an alert. The action badge belongs to the task queue. */
.main-nav.nav-play>button[data-tab]::after {display:none;}
.main-nav.nav-play>button[data-tab]>.nav-play-attention,.main-nav.nav-play>button[data-tab]>.nav-play-work-fallback {display:none;position:absolute;right:7px;top:7px;pointer-events:none;}
.main-nav.nav-play>button[data-nav-cue=attention]>.nav-play-attention {display:grid;place-items:center;width:17px;height:17px;border-radius:6px;background:#f5d198;color:#57330e;font-size:12px;font-weight:800;line-height:1;box-shadow:0 0 0 1px #a97837;}
.main-nav.nav-play>button[data-nav-cue=running]>.nav-play-work-fallback {display:block;width:22px;height:22px;}
.main-nav.nav-play .nav-play-work-fallback svg {display:block;width:100%;height:100%;}
.main-nav.nav-play[data-activity-art=ready]>button[data-nav-cue=running]>.nav-play-work-fallback {display:none;}