:root { --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; } html { background:var(--html-background, var(--paper)); } body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.5 var(--sans); } a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; } button { cursor:pointer; } h1,h2,p { margin-top:0; } h1 { font-size:clamp(1.7rem, 3vw, 2.45rem); line-height:1.15; letter-spacing:0; margin-bottom:.4rem; } h2 { font-size:1rem; margin-bottom:.35rem; } p { color:var(--muted); } small { color:var(--muted); display:block; } label,fieldset { display:grid; gap:.35rem; color:var(--muted); font-size:.82rem; font-weight:700; } input,textarea,select { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:4px; padding:.7rem .75rem; } textarea { min-height:5rem; resize:vertical; } input:focus,textarea:focus,select:focus { outline:3px solid color-mix(in srgb, var(--teal) 24%, transparent); border-color:var(--teal); } fieldset { border:0; padding:0; margin:0; } legend { margin-bottom:.5rem; color:var(--ink); } .sidebar { position:fixed; inset:0 auto 0 0; width:244px; display:flex; flex-direction:column; padding:1.5rem 1rem; background:var(--sidebar-background); color:var(--on-sidebar); z-index:5; } .brand { display:flex; align-items:center; gap:.65rem; font-size:1.28rem; font-weight:800; margin:0 .55rem 2rem; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; color:var(--ink); border-radius:5px; font-size:.9rem; overflow:hidden; }.brand-mark img { width:30px; height:30px; object-fit:contain; display:block; } nav { display:grid; gap:.25rem; } nav a,.sidebar-bottom a,.nav-button { display:flex; align-items:center; gap:.75rem; padding:.7rem .75rem; color:var(--sidebar-text); border-radius:4px; font-weight:600; } nav a:hover,.sidebar-bottom a:hover,.nav-button:hover { background:rgba(255,255,255,.1); color:var(--on-sidebar); } nav i,.sidebar-bottom i { width:1rem; text-align:center; } .sidebar-bottom { margin-top:auto; display:grid; gap:.2rem; } .sidebar-bottom b { display:grid; place-items:center; margin-left:auto; width:20px; height:20px; background:var(--coral); color:var(--ink); border-radius:50%; font-size:.7rem; } .nav-button { width:100%; border:0; background:none; font:inherit; } .main-shell { margin-left:244px; min-height:100vh; } .topbar { height:68px; padding:0 3vw; display:flex; justify-content:flex-end; align-items:center; gap:1rem; border-bottom:1px solid var(--line); }.role-label { margin-right:auto; color:var(--muted); font-family:var(--mono); font-size:.72rem; text-transform:uppercase; }.page-content { max-width:1280px; padding:2.5rem 3vw 4rem; margin:auto; }.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2rem; }.eyebrow,.metric-label { display:block; color:var(--teal); font:700 .71rem var(--mono); letter-spacing:0; text-transform:uppercase; margin-bottom:.55rem; }.overview-eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.55rem; }
.overview-eyebrow-row .eyebrow { margin-bottom:0; }
.overview-role-inline { display:none; color:var(--teal); font:700 .71rem var(--mono); letter-spacing:0; text-transform:uppercase; white-space:nowrap; }.button { display:inline-flex; justify-content:center; align-items:center; gap:.55rem; border:1px solid transparent; border-radius:4px; padding:.7rem .9rem; font-weight:800; white-space:nowrap; }.button.primary { background:var(--teal); color:var(--on-accent); }.button.primary:hover { filter:brightness(1.08); }.button.secondary { color:var(--ink); background:transparent; border-color:var(--line); }.button.danger { background:var(--danger); color:var(--on-accent); }.button.small { padding:.45rem .65rem; font-size:.78rem; }.icon-button { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:var(--surface); }.mobile-menu { display:none; }.text-button { padding:0; border:0; background:transparent; color:var(--teal); font-weight:800; }.overview-grid,.metrics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:2.25rem; }.feature-panel,.metrics-grid article,.group-tile,.form-tile { background:var(--surface); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); }.feature-panel { min-height:176px; padding:1.25rem; display:flex; flex-direction:column; }.feature-panel strong { font-size:2.2rem; line-height:1; margin-bottom:auto; text-transform:capitalize; }.feature-panel a { color:var(--teal); font-weight:800; font-size:.85rem; }.welcome-panel { background:var(--lime); color:var(--on-lime); border-color:transparent; }.welcome-panel p { color:var(--welcome-muted); max-width:22rem; }.split-section,.admin-grid,.builder-layout { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }.section-heading a { color:var(--teal); font-weight:800; font-size:.85rem; }.list-surface,.table-surface,.profile-surface { background:var(--surface); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow); }.list-row,.notification-row { display:flex; align-items:center; gap:.85rem; padding:1rem; border-bottom:1px solid var(--line); }.list-row:last-child,.notification-row:last-child { border-bottom:0; }.list-row strong,.notification-row strong { display:block; }.list-row > :nth-child(2),.notification-row > :nth-child(2) { min-width:0; flex:1; }.event-dot,.task-mark,.tile-icon { display:grid; flex:0 0 auto; place-items:center; width:34px; height:34px; border-radius:4px; }.task-mark,.tile-icon { background:color-mix(in srgb, var(--teal) 13%, var(--surface)); color:var(--teal); }.event-dot { width:12px; height:12px; }.chip { display:inline-flex; gap:.35rem; align-items:center; padding:.24rem .45rem; border:1px solid var(--line); border-radius:99px; color:var(--muted); font:700 .67rem var(--mono); text-transform:uppercase; }.chip.success { color:var(--success); background:var(--success-fill); border-color:var(--success-line); }.chip.draft { color:var(--draft); background:var(--draft-fill); border-color:var(--draft-line); }.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }.group-tile,.form-tile { padding:1.1rem; display:flex; flex-direction:column; gap:.85rem; }.group-tile > div:nth-child(2) { flex:1; }.group-tile footer { display:flex; align-items:center; gap:.65rem; border-top:1px solid var(--line); padding-top:.75rem; color:var(--muted); font-size:.8rem; }.calendar-list { display:grid; gap:.8rem; }.event-card { display:flex; align-items:stretch; gap:1rem; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--event-color); border-radius:7px; padding:1rem; box-shadow:var(--shadow); }.event-date { min-width:4.25rem; border-right:1px solid var(--line); text-align:center; padding:.1rem .9rem .1rem 0; }.event-date span { display:block; font-size:1.65rem; font-weight:800; line-height:1; }.event-date small { font:700 .65rem var(--mono); }.event-content { flex:1; }.event-content p { margin-bottom:.3rem; }.event-title { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }.event-title h2 { margin:0; }.rsvp { display:flex; align-items:center; gap:.35rem; }.builder-fields { display:grid; gap:.7rem; }.field-preview { display:flex; gap:1rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:5px; }.field-preview > span { display:grid; place-items:center; width:25px; height:25px; color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,var(--surface)); border-radius:50%; font:700 .75rem var(--mono); }.field-preview small { text-transform:capitalize; }.field-preview p { font-size:.8rem; margin:.25rem 0 0; }.builder-add { align-self:start; position:sticky; top:1rem; padding:1.25rem; background:var(--surface); border:1px solid var(--line); border-radius:7px; }.builder-add form,.stacked-form { display:grid; gap:1rem; }.response-form { max-width:760px; display:grid; gap:1.5rem; }.response-form fieldset { padding:1.1rem; background:var(--surface); border:1px solid var(--line); border-radius:7px; }.required { color:var(--danger); margin-left:.35rem; font-size:.75rem; }.assignment-list { overflow:hidden; }.assignment-row { display:flex; align-items:center; gap:1rem; padding:1rem; border-bottom:1px solid var(--line); }.assignment-row:last-child { border-bottom:0; }.assignment-copy { flex:1; }.assignment-copy p { margin-bottom:.3rem; }.inline-upload { display:flex; align-items:center; gap:.5rem; }.inline-upload input { width:190px; padding:.4rem; }.attendance-actions { display:grid; gap:.7rem; margin-bottom:1.5rem; }.attendance-card { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:.9rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:7px; }.attendance-controls { display:flex; flex-wrap:wrap; gap:.55rem; align-items:flex-start; width:100%; min-width:0; max-width:100%; }.attendance-controls .absence-reason { flex:1 1 240px; min-width:12rem; max-width:28rem; }.table-surface { overflow:auto; padding:1rem; }.table-surface table { width:100%; border-collapse:collapse; min-width:620px; }.table-surface th { text-align:left; color:var(--muted); font:700 .7rem var(--mono); text-transform:uppercase; padding:.6rem; }.table-surface td { border-top:1px solid var(--line); padding:.75rem .6rem; vertical-align:middle; }.table-surface td small { margin-top:.15rem; }.table-surface form { display:flex; align-items:center; gap:.45rem; }.table-surface select { min-width:100px; padding:.35rem; }.notification-row { align-items:flex-start; }.notification-row p { margin:.15rem 0 0; }.notification-row small { white-space:nowrap; }.profile-surface { max-width:580px; display:flex; gap:1.25rem; padding:1.25rem; }.profile-surface form { flex:1; display:grid; gap:1rem; }.avatar { display:grid; flex:0 0 70px; place-items:center; width:70px; height:70px; background:var(--lime); color:var(--on-lime); border-radius:50%; font-size:1.7rem; font-weight:800; overflow:hidden; }.avatar img { width:100%; height:100%; object-fit:cover; }.metrics-grid { grid-template-columns:repeat(4,1fr); }.metrics-grid article { padding:1rem; }.metrics-grid strong { display:block; font-size:1.8rem; }.metrics-grid span { color:var(--muted); font-size:.82rem; text-transform:capitalize; }.admin-grid { margin-bottom:1.5rem; }.admin-grid .list-surface { padding:1rem; }.auth-shell { min-height:100vh; display:grid; place-items:center; padding:1rem; background:var(--auth-intro) url("forest.webp") center / cover no-repeat fixed; }.auth-panel { width:min(930px,100%); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }.auth-intro { position:relative; min-height:520px; padding:3rem; color:var(--on-sidebar); background:var(--auth-intro); }.auth-intro h1 { max-width:440px; font-size:clamp(2rem,4vw,3.4rem); margin-top:5rem; }.auth-intro p { color:var(--auth-muted); max-width:360px; }.auth-mark { position:absolute; bottom:2rem; right:2rem; display:grid; place-items:center; width:70px; height:70px; background:transparent; color:var(--sidebar-brand-ink); transform:none; border-radius:5px; font-size:2rem; overflow:hidden; }.auth-mark img { width:70px; height:70px; object-fit:contain; display:block; }.auth-form { padding:3rem; display:flex; flex-direction:column; justify-content:center; }.auth-brand { color:var(--ink); margin:0 0 3rem; }.auth-form form { display:grid; gap:1rem; margin-top:1.5rem; }.auth-links { display:flex; justify-content:space-between; gap:.75rem; margin-top:1.25rem; color:var(--teal); font-weight:800; font-size:.82rem; }.toast-stack { position:fixed; top:1rem; right:1rem; z-index:40; display:grid; gap:.65rem; width:min(420px, calc(100vw - 2rem)); pointer-events:none; }.toast { display:flex; align-items:center; gap:.7rem; position:relative; margin:0; padding:.8rem 1rem; width:100%; max-width:none; pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--teal); border-radius:5px; box-shadow:var(--shadow); }.toast-error { border-left-color:var(--danger); }.toast-warning { border-left-color:var(--warning); }.toast button { margin-left:auto; border:0; color:inherit; background:none; }.empty-state { padding:1.5rem; text-align:center; }.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }.check-label { display:flex; align-items:center; gap:.5rem; font-weight:600; }.check-label input { width:auto; }.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }.dialog-actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.2rem; } dialog { width:min(610px,calc(100% - 2rem)); border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); padding:1.5rem; }dialog::backdrop { background:rgba(15,36,35,.56); } dialog form { display:grid; gap:1rem; } #confirm-dialog { width:min(420px,calc(100% - 2rem)); }
@media (max-width: 850px) { .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }.sidebar.is-open { transform:translateX(0); }.main-shell { margin-left:0; }.mobile-menu { display:grid; margin-right:auto; }.role-label { display:none; }.page-content { padding:1.5rem 1rem 3rem; }.overview-grid { grid-template-columns:1fr 1fr; }.overview-grid .welcome-panel { display:none; }.overview-role-inline { display:inline-flex; }.metrics-grid { grid-template-columns:1fr 1fr; }.split-section,.admin-grid,.builder-layout { grid-template-columns:1fr; gap:1.25rem; }.builder-add { position:static; }.auth-panel { grid-template-columns:1fr; }.auth-intro { min-height:260px; padding:2rem; }.auth-intro h1 { margin-top:1.5rem; }.auth-form { padding:2rem; }.auth-mark { width:50px; height:50px; font-size:1.35rem; }.auth-mark img { width:50px; height:50px; }.page-heading { align-items:flex-start; }.attendance-controls { flex-direction:column; align-items:stretch; }.attendance-controls .button,.attendance-controls .absence-reason { width:100%; max-width:none; min-width:0; flex:0 0 auto; } }
@media (max-width: 520px) { .overview-grid { grid-template-columns:1fr 1fr; gap:.75rem; }.overview-grid .feature-panel { min-height:0; padding:1rem; }.overview-grid .feature-panel strong { font-size:1.7rem; }.metrics-grid,.form-grid,.check-grid { grid-template-columns:1fr; }.page-heading { flex-direction:column; }.page-heading > .button { width:100%; }.event-card { align-items:flex-start; }.event-date { min-width:3.2rem; }.rsvp { margin-left:auto; }.inline-upload { align-items:stretch; flex-direction:column; }.inline-upload input { width:100%; }.assignment-row { align-items:flex-start; flex-wrap:wrap; }.assignment-copy { min-width:calc(100% - 55px); }.profile-surface { align-items:flex-start; flex-direction:column; }.notification-row small { display:none; } }

