/* Amani Blocks in Baoba's tokens (theme.js has the same values for Blockly). Big touch targets for children: every
   button is at least 56 px, the blocks' text 16 px drawn at 1.15×. Portrait: the toolbox along the top, the buttons
   along the bottom; landscape on a phone: the toolbox down the side, the buttons in a column. */

:root {
  --ink: #20231F;
  --muted: #62675F;
  --line: #E7E9E3;
  --outline: #C1C1C1;
  --background: #F7F8F4;
  --soft: #F0F1EB;
  --card: #FFFFFF;
  --yellow: #FDC81D;
  color-scheme: light;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--ink);
  font: 500 16px/1.4 Roboto, "Noto Sans", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

#statement {
  margin: 0;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.35;
}

#statement[hidden] { display: none; }

#editor {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

#workspace {
  position: absolute;
  inset: 0;
}

#hint, #status {
  position: absolute;
  margin: 0;
  padding: 10px 16px;
  max-width: min(80%, 420px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  pointer-events: none;
}

#hint {
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
}

#status {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hint[hidden], #status[hidden], #capacity[hidden], #bar[hidden] { display: none; }

#bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line);
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 56px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 12px;
  font: inherit;
  font-size: 18px;
  cursor: pointer;
  touch-action: manipulation;
}

button svg { width: 24px; height: 24px; fill: currentColor; flex: none; }

button.icon { padding: 0; flex: none; }
button.quiet { min-width: 0; padding: 0 14px; }
button.quiet span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

button.icon, button.quiet {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--outline);
}

button.primary {
  margin-inline-start: auto;
  flex: none;
  min-width: 128px;
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  font-weight: 700;
}

button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[dir="rtl"] button svg { transform: scaleX(-1); }

#capacity {
  position: absolute;
  bottom: 16px;
  inset-inline-start: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 18px;
  min-width: 56px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-radius: 12px;
  padding: 6px 8px;
}

#capacity.over { background: var(--yellow); color: var(--ink); }

@media (max-width: 400px) and (orientation: portrait) {
  #bar { gap: 8px; padding-inline: 12px; }
  button.quiet svg { display: none; }
  button.quiet, button.primary { font-size: 17px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  body { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; }
  #statement { grid-column: 1; grid-row: 1; padding: 6px 16px; font-size: 15px; }
  #editor { grid-column: 1; grid-row: 2; }
  #bar { grid-column: 2; grid-row: 1 / span 2; }
  #bar {
    flex-direction: column;
    justify-content: flex-start;
    border-top: 0;
    border-inline-start: 1px solid var(--line);
    padding: 12px;
    padding-inline-end: calc(12px + env(safe-area-inset-right));
  }
  button.quiet { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 14px; max-width: 112px; }
  button.primary {
    margin-inline-start: 0;
    margin-top: auto;
    min-width: 112px;
    min-height: 72px;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
  }
}

/* Blockly, in the tokens: Ink text on every block, white fields with a grey edge, the selected block in Ink. */
.blocklyText, .blocklyFlyoutLabelText, .blocklyDropdownText { fill: var(--ink) !important; }
.blocklyEditableField > rect, .blocklyEditableText > rect, .blocklyFieldRect { fill: var(--card) !important; fill-opacity: 1 !important; stroke: var(--outline); }
.blocklySelected > .blocklyPath, .blocklySelected > .blocklyPathLight { stroke: var(--ink) !important; stroke-width: 3px; }
.blocklyMainBackground { stroke: none !important; }
.blocklyFlyoutBackground { fill: var(--card) !important; fill-opacity: 1 !important; }
.blocklyToolboxFlyout .blocklyFlyoutBackground, .blocklyFlyout .blocklyFlyoutBackground { stroke: var(--line); }
.blocklyDropDownDiv { border-radius: 12px !important; border: 1px solid var(--line) !important; background: var(--card) !important; }
.blocklyDropDownDiv .blocklyMenuItem, .blocklyMenu .blocklyMenuItem { min-height: 48px; display: flex; align-items: center; font-size: 18px; color: var(--ink); }
.blocklyMenuItemHighlight, .blocklyMenuItem:hover { background: #FFF6DA !important; }
.blocklyWidgetDiv .blocklyHtmlInput { font-size: 18px; color: var(--ink); }
.blocklyTrash { opacity: 0.6; }
.blocklyScrollbarHandle { fill: var(--outline) !important; }

@media (orientation: landscape) and (max-height: 560px) {
  #capacity { bottom: auto; top: 12px; inset-inline-start: auto; inset-inline-end: 16px; }
}

/* The portrait toolbox shows every block (flyout.js): no scrollbar to drag across it. */
.blocklyFlyout .blocklyScrollbarHorizontal, .blocklyFlyoutScrollbar.blocklyScrollbarHorizontal { display: none; }
/* The count reads « 1 / 6 » in every language; it sits at the start side of the page (the counter's own direction is
   left to right, so its place is set by the page's). */
#capacity { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] #capacity { inset-inline-start: auto; right: 16px; }
@media (orientation: landscape) and (max-height: 560px) {
  [dir="rtl"] #capacity { right: auto; left: 16px; }
}