:root{
  color-scheme:light;
  --blue:#176c96;
  --ink:#243b4a;
  --muted:#667d8b;
  --line:#dfe8ed;
  --surface:#fff;
  --slot:68px}
*{
  box-sizing:border-box}
body{
  margin:0;
  background:#f4f8fb;
  color:var(--ink);
  font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{
  font:inherit}
button,a,input,select,summary{
  -webkit-tap-highlight-color:transparent}
button,select,summary{
  cursor:pointer}
button{
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  border-radius:9px;
  min-height:40px;
  padding:7px 13px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid #65b2da;
  outline-offset:2px}
button:disabled{
  opacity:.5;
  cursor:wait}
a{
  color:var(--blue)}
.app-head{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px max(18px,env(safe-area-inset-left));
  background:#176c96;
  color:white;
  gap:12px}
.wordmark{
  font:italic 30px Georgia,serif;
  letter-spacing:-1px}
.app-title{
  border-left:1px solid #ffffff65;
  margin-left:15px;
  padding-left:15px;
  font-size:14px}
.profile-link{
  color:white;
  text-decoration:none;
  white-space:nowrap;
  font-size:13px}
.tools{
  padding:12px 18px;
  background:white;
  display:flex;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.date-tools,.view-tools{
  display:flex;
  align-items:center;
  gap:7px}
.date-tools>button:first-child,.date-tools>button:nth-child(3){
  font-size:25px;
  line-height:1;
  padding:4px 13px}
.date-label{
  position:relative;
  margin-left:8px;
  font-weight:650}
.date-label input{
  position:absolute;
  inset:0;
  opacity:0;
  width:100%;
  cursor:pointer}
.date-label input::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:100%;
  height:100%}
select,input,textarea{
  border:1px solid #cddbe3;
  border-radius:8px;
  padding:10px;
  background:white;
  color:var(--ink);
  min-height:44px;
  max-width:100%;
  font-size:16px}
select{
  padding-right:25px}
.calendar-picker select{
  max-width:220px}
.segmented{
  display:flex;
  border:1px solid var(--line);
  padding:3px;
  border-radius:10px;
  background:#f3f7fa;
  gap:2px}
.segmented button{
  border:0;
  background:transparent;
  min-height:32px;
  font-size:13px;
  padding:6px 10px}
.segmented button.selected{
  background:white;
  box-shadow:0 1px 4px #15374a20;
  color:var(--blue);
  font-weight:650}
.context-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:12px;
  padding:8px 18px;
  color:var(--muted)}
#sync-state.error{
  color:#b42d43}
.week-strip{
  display:none;
  padding:0 10px 10px;
  gap:5px}
.week-strip button{
  flex:1;
  background:transparent;
  border:0;
  display:grid;
  justify-items:center;
  gap:4px;
  padding:4px 0;
  min-width:0;
  font-size:11px;
  color:var(--muted)}
.week-strip strong{
  font-size:16px;
  color:var(--ink);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%}
.week-strip .selected strong{
  background:var(--blue);
  color:white}
.week-strip .is-today strong{
  box-shadow:inset 0 0 0 1px var(--blue)}
#grid-scroll{
  overflow:auto;
  max-height:calc(100dvh - 174px);
  background:white;
  overscroll-behavior:contain;
  border-top:1px solid var(--line)}
#calendar-grid{
  position:relative;
  min-width:100%;
  display:grid;
  padding-left:49px}
.grid-label{
  position:sticky;
  top:0;
  background:#fff;
  z-index:4;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:center;
  padding:9px 4px;
  font-size:13px;
  font-weight:650;
  min-height:42px}
.grid-label .dot{
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--teacher-color);
  border-radius:50%;
  margin-right:5px}
.time-labels{
  position:absolute;
  left:0;
  top:42px;
  width:49px;
  pointer-events:none;
  color:#738694;
  font-size:11px}
.time-labels span{
  display:block;
  height:var(--slot);
  padding:3px 7px 0}
.day-column{
  position:relative;
  height:1020px;
  border-right:1px solid var(--line);
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 16px,#edf2f5 16px,#edf2f5 17px,transparent 17px,transparent 33px,#e8eff3 33px,#e8eff3 34px,transparent 34px,transparent 50px,#edf2f5 50px,#edf2f5 51px,transparent 51px,transparent 67px,#dfe8ed 67px,#dfe8ed 68px)}
.event{
  position:absolute;
  border:0;
  border-left:4px solid var(--event-color);
  background:color-mix(in srgb,var(--event-color) 18%,white);
  color:#233d4b;
  border-radius:5px;
  padding:4px 6px;
  text-align:left;
  min-height:0;
  overflow:hidden;
  line-height:1.2;
  box-shadow:0 1px 2px #1b3d5110;
  touch-action:pan-y}
.event strong{
  display:block;
  font-size:12px;
  font-weight:650}
.event small{
  display:block;
  font-size:10px;
  margin-top:2px}
.event .event-time{
  font-size:10px;
  font-weight:500;
  margin-bottom:2px}
.event.completed{
  background:color-mix(in srgb,var(--event-color) 9%,white);
  border-left-style:dashed}
.event.cancelled{
  opacity:.6;
  text-decoration:line-through}
.event.counted{
  border-left-style:dotted}
.event .readonly{
  float:right;
  font-size:10px}
.now-line{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:#dc4754;
  z-index:3;
  pointer-events:none}
.now-line:before{
  content:"";
  position:absolute;
  left:-4px;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#dc4754}
.add-fab{
  position:fixed;
  bottom:max(22px,env(safe-area-inset-bottom));
  right:max(22px,env(safe-area-inset-right));
  background:var(--blue);
  color:white;
  border:0;
  border-radius:18px;
  width:58px;
  height:58px;
  font-size:34px;
  box-shadow:0 6px 24px #164d7350;
  z-index:6}
.empty-hint{
  font-size:13px;
  color:var(--muted);
  text-align:center;
  padding:10px}
.untimed-item{
  font-size:12px;
  padding:5px 14px;
  border-bottom:1px solid var(--line);
  background:#fff}
.untimed-item button{
  min-height:28px;
  padding:2px 7px;
  font-size:12px}
.primary{
  background:var(--blue);
  color:white;
  border:0;
  font-weight:650}
.danger{
  color:#b02d42;
  border-color:#efccd3;
  background:#fff7f8;
  width:100%;
  margin-top:18px}
.notice{
  background:#eef5fa;
  color:var(--blue);
  padding:10px;
  border-radius:9px;
  font-size:13px;
  margin-bottom:14px}
.error,#form-error{
  background:#fff0f1;
  color:#a9253b;
  padding:10px;
  border-radius:8px;
  font-size:14px}
dialog{
  border:0;
  padding:0;
  border-radius:18px;
  width:min(560px,calc(100% - 24px));
  max-height:90dvh;
  color:var(--ink);
  box-shadow:0 15px 80px #15394e35}
dialog::backdrop{
  background:#12334570}
dialog[open]{
  display:flex;
  flex-direction:column}
#event-form{
  overflow:auto}
.sheet-head{
  position:sticky;
  top:0;
  background:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  z-index:5}
.sheet-head h1{
  font-size:16px;
  margin:0;
  flex:1}
.sheet-head>button:first-child{
  font-size:24px;
  border:0;
  padding:0 7px}
.sheet-body{
  padding:16px 20px max(20px,env(safe-area-inset-bottom))}
.sheet-body fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0}
label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:13px;
  font-weight:550;
  margin-bottom:14px}
label input, label select{
  width:100%}
.form-row{
  display:flex;
  gap:12px}
.form-row>label{
  flex:1;
  min-width:0}
.time-row>label{
  flex:1}
.time-row .end-time{
  font-size:12px;
  padding-top:29px;
  color:var(--muted);
  white-space:nowrap}
.time-row strong{
  display:block;
  color:var(--ink)}
.target-tabs{
  margin-bottom:15px}
.target-tabs>button{
  flex:1}
.search-results{
  display:grid;
  max-height:200px;
  overflow:auto;
  gap:5px;
  margin-top:-5px;
  margin-bottom:12px}
.search-results:empty{
  display:none}
.search-results button{
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.search-results small{
  font-size:11px;
  color:var(--muted)}
#chosen-student{
  background:#eef5fa;
  padding:9px 12px;
  border-radius:8px;
  margin-bottom:12px;
  font-weight:600;
  font-size:14px}
#chosen-student button{
  float:right;
  min-height:24px;
  padding:0 5px;
  background:transparent;
  border:0}
.check-label,#create-register-wrap{
  flex-direction:row;
  align-items:center;
  gap:9px}
.check-label input,#create-register-wrap input{
  width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  accent-color:var(--blue)}
#repeat-new,#series-scope-wrap{
  border-top:1px solid var(--line);
  padding-top:15px;
  margin-top:4px}
.weekday-checks{
  display:flex;
  gap:5px;
  margin:10px 0}
