style.css

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

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

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

  /* 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: #e0e0e0;
  --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: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  --color-loading-spinner: #e3e3e3;
  --color-loading-spinner-active: #511d91;

  /* Focus Colors */
  --color-focus: #fc3;
  --color-focus-ring: #511d91;

  /* Menu Colors */
  --color-menu-hover: #f0f0f0;
  --color-menu-item: #511d91;
  --color-menu: #f9f9f9;
  --color-button-bg: #f0f0f0;

  /* 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);
  --color-outline-focus: #ffb700;
  --color-focus-ring: #ffb700;

  /* 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-dropdown-hover: #555555;

  --color-menu: var(--color-dropdown-bg);
  --color-menu-hover: var(--color-dropdown-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);
  --color-outline-focus: #ffb700;
  --color-focus-ring: #ffb700;

  /* 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-dropdown-hover: #555555;

  --color-menu: var(--color-dropdown-bg);
  --color-menu-hover: var(--color-dropdown-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: #ffffff;
  --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: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  --color-loading-spinner: #e3e3e3;
  --color-loading-spinner-active: #511d91;

  /* Focus Colors */
  --color-focus: #fc3;
  --color-focus-ring: #511d91;

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

  /* 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-vision'] {
  --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: #2a2a2a;
  --color-focus-ring: #e0e0e0;
  --color-outline-focus: #e0e0e0;

  /* 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;
}

[data-theme='dark'] #exampleButton {
  background-color: var(--color-bg) !important;
}

[data-theme='dark-contrast'] #exampleButton {
  background-color: var(--color-bg) !important;
}

/* 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: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-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);
}

/* Demo picker trigger button — styled to read as a clickable dropdown. */
#exampleButton {
  font-size: 14px;
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Size to the label (varies by language) and keep it on one line with the
     caret, rather than clipping or wrapping. */
  width: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* The caret is an in-DOM span (aria-hidden), so it renders on every browser
   and stays silent to screen readers without relying on the newer CSS
   content alt-text syntax. */
.example-caret {
  font-size: 0.9em;
  line-height: 1;
}

/* Canvas Styles */
#renderCanvas {
  width: 100%;
  height: 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;
}

/* Stopped overlay — covers only the Babylon canvas, leaves gizmos clickable */
.canvas-stopped-overlay {
  position: absolute;
  /* Geometry is set in JS to match the #renderCanvas box exactly */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.canvas-stopped-overlay[hidden] {
  display: none;
}

/* Hide the design-tool gizmos while stopped — they can't be used then.
   Using a class (not inline style) preserves view.js's own display logic. */
#canvasArea.is-stopped #gizmoButtons {
  display: none !important;
}

.canvas-stopped-overlay__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    color 0.12s ease;
}

.canvas-stopped-overlay__play .icon,
.canvas-stopped-overlay__play svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Override the generic .icon brand colour so this icon stays white,
   matching the button's own colour, on the dark translucent backdrop. */
.canvas-stopped-overlay__play .icon {
  color: inherit;
}

.canvas-stopped-overlay__play:hover,
.canvas-stopped-overlay__play:focus-visible {
  transform: scale(1.08);
  color: #ffffff;
}

.canvas-stopped-overlay__play:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

/* Layout Styles */
#maincontent {
  width: 100vw;
  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;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#codePanel {
  position: relative;
}

#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;
}

#blocklyZoomControls .toolbar-divider,
#info-panel-tabs .toolbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--color-border);
  margin: 0 4px;
}
[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-vision'] #canvasArea {
  background-color: #121212 !important;
}

#menu {
  display: flex;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  align-items: center;
  justify-content: space-between;
  max-width: 100vw;
  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;
}

#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;
  border-radius: 15px;
  cursor: pointer;
  touch-action: manipulation;
}

#exampleButton {
  background-color: var(--color-button-bg);
}

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

/* Gizmo Buttons */
.gizmo-buttons {
  font-family: 'Atkinson Hyperlegible Next', 'Asap', Helvetica, Arial, Lucida, sans-serif;
  padding: 5px 5px 25px 0px;
  margin: 0;
  box-sizing: border-box;
  flex-direction: column;
}

/* Height must stay fixed whatever the text: resizeCanvas() subtracts it. The
   top margin clears the Ctrl+G badges renderBadges() floats below each button. */
.gizmo-status {
  height: 1.6em;
  margin: 24px 0 0 5px;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* One coordinate, styled like the value field on a block. Border colour is set
   inline, from AXIS_HEX. */
.gizmo-status__pill {
  display: inline-block;
  padding: 0 5px;
  border: 2px solid;
  border-radius: 999px;
  /* Digits are cap-height against the labels' x-height, so they read bigger at
     a matching size. */
  font-size: 0.9em;
  line-height: 1.25;
  background: var(--color-bg);
  color: var(--color-text);
  /* Steady size and digit width, so 0.6 -> 0 doesn't shift the pills beside it. */
  box-sizing: border-box;
  min-width: 2.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Separate from #gizmoButtons's own display (toggled directly via inline
   style in view.js for show/hide) so the mobile layout below can safely
   switch this to a grid without an inline style winning the cascade. */
.gizmo-buttons-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.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);
}

.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);
}

/* On phone widths the toolbar no longer fits on one line. Force a
   deliberate 5-per-row grid (2 tidy rows for the current 10 buttons)
   rather than letting flex-wrap overflow unevenly. Columns are sized to
   content (not 1fr) and the group is centred, so the buttons stay packed
   together instead of spreading across the full width. Shared by portrait
   phones and phones in landscape (docked beside the canvas, see below);
   tablets still fit one row in either orientation. */
@media (max-width: 600px),
  (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  .gizmo-buttons-inner {
    display: grid;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 5px;
  }
  /* Neutralise the shape button's desktop left margin, which would
     otherwise nudge the first column out of line with the row below. */
  .gizmo-buttons-inner #shape-menu {
    margin-left: 0;
  }
}

/* Too narrow for the longest prompts on one line, so give the status two. */
@media (max-width: 600px) {
  .gizmo-status {
    height: 3.2em;
    white-space: normal;
    text-align: center;
  }
}

.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-vision'] #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-vision'] .gizmo-button img,
[data-theme='low-vision'] .bigbutton svg {
  color: #f0f0f0 !important;
}

/* Make links in 'About' modal 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-vision'] .modal-content 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: 0px 4px 8px var(--color-shadow-medium);
  border-radius: 5px;
  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: 5px;
  padding: 5px;
  display: inline-block;
  cursor: pointer;
}

#shapes-dropdown ul li img {
  width: 50px;
  height: 50px;
}

#shapes-dropdown ul li:hover {
  background-color: var(--color-bg-glass-hover);
}

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

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

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

/* 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;
}

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

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

#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;
  cursor: pointer;
  font-size: 18px;
  padding: 5px 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
}

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

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

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

#flocklink img {
  height: 15px;
}
@media (max-width: 1024px) {
  #maincontent {
    width: 200vw;
    height: calc(var(--app-height) - var(--dynamic-offset) - env(safe-area-inset-top));
    overflow-x: auto;
  }

  #scene-explorer-host,
  #inspector-host,
  #toggleDesign {
    display: none !important;
  }

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

  #bottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    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: white;
    color: var(--color-primary);
  }

  /* Inherit colour from theme */
  [data-theme='dark'] #bottomBar,
  [data-theme='dark-contrast'] #bottomBar,
  [data-theme='contrast'] #bottomBar,
  [data-theme='low-vision'] #bottomBar,
  [data-theme='dark'] #viewToggle,
  [data-theme='dark-contrast'] #viewToggle,
  [data-theme='contrast'] #viewToggle,
  [data-theme='low-vision'] #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-vision'] .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 whichever docks here — the
     shortcuts tabs in narrow *portrait* (where the info panel is still docked,
     see the landscape-only hide below), or otherwise just keeping tabs clear
     of the bar. Without this the tabs/pill-toggle area render underneath the
     fixed bar and get covered by it. */
  #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. Kept as a
   base rule (rather than solely relying on #bottomBar being display:none on
   wide screens) so it doesn't render unstyled in narrow *portrait* layouts,
   where the info panel still has room to host the docked copy instead. */
.bottombar-flocklink {
  display: none;
}

/* Narrow layouts (either orientation) have no side-by-side panels to resize,
   so the drag handle is hidden — also keeps its tabindex out of the tab
   order and drops it from the Ctrl+B highlight areas. */
@media only screen and (max-width: 1024px) {
  .resizer {
    display: none;
  }
}

