:root {
  color-scheme: light;
  --canvas: #f5f6f0;
  --surface: #fffefa;
  --ink: #20352c;
  --muted: #586a60;
  --green: #235745;
  --deep: #173a2f;
  --line: #dce3d9;
  --mist: #eaf0e7;
  --amber: #694513;
  --amber-bg: #fff2db;
  --radius: 15px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.setup-banner { padding: 1rem 1.2rem; margin-bottom: 1.25rem; border: 1px solid #e4c68b; border-radius: 12px; background: var(--amber-bg); color: var(--amber); }
.setup-banner ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.setup-banner li { margin: .4rem 0; line-height: 1.5; }
.setup-banner a { font-weight: 650; white-space: normal; }
.announcement-banner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1.2rem; margin-bottom: 1rem; border: 1px solid #b5cbb8; border-radius: 12px; background: var(--mist); }
.announcement-banner a { flex: 0 0 auto; font-weight: 650; }
.announcement-popup { width: min(640px, calc(100% - 2rem)); max-height: 85dvh; padding: 1.7rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 90px #102d2855; }
.announcement-popup::backdrop { background: #122b27a8; }
.announcement-popup h2 { font-size: 1.5rem; margin: .4rem 0 1rem; }
.announcement-popup .preformatted { overflow-wrap: anywhere; }
.announcement-card a, .announcement-banner a, .announcement-head a { text-decoration: none; }
.markdown-editor { margin-top: .4rem; min-width: 0; }
.markdown-toolbar { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.markdown-toolbar button { font-size: .75rem; padding: .35rem .5rem; }
.markdown-preview { margin-top: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--mist); }
.markdown-body { overflow-wrap: anywhere; line-height: 1.6; font-weight: 400; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1rem 0 .5rem; font-family: inherit; font-size: 1.25rem; letter-spacing: normal; line-height: 1.35; }
.markdown-body h1 { font-size: 1.5rem; }
.markdown-body pre { overflow-x: auto; padding: 1rem; background: #edf1ee; border-radius: 8px; white-space: pre; }
.markdown-body code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }
.markdown-body blockquote { margin: .75rem 0; padding-left: 1rem; border-left: 3px solid var(--green); color: var(--muted); }
.markdown-body table { display: block; overflow-x: auto; border-collapse: collapse; }
.markdown-body th, .markdown-body td { padding: .5rem; border: 1px solid var(--line); }
.markdown-body > :last-child { margin-bottom: 0; }
.announcement-attachments { padding-left: 1.2rem; }
.announcement-attachments li { margin: .55rem 0; overflow-wrap: anywhere; }
.attachment-list { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; }
.booking-availability { border: 1px solid var(--line); background: var(--mist); border-radius: 12px; padding: 1.2rem; display: grid; gap: 1rem; }
.availability-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.availability-comparison p { font-size: .88rem; margin: .4rem 0 0; }
.booking-invalid { color: #9b3926; font-weight: 600; }
.weekly-booking { padding: 1rem 0; border-top: 1px solid var(--line); }
.weekly-booking small { margin: .4rem 0; }
.weekly-booking .warning { margin: .65rem 0; font-size: .85rem; }
.topic-editor { padding: .5rem 0; }
.topic-editor summary { cursor: pointer; }
.topic-editor form { margin-top: .8rem; }
.delivery-cell { min-width: 220px; max-width: 360px; overflow-wrap: anywhere; }
.delivery-cell small { margin: .3rem 0; }
@media (max-width: 600px) { .availability-comparison { grid-template-columns: 1fr; } .announcement-banner { align-items: start; } }
body { margin: 0; min-height: 100vh; }
a { color: var(--green); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
input, select, textarea { min-width: 0; color: var(--ink); }
p { line-height: 1.55; margin: 0 0 1em; }
h1, h2, p { overflow-wrap: anywhere; }
h1, h2 { margin: 0; }
h1 {
  font-family: "Instrument Serif", "Georgia", serif;
  font-weight: 500;
  letter-spacing: -.045em;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.03;
}
h2 { font-size: 1.04rem; letter-spacing: -.02em; font-weight: 720; }
small, .meta { color: var(--muted); font-size: .82rem; line-height: 1.45; }
small { display: block; }
:focus-visible { outline: 3px solid #547a64; outline-offset: 3px; }
.skip-link {
  position: fixed;
  z-index: 10;
  top: .75rem;
  left: .75rem;
  background: var(--surface);
  padding: .75rem 1rem;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.signed-in { display: grid; grid-template-columns: 235px minmax(0, 1fr); }
.sidebar {
  min-height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2.1rem;
  padding: 2.1rem 1.15rem 1.35rem;
  color: #f5f7ef;
  background: var(--deep);
  overflow-y: auto;
}
.brand {
  display: inline-flex;
  gap: .75rem;
  align-items: center;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  font-weight: 730;
  font-size: 1.16rem;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.sidebar .brand { margin-left: .55rem; }
.brand-mark {
  position: relative;
  display: inline-block;
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: #d8e5cc;
  color: var(--deep);
  flex: 0 0 auto;
}
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; }
.brand-mark::before { inset: 8px 8px 8px 9px; border: 1.7px solid currentColor; border-radius: 3px; }
.brand-mark::after { inset: 13px 12px auto 13px; height: 3px; border-block: 1.4px solid currentColor; }
.sidebar nav { display: grid; gap: .35rem; }
.sidebar nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  color: #e0eadf;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 580;
  border-radius: 8px;
}
.sidebar nav a[aria-current="page"] { background: #2e5445; color: #fff; }
.sidebar nav a:hover { background: #315848; }
.sidebar :focus-visible { outline-color: #d8e5cc; }
.nav-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  position: relative;
  opacity: .88;
  flex: 0 0 auto;
}
.nav-icon::after { content: ""; position: absolute; }
.icon-lessons::after { inset: 3px 0 auto; border-top: 1px solid currentColor; }
.icon-availability { border-radius: 50%; }
.icon-availability::after { width: 3px; height: 4px; top: 2px; left: 5px; border-left: 1px solid; border-bottom: 1px solid; }
.icon-homework::after, .icon-invoices::after { left: 3px; right: 3px; top: 4px; height: 2px; border-block: 1px solid; }
.icon-profile { border-radius: 50%; }
.icon-profile::after, .icon-accounts::after { inset: 3px; border: 1px solid; border-radius: 50%; }
.icon-links { transform: rotate(45deg); border-radius: 6px; }
.icon-links::after { inset: 3px; border: 1px solid; border-radius: 4px; }
.account { margin-top: auto; padding: 1.1rem .45rem 0; border-top: 1px solid #47665a; }
.account-line { display: flex; align-items: center; gap: .65rem; }
.account-line div { min-width: 0; overflow-wrap: anywhere; }
.account-line strong { display: block; font-size: .9rem; }
.account-line small { color: #cadbd0; }
.avatar {
  background: #cdddce;
  color: var(--deep);
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 720;
}
.sign-out {
  background: transparent;
  padding: .7rem .15rem .3rem;
  color: #e0eadf;
  border: 0;
  font-size: .82rem;
  text-align: left;
}
.sign-out:hover { color: #fff; text-decoration: underline; }

.workspace { width: 100%; max-width: 1500px; padding: 3rem clamp(1.4rem, 4vw, 4rem) 4rem; margin-inline: auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin: 0 0 1.6rem; }
.page-head p { margin: .55rem 0 0; color: var(--muted); }
.page-actions, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.page-actions:empty { display: none; }
.back { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: .9rem; color: var(--muted); text-decoration: none; font-weight: 650; font-size: .86rem; }
.back:hover { text-decoration: underline; }
.panel {
  min-width: 0;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 2px 4px #1f422008;
  margin-bottom: 1rem;
  overflow: clip;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: 1.12rem 1.25rem; }
.form-panel { padding: 1.35rem 1.45rem; }
.form-panel > h2 { margin: 0 0 .95rem; }
.narrow { max-width: 720px; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .56fr); gap: 1rem; align-items: start; }
.balanced-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.empty { margin: 0; padding: 1.35rem 1.25rem; border-top: 1px solid var(--line); color: var(--muted); }
.empty strong { color: var(--ink); font-size: .92rem; }
.empty p { margin: .25rem 0 0; font-size: .86rem; }
.form-panel > .empty, .rule-list .empty { border: none; padding: .45rem 0 .95rem; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .58rem .95rem;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 675;
  font-size: .86rem;
  line-height: 1.2;
  text-align: center;
}
.button.primary { background: var(--green); color: #fff; }
.button.primary:hover { background: var(--deep); }
.button.secondary { background: var(--surface); border-color: #ccd8cd; color: var(--green); }
.button.secondary:hover { background: var(--mist); border-color: #b4c8b6; }
.button.compact { min-height: 35px; padding: .38rem .65rem; font-size: .81rem; }
.button.square { width: 37px; }
.text-link { color: var(--green); text-decoration: none; font-weight: 700; font-size: .84rem; }
.text-link:hover { text-decoration: underline; }
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 99px;
  padding: .24rem .57rem;
  color: #375345;
  background: #eaf0e8;
  font-size: .73rem;
  font-weight: 670;
  line-height: 1.35;
}
.pill.completed, .pill.paid { color: #20533e; background: #dfeee0; }
.pill.cancelled_late, .pill.unpaid, .pill.did_not_attend { color: var(--amber); background: var(--amber-bg); }
.pill.overdue { color: #842d24; background: #fce9e4; }
.pill.cancelled { color: #535d55; background: #edeeea; }
.flash {
  padding: .8rem 1rem;
  margin: 0 0 1.1rem;
  border: 1px solid #b5d0bd;
  border-radius: 10px;
  color: #20533e;
  background: #e5f1e6;
  font-weight: 550;
}
.flash-notice, .warning { background: var(--amber-bg); border-color: #e5ce9e; color: var(--amber); }
.warning { border: 1px solid #e5ce9e; padding: .85rem 1rem; border-radius: 10px; margin-bottom: .2rem; }
.warning p { margin: .25rem 0 0; font-size: .89rem; }

.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.week-nav { justify-content: space-between; }
.week-nav nav { display: flex; gap: .35rem; }
.filters select { width: auto; }
.filters label { font-size: .85rem; font-weight: 650; }
.day-heading { color: #40594b; background: #edf2e9; font-size: .76rem; font-weight: 730; padding: .55rem 1.25rem; }
.lesson-row {
  display: grid;
  grid-template-columns: 7.15rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.25rem;
  border-top: 1px solid var(--line);
}
.time-label { color: #426254; font-variant-numeric: tabular-nums; font-size: .85rem; font-weight: 650; }
.row-body { min-width: 0; overflow-wrap: anywhere; }
.row-body strong { display: block; font-size: .93rem; margin-bottom: .14rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.request-row {
  display: grid;
  gap: .24rem;
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.request-row:hover, .assignment-row:hover { background: #f2f5ee; }
.request-row strong { display: flex; justify-content: space-between; gap: .4rem; font-size: .9rem; }
.request-row span { font-size: .81rem; }
.request-history { border-top: 1px solid var(--line); }
.request-history summary { cursor: pointer; font-weight: 650; color: var(--green); font-size: .84rem; padding: .75rem 1.25rem; }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.7rem auto; gap: .55rem; align-items: center; border-top: 1px solid var(--line); padding: .8rem 1.25rem; }
.plan-row strong, .rule-row strong { overflow-wrap: anywhere; font-size: .88rem; }
.plan-row input { width: 100%; min-height: 35px; padding: .35rem .45rem; }
.rule-list { margin-bottom: 1rem; }
.rule-row { border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: .65rem; padding: .72rem 0; }
.rule-row:last-child { border-bottom: 1px solid var(--line); }
.lesson-summary, .request-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.lesson-summary strong, .request-summary strong { display: block; }
.request-summary { align-items: flex-start; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.request-by { margin-top: 1rem; }
.current-slot { display: grid; gap: .25rem; }
.current-slot span { color: var(--muted); }
.preformatted { white-space: pre-wrap; overflow-wrap: anywhere; }

.form-stack { display: grid; gap: 1rem; }
label { color: var(--ink); font-size: .89rem; font-weight: 650; }
label input:not([type="checkbox"]), label select, label textarea { display: block; margin-top: .32rem; width: 100%; }
label small { margin-top: .35rem; font-weight: 450; }
input:not([type="checkbox"]), select, textarea {
  background: #fff;
  border: 1px solid #bfcec1;
  border-radius: 7px;
  padding: .55rem .68rem;
  min-height: 42px;
  max-width: 100%;
}
input::placeholder { color: #738278; opacity: 1; }
textarea { resize: vertical; }
input[type="checkbox"] { accent-color: var(--green); width: 1rem; height: 1rem; flex: 0 0 auto; margin: .15rem 0 0; }
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 550; line-height: 1.45; }
.fields.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.inline-form, .date-check { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; }
.inline-form label { flex: 1 1 12rem; }
.account-form label:nth-of-type(3) { flex: 0 1 9rem; }
.date-check { margin: .8rem 0 1rem; }
.form-actions { margin-top: .2rem; }
.invoice-generator .meta { margin: .75rem 0 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { text-align: left; padding: .72rem .8rem; }
th:first-child, td:first-child { padding-left: 1.25rem; }
th:last-child, td:last-child { padding-right: 1.25rem; }
th { color: #40594b; background: #edf2e9; font-size: .76rem; font-weight: 720; }
td { border-top: 1px solid var(--line); }
td small { margin-top: .12rem; }
.table-form { display: flex; align-items: center; gap: .35rem; }
.table-form select, .filters select { padding: .3rem .45rem; min-height: 35px; font-size: .82rem; }
.no-wrap { white-space: nowrap; }

.assignment-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .9rem;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line);
  padding: 1rem 1.25rem;
}
.file-mark { width: 34px; height: 37px; border-radius: 7px; background: #e5efe2; position: relative; }
.file-mark::after { content: ""; position: absolute; inset: 11px 10px; border-block: 1.5px solid #457260; }
.live-indicator { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.live-indicator.is-live { color: var(--green); }
.live-indicator.is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3d7a53; margin: 0 .35rem .08rem 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: .65rem; padding: 0 1.25rem 1.25rem; }
.photo-grid:empty { padding: 0; }
.photo-tile { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--mist); }
.photo-tile img { display: block; width: 100%; height: 145px; object-fit: contain; }
.upload-form { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.upload-form input { border-style: dashed; padding: .75rem; }
.upload-form input::file-selector-button { background: var(--mist); color: var(--green); border: 0; border-radius: 5px; padding: .35rem .55rem; margin-right: .55rem; }

.public { min-height: 100dvh; display: grid; align-content: center; justify-items: center; padding: 1.25rem; }
.welcome-wrap { display: grid; grid-template-columns: 1.14fr 1fr; max-width: 860px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 15px 65px #1b352111; }
.welcome-card { min-height: 390px; padding: clamp(1.6rem, 5vw, 3.3rem); }
.welcome-card .brand { margin-bottom: 2.8rem; }
.welcome-card p { margin: 1rem 0 1.3rem; max-width: 34ch; color: var(--muted); }
.welcome-art { display: grid; place-items: center; background: var(--deep); padding: 2.5rem; overflow: hidden; }
.art-grid {
  width: min(100%, 290px);
  aspect-ratio: 1;
  border: 1px solid #7e9e82;
  border-radius: 16px;
  background: repeating-linear-gradient(0deg, transparent 0 calc(20% - 1px), #587b62 calc(20% - 1px) 20%), repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), #587b62 calc(20% - 1px) 20%);
  display: grid;
  grid-template: repeat(5, 1fr) / repeat(5, 1fr);
  padding: 2px;
  transform: rotate(-9deg);
}
.art-grid i { border-radius: 8px; margin: 6px; background: #c6d8b4; }
.art-grid i:nth-child(1) { grid-area: 1 / 2 / 3 / 3; }
.art-grid i:nth-child(2) { grid-area: 2 / 4 / 4 / 5; background: #6e967e; }
.art-grid i:nth-child(3) { grid-area: 4 / 1 / 5 / 3; background: #e3caa2; }
.art-grid i:nth-child(4) { grid-area: 5 / 3 / 6 / 5; }
.art-grid i:nth-child(5) { grid-area: 4 / 5 / 5 / 6; background: #6e967e; }
.error-card p { margin: 0 0 1.15rem; }

@media (max-width: 1140px) {
  .dashboard-columns { grid-template-columns: minmax(0, 1fr); }
  .side-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 850px) {
  .signed-in { display: block; }
  .sidebar {
    position: static;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem 1rem;
    padding: .85rem 1.15rem .7rem;
  }
  .sidebar .brand { margin: 0; }
  .sidebar nav { grid-column: 1 / -1; display: flex; overflow-x: auto; order: 3; }
  .sidebar nav a { white-space: nowrap; min-height: 39px; }
  .account { border: 0; margin: 0; padding: 0; display: flex; align-items: center; gap: .8rem; }
  .account-line strong { max-width: 26ch; }
  .sign-out { padding: .45rem 0; white-space: nowrap; }
  .workspace { padding-top: 1.75rem; }
}
@media (max-width: 580px) {
  .workspace { padding-inline: .85rem; }
  .page-head { flex-wrap: wrap; align-items: start; gap: .85rem; margin-bottom: 1.15rem; }
  .side-panels, .balanced-columns, .fields.two { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .lesson-row { grid-template-columns: 6.3rem minmax(0, 1fr); gap: .45rem .55rem; }
  .row-actions { grid-column: 2; justify-content: flex-start; }
  .form-panel, .panel-head, .lesson-row, .empty, .assignment-row { padding-inline: .95rem; }
  .account-line .avatar, .account-line strong { display: none; }
  .sidebar nav a { gap: .42rem; padding-inline: .6rem; font-size: .82rem; }
  .welcome-wrap { grid-template-columns: 1fr; }
  .welcome-card { min-height: 0; }
  .welcome-card .brand { margin-bottom: 2rem; }
  .welcome-art { padding: 1.4rem; }
  .art-grid { width: 120px; }
}

/* Weekly availability and mutually available lesson start times. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.calendar-scroll { max-height: 590px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; scroll-margin-top: 1rem; }
.availability-calendar { min-width: 760px; table-layout: fixed; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
.availability-calendar th, .availability-calendar td { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.availability-calendar thead th { position: sticky; top: 0; z-index: 2; padding: .65rem .3rem; text-align: center; height: 51px; background: #edf2e9; }
.availability-calendar th:first-child { width: 61px; text-align: center; }
.availability-calendar tbody th { position: sticky; left: 0; z-index: 1; vertical-align: top; font-size: .7rem; font-weight: 600; padding-top: .45rem; color: var(--muted); background: var(--surface); }
.availability-calendar thead th:first-child { z-index: 3; left: 0; }
.calendar-cell { vertical-align: top; background: #fff; height: 30px; }
.calendar-cell.recurring { background: #eff3ec; }
.calendar-cell.available { background: #d9edda; }
.calendar-cell.unavailable { background: #f9e6db; }
.calendar-cell.preferred { background: #bfd6f1; }
.calendar-add { width: 100%; min-height: 29px; border: 0; padding: .1rem; background: transparent; color: #7b8d80; font-size: .8rem; }
.calendar-add:hover, .calendar-add:focus-visible { background: #23574518; color: var(--deep); }
.calendar-entry { display: flex; align-items: flex-start; gap: .15rem; padding: .25rem .15rem .25rem .3rem; margin: 2px; border-radius: 4px; background: #bcdcc2; font-size: .68rem; font-weight: 650; }
.calendar-entry.unavailable { color: #7c4425; background: #edc9b7; }
.calendar-entry a { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.calendar-entry a:hover { text-decoration: underline; }
.calendar-entry form { flex: 0 0 auto; }
.calendar-remove { display: block; padding: 0 .2rem; border: 0; border-radius: 2px; color: inherit; background: transparent; font-size: .95rem; line-height: 1; min-width: 18px; min-height: 18px; }
.calendar-remove:hover { background: #ffffff70; }
.calendar-editor { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.calendar-editor h3 { font-size: .95rem; margin: 0; }
.calendar-editor-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.calendar-editor .meta { margin: 0; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .8rem; font-size: .76rem; color: var(--muted); }
.calendar-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 1px solid #a5b3a5; border-radius: 2px; margin-right: .35rem; background: #eff3ec; }
.calendar-legend .legend-available::before { background: #d9edda; }
.calendar-legend .legend-unavailable::before { background: #f9e6db; }
.calendar-legend .legend-preferred::before { background: #bfd6f1; }
.availability-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; align-items: start; gap: 1.35rem; }
.compact-calendar { min-width: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; scroll-margin-top: 1rem; }
.compact-calendar .availability-calendar { width: 100%; min-width: 0; }
.compact-calendar .availability-calendar thead th { position: static; height: 38px; padding: .3rem .1rem; font-size: .74rem; }
.compact-calendar .availability-calendar th:first-child { width: 43px; }
.compact-calendar .availability-calendar tbody th { position: static; padding-top: .1rem; vertical-align: top; font-size: .66rem; }
.compact-calendar .availability-calendar thead small { font-size: .65rem; white-space: nowrap; }
.compact-calendar .calendar-cell { height: 6px; line-height: 0; border-bottom-color: #dce3d955; }
.compact-calendar .calendar-major-hour td { border-top: 1px solid #bdcbbb; }
.calendar-select { display: block; width: 100%; height: 6px; min-height: 0; border: 0; padding: 0; background: transparent; }
.calendar-select:hover, .calendar-select[aria-pressed="true"] { background: #23574530; }
.calendar-select:focus-visible { position: relative; z-index: 1; outline-offset: -2px; }
.availability-layout .calendar-editor { margin: 0; padding: 0 0 0 1.15rem; border-top: 0; border-left: 1px solid var(--line); gap: .55rem; min-width: 0; }
.availability-layout .calendar-editor-fields { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.availability-layout .calendar-editor label { font-size: .82rem; }
.availability-layout .calendar-editor input, .availability-layout .calendar-editor select { min-height: 34px; padding: .35rem .5rem; }
.availability-layout .calendar-editor .form-actions { margin-top: 0; }
.availability-layout .calendar-editor select { width: 100%; text-overflow: ellipsis; }
.announcement-head { padding: 0 0 1rem; align-items: flex-start; }
.announcement-head small { margin-top: .35rem; }
.icon-announcements::after { inset: 3px 2px; border-block: 1px solid; }
.homework-grade { font-size: 1.25rem; font-weight: 700; }
.calendar-slot span { white-space: normal; }
@media (max-width: 650px) {
  .availability-layout { grid-template-columns: minmax(0, 1fr); }
  .availability-layout .calendar-editor { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .announcement-head { flex-wrap: wrap; }
}
.change-week-nav { margin-top: 1.5rem; }
.change-calendar-scroll { max-height: 590px; }
.change-calendar .calendar-slots { padding: .25rem; vertical-align: top; height: 45px; }
.calendar-slot { display: flex; align-items: center; gap: .3rem; padding: .35rem .2rem; margin-bottom: .2rem; cursor: pointer; color: var(--green); background: #e6f0e2; border: 1px solid #c8dcc7; border-radius: 5px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.calendar-slot:hover { background: #d5e8d1; }
.calendar-booked { display: block; padding: .35rem .2rem; margin-bottom: .2rem; color: #7e3b35; background: #f8e8e5; border: 1px solid #e7c8c2; border-radius: 5px; font-size: .7rem; }
.calendar-slot:has(input:checked) { background: var(--green); border-color: var(--green); color: white; }
.calendar-slot input[type="radio"] { accent-color: var(--green); min-height: 0; width: 12px; height: 12px; padding: 0; margin: 0; flex: 0 0 auto; }
.document-preview { display: flex; align-items: center; justify-content: center; min-height: 145px; }
.file-caption { display: block; padding: .5rem; overflow-wrap: anywhere; }
.homework-file form { margin-top: .35rem; }
.dashboard-columns > div > .panel + .panel { margin-top: 1rem; }
@media (max-width: 580px) {
  .calendar-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .calendar-scroll { max-height: 470px; }
}

.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; margin-left: auto; padding: 0 .35rem; border-radius: 999px; background: #c14c35; color: white; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }