/* Blue: the parent page in the team area's style. Trial looks 4 and 5.

   Loaded after play.css and modern.css, so the layout and everything that
   works on the page stays the same; only the look changes. The language is
   the one built for getting started in the team area: Poppins, white cards
   with a hairline edge and a soft shadow on a pale blue-grey page, icons in
   small tinted tiles, and the deep blue gradient for the one or two things
   that matter most on each screen.

   Modern comes in one colour each parent picks (blue to begin with), or
   Mix (.pz--colour, at the end), which gives each kind of thing its own. */

:root {
  --font-head: Poppins, system-ui, -apple-system, sans-serif;
  --font-body: Poppins, system-ui, -apple-system, sans-serif;

  --page:  #F2F4F8;
  --app:   transparent;
  --panel: #F2F4F8;
  --card:  #FFFFFF;
  --line:  #E9EDF3;
  --line-strong: #DCE2EB;

  --ink:      #1B2437;
  --ink-soft: #4A5468;
  --muted:    #8A93A5;

  --dark: #1B2437; --on-dark: #FFFFFF;
  --r-xl: 22px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --shadow:    0 1px 2px rgba(27, 36, 55, .04), 0 14px 34px rgba(27, 36, 55, .08);
  --shadow-sm: 0 1px 2px rgba(27, 36, 55, .04), 0 8px 24px rgba(27, 36, 55, .06);
  --edge: 1px solid var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0F141E; --panel: #151C2A; --card: #182030; --line: #253042; --line-strong: #34405A;
    --ink: #EEF1F7; --ink-soft: #B7C0D1; --muted: #8C96AA;
    --dark: #EEF1F7; --on-dark: #121826;
    --shadow: none; --shadow-sm: none;
  }
}
:root[data-theme="dark"] {
  --page: #0F141E; --panel: #151C2A; --card: #182030; --line: #253042; --line-strong: #34405A;
  --ink: #EEF1F7; --ink-soft: #B7C0D1; --muted: #8C96AA;
  --dark: #EEF1F7; --on-dark: #121826;
  --shadow: none; --shadow-sm: none;
}

/* --------------------------------------------------------------- colour

   Modern comes in one colour of each parent's choosing (the palette button
   at the top). Everything that shows the colour reads these: the colour
   itself, a pale tint for icon tiles, a deep shade for text, the gradient
   for the feature cards and the text that sits on it. */

.pz--blue {
  --acc: #3A6FF0; --acc-pale: #EDF2FF; --acc-ink: #2A55C7;
  --acc-grad: linear-gradient(140deg, #3A6FF0 0%, #4A8BFF 100%);
  --acc-glow: 0 14px 30px rgba(58, 111, 240, .28);
  --acc-on-white: #2550C9;
  --on-acc: #FFFFFF; --on-acc-soft: rgba(255, 255, 255, .8);
  --on-acc-tile: rgba(255, 255, 255, .2); --on-acc-line: rgba(255, 255, 255, .16);

  /* Every accent the layout uses follows the chosen colour, so the page
     reads as one colour. Green stays for "done" and "open". */
  --lilac: var(--acc-pale); --lilac-2: var(--acc-ink);
  --sky:   var(--acc-pale); --sky-2:   var(--acc-ink);
  --peach: var(--acc-pale); --peach-2: var(--acc);
  --butter:var(--acc-pale); --butter-2:var(--acc);
  --pink:  var(--acc-pale); --pink-2:  var(--acc-ink);
  --mint:  #E7F7EF;         --mint-2:  #1C9A66;
}
.pz--blue.acc-green {
  --acc: #14A673; --acc-pale: #E4F6EE; --acc-ink: #11744F;
  --acc-grad: linear-gradient(140deg, #0F9E6E 0%, #2CC28B 100%);
  --acc-glow: 0 14px 30px rgba(15, 158, 110, .26);
  --acc-on-white: #0B7A54;
}
.pz--blue.acc-sun {
  --acc: #EDAA0C; --acc-pale: #FFF5D6; --acc-ink: #8A6200;
  --acc-grad: linear-gradient(140deg, #FFC21F 0%, #FFD966 100%);
  --acc-glow: 0 14px 30px rgba(242, 179, 18, .32);
  --acc-on-white: #7A5600;
  /* Dark text on the sunshine, which white would not stand out on. */
  --on-acc: #3D2C00; --on-acc-soft: rgba(61, 44, 0, .72);
  --on-acc-tile: rgba(255, 255, 255, .5); --on-acc-line: rgba(61, 44, 0, .12);
}
.pz--blue.acc-sky {
  --acc: #1E9FE0; --acc-pale: #E3F4FD; --acc-ink: #11709F;
  --acc-grad: linear-gradient(140deg, #128ED2 0%, #39B6F0 100%);
  --acc-glow: 0 14px 30px rgba(18, 142, 210, .26);
  --acc-on-white: #0E6A98;
}
.pz--blue.acc-rose {
  --acc: #E5487F; --acc-pale: #FDE8F0; --acc-ink: #B02A5C;
  --acc-grad: linear-gradient(140deg, #DE3D78 0%, #F06A9B 100%);
  --acc-glow: 0 14px 30px rgba(222, 61, 120, .26);
  --acc-on-white: #B02A5C;
}

/* Neutral: very light grey. An off-white page, pale grey cards with dark
   text where the other colours have their gradient, and a dark grey only
   for the small things: rings, dots, today's outline. No warmth: a true
   grey, so it sits quietly with any photo. */
.pz--blue.acc-neutral {
  --acc: #55585F; --acc-pale: #EFEFF1; --acc-ink: #44474D;
  --acc-grad: linear-gradient(140deg, #F5F5F6 0%, #E7E7EA 100%);
  --acc-glow: 0 1px 2px rgba(30, 32, 36, .05), 0 10px 26px rgba(30, 32, 36, .07);
  --acc-on-white: #33363B;
  --on-acc: #26282C; --on-acc-soft: rgba(38, 40, 44, .64);
  --on-acc-tile: rgba(255, 255, 255, .8); --on-acc-line: rgba(38, 40, 44, .09);
  --page: #F7F7F8; --panel: #F2F2F3; --line: #E8E8EA; --line-strong: #D9D9DC;
  --ink: #1F2023; --ink-soft: #4F5157; --muted: #8D8F95;
  --dark: #2A2C30;
  --mint: #EFEFF1; --mint-2: #44474D;
  color: var(--ink);
}
body:has(.pz--blue.acc-neutral) { background: #F7F7F8; }
/* Light cards on a light page need a fine edge to stand apart. */
.pz--blue.acc-neutral .glance__day:first-child,
.pz--blue.acc-neutral .classtile.is-on,
.pz--blue.acc-neutral .stat--star:not(.stat--empty),
.pz--blue.acc-neutral .mapcard,
.pz--blue.acc-neutral .grid--diary > .post:first-child:not(.post--photo) { border: 1px solid #DFDFE3; }
.pz--blue.acc-neutral .glance__day:first-child::after,
.pz--blue.acc-neutral .grid--diary > .post:first-child:not(.post--photo)::after { background: rgba(255, 255, 255, .55); }
.pz--blue.acc-neutral .mapcard__scene { opacity: .07; }
.pz--blue.acc-neutral .termweeks__cell--done,
.pz--blue.acc-neutral .termweeks__cell--current { background: #D4D5D9; }
.pz--blue.acc-neutral .ptfa .btn { background: var(--dark); color: #fff; box-shadow: none; }
@media (max-width: 760px) {
  .pz--blue.acc-neutral .navclasses__one.is-on { box-shadow: inset 0 0 0 1px #D8D9DD, var(--acc-glow); }
}

/* Night: the same colours, deeper tints and lighter text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--blue { --acc-pale: #1C2848; --acc-ink: #92B2FF; --mint: #15322A; --mint-2: #72D9AA; }
  :root:not([data-theme="light"]) .pz--blue.acc-green { --acc-pale: #123227; --acc-ink: #6FDCAE; }
  :root:not([data-theme="light"]) .pz--blue.acc-sun   { --acc-pale: #33290F; --acc-ink: #F6CD5B; }
  :root:not([data-theme="light"]) .pz--blue.acc-sky   { --acc-pale: #10293A; --acc-ink: #7CCBF5; }
  :root:not([data-theme="light"]) .pz--blue.acc-rose  { --acc-pale: #3A1A28; --acc-ink: #F59ABD; }
  :root:not([data-theme="light"]) .pz--blue.acc-neutral {
    --acc: #B3B6BC; --acc-pale: #28292C; --acc-ink: #E0E2E6;
    --acc-grad: linear-gradient(140deg, #323438 0%, #43464B 100%);
    --on-acc: #F2F3F5; --on-acc-soft: rgba(242, 243, 245, .72);
    --on-acc-tile: rgba(255, 255, 255, .1); --on-acc-line: rgba(255, 255, 255, .1);
    --page: #131415; --panel: #191A1C; --card: #1F2023; --line: #2C2D31; --line-strong: #3A3C41;
    --ink: #F0F1F3; --ink-soft: #C1C3C8; --muted: #8F9198; --dark: #F0F1F3;
    --mint: #28292C; --mint-2: #E0E2E6;
  }
  :root:not([data-theme="light"]) body:has(.pz--blue.acc-neutral) { background: #131415; }
  :root:not([data-theme="light"]) .pz--blue.acc-neutral .glance__day:first-child,
  :root:not([data-theme="light"]) .pz--blue.acc-neutral .classtile.is-on,
  :root:not([data-theme="light"]) .pz--blue.acc-neutral .stat--star:not(.stat--empty),
  :root:not([data-theme="light"]) .pz--blue.acc-neutral .mapcard { border-color: transparent; }
  :root:not([data-theme="light"]) .pz--blue.acc-neutral .termweeks__cell--done,
  :root:not([data-theme="light"]) .pz--blue.acc-neutral .termweeks__cell--current { background: #4E5157; }
}
:root[data-theme="dark"] .pz--blue { --acc-pale: #1C2848; --acc-ink: #92B2FF; --mint: #15322A; --mint-2: #72D9AA; }
:root[data-theme="dark"] .pz--blue.acc-green { --acc-pale: #123227; --acc-ink: #6FDCAE; }
:root[data-theme="dark"] .pz--blue.acc-sun   { --acc-pale: #33290F; --acc-ink: #F6CD5B; }
:root[data-theme="dark"] .pz--blue.acc-sky   { --acc-pale: #10293A; --acc-ink: #7CCBF5; }
:root[data-theme="dark"] .pz--blue.acc-rose  { --acc-pale: #3A1A28; --acc-ink: #F59ABD; }
:root[data-theme="dark"] .pz--blue.acc-neutral {
  --acc: #B3B6BC; --acc-pale: #28292C; --acc-ink: #E0E2E6;
  --acc-grad: linear-gradient(140deg, #323438 0%, #43464B 100%);
  --on-acc: #F2F3F5; --on-acc-soft: rgba(242, 243, 245, .72);
  --on-acc-tile: rgba(255, 255, 255, .1); --on-acc-line: rgba(255, 255, 255, .1);
  --page: #131415; --panel: #191A1C; --card: #1F2023; --line: #2C2D31; --line-strong: #3A3C41;
  --ink: #F0F1F3; --ink-soft: #C1C3C8; --muted: #8F9198; --dark: #F0F1F3;
  --mint: #28292C; --mint-2: #E0E2E6;
}
:root[data-theme="dark"] body:has(.pz--blue.acc-neutral) { background: #131415; }
:root[data-theme="dark"] .pz--blue.acc-neutral .glance__day:first-child,
:root[data-theme="dark"] .pz--blue.acc-neutral .classtile.is-on,
:root[data-theme="dark"] .pz--blue.acc-neutral .stat--star:not(.stat--empty),
:root[data-theme="dark"] .pz--blue.acc-neutral .mapcard { border-color: transparent; }
:root[data-theme="dark"] .pz--blue.acc-neutral .termweeks__cell--done,
:root[data-theme="dark"] .pz--blue.acc-neutral .termweeks__cell--current { background: #4E5157; }

body { font-size: 14.5px; }

/* ------------------------------------------------------------ the page */

/* No frame: cards sit straight on the page, as in the team area. */
.pz--blue { padding: 0 28px 40px; }
.pz--blue .app { max-width: 1320px; background: none; box-shadow: none; border-radius: 0; padding: 14px 0 0; }
.pz--blue .panel { background: none; padding: 0; border-radius: 0; }

/* Every card: white, a hairline edge, a soft shadow. */
.pz--blue .glance__day, .pz--blue .glance__soon, .pz--blue .glance__letter,
.pz--blue .termbar, .pz--blue .stat, .pz--blue .teamcard, .pz--blue .cat,
.pz--blue .week__day, .pz--blue .box, .pz--blue .work, .pz--blue .topic,
.pz--blue .helpcard, .pz--blue .book, .pz--blue .post, .pz--blue .menu__day,
.pz--blue .ask, .pz--blue .ptfa, .pz--blue .classtile {
  background: var(--card) !important;
  border: var(--edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Headings: Poppins, firm but not heavy. */
.pz--blue h1, .pz--blue h2, .pz--blue h3 { letter-spacing: -.02em; }
.pz--blue .brand__text b, .pz--blue .hello h1, .pz--blue .sec__title, .pz--blue .termbar__status,
.pz--blue .stat__name, .pz--blue .stat__num, .pz--blue .cat__value, .pz--blue .work__head h3,
.pz--blue .starcard h3, .pz--blue .post h3, .pz--blue .menu__name, .pz--blue .mapcard__title,
.pz--blue .book b, .pz--blue .glance__when, .pz--blue .teamcard h3, .pz--blue .box__title,
.pz--blue .helpcard h3, .pz--blue .ptfa h3, .pz--blue .sub, .pz--blue .dtile b, .pz--blue .calbar b,
.pz--blue .drow.is-next .drow__text b, .pz--blue .glance__date b, .pz--blue .oldletter b { font-weight: 600; }

/* Body text: Poppins reads heavier than Jakarta, so a step lighter. */
.pz--blue .row__text b, .pz--blue .drow__text b, .pz--blue .teamcard b, .pz--blue .ask b,
.pz--blue .week__club b, .pz--blue .topic__list summary, .pz--blue .menu__day p { font-weight: 600; }
.pz--blue .row__text em, .pz--blue .drow__text em, .pz--blue .teamcard em, .pz--blue .ask em,
.pz--blue .stat__note, .pz--blue .cat__note, .pz--blue .glance__text em, .pz--blue .topic__list p,
.pz--blue .menu__day p + p, .pz--blue .week__club em, .pz--blue .hello__lead,
.pz--blue .work__foot, .pz--blue .ptfa p { font-weight: 400; }

/* Section headings: a clear title and a quiet line under it. */
.pz--blue .sec { margin-top: 44px; }
.pz--blue .sec__title { font-size: 22px; margin: 0 2px 16px; }
.pz--blue .sec__title span { margin-top: 2px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.pz--blue .box__title, .pz--blue .helpcard h3, .pz--blue .teamcard h3, .pz--blue .sub { font-size: 15px; }

/* Small labels above things, as in the team area's checklist. */
.pz--blue .termbar__kicker, .pz--blue .hello__date {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* The spellings tile was green whatever the colour: it follows the chosen
   colour now. (Mix gives it a colour of its own, further down.) */
.pz--blue:not(.pz--colour) .badge--mint { background: var(--acc-pale); color: var(--acc-ink); }

/* Icon tiles: one shape and size everywhere, tinted. */
.pz--blue .badge { border-radius: 12px; box-shadow: none; }
.pz--blue .badge .icon { stroke-width: 1.9; }
.pz--blue .badge--round { border-radius: 50%; }

/* Buttons: the navy pill. */
.pz--blue .btn { background: var(--dark); color: var(--on-dark); font-weight: 600; font-size: 14px; padding: 12px 22px; }
.pz--blue .chip { font-weight: 600; }

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

.pz--blue .nav { height: 76px; }
.pz--blue .brand__mark { width: 44px; height: 44px; border-radius: 13px; background: none; overflow: hidden; box-shadow: 0 6px 16px rgba(47, 134, 240, .28); }
.pz--blue .brand__mark img { display: block; width: 44px; height: 44px; }
.pz--blue .brand__text b { font-size: 16px; }
.pz--blue .brand__text em { font-size: 12px; font-weight: 500; }
.pz--blue .nav__links a { font-weight: 500; font-size: 14px; color: var(--ink-soft); }
.pz--blue .nav__links a:hover { background: var(--card); color: var(--ink); }
.pz--blue .nav__links a:first-child { background: var(--acc-pale); color: var(--acc-ink); box-shadow: none; font-weight: 600; }
.pz--blue .pill { background: var(--card); color: var(--ink-soft); border: var(--edge); font-weight: 600; font-size: 13px; box-shadow: var(--shadow-sm); }
.pz--blue .pill--mint i { background: var(--mint-2); }
.pz--blue .pill--butter i { background: #E0A32E; }
.pz--blue .iconbtn { background: var(--card); border: var(--edge); box-shadow: var(--shadow-sm); color: var(--ink-soft); }
.pz--blue .iconbtn:hover { color: var(--ink); border-color: var(--line-strong); }

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

.pz--blue .hello { padding: 22px 2px 24px; }
.pz--blue .hello__date { margin-bottom: 6px; }
.pz--blue .hello h1 { font-size: 34px; letter-spacing: -.03em; }
.pz--blue .hello__lead { font-size: 15px; color: var(--ink-soft); }

/* The class picker: the chosen class is the blue card. */
.pz--blue .classes { gap: 10px; }
.pz--blue .classtile { width: 100px; padding: 14px 8px 12px; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.pz--blue .classtile:hover { border-color: var(--line-strong); }
.pz--blue .classtile__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--acc-pale) !important; color: var(--acc-ink) !important; }
.pz--blue .classtile.is-on {
  background: var(--acc-grad) !important; border-color: transparent; color: var(--on-acc);
  box-shadow: var(--acc-glow);
}
.pz--blue .classtile.is-on .classtile__icon { background: var(--on-acc-tile) !important; color: var(--on-acc) !important; }

/* ------------------------------------------------------ day at a glance */

.pz--blue .glance { background: none; padding: 0; gap: 18px; margin-bottom: 30px; }
.pz--blue .glance__day, .pz--blue .glance__soon { padding: 20px 20px 10px; }
.pz--blue .glance__when { font-size: 16px; margin: 0 0 10px; }
.pz--blue .glance__tag { background: var(--acc-pale); color: var(--acc-ink); font-weight: 600; font-size: 12px; }
.pz--blue .glance__icon { width: 36px; height: 36px; border-radius: 11px; }
.pz--blue .glance__text { font-weight: 500; font-size: 15px; letter-spacing: -.005em; }
.pz--blue .glance__text em { font-size: 13px; }
.pz--blue .glance__icon--sun, .pz--blue .glance__icon--sky, .pz--blue .glance__icon--mint,
.pz--blue .glance__icon--peach, .pz--blue .glance__icon--lilac { background: var(--acc-pale); color: var(--acc-ink); }

/* The day that matters most, in the deep blue: the "Up next" card. */
.pz--blue .glance__day:first-child {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--acc-grad) !important; border-color: transparent;
  color: var(--on-acc); box-shadow: var(--acc-glow);
}
.pz--blue .glance__day:first-child::after {
  content: ""; position: absolute; right: -60px; top: -80px; z-index: -1;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.pz--blue .glance__day:first-child .glance__tag { background: var(--on-acc-tile); color: var(--on-acc); }
.pz--blue .glance__day:first-child .glance__icon { background: var(--on-acc-tile) !important; color: var(--on-acc) !important; }
.pz--blue .glance__day:first-child .glance__text em { color: var(--on-acc-soft); }
.pz--blue .glance__day:first-child .glance__line + .glance__line { border-top-color: var(--on-acc-line); }

.pz--blue .glance__letter { padding: 16px 18px; }
.pz--blue .glance__letter .glance__icon--lilac { background: var(--acc-pale) !important; color: var(--acc-ink); }
.pz--blue .glance__letter:hover { border-color: var(--line-strong); }
.pz--blue .glance__date { background: var(--acc-pale); }
.pz--blue .glance__date b { color: var(--acc-ink); font-size: 16px; }
.pz--blue .glance__date em { color: var(--acc-ink); opacity: .75; font-weight: 500; }
.pz--blue .glance__soon .glance__text { font-size: 14px; }
.pz--blue .glance__all { font-weight: 600; font-size: 13px; color: var(--acc-ink); }

/* ------------------------------------------------------------ term bar */

.pz--blue .termbar { --done: var(--acc); --doneSoft: var(--acc-pale); padding: 22px 24px 18px; }
.pz--blue .termbar__status { font-size: 28px; }
.pz--blue .termbar__back { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.pz--blue .termbar__chip { background: var(--acc-pale); color: var(--acc-ink); font-weight: 600; font-size: 13px; }
.pz--blue .termbar__ends { font-size: 13.5px; font-weight: 500; }
.pz--blue .termweeks { gap: 6px; }
.pz--blue .termweeks__cell { height: 38px; border-radius: 10px; background: var(--panel); }
.pz--blue .termweeks__cell--done { background: var(--acc-grad); }
.pz--blue .termweeks__cell--current { background: var(--acc-grad); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--acc); }
.pz--blue .termweeks__label { font-weight: 500; font-size: 12.5px; }
.pz--blue .termweeks__label.is-break { color: var(--acc-ink); filter: none; }

/* ------------------------------------------------------------- tiles */

.pz--blue .stat { min-height: 210px; padding: 20px; }
.pz--blue .stat::before { display: none; }
.pz--blue .stat__num { font-size: 40px; letter-spacing: -.04em; }
.pz--blue .stat__label { font-size: 14px; font-weight: 600; }
.pz--blue .stat__note { font-size: 13px; color: var(--muted); }
.pz--blue .stat__name { font-size: 24px; }
.pz--blue .stat__badge { width: 46px; height: 46px; border-radius: 13px; background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .ring { width: 50px; height: 50px; }
.pz--blue .ring__track { fill: var(--card); stroke: var(--panel); stroke-width: 5; }
.pz--blue .ring__bar { stroke: var(--acc) !important; stroke-width: 5; }
.pz--blue .ring__in { color: var(--acc-ink) !important; }
.pz--blue a.stat:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.pz--blue a.stat { transition: transform .15s ease, border-color .15s ease; }

/* Star of the week, once there is one: the blue card. */
.pz--blue .stat--star:not(.stat--empty) { background: var(--acc-grad) !important; border-color: transparent; color: var(--on-acc); box-shadow: var(--acc-glow); }
.pz--blue .stat--star:not(.stat--empty) .stat__badge { background: var(--on-acc-tile); color: var(--on-acc); }
.pz--blue .stat--star:not(.stat--empty) .stat__note { color: var(--on-acc-soft); }
.pz--blue .stat--empty .stat__name { color: var(--muted); font-weight: 500; }

.pz--blue .teamcard { padding: 20px; }
.pz--blue .teamcard li { background: var(--panel); border-radius: 14px; }
.pz--blue .teamcard b { font-size: 14px; }
.pz--blue .teamcard em { font-size: 12.5px; }
.pz--blue .avatar { background: var(--acc-pale) !important; color: var(--acc-ink) !important; font-weight: 600; font-size: 17px; }

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

.pz--blue .cat { min-height: 0; padding: 20px; gap: 4px; }
.pz--blue .cat .badge { width: 42px; height: 42px; margin-bottom: 12px; }
.pz--blue .cat__label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.pz--blue .cat__value { font-size: 18px; }
.pz--blue .cat__note { font-size: 13px; color: var(--ink-soft); }

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

.pz--blue .week { gap: 12px; }
.pz--blue .week__day { padding: 12px; }
.pz--blue .week__name { width: auto; height: auto; padding: 6px 14px; border-radius: 999px; background: var(--panel); font-size: 13.5px; font-weight: 600; }
.pz--blue .week__day.is-today { border-color: transparent; box-shadow: 0 0 0 2px var(--acc), var(--shadow-sm); }
.pz--blue .week__day.is-today .week__name { background: var(--acc-grad); color: var(--on-acc); }
.pz--blue .week__club { background: var(--panel) !important; border: 0; border-radius: 12px; padding: 10px 12px; }
.pz--blue .week__club b { font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.pz--blue .week__club b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); flex: none; }
.pz--blue .week__club em { font-size: 12.5px; }
.pz--blue .week__club small { font-size: 11.5px; font-weight: 500; }
.pz--blue .week__none { border: 1.5px dashed var(--line-strong); font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------- letters */

.pz--blue .box { padding: 14px; }
.pz--blue .row { padding: 10px 12px; border-radius: 14px; }
.pz--blue .row:hover { background: var(--panel); }
.pz--blue .row .badge--sm { width: 40px; height: 40px; border-radius: 11px; }
.pz--blue .row .badge { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .row__text b { font-size: 14.5px; }
.pz--blue .row__text em { font-size: 12.5px; }
.pz--blue .rows .chip, .pz--blue .row .chip { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .older summary, .pz--blue .morepill { background: var(--panel); font-weight: 600; font-size: 13.5px; }
.pz--blue .older summary span, .pz--blue .morepill span { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .oldletter { background: var(--panel) !important; border: 0; border-radius: 14px; }

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

.pz--blue .seg { background: var(--panel); }
.pz--blue .seg a { font-weight: 600; font-size: 13.5px; }
.pz--blue .seg a.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 36, 55, .08), 0 0 0 1px var(--line); }
.pz--blue .drow { padding: 8px 10px; }
.pz--blue .dtile { background: var(--card) !important; border: 1px solid var(--line-strong); border-radius: 12px; }
.pz--blue .dtile em { color: var(--acc-ink); font-weight: 600; font-size: 11px; }
.pz--blue .drow.is-next { background: var(--acc-pale); box-shadow: none; border-radius: 14px; padding: 12px; }
.pz--blue .drow.is-next .dtile { background: var(--acc-grad) !important; border-color: transparent; }
.pz--blue .drow.is-next .dtile em, .pz--blue .drow.is-next .dtile b { color: var(--on-acc); }
.pz--blue .drow.is-next .chip { background: var(--card); color: var(--acc-ink); }
.pz--blue .mgrid__day { background: var(--panel); }
.pz--blue .mgrid__day.has-events { background: var(--acc-pale); }
.pz--blue .mgrid__day span { color: var(--acc-ink); font-weight: 600; }
.pz--blue .mgrid__day.is-today { outline-color: var(--acc); }
.pz--blue .calbar__step { background: var(--panel); }
.pz--blue .addcal { border-top: 1px solid var(--line); }
.pz--blue .addcal p { font-weight: 400; color: var(--muted); font-size: 13px; }
.pz--blue .addcal p a { color: var(--acc-ink); }

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

.pz--blue .work { padding: 20px; }
.pz--blue .work__head h3 { font-size: 16px; }
.pz--blue .work .badge { width: 42px; height: 42px; }
.pz--blue .words li { background: var(--panel) !important; box-shadow: none; border-radius: 12px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 9px 15px; }

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

.pz--blue .topic { padding: 16px; }
.pz--blue .topic__list details { background: var(--panel); box-shadow: none; border-radius: 14px; padding: 14px 16px; }
.pz--blue .topic__list summary { font-size: 14px; }
.pz--blue .topic__list summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
.pz--blue .topic__list summary::after {
  content: "+"; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--card); color: var(--ink-soft); font-size: 16px; line-height: 1;
}
.pz--blue .topic__list details[open] { background: var(--acc-pale); }
.pz--blue .topic__list details[open] summary::after { content: "–"; color: var(--acc-ink); }
.pz--blue .topic__list p { font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

/* The learning map: the blue card, the season drawn faintly in white. */
.pz--blue .mapcard,
:root[data-theme="dark"] .pz--blue .mapcard {
  background: var(--acc-grad) !important; color: var(--on-acc);
  border: 0; box-shadow: var(--acc-glow);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--blue .mapcard { background: var(--acc-grad) !important; color: var(--on-acc); }
}
.pz--blue .mapcard__scene { color: var(--on-acc); opacity: .12; }
.pz--blue .mapcard__kicker { color: var(--on-acc-soft) !important; font-weight: 500; font-size: 12.5px; }
.pz--blue .mapcard__topic { font-weight: 500; font-size: 13.5px; opacity: .9; }
.pz--blue .mapcard__go,
:root[data-theme="dark"] .pz--blue .mapcard__go {
  background: #fff; color: var(--acc-on-white) !important; font-weight: 600; font-size: 13.5px;
  box-shadow: 0 4px 12px rgba(15, 30, 80, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--blue .mapcard__go { color: var(--acc-on-white) !important; }
}

.pz--blue .helpcard { padding: 16px; }
.pz--blue .helpcard .badge, .pz--blue .stack .badge { background: var(--acc-pale) !important; color: var(--acc-ink) !important; }

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

.pz--blue .book { padding: 12px 12px 14px; }
.pz--blue .book__cover { background: var(--panel); border-radius: 12px; }
.pz--blue .book b { font-size: 13.5px; font-weight: 500; }

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

.pz--blue .post { min-height: 300px; padding: 18px; }
.pz--blue .post:not(.post--photo) { color: var(--ink); }
.pz--blue .post h3 { font-size: 16px; }
.pz--blue .post__body { font-weight: 400; font-size: 13.5px; }
.pz--blue .post .chip--white { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .post--photo { border: 0; color: #fff; background: var(--acc-grad) !important; }
.pz--blue .post--photo .chip--white { background: rgba(255, 255, 255, .92); color: var(--ink); }
/* The newest post, if it has no photo, is the blue card. */
.pz--blue .grid--diary > .post:first-child:not(.post--photo) {
  position: relative; isolation: isolate;
  background: var(--acc-grad) !important; border-color: transparent; color: var(--on-acc); box-shadow: var(--acc-glow);
}
.pz--blue .grid--diary > .post:first-child:not(.post--photo)::after {
  content: ""; position: absolute; right: -60px; top: -70px; z-index: -1;
  width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .08);
}
.pz--blue .grid--diary > .post:first-child:not(.post--photo) .chip--white { background: var(--on-acc-tile); color: var(--on-acc); }

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

.pz--blue .menu__day { padding: 16px; }
.pz--blue .menu__name { font-size: 14px; }
.pz--blue .menu__day p { font-size: 13.5px; }
.pz--blue .menu__day p + p { font-size: 13px; }
.pz--blue .menu__day.is-today { border-color: transparent; box-shadow: 0 0 0 2px var(--acc), var(--shadow-sm); }
.pz--blue .menu__day.is-today .menu__name { color: var(--acc-ink); }
.pz--blue .menu__when { background: var(--acc-grad); color: var(--on-acc); font-weight: 600; font-size: 11px; }

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

.pz--blue .ask { padding: 20px 12px 18px; }
.pz--blue .ask .badge { width: 52px; height: 52px; background: var(--acc-pale) !important; color: var(--acc-ink) !important; }
.pz--blue .ask b { font-size: 14px; }
.pz--blue .ask em { font-size: 12.5px; }
.pz--blue a.ask:hover { border-color: var(--line-strong); }

.pz--blue .ptfa { padding: 22px; }
.pz--blue .ptfa .badge { background: var(--acc-pale) !important; color: var(--acc-ink) !important; }
.pz--blue .ptfa h3 { font-size: 17px; }
.pz--blue .ptfa p { color: var(--ink-soft); font-size: 13.5px; }
.pz--blue .ptfa .chip--white { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .ptfa .btn { background: var(--acc-grad); color: var(--on-acc); box-shadow: var(--acc-glow); }

.pz--blue .foot { font-weight: 500; font-size: 13px; }

/* ---------------------------------------------------- tablet and phone */

@media (max-width: 760px) {
  .pz--blue { padding: 0; }
  .pz--blue .app { padding: 6px 16px 110px; }
  .pz--blue .nav { height: 64px; }
  .pz--blue .hello { padding: 14px 0 18px; }
  .pz--blue .hello h1 { font-size: 28px; }
  .pz--blue .glance__day:first-child { margin-bottom: 12px; }
  .pz--blue .glance__letter { margin-bottom: 12px; }
  .pz--blue .glance__coming { font-size: 13.5px; font-weight: 400; }
  .pz--blue .sec { margin-top: 38px; }
  .pz--blue .sec__title { font-size: 20px; }

  /* The classes along the top: the chosen one is the blue disc. */
  .pz--blue .navclasses__one { background: transparent; color: var(--ink-soft); opacity: .75; }
  .pz--blue .navclasses__one.is-on { background: var(--acc-grad) !important; color: var(--on-acc); opacity: 1; box-shadow: var(--acc-glow); }

  .pz--blue .stat { min-height: 180px; padding: 16px; }
  .pz--blue .grid--stats > .stat--lilac { min-height: 0; }
  .pz--blue .termbar { padding: 18px 16px 14px; }
  .pz--blue .termweeks__cell { height: 28px; border-radius: 7px; }
  .pz--blue .termweeks__cell--current { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--acc); }

  .pz--blue .tabbar { background: color-mix(in srgb, var(--card) 88%, transparent); border: var(--edge); box-shadow: 0 10px 30px rgba(27, 36, 55, .16); }
  .pz--blue .tabbar a { font-weight: 500; font-size: 11.5px; }
  .pz--blue .tabbar a.is-on { background: var(--acc-pale); color: var(--acc-ink); font-weight: 600; }
}


/* ====================================================================
   Look 5: Blue with more colour.

   The same page, but each kind of thing has its own colour: blue for the
   day, green for learning and things done, sunshine for the star and
   lunch, sky for dates and kit, rose for letters and the Friends. Each
   colour has a pale tint for icon tiles, a strong shade for text and a
   gradient for its one feature card. No purple, no orange.
   ==================================================================== */

.pz--colour {
  --c-blue: #3A6FF0;   --c-blue-pale: #EDF2FF;  --c-blue-ink: #2A55C7;
  --c-green: #18A874;  --c-green-pale: #E4F6EE; --c-green-ink: #11744F;
  --c-sun: #F2B312;    --c-sun-pale: #FFF5D6;   --c-sun-ink: #8A6200;
  --c-sky: #1E9FE0;    --c-sky-pale: #E3F4FD;   --c-sky-ink: #11709F;
  --c-rose: #E5487F;   --c-rose-pale: #FDE8F0;  --c-rose-ink: #B02A5C;

  --g-blue:  linear-gradient(140deg, #3A6FF0 0%, #4A8BFF 100%);
  --g-green: linear-gradient(140deg, #0F9E6E 0%, #2CC28B 100%);
  --g-sun:   linear-gradient(140deg, #FFC52E 0%, #FFD966 100%);
  --g-sky:   linear-gradient(140deg, #128ED2 0%, #39B6F0 100%);
  --g-rose:  linear-gradient(140deg, #DE3D78 0%, #F06A9B 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--colour {
    --c-blue-pale: #1C2848; --c-blue-ink: #92B2FF;
    --c-green-pale: #123227; --c-green-ink: #6FDCAE;
    --c-sun-pale: #33290F;   --c-sun-ink: #F6CD5B;
    --c-sky-pale: #10293A;   --c-sky-ink: #7CCBF5;
    --c-rose-pale: #3A1A28;  --c-rose-ink: #F59ABD;
  }
}
:root[data-theme="dark"] .pz--colour {
  --c-blue-pale: #1C2848; --c-blue-ink: #92B2FF;
  --c-green-pale: #123227; --c-green-ink: #6FDCAE;
  --c-sun-pale: #33290F;   --c-sun-ink: #F6CD5B;
  --c-sky-pale: #10293A;   --c-sky-ink: #7CCBF5;
  --c-rose-pale: #3A1A28;  --c-rose-ink: #F59ABD;
}

/* A tile in a given colour: .pz--colour [tone] sets --t, --t-pale, --t-ink. */
.pz--colour .t-blue  { --t: var(--c-blue);  --t-pale: var(--c-blue-pale);  --t-ink: var(--c-blue-ink);  --t-grad: var(--g-blue); }
.pz--colour .t-green { --t: var(--c-green); --t-pale: var(--c-green-pale); --t-ink: var(--c-green-ink); --t-grad: var(--g-green); }
.pz--colour .t-sun   { --t: var(--c-sun);   --t-pale: var(--c-sun-pale);   --t-ink: var(--c-sun-ink);   --t-grad: var(--g-sun); }
.pz--colour .t-sky   { --t: var(--c-sky);   --t-pale: var(--c-sky-pale);   --t-ink: var(--c-sky-ink);   --t-grad: var(--g-sky); }
.pz--colour .t-rose  { --t: var(--c-rose);  --t-pale: var(--c-rose-pale);  --t-ink: var(--c-rose-ink);  --t-grad: var(--g-rose); }

/* The class picker: each class its own colour. */
.pz--colour .classtile--0 { --k: var(--c-rose);  --k-pale: var(--c-rose-pale);  --k-ink: var(--c-rose-ink);  --k-grad: var(--g-rose); }
.pz--colour .classtile--1 { --k: var(--c-sun);   --k-pale: var(--c-sun-pale);   --k-ink: var(--c-sun-ink);   --k-grad: var(--g-sun); }
.pz--colour .classtile--2 { --k: var(--c-green); --k-pale: var(--c-green-pale); --k-ink: var(--c-green-ink); --k-grad: var(--g-green); }
.pz--colour .classtile--3 { --k: var(--c-blue);  --k-pale: var(--c-blue-pale);  --k-ink: var(--c-blue-ink);  --k-grad: var(--g-blue); }
.pz--colour .classtile__icon { background: var(--k-pale) !important; color: var(--k-ink) !important; }
.pz--colour .classtile.is-on { background: var(--k-grad) !important; }
.pz--colour .classtile--1.is-on { color: #3D2C00; }
.pz--colour .classtile--1.is-on .classtile__icon { color: #3D2C00 !important; background: rgba(255, 255, 255, .45) !important; }
@media (max-width: 760px) {
  .pz--colour .navclasses__one--0.is-on { background: var(--g-rose) !important; }
  .pz--colour .navclasses__one--1.is-on { background: var(--g-sun) !important; color: #3D2C00; }
  .pz--colour .navclasses__one--2.is-on { background: var(--g-green) !important; }
  .pz--colour .navclasses__one--3.is-on { background: var(--g-blue) !important; }
}

/* Day at a glance: the icons in their own colours. The day card stays blue. */
.pz--colour .glance__icon--sun   { background: var(--c-sun-pale);   color: var(--c-sun-ink); }
.pz--colour .glance__icon--sky   { background: var(--c-sky-pale);   color: var(--c-sky-ink); }
.pz--colour .glance__icon--mint  { background: var(--c-green-pale); color: var(--c-green-ink); }
.pz--colour .glance__icon--peach { background: var(--c-rose-pale);  color: var(--c-rose-ink); }
.pz--colour .glance__icon--lilac { background: var(--c-blue-pale);  color: var(--c-blue-ink); }
.pz--colour .glance__letter .glance__icon--lilac { background: var(--c-rose-pale) !important; color: var(--c-rose-ink); }
.pz--colour .glance__date { background: var(--c-sky-pale); }
.pz--colour .glance__date b, .pz--colour .glance__date em { color: var(--c-sky-ink); }
.pz--colour .glance__all { color: var(--c-sky-ink); }

/* Term bar: green, filling up as the term goes. */
.pz--colour .termbar { --done: var(--c-green); --doneSoft: var(--c-green-pale); }
.pz--colour .termweeks__cell--done, .pz--colour .termweeks__cell--current { background: var(--g-green); }
.pz--colour .termweeks__cell--current { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--c-green); }
.pz--colour .termbar__chip { background: var(--c-green-pale); color: var(--c-green-ink); }
.pz--colour .termweeks__label.is-break { color: var(--c-green-ink); }

/* The tiles: star in sunshine, the countdown in sky, letters in rose. */
.pz--colour .stat--star .stat__badge { background: var(--c-sun-pale); color: var(--c-sun-ink); }
.pz--colour .stat--star:not(.stat--empty) { background: var(--g-sun) !important; color: #3D2C00; box-shadow: 0 14px 30px rgba(242, 179, 18, .3); }
.pz--colour .stat--star:not(.stat--empty) .stat__badge { background: rgba(255, 255, 255, .5); color: #6B4C00; }
.pz--colour .stat--star:not(.stat--empty) .stat__note { color: rgba(61, 44, 0, .75); }
.pz--colour .stat--peach .ring__bar { stroke: var(--c-sky) !important; }
.pz--colour .stat--peach .ring__in { color: var(--c-sky-ink) !important; }
.pz--colour .stat--lilac .ring__bar { stroke: var(--c-rose) !important; }
.pz--colour .stat--lilac .ring__in { color: var(--c-rose-ink) !important; }
.pz--colour .avatar--0 { background: var(--c-blue-pale) !important;  color: var(--c-blue-ink) !important; }
.pz--colour .avatar--1 { background: var(--c-green-pale) !important; color: var(--c-green-ink) !important; }
.pz--colour .avatar--2 { background: var(--c-rose-pale) !important;  color: var(--c-rose-ink) !important; }
.pz--colour .avatar--3 { background: var(--c-sun-pale) !important;   color: var(--c-sun-ink) !important; }

/* At home: kit in sky, reading in blue, spellings in green, maths in sunshine. */
.pz--colour .badge--sky    { background: var(--c-sky-pale);   color: var(--c-sky-ink); }
.pz--colour .badge--lilac  { background: var(--c-blue-pale);  color: var(--c-blue-ink); }
.pz--colour .badge--mint   { background: var(--c-green-pale); color: var(--c-green-ink); }
.pz--colour .badge--peach  { background: var(--c-sun-pale);   color: var(--c-sun-ink); }
.pz--colour .badge--butter { background: var(--c-green-pale); color: var(--c-green-ink); }
.pz--colour .badge--pink   { background: var(--c-rose-pale);  color: var(--c-rose-ink); }
.pz--colour .badge--white  { background: var(--c-rose-pale);  color: var(--c-rose-ink); }

/* Clubs: green, and each club its own dot. */
.pz--colour .week__day.is-today { box-shadow: 0 0 0 2px var(--c-green), var(--shadow-sm); }
.pz--colour .week__day.is-today .week__name { background: var(--g-green); }
.pz--colour .week__club--0 b::before { background: var(--c-green); }
.pz--colour .week__club--1 b::before { background: var(--c-sky); }
.pz--colour .week__club--2 b::before { background: var(--c-rose); }

/* Letters: rose. */
.pz--colour .row .badge--lilac { background: var(--c-rose-pale);  color: var(--c-rose-ink); }
.pz--colour .row .badge--sky   { background: var(--c-sky-pale);   color: var(--c-sky-ink); }
.pz--colour .row .badge--peach { background: var(--c-sun-pale);   color: var(--c-sun-ink); }
.pz--colour .row .badge--mint  { background: var(--c-green-pale); color: var(--c-green-ink); }
.pz--colour .rows .chip, .pz--colour .row .chip { background: var(--c-rose-pale); color: var(--c-rose-ink); }
.pz--colour .older summary span, .pz--colour .morepill span { background: var(--c-rose-pale); color: var(--c-rose-ink); }

/* Dates: sky. */
.pz--colour .dtile em { color: var(--c-sky-ink); }
.pz--colour .drow.is-next { background: var(--c-sky-pale); }
.pz--colour .drow.is-next .dtile { background: var(--g-sky) !important; }
.pz--colour .drow.is-next .chip { color: var(--c-sky-ink); }
.pz--colour .mgrid__day.has-events { background: var(--c-sky-pale); }
.pz--colour .mgrid__day span { color: var(--c-sky-ink); }
.pz--colour .mgrid__day.is-today { outline-color: var(--c-sky); }

/* This week's work: spellings green, maths sunshine. */
.pz--colour .work--butter .words li { background: var(--c-green-pale) !important; color: var(--c-green-ink); }
.pz--colour .work--sky .words li { background: var(--c-sun-pale) !important; color: var(--c-sun-ink); }
.pz--colour .work--sky .badge { background: var(--c-sun-pale); color: var(--c-sun-ink); }

/* Learning: green, the map card in the green gradient. */
.pz--colour .topic__list .tone-0 summary::before { background: var(--c-blue); }
.pz--colour .topic__list .tone-1 summary::before { background: var(--c-rose); }
.pz--colour .topic__list .tone-2 summary::before { background: var(--c-green); }
.pz--colour .topic__list .tone-3 summary::before { background: var(--c-sun); }
.pz--colour .topic__list .tone-4 summary::before { background: var(--c-sky); }
.pz--colour .topic__list details[open] { background: var(--c-green-pale); }
.pz--colour .topic__list details[open] summary::after { color: var(--c-green-ink); }
.pz--colour .mapcard,
:root[data-theme="dark"] .pz--colour .mapcard { background: var(--g-green) !important; box-shadow: 0 14px 30px rgba(15, 158, 110, .28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--colour .mapcard { background: var(--g-green) !important; }
}
.pz--colour .mapcard__go { color: #0B7A54 !important; }
.pz--colour .helpcard li:nth-child(5n+1) .badge { background: var(--c-green-pale) !important; color: var(--c-green-ink) !important; }
.pz--colour .helpcard li:nth-child(5n+2) .badge { background: var(--c-sky-pale) !important;   color: var(--c-sky-ink) !important; }
.pz--colour .helpcard li:nth-child(5n+3) .badge { background: var(--c-blue-pale) !important;  color: var(--c-blue-ink) !important; }
.pz--colour .helpcard li:nth-child(5n+4) .badge { background: var(--c-sun-pale) !important;   color: var(--c-sun-ink) !important; }
.pz--colour .helpcard li:nth-child(5n+5) .badge { background: var(--c-rose-pale) !important;  color: var(--c-rose-ink) !important; }

/* Diary: the three newest posts each take a gradient. */
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(1) { background: var(--g-blue) !important; }
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(2),
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(3) {
  position: relative; isolation: isolate; border-color: transparent; color: #fff;
}
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(2) { background: var(--g-green) !important; box-shadow: 0 14px 30px rgba(15, 158, 110, .24); }
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(3) { background: var(--g-rose) !important; box-shadow: 0 14px 30px rgba(222, 61, 120, .24); }
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(2) .chip--white,
.pz--colour .grid--diary > .post:not(.post--photo):nth-child(3) .chip--white { background: rgba(255, 255, 255, .2); color: #fff; }

/* Diary photos still loading show the post's colour underneath. */
.pz--colour .grid--diary > .post--photo:nth-child(3n+2) { background: var(--g-green) !important; }
.pz--colour .grid--diary > .post--photo:nth-child(3n+3) { background: var(--g-rose) !important; }

/* Dinners: sunshine for today. */
.pz--colour .menu__day.is-today { box-shadow: 0 0 0 2px var(--c-sun), var(--shadow-sm); }
.pz--colour .menu__day.is-today .menu__name { color: var(--c-sun-ink); }
.pz--colour .menu__when { background: var(--g-sun); color: #3D2C00; }

/* Who to ask: a colour each. */
.pz--colour .asks > :nth-child(1) .badge { background: var(--c-rose-pale) !important;  color: var(--c-rose-ink) !important; }
.pz--colour .asks > :nth-child(2) .badge { background: var(--c-blue-pale) !important;  color: var(--c-blue-ink) !important; }
.pz--colour .asks > :nth-child(3) .badge { background: var(--c-sun-pale) !important;   color: var(--c-sun-ink) !important; }
.pz--colour .asks > :nth-child(4) .badge { background: var(--c-green-pale) !important; color: var(--c-green-ink) !important; }
.pz--colour .asks > :nth-child(5) .badge { background: var(--c-sky-pale) !important;   color: var(--c-sky-ink) !important; }

/* The Friends of Weeton: the rose card. */
.pz--colour .ptfa {
  position: relative; isolation: isolate;
  background: var(--g-rose) !important; border-color: transparent; color: #fff;
  box-shadow: 0 14px 30px rgba(222, 61, 120, .26);
}
.pz--colour .ptfa h3 { color: #fff; }
.pz--colour .ptfa p { color: rgba(255, 255, 255, .88); }
.pz--colour .ptfa .badge { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.pz--colour .ptfa .chip--white { background: rgba(255, 255, 255, .2); color: #fff; }
.pz--colour .ptfa .btn { background: #fff; color: var(--c-rose-ink); box-shadow: 0 4px 12px rgba(80, 10, 40, .2); }
.pz--colour .stack .box .badge { background: var(--c-green-pale) !important; color: var(--c-green-ink) !important; }

@media (max-width: 760px) {
  .pz--colour .tabbar a.is-on { background: var(--c-blue-pale); color: var(--c-blue-ink); }
}

/* Phone: the class icons along the top keep their colours in look 5. */
@media (max-width: 760px) {
  .pz--colour .navclasses__one--0:not(.is-on) { color: var(--c-rose-ink); }
  .pz--colour .navclasses__one--1:not(.is-on) { color: var(--c-sun-ink); }
  .pz--colour .navclasses__one--2:not(.is-on) { color: var(--c-green-ink); }
  .pz--colour .navclasses__one--3:not(.is-on) { color: var(--c-blue-ink); }
}

/* "+2 more this week" on the countdown tile, in Modern. */
.pz--blue .stat__more { background: var(--acc-pale); color: var(--acc-ink); font-weight: 600; font-size: 12.5px; }
.pz--colour .stat--peach .stat__more { background: var(--c-sky-pale); color: var(--c-sky-ink); }


/* ---------------------------------------------------- the year's diary */

.pz--blue .diaryback { background: var(--card); border: var(--edge); font-weight: 600; font-size: 13.5px; }
/* On its own under the diary, not inside a card, so it needs a card of its own to show. */
.pz--blue .morepill { background: var(--card); border: var(--edge); }
/* Inside a card (See all updates), it matches Older letters beside it. */
.pz--blue .box .morepill { background: var(--panel); border: 0; }
.pz--blue .dpost { border: var(--edge); }
.pz--blue .dpost--text { background: var(--card); }
.pz--blue .dpost h3 { font-size: 17px; font-weight: 600; }
.pz--blue .dpost__date { font-weight: 600; color: var(--acc-ink); }
.pz--blue .dpost p { font-weight: 400; font-size: 14px; }

/* ========================================= updates and hearts (Modern) */

.pz--blue .note__body { font-weight: 500; font-size: 14.5px; }
.pz--blue .note__meta b { font-weight: 600; }
.pz--blue .note__meta { font-weight: 500; font-size: 13px; }
.pz--blue:not(.pz--colour) .note .badge:not(.badge--alert) { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .note .badge--sm { width: 40px; height: 40px; border-radius: 11px; }
.pz--blue .note .badge--alert { background: var(--alert-pale); color: var(--alert); }
.pz--blue .note__meta .chip { background: var(--acc-pale); color: var(--acc-ink); font-weight: 600; }
.pz--blue .note__file { font-weight: 600; }
.pz--blue .urgent { border: 1px solid color-mix(in srgb, var(--alert) 22%, transparent); }
.pz--blue .urgent__icon { border-radius: 12px; }
.pz--blue .urgent__go { font-weight: 600; }
.pz--blue .urgent__body { font-weight: 600; font-size: 16px; }
.pz--blue .np-lead, .pz--blue .np-steps li { font-weight: 500; }
.pz--blue .np-class { font-weight: 600; }
.pz--blue .np-class__icon { color: var(--acc-ink); }
.pz--blue:not(.pz--colour) .np-class__icon { background: var(--acc-pale) !important; }
/* The heart fills in the family's chosen colour. */
.pz--blue .heart.is-on { color: var(--acc); }
.pz--colour .heart.is-on { color: #E5487F; }

/* New from school and the notifications row (Modern) */
.pz--blue .fresh, .pz--blue .notifyrow { border: var(--edge); }
.pz--blue .fresh__icon { background: var(--acc-pale); color: var(--acc-ink); border-radius: 10px; }
.pz--blue .fresh__text b { font-weight: 600; }
.pz--blue .fresh__num { letter-spacing: -.03em; }
.pz--blue .row .badge--alert { background: var(--alert-pale); color: var(--alert); }
.pz--blue .msg { border: var(--edge); }
.pz--blue .msg__from b { font-weight: 600; }
.pz--blue .msg__from em { font-weight: 500; }
.pz--blue .msg__body { font-weight: 400; font-size: 16px; line-height: 1.65; }
.pz--blue .msg__title { font-weight: 600; font-size: 17px; letter-spacing: 0; }
.pz--blue .urgent__title { font-weight: 600; }
.pz--blue .urgent__title + .urgent__body { font-weight: 400; }
.pz--blue .msg__file { font-weight: 600; }
.pz--blue .letter__hint { font-weight: 500; }
.pz--blue .subback { border: var(--edge); box-shadow: var(--shadow-sm); font-weight: 600; font-size: 14.5px; }
.pz--blue .subback span { padding-top: 2px; }
.pz--blue .ptr { border: var(--edge); }
.pz--blue .post__count { font-weight: 600; }
.pz--blue .post.post--more { background: var(--card); border: var(--edge); color: var(--ink); }
.pz--blue .post--more:hover { background: var(--panel); }
.pz--blue .post__moreicon { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .post__moretext b { font-size: 16px; font-weight: 600; }
.pz--blue .post__moretext em { font-weight: 500; }
.pz--blue .grid--diary > .post { min-height: 260px; }
.pz--blue .diarymonth__sum { border: var(--edge); }
.pz--blue .diarymonth__name b { font-size: 17px; }
.pz--blue .diarymonth__name em { font-weight: 500; }
.pz--blue .dpage__heart { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .ptr.is-ready, .pz--blue .ptr.is-loading { color: var(--acc); }
@media (max-width: 520px) { .pz--blue .msg--list .msg__from .chip { background: var(--acc); } }
.pz--blue .btn--soft { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue:not(.pz--colour) .msg .badge:not(.badge--alert) { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .msg .badge--alert { background: var(--alert); color: #fff; }
.pz--blue .fresh__text em { font-weight: 500; }
.pz--blue .uptodate__tick { background: var(--acc-pale); color: var(--acc-ink); }
.pz--blue .uptodate b { font-weight: 600; }
.pz--blue .uptodate em { font-weight: 500; }
.pz--blue .yearcheck { border: var(--edge); }
.pz--blue .yearcheck__icon, .pz--blue .fresh--letters .fresh__icon { background: var(--acc-pale); color: var(--acc-ink); border-radius: 10px; }
.pz--blue .yearcheck__text b { font-weight: 600; }
.pz--blue .yearcheck__text em { font-weight: 500; }
.pz--blue .yearcheck__btn, .pz--blue .yearcheck__ok { font-weight: 600; }
.pz--blue .yearcheck__btn { background: var(--acc); color: #fff; }
.pz--blue .notifyrow__go { font-weight: 600; }
.pz--blue:not(.pz--colour) .notifyrow .badge { background: var(--acc-pale); color: var(--acc-ink); }

/* The parents' menu and Settings, in Modern. */
.pz--blue .pmenu .pmenu__nav a { font-weight: 500; }
.pz--blue .pmenu .pmenu__nav a.is-on { background: var(--acc-pale, var(--lilac)); }
.pz--blue .pmenu .pmenu__brand b { font-weight: 600; }
.pz--blue .pmenu .pmenu__brand em, .pz--blue .pmenu .pmenu__label, .pz--blue .pmenu .pmenu__team,
.pz--blue .pmenu .pmenu__class { font-weight: 500; }
.pz--blue .setseg button { font-weight: 500; }
.pz--blue .setseg button[aria-checked="true"] { font-weight: 600; background: var(--acc-pale); color: var(--acc-ink); box-shadow: none; }

/* Pages inside a class, in Modern: the same weights as the class page. */
.pz--blue .nav__links--sub a:first-child:not(.is-on) { font-weight: 500; }
.pz--blue .nav__links--sub a.is-on { background: var(--acc-pale); color: var(--acc-ink); font-weight: 600; }
.pz--blue .msg__meta { font-weight: 500; }
.pz--blue .msg__meta b { font-weight: 600; }
.pz--blue .msg__dot { background: var(--acc); }
.pz--blue .msg--urgent .msg__dot, .msg--urgent .msg__dot { background: var(--alert); }
.pz--blue .msg--urgent { border-color: color-mix(in srgb, var(--alert) 22%, transparent); }
.pz--blue .setcard { border: var(--edge); }
.pz--blue .setcard__head p, .pz--blue .setday__note, .pz--blue .np-note { font-weight: 400; }
.pz--blue .setcode__row input { font-weight: 500; }
.pz--blue .setcode__go, .pz--blue .stylepick__done { font-weight: 600; }
.pz--blue .stylepick__label { font-weight: 600; }
.pz--blue .np-off, .pz--blue .np-check summary { font-weight: 500; }
.pz--blue .lookcard b { font-weight: 600; }
.pz--blue .swatch { font-weight: 500; }