style.css

@import url('./style/blockly.css');
@import url('./ui/colourpicker.css');

:root {
  --app-height: 100dvh;
  --dynamic-offset: 65px;

  /* iOS landscape reserves a strip beside the page for the notch. body is padded
     by these, so anything sized against 100vw must subtract them or its right
     edge lands off-screen. */
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --view-width: calc(100vw - var(--safe-left) - var(--safe-right));

  /* Primary Brand Colors */
  --color-primary: #511d91;
  --color-primary-light: #fc3;
  --color-primary-dark: #004d4d;

  /* Dedicated accent for the How tos panel — the same rose-pink used on
     flipcomputing.com's own how-to examples (their "Mark as Complete"
     button, rgb(206, 74, 147)). Kept as its own token (not reused from
     --color-primary) so this one panel's look can be changed without
     touching the app's brand purple used everywhere else. Not overridden
     per-theme (unlike --color-primary above) — it's a fixed brand accent
     for this one feature, not a themed UI colour. */
  --color-howto-accent: #ce4a93;

  /* Background Colors */
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.1);
  --color-bg-glass: rgba(1, 1, 1, 0.5);
  --color-bg-glass-light: rgba(255, 255, 255, 0.5);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.7);
  --color-bg-glass-focused: rgba(255, 255, 255, 0.9);

  /* Button Colors */
  --color-button-bg: #f0f0f0;
  --color-button-bg-hover: #d0d0d0;
  --color-button-primary: #004d4d;
  --color-button-scroll: rgba(76, 76, 76, 0.5);

  /* Text Colors */
  --color-text-primary: #000000;
  --color-text-on-primary: #ffffff;
  --color-text-brand: #511d91;
  --color-text-loading: #511d91;

  /* Border Colors */
  --color-border: #ddd;
  --color-border-light: #eee;

  /* Loading Screen Colors */
  --color-loading-bg: #fcfaf1;
  --color-loading-spinner: #e3e3e3;
  --color-loading-spinner-active: #511d91;

  /* Focus Colors */
  --color-focus: #fc3;
  --color-focus-outline: #0a84ff;

  /* Light-theme icon-button palette. Kept explicitly light-only below so
     grouped tools do not replace the established colours of other themes. */
  --color-light-tool-ink: var(--color-primary);
  --color-light-icon-hover: var(--color-button-bg-hover);
  --color-light-icon-hover: color-mix(in srgb, var(--color-light-tool-ink) 20%, transparent);
  /* A tint of the ink rather than a neutral grey, so the group reads as part
     of the same purple treatment as the icons on it. */
  --color-light-icon-bar: #cec0e0;
  --color-light-icon-bar: color-mix(in srgb, var(--color-light-tool-ink) 28%, var(--color-bg));

  /* Menu Colors */
  --color-menu-hover: var(--color-button-bg-hover);
  --color-menu-item: #511d91;
  --color-panel-bg: #efead4;
  --color-menu: #fcfaf1;

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);

  /* Error banner */
  --color-error-bg: #511d91;
  --color-error-text: #ffffff;
  --color-error-border: #38146a;
}

/* Dark theme */
[data-theme='dark'] {
  /* Core colours */
  --color-bg: #2c2c2c;
  --color-bg-alt: #2a2a2a;
  --color-text: #000000;
  --color-text-primary: #bababa;
  --color-primary: #888888;
  --color-text-brand: #bababa;
  --color-menu-item: #888888;
  --color-muted: #555555;
  --color-border: #555555;
  --color-border-light: #333333;
  --color-border-highlight: #555555;
  --color-search-highlight: #777777;
  --color-shadow: rgba(0, 0, 0, 0.7);
  --color-shadow-light: rgba(0, 0, 0, 0.5);
  --color-shadow-medium: rgba(0, 0, 0, 0.7);

  /* Buttons */
  --color-button-bg: var(--color-bg-alt);
  --color-button-bg-hover: #333333;
  --color-button-bg-focus: #444444;
  --color-button-primary: #bababa;
  --color-button-scroll: rgb(186, 186, 186, 0.5);
  --color-text-on-primary: #bababa;

  /* Loading screen gradient */
  --color-loading-gradient-start: var(--color-bg);
  --color-loading-gradient-end: var(--color-bg-alt);

  /* Spinner */
  --color-spinner-border: var(--color-muted);
  --color-spinner-border-top: var(--color-primary);

  /* Dropdown & menus */
  --color-dropdown-text: var(--color-text);
  --color-menu-item-text: var(--color-text);
  --color-dropdown-menu-bg: var(--color-bg);
  --color-dropdown-menu-hover: rgba(0, 0, 0, 0.05);
  --color-dropdown-menu-border: var(--color-dropdown-menu-border, 1px solid rgba(0, 0, 0, 0.1));

  --color-dropdown-bg: #333333;

  --color-menu: var(--color-dropdown-bg);
  --color-menu-hover: var(--color-button-bg-hover);
  --color-menu-item-hover: #444444;

  /* Overlays */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.5);
  --color-overlay-modal: rgba(0, 0, 0, 0.4);

  /* Scroll buttons */
  --color-scroll-button-bg: rgba(0, 0, 0, 0.5);

  /* Error banner */
  --color-error-bg: #38146a;
  --color-error-text: #ffffff;
  --color-error-border: #a97fe0;
}

/* Dark high-contrast theme */
[data-theme='dark-contrast'] {
  /* Core colours */
  --color-bg: #090909;
  --color-bg-alt: #2a2a2a;
  --color-text: #cdcdcd;
  --color-text-primary: #cdcdcd;
  --color-primary: #888888;
  --color-text-brand: #cdcdcd;
  --color-menu-item: #888888;
  --color-muted: #555555;
  --color-border: #555555;
  --color-border-light: #333333;
  --color-border-highlight: #555555;
  --color-search-highlight: #777777;
  --color-shadow: rgba(0, 0, 0, 0.7);
  --color-shadow-light: rgba(0, 0, 0, 0.5);
  --color-shadow-medium: rgba(0, 0, 0, 0.7);

  /* Buttons */
  --color-button-bg: var(--color-bg-alt);
  --color-button-bg-hover: #333333;
  --color-button-bg-focus: #444444;
  --color-button-scroll: rgba(205, 205, 205, 0.5);
  --color-button-primary: #cdcdcd;
  --color-text-on-primary: #cdcdcd;

  /* Loading screen gradient */
  --color-loading-gradient-start: var(--color-bg);
  --color-loading-gradient-end: var(--color-bg-alt);

  /* Spinner */
  --color-spinner-border: var(--color-muted);
  --color-spinner-border-top: var(--color-primary);

  /* Dropdown & menus */
  --color-dropdown-text: var(--color-text);
  --color-menu-item-text: var(--color-text);
  --color-dropdown-menu-bg: var(--color-bg);
  --color-dropdown-menu-hover: rgba(0, 0, 0, 0.05);
  --color-dropdown-menu-border: var(--color-dropdown-menu-border, 1px solid rgba(0, 0, 0, 0.1));

  --color-dropdown-bg: #333333;

  --color-menu: var(--color-dropdown-bg);
  --color-menu-hover: var(--color-button-bg-hover);
  --color-menu-item-hover: #444444;

  /* Overlays */
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-overlay-light: rgba(0, 0, 0, 0.5);
  --color-overlay-modal: rgba(0, 0, 0, 0.4);

  /* Scroll buttons */
  --color-scroll-button-bg: rgba(0, 0, 0, 0.5);

  /* Error banner */
  --color-error-bg: #38146a;
  --color-error-text: #ffffff;
  --color-error-border: #c9a7f5;
}

/* High‑contrast theme */
[data-theme='contrast'] {
  /* Primary Brand Colors */
  --color-primary: #511d91;
  --color-primary-light: #fc3;
  --color-primary-dark: #004d4d;

  /* Background Colors */
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);
  --color-bg-overlay-light: rgba(0, 0, 0, 0.1);
  --color-bg-glass: rgba(1, 1, 1, 0.5);
  --color-bg-glass-light: rgba(255, 255, 255, 0.5);
  --color-bg-glass-hover: rgba(255, 255, 255, 0.7);
  --color-bg-glass-focused: rgba(255, 255, 255, 0.9);

  /* Button Colors */
  --color-button-bg: #f0f0f0;
  --color-button-bg-hover: #d0d0d0;
  --color-button-primary: #ffffff;
  --color-button-scroll: rgba(0, 0, 0, 0.5);

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-on-primary: #ffffff;
  --color-text-brand: #ffffff;
  --color-text-loading: #511d91;

  /* Border Colors */
  --color-border: #ffffff;
  --color-border-light: #cccccc;

  /* Loading Screen Colors */
  --color-loading-bg: #fcfaf1;
  --color-loading-spinner: #e3e3e3;
  --color-loading-spinner-active: #511d91;

  /* Focus Colors */
  --color-focus: #fc3;

  /* Menu Colors */
  --color-menu: var(--color-bg);
  --color-menu-hover: var(--color-button-bg-hover);
  --color-menu-item: #ffffff;

  /* Shadow Colors */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.2);

  /* Error banner */
  --color-error-bg: #511d91;
  --color-error-text: #ffffff;
  --color-error-border: #ffffff;
}

/* Low-vision theme */
[data-theme='low-color'] {
  --color-bg: #121212;
  --color-bg-alt: #1e1e1e;
  --color-text: #f0f0f0;
  --color-text-primary: #f0f0f0;
  --color-text-brand: #f0f0f0;
  --color-menu-item: #f0f0f0;
  --color-muted: #cfcfcf;
  --color-border: #e0e0e0;
  --color-border-light: #cfcfcf;
  --color-shadow: rgba(0, 0, 0, 0.7);
  --color-shadow-medium: rgba(0, 0, 0, 0.7);
  --color-button-bg: #1e1e1e;
  --color-button-bg-hover: #2a2a2a;
  --color-button-bg-focus: #2f2f2f;
  --color-button-primary: #f0f0f0;
  --color-button-scroll: rgba(224, 224, 224, 0.5);
  --color-text-on-primary: #f0f0f0;
  --color-menu: var(--color-bg-alt);
  --color-menu-hover: var(--color-button-bg-hover);

  /* Error banner */
  --color-error-bg: #38146a;
  --color-error-text: #ffffff;
  --color-error-border: #d9c2f0;
}

::placeholder {
  color: var(--color-text-primary);
}

[data-theme='contrast'] #exampleButton {
  color: white !important;
  background-color: var(--color-bg) !important;
  border-style: solid;
  border-width: 1px;
}

/* These themes drop the brand fill, which left the button reading as bare text.
   An inset ring restores the affordance the way the contrast theme's border
   does, without widening the row: the Projects row is what the 360px layout is
   measured against, and there is no global border-box here. */
[data-theme='dark'] #exampleButton,
[data-theme='dark-contrast'] #exampleButton,
[data-theme='low-color'] #exampleButton {
  background-color: var(--color-bg) !important;
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Loading Screen Styles */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-loading-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-bird {
  width: 120px !important;
  height: 120px !important;
  max-width: 120px;
  max-height: 120px;
  animation: float 2s ease-in-out infinite;
  display: block;
  order: 1;
}

.loading-logo {
  width: 200px;
  height: auto;
  margin: 10px 0;
  order: 2;
  opacity: 0;
  animation: fadeInLogo 0.5s ease-in 0.3s forwards;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-loading-spinner);
  border-top: 4px solid var(--color-loading-spinner-active);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  order: 3;
}

