:root {
  --paper: #fff;
  --text: #1c1b2e;
  --muted: #6b6f80;                       /* 4.9:1 on white: AA for the small status and note text */
  --panel: rgba(255, 255, 255, .88);
  --panel-solid: #fff;
  --line: rgba(20, 8, 88, .14);
  --hover: rgba(20, 8, 88, .07);
  --accent: #0050b4;
  --danger: #c0262d;
  --warn: #8a5300;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* An author `display` beats the UA's [hidden] rule, and the toolbar buttons all set one. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;              /* no pull-to-refresh or rubber-band under the pen */
  background: var(--paper);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;            /* iOS: no callout / loupe on a long press */
  -webkit-tap-highlight-color: transparent;
}

/* The writing surface is the whole viewport. `fixed` + `inset: 0` rather than 100vh, which
   on a phone includes the part of the page the address bar is covering. */
#board {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;                     /* handwriting.js sets this too; the page must not scroll or zoom under a pen */
  cursor: crosshair;
}

/* An uploaded image, behind the writing: as large as the sheet allows, whole and unstretched.
   app.js sizes it to the sheet and moves it with the view. The canvas above it is transparent
   where there is no ink. */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  max-width: none;
  object-fit: contain;
  transform-origin: 0 0;
  pointer-events: none;
  user-select: none;
}

.hint {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgba(20, 8, 88, .2);
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 300;
  pointer-events: none;
  transition: opacity .25s ease;
}
body.has-ink .hint,
body.has-image .hint,
body.is-inking .hint { opacity: 0; }

/* The glass: what the toolbar, the notice above it and the result panel are all made of. It is
   one rule so that they cannot drift apart. Each adds its own shape and position below. */
.toolbar, .toast, .result {
  border: 1px solid var(--line);
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(20, 8, 88, .12);
  transition: opacity .2s ease;
}

/* A short notice just above the toolbar, for things the page did on its own (app.js). It is the
   toolbar's own pill at the toolbar's own height, inside the same screen margins, and it steps
   back while you write (see is-inking below). --toolbar-h is the toolbar's real height, which
   changes when it wraps. The notice never takes a touch: what is under it can still be written on. */
.toast {
  position: fixed;
  bottom: calc(var(--toolbar-h, 46px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: fit-content;                     /* as the toolbar: centred, wrapping at the screen margin */
  margin: 0 auto;                         /* a <p>: zero the top and bottom margins the browser gives it */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;                      /* the toolbar's height: 36px controls + 4px padding + 1px border, each side */
  padding: 4px 20px;
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.toast.is-on { opacity: 1; visibility: visible; transition: opacity .2s ease; }

/* ---------------- toolbar ---------------- */

.toolbar {
  position: fixed;
  bottom: 0;                              /* a bar across the foot of the screen, edge to edge */
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 16px;
  padding: 4px calc(4px + env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) calc(4px + env(safe-area-inset-left, 0px));   /* clear of notches and the iPhone's home indicator */
  border-width: 1px 0 0;                  /* only the top edge borders the page; the rest are screen edges */
  border-radius: 0;
  touch-action: manipulation;
}

/* While a stroke is being written the notice and the result panel step back, so they are not
   under the hand: both fade out completely. The toolbar stays where it is. */
body.is-inking .toast,
body.is-inking .result { opacity: 0; pointer-events: none; }

.group { display: flex; align-items: center; }
.toolbar__ink { display: contents; }     /* one bar on a computer; two on a phone or tablet (below) */

/* Every control is a 36px round target however small it draws, so the hover, armed and
   focus shapes all match the dots and the pill. */
.swatch, .nib, .tool {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.swatch::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
/* The hairline stays when chosen, so White still has an edge inside its ring. */
.swatch[aria-checked="true"]::before {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--panel-solid), 0 0 0 4px var(--text);
}

.nib::before {
  content: '';
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--muted);
}
.nib[aria-checked="true"]::before { background: var(--text); }

.tool:hover:not(:disabled) { background: var(--hover); }
.tool:disabled { opacity: .3; cursor: default; }

.swatch:focus-visible, .nib:focus-visible, .tool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pen only: while it is on, the hand is struck through and lit, meaning no fingers. */
#penonly { position: relative; }
#penonly[aria-pressed="true"],
.pentype[aria-checked="true"] { color: var(--accent); background: rgba(0, 80, 180, .1); }
#penonly[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px var(--panel-solid);          /* a halo, so the slash reads over the hand's own lines */
  transform: rotate(-45deg);
  pointer-events: none;
}

/* Clear asks twice: the first press swaps the bin for a question mark (see app.js). */
.icon--sure { display: none; }
#clear.is-armed { color: var(--danger); background: rgba(192, 38, 45, .1); }
#clear.is-armed .icon--clear { display: none; }
#clear.is-armed .icon--sure { display: block; }

/* ---------------- recognised text ---------------- */
/* Opens at the bottom, above the toolbar, when Recognise is pressed. data-state (set by app.js) decides what shows:
   busy (engine loading or reading), done, unsure (read, but not confidently), empty, error. */

.result {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--toolbar-h, 46px) + 10px);
  width: min(560px, calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  margin-inline: auto;
  padding: 4px 4px 12px 18px;
  border-radius: 26px;                    /* not a full pill: it holds a text box */
  touch-action: pan-x pan-y pinch-zoom;   /* the page blocks zoom; the recognised text may need it */
}
.result:focus { outline: none; }         /* focused on opening (app.js) so it is announced; its controls show their own focus */

