:root{color-scheme:light;--navy:#152e40;--blue:#245b79;--blue-light:#eaf2f6;--ink:#213442;--muted:#697982;--line:#e4e9eb;--bg:#f6f8f8;--green:#2e7861;--amber:#916822;--radius:13px}
*{box-sizing:border-box}body{margin:0;font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}h1,h2,h3,p{margin:0}button:disabled{cursor:wait;opacity:.6}[hidden]{display:none!important}.sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:99;top:-60px;left:20px;padding:10px;background:white}.skip-link:focus{top:10px}:focus-visible{outline:3px solid #b67e20;outline-offset:3px}button,input,select{border-radius:7px}button{border:0}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:11px 18px;min-height:43px;font-weight:600;text-decoration:none;border:1px solid transparent}.primary{background:var(--blue);color:white}.primary:hover{background:#19465e}.secondary{background:white;border-color:var(--line);color:var(--blue)}.wide{width:100%}.text-button{background:none;color:var(--blue);font-weight:600;padding:7px 0;font-size:12px}.text-button:hover{text-decoration:underline}.eyebrow{color:var(--blue);font-size:10px;font-weight:700;letter-spacing:1.9px;margin-bottom:8px}.brand{display:flex;align-items:center;gap:11px;font-size:25px;letter-spacing:-.8px;font-weight:700;text-decoration:none;color:white}.brand-mark{background:#f7f6ee;color:var(--navy);width:36px;height:38px;line-height:33px;text-align:center;border-radius:11px;font:700 34px/34px Georgia,serif;letter-spacing:-2px}.brand-mark span{color:#d3a255}.app-shell{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:var(--navy);color:#d5e1e7;padding:32px 22px 20px;display:flex;flex-direction:column}.sidebar .brand{margin:0 10px 43px}.sidebar-label{font-size:9px;letter-spacing:1.9px;color:#a1b9c6;margin:0 12px 14px}.sidebar nav{display:grid;gap:7px}.nav-link{display:flex;align-items:center;gap:12px;text-decoration:none;padding:12px;border-radius:8px;font-size:12px;color:#bbccd5}.nav-link:hover{background:#203c4e}.nav-link.active{background:#2b485a;color:white;font-weight:600}.nav-link .icon{width:18px;height:18px}.sidebar-hint{margin:auto 7px 27px;border:1px solid #3a5262;border-radius:10px;padding:17px 13px}.sidebar-hint .icon{color:#dcbe85;margin-bottom:8px;display:block}.sidebar-hint strong{font-size:12px;display:block;color:#f0f5f7}.sidebar-hint p{font-size:11px;line-height:1.7;margin-top:5px;color:#afc1cc}.profile{display:flex;gap:10px;align-items:center;padding:19px 0 10px;border-top:1px solid #355061}.avatar{width:39px;height:39px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#eaf1f5;color:#2b5c77;font-size:12px;font-weight:700;flex-shrink:0}.avatar.parent{background:#dce9e8;color:#375d5b}.profile strong{font-size:12px;display:block;color:#f0f5f7}.profile small{font-size:10px;display:block;color:#a7beca}.switch-button{display:flex;justify-content:space-between;background:none;color:#b5cbd5;font-size:11px;padding:8px 1px;text-align:left}.switch-button:hover{color:white}.workspace{min-width:0}.demo-banner{height:35px;background:#edf2ee;border-bottom:1px solid #dfe8e0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:10px;color:#567065}.live-dot{display:inline-block;width:6px;height:6px;background:#739586;border-radius:50%;margin-right:6px;vertical-align:middle}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:white}.breadcrumb{font-size:11px;color:var(--muted)}.breadcrumb span{padding:0 14px;color:#9eabb1}.breadcrumb strong{font-weight:500;color:var(--ink)}.term-label{font-size:8px;letter-spacing:1px;color:var(--muted)}.term-label strong{font-size:11px;letter-spacing:0;margin-left:10px;color:var(--ink);font-weight:500}main{max-width:1440px;margin:0 auto;padding:35px 40px 20px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:12px}h1{font-size:29px;line-height:1.25;letter-spacing:-.9px;font-weight:650}.page-heading p:last-child{color:var(--muted);margin-top:9px;font-size:12px}.heading-icon{height:52px;width:52px;border-radius:16px;border:1px solid #dbe6e9;background:#eef3f3;display:grid;place-items:center;color:#507082}.heading-icon .icon{width:27px;height:27px}h2{font-size:15px;letter-spacing:-.2px;font-weight:650}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.children-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:23px}.child-card{border:1px solid var(--line);border-radius:var(--radius);padding:17px 16px;background:white;text-align:left;display:flex;align-items:center;gap:12px;min-height:89px}.child-card:hover{border-color:#aac4d0}.child-card.selected{border-color:#7099af;background:#f0f6f8;box-shadow:0 0 0 1px #7099af}.child-card strong{font-size:13px;display:block}.child-card small{display:block;color:var(--muted);font-size:10px}.child-card:nth-child(2) .avatar{background:#f4eade;color:#8f7149}.child-card:nth-child(3) .avatar{background:#eae7f2;color:#70618b}.child-arrow{margin-left:auto;color:#7c929e}.filters{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px 12px;display:grid;grid-template-columns:minmax(130px,1.3fr) minmax(110px,1fr) minmax(115px,.85fr) minmax(115px,.85fr) minmax(130px,1fr) auto;align-items:end;gap:10px;margin-bottom:22px}.field{min-width:0}.field label,.login-form label{font-size:10px;font-weight:600;display:block;margin-bottom:6px;color:#4f626e}input,select{height:38px;width:100%;border:1px solid #dce3e7;background:white;padding:7px 10px;color:#334e5e;font-size:11px;min-width:0}input::placeholder{color:#84929b}.input-icon{position:relative}.input-icon input{padding-left:31px}.input-icon .icon{width:14px;height:14px;position:absolute;top:12px;left:10px;color:#82949d}.reset-button{font-size:11px;background:none;color:var(--blue);height:38px;padding:0 4px}.reset-button:hover{text-decoration:underline}.filter-caption{grid-column:1/-1;font-size:9px;color:var(--muted)}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:25px}.stat{border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px 15px;background:white;position:relative;min-height:115px}.stat-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#5d717c}.stat-top .icon{width:16px;height:16px;color:#6c8998}.stat-value{font-size:30px;line-height:1.35;margin-top:6px;font-weight:650;letter-spacing:-1px}.stat-caption{font-size:9px;color:#788b95}.stat:nth-child(2) .stat-value{color:var(--green)}.stat:nth-child(3) .stat-value{color:var(--amber)}.records-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.records-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:21px 21px 17px}.records-heading p{font-size:10px;color:var(--muted);margin-top:3px}.sort-field{width:125px}.sort-field select{height:32px;font-size:10px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}thead{background:#f8fafb}th{font-size:9px;font-weight:600;color:#72828c;padding:11px 21px;letter-spacing:.2px;border-top:1px solid #edf1f3;border-bottom:1px solid #edf1f3}td{font-size:11px;padding:15px 21px;border-bottom:1px solid #edf1f3}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfcfd}.student-cell{display:flex;align-items:center;gap:10px}.student-cell .avatar{height:29px;width:29px;font-size:9px}.student-cell strong{font-size:11px;font-weight:600}.student-cell small{display:block;font-size:9px;color:#81919a}.date-cell{font-weight:550}.badge{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:550;border-radius:5px;padding:4px 7px;background:#f0f3f4;color:#687b86}.badge:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}.badge.excused,.badge.accepted{background:#edf5f0;color:#3b775f}.badge.pending{background:#fbf3e5;color:#956f2c}.badge.unexcused,.badge.rejected{background:#f8eeee;color:#a56b69}.note-kind{display:flex;align-items:center;gap:6px;color:#5d7481;font-size:10px}.note-kind .icon{width:14px;height:14px}.subtle{color:#8b969e;font-size:10px}.view-button{background:none;color:var(--blue);font-size:10px;font-weight:600;padding:5px 0;white-space:nowrap}.view-button:hover{text-decoration:underline}.note-actions{display:flex;gap:8px;flex-wrap:wrap}.panel-footnote{font-size:9px;color:#7b8c96;background:#fbfcfc;padding:13px 21px;border-top:1px solid #edf1f3}.panel-footnote .live-dot{width:5px;height:5px;background:#96a6ad}.page-footer{display:flex;justify-content:space-between;font-size:9px;color:#8a9aa3;margin-top:26px;padding-bottom:3px}.empty-state{text-align:center;padding:38px 18px}.empty-state>.icon{width:30px;height:30px;color:#87a0ad;margin-bottom:9px}.empty-state h3{font-size:16px}.empty-state p{font-size:12px;color:var(--muted);margin:5px 0 16px}.empty-state .button{font-size:11px}.error{color:#a13e3e;font-size:12px}.error-banner{background:#fff0ed;border:1px solid #e9c7c2;padding:12px 16px;border-radius:8px;margin-bottom:16px}.records-panel[aria-busy="true"]{opacity:.65}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0}.guide article{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:25px}.guide-number{font-size:25px;color:#8eafbd;font-weight:600}.guide h3{font-size:15px;margin:12px 0}.guide p{font-size:12px;color:var(--muted);margin-top:8px}.status-guide{max-width:850px}.status-guide strong{color:var(--ink)}dialog{padding:0;border:1px solid #d5e0e5;border-radius:16px;width:min(740px,94vw);max-height:90vh;color:var(--ink);box-shadow:0 20px 80px #142f4030}dialog::backdrop{background:#172f43a6;backdrop-filter:blur(3px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:24px 26px 18px;border-bottom:1px solid var(--line)}.dialog-header h2{font-size:21px}.close-button{font-size:27px;background:#f2f5f6;color:#677e8c;width:33px;height:33px;line-height:1}.note-meta{padding:18px 26px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.note-meta p{font-size:11px;color:var(--muted)}.note-preview{margin:0 26px 24px;background:#f8fafb;border:1px solid var(--line);border-radius:9px;padding:23px}.note-preview pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace}.note-preview iframe{width:100%;height:430px;border:0}.note-preview img{max-width:100%;max-height:500px}.dialog-footer{padding:18px 26px;background:#f5f8f9;display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-footer span{font-size:10px;color:var(--muted)}.dialog-footer .button{font-size:11px;min-height:36px;padding:8px 15px}.login-page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:white}.login-story{padding:56px max(40px,10vw);background:var(--navy);color:white;display:flex;flex-direction:column}.login-story .brand{margin-bottom:90px}.eyebrow.light{color:#c8b88f}.login-story h1{font-size:47px;line-height:1.16;letter-spacing:-1.8px;margin:10px 0 24px}.login-story>p:not(.eyebrow){font-size:14px;color:#b4c9d5;max-width:340px}.login-story>small{margin-top:auto;padding-top:60px;font-size:10px;color:#9bb4c3}.login-illustration{position:relative;margin-top:40px;width:235px}.mini-calendar{width:190px;background:#fffef9;color:var(--navy);padding:20px 24px 16px;border-radius:14px;transform:rotate(-4deg);box-shadow:0 14px 30px #061b2933}.mini-calendar span{font-size:10px;letter-spacing:2px;color:#876d40;font-weight:600;display:block}.mini-calendar strong{font-size:67px;line-height:1.3;font-weight:600;display:block}.mini-calendar small{font-size:10px;color:var(--muted);display:block}.mini-check{position:absolute;right:-35px;bottom:24px;transform:rotate(4deg);padding:10px 15px;background:#dcebe4;border-radius:9px;color:#3b6956;font-size:11px;box-shadow:0 8px 20px #061b2922;display:flex;gap:7px;align-items:center}.mini-check .icon{width:15px;height:15px}.login-form-wrap{display:grid;place-items:center;padding:45px}.login-form{max-width:365px}.pill{font-size:9px;letter-spacing:1.5px;color:#648171;background:#eef4ef;padding:7px 10px;border-radius:5px;font-weight:600}.login-form h2{font-size:30px;line-height:1.25;letter-spacing:-.8px;margin:22px 0 14px}.login-form>p{color:var(--muted);font-size:13px}.login-form form{margin:29px 0 20px}.login-form label{font-size:11px}.login-form select{height:46px;font-size:13px;margin-bottom:15px}.login-form .button{font-size:12px;height:47px}.login-form .demo-disclaimer{font-size:10px;color:#8a989f;line-height:1.7}
@media(min-width:1550px){main{padding-top:45px}.page-heading{margin-bottom:40px}.children-grid{margin-bottom:28px}.child-card{min-height:100px}.summary-grid{margin-bottom:30px}.stat{min-height:125px}}
@media(max-width:1180px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding-left:16px;padding-right:16px}main{padding:28px 25px 18px}.topbar,.demo-banner{padding-left:25px;padding-right:25px}.filters{grid-template-columns:1.2fr 1fr 1fr}.reset-button{justify-self:start}.filter-caption{grid-column:auto;grid-column:2/-1;align-self:center}h1{font-size:26px}.child-card{padding:14px 11px;gap:8px}.child-card .avatar{width:31px;height:31px;font-size:10px}.child-card strong{font-size:11px}.child-arrow{display:none}.stat{padding:15px 12px}.stat-top{font-size:9px}.login-story{padding:50px 50px}.login-story h1{font-size:39px}}
@media(max-width:800px){.app-shell{display:block}.sidebar{position:static;height:auto;padding:18px 22px 0;display:block}.sidebar .brand{margin:0 0 16px;font-size:21px}.brand-mark{width:29px;height:30px;font-size:28px;line-height:27px}.sidebar-label,.sidebar-hint,.profile{display:none}.sidebar nav{display:flex;gap:5px;overflow:auto;padding-bottom:14px}.nav-link{font-size:10px;padding:8px 10px;white-space:nowrap}.nav-link .icon{width:14px;height:14px}.switch-button{position:absolute;top:22px;right:22px;font-size:10px}.topbar{height:56px}.term-label{display:none}.demo-banner{height:31px;font-size:9px}.page-heading{margin-bottom:23px}main{padding:25px 20px 18px}.topbar,.demo-banner{padding-left:20px;padding-right:20px}.heading-icon{display:none}.summary-grid{gap:9px}.stat-value{font-size:27px}.stat-top .icon{display:none}.children-grid{gap:9px}.guide-grid{grid-template-columns:1fr}.guide article{padding:20px}.page-footer{font-size:8px}.login-page{grid-template-columns:1fr}.login-story{padding:30px}.login-story .brand{margin-bottom:25px}.login-story h1{font-size:30px;margin-bottom:13px}.login-story>p:not(.eyebrow){font-size:12px}.login-illustration,.login-story>small{display:none}.login-form-wrap{padding:40px 30px}.login-form{max-width:450px}.login-form h2{font-size:26px}}
@media(max-width:520px){h1{font-size:24px}.eyebrow{font-size:8px}.page-heading p:last-child{font-size:11px}.children-grid{grid-template-columns:1fr}.child-card{min-height:68px;padding:12px 14px}.child-card strong{font-size:12px}.child-card .avatar{width:35px;height:35px}.child-arrow{display:block}.filters{grid-template-columns:1fr 1fr;padding:14px;gap:12px 9px}.search-field{grid-column:1/-1}.filters .field:nth-child(2){grid-column:1/-1}.filter-caption{grid-column:1/-1}.summary-grid{grid-template-columns:1fr 1fr}.stat{min-height:100px;padding:13px 15px}.stat-top{font-size:10px}.stat-top .icon{display:block}.banner-detail{display:none}.records-heading{padding:18px 16px}.panel-footnote{padding:12px 16px;line-height:1.8}.page-footer{gap:10px}.dialog-header{padding:20px}.note-meta{padding:16px 20px}.note-preview{margin:0 15px 15px;padding:15px}.dialog-footer{padding:16px 20px}.note-preview pre{font-size:10px}.sidebar{padding-left:16px;padding-right:16px}.switch-button{right:17px}.nav-link{padding:8px 7px}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background .12s,border-color .12s,color .12s}.child-card{transition:background .12s,border-color .12s,box-shadow .12s}}