.loading-text {
  color: var(--color-text-loading);
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  font-family: 'Atkinson Hyperlegible Next', 'Asap', Helvetica, Arial, Lucida, sans-serif;
  order: 4;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide main content by default - more aggressive for deployment */
#flockeditor {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
  visibility: hidden;
}

/* Show main content when loading is complete */
body:not(.loading) #flockeditor {
  opacity: 1 !important;
  pointer-events: auto;
  visibility: visible;
}

/* Global Styles */
html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  height: var(--app-height);
  width: 100vw;
  background: var(--color-bg);
  overscroll-behavior: none;
}

/* Purple strip behind the iOS status bar — only visible when there's a real inset (0 on desktop, no flash) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: #511d91;
  pointer-events: none;
}

body {
  display: flex;
  gap: 0;
  box-sizing: border-box;
  font-family:
    'Atkinson Hyperlegible Next', 'Asap', Helvetica, Arial, Lucida, sans-serif !important;
  background: var(--color-bg);
  color: var(--color-text-primary);
  padding-top: env(safe-area-inset-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Form Elements */
input,
textarea,
button {
  font-family: inherit;
  -webkit-user-select: none; /* Disable selection in Safari and Chrome */
  -moz-user-select: none; /* Disable selection in Firefox */
  -ms-user-select: none; /* Disable selection in IE/Edge */
  user-select: none; /* Standard syntax */
  -webkit-touch-callout: none; /* Disable callout in mobile Safari */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  background: var(--color-bg);
  color: var(--color-text-primary);
}

#exampleButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Canvas Styles */
#renderCanvas {
  width: 100%;
  height: auto;
  align-self: center;
  flex: 0 0 auto;
  touch-action: none;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

.ui-control-gizmo {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.ui-control-gizmo-box {
  position: absolute;
  inset: -3px;
  border: 2px dashed var(--color-focus-outline);
  border-radius: 6px;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}

.ui-control-gizmo-arrow {
  position: absolute;
  display: flex;
  padding: 6px;
  pointer-events: auto;
  touch-action: none;
}

.ui-control-gizmo-label {
  font: bold 18px/1 sans-serif;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

.ui-control-gizmo-arrow-x {
  align-items: center;
  gap: 2px;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.ui-control-gizmo-arrow-y {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.ui-colour-target {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid var(--color-focus-outline);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-focus-outline) 15%, transparent);
}

.ui-control-gizmo.dragging .ui-control-gizmo-arrow {
  opacity: 0.6;
}

/* Layout Styles */
#maincontent {
  width: var(--view-width);
  height: calc(var(--app-height) - 50px - env(safe-area-inset-top));
  display: flex;
  margin: 0;
  gap: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
}

#canvasArea {
  position: relative;
  /* The same grey .blocklySvg carries, so the strip under the canvas reads as
     one surface with the workspace beside it. */
  background-color: #ebebeb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#codePanel {
  position: relative;
  border-top: 1px solid #aaa;
  box-sizing: border-box;
}

#blocklyZoomControls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 8px;
  background-color: var(--color-bg);
  box-shadow: 0px 0px 10px var(--color-shadow);
  z-index: 100;
}

[data-theme='light'] #blocklyZoomControls {
  background-color: var(--color-menu);
}

[data-theme='light'] #blocklyZoomControls .bigbutton:not(#blockHintsBtn) {
  background-color: var(--color-menu);
}

.block-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  /* No global box-sizing reset in this project: without this the padding and
     border sit outside the width cap and the box overruns the left edge on a
     narrow workspace. */
  box-sizing: border-box;
  width: min(320px, calc(100% - 16px));
  margin: 0;
  padding: 6px 12px;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0px 0px 10px var(--color-shadow);
  border-radius: 8px;
  z-index: 90;
  text-align: left;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.block-hint[hidden] {
  display: none;
}

.block-hint__icon {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.1em;
  color: var(--color-text-brand);
}

.block-hint__text {
  margin: 0;
}

/* The box itself ignores the pointer so it never blocks the workspace; the
   close button is the one part that takes clicks. */
.block-hint__close {
  flex: none;
  margin-left: auto;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.1;
  cursor: pointer;
  pointer-events: auto;
}

#blocklyZoomControls .toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--color-border);
  margin: 0 4px;
}

[data-theme='light'] #canvasArea {
  background-color: var(--color-menu);
}

[data-theme='light'] header[role='banner'] {
  background-color: var(--color-menu);
}

[data-theme='dark'] #canvasArea {
  background-color: #2c2c2c !important;
}

[data-theme='contrast'] #canvasArea {
  background-color: #000000 !important;
}

[data-theme='dark-contrast'] #canvasArea {
  background-color: #090909 !important;
}

[data-theme='low-color'] #canvasArea {
  background-color: #121212 !important;
}

#menu {
  display: flex;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  align-items: center;
  justify-content: space-between;
  /* The header spans #flockeditor, which is as wide as #maincontent, so the menu
     needs its own bound: the body's content box, not the raw viewport. */
  max-width: var(--view-width);
  gap: 5px;
  z-index: 10;
  background-color: var(--color-bg);
  padding: 0px 4px 2px 0;
  border-radius: 5px;
  box-shadow: 0px 0px 10px var(--color-shadow);
  box-sizing: border-box;
}

[data-theme='light'] #menu {
  background-color: var(--color-menu);
}

[data-theme='light'] #menu .bigbutton:not(#exampleButton) {
  background-color: var(--color-menu);
}

#menuleft,
#menumiddle,
#menuright {
  display: flex;
  align-items: center;
}

#codePanelButtons {
  display: flex;
  height: 50px;
  justify-content: space-between;
  flex-shrink: 0;
  border: none;
}

/* Buttons */
.bigbutton {
  display: inline-block;
  margin: 0 0;
  margin-left: 3px;
  padding: 4px;
  font-size: 18px;
  min-height: 30px;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  border: none;
  /* An outline takes the element's own corners, so this is what shapes the
     focus ring: a rounded square around the icon, matching the gizmo bar. */
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
}

#exampleButton {
  background-color: var(--color-primary);
  color: #ffffff;
  /* Pill shape matching the .project-action-button rows in the Projects popup. */
  border-radius: 18px;
}

/* Matched to the icon buttons: its own id-level radius outranks theirs. */
#exampleButton:focus-visible {
  border-radius: 0;
}

#exampleButton:hover {
  background-color: #3d166d;
}

/* Gizmo Buttons */
.gizmo-buttons {
  font-family: 'Atkinson Hyperlegible Next', 'Asap', Helvetica, Arial, Lucida, sans-serif;
  /* No padding: the strip sits flush against the canvas above it and the info
     panel below it. */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  flex-direction: column;
}

/* The status floats over the canvas rather than reserving a line under the
   strip, so the column's height goes to the info panel. It sits at the top:
   the on-screen touch controls own the bottom corners. It stays in the layout
   when empty — only its chrome is hidden — because a live region has to be
   present for a screen reader to announce into it. */
.gizmo-toast {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: fit-content;
  /* Border-box so the padding counts inside the cap, or a long message runs
     right up to the canvas edge. */
  box-sizing: border-box;
  /* Leaves the same 8px on the right as the left inset above takes. */
  max-width: calc(100% - 20px);
  padding: 6px 6px 6px 10px;
  border-radius: 8px;
  background-color: var(--color-bg);
  box-shadow: 0 2px 6px var(--color-shadow-medium);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.gizmo-toast:has(.gizmo-status:not(:empty)) {
  opacity: 1;
  pointer-events: auto;
}

.gizmo-toast:not(:has(.gizmo-status:not(:empty))) .gizmo-toast__close {
  display: none;
}

.capture-indicator {
  position: absolute;
  right: 12px;
  top: 8px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  background-color: var(--color-bg-glass);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 4px 12px var(--color-shadow-medium);
}

.capture-indicator[hidden] {
  display: none;
}

.capture-indicator__dot {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e53935;
  animation: capture-pulse 1.2s ease-in-out infinite;
}

.capture-indicator--recording .capture-indicator__dot {
  display: block;
}

@keyframes capture-pulse {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .capture-indicator__dot {
    animation: none;
  }
}

.capture-indicator__time {
  font-variant-numeric: tabular-nums;
}

.capture-indicator__stop {
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background-color: var(--color-bg-glass-focused);
  color: #000;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.capture-indicator__stop:hover {
  background-color: #fff;
}

.capture-indicator__stop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.gizmo-status {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.gizmo-toast__close {
  flex: none;
  padding: 0 4px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  line-height: 1.1;
  cursor: pointer;
}

.gizmo-status__axis {
  font-weight: bold;
}

.gizmo-status__reading {
  display: inline-block;
  /* Steady width and digit width, so 1.2 -> 0 doesn't shift the axis beside it. */
  min-width: 4.5rem;
  font-variant-numeric: tabular-nums;
}

/* --axis-color is set inline, from AXIS_HEX. */
.gizmo-status__reading::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-right: 6px;
  vertical-align: -0.12em;
  background: var(--axis-color);
}

/* The strip is the page background, like the app's other icon-button areas;
   the buttons on it carry the colour. Everything here is scoped to the strip:
   the .gizmo-button base styles stand alone for the colour picker's own
   buttons, which reuse the class outside it. */
.gizmo-buttons-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Between groups only — the buttons inside a group run together. */
  gap: 5px;
  width: 100%;
  padding: 7px 4px;
  box-sizing: border-box;
  /* The rule between the strip and the panel below it. It lives here rather
     than on the panel's top edge so resizeCanvas(), which measures this bar,
     keeps counting it against the canvas height. */
  border-bottom: 1px solid transparent;
  background-color: transparent;
}

/* The docked panel is its own surface below the toolbar, ruled off from it and
   the same whether or not a tab is open. Phone and narrow-landscape panels are
   modal, so they keep the canvas area's ground and no rule. */
@media (min-width: 1025px), (min-width: 601px) and (orientation: portrait) {
  #info-panel {
    background-color: var(--color-bg);
  }

  .gizmo-buttons-inner {
    border-bottom-color: var(--color-border);
    border-bottom-color: color-mix(in srgb, var(--color-text-primary) 25%, transparent);
  }
}

/* Four intact groups fit as 2+3 and 3+2 buttons inside this five-button
   content width, giving portrait phones two balanced centred rows. */
@media (max-width: 600px) and (orientation: portrait) {
  .gizmo-buttons-inner {
    width: min(100%, 228px);
    margin-inline: auto;
  }
}

.gizmo-undo-redo {
  display: none;
}

@media (max-width: 600px) and (orientation: portrait) {
  #gizmoButtons {
    flex-direction: row;
  }

  #gizmoButtons::before {
    content: '';
    flex: 1 1 0;
    min-width: 0;
  }

  #gizmoButtons .gizmo-buttons-inner {
    flex: none;
  }

  .gizmo-undo-redo {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-self: flex-end;
    align-items: flex-end;
    gap: 4px;
    padding: 0 8px 8px 0;
  }

  .gizmo-undo-redo-row {
    display: flex;
    gap: 4px;
  }

  .gizmo-undo-redo .bigbutton {
    background-color: transparent;
  }
}

.gizmo-button {
  font-family: 'Atkinson Hyperlegible Next', 'Asap', Helvetica, Arial, Lucida, sans-serif;
  padding: 7px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
  background-color: var(--color-button-primary);
}