.result__bar { display: flex; align-items: center; gap: 2px; }

.result__status {
  flex: 1;
  margin: 0;
  padding: 8px 8px 8px 0;
  color: var(--muted);
  font-size: 13px;
}
.result[data-state="unsure"] .result__status { color: var(--warn); }
.result[data-state="empty"] .result__status,
.result[data-state="error"] .result__status { color: var(--danger); }

.result[data-state="busy"] .result__status::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Only a finished reading has text to edit, copy, or qualify. */
.result__text, .result__note, #result-copy { display: none; }
.result[data-state="done"] .result__text,
.result[data-state="unsure"] .result__text { display: block; }
.result[data-state="done"] .result__note,
.result[data-state="unsure"] .result__note { display: block; }
.result[data-state="done"] #result-copy,
.result[data-state="unsure"] #result-copy { display: inline-grid; }

.result__text {
  width: calc(100% - 14px);
  min-height: 5.5em;
  max-height: 40vh;
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;   /* 16px: iOS zooms into anything smaller */
  resize: vertical;
  -webkit-user-select: text;
  user-select: text;                       /* the page itself is unselectable; this text must not be */
}
.result__text:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.result__note { margin: 8px 14px 0 0; color: var(--muted); font-size: 12px; }

.icon--copied { display: none; }
#result-copy.is-done .icon--copy { display: none; }
#result-copy.is-done .icon--copied { display: block; }

/* Recognise is working: the icon breathes. */
#recognise[aria-busy="true"] .icon { animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }

/* ---------------- phone and tablet: two bars ---------------- */
/* On a phone or tablet (up to 1024px wide, so a landscape iPad too) the toolbar splits: inks
   and pen sizes along the top, the buttons along the bottom. The toolbar itself steps out of
   the layout (display: contents) and each half becomes a bar of its own, edge to edge. Icons
   and colour dots draw at 28px, in 40px targets. */
@media (max-width: 1024px) {
  .toolbar { display: contents; }

  .toolbar__ink, .toolbar__tools {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px 16px;
    border: 0 solid var(--line);
    background: var(--panel);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 8px 28px rgba(20, 8, 88, .12);
    touch-action: manipulation;
  }
  .toolbar__ink {
    top: 0;
    padding: calc(4px + env(safe-area-inset-top, 0px)) calc(4px + env(safe-area-inset-right, 0px)) 4px calc(4px + env(safe-area-inset-left, 0px));
    border-bottom-width: 1px;
  }
  .toolbar__tools {
    bottom: 0;
    gap: 0;                               /* these are buttons side by side, not groups: 9 x 40px fit 375px */
    padding: 4px calc(4px + env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) calc(4px + env(safe-area-inset-left, 0px));
    border-top-width: 1px;
  }

  .swatch, .nib, .tool { width: 40px; height: 40px; }
  .icon, .swatch::before { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .toolbar, .hint, .result, .toast { transition: none; }
  .result[data-state="busy"] .result__status::before,
  #recognise[aria-busy="true"] .icon { animation: none; }
}

/* ---------------- page text ---------------- */

/* For screen readers and search engines: the page's name, which the canvas itself cannot carry. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Shown only without JavaScript, over the (then useless) writing surface. */
.noscript {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  max-width: 34em;
  margin: 0 auto;
  padding: 24px;
  background: var(--paper);
  user-select: text;
  -webkit-user-select: text;
}
.noscript h2 { margin: 0 0 .5em; font-size: 22px; }
.noscript p { margin: 0 0 1em; }