/* ============================================================================
   Portal mockups (Family Portal + Front Office). Rough "vision" prototypes — a fixed
   Annunciation look (warm navy/gold), not the theme-switching public site. Static data.
   ============================================================================ */
.portal {
  --p-bg: #faf8f2; --p-surface: #fff; --p-sidebar: #11203f; --p-navy: #16264a; --p-navy-deep: #0c1830;
  --p-gold: #c2a14e; --p-gold-lt: #d4b35e; --p-gold-tx: #9c7e35;
  --p-ink: #1c2942; --p-muted: #76705f; --p-faint: #9a9281; --p-border: #e7e0d2; --p-divide: #f0ebde;
  --p-green: #3f7d54; --p-green-bg: #e8f0e7; --p-red: #b3422f;
  --p-amber-bg: #fcf6e8; --p-amber-bd: #ecdcb4; --p-amber-tx: #6b5b2e;
  --p-blue: #2f6fb0; --p-blue-bg: #eef1f6; --p-blue-tx: #5b6b86; --p-track: #f0ebde;
  display: flex; min-height: 100vh; background: var(--p-bg); color: var(--p-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.portal * { box-sizing: border-box; }

/* ---- sidebar ---- */
.psidebar { width: 244px; flex: none; background: var(--p-sidebar); padding: 24px 18px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.pbrand { display: flex; align-items: center; gap: 11px; padding: 0 6px 22px; text-decoration: none; }
.pbrand__logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.pbrand__logo img { height: 27px; }
.pbrand__name { font: 600 15px/1.05 'Spectral', serif; color: #fff; letter-spacing: .01em; }
.pbrand__sub { font: 600 8.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .2em; color: var(--p-gold); text-transform: uppercase; margin-top: 4px; }
.pnav-label { font: 600 10px/1 'IBM Plex Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.34); padding: 6px 12px 8px; }
.pnav { display: flex; flex-direction: column; gap: 2px; }
.pnav__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 15px; border-radius: 8px; color: rgba(255,255,255,.66); font: 500 13.5px/1 'IBM Plex Sans', sans-serif; text-decoration: none; cursor: pointer; }
.pnav__item:hover { background: rgba(255,255,255,.05); color: #fff; }
.pnav__item.is-active { background: rgba(194,161,78,.16); border-left: 3px solid var(--p-gold); padding-left: 12px; color: #fff; font-weight: 600; }
.pnav__badge { font: 600 10px/1 'IBM Plex Mono', monospace; padding: 3px 6px; border-radius: 5px; }
.pnav__badge--gold { color: var(--p-navy-deep); background: var(--p-gold); }
.pnav__badge--red { color: #fff; background: var(--p-red); }
.pnav__badge--green { color: var(--p-green); font: 600 9px/1 'IBM Plex Sans', sans-serif; letter-spacing: .04em; }
.puser { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 11px; }
.puser__av { width: 34px; height: 34px; border-radius: 50%; background: var(--p-gold); color: var(--p-navy-deep); display: flex; align-items: center; justify-content: center; font: 600 13px/1 'IBM Plex Sans', sans-serif; flex: none; }
.puser__name { font: 600 12.5px/1.1 'IBM Plex Sans', sans-serif; color: #fff; }
.puser__role { font: 400 11px/1 'IBM Plex Sans', sans-serif; color: rgba(255,255,255,.5); margin-top: 3px; }

/* ---- main ---- */
.pmain { flex: 1; min-width: 0; padding: 26px 30px 40px; }
.ptopbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.ptopbar h1 { margin: 0; font: 600 27px/1.05 'Spectral', serif; color: var(--p-navy); letter-spacing: -.01em; }
.ptopbar .sub { font: 400 13.5px/1.4 'IBM Plex Sans', sans-serif; color: var(--p-muted); margin-top: 9px; }
.ptools { display: flex; align-items: center; gap: 12px; }
.psearch { display: flex; align-items: center; background: #fff; border: 1px solid var(--p-border); border-radius: 9px; padding: 9px 14px; width: 220px; color: #a39a86; font: 400 13px/1 'IBM Plex Sans', sans-serif; }
.pbell { width: 40px; height: 40px; border-radius: 9px; background: #fff; border: 1px solid var(--p-border); display: flex; align-items: center; justify-content: center; position: relative; color: var(--p-navy); }
.pbell::after { content: ""; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--p-red); }
.pexit { font: 600 12.5px/1 'IBM Plex Sans', sans-serif; color: var(--p-gold-tx); text-decoration: none; border: 1px solid var(--p-border); background: #fff; border-radius: 9px; padding: 11px 14px; }
.pexit:hover { border-color: var(--p-gold); }

/* ---- cards + layout ---- */
.pgrid { display: grid; gap: 16px; }
.pg-2 { grid-template-columns: 1fr 1fr; } .pg-3 { grid-template-columns: repeat(3,1fr); } .pg-4 { grid-template-columns: repeat(4,1fr); }
.pcard { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 12px; padding: 20px 22px; }
.pcard--navy { background: var(--p-navy); color: #fff; border: none; }
.pcard--amber { background: var(--p-amber-bg); border-color: var(--p-amber-bd); }
.pcard-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.pcard-h h3 { margin: 0; font: 600 17px/1 'Spectral', serif; color: var(--p-navy); }
.pcard--navy h3 { color: #fff; }
.pcard-sub { font: 400 12.5px/1 'IBM Plex Sans', sans-serif; color: var(--p-muted); margin-bottom: 16px; }
.psection-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 12px; }
.psection-h h2 { margin: 0; font: 600 17px/1 'Spectral', serif; color: var(--p-navy); }
.plink { font: 500 12px/1 'IBM Plex Sans', sans-serif; color: var(--p-gold-tx); text-decoration: none; }

/* pills / badges */
.pill { font: 600 9.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 5px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; }
.pill--replace { color: var(--p-green); background: var(--p-green-bg); }
.pill--facts { color: var(--p-blue-tx); background: var(--p-blue-bg); }
.pill--facts .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--p-blue); }
.pill--good { color: var(--p-green); background: var(--p-green-bg); }
.pill--gold { color: var(--p-navy-deep); background: var(--p-gold); }
.tag-vb { font: 600 8.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--p-navy-deep); background: var(--p-gold); padding: 3px 6px; border-radius: 20px; }

/* KPI */
.pkpi { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 11px; padding: 16px 18px; position: relative; }
.pkpi--mark::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; background: var(--p-gold); border-radius: 0 0 3px 3px; }
.pkpi__label { font: 600 10px/1 'IBM Plex Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--p-faint); }
.pkpi__val { font: 600 30px/1 'Spectral', serif; color: var(--p-navy); margin-top: 11px; }
.pkpi__val small { font-size: 18px; color: var(--p-muted); }
.pkpi__val.alert { color: var(--p-red); }
.pkpi__note { font: 400 12.5px/1.3 'IBM Plex Sans', sans-serif; color: var(--p-muted); margin-top: 7px; }
.pkpi__note.gold { color: var(--p-gold-tx); font-weight: 500; }

/* progress bars */
.pbar { height: 7px; background: var(--p-track); border-radius: 4px; overflow: hidden; }
.pbar__fill { height: 100%; border-radius: 4px; background: var(--p-navy); }
.pbar__fill.green { background: var(--p-green); } .pbar__fill.gold { background: var(--p-gold); }
.pbar__fill.red { background: var(--p-red); } .pbar__fill.sage { background: #8a9a78; }
.pbar-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font: 500 13px/1.2 'IBM Plex Sans', sans-serif; color: var(--p-ink); }
.pbar-row .n { font: 600 12.5px/1 'IBM Plex Mono', monospace; color: var(--p-navy); }
.pbar-row .n.red { color: var(--p-red); } .pbar-row .n.gold { color: var(--p-gold-tx); } .pbar-row .n.green { color: var(--p-green); }
.pstack { display: flex; flex-direction: column; gap: 13px; }

/* list rows */
.prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--p-divide); font: 500 13px/1.3 'IBM Plex Sans', sans-serif; }
.prow .k { font-weight: 400; color: var(--p-muted); }
.prow .v { font: 500 12.5px/1 'IBM Plex Sans', sans-serif; color: var(--p-ink); }
.prow .v.green { color: var(--p-green); } .prow .v.red { color: var(--p-red); font-weight: 600; }
.prow .v.mono { font-family: 'IBM Plex Mono', monospace; color: var(--p-navy); font-weight: 600; }
.pdate { font: 600 10px/1.3 'IBM Plex Mono', monospace; color: var(--p-gold-tx); white-space: nowrap; }

/* attention / child / kitchen cards */
.pkid__av, .pattn__av { width: 44px; height: 44px; border-radius: 50%; background: var(--p-navy); color: var(--p-gold-lt); display: flex; align-items: center; justify-content: center; font: 600 17px/1 'Spectral', serif; flex: none; }
.pkid__name { font: 600 16px/1.1 'Spectral', serif; color: var(--p-navy); }
.pkid__meta { font: 400 11.5px/1 'IBM Plex Sans', sans-serif; color: var(--p-muted); margin-top: 4px; }
.pattn-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: var(--p-amber-bg); border: 1px solid var(--p-amber-bd); border-radius: 9px; padding: 14px 15px; }
.pattn-card.plain { background: #f7f5ee; border-color: var(--p-border); }
.pattn-kick { font: 600 9.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--p-gold-tx); margin-bottom: 8px; }
.pattn-kick.muted { color: var(--p-muted); }
.pattn-txt { font: 500 13.5px/1.35 'IBM Plex Sans', sans-serif; color: var(--p-ink); }
.pbtn { display: block; text-align: center; border-radius: 7px; padding: 9px; font: 600 12.5px/1 'IBM Plex Sans', sans-serif; text-decoration: none; cursor: pointer; }
.pbtn--navy { background: var(--p-navy); color: #fff; }
.pbtn--ghost { background: #fff; border: 1px solid #d9d2c2; color: var(--p-navy); }
.pbtn-lg { padding: 11px; border-radius: 8px; font-size: 13px; }
.pbtn-row { display: flex; gap: 10px; }
.pbtn-row .pbtn { flex: 1; }

/* week strip (hot lunch) */
.pweek { display: flex; gap: 8px; }
.pweek > div { flex: 1; text-align: center; background: #f7f5ee; border-radius: 8px; padding: 11px 6px; }
.pweek .d { font: 600 10px/1 'IBM Plex Sans', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--p-faint); }
.pweek .m { font: 500 11.5px/1.3 'IBM Plex Sans', sans-serif; color: var(--p-ink); margin-top: 7px; }
.pweek .today { background: var(--p-navy); } .pweek .today .d { color: var(--p-gold); } .pweek .today .m { color: #fff; }
.pweek .open { background: var(--p-amber-bg); border: 1px solid var(--p-amber-bd); } .pweek .open .d, .pweek .open .m { color: var(--p-gold-tx); }

/* office task tiles (navy) */
.ptile { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 15px 16px; }
.ptile-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.ptile-kick { font: 600 9.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--p-gold); }
.ptile-title { font: 600 14px/1.3 'IBM Plex Sans', sans-serif; color: #fff; margin-bottom: 5px; }
.ptile-note { font: 400 11.5px/1.4 'IBM Plex Sans', sans-serif; color: rgba(255,255,255,.6); }

/* portal chooser */
.pchoose { max-width: 900px; margin: 0 auto; padding: 72px 24px; font-family: 'IBM Plex Sans', sans-serif; }
.pchoose h1 { font: 600 32px/1.15 'Spectral', serif; color: var(--p-navy, #16264a); margin: 0 0 8px; }
.pchoose .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.pchoose a.card { text-decoration: none; border: 1px solid #e0d7c2; border-radius: 14px; padding: 28px; background: #fff; color: #1c2942; transition: border-color .15s, transform .15s; }
.pchoose a.card:hover { border-color: #c2a14e; transform: translateY(-2px); }
.pchoose a.card b { font: 600 20px/1.2 'Spectral', serif; color: #16264a; display: block; }
.pchoose a.card span { display: block; color: #6b6456; font-size: 14px; margin-top: 8px; line-height: 1.5; }
.pnote { margin-top: 26px; font-size: 13px; color: #8a8472; }

/* ---- sign out (in sidebar) ---- */
.psignout { margin-top: 12px; }
.psignout button { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.7);
  border-radius: 8px; padding: 9px; font: 600 12px/1 'IBM Plex Sans', sans-serif; cursor: pointer; }
.psignout button:hover { color: #fff; border-color: rgba(255,255,255,.3); }

/* ---- principal-only strip (office portal) ---- */
.pprincipal { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between;
  background: linear-gradient(90deg, #16264a, #1d2f54); border: 1px solid #26385c; border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; }
.pprincipal .lead { display: flex; align-items: center; gap: 12px; }
.pprincipal .lead .ic { width: 34px; height: 34px; border-radius: 8px; background: var(--p-gold); color: var(--p-navy-deep); display: flex; align-items: center; justify-content: center; font: 700 15px/1 'Spectral', serif; flex: none; }
.pprincipal .k { font: 600 9.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--p-gold); }
.pprincipal .t { font: 600 15px/1.2 'IBM Plex Sans', sans-serif; color: #fff; margin-top: 4px; }
.pprincipal .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pprincipal .acts a { font: 600 12px/1 'IBM Plex Sans', sans-serif; color: #fff; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; padding: 9px 12px; }
.pprincipal .acts a:hover { background: rgba(255,255,255,.16); }

/* ---- login ---- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #11203f; padding: 24px; font-family: 'IBM Plex Sans', sans-serif; }
.auth__card { width: 100%; max-width: 420px; background: #faf8f2; border-radius: 16px; padding: 36px 34px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.auth__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth__brand img { height: 36px; }
.auth__brand .n { font: 600 17px/1.05 'Spectral', serif; color: #16264a; }
.auth__brand .s { font: 600 8.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #9c7e35; margin-top: 4px; }
.auth h1 { font: 600 24px/1.1 'Spectral', serif; color: #16264a; margin: 0 0 18px; }
.auth__err { background: #fbeae6; border: 1px solid #e6b8ac; color: #8a2f1e; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.auth__form { display: flex; flex-direction: column; }
.auth__form label { font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #76705f; margin: 12px 0 6px; }
.auth__form input { background: #fff; border: 1px solid #d9d2c2; border-radius: 8px; padding: 12px 13px; font: 400 14px/1.2 'IBM Plex Sans', sans-serif; color: #16264a; }
.auth__form input:focus { outline: none; border-color: #c2a14e; }
.auth__submit { margin-top: 20px; background: #16264a; color: #fff; border: none; border-radius: 8px; padding: 13px; font: 600 14px/1 'IBM Plex Sans', sans-serif; cursor: pointer; }
.auth__submit:hover { background: #24375f; }
.auth__facts { width: 100%; margin-top: 12px; background: #fff; border: 1px dashed #c9bfa6; color: #9a9281; border-radius: 8px; padding: 12px; font: 600 13px/1 'IBM Plex Sans', sans-serif; cursor: not-allowed; }
.auth__demo { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e7e0d2; }
.auth__demo-label { font: 600 10px/1 'IBM Plex Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #9a9281; margin-bottom: 10px; }
.auth__demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth__demo-btns form { margin: 0; }
.auth__demo-btns button { width: 100%; background: #fff; border: 1px solid #d9d2c2; color: #16264a; border-radius: 8px; padding: 10px; font: 600 12px/1.2 'IBM Plex Sans', sans-serif; cursor: pointer; }
.auth__demo-btns button:hover { border-color: #c2a14e; }
.auth__demo-note { margin-top: 12px; font: 400 11.5px/1.4 'IBM Plex Sans', sans-serif; color: #9a9281; }
.auth__demo-note code { background: #efe7d4; padding: 2px 6px; border-radius: 4px; color: #5a4c24; }

@media (max-width: 820px) {
  .psidebar { display: none; }
  .pg-2, .pg-3, .pg-4, .pchoose .cards { grid-template-columns: 1fr; }
  .pmain { padding: 20px; }
}