/* The Modern look: the Playful layout grown up for older children.
   Loaded after play.css, so it only changes what makes the difference
   between an app for a five year old and one for a ten year old: crisper
   letters, tighter corners, line icons instead of drawings, and
   calendar-style events.

   Colour is used as an accent, not a fill. Surfaces stay neutral (white
   cards on a soft grey) and colour appears in rings, icons, thin lines and
   small labels, so the page feels calm and grown up rather than loud. */

:root {
  --font-head: Outfit, "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --page:  #EEF0F3;
  --app:   #FFFFFF;
  --panel: #F5F6F8;
  --card:  #FFFFFF;
  --line:  #E6E8EC;

  --ink:      #1C1F26;
  --ink-soft: #424754;
  --muted:    #7A808C;

  /* Accent colours, a shade calmer than full strength, and the faint tints
     that go with them. */
  --mint:   #EBF6F1;  --mint-2:   #12976F;
  --peach:  #FCF1E9;  --peach-2:  #DB6C2A;
  --lilac:  #F0F0FA;  --lilac-2:  #5B5BD6;
  --sky:    #EAF3F9;  --sky-2:    #2C86C2;
  --butter: #FBF5E6;  --butter-2: #C98A16;
  --pink:   #FAEEF3;  --pink-2:   #CC4D86;

  --dark: #1C1F26; --on-dark: #FFFFFF;
  --r-xl: 24px; --r-lg: 18px; --r-md: 14px; --r-sm: 10px;
  --shadow: 0 1px 2px rgba(28, 31, 38, .04), 0 12px 32px rgba(28, 31, 38, .06);
  --shadow-sm: 0 1px 2px rgba(28, 31, 38, .05), 0 0 0 1px rgba(28, 31, 38, .045);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0F1114; --app: #16181C; --panel: #1C1F24; --card: #23262D; --line: #30343C;
    --ink: #F3F4F6; --ink-soft: #C9CCD3; --muted: #979BA6;
    --mint: #18302A; --peach: #33251C; --lilac: #25263F; --sky: #192C38; --butter: #312A1A; --pink: #33212B;
    --mint-2: #3CC596; --peach-2: #F08A4B; --lilac-2: #8C8CF0; --sky-2: #5AAEE6; --butter-2: #E2AA3A; --pink-2: #E77BAA;
    --dark: #F3F4F6; --on-dark: #16181C;
  }
}
:root[data-theme="dark"] {
  --page: #0F1114; --app: #16181C; --panel: #1C1F24; --card: #23262D; --line: #30343C;
  --ink: #F3F4F6; --ink-soft: #C9CCD3; --muted: #979BA6;
  --mint: #18302A; --peach: #33251C; --lilac: #25263F; --sky: #192C38; --butter: #312A1A; --pink: #33212B;
  --mint-2: #3CC596; --peach-2: #F08A4B; --lilac-2: #8C8CF0; --sky-2: #5AAEE6; --butter-2: #E2AA3A; --pink-2: #E77BAA;
  --dark: #F3F4F6; --on-dark: #16181C;
}

/* Letters: headings tighter, no bounce. */
.pz--modern h1, .pz--modern h2, .pz--modern h3 { letter-spacing: -.025em; }
.pz--modern .hello h1 { font-weight: 600; letter-spacing: -.035em; }
.pz--modern .sec__title { font-weight: 600; letter-spacing: -.03em; }

/* No decorative shapes. */
.pz--modern .stat__deco, .pz--modern .topic__deco,
.pz--modern .ptfa__deco, .pz--modern .starcard__deco { display: none; }

/* The light grey "selected" used everywhere instead of a dark fill. */
.pz--modern .nav__links a:first-child,
.pz--modern .seg a.is-active,
.pz--modern .trial__looks a.is-on {
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(28,31,38,.08), 0 0 0 1px var(--line);
}
.pz--modern .seg, .pz--modern .trial__looks { background: var(--panel); }
.pz--modern .nav__links a:first-child { background: var(--panel); box-shadow: none; }
.pz--modern .nav__links a { font-weight: 600; }

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

.pz--modern .brand__mark { background: var(--lilac); color: var(--lilac-2); border-radius: 14px; }

/* Class picker: white tiles, the icon in a soft tint of its colour. The
   chosen class gets a coloured outline rather than a dark block. */
.pz--modern .classtile {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 18px; font-weight: 700; color: var(--ink-soft);
}
.pz--modern .classtile__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.pz--modern .classtile--0 .classtile__icon { background: var(--pink);  color: var(--pink-2); }
.pz--modern .classtile--1 .classtile__icon { background: var(--peach); color: var(--peach-2); }
.pz--modern .classtile--2 .classtile__icon { background: var(--mint);  color: var(--mint-2); }
.pz--modern .classtile--3 .classtile__icon { background: var(--sky);   color: var(--sky-2); }
.pz--modern .classtile.is-on { border-color: var(--ink); color: var(--ink); box-shadow: var(--shadow); }

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