.weekday-checks label{
  flex:1;
  display:flex;
  align-items:center;
  font-size:11px;
  gap:4px}
.weekday-checks input{
  width:20px;
  height:20px;
  min-height:20px;
  accent-color:var(--blue)}
small,.sheet-foot,#series-preview{
  font-size:12px;
  color:var(--muted)}
details{
  margin-top:12px}
summary{
  font-size:14px;
  color:var(--blue);
  padding:7px 0}
textarea{
  width:100%;
  resize:vertical;
  margin-top:8px}
.student-chip{
  display:inline-block;
  background:#eff5f8;
  border-radius:16px;
  padding:5px 10px;
  font-size:13px;
  margin:5px 4px 0 0}
#detail-summary h2{
  font-size:21px;
  margin:0 0 8px}
#detail-summary p{
  margin:5px 0;
  font-size:14px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap}
#toast{
  position:fixed;
  bottom:95px;
  left:50%;
  transform:translateX(-50%);
  background:#244656;
  color:white;
  border-radius:12px;
  padding:12px 18px;
  z-index:20;
  font-size:14px;
  width:max-content;
  max-width:90%;
  box-shadow:0 3px 20px #183c4430}
.profile-page{
  display:grid;
  min-height:100dvh;
  place-items:center;
  padding:20px}
.profile-card{
  width:min(400px,100%);
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px}
.profile-card>.wordmark{
  color:var(--blue);
  font-size:38px}
.profile-card h1{
  font-size:23px;
  margin:20px 0 5px}
.profile-card>p{
  color:var(--muted)}
.profile-options{
  display:grid;
  gap:9px;
  margin:24px 0}
.profile-options button{
  display:flex;
  justify-content:space-between;
  min-height:52px}
.school-login{
  border-top:1px solid var(--line);
  padding-top:12px}
.school-login form{
  margin-top:12px}
.school-login .primary{
  width:100%}

@media(max-width:600px){
  .app-head{
  height:57px;
  padding:7px 15px}
.wordmark{
  font-size:27px}
.app-title{
  display:none}
.tools{
  padding:9px 12px;
  gap:9px}
.date-tools{
  width:100%;
  gap:5px}
.date-label{
  font-size:14px;
  flex:1}
.view-tools{
  width:100%;
  justify-content:space-between}
.calendar-picker{
  flex:1}
.calendar-picker select{
  font-size:14px;
  max-width:100%;
  width:100%;
  min-height:38px;
  padding:6px 25px 6px 9px}
.view-tools .segmented{
  flex-shrink:0}
.context-line{
  padding:6px 14px;
  font-size:11px}
.week-strip{
  display:flex}
#grid-scroll{
  max-height:calc(100dvh - 255px)}
.event strong{
  font-size:13px}
.event small,.event .event-time{
  font-size:11px}
dialog{
  width:100%;
  max-width:100%;
  max-height:94dvh;
  margin:auto 0 0;
  border-radius:18px 18px 0 0}
.sheet-body{
  padding:16px 18px max(22px,env(safe-area-inset-bottom))}
.sheet-head{
  padding:12px 14px}
.day-column{
  height:1020px}
.add-fab{
  width:54px;
  height:54px;
  right:17px;
  bottom:max(18px,env(safe-area-inset-bottom))}
.grid-label{
  font-size:12px}
#detail-students{
  margin-top:10px}
}

[hidden]{
  display:none!important}
body:not(.profile-page){
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden}
.app-head{
  flex-shrink:0}
#agenda{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0}
.tools,.context-line,.week-strip,#untimed{
  flex-shrink:0}
#grid-scroll{
  flex:1;
  min-height:0;
  max-height:none}
.empty-hint{
  position:fixed;
  bottom:85px;
  left:10px;
  right:10px;
  background:#f4f8fbef;
  border-radius:10px;
  pointer-events:none}

@media(prefers-reduced-motion:no-preference){
  dialog[open]{
  animation:appear .16s ease-out}
@keyframes appear{
  from{
  transform:translateY(12px);
  opacity:.5}
to{
  transform:translateY(0);
  opacity:1}
}
}


img.wordmark{
  display:inline-block;
  width:145px;
  height:39px;
  object-fit:contain;
  vertical-align:middle}
.app-head img.wordmark{
  filter:brightness(0) invert(1)}
.profile-card img.wordmark{
  width:190px;
  height:51px}
.app-head>div{
  display:flex;
  align-items:center;
  flex:1}
.profile-card .primary{
  width:100%}