/* src/components/jr/grownups/grownups.css — the grown-up side.

   Transcribed from the CSS sealed inside
   art-source/design-sj2-2026-09-12/scripts/sj-grownups.js (her <sj-grownups> web component,
   ported from Schola_Jr_Parent_Experience_v11). Every value here is hers.

   THREE DELIBERATE DIFFERENCES, and only these:

   1. SCOPED, NOT SEALED. Hers lives in a shadow root, which is how a component dropped into
      someone else's page keeps its own stylesheet. This one is inside our own page, on a stage
      whose tokens it does not want, so the same isolation is done with one ancestor class:
      every selector below sits under `.jr-gu`, and her `:host` became `.jr-gu` itself. Her class
      names are otherwise untouched, so a diff against her file reads straight across.

   2. THE PHONE LAYOUTS ARE NOT HERE. Her sheet carries four breakpoints (1100 / 980 / 760 / 390)
      for a parent product that ran on a phone. This one runs inside a FIXED 1440x940 tablet
      stage that is scaled to the window by src/shell/jr_app.js, so a media query would fire on a
      small laptop window while the stage was still 1440 wide and lay the page out for a phone
      that is not there. Her min-width:761px rules (her own "V12 wide-layout fit") are therefore
      the only ones kept, applied unconditionally. Nothing is restyled; the mobile branches are
      simply unreachable and gone.

   3. THE PAGE SCROLLS, AND ONLY HERE. Lesson screens never scroll (CLAUDE.md). This one is six
      pages of a grown-up's dashboard behind a four-digit code, her own showPage() calls
      window.scrollTo, and it is 940px tall. `100vh` becomes `100%` and the main column is the
      thing that scrolls, so the top bar stays put exactly as her `position:sticky` did.

   Radii, borders, colours, type sizes and spacing are hers to the pixel. The button family is
   her 12/14/18px rounded rectangle, not the house pill, for the same reason the rest of SJ2 is
   (plan ruling 1, named in tools/audit/rules_audit.mjs).
*/

.jr-gu {
  --bg: #f4efe4;
  --paper: #fffdf6;
  --ink: #13251f;
  --sub: #52655c;
  --line: #eadfc9;
  --line-strong: #e2d8c5;
  --orange: #c84a22;
  --orange-bright: #f36b35;
  --orange-soft: #fff0df;
  --orange-border: #f4b28f;
  --mint: #e8f5d9;
  --mint-ink: #246c3c;
  --sky: #e3f5f8;
  --sky-ink: #176c80;
  --gold: #fff0b5;
  --gold-ink: #b26f0a;
  --coral: #fde3cc;
  --coral-ink: #c84a22;
  --lav: #e3f5f8;
  --lav-ink: #19776f;
  --radius: 18px;
  --radius-sm: 12px;

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sj-font);
  font-size: 14px;
}

.jr-gu *,
.jr-gu *::before,
.jr-gu *::after { box-sizing: border-box; }

.jr-gu button,
.jr-gu input,
.jr-gu select,
.jr-gu textarea { font: inherit; font-family: var(--sj-font); }
.jr-gu button { cursor: pointer; }

/* ---------------------------------------------------------------- the top bar */
/* Her 72px bar. `padding-inline` is her V12 fix so the bar's two halves line up with the
   1450px content column below it; at 1440 the max() resolves to 0 and it is a flat 34px. */
.jr-gu .topbar {
  flex: none;
  height: 72px;
  background: #fffdf6;
  border-bottom: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  padding-inline: calc(max(0px, (100% - 1450px) / 2) + 34px);
  gap: 28px;
  z-index: 30;
}