/* White tiles. The colour is in the ring, the icon and a faint wash in
   one corner. */
.pz--modern .stat { background: var(--card) !important; box-shadow: var(--shadow-sm); }
.pz--modern .stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 100% 0%, var(--wash) 0, transparent 60%);
}
.pz--modern .stat--mint  { --wash: var(--mint); }
.pz--modern .stat--peach { --wash: var(--peach); }
.pz--modern .stat--lilac { --wash: var(--lilac); }
.pz--modern .stat__num { font-weight: 600; letter-spacing: -.04em; }
.pz--modern .stat__label { font-weight: 700; }
.pz--modern .stat__note { color: var(--muted); }
.pz--modern .ring__track { fill: var(--panel); stroke: var(--line); }
.pz--modern .stat--mint .ring__in  { color: var(--mint-2); }
.pz--modern .stat--peach .ring__in { color: var(--peach-2); }
.pz--modern .stat--lilac .ring__in { color: var(--lilac-2); }

.pz--modern .teamcard { background: var(--card); box-shadow: var(--shadow-sm); }
.pz--modern .teamcard li { background: var(--panel); }
.pz--modern .avatar { font-weight: 600; }
.pz--modern .avatar--0 { background: var(--peach); color: var(--peach-2); }
.pz--modern .avatar--1 { background: var(--lilac); color: var(--lilac-2); }
.pz--modern .avatar--2 { background: var(--mint);  color: var(--mint-2); }
.pz--modern .avatar--3 { background: var(--pink);  color: var(--pink-2); }

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

/* A soft tint with the icon in colour, rather than a solid block. */
.pz--modern .badge { box-shadow: none; border-radius: 12px; }
.pz--modern .badge .icon { stroke-width: 2; }
.pz--modern .badge--round { border-radius: 50%; }
.pz--modern .badge--sky    { background: var(--sky);    color: var(--sky-2); }
.pz--modern .badge--lilac  { background: var(--lilac);  color: var(--lilac-2); }
.pz--modern .badge--mint   { background: var(--mint);   color: var(--mint-2); }
.pz--modern .badge--peach  { background: var(--peach);  color: var(--peach-2); }
.pz--modern .badge--pink   { background: var(--pink);   color: var(--pink-2); }
.pz--modern .badge--butter { background: var(--butter); color: var(--butter-2); }
.pz--modern .badge--white  { background: var(--pink);   color: var(--pink-2); }

.pz--modern .chip { font-weight: 700; }
.pz--modern .chip--dark { background: var(--lilac); color: var(--lilac-2); }
.pz--modern .tag { color: var(--lilac-2); font-weight: 700; }
.pz--modern .pill { font-weight: 700; }

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

.pz--modern .daycard { box-shadow: var(--shadow-sm); }
.pz--modern .daycard h3 { font-weight: 600; letter-spacing: -.025em; }
/* Today: the same light card with a green edge, so it reads as a card. */
.pz--modern .daycard--today,
:root[data-theme="dark"] .pz--modern .daycard--today {
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--modern .daycard--today {
    background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
  }
}
.pz--modern .daycard--today .daypill,
:root[data-theme="dark"] .pz--modern .daycard--today .daypill { background: var(--mint); color: var(--mint-2); }
.pz--modern .daycard--today .daypill::before { box-shadow: none; }
.pz--modern .daycard--today .muted { color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--modern .daycard--today .daypill { background: var(--mint); color: var(--mint-2); }
}
/* The next school day: a light card marked out by a coloured edge. */
.pz--modern .daycard--next,
:root[data-theme="dark"] .pz--modern .daycard--next {
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--modern .daycard--next {
    background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
  }
}
.pz--modern .daycard--next .daypill--dark { background: var(--lilac); color: var(--lilac-2); }
.pz--modern .daycard--next .daypill--dark::before {
  content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--lilac-2);
}
.pz--modern .daycard--next .chip--white,
:root[data-theme="dark"] .pz--modern .daycard--next .chip--white { background: var(--panel); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--modern .daycard--next .chip--white { background: var(--panel); color: var(--ink); }
}
.pz--modern .daycard__icon {
  width: 92px; height: 92px; border-radius: 26px;
  display: grid; place-items: center;
  background: var(--butter); color: var(--butter-2);
}

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

/* White cards; the tinted icon carries the colour. */
.pz--modern .cat { background: var(--card); box-shadow: var(--shadow-sm); }
.pz--modern .cat__value { font-weight: 600; letter-spacing: -.02em; }

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

