:root{font:16px/1.5 system-ui,sans-serif;color:#17322e;background:#f3f5f0;--green:#17463e;--muted:#536960;--line:#d9e3da;--white:#fff}
*{box-sizing:border-box}body{margin:0}header{background:var(--green);color:white;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem max(1rem,calc((100vw - 1240px)/2))}
.brand{display:flex;align-items:center;gap:.8rem}.mark{display:grid;place-items:center;background:#e3efd2;color:#17463e;border-radius:12px;width:42px;height:42px;font: bold 1.6rem Georgia}.brand small{display:block;color:#c8ded3;font-size:.66rem;letter-spacing:.16em}
.layout{max-width:1240px;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr);gap:2rem;padding:2rem 1rem}main{min-width:0}nav{display:flex;flex-direction:column;gap:.4rem}nav button{text-align:left;background:transparent;color:var(--green)}nav button[aria-current]{background:#dcead6}nav small{padding:.6rem .8rem;color:var(--muted)}
h1,h2,p{margin:0 0 .8rem}h1{font:600 clamp(2rem,5vw,3.3rem)/1.08 Georgia,serif;letter-spacing:-.04em}h2{font-size:1.16rem}.eyebrow{font-size:.72rem;color:#426e5e;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.muted{color:var(--muted)}.hero{background:#e2eddc;border:1px solid #cfdcc9;border-radius:20px;padding:clamp(1.3rem,5vw,3rem);margin-bottom:1.2rem}.card{background:white;border:1px solid var(--line);border-radius:15px;padding:1.15rem;margin:0 0 1rem}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1rem}.metric{font:2.3rem Georgia;display:block}
button,input,select{font:inherit;border-radius:8px;min-height:42px}button{cursor:pointer;border:0;background:var(--green);color:white;padding:.5rem .9rem;font-weight:650}button:hover{filter:brightness(.9)}button:disabled{opacity:.55;cursor:wait}.quiet{background:#e8eee7;color:var(--green)}input,select{width:100%;border:1px solid #a9bdb1;background:white;padding:.4rem .6rem;color:inherit}label{display:grid;gap:.25rem;font-weight:600;min-width:0}form.fields{display:flex;align-items:end;gap:.75rem;flex-wrap:wrap;margin:.8rem 0}form.fields label{flex:1 1 135px}form.fields button{align-self:end}.list{list-style:none;margin:0;padding:0}.list li{border-top:1px solid var(--line);padding:.75rem 0;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}.badge{background:#edf1e6;border-radius:20px;padding:.2rem .65rem;font-size:.84rem}.login{max-width:460px;margin:2rem auto}.login form{display:grid;gap:1rem}.layout:has(nav[hidden]){display:block}.empty{color:var(--muted);margin:.8rem 0}a{color:#19594d;font-weight:650}#notice:not(:empty){position:fixed;bottom:1rem;right:1rem;max-width:calc(100vw - 2rem);background:#17322e;color:white;padding:.8rem 1rem;border-radius:10px;box-shadow:0 5px 20px #0003}#notice.error{background:#872c22}[hidden]{display:none!important}
@media(max-width:720px){.layout{display:block;padding:1rem}nav{flex-direction:row;overflow-x:auto;margin-bottom:1rem;padding-bottom:.4rem}nav button{white-space:nowrap}nav small{display:none}.brand strong{font-size:.9rem}.card{padding:1rem}}
#bill-dialog,#certificate-dialog{width:min(720px,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);padding:1rem;border:1px solid var(--line);border-radius:16px;background:#f3f5f0;color:inherit;overscroll-behavior:contain}
#bill-dialog::backdrop,#certificate-dialog::backdrop{background:#102c27b3}.dialog-heading{display:flex;justify-content:space-between;align-items:start;gap:.7rem;margin-bottom:1rem}.dialog-heading h2{font:600 1.9rem Georgia,serif;margin:0}
.roster-entry{display:grid;gap:.35rem;flex:1 1 145px}.roster-entry button{text-align:left}
.brand-logo{object-fit:contain;background:white}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem}.calendar-day{padding:.5rem;border:1px solid var(--line);border-radius:8px;overflow-wrap:anywhere}.calendar-day h3{font-size:.82rem;margin:0 0 .5rem}.shift{display:grid;gap:.25rem;border-top:1px solid var(--line);padding:.4rem 0;font-size:.85rem}.shift button{font-size:.76rem;padding:.3rem}.checkbox{display:flex;align-items:center;gap:.5rem}.checkbox input{width:auto;min-height:auto}
@media(max-width:900px){.calendar{grid-template-columns:repeat(auto-fit,minmax(min(100%,125px),1fr))}}
.billing-choices button{min-height:70px;text-align:left;padding:1rem;background:#e2eddc;border:1px solid #cfdcc9}
.payment-paid{color:#19663a}.payment-unpaid{color:#9d2828}.badge.payment-paid{background:#e0f2e6}.badge.payment-unpaid{background:#fbe9e8}#certificate-sites{flex:1 1 100%;display:grid;gap:.6rem}.certificate-site{display:flex;flex-wrap:wrap;align-items:end;gap:.6rem;min-width:0;border:1px solid var(--line);border-radius:8px}.certificate-site label{flex:1 1 135px}
.table-scroll{overflow:auto}.table-scroll table{width:100%;border-collapse:collapse}.table-scroll th,.table-scroll td{padding:.65rem;text-align:left;border-bottom:1px solid var(--line)}.table-scroll+p{margin-top:.8rem}
.password-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem;align-items:end}.password-toggle{display:grid;place-items:center;min-width:44px;padding:.4rem}.password-toggle .eye-slash{display:none}.password-toggle[aria-pressed="true"] .eye-slash{display:block}

.permission-control {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #e2e8ed}
.permission-control:last-child {border-bottom:0}
.permission-switch {display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-width:172px;min-height:46px;background:#eef1f4;color:#394652;border:1px solid #c8d0d8;padding:8px 12px;border-radius:12px;font:inherit;cursor:pointer}
.permission-switch[aria-checked="true"] {background:#e4f4ed;color:#12643e;border-color:#76b99a}
.switch-track {display:inline-flex;align-items:center;width:42px;height:24px;padding:3px;background:#84909a;border-radius:20px;flex-shrink:0}
.switch-track span {width:18px;height:18px;background:white;border-radius:50%;transition:transform .15s}
.permission-switch[aria-checked="true"] .switch-track {background:#188250}
.permission-switch[aria-checked="true"] .switch-track span {transform:translateX(18px)}
.permission-switch:focus-visible {outline:3px solid #3277ba;outline-offset:3px}
@media(max-width:480px) {.permission-control {align-items:flex-start;flex-direction:column;gap:8px}.permission-switch {width:100%}}

.finance-toolbar {display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.8rem 0 1rem}
.finance-total {font:600 1.5rem/1.4 Georgia,serif;display:block;overflow-wrap:anywhere}.finance-amount {font:600 2rem Georgia,serif;margin-bottom:1rem}
.finance-paid {background:#def3e5;color:#17663a}.finance-soon {background:#fff0bd;color:#705000}.finance-overdue {background:#ffe3df;color:#962d23}.finance-pending {background:#edf0f2;color:#40505c}
.finance-details {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0 .5rem}.finance-details dt {font-size:.85rem;color:var(--muted)}.finance-details dd {margin:.25rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.finance-review {background:#fff0bd;border-radius:8px;padding:.75rem;margin-top:1rem}.finance-wide {flex:1 1 100%!important}
textarea {font:inherit;border:1px solid #a9bdb1;border-radius:8px;padding:.6rem;resize:vertical;width:100%}
#finance-preview-dialog {width:min(1100px,calc(100% - 1rem));height:calc(100% - 1rem);max-height:calc(100% - 1rem);border:1px solid var(--line);border-radius:15px;padding:1rem;background:#f3f5f0;color:inherit}
#finance-preview-dialog::backdrop {background:#102c27b3}#finance-preview-dialog iframe {width:100%;height:calc(100% - 135px);border:0;background:white;min-height:300px}.finance-image {height:calc(100% - 135px);overflow:auto}.finance-image img {display:block;width:100%;max-width:none;height:auto}
@media(max-width:480px) {.finance-details {grid-template-columns:1fr}.finance-toolbar button {flex:1 1 auto}#finance-preview-dialog .dialog-heading h2 {font-size:1.1rem;overflow-wrap:anywhere}}
.finance-pdf-body {height:calc(100% - 170px);min-height:300px;overflow:auto;background:#e2e6e3;padding:.5rem}.finance-pdf-body canvas {display:block;background:white;box-shadow:0 2px 10px #0002}.finance-pdf-body p {padding:1rem}
.location-teachers {flex:1 1 100%;min-width:0;border:1px solid var(--line);border-radius:8px;padding:1rem}.location-teachers .checkbox {margin:.6rem 0;min-height:36px}
#security-dialog {width:min(800px,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);border:1px solid var(--line);border-radius:16px;padding:1rem;background:#f3f5f0;color:inherit}#security-dialog::backdrop {background:#102c27b3}#recovery-codes {white-space:pre-wrap;overflow-wrap:anywhere}
.kindergarten-group{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;margin-top:.2rem}.student-search{margin:1rem 0}.student-search input{max-width:36rem}.mfa-qr{display:block;width:min(280px,100%);height:auto;margin:1rem auto}.preserve-lines{white-space:pre-wrap;overflow-wrap:anywhere}
#student-dialog,#event-dialog{width:min(760px,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);border:1px solid var(--line);border-radius:16px;padding:1rem;background:#f3f5f0;color:inherit}#student-dialog::backdrop,#event-dialog::backdrop{background:#102c27b3}#event-dialog fieldset{flex:1 1 100%;border:1px solid var(--line);border-radius:8px;padding:.75rem}#event-dialog fieldset .checkbox{margin:.5rem 0}#event-dialog .fields label:has(textarea){flex:1 1 100%}.event-wonderland{border-left:4px solid #397854}.event-meeting{border-left:4px solid #2867a3;background:#eef5fc}.event-company{border-left:4px solid #8051a0;background:#f5effa}
#reauth-dialog{width:min(520px,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);border:1px solid var(--line);border-radius:16px;padding:1rem;background:#f3f5f0;color:inherit}#reauth-dialog::backdrop{background:#102c27b3}
.recurrence-fields{flex:1 1 100%;border:1px solid var(--line);border-radius:8px;padding:.75rem;min-width:0}.recurrence-fields>div{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.7rem}.recurrence-fields label{flex:1 1 150px}.recurrence-fields p{flex:1 1 100%;font-size:.85rem}.scope-choices{display:grid;gap:.75rem;margin:1rem 0}#event-dialog details{margin:.5rem 0}#event-dialog summary{cursor:pointer;overflow-wrap:anywhere}
.submenu{margin-top:1rem}.submenu button{min-height:3rem;text-align:left}
.menu-access{margin-top:1rem}.menu-access summary{cursor:pointer}.menu-switches{min-width:0;flex:1 1 15rem;border:1px solid var(--line);border-radius:8px;padding:.7rem}.menu-switches label{margin:.3rem 0}

.booking-rows {display:grid;gap:.75rem;width:100%}
.booking-row {border:1px solid var(--line,#d5e0e6);border-radius:.75rem;padding:.75rem}
.booking-row h3,.booking-row p {margin:0 0 .5rem}

/* BKC workspace */
:root {
  font:15px/1.55 "Inter", "Avenir Next", system-ui, sans-serif;
  color:#19343b;
  background:#f8faf9;
  --green:#173f46;
  --accent:#287e87;
  --mint:#b5ddd7;
  --surface:#edf5f2;
  --muted:#526970;
  --line:#dce7e4;
  --shadow:0 8px 24px #173f4609;
  --rail:232px;
  --bar:68px;
}
.app-header {
  min-height:var(--bar);
  position:sticky;
  top:0;
  z-index:12;
  justify-content:flex-start;
  padding:.7rem clamp(1rem,3vw,2.5rem);
  background:#fff;
  color:var(--green);
  border-bottom:1px solid var(--line);
}
.app-header .brand {margin-right:auto; min-width:0}
.app-header .brand small {color:var(--muted);letter-spacing:.08em}
.app-header .mark {width:38px;height:38px;flex:none;background:#e5f2ee;font:750 1.3rem/1 system-ui}
#header-profile button {display:flex;align-items:center;gap:.65rem;padding:.25rem .55rem;background:transparent}
#menu-toggle {display:none;width:44px;padding:0;font-size:1.35rem}
#menu-backdrop {display:none}
.layout {max-width:none;min-height:calc(100vh - var(--bar));grid-template-columns:var(--rail) minmax(0,1fr);gap:0;padding:0}
.layout > main {width:100%;max-width:1520px;margin:0 auto;padding:clamp(1rem,3vw,2.75rem)}
.layout:has(nav[hidden]) > main {padding-top:clamp(1rem,7vw,5rem)}
#nav {
  position:sticky;top:var(--bar);height:calc(100dvh - var(--bar));overflow-y:auto;
  gap:.28rem;padding:1.35rem .8rem;
  background:linear-gradient(165deg,#173f46,#123238 82%);color:#e7f3f1;
}
.nav-group {border-radius:12px}
#nav button {color:#e7f3f1;border-radius:9px;white-space:normal}
#nav button:hover {background:#ffffff15;filter:none}
#nav .nav-main {display:flex;align-items:center;gap:.72rem;width:100%;padding:.68rem .72rem;text-align:left;font-size:.92rem}
.nav-group.is-active {background:#ffffff0b}
#nav .is-active > .nav-main {background:#b5ddd7;color:#143e46}
.nav-children {display:none;padding:.32rem .3rem .48rem 1.85rem}
.nav-group.is-active .nav-children {display:grid;gap:.12rem}
#nav .nav-children button {min-height:35px;padding:.32rem .55rem;font-size:.83rem;font-weight:550}
#nav .nav-children button[aria-current] {background:#ffffff19;color:#fff}
.app-icon {display:inline-block;width:20px;height:20px;vertical-align:middle;flex:none}
:where(button,a,input,select,textarea,summary):focus-visible {outline:3px solid #287e87;outline-offset:3px}
#nav :focus-visible {outline-color:#b5ddd7}
h1,h2,h3 {color:#173f46}
h1 {font:750 clamp(1.8rem,4vw,2.7rem)/1.14 "Inter", "Avenir Next", system-ui,sans-serif;letter-spacing:-.045em;margin:.4rem 0 1.15rem}
h2 {font-size:1.12rem;line-height:1.3;letter-spacing:-.012em}
.card {border-radius:15px;border-color:var(--line);padding:clamp(1rem,2vw,1.45rem);box-shadow:var(--shadow);min-width:0}
.card > :last-child {margin-bottom:0}
.hero {background:linear-gradient(115deg,#edf5f2,#dbefec);border-color:#d5e8e3}
button,.quiet {border-radius:9px}
button {background:var(--green)}
button.quiet {background:#edf5f2;color:#174852}
input,select,textarea {border-color:#b9ceca;background:#fff}
.badge {display:inline-block;background:#edf5f2;color:#284c55;font-weight:650}
.badge.finance-paid,.badge.payment-paid,.badge.status-approved {background:#e2f4e9;color:#14633d}
.badge.finance-overdue,.badge.payment-unpaid,.badge.status-rejected {background:#fce9e8;color:#932a2a}
.badge.finance-soon,.badge.status-pending {background:#fff1cc;color:#664600}
.badge.finance-reimbursement {background:#e3f1f3;color:#215e68}
.metric,.finance-total,.finance-amount {font-family:inherit;font-variant-numeric:tabular-nums}
.table-scroll {max-width:100%;border:1px solid var(--line);border-radius:11px}
.table-scroll table {font-size:.9rem}
.table-scroll th {background:#edf5f2;color:#234951;font-weight:700;white-space:nowrap}
.table-scroll th,.table-scroll td {padding:.6rem .72rem}
.table-scroll tbody tr:nth-child(even) {background:#fafcfb}
.table-scroll tbody tr:last-child td {border-bottom:0}
.table-scroll td button {white-space:nowrap}
.table-scroll td:last-child {min-width:8rem}
dialog {box-shadow:0 18px 56px #102c2750}
#notice:not(:empty) {z-index:30}
.dashboard-hero {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(1.15rem,4vw,2.6rem)}
.dashboard-hero h1 {margin:0 0 .45rem}
.dashboard-hero .eyebrow {margin:0 0 .5rem;color:#37646a;letter-spacing:.09em}
.hero-role {color:#395f65;margin:0}
.dashboard-columns {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1rem}
.dashboard-columns .card {margin:0}
.dashboard-section {margin-top:1.3rem}
.task-grid,.quick-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.75rem}
.task-grid button,.quick-grid button {
  display:flex;align-items:center;gap:.75rem;text-align:left;min-height:65px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.task-grid button strong {font-size:1.45rem;font-variant-numeric:tabular-nums}
.task-grid button span,.quick-grid button span {flex:1;min-width:0}
.task-grid button svg,.quick-grid button svg {color:var(--accent)}
.agenda,.home-notices {list-style:none;margin:0 0 .7rem;padding:0}
.agenda li,.home-notices li {display:flex;align-items:center;gap:.7rem;padding:.65rem 0;border-top:1px solid var(--line)}
.agenda time {font-weight:700;color:#245760;white-space:nowrap}
.agenda li div {flex:1;min-width:0;overflow-wrap:anywhere}
.agenda small {display:block;color:var(--muted)}
.home-notices svg {color:var(--accent)}
#main > h1 {outline:none}
@media(max-width:900px) {
  :root {--rail:200px}
  .dashboard-columns {grid-template-columns:1fr}
}
@media(max-width:720px) {
  :root {--bar:60px}
  .app-header {padding:.45rem .7rem;gap:.5rem}
  .app-header .brand {gap:.5rem}
  .app-header .brand small,#header-profile span:not(.avatar) {display:none}
  .app-header .brand strong {font-size:.8rem}
  #menu-toggle:not([hidden]) {display:block}
  #nav {
    display:none;position:fixed;z-index:11;inset:var(--bar) auto 0 0;height:auto;
    width:min(310px,calc(100vw - 56px));margin:0;padding:.8rem;overflow:auto;
  }
  .menu-open #nav:not([hidden]) {display:flex;flex-direction:column}
  .menu-open #menu-backdrop:not([hidden]) {
    display:block;position:fixed;inset:var(--bar) 0 0;z-index:10;border-radius:0;background:#102d356e;
  }
  .menu-open .nav-children {display:grid}
  .menu-open {overflow:hidden}
  .layout > main {padding:1rem .8rem}
}
@media(max-width:400px) {
  .agenda li {flex-wrap:wrap}
  .agenda time {width:100%}
  .app-header .mark {display:none}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;transition:none!important}}

.avatar {
  --avatar-bg:#cfebe2;--skin:#cf8e63;--hair:#30353a;--shirt:#287e87;
  display:inline-block;position:relative;width:38px;height:38px;overflow:hidden;
  flex:none;vertical-align:middle;border-radius:50%;background:var(--avatar-bg);
}
.avatar.large {width:clamp(65px,10vw,105px);height:clamp(65px,10vw,105px)}
.avatar-photo {object-fit:cover}
.avatar::before {
  content:"";position:absolute;z-index:1;left:16%;right:16%;bottom:-13%;height:49%;
  border-radius:60% 60% 0 0;background:var(--shirt);
}
.avatar i {
  position:absolute;z-index:2;left:30%;top:24%;width:40%;height:47%;
  border-radius:46% 46% 48% 48%;background:var(--skin);
}
.avatar i::after {
  content:"";position:absolute;top:52%;left:21%;width:58%;height:10%;
  background:radial-gradient(circle at 12% 50%,#30201d 33%,transparent 42%),
    radial-gradient(circle at 88% 50%,#30201d 33%,transparent 42%);
}
.avatar b {
  position:absolute;z-index:3;left:25%;top:16%;width:50%;height:29%;
  border-radius:65% 62% 34% 25%;background:var(--hair);transform:rotate(-8deg);
}
.avatar-ocean {--avatar-bg:#dcebf8;--skin:#d9a176;--hair:#532e28;--shirt:#4d749b}
.avatar-ocean b {border-radius:65% 48% 56% 10%;transform:rotate(13deg)}
.avatar-sand {--avatar-bg:#f4e8d3;--skin:#f0bf96;--hair:#8b5735;--shirt:#bd725d}
.avatar-sand b {height:45%;border-radius:58% 58% 26% 28%;z-index:1}
.avatar-plum {--avatar-bg:#e8e0f1;--skin:#aa6848;--hair:#292635;--shirt:#776297}
.avatar-plum b {height:34%;border-radius:42% 42% 52% 45%;box-shadow:-.09em .08em var(--hair),.1em .08em var(--hair)}
.avatar-peach {--avatar-bg:#f8e3d9;--skin:#d99e72;--hair:#683c33;--shirt:#9c5448}
.avatar-peach b::after {content:"";position:absolute;inset:-25% 5% 40% 53%;background:var(--hair);border-radius:50%}
.avatar-spruce {--avatar-bg:#d8e9dc;--skin:#e6b287;--hair:#443d36;--shirt:#49735d}
.avatar-spruce i::before {content:"";position:absolute;top:49%;left:10%;width:75%;height:17%;border:1px solid #423532;border-radius:4px}
.profile-summary,.record-person {display:flex;align-items:center;gap:.8rem}
.profile-editor {display:grid;gap:.35rem}
.avatar-picker {display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:.5rem;border:1px solid var(--line);border-radius:10px;padding:.7rem;width:100%;min-width:0}
.avatar-choice {
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.35rem;min-height:78px;padding:.5rem;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:.75rem;
}
.avatar-choice input {position:absolute;width:1px;height:1px;opacity:0}
.avatar-choice:has(input:checked) {border-color:var(--accent);background:var(--surface)}
.avatar-choice:focus-within {outline:2px solid var(--accent)}
.table-scroll details {min-width:13rem;max-width:30rem}
.table-scroll details summary {cursor:pointer;color:var(--green);font-weight:650}
.table-scroll td:first-child {font-weight:600}
.table-scroll td .badge {white-space:nowrap}
.table-scroll .actions {display:flex;gap:.4rem;flex-wrap:wrap}
@media(max-width:720px) {
  #header-profile button > span:not(.avatar) {display:none}
  #header-profile .avatar {width:32px;height:32px}
}

.app-header .brand-home {background:transparent;color:inherit;text-align:left;padding:0;min-height:44px}
.app-header .brand-home:hover {filter:none;text-decoration:underline}