/* School portal: login screen and the dashboard app shell (navy sidebar, sun-yellow accents, white cards). */

.page--portal { padding: calc(var(--nav-h) + 56px) 0 var(--section-y); }
.page--portal > .container { max-width: none; padding-inline: var(--frame); }

/* In app mode the website header and footer step aside so the dashboard fills the window. */
:root.portal-app .site-header,
:root.portal-app .site-footer { display: none; }
:root.portal-app .page--portal { padding: var(--frame) 0; }

/* ===================== Login ===================== */

.login {
  display: grid; gap: var(--frame);
  max-width: 1240px; margin-inline: auto;
}
@media (min-width: 960px) { .login { grid-template-columns: 1.15fr 1fr; min-height: 640px; } }
.login__visual { position: relative; min-height: 340px; border-radius: var(--radius-xl); overflow: hidden; color: #fff; isolation: isolate; display: flex; align-items: flex-end; padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
.login__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.login__visual::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 18, 56, 0.92) 0%, rgba(14, 18, 56, 0.35) 60%, rgba(14, 18, 56, 0.15) 100%); }
.login__title { color: #fff; font-size: var(--text-2xl); font-weight: 500; margin-bottom: var(--space-3); }
.login__title em { color: var(--sun); }
.login__visual p { color: rgba(255, 255, 255, 0.8); max-width: 48ch; }
.login__side { padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.login__logo { width: 56px; height: 56px; margin-bottom: var(--space-4); }
.login__heading { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.login__demo-label { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cred-list { display: grid; gap: var(--space-2); }
.cred { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius); background: var(--surface-2); text-align: left; color: var(--text); transition: background var(--dur-fast), transform var(--dur-fast); }
.cred:hover { background: var(--surface-3); transform: translateX(2px); }
.cred__body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cred__role { font-weight: 800; }
.cred__text { font-size: var(--text-xs); color: var(--muted); }
.cred__keys { font-size: var(--text-xs); }

/* ===================== App shell ===================== */

.app {
  display: grid; gap: var(--frame);
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - var(--frame) * 2);
}
@media (min-width: 1024px) { .app { grid-template-columns: 260px minmax(0, 1fr); } }
.app__side { min-width: 0; }

.app__side {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--navy-950);
  color: #e4e6f5;
}
/* The sidebar fits the window and scrolls inside itself if the window is short; the promo card goes
 * first when there is no room for it. */
@media (min-width: 1024px) {
  .app__side { position: sticky; top: var(--frame); height: calc(100vh - var(--frame) * 2); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .app__side::-webkit-scrollbar { display: none; }
}
@media (min-width: 1024px) and (max-height: 960px) {
  .side-promo { display: none; }
  .app__nav { gap: 2px; }
  .side-tab { min-height: 44px; }
}
.app__brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2); color: #fff !important; text-decoration: none; font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.app__brand img { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 2px; }
.app__nav { display: flex; flex-direction: column; gap: 4px; }
.side-tab {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 50px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: #c3c8e6;
  font-weight: 600; font-size: var(--text-md); text-align: left; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.side-tab:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.side-tab[aria-selected='true'] { background: var(--sun); color: var(--navy-950); font-weight: 700; }
.side-tab .count-badge { margin-left: auto; }
.app__side-foot { margin-top: auto; display: grid; gap: var(--space-4); }
.side-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); color: #c3c8e6 !important; font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.side-link:hover { color: #fff !important; }
.side-promo { position: relative; padding: var(--space-6) var(--space-4) var(--space-4); border-radius: var(--radius-lg); background: var(--sun); color: var(--navy-950); overflow: hidden; }
.side-promo__arrow { display: grid; place-items: center; position: absolute; top: -2px; left: 50%; transform: translate(-50%, -30%); width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--navy-950); box-shadow: 0 0 0 6px var(--navy-950); }
.side-promo p { margin: var(--space-3) 0; font-weight: 700; font-size: var(--text-sm); line-height: 1.35; max-width: 16ch; }
.side-promo__btn { border: 0; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--navy-950); color: #fff; font-weight: 700; font-size: var(--text-xs); }
.side-promo__lines { position: absolute; right: 14px; bottom: 16px; width: 34px; height: 46px; background: repeating-linear-gradient(180deg, rgba(20, 26, 77, 0.55) 0 4px, transparent 4px 10px); border-radius: 2px; }