/* Calendar events: a coloured bar down the side, like a real timetable. */
.pz--modern .week__name { border-radius: 12px; font-weight: 600; }
.pz--modern .week__day.is-today { box-shadow: 0 0 0 1.5px var(--lilac-2); }
.pz--modern .week__day.is-today .week__name { background: var(--lilac); color: var(--lilac-2); }
.pz--modern .week__club { border-radius: 3px 10px 10px 3px; border-left: 3px solid; background: var(--panel); }
.pz--modern .week__club--0 { border-left-color: var(--lilac-2); }
.pz--modern .week__club--1 { border-left-color: var(--mint-2); }
.pz--modern .week__club--2 { border-left-color: var(--peach-2); }
.pz--modern .week__none { border-radius: 10px; }

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

.pz--modern .row__text b { font-weight: 700; }
.pz--modern .older summary span { background: var(--lilac); color: var(--lilac-2); }
.pz--modern .oldletter { background: var(--panel); border-left: 3px solid var(--lilac-2); border-radius: 3px 12px 12px 3px; }
.pz--modern .oldletter--1 { border-left-color: var(--sky-2); }
.pz--modern .oldletter--2 { border-left-color: var(--peach-2); }
.pz--modern .oldletter--3 { border-left-color: var(--mint-2); }
.pz--modern .oldletter b { font-weight: 600; }

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

.pz--modern .dtile { background: var(--card) !important; border: 1.5px solid var(--line); border-radius: 12px; }
.pz--modern .dtile em { color: var(--lilac-2); }
.pz--modern .dtile b { font-weight: 600; }
.pz--modern .drow.is-next { background: var(--panel); box-shadow: inset 3px 0 0 var(--lilac-2); border-radius: 3px var(--r-md) var(--r-md) 3px; }
.pz--modern .drow.is-next .drow__text b { font-weight: 600; }
.pz--modern .mgrid__day { border-radius: 10px; }
.pz--modern .mgrid__day.has-events { background: var(--lilac); }
.pz--modern .mgrid__day span { color: var(--lilac-2); }
.pz--modern .mgrid__day.is-today { outline-color: var(--lilac-2); }

/* -------------------------------------------------------------- work */

.pz--modern .work { background: var(--card); box-shadow: var(--shadow-sm); }
.pz--modern .work__head h3 { font-weight: 600; }
.pz--modern .work .chip--white { background: var(--panel); }
.pz--modern .words li { background: var(--panel); box-shadow: none; border-radius: 10px; font-weight: 600; }

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

.pz--modern .topic { background: var(--card); box-shadow: var(--shadow-sm); }
.pz--modern .topic__list details { background: var(--panel); border-radius: 12px; }
/* Each section is marked by a thin line of its colour down the left edge,
   in the strong shade, rather than a small bar beside the heading. */
.pz--modern .topic__list .dotty { display: none; }
.pz--modern .topic__list details { box-shadow: inset 3px 0 0 var(--tone, var(--line)); border-radius: 3px 12px 12px 3px; padding-left: 18px; }
.pz--modern .tone-0 { --tone: var(--sky-2); }
.pz--modern .tone-1 { --tone: var(--pink-2); }
.pz--modern .tone-2 { --tone: var(--mint-2); }
.pz--modern .tone-3 { --tone: var(--peach-2); }
.pz--modern .tone-4 { --tone: var(--lilac-2); }
.pz--modern .topic__map { border-radius: 14px; }

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

/* A neutral shelf so the covers bring the colour. */
.pz--modern .book { background: var(--card) !important; box-shadow: var(--shadow-sm); border-radius: 18px; }
.pz--modern .book__cover { background: var(--panel); border-radius: 12px; }
.pz--modern .book__cover img { inset: 8% 18%; width: 64%; height: 84%; }
.pz--modern .book__fake { top: 8%; height: 84%; }
.pz--modern .book b { font-weight: 600; }

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

/* Star of the week: white with a soft gold wash and a gold trophy. */
.pz--modern .starcard {
  background: radial-gradient(circle at 0% 0%, var(--butter) 0, var(--card) 70%) !important;
  color: var(--ink); box-shadow: var(--shadow-sm);
}
.pz--modern .starcard__icon {
  width: 72px; height: 72px; border-radius: 20px;
  display: grid; place-items: center;
  background: var(--butter); color: var(--butter-2);
  box-shadow: inset 0 0 0 1px rgba(201,138,22,.18);
}
.pz--modern .starcard__kicker { color: var(--butter-2); opacity: 1; }
.pz--modern .starcard h3 { font-weight: 600; letter-spacing: -.03em; }
.pz--modern .starcard p:last-child { color: var(--ink-soft); }
.pz--modern .post { border-radius: 18px; }
.pz--modern .post h3 { font-weight: 600; }
.pz--modern .post--0, .pz--modern .post--1, .pz--modern .post--2 {
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
}

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