/* Related tools run together into one pill, the way MakeCode groups its
   toolbar: no gap inside a group, only the group's outer ends rounded. */
.gizmo-group {
  display: flex;
  border-radius: 10px;
  background-color: var(--color-button-primary);
}

/* No rule between neighbours in a pill: the padding does the separating. */
.gizmo-buttons-inner .gizmo-button,
.gizmo-undo-redo .gizmo-button {
  padding: 7px;
  background-color: transparent;
  border-radius: 0;
}

.gizmo-buttons-inner .gizmo-button path,
.gizmo-undo-redo .gizmo-button path {
  fill: var(--color-bg);
}

/* #shape-menu wraps its button to anchor the shapes dropdown, so each end has
   to reach through it as well as matching a bare button. */
.gizmo-group > :first-child,
.gizmo-group > :first-child > .gizmo-button {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.gizmo-group > :last-child,
.gizmo-group > :last-child > .gizmo-button {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Keep the grouped toolbar at the compact size used by the original buttons. */
.gizmo-buttons-inner .gizmo-button svg {
  width: 20px;
  height: 20px;
}

/* The bar carries its own padding, so the shape button's standalone left
   margin would push the first icon out of line with the rest. */
.gizmo-buttons-inner #shape-menu {
  margin-left: 0;
}

.gizmo-button svg {
  display: block;
  filter: none; /* light mode: normal */
  width: 20px;
  height: 20px;
}

.gizmo-button path {
  fill: var(--color-bg);
}

.gizmo-button.active {
  background-color: var(--color-focus-outline);
}

.gizmo-buttons-inner .gizmo-button.active,
.gizmo-undo-redo .gizmo-button.active {
  background-color: var(--color-focus-outline);
}

/* The refreshed purple treatment belongs to light mode only. */
[data-theme='light'] .gizmo-group {
  background-color: var(--color-light-icon-bar);
}

[data-theme='light'] .gizmo-buttons {
  background-color: var(--color-menu);
}

[data-theme='light'] .gizmo-buttons-inner .gizmo-button path,
[data-theme='light'] .gizmo-undo-redo .gizmo-button path {
  fill: var(--color-light-tool-ink);
}

[data-theme='light'] .gizmo-buttons-inner .gizmo-button:hover:not(:disabled):not(.active),
[data-theme='light'] .gizmo-undo-redo .gizmo-button:hover:not(:disabled):not(.active) {
  background-color: var(--color-light-icon-hover);
}

[data-theme='light'] .gizmo-buttons-inner .gizmo-button.active,
[data-theme='light'] .gizmo-undo-redo .gizmo-button.active {
  background-color: var(--color-light-tool-ink);
}

[data-theme='light'] .gizmo-buttons-inner .gizmo-button.active path,
[data-theme='light'] .gizmo-undo-redo .gizmo-button.active path {
  fill: var(--color-light-icon-bar);
}

/* Sprung off the button so a band of pill shows through, micro:bit style, in
   a bright blue rather than the app's yellow. No radius of its own: the ring
   follows the button, so only the pill's outer corners are rounded. */
.gizmo-buttons-inner .gizmo-button:focus-visible,
.gizmo-undo-redo .gizmo-button:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.bigbutton.active {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

#colorPickerButton svg {
  /* filter: invert(1) brightness(2); Make palette icon white */
  fill: #ffffff !important;
}

.bigbutton svg {
  filter: none; /* light mode: normal */
}
/* Only apply to flock icons, not Babylon.js icons */
[data-theme='dark'] #flockeditor .icon path {
  fill: #bababa !important;
}

[data-theme='dark-contrast'] #flockeditor .icon path {
  fill: #cdcdcd !important;
}

[data-theme='contrast'] #flockeditor .icon path {
  fill: #ffffff !important;
}

[data-theme='low-color'] #flockeditor .icon path {
  fill: #f0f0f0 !important;
}

[data-theme='contrast'] .gizmo-button img {
  color: #ffffff !important;
}

[data-theme='contrast'] .bigbutton svg {
  color: #ffffff !important;
}

[data-theme='low-color'] .gizmo-button img,
[data-theme='low-color'] .bigbutton svg {
  color: #f0f0f0 !important;
}

/* Two states at one footprint: collapsed fills the button behind the glyph,
   expanded rings it instead. Both are the button's own 1.5em circle. */
#blockHintsBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  width: calc(1.5em + 8px);
  height: calc(1.5em + 8px);
  min-height: 0;
  position: relative;
  isolation: isolate;
  background-color: transparent;
}

#blockHintsBtn.active {
  box-shadow: none;
}

#blockHintsBtn::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
}

/* One glyph size for both states; what changes around it is the fill or the
   ring, so the icon never appears to resize. */
#blockHintsBtn .icon {
  width: 1.15em;
  height: 1.15em;
}

/* Thick enough to overlap the glyph — the box's radius less the icon's, plus a
   pixel so the two circles' edges don't leave an antialiased seam between them.
   .bigbutton's shared 2px stops short of the glyph entirely. */
#blockHintsBtn.active::before {
  box-shadow: inset 0 0 0 calc((1.5em - 1.15em) / 2 + 1px) var(--color-primary);
}

[data-theme='light'] #blockHintsBtn.active::before {
  background-color: var(--color-menu);
}

#blockHintsBtn:not(.active)::before {
  background-color: var(--color-text-brand);
}

/* The theme rules above set .icon path with !important, so this must too. */
#blockHintsBtn:not(.active) .icon path {
  fill: var(--color-bg) !important;
}

/* Make links in the 'About' modal and the info panel visible in dark and contrast themes */
[data-theme='dark'] .modal-content a,
[data-theme='dark-contrast'] .modal-content a,
[data-theme='contrast'] .modal-content a,
[data-theme='low-color'] .modal-content a,
[data-theme='dark'] #help-list a,
[data-theme='dark-contrast'] #help-list a,
[data-theme='contrast'] #help-list a,
[data-theme='low-color'] #help-list a,
[data-theme='dark'] .howto-article a,
[data-theme='dark-contrast'] .howto-article a,
[data-theme='contrast'] .howto-article a,
[data-theme='low-color'] .howto-article a {
  color: var(--color-primary-light);
}

/* Shape Menu */
#shape-menu {
  position: relative;
  display: inline-block;
  z-index: 80;
  margin-left: 5px;
}

#shapes-dropdown {
  position: absolute;
  bottom: -50px;
  left: 0;
  display: block;
  background-color: var(--color-bg-glass);
  padding: 10px 10px 10px 5px;
  box-shadow: 0 8px 24px var(--color-shadow-medium);
  border-radius: 10px;
  overflow: hidden;
}

#shapes-dropdown ul {
  display: flex;
  padding: 0;
  margin: 2px;
  list-style: none;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  scrollbar-width: none;
}

#shapes-dropdown ul::-webkit-scrollbar {
  display: none;
}

#shapes-dropdown ul li {
  background-color: var(--color-bg-glass-light);
  border-radius: 8px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

#shapes-dropdown ul li img {
  width: 50px;
  height: 50px;
  transition: transform 0.15s ease;
}

#shapes-dropdown ul li:hover {
  background-color: var(--color-bg-glass-hover);
  box-shadow: 0 2px 6px var(--color-shadow);
  transform: translateY(-2px);
}

#shapes-dropdown ul li:hover img {
  transform: scale(1.1);
}

/* Keyboard navigation styles */
#shapes-dropdown ul li.keyboard-navigable {
  outline: none;
}

#shapes-dropdown ul li.keyboard-focused {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: -3px;
  border-radius: 8px;
}

/* Scrollable Container with Arrows */
.scrollable-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 340px;
}

#model-row {
  overflow-x: hidden;
  white-space: nowrap;
  flex-grow: 1;
  display: flex;
}

#shape-row,
#model-row,
#object-row,
#character-row {
  scroll-snap-type: x mandatory;
}

#shape-row li,
#model-row li,
#object-row li,
#character-row li {
  scroll-snap-align: start;
}

#shape-row::after,
#model-row::after,
#object-row::after,
#character-row::after {
  content: '';
  flex: 0 0 10px;
}

.scroll-button {
  background-color: var(--color-button-scroll);
  color: var(--color-text-on-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  box-shadow: 0 1px 3px var(--color-shadow);
  transition: filter 0.15s ease;
}

.scroll-button:hover:not(:disabled) {
  filter: brightness(1.2);
}

.scroll-button:disabled {
  opacity: 0.4;
  cursor: default;
}

.scroll-button:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.scroll-button.left {
  left: -18px;
}

.scroll-button.right {
  right: -18px;
}

#flocklink {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
}

#flocklink img {
  height: 22px;
}

#fpsCounter {
  margin-left: auto;
  padding: 0 0.5em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-primary);
}

#fpsCounter:not([hidden]) + #flocklink {
  margin-left: 0;
}
@media (max-width: 1024px) {
  #maincontent {
    width: calc(var(--view-width) * 2);
    height: calc(var(--app-height) - var(--dynamic-offset) - env(safe-area-inset-top));
    overflow-x: auto;
  }

  #babylon-inspector-container,
  #toolsModal #inspectorOption {
    display: none !important;
  }

  #codePanel,
  #canvasArea {
    flex-basis: var(--view-width);
    max-width: var(--view-width);
    height: calc(var(--app-height) - var(--dynamic-offset) - env(safe-area-inset-top));
    flex-grow: 1;
  }

  #bottomBar {
    position: fixed;
    bottom: 0;
    /* Fixed elements are placed against the viewport, so they need the insets
       body's padding gives everything else. */
    left: var(--safe-left);
    width: var(--view-width);
    height: calc(52px + max(0px, env(safe-area-inset-bottom, 0px)));
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
    z-index: 1000;
  }

  #viewToggle {
    display: flex;
    gap: 6px;
    background-color: var(--color-primary);
    border-radius: 999px;
    padding: 4px;
    border: 2px solid rgba(255, 255, 255, 0.3);
  }

  .view-toggle-btn {
    background-color: transparent;
    border: none;
    color: var(--color-text-on-primary);
    padding: 2px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 999px;
    touch-action: manipulation;
    transition:
      background-color 0.15s,
      color 0.15s;
  }

  .view-toggle-btn[aria-pressed='true'] {
    background-color: var(--color-loading-bg);
    color: var(--color-primary);
  }

  /* Inherit colour from theme */
  [data-theme='dark'] #bottomBar,
  [data-theme='dark-contrast'] #bottomBar,
  [data-theme='contrast'] #bottomBar,
  [data-theme='low-color'] #bottomBar,
  [data-theme='dark'] #viewToggle,
  [data-theme='dark-contrast'] #viewToggle,
  [data-theme='contrast'] #viewToggle,
  [data-theme='low-color'] #viewToggle {
    background-color: var(--color-bg);
  }

  [data-theme='dark'] .view-toggle-btn[aria-pressed='true'],
  [data-theme='dark-contrast'] .view-toggle-btn[aria-pressed='true'],
  [data-theme='low-color'] .view-toggle-btn[aria-pressed='true'] {
    color: #000;
  }

  #blocklyZoomControls {
    bottom: calc(35px + max(0px, env(safe-area-inset-bottom, 0px)));
  }

  .keyboard-open #blocklyZoomControls {
    display: none;
  }

  .keyboard-open #blocklyDiv {
    height: 100% !important;
  }

  /* Reserves room above the fixed #bottomBar for the info tabs. Without this
     the tabs/pill-toggle area renders underneath the fixed bar. */
  #info-panel-tabs {
    margin-bottom: calc(35px + max(0px, env(safe-area-inset-bottom, 0px)));
  }

  #blocklyDiv {
    height: calc(100% - 85px - max(0px, env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* Hidden by default; shown only in the narrow+landscape case below. Portrait
   layouts keep the original logo in the info tab bar instead. */
.bottombar-flocklink {
  display: none;
}

/* Narrow landscape layouts remove the docked body because their info content
   is modal and the toolbar is positioned separately beside the canvas. Phone
   portrait keeps the established flex structure as a spacer beneath its
   modal-trigger tabs. */
@media (max-width: 1024px) and (orientation: landscape) {
  /* contents, not none: children (the tab bar) still need to render, but shouldn't take a column in #canvasArea's row layout. */
  aside#info-panel {
    display: contents;
  }

  #infoResizer {
    display: none;
  }

  #info-panel-body {
    display: none;
  }
}