@media (max-width: 1023px) {
  .app__side { gap: var(--space-3); padding: var(--space-4); }
  .app__nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .side-tab { min-height: 42px; font-size: var(--text-sm); }
  .app__side-foot { display: none; }
}

.app__main { min-width: 0; padding: var(--space-4) var(--space-2) var(--space-6); }
@media (min-width: 1024px) { .app__main { padding: var(--space-5) var(--space-5) var(--space-6) var(--space-3); } }
.app__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.app__hello { flex: 1 1 320px; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xl); font-weight: 700; }
.app__hello-icon { color: var(--sun-600); }
.app__search { position: relative; display: flex; align-items: center; flex: 0 1 320px; }
.app__search svg { position: absolute; left: 16px; color: var(--muted); }
.app__search input { padding-left: 46px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); min-height: 50px; }
.app__me { display: flex; align-items: center; gap: var(--space-2); }
.app__me .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--sun-600); }
.app__role { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-sm); color: var(--muted); }

/* ===================== Dashboard grid ===================== */

.dash-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1240px) { .dash-grid { grid-template-columns: minmax(0, 1fr) 330px; } }
.dash-main, .dash-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.dash-pair { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .dash-pair { grid-template-columns: 1fr 1fr; } }

.card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.card__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.dash-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.dash-block__tools { display: flex; align-items: center; gap: var(--space-2); }
.pill-select { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.plus-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sun); color: var(--navy-950); }
.plus-btn:hover { background: var(--sun-600); }
.trend { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); }
.trend strong { color: var(--logo-teal); }
:root[data-theme='dark'] .trend strong { color: var(--sun); }
.trend__icon { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); }

.tile { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; }
.tile--sun { background: var(--sun-soft); color: #8a6400; }
.tile--peach { background: var(--peach); color: var(--peach-ink); }
.tile--lilac { background: var(--lilac); color: var(--lilac-ink); }
.tile--sky { background: var(--sky); color: var(--sky-ink); }
.tile--mint { background: var(--mint); color: var(--mint-ink); }
:root[data-theme='dark'] .tile--sun { background: var(--accent-soft); color: var(--sun); }

/* Info cards (the "New Courses" row in the reference) */
.info-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.info-cards--scroll { grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); grid-template-columns: none; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.info-cards--scroll .info-card { scroll-snap-align: start; }
.info-card { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow), 0 0 0 1px var(--line); }
.info-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.info-card__title { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
.info-card__sub { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.info-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; }
.info-card__meta dt { font-size: var(--text-xs); color: var(--muted); }
.info-card__meta dd { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: var(--text-lg); font-weight: 800; }
.info-card__meta dd svg { color: #e0a50a; }

/* Schedule list (the "Daily Schedule" card) */
.sched { display: grid; gap: var(--space-2); }
.sched__row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius); background: transparent; text-align: left; color: var(--text); }
.sched__row:hover { background: var(--surface-2); }
.sched__row .tile { border-radius: 14px; }
.sched__body { flex: 1; min-width: 0; display: grid; }
.sched__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched__sub { font-size: var(--text-xs); color: var(--muted); }
.sched__chev { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); flex: none; }