.pz--modern .menu__day.is-today { background: var(--card); box-shadow: 0 0 0 1.5px var(--butter-2); }
.pz--modern .menu__day.is-today .menu__name { color: var(--butter-2); }
.pz--modern .menu__name { font-weight: 600; }

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

.pz--modern .ptfa { background: var(--card) !important; color: var(--ink); box-shadow: var(--shadow-sm); }
.pz--modern .ptfa p { color: var(--ink-soft); }
.pz--modern .ptfa .chip--white { background: var(--pink); color: var(--pink-2); }
.pz--modern .ptfa .btn { background: var(--pink-2); color: #fff; }
.pz--modern .ask { border-radius: 18px; }

/* --------------------------------------------------------- tab bar etc */

.pz--modern .tabbar a { font-weight: 700; }
.pz--modern .tabbar a.is-on { background: var(--panel); color: var(--lilac-2); }
.pz--modern .trial { background: var(--panel); }
.pz--modern .trial__looks a { font-weight: 700; }

/* Learning map card: neutral, the season shown in its accent colour. */
.pz--modern .mapcard,
:root[data-theme="dark"] .pz--modern .mapcard {
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--modern .mapcard { background: var(--card); color: var(--ink); }
}
.pz--modern .mapcard--autumn { --scene: var(--peach-2); }
.pz--modern .mapcard--spring { --scene: var(--mint-2); }
.pz--modern .mapcard--summer { --scene: var(--butter-2); }
.pz--modern .mapcard__scene { opacity: .16; }
.pz--modern .mapcard__kicker { color: var(--scene); opacity: 1; font-weight: 700; }
.pz--modern .mapcard__title { font-weight: 600; letter-spacing: -.03em; }
.pz--modern .mapcard__go { background: var(--panel); color: var(--ink); font-weight: 700; }
:root[data-theme="dark"] .pz--modern .mapcard__go { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pz--modern .mapcard__go { color: var(--ink); } }

/* Term bar: one calm teal all year, rather than a colour per season. */
.pz--modern .termbar { --done: #0F8A84; --doneSoft: #E2F3F1; }
:root[data-theme="dark"] .pz--modern .termbar { --done: #2DB3A8; --doneSoft: #12302E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pz--modern .termbar { --done: #2DB3A8; --doneSoft: #12302E; }
}
.pz--modern .termbar__status { font-weight: 600; letter-spacing: -.035em; }
.pz--modern .termbar__chip { font-weight: 700; color: var(--done); }
.pz--modern .termweeks__cell { border-radius: 8px; }
.pz--modern .termweeks__label { font-weight: 600; }

/* Star of the week tile: white, a gold trophy, a soft gold wash. */
.pz--modern .stat--star { --wash: var(--butter); }
.pz--modern .stat__badge {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--butter); color: var(--butter-2);
}
.pz--modern .stat__name { font-weight: 600; letter-spacing: -.03em; }

.pz--modern .menu__when { background: var(--butter-2); color: #fff; font-weight: 700; }

/* Day at a glance and top bar classes, Modern */
@media (max-width: 760px) {
  .pz--modern .navclasses__one { background: transparent; color: var(--ink-soft); }
  .pz--modern .navclasses__one.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--ink); }
}
.pz--modern .glance__when { letter-spacing: -.02em; }
.pz--modern .glance__text { font-weight: 560; letter-spacing: -.01em; }
.pz--modern .glance__text em { font-weight: 500; }
.pz--modern .glance__letter { background: var(--card); box-shadow: var(--shadow-sm); }
.pz--modern .glance__letter .glance__icon--lilac { background: var(--lilac); }
.pz--modern .glance__date b { font-weight: 600; }

/* Quieter headings, Modern: the same sizes as Playful, a touch lighter. */
.pz--modern .brand__text b,
.pz--modern .hello h1,
.pz--modern .sec__title,
.pz--modern .termbar__status,
.pz--modern .stat__name,
.pz--modern .stat__num,
.pz--modern .daycard h3,
.pz--modern .cat__value,
.pz--modern .work__head h3,
.pz--modern .starcard h3,
.pz--modern .post h3,
.pz--modern .menu__name,
.pz--modern .mapcard__title,
.pz--modern .book b { font-weight: 540; }
.pz--modern .sub, .pz--modern .box__title, .pz--modern .teamcard h3, .pz--modern .helpcard h3, .pz--modern .ptfa h3 { font-weight: 540; }
.pz--modern .stat__label { font-weight: 600; }