/* Task 5 attendance staff workspace */
.staff-student-card{display:flex;align-items:center;gap:12px;min-width:0;border:1px solid var(--line);border-radius:var(--radius);padding:15px;background:#fff}
.staff-student-card .avatar{background:#e8edf2;color:#315a70}
.staff-student-card strong{display:block;font-size:12px}
.staff-student-card small{display:block;color:var(--muted);font-size:10px}
.staff-student-card .student-absence-count{margin-left:auto;text-align:right;white-space:nowrap;color:#60737e;font-size:10px}
.staff-shell .sidebar-hint{margin-top:auto}
.staff-shell .records-panel table{min-width:760px}
.staff-shell .note-actions{min-width:150px}
.badge.approved{background:#edf5f0;color:#3b775f}
.badge.needs_correction{background:#f1edf8;color:#705790}
#staff-review-dialog{width:min(880px,calc(100% - 28px));max-width:880px;max-height:calc(100vh - 28px);padding:0;border:1px solid var(--line);border-radius:15px;color:var(--ink);background:white;box-shadow:0 18px 60px #122c3d40}
#staff-review-dialog::backdrop{background:#122c3d80}
.comparison-block,.review-history-block,.review-form{padding:16px 24px;border-top:1px solid #edf1f3}
.comparison-block h3,.review-history-block h3{font-size:12px;margin:0 0 10px}
.comparison-block table{min-width:0;white-space:normal}
.comparison-block th,.comparison-block td{padding:9px 12px}
.date-match{color:var(--green);font-weight:600}
.date-missing{color:#a56b35;font-weight:600}
.review-history-block ol{padding-left:20px;margin:0;display:grid;gap:10px}
.review-history-block li{padding-left:3px;font-size:11px}
.review-history-block li p{color:#60737e;margin-top:3px;white-space:pre-wrap}
.review-form label{font-size:11px;font-weight:600;display:block;margin-bottom:7px}
.review-form textarea{width:100%;resize:vertical;border:1px solid #dce3e7;border-radius:7px;padding:10px;color:var(--ink);font:inherit;font-size:12px}
.review-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.review-actions .button{font-size:11px;min-height:38px;padding:8px 14px}
.button.warning{background:#896a30;color:white}
.button.warning:hover{background:#70531e}
.button.danger{background:#a24b48;color:white}
.button.danger:hover{background:#853b38}
.review-form[aria-busy="true"]{opacity:.65;pointer-events:none}
@media(max-width:800px){.staff-shell .sidebar-hint{display:none}.staff-shell .records-panel table{min-width:700px}.comparison-block,.review-history-block,.review-form{padding:14px 18px}}
/* Task 2 note submission */
.submit-panel{max-width:760px;background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.submit-intro{color:var(--muted);font-size:12px;margin:4px 0 18px}
.submit-success{background:#edf5f0;border:1px solid #cfe3d7;border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:12px;color:#2c5f4c}
.submit-success p{margin-top:3px}
.submit-success .text-button{display:inline-block;margin-top:4px}
.method-choice{border:0;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.method-choice legend{padding:0;margin-bottom:8px;font-size:10px;font-weight:600;color:#4f626e}
.method-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:13px;cursor:pointer}
.method-option:has(input:checked){border-color:#7099af;background:#f0f6f8}
.method-option input{width:16px;height:16px;flex-shrink:0;margin:2px 0 0}
.method-option strong{display:block;font-size:12px}
.method-option small{display:block;font-size:10px;color:var(--muted)}
.submit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.submit-full{grid-column:1/-1}
.submit-hint{font-size:10px;color:var(--muted)}
.submit-panel textarea{display:block;width:100%;resize:vertical;border:1px solid #dce3e7;border-radius:7px;padding:10px;color:#334e5e;font:inherit;font-size:11px}
.submit-panel input[type=file]{height:auto;padding:9px 10px;margin-bottom:6px}
#submit-button{font-size:12px;margin-top:4px}
@media(max-width:520px){.submit-panel{padding:18px}.method-choice,.submit-grid{grid-template-columns:1fr}.submit-full{grid-column:auto}#submit-button{width:100%}}
@media(max-width:520px){.staff-student-card{padding:12px}.staff-student-card .student-absence-count{font-size:9px}.staff-shell .summary-grid{grid-template-columns:1fr 1fr}.review-actions{display:grid;grid-template-columns:1fr}.review-actions .button{width:100%}#staff-review-dialog{max-height:calc(100vh - 16px)}}
#filters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto
}

#filters .filter-caption {
    grid-column: 1/-1
}

@media(max-width:1180px) {
    #filters {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    #filters .search-field {
        grid-column: 1/-1
    }
}

@media(max-width:520px) {
    #filters {
        grid-template-columns: 1fr 1fr
    }

    #filters .field:nth-child(2) {
        grid-column: auto
    }
}

#portal .profile {
    margin-top: auto
}

.staff-shell .profile {
    margin-top: auto
}