/* Page, canvas and menu styles. Colours are tokens so White on black just swaps them. */

:root{
  --paper: #ffffff;
  --ink: #000000;
  --mute: #6b6b6b;
  --side-w: 320px;   /* sidebar width; the canvas shrinks by this while the menu is open */
  --panel-h: 50vh;   /* phones: the menu is a bottom panel of this height instead */
}
/* inverted: white type on a black background */
body.inverted{
  --paper: #000000;
  --ink: #ffffff;
  --mute: #9a9a9a;
}
html, body{ height: 100%; }
/* app-like touch: no double-tap zoom, no grey tap flash, no text selection or
   long-press popups on the type and buttons, no pull-to-refresh bounce */
html{ touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{ overscroll-behavior: none; }
button, canvas, label, .rowlabel{
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
[hidden]{ display: none !important; }
body{
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  font-family: 'Times New Roman', Times, serif;
}
canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--paper);
}
body.idle, body.idle canvas{ cursor: none; }
/* open menu pushes the type aside: the canvas gives up the sidebar's width */
body.menu-shown canvas{ width: calc(100% - var(--side-w)); }

/* Menu: a full-height sidebar on the right */
.menu{
  overscroll-behavior: contain;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--side-w);
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  border-left: 1px solid var(--ink);
  font-size: 14px;
  animation: menu-in-right .22s ease-out;
}
.menu:focus{ outline: none; }
.menu.closing{ animation: menu-out-right .2s ease-in forwards; }
/* Phones: the menu slides in over the type from the left, opened by a burger
   button (top left, always shown); Play/Pause sits bottom centre */
@media (max-width: 600px){
  body.menu-shown canvas{ width: 100%; }
  .menu{
    right: auto;
    left: 0;
    width: min(320px, 86vw);
    border-left: 0;
    border-right: 1px solid var(--ink);
    animation-name: menu-in-left;
  }
  .menu:focus{ outline: none; }
.menu.closing{ animation-name: menu-out-left; }
}
/* slide in on open, back out on close (the menu is hidden when the slide-out ends) */
@keyframes menu-in-right{ from{ transform: translateX(100%); } to{ transform: none; } }
@keyframes menu-out-right{ from{ transform: none; } to{ transform: translateX(100%); } }
@keyframes menu-in-left{ from{ transform: translateX(-100%); } to{ transform: none; } }
@keyframes menu-out-left{ from{ transform: none; } to{ transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce){ .menu, .menu:focus{ outline: none; }
.menu.closing{ animation: none; } }
/* small fixed buttons: Play/Pause (always shown, top left) and Menu (bottom right) */
.corner{
  position: fixed;
  appearance: none;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: 700 13px 'Times New Roman', Times, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
}
.corner:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.play{
  left: 16px;
  top: calc(16px + env(safe-area-inset-top, 0px));
  min-width: 7em;   /* same width for Play and Pause */
}
.menu-open{
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.burger{ display: none; }
@media (max-width: 600px){
  .play{
    top: auto;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
  }
  .menu-open{
    right: auto;
    bottom: auto;
    left: 16px;
    top: calc(16px + env(safe-area-inset-top, 0px));
    padding: 11px 10px;   /* keeps a ~44px tap target around the bare icon */
    border: 0;
    background: none;
  }
  .menu-open .label{ display: none; }
  .burger{ display: flex; flex-direction: column; gap: 5px; width: 22px; }
  .burger span{ display: block; height: 2px; background: var(--ink); }
}
.menu button{
  appearance: none;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: 700 13px 'Times New Roman', Times, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px;
  cursor: pointer;
  min-width: 7.5em;
}
.menu .close{
  min-width: 0;
  border: 0;
  background: none;
  padding: 10px;
  margin: -10px -10px -10px 0;   /* bigger tap target, icon still lines up with the edge */
}
/* close icon: two bars crossed, drawn like the burger */
.x{ display: block; position: relative; width: 22px; height: 22px; }
.x::before, .x::after{
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 10px;
  height: 2px;
  background: var(--ink);
  transform: rotate(45deg);
}
.x::after{ transform: rotate(-45deg); }
.menu .row{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.menu .row.head{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.menu .rowlabel{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.menu .fx{ min-width: 0; flex: 1; padding-left: 0; padding-right: 0; }
/* text field: plain Times, case exactly as typed */
.menu textarea{
  box-sizing: border-box;
  width: 100%;
  min-height: 8.5em;
  resize: vertical;
  padding: 8px 10px;
  font: 400 16px/1.25 'Times New Roman', Times, serif;   /* 16px: phones don't zoom in on focus */
  text-transform: none;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 0;
}
.menu textarea:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
/* B I U + alignment: one toolbar row, two joined groups */
.menu .toolbar{ display: flex; gap: 10px; }
.menu .toolbar .group{ flex: 3; }
.menu .toolbar .group + .group{ flex: 4; }
.menu .tb{ min-width: 0; flex: 1; padding: 6px 0; font-size: 16px; letter-spacing: 0; text-transform: none; }
.menu .tb svg{ display: block; margin: 0 auto; }
.menu button[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }
.menu button:focus-visible, .menu input:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
/* name | control | value, lined up across the three controls */
.menu label{
  display: grid;
  grid-template-columns: 6.6em 1fr 4.2em;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.menu input[type="range"]{ width: 100%; margin: 0; accent-color: var(--ink); }
.menu .group{ display: flex; }
.menu .group button + button{ border-left: 0; }
/* typefaces: a joined vertical list */
.menu .group[aria-label="Typeface"]{ flex-direction: column; }
.menu .group[aria-label="Typeface"] button + button{ border-left: 1px solid var(--ink); border-top: 0; }
.menu .stepper{ display: inline-flex; align-items: stretch; }
.menu .stepper button{ min-width: 0; padding: 4px 10px; font-size: 16px; letter-spacing: 0; }
.menu input[type="number"]{
  width: 3.2em;
  text-align: center;
  font: 700 16px 'Times New Roman', Times, serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  -moz-appearance: textfield;
}
.menu input[type="number"]::-webkit-inner-spin-button,
.menu input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.menu .val{
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--mute);
}