/* Narrow AND short: landscape at low resolutions (e.g. small laptop/tablet
   windows) where there's no room beside the canvas to dock the info panel's
   shortcuts panel. Portrait phones are narrow too, but tall enough that the
   docked panel still fits, so this is scoped to landscape only. In this mode:
   shortcuts open as a modal (.shortcuts-modal), the flock link moves into the
   bottom bar, and Ctrl+B "area 5" drops out on its own (renderHighlights skips
   0-size nodes). Selector is `aside#info-panel` (not just `#info-panel`) so it
   out-specifies the base `#info-panel` rule, declared later in the file, which
   would otherwise win the cascade. Must match the JS breakpoint used by
   `isNarrowLayout()` in accessibility/keyboardui.js. */
@media (max-width: 1024px) and (orientation: landscape) {
  aside#info-panel {
    display: none;
  }

  .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,
  .bottombar-flocklink:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

/* Phones in landscape are height-starved: the 16:9 canvas is height-bound and
   leaves unused margin on both sides, so dock the 2-row 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) {
  /* Nothing here may centre its children. #canvasArea is sized to the viewport
     and the fixed #bottomBar overlaps its lower edge, so the box extends under
     the bar; resizeCanvas() accounts for that when sizing the canvas, but
     centring would place it in the full box and push it back under the bar.
     Everything stays anchored to the top-left instead. */
  #canvasArea {
    flex-direction: row;
  }

  /* Grows into all the width left over beside the canvas (the buttons
     themselves stay content-sized at its left), so the shape popup can anchor
     to it and still reach the grey space past the buttons. resizeCanvas()
     therefore measures .gizmo-buttons-inner, not this — this width depends on
     the canvas width it is being used to compute. */
  #gizmoButtons {
    position: relative;
    flex: 1 1 auto;
    padding: 5px;
    /* display:flex comes from an inline style in view.js */
    align-items: flex-start;
  }

  .gizmo-buttons-inner {
    width: auto;
  }

  /* Free to wrap here: the canvas is measured from .gizmo-buttons-inner. */
  .gizmo-status {
    align-self: stretch;
    min-width: 0;
    height: auto;
    margin-left: 0;
    white-space: normal;
    text-align: left;
  }

  /* 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;
  }
}

@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 */
  }

  .resizer {
    width: 8px;
    background-color: #aaa;
    cursor: col-resize;
    position: relative;
    transition: background-color 0.2s ease;
    display: none; /* Hidden by default for mobile */
    flex-shrink: 0;
    touch-action: none;
  }

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

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

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

  .resizer::before {
    height: 60px; /* Taller grip indicator */
    width: 6px; /* Thicker grip */
  }

  .resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 30px;
    background-color: #999;
    border-radius: 2px;
  }

  .resizer {
    display: block;
  }
}

/* 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-vision'] #main-menu a {
  color: var(--color-text-primary);
}

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

[data-theme='dark-contrast'] #menuDropdown .menu-item .menu-icon svg,
[data-theme='low-vision'] #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;
  min-width: 200px;
  top: 100%; /* Below the button */
  left: 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.5em;
  box-shadow: 0 4px 6px var(--color-shadow);
  z-index: 1000;
}

.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;
}

/* Demo / example picker: a dropdown panel of tiles anchored under the Demo
   button. The backdrop stays full-screen (for click-outside) but transparent,
   so the panel reads as a popover rather than a centred modal. */
#exampleModal {
  background-color: transparent;
}

.example-modal-content {
  position: fixed;
  /* top / left / max-width are set by JS (openExampleModal) relative to the
     Demo 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(560px, calc(100vw - 16px));
  max-width: none;
  max-height: 70vh;
  overflow-x: hidden;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px var(--color-shadow-medium);
}

.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);
}

.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,
.example-tab:focus-visible {
  outline: 3px solid var(--color-focus);
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  text-align: center;
  width: 100%;
  min-height: 84px;
  padding: 4px;
  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-emoji {
  flex: none;
}

.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,
.example-tile:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  z-index: 1;
}

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

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

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

.hidden {
  display: none !important;
}

.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-vision'] input {
  border-style: solid;
}

@media (max-width: 1024px) {
  #projectName {
    display: none; /* hid the project name input box for mobile screens*/
  }
  #openButton {
    display: none; /* Hide open icon on mobile screens */
  }
  #exportCodeButton {
    display: none; /* Hide save icon on 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,
.skip-link:focus-visible {
  left: 0;
  outline: 3px solid var(--color-focus);
  outline-offset: -3px;
}

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

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

/* High contrast focus for better visibility */
.bigbutton:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  background-color: var(--color-button-bg-hover);
}

