/*
 * "Sunny Meadow" (direction 4A) — the product app's design system.
 *
 * Source: design_handoff_reader_4a/README.md. Colours, radii, drop edges and
 * motion below are the handoff's numbers verbatim; anything not in the handoff
 * is derived from its "Applying the style elsewhere" section and marked as such.
 *
 * This file is SEPARATE from style.css on purpose. style.css is loaded by
 * base.html, which is the R&D shell — editing it to restyle the product would
 * restyle /reading-observation and /flashcards along with it.
 *
 * Two stages, one palette:
 *   .tc-child  grass, toy buttons with solid drop edges, bob and pulse.
 *   .tc-adult  cream, flat 1px borders, 8-12px radii, no drop edges, no bob.
 *              Pink and green appear only as status colour (miscue / correct).
 * A screen is one or the other. Nothing is both.
 */

/* Varela Round ships in ONE weight (400). The handoff asks for 700 on labels and
   its own reference file loads the same single face and sets font-weight:700 —
   so the screenshots we are matching are the browser's synthesised bold. We do
   the same rather than substituting a real bold from another family, which would
   not be the design that was signed off. */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/varela-round-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/varela-round-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Handoff §Design Tokens, verbatim. */
  --tc-grass:      #8fd47a;
  --tc-ink:        #1d3a1a;
  --tc-ink-deep:   #0d1f0c;
  --tc-green-edge: #4f9a4a;
  --tc-green-text: #2c7a3f;
  --tc-sun:        #ffcf3f;
  --tc-sun-edge:   #d3a300;
  --tc-pink:       #ff8fab;
  --tc-pink-edge:  #d9587f;
  --tc-white:      #fff;
  --tc-veil:       rgba(255, 255, 255, .6);
  --tc-veil-strong: rgba(255, 255, 255, .7);
  --tc-narrate:    #ffe27a;

  /* Grown-up stage. The handoff gives the cream and the rules; the greys are
     derived from it — a warm neutral ramp off the same cream, so the two stages
     read as one product rather than two apps. */
  --tc-cream:      #f4f0e8;
  --tc-line:       #ded7c9;
  --tc-line-soft:  #ebe5da;
  --tc-muted:      #6f6a5f;

  /* Adult marks — the scoring vocabulary. Grown-up view only. */
  --tc-correct-rule:  #bfe3c8;
  --tc-miscue-bg:     #fde8ec;
  --tc-miscue-rule:   #e6a3ad;
  --tc-support-bg:    #e9f1fb;
  --tc-support-rule:  #a9c7ea;

  --tc-font: 'Varela Round', ui-rounded, 'Segoe UI Rounded', 'Nunito',
             system-ui, -apple-system, sans-serif;

  /* Radii, by role rather than by number, so a screen asks for "a card" and
     cannot quietly invent a fourteenth radius. */
  --tc-r-big:     26px;   /* big dock buttons */
  --tc-r-pill:    24px;   /* pills, trail */
  --tc-r-compact: 19px;   /* compact dock buttons */
  --tc-r-pointer: 18px;   /* pointer pill, child cards */
  --tc-r-icon:    16px;   /* square icon buttons */
  --tc-r-book:    14px;   /* the book */

  --tc-shadow-book: 0 22px 0 -8px var(--tc-green-edge),
                    0 30px 50px -20px rgba(20, 60, 20, .45);
}

/* ===========================================================================
   Stages
   =========================================================================== */

.tc-child, .tc-adult { font-family: var(--tc-font); }

.tc-child {
  background: var(--tc-grass);
  color: var(--tc-ink);
}

.tc-adult {
  background: var(--tc-cream);
  color: var(--tc-ink);
}

/* ===========================================================================
   Toy buttons — the child stage's one button idiom.

   The drop edge is a SOLID box-shadow with no blur: it reads as a thickness the
   button sits on, not as a shadow it casts. Pressing removes 2px of that edge
   and moves the button down by 2, so the total height is unchanged and the row
   does not shift — the button gets shorter, the way a real one would.
   =========================================================================== */

.tc-btn {
  font-family: inherit;
  font-weight: 700;
  color: var(--tc-ink);
  background: var(--tc-white);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 90ms ease-out, transform 90ms ease-out,
              background 140ms ease-out, opacity 140ms ease-out;
}
/* Drop-edge depths. --tc-edge is the colour, --tc-depth the thickness, so one
   pressed rule serves every size. */
