/* The playful design: a primary school take on a modern learning
   dashboard. Pastel blocks, very round corners, big friendly numbers with
   progress rings, chunky icon badges and small drawings. Fredoka for
   headings (round and friendly), Nunito for reading. */

:root {
  --page:   #EEF0F3;
  --app:    #FFFFFF;
  --panel:  #F5F6F8;
  --card:   #FFFFFF;
  --line:   #E8EAEE;

  --ink:      #1F1B3D;
  --ink-soft: #474A57;
  --muted:    #878B96;

  --mint:   #DDF4E6;  --mint-2:   #2DB873;
  --peach:  #FFEBD9;  --peach-2:  #F2832F;
  --lilac:  #ECE3FC;  --lilac-2:  #8E5CF5;
  --sky:    #DDEEFC;  --sky-2:    #2F86EC;
  --butter: #FFF4C8;  --butter-2: #E9B310;
  --pink:   #FCE2EF;  --pink-2:   #E8508F;

  --dark:   #1F1B3D;
  --on-dark:#FFFFFF;

  --r-xl: 32px; --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --shadow: 0 2px 6px rgba(31, 27, 61, .05), 0 18px 40px rgba(31, 27, 61, .07);
  --shadow-sm: 0 1px 3px rgba(31, 27, 61, .07);
  --gap: 18px;
  /* Fonts as tokens, so another look can reuse this whole layout. */
  --font-head: Fredoka, Nunito, system-ui, sans-serif;
  --font-body: Nunito, system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

/* Night: deep plum rather than black, pastels become rich tints. Written
   twice: once for "follow the device", once for a chosen night mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0F1114; --app: #16181C; --panel: #1C1F24; --card: #24272E; --line: #30343C;
    --ink: #F3F4F6; --ink-soft: #C9CCD3; --muted: #979BA6;
    --mint: #163A2C; --peach: #3E2A1A; --lilac: #2D2454; --sky: #162E4C; --butter: #3A3116; --pink: #3F1E35;
    --dark: #F3F1FF; --on-dark: #18152F;
    --shadow: 0 2px 6px rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.3); --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0F1114; --app: #16181C; --panel: #1C1F24; --card: #24272E; --line: #30343C;
  --ink: #F3F4F6; --ink-soft: #C9CCD3; --muted: #979BA6;
  --mint: #163A2C; --peach: #3E2A1A; --lilac: #2D2454; --sky: #162E4C; --butter: #3A3116; --pink: #3F1E35;
  --dark: #F3F1FF; --on-dark: #18152F;
  --shadow: 0 2px 6px rgba(0,0,0,.3), 0 18px 40px rgba(0,0,0,.3); --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .fred { font-family: var(--font-head); font-weight: 500; letter-spacing: -.01em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.icon { display: block; flex: none; }
.art { display: block; flex: none; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------- frame */

.pz { padding: 28px; }
.app {
  max-width: 1400px; margin: 0 auto;
  background: var(--app);
  border-radius: 40px;
  padding: 18px 26px 26px;
  box-shadow: var(--shadow);
}
.panel { background: var(--panel); border-radius: var(--r-xl); padding: 24px; }

/* ---------------------------------------------------------------- nav */

.nav { display: flex; align-items: center; gap: 24px; height: 72px; padding: 0 6px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--butter);
}
.brand__text b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1; }
.brand__text em { font-style: normal; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.nav__links { display: flex; gap: 4px; margin-left: 16px; }
.nav__links a {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; color: var(--ink-soft);
}
.nav__links a:hover { background: var(--panel); color: var(--ink); }
.nav__links a:first-child { background: var(--lilac); color: var(--ink); }
.nav__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--panel); color: var(--ink-soft);
  font-weight: 800; font-size: 14px;
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill--mint { background: var(--mint); color: var(--ink); } .pill--mint i { background: var(--mint-2); }
.pill--butter { background: var(--butter); color: var(--ink); } .pill--butter i { background: var(--butter-2); }

.iconbtn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); cursor: pointer;
}
.iconbtn:hover { border-color: var(--muted); }
.themetoggle { padding: 0; font: inherit; }
.themetoggle__sun { display: none; }
.themetoggle__moon { display: grid; }
:root[data-theme="dark"] .themetoggle__sun { display: grid; }
:root[data-theme="dark"] .themetoggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle__sun { display: grid; }
  :root:not([data-theme="light"]) .themetoggle__moon { display: none; }
}

/* -------------------------------------------------------------- hello */

.hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 8px 22px; }
.hello__date { color: var(--muted); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.hello h1 { font-size: 46px; font-weight: 600; line-height: 1.05; }

/* Class picker: a tile per class with its own drawing. */
.classes { display: flex; gap: 10px; }
.classtile {
  width: 96px; padding: 12px 8px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-radius: 24px;
  font-weight: 800; font-size: 14.5px; color: var(--ink-soft);
  border: 2.5px solid transparent;
  transition: transform .15s ease;
}
.classtile:hover { transform: translateY(-2px); }
.classtile--0 { background: var(--pink); }
.classtile--1 { background: var(--peach); }
.classtile--2 { background: var(--mint); }
.classtile--3 { background: var(--sky); }
.classtile.is-on { border-color: var(--ink); color: var(--ink); box-shadow: 0 8px 18px rgba(31,27,61,.12); }

/* --------------------------------------------------------------- grid */

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
/* The tiles (star of the week, countdown, teaching team) share the row
   equally, however many there are. */
.grid--stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.grid--stats > * { grid-column: auto; }
.grid--now > * { grid-column: span 6; }
.grid--four > * { grid-column: span 3; }
.grid--work > :first-child { grid-column: span 7; }
.grid--work > :last-child:not(:first-child) { grid-column: span 5; }
.grid--work > :only-child { grid-column: span 12; }
.grid--learn > :first-child { grid-column: span 8; }
.grid--learn > :last-child:not(:first-child) { grid-column: span 4; }
.grid--diary > * { grid-column: span 3; }
.grid--info > :first-child { grid-column: span 7; }
.grid--info > :last-child { grid-column: span 5; }
.grid > * { min-width: 0; }
.grid--info { align-items: start; }

/* ----------------------------------------------------- section heading */

.sec { margin-top: 46px; }
.sec__title { font-size: 32px; font-weight: 500; line-height: 1.1; margin: 0 4px 18px; }
.sec__title span { display: block; color: var(--muted); }
.sub { font-size: 20px; margin: 0 4px 12px; }

/* ------------------------------------------------------------- stats */

.stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 228px;
  border-radius: var(--r-lg);
  padding: 20px 20px 18px;
  isolation: isolate;
}
.stat--mint  { background: var(--mint); }
.stat--peach { background: var(--peach); }
.stat--lilac { background: var(--lilac); }
.stat__deco { position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px; z-index: -1; }
/* The shapes take the tile's strong colour, faintly, so they work by day
   and by night. */
.stat__deco { opacity: .16; }
.stat--mint .stat__deco  { fill: var(--mint-2); }
.stat--peach .stat__deco { fill: var(--peach-2); }
.stat--lilac .stat__deco { fill: var(--lilac-2); }
.stat__deco--b { right: -30px; top: -50px; bottom: auto; }
.stat__num { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: 58px; line-height: 1; }
.stat__label { font-weight: 800; font-size: 16px; margin-top: 2px; }
.stat__note { color: var(--ink-soft); font-size: 14px; font-weight: 600; margin-top: 4px; line-height: 1.35; }

.ring { position: relative; width: 58px; height: 58px; display: grid; place-items: center; }
/* Only the ring's own circle: the icon in the middle is an svg too, and
   catching it here squashed it to nothing. */
.ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: var(--card); stroke: rgba(255,255,255,.6); stroke-width: 4.5; }
.ring__bar { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.stat--mint .ring__bar  { stroke: var(--mint-2); }
.stat--peach .ring__bar { stroke: var(--peach-2); }
.stat--lilac .ring__bar { stroke: var(--lilac-2); }
.ring__in { position: relative; color: var(--ink); }

/* Teaching team */
.teamcard { background: var(--sky); border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; }
.teamcard h3 { font-size: 20px; margin-bottom: 12px; }
.teamcard ul { display: grid; gap: 10px; margin-top: auto; }
.teamcard li { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 18px; padding: 10px 12px; }
.teamcard img, .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar { display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 19px; color: #fff; }
.avatar--0 { background: linear-gradient(135deg, #FFB067, #F57C2B); }
.avatar--1 { background: linear-gradient(135deg, #B28BFF, #8A5CF6); }
.avatar--2 { background: linear-gradient(135deg, #5ED79A, #22B07A); }
.avatar--3 { background: linear-gradient(135deg, #FF8DC0, #EC4C93); }
.teamcard b { display: block; font-weight: 800; font-size: 15px; }
.teamcard em { font-style: normal; color: var(--muted); font-size: 14px; font-weight: 600; }

/* ------------------------------------------------------------- badges */

/* Chunky icon badges: a gradient circle with a soft highlight and shadow,
   so they read as little objects rather than flat dots. */
.badge {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 6px 14px rgba(31,27,61,.14);
}
.badge .icon { stroke-width: 2.2; }
.badge--sm { width: 42px; height: 42px; border-radius: 14px; }
.badge--round { width: 60px; height: 60px; border-radius: 50%; }
.badge--sky    { background: linear-gradient(145deg, #6BB9FF, #2F7EEA); }
.badge--lilac  { background: linear-gradient(145deg, #BC9BFF, #8A5CF6); }
.badge--mint   { background: linear-gradient(145deg, #63DB9F, #1FAE76); }
.badge--peach  { background: linear-gradient(145deg, #FFB46E, #F2782A); }
.badge--pink   { background: linear-gradient(145deg, #FF96C6, #E84C91); }
.badge--butter { background: linear-gradient(145deg, #FFD95A, #EDAE0A); }
.badge--white  { background: #fff; color: var(--pink-2); }

/* -------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-weight: 800; font-size: 13.5px; white-space: nowrap;
}
.chip--white  { background: var(--card); color: var(--ink); }
.chip--lilac  { background: var(--lilac); color: var(--ink); }
.chip--butter { background: var(--butter); color: var(--ink); }
.chip--dark   { background: var(--dark); color: var(--on-dark); }
.tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 8px;
  background: var(--lilac); color: var(--lilac-2);
  font-family: var(--font-body); font-size: 12px; font-weight: 800; vertical-align: 2px;
}

/* ---------------------------------------------------------- right now */

.daycard {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: var(--r-lg);
  padding: 22px 24px 24px;
  min-height: 210px;
  box-shadow: var(--shadow-sm);
}
.daycard h3 { font-size: 28px; line-height: 1.2; margin-top: 16px; }
.daycard p { margin-top: 8px; font-weight: 600; }
.daypill {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: var(--panel); font-weight: 800; font-size: 14px;
}
.daypill--dark { background: var(--dark); color: var(--on-dark); margin-right: 6px; }
/* The day and anything happening that day: spaced apart when they wrap
   onto two lines, rather than stacked touching. */
.daycard__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
.daycard__tags .daypill { margin-right: 0; }
.daycard__tags .chip { max-width: 100%; white-space: normal; line-height: 1.3; }
.daycard--next {
  background: linear-gradient(135deg, #EDE4FF 0%, #FBE1EF 100%);
  padding-right: 170px;
  color: #1F1B3D;
}
.daycard--next .daypill--dark { background: #1F1B3D; color: #fff; }
.daycard--next .chip--white { background: #fff; color: #1F1B3D; }
.daycard__art { position: absolute; right: 18px; bottom: 10px; }
/* Today: a soft green wash so it reads as a card on the white page, the
   quieter partner to the lilac "pack the bag" card beside it. */
.daycard--today {
  background: linear-gradient(135deg, #E4F6EC 0%, #E6F1FD 100%);
  color: #17324A;
}
.daycard--today .daypill { background: #fff; color: #17324A; }
.daycard--today .daypill::before {
  content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--mint-2); box-shadow: 0 0 0 3px rgba(45, 184, 115, .18);
}
.daycard--today .muted { color: #4A6378; }
:root[data-theme="dark"] .daycard--today { background: linear-gradient(135deg, #15372A, #16304C); color: #EAF6F0; }
:root[data-theme="dark"] .daycard--today .daypill { background: rgba(255,255,255,.12); color: #fff; }
:root[data-theme="dark"] .daycard--today .muted { color: #A9C2BA; }
:root[data-theme="dark"] .daycard--next { background: linear-gradient(135deg, #3A2E6E, #4A2447); color: #F3F1FF; }
:root[data-theme="dark"] .daycard--next .chip--white { background: rgba(255,255,255,.14); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .daycard--today { background: linear-gradient(135deg, #15372A, #16304C); color: #EAF6F0; }
  :root:not([data-theme="light"]) .daycard--today .daypill { background: rgba(255,255,255,.12); color: #fff; }
  :root:not([data-theme="light"]) .daycard--today .muted { color: #A9C2BA; }
  :root:not([data-theme="light"]) .daycard--next { background: linear-gradient(135deg, #3A2E6E, #4A2447); color: #F3F1FF; }
  :root:not([data-theme="light"]) .daycard--next .chip--white { background: rgba(255,255,255,.14); color: #fff; }
}

/* ------------------------------------------------------------- at home */

.cat { border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; min-height: 196px; }
.cat--sky { background: var(--sky); } .cat--lilac { background: var(--lilac); }
.cat--mint { background: var(--mint); } .cat--peach { background: var(--peach); }
.cat .badge { margin-bottom: 10px; }
.cat__label { font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.cat__value { font-family: var(--font-head); font-weight: 500; font-size: 25px; line-height: 1.15; }
.cat__note { color: var(--ink-soft); font-size: 14.5px; font-weight: 600; }

/* ---------------------------------------------------------------- clubs */

/* A week across, like a timetable: one column per day, today ringed. */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.week__day { background: var(--card); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); }
.week__name {
  align-self: center;
  width: 54px; height: 54px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--panel); font-family: var(--font-head); font-weight: 600; font-size: 17px;
}
.week__day.is-today .week__name { background: var(--dark); color: var(--on-dark); }
.week__club { border-radius: 16px; padding: 10px 12px; }
.week__club--0 { background: var(--lilac); } .week__club--1 { background: var(--mint); } .week__club--2 { background: var(--peach); }
.week__club b { display: block; font-weight: 800; font-size: 14px; line-height: 1.25; }
.week__club em { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; }
.week__club small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.week__none {
  flex: 1; display: grid; place-items: center; min-height: 70px;
  border: 2px dashed var(--line); border-radius: 16px;
  color: var(--muted); font-size: 14px; font-weight: 700;
}

/* ---------------------------------------------------------------- boxes */

.box { background: var(--card); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.box__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.box__title { font-size: 20px; margin: 4px 6px 10px; }
.box--soft { display: flex; align-items: center; gap: 16px; }
.box--soft p { color: var(--ink-soft); font-weight: 600; }

.rows { display: grid; gap: 4px; }
.row { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: var(--r-md); }
.row:hover { background: var(--panel); }
.row__text { flex: 1; min-width: 0; }
.row__text b { display: block; font-weight: 800; font-size: 15px; line-height: 1.3; }
.row__text em { display: block; font-style: normal; color: var(--muted); font-size: 14px; font-weight: 600; }
.row__go { color: var(--muted); }
.rows--tight .row { padding: 8px; }

.older { margin-top: 10px; }
.older summary, .morepill {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--panel); font-weight: 800; font-size: 14px;
}
.older summary::-webkit-details-marker { display: none; }
.older summary span, .morepill span { background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 0 8px; font-size: 13px; }
.older__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.oldletter { display: flex; flex-direction: column; gap: 8px; height: 100%; border-radius: var(--r-md); padding: 16px; min-height: 140px; }
.oldletter--0 { background: var(--lilac); } .oldletter--1 { background: var(--sky); }
.oldletter--2 { background: var(--peach); } .oldletter--3 { background: var(--mint); }
.oldletter__type { align-self: flex-start; background: var(--card); border-radius: 8px; padding: 2px 8px; font-size: 12px; font-weight: 800; }
.oldletter b { font-family: var(--font-head); font-weight: 500; font-size: 18px; line-height: 1.2; }
.oldletter em { margin-top: auto; font-style: normal; font-size: 13.5px; color: var(--ink-soft); font-weight: 700; }

/* ---------------------------------------------------------------- dates */

.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--panel); }
.seg a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  font-weight: 800; font-size: 14px; color: var(--ink-soft);
  touch-action: manipulation;
}
.seg a.is-active { background: var(--dark); color: var(--on-dark); }

.dlist { display: grid; gap: 6px; }
.drow { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: var(--r-md); }
.drow.is-next { background: var(--peach); padding: 12px; }
.dtile {
  width: 56px; height: 60px; flex: none; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.dtile em { font-style: normal; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.dtile b { font-family: var(--font-head); font-weight: 600; font-size: 24px; margin-top: 3px; }
.dtile--0 { background: var(--sky); } .dtile--1 { background: var(--lilac); } .dtile--2 { background: var(--mint); }
.dtile--3 { background: var(--butter); } .dtile--4 { background: var(--pink); }
.drow.is-next .dtile { background: var(--card); }
.drow__text { flex: 1; min-width: 0; }
.drow__text b { display: block; font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.drow__text em { display: block; font-style: normal; color: var(--muted); font-size: 14px; font-weight: 600; }
.drow.is-next .drow__text b { font-family: var(--font-head); font-weight: 500; font-size: 19px; }

.calbar { display: flex; align-items: center; gap: 12px; }
.calbar b { font-family: var(--font-head); font-weight: 500; font-size: 20px; min-width: 170px; text-align: center; }
.calbar__step {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--panel); color: var(--ink); font-size: 16px; cursor: pointer;
}
.calbar__step:disabled { opacity: .35; cursor: default; }
.calbar__hint { color: var(--muted); font-size: 14px; font-weight: 600; margin: 6px 0 12px; }
[data-months] { touch-action: pan-y; }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mgrid__wd { text-align: center; color: var(--muted); font-size: 13px; font-weight: 800; }
.mgrid__day { min-height: 88px; border-radius: 14px; background: var(--panel); padding: 7px; font-size: 12px; overflow: hidden; }
.mgrid__day b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 15px; }
.mgrid__day span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; color: var(--peach-2); line-height: 1.25; margin-top: 2px; }
.mgrid__day.has-events { background: var(--peach); }
.mgrid__day.is-today { outline: 2.5px solid var(--dark); outline-offset: -2.5px; }
.mgrid__day.is-weekend { opacity: .55; }
.mgrid__day.is-blank { background: transparent; }
.slide-from-right { animation: pz-in-r .22s ease-out; }
.slide-from-left  { animation: pz-in-l .22s ease-out; }
@keyframes pz-in-r { from { opacity: 0; transform: translateX(28px); } }
@keyframes pz-in-l { from { opacity: 0; transform: translateX(-28px); } }

.addcal { margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--line); }
.addcal p { margin-top: 10px; font-size: 14px; font-weight: 600; }
.addcal p a { color: var(--sky-2); text-decoration: underline; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--dark); color: var(--on-dark);
  font-weight: 800; font-size: 15px;
}

/* ------------------------------------------------------ this week's work */

.work { border-radius: var(--r-lg); padding: 20px 22px 22px; }
.work--butter { background: var(--butter); } .work--sky { background: var(--sky); }
.work__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.work__head h3 { font-size: 24px; flex: 1; }
.wordlist { margin-top: 18px; }
.wordlist > p { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; margin-bottom: 10px; }
.words { display: flex; flex-wrap: wrap; gap: 8px; }
.words li {
  background: var(--card); border-radius: 14px; padding: 9px 15px;
  font-family: var(--font-head); font-weight: 500; font-size: 17px;
  box-shadow: var(--shadow-sm);
}
.work__foot { margin-top: 16px; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; }

/* ------------------------------------------------------------ learning */

.topic {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 18px;
  background: var(--pink); border-radius: var(--r-lg); padding: 20px;
}
.topic__deco { position: absolute; left: -60px; bottom: -70px; width: 260px; z-index: -1; fill: var(--pink-2); opacity: .1; }
.topic__map {
  position: relative; align-self: start; display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
  /* Shown if the map picture cannot load: a soft pattern, not a broken image. */
  background: radial-gradient(circle at 30% 30%, var(--butter) 0 18%, transparent 19%),
              radial-gradient(circle at 75% 60%, var(--sky) 0 22%, transparent 23%),
              var(--card);
}
.topic__map img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.topic__map span {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: 13.5px;
}
.topic__list { display: grid; gap: 8px; align-content: start; }
.topic__list details { background: var(--card); border-radius: 16px; padding: 12px 14px; }
.topic__list summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14.5px; }
.topic__list summary::-webkit-details-marker { display: none; }
.topic__list summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 18px; font-weight: 600; }
.topic__list details[open] summary::after { content: "–"; }
.topic__list p { margin-top: 8px; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.dotty { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.dotty--0 { background: var(--sky-2); } .dotty--1 { background: var(--pink-2); } .dotty--2 { background: var(--mint-2); }
.dotty--3 { background: var(--peach-2); } .dotty--4 { background: var(--lilac-2); }
.helpcard { background: var(--card); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.helpcard h3 { font-size: 20px; margin: 4px 6px 10px; }

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

/* Each book on its own coloured card, cover standing up with a shadow. */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.book { border-radius: var(--r-lg); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.book--0 { background: var(--butter); } .book--1 { background: var(--sky); } .book--2 { background: var(--pink); }
.book--3 { background: var(--mint); } .book--4 { background: var(--lilac); }
.book__cover { position: relative; display: block; aspect-ratio: 1 / 1; }
.book__cover img {
  position: absolute; inset: 4% 14%; width: 72%; height: 92%;
  object-fit: contain; filter: drop-shadow(0 10px 12px rgba(31,27,61,.28));
}
.book__fake {
  display: none; position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  height: 92%; aspect-ratio: 2 / 3; border-radius: 6px;
  flex-direction: column; justify-content: space-between; padding: 12% 10%;
  background: var(--card); color: var(--ink);
  box-shadow: 0 10px 18px rgba(31,27,61,.2);
  font-family: var(--font-head); font-weight: 500; font-size: 13px; line-height: 1.2; overflow: hidden;
}
.book__fake span { overflow-wrap: anywhere; hyphens: auto; }
.book__cover.is-missing img { display: none; }
.book__cover.is-missing .book__fake { display: flex; }
.book b { font-family: var(--font-head); font-weight: 500; font-size: 16px; line-height: 1.25; }

/* ---------------------------------------------------------------- diary */

.starcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 340px; border-radius: var(--r-lg); padding: 22px;
  background: linear-gradient(160deg, #FFE48A, #FFC53D 70%);
  color: #3A2706;
}
.starcard__deco { position: absolute; right: -70px; top: -70px; width: 240px; fill: rgba(255,255,255,.35); z-index: -1; }
.starcard__art { margin: 6px 0 auto; }
.starcard__kicker { font-weight: 800; font-size: 14px; opacity: .75; margin-top: 12px; }
.starcard h3 { font-size: 36px; font-weight: 600; line-height: 1.05; }
.starcard p:last-child { margin-top: 8px; font-weight: 700; font-size: 14px; }

.post {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 340px; border-radius: var(--r-lg); padding: 18px 20px 20px;
  color: #fff; background: #3A2E6E;
}
.post > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,16,40,.55), rgba(20,16,40,0) 40%),
              linear-gradient(to top, rgba(20,16,40,.7), rgba(20,16,40,0) 45%);
}
.post__top, .post__body { position: relative; z-index: 1; }
.post .chip--white { background: rgba(255,255,255,.92); color: #1F1B3D; }
.post h3 { font-size: 24px; line-height: 1.15; margin-top: 12px; }
.post__body { font-size: 14px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post--text { color: #1F1B3D; }
.post--0 { background: linear-gradient(160deg, #E5EDFF, #CBDAFF); }
.post--1 { background: linear-gradient(160deg, #E2F6EA, #C5EBD5); }
.post--2 { background: linear-gradient(160deg, #F2E6FF, #DECBFA); }

/* -------------------------------------------------------------- dinners */

.menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.menu__day { background: var(--card); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); }
.menu__day.is-today { background: var(--butter); }
.menu__name { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.menu__when {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-style: normal; font-size: 12px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
}
.menu__day p { font-weight: 700; font-size: 14px; }
.menu__day p + p { color: var(--ink-soft); font-weight: 600; font-size: 14px; }

/* ---------------------------------------------------------- key info */

/* Who to ask: round badges with a label, like a row of achievements. */
.asks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.ask {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: var(--card); border-radius: var(--r-lg); padding: 18px 12px; box-shadow: var(--shadow-sm);
}
.ask b { font-weight: 800; font-size: 14.5px; line-height: 1.25; }
.ask em { font-style: normal; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
a.ask:hover { transform: translateY(-2px); }
.stack { display: grid; gap: var(--gap); align-content: start; }
.ptfa {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-lg); padding: 20px;
  background: linear-gradient(150deg, #FFE2EF, #FFF1C9);
  color: #1F1B3D;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.ptfa__deco { position: absolute; right: -60px; top: -60px; width: 200px; fill: rgba(255,255,255,.55); z-index: -1; }
.ptfa h3 { font-size: 24px; }
.ptfa p { font-weight: 600; font-size: 14px; color: #4B4766; }
.ptfa .btn { background: #1F1B3D; color: #fff; margin-top: 4px; }

.foot { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding: 0 6px; color: var(--muted); font-weight: 700; font-size: 14px; }
.foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }

/* Phone tab bar: hidden on bigger screens. */
.tabbar { display: none; }

/* ============================================================== tablet */

@media (max-width: 1100px) {
  .nav__links { display: none; }
  .grid--stats { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row; }
  .grid--stats > * { grid-column: span 6; }
  .grid--stats > .teamcard { grid-column: span 12; }
  .grid--four > * { grid-column: span 6; }
  .grid--diary > * { grid-column: span 6; }
  .grid--work > *, .grid--learn > *, .grid--info > * { grid-column: span 12 !important; }
  .asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================== phone */

@media (max-width: 760px) {
  /* On a computer the cards sit on a grey panel inside the white page. A
     phone has no room for both, so the whole screen takes the soft grey
     and every card stands out white against it, one section after another,
     instead of one long white page. */
  body { font-size: 16px; background: var(--page); }
  .pz { padding: 0; }
  .app { border-radius: 0; padding: 6px 16px 110px; box-shadow: none; background: var(--page); }
  .panel { background: none; padding: 0; }
  .trial { background: var(--card); box-shadow: var(--shadow-sm); }
  .trial__looks { background: var(--panel); }
  .nav { height: 64px; padding: 0; gap: 10px; }
  .nav__staff { display: none; }
  .pill { height: 34px; font-size: 14px; }
  .hello { flex-direction: column; align-items: stretch; padding: 8px 0 18px; gap: 16px; }
  .hello h1 { font-size: 40px; }
  .hello__date { font-size: 14.5px; }
  .classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .classtile { width: auto; border-radius: 20px; font-size: 14.5px; }

  .grid { gap: 12px; }
  .grid--stats > * { grid-column: span 6; }
  .grid--stats > .teamcard { grid-column: span 12; }
  /* The third tile runs full width as a slim bar, ring on the left. */
  .grid--stats > .stat--lilac {
    grid-column: span 12; min-height: 0;
    display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 14px;
  }
  .stat--lilac .stat__num { margin: 0; font-size: 40px; }
  .stat--lilac .stat__label { margin: 0; }
  .stat--lilac .stat__note { grid-column: 3; margin: 0; }
  .stat--lilac .stat__label { grid-column: 3; grid-row: 1; align-self: end; }
  .stat--lilac .stat__note { grid-row: 2; align-self: start; }
  .stat--lilac .ring { grid-row: 1 / 3; }
  .stat--lilac .stat__num { grid-row: 1 / 3; grid-column: 2; }
  .stat { min-height: 196px; padding: 16px; }
  .stat__num { font-size: 50px; }
  .ring { width: 52px; height: 52px; }
  .teamcard ul { grid-template-columns: 1fr 1fr; }
  .teamcard li { flex-direction: column; align-items: flex-start; }

  .grid--now > *, .grid--work > *, .grid--learn > *, .grid--info > * { grid-column: span 12 !important; }
  .daycard { min-height: 0; }
  .daycard h3 { font-size: 25px; }
  .drow.is-next { flex-wrap: wrap; row-gap: 8px; }
  .drow.is-next .drow__text { flex: 1 1 calc(100% - 70px); }
  .drow.is-next .chip { margin-left: 70px; }
  .daycard--next { padding-right: 24px; padding-top: 24px; }
  .daycard__art { position: static; float: right; margin: -6px -8px 0 8px; }
  .daycard__art .art { width: 96px; height: 96px; }

  .sec { margin-top: 44px; }
  .sec__title { font-size: 30px; margin: 0 2px 16px; }

  .topic { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .work { padding: 18px; }
  .words li { font-size: 17px; }

  .dtile { width: 54px; height: 58px; }
  .mgrid__day { min-height: 54px; padding: 4px; border-radius: 10px; }
  .mgrid__day span { -webkit-line-clamp: 2; font-size: 9.5px; }
  .calbar { justify-content: space-between; }
  .calbar b { min-width: 0; }
  .calbar__hint { text-align: center; }
  .btn { width: 100%; }

  .ask { padding: 16px 10px; }

  /* Swipe rows: one line of cards that moves sideways, the next one
     peeking in from the edge so it is clear there is more. */
  .swipe {
    display: flex !important; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: -8px -16px -16px; padding: 8px 16px 16px; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 auto; scroll-snap-align: start; }
  .box .swipe { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
  .grid--four.swipe > * { width: 64%; }
  .week.swipe > * { width: 46%; }
  .shelf.swipe > * { width: 46%; }
  .grid--diary.swipe > * { width: 82%; }
  .menu.swipe > * { width: 46%; }
  .asks.swipe > * { width: 42%; }
  .older__list.swipe > * { width: 62%; }
  /* A swipe row pulls the next thing up to hide the room it keeps for
     shadows. Where something follows it, or it follows a button, give
     the space back so nothing touches. */
  .older__list.swipe { margin-top: 4px; }
  .asks.swipe { margin-bottom: 0; }

  /* The tab bar, floating above the bottom of the screen. */
  .tabbar {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
    display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 7px; border-radius: 28px;
    background: color-mix(in srgb, var(--card) 86%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(31,27,61,.18); border: 1px solid var(--line);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 0 6px; border-radius: 22px;
    color: var(--ink-soft); font-weight: 800; font-size: 12.5px;
  }
  .tabbar a.is-on { background: var(--lilac); color: var(--ink); }
  /* With Messages (a class with messages with parents on): six tabs, a
     little tighter. */
  .tabbar--six { grid-template-columns: repeat(6, 1fr); padding: 6px; }
  .tabbar--six a { font-size: 11px; gap: 2px; padding-inline: 0; }
}
/* How many messages from the class team are unread, on the Messages tab
   and in the menu on a computer: the page's own colour, never red. */
.tabbar__icon { position: relative; display: block; }
.tabbar__count, .nav__count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--acc, var(--lilac-2)); color: #fff;
  font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}
.tabbar__count { position: absolute; top: -5px; left: 13px; }
.nav__count { display: inline-block; margin-left: 2px; }
.fresh--msg .fresh__icon { background: var(--sky, var(--panel)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide-from-right, .slide-from-left { animation: none; }
}

/* ======================================================= new look trial */

.trial {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 8px 8px 8px 18px;
  border-radius: 22px;
  background: var(--panel);
}
.trial__icon { color: var(--lilac-2); }
.trial__text { flex: 1; font-weight: 700; font-size: 14.5px; }
.trial__looks { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); }
.trial__looks a { padding: 8px 15px; border-radius: 999px; font-weight: 800; font-size: 14.5px; color: var(--ink-soft); }
.trial__looks a.is-on { background: var(--dark); color: var(--on-dark); }
@media (max-width: 760px) {
  .trial { margin: 0 0 14px; }
  .trial__text { font-size: 15px; }
  .trial__looks { width: 100%; }
  .trial__looks a { flex: 1; text-align: center; }
}

/* ======================================================= learning map card

   A card for the term instead of the map squashed into a thumbnail: the
   season's colours, a large soft silhouette in one tone (like the
   starbursts on the tiles), and a button that opens the real map. */
.topic { background: var(--card); box-shadow: var(--shadow-sm); grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
.topic--nomap { grid-template-columns: minmax(0, 1fr); }
.topic__list details { background: var(--panel); }

.mapcard {
  --scene: #E07A2E; --mapink: #4F2A10;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 320px; align-self: start;
  border-radius: var(--r-lg);
  padding: 20px;
  color: var(--mapink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mapcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mapcard--autumn { background: linear-gradient(160deg, #FFF4E8 0%, #FFDCBC 100%); --scene: #E2752A; --mapink: #4F2A10; }
.mapcard--spring { background: linear-gradient(160deg, #F1FBEB 0%, #D3EFCF 100%); --scene: #3C9A55; --mapink: #1C4426; }
.mapcard--summer { background: linear-gradient(160deg, #FFF9DE 0%, #FFE59A 100%); --scene: #E09A0C; --mapink: #4E3A05; }

.mapcard__scene {
  position: absolute; right: -14%; bottom: -4%; z-index: -1;
  width: 96%; height: auto;
  color: var(--scene); opacity: .26;
}
.mapcard__top { display: grid; gap: 2px; }
.mapcard__kicker { font-weight: 800; font-size: 14px; opacity: .75; }
.mapcard__title { font-family: var(--font-head); font-weight: 600; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; }
.mapcard__topic { margin-top: 4px; font-weight: 700; font-size: 14.5px; opacity: .85; }
.mapcard__go {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--mapink); color: #fff;
  font-weight: 800; font-size: 14px;
}

:root[data-theme="dark"] .mapcard--autumn { background: linear-gradient(160deg, #3A2618, #2A1B10); --scene: #F0904A; --mapink: #FFE4CC; }
:root[data-theme="dark"] .mapcard--spring { background: linear-gradient(160deg, #1D3324, #142519); --scene: #5CC57A; --mapink: #DDF6E2; }
:root[data-theme="dark"] .mapcard--summer { background: linear-gradient(160deg, #3A3114, #2A230C); --scene: #F2B634; --mapink: #FFF1C7; }
:root[data-theme="dark"] .mapcard__go { color: #16181C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mapcard--autumn { background: linear-gradient(160deg, #3A2618, #2A1B10); --scene: #F0904A; --mapink: #FFE4CC; }
  :root:not([data-theme="light"]) .mapcard--spring { background: linear-gradient(160deg, #1D3324, #142519); --scene: #5CC57A; --mapink: #DDF6E2; }
  :root:not([data-theme="light"]) .mapcard--summer { background: linear-gradient(160deg, #3A3114, #2A230C); --scene: #F2B634; --mapink: #FFF1C7; }
  :root:not([data-theme="light"]) .mapcard__go { color: #16181C; }
}

/* ------------------------------------------------------------- viewer */

.viewer {
  width: min(1100px, 94vw); height: min(90vh, 920px);
  max-width: none; max-height: none;
  padding: 0; border: 0; border-radius: 22px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
}
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: rgba(12, 14, 18, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.viewer__bar { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.viewer__title { flex: 1; min-width: 0; font-family: var(--font-head); font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewer__open { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--panel); font-weight: 700; font-size: 14.5px; }
.viewer__close {
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--panel); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
}
.viewer__body { flex: 1; overflow: auto; background: var(--panel); }
.viewer__body img { display: block; width: 100%; height: auto; }
.viewer__body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.viewer__fail { padding: 40px 24px; text-align: center; color: var(--muted); font-weight: 600; }

@media (max-width: 760px) {
  /* One column on phones: the map card on top, the "As ... we are"
     sections underneath at full width. (This has to come after the two
     column rule above, or that one wins.) */
  .topic { grid-template-columns: minmax(0, 1fr); }
  .mapcard { min-height: 220px; }
  .mapcard__title { font-size: 28px; }
  .mapcard__scene { width: 78%; right: -8%; }
  .viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .viewer__open span { display: none; }
}
.mapcard--spring .mapcard__scene { right: -3%; }


/* ============================================================== term bar

   Across the full width, above the tiles: the status, weeks to go, when
   term ends, and a block for every week. Done weeks fill in the season's
   colour, this week is ringed, half term is hatched. */
.termbar {
  --done: var(--butter-2); --doneSoft: var(--butter);
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 26px 18px;
  margin-bottom: var(--gap);
}
.termbar--autumn { --done: #F2A72E; --doneSoft: var(--butter); }
.termbar--spring { --done: var(--mint-2); --doneSoft: var(--mint); }
.termbar--summer { --done: var(--sky-2); --doneSoft: var(--sky); }

.termbar__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.termbar__kicker { color: var(--muted); font-weight: 800; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; }
.termbar__line { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.termbar__status { font-family: var(--font-head); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -.02em; }
.termbar__back { color: var(--ink-soft); font-weight: 700; font-size: 19px; }
.termbar__side { display: grid; justify-items: end; gap: 8px; }
.termbar__chip {
  padding: 8px 16px; border-radius: 999px;
  background: var(--doneSoft); color: var(--ink);
  font-weight: 800; font-size: 15px;
}
.termbar__ends { color: var(--ink-soft); font-weight: 600; font-size: 15px; }

.termweeks {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 8px; margin-top: 22px;
}
.termweeks__cell { height: 46px; border-radius: 12px; background: var(--panel); }
.termweeks__cell--done { background: var(--done); }
.termweeks__cell--current { background: var(--done); box-shadow: 0 0 0 3px var(--card), 0 0 0 5.5px var(--ink); }
.termweeks__cell--half-term {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--done) 55%, transparent) 0 5px, transparent 5px 11px),
    var(--doneSoft);
}
.termweeks--labels { margin-top: 10px; }
.termweeks__label {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--muted); font-weight: 700; font-size: 14px;
}
.termweeks__label.is-break { color: var(--done); filter: brightness(.8); }
.termweeks__label .short { display: none; }

/* Star of the week, leading the tiles. */
.stat--star { background: var(--butter); }
.stat--star .stat__deco { fill: var(--butter-2); opacity: .2; }
.stat__badge { display: block; }
.stat__name {
  margin-top: auto;
  font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stat--star .stat__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stat--empty .stat__name { color: var(--muted); }

@media (max-width: 760px) {
  .termbar { padding: 18px 16px 14px; }
  .termbar__status { font-size: 36px; }
  .termbar__back { font-size: 16px; }
  .termbar__side { justify-items: start; grid-auto-flow: column; align-items: center; gap: 12px; }
  .termbar__chip { font-size: 14px; padding: 7px 14px; }
  .termbar__ends { font-size: 14px; }
  .termweeks { gap: 4px; margin-top: 18px; }
  .termweeks__cell { height: 30px; border-radius: 7px; }
  .termweeks__cell--current { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
  .termweeks__label { font-size: 12.5px; }
  .termweeks__label .long { display: none; }
  .termweeks__label .short { display: inline; }
  .stat__name { font-size: 26px; }
  .stat__badge .art { width: 50px; height: 50px; }
}

/* ============================================= day at a glance (phone) */

.navclasses { display: none; }
.hello__lead { margin-top: 6px; color: var(--ink-soft); font-weight: 600; font-size: 17px; line-height: 1.4; }

@media (max-width: 760px) {
  /* The classes move up into the top bar as icons; the name of the site
     and the status pill make way for them. */
  .nav .brand, .nav__tools .pill { display: none; }
  .nav { gap: 6px; }
  .navclasses { display: flex; gap: 6px; }
  .navclasses__one {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    color: var(--ink-soft); opacity: .7; transition: opacity .15s, background .15s;
  }
  .navclasses__one .art { width: 30px; height: 30px; }
  .navclasses__one.is-on { opacity: 1; box-shadow: inset 0 0 0 2px var(--ink); }
  .navclasses__one--0.is-on { background: var(--pink); }
  .navclasses__one--1.is-on { background: var(--peach); }
  .navclasses__one--2.is-on { background: var(--mint); }
  .navclasses__one--3.is-on { background: var(--sky); }
  .nav__tools { margin-left: auto; }
  .hello .classes { display: none; }

  /* The greeting, centred. */
  .hello { text-align: center; align-items: center; padding: 18px 0 14px; }
  .hello__date { justify-content: center; }

}

/* ================================================ quieter headings
   Every heading and subheading a size smaller and a touch lighter, so the
   page reads calmer and more fits on a phone screen. */

.brand__text b { font-size: 17px; font-weight: 540; }
.hello__date { font-weight: 600; }
.hello h1 { font-size: 38px; font-weight: 540; }
.sec__title { font-size: 26px; font-weight: 460; }
.sub { font-size: 18px; font-weight: 460; }
.termbar__status { font-size: 36px; font-weight: 540; }
.termbar__back { font-size: 16px; font-weight: 600; }
.stat__name { font-size: 28px; font-weight: 540; }
.stat__num { font-size: 48px; font-weight: 540; }
.stat__label { font-size: 15px; font-weight: 700; }
.daycard h3 { font-size: 24px; font-weight: 460; }
.teamcard h3, .box__title, .helpcard h3 { font-size: 18px; font-weight: 460; }
.work__head h3, .post h3, .ptfa h3 { font-size: 20px; font-weight: 460; }
.starcard h3 { font-size: 30px; font-weight: 540; }
.cat__value { font-size: 21px; font-weight: 460; }
.mapcard__title { font-size: 25px; font-weight: 540; }
.menu__name { font-size: 16px; font-weight: 540; }
.dtile b { font-size: 21px; font-weight: 540; }
.calbar b { font-size: 18px; font-weight: 460; }
.drow.is-next .drow__text b { font-size: 17px; font-weight: 460; }
.oldletter b, .book b { font-weight: 460; }
.oldletter b { font-size: 16px; }

@media (max-width: 760px) {
  .hello h1 { font-size: 32px; }
  .hello__lead { font-size: 16px; font-weight: 600; }
  .sec__title { font-size: 24px; margin-bottom: 14px; }
  .termbar__status { font-size: 28px; }
  .termbar__back { font-size: 14.5px; }
  .stat__name { font-size: 22px; }
  .stat__num { font-size: 42px; }
  .stat--lilac .stat__num { font-size: 34px; }
  .daycard h3 { font-size: 21px; }
  .mapcard__title { font-size: 23px; }
}

/* ========================================================= day at a glance
   What they need, what is on, lunch, letters and what is coming, straight
   under the greeting. A computer shows today, the next school day and a
   side column of letters and dates side by side, on a soft panel like the
   one below; a tablet shows two columns; a phone stacks them. */

.glance {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .82fr);
  gap: 16px; align-items: start;
  margin: 0 0 18px; padding: 16px; border-radius: var(--r-xl); background: var(--panel);
}
.glance--1 .glance__day { grid-column: span 2; }
/* Nothing coming up in the next three weeks: today and tomorrow share the
   width rather than leaving the third column empty. */
.glance--2:not(:has(.glance__side)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.glance--1:not(:has(.glance__side)) .glance__day { grid-column: 1 / -1; }
.glance__day, .glance__soon {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: 18px 18px 8px;
}
.glance__when {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-head); font-weight: 540; font-size: 19px; margin: 0 2px 8px;
}
.glance__tag {
  flex: none; padding: 4px 10px; border-radius: 999px; background: var(--panel);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink-soft);
}
.glance__lines, .glance__soon ul { margin: 0; padding: 0; list-style: none; }
.glance__line, .glance__letter { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0 12px; }
.glance__line + .glance__line { border-top: 1px solid var(--line); padding-top: 12px; }
.glance__icon { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.glance__icon--sun { background: var(--butter); color: var(--butter-2); }
.glance__icon--sky { background: var(--sky); color: var(--sky-2); }
.glance__icon--mint { background: var(--mint); color: var(--mint-2); }
.glance__icon--peach { background: var(--peach); color: var(--peach-2); }
.glance__icon--lilac { background: var(--lilac); color: var(--lilac-2); }
.glance__text { flex: 1; min-width: 0; font-weight: 650; font-size: 16.5px; line-height: 1.35; padding-top: 7px; }
.glance__text em { display: block; font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.glance__side { display: grid; gap: 16px; align-content: start; }
.glance__letter {
  align-items: center; padding: 14px 16px; margin: 0;
  background: var(--lilac); border-radius: var(--r-lg); color: var(--ink);
}
.glance__letter .glance__icon--lilac { background: var(--card); }
.glance__letter .glance__text { padding-top: 0; }
.glance__go { color: var(--muted); display: grid; }
.glance__coming { display: none; }
.glance__soon li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.glance__soon li + li { border-top: 1px solid var(--line); }
.glance__soon .glance__text { padding-top: 0; font-size: 15.5px; }
.glance__date {
  flex: none; width: 44px; text-align: center; padding: 5px 0 4px; border-radius: 12px; background: var(--panel);
}
.glance__date b { display: block; font-family: var(--font-head); font-weight: 540; font-size: 18px; line-height: 1.1; }
.glance__date em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--muted); }
.glance__all {
  display: flex; align-items: center; gap: 4px; padding: 10px 0 10px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: 14px; color: var(--ink-soft);
}

/* Tablet: today and tomorrow side by side, letters and dates beneath. */
@media (max-width: 1100px) {
  .glance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .glance__side { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .glance--1 .glance__day { grid-column: 1 / -1; }
  .glance__side > :only-child { grid-column: 1 / -1; }
}

/* Phone: one column, the dates as a single sentence. */
@media (max-width: 760px) {
  .glance { display: block; padding: 0; background: none; margin: 0 0 22px; }
  .glance__day { padding: 16px 16px 6px; margin-bottom: 10px; }
  .glance__when { font-size: 18px; }
  .glance__text { font-size: 17px; padding-top: 6px; }
  .glance__text em { font-size: 15px; }
  .glance__side { display: block; }
  .glance__letter { padding: 12px 14px; margin-bottom: 10px; }
  .glance__soon { display: none; }
  .glance__coming { display: block; margin: 4px 6px 0; color: var(--ink-soft); font-size: 15px; font-weight: 600; line-height: 1.45; }
  .glance__coming b { color: var(--ink); }
}

[hidden] { display: none !important; }
.looktoggle { padding: 0; }

/* ===================================== headings, one more step smaller */

.brand__text b { font-size: 16px; }
.hello h1 { font-size: 34px; }
.hello__lead { font-size: 16px; }
.sec__title { font-size: 23px; }
.sub { font-size: 16.5px; }
.termbar__status { font-size: 32px; }
.termbar__back { font-size: 15px; }
.stat__name { font-size: 25px; }
.stat__num { font-size: 43px; }
.stat__label { font-size: 14.5px; }
.teamcard h3, .box__title, .helpcard h3 { font-size: 16.5px; }
.work__head h3, .post h3, .ptfa h3 { font-size: 18px; }
.starcard h3 { font-size: 27px; }
.cat__value { font-size: 19px; }
.mapcard__title { font-size: 22px; }
.menu__name { font-size: 15px; }
.dtile b { font-size: 19px; }
.calbar b { font-size: 16.5px; }
.drow.is-next .drow__text b { font-size: 16px; }
.oldletter b { font-size: 15px; }
.glance__when { font-size: 17px; }

@media (max-width: 760px) {
  .hello h1 { font-size: 29px; }
  .hello__lead { font-size: 15px; }
  .sec__title { font-size: 21px; margin-bottom: 12px; }
  .termbar__status { font-size: 25px; }
  .termbar__back { font-size: 14px; }
  .stat__name { font-size: 20px; }
  .stat__num { font-size: 38px; }
  .stat--lilac .stat__num { font-size: 31px; }
  .mapcard__title { font-size: 21px; }
  .glance__when { font-size: 16.5px; }
}

/* ===================================================== look and colour

   The palette button opens a small panel: Playful or Modern, and a colour
   for Modern. Shared by both looks, so it reads the page's own tokens. */

.stylepick {
  width: min(470px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: 26px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 30px 80px rgba(10, 16, 32, .35);
  overflow-y: auto;
}
.stylepick[open] { animation: sp-in .32s cubic-bezier(.2, .8, .2, 1); }
/* A light shade and no blur, so the page can be seen changing colour. */
.stylepick::backdrop { background: rgba(12, 18, 34, .22); }
/* On a computer it opens under the palette button rather than over the
   middle of the page. */
@media (min-width: 761px) {
  .stylepick { margin: 92px max(28px, calc((100vw - 1320px) / 2)) auto auto; }
}
@keyframes sp-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.stylepick__in { padding: 24px 24px 20px; }
.stylepick__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stylepick__head h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.stylepick__head p { margin-top: 2px; color: var(--muted); font-size: 14px; }
.stylepick__x {
  width: 36px; height: 36px; flex: none; margin: -4px -6px 0 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--panel); color: var(--ink-soft); cursor: pointer;
}
.stylepick__x:hover { color: var(--ink); }
.stylepick__label {
  margin: 22px 2px 10px;
  color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.stylepick__label span { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Two cards with a little picture of each look. */
.stylepick__looks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.lookcard {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 10px 10px 13px; border-radius: 18px;
  background: var(--card); border: 1.5px solid var(--line);
  transition: border-color .15s ease, transform .15s ease;
}
.lookcard:hover { transform: translateY(-1px); border-color: var(--muted); }
.lookcard.is-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.lookcard__text { display: grid; gap: 1px; padding: 0 4px; }
.lookcard b { font-size: 15px; font-weight: 700; }
.lookcard em { font-style: normal; color: var(--muted); font-size: 12.5px; line-height: 1.35; font-weight: 500; }
.lookcard__tick {
  position: absolute; top: 16px; right: 16px;
  width: 22px; height: 22px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--ink); color: var(--card);
}
.lookcard.is-on .lookcard__tick { display: grid; }

.minimock {
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px;
  height: 96px; padding: 8px; border-radius: 12px;
}
.minimock i { display: block; }
.minimock i:first-child { grid-row: span 2; }
.minimock--play { background: #FFF6EC; }
.minimock--play i { border-radius: 14px; }
.minimock--play i:nth-child(1) { background: #ECE3FC; }
.minimock--play i:nth-child(2) { background: #DDF4E6; }
.minimock--play i:nth-child(3) { background: #FFE3C9; }
.minimock--modern { background: #F2F4F8; }
.minimock--modern i { border-radius: 8px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(27, 36, 55, .1); }
.minimock--modern i:nth-child(1) { background: var(--sw); box-shadow: none; }

/* The colours. */
.sw-blue  { --sw: linear-gradient(140deg, #3A6FF0 0%, #4A8BFF 100%); }
.sw-green { --sw: linear-gradient(140deg, #0F9E6E 0%, #2CC28B 100%); }
.sw-sun   { --sw: linear-gradient(140deg, #FFC21F 0%, #FFD966 100%); }
.sw-sky   { --sw: linear-gradient(140deg, #128ED2 0%, #39B6F0 100%); }
.sw-rose  { --sw: linear-gradient(140deg, #DE3D78 0%, #F06A9B 100%); }
.sw-neutral { --sw: linear-gradient(140deg, #F6F6F7 0%, #D9DADE 100%); }
.swatch.sw-neutral .swatch__dot { box-shadow: inset 0 0 0 1px #D2D3D7; }
.swatch.sw-neutral.is-on .swatch__dot { color: #26282C; box-shadow: inset 0 0 0 1px #D2D3D7, 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.minimock--modern.sw-neutral { background: #F7F7F8; }
.minimock--modern.sw-neutral i:nth-child(1) { box-shadow: inset 0 0 0 1px #DFDFE3; }
.sw-mix   { --sw: conic-gradient(from 210deg, #3A6FF0, #18A874, #F2B312, #E5487F, #1E9FE0, #3A6FF0); }

.stylepick__swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 6px 0 4px; border-radius: 14px;
  color: var(--ink-soft); font-size: 12px; font-weight: 600; text-align: center;
}
.swatch__dot {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sw); color: transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}
.swatch:hover .swatch__dot { transform: scale(1.07); }
.swatch.is-on { color: var(--ink); }
.swatch.is-on .swatch__dot { color: #fff; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
.swatch.sw-sun.is-on .swatch__dot { color: #3D2C00; }
.swatch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.stylepick__done {
  display: block; width: 100%; margin-top: 24px;
  padding: 13px 20px; border: 0; border-radius: 999px;
  background: var(--dark); color: var(--on-dark);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.stylepick__note { margin-top: 10px; text-align: center; color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* Phone: a sheet from the bottom of the screen. */
@media (max-width: 760px) {
  .stylepick {
    width: 100%; max-width: 100%; margin: auto 0 0;
    border-radius: 26px 26px 0 0;
  }
  .stylepick[open] { animation: sp-up .32s cubic-bezier(.2, .8, .2, 1); }
  .stylepick__in { padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); }
  .swatch__dot { width: 38px; height: 38px; }
  .swatch { font-size: 11px; letter-spacing: -.01em; }
  .minimock { height: 70px; }
  .stylepick__label { margin-top: 18px; }
  .stylepick__done { margin-top: 20px; }
}
@keyframes sp-up { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stylepick[open] { animation: none; } }

/* The countdown tile: "+2 more this week" when the next date is not the
   only one coming up. */
.stat__more {
  align-self: flex-start; margin-top: 10px;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: var(--ink);
  font-size: 13px; font-weight: 800;
}


/* ======================================================= the year's diary

   The link under the class diary ("See the whole year", styled like Older
   letters), and the page it opens: the school year's posts month by month,
   photo above the words, a tap on a photo shows it full screen. */

.morepill { margin-top: 16px; }

.diaryback {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 12px -2px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: var(--panel); color: var(--ink-soft);
  font-weight: 800; font-size: 14px;
}
.diaryback:hover { color: var(--ink); }
.diarymonth { margin-top: 14px; }
.diarymonth:first-of-type { margin-top: 6px; }
.diarymonth__sum {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm);
  cursor: pointer; list-style: none;
}
.diarymonth__sum::-webkit-details-marker { display: none; }
.diarymonth__name { flex: 1; min-width: 0; display: grid; gap: 1px; }
.diarymonth__name b { font-family: var(--font-head); font-size: 20px; font-weight: 600; }
.diarymonth__name em { font-style: normal; color: var(--muted); font-size: 14px; font-weight: 700; }
.diarymonth__thumbs { display: flex; }
.diarymonth__thumbs img {
  width: 40px; height: 40px; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--card); margin-left: -10px; background: var(--panel);
}
.diarymonth__thumbs img:first-child { margin-left: 0; }
.diarymonth__go { color: var(--muted); transition: transform .15s; }
.diarymonth[open] .diarymonth__go { transform: rotate(180deg); }
.diarymonth[open] .diarymonth__thumbs { display: none; }
.diarymonth[open] > .diarygrid { margin-top: 16px; margin-bottom: 18px; }
.diarygrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--gap); align-items: start;
}
.dpost {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm);
}
.dpost__photo {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--panel); cursor: zoom-in;
}
.dpost__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dpost__text { padding: 16px 18px 20px; }
.dpost__date { display: block; color: var(--muted); font-weight: 800; font-size: 13px; }
.dpost h3 { font-size: 21px; line-height: 1.2; margin-top: 4px; }
.dpost p { margin-top: 8px; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; white-space: pre-line; }
.dpost--0 { background: var(--lilac); }
.dpost--1 { background: var(--mint); }
.dpost--2 { background: var(--sky); }
.dpost--text p { color: var(--ink); }

/* A photo full screen: the whole photo, centred on dark, nothing cropped. */
.viewer--photo .viewer__body { position: relative; background: #0B0D10; }
.viewer--photo .viewer__body img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
}

@media (max-width: 760px) {
  .app--diary { padding-bottom: 40px; }
  .diarymonth { margin-top: 12px; }
  .diarymonth__sum { padding: 12px 14px; }
  .diarymonth__thumbs img { width: 34px; height: 34px; }
  .diarygrid { grid-template-columns: minmax(0, 1fr); }
  .app--diary .hello h1 { font-size: 34px; }
}

/* ======================================== updates, notifications, hearts

   Shared by both looks, so everything reads the page's own colours. The
   one exception is urgent, which is always a warm red whatever colour a
   family has chosen: it has to look different from everything else. */

:root { --alert: #D33A3C; --alert-pale: #FDECEC; --alert-ink: #A3262A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --alert: #F07374; --alert-pale: #3A1D20; --alert-ink: #FFB3B3; }
}
:root[data-theme="dark"] { --alert: #F07374; --alert-pale: #3A1D20; --alert-ink: #FFB3B3; }

/* The bell, beside the palette. A small green dot once this phone has
   notifications on. */
.bellbtn { position: relative; padding: 0; font: inherit; }
.bellbtn__dot {
  position: absolute; top: 9px; right: 10px; display: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mint-2); box-shadow: 0 0 0 2px var(--card);
}
.bellbtn.is-on .bellbtn__dot { display: block; }

/* Urgent, under the greeting, on the day only. */
.urgent {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 18px; padding: 16px 18px;
  border-radius: var(--r-lg); background: var(--alert-pale); color: var(--ink);
  scroll-margin-top: 90px;
}
.urgent__icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: var(--alert); color: #fff;
}
.urgent__text { min-width: 0; display: grid; }
a.urgent { color: var(--ink); text-decoration: none; cursor: pointer; }
.urgent__go { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; color: var(--alert-ink); font-weight: 800; font-size: 14px; }
.urgent__meta { color: var(--ink-soft); font-size: 13.5px; font-weight: 700; }
.urgent__meta b { color: var(--alert-ink); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.urgent__body {
  margin-top: 2px; font-size: 17px; font-weight: 700; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.urgent__file { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 800; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* Updates: a short note each, newest first. */
.notes { display: grid; }
.note { display: flex; gap: 14px; padding: 14px 10px; border-radius: var(--r-md); scroll-margin-top: 90px; }
.note + .note { box-shadow: inset 0 1px 0 var(--line); border-radius: 0; }
.note__text { flex: 1; min-width: 0; }
.note__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.note__meta b { color: var(--ink); font-weight: 800; }
.note__meta .chip { margin-left: 4px; padding: 2px 10px; font-size: 12.5px; }
.note__body { margin-top: 3px; font-size: 15.5px; font-weight: 600; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.note__photo {
  display: block; margin-top: 10px; width: min(100%, 320px); aspect-ratio: 4 / 3;
  border-radius: var(--r-md); overflow: hidden; background: var(--panel); cursor: zoom-in;
}
.note__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.note__file {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 8px 14px; border-radius: 999px; background: var(--panel);
  font-weight: 700; font-size: 14px;
}
.note__file em { font-style: normal; color: var(--muted); font-size: 12px; font-weight: 800; }
.note--older .note__body { font-size: 14.5px; color: var(--ink-soft); }
.older .notes { margin-top: 12px; }
.badge--alert { background: linear-gradient(145deg, #FF8A8A, #D33A3C); }
/* Opened from a notification: a soft glow so the eye lands on it. */
.note.is-flash, .urgent.is-flash { animation: pz-flash 2.6s ease; }
@keyframes pz-flash { 0%, 45% { box-shadow: 0 0 0 3px var(--butter-2); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Hearts on diary posts: a round button in the corner. Fills in when
   tapped, with a little pop. */
.heart {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #1F1B3D;
  box-shadow: 0 2px 8px rgba(20, 16, 40, .14);
  -webkit-tap-highlight-color: transparent;
}
.heart .icon { transition: fill .15s ease; }
.heart:active { transform: scale(.92); }
.heart.is-on { color: #E8508F; }
.heart.is-on .icon { fill: currentColor; }
.heart.is-pop .icon { animation: heart-pop .45s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes heart-pop { 35% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .heart.is-pop .icon, .note.is-flash, .urgent.is-flash { animation: none; } }
.post h3 { padding-right: 34px; }
.dpost { position: relative; }

/* A diary post opens its own page: the whole card is the link, with the
   heart above it, and how many photos there are when there is more than
   one. */
.post__open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.post__top, .post__body { pointer-events: none; }
.post__count {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 8px; border-radius: 999px; pointer-events: none;
  background: rgba(20, 16, 40, .62); color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.post > .post__count { top: 20px; right: 64px; }
.dpost__photo > .post__count { right: 12px; bottom: 12px; }
.dpost:hover h3, .post:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* The class diary row: four and the whole year card across a computer,
   a little smaller than before; six to swipe through on a phone. */
.grid--diary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--diary > * { grid-column: auto; }
.grid--diary > .post { min-height: 270px; }
.post--phoneonly { display: none; }
.post--more {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center; color: var(--ink); background: var(--panel);
}
.post--more:hover { background: var(--line); }
.post__moreicon {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--ink-soft);
}
.post__moretext { display: grid; gap: 2px; }
.post__moretext b { font-family: var(--font-head); font-size: 18px; }
.post__moretext em { font-style: normal; color: var(--muted); font-size: 14px; font-weight: 700; }
.post__morego { color: var(--muted); }
@media (max-width: 1100px) {
  .grid--diary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--diary.has-more > .post:nth-child(n+3):not(.post--more) { display: none; }
}
@media (max-width: 760px) {
  .grid--diary.swipe > * { width: 72%; }
  .grid--diary.has-more > .post:nth-child(n+3):not(.post--more) { display: flex; }
  .grid--diary > .post { min-height: 250px; }
  .post--phoneonly { display: flex; }
  .post--computeronly { display: none !important; }
}

/* One diary post on its own page: the heart in the corner, then every
   photo; the first large, the rest as tiles. */
.dpage { position: relative; }
.dpage__heart { top: 18px; right: 18px; box-shadow: none; background: var(--panel); }
.dpage .msg__from { padding-right: 52px; }
.dpage .msg__title { padding-right: 52px; }
.dgallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.dgallery__item {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-md); background: var(--panel); cursor: zoom-in;
}
.dgallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dgallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.dgallery--two .dgallery__item:first-child { grid-column: auto; aspect-ratio: 1; }
.dgallery--one .dgallery__item { aspect-ratio: auto; }
.dgallery--one img { height: auto; max-height: 75vh; object-fit: contain; }
@media (min-width: 761px) {
  .dgallery:not(.dgallery--two) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Full screen: the arrows either side, and swiping on a phone. */
.gallery__nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.gallery__nav:hover { background: rgba(255, 255, 255, .28); }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.dpost--text .dpost__text { padding-right: 64px; }

/* The notifications panel: the look and colour panel's frame. */
.np-lead { margin-top: 16px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; font-weight: 600; }
.np-lead b { color: var(--ink); }
.np-steps { display: grid; gap: 10px; margin-top: 14px; }
.np-steps li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: var(--panel); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.np-steps__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--card); color: var(--ink); }
.np-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.np-class {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 9px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--line); font-weight: 700; font-size: 15px;
}
.np-class input { position: absolute; opacity: 0; pointer-events: none; }
.np-class__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel); color: var(--ink-soft); }
.np-class--0 .np-class__icon { background: var(--pink); }
.np-class--1 .np-class__icon { background: var(--peach); }
.np-class--2 .np-class__icon { background: var(--mint); }
.np-class--3 .np-class__icon { background: var(--sky); }
.np-class__tick {
  margin-left: auto; width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--line); color: transparent;
}
.np-class:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.np-class input:checked ~ .np-class__tick { background: var(--ink); border-color: var(--ink); color: var(--card); }
.np-class input:focus-visible ~ .np-class__icon { outline: 2px solid var(--ink); outline-offset: 2px; }
.np-note { margin-top: 14px; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.45; }
.np-status { margin-top: 10px; color: var(--mint-2); font-size: 14px; font-weight: 700; }
.np-status:empty { display: none; }
.np-status.is-bad { color: var(--alert); }
.np-off {
  display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; background: none;
  color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.stylepick__done[disabled], .np-off[disabled] { opacity: .6; cursor: progress; }
/* Check this phone: folded away at the foot of the notifications panel. */
.np-check { margin-top: 14px; padding-top: 10px; border-top: 1.5px solid var(--line); }
.np-check summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; list-style: none; }
.np-check summary::-webkit-details-marker { display: none; }
.np-check__list { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 4px; font-size: 13.5px; }
.np-check__list dt { color: var(--muted); font-weight: 600; }
.np-check__list dd { margin: 0; text-align: right; font-weight: 700; color: var(--ink); }

/* On a phone the top bar holds four class icons and three buttons, so
   the buttons come down a little in size to fit a small phone. */
@media (max-width: 420px) {
  .nav__tools { gap: 6px; }
  .nav__tools .iconbtn { width: 40px; height: 40px; }
  .navclasses { gap: 2px; }
  .navclasses__one { width: 42px; height: 42px; }
  .bellbtn__dot { top: 8px; right: 9px; }
}

/* New updates: one line with a count, above the day at a glance, only
   while there is something this phone has not seen. Calm, in the page's
   own colours; urgent ones have the red card. */
.fresh {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none;
}
.fresh[hidden] { display: none; }
.fresh:hover .fresh__go { color: var(--ink); }
.fresh__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--butter); color: var(--ink);
}
.fresh__num { flex: none; font-family: var(--font-head); font-weight: 600; font-size: 32px; line-height: 1; }
.fresh__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fresh__text b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.fresh__text em { font-style: normal; color: var(--muted); font-size: 13px; font-weight: 600; }
.fresh__go { flex: none; color: var(--muted); }
.fresh + .fresh { margin-top: -8px; }
.fresh--letters .fresh__icon { background: var(--lilac, var(--panel)); }

/* Nothing new: a quiet status line, not a card. Centred under the
   greeting on a phone. */
.uptodate {
  display: flex; align-items: center; flex-wrap: wrap; column-gap: 8px; row-gap: 2px;
  margin: -4px 0 18px; padding: 0 4px; color: var(--ink-soft);
}
.uptodate[hidden] { display: none; }
.uptodate__tick {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint, var(--panel)); color: var(--ink);
}
.uptodate b { font-size: 15px; font-weight: 800; }
.uptodate em { font-style: normal; color: var(--muted); font-size: 13.5px; font-weight: 600; }
@media (max-width: 760px) {
  .uptodate { justify-content: center; margin-top: -6px; }
}

/* Once a school year: check the classes for notifications. */
.yearcheck {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.yearcheck__icon {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--mint, var(--panel)); color: var(--ink);
}
.yearcheck__text { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.yearcheck__text b { font-size: 16px; font-weight: 800; }
.yearcheck__text em { font-style: normal; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.yearcheck__do { display: flex; gap: 8px; flex-wrap: wrap; }
.yearcheck__btn, .yearcheck__ok {
  border: 0; border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.yearcheck__btn { background: var(--ink); color: var(--card); }
.yearcheck__ok { background: var(--panel); color: var(--ink); }
.notifyask .yearcheck__icon { background: var(--butter, var(--panel)); }

/* The latest letter's title on its tile: smaller than a name, two lines. */
.stat__name--title {
  font-size: 21px !important; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* The list of updates: new ones in full, one under another. */
.newmsgs { display: grid; gap: 14px; margin-bottom: 26px; }
.msg--list .msg__body { margin-top: 12px; }
.msg__from .chip { margin-left: auto; }
.msg__from > span:nth-child(2) { display: grid; }
/* A title, when the team gave one: bold, with the message under it. */
.msg__title { margin-top: 16px; font-family: var(--font-head); font-size: 18px; font-weight: 500; line-height: 1.3; }
.msg__title + .msg__body { margin-top: 6px; }
.urgent__title { font-weight: 800; font-size: 16px; }
.urgent__title + .urgent__body { font-weight: 600; font-size: 16px; }
/* The teacher who posted it: a round face, like the teaching team. */
.badge--face { border-radius: 50% !important; }

/* A message on a computer: the message, and the other recent updates
   beside it. On a phone, just the message. */
.msgside { display: none; }
@media (min-width: 1100px) {
  .msgwrap { display: grid; grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); gap: 28px; align-items: start; }
  .msgwrap .msg { margin-top: 6px; }
  .msgside { display: block; }
  .msgside__title { font-family: var(--font-head); font-size: 18px; font-weight: 600; margin: 8px 0 10px; }
}

/* Updates on the class page: one line each, like Letters, ending in "..."
   when the message is longer. The list is held to the width of its box, so
   a long first line can never push the page wider than the screen. */
.rows--updates { grid-template-columns: minmax(0, 1fr); }
.row--update { min-width: 0; }
/* Two lines of the message at most, ending in "..." when there is more:
   enough to know what it is about on a phone, without the list growing. */
.row--update .row__text b {
  overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.badge--photo { padding: 0; overflow: hidden; background: var(--panel) !important; box-shadow: none; }
.badge--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* On a small phone "New" becomes a small dot, leaving room for the words. */
@media (max-width: 520px) {
  .row--update .chip {
    width: 10px; height: 10px; padding: 0; overflow: hidden;
    font-size: 0; background: var(--butter-2);
  }
}

/* One update on its own page. */
.msg {
  margin-top: 6px; padding: 22px 24px 24px; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-sm); max-width: 760px;
}
.msg--urgent { background: var(--alert-pale); }
.msg__from { display: flex; align-items: center; gap: 12px; }
.msg__from span:last-child { display: grid; }
.msg__from b { font-weight: 800; font-size: 15px; }
.msg__from em { font-style: normal; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.msg--urgent .msg__from b { color: var(--alert-ink); }
/* Reading text, the same weight as the rest of the page's paragraphs. */
.msg__body { margin-top: 16px; font-size: 17px; font-weight: 500; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.msg__photo { display: block; margin-top: 18px; border-radius: var(--r-md); overflow: hidden; background: var(--panel); cursor: zoom-in; }
.msg__photo img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.msg__file {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 11px 18px; border-radius: 999px; background: var(--dark); color: var(--on-dark);
  font-weight: 800; font-size: 15px;
}
.msg__file em { font-style: normal; opacity: .7; font-size: 12px; }
.app--sub .morepill { margin-top: 22px; }

/* Pull to refresh in the home screen app (pz-notify.js): a small round
   arrow that comes down from the top as the page is pulled. */
.ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) - 44px); z-index: 80;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--muted); border: 1.5px solid var(--line);
  box-shadow: 0 6px 18px rgba(31, 27, 61, .16);
  opacity: 0; transform: translate(-50%, 0); pointer-events: none;
  transition: opacity .15s, color .15s;
}
.ptr.is-ready, .ptr.is-loading { color: var(--ink); }
.ptr.is-loading svg { animation: pz-spin .7s linear infinite; }
@keyframes pz-spin { to { transform: rotate(360deg); } }

/* A page inside a class (one update, all updates, a letter, the diary) on
   a phone: Back sits in the top bar, the size of the round buttons beside
   it, so the page starts straight away; the class page's tab bar stays
   along the bottom. On a computer Back stays under the name of the site. */
.subback { display: none; }
@media (max-width: 760px) {
  .subback {
    display: inline-flex; align-items: center; gap: 2px; min-width: 0;
    height: 44px; padding: 0 16px 0 9px; border-radius: 999px;
    background: var(--card); color: var(--ink); border: 1.5px solid var(--line);
    font-weight: 800; font-size: 15px; white-space: nowrap;
  }
  .subback span { overflow: hidden; text-overflow: ellipsis; }
  .app.app--sub { padding-bottom: 110px; }
  .app--sub .hello--back, .app--sub .hello .diaryback { display: none; }
  .app--sub .hello { text-align: left; align-items: flex-start; padding: 12px 2px 16px; }
  .app--sub .hello h1 { font-size: 30px; }
  .app--sub .hello__lead { font-size: 15.5px; }
  .app--sub .msgwrap .msg, .app--sub > .msg { margin-top: 12px; }
}
@media (max-width: 420px) {
  .subback { height: 40px; }
}
/* New, on a message shown in full: a small dot on a phone, so the name and
   time keep the room. */
@media (max-width: 520px) {
  .msg--list .msg__from .chip {
    width: 10px; height: 10px; padding: 0; overflow: hidden; flex: none;
    font-size: 0; background: var(--butter-2); align-self: flex-start; margin-top: 8px;
  }
}

/* A letter on its own page: each page of the letter as a sheet of paper,
   one under another, inside the parent zone (never the file by itself,
   which on a phone's home screen app leaves no way back). */
.letter__pages { display: grid; gap: 14px; margin-top: 18px; }
.letter__page {
  display: block; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .10), 0 6px 18px rgba(20, 30, 50, .08);
  border: 1px solid rgba(20, 30, 50, .08); cursor: zoom-in;
}
.letter__page img { display: block; width: 100%; height: auto; }
.letter__hint { margin-top: 14px; color: var(--muted); font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.letter__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.letter__actions .btn { padding: 11px 18px; font-size: 15px; gap: 8px; }
.btn--soft { background: var(--panel); color: var(--ink); }
.btn--soft:hover { background: var(--line); }
.letter .msg__title { margin-top: 14px; }
@media (max-width: 760px) {
  .msg { padding: 18px; }
  .msg__body { font-size: 16.5px; }
}

/* Notifications on this phone, at the foot of the page once they are on. */
.notifyrow {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 8px 0 18px; padding: 12px 16px; border: 0; border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-sm); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.notifyrow__go { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-weight: 800; font-size: 14px; white-space: nowrap; }
.notifyrow:hover .notifyrow__go { color: var(--ink); }

/* ===================================================== the parents' menu

   Behind the page, on the left. The menu button slides the page to the
   right to show it, leaving a strip of the page in view (public/_menu.html),
   the same as the team area on a phone. */
:root { --pdrawer: min(82vw, 320px); }
.pz > .app { position: relative; z-index: 2; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.pmenu {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 1;
  width: var(--pdrawer); height: 100vh; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: var(--card);
  transform: translateX(-24px); opacity: .6; visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s, visibility 0s .3s;
}
.pm-held .pz > .app { position: fixed; left: 0; right: 0; background: var(--page); }
.pm-open .pmenu { transform: none; opacity: 1; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.pm-open .pz > .app {
  transform: translateX(var(--pdrawer));
  clip-path: inset(var(--clip-top, 0px) 0 var(--clip-bottom, 0px) 0 round 28px);
  box-shadow: -10px 0 30px rgba(31, 27, 61, .12);
}
/* The tab bar and the writing box stay with the page, out of sight. */
.pm-held .tabbar, .pm-held .ptr { visibility: hidden; }
.pmenu__shade { display: none; }
.pm-open .pmenu__shade {
  display: block; position: fixed; top: 0; bottom: 0; left: var(--pdrawer); right: 0; z-index: 60;
  margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
}

.pmenu__brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 12px; }
.pmenu__brand img { width: 40px; height: 40px; border-radius: 12px; }
.pmenu__brand b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 18px; line-height: 1.1; }
.pmenu__brand em { font-style: normal; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.pmenu__label { margin: 14px 0 4px; padding: 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pmenu__nav { display: grid; gap: 2px; }
.pmenu__nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 14px;
  color: var(--ink); font-weight: 700; font-size: 16px;
}
.pmenu__nav a .icon { color: var(--ink-soft); }
.pmenu__nav a:hover { background: var(--panel); }
.pmenu__nav a.is-on { background: var(--lilac); }
.pmenu__nav a.is-on .icon { color: var(--ink); }
.pmenu__count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800;
  background: var(--acc, var(--dark)); color: var(--on-acc, var(--on-dark));
}
.pmenu__classes { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 6px; }
.pmenu__class {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--panel); color: var(--ink-soft); font-weight: 700; font-size: 14px;
}
.pmenu__class.is-on { background: var(--ink); color: var(--card); }
.pmenu__nav--end { margin-top: auto; padding-top: 18px; }
.pmenu__team { display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }

/* The menu button, first in the top bar; a small count on it for unread
   messages from school. */
.navmenu { position: relative; flex: none; padding: 0; font: inherit; }
.navmenu__count {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  background: var(--acc, var(--lilac-2)); color: #fff; box-shadow: 0 0 0 2px var(--page);
}
.navmenu__count[hidden] { display: none; }
@media (max-width: 760px) {
  .app--sub .nav { gap: 8px; }
  .app--sub .subback { margin-right: auto; }
}
/* A small phone: the class icons and round buttons a little smaller, so
   the menu button, four classes and three buttons fit on one line. */
@media (max-width: 400px) {
  .nav .navmenu, .nav__tools .iconbtn { width: 38px; height: 38px; }
  .navclasses__one { width: 38px; height: 38px; }
  .navclasses__one .art { width: 26px; height: 26px; }
  .nav { gap: 4px; }
  .nav__tools { gap: 4px; }
}
@media (max-width: 360px) {
  .nav .navmenu, .nav__tools .iconbtn, .navclasses__one { width: 35px; height: 35px; }
}

/* ================================================ pages inside a class

   Every page inside a class (all updates, one update, a letter, the diary,
   a diary post, messages, settings) is tidied to match the class page:
   the same top bar, the same small line in capitals over a calm title,
   and plain cards with nothing said twice. */

/* The top bar on a computer: the class page's sections, this page's lit
   (the class page lights Today; here it is whichever part this is). */
.pz .nav__links--sub a:first-child:not(.is-on) { background: none; color: var(--ink-soft); box-shadow: none; }
.nav__links--sub a.is-on { background: var(--lilac); color: var(--ink); }
/* Back sits in the top bar wherever the sections are not shown. */
@media (max-width: 1100px) {
  .subback {
    display: inline-flex; align-items: center; gap: 2px; min-width: 0;
    height: 44px; padding: 0 16px 0 9px; border-radius: 999px;
    background: var(--card); color: var(--ink); border: 1.5px solid var(--line);
    font-weight: 800; font-size: 15px; white-space: nowrap;
  }
  .subback span { overflow: hidden; text-overflow: ellipsis; }
}

/* The page head: the small line in capitals, then the title. */
.pz .app--sub .pagehead { padding: 14px 2px 22px; }
.pz .app--sub .pagehead h1 { font-size: 32px; line-height: 1.15; overflow-wrap: anywhere; }
.pz .app--sub .pagehead .hello__lead { margin-top: 6px; }
@media (max-width: 760px) {
  .pz .app--sub .pagehead { text-align: center; align-items: center; padding: 8px 8px 18px; }
  .pz .app--sub .pagehead h1 { font-size: 25px; line-height: 1.2; }
  .pz .app--sub .pagehead .hello__lead { font-size: 15px; }
}

/* Narrow pages read best down the middle of a computer screen. */
.app--updates .pagehead, .app--updates .newmsgs, .app--updates .sec { max-width: 760px; margin-left: auto; margin-right: auto; }
.app--join .pagehead { max-width: 560px; margin-left: auto; margin-right: auto; }
@media (min-width: 761px) { .pz .app--join .pagehead { text-align: center; justify-content: center; } }

/* A message, a letter or a post: who and when are in the head above, so
   the card holds just the words, the photos or the pages. */
.app--sub .msg > .msg__body:first-child, .app--sub .msg > :first-child { margin-top: 0; }
.msg__meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.msg__meta b { color: var(--alert-ink); }
.msg__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--butter-2); }
.msg--urgent .msg__dot { background: var(--alert); }
.msg--list .msg__title { margin-top: 8px; }
.msg__meta + .msg__body { margin-top: 8px; }
.msg--list .msg__title + .msg__body { margin-top: 4px; }
.newmsgs { gap: 12px; }
.dpage .msg__body { padding-right: 52px; }
.dpage__heart { top: 16px; right: 16px; }
.dpage--photos .dpage__heart { top: 30px; right: 30px; background: var(--card); box-shadow: var(--shadow-sm); }
.app--sub .morepill { margin-top: 18px; }
@media (max-width: 760px) {
  .app--sub .morepill { display: flex; width: fit-content; margin: 18px auto 0; }
  .app--sub .msg { padding: 18px 18px 20px; }
  .dpage--photos .dpage__heart { top: 26px; right: 26px; }
}

/* ============================================================ settings

   Everything open on the one page: a card each for notifications,
   messages with school, and how it looks. Two columns on a computer. */

.setgrid { display: grid; gap: 16px; }
.setcol { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1000px) {
  .app--settings .pagehead, .setgrid { max-width: 1040px; margin-left: auto; margin-right: auto; width: 100%; }
  .setgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
  .setcol { gap: 20px; }
}
.setcard { padding: 22px 22px 20px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-sm); min-width: 0; }
.setcard__head h2 { font-family: var(--font-head); font-size: 18px; font-weight: 600; line-height: 1.25; }
.setcard__head p { margin-top: 3px; color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.45; }
/* The notifications and colour choices, open on the page. */
.npinline .stylepick__in, .spinline .stylepick__in { padding: 0; }
.npinline .np-state > :first-child { margin-top: 18px; }
.npinline .np-state > .stylepick__label:first-child { margin-top: 20px; }
.npinline .stylepick__done { margin-top: 16px; }
.npinline .np-note { margin-top: 12px; }
.spinline .stylepick__label:first-child { margin-top: 20px; }
/* Messages with school: the conversations, and a box for a code. */
.setlinks { margin: 14px -8px 0; }
.setcode .stylepick__label { display: block; margin: 18px 2px 8px; }
.setcode__row { display: flex; gap: 8px; }
.setcode__row input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.setcode__row input::placeholder { color: var(--muted); opacity: .55; }
.setcode__row input:focus { outline: 0; border-color: var(--ink); }
.setcode__go {
  flex: none; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--dark); color: var(--on-dark); font: inherit; font-size: 15px; font-weight: 700;
}
/* Day or night. */
.setday .stylepick__label { margin: 20px 2px 10px; }
.setseg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--panel); }
.setseg button {
  flex: 1; border: 0; margin: 0; padding: 9px 13px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 800;
}
.setseg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.setday__note { margin: 8px 2px 0; color: var(--muted); font-size: 13px; font-weight: 600; }
@media (max-width: 760px) {
  .setcard { padding: 20px 18px 18px; }
}

/* ============================================ Skoolday in the top bar

   The Skoolday icon, "skoolday" (the wordmark) and the tagline under it,
   in the top bar and at the top of the parents' menu. The same in both
   looks, and the same for every school. */
.brand__mark--sd { background: none; overflow: hidden; }
.brand__mark--sd img { display: block; width: 100%; height: 100%; }
.brand__text--sd { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; line-height: 0; }
.brand__text--sd svg { display: block; flex: none; }
.brand__text--sd .brand__word { color: var(--ink); }
.brand__text--sd .brand__tag { color: var(--muted); }