/* Base reset + the layout utilities the app uses. Claude's preview supplies
   these from Tailwind; a plain web host does not, so they are written out. */
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  height: 100%; margin: 0; padding: 0; background: #8ADCFF;
  overscroll-behavior: none;              /* no iOS rubber-band bounce */
  position: fixed; inset: 0;              /* stops Safari scrolling the whole page */
  -webkit-touch-callout: none;            /* no long-press callout on a kid's tablet */
}
#root { height: 100%; }
* { -webkit-tap-highlight-color: transparent; }
img, canvas, svg { max-width: 100%; }

.flex { display: flex; }
.grid { display: grid; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-left { text-align: left; }
.w-full { width: 100%; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.hair { border-top: 1px solid var(--line); }