/* Trace, laid out for an iPad Air (834 x 1112 points) held either way, and for
   phones: a big white board to write on, the steps and buttons beside it (on the
   side away from the writing hand when the iPad is on its side, above it when
   upright). Same paper, ink and blue as the other KidStudy apps. */

@font-face { font-family: 'Andika'; src: url('../fonts/andika.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'VIC Hand'; src: url('../fonts/vic-hand.woff2') format('woff2'); font-weight: 400 700; font-display: block; }

:root {
  color-scheme: light;
  --bg: #f6f3ec;
  --ink: #1d2433;
  --muted: #5b6577;
  --line: #e4dfd4;
  --accent: var(--ks-blue, #2f5fb3);
  --gold: var(--ks-sun, #e5a50a);
  --shadow: 0 1px 2px rgb(29 36 51 / 0.08), 0 8px 24px rgb(29 36 51 / 0.1);
  --ui: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --book: 'Andika', var(--ui);
  --hand: 'VIC Hand', var(--book);
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --gap: 14px;
}

/* Trace belongs to Writing: it wears the Writing orange, as each KidStudy app wears its
   subject colour (site/css/kidstudy-ui.css, loaded after this file, uses these). */
body.trace { --subject: var(--ks-writing, #f08a24); --subject-dark: #c96512; --subject-soft: #fdeedd; --accent: var(--subject-dark); }
body.trace .bar-title:not(.glyph) { color: var(--subject-dark); font-family: var(--ks-brand-font); font-weight: 600; }

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body.trace {
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.4 var(--ui);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr); /* bar, settings, Pencil offer, page */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.message { grid-row: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; font-size: 22px; }
.message::before { content: ''; width: 150px; aspect-ratio: 582 / 640; background: url('../brand/kobi-main.webp') center / contain no-repeat; }

/* ---- Bar and buttons (as in the Maths app) ---- */

.bar { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.bar-title { flex: 1; min-width: 0; margin: 0; font: 400 32px/1.2 var(--book); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title.glyph { font: 400 40px/1.1 var(--hand); }
.bar-title.glyph .now { color: var(--accent); text-decoration: underline 3px; text-underline-offset: 6px; }

.round {
  flex: none;
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 26px;
  line-height: 1;
  text-decoration: none;
}
/* Kobi is the way home, as in every KidStudy app. */
.bar a.round[href="./"] { font-size: 0; border-color: var(--ks-blue); background: var(--ks-blue) url('../icons/icon-192.png') center / cover; }

.big {
  min-height: 60px;
  padding: 0 24px;
  border: 2px solid var(--line);
  border-radius: 30px;
  background: #fff;
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
}
.big.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.round:active, .big:active, .tile:active, .step:active { transform: scale(0.96); }

/* ---- Settings ---- */

.sheet { display: grid; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); position: relative; z-index: 2; }
.switch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; min-height: 60px; cursor: pointer; }
.switch-icon { font: 30px/1 var(--emoji); }
.switch-text { display: grid; }
.switch-text strong { font-size: 20px; }
.switch-text small { color: var(--muted); font-size: 16px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 64px; height: 36px; border-radius: 18px; background: #d9d4c8; position: relative; transition: background 0.2s; }
.switch-track::after { content: ''; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); transition: transform 0.2s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(28px); }
.switch input:focus-visible + .switch-track { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

/* ---- Picking a letter ---- */

.picker { grid-row: 4; overflow-y: auto; padding: 14px 24px 32px; }
.picker-note { max-width: 980px; margin: 0 auto 6px; color: var(--muted); font: 20px/1.3 var(--book); text-align: center; }
.group { max-width: 980px; margin: 0 auto; }
.group h2 { margin: 18px 4px 10px; font: 400 26px/1.2 var(--book); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px; }
.tile {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 104px;
  padding: 6px 4px 8px;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(29 36 51 / 0.06);
}
.tile-glyph { font: 400 52px/1.2 var(--hand); padding-bottom: 0.26em; }
.name-tile { grid-column: span 3; }
.name-tile .tile-glyph { font-size: 48px; }
.tile-note { color: var(--muted); font-size: 16px; }
.stars { display: inline-flex; gap: 2px; font-family: var(--ui); font-size: 16px; }
.star { color: #d8d2c4; }
.star.on { color: var(--gold); }
.picker-foot { max-width: 980px; margin: 28px auto 0; text-align: center; }
.picker-foot a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* ---- Practising: steps and buttons beside a board ---- */

.practice {
  grid-row: 4;
  min-height: 0;
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "side" "board";
}
.side { grid-area: side; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.left-hand .side { flex-direction: row-reverse; }
.steps { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 700 19px/1 var(--ui);
  white-space: nowrap;
}
.step-icon { font: 24px/1 var(--emoji); }
.step[aria-pressed="true"] { background: var(--accent); color: #fff; }
.actions { display: flex; gap: 10px; }
.left-hand .actions { flex-direction: row-reverse; }
.actions .big { display: inline-flex; align-items: center; gap: 8px; }
.actions .big > span:first-child { font-size: 26px; line-height: 1; }

.board {
  grid-area: board;
  position: relative;
  min-height: 0;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  touch-action: none;
}
.board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.board canvas.ink { touch-action: none; cursor: crosshair; }

/* iPad on its side: the steps and buttons in a column beside the board. */
@media (orientation: landscape) {
  .practice {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "side board";
  }
  /* A left hand rests to the left of the letter: the buttons go to the right. */
  .left-hand .practice { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "board side"; }
  .side, .left-hand .side { flex-direction: column; justify-content: space-between; align-items: stretch; }
  .steps { flex-direction: column; border-radius: 30px; }
  .actions, .left-hand .actions { flex-direction: column; }
}

/* Messages sit in the top bar between its buttons, over the title. */
.toast {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: fit-content;
  max-width: calc(100% - 150px);
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1d2433;
  color: #fff;
  font: 20px/1.3 var(--book);
  text-align: center;
  transform: translateY(-60%);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(-50%); }
/* The message takes the title's place while it shows. */
.bar:has(.toast.show) .bar-title { visibility: hidden; }
/* Its words light up as the voice says them (reader/ui.js litText): gold on the dark pill. */
.toast .lit-word.now { background: var(--gold); color: var(--ink); box-shadow: none; }

/* "Using an Apple Pencil?": a strip under the bar, never over the letter. */
.offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; text-align: center; }
.offer p { margin: 0; font-size: 18px; }
.offer-buttons { display: flex; justify-content: center; gap: 10px; }

.result { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; background: rgb(246 243 236 / 0.55); }
.card { display: grid; justify-items: center; gap: 8px; padding: 20px 28px 24px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center; animation: pop 0.5s ease-out; }
.cheer { width: min(150px, 22vh); aspect-ratio: 586 / 640; background: url('../brand/kobi-cheer.webp') center / contain no-repeat; }
.result-stars { margin: 0; }
.result-stars .stars { font-size: 64px; line-height: 1; }
.card h2 { margin: 0; font: 400 40px/1.1 var(--book); }
.result-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } .toast { transition: none; } }

/* ---- Phones: everything shrinks, whichever way they're held ---- */

@media (max-width: 600px), (max-height: 500px) {
  :root { --gap: 8px; }
  .bar { gap: 8px; padding: 6px 10px; }
  .round { width: 46px; height: 46px; font-size: 22px; }
  .bar-title { font-size: 24px; }
  .bar-title.glyph { font-size: 30px; }
  .big { min-height: 50px; padding: 0 16px; font-size: 18px; }
  .step { min-height: 48px; padding: 0 12px; }
  .step-name, .again-name, .next-name { display: none; }
  .actions .big { padding: 0 14px; }
  .board { border-radius: 20px; }
  .toast { max-width: calc(100% - 120px); font-size: 15px; line-height: 1.2; padding: 6px 12px; }
  .picker { padding: 10px 12px 24px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .tile { min-height: 84px; border-radius: 16px; }
  .tile-glyph { font-size: 44px; }
  .name-tile { grid-column: span 4; }
  .result-stars .stars { font-size: 44px; }
  .card { padding: 12px 18px 16px; }
  .card h2 { font-size: 28px; }
  .switch-text strong { font-size: 18px; }
  .switch-text small { font-size: 14px; }
}

/* Phone on its side: hardly any height, so the steps and buttons sit in a slim column. */
@media (max-height: 500px) {
  .bar { padding: 4px 10px; }
  .round { width: 42px; height: 42px; }
  .step { min-height: 42px; padding: 0 10px; }
  .steps { gap: 2px; padding: 3px; }
  .big { min-height: 42px; }
  .actions { gap: 6px; }
  .cheer { display: none; }
  .sheet { padding: 6px 12px; gap: 4px; }
  .offer p { font-size: 15px; }
}

/* Narrow phone upright: the steps and buttons must share one row. */
@media (max-width: 400px) {
  .step { padding: 0 9px; }
  .actions .big { padding: 0 11px; }
}