body.portrait-canvas #info-panel-body,
body.portrait-canvas #infoResizer {
  display: none;
}

body.portrait-canvas #info-panel {
  flex: 1 1 auto !important;
}

/* The portrait column can be narrower than the add menu, which then spills
   over the code panel instead of being clipped. */
@media (min-width: 601px) {
  body.portrait-canvas #canvasArea {
    overflow: visible;
  }
}

@media (min-width: 1025px) {
  body.portrait-canvas .gizmo-buttons-inner {
    width: min(100%, 228px);
    margin-inline: auto;
    border-bottom-color: transparent;
  }

  body.portrait-canvas.info-panel-open:not(.play-mode) #canvasArea {
    display: grid;
    grid-template-columns: var(--help-column-width, clamp(300px, 26vw, 420px)) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
  }

  body.portrait-canvas.info-panel-open:not(.play-mode) #canvasArea > *,
  body.portrait-canvas.info-panel-open:not(.play-mode) #info-panel-tabs {
    grid-column: 2;
  }

  body.portrait-canvas.info-panel-open:not(.play-mode) #renderCanvas {
    justify-self: center;
  }

  body.portrait-canvas.info-panel-open:not(.play-mode) aside#info-panel {
    display: contents;
  }

  body.portrait-canvas.info-panel-open:not(.play-mode) #info-panel-body {
    display: block;
    grid-column: 1;
    grid-row: 1 / -1;
    contain: size;
    border-right: 1px solid var(--color-border);
  }
}

/* Landscape-only placement for the surviving tab bar and bottom-bar logo. */
@media (max-width: 1024px) and (orientation: landscape) {
  /* Fixed in the dead space below the gizmo block and above the bottom bar, so the canvas keeps its full height; ancestor-qualified for the same cascade reason as above. */
  aside#info-panel #info-panel-tabs {
    position: fixed;
    /* Spans the canvas strip published as --canvas-width by resizeCanvas(); falls back to hugging the right edge before the first resize. */
    left: var(--canvas-width, auto);
    right: var(--safe-right);
    bottom: calc(52px + max(0px, env(safe-area-inset-bottom, 0px)));
    z-index: 1001;
    margin-bottom: 0;
    justify-content: flex-end;
  }

  /* #bottombar-flocklink is the visible copy here (index.html); !important overrides the inline display showCanvasView() sets in main/view.js. */
  #info-panel-tabs #flocklink {
    display: none !important;
  }

  .bottombar-flocklink {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 6px 8px;
  }

  .bottombar-flocklink img {
    height: 15px;
    display: block;
    /* The logo SVG is purple, which disappears on the purple bar — recolour
       the rendered image to white (brightness(0) → black, invert → white).
       Scoped to this copy only; the info-panel logo stays purple. */
    filter: brightness(0) invert(1);
  }

  /* <a> isn't covered by the global button/input focus rule, so it'd fall back
     to the browser default (reads white on the bar) — match the app's yellow. */
  .bottombar-flocklink:focus-visible {
    outline: 3px solid var(--color-focus-outline);
    outline-offset: 2px;
    border-radius: 0;
  }
}

/* Phones in landscape are height-starved: the 16:9 canvas is height-bound and
   leaves unused margin on both sides, so dock the wrapping gizmo block beside the
   canvas and give the strip's height back. Scoped by max-height to phones;
   tablets in landscape are tall enough not to need it. `resizeCanvas()` in
   main/view.js matches this query and must be kept in sync. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  /* Keep the canvas anchored to the top-left: #canvasArea is sized to the
     viewport and the fixed #bottomBar overlaps its lower edge. The toolbar
     centres its own rows separately below. */
  #canvasArea {
    flex-direction: row;
  }

  /* Grows into all the width left over beside the canvas. */
  #gizmoButtons {
    position: relative;
    flex: 1 1 auto;
    padding: 5px;
    /* display:flex comes from an inline style in view.js */
    align-items: flex-start;
  }

  /* A compact, wrapping tool column leaves enough width for a height-bound
     16:9 canvas. resizeCanvas() measures this wrapper when reserving space. */
  .gizmo-buttons-inner {
    width: 228px;
    max-width: 100%;
    margin-inline: auto;
  }

  /* Status messages belong to the scene, not the adjacent tool column. */
  .gizmo-toast {
    max-width: calc(var(--render-canvas-width, 100%) - 20px);
  }

  /* The canvas is sized in px to already allow for the toolbar beside it, so it
     must not be flexed away from that. */
  #renderCanvas {
    flex: 0 0 auto;
    align-self: flex-start;
  }

  aside#info-panel #info-panel-tabs {
    justify-content: flex-start;
  }

  #info-panel-tablist {
    margin-right: auto;
  }
}

/* On the narrowest landscape phones, stack the four intact tool groups so the
   canvas gets the width that would otherwise be spent keeping two groups on a row. */
@media (max-width: 700px) and (orientation: landscape) and (max-height: 500px) {
  .gizmo-buttons-inner {
    width: 132px;
  }
}

@media (min-width: 1025px) {
  #bottomBar {
    display: none !important;
  }

  #maincontent {
    display: flex;
  }

  #canvasArea,
  #codePanel {
    flex: 1 1 0; /* grow, shrink, basis */
    width: 0; /* Forces flex to calculate based on flex-grow */
  }

  #canvasArea {
    min-width: 300px;
  }

  #blocklyDiv {
    width: 100% !important;
    height: calc(100% - 50px) !important;
    position: relative;
  }

  #codePanel {
    overflow: hidden; /* Prevents content from spilling out */
  }
}

/* Hidden unless a layout below shows it, which also keeps its tabindex out of
   the tab order and drops it from the Ctrl+B highlight areas. */
.resizer {
  width: 8px;
  background-color: #aaa;
  cursor: col-resize;
  position: relative;
  transition: background-color 0.2s ease;
  display: none;
  flex-shrink: 0;
  touch-action: none;
}

.resizer:hover {
  background-color: var(--color-focus-outline);
}

.resizer:active {
  background-color: var(--color-focus-outline);
}

.resizer:focus-visible {
  background-color: var(--color-focus-outline);
  outline: 3px solid var(--color-focus-outline);
}

.resizer::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 30px;
  /* Light menu ground, so the grip stays legible against the blue bar
     it sits on when hovered/active/focused. */
  background-color: var(--color-menu);
  border-radius: 2px;
}

.resizer-horizontal {
  width: 100%;
  height: 8px;
  cursor: row-resize;
}

.resizer-horizontal::before {
  width: 30px;
  height: 3px;
}

@media (min-width: 1025px) {
  .resizer {
    display: block;
  }
}

/* Narrow portrait still docks the info panel under the canvas, so its splitter
   stays usable; the left/right splitter has no side-by-side panels here. */
@media (max-width: 1024px) and (orientation: portrait) {
  #infoResizer {
    display: block;
  }
}

/* A finger-sized target on touch screens. */
@media (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  #infoResizer {
    height: 16px;
  }

  #infoResizer::before {
    width: 40px;
    height: 4px;
  }
}

/* Play mode and embeds hide the info panel, so the splitter bar goes too. */
body.play-mode #infoResizer,
body.embed-mode #infoResizer {
  display: none;
}

/* Logo */
#logo {
  width: 32px;
  height: auto;
  flex-shrink: 0;
  margin-right: 2px;
  padding-left: 2px;
}

/* Project Name Input */
#projectName {
  margin: 0 8px !important;
  padding: 8px !important;
}

/* Custom Category */
.custom-category img {
  margin-bottom: 5px;
}

.custom-category div {
  text-align: center;
}

/* menu and project name styling for mobile screens */
#menuBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-only {
  display: inline-block;
}

/* Dropdown menu styling */
/* menu wrapper styling */
#main-menu {
  position: relative;
  display: inline-block;
}

[data-theme='dark-contrast'] #main-menu a,
[data-theme='low-color'] #main-menu a {
  color: var(--color-text-primary);
}

[data-theme='dark-contrast'] #menuDropdown .menu-item .menu-label,
[data-theme='low-color'] #menuDropdown .menu-item .menu-label {
  color: var(--color-text-primary);
}

[data-theme='dark-contrast'] #menuDropdown .menu-item .menu-icon svg,
[data-theme='low-color'] #menuDropdown .menu-item .menu-icon svg {
  color: var(--color-text-primary);
}

#main-menu li {
  list-style-type: none; /* Remove bullets */
  padding: 0;
  margin: 0;
}

#main-menu ul {
  padding: 0;
  margin: 0;
}

/* Dropdown Styles */

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content button {
  font-size: 1em;
}

.dropdown {
  position: absolute;
  /* No width: shrink-to-fit on the nowrap labels, so longer translations widen it */
  top: 100%; /* Below the button */
  /* Anchored left: the button sits at the window's left edge */
  left: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px var(--color-shadow);
  z-index: 1000;
}

[data-theme='light'] .dropdown {
  background-color: var(--color-menu);
}

.dropdown a {
  display: block;
  color: var(--color-text-brand);
  text-decoration: none;
  padding: 0.5em 1em;
}

.dropdown a:hover {
  background-color: var(--color-menu-hover);
}

/* Modal styles */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-overlay);
}

.modal-content {
  background-color: var(--color-bg);
  padding: 1.5em;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
}

/* Centring drops these panels far down a tall screen. border-box keeps the
   offset inside the full-height overlay so max-height still fits. */
#infoModal,
#toolsModal {
  box-sizing: border-box;
  align-items: flex-start;
  padding-top: 80px;
}

/* A landscape phone has no room for the full offset. */
@media (max-height: 500px) {
  #infoModal,
  #toolsModal {
    padding-top: 16px;
  }
}

/* Keep the full-screen click-outside target transparent so this reads as a
   popover anchored to Projects. */
#exampleModal {
  background-color: transparent;
  pointer-events: none;
}

#exampleModal .example-modal-content {
  pointer-events: auto;
}

.example-modal-content {
  position: fixed;
  /* top / left / max-width are set by JS (openExampleModal) relative to the
     Projects button and the scrollbar-free content width. */
  margin: 0;
  /* border-box so the width/max-width include the padding + border (there is no
     global box-sizing reset in this project), otherwise the panel is ~50px
     wider than the calc and overflows. */
  box-sizing: border-box;
  width: min(800px, calc(100vw - 16px));
  max-width: none;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px var(--color-shadow-medium);
}