/* Sidebar: scrollable nav with pinned account actions */
.sidebar {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}
.sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}
.sidebar-bottom {
  flex-shrink: 0;
  padding-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--on-sidebar) 12%, transparent);
}
.sidebar .nav-button {
  min-height: 2.75rem;
}

@media (max-width: 850px) {
  .sidebar {
    width: min(280px, 88vw);
  }
  .sidebar nav a,
  .sidebar-bottom a,
  .sidebar .nav-button {
    padding: .6rem .65rem;
  }

  /* Collapse the full-width hamburger bar; float the menu control instead */
  .topbar {
    height: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    pointer-events: none;
  }
  .mobile-menu {
    position: fixed;
    bottom: max(.85rem, env(safe-area-inset-bottom, 0px));
    left: max(.85rem, env(safe-area-inset-left, 0px));
    z-index: 6;
    margin: 0;
    width: 2.75rem;
    height: 2.75rem;
    pointer-events: auto;
    box-shadow: var(--shadow);
  }
}

.not-found {
  display: grid;
  place-items: center;
  width: 100%;
}
.not-found-card {
  width: min(28rem, 100%);
  padding: 2.25rem 1.75rem 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  text-align: center;
}
.not-found-mark {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 1.1rem;
  object-fit: contain;
}
.not-found-card .eyebrow {
  margin-bottom: .7rem;
}
.not-found-card h1 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  margin-bottom: .55rem;
}
.not-found-card p {
  max-width: 22rem;
  margin: 0 auto 1.5rem;
}
.main-shell .page-content:has(.not-found) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100dvh - 68px);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.auth-shell .page-content:has(.not-found) {
  width: min(28rem, 100%);
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 850px) {
  .main-shell .page-content:has(.not-found) {
    min-height: 100dvh;
  }
}

@media (max-width: 520px) {
  .not-found-card .button {
    width: 100%;
  }
}