/*
 * abatools activity theme: the Find It / Word Match look, shared by every
 * other activity. Link after /fonts/activity-fonts.css. See
 * docs/visual-style-guide.md before adding tokens or changing values.
 */
:root {
  /* core (same values as src/find-it/style.css and src/word-match/style.css) */
  --ink: #34454a;
  --ivory: #fff9ef;
  --paper: #ffffff;
  --muted: #66757a;
  --line: #e6dccb;
  --correct: #4fa66a;
  --prompt: #4c9f9b;
  --gold: #e8b94f;
  /* The learner's focus ring (ABA-223): a deeper gold in light, for 3:1 on ivory and white; `--gold` in dark. */
  --gold-ring: #b07a10;

  /* derived surfaces */
  --glow: #fffdf8;
  --prompt-deep: #357370;
  --correct-deep: #3b8052;
  --card-line: #eadfcd;
  --card-ledge: #e5d8c2;
  --panel-line: #f0e6d6;
  --panel-ledge: #eee3d0;
  --track: #ece2d2;
  --selected: #f1e6d4;
  --selected-line: #cdbfa8;
  --hold-fill: #f1e3cf;
  --row-line: #f1eadf;
  --text-correct: #2f7d47;
  --text-incorrect: #b4553c;
  /* Gold text in adult data, such as the chart's aim labels (ABA-203): --gold is 1.8:1 on white, this is 5.4:1. */
  --text-gold: #8a6312;
  --correct-wash: #e6f2e9;
  --incorrect-wash: #f7e7e0;
  --backdrop: rgb(52 69 74 / 28%);
  --drop: rgb(92 72 40 / 10%);

  /* illustration palette (docs/word-match-art/ART_DIRECTION.md) */
  --art-terracotta: #e98267;
  --art-denim: #678eb5;
  --art-plum: #9278a0;
  --art-cream: #fff6de;
  --art-leaf: #8db87a;
  --art-pink: #f4b6b0;
  --art-brown: #a87354;
  --art-gray: #b9c1c4;
  --art-ground: #e7e1d2;

  --on-prompt: #ffffff;
  --prompt-text: #357370;
  --prompt-ledge: #cfe3e1;
  --prompt-wash: #e7f3f2;
  --correct-ledge: #bfdcc6;
  --control-fill: rgb(255 255 255 / 60%);
  --art-card: #fff9ef;

  /*
   * The brand primitives (ABA-241): the BCBA's palette for Handy ABA Tools, the same in both themes. The role tokens
   * below point at them where the value is the same; scripts/brand-assets.mjs uses the same five values for the logo.
   * Yellow is never text and never a border alone (1.4:1 on white); orange as text is only --adult-highlight's darker
   * step. docs/visual-style-guide.md, Adult palette.
   */
  --brand-yellow: #ffdb4f;
  --brand-orange: #ff8210;
  --brand-cream: #fdf8f0;
  --brand-brown: #765a42;
  --brand-tan: #c8a47b;

  /*
   * The adult palette (ABA-241, option B of the redesign; first built in ABA-206): cream and white grounds, deep-brown
   * ink, the brand brown for links, selection, focus, and Play, a yellow wash for selection, and orange as a mark, on
   * adult surfaces only. The website's shell (src/shell.css) keeps a copy of these values under its own names, and the
   * app gets them from here (npm run ios:content). Contrast, and where they may and may not go:
   * docs/visual-style-guide.md, Adult palette. The learner's tokens above do not change.
   */
  --adult-ground: var(--brand-cream);
  --adult-surface: #ffffff;
  --adult-sidebar: #ffffff;
  --adult-fill: #f6efe3;
  --adult-line: #ebe1d1;
  --adult-ledge: #dfd1bb;
  --adult-ink: #3b2a1d;
  --adult-ink-2: #715c4b;
  --adult-ink-3: #7b6a5b;
  --adult-link: var(--brand-brown);
  --adult-select-line: var(--brand-brown);
  --adult-select-wash: #fff4cc;
  --adult-select-ledge: #f0d77e;
  --adult-action: var(--brand-brown);
  --adult-action-ledge: #4f3b2a;
  /* Text on the action (Play): white on the brown, deep brown on the tan in dark (ABA-241, 3A). */
  --adult-on-action: #ffffff;
  --adult-on-ink: #ffffff;
  --adult-highlight: #a8560b;
  --adult-highlight-wash: #fff0e0;
  --adult-drop: rgb(59 42 29 / 10%);

  --font: Nunito, ui-rounded, "Avenir Next", system-ui, sans-serif;
  /*
   * The two type families (ABA-207, step 3 of ABA-204 option C). The learner's screens are Nunito; adult surfaces
   * (`.aba-adult`, the setup screen) are DM Sans, the logo's face, from /fonts/activity-fonts.css. `--font` is the one
   * that applies; `.aba-adult` points it at the adult family and `.aba-learner` back at the learner's.
   */
  --font-learner: Nunito, ui-rounded, "Avenir Next", system-ui, sans-serif;
  --font-adult: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pad: max(16px, 2.4vmin);
  --radius-control: 12px;

  /*
   * The fill rule (docs/visual-style-guide.md, Layout and spacing; ABA-198). On a
   * tablet or a computer the learner's content covers at least 55% of the play
   * area, the space under the adult controls. A size cap on the learner's content
   * is a share of the play area, never below the old px cap:
   * max(340px, var(--fill) * var(--fill-card) * var(--fill-play-h)).
   * --fill is 0 on a phone (below), so a phone keeps the old caps.
   * Gaps between the learner's things: at least --fill-gap.
   * The app has the same rule (ios Kit/Layout/FillRule.swift).
   */
  --fill: 1;
  --fill-gap: 24px;
  --fill-play-w: calc(100vw - 2 * var(--pad));
  --fill-play-h: calc(100dvh - 2 * var(--pad) - var(--adult-h) - 20px);
  --fill-sample: 0.4;
  --fill-picture: 0.32;
  --fill-card: 0.5;
  --fill-ring: 0.34;
  --fill-column: 0.62;

  /* The adult control button (ABA-199): 44px, 14px muted text on phones; larger at iPad widths, below. */
  --adult-h: 44px;
  --adult-w: 64px;
  --adult-font: 14px;
  --adult-pad-x: 14px;
  --adult-text: var(--muted);
  --adult-count: 15px;
  --ease-press: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* A phone, upright or on its side, keeps the old caps until its own audit. */
@media (max-width: 540px), (orientation: landscape) and (max-height: 500px) {
  :root { --fill: 0; }
}

/*
 * Dark theme, set on <html> by /theme.js: it follows the system setting on
 * desktop and stays light on touch devices. Same roles, warm charcoal paper.
 * Illustrations keep a light card (--art-card) so their ink outlines read.
 */
:root[data-theme="dark"] {
  --ink: #efe7da;
  --ivory: #1c1a17;
  --paper: #27241f;
  --muted: #a39b8e;
  --line: #3d372f;
  --correct: #5bb275;
  --prompt: #4a9e99;
  --gold: #e8b94f;
  --gold-ring: #e8b94f;

  --glow: #24211c;
  --prompt-deep: #2c5f5c;
  --correct-deep: #2f6a42;
  --card-line: #3b352d;
  --card-ledge: #12110e;
  --panel-line: #35302a;
  --panel-ledge: #12110e;
  --track: #3a342c;
  --selected: #3d372f;
  --selected-line: #5d554a;
  --hold-fill: #473e31;
  --row-line: #302b25;
  --text-correct: #85d09b;
  --text-incorrect: #ee9f88;
  --text-gold: #e8b94f;
  --correct-wash: #1f3326;
  --incorrect-wash: #3c251e;
  --backdrop: rgb(0 0 0 / 55%);
  --drop: rgb(0 0 0 / 35%);

  --on-prompt: #ffffff;
  --prompt-text: #72c7c1;
  --prompt-ledge: #1d3f3d;
  --prompt-wash: #1c3533;
  --correct-ledge: #1d3a26;
  --control-fill: rgb(255 255 255 / 5%);
  --art-card: #f6efe2;

  /*
   * The adult palette in dark: neutral graphite grounds, never a blue ground (the owner, ABA-204: "A. Neutral graphite
   * is approved"), with cream text and the tan accent (ABA-241, 4A).
   */
  --adult-ground: #141414;
  --adult-surface: #1f1f1f;
  --adult-sidebar: #1a1a1a;
  --adult-fill: #2a2a2a;
  --adult-line: #383838;
  --adult-ledge: #080808;
  --adult-ink: var(--brand-cream);
  --adult-ink-2: #d9cdbd;
  --adult-ink-3: #a09385;
  --adult-link: var(--brand-tan);
  --adult-select-line: var(--brand-tan);
  --adult-select-wash: #352c1a;
  --adult-select-ledge: #5a4a22;
  --adult-action: var(--brand-tan);
  --adult-action-ledge: #8a6d53;
  --adult-on-action: #2b1f15;
  --adult-on-ink: #3b2a1d;
  --adult-highlight: var(--brand-orange);
  --adult-highlight-wash: #3a2418;
  --adult-drop: rgb(0 0 0 / 35%);

  --art-cream: #3a3325;
  --art-ground: #2e2a23;
}

/*
 * An adult surface inside an activity page (ABA-206): the setup screen. `.aba-adult` points the Paper tokens at the
 * adult palette, so the setup's own rules stay as they are. `.aba-learner` inside it gives a picture of the learner's
 * screen (Token Board's stage) the learner's tokens again; `html` keeps a copy of them for that (custom properties
 * inherit their value, so the copy is the learner's value in each theme). The play screens, the round end, and
 * the learner's praise never use `.aba-adult`.
 */
html {
  --learner-ink: var(--ink);
  --learner-ivory: var(--ivory);
  --learner-paper: var(--paper);
  --learner-muted: var(--muted);
  --learner-line: var(--line);
  --learner-glow: var(--glow);
  --learner-prompt: var(--prompt);
  --learner-prompt-deep: var(--prompt-deep);
  --learner-prompt-text: var(--prompt-text);
  --learner-prompt-wash: var(--prompt-wash);
  --learner-prompt-ledge: var(--prompt-ledge);
  --learner-card-line: var(--card-line);
  --learner-card-ledge: var(--card-ledge);
  --learner-panel-line: var(--panel-line);
  --learner-panel-ledge: var(--panel-ledge);
  --learner-row-line: var(--row-line);
  --learner-selected: var(--selected);
  --learner-selected-line: var(--selected-line);
  --learner-control-fill: var(--control-fill);
  --learner-track: var(--track);
  --learner-drop: var(--drop);
  --learner-on-prompt: var(--on-prompt);
}

.aba-adult {
  --ink: var(--adult-ink);
  --ivory: var(--adult-ground);
  --glow: var(--adult-ground);
  --paper: var(--adult-surface);
  --muted: var(--adult-ink-3);
  --line: var(--adult-line);
  --prompt: var(--adult-action);
  --prompt-deep: var(--adult-action-ledge);
  --on-prompt: var(--adult-on-action);
  --prompt-text: var(--adult-link);
  --prompt-wash: var(--adult-select-wash);
  --prompt-ledge: var(--adult-select-ledge);
  --card-line: var(--adult-line);
  --card-ledge: var(--adult-ledge);
  --panel-line: var(--adult-line);
  --panel-ledge: var(--adult-ledge);
  --row-line: var(--adult-line);
  --selected: var(--adult-select-wash);
  --selected-line: var(--adult-select-line);
  --control-fill: var(--adult-surface);
  --track: var(--adult-fill);
  --drop: var(--adult-drop);
  --focus-ring: var(--adult-link);
  --font: var(--font-adult);
  font-family: var(--font);
}

.aba-adult .aba-learner {
  --ink: var(--learner-ink);
  --ivory: var(--learner-ivory);
  --glow: var(--learner-glow);
  --paper: var(--learner-paper);
  --muted: var(--learner-muted);
  --line: var(--learner-line);
  --prompt: var(--learner-prompt);
  --prompt-deep: var(--learner-prompt-deep);
  --on-prompt: var(--learner-on-prompt);
  --prompt-text: var(--learner-prompt-text);
  --prompt-wash: var(--learner-prompt-wash);
  --prompt-ledge: var(--learner-prompt-ledge);
  --card-line: var(--learner-card-line);
  --card-ledge: var(--learner-card-ledge);
  --panel-line: var(--learner-panel-line);
  --panel-ledge: var(--learner-panel-ledge);
  --row-line: var(--learner-row-line);
  --selected: var(--learner-selected);
  --selected-line: var(--learner-selected-line);
  --control-fill: var(--learner-control-fill);
  --track: var(--learner-track);
  --drop: var(--learner-drop);
  --focus-ring: var(--gold-ring);
  --font: var(--font-learner);
  font-family: var(--font);
}

/*
 * The adult bar at iPad widths (ABA-199, item 8, option A): 52px controls, at least 72px wide, with 17px ink labels;
 * the counts and the level are 17px. Phones keep 44px and 14px, and a phone on its side keeps its one-row rule.
 */
@media (min-width: 761px) and (min-height: 600px) {
  :root {
    --adult-h: 52px;
    --adult-w: 72px;
    --adult-font: 17px;
    --adult-pad-x: 16px;
    --adult-text: var(--ink);
    --adult-count: 17px;
  }
}

/* ---------- End, Skip, and the adult confirm (ABA-199; src/setup/AdultControls.tsx) ---------- */
.aba-confirm { position: relative; display: inline-flex; }
.aba-adult-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button svg.aba-adult-icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* End stands apart: solid, in the warm pressed tone (never teal or gold), with a thin line after it. */
button.aba-adult-end { border-color: var(--selected-line); background: var(--selected); color: var(--ink); font-weight: 800; }
.aba-adult-end-sep { flex: none; align-self: center; width: 1.5px; height: calc(var(--adult-h) - 18px); border-radius: 1px; background: var(--line); }
/* Skip is the lightest: an outline with no fill, and lighter text. */
button.aba-adult-light { background: transparent; font-weight: 600; }
.aba-confirm-scrim { position: fixed; inset: 0; z-index: 60; }
.aba-confirm-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 61;
  display: grid;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgb(52 69 74 / 22%);
  animation: aba-rise-in 200ms ease-out both;
}
.aba-confirm-panel[data-align="end"] { right: 0; left: auto; }
.aba-confirm-panel button {
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: 17px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.aba-confirm-panel button:focus-visible { outline: 6px solid var(--gold-ring); outline-offset: 2px; }
/* The action is in the incorrect red: an adult's choice, never the learner's. */
.aba-confirm-yes { border-bottom: 1px solid var(--row-line) !important; border-radius: 10px 10px 0 0 !important; color: var(--text-incorrect); font-weight: 800; }
.aba-confirm-keep { color: var(--ink); font-weight: 700; }

/*
 * More, on an upright phone (ABA-246, option B; `AdultMore` in src/setup/AdultControls.tsx). Up to 540px wide the
 * trial tools' adult bar is one row: End, Skip, the counts, and ⋯ More, which holds the level, Log, and Reset count
 * (`.aba-in-more` in the bar). An upright iPad (541-1024px wide, at least 600px tall, portrait; ABA-249) has the same row. A phone on its side and an iPad in landscape hide ⋯ and keep the full row.
 * The tools' row rules are in src/find-it/style.css and src/word-match/style.css.
 */
.aba-more { display: none; }
.aba-more-button { min-width: var(--adult-h) !important; padding: 0 !important; }
button.aba-more-button svg.aba-adult-icon { width: 1.5em; height: 1.5em; stroke-width: 3.4; }
.aba-more-panel { min-width: 248px; }
.aba-more-items { display: grid; }
.aba-more-level {
  display: block;
  max-width: 290px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--row-line);
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.aba-more-level strong { color: var(--ink); font-weight: 800; }
.aba-more-note { display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.aba-confirm-panel button.aba-more-item { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
@media (max-width: 540px), (min-width: 541px) and (max-width: 1024px) and (min-height: 600px) and (orientation: portrait) {
  .aba-more { display: inline-flex; }
  .aba-in-more { display: none !important; }
  /* The counts keep room for "100%" from the first trial, so the row does not move during a session (as in the app). */
  .aba-count-percent { display: inline-block; min-width: 2.75em; text-align: end; }
}
/* The narrowest phones (320px, the first iPhone SE): Skip shows only its icon, and the percent is for screen readers only. */
@media (max-width: 359px) {
  .aba-count-percent,
  button.aba-adult-light .aba-adult-label {
    position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  button.aba-adult-light { min-width: var(--adult-h) !important; padding: 0 !important; }
}

/* ---------- the round end's buttons (ABA-199, item 5, option A) ---------- */
.aba-round-actions {
  --round-h: 88px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}
.aba-round-main,
.aba-round-other {
  min-height: var(--round-h);
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 110ms var(--ease-press), box-shadow 110ms var(--ease-press);
}
.aba-round-main {
  padding: 0 calc(var(--round-h) * 0.45);
  border: 0;
  background: var(--prompt);
  box-shadow: 0 8px 0 var(--prompt-deep);
  color: var(--on-prompt);
  font-size: clamp(28px, 4.4vmin, 40px);
}
.aba-round-main:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--prompt-deep); }
.aba-round-other {
  padding: 0 calc(var(--round-h) * 0.32);
  border: 3px solid var(--card-line);
  background: var(--paper);
  box-shadow: 0 8px 0 var(--card-ledge);
  color: var(--ink);
  font-size: calc(clamp(28px, 4.4vmin, 40px) * 0.75);
}
.aba-round-other:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--card-ledge); }
:is(.aba-round-main, .aba-round-other):focus-visible { outline: 6px solid var(--gold-ring); outline-offset: 6px; }
/* An upright phone: the main button on top, the other two under it. */
@media (max-width: 540px) {
  .aba-round-actions { --round-h: 72px; gap: 14px 12px; }
  .aba-round-main { flex-basis: 100%; max-width: 360px; font-size: 28px; }
  .aba-round-other { font-size: 21px; }
}
/*
 * A phone on its side: the buttons sit right of the stars, the main button across the top and the other two under it.
 * They are smaller than elsewhere, so the stars, title, and buttons fit side by side at 667×375 and a long Next time
 * list scrolls under them (tests/round-end-browser.test.mjs).
 */
@media (orientation: landscape) and (max-height: 500px) {
  .aba-round-actions { --round-h: 56px; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 10px; }
  .aba-round-main { grid-column: 1 / -1; font-size: 20px; }
  .aba-round-other { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .aba-confirm-panel { animation: none; }
  .aba-round-main, .aba-round-other { transition: none; }
}

@keyframes aba-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes aba-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}

@keyframes aba-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(76 159 155 / 35%), 0 8px 0 var(--prompt-ledge); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 14px rgb(76 159 155 / 20%), 0 8px 0 var(--prompt-ledge); }
}

@keyframes aba-pop {
  from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  to { opacity: 1; transform: none; }
}

@keyframes aba-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes aba-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}