.example-modal-header {
  flex: none;
}

#examplePanels {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 6px 6px;
  margin: 0 -6px;
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 1em;
  border-bottom: 1px solid var(--color-border);
}

.project-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background-color: var(--color-button-bg);
  color: var(--color-text-primary);
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}

a.project-action-button {
  text-decoration: none;
}

.project-action-button:hover {
  background-color: var(--color-button-bg-hover);
}

.project-action-button:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.project-action-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--color-primary);
}

.project-action-icon svg {
  width: 100%;
  height: 100%;
}

#unsavedChangesModal.anchored .modal-content,
#toolsModal.anchored .modal-content {
  position: fixed;
  box-sizing: border-box;
  width: min(600px, calc(100vw - 16px));
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px var(--color-shadow-medium);
}

.unsaved-changes-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 1.5em;
}

.project-action-button--primary {
  background-color: var(--color-button-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-button-primary);
}

.project-action-button--primary:hover {
  opacity: 0.9;
}

[data-theme='contrast'] .project-action-button {
  color: var(--color-bg);
}

[data-theme='low-color'] .project-action-icon {
  color: var(--color-text-primary);
}

.example-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 1em;
  /* Single row, horizontally swipeable on touch / narrow screens. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  /* The horizontal scroll container also clips vertically, so pad enough for
     the tabs' focus ring (3px outline + 2px offset) on every side. */
  padding: 6px 6px 10px;
}

.example-tabs::-webkit-scrollbar {
  height: 6px;
}

.example-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  padding: 6px 14px;
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  cursor: pointer;
  background-color: var(--color-button-bg);
  color: var(--color-text-primary);
  touch-action: manipulation;
}

.example-tab:hover {
  background-color: var(--color-button-bg-hover);
}

[data-theme='contrast'] .example-tab {
  color: var(--color-bg);
}

.example-tab[aria-selected='true'] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-weight: 600;
}

/* In dark themes --color-primary is a mid-grey, leaving the selected tab too
   low-contrast against its light text. Invert it instead for a clear, legible
   "selected" state. */
[data-theme='dark'] .example-tab[aria-selected='true'],
[data-theme='dark-contrast'] .example-tab[aria-selected='true'] {
  background-color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-bg);
}

.example-tab:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.example-grid {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  /* min(120px, 100%) keeps a column from ever being wider than the panel, so
     the grid can't overflow on very narrow windows. */
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
}

.example-tile {
  position: relative;
  display: block;
  width: 100%;
  /* 16:9, as the canvas the thumbnails are captured from: the tile keeps its
     column width and takes its height from the image. */
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  background-color: var(--color-bg-glass-light);
  color: var(--color-text-primary);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

.example-tile-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.example-tile--no-thumb .example-tile-thumb {
  display: none;
}

/* Overlays the screenshot, so it needs its own solid background. Long
   translations wrap upwards over the image rather than being truncated. */
.example-tile-name {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 6px;
  text-align: left;
  overflow-wrap: break-word;
  border-radius: 0 8px 0 0;
  /* Slightly see-through so a two-line label doesn't blank out the thumbnail;
     the solid declaration is the fallback where color-mix is unsupported. */
  background-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
  color: var(--color-text-on-primary);
}

/* As for the selected tab: in dark themes --color-primary is a mid-grey that
   leaves its own text unreadable. */
[data-theme='dark'] .example-tile-name,
[data-theme='dark-contrast'] .example-tile-name {
  background-color: var(--color-text-primary);
  background-color: color-mix(in srgb, var(--color-text-primary) 85%, transparent);
  color: var(--color-bg);
}

.example-tile:hover {
  background-color: var(--color-bg-glass-hover);
  transform: scale(1.04);
  box-shadow: 0 4px 12px var(--color-shadow-medium);
}

.example-tile:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
  z-index: 1;
}

.howto-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
}

.howto-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0.5em;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 0.85em;
  line-height: 1.3;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  /* Plain white-on-pink for now, ignoring data-tone — was 4 distinct
     colours, simplified back to one shared accent (--color-howto-accent). */
  background-color: var(--color-howto-accent);
  color: #fff;
  text-align: center;
  transition: transform 0.15s ease;
}

/* Wraps the icon (gizmo how-tos only) and the name so they read as one line
   — the tile itself stays a centered flex column, this row is its single
   child, so an iconless card's name still centers exactly as before. */
.howto-tile-title {
  display: flex;
  /* flex-start, not center: centering against a wrapped 2-line title pushes
     the icon down into the gap between the lines instead of sitting inline
     with the text it's paired with. */
  align-items: flex-start;
  justify-content: center;
  gap: 0.4em;
  width: 100%;
}

.howto-tile-title .howto-icon {
  width: 1.3em;
  height: 1.3em;
  flex-shrink: 0;
}

.howto-tile-name {
  font-weight: bold;
  /* .howto-tile centers text for the (usual) one-line case, but a wrapped
     two-line title sizes this box to its widest line — centering within
     that box then indents the narrower line away from the icon instead of
     keeping both lines flush against it. */
  text-align: left;
  /* Flex items default to min-width:auto, which floors their shrink at the
     unwrapped text width — without this, a long title doesn't wrap onto a
     second line, it just overflows the tile past the icon instead. */
  min-width: 0;
  /* Reserves 2 lines' height (line-height 1.3, inherited) even for a title
     that only needs one — without this, a one-line card's shorter block
     centers higher than a two-line neighbour's taller block, so their icons
     (and first lines) land at different heights across the same row. A flex
     item is blockified automatically, so min-height applies and the text
     still starts flush at the top of that reserved space either way — same
     first-line position, and so the same icon position, in both cases. */
  min-height: 2.6em;
}

.howto-tile:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
  z-index: 1;
}

/* Topic filter chips above the card grid — single-select, the pressed chip
   reads as the active filter. */
.howto-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.howto-filter-chip {
  padding: 2px 12px;
  font-size: 0.85em;
  line-height: 1.6;
  border-radius: 999px;
  border: 1px solid var(--color-howto-accent);
  background: transparent;
  color: var(--color-howto-accent);
  cursor: pointer;
}

.howto-filter-chip[aria-pressed='true'] {
  background-color: var(--color-howto-accent);
  color: #fff;
}

.howto-filter-chip:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .example-modal-content {
    padding: 0.75em;
  }

  /* Save / Open / New stay on one row down to 320px, and the row is 28px
     narrower than it looks because the floated close button reserves that
     corner. Only trim what that costs — longer translations may wrap. */
  .project-action-button {
    gap: 0.4em;
    padding: 6px 12px;
  }

  .example-tile {
    font-size: 13px;
  }
}

/* Always skip the top margin for h2s in modals */
.modal-content h2 {
  margin-top: 0;
}

.tools-options {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.tools-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
}

.tools-option input {
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
}

.tools-option-note {
  font-size: 0.85em;
  opacity: 0.75;
}

.tools-tabs {
  margin: 0 0 0.75em;
}

.tools-export {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.tools-options[hidden],
.tools-export[hidden] {
  display: none;
}

.tools-export-section h3 {
  margin: 0 0 0.25em;
  font-size: 1em;
}

.tools-export-section p {
  margin: 0 0 0.5em;
}

.tools-export-code {
  box-sizing: border-box;
  width: 100%;
  resize: vertical;
  font-family: monospace;
  font-size: 12px;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px;
}

.tools-export-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.5em;
}

.tools-export-actions--above {
  margin: 0 0 0.5em;
}

.hidden {
  display: none !important;
}

.flock-close-icon::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@media (max-width: 768px), (max-width: 899px) and (pointer: coarse) {
  .flock-close-icon::before {
    width: 14px;
    height: 14px;
  }
}

button.flock-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
}

.close-button {
  float: right;
  font-size: 1.25em;
  cursor: pointer;
}

[data-theme='dark-contrast'] input {
  border-style: solid;
}

[data-theme='dark'] input {
  border-style: solid;
}

[data-theme='contrast'] input {
  border-style: solid;
}

[data-theme='low-color'] input {
  border-style: solid;
}

@media (max-width: 1024px) {
  #projectName {
    display: none; /* hid the project name input box for mobile screens*/
  }
}

#info-panel-toggle {
  display: none; /* Hide the inline Show Info button */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--color-bg, #fff);
  color: var(--color-text, #000);
  border-radius: 0 0 4px 0;
  text-decoration: none;
}

.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--color-focus-outline);
  outline-offset: -3px;
}

/* Enhanced focus indicators */
button:focus-visible,
input:focus-visible,
select:focus-visible,
.gizmo-button:focus-visible,
details summary:focus-visible,
#menuDropdown [role='menuitem']:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: 0;
  z-index: 20;
}

#info-details table td:first-child {
  min-width: 100px;
  white-space: nowrap;
}

/* The ring is the whole indicator — nothing fills in behind the icon. */
.bigbutton:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: 0;
}

#exportCodeButton.no-autosave .icon {
  background-image: repeating-linear-gradient(
    to right,
    orange,
    orange 4px,
    transparent 4px,
    transparent 6px
  );
  background-position: bottom;
  background-size: 100% 4px;
  background-repeat: repeat-x;
  padding-bottom: 7px;
}

#renderCanvas:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
  background-color: var(--color-button-bg-hover);
}

/* Embed mode — disable safe-area chrome (iframe parent handles it) */
body.embed-mode {
  --safe-left: 0px;
  --safe-right: 0px;
  padding: 0;
  background: var(--color-bg);
}

body.embed-mode::before {
  display: none;
}

body.embed-mode #maincontent {
  display: flex;
  flex-direction: column;
}

body.embed-mode #canvasArea {
  flex: 1;
}

body.embed-mode #renderCanvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

body.embed-mode #maincontent {
  box-sizing: border-box;
}

body.embed-mode #embedTopBar {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

body.embed-mode #embedBottomBar {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

body.embed-mode #canvasArea {
  padding: 0;
  box-sizing: border-box;
}

body.embed-mode #embedShell {
  background: #ffffff;
  border: 2px solid #511d91;
  border-radius: 12px; /* adjust as needed */
  box-sizing: border-box;
  overflow: hidden; /* important: clips inner content to rounded corners */
}

body.embed-mode #embedBottomBar a,
body.embed-mode #embedBottomBar img {
  display: block;
}

body.embed-mode #renderCanvas:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
  background-color: var(--color-button-bg-hover);
}

body.embed-mode #embedBottomBar a:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* Show crosshair on canvas whenever colour picker is open */
body.color-picker-open #renderCanvas {
  cursor: crosshair;
}

/* Drag-and-drop overlay */
#drag-drop-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(81, 29, 145, 0.75);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  pointer-events: none;
  border: 4px dashed white;
  border-radius: 8px;
  margin: 8px;
  box-sizing: border-box;
}

#drag-drop-overlay.visible {
  display: flex;
}

/* Focus management for modal */
.modal:has(:focus-visible) .modal-content {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: -2px;
}

/* Ensure interactive elements have proper focus order */
[tabindex='-1'] {
  outline: none;
}

/* Flock XR logo link focus styling */
#info-panel-link:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 5px var(--color-focus-outline);
  border-radius: 0;
}

.loading-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loading-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

/* Add an icon colour, so that svgs don't have a hardcoded fill colour */
.icon {
  color: var(--color-text-brand);
}

