/* Generated by tools/build-goonbeat-app.py: the layout part of goonbeat/tools/brand/goonbeat-theme.css. */
/* The grip figure (a hand stroking to the beat, #grip-figure) replaces the session ring in every layout: the
   full view, the wide split, the compact phone split and Mini. #pulse-center keeps its job as the text panel
   (pace, status, rival line, the check-in and welcome cards) but drops every circle it draws: rim, inner ring,
   glow, beat wash, strength arc, progress arc, the aura behind it and Mini's idle drop backing. The pace wave
   line goes too: it runs through the ring's centre and wraps around the ring while idle (the "drop").
   The :is(#gb-*, :root) prefix outranks lab-video.css, which styles Mini's ring with two such ids. */
:is(#gb-a, :root):is(#gb-b, :root):is(#gb-c, :root) body.zen-mode #pulse-center {
  border-color: transparent !important; background: none !important; box-shadow: none !important; transform: none !important;
}
:is(#gb-a, :root):is(#gb-b, :root):is(#gb-c, :root) body.zen-mode #pulse-center::before,
:is(#gb-a, :root):is(#gb-b, :root):is(#gb-c, :root) body.zen-mode #pulse-center::after,
:is(#gb-a, :root):is(#gb-b, :root):is(#gb-c, :root) body.zen-mode #pulse-center > :is(.beat-wash, .pulse-strength-arc, #journey-ring, #journey-percent, #pulse-phase-icon),
:is(#gb-a, :root):is(#gb-b, :root):is(#gb-c, :root) body.zen-mode .rhythm-ring-stage > .pulse-aura,
#lab-mini-backing { display: none !important; }
/* Invisible, not display:none: drawLiveWaveChart measures the canvas and skips the whole beat update (the hand
   included) when it has no size. */
:is(#gb-a, :root):is(#gb-b, :root):is(#gb-c, :root) body.zen-mode .rhythm-ring-stage > .canvas-ambient-container { visibility: hidden !important; }

/* Full view on upright screens: the figure stands centred and the text panel under it holds the BPM, the
   coming-change countdown and the rival line. While the welcome, the starting-level card or the check-in shows,
   the figure steps aside (ui-polish.css) and the panel keeps the ring's size for the card. The desktop full view
   and phones under 640px tall (320x568) are too short to stack them and keep the figure beside the panel. The
   desktop split stacks them too (block after this one): its 480px column is upright on any screen shape. */
@media (max-aspect-ratio: 1 / 1) and (min-height: 640px) {
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) {
    flex-direction: column !important; align-items: center !important; justify-content: center !important;
    padding-bottom: 36px !important; gap: 6px;
  }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage #grip-figure {
    order: -1; height: min(250px, calc(100cqh - 88px)); max-width: none; margin: 0;
  }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) #pulse-center {
    width: min(300px, 92cqw) !important; height: auto !important; min-height: 44px; margin: 0 !important; padding: 0 !important;
    flex: none !important; display: grid !important; grid-template-columns: 100%; justify-items: center; align-content: start; gap: 4px;
  }
  /* The coming-change countdown, the task and the rival line leave their spots inside the old disc and share
     one row under the BPM: only one of them shows at a time (lab-rivals.css, lab-rhythm.css). The ready card
     shares the BPM's row. */
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) #pulse-center > :is(#lab-rival, #lab-rhythm-cd, #lab-task) {
    position: static !important; inset: auto !important; transform: none !important; translate: none !important; max-width: 100% !important; grid-area: 2 / 1;
  }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage #pulse-center > .zen-tempo-center { grid-area: 1 / 1; }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .session-ready .rhythm-ring-stage #pulse-center:not(.counting-down) > .ready-core {
    position: static !important; inset: auto !important; grid-area: 1 / 1;
  }
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage #pulse-center .start-countdown span { font-size: 56px !important; }
}

/* The desktop split (clip left, 480px column right): the invisible ring still took its full size (336px at
   1280x800, 389px at 1920x1080), so the figure beside it ran 32-67px past the right edge. The figure stands
   centred over the BPM instead, as in the upright full view above. */
body.zen-mode.lab-layout-split:not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) {
  flex-direction: column !important; align-items: center !important; justify-content: center !important;
  padding-bottom: 36px !important; gap: 6px;
}
body.zen-mode.lab-video-on.lab-layout-split:not(.lab-split-compact) .rhythm-ring-stage #grip-figure {
  order: -1; height: min(250px, calc(100cqh - 88px)); max-width: none; margin: 0;
}
body.zen-mode.lab-layout-split:not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) #pulse-center {
  width: min(300px, 92cqw) !important; height: auto !important; min-height: 44px; margin: 0 !important; padding: 0 !important;
  flex: none !important; display: grid !important; grid-template-columns: 100%; justify-items: center; align-content: start; gap: 4px;
}
body.zen-mode.lab-layout-split:not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) #pulse-center > :is(#lab-rival, #lab-rhythm-cd, #lab-task) {
  position: static !important; inset: auto !important; transform: none !important; translate: none !important; max-width: 100% !important; grid-area: 2 / 1;
}
body.zen-mode.lab-layout-split:not(.lab-split-compact) .rhythm-ring-stage #pulse-center > .zen-tempo-center { grid-area: 1 / 1; }
body.zen-mode.lab-layout-split:not(.lab-split-compact) .session-ready .rhythm-ring-stage #pulse-center:not(.counting-down) > .ready-core {
  position: static !important; inset: auto !important; grid-area: 1 / 1;
}
body.zen-mode.lab-layout-split:not(.lab-split-compact) .rhythm-ring-stage #pulse-center .start-countdown span { font-size: 56px !important; }

/* Short phones keep the figure beside the panel; the panel narrows so the figure fits (it ran past the right
   edge of a 320px screen). */
@media (max-aspect-ratio: 1 / 1) and (max-height: 639.98px) {
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage:not(:has(.intro-core:not([hidden]), .check-in-core:not([hidden]))) #pulse-center {
    width: min(200px, 52vw) !important; height: min(200px, 52vw) !important;
  }
}

/* Wide screens: a little shorter than ui-polish.css makes it, so the figure's base clears the Faster button
   (it touched it by 1-2px at 1280x800). */
@media (min-aspect-ratio: 1 / 1) {
  body.zen-mode:not(.lab-immersive):not(.lab-split-compact) .rhythm-ring-stage #grip-figure { height: min(250px, calc(100cqh - 80px)); }
}

/* Mini and the compact phone split: lab-video.js sizes the stage 1.5 x 2.4 ring diameters with the ring
   centred, then scales the whole stage. The figure takes the ring's place (from 0.56 to 1.52 diameters down),
   the BPM sits under it (from 1.57), above the controls' cut at about 2 diameters. Mini shows its BPM in the
   tag under the stage; its level number moves from the ring's centre to under the figure. */
body.zen-mode:is(.lab-layout-mini, .lab-split-compact) .rhythm-ring-stage #grip-figure {
  position: absolute !important; left: 50%; top: 23.5%; height: 40%; width: auto; max-width: none;
  margin: 0 !important; transform: translateX(-50%);
}
body.zen-mode.lab-split-compact .rhythm-ring-stage #pulse-center > .zen-tempo-center {
  position: absolute !important; left: 0; right: 0; top: 87%; margin: 0 !important;
}
body.zen-mode.lab-layout-mini #lab-mini-status {
  top: calc(var(--lab-mini-y) + var(--lab-mini-d) * .36); height: auto; transform: translateX(-50%);
}