#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 {
  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 {
  outline: 3px solid var(--color-focus);
  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:focus-within .modal-content {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

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

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

.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 */
#sceneExplorer .icon {
  color: unset;
}

.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);
}

/* Make some of the icons smaller for better fit in buttons */
.bigbutton .icon--sm {
  height: 1.25em;
  width: 1.25em;
}

/* 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;
  color: var(--color-text-brand);
}

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

[data-theme='contrast'] .menu-item[aria-haspopup='true']:hover .menu-arrow {
  color: black;
}

#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);
}

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

[data-theme='contrast'] .menu-item:hover .menu-label {
  color: black;
}

[data-theme='contrast'] #main-menu a:hover {
  color: black;
}

[data-theme='contrast'] .menu-item:hover .menu-icon svg {
  fill: black;
}

.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;
  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;
}
.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;
}

/* Force grid (override earlier flex rules) and remove extra ul padding */
#shapes-dropdown > ul {
  display: grid !important;
  grid-template-columns: repeat(5, 60px);
  gap: 8px;
  overflow: visible !important; /* override old scrollbar-hiding rule */
  list-style: none;
}

/* 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;
    /* Pull back up past the bar's 25px bottom padding and the .gizmo-status
       block below the buttons (24px margin + 3.2rem) to sit just under them. */
    margin-top: calc(-44px - 3.2rem);
    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. */
  #shapes-dropdown > ul {
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    width: 282px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .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 (30px button + 4px gap). */
  .scrollable-container .scroll-button.left {
    left: -34px;
  }
  .scrollable-container .scroll-button.right {
    right: -34px;
  }
}

/* Landscape: open rightward from the plus button, across the rest of the
   toolbar and the grey space beyond it, so the canvas stays clear. #shape-menu
   goes static so the popup resolves against #gizmoButtons, whose left edge is
   fixed relative to the buttons — the button's own position moves with the
   canvas width, so anchoring to it would need JS. Tiles are 36px so the 5 rows
   still clear the plus button (5 * (36 + 10) + 4 * 8 = 262px). */
@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 */
    /* Start one button in: the bar's 5px padding, a 34px button (7px padding
       either side of a 20px icon), then the grid's 5px gap. */
    left: calc(5px + 34px + 5px);
    right: 5px;
    bottom: auto;
    width: auto;
    padding: 10px;
    z-index: 80;
    box-sizing: border-box;
  }
  #shapes-dropdown ul li img {
    width: 36px;
    height: 36px;
  }
  /* Fit as many 46px tiles (36px img + 5px li padding either side) as the width
     allows, up to the 5 that the gap beside the plus button is sized for. The
     narrowest landscape phones leave less than that — the canvas alone fills
     their width — so the count has to drop rather than the rows overflow, which
     #canvasArea would clip. The scrolling rows keep their chevrons either way. */
  #shapes-dropdown > ul {
    grid-template-columns: repeat(auto-fill, 46px);
    justify-content: center;
    justify-items: center;
    width: 100%;
    max-width: 262px;
    margin-left: auto;
    margin-right: auto;
  }
  .scrollable-container {
    width: 100%;
    max-width: 262px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Chevrons stay at the desktop -15px, overlapping the first and last tile.
     Portrait nudges them out to -34px, but there's no margin to do that here:
     the menu is sized to the gap beside the plus button and the rows fill it,
     so out-dented chevrons would cover the plus button on the left and be
     clipped by #canvasArea on the right. */
}

/* 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 {
  outline: 3px solid var(--color-focus);
  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 */
#shortcuts-list {
  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: 33% 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;
}

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

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

.info-tab-btn.active {
  background-color: var(--color-button-bg-hover);
  box-shadow: none;
}

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

#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;
}

#info-panel:has(.info-tab-btn.active) #info-panel-body {
  background-color: var(--color-bg);
}

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

.info-tab-panel:focus {
  outline: 2px solid var(--color-focus);
  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;
}

.shortcuts-panel-title {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0;
}

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

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

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

.shortcuts-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 {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* 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-ring);
}

.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-vision'] .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: 2px;
  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 */
  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;
  pointer-events: none;
  min-width: 10px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.fc-block-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  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;
}

/* 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;
}

.fc-block-toolbar-btn--delete {
  color: #c0392b;
}

[data-theme='dark'] .fc-block-toolbar-btn--delete,
[data-theme='dark-contrast'] .fc-block-toolbar-btn--delete {
  color: #e57373;
}

/* 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;
}