/* Override Flock UI colours so that Babylon.js can use its own */
#babylon-inspector-container .icon {
  color: unset;
}

#codePanel > #babylon-inspector-container {
  z-index: 100001;
}

.bigbutton .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
}

/* Make this specific to flock editor buttons, not Babylon.js */
#flockeditor .bigbutton .icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: var(--color-text-brand);
}

/* Style inline icon (e.g. run button) */
.icon--inline {
  display: inline-block;
  margin-left: 2px;
  margin-right: 2px;
  height: 1em;
  width: 1em;
  padding: 0;
}

.icon--inline svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Make the gamepad icon wider */
#togglePlay .icon {
  width: 2em;
}

.menu-icon svg {
  fill: var(--color-text-brand);
}

.menu-arrow {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 16px;
  color: var(--color-text-brand);
}

.menu-arrow svg {
  width: 10px;
  height: 10px;
}

#examples {
  min-width: 100px;
  flex-grow: 1;
  margin-right: 10px;
}

.menu-item,
#menuDropdown [role='menuitem'] {
  display: flex !important;
  align-items: center;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  cursor: pointer;
  color: var(--color-menu-item);
}

#menuDropdown .menu-item.hidden {
  display: none !important;
}

.menu-item:hover {
  background-color: var(--color-menu-hover);
}

/* Contrast + low-color: give the selected row and submenu link the light hover
   tint light mode uses (#d0d0d0, i.e. light mode's --color-menu-hover) with
   black text and icons, so category and subcategory selection read identically
   and stay legible. Contrast already inherits that tint from its own
   --color-menu-hover; low-color's is dark, so the background is set here too. */
[data-theme='contrast'] #menuDropdown .menu-item:hover,
[data-theme='contrast'] #menuDropdown .menu-item:focus,
[data-theme='contrast'] #menuDropdown .submenu a:hover,
[data-theme='contrast'] #menuDropdown .submenu a:focus,
[data-theme='low-color'] #menuDropdown .menu-item:hover,
[data-theme='low-color'] #menuDropdown .menu-item:focus,
[data-theme='low-color'] #menuDropdown .submenu a:hover,
[data-theme='low-color'] #menuDropdown .submenu a:focus {
  background-color: #d0d0d0;
  color: #000;
}

[data-theme='contrast'] #menuDropdown .menu-item:hover .menu-label,
[data-theme='contrast'] #menuDropdown .menu-item:focus .menu-label,
[data-theme='contrast'] #menuDropdown .menu-item:hover .menu-arrow,
[data-theme='contrast'] #menuDropdown .menu-item:focus .menu-arrow,
[data-theme='low-color'] #menuDropdown .menu-item:hover .menu-label,
[data-theme='low-color'] #menuDropdown .menu-item:focus .menu-label,
[data-theme='low-color'] #menuDropdown .menu-item:hover .menu-arrow,
[data-theme='low-color'] #menuDropdown .menu-item:focus .menu-arrow {
  color: #000;
}

[data-theme='contrast'] #menuDropdown .menu-item:hover .menu-icon svg,
[data-theme='contrast'] #menuDropdown .menu-item:focus .menu-icon svg,
[data-theme='low-color'] #menuDropdown .menu-item:hover .menu-icon svg,
[data-theme='low-color'] #menuDropdown .menu-item:focus .menu-icon svg {
  fill: #000;
}

.menu-icon {
  width: 2em;
  min-width: 2em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 8px;
  flex-shrink: 0;
}
.menu-icon svg {
  width: 1.2em;
  height: 1.2em;
  display: block;
  fill: var(--color-text-brand);
}
.menu-label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}
.submenu {
  display: none;
  position: absolute;
  /* Flies out to the right, away from the window edge */
  left: 100%;
  top: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 6px var(--color-shadow);
  min-width: 120px;
  z-index: 1001;
}

[data-theme='light'] .submenu {
  background-color: var(--color-menu);
}
.menu-item:hover > .submenu,
.menu-item:focus-within > .submenu {
  display: block;
}
.submenu a {
  display: block;
  padding: 8px 12px;
  color: var(--color-text-brand);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
}
.submenu a:hover {
  background-color: var(--color-menu-hover);
}
.submenu a:last-child {
  border-bottom: none;
}

#shape-row button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* Exactly 5 columns wide, matching your asymmetric inner padding */
#shapes-dropdown {
  /* 5 * 60px tiles + 4 * 8px gaps + left 5px + right 10px padding */
  width: calc(5 * 60px + 4 * 8px + 5px + 10px);
  box-sizing: border-box;
  overflow: visible;
}

/* On phones the shape button is centred in the 2-row gizmo grid, so the
   popup's old anchor (bottom-left of that button) ran partway off the right
   edge. Instead anchor it to the whole gizmo bar and span full width,
   dropping straight down into the space below the toolbar (its height is
   capped to that space with an internal scroll in addmenu.js). The rows are
   stretched to fill the full width so there's no empty grey band on the
   right, and the tiles are shrunk to suit the smaller screen. Placed after
   the desktop rules above so these overrides win on source order. */
@media (max-width: 600px) {
  #gizmoButtons {
    position: relative;
  }
  #shape-menu {
    position: static; /* let the popup resolve against #gizmoButtons */
  }
  #shapes-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* directly below the toolbar */
    bottom: auto;
    margin-top: 0; /* directly under the buttons: the bar has no bottom padding */
    width: auto;
    max-width: 100%;
    padding: 10px; /* symmetric so the grey side gaps match */
    z-index: 80;
    box-sizing: border-box;
  }
  /* Smaller tiles for the smaller screen. */
  #shapes-dropdown ul li img {
    width: 40px;
    height: 40px;
  }
  /* Size every row to show exactly 5 tiles, then centre it, so a matching
     grey margin is left on both sides rather than a single band on the
     right. 5 * (40px img + 10px li padding) + 4 * 8px gap = 282px. */
  .scrollable-container {
    width: 282px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Nudge the chevrons out past the tiles into the grey side margins so they
     no longer overlap the first/last tile (36px button + 4px gap). */
  .scrollable-container .scroll-button.left {
    left: -40px;
  }
  .scrollable-container .scroll-button.right {
    right: -40px;
  }
}

@media (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  #shape-menu {
    position: static;
  }
  #shapes-dropdown {
    top: 5px; /* level with the top row of buttons */
    left: auto;
    right: 8px;
    bottom: auto;
    width: 292px;
    max-width: calc(100vw - 16px);
    padding: 10px;
    z-index: 80;
    box-sizing: border-box;
  }
  #shapes-dropdown ul li img {
    width: 36px;
    height: 36px;
  }
  .scrollable-container {
    width: 262px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Style for the yellow circle to place/select using kb controls */
.canvas-selector-circle {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 3px solid #ffff00;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(255, 255, 0, 0.5);
  transform: translate(-50%, -50%);
}

/* Canvas circle cursor when over invalid drop target */
.canvas-selector-circle--no-hit {
  border-color: #ffff00;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(255, 68, 68, 0.5);
}

/* Animate the invalid cursor when trying to place on an invalid target */
.canvas-selector-circle--no-hit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #ffff00;
  transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes circle-invalid-flash {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.canvas-selector-circle--invalid-press {
  animation: circle-invalid-flash 0.25s ease-out;
}

/* Area Menu Styles */
#area-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-bg-overlay);
  display: flex;
  flex-direction: column;
  z-index: 10000; /* Ensure it stays on top of Babylon canvas */
  color: var(--color-text-on-primary);
}

/* Colours hard coded to ensure visibility across all themes */
.area-number-badge {
  position: absolute;
  background: #000;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  box-shadow: 0 0 15px var(--color-shadow);
  z-index: 10001;
  border: 3px solid #fff;
}

/* Which area badge is currently focused */
.area-number-badge:focus-visible {
  outline: 3px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* Highlights the selectable areas */
.area-outline {
  position: absolute;
  outline: 5px solid #fff;
  background: rgba(128, 128, 128, 0.15);
  pointer-events: none; /* Let clicks pass through */
  z-index: 10000;
}

/* Gizmo menu overlay */
#gizmo-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
}

.gizmo-key-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #000;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 2px 0 #888;
  padding: 2px 6px;
  font-size: 13px;
  font-weight: bold;
  font-family: monospace;
  pointer-events: none;
  z-index: 10001;
  min-width: 10px;
  text-align: center;
  line-height: 1.4;
}

/* Styles for keyboard shortcuts panel */
/* --panel-font-size is set on the panel by the A- / A+ controls (keyboardui.js). */
#shortcuts-list,
#player-list,
#help-list,
#howto-list {
  font-size: var(--panel-font-size, 1.2em);
  user-select: text;
}

.shortcuts-category {
  text-align: left;
  padding-top: 1em;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
}

.shortcuts-group {
  margin: 0;
  padding: 0;
}

.shortcuts-entry {
  display: grid;
  grid-template-columns: 45% 1fr;
}

.shortcuts-entry dt,
.shortcuts-entry dd {
  padding: 0.5em;
  line-height: 1.5em;
  margin: 0;
}

kbd {
  background-color: var(--color-bg);
  border: 1px solid currentcolor;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 1.2em;
}

[data-theme='light'] kbd {
  background-color: var(--color-panel-bg);
}

/* Info panel tabs */
#info-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

[data-theme='light'] #info-panel {
  background-color: var(--color-panel-bg);
}

[data-theme='light'] #info-panel-body {
  color: #332b22;
}

.info-tab-btn {
  border-radius: 0;
}

.info-tab-btn[hidden] {
  display: none;
}

.info-tab-btn.active {
  background-color: var(--color-text-brand);
  box-shadow: none;
}

#flockeditor .info-tab-btn.active .icon path {
  fill: var(--color-bg) !important;
}

#info-panel-tabs {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  padding: 0 4px 0 8px;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
  box-sizing: border-box;
}

[data-theme='light'] #info-panel-tabs {
  background-color: var(--color-menu);
}

[data-theme='light'] #info-panel-tabs .bigbutton:not(.active) {
  background-color: var(--color-menu);
}

#info-panel-tablist {
  display: flex;
  align-items: center;
  min-width: 0;
}

#info-panel-body {
  background-color: inherit;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* Containing block for the panels' absolutely-positioned .sr-only spans.
     Without it they resolve against #canvasArea, escaping this scroller's
     clipping and giving #canvasArea phantom scrollable overflow. */
  position: relative;
}

.info-tab-panel {
  padding: 1em;
}

/* The how-to tab specifically (not shortcuts/players/help, which keep the
   shared #info-panel beige) gets the lighter --color-menu background — the
   same colour as the top and bottom menu bars. min-height keeps it filling
   the scroller even when the grid/article is shorter than the panel, so no
   sliver of the #info-panel beige behind shows through underneath it. */
[data-theme='light'] #info-tab-panel-howto {
  background-color: var(--color-menu);
  min-height: 100%;
}

.info-tab-panel:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: -2px;
}

/* Shortcuts presented as a modal in narrow layouts, where the info panel has
   no room to dock it. The .shortcuts-modal class is added by ShortcutsPanel
   only in narrow mode, and the panel is reparented to <body> so it escapes the
   info panel's clipping. */
.shortcuts-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  z-index: 1100;
}

.info-tab-panel.shortcuts-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 24px));
  max-height: 85vh;
  overflow-y: auto;
  z-index: 1101;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border-radius: 12px;
  box-shadow: 0 8px 32px var(--color-shadow-medium);
  box-sizing: border-box;
}