.tc-edge-6 { --tc-depth: 6px; }
.tc-edge-5 { --tc-depth: 5px; }
.tc-edge-4 { --tc-depth: 4px; }
.tc-edge-3 { --tc-depth: 3px; }
.tc-btn[class*="tc-edge-"] { box-shadow: 0 var(--tc-depth) 0 var(--tc-edge, var(--tc-green-edge)); }
.tc-btn[class*="tc-edge-"]:active:not(:disabled),
.tc-btn[class*="tc-edge-"].is-pressed:not(:disabled) {
  box-shadow: 0 calc(var(--tc-depth) - 2px) 0 var(--tc-edge, var(--tc-green-edge));
  transform: translateY(2px);
}
.tc-btn:hover:not(:disabled) {
  box-shadow: 0 calc(var(--tc-depth) - 2px) 0 var(--tc-edge, var(--tc-green-edge));
  transform: translateY(2px);
}

/* A control that cannot be used has to LOOK like it. The old dock faded a
   disabled button to .35; that was lost in the move to these tokens, so a turn
   arrow at the first page and a "Read to me" on a book with no recording both
   looked perfectly pressable and did nothing.

   AFTER the drop-edge rules on purpose: those match at the same specificity, so
   whichever is later wins, and a disabled button kept the edge that says
   "press me". */
.tc-btn:disabled,
.tc-btn[aria-disabled="true"],
.tc-btn:disabled:hover,
.tc-btn[aria-disabled="true"]:hover {
  cursor: default; opacity: .38; box-shadow: none; transform: none;
}

/* Colour roles. Green edge is the default; pink is the primary child action,
   sun is a "you are here" cue. */
.tc-btn-white { background: var(--tc-white); --tc-edge: var(--tc-green-edge); }
.tc-btn-pink  { background: var(--tc-pink); --tc-edge: var(--tc-pink-edge); }
.tc-btn-sun   { background: var(--tc-sun);  --tc-edge: var(--tc-sun-edge); }
.tc-btn-ink   { background: var(--tc-ink); color: var(--tc-white);
                --tc-edge: var(--tc-ink-deep); }

/* Sizes. Every one clears the 44px hit target the handoff requires. */
.tc-btn-icon  { width: 46px; height: 46px; border-radius: var(--tc-r-icon); font-size: 22px; }
.tc-btn-arrow { width: 72px; height: 72px; border-radius: 50%; font-size: 34px; }
.tc-btn-arrow.is-small { width: 56px; height: 56px; font-size: 28px; }
.tc-btn-dock  { width: 320px; height: 78px; border-radius: var(--tc-r-big);
                font-size: 24px; gap: 14px; }
.tc-btn-compact { height: 38px; border-radius: var(--tc-r-compact); font-size: 15px;
                  padding: 0 16px 0 12px; gap: 8px; }

/* ===========================================================================
   Cards, pills and the progress trail
   =========================================================================== */

.tc-card {
  background: var(--tc-white);
  border-radius: var(--tc-r-pointer);
  padding: 16px;
}

.tc-veil-pill {
  display: inline-flex; align-items: center;
  padding: 10px 16px; border-radius: var(--tc-r-pill);
  background: var(--tc-veil);
}

/* One dot per spread. The current one is larger, pink, and bobs — the client
   called the trail out as the motivating element, and the bob is what makes it
   read as a place you are rather than a diagram of the book. */
.tc-trail { display: flex; align-items: center; gap: 6px; }
.tc-trail-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--tc-white); border: none; padding: 0;
  flex: 0 0 auto; transition: background 140ms ease-out;
}
.tc-trail-dot.is-done { background: var(--tc-pink); }
.tc-trail-dot.is-current {
  width: 22px; height: 22px;
  background: var(--tc-pink);
  box-shadow: 0 3px 0 var(--tc-pink-edge);
  animation: tc-bob 1.6s ease-in-out infinite;
}
.tc-trail-label {
  font-size: 14px; font-weight: 700; color: var(--tc-green-text); margin-left: 6px;
}

