/* src/components/jr/activity/activity.css — the chrome a STOP wears.
   Transcribed from the top bars and guide columns of SJ2 Maths, SJ2 Spelling and SJ2 Homework
   (art-source/design-sj2-2026-09-12/screens/). All three draw the same 72px bar with the same
   parts in the same order, and the same guide bubble with a tail, so it is built once here the
   way chrome.js is built once for the app screens.

   A STOP IS NOT AN APP SCREEN. Today, Library, Subjects, Practice and Rewards wear the 76px top
   bar and the 72px nav. Maths, Spelling and Homework replace both with this one bar: a way out
   on the left, the guide's face, what this is, how far through, and the star count. A child in
   the middle of a piece of work should not be one tap from five other places, and her frames
   draw exactly that. */

.jr-act-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 72px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  box-sizing: border-box;
  background: var(--sj-card);
  border-bottom: 1px solid var(--sj-line);
}

/* Maths sets its parts 18px apart, Spelling and Homework 16px. Hers, both. */
.jr-act-bar-wide { gap: 18px; }

/* 48px, and deliberately so: it is the way OUT of the activity, not part of it, and it sits
   beside a 48px face. Named in tools/audit/rules_audit.mjs beside the two chrome controls. */
.jr-act-leave {
  flex: none;
  appearance: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sj-stage);
  border: 1px solid var(--sj-line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.jr-act-face {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--sj-card);
  overflow: hidden;
  display: block;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.jr-act-face-numi { background-color: #fbe5dc; }
.jr-act-face-lexi { background-color: var(--sj-green-tint); }

.jr-act-titles { flex: none; min-width: 0; }
.jr-act-title { display: block; font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--sj-ink); white-space: nowrap; }
/* Maths puts the skill on one line at 21px and no subtitle under it. */
.jr-act-title-solo { font-size: 21px; }
.jr-act-sub { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; }
.jr-act-sub-green { color: var(--sj-green-ink); }
.jr-act-sub-sky { color: var(--sj-sky-ink); }

.jr-act-badge {
  flex: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .11em;
  text-transform: uppercase;
  border-radius: var(--sj-r-pill);
  padding: 7px 15px;
}

.jr-act-badge-sky { color: var(--sj-sky-ink); background: var(--sj-teal-tint); border: 1px solid #c7e3f3; }
.jr-act-badge-sun { color: var(--sj-sun-ink); background: var(--sj-sun-tint); border: 1px solid #f6d98a; }
.jr-act-badge-due { color: var(--sj-orange-deep); background: #fff0df; border: 1px solid #f4b28f; }

.jr-act-spacer { flex: 1 1 auto; }

.jr-act-pips { flex: none; display: flex; align-items: center; gap: 8px; }
.jr-act-pips-tight { gap: 7px; }
.jr-act-pip { height: 12px; border-radius: var(--sj-r-pill); border-width: 1.5px; border-style: solid; display: block; }

.jr-act-progress { flex: none; font-weight: 500; font-size: 18px; color: var(--sj-ink); white-space: nowrap; }
.jr-act-stars { flex: none; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; color: var(--sj-ink); }

/* ---------------------------------------------------------------- the guide */
.jr-act-bubble {
  position: relative;
  align-self: stretch;
  background: var(--sj-card);
  border: 1px solid #f3c9b8;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(35, 50, 44, .14);
  padding: 18px 20px;
}

.jr-act-bubble-lexi { border-color: #c3dda9; }

.jr-act-bubble-name { margin: 0 0 4px; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #a8492a; }
.jr-act-bubble-name-lexi { color: var(--sj-green-ink); }

.jr-act-bubble-line { margin: 0; font-size: 19px; line-height: 1.4; font-weight: 600; color: var(--sj-ink); text-wrap: pretty; }
/* Spelling sets Lexi's line in the story face; Maths and Homework set Numi's in the UI face. */
.jr-act-bubble-line-story { font-family: var(--sj-font-story); font-weight: 400; }

.jr-act-bubble-tail {
  position: absolute;
  left: 44px;
  bottom: -9px;
  width: 18px;
  height: 18px;
  background: var(--sj-card);
  border-right: 1px solid #f3c9b8;
  border-bottom: 1px solid #f3c9b8;
  transform: rotate(45deg);
}

.jr-act-bubble-tail-lexi { border-right-color: #c3dda9; border-bottom-color: #c3dda9; }

.jr-act-figure {
  display: block;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 18px rgba(35, 50, 44, .16));
}

/* ---------------------------------------------------------------- the wash */
/* The scene plate reads through at the top and is nearly clear at the bottom, so cards keep
   their contrast without a global dark overlay (SJ2 Scene's own integration rule). */
.jr-act-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(250, 247, 240, .55) 0%, rgba(250, 247, 240, .35) 40%, rgba(250, 247, 240, .15) 100%);
}

/* Homework's plate sits a shade further back than the other two. Hers. */
.jr-act-wash-deep {
  background: linear-gradient(180deg, rgba(250, 247, 240, .58) 0%, rgba(250, 247, 240, .38) 42%, rgba(250, 247, 240, .16) 100%);
}