.shortcuts-modal-close {
  font-weight: bold;
  margin-left: 12px;
}

/* Shortcuts tab content */
.shortcuts-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

/* In modal mode the whole panel (not #info-panel-body) is the scroll
   container, so pin the header — title, font-size buttons, help link and the
   close X all live here — while the content underneath scrolls. The negative
   margin/matching padding extends the header through the panel's own 1em
   padding so no gap opens beside it; sticky's "stuck" offset is measured from
   the margin edge, so top must be -1em too or the border box (and its
   background) stops 1em short of the scrollport's actual top. */
.info-tab-panel.shortcuts-modal .shortcuts-panel-header {
  position: sticky;
  top: -1em;
  z-index: 1;
  margin: -1em -1em 0.75em;
  padding: 1em 1em 0.75em;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.shortcuts-panel-title {
  /* Stays a step above .shortcuts-category, which is 1.2x the same property. */
  font-size: calc(var(--panel-font-size, 1.2em) * 1.5);
  font-weight: bold;
  margin: 0;
}

.shortcuts-panel-controls {
  display: flex;
  align-items: center;
  gap: 2px;
}

.font-decrease-btn,
.font-increase-btn {
  font-weight: bold;
  margin-left: 0;
}

[data-theme='light'] .font-decrease-btn,
[data-theme='light'] .font-increase-btn {
  /* Transparent rather than a fixed fill, since these buttons sit on
     whichever page background their panel has — --color-panel-bg in the
     shortcuts/players/help panels, --color-menu in the how-to panel (see
     [data-theme='light'] #info-tab-panel-howto above) — and a solid fill
     would only match one of them. */
  background-color: transparent;
}

.font-decrease-btn span {
  font-size: 0.75em;
}

.font-increase-btn span {
  font-size: 1.1em;
}

.shortcuts-panel-header .help-link-button {
  color: var(--color-text-primary);
  margin-left: 12px;
}

.shortcuts-panel-header .help-link-button:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: 2px;
}

#shortcuts-list {
  margin-bottom: 1.5em;
}

#player-list {
  margin-bottom: 1.5em;
}

/* Authored in docs/help/<lang>.html, so style plain elements rather than classes. */
#help-list {
  margin-bottom: 1.5em;
  text-align: left;
  line-height: 1.5;
}

#help-list h3 {
  padding-top: 1em;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 0.3em;
}

#help-list h3:first-child {
  padding-top: 0;
}

#help-list p {
  margin: 0 0 0.75em;
}

.help-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
}

[data-theme='light'] .help-icon {
  color: var(--color-primary);
}

.help-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  vertical-align: -0.4em;
  background-color: var(--color-text-brand);
}

.help-icon-badge .help-icon {
  width: 1.15em;
  height: 1.15em;
  color: var(--color-bg);
}

.help-link {
  border: none;
  background: none;
  padding: 0.1em 0.2em;
  margin: 0 -0.2em;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  border-radius: 4px;
}

.help-link:focus-visible {
  background: var(--color-light-icon-hover);
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

#help-list ul,
#help-list ol {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
}

#help-list li {
  margin-bottom: 0.4em;
}

/* Colour comes from the shared 'About' modal link rule; underlined too, so the
   link is distinguishable without relying on colour. */
#help-list a,
.howto-article a {
  text-decoration: underline;
}

[data-theme='light'] #help-list a {
  color: var(--color-primary);
}

#help-list a:focus-visible,
.howto-article a:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

/* Appended inside external links by decorateExternalLinks() in accessibility/infoPanel.js. */
#help-list .external-link-icon,
.howto-article .external-link-icon {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.3em;
  vertical-align: -0.05em;
}

.howto-back {
  border: 1px solid var(--color-border);
  background: var(--color-button-bg);
  padding: 0.3em 0.4em;
  margin: 0 0 0.75em -0.4em;
  font: inherit;
  font-weight: bold;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.howto-back:focus-visible {
  background: var(--color-light-icon-hover);
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
}

.howto-article-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 0.5em;
}

/* Applied by drawAttention() in ui/howToPanel.js to whichever real UI
   element a <link-to> in a how-to points at — including an SVG block
   inside the toolbox flyout, which is why this uses the filter: drop-shadow
   glow rather than box-shadow (box-shadow doesn't apply to SVG content at
   all; drop-shadow works on both, and hugs the element's actual silhouette
   rather than its bounding box, which reads more like a glow and less like
   an outline besides). Plays once as it appears, then holds still — never a
   repeating flash/pulse, which is a real seizure risk for photosensitive
   readers (WCAG 2.3.1), not just a style choice. Uses --color-primary-light
   (the app's existing gold accent), never --color-focus-outline, so it can't
   be mistaken for real keyboard focus — these targets are deliberately never
   given real focus, which would yank it out of the how-to panel a reader
   is partway through. Disappears when a different how-to link moves it, or
   as soon as the reader actually uses the glowing element. */
/* A solid colour, not color-mix() with transparent — color-mix() as a
   drop-shadow color argument doesn't resolve correctly on SVG content in
   this engine (renders near-black instead of gold). The blur radius alone
   already softens the edges into a glow. */
@keyframes howto-attention-in {
  from {
    filter: drop-shadow(0 0 0 transparent);
  }
  to {
    filter: drop-shadow(0 0 6px var(--color-primary-light))
      drop-shadow(0 0 6px var(--color-primary-light));
  }
}

.howto-attention {
  animation: howto-attention-in 0.4s ease-out forwards;
}

/* A Blockly block's getSvgRoot() is a <g> containing nested child-block
   <g> elements — a filter on the root outlines the whole subtree. Glow only
   the block's own outline path (a direct child; nested blocks' paths live
   deeper), so sky/map links highlight just that block. */
g.howto-attention.blocklyDraggable {
  animation: none;
  filter: none;
}

g.howto-attention.blocklyDraggable > .blocklyPath {
  animation: howto-attention-in 0.4s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .howto-attention {
    animation: none;
    filter: drop-shadow(0 0 6px var(--color-primary-light))
      drop-shadow(0 0 6px var(--color-primary-light));
  }
  g.howto-attention.blocklyDraggable {
    filter: none;
  }
  g.howto-attention.blocklyDraggable > .blocklyPath {
    filter: drop-shadow(0 0 6px var(--color-primary-light))
      drop-shadow(0 0 6px var(--color-primary-light));
  }
}

/* Authored in src/how-tos/<lang>/<slug>.html, so style plain elements and
   the small custom tag vocabulary rather than classes. */
.howto-article {
  text-align: left;
  line-height: 1.5;
  counter-reset: howto-step;
  /* Axis colors — keep in sync with AXIS_HEX in ui/gizmos.js. Authors never
     write these hex values; they use <axis-x>/<axis-y>/<axis-z> tags, so a
     palette change lands here alone. */
  --axis-x: #0072b2;
  --axis-y: #009e73;
  --axis-z: #d55e00;
}

.howto-article p {
  margin: 0 0 0.75em;
}

/* Inline UI icon (e.g. the Add "+" button) referenced in the text — sized to
   the surrounding type so it reads as part of the sentence. */
.howto-article .howto-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* <trashcan-icon> — a larger picture of the workspace trashcan, in the
   same colour as the real one. Written between paragraphs, never in a
   sentence, so consecutive icons share a line of their own. */
.howto-article .howto-trashcan-icon {
  width: auto;
  height: 2.5em;
  margin-right: 1.5em;
  vertical-align: bottom;
  color: var(--color-primary);
}

/* <workspace-comment> — a picture of a Blockly workspace comment. Colours
   match Blockly's --commentBorderColour and --commentFillColour, which are
   only defined inside the workspace. */
.howto-article .howto-workspace-comment {
  max-width: 18em;
  margin: 0 0 0.75em;
  border: 2px solid #f2e49b;
  color: #000;
}

.howto-article .howto-workspace-comment-topbar {
  height: 1.2em;
  padding: 0 0.3em;
  background-color: #f2e49b;
}

.howto-article .howto-workspace-comment-topbar svg {
  width: 0.55em;
  height: 0.55em;
  vertical-align: top;
  margin-top: 0.15em;
}

.howto-article .howto-workspace-comment-body {
  padding: 0.3em 0.4em 1em;
  background-color: #fffcc7;
}

/* Icon inside a <ui-button> highlight link — gap between the label and icon. */
.howto-article .help-link .howto-icon {
  margin-left: 0.35em;
}

/* Toolbox tags put the icon before the name, like the toolbox itself. */
.howto-article .help-link .howto-icon:first-child {
  margin-left: 0;
  margin-right: 0.35em;
}

/* <ui-button> labels render bold so buttons scan out from body text. */
.howto-article .help-link.howto-ui-button {
  font-weight: bold;
}

/* A vocabulary term — inline, but visually distinct so glossary terms stand
   out in the text. A vocab list collecting these comes later. */
.howto-article vocab {
  font-weight: bold;
  color: var(--color-howto-accent);
}

/* An axis reference — the letter renders in its gizmo color so readers can
   match text to arrows (and to the same-colored block values). Authors write
   e.g. <axis-x>X</axis-x>, never a hex value. */
.howto-article axis-x,
.howto-article axis-y,
.howto-article axis-z {
  font-weight: bold;
}

.howto-article axis-x {
  color: var(--axis-x);
}

.howto-article axis-y {
  color: var(--axis-y);
}

.howto-article axis-z {
  color: var(--axis-z);
}

.howto-article step,
.howto-article topic,
.howto-article tip,
.howto-article .howto-related {
  display: block;
  margin: 0 0 1em;
  padding: 0.75em 0.9em;
  border-radius: 8px;
}

.howto-article step,
.howto-article topic {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
}

.howto-article step {
  counter-increment: howto-step;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* Same darker beige already used for kbd (see [data-theme='light'] kbd
   above), so each step reads as its own card against the lighter
   --color-menu page behind it (see [data-theme='light'] #info-tab-panel-howto
   above). */
[data-theme='light'] .howto-article step,
[data-theme='light'] .howto-article topic {
  background-color: var(--color-panel-bg);
}

/* A short <step-title> comes first inside <step> and carries the "Step N: "
   prefix itself, so the number and the title read as one heading line —
   important for scanning a list of steps at a glance. Steps without one (a
   step-title is optional, not every step needs a heading) fall back to a
   bare "Step N" label via the :not(:has(...)) rule below. <topic> is an
   unnumbered card for how-tos whose parts aren't a sequence, so its
   <topic-title> is the same heading without the prefix. */
.howto-article step-title,
.howto-article topic-title {
  display: block;
  font-weight: bold;
  margin-bottom: 0.3em;
  color: var(--color-howto-accent);
}

.howto-article step-title::before {
  content: 'Step ' counter(howto-step) ': ';
}

.howto-article step:not(:has(step-title))::before {
  content: 'Step ' counter(howto-step);
  display: block;
  font-weight: bold;
  margin-bottom: 0.3em;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-howto-accent);
}

/* Appended by wireHowToSteps() in ui/howToPanel.js, last inside <step>.
   Styled after the project steps on projects.flockxr.com: ticking it toggles
   .completed on the step, which greys the card out with a strikethrough
   while the Done checkbox itself stays at full strength. */
.howto-step-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1em;
  font-weight: 600;
  cursor: pointer;
}

