/* Aluma for families: the parent's widget board (parents_board.js).

   The student's Home board is a 12-column workspace with wiggling tiles and
   corner grips. This is the parent's version of the same idea, drawn as its
   own thing:

     1. A 4-column board of TILES. Every widget is one of five named sizes
        (s 1x1, m 2x1, t 1x2, l 2x2, xl a full row), set by class, so a size
        is one tap in the toolbar and never a drag. A board narrower than
        ~860px has two columns; on a phone a small tile is half the width and
        everything else the full width, with rows as tall as their content.
     2. Rows are a minimum, not a cap (minmax(170px, auto)): each size's
        content is designed to fit its tile, and if a long name ever does not,
        the row grows rather than clip it.
     3. Edit mode is a workbench, not a wiggle: the board sits on a tinted
        panel, each tile gets a dashed outline and a toolbar (grip, size
        picker, move earlier/later, remove), and its content goes inert.

   Every rule is scoped under .pboard so nothing leaks into the rest of the
   parent app. Colour comes from parents.css (--f-*); the few values no token
   carries are minted here as --pb-*. Motion stays under ~200ms and is off
   for prefers-reduced-motion (parents.css also zeroes every duration there).

   Contrast, measured (WCAG 4.5:1 for text): white on the pulse card's
   darkest teal is 6.4:1 or better and its 82% white labels 5.1:1; the alert
   cell ink #8e2433 on #ffe1dc is 6.9:1; --pb-gold-ink on --pb-gold-soft
   6.3:1; --pb-violet-ink on --pb-violet-soft 7.0:1. */

.pboard {
  --pb-gap: 16px;
  --pb-row: 170px;
  --pb-radius: var(--f-radius-card, 28px);
  --pb-inner: 14px;
  --pb-gold-soft: #fbf0cf;
  --pb-gold-ink: #6e5200;
  --pb-violet-soft: #eeeafb;
  --pb-violet-ink: #553aa6;
  --pb-alert-soft: #ffe1dc;
  --pb-alert-ink: #8e2433;
  --pb-teal-1: #1f7464;
  --pb-teal-2: #175a4e;
  --pb-teal-3: #124a40;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  container: pboard / inline-size;
}

/* ── the row above the board ──────────────────────────────────────────── */
.pb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 16px;
}
.pb-top-words { flex: 1 1 150px; min-width: 0; }
.pb-board-sub { margin-top: 4px; max-width: 62ch; color: var(--f-text-2); font-size: 14px; }
.pb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Editing: the bar with Done stays in reach while the board scrolls (an
   added widget lands at the bottom, far below it). It sits under the app's
   own sticky top bar, which is 66px tall. */
.pboard.is-editing .pb-top {
  position: sticky;
  top: 72px;
  z-index: 6;
  margin: 0 -12px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(246, 248, 242, 0.94);
  box-shadow: 0 0 0 1px var(--f-hair), 0 14px 28px -22px rgba(19, 32, 27, 0.35);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
}
@media (max-width: 559px) {
  .pboard.is-editing .pb-board-sub { font-size: 12.5px; }
}

/* ── the grid ─────────────────────────────────────────────────────────── */
.pb-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(var(--pb-row), auto);
  grid-auto-flow: row dense;
  gap: var(--pb-gap);
  transition: background-color 0.18s var(--f-ease), padding 0.18s var(--f-ease);
}
.pb-w.is-s,
.pb-ph.is-s { grid-column: span 1; grid-row: span 1; }
.pb-w.is-m,
.pb-ph.is-m { grid-column: span 2; grid-row: span 1; }
.pb-w.is-t,
.pb-ph.is-t { grid-column: span 1; grid-row: span 2; }
.pb-w.is-l,
.pb-ph.is-l { grid-column: span 2; grid-row: span 2; }
.pb-w.is-xl,
.pb-ph.is-xl { grid-column: 1 / -1; grid-row: span 1; }

/* The column count follows the board's own width, not the window's, so
   the board fits whatever page it sits in. Two columns under ~860px, and on
   a phone a small tile is half the width, everything else the full width,
   rows as tall as needed. */
@container pboard (max-width: 859px) {
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-w.is-m,
  .pb-ph.is-m,
  .pb-w.is-l,
  .pb-ph.is-l { grid-column: 1 / -1; }
}

@container pboard (max-width: 520px) {
  .pb-grid { grid-auto-rows: auto; gap: 12px; }
  .pb-w,
  .pb-ph,
  .pb-w.is-t,
  .pb-ph.is-t,
  .pb-w.is-l,
  .pb-ph.is-l,
  .pb-w.is-m,
  .pb-ph.is-m,
  .pb-w.is-xl,
  .pb-ph.is-xl { grid-column: 1 / -1; grid-row: auto; }
  .pb-w.is-s,
  .pb-ph.is-s { grid-column: span 1; grid-row: auto; min-height: 156px; }
}

/* ── a widget ─────────────────────────────────────────────────────────── */
.pb-w {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: var(--pb-inner) 18px;
  border-radius: var(--pb-radius);
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
  container: pbw / inline-size;
  transition: transform 0.19s var(--f-ease), translate 0.16s var(--f-ease),
    box-shadow 0.16s var(--f-ease), outline-color 0.16s var(--f-ease);
}
/* Only a tile that is one action as a whole lifts under the pointer (a
   small tile whose number opens the student). Everywhere else the buttons
   inside answer the hover, so nothing looks clickable that isn't. */
.pboard:not(.is-editing) .pb-w.is-action { cursor: pointer; }
.pboard:not(.is-editing) .pb-w.is-action:hover { translate: 0 -2px; box-shadow: var(--f-shadow); }
.pb-w.pb-noanim { transition: none !important; }
/* A pulse number pointing here: focus lands on the tile and it lights up. */
.pb-w:focus { outline: none; }
.pb-w:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 3px; }
.pb-w.is-flash { outline: 3px solid transparent; outline-offset: 3px; animation: pb-flash 1.3s var(--f-ease) both; }
.pb-w { scroll-margin-block: 16px; }   /* scrolled to: clear of the window's edge, ring included */

.pb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 30px; }
.pb-chip {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--f-accent-soft);
  color: var(--f-accent);
}
.pb-chip .ico { width: 17px; height: 17px; }
.pb-chip.is-danger { background: var(--f-danger-soft); color: var(--f-danger); }
.pb-chip.is-warm { background: var(--f-streak-soft); color: var(--f-streak-ink); }
.pb-chip.is-soon { background: var(--f-soon-soft); color: var(--f-soon-ink); }
.pb-chip.is-night { background: var(--f-night-soft); color: var(--f-night-ink); }
.pb-chip.is-sky { background: var(--f-sky-soft); color: var(--f-sky-ink); }
.pb-chip.is-gold { background: var(--pb-gold-soft); color: var(--pb-gold-ink); }
.pb-chip.is-violet { background: var(--pb-violet-soft); color: var(--pb-violet-ink); }
.pb-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.pb-meta {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}
.pb-meta.is-danger { background: var(--f-danger-soft); color: var(--f-danger); }
.pb-meta.is-soon { background: var(--f-soon-soft); color: var(--f-soon-ink); }
.pb-meta.is-warm { background: var(--f-streak-soft); color: var(--f-streak-ink); }
.pb-meta.is-night { background: var(--f-night-soft); color: var(--f-night-ink); }
.pb-meta.is-good { background: var(--f-accent-soft); color: var(--f-accent-soft-ink); }
.pb-meta.is-warn { background: var(--f-soon-soft); color: var(--f-soon-ink); }
/* A button in the header (Your kids: "Add a child"), where the meta sits. */
.pb-head-btn { flex: none; margin-left: auto; }
/* A one-column tile has no room beside its title; the body says the count. */
@container pbw (max-width: 300px) {
  .pb-meta { display: none; }
}