/* Course rows (the "Course You're Taking" list) */
.course-rows { display: grid; gap: var(--space-3); }
.course-row { display: grid; grid-template-columns: auto 1.4fr 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.course-row .tile { border-radius: 14px; }
.course-row__title { margin: 0; font-weight: 700; }
.course-row__sub { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted); }
.course-row__label { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.course-row__value { margin: 0; font-weight: 700; }
.course-row__ring { display: flex; align-items: center; gap: var(--space-2); }
.course-row__ring strong { min-width: 3ch; font-size: var(--text-lg); }
@media (max-width: 640px) { .course-row { grid-template-columns: auto 1fr auto; } .course-row__meta { display: none; } }

/* Status list (the "Assignments" list) */
.status-list { display: grid; gap: var(--space-3); }
.status-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.status-row__body { flex: 1; min-width: 0; }
.status-row__title { margin: 0; font-weight: 700; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.status-row__sub { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted); }
.status { flex: none; padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; }
.status--sun { background: var(--sun-soft); color: #8a6400; }
.status--lilac { background: var(--lilac); color: var(--lilac-ink); }
.status--peach { background: var(--peach); color: var(--peach-ink); }
:root[data-theme='dark'] .status--sun { background: var(--accent-soft); color: var(--sun); }

/* Promo card (the dark "Go Premium" card) */
.promo { position: relative; padding: var(--space-5); padding-right: 42%; border-radius: var(--radius-lg); background: var(--navy-950); color: #fff; overflow: hidden; min-height: 210px; }
:root[data-theme='dark'] .promo { background: var(--surface-3); }
.promo__brand { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-4); font-weight: 700; font-size: var(--text-sm); }
.promo__brand img { border-radius: 50%; background: #fff; padding: 1px; }
.promo__title { color: #fff; font-size: var(--text-xl); margin-bottom: var(--space-2); }
.promo__text { font-size: var(--text-xs); color: #b6bbdc; }
.promo .btn { margin-top: var(--space-2); }
.promo__img { position: absolute; right: -12px; bottom: -12px; width: 44%; height: 75%; object-fit: cover; border-radius: 50% 0 0 0; opacity: 0.95; }

/* Mini calendar */
.mcal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.mcal__head .icon-btn { box-shadow: inset 0 0 0 1px var(--line-strong); }
.mcal__title { margin: 0; font-weight: 700; }
.mcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 2px; text-align: center; }
.mcal__dows { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 0; border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.mcal__d { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; font-size: var(--text-xs); font-weight: 600; }
.mcal__d.is-out { color: var(--muted); opacity: 0.45; }
.mcal__d.has-ev::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--logo-teal); }
.mcal__d.is-today { background: var(--sun); color: var(--navy-950); font-weight: 800; }
.mcal__d.is-today::after { background: var(--navy-950); }

.fee-mini__value { margin: 0; font-size: var(--text-2xl); font-weight: 800; letter-spacing: -0.03em; }
.fee-mini__value span { margin-left: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--muted); }

.tips__body ul { padding-left: 1.1rem; }
.tips__body li { list-style: disc; margin-bottom: var(--space-2); }
.tips__source { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--muted); }

/* ===================== Admin panels ===================== */

.dash-panel { padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--radius-xl); background: var(--surface); box-shadow: 0 0 0 1px var(--line); min-width: 0; }
.dash-panel .panel { background: var(--surface-2); box-shadow: none; margin-bottom: var(--space-4); }
.dash__title { font-size: var(--text-2xl); margin-bottom: var(--space-5); font-weight: 600; }
.dash__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dash__head .dash__title { margin-bottom: 0; }
.dash-charts { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }

