:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #223a3b; background: #f5f7f6; font-synthesis: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 26px 36px 32px; }
button, select { font: inherit; }
button { cursor: pointer; border: 1px solid #226758; border-radius: 10px; background: #226758; color: #fff; padding: 11px 17px; font-size: 14px; font-weight: 600; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #c79940; outline-offset: 4px; }
button.secondary { background: #fff; color: #226758; }
button.quiet { background: transparent; color: #647c77; border-color: transparent; }
.topbar, .top-actions, .brand, .dashboard-heading, .view-controls, .panel-heading, .assignment-name, .grade-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { padding-bottom: 21px; border-bottom: 1px solid #e0e8e3; }
.brand { justify-content: flex-start; gap: 10px; text-decoration: none; color: #234e45; font-size: 20px; font-weight: 750; letter-spacing: .06em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: #e3eee7; border-radius: 10px; font-size: 19px; }
.top-actions { gap: 20px; }
.connection-status { font-size: 12px; color: #748681; white-space: nowrap; }
.connection-status::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c4cbc6; margin-right: 7px; }
.connection-status.connected::before { background: #438a67; }
.welcome { padding-top: 34px; }
.eyebrow { color: #729085; font-size: 10px; font-weight: 700; letter-spacing: .15em; margin: 0 0 10px; }
h1 { font-size: clamp(29px, 4vw, 39px); letter-spacing: -.04em; font-weight: 650; margin: 0 0 12px; }
.welcome>p:last-child { color: #6b807b; font-size: 15px; margin: 0; }
.activity { color: #73867e; font-size: 12px; min-height: 18px; margin: 17px 0 23px; }
.child-tabs { display: flex; gap: 12px; border-bottom: 1px solid #e0e8e3; padding-bottom: 17px; }
.child-tab { display: flex; align-items: center; gap: 10px; border: 1px solid #dce6df; background: #fff; color: #72847e; min-width: 145px; padding: 10px 18px 10px 12px; }
.child-tab[aria-pressed="true"] { background: #e8f1eb; color: #1d5746; border-color: #acc9b7; }
.child-avatar { display: grid; place-items: center; width: 29px; height: 29px; background: #f1f4f1; color: #6b8575; border-radius: 50%; font-size: 12px; }
.child-tab[aria-pressed="true"] .child-avatar { color: #fff; background: #3d7b5e; }
.dashboard-heading { margin: 29px 0 22px; align-items: flex-end; }
h2 { font-size: 22px; letter-spacing: -.025em; margin: 0; font-weight: 650; }
h3 { font-size: 14px; line-height: 1.5; font-weight: 600; margin: 0; }
.dashboard-heading .eyebrow { margin-bottom: 9px; }
.muted { color: #778b82; font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { min-height: 134px; padding: 21px; text-align: left; color: #345052; background: #fff; border: 1px solid #e0e8e3; border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; box-shadow: 0 3px 8px #344b3903; }
.metric[aria-pressed="true"] { box-shadow: 0 0 0 2px #5b8f7d; }
.metric.blue { background: #f0f5f9; border-color: #dce6ed; }
.metric.amber { background: #fcf6ee; border-color: #eee3d3; }
.metric.teal { background: #eef6f2; border-color: #daebe1; }
.metric-title { font-size: 12px; font-weight: 600; }
.metric-value { font-size: 33px; line-height: 1; font-weight: 600; letter-spacing: -.05em; }
.metric-detail { font-size: 10px; color: #6c817a; font-weight: 400; }
.review-note { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 17px 0 0; padding: 12px 16px; border: 1px solid #e3e9e3; border-radius: 9px; color: #72816f; background: #f3f5ef; }
.review-note p { font-size: 12px; line-height: 1.6; margin: 0; }
.text-button { border: 0; background: transparent; color: #436e59; font-size: 12px; padding: 6px; white-space: nowrap; }
.view-controls { margin: 30px 0 20px; }
.view-tabs { display: flex; gap: 5px; padding: 4px; border-radius: 10px; background: #eaf0ec; }
.view-tab { font-size: 12px; color: #6c8278; background: transparent; border: 0; border-radius: 7px; padding: 10px 16px; }
.view-tab[aria-pressed="true"] { color: #2b5f4e; background: #fff; box-shadow: 0 1px 4px #23403010; }
.subject-control { display: flex; align-items: center; gap: 10px; color: #7a8d84; font-size: 12px; }
select { color: #436454; font-size: 12px; background: #fff; border: 1px solid #dce6de; border-radius: 8px; padding: 9px 30px 9px 12px; max-width: 270px; }
.panel { background: #fff; border: 1px solid #e0e8e3; border-radius: 15px; padding: 25px 27px 16px; box-shadow: 0 5px 16px #344b3903; }
.panel h2 { font-size: 17px; }
.panel-heading { align-items: flex-start; margin-bottom: 21px; }
.count-label { padding-top: 5px; font-size: 11px; color: #899a91; white-space: nowrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 17px; }
.filter { display: flex; gap: 7px; padding: 7px 10px; font-size: 11px; font-weight: 500; color: #7a8c82; background: #f8faf8; border: 1px solid #e7ece7; border-radius: 7px; }
.filter[aria-pressed="true"] { color: #245c47; background: #eaf3ee; border-color: #c4dcce; }
.filter-count { opacity: .75; font-size: 10px; }
.assignment-row { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(110px, .7fr) minmax(130px, .9fr) minmax(65px, .4fr); align-items: start; column-gap: 22px; padding: 21px 0; border-top: 1px solid #edf1ed; }
.assignment-name { align-items: flex-start; gap: 10px; }
.assignment-name h3 { overflow-wrap: anywhere; }
.citation { display: inline-grid; place-items: center; flex: 0 0 17px; width: 17px; height: 17px; color: #8fa69b; border: 1px solid #b9c9be; border-radius: 50%; font-size: 10px; font-weight: 700; font-family: Georgia, serif; text-decoration: none; margin-top: 3px; }
.citation:hover { color: #226758; border-color: #226758; background: #eff6f1; }
.citation { position: relative; }
.citation::before { content: ''; position: absolute; inset: -11px; }
.assignment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.subject-link { color: #557965; background: #f0f5f1; border: 0; font-size: 10px; font-weight: 500; border-radius: 5px; padding: 4px 6px; }
.assignment-group { font-size: 10px; color: #95a297; }
.field-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: #97a69c; margin-bottom: 6px; }
.assignment-due { font-size: 11px; line-height: 1.5; color: #647e70; padding-top: 3px; }
.assignment-state { padding-top: 2px; }
.state-badge { display: inline-block; padding: 4px 7px; border-radius: 5px; font-size: 10px; font-weight: 500; background: #f2f5f2; color: #7b8d81; }
.state-badge.due, .state-badge.upcoming { color: #567992; background: #eef4f8; }
.state-badge.overdue { color: #a17134; background: #fbf1e1; }
.state-badge.submitted { color: #46836d; background: #eef7f1; }
.state-badge.check { color: #8a8170; background: #f4f2eb; }
.state-note { display: block; font-size: 10px; color: #94a397; line-height: 1.5; margin-top: 7px; }
.assignment-score { text-align: right; font-size: 12px; padding-top: 3px; }
.assignment-score strong { font-weight: 500; }
.empty-state { text-align: center; color: #829687; font-size: 13px; line-height: 1.7; padding: 35px 16px 42px; border-top: 1px solid #edf1ed; }
.empty-icon { display: grid; place-items: center; margin: 0 auto 12px; width: 32px; height: 32px; border-radius: 50%; background: #eff5ef; color: #678b74; }
.more { display: block; margin: 15px auto 6px; font-size: 12px; }
.grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding-bottom: 12px; }
.grade-card { border: 1px solid #e4ebe5; border-radius: 11px; padding: 18px; }
.grade-card-heading { align-items: flex-start; }
.grade-card h3 { font-size: 12px; }
.grade-drilldown { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 10px; background: transparent; color: #3f6853; border: 0; border-radius: 5px; padding: 18px 0 0; width: 100%; }
.course-grade { font-size: 29px; font-weight: 600; letter-spacing: -.05em; }
.course-grade.no-grade { font-size: 18px; font-weight: 400; color: #95a89b; padding: 7px 0; }
.grade-period { font-size: 10px; font-weight: 400; color: #8ca08e; }
.grade-cta { font-size: 10px; font-weight: 400; color: #6e8e79; }
.grade-attention { font-size: 10px; color: #a5834d; font-weight: 400; }
.scope-note { font-size: 11px; line-height: 1.8; color: #8c9d90; margin: 17px 2px 27px; }
.connection-panel { border-top: 1px solid #e0e8e3; padding-top: 19px; color: #81978a; font-size: 12px; }
.connection-panel summary { cursor: pointer; font-size: 11px; }
.connection-panel>p { line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.actions button { font-size: 11px; }
.error { color: #ad603f !important; }
footer { color: #a0afa3; font-size: 10px; line-height: 1.8; margin-top: 24px; }
footer span { margin: 0 6px; }
.muted, .state-note { color: #647b6d; }
.state-note { font-size: 11px; }
.field-label { color: #647b6d; font-size: 10px; }
.state-badge.overdue { color: #815924; }
.state-badge.submitted { color: #326b55; }
@media(max-width: 900px) { .assignment-row { grid-template-columns: minmax(0, 1.4fr) minmax(105px, .8fr) minmax(120px, .8fr); gap: 15px; } .assignment-score { grid-column: 2; text-align: left; } .metric { padding: 17px; } .grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 650px) { main { padding: 20px 18px 26px; } .top-actions { gap: 10px; } .top-actions button { padding: 9px 12px; font-size: 11px; } .connection-status { font-size: 10px; } .brand { font-size: 17px; gap: 8px; } .brand-mark { width: 30px; height: 30px; } .welcome { padding-top: 28px; } .welcome>p:last-child { font-size: 13px; line-height: 1.7; } .child-tab { min-width: 130px; } .dashboard-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin: 24px 0 18px; } .dashboard-heading .muted { margin: 0; } .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .metric { min-height: 122px; padding: 18px; } .metric-value { font-size: 30px; } .metric-detail { font-size: 10px; } .review-note { align-items: flex-start; padding: 11px 13px; gap: 8px; } .view-controls { align-items: stretch; flex-direction: column; gap: 13px; margin-top: 22px; } .view-tabs { align-self: flex-start; } .subject-control { justify-content: space-between; } select { max-width: 78%; } .panel { padding: 20px 17px 14px; } .panel-heading { flex-direction: column; gap: 4px; margin-bottom: 17px; } .panel .muted { font-size: 11px; } .count-label { font-size: 10px; } .filters { gap: 6px; } .filter { font-size: 10px; padding: 6px 8px; } .assignment-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 15px; column-gap: 16px; padding: 20px 0; } .assignment-identity { grid-column: 1 / -1; } .assignment-name h3 { font-size: 13px; } .assignment-due { grid-column: 1; } .assignment-state { grid-column: 2; grid-row: 2 / 4; } .assignment-score { grid-column: 1; grid-row: 3; } .state-note { max-width: 200px; } .grade-grid { gap: 10px; } .grade-card { padding: 14px; } .course-grade { font-size: 26px; } .grade-card h3 { font-size: 11px; } .course-grade.no-grade { font-size: 14px; } .grade-period { line-height: 1.6; } }
@media(max-width: 380px) { .connection-status { max-width: 70px; white-space: normal; text-align: right; } .child-tab { min-width: 116px; } .grade-grid { grid-template-columns: 1fr; } }

/* Child identity colors are independent of the green/amber/red score scale. */
:root { --accent: #721d3d; --accent-soft: #f6eaf0; --accent-line: #dcb8c7; color: #342f35; background: #f8f7f8; }
body[data-child="aashni"] { --accent: #2458a8; --accent-soft: #eaf1fc; --accent-line: #b9ccef; }
button { background: var(--accent); border-color: var(--accent); }
button.secondary, .brand, .eyebrow, .text-button, .grade-drilldown { color: var(--accent); }
.brand-mark { color: var(--accent); background: var(--accent-soft); }
.child-tab { color: #69626b; background: #fff; border-color: #e2dce3; }
.child-tab.kaavya { --child-accent: #721d3d; --child-soft: #f6eaf0; }
.child-tab.aashni { --child-accent: #2458a8; --child-soft: #eaf1fc; }
.child-tab .child-avatar { background: var(--child-soft); color: var(--child-accent); }
.child-tab[aria-pressed="true"] { background: var(--child-accent); color: #fff; border-color: var(--child-accent); }
.child-tab[aria-pressed="true"] .child-avatar { background: #ffffff26; color: #fff; }
.metric { color: #443c46; border-color: #e4dfe5; }
.metric.blue { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.metric[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.muted, .state-note, .field-label, .metric-detail, .assignment-due, .scope-note, .grade-period, .grade-basis, .connection-panel, .activity { color: #6e6672; }
.welcome>p:last-child { color: #756c79; }
.view-controls { flex-wrap: wrap; }
.view-tabs { background: #eeebef; flex-wrap: wrap; }
.view-tab { color: #746977; white-space: nowrap; padding: 10px 13px; }
.view-tab[aria-pressed="true"] { color: var(--accent); }
.subject-control, select { color: #685e6b; }
.filter { color: #716775; background: #faf9fb; border-color: #e6e1e8; }
.filter[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.subject-link { color: var(--accent); background: var(--accent-soft); }
.target-summary { width: 100%; text-align: left; background: #fff; color: var(--accent); border: 1px solid var(--accent-line); font-size: 12px; font-weight: 500; padding: 13px 16px; margin-top: 14px; }
.review-note { background: #f6f4f0; color: #706754; }
.state-badge.graded { color: #27664c; background: #edf6f0; }
.state-badge.due, .state-badge.upcoming { color: var(--accent); background: var(--accent-soft); }
.citation { color: #948693; border-color: #cbbfcc; }
.citation:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.score-good { color: #237343; }
.score-moderate { color: #986400; }
.score-low { color: #b02e39; }
.score-neutral { color: #766d7b; }
.score-indicator { display: block; font-size: 10px; line-height: 1.5; margin-top: 6px; font-weight: 600; }
.score-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 11px; margin: -3px 0 23px; }
#grades-panel { margin-bottom: 20px; }
.grade-review { text-align: left; padding: 12px 0 3px; }
.grade-categories { border-top: 1px solid #eee8ef; margin-top: 14px; padding-top: 12px; }
.grade-categories summary, .rubric-details summary { cursor: pointer; color: var(--accent); font-size: 11px; }
.grade-categories table { font-size: 10px; width: 100%; border-collapse: collapse; margin-top: 10px; }
.grade-categories th, .grade-categories td { text-align: left; padding: 6px 5px 6px 0; border-bottom: 1px solid #f1edf2; font-weight: 400; vertical-align: top; }
.grade-categories thead th { font-weight: 600; }
.grade-basis { font-size: 10px; }
.feedback-link { display: block; padding: 8px 0 0; font-size: 10px; }
.detail-card { padding: 20px 0; border-top: 1px solid #eee9ef; }
.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.detail-subtitle { font-size: 11px; color: #7d6d80; margin: 7px 0 14px; }
.detail-text { font-size: 12px; line-height: 1.8; white-space: pre-line; margin: 10px 0 0; overflow-wrap: anywhere; }
.teacher-comment { margin: 14px 0; padding: 13px 16px; border-left: 3px solid var(--accent-line); background: #faf8fb; border-radius: 0 8px 8px 0; }
.teacher-comment p { font-size: 12px; line-height: 1.8; margin: 0; }
.teacher-comment footer { color: #7c6f7f; font-size: 10px; margin-top: 9px; }
.rubric-details { margin-top: 14px; padding: 13px 15px; border: 1px solid #e7e0e9; border-radius: 9px; }
.rubric-criterion { padding: 12px 0; border-top: 1px solid #eee9ef; margin-top: 10px; }
.rubric-criterion strong { font-size: 12px; font-weight: 600; }
.rubric-criterion p { font-size: 12px; line-height: 1.7; margin: 9px 0 0; }
.section-title { font-size: 14px; margin: 26px 0 15px; }
.progress-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.progress-summary>div { padding: 15px; background: var(--accent-soft); border-radius: 10px; }
.progress-summary strong { display: block; color: var(--accent); font-size: 25px; font-weight: 600; }
.progress-summary span { display: block; color: #716575; font-size: 11px; margin-top: 7px; }
.history-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.history-table th, .history-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #eee8f0; }
.history-table thead { color: #786d7c; }
.history-table tbody th { font-weight: 500; }
.calendar-date { color: var(--accent); font-size: 12px; font-weight: 600; margin: 10px 0 0; }
.availability-note { font-size: 12px; color: #805a24; line-height: 1.6; background: #fcf6ed; border-radius: 8px; padding: 12px 15px; }
@media(max-width:650px) { .view-tabs { width: 100%; } .view-tab { flex: 1 0 29%; padding: 10px 7px; } .target-summary { font-size: 11px; line-height: 1.7; } .progress-summary { gap: 8px; } .progress-summary>div { padding: 12px 9px; } .progress-summary span { font-size: 10px; } .grade-grid { grid-template-columns: 1fr; } .teacher-comment { padding: 12px; } }
/* Family sign-in and settings share the dashboard’s mobile layout. */
.signin-panel {max-width:480px;margin:24px auto;padding:28px}
.signin-only main {min-height:100dvh;display:grid;place-items:center;padding:24px}
.signin-only main > :not(#signin) {display:none !important}
.signin-only .signin-panel {width:100%;margin:0}
.signin-panel #signin-message:empty {display:none}
.signin-panel form,.connection-panel form {display:grid;gap:12px;max-width:480px}
.signin-panel input:not([type=checkbox]),.connection-panel input {width:100%;min-height:44px;padding:10px 12px;border:1px solid #d4d8de;border-radius:9px;font:inherit;background:white;color:#242936}
.remember {display:flex;align-items:center;gap:9px;font-size:.9rem}
.remember input {width:18px;height:18px}
.access-row {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #e9e9ee}
.top-actions {flex-wrap:wrap}