/* ============================================================
   Scatter : reading and focus supports
   (the supports kit, copied from Home Ground). The kit is unchanged
   down to "THIS APP", at the bottom, which maps it to Scatter.
   Goes with js/supports.js. Every rule here is switched on by a class
   on <html> that js/supports.js sets, so with nothing chosen this file
   changes nothing except drawing the "Aa" button.

   To reuse in another app: keep this file as it is and make sure the
   page defines --paper, --raised, --ink, --ink-soft and --line. The
   whole kit is described in docs/SUPPORTS-KIT.md.
   ============================================================ */

/* ---------- plain looks for another app ----------
   The panel, the key-word card and the writing help use Home Ground's
   button and hint classes. In an app that has none, these give them a
   plain, usable look. :where() gives these rules no weight at all, so any
   app that styles .btn or .hint itself wins without a fight. */

:where(.hg-sup, .hg-word, .hg-write-help) :where(.btn, .rating, .linkish) {
  min-height: 44px;
  padding: 8px 14px;
  border: 2px solid var(--line, #ded4c2);
  border-radius: 10px;
  background: var(--raised, #fffdf8);
  color: var(--ink, #1d2321);
  font: inherit;
  cursor: pointer;
}
:where(.hg-sup, .hg-word) :where(.btn--primary) {
  background: var(--green, #2f6b52);
  border-color: var(--green, #2f6b52);
  color: #fff;
}
:where(.hg-sup, .hg-word) :where(.rating.is-chosen) { border-width: 3px; border-color: var(--green, #2f6b52); }
:where(.hg-sup, .hg-word, .hg-write-help) :where(.hint) { color: var(--ink-soft, #5a6560); font-size: 0.92em; }
:where(.hg-sup, .hg-word) :where(.rating-row, .btn-row) { display: flex; flex-wrap: wrap; gap: 8px; }
:where(.hg-word) :where(.linkish) { border: 0; background: none; text-decoration: underline; padding: 8px 0; }

/* ---------- the button that opens the panel ---------- */

.hg-sup-open {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 80;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--raised);
  color: var(--ink);
  font: 700 20px/1 Georgia, "Times New Roman", serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 35, 33, 0.18);
  touch-action: manipulation;
}
.hg-sup-open:active { transform: translateY(2px); }

/* Director Mode is the teacher's screen, often on a projector. */
body[data-screen="director"] .hg-sup-open { display: none; }

/* Room at the bottom of every screen so the button never sits on top of
   the last button on the page. */
html #app { padding-bottom: calc(max(20px, env(safe-area-inset-bottom)) + 76px); }

/* ---------- the panel ---------- */

.hg-sup {
  width: min(640px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--raised);
  color: var(--ink);
  overflow-y: auto;
}
.hg-sup::backdrop { background: rgba(29, 35, 33, 0.45); }
.hg-sup-inner { padding: 20px; }
.hg-sup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.hg-sup-head h2 { margin: 0; }
.hg-sup-head .btn { width: auto; }
.hg-sup-group { border-top: 1px solid var(--line); padding: 14px 0; }
.hg-sup-group h3 { margin: 0 0 4px; font-size: 18px; }
.hg-sup-group .hint { margin: 0 0 10px; }
.hg-sup-group input[type=range] { width: 100%; min-height: 44px; }
.hg-sup-choice { flex: 1 1 110px; }
.hg-sup-teacher { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

/* The colour buttons show the colour they choose. */
.hg-sup-swatch--cream  { background: #f4eee2; }
.hg-sup-swatch--blue   { background: #e3ecf5; }
.hg-sup-swatch--green  { background: #e4efe3; }
.hg-sup-swatch--yellow { background: #f7efc9; }
.hg-sup-swatch--pink   { background: #f5e4e7; }
.hg-sup-swatch--grey   { background: #e7e7e4; }
.hg-sup-swatch { color: #1d2321; }
.hg-sup-swatch.is-chosen { border-width: 3px; color: #1d2321; }

/* ---------- text size ----------
   The app is sized in pixels, so zoom is the one change that scales
   everything together, buttons and map included. */
html.hg-s-size-large  #app, html.hg-s-size-large  .hg-sup { zoom: 1.15; }
html.hg-s-size-larger #app, html.hg-s-size-larger .hg-sup { zoom: 1.3; }

/* ---------- plainer letters ----------
   Verdana ships with Windows and macOS, and Tahoma and DejaVu Sans cover
   most of what is left. Nothing is downloaded. The research on special
   dyslexia fonts is weak; wide, plain letters with generous spacing do
   at least as well. */
html.hg-s-font-plain body {
  font-family: Verdana, Tahoma, "DejaVu Sans", "Segoe UI", sans-serif;
}

/* ---------- more space ----------
   The spacing values from WCAG 1.4.12 (text spacing), rounded. */
html.hg-s-spacing-roomy #app,
html.hg-s-spacing-roomy .hg-sup {
  letter-spacing: 0.06em;
  word-spacing: 0.16em;
}
html.hg-s-spacing-roomy #app p,
html.hg-s-spacing-roomy #app li,
html.hg-s-spacing-roomy #app .field,
html.hg-s-spacing-roomy .hg-sup p { line-height: 1.8; }
html.hg-s-spacing-roomy #app p { margin-bottom: 1.1em; }

/* ---------- background tints ---------- */

html.hg-s-tint-blue   { --paper: #e3ecf5; --raised: #f2f6fb; --line: #c6d4e2; }
html.hg-s-tint-green  { --paper: #e4efe3; --raised: #f3f8f2; --line: #c9dbc7; }
html.hg-s-tint-yellow { --paper: #f7efc9; --raised: #fdf9e4; --line: #e2d7a2; }
html.hg-s-tint-pink   { --paper: #f5e4e7; --raised: #fbf1f3; --line: #e3cbd0; }
html.hg-s-tint-grey   { --paper: #e7e7e4; --raised: #f5f5f3; --line: #d0d0cb; }

/* ---------- light and dark ----------
   Dark comes AFTER the tints on purpose: a student who picks dark gets
   dark, whatever tint they had before, and switching back to light
   returns their tint. Only the furniture changes. The map, the meters and
   the charts keep the colours they are drawn in, because those colours
   mean something.

   Measured in the browser against WCAG 2.2 AA (4.5:1 for normal text):
   body text 14.3:1, quiet text 8.5:1, green text 9.8:1, terracotta text
   8.5:1, white on a green button 6.3:1, and the tinted badges 6.8:1 or
   better. Re-measure if you change any value here. */

html.hg-s-theme-dark {
  --paper:      #16191a;
  --raised:     #1f2426;
  --line:       #39413f;
  --ink:        #ece7dc;
  --ink-soft:   #aeb6b2;
  --green:      #2f6b52;        /* still a fill behind white text */
  --green-soft: #1e3a2e;
  --green-text: #8ccfa8;
  --terracotta: #c25b3a;
  --terracotta-text: #f0a184;
  --terra-text-deep: #f0a184;
  --gold:       #e0a43c;
  --focus:      #6fb3d2;

  --focus-soft:    #1d323d;
  --focus-softer:  #1a2c35;
  --focus-text:    #9fd0e6;
  --gold-soft:     #33291a;
  --gold-text:     #eac98a;
  --terra-soft:    #3a251e;
  --terra-softer:  #33211b;
  --terra-softest: #2c1d18;
  --flat-soft:     #2a2f30;
  --track:         #333a3a;
}

/* The page itself, and the few places that paint their own white. */
html.hg-s-theme-dark body { background: var(--paper); color: var(--ink); }
html.hg-s-theme-dark .town-grid { filter: brightness(0.86) saturate(0.94); }
html.hg-s-theme-dark textarea,
html.hg-s-theme-dark input,
html.hg-s-theme-dark select { background: var(--raised); color: var(--ink); }
html.hg-s-theme-dark .hg-ruler-top,
html.hg-s-theme-dark .hg-ruler-bottom { background: rgba(0, 0, 0, 0.58); }

/* Stronger contrast, on top of dark, has to go the other way. */
html.hg-s-theme-dark.hg-s-contrast-on {
  --ink: #fff;
  --ink-soft: #e6ebe8;
  --line: #cdd5d1;
  --green-text: #b5e8cc;
  --terracotta-text: #ffc3ab;
  --terra-text-deep: #ffc3ab;
}

/* ---------- stronger contrast ---------- */

html.hg-s-contrast-on {
  --ink: #000;
  --ink-soft: #262b29;
  --line: #5f6663;
  --green: #1d4a37;
  --terracotta: #8f3719;
}
html.hg-s-contrast-on .btn,
html.hg-s-contrast-on .card,
html.hg-s-contrast-on .field { border-width: 3px; }

/* ---------- no movement ---------- */

html.hg-s-calm-on *,
html.hg-s-calm-on *::before,
html.hg-s-calm-on *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ---------- reading ruler ---------- */

.hg-ruler {
  position: fixed;
  inset: 0;
  z-index: 70;            /* under the Aa button and the panel */
  pointer-events: none;
}
.hg-ruler-top,
.hg-ruler-bottom {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(29, 35, 33, 0.42);
}
.hg-ruler-top { top: 0; }
.hg-ruler-bottom { bottom: 0; }

/* ---------- help under writing boxes ----------
   Drawn by js/supports.js under every writing box a student meets. */

.hg-write-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 6px 0 0;
}
.hg-write-help .btn { width: auto; }
.hg-write-help .hint { margin: 0; flex: 1 1 16rem; }
/* The word bank (build 7): the key words on this screen, tap to add. */
.hg-word-bank { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hg-word-bank[hidden] { display: none; }
.hg-word-bank-label { font-weight: 700; font-size: 0.92em; margin-right: 2px; }
.hg-word-chip { min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 2px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 0.95em; cursor: pointer; }
.hg-word-chip:hover { background: rgba(127, 127, 127, 0.15); }
.hg-word-chip:focus-visible { outline: 3px solid #ff4fa3; outline-offset: 2px; }
html.hg-s-writeHelp-off .hg-write-help { display: none; }

/* ---------- key words (js/words.js) ----------
   An underlined word inside a sentence. It has to read as part of the
   sentence and still be obviously tappable, so: same font and size as the
   text around it, a dotted underline, and a clear focus ring. */

.hg-kw {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: help;
  touch-action: manipulation;
}
.hg-kw:hover { text-decoration-style: solid; }
.hg-kw:focus-visible { outline: 3px solid var(--focus, #2b6f8f); outline-offset: 2px; border-radius: 3px; }

.hg-word {
  width: min(520px, 92vw);
  max-height: 80vh;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--raised);
  color: var(--ink);
  overflow-y: auto;
}
.hg-word::backdrop { background: rgba(29, 35, 33, 0.45); }
.hg-word-inner { padding: 20px; }
.hg-word-inner h2 { margin: 0 0 8px; }
.hg-word-meaning { font-size: 1.1em; line-height: 1.55; }
.hg-word-inner .btn-row { margin-top: 12px; }
.hg-word-inner .btn { width: auto; }
.hg-word-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 4px 12px;
}
.hg-word-list .linkish { min-height: 44px; text-align: left; }

html.hg-s-size-large  .hg-word { zoom: 1.15; }
html.hg-s-size-larger .hg-word { zoom: 1.3; }

/* ---------- print ---------- */

@media print {
  .hg-sup-open, .hg-ruler, .hg-write-help { display: none !important; }
  .hg-kw { text-decoration: none; }
  html #app { padding-bottom: 0; }
}

/* ---------- underline the word I point at ----------
   A line drawn under whichever word the pointer is over. It is a floating
   element rather than a change to the text, so nothing in the page moves,
   nothing is re-laid out, and a key word's own underline stays as it is.
   js/supports.js positions it. */

.hg-word-line {
  position: fixed;
  z-index: 69;            /* just under the reading ruler */
  height: 3px;
  border-radius: 2px;
  background: var(--focus, #2b6f8f);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.hg-word-line.is-on { opacity: 1; }
html.hg-s-calm-on .hg-word-line { transition: none; }
html.hg-s-theme-dark .hg-word-line { background: var(--focus-text, #9fd0e6); }

/* ============================================================
   THIS APP: Scatter
   The kit's colour names, mapped to Scatter's (css/scatter.css). The
   kit's floating "Aa" button is hidden: Scatter has "Aa" in its top bar,
   and nothing may float over a student's content.
   ============================================================ */
:root { --raised: var(--card); --green: var(--accent); }
.hg-sup-open { display: none !important; }
html #app { padding-bottom: 0; }
/* "Reduce motion" (the kit's calm option) also stops Scatter's growing
   field, the welcome and the cards; js/motion.js treats it as reduced. */
html.hg-s-calm-on .field-strip .row { transform: none !important; }