.pb-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; min-width: 0; }

/* Small text pieces the board shares with parents.css, drawn a size down. */
.pboard .due { padding: 3px 9px; font-size: 12px; }
.pboard .due .ico { width: 13px; height: 13px; }
.pboard .due.is-missing { background: var(--f-danger); color: #fff; }
.pboard .chip { padding: 3px 9px 3px 7px; font-size: 12px; }
.pboard .chip .ico { width: 13px; height: 13px; }
.pboard .badge { padding: 3px 9px; font-size: 12px; }
.pboard .badge .ico { width: 13px; height: 13px; }
.pboard .streak { padding: 4px 10px 4px 7px; font-size: 13.5px; }
.pboard .streak .ico { width: 15px; height: 15px; }

.pb-av.avatar-sm { width: 30px; height: 30px; font-size: 12.5px; }

.pb-kind {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 12px;
  font-weight: 680;
  white-space: nowrap;
}
.pb-kind.is-warm { background: var(--f-streak-soft); color: var(--f-streak-ink); }
.pb-kind.is-soon { background: var(--f-soon-soft); color: var(--f-soon-ink); }
.pb-kind.is-violet { background: var(--pb-violet-soft); color: var(--pb-violet-ink); }
.pb-kind.is-sky { background: var(--f-sky-soft); color: var(--f-sky-ink); }
.pb-kind.is-night { background: var(--f-night-soft); color: var(--f-night-ink); }

.pb-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.pb-end { padding: 8px 2px 0; color: var(--f-text-3); font-size: 12.5px; font-weight: 560; }
.pb-list { flex: 1; }
.pb-li + .pb-end { border-top: 1px solid var(--f-hair); }
.pb-end.is-all { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; color: var(--f-text-2); }
.pb-end.is-all .ico { color: var(--f-accent); }
.pb-body > .pb-end.is-all { border-top: 1px solid var(--f-hair); }

/* ── empty states: calm, never blank ──────────────────────────────────── */
.pb-empty { display: flex; flex: 1; align-items: center; gap: 14px; min-width: 0; }
.pb-empty-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--f-surface-3);
  color: var(--f-icon);
}
.pb-empty-ico .ico { width: 23px; height: 23px; }
.pb-empty.is-good .pb-empty-ico { background: var(--f-accent-soft); color: var(--f-accent); }
.pb-empty.is-warm .pb-empty-ico { background: var(--f-streak-soft); color: var(--f-streak-ink); }
.pb-empty.is-gold .pb-empty-ico { background: var(--pb-gold-soft); color: var(--pb-gold-ink); }
.pb-empty-words { min-width: 0; }
.pb-empty-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.pb-empty-text { margin-top: 2px; color: var(--f-text-2); font-size: 13px; line-height: 1.4; }
.pb-w.is-s .pb-empty { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 10px; }
.pb-w.is-t .pb-empty,
.pb-w.is-l .pb-empty { flex-direction: column; justify-content: center; text-align: center; }
.pb-w.is-t .pb-empty-ico,
.pb-w.is-l .pb-empty-ico { width: 58px; height: 58px; border-radius: 20px; }
@container pboard (max-width: 520px) {
  .pb-w.is-t .pb-empty,
  .pb-w.is-l .pb-empty { padding: 10px 0; }
}