.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.toolbar select { width: auto; }
.toolbar .field--inline { display: grid; gap: 4px; }
.toolbar .field--inline label { font-size: var(--text-xs); }
.search { position: relative; display: flex; align-items: center; flex: 1 1 240px; }
.search svg { position: absolute; left: 14px; color: var(--muted); }
.search input { padding-left: 42px; border-radius: var(--radius-pill); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.status-new { box-shadow: inset 0 0 0 1.5px var(--peach-ink) !important; }
.status-closed { color: var(--muted) !important; }

.att-list { display: grid; margin-bottom: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.att-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.att-row + .att-row { box-shadow: 0 -1px 0 var(--line); }
.att-row__name { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; }
.att-row__name .muted { font-weight: 500; }
.att-choice { display: flex; gap: 4px; margin: 0; padding: 0; border: 0; }
.att-choice__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.att-choice__opt span { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.att-choice__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.att-choice__opt--P input:checked + span { background: var(--sun); color: var(--navy-950); box-shadow: none; }
.att-choice__opt--L input:checked + span { background: var(--peach); color: var(--peach-ink); box-shadow: none; }
.att-choice__opt--A input:checked + span { background: var(--bad); color: #fff; box-shadow: none; }

.marks-table td { padding: 6px 8px; }
.mark-input { width: 76px !important; min-height: 40px !important; padding: 6px 8px !important; text-align: center; font-variant-numeric: tabular-nums; }

.admin-list { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.admin-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.admin-item__meta { margin: 0; font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.admin-item__title { margin: 2px 0 0; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.admin-item .row-actions .btn { min-height: 32px; padding: 0 12px; }

.action-rows { display: grid; gap: var(--space-3); }
.action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-2); }
.action-row__title { margin: 0 0 2px; font-weight: 800; }
.action-row label.btn { cursor: pointer; }

.timetable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 640px; }
.timetable th, .timetable td { padding: 10px 12px; text-align: left; box-shadow: inset 0 -1px 0 var(--line); }
.timetable thead th { background: var(--surface-2); font-weight: 700; color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.timetable thead th.is-today { color: var(--navy-950); background: var(--sun); }
.timetable tbody th { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tt-fixed { text-align: center !important; color: var(--muted); background: var(--surface-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tt-sat { color: var(--logo-teal); font-weight: 700; }
.timetable td.is-now { background: var(--sun-soft); font-weight: 800; color: var(--navy-950); }

/* ===================== Services (js/portal-services.js), laid out like the school app ===================== */

.status--mint { background: var(--mint); color: var(--mint-ink); }
.status--sky { background: var(--sky); color: var(--sky-ink); }
.svc-group { padding: var(--space-5) 0; }
.svc-group + .svc-group { box-shadow: 0 -1px 0 var(--line); }
.svc-group__title { margin-bottom: var(--space-4); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-3); }
.svc { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius); background: transparent; color: var(--ink) !important; text-align: center; text-decoration: none; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.svc:hover { background: var(--surface-2); transform: translateY(-2px); }
.svc__icon { width: 56px; height: 56px; }
.svc__label { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; }
.svc-back { margin: 0 0 var(--space-2); }

.svc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.svc-stat { padding: var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.svc-stat__value { margin: 0; font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.svc-stat__label { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted); font-weight: 600; }
.svc-stat--good { background: var(--good-soft); }
.svc-stat--warn { background: var(--warn-soft); }

.acal-pair { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .acal-pair { grid-template-columns: 1fr 1fr; } }
.acal__title { margin-bottom: var(--space-3); font-size: var(--text-md); font-weight: 700; }
.acal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.acal__dow { font-size: var(--text-xs); font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.acal__d { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.acal__d.is-P { background: var(--good-soft); color: var(--good); }
.acal__d.is-L { background: var(--warn-soft); color: var(--warn); }
.acal__d.is-A { background: var(--bad-soft); color: var(--bad); }
.acal__d.is-today { box-shadow: inset 0 0 0 2px var(--navy-900); }
:root[data-theme='dark'] .acal__d.is-today { box-shadow: inset 0 0 0 2px var(--sun); }
.acal-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: var(--space-3); color: var(--muted); }
.acal-key__i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 4px; vertical-align: -1px; }
.acal-key__i.is-P { background: var(--good); } .acal-key__i.is-L { background: var(--warn); } .acal-key__i.is-A { background: var(--bad); }

.hw-list, .doubt-list { display: grid; gap: var(--space-3); }
.hw { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-2); }
.hw__body { flex: 1 1 260px; min-width: 0; }
.hw__meta { margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.hw__title { margin: 2px 0; font-weight: 800; }
.hw__text { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.hw.is-done .hw__title { text-decoration: line-through; text-decoration-color: var(--line-strong); color: var(--muted); }

.syl { display: grid; gap: var(--space-3); }
.syl__row { display: flex; align-items: center; gap: var(--space-3); }
.syl__body { flex: 1; min-width: 0; }
.syl__title { display: flex; justify-content: space-between; gap: var(--space-3); margin: 0 0 6px; font-weight: 700; font-size: var(--text-sm); }
.syl__title span { color: var(--muted); font-weight: 600; }
.progress--wide { display: block; width: 100%; margin: 0; }

.diary-day + .diary-day { margin-top: var(--space-5); }
.diary-day__title { margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 800; color: var(--muted); }

.house-card { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.house-card__name { font-size: var(--text-xl); }
.house-badge { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 18px; background: var(--house); }
.house-badge img { width: 42px; height: auto; }

.date-chip { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--sun-soft); color: var(--navy-900); font-size: 10px; font-weight: 700; text-transform: uppercase; line-height: 1.1; }
.date-chip strong { font-size: var(--text-md); }
:root[data-theme='dark'] .date-chip { background: var(--accent-soft); color: var(--sun); }

.msg-list { display: grid; gap: var(--space-2); }
.msg-item { border-radius: var(--radius-lg); background: var(--surface-2); }
.msg-item summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.msg-item summary::-webkit-details-marker { display: none; }
.msg-item__head { flex: 1; min-width: 0; display: grid; }
.msg-item__head small { color: var(--muted); font-size: var(--text-xs); }
.msg-item.is-unread .msg-item__head strong { color: var(--ink); }
.msg-item:not(.is-unread) .msg-item__head strong { font-weight: 600; color: var(--text); }
.msg-item__body { margin: 0; padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 46px + var(--space-3)); font-size: var(--text-sm); }

.doubt { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-2); }
.doubt__q { margin: 4px 0 var(--space-3); font-weight: 700; }
.doubt__a { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius); background: var(--good-soft); font-size: var(--text-sm); }
.doubt__a svg { flex: none; margin-top: 3px; color: var(--good); }
.doubt__a p { margin: 0; }
.doubt__wait { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); color: var(--muted); }

.svc-form { margin-bottom: var(--space-5); }
.svc-form .form-grid { margin-bottom: var(--space-4); }
.row-actions--start { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger tr.is-due { background: var(--sun-soft); }
:root[data-theme='dark'] .ledger tr.is-due { background: var(--accent-soft); }
.status-row--link { width: 100%; border: 0; text-align: left; color: var(--text) !important; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.status-row--link:hover { background: var(--surface-2); }
.status-row--link > svg:last-child { flex: none; color: var(--muted); }
.admin-item--stack { flex-direction: column; align-items: stretch; }
.svc-answer { display: flex; gap: var(--space-2); align-items: flex-end; }
.svc-answer textarea { min-height: 60px; }
.dash-panel > .card + .card { margin-top: var(--space-4); }

/* ===================== Results and report cards ===================== */

.dash__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.rc-counts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.rc-counts li { padding: 6px 14px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: var(--text-sm); color: var(--muted); }
.rc-counts strong { color: var(--ink); font-size: var(--text-md); margin-right: 2px; }
.rc-table .row-actions { display: table-cell; white-space: nowrap; text-align: right; }
.rc-table .row-actions > * { vertical-align: middle; margin-left: var(--space-2); }
.rc-editor .card { margin-bottom: var(--space-4); }
.rc-editor .dash-pair { margin-bottom: var(--space-4); }
.rc-editor .dash-pair .card { margin-bottom: 0; }
.rc-marks th, .rc-marks td { text-align: center; vertical-align: middle; }
.rc-marks th[scope='row'], .rc-marks thead th:first-child { text-align: left; }
.rc-marks th small { font-weight: 500; color: var(--muted); }
.rc-marks tfoot td, .rc-marks tfoot th { background: var(--sun-soft); font-weight: 700; }
:root[data-theme='dark'] .rc-marks tfoot td, :root[data-theme='dark'] .rc-marks tfoot th { background: var(--accent-soft); }
.rc-input { display: inline-flex; align-items: baseline; gap: 2px; }
.rc-input small { color: var(--muted); font-size: var(--text-xs); }
.rc-marks .mark-input { width: 64px; text-align: center; }
.rc-grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-2); }
.rc-grades .field--inline { display: grid; gap: 4px; }
.rc-grades .field--inline label { font-size: var(--text-xs); }
.rc-editor textarea { width: 100%; font-size: var(--text-md); line-height: 1.55; }
.rc-actions { position: sticky; bottom: var(--space-3); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); }
.rc-actions__gap { flex: 1; }

.rc-list { margin-bottom: var(--space-4); }
.rc-tiles { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.rc-tile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-2); }
.rc-tile__grade { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--navy-900); color: var(--sun); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.rc-tile__body { flex: 1 1 200px; min-width: 0; }
.rc-tile__term { margin: 0; font-weight: 700; }
.rc-tile__meta { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); }
.rc-tile--waiting { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* The viewer: a document frame with zoom, print and PDF. */
.rc-viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #2a2f55; color: #fff; }
.rc-viewer[open] { display: grid; grid-template-rows: auto 1fr auto; }
.rc-viewer::backdrop { background: rgba(8, 10, 36, 0.6); }
.rc-viewer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--navy-950); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
.rc-viewer__title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rc-viewer__title h2 { margin: 0; color: #fff; font-size: var(--text-md); font-weight: 700; }
.rc-viewer__title p { margin: 0; color: #b9bee0; font-size: var(--text-xs); }
.rc-viewer__tools { display: flex; align-items: center; gap: var(--space-2); }
.rc-viewer .icon-btn { color: #fff; background: rgba(255, 255, 255, 0.08); }
.rc-viewer .icon-btn:hover { background: rgba(255, 255, 255, 0.16); }
.rc-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08); }
.rc-zoom .icon-btn { background: transparent; }
.rc-zoom__value { min-width: 56px; padding: 6px 4px; border: 0; border-radius: var(--radius-pill); background: transparent; color: #fff; font-weight: 700; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.rc-zoom__value:hover { background: rgba(255, 255, 255, 0.12); }
.rc-viewer__stage { overflow: auto; padding: var(--space-6) var(--space-4); display: flex; justify-content: center; align-items: flex-start; background: radial-gradient(circle at 50% 0%, #353b6b 0%, #23284d 70%); }
.rc-viewer__page { position: relative; flex: none; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06); }
.rc-viewer__page iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; background: #fff; }
.rc-viewer__hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: var(--space-2) var(--space-4); background: var(--navy-950); color: #b9bee0; font-size: var(--text-xs); }
@media (max-width: 640px) {
  .rc-viewer__bar { padding: var(--space-2) var(--space-3); }
  .rc-viewer__title .tile { display: none; }
  .rc-viewer__tools .btn span, .rc-viewer__tools > .icon-btn[data-rc-print] { display: none; }
  .rc-viewer__stage { padding: var(--space-4) var(--space-2); }
  .rc-viewer__tools { width: 100%; justify-content: space-between; }
}

/* ===================== Phone layout (the school app) ===================== */

.m-head, .m-bar, .m-home { display: none; }

@media (max-width: 760px) {
  :root.portal-app .page--portal { padding: 0; }
  :root.portal-app .page--portal > .container { padding: 0; }
  :root.portal-app .app { display: block; min-height: 100vh; }
  :root.portal-app .app__side, :root.portal-app .app__top, :root.portal-app .app__role { display: none; }
  :root.portal-app .app__main { padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
  :root.portal-app .app__main > :not(.m-head) { margin-inline: 14px; }
  :root.portal-app .dash-grid { display: none; }
  :root.portal-app .dash-panel { padding: var(--space-4); border-radius: var(--radius-lg); }
  :root.portal-app .chat-launcher { bottom: calc(86px + env(safe-area-inset-bottom)); }
  /* The app header already names the section. */
  :root.portal-app .dash-panel > h2.dash__title:first-child { display: none; }

  .m-head {
    display: block; position: relative; isolation: isolate;
    margin: 0 0 var(--space-5); padding: calc(18px + env(safe-area-inset-top)) 18px 22px;
    color: #fff;
  }
  /* The navy panel, with soft light from the top right (sun) and bottom left (the logo's water blue). On the
   * home screen it stops halfway down the search bar, so the bar sits across its edge. */
  .m-head::before {
    content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 0 0 30px 30px;
    background: radial-gradient(circle at 92% 0%, rgba(255, 212, 59, 0.24), rgba(255, 212, 59, 0) 42%),
      radial-gradient(circle at 0% 100%, rgba(71, 150, 214, 0.32), rgba(71, 150, 214, 0) 55%), var(--navy-900);
  }
  .m-head--home { padding-bottom: 0; margin-bottom: 52px; }
  .m-head--home::before { bottom: 29px; }
  .m-head__row { display: flex; align-items: center; gap: 12px; }
  .m-head__logo { width: 40px; height: auto; border-radius: 50%; background: #fff; padding: 2px; flex: none; }
  .m-head__titles { flex: 1; min-width: 0; }
  .m-head__kicker { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
  .m-head__title { margin: 2px 0 0; color: #fff; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-head__sub { margin: 4px 0 0; color: #c3c8e6; font-size: var(--text-sm); }
  .m-head__btn { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; }
  .m-head__count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d23b33; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; box-shadow: 0 0 0 2px var(--navy-900); }
  .m-head__me { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--sun); color: var(--navy-950); font-weight: 800; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
  .m-search { position: relative; display: flex; align-items: center; margin: 22px 0 -30px; }
  .m-search svg { position: absolute; left: 18px; color: var(--navy-900); }
  .m-search input { min-height: 58px; padding-left: 52px; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 30px -12px rgba(20, 26, 77, 0.35), 0 0 0 1px var(--line); }

  .m-home { display: block; }
  .m-banner { display: flex; align-items: center; gap: var(--space-3); width: 100%; margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border: 0; border-radius: 20px; background: var(--sun); color: var(--navy-950); text-align: left; }
  .m-banner > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
  .m-banner small { font-size: var(--text-xs); font-weight: 600; opacity: 0.8; }
  .m-banner__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--navy-900); color: var(--sun); }
  .m-sec { margin-bottom: var(--space-5); }
  .m-sec__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
  .m-sec__title { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
  .m-sec__link { border: 0; background: none; padding: 4px 0; color: var(--navy-700, var(--navy-900)); font-weight: 700; font-size: var(--text-sm); }
  :root[data-theme='dark'] .m-sec__link { color: var(--sun); }
  .m-card { padding: var(--space-2) var(--space-3); border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -18px rgba(20, 26, 77, 0.4); }
  .m-events { margin: 0; padding: 0; list-style: none; }
  .m-event { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
  .m-event + .m-event { border-top: 1px solid var(--line); }
  .m-event__date { display: grid; justify-items: center; flex: none; width: 58px; padding: 6px 0; border-radius: 14px; background: var(--surface-2); line-height: 1.1; }
  .m-event__date small { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
  .m-event__date strong { font-size: 1.45rem; color: var(--navy-900); }
  :root[data-theme='dark'] .m-event__date strong { color: var(--sun); }
  .m-event__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .m-event__body small { color: var(--muted); font-size: var(--text-xs); }

  .m-bar {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -18px rgba(20, 26, 77, 0.35);
  }
  .m-bar__tab { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 4px 4px; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; }
  .m-bar__tab svg { transition: transform var(--dur-fast) var(--ease); }
  .m-bar__tab[aria-current='page'] { color: var(--navy-900); font-weight: 800; }
  :root[data-theme='dark'] .m-bar__tab[aria-current='page'] { color: var(--sun); }
  .m-bar__tab[aria-current='page']::before { content: ''; position: absolute; top: -6px; width: 34px; height: 4px; border-radius: 0 0 4px 4px; background: var(--sun-600); }
  .m-bar__tab[aria-current='page'] svg { transform: translateY(-1px) scale(1.08); }
  .m-bar__dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: #d23b33; box-shadow: 0 0 0 2px var(--surface); }
}

/* Quick access tiles (phone home and the admin's "All sections") */
.qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.qa-grid--page { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 340px) { .qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qa {
  --qa: var(--navy-900); --qa-bg: #eceef9;
  position: relative; display: grid; align-content: start; gap: 2px; width: 100%; min-height: 128px; padding: 14px 12px 12px;
  border: 0; border-radius: 20px; background: var(--qa-bg); color: var(--ink); text-align: left;
  box-shadow: 0 10px 22px -18px rgba(20, 26, 77, 0.6);
  transition: transform var(--dur-fast) var(--ease);
}
.qa:active { transform: scale(0.97); }
.qa__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: var(--qa); color: #fff; box-shadow: 0 6px 14px -6px var(--qa); }
.qa__title { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.qa__sub { padding-right: 14px; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.qa__chev { position: absolute; right: 8px; bottom: 12px; color: var(--muted); }
.qa__badge { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--qa); color: #fff; font-size: 10.5px; font-weight: 800; }
.qa--navy { --qa: #232b74; --qa-bg: #eceef9; }
.qa--sun { --qa: #e0a400; --qa-bg: #fff6d9; }
.qa--teal { --qa: #1d7964; --qa-bg: #e3f4ee; }
.qa--blue { --qa: #2563c9; --qa-bg: #e6eefc; }
.qa--peach { --qa: #e0663a; --qa-bg: #fde9df; }
.qa--mint { --qa: #1f9254; --qa-bg: #e2f5ea; }
.qa--rose { --qa: #d23b5c; --qa-bg: #fde6ec; }
.qa--lilac { --qa: #5b4fc0; --qa-bg: #ecebfb; }
.qa--sky { --qa: #2a7fb8; --qa-bg: #e1f0fa; }
:root[data-theme='dark'] .qa { --qa-bg: var(--surface); box-shadow: 0 0 0 1px var(--line); }