/* ============================================================
   Spratton Hall Pupil Collection — shared app components
   ------------------------------------------------------------
   This is the "reception app look": section headings, card
   groups, rows, initials tiles, empty states and the bottom
   tab bar. Every screen that uses these classes gets exactly
   the same sizes and colours, so a change made here lands on
   all of them at once.

   What belongs here: how a thing LOOKS.
   What stays in the page: where it SITS — fixed vs flex shell,
   how many tab columns, how much blank space a heading
   reserves. Those are genuine per-screen decisions.

   Load order: common.css (colours, buttons, pills) then this.
   ============================================================ */


/* ---- Card ---------------------------------------------------
   Flat white card with a soft shadow instead of a border.
   Each page sets its own margin.                              */
.card{background:#fff;border:0;border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(20,40,42,.08)}


/* ---- Section heading and note -------------------------------
   Small grey capitals above a list, with a plain-English line
   underneath. Typography only — the min-height that stops the
   heading jumping between tabs is set per page.               */
.pane-head{display:flex;align-items:flex-start;margin:2px 4px 8px}
.pane-head h2{font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#5E6B6D;margin:0}
.pane-head span{font-size:13px;color:#8A9799;margin-left:auto}
.pane-note{margin:0 4px 12px;font-size:16px;color:#5E6B6D;line-height:1.35}


/* ---- Group --------------------------------------------------
   A white rounded container holding a run of rows.            */
.group{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:14px;
  box-shadow:0 1px 2px rgba(20,40,42,.08)}


/* ---- Pupil row ----------------------------------------------
   One child per row: initials tile, name, then up to two lines
   of detail. Called .prow rather than .row because .row is
   already used around the site as a plain flex wrapper, and
   this component must never land on one of those by accident.
   Add .tap where the whole row opens something.               */
.prow{display:flex;align-items:center;gap:12px;width:100%;min-height:86px;
  padding:12px 14px;background:#fff;border:0;border-bottom:1px solid #E7ECEC;
  text-align:left;color:inherit;font:inherit}
.prow:last-child{border-bottom:0}
.prow.tap{cursor:pointer;touch-action:manipulation}
.prow.tap:active{background:#F1F5F5}

.prow .txt{min-width:0;flex:1}
.prow .n{display:block;font-weight:700;font-size:21px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .m{display:block;font-size:16px;color:#5E6B6D;line-height:1.25;margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .m2{display:block;font-size:16px;color:#5E6B6D;line-height:1.25;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Overdue: the timing line turns red. */
.prow.long .m2,.prow.late .m2{color:var(--bad);font-weight:700}

/* Chevron on a row that opens something. */
.prow .go{flex:none;color:#B4C0C1;font-size:28px;line-height:1}

/* Status pill parked on the right. */
.prow .s{flex:none;margin-left:auto}

/* A row carrying its own action button: the button drops onto
   its own full-width line underneath. */
.prow.act{flex-wrap:wrap}
.prow.act .s{flex:1 1 100%;margin:10px 0 2px}
.prow.act .btn{width:100%;padding:16px;font-size:19px;border-radius:12px}

/* A newly arrived row flashes to catch the eye: amber where it
   is information, red where someone is waiting on you. */
.prow.new{animation:flash 1.1s ease-in-out 3}
.prow.new.urgent{animation:flash-bad 1.1s ease-in-out 3}
@keyframes flash{50%{background:var(--warn-soft)}}
@keyframes flash-bad{50%{background:var(--bad-soft)}}


/* ---- Initials tile ------------------------------------------
   Coloured square holding a child's initials. The colour says
   where they are: red waiting, amber on the way, green done.  */
.av{width:50px;height:50px;border-radius:15px;flex:none;display:grid;place-items:center;
  font-size:18px;font-weight:700;letter-spacing:.02em}
.av.wait,.av.here{background:var(--bad-soft);color:var(--bad)}
.av.ready,.av.walk{background:var(--warn-soft);color:#7A4600}
.av.done,.av.in{background:var(--ok-soft);color:var(--ok)}
.av.home{background:#EDF1F1;color:#5E6B6D}


/* ---- Empty state --------------------------------------------
   Shown in place of a list when there is nothing in it.       */
.empty{background:#fff;border-radius:16px;padding:34px 18px;text-align:center;
  color:#6C7A7C;font-size:17px;line-height:1.45;box-shadow:0 1px 2px rgba(20,40,42,.08)}
.empty b{display:block;font-size:18px;color:var(--ink);margin-bottom:8px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em}


/* ---- Bottom tab bar -----------------------------------------
   Count badge above an uppercase label. Default is three tabs;
   add .five for five, which tightens the badge and label to
   fit the narrower columns. Positioning is set per page —
   reception pins it with flexbox, the room page fixes it to
   the bottom of the window.                                   */
.tabbar{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;
  border-top:2px solid #CFD9D9;padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -3px 10px rgba(20,40,42,.07)}
.tabbar.five{grid-template-columns:repeat(5,1fr)}

.tab{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;
  background:none;border:0;border-right:1px solid #E1E8E8;padding:16px 8px 18px;
  color:#5E6B6D;font:inherit;cursor:pointer;position:relative;touch-action:manipulation}
.tab:last-child{border-right:0}

/* Fixed size so a badge never grows or shifts with its number. */
.tab .cnt{width:52px;height:38px;flex:none;padding:0;border-radius:13px;
  background:#EDF1F1;color:#41504F;font-size:20px;font-weight:700;display:grid;place-items:center}
.tab .lb{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.25;text-align:center;min-height:2.5em}
.tabbar.five .tab{gap:8px;padding:14px 4px 16px}
.tabbar.five .tab .cnt{width:46px;height:34px;border-radius:12px;font-size:18px}
.tabbar.five .tab .lb{font-size:12px;letter-spacing:.04em;line-height:1.2;min-height:2.4em}

/* A tab that opens a menu rather than counting something: three bars in the
   same badge box, so it lines up with the counts either side of it. Drawn in
   CSS rather than an image so it takes the badge's colour as it changes. */
.tab .cnt.menu i{display:block;position:relative;width:18px;height:2px;border-radius:2px;background:currentColor}
.tab .cnt.menu i::before,.tab .cnt.menu i::after{content:'';position:absolute;left:0;
  width:18px;height:2px;border-radius:2px;background:currentColor}
.tab .cnt.menu i::before{top:-6px}
.tab .cnt.menu i::after{top:6px}

/* Selected tab, marked by a bar along the top edge. */
.tab.on{color:var(--green);background:#F3F7F6}
.tab.on::before{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;background:var(--green)}
.tab.on .cnt{background:var(--green);color:#fff}

/* Traffic lights: red needs releasing, amber on the way, green home. */
.tab.wait.on .cnt,.tab.wait .cnt.hot{background:var(--bad);color:#fff}
.tab.ready.on .cnt,.tab.ready .cnt.hot,
.tab.walk.on .cnt,.tab.walk .cnt.hot{background:var(--warn);color:#fff}
.tab.home.on .cnt{background:var(--ok);color:#fff}
.tab .cnt.hot{animation:badge 1.5s ease-in-out infinite}
@keyframes badge{50%{box-shadow:0 0 0 7px rgba(179,38,30,.14)}}


/* ---- App bar and its menu -----------------------------------
   The dark bar across the top of every signed-in screen: crest,
   the school name, a quiet second line, and one ☰ button on the
   right that opens the screen's menu. The bar never changes as
   people move around a screen, so the app always looks the same
   place. Pages set their own position (sticky or fixed shell);
   assets/appbar.js does the opening and closing.              */
.appbar{background:#16292B;color:#fff;padding:calc(env(safe-area-inset-top) + 12px) 14px 13px;
  display:flex;align-items:center;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.2);position:relative}
.appbar .crest{height:34px;flex:none}
.appbar .ttl{min-width:0;flex:1}
.appbar .t{display:block;font-size:19px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.appbar .s{display:block;font-size:14px;opacity:.65;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .s.stale{color:#FFD28A;opacity:1}
@media(max-width:420px){.appbar .t{font-size:16px;letter-spacing:.2em}.iconbtn{padding:10px 11px;font-size:14.5px}}

.iconbtn{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:10px;padding:11px 13px;
  font-size:15.5px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;touch-action:manipulation}
.iconbtn:active{background:rgba(255,255,255,.25)}
.burger{padding:9px 10px;line-height:0;flex:none}

.menu-pop{position:absolute;right:10px;top:calc(100% - 4px);z-index:50;background:#fff;border-radius:14px;
  min-width:230px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.25)}
.menu-pop button,.menu-pop a{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:17.5px;font-weight:700;color:#16292B;padding:14px 14px;border-radius:10px;cursor:pointer;
  text-decoration:none;touch-action:manipulation}
.menu-pop button:active,.menu-pop button:hover,.menu-pop a:active,.menu-pop a:hover{background:#EDF1F1}
.menu-pop button + button,.menu-pop a + a,.menu-pop button + a,.menu-pop a + button{border-top:1px solid #EEF2F2}
.menu-pop .out{color:var(--bad)}
.menu-pop label{display:block;padding:10px 14px 12px;font-size:14px;font-weight:700;color:#5E6B6D}
.menu-pop select{width:100%;margin-top:6px;font-size:17px;padding:10px;border:1px solid #D6DEDF;border-radius:10px;background:#fff;color:#16292B}