.jr-gu .brand { display: flex; align-items: center; gap: 10px; min-width: 164px; }
.jr-gu .brandmark {
  width: 30px; height: 30px; border-radius: 16px; background: #2E7D73;
  display: grid; place-items: center;
}
.jr-gu .brandmark svg { width: 18px; height: 18px; }
.jr-gu .brand strong { font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.jr-gu .brand strong span { color: #3D9DAB; }

.jr-gu .nav { display: flex; gap: 24px; align-items: center; flex: 1; }
.jr-gu .nav button {
  border: 0; background: none; padding: 25px 0 22px; color: #343434;
  font-weight: 600; position: relative;
}
.jr-gu .nav button.active { color: #000; }
.jr-gu .nav button.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange);
}
.jr-gu .nav .count {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 999px;
  background: var(--orange); color: #fffdf6; font-size: 10px; margin-left: 4px; font-weight: 700;
}
.jr-gu .nav .count.zero { display: none; }

.jr-gu .top-actions { display: flex; align-items: center; gap: 10px; }

.jr-gu .primary {
  border: 0; background: var(--orange); color: #fffdf6; border-radius: 14px; font-weight: 700;
  min-height: 44px; font-size: 15px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.jr-gu .primary:hover { background: #b4400f; }
.jr-gu .ghost {
  border: 1.5px solid var(--line-strong); background: #fffdf6; color: #111; border-radius: 14px;
  font-weight: 700; min-height: 44px; font-size: 15px; padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.jr-gu .mini {
  border: 1.5px solid var(--line-strong); background: #fffdf6; border-radius: 12px;
  font-size: 11px; font-weight: 700; min-height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.jr-gu .mini.orange { background: var(--orange); border-color: var(--orange); color: #fffdf6; }

.jr-gu .profile {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line);
  background: #fffdf6; padding: 5px 9px 5px 5px; border-radius: 18px; font-weight: 700;
  min-height: 44px;
}
.jr-gu .avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: #E6F1FB; border: 1.5px solid #D6E0E7; display: block;
  background-size: cover; background-position: center;
}

/* Her hand-back control. In her component it is hidden until a host asks for one; here the
   host IS the tablet's gate, so it is always shown. */
.jr-gu .sj-back {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line-strong); background: var(--paper); color: var(--ink);
  font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 14px; min-height: 44px;
}
.jr-gu .sj-back:hover { border-color: var(--orange); color: var(--orange); }

/* ---------------------------------------------------------------- the pages */
.jr-gu .main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-width: 1450px;
  width: 100%;
  margin: auto;
  padding: 30px 34px 52px;
}
.jr-gu .page { display: none; }
.jr-gu .page.active { display: block; }

.jr-gu .page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px;
}
.jr-gu .page-title h1 { margin: 0; font-size: 38px; line-height: 1.02; letter-spacing: -.025em; font-weight: 700; }
.jr-gu .page-title p { margin: 8px 0 0; color: var(--sub); font-size: 16px; }

.jr-gu .seg { display: flex; border: 1.5px solid var(--line); background: #fffdf6; border-radius: 16px; overflow: hidden; }
.jr-gu .seg button {
  border: 0; border-right: 1.5px solid var(--line); background: #fffdf6;
  padding: 9px 14px; color: #555; font-size: 12px; font-weight: 700;
}
.jr-gu .seg button:last-child { border-right: 0; }
.jr-gu .seg button.active { background: #111; color: #fffdf6; }

.jr-gu .surface { background: #fffdf6; border: 1.5px solid var(--line); border-radius: var(--radius); }

.jr-gu .section-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 18px; border-bottom: 1.5px solid var(--line);
}
.jr-gu .section-head h2,
.jr-gu .section-head h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; font-weight: 700; }
.jr-gu .section-head small { color: var(--sub); }
.jr-gu .linkbtn { border: 0; background: transparent; color: #0E5C8B; font-weight: 700; padding: 4px 0; }

.jr-gu .kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #56534F; }
.jr-gu .meta { font-size: 12px; color: var(--sub); }
.jr-gu .tag {
  display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.jr-gu .tag.mint { background: var(--mint); color: var(--mint-ink); }
.jr-gu .tag.sky { background: var(--sky); color: var(--sky-ink); }
.jr-gu .tag.gold { background: var(--gold); color: var(--gold-ink); }
.jr-gu .tag.coral { background: var(--coral); color: var(--coral-ink); }
.jr-gu .tag.lav { background: var(--lav); color: var(--lav-ink); }

.jr-gu .iconbox {
  width: 36px; height: 36px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 700; overflow: hidden; background-size: cover; background-position: center;
}
.jr-gu .iconbox svg { width: 20px; height: 20px; stroke-width: 1.8; }
.jr-gu .iconbox.mint { background: var(--mint); color: var(--mint-ink); }
.jr-gu .iconbox.sky { background: var(--sky); color: var(--sky-ink); }
.jr-gu .iconbox.gold { background: var(--gold); color: var(--gold-ink); }
.jr-gu .iconbox.coral { background: var(--coral); color: var(--coral-ink); }
.jr-gu .iconbox.lav { background: var(--lav); color: var(--lav-ink); }

/* ---------------------------------------------------------------- HOME */
.jr-gu .home-greeting { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.jr-gu .home-greeting h1 { font-size: 40px; letter-spacing: -.025em; margin: 0 0 6px; font-weight: 700; }
.jr-gu .home-greeting p { margin: 0; font-size: 17px; color: #2D2D2D; }
.jr-gu .switch-child {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line);
  background: #fffdf6; padding: 7px 10px; border-radius: 16px;
}
.jr-gu .switch-child .meta { display: block; }

.jr-gu .home-grid { display: grid; grid-template-columns: 1.06fr 1fr 1fr; gap: 12px; align-items: start; }

.jr-gu .hero {
  grid-column: span 2; background: #F1F8F5; border: 1.5px solid #D6E8E1; border-radius: 18px;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); overflow: hidden;
}
.jr-gu .hero-copy { padding: 30px 32px; }
.jr-gu .hero-copy h2 { font-size: 36px; line-height: 1.08; margin: 10px 0 10px; letter-spacing: -.02em; font-weight: 700; }
.jr-gu .hero-copy p { font-size: 15.5px; line-height: 1.6; color: #424242; max-width: 520px; margin: 0 0 18px; }
.jr-gu .hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid #D7E9E2; background: rgba(255, 255, 255, .55);
}
.jr-gu .hero-stat { padding: 14px 16px; border-right: 1.5px solid #D7E9E2; }
.jr-gu .hero-stat:last-child { border-right: 0; }
.jr-gu .hero-stat strong { display: block; font-size: 21px; font-weight: 700; }
.jr-gu .hero-stat span { font-size: 11px; color: #555; }
.jr-gu .hero-art { padding: 0; background: #EFF7F3; overflow: hidden; display: flex; align-items: stretch; }
.jr-gu .hero-art .neutral-study-art { width: 100%; height: auto; max-width: 500px; display: block; align-self: center; }

.jr-gu .attn { padding-bottom: 4px; }
.jr-gu .task {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 12px 16px; border-bottom: 1.5px solid var(--line);
}
.jr-gu .task:last-child { border-bottom: 0; }
.jr-gu .task strong { display: block; font-size: 13px; }
.jr-gu .task p { margin: 3px 0 0; color: var(--sub); font-size: 11px; }

.jr-gu .learning-list,
.jr-gu .mail-list,
.jr-gu .recent-list { padding: 2px 16px 6px; }
.jr-gu .learning-row,
.jr-gu .mail-row,
.jr-gu .recent-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 11px 0; border-bottom: 1.5px solid var(--line);
}
.jr-gu .learning-row:last-child,
.jr-gu .mail-row:last-child,
.jr-gu .recent-row:last-child { border-bottom: 0; }
.jr-gu .learning-row strong,
.jr-gu .mail-row strong,
.jr-gu .recent-row strong { display: block; font-size: 13px; }
.jr-gu .learning-row small,
.jr-gu .mail-row small,
.jr-gu .recent-row small { display: block; color: var(--sub); font-size: 11px; margin-top: 2px; }
.jr-gu .learning-row > div:last-child { text-align: right; }

.jr-gu .bar { width: 110px; height: 6px; background: #ECEAE6; border-radius: 99px; overflow: hidden; }
.jr-gu .bar i { display: block; height: 100%; border-radius: inherit; }
.jr-gu .bar.mint i { background: #48A986; }
.jr-gu .bar.sky i { background: #4C97D0; }
.jr-gu .bar.gold i { background: #D5A62A; }

.jr-gu .schedule { grid-column: span 2; }
.jr-gu .schedule-body { display: grid; grid-template-columns: repeat(5, 1fr); }
.jr-gu .day { padding: 13px; border-right: 1.5px solid var(--line); min-height: 160px; }
.jr-gu .day:last-child { border-right: 0; }
.jr-gu .day.today { background: #FFF8EE; }
.jr-gu .day-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.jr-gu .day-head strong { font-size: 12px; }
.jr-gu .day-head span { font-size: 10px; color: var(--sub); }
.jr-gu .sched-item { display: flex; gap: 7px; align-items: center; font-size: 11px; margin: 8px 0; }
.jr-gu .dotcheck {
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #CFCBC3;
  display: grid; place-items: center; flex: none; font-size: 9px; color: transparent;
}
.jr-gu .done .dotcheck { background: #2D9E77; border-color: #2D9E77; color: #fffdf6; }
.jr-gu .day-foot { margin-top: 16px; font-size: 10px; color: var(--sub); }

.jr-gu .add-school { background: #F7FBFA; }
.jr-gu .add-school-body { padding: 18px; display: grid; grid-template-columns: 1fr 160px; gap: 14px; align-items: center; }
.jr-gu .add-school h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.jr-gu .add-school p { margin: 0 0 14px; color: var(--sub); line-height: 1.5; }
.jr-gu .add-art img { width: 150px; height: 110px; object-fit: cover; border-radius: 10px; display: block; justify-self: end; }

/* The forwarding card. Her design offers an address; this build carries none, and says so. */
.jr-gu .notyet {
  border: 1.5px dashed #D8CDB6; background: #FCFAF4; border-radius: var(--radius-sm);
  padding: 14px 16px; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
}
.jr-gu .notyet strong { display: block; font-size: 13px; }
.jr-gu .notyet p { margin: 3px 0 0; font-size: 11px; color: var(--sub); line-height: 1.5; }

/* ---------------------------------------------------------------- PROGRESS */
.jr-gu .progress-hero {
  background: #F2F8F6; border: 1.5px solid #D7E8E1;
  display: grid; grid-template-columns: 1.2fr .7fr; min-height: 205px; overflow: hidden;
}
.jr-gu .progress-copy { padding: 26px 28px; }
.jr-gu .progress-copy h2 { font-size: 30px; margin: 9px 0 9px; letter-spacing: -.02em; font-weight: 700; }
.jr-gu .progress-copy p { margin: 0; color: #505050; line-height: 1.5; max-width: 580px; }
.jr-gu .progress-art { display: flex; justify-content: center; align-items: center; padding: 12px; }
.jr-gu .progress-art img { width: 100%; max-width: 280px; height: auto; display: block; border-radius: 10px; }
.jr-gu .progress-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1.5px solid #D7E8E1; background: #fffdf6;
}
.jr-gu .kpi { padding: 13px 16px; border-right: 1.5px solid var(--line); }
.jr-gu .kpi:last-child { border-right: 0; }
.jr-gu .kpi strong { display: block; font-size: 22px; font-weight: 700; }
.jr-gu .kpi span { font-size: 11px; color: var(--sub); }

.jr-gu .subjects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.jr-gu .subject { background: #fffdf6; border: 1.5px solid var(--line); border-radius: 16px; }
.jr-gu .subject-top { padding: 16px; border-bottom: 1.5px solid var(--line); }
.jr-gu .subject-title { display: flex; justify-content: space-between; align-items: flex-start; }
.jr-gu .subject-name { display: flex; gap: 10px; align-items: center; }
.jr-gu .subject-name h3 { margin: 0; font-size: 19px; font-weight: 700; }
.jr-gu .subject-top p { margin: 5px 0 12px; color: var(--sub); font-size: 12px; }
.jr-gu .dots { display: flex; gap: 7px; }
.jr-gu .dots i {
  width: 14px; height: 14px; border: 1.5px solid #CFCBC3; border-radius: 50%; display: block;
}
.jr-gu .dots i.fill-m { background: #43A782; border-color: #43A782; }
.jr-gu .dots i.fill-s { background: #4E98D1; border-color: #4E98D1; }
.jr-gu .dots i.fill-g { background: #D5A62A; border-color: #D5A62A; }
.jr-gu .dots i.none { border-style: dashed; opacity: .55; }
.jr-gu .skill-list { padding: 6px 16px 12px; }
.jr-gu .skill {
  display: grid; grid-template-columns: 1fr 110px auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1.5px solid var(--line);
}
.jr-gu .skill:last-child { border-bottom: 0; }
.jr-gu .skill span { font-size: 11px; }
.jr-gu .skill .value { font-weight: 700; text-align: right; }

.jr-gu .progress-lower { display: grid; grid-template-columns: 1.05fr .95fr; gap: 12px; margin-top: 12px; align-items: start; }
.jr-gu .evidence-row,
.jr-gu .moment-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 11px 16px; border-bottom: 1.5px solid var(--line);
}
.jr-gu .evidence-row:last-child,
.jr-gu .moment-row:last-child { border-bottom: 0; }
.jr-gu .evidence-row strong,
.jr-gu .moment-row strong { font-size: 12px; }
.jr-gu .evidence-row small,
.jr-gu .moment-row small { display: block; color: var(--sub); font-size: 10px; margin-top: 2px; }

/* ---------------------------------------------------------------- WHAT CAME HOME */
/* Her Inbox layout, unchanged. What fills it is the parent's own list, not mail. */
.jr-gu .inbox-layout {
  display: grid; grid-template-columns: 430px 1fr; border: 1.5px solid var(--line);
  background: #fffdf6; border-radius: 16px; min-height: 690px; overflow: hidden;
}
.jr-gu .inbox-left { border-right: 1.5px solid var(--line); }
.jr-gu .inbox-tools { padding: 14px; border-bottom: 1.5px solid var(--line); }
.jr-gu .search {
  display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line);
  padding: 10px 11px; border-radius: 12px; background: #fffdf6;
}
.jr-gu .search input { border: 0; outline: 0; width: 100%; color: #111; background: transparent; }
.jr-gu .tabs { display: flex; gap: 14px; margin-top: 12px; }
.jr-gu .tabs button { border: 0; background: none; padding: 5px 0; font-size: 11px; color: #555; font-weight: 700; }
.jr-gu .tabs button.active { color: #000; border-bottom: 2px solid var(--orange); }
.jr-gu .message {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 13px 14px;
  border-bottom: 1.5px solid var(--line); cursor: pointer; position: relative;
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
  align-items: center;
}
.jr-gu .message.active { background: #FFF5ED; box-shadow: inset 3px 0 0 var(--orange); }
.jr-gu .message strong { display: block; font-size: 12px; }
.jr-gu .message p { margin: 3px 0 0; font-size: 11px; color: var(--sub); }
.jr-gu .message time { font-size: 10px; color: var(--sub); }
.jr-gu .message.unread strong { font-weight: 800; }
.jr-gu .message.unread { background: #FFFDFA; }
.jr-gu .message.unread::after {
  content: ''; position: absolute; right: 14px; top: 16px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--orange);
}
.jr-gu .message.hidden { display: none; }

.jr-gu .inbox-detail { padding: 20px 24px; }
.jr-gu .sender { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1.5px solid var(--line); }
.jr-gu .sender-info { display: flex; gap: 10px; }
.jr-gu .sender h3 { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.jr-gu .sender p { margin: 0; color: var(--sub); font-size: 11px; }
.jr-gu .mail-body { padding: 24px 0; }
.jr-gu .mail-body h2 { font-size: 30px; margin: 0 0 14px; letter-spacing: -.015em; font-weight: 700; }
.jr-gu .mail-body p { font-size: 14px; line-height: 1.65; color: #333; max-width: 780px; }
.jr-gu .attachments { border-top: 1.5px solid var(--line); padding-top: 16px; }
.jr-gu .attach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.jr-gu .attachment {
  border: 1.5px solid var(--line); padding: 11px; display: grid;
  grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; border-radius: 12px;
}
.jr-gu .mail-actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--line); flex-wrap: wrap; }

/* ---------------------------------------------------------------- SCHOOL */
.jr-gu .school-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 12px; align-items: start; }
.jr-gu .school-overview { padding: 0 18px 18px; }
.jr-gu .school-identity {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px; align-items: center; padding: 18px 0;
}
.jr-gu .school-art img { width: 100%; max-width: 280px; height: auto; display: block; border-radius: 10px; }
.jr-gu .school-copy { min-width: 0; }
.jr-gu .school-copy h3 { font-size: 22px; margin: 0 0 6px; line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
.jr-gu .school-copy p { margin: 0; color: var(--sub); line-height: 1.45; }
.jr-gu .school-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line);
}
.jr-gu .fact { padding: 12px 10px; border-right: 1.5px solid var(--line); }
.jr-gu .fact:last-child { border-right: 0; }
.jr-gu .fact span { display: block; font-size: 10px; color: var(--sub); margin-bottom: 4px; }
.jr-gu .fact strong { font-size: 12px; }
.jr-gu .fact.unknown strong { color: var(--sub); font-weight: 500; }
.jr-gu .dates-head { display: flex; justify-content: space-between; align-items: center; }
.jr-gu .dates-wrap { padding-top: 14px; }
.jr-gu .date-row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1.5px solid var(--line);
}
.jr-gu .date-row:last-child { border-bottom: 0; }
.jr-gu .datebox { border: 1.5px solid var(--line); border-radius: 12px; padding: 5px; text-align: center; }
.jr-gu .datebox b { display: block; font-size: 10px; color: var(--orange); }
.jr-gu .datebox strong { font-size: 17px; }

.jr-gu .upload-zone { padding: 18px; }
.jr-gu .upload-head { display: grid; grid-template-columns: 1fr 150px; gap: 18px; align-items: center; }
.jr-gu .upload-head h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.jr-gu .upload-head img { width: 150px; height: 98px; object-fit: cover; justify-self: end; border-radius: 10px; display: block; }
.jr-gu .upload-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--line); margin-top: 14px; }
.jr-gu .upload-opt {
  padding: 14px 10px; text-align: center; border-right: 1.5px solid var(--line);
  background: #fffdf6; border-top: 0; border-bottom: 0; border-left: 0; min-height: 92px;
}
.jr-gu .upload-opt:last-child { border-right: 0; }
.jr-gu .upload-opt svg { width: 24px; height: 24px; stroke: #136F64; }
.jr-gu .upload-opt strong { display: block; font-size: 12px; margin-top: 6px; }
.jr-gu .upload-opt small { display: block; font-size: 10px; color: var(--sub); margin-top: 4px; line-height: 1.4; }
.jr-gu .upload-opt.off { background: #FCFAF4; cursor: default; }
.jr-gu .upload-opt.off strong { color: var(--sub); }
.jr-gu .dropzone { margin-top: 12px; border: 1px dashed #BDB8AF; padding: 28px; text-align: center; background: #FEFDFC; }
.jr-gu .dropzone h4 { margin: 8px 0 4px; font-size: 15px; }
.jr-gu .dropzone p { margin: 0 0 10px; color: var(--sub); font-size: 11px; }

.jr-gu .school-bottom { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; margin-top: 12px; align-items: start; }
.jr-gu .processed-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 11px 16px; border-bottom: 1.5px solid var(--line); cursor: pointer;
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0;
}
.jr-gu .processed-row:last-child { border-bottom: 0; }
.jr-gu .processed-row:hover { background: #FCFBF8; }
.jr-gu .processed-row.active { background: #FFF8F1; box-shadow: inset 3px 0 0 var(--orange); }
.jr-gu .extracted { padding: 14px 16px; }
.jr-gu .extract-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.jr-gu .extract-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.jr-gu .extract-body { display: grid; grid-template-columns: 145px 1fr; gap: 14px; }
.jr-gu .worksheet { border: 1.5px solid var(--line); padding: 12px; background: #FAFAF8; font-size: 10px; line-height: 1.6; }
.jr-gu .field {
  display: grid; grid-template-columns: 95px 1fr; padding: 8px 0;
  border-bottom: 1.5px solid var(--line); font-size: 11px;
}
.jr-gu .field:last-child { border-bottom: 0; }
.jr-gu .extract-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---------------------------------------------------------------- LIBRARY */
.jr-gu .library-tools {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  border: 1.5px solid var(--line); background: #fffdf6; padding: 12px; border-radius: 12px; margin-bottom: 14px;
}
.jr-gu .filters { display: flex; gap: 8px; }
.jr-gu .filter {
  border: 1.5px solid var(--line); background: #fffdf6; border-radius: 999px;
  padding: 8px 12px; font-size: 11px; font-weight: 700;
}
.jr-gu .filter.active { background: #111; color: #fffdf6; border-color: #111; }
.jr-gu .library-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
.jr-gu .resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jr-gu .resource {
  background: #fffdf6; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden;
  position: relative; min-height: 325px; text-align: left; padding: 0; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jr-gu .resource:hover { border-color: #CFC5B9; box-shadow: 0 10px 26px rgba(42, 34, 22, .08); transform: translateY(-2px); }
.jr-gu .resource.hidden { display: none; }
.jr-gu .resource-preview {
  height: 184px; background: #FBFAF6; display: grid; place-items: center;
  border-bottom: 1.5px solid var(--line); overflow: hidden;
}
.jr-gu .resource-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jr-gu .resource-body { padding: 14px 14px 13px; }
.jr-gu .resource-body h3 { font-size: 15px; margin: 0 0 6px; letter-spacing: -.015em; font-weight: 700; }
.jr-gu .resource-body p { margin: 0 0 11px; font-size: 12px; color: var(--sub); line-height: 1.48; }
.jr-gu .resource-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.jr-gu .empty-resource {
  border: 1px dashed #CFC8BE; background: #FFFEFC; display: grid; place-items: center;
  text-align: center; min-height: 325px; padding: 28px 24px; width: 100%;
}
.jr-gu .empty-resource:hover { border-color: #9E9488; background: #FFFDF8; }
.jr-gu .empty-icon {
  width: 54px; height: 54px; margin: 0 auto 12px; border: 1.5px solid var(--line);
  display: grid; place-items: center; background: #fffdf6; border-radius: 50%; font-size: 27px; color: #777;
}
.jr-gu .empty-resource h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.jr-gu .empty-resource p { margin: 0; color: var(--sub); font-size: 11px; line-height: 1.5; }

/* A filter with nothing under it says so, across the whole grid rather than as a fourth card:
   it is a statement about the shelf, not another thing on it. Her dashed cream, her radius. */
.jr-gu .resource-empty {
  grid-column: 1 / -1; border: 1px dashed var(--line-strong); border-radius: 14px;
  background: #FFFEFC; padding: 26px 24px;
}
.jr-gu .resource-empty h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.jr-gu .resource-empty p { margin: 0; color: var(--sub); font-size: 12px; line-height: 1.55; max-width: 60ch; }

.jr-gu .library-aside { display: flex; flex-direction: column; gap: 12px; }
.jr-gu .aside-card { background: #fffdf6; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.jr-gu .aside-top { height: 118px; overflow: hidden; border-bottom: 1px solid var(--line); }
.jr-gu .aside-top img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-gu .aside-body { padding: 16px; }
.jr-gu .aside-body h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.jr-gu .aside-body p { margin: 0 0 14px; color: var(--sub); font-size: 11px; line-height: 1.5; }
.jr-gu .source-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center;
  padding: 10px 0; border-bottom: 1.5px solid var(--line);
}
.jr-gu .source-row:last-child { border-bottom: 0; }
.jr-gu .source-row strong { display: block; font-size: 12px; }
.jr-gu .source-row small { font-size: 10px; color: var(--sub); line-height: 1.4; }

/* ---------------------------------------------------------------- PLAN */
.jr-gu .plan-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.jr-gu .weekrange { display: flex; align-items: center; gap: 8px; }
.jr-gu .weekrange strong { font-size: 15px; }
.jr-gu .plan-board {
  display: grid; grid-template-columns: repeat(5, 1fr); border: 1.5px solid var(--line);
  background: #fffdf6; border-radius: 16px; overflow: hidden;
}
.jr-gu .plan-day { border-right: 1.5px solid var(--line); min-height: 330px; }
.jr-gu .plan-day:last-child { border-right: 0; }
.jr-gu .plan-day.today { background: #FFF9F1; }
.jr-gu .plan-head { padding: 13px; border-bottom: 1.5px solid var(--line); }
.jr-gu .plan-head strong { display: block; }
.jr-gu .plan-head span { font-size: 10px; color: var(--sub); }
.jr-gu .plan-items { padding: 5px 12px; }
.jr-gu .plan-task {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: center;
  padding: 10px 0; border-bottom: 1.5px solid var(--line);
}
.jr-gu .plan-task:last-child { border-bottom: 0; }
.jr-gu .plan-task strong { font-size: 11px; }
.jr-gu .plan-task small { display: block; color: var(--sub); font-size: 9px; line-height: 1.35; }
.jr-gu .plan-task .state {
  width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; color: #131313; line-height: 1; flex-shrink: 0;
}
.jr-gu .plan-task.done .state { background: #111; color: #fffdf6; border-color: #111; }
.jr-gu .plan-task.done strong,
.jr-gu .plan-task.done small { opacity: .78; }
.jr-gu .plan-empty { padding: 14px 12px; font-size: 11px; color: var(--sub); line-height: 1.5; }

.jr-gu .plan-lower { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; margin-top: 12px; align-items: start; }
.jr-gu .today-list { padding: 2px 16px 10px; }
.jr-gu .today-row {
  display: grid; grid-template-columns: 24px 36px 1fr auto; gap: 9px; align-items: center;
  padding: 11px 0; border-bottom: 1.5px solid var(--line);
}
.jr-gu .today-row:last-child { border-bottom: 0; }
.jr-gu .today-row .state { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 10px; }
.jr-gu .today-row.done .state { background: #111; color: #fffdf6; border-color: #111; }
.jr-gu .today-row strong { font-size: 12px; }
.jr-gu .rule { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 16px; border-bottom: 1.5px solid var(--line); }
.jr-gu .rule:last-child { border-bottom: 0; }
.jr-gu .rule-num {
  width: 28px; height: 28px; border-radius: 50%; background: #111; color: #fffdf6;
  display: grid; place-items: center; font-weight: 700; font-size: 11px;
}
.jr-gu .rule strong { display: block; font-size: 12px; }
.jr-gu .rule p { margin: 3px 0 0; color: var(--sub); font-size: 10px; line-height: 1.45; }

/* ---------------------------------------------------------------- overlays and the toast */
/* `position:fixed` inside the transformed stage is relative to the stage, so an overlay covers
   the tablet and nothing outside it. That is exactly what is wanted here. */
.jr-gu .overlay {
  position: fixed; inset: 0; background: rgba(10, 10, 10, .25);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.jr-gu .modal {
  width: min(680px, 92%); max-height: 82%; overflow-y: auto; background: #fffdf6;
  border: 1.5px solid var(--line); border-radius: 18px; box-shadow: 0 28px 80px rgba(0, 0, 0, .18);
}
.jr-gu .modal.wide { width: min(760px, 92%); }
.jr-gu .modal.narrow { width: min(470px, 92%); }
.jr-gu .modal-head {
  padding: 18px 20px; border-bottom: 1.5px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; background: #fffdf6; z-index: 2;
}
.jr-gu .modal-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.jr-gu .close { border: 0; background: none; font-size: 24px; min-width: 44px; min-height: 44px; }
.jr-gu .modal-body { padding: 18px 20px; }
.jr-gu .modal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jr-gu .modal-opt {
  border: 1.5px solid var(--line); padding: 16px; border-radius: 14px; display: flex; gap: 10px;
  width: 100%; text-align: left; background: #fffdf6; align-items: center;
}
.jr-gu .modal-opt:hover { background: #FBFAF7; }
.jr-gu .modal-opt strong { display: block; margin-bottom: 4px; }
.jr-gu .modal-opt p { margin: 0; color: var(--sub); font-size: 11px; line-height: 1.5; }
.jr-gu .modal-opt.current { box-shadow: inset 3px 0 0 var(--mint); }
.jr-gu .modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px;
  padding-top: 16px; border-top: 1.5px solid var(--line);
}
.jr-gu .detail-list { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.jr-gu .detail-list > div { padding: 13px 14px; border-bottom: 1.5px solid var(--line); }
.jr-gu .detail-list > div:last-child { border-bottom: 0; }
.jr-gu .detail-list strong { display: block; font-size: 13px; }
.jr-gu .detail-list span { display: block; font-size: 11px; color: var(--sub); margin-top: 3px; line-height: 1.45; }
.jr-gu .choice-list { border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.jr-gu .choice-list .choice {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 13px;
  border-bottom: 1.5px solid var(--line); width: 100%; text-align: left; background: #fffdf6;
  align-items: center;
}
.jr-gu .choice-list .choice:last-child { border-bottom: 0; }
.jr-gu .choice-list strong { display: block; font-size: 13px; }
.jr-gu .choice-list small { display: block; color: var(--sub); margin-top: 3px; line-height: 1.4; font-size: 11px; }
.jr-gu .choice .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #CFCBC3; display: grid; place-items: center; font-size: 11px; }
.jr-gu .choice.on .dot { background: #111; border-color: #111; color: #fffdf6; }
.jr-gu .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.jr-gu .chip {
  border: 1.5px solid var(--line); background: #fffdf6; border-radius: 999px;
  padding: 0 16px; min-height: 40px; font-size: 13px; font-weight: 700;
}
.jr-gu .chip.on { background: #111; color: #fffdf6; border-color: #111; }
.jr-gu .simple-table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.jr-gu .simple-table th,
.jr-gu .simple-table td { padding: 10px; border: 1.5px solid var(--line); text-align: left; font-size: 12px; }
.jr-gu .simple-table th { background: #FAF8F4; }
.jr-gu .print-title { display: flex; justify-content: space-between; align-items: baseline; }
.jr-gu .print-title strong { font-size: 18px; }
.jr-gu .print-title span { font-size: 12px; color: var(--sub); }

.jr-gu .toast {
  position: fixed; right: 22px; bottom: 22px; background: #111; color: #fffdf6;
  padding: 12px 16px; border-radius: 14px; z-index: 60; font-weight: 600; font-size: 14px;
  transform: translateY(90px);
  animation: sj-gu-toast 2.2s cubic-bezier(.2, .75, .25, 1) forwards;
}

/* Transform-only, like every other entrance in this app (CLAUDE.md; plan ruling 3). The toast
   leaves by sliding back out of the frame rather than fading, so nothing depends on opacity. */
@keyframes sj-gu-toast {
  0% { transform: translateY(90px); }
  8% { transform: none; }
  92% { transform: none; }
  100% { transform: translateY(90px); }
}

/* The privacy card, which is her Add screen's card shown on this side of the door. */
.jr-gu .privacy-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 13px 15px;
  border-radius: 14px; background: #fff9e9; border: 1px solid var(--line); margin-bottom: 10px;
}
.jr-gu .privacy-row:last-child { margin-bottom: 0; }
.jr-gu .privacy-glyph {
  flex: none; width: 32px; height: 32px; border-radius: 10px; background: #fffdf6;
  border: 1px solid var(--line-strong); display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.jr-gu .privacy-row strong { display: block; font-size: 14px; }
.jr-gu .privacy-row p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--sub); }
.jr-gu .danger { border-color: var(--orange-border); color: var(--orange); }
.jr-gu .danger.armed { background: var(--orange-soft); }

/* The grown-up's tick, under the reading log. Same dashed cream as every other honest empty. */
.jr-gu .tick-panel {
  margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--line-strong);
  border-radius: 14px; background: #FFFEFC;
}
.jr-gu .tick-panel > strong { display: block; font-size: 14px; margin-bottom: 6px; }
.jr-gu .tick-panel .meta { margin: 0 0 10px; font-size: 12px; line-height: 1.55; }
.jr-gu .tick-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-top: 1.5px solid var(--line);
}
.jr-gu .tick-row .meta { margin: 0; }

.jr-gu .rows-empty {
  padding: 22px; border: 1px dashed var(--line-strong); border-radius: 14px;
  background: #FFFEFC; margin: 14px 16px;
}
.jr-gu .rows-empty strong { display: block; font-size: 15px; margin-bottom: 5px; }
.jr-gu .rows-empty p { margin: 0; font-size: 12px; color: var(--sub); line-height: 1.55; }

/* Every entrance on this side, transform-only. */
@keyframes sj-gu-rise {
  from { transform: translateY(10px); }
  to { transform: none; }
}
.jr-gu .page.active { animation: sj-gu-rise 260ms cubic-bezier(.2, .75, .25, 1) both; }

/* ---------------------------------------------------------------- what the browser walk found */
/* Four things her sealed shadow root gave her for free and a scoped stylesheet does not, all
   found by looking at the built page beside hers rather than by reading the CSS. */

/* 1. Her page set `a { color:#19776f; text-decoration:none }` outside the component, so nothing
      of hers was ever underlined. Scoped in, every link on this side wore the browser default. */
.jr-gu a { color: inherit; text-decoration: none; }
.jr-gu a.linkbtn { color: #0E5C8B; }

/* 2. Her button labels are two or three words. Several here are longer, and a wrapped label
      inside a fixed-height pill reads as a mistake. */
.jr-gu .primary,
.jr-gu .ghost,
.jr-gu .mini,
.jr-gu .filter,
.jr-gu .chip { white-space: nowrap; }

/* 3. A skill row whose value is a sentence rather than a number has no bar to draw, so it takes
      the bar's 110px back instead of squeezing its own label into four lines. */
.jr-gu .skill.text { grid-template-columns: auto 1fr; }
.jr-gu .skill.text .value { text-align: right; font-weight: 600; }

/* 4. Rows and cards that act as buttons are divs (see `row()` in grownups.js for why), so they
      need the cursor and the focus ring a real button would have had. */
.jr-gu [role="button"] { cursor: pointer; }
.jr-gu [role="button"]:focus-visible,
.jr-gu button:focus-visible,
.jr-gu a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* ================================================================ PHONES (DECISIONS #164)
   Faith, 2026-09-14: "now make it work well on phones too".

   THE HEADER OF THIS FILE SAYS "THE PHONE LAYOUTS ARE NOT HERE", and that was right at the
   time and is now half right. What follows restores them.

   WHERE THEY COME FROM. Her own sheet, sealed in
   art-source/design-sj2-2026-09-12/scripts/sj-grownups.js, carries THIRTEEN media rules — the
   product was Schola_Jr_Parent_Experience_v11_mobile_compact and it was designed for a phone
   first. The port kept exactly one of them (her `min-width:761px` wide-layout fit, applied
   unconditionally) and dropped twelve. Those twelve are below, extracted by parsing the CSS
   string rather than by eye, in her order:
     (max-width:1100px) · (max-width:980px) · (max-width:900px) · (max-width:760px) x4 ·
     (max-width:700px) · (max-width:390px) x2 · (max-width:1100px)and(min-width:761px) · print

   WHY THEY ARE SCOPED TO `.jr-phone-natural` AND NOT JUST TO A WIDTH. The original reason for
   dropping them stands: this side normally runs inside a FIXED 1440x940 stage that is scaled
   to the window, so a bare `@media(max-width:760px)` fires on a small laptop while the stage
   is still 1440px wide and lays the page out for a phone that is not there. `.jr-phone-natural`
   is set by src/shell/jr_app.js only when the shell has actually taken this side OUT of the
   stage and onto the page at the device's own width (DECISIONS #164), which is the one
   situation in which "the viewport is 375px" and "this layout is 375px wide" are the same
   sentence. The width query is kept as well, so both halves have to be true.

   THE FOUR MAPPINGS her class names needed, all of them the port's own renames:
     her `:host`            -> `.jr-gu`            (the scoping change, file header note 1)
     her `#page-inbox`      -> `#page-came`        (the page is "What came home", #87)
     her `#profile-child-name` -> `.profile span`  (the port builds the name as a plain span)
     her `.iconbtn` (a notification bell) -> nothing; this build has no bell (#85).

   THE FIVE RULES OF HERS THAT ARE NOT PORTED, each because its target does not exist here:
     `#print-reading-log` and the whole `@media print` block — her print sheet is the v11
       reading log with a chapter of *Wonder* in it; this build has no such element, and her
       rule hides EVERY other element on the page, so porting it would make printing the
       grown-up side produce a blank sheet. Printing is `sheet-print` elsewhere in this app.
     `.form-grid` / `.span-2` (her 700px rule) and `.editable-task-row` — the plan-edit and
       school-edit overlays those belong to are two of the six she never drew (#85).
     `.mobile-nav` — see the next paragraph.

   THE ONE DELIBERATE DEPARTURE, and it is the only invented line in this block.
   Her `(max-width:760px)` rules hide `.nav` outright and hand page-switching to a `.mobile-nav`
   bottom bar. Her stylesheet styles that bar in two places; her MARKUP never renders it — there
   is no `.mobile-nav` element anywhere in sj-grownups.js, and `mobile-more`, the overlay that
   went with it, is one of the six overlays she left undrawn (#85). Following her CSS literally
   would therefore hide the only way to change page and put nothing in its place: six pages
   reachable only from Home. Building the bottom bar instead would mean inventing a component
   she did not draw, which CLAUDE.md forbids. So the nav STAYS and scrolls sideways, using her
   own phone pattern for a row of tabs that does not fit — the one she wrote for `.tabs` and
   `.filters` twenty lines further down the same media rule (`overflow-x:auto`, `white-space:
   nowrap`, `scrollbar-width:none`). The top bar becomes two rows to hold it. A real bottom nav
   waits on her frames. */

@media (max-width: 1100px) {
  /* Her (max-width:1100px), and her (max-width:1100px) and (min-width:761px) folded in. */
  .jr-phone-natural .jr-gu .topbar { padding-inline: calc(max(0px, (100% - 1450px) / 2) + 20px); }
  .jr-phone-natural .jr-gu .nav { gap: 14px; }
  .jr-phone-natural .jr-gu .nav button { font-size: 12px; }
  .jr-phone-natural .jr-gu .main { padding: 24px 20px 86px; }
  .jr-phone-natural .jr-gu .home-grid { grid-template-columns: 1fr 1fr; }
  .jr-phone-natural .jr-gu .hero,
  .jr-phone-natural .jr-gu .schedule,
  .jr-phone-natural .jr-gu .add-school { grid-column: span 2; }
  .jr-phone-natural .jr-gu .subjects,
  .jr-phone-natural .jr-gu .progress-lower,
  .jr-phone-natural .jr-gu .school-grid,
  .jr-phone-natural .jr-gu .school-bottom,
  .jr-phone-natural .jr-gu .library-layout { grid-template-columns: 1fr; }
  .jr-phone-natural .jr-gu .resources { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .jr-phone-natural .jr-gu .school-identity { grid-template-columns: 1fr; }
  .jr-phone-natural .jr-gu .school-art img { max-width: 230px; }
}

@media (max-width: 900px) {
  .jr-phone-natural .jr-gu .hero { grid-template-columns: 1fr; }
  .jr-phone-natural .jr-gu .hero-art img { min-height: 260px; max-height: 320px; }
  .jr-phone-natural .jr-gu .hero-art { order: -1; }
  .jr-phone-natural .jr-gu .hero-copy { padding: 24px; }
}

@media (max-width: 760px) {
  /* Her four (max-width:760px) rules, in her order, merged into one block. */
  .jr-phone-natural .jr-gu {
    --mobile-gutter: 14px;
    background: #FCFBF8;
    font-size: 14px;
    width: 100%;
    overflow-x: hidden;
  }

  /* Compact mobile header. Two rows, for the reason in the block comment above: her bar's
     second row is the nav she hides and never replaced. */
  .jr-phone-natural .jr-gu .topbar {
    position: sticky;
    top: 0;
    z-index: 34;
    height: auto;
    flex-wrap: wrap;
    row-gap: 0;
    padding: calc(env(safe-area-inset-top)) 16px 0;
    gap: 10px;
    background: rgba(255, 253, 246, .97);
    backdrop-filter: blur(14px);
    border-bottom: 1.5px solid #EEEAE4;
  }
  .jr-phone-natural .jr-gu .brand { min-width: 0; gap: 9px; height: 66px; }
  .jr-phone-natural .jr-gu .brandmark { width: 34px; height: 34px; border-radius: 18px; }
  .jr-phone-natural .jr-gu .brand strong { font-size: 20px; white-space: nowrap; }
  .jr-phone-natural .jr-gu .top-actions { margin-left: auto; height: 66px; }
  .jr-phone-natural .jr-gu .profile {
    height: 42px; padding: 5px 9px 5px 5px; border-radius: 18px; gap: 7px;
  }
  .jr-phone-natural .jr-gu .profile .avatar { width: 30px; height: 30px; }
  .jr-phone-natural .jr-gu .profile span:last-child { font-size: 14px; }
  /* Hers, kept: the wide "Add school info" button goes. Every page that needs it links to it. */
  .jr-phone-natural .jr-gu .top-actions .primary { display: none !important; }
  /* Hers, kept: the hand-back control keeps its arrow and loses its words. */
  .jr-phone-natural .jr-gu .sj-back span { display: none; }
  .jr-phone-natural .jr-gu .sj-back { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; }
  .jr-phone-natural .jr-gu .ghost { padding: 0 12px; font-size: 14px; }
  /* THE DEPARTURE: her nav survives, on her own overflowing-row pattern. */
  .jr-phone-natural .jr-gu .nav {
    order: 3;
    flex: 1 0 100%;
    gap: 18px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .jr-phone-natural .jr-gu .nav::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-gu .nav button { flex: none; padding: 14px 0 12px; min-height: 44px; font-size: 13px; }

  .jr-phone-natural .jr-gu .main {
    padding: 14px var(--mobile-gutter) calc(24px + env(safe-area-inset-bottom));
    max-width: none;
    overflow: visible;
  }
  .jr-phone-natural .jr-gu .page-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .jr-phone-natural .jr-gu .page-title h1 { font-size: 30px; line-height: 1.06; }
  .jr-phone-natural .jr-gu .page-title p { font-size: 14px; line-height: 1.45; margin-top: 6px; }

  /* Home */
  .jr-phone-natural .jr-gu .home-greeting { display: block; margin-bottom: 12px; }
  .jr-phone-natural .jr-gu .home-greeting h1 { font-size: 28px; line-height: 1.07; margin-bottom: 7px; letter-spacing: -.035em; }
  .jr-phone-natural .jr-gu .home-greeting p { font-size: 15px; }
  .jr-phone-natural .jr-gu .switch-child,
  .jr-phone-natural .jr-gu #page-home .switch-child { display: none !important; }
  .jr-phone-natural .jr-gu .home-grid { display: flex !important; flex-direction: column; gap: 9px; }
  .jr-phone-natural .jr-gu .home-grid > * { margin: 0 !important; width: 100%; }
  .jr-phone-natural .jr-gu .surface,
  .jr-phone-natural .jr-gu .hero,
  .jr-phone-natural .jr-gu .subject,
  .jr-phone-natural .jr-gu .resource,
  .jr-phone-natural .jr-gu .aside-card { border-radius: 18px; }
  .jr-phone-natural .jr-gu #page-home .surface { border-radius: 16px; }
  .jr-phone-natural .jr-gu .section-head { padding: 14px 15px; gap: 10px; }
  .jr-phone-natural .jr-gu #page-home .section-head { padding: 13px 14px; }
  .jr-phone-natural .jr-gu .section-head h2,
  .jr-phone-natural .jr-gu .section-head h3 { font-size: 17px; }
  .jr-phone-natural .jr-gu #page-home .section-head h3 { font-size: 16px; }
  /* Hers sets the size; the 44px is this build's, because a thumb has to reach it and her
     phone design gave the same row a bottom bar to fall back on that was never drawn. */
  .jr-phone-natural .jr-gu .linkbtn {
    font-size: 13px; white-space: nowrap;
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* Hero becomes a compact status panel on a phone. */
  .jr-phone-natural .jr-gu .hero { display: block !important; min-height: 0; grid-column: auto; overflow: hidden; }
  .jr-phone-natural .jr-gu #page-home .hero { border-radius: 16px; }
  .jr-phone-natural .jr-gu .hero > div:first-child { display: block; }
  .jr-phone-natural .jr-gu .hero-copy { padding: 17px 16px 15px !important; }
  .jr-phone-natural .jr-gu .hero-copy .kicker { font-size: 9px; letter-spacing: .18em; }
  .jr-phone-natural .jr-gu .hero-copy h2 { font-size: 26px !important; line-height: 1.08; margin: 8px 0 9px; max-width: 12ch; }
  .jr-phone-natural .jr-gu .hero-copy p { font-size: 13.5px !important; line-height: 1.48; margin-bottom: 13px; max-width: none; }
  .jr-phone-natural .jr-gu .hero-copy .ghost { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  .jr-phone-natural .jr-gu .hero-art { display: none !important; }
  .jr-phone-natural .jr-gu .hero-stats { grid-template-columns: 1fr 1fr !important; background: #F9FCFA; }
  .jr-phone-natural .jr-gu .hero-stat { padding: 12px; min-height: 72px; }
  .jr-phone-natural .jr-gu .hero-stat:nth-child(2) { border-right: 0; }
  .jr-phone-natural .jr-gu .hero-stat:nth-child(-n+2) { border-bottom: 1.5px solid #D7E9E2; }
  .jr-phone-natural .jr-gu .hero-stat strong { font-size: 19px; line-height: 1.1; margin-bottom: 4px; }
  .jr-phone-natural .jr-gu .hero-stat span { font-size: 10px; line-height: 1.35; }

  /* Attention rows */
  .jr-phone-natural .jr-gu .task { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px 14px; gap: 9px; }
  .jr-phone-natural .jr-gu #page-home .task { min-height: 62px; }
  .jr-phone-natural .jr-gu .task strong { font-size: 13px; line-height: 1.25; }
  .jr-phone-natural .jr-gu .task p { font-size: 10.5px; line-height: 1.35; }
  .jr-phone-natural .jr-gu .mini { min-height: 44px; padding: 8px 10px; font-size: 11px; }

  /* Learning rows fit without horizontal crowding. */
  .jr-phone-natural .jr-gu .learning-list,
  .jr-phone-natural .jr-gu .mail-list,
  .jr-phone-natural .jr-gu .recent-list { padding: 0 14px 4px; }
  .jr-phone-natural .jr-gu .learning-row,
  .jr-phone-natural .jr-gu .mail-row,
  .jr-phone-natural .jr-gu .recent-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; padding: 9px 0; }
  .jr-phone-natural .jr-gu .learning-row > div:last-child { max-width: 92px; }
  .jr-phone-natural .jr-gu .bar { width: 78px; }
  .jr-phone-natural .jr-gu .learning-row .tag { font-size: 9px; padding: 4px 6px; }

  /* Weekly schedule: a short horizontal carousel, not five huge stacked days. */
  .jr-phone-natural .jr-gu .schedule { grid-column: auto; }
  .jr-phone-natural .jr-gu .schedule-body {
    display: flex !important;
    margin: 0;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 0 0 2px;
  }
  .jr-phone-natural .jr-gu .schedule-body::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-gu .schedule .day {
    flex: 0 0 142px;
    min-height: 137px !important;
    border-right: 1.5px solid var(--line) !important;
    border-bottom: 0 !important;
    padding: 11px;
    scroll-snap-align: start;
    background: #fffdf6;
  }
  .jr-phone-natural .jr-gu .schedule .day:last-child { border-right: 0 !important; }
  .jr-phone-natural .jr-gu .schedule .day.today { background: #FFF8EE; }
  .jr-phone-natural .jr-gu .day-head { margin-bottom: 9px; }
  .jr-phone-natural .jr-gu .day-head strong { font-size: 13px; }
  .jr-phone-natural .jr-gu .day-head span { font-size: 10px; }
  .jr-phone-natural .jr-gu .sched-item { font-size: 10.5px; margin: 6px 0; white-space: nowrap; }
  .jr-phone-natural .jr-gu .day-foot { font-size: 10px; margin-top: 9px; }

  /* Add school panel */
  .jr-phone-natural .jr-gu .add-school-body { grid-template-columns: 1fr; padding: 16px; }
  .jr-phone-natural .jr-gu .add-art { display: none; }
  .jr-phone-natural .jr-gu .add-school h3 { font-size: 17px; }
  .jr-phone-natural .jr-gu .add-school p { font-size: 12px; }

  /* Progress */
  .jr-phone-natural .jr-gu .progress-hero { display: block; min-height: 0; }
  .jr-phone-natural .jr-gu .progress-copy { padding: 20px 18px; }
  .jr-phone-natural .jr-gu .progress-copy h2 { font-size: 26px; }
  .jr-phone-natural .jr-gu .progress-copy p { font-size: 13px; line-height: 1.5; }
  .jr-phone-natural .jr-gu .progress-art { display: none; }
  .jr-phone-natural .jr-gu .progress-kpis { grid-template-columns: repeat(3, 1fr); }
  .jr-phone-natural .jr-gu .kpi { padding: 12px 10px; }
  .jr-phone-natural .jr-gu .kpi strong { font-size: 18px; }
  .jr-phone-natural .jr-gu .kpi span { font-size: 9px; line-height: 1.25; }
  .jr-phone-natural .jr-gu .subjects,
  .jr-phone-natural .jr-gu .progress-lower { display: block !important; }
  .jr-phone-natural .jr-gu .subject,
  .jr-phone-natural .jr-gu .surface,
  .jr-phone-natural .jr-gu .resource,
  .jr-phone-natural .jr-gu .aside-card { margin-bottom: 10px; }
  .jr-phone-natural .jr-gu .subject-top { padding: 14px; }
  .jr-phone-natural .jr-gu .subject-name h3 { font-size: 17px; }

  /* What came home (her #page-inbox). */
  .jr-phone-natural .jr-gu .inbox-layout { display: block !important; }
  .jr-phone-natural .jr-gu .inbox-left { border-right: 0; border-bottom: 1.5px solid var(--line); }
  .jr-phone-natural .jr-gu .inbox-tools { padding: 12px; }
  .jr-phone-natural .jr-gu .tabs { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .jr-phone-natural .jr-gu .tabs::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-gu .tabs button { min-height: 44px; }
  .jr-phone-natural .jr-gu .message { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 12px; }
  .jr-phone-natural .jr-gu #page-came .message { min-height: 66px; }
  .jr-phone-natural .jr-gu .inbox-detail { padding: 15px; }
  .jr-phone-natural .jr-gu .sender { align-items: flex-start; gap: 8px; }
  .jr-phone-natural .jr-gu .mail-body h2 { font-size: 25px; line-height: 1.12; }
  .jr-phone-natural .jr-gu .mail-body p { font-size: 13px; line-height: 1.55; }
  .jr-phone-natural .jr-gu .attach-grid { grid-template-columns: 1fr !important; }
  .jr-phone-natural .jr-gu .mail-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .jr-phone-natural .jr-gu .mail-actions button,
  .jr-phone-natural .jr-gu .mail-actions a { width: 100%; min-height: 44px; }

  /* School */
  .jr-phone-natural .jr-gu .school-grid,
  .jr-phone-natural .jr-gu .school-bottom { display: block !important; }
  .jr-phone-natural .jr-gu .school-overview,
  .jr-phone-natural .jr-gu .upload-zone { margin-bottom: 10px; }
  .jr-phone-natural .jr-gu .school-identity { grid-template-columns: 1fr !important; gap: 12px; padding: 8px 0 12px; }
  .jr-phone-natural .jr-gu .school-art img { max-width: 100% !important; width: 100%; height: auto; max-height: 178px; object-fit: cover; object-position: center; }
  .jr-phone-natural .jr-gu .school-copy h3 { font-size: 20px; }
  .jr-phone-natural .jr-gu .school-facts { grid-template-columns: 1fr 1fr; }
  .jr-phone-natural .jr-gu .fact:nth-child(2) { border-right: 0; }
  .jr-phone-natural .jr-gu .fact:nth-child(-n+2) { border-bottom: 1.5px solid var(--line); }
  .jr-phone-natural .jr-gu .upload-grid { grid-template-columns: 1fr 1fr !important; }
  .jr-phone-natural .jr-gu .upload-opt { min-height: 84px; border-bottom: 1.5px solid var(--line); }
  .jr-phone-natural .jr-gu .upload-opt:nth-child(2) { border-right: 0; }
  .jr-phone-natural .jr-gu .dropzone { padding: 20px 12px; }
  .jr-phone-natural .jr-gu .extract-body { grid-template-columns: 1fr !important; }
  .jr-phone-natural .jr-gu .extract-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .jr-phone-natural .jr-gu .processed-row { grid-template-columns: 36px minmax(0, 1fr) auto; }

  /* Library */
  .jr-phone-natural .jr-gu .library-tools { display: block !important; }
  .jr-phone-natural .jr-gu .filters {
    display: flex; overflow-x: auto; white-space: nowrap; margin-bottom: 10px; scrollbar-width: none;
  }
  .jr-phone-natural .jr-gu .filters::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-gu .filter { min-height: 44px; }
  .jr-phone-natural .jr-gu .library-tools .search { min-width: 0 !important; width: 100%; }
  .jr-phone-natural .jr-gu .library-layout { display: block !important; }
  .jr-phone-natural .jr-gu .resources { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; }
  .jr-phone-natural .jr-gu .resource { min-height: 0; margin-bottom: 0 !important; }
  .jr-phone-natural .jr-gu .resource-preview { height: 150px; }
  .jr-phone-natural .jr-gu .resource-body { padding: 13px; }
  .jr-phone-natural .jr-gu .resource-body h3 { font-size: 15px; }
  .jr-phone-natural .jr-gu .resource-body p { font-size: 11.5px; }
  /* Hers hides the library aside on a phone; this build's aside is the credit rail, so it
     stays and simply follows the grid instead of sitting beside it. */
  .jr-phone-natural .jr-gu .library-aside { margin-top: 10px; }

  /* Full Plan: swipe days sideways; today stays below. */
  .jr-phone-natural .jr-gu #page-plan .page-head > div:last-child {
    display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px;
  }
  .jr-phone-natural .jr-gu #page-plan .page-head > div:last-child button,
  .jr-phone-natural .jr-gu #page-plan .page-head > div:last-child a { min-height: 44px; }
  .jr-phone-natural .jr-gu .plan-toolbar { margin-bottom: 10px; }
  .jr-phone-natural .jr-gu .weekrange { width: 100%; justify-content: space-between; }
  .jr-phone-natural .jr-gu .weekrange strong { font-size: 13px; }
  .jr-phone-natural .jr-gu .plan-board {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-left: calc(var(--mobile-gutter) * -1);
    margin-right: calc(var(--mobile-gutter) * -1);
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
    gap: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .jr-phone-natural .jr-gu .plan-board::-webkit-scrollbar { display: none; }
  .jr-phone-natural .jr-gu .plan-day {
    flex: 0 0 calc(100vw - 48px);
    max-width: 330px;
    min-height: 250px !important;
    background: #fffdf6;
    border: 1.5px solid var(--line) !important;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: center;
  }
  .jr-phone-natural .jr-gu .plan-day.today { background: #FFF9F1; border-color: #EED8BD !important; }
  .jr-phone-natural .jr-gu .plan-head { padding: 12px; }
  .jr-phone-natural .jr-gu .plan-items { padding: 4px 11px; }
  .jr-phone-natural .jr-gu .plan-task { padding: 9px 0; }
  .jr-phone-natural .jr-gu .plan-lower { display: block !important; margin-top: 10px; }
  .jr-phone-natural .jr-gu .plan-lower > .surface { margin-bottom: 10px; }
  .jr-phone-natural .jr-gu .rule { padding: 11px 13px; }
  .jr-phone-natural .jr-gu .today-row { grid-template-columns: 24px 36px minmax(0, 1fr) auto; }

  /* Modals behave like mobile sheets. */
  .jr-phone-natural .jr-gu .overlay { align-items: flex-end; padding: 0; }
  .jr-phone-natural .jr-gu .modal,
  .jr-phone-natural .jr-gu .modal.wide,
  .jr-phone-natural .jr-gu .modal.narrow {
    width: 100%; max-width: none; max-height: 88vh; overflow: auto;
    border-radius: 20px 20px 0 0; border-bottom: 0;
  }
  .jr-phone-natural .jr-gu .modal-head { position: sticky; top: 0; background: #fffdf6; z-index: 2; padding: 16px; }
  .jr-phone-natural .jr-gu .modal-body { padding: 15px 16px calc(24px + env(safe-area-inset-bottom)); }
  .jr-phone-natural .jr-gu .modal-grid { grid-template-columns: 1fr !important; }

  /* Bigger touch targets everywhere without visual bloat (hers, raised from her 40/36 to the
     44 her own chrome already uses — this build has no bottom bar to fall back on). */
  .jr-phone-natural .jr-gu button,
  .jr-phone-natural .jr-gu .filter,
  .jr-phone-natural .jr-gu .upload-opt,
  .jr-phone-natural .jr-gu .resource,
  .jr-phone-natural .jr-gu .message,
  .jr-phone-natural .jr-gu .plan-task { touch-action: manipulation; }
  .jr-phone-natural .jr-gu button { min-height: 44px; }

  .jr-phone-natural .jr-gu .toast {
    left: 14px; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom));
    text-align: center;
  }
}

@media (max-width: 390px) {
  /* Her two (max-width:390px) rules, merged. */
  .jr-phone-natural .jr-gu .main { padding-left: 12px; padding-right: 12px; }
  .jr-phone-natural .jr-gu .home-greeting h1 { font-size: 29px; }
  .jr-phone-natural .jr-gu .hero-copy { padding: 18px 16px 16px !important; }
  .jr-phone-natural .jr-gu .hero-copy h2,
  .jr-phone-natural .jr-gu #page-home .hero-copy h2 { font-size: 25px !important; }
  .jr-phone-natural .jr-gu #page-home .hero-copy p { font-size: 13px !important; }
  .jr-phone-natural .jr-gu .hero-stat { padding: 13px 12px; }
  .jr-phone-natural .jr-gu .hero-stat strong { font-size: 19px; }
  .jr-phone-natural .jr-gu .section-head { padding: 13px; }
  .jr-phone-natural .jr-gu .task { padding: 11px 12px; }
  .jr-phone-natural .jr-gu .schedule .day { flex-basis: 136px; }
  .jr-phone-natural .jr-gu .plan-day { flex-basis: calc(100vw - 40px); }
}