.howto-step-done input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-howto-accent);
  cursor: pointer;
}

.howto-article step.completed {
  background-color: color-mix(in srgb, var(--color-text-primary) 8%, var(--color-bg));
}

.howto-article step.completed::before,
.howto-article step.completed > :not(.howto-step-done) {
  opacity: 0.45;
}

.howto-article step.completed::before,
.howto-article step.completed step-title,
.howto-article step.completed p,
.howto-article step.completed li {
  text-decoration: line-through;
}

.howto-article step img,
.howto-article step .howto-snippet {
  transition: filter 0.2s ease;
}

.howto-article step.completed img,
.howto-article step.completed .howto-snippet {
  filter: grayscale(1);
}

.howto-article tip {
  /* Light yellow: --color-primary-light is already the app's amber/gold
     accent (also --color-focus), reused here rather than inventing a new
     colour. */
  background-color: color-mix(in srgb, var(--color-primary-light) 12%, var(--color-bg));
  border-left: 4px solid var(--color-primary-light);
  font-size: 0.95em;
}

.howto-article .howto-related {
  background-color: var(--color-bg-secondary);
  border-left: 4px solid var(--color-primary-light);
  font-size: 0.95em;
}

.howto-article tip::before {
  content: 'Tip:';
  display: inline;
  font-weight: bold;
  margin-right: 0.4em;
}

.howto-article .howto-related::before {
  content: 'Related:';
  display: inline;
  font-weight: bold;
  margin-right: 0.4em;
}

.howto-article step p:last-child,
.howto-article topic p:last-child,
.howto-article tip p:last-child {
  margin-bottom: 0;
}

/* Rendered by wireHowToSnippets() in ui/howToPanel.js from a
   <snippet src="…"> tag — a real block, rendered live as inline SVG from
   Blockly JSON (see src/how-tos/snippets/README.md), so it always matches
   the block's actual current look, in whatever language is active. */
.howto-snippet {
  margin: 0 0 1em;
  text-align: left;
  overflow-x: auto;
}

.howto-snippet svg {
  max-width: none;
  height: auto;
}

/* <snippet block-menu="…"> — a static copy of the floating block menu
   (.fc-block-toolbar) sitting above the selected block. */
.howto-block-menu {
  position: relative;
  display: inline-flex;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px;
  background: var(--color-menu, #f9f9f9);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 10px;
  box-shadow: 0 3px 12px var(--color-shadow-medium, rgba(0, 0, 0, 0.2));
}

.howto-block-menu::after,
.howto-block-menu::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom: 0;
}

.howto-block-menu::after {
  bottom: -7px;
  border-top-color: var(--color-border, #ddd);
}

.howto-block-menu::before {
  bottom: -5px;
  border-width: 5px;
  border-bottom: 0;
  border-top-color: var(--color-menu, #f9f9f9);
  z-index: 1;
}

.howto-block-menu + svg {
  display: block;
  margin: 0;
}

.howto-article .howto-block-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  background: var(--color-button-bg, #f0f0f0);
  color: var(--color-text-primary, #000);
}

[data-theme='light'] .howto-article .howto-block-menu-btn {
  background: var(--color-panel-bg);
  color: var(--color-primary);
}

.howto-article .howto-block-menu-btn .howto-icon {
  width: 18px;
  height: 18px;
}

.howto-snippet figcaption {
  margin-top: 0.4em;
  font-size: 0.9em;
  font-style: italic;
  color: var(--color-text-primary);
}

.pc-keys {
  display: flex;
  align-items: center;
  gap: 0.2em;
}

/* Mirrors the on-screen pad: up centred above left / down / right. Placement is
   explicit because auto-flow would put `left` beside `up` on the first row. */
.pc-keys--dpad {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.2em;
  width: max-content;
}

.pc-keys--dpad .pc-chip:nth-child(1) {
  grid-area: 1 / 2;
}

.pc-keys--dpad .pc-chip:nth-child(2) {
  grid-area: 2 / 1;
}

.pc-keys--dpad .pc-chip:nth-child(3) {
  grid-area: 2 / 2;
}

.pc-keys--dpad .pc-chip:nth-child(4) {
  grid-area: 2 / 3;
}

.pc-chip {
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border: 0.07em solid currentcolor;
  border-radius: 0.18em;
}

.pc-chip--ringed {
  border-radius: 50%;
}

.pc-chip svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
  stroke-width: 1.5;
}

.pc-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.28em;
  padding: 0 5px;
  border: 0.06em solid currentcolor;
  border-radius: 0.15em;
}

.player-controls-note {
  margin: 1em 0 0;
  font-size: 0.85em;
  color: var(--color-muted);
}

/* Error notification banner */
.flock-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: 'Asap', sans-serif;
  font-size: 16px;
  box-shadow: 0 2px 4px var(--color-shadow-medium);
}

.flock-banner--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-bottom: 2px solid var(--color-error-border);
}

.flock-banner__message {
  flex: 1;
}

.flock-banner__action,
.flock-banner__close {
  flex: none;
  font-family: inherit;
  color: var(--color-error-text);
  background: transparent;
  border: 1px solid var(--color-error-text);
  border-radius: 4px;
  cursor: pointer;
}

.flock-banner__action {
  padding: 4px 12px;
  font-size: 15px;
}

.flock-banner__close {
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
}

.flock-banner__action:hover,
.flock-banner__close:hover,
.flock-banner__action:focus-visible,
.flock-banner__close:focus-visible {
  background: var(--color-error-text);
  color: var(--color-error-bg);
}

#movementDebugOverlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  pointer-events: none;
  white-space: pre;
  padding: 7px 9px;
  border-radius: 5px;
  background: rgb(0 0 0 / 75%);
  color: #ffffff;
  font: 12px/1.35 monospace;
  letter-spacing: 0.01em;
  max-width: min(92vw, 420px);
}

svg.blocklyTrashcanFlyout {
  background: gray;
  border-radius: 15px;
  border: 3px solid gray;
}

/* ---- Touch confirm dialog ---- */
.fc-confirm-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay, rgba(0, 0, 0, 0.4));
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-confirm-dialog {
  background: var(--color-menu, #f9f9f9);
  border-radius: 16px;
  padding: 24px 20px 16px;
  max-width: min(340px, 90vw);
  width: 100%;
  box-shadow: 0 8px 32px var(--color-shadow-medium, rgba(0, 0, 0, 0.3));
}

.fc-confirm-message {
  margin: 0 0 20px;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-primary, #000);
  text-align: center;
}

.fc-confirm-buttons {
  display: flex;
  gap: 10px;
}

.fc-confirm-btn {
  flex: 1;
  min-height: 64px;
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.fc-confirm-btn:focus-visible {
  outline: 2px solid var(--color-focus-outline);
}

.fc-confirm-btn--cancel {
  background: var(--color-button-bg, #e0e0e0);
  color: var(--color-text-primary, #000);
}

.fc-confirm-btn--ok {
  background: var(--color-button-primary, #004d4d);
  color: var(--color-text-on-primary, #fff);
}

[data-theme='dark'] .fc-confirm-btn--ok,
[data-theme='dark-contrast'] .fc-confirm-btn--ok,
[data-theme='low-color'] .fc-confirm-btn--ok,
[data-theme='contrast'] .fc-confirm-btn--ok,
[data-theme='contrast'] .fc-confirm-btn--cancel,
[data-theme='contrast'] .fc-block-toolbar-btn {
  color: #1a1a1a;
}

/* ---- Tablet floating block toolbar ---- */
.fc-block-toolbar {
  position: fixed;
  display: flex;
  gap: 6px;
  background: var(--color-menu, #f9f9f9);
  border: 1px solid var(--color-border, #ddd);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 3px 12px var(--color-shadow-medium, rgba(0, 0, 0, 0.2));
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity 0.12s;
  user-select: none;
  -webkit-user-select: none;
}

.fc-block-toolbar::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: calc(50% + var(--caret-shift, 0px));
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--color-border, #ddd);
  border-bottom: 0;
}

.fc-block-toolbar::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: calc(50% + var(--caret-shift, 0px));
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-menu, #f9f9f9);
  border-bottom: 0;
  z-index: 1;
}

.fc-block-toolbar.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Keyboard-only shortcut-letter overlay for the floating block toolbar. */
.fc-toolbar-badges {
  position: fixed;
  inset: 0;
  z-index: 201; /* above .fc-block-toolbar (200) */
  pointer-events: none;
  opacity: 0;
}

.fc-toolbar-badges.visible {
  opacity: 1;
}

.fc-toolbar-key-badge {
  position: absolute;
  transform: translate(-50%, -50%); /* centre on the anchor point, below the icon */
  display: flex;
  align-items: center;
  pointer-events: none;
}

.fc-toolbar-keycap {
  background: #fff;
  color: #000;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 2px 0 #888;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  font-family: monospace;
  min-width: 10px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.fc-toolbar-keycap--mod {
  width: 18px;
  height: 22px;
  box-sizing: border-box;
  padding: 0 0 0 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: 1.75px;
}

.fc-toolbar-keycap--paired {
  padding: 2px 3px;
}

.fc-block-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 7px;
  background: var(--color-button-bg, #f0f0f0);
  color: var(--color-text-primary, #000);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.fc-block-toolbar-btn:active {
  background: var(--color-button-bg-hover, #d0d0d0);
}

.fc-block-toolbar-btn[disabled] {
  opacity: 0.3;
}

/* Light mode only: the popup keeps the lighter menu ground (above), while the
   buttons take the darker info-panel ground and brand-purple icons, so they sit
   quietly against the menu. The trashcan icon is tinted to match in
   style/blockly.css. Other themes are untouched. */
[data-theme='light'] .fc-block-toolbar-btn {
  background: var(--color-panel-bg);
  color: var(--color-primary);
}

[data-theme='light'] .fc-block-toolbar-btn:active {
  background: color-mix(in srgb, var(--color-primary) 15%, var(--color-panel-bg));
}

/* Passive keyboard hint in the block toolbar (the "press M to move" icon).
   Styled like a button so it lines up with its badge, but inert. */
.fc-block-toolbar-hint {
  pointer-events: none;
  cursor: default;
}

/* The "no entry" cursor is the lock indicator (no outline — a dashed outline
   reads as Blockly keyboard-navigation passive focus). Target each locked
   block's own path via ">" so the cursor doesn't inherit onto sibling blocks
   nested below it in the SVG DOM. */
.blockly-locked > .blocklyPath {
  cursor: not-allowed !important;
}

/* Collapse the double-width two-panel strip: WebKit scrolls that phantom
   overflow on the entering tap and drags the canvas half off-screen. */
body.play-mode #maincontent {
  width: var(--view-width);
  overflow-x: hidden;
  height: calc(var(--app-height) - 50px - env(safe-area-inset-top));
}

.group-arrange-editor {
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  align-items: center;
}

.group-arrange-axis {
  font-weight: bold;
  padding-right: 4px;
}

.group-arrange-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 4px;
  font-size: 11px;
  color: var(--color-text-primary);
  background: var(--color-button-bg);
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.group-arrange-button svg {
  color: var(--axis-colour);
}

.group-arrange-button:hover:not(:disabled) {
  background: var(--color-button-bg-hover);
}

.group-arrange-button:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 1px;
}

.group-arrange-button:disabled {
  opacity: 0.4;
  cursor: default;
}