@keyframes tc-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes tc-rec-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
/* The current word's ring: grows and fades rather than blinking, so it reads as
   attention on the word and not as an alarm. */
@keyframes tc-word-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 207, 63, .85); }
  100% { box-shadow: 0 0 0 .22em rgba(255, 207, 63, 0); }
}

/* A practice word arriving: its underline grows in once, so the eye finds it
   without anything flashing. Ends on the painter's own inline underline. */
/* Scoring in progress: three dots taking turns, and a practice word that is
   being checked breathing in its own colour. */
@keyframes tc-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40%           { transform: translateY(-7px); opacity: 1; }
}
@keyframes tc-checking {
  0%, 100% { background-color: #f1e9fc; }
  50%      { background-color: #d8c3f4; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-checking i { animation: none; opacity: .8; }
}

/* A practice word says itself when tapped; on a mouse, the pointer says so. */
[data-state="practice"] { cursor: pointer; }

@keyframes tc-practice-in {
  0%   { box-shadow: inset 0 0 0 rgba(176, 139, 228, 0); }
  100% { box-shadow: inset 0 -.2em 0 rgba(176, 139, 228, 1); }
}

/* ===========================================================================
   Word highlighting — handoff §"Word highlighting"

   Written as classes on the word element so both painters can use them:
   page-overlay.js floats a positioned <div> per word, page-spans.js highlights
   the publisher's own <span>. Same vocabulary, either mechanism.
   =========================================================================== */

.tc-w-current {
  background: var(--tc-sun);
  color: #241706;
  border-radius: .18em;
  padding: .02em .08em;
  animation: tc-word-pulse 1.4s ease-out infinite;
}
.tc-w-read    { background: #ffcf3f33; border-radius: .18em; }
.tc-w-narrate { background: var(--tc-narrate); border-radius: .18em; }

/* Adult marks. Never rendered on a child screen — gated by the reader's
   "show scores" setting, which is off by default in the product. */
.tc-w-correct { box-shadow: inset 0 -.12em var(--tc-correct-rule); }
.tc-w-miscue  { background: var(--tc-miscue-bg);
                box-shadow: inset 0 -.18em var(--tc-miscue-rule); }
.tc-w-support { background: var(--tc-support-bg);
                box-shadow: inset 0 -.18em var(--tc-support-rule); }

/* A reader's initial, in a colour of their own.
   Deliberately not an avatar a parent has to choose before anyone can read
   anything: the colour is derived from the student's id, so it is theirs, it is
   stable, and it is the same on the child's card, the grown-up's list and the
   report. Callers set the background; the shape and the type are here. */
.tc-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 700; color: var(--tc-ink);
  flex: 0 0 auto;
}

/* ===========================================================================
   Grown-up stage components. Derived from the handoff's "Parent/teacher
   screens" paragraph: same font and palette, no drop edges, no bob, flat 1px
   borders, 8-12px radii, nothing oversized.
   =========================================================================== */

.tc-adult .tc-card,
.tc-panel {
  background: var(--tc-white);
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  padding: 20px;
}

.tc-adult-btn {
  font-family: inherit; font-weight: 700; font-size: 15px;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  background: var(--tc-green-text); color: var(--tc-white);
  border: 1px solid transparent;
  transition: background 140ms ease-out;
}
.tc-adult-btn:hover:not(:disabled) { background: #246634; }
.tc-adult-btn.is-quiet {
  background: var(--tc-white); color: var(--tc-green-text);
  border-color: var(--tc-line);
}
.tc-adult-btn.is-quiet:hover:not(:disabled) { background: #faf8f4; }
.tc-adult-btn:disabled { opacity: .45; cursor: default; }

.tc-field {
  font-family: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--tc-line); border-radius: 10px;
  background: var(--tc-white); color: var(--tc-ink);
}
.tc-field:focus-visible { outline: 2px solid var(--tc-green-text); outline-offset: 1px; }

.tc-muted { color: var(--tc-muted); font-size: 14px; }

/* ===========================================================================
   Accessibility
   =========================================================================== */

.tc-child :focus-visible, .tc-adult :focus-visible {
  outline: 3px solid var(--tc-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tc-trail-dot.is-current,
  .tc-w-current { animation: none; }
  .tc-btn, .tc-trail-dot, .tc-adult-btn { transition: none; }
}