/* ── the big number on a small tile ───────────────────────────────────── */
.pb-hero {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto auto auto;
  column-gap: 8px;
  min-width: 0;
}
.pb-hero-num {
  grid-column: 1;
  grid-row: 2;
  font-size: 44px;
  font-weight: 780;
  line-height: 1;
  letter-spacing: -0.045em;
}
.pb-hero-num .pb-stat-num { font-size: inherit; letter-spacing: inherit; font-variant-numeric: normal; }
.pb-hero-num .unit { font-size: 0.42em; letter-spacing: 0; }
.pb-hero-label { grid-column: 1; grid-row: 3; margin-top: 4px; font-size: 14px; font-weight: 680; line-height: 1.25; }
.pb-hero-sub {
  grid-column: 1;
  grid-row: 4;
  margin-top: 1px;
  color: var(--f-text-2);
  font-size: 12.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.pb-hero-foot { grid-column: 2; grid-row: 2 / -1; align-self: end; }
.pb-hero.is-danger .pb-hero-num { color: var(--f-danger); }
.pb-hero.is-soon .pb-hero-num { color: var(--f-soon-ink); }
.pb-hero.is-warm .pb-hero-num { color: var(--f-streak-ink); }
.pb-hero.is-good .pb-hero-num { color: var(--f-accent); }
/* The number as a button to the one student it is about. The tile lifts
   (is-action), so the button itself only needs a focus ring. */
button.pb-hero {
  margin: 0 -6px;
  padding: 0 6px 2px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.pb-hero:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 0; }

.pb-faces { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
.pb-faces .avatar { box-shadow: 0 0 0 2px var(--f-surface); }
.pb-faces > .avatar + .avatar,
.pb-faces > .pb-face + .pb-face { margin-right: -8px; }
/* Several people behind one number: each face opens its own page. */
.pb-face {
  position: relative;
  display: grid;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: translate 0.14s var(--f-ease);
}
.pb-face:hover { z-index: 1; translate: 0 -2px; }
.pb-face:focus-visible { z-index: 1; outline: 2px solid var(--f-accent); outline-offset: 1px; }
.pb-faces-more { align-self: center; margin-left: 4px; color: var(--f-text-2); font-size: 12px; font-weight: 700; }

.pb-flame { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: var(--f-streak-soft); }
.pb-flame .ico { width: 26px; height: 26px; color: var(--f-streak); }
.pb-confetti { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; background: var(--pb-gold-soft); color: var(--pb-gold-ink); }
.pb-confetti .ico { width: 24px; height: 24px; }

.pb-spark { display: flex; align-items: flex-end; gap: 3px; width: 64px; height: 38px; }
.pb-spark span { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: rgba(13, 89, 99, 0.35); }
.pb-spark span.is-today { background: var(--f-night-ink); }
.pb-spark span.is-zero { background: var(--f-surface-3); }

/* ── list rows: one assignment, opens the student ─────────────────────── */
.pb-list { display: flex; flex-direction: column; min-width: 0; }
.pb-li { min-width: 0; }
.pb-li + .pb-li { border-top: 1px solid var(--f-hair); }
.pb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "lead title chip" "lead sub chip";
  align-items: center;
  column-gap: 10px;
  width: calc(100% + 12px);
  margin: 0 -6px;
  padding: 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s var(--f-ease);
}
.pb-row:hover { background: var(--f-surface-2); }
.pb-row:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 0; }
.pb-row > :first-child { grid-area: lead; }
.pb-row-title {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-row-sub {
  grid-area: sub;
  min-width: 0;
  overflow: hidden;
  color: var(--f-text-2);
  font-size: 12.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-row-chip { grid-area: chip; display: inline-flex; min-width: 0; }
.pb-row.is-done .pb-row-title { color: var(--f-text-2); text-decoration: line-through; text-decoration-color: rgba(83, 97, 89, 0.45); }
@container pbw (max-width: 330px) {
  .pb-row {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "lead title title" "lead chip sub";
    row-gap: 3px;
    column-gap: 8px;
  }
  .pb-row-sub { align-self: center; }
  .pb-row-title {
    display: -webkit-box;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* A one-line row, for the day under "This week". */
.pb-row.is-line {
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) auto;
  grid-template-areas: "lead title sub chip";
  padding-block: 4px;
}
.pb-row.is-line .pb-av.avatar-sm { width: 24px; height: 24px; font-size: 11px; }
@container pbd (max-width: 440px) {
  .pb-row.is-line {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "lead title chip" "lead sub chip";
  }
}

.pb-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--f-surface-3);
  line-height: 1.05;
}
.pb-date-wd { color: var(--f-text-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pb-date-num { font-size: 15px; font-weight: 760; letter-spacing: -0.02em; }
.pb-date.is-soon { background: var(--f-soon-soft); }
.pb-date.is-soon .pb-date-wd,
.pb-date.is-soon .pb-date-num { color: var(--f-soon-ink); }

.pb-tick { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--f-accent-soft); color: var(--f-accent); }
.pb-tick .ico { width: 16px; height: 16px; }

.pb-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--f-radius-pill);
  background: var(--f-night-soft);
  color: var(--f-night-ink);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.pb-plan .ico { width: 13px; height: 13px; }
.pb-row.is-done .pb-plan { background: var(--f-accent-soft); color: var(--f-accent-soft-ink); }

/* Per-kid chips above a long list. */
/* The chip row filters the list under it: 6px on top of the body's 10px
   gap is the 16px every other filter row in the app leaves. */
.pb-kidchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pb-kidchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-2);
  color: var(--f-text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 620;
  cursor: pointer;
}
.pb-kidchip:hover { background: var(--f-surface-3); }
.pb-kidchip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-kidchip-n { font-weight: 780; }
.pb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* ── Family pulse: the one dark card, the first thing to read ─────────── */
.pbw-pulse {
  background: linear-gradient(155deg, var(--pb-teal-1) 0%, var(--pb-teal-2) 58%, var(--pb-teal-3) 100%);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(19, 32, 27, 0.05), 0 22px 40px -24px rgba(14, 66, 56, 0.65);
}
.pbw-pulse .pb-chip { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pbw-pulse .unit { color: rgba(255, 255, 255, 0.92); }
.pb-verdict {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 12px 4px 9px;
  border-radius: var(--f-radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}
.pb-verdict .ico { width: 15px; height: 15px; }
.pb-verdict.is-danger { background: var(--pb-alert-soft); color: var(--pb-alert-ink); }
.pb-verdict.is-soon { background: #fbefd0; color: #6b4600; }

.pb-stats { display: grid; gap: 8px; min-width: 0; }
.pb-stats.is-3 { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-stats.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pbw-pulse.is-xl .pb-stats { flex: 1; }
@container pbw (max-width: 680px) {
  .pb-stats.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pb-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.09);
}
.pb-stat-num {
  font-size: 30px;
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 0.92 white: 4.5:1 or better on the tiles, where the gradient sits (0.82 measured 4.18:1). */
.pb-stat-label { color: rgba(255, 255, 255, 0.92); font-size: 12.5px; font-weight: 620; line-height: 1.25; }
.pb-stat-sub { color: rgba(255, 255, 255, 0.92); font-size: 12px; font-weight: 560; }
.pb-stat.is-zero .pb-stat-num { color: rgba(255, 255, 255, 0.72); }
.pb-stat.is-alert { background: var(--pb-alert-soft); }
.pb-stat.is-alert .pb-stat-num,
.pb-stat.is-alert .pb-stat-label,
.pb-stat.is-alert .pb-stat-sub { color: var(--pb-alert-ink); }
/* A number that leads to the widget listing it (or to the one student). */
button.pb-stat {
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s var(--f-ease), translate 0.15s var(--f-ease);
}
/* A ring, not a lighter fill: the white labels keep their contrast. */
button.pb-stat:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.38); translate: 0 -1px; }
button.pb-stat.is-alert:hover { box-shadow: inset 0 0 0 1.5px rgba(142, 36, 51, 0.32); }
button.pb-stat:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@container pbw (max-width: 380px) {
  .pb-stat { padding: 9px 10px; }
  .pb-stat-num { font-size: 26px; }
}

.pb-whos { display: flex; flex-direction: column; gap: 6px; }
.pb-who {
  display: grid;
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: 16px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pb-who:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
.pbw-pulse .pb-who { background: rgba(255, 255, 255, 0.09); }
.pbw-pulse .pb-who:hover { background: rgba(255, 255, 255, 0.15); }
.pbw-pulse .pb-who:focus-visible { outline-color: #fff; }
.pb-who-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pb-who-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pb-who-min { font-size: 17px; font-weight: 740; letter-spacing: -0.02em; white-space: nowrap; }
.pbw-pulse .pb-tag { background: rgba(255, 255, 255, 0.14); color: #fff; }
.pbw-pulse .pb-tag.is-danger { background: var(--pb-alert-soft); color: var(--pb-alert-ink); }
.pbw-pulse .pb-tag.is-soon { background: #fbefd0; color: #6b4600; }
.pbw-pulse .pb-end { color: rgba(255, 255, 255, 0.92); }
@container pbw (max-width: 420px) {
  .pb-who { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pb-who-tags { grid-column: 2 / -1; }
}

/* ── Needs attention at full row: slips side by side ──────────────────── */
.pb-slips { display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.pb-slip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(164, 50, 67, 0.14);
  border-radius: 18px;
  background: #fffafa;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s var(--f-ease), border-color 0.15s var(--f-ease);
}
.pb-slip:hover { border-color: rgba(164, 50, 67, 0.3); background: #fff4f3; }
.pb-slip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.pb-slip-top .avatar { width: 26px; height: 26px; font-size: 11.5px; }
.pb-slip-title { overflow: hidden; font-size: 14px; font-weight: 680; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pb-slip-sub { overflow: hidden; color: var(--f-text-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }

/* ── This week ────────────────────────────────────────────────────────── */
.pb-week { display: flex; flex: 1; flex-direction: column; gap: 12px; min-width: 0; }
.pb-week.is-xl { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
@container pbw (max-width: 600px) {
  .pb-week.is-xl { display: flex; }
}
.pb-week.is-xl .pb-day { gap: 1px; padding: 5px 2px 6px; }
.pb-week.is-xl .pb-day-num { font-size: 16px; }
.pb-week.is-xl .pb-day-marks { height: 18px; }
.pb-week.is-xl .pb-day-bar { min-height: 14px; max-height: 18px; }
.pb-week.is-xl .pb-day-min { display: none; }
.pb-strip { display: grid; flex: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.pb-w.is-m .pb-strip { flex: 1; }
.pb-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 7px 2px 8px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  line-height: 1.2;
  transition: background-color 0.15s var(--f-ease), border-color 0.15s var(--f-ease), box-shadow 0.15s var(--f-ease);
}
button.pb-day { cursor: pointer; }
button.pb-day:hover { background: var(--f-surface-3); }
.pb-day:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
.pb-day-wd { max-width: 100%; overflow: hidden; color: var(--f-text-2); font-size: 11.5px; font-weight: 650; text-overflow: clip; white-space: nowrap; }
.pb-day-num { font-size: 18px; font-weight: 760; letter-spacing: -0.02em; }
.pb-day-marks { display: flex; align-items: center; justify-content: center; gap: 2px; height: 20px; }
.pb-day-due {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--f-radius-pill);
  background: var(--f-text);
  color: #fff;
  font-size: 11.5px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}
.pb-day-due.is-zero { min-width: 0; width: 5px; height: 5px; padding: 0; overflow: hidden; background: var(--f-border-strong); color: transparent; }
.pb-day-test { display: grid; place-items: center; color: var(--f-streak-ink); }
.pb-day-test .ico { width: 15px; height: 15px; }
.pb-day-bar { position: relative; display: flex; flex: 1 1 auto; align-items: flex-end; justify-content: center; width: 100%; min-height: 22px; max-height: 40px; margin-top: 3px; }
.pb-day-bar::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 1px; background: var(--f-border); }
.pb-day-fill { position: relative; z-index: 1; display: flex; flex-direction: column-reverse; gap: 2px; width: min(18px, 56%); }
.pb-day-fill .pb-seg { min-height: 3px; }
.pb-day-fill .pb-seg:last-child { border-radius: 4px 4px 0 0; }
.pb-day-min { min-height: 15px; color: var(--f-text-2); font-size: 11px; font-weight: 620; white-space: nowrap; }
.pb-day.is-today { background: var(--f-accent-soft); }
.pb-day.is-today .pb-day-wd,
.pb-day.is-today .pb-day-num { color: var(--f-accent-soft-ink); }
.pb-day.is-today .pb-day-due:not(.is-zero) { background: var(--f-accent); }
.pb-day.is-selected { border-color: var(--f-accent); background: #fff; box-shadow: 0 8px 18px -12px rgba(28, 106, 91, 0.6); }
.pb-w.is-m .pb-day-bar { max-height: 30px; }
.pb-week.is-l .pb-day-bar { max-height: 28px; }
@container pbw (max-width: 380px) {
  .pb-strip { gap: 3px; }
  .pb-day-num { font-size: 16px; }
  .pb-day-min { font-size: 10px; }
}
/* A 320px phone leaves each day about 34px: "Today" gets the day's whole
   width and a size that fits it, never "Toda". */
@container pbw (max-width: 320px) {
  .pb-strip { gap: 2px; }
  .pb-day { padding-inline: 0; }
  .pb-day-wd { font-size: 10.5px; letter-spacing: -0.02em; }
}

.pb-detail { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; container: pbd / inline-size; }
.pb-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 0 2px 2px; }
.pb-detail-day { font-size: 14.5px; font-weight: 720; letter-spacing: -0.01em; }
.pb-detail-sum { color: var(--f-text-2); font-size: 12.5px; }
.pb-detail-empty { padding: 10px 2px; color: var(--f-text-2); font-size: 13.5px; }
.pb-week.is-xl .pb-detail { padding-left: 18px; border-left: 1px solid var(--f-hair); }
@container pbw (max-width: 600px) {
  .pb-week.is-xl .pb-detail { padding-left: 0; border-left: 0; }
}
/* Beside the strip, a day's line is just who, what and the chip. */
@container pbd (max-width: 440px) {
  .pb-week.is-xl .pb-row.is-line { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead title chip"; }
  .pb-week.is-xl .pb-row.is-line .pb-row-sub { display: none; }
}

/* ── Your kids ────────────────────────────────────────────────────────── */
.pb-kids {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  min-width: 0;
}
.pb-kids.is-m { grid-template-columns: minmax(0, 1fr); gap: 5px; align-content: center; }
.pb-kids.is-m .pb-kid-name { line-height: 1.2; }
.pb-kids.is-m .pb-kid-seen { font-size: 12px; line-height: 1.3; }
.pb-kids.is-m .pb-kid { flex-direction: row; align-items: center; gap: 12px; padding: 5px 12px 5px 8px; border-radius: 16px; }
.pb-kids.is-m .pb-kid-top { display: contents; }
/* The name and its status keep a floor; the counts give way first (they
   wrap). */
.pb-kids.is-m .pb-kid-id { flex: 1 0 170px; }
.pb-kids.is-m .pb-minis { order: 3; flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
.pb-kids.is-m .streak { order: 4; }
.pb-kids.is-m .add-kid-tile { padding: 6px 12px 6px 8px; border-radius: 16px; }
.pb-kids.is-m .add-kid-ico { width: 32px; height: 32px; }
.pb-kids.is-m .add-kid-sub { display: none; }
@container pbw (max-width: 400px) {
  .pb-kids.is-m .pb-kid { flex-wrap: wrap; }
  .pb-kids.is-m .pb-minis { order: 5; flex: 1 1 100%; justify-content: flex-start; padding-left: 42px; }
}
.pb-kids.is-rich { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.pb-kid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--f-border);
  border-radius: 18px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s var(--f-ease), border-color 0.15s var(--f-ease), box-shadow 0.15s var(--f-ease);
}
.pb-kid:hover { border-color: rgba(28, 106, 91, 0.32); background: #fff; box-shadow: var(--f-shadow-sm); }
.pb-kid:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.pb-kid-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pb-kid-id { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.pb-kid-name { overflow: hidden; font-size: 16px; font-weight: 740; line-height: 1.25; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; }
/* A long name pushes the pill under it rather than squeezing itself. */
.pb-kid-nameline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.pb-kid-seen { overflow: hidden; color: var(--f-text-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.pb-minis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; color: var(--f-text-2); font-size: 12.5px; font-weight: 560; }
.pb-mini b { color: var(--f-text); font-size: 15px; font-weight: 760; font-variant-numeric: tabular-nums; }
.pb-mini.is-danger,
.pb-mini.is-danger b { color: var(--f-danger); }
/* How a kid is doing, in words: ink on its own soft fill, the measured
   pairs from parents.css (accent-soft-ink 6.3:1, soon-ink 5.1:1, danger
   5.7:1). The dot repeats the tone; the word carries it. */
.pb-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.4;
  white-space: nowrap;
}
.pb-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pb-status.is-good { background: var(--f-accent-soft); color: var(--f-accent-soft-ink); }
.pb-status.is-warn { background: var(--f-soon-soft); color: var(--f-soon-ink); }
.pb-status.is-danger { background: var(--f-danger-soft); color: var(--f-danger); }
.pb-kid-nameline .pb-status { padding: 1px 8px 1px 6px; font-size: 11.5px; }
.pb-kid-state { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* An under-13's educator waiting on this parent: the one thing on the tile
   that asks for a tap, in the soon tone. */
.pb-kid-wait {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--f-soon-soft);
  color: var(--f-soon-ink);
  font-size: 12.5px;
  font-weight: 640;
  line-height: 1.35;
}
.pb-kid-wait .ico { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.pb-kid-wait span { min-width: 0; overflow-wrap: anywhere; }
/* At Wide the note is a line of the name's column (kidTile), no box. */
.pb-kid-id .pb-kid-wait { margin-top: 2px; padding: 0; background: none; font-size: 12px; }
.pb-kid.is-rich { justify-content: flex-start; gap: 12px; padding: 14px; }
.pb-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 4px; border-radius: 14px; background: var(--f-surface); }
.pb-count { display: flex; flex-direction: column; align-items: center; min-width: 0; color: var(--f-text-2); font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.pb-count b { color: var(--f-text); font-size: 19px; font-weight: 760; line-height: 1.15; letter-spacing: -0.02em; }
.pb-count.is-danger,
.pb-count.is-danger b { color: var(--f-danger); }
.pb-kid.is-rich .pb-kid-name { font-size: 17.5px; }
.pb-kid-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pb-kid-label { color: var(--f-text-2); font-size: 12.5px; font-weight: 620; }
.pb-kid-value { font-size: 18px; font-weight: 760; letter-spacing: -0.02em; }
.pb-kid-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label chip" "title chip"; align-items: center; column-gap: 10px; }
.pb-kid-next .pb-kid-label { grid-area: label; }
.pb-kid-next-title { grid-area: title; overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pb-kid-next > .due { grid-area: chip; }
.pb-rulechips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }

/* The "Have another child?" tile from parents.js, sized as a sibling tile. */
.pboard .add-kid-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 1px;
  align-content: center;
  justify-items: start;
  min-height: 0;
  padding: 12px 16px;
  border-radius: 18px;
  text-align: left;
}
.pboard .add-kid-ico { grid-row: 1 / span 2; align-self: center; width: 40px; height: 40px; }
.pboard .add-kid-title { align-self: end; font-size: 15px; }
.pboard .add-kid-sub { align-self: start; font-size: 13px; }

/* ── Tests and big projects, small: the next one ──────────────────────── */
.pb-next {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  min-width: 0;
  margin: 0 -6px;
  padding: 0 6px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pb-next:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 0; }
.pb-next-top { display: flex; align-items: center; gap: 8px; margin-bottom: 1px; }
.pb-next-when { color: var(--f-text); font-size: 13px; font-weight: 720; }
.pb-next-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: -0.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.pb-next-sub { overflow: hidden; color: var(--f-text-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.pb-next-more { color: var(--f-text-3); font-size: 12px; font-weight: 600; }

/* ── Study time ───────────────────────────────────────────────────────── */
.pb-study { flex: 1; min-width: 0; }
.pb-study.is-m { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); gap: 16px; }
.pb-study.is-l { display: flex; flex-direction: column; gap: 12px; }
.pb-study.is-xl { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.2fr); gap: 20px; }
@container pbw (max-width: 600px) {
  .pb-study.is-xl { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); }
  .pb-study.is-xl .pb-perkid { grid-column: 1 / -1; }
}
@container pbw (max-width: 340px) {
  .pb-study.is-m { grid-template-columns: minmax(0, 1fr); }
}
.pb-study-sum { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.pb-study-total { font-size: 28px; font-weight: 780; line-height: 1.05; letter-spacing: -0.04em; white-space: nowrap; }
.pb-study-total .pb-stat-num { font-size: inherit; letter-spacing: inherit; }
.pb-study-label { font-size: 13.5px; font-weight: 680; }
.pb-study-today { color: var(--f-text-2); font-size: 12.5px; }
.pb-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.pb-legend li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--f-text-2); font-size: 12px; font-weight: 600; }
.pb-key { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; }

.pb-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-width: 0; min-height: 84px; }
.pb-study.is-l .pb-chart { flex: none; height: 138px; }
.pb-col { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.pb-chart.is-blank { position: relative; }
.pb-chart-empty {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 1;
  max-width: 90%;
  padding: 4px 12px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 12.5px;
  font-weight: 620;
  text-align: center;
  transform: translate(-50%, -50%);
}
.pb-col-plot {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--f-border);
}
.pb-stack { display: flex; flex-direction: column-reverse; gap: 2px; width: min(22px, 66%); }
.pb-stack .pb-seg { min-height: 3px; }
.pb-stack .pb-seg:last-child { border-radius: 4px 4px 0 0; }
.pb-stack.is-zero { display: none; }
.pb-col-label { overflow: hidden; color: var(--f-text-2); font-size: 11.5px; font-weight: 620; text-align: center; white-space: nowrap; }
.pb-col.is-today .pb-col-label { color: var(--f-text); font-weight: 760; }
.pb-wd-short,
.pb-col-label.is-narrow .pb-wd-long { display: none; }
.pb-col-label.is-narrow .pb-wd-short { display: inline; }
@container pbw (max-width: 460px) {
  .pb-wd-long { display: none; }
  .pb-wd-short { display: inline; }
}
.pb-tip {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  z-index: 5;
  min-width: max-content;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--f-text);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: var(--f-shadow-pop);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.12s var(--f-ease), transform 0.12s var(--f-ease);
}
.pb-col:first-child .pb-tip { left: 0; transform: translate(0, 4px); }
.pb-col:last-child .pb-tip { right: 0; left: auto; transform: translate(0, 4px); }
.pb-col:hover .pb-tip { opacity: 1; transform: translate(-50%, 0); }
.pb-col:first-child:hover .pb-tip,
.pb-col:last-child:hover .pb-tip { transform: none; }
.pb-tip-head { font-weight: 700; }
.pb-tip-row { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.88); }
.pb-tip .pb-key { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }

.pb-perkid { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-perkid .pb-who { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 5px 12px 5px 8px; }
.pb-perkid .pb-who:hover { background: var(--f-surface-3); }
.pb-who-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-who-sub { color: var(--f-text-2); font-size: 12px; }
.pb-who-key { width: 4px; height: 26px; border-radius: 2px; }
.pb-goal { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 8px; }
.pb-goal-text { overflow: hidden; color: var(--f-text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pb-goal-pct { color: var(--f-text-2); font-size: 12px; font-weight: 700; }
.pb-meter { display: block; height: 6px; overflow: hidden; border-radius: var(--f-radius-pill); background: var(--f-surface-3); }
.pb-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--f-accent); }
.pb-meter.is-met > span { background: var(--f-accent); }
.pb-meter.is-full > span { background: var(--f-danger); }

/* ── Streaks ──────────────────────────────────────────────────────────── */
.pb-w.is-fire { background: radial-gradient(130% 100% at 100% 0%, #fff1de 0%, rgba(255, 241, 222, 0) 60%), var(--f-surface); }
.pb-streaks { display: grid; flex: 1; gap: 8px; align-content: start; min-width: 0; }
.pb-streaks.is-m.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: stretch; }
.pb-streaks.is-m.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: stretch; }
.pb-streaks.is-m.n-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: stretch; }
.pb-streak {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pb-streak:hover { background: var(--f-surface-3); }
.pb-streak:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
.pb-streak-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pb-streak-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pb-streak-sub { display: inline-flex; align-items: center; gap: 3px; color: var(--f-text-2); font-size: 12px; white-space: nowrap; }
.pb-streak-sub.is-on { color: var(--f-accent-soft-ink); font-weight: 650; }
.pb-streak-sub .ico { width: 13px; height: 13px; }
.pb-streak-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pb-streak-best { color: var(--f-text-3); font-size: 11.5px; font-weight: 620; white-space: nowrap; }
.pb-streak-off {
  padding: 3px 9px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.pb-streaks.n-3 .pb-streak,
.pb-streaks.n-4 .pb-streak { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 6px; }
.pb-streaks.n-3 .pb-streak-side,
.pb-streaks.n-4 .pb-streak-side { flex-direction: row; align-items: center; gap: 8px; }
.pb-streaks.is-t.n-3 .pb-streak,
.pb-streaks.is-t.n-4 .pb-streak { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: stretch; }
.pb-streaks.is-t.n-3 .pb-streak-side,
.pb-streaks.is-t.n-4 .pb-streak-side { flex-direction: column; align-items: flex-end; }
@container pbw (max-width: 420px) {
  .pb-streaks.is-m.n-3,
  .pb-streaks.is-m.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Grades ───────────────────────────────────────────────────────────── */
.pb-grades { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pb-grades.is-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; align-content: start; }
@container pbw (max-width: 400px) {
  .pb-grades.is-m { grid-template-columns: minmax(0, 1fr); }
}
.pb-grades.is-l.is-many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; align-content: start; }
@container pbw (max-width: 440px) {
  .pb-grades.is-l.is-many { grid-template-columns: minmax(0, 1fr); }
}
.pb-grades.is-l.is-many > .pb-end { grid-column: 1 / -1; }
.pb-ggroup { display: flex; flex-direction: column; min-width: 0; }
.pb-ggroup + .pb-ggroup { margin-top: 4px; }
.pb-grades.is-l.is-many .pb-ggroup + .pb-ggroup { margin-top: 0; }
.pb-ggroup-name { padding: 2px 6px 4px; color: var(--f-text-2); font-size: 12px; font-weight: 700; }
.pb-gline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av name badge" "av bar badge";
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  min-width: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pb-gline:hover { background: var(--f-surface-2); }
.pb-gline:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 0; }
.pb-gline > .avatar { grid-area: av; width: 26px; height: 26px; font-size: 11.5px; }
.pb-gline-name { grid-area: name; overflow: hidden; font-size: 14px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.pb-gline > .pb-gbar { grid-area: bar; }
.pb-gline > .pb-grade { grid-area: badge; }
.pb-grades.is-m .pb-gline { grid-template-areas: "av name badge"; }
.pb-gmore { align-self: center; padding: 5px 8px; color: var(--f-text-3); font-size: 12.5px; font-weight: 600; }
@container pbw (max-width: 330px) {
  .pb-grades:not(.is-m) .pb-gline { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av name name" "av bar badge"; }
}
.pb-grade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-3);
  color: var(--f-text);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pb-grade .ico { width: 13px; height: 13px; }
.pb-grade.is-weak { background: var(--f-danger-soft); color: var(--f-danger); }
.pb-gbar { display: block; height: 5px; overflow: hidden; border-radius: var(--f-radius-pill); background: var(--f-surface-3); }
.pb-gbar > span { display: block; height: 100%; border-radius: inherit; background: var(--f-accent); }
.pb-gbar.is-weak > span { background: var(--f-danger); }

/* ── Wins this week ───────────────────────────────────────────────────── */
.pb-w.is-glow { background: radial-gradient(120% 90% at 100% 0%, #fff4d6 0%, rgba(255, 244, 214, 0) 58%), var(--f-surface); }

/* ── Rules at a glance ────────────────────────────────────────────────── */
.pb-rules { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.pb-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pb-rule:hover { background: var(--f-surface-3); }
.pb-rule:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
.pb-rule-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-rules.is-m .pb-rule-main { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pb-rule-name { font-size: 14px; font-weight: 700; }
.pb-rule-chips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.pb-rule-go { color: var(--f-icon); }
.pb-rule-go .ico { width: 18px; height: 18px; }
.pb-usage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--f-text-2); font-size: 12.5px; }
.pb-usage .pb-meter { flex: 0 1 90px; min-width: 50px; }
@container pbw (max-width: 330px) {
  .pb-rule { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .pb-rule-go { display: none; }
  .pb-usage .pb-meter { flex: 1 1 100%; order: 2; }
}

/* ── Family race ──────────────────────────────────────────────────────── */
.pb-race { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.pb-race.is-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-content: stretch; }
.pb-racer {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 16px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.pb-racer:hover { background: var(--f-surface-3); }
.pb-racer:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
.pb-racer.is-off { cursor: default; }
.pb-racer.is-off .avatar { opacity: 0.6; }
.pb-race.is-m .pb-racer { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rank av name" "rank av val"; row-gap: 0; }
.pb-race.is-m .pb-rank { grid-area: rank; }
.pb-race.is-m .pb-racer > .avatar { grid-area: av; }
.pb-race.is-m .pb-racer-main { grid-area: name; }
.pb-race.is-m .pb-racer-val { grid-area: val; text-align: left; font-size: 15px; }
.pb-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--f-surface-3);
  color: var(--f-text-2);
  font-size: 13px;
  font-weight: 760;
}
.pb-rank.is-gold { background: linear-gradient(160deg, #fbe7a6, #f0cd5f); color: #5c4300; }
.pb-rank.is-silver { background: linear-gradient(160deg, #f1f3f4, #d8dde1); color: #3b4650; }
.pb-rank.is-bronze { background: linear-gradient(160deg, #f7dcc5, #e9bd97); color: #6b3a12; }
.pb-racer-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pb-racer-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pb-racer-sub { color: var(--f-text-2); font-size: 12px; line-height: 1.3; }
@container pbw (max-width: 330px) {
  .pb-race:not(.is-m) .pb-racer { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rank av main" "rank av val"; row-gap: 2px; }
  .pb-race:not(.is-m) .pb-rank { grid-area: rank; }
  .pb-race:not(.is-m) .pb-racer > .avatar { grid-area: av; }
  .pb-race:not(.is-m) .pb-racer-main { grid-area: main; }
  .pb-race:not(.is-m) .pb-racer-val { grid-area: val; font-size: 15px; text-align: left; }
}
.pb-racer-val { font-size: 18px; letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.pb-racer-val b { font-weight: 780; }
/* Not the hero numbers' em scale: "days" stays readable at every size. */
.pb-racer-val .unit { font-size: 12px; font-weight: 600; }
.pb-rbar { display: block; height: 5px; margin-top: 3px; overflow: hidden; border-radius: var(--f-radius-pill); background: var(--f-surface-3); }
.pb-rbar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0a54a, var(--f-streak)); }

/* ── Recent activity ──────────────────────────────────────────────────── */
.pb-events { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pb-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico text time"; align-items: center; gap: 2px 10px; padding: 7px 0; }
.pb-event + .pb-event { border-top: 1px solid var(--f-hair); }
.pb-event-ico { grid-area: ico; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--f-surface-3); color: var(--f-text-2); }
.pb-event-ico .ico { width: 15px; height: 15px; }
.pb-event-ico.is-accent { background: var(--f-accent-soft); color: var(--f-accent); }
.pb-event-ico.is-night { background: var(--f-night-soft); color: var(--f-night-ink); }
.pb-event-ico.is-warm { background: var(--f-streak-soft); color: var(--f-streak-ink); }
.pb-event-ico.is-danger { background: var(--f-danger-soft); color: var(--f-danger); }
.pb-event-ico.is-sky { background: var(--f-sky-soft); color: var(--f-sky-ink); }
.pb-event-ico.is-violet { background: var(--pb-violet-soft); color: var(--pb-violet-ink); }
.pb-event-text {
  grid-area: text;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.pb-event-time { grid-area: time; color: var(--f-text-3); font-size: 12px; white-space: nowrap; }
@container pbw (max-width: 330px) {
  .pb-event { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico text" "ico time"; align-items: start; }
  .pb-event-time { font-size: 11.5px; }
}

/* ── How they're doing ────────────────────────────────────────────────── */
/* A card per kid, read top down. Line 1 is the kid: avatar, name, the
   status word and a chevron (the card opens their page). Every line under
   it keeps its icon in the avatar's column, so the words line up with the
   name and the icons read as a column of facts. When something slips, the
   card's left edge takes the status tone; the word still carries it.
   Measured on --f-surface-2 (#fbfcf7): danger 6.5:1, soon-ink 5.7:1,
   accent-soft-ink 6.9:1, text-2 6.1:1, --pb-violet-ink 7.0:1. */
.pb-insights { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.pb-insights.is-xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pb-insight {
  --pb-rail: transparent;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "av head go" "main main main";
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 12px 12px 14px 14px;
  border: 1px solid var(--f-border);
  border-radius: 20px;
  background: var(--f-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 0 var(--pb-rail);
  transition: background-color 0.15s var(--f-ease), border-color 0.15s var(--f-ease), box-shadow 0.15s var(--f-ease);
}
.pb-insight.is-danger { --pb-rail: var(--f-danger); }
.pb-insight.is-warn { --pb-rail: var(--f-soon-ink); }
.pb-insight:hover { border-color: rgba(28, 106, 91, 0.28); background: var(--f-surface); box-shadow: inset 3px 0 0 var(--pb-rail), var(--f-shadow-sm); }
.pb-insight:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }
.pb-insight > .avatar { grid-area: av; }
.pb-insight-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.pb-insight-name { min-width: 0; overflow: hidden; font-size: 15.5px; font-weight: 740; line-height: 1.25; letter-spacing: -0.015em; text-overflow: ellipsis; white-space: nowrap; }
.pb-insight-go { grid-area: go; display: grid; place-items: center; color: var(--f-icon); transition: translate 0.15s var(--f-ease); }
.pb-insight-go .ico { width: 18px; height: 18px; }
.pb-insight:hover .pb-insight-go { translate: 2px 0; color: var(--f-accent); }
.pb-insight-main { grid-area: main; align-self: stretch; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pb-insight-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  min-width: 0;
  color: var(--f-text-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.pb-insight-ico { display: grid; place-items: center; height: 17.5px; color: var(--f-icon); }
.pb-insight-ico .ico { width: 15px; height: 15px; }
.pb-insight-ico.is-danger { color: var(--f-danger); }
.pb-insight-ico.is-warn { color: var(--f-soon-ink); }
.pb-insight-ico.is-good { color: var(--f-accent); }
.pb-insight-ico.is-violet { color: var(--pb-violet-ink); }
.pb-insight-text { min-width: 0; overflow-wrap: anywhere; }
.pb-insight-text b { color: var(--f-text); font-weight: 650; }
/* What's slipping: the line that matters most, in its tone. */
.pb-insight-line.is-why { font-size: 13px; font-weight: 600; line-height: 1.35; }
.pb-insight-line.is-why .pb-insight-ico { height: 17.5px; }
.pb-insight-line.is-why.is-danger { color: var(--f-danger); }
.pb-insight-line.is-why.is-warn { color: var(--f-soon-ink); }
.pb-insight-line.is-why.is-good { color: var(--f-accent-soft-ink); }
.pb-insight-line.is-ask { color: var(--f-text); }
.pb-insight-line.is-waiting { color: var(--f-soon-ink); font-weight: 640; }
.pb-insight-line.is-chips .pb-insight-text { display: flex; flex-wrap: wrap; gap: 5px; }
.pb-insight-line.is-chips .pb-insight-ico { height: 24px; }
.pb-insight-line.is-usage .pb-insight-ico { height: 18px; }
.pb-insight-line.is-usage .pb-usage { flex-wrap: nowrap; }
.pb-insight-line.is-usage .pb-usage .pb-meter { flex: 0 1 90px; order: 0; min-width: 40px; }
.pb-insight-line.is-usage .pb-usage-text { white-space: nowrap; }
/* Their educators, set off by a hairline: one line, the educator's name in
   bold and what they did in the quieter ink. */
/* It sits at the foot of the card, so side by side the educators line up. */
.pb-insight-line.is-edu { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--f-hair); }
.pb-insight-line.is-edu .pb-insight-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-insight-line.is-none { color: var(--f-text-3); }
.pb-edu-count { color: var(--f-text); font-weight: 650; }
.pb-edu-who { color: var(--f-text); font-weight: 700; }

/* One kid across a full row: the facts take two columns, not one long
   thin list, and the educators line keeps the whole width. */
@container pbw (min-width: 640px) {
  .pb-insights.is-xl.n-1 .pb-insight-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 28px; }
  .pb-insights.is-xl.n-1 .pb-insight-line.is-edu { grid-column: 1 / -1; }
}

/* Wide: a kid is one line, name, word and the first fact side by side. */
.pb-insights.is-m { justify-content: center; gap: 6px; }
.pb-insights.is-m .pb-insight {
  grid-template-columns: 30px auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  grid-template-areas: "av head main go";
  row-gap: 2px;
  padding: 7px 10px 7px 8px;
  border-radius: 16px;
}
.pb-insights.is-m .pb-insight-main { align-self: center; }
.pb-insights.is-m .pb-insight-line { grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; }
.pb-insights.is-m .pb-insight-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-insights.is-m .pb-insight-line.is-chips { display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
@container pbw (max-width: 440px) {
  .pb-insights.is-m .pb-insight { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-template-areas: "av head go" "av main go"; }
  .pb-insights.is-m .pb-insight-line.is-chips { flex-wrap: wrap; }
}

/* ── Educators ────────────────────────────────────────────────────────── */
.pbw-educators .pb-events { justify-content: flex-start; }
.pbw-educators .pb-event-text { -webkit-line-clamp: 3; line-clamp: 3; }
.pbw-educators.is-l .pb-event-text { -webkit-line-clamp: 2; line-clamp: 2; }
/* With two or more kids, the kid's initial sits on the corner of the icon. */
.pb-edu.has-kid { column-gap: 13px; }
.pb-edu .pb-event-ico { position: relative; }
.pb-event-ico .pb-edu-kid.avatar {
  position: absolute;
  right: -6px;
  bottom: -5px;
  width: 17px;
  height: 17px;
  font-size: 9.5px;
  font-weight: 760;
  box-shadow: 0 0 0 2px var(--f-surface);
}
.pb-edu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--f-hair);
  color: var(--f-text-2);
  font-size: 12.5px;
  font-weight: 560;
}
.pb-link {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  min-height: 30px;
  padding: 2px 4px 2px 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--f-accent);
  font: inherit;
  font-weight: 680;
  cursor: pointer;
  transition: background-color 0.15s var(--f-ease);
}
.pb-link .ico { width: 14px; height: 14px; }
/* Two or more kids: a small chip per kid, their initial, name and a chevron. */
.pb-link.is-kid {
  gap: 5px;
  min-height: 30px;
  margin: 3px 0;
  padding: 2px 6px 2px 3px;
  border: 1px solid var(--f-border);
  border-radius: var(--f-radius-pill);
  background: var(--f-surface-2);
  color: var(--f-text);
  font-weight: 650;
}
.pb-link.is-kid .pb-av.avatar-sm { width: 22px; height: 22px; font-size: 10.5px; }
.pb-link.is-kid .ico { color: var(--f-icon); }
.pb-link.is-kid:hover { border-color: rgba(28, 106, 91, 0.28); background: var(--f-accent-soft); }
.pb-link:hover { background: var(--f-accent-soft); }
.pb-link:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 1px; }
@media (max-width: 559px) {
  .pb-link { min-height: 44px; }
  /* A kid's chip stays chip sized; its touch target reaches 44px. */
  .pb-link.is-kid { position: relative; min-height: 30px; }
  .pb-link.is-kid::after { content: ""; position: absolute; inset: -7px -3px; }
}

/* ── nothing to count yet: one card where the number widgets would be ─── */
.pb-start {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--pb-radius);
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
}
.pb-start .pb-chip { margin-top: 1px; }
.pb-start-words { display: grid; gap: 6px; min-width: 0; }
.pb-start-title { font-size: 16px; font-weight: 740; letter-spacing: -0.015em; }
.pb-start-text { max-width: 64ch; color: var(--f-text-2); font-size: 14px; line-height: 1.5; }
.pb-start-go { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-left: -6px; }
.pb-start-go:has(.is-kid) { margin-left: 0; }

/* ── edit mode: the workbench ─────────────────────────────────────────── */
.pboard.is-editing .pb-grid {
  margin: -10px;
  padding: 10px;
  border-radius: 38px;
  background: rgba(229, 238, 231, 0.6);
}
.pboard.is-editing .pb-w { outline: 2px dashed rgba(28, 106, 91, 0.34); outline-offset: 3px; }
.pboard.is-editing .pb-head { visibility: hidden; }
.pboard.is-editing .pb-body { opacity: 0.68; user-select: none; }
.pboard.is-editing .pbw-pulse .pb-body { opacity: 1; }
.pb-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--f-text);
  box-shadow: 0 0 0 1px rgba(19, 32, 27, 0.08), 0 12px 26px -16px rgba(19, 32, 27, 0.4);
}
.pboard.is-tools-in .pb-tools { animation: pb-fade 0.16s var(--f-ease) both; }
.pb-tools-name {
  flex: 1 1 60px;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-tool {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--f-text-2);
  cursor: pointer;
  transition: background-color 0.14s var(--f-ease), color 0.14s var(--f-ease);
}
.pb-tool .ico { width: 18px; height: 18px; }
.pb-tool:hover:not([disabled]) { background: var(--f-surface-3); color: var(--f-text); }
.pb-tool:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 0; }
.pb-tool[disabled] { opacity: 0.35; cursor: default; }
.pb-grip { color: var(--f-text); cursor: grab; touch-action: none; }
.pb-grip:active { cursor: grabbing; }
.pb-sizes { display: flex; gap: 2px; padding: 2px; border-radius: 12px; background: var(--f-surface-3); }
.pb-size { width: 36px; height: 30px; border-radius: 9px; color: var(--f-text-2); }
.pb-size.is-on { background: #fff; color: var(--f-accent); box-shadow: 0 1px 3px rgba(19, 32, 27, 0.16); }
.pb-tools-move { display: flex; gap: 2px; }
.pb-remove:hover:not([disabled]) { background: var(--f-danger-soft); color: var(--f-danger); }
.pb-glyph { display: inline-grid; place-items: center; }
.pb-glyph svg { width: 22px; height: 11px; }
.pb-glyph rect { fill: none; stroke: currentColor; stroke-width: 0.9; opacity: 0.5; }
.pb-glyph rect.on { fill: currentColor; stroke: none; opacity: 1; }
/* On a phone the tools are bigger targets. */
@media (max-width: 559px) {
  .pb-tool { width: 40px; height: 40px; }
  .pb-size { height: 34px; }
}
/* A narrow tile: grip, name, moves and remove on the first line, the sizes
   sharing the whole second line. This comes after the phone sizes on
   purpose: the size buttons have to shrink to share their line (a size row
   wider than the tile slid under the next tile and took its taps). */
@container pbw (max-width: 400px) {
  .pb-tools { padding: 4px; }
  /* The name wraps to a second line rather than losing its end ("Due tod..."). */
  .pb-tools-name {
    display: -webkit-box;
    flex: 1 1 0;
    line-height: 1.15;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .pb-tools-move { order: 2; margin-left: auto; }
  .pb-remove { order: 3; }
  .pb-tool { width: 34px; }
  .pb-sizes { order: 4; flex: 1 1 100%; min-width: 0; }
  .pb-size { flex: 1 1 0; width: auto; min-width: 26px; }
}
/* Too narrow for a name beside four tools (a small tile on a phone): the
   name takes a line of its own under them, so a parent can still tell which
   widget the X removes, and the moves keep to the right. */
@container pbw (max-width: 200px) {
  .pb-tools-name { order: 4; flex: 1 1 100%; padding: 0 6px; white-space: normal; }
  .pb-sizes { order: 5; }
}
/* A small tile is one number: tools laid over it would cover it. They take
   the head's place in the flow instead, and the tile grows by what they need
   while the board is being edited. */
.pboard.is-editing .pb-w.is-s .pb-head { display: none; }
.pboard.is-editing .pb-w.is-s .pb-tools { position: static; order: -1; margin: calc(8px - var(--pb-inner)) -10px 0; }

/* The Add tray: an inline panel above the board. */
.pb-tray {
  padding: 18px;
  border: 1.5px dashed rgba(28, 106, 91, 0.3);
  border-radius: var(--pb-radius);
  background: var(--f-surface);
  box-shadow: var(--f-shadow-sm);
}
.pb-tray.is-opening { animation: pb-drop 0.18s var(--f-ease) both; }
.pb-tray-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; }
.pb-tray-heading { font-size: 16px; font-weight: 740; letter-spacing: -0.015em; }
.pb-tray-note { color: var(--f-text-2); font-size: 13px; }
.pb-tray-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.pb-tray-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--f-border);
  border-radius: 18px;
  background: var(--f-surface-2);
}
.pb-tray-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pb-tray-title { font-size: 14.5px; font-weight: 720; }
.pb-tray-hint { color: var(--f-text-2); font-size: 12.5px; line-height: 1.35; }
.pb-tray-sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; color: var(--f-text-3); }
.pb-tray-empty { color: var(--f-text-2); font-size: 14px; }

/* Dragging: the lifted tile, and the slot it will land in. */
.pb-w.is-dragging {
  outline-color: var(--f-accent);
  box-shadow: var(--f-shadow-pop);
  pointer-events: none;
  transition: none;
}
.pb-ph {
  border: 2px dashed rgba(28, 106, 91, 0.45);
  border-radius: var(--pb-radius);
  background: rgba(28, 106, 91, 0.07);
}
.pboard.is-dragging,
.pboard.is-dragging * { cursor: grabbing !important; user-select: none; }

/* ── motion ───────────────────────────────────────────────────────────── */
.pboard.is-entering .pb-w { animation: pb-in 0.2s var(--f-ease) both; animation-delay: calc(var(--i, 0) * 26ms); }
.pb-w.is-new { animation: pb-pop 0.2s var(--f-ease) both; }
.pb-w.is-resized { animation: pb-settle 0.18s var(--f-ease) both; }
@keyframes pb-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes pb-pop { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }
@keyframes pb-settle { from { opacity: 0.6; scale: 0.985; } to { opacity: 1; scale: 1; } }
@keyframes pb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pb-drop { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes pb-flash {
  0% { outline-color: rgba(28, 106, 91, 0); outline-offset: 9px; }
  18%, 62% { outline-color: rgba(28, 106, 91, 0.7); outline-offset: 3px; }
  100% { outline-color: rgba(28, 106, 91, 0); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .pboard .pb-w,
  .pboard .pb-tools,
  .pboard .pb-tray { animation: none !important; transition: none !important; }
  .pboard:not(.is-editing) .pb-w.is-action:hover,
  .pboard button.pb-stat:hover,
  .pboard .pb-face:hover,
  .pboard .pb-insight:hover .pb-insight-go { translate: none; }
  .pboard .pb-insight,
  .pboard .pb-insight-go,
  .pboard .pb-link { transition: none; }
  /* No glow to fade: the ring just shows, and goes when the class does. */
  .pboard .pb-w.is-flash { outline-color: rgba(28, 106, 91, 0.7); }
}