/* SharedGrove — "course catalog" design system.
   Handwritten CSS (no framework). Tokens first; dark theme redefines tokens only. */

:root {
  --paper: #FBF9F4;
  --surface: #F3EFE5;
  --ink: #2A2520;
  --ink-soft: #6B6156;
  --ink-faint: #9A8F80;
  --rule: #E6E0D2;
  --rule-strong: #CFC6B2;
  --spruce: #33604A;
  --spruce-deep: #274D3B;
  --spruce-tint: #E9EFE7;
  --spruce-ink: #FBF9F4;
  --brick: #A3452A;
  --brick-tint: #F5E7DF;
  --gold: #A97F35;
  --gold-tint: #F4ECDC;
  --meter-track: #E8E2D3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #211E18;
    --surface: #2A261F;
    --ink: #ECE5D6;
    --ink-soft: #B2A794;
    --ink-faint: #7F7565;
    --rule: #3A352B;
    --rule-strong: #4C4536;
    --spruce: #8FBC9F;
    --spruce-deep: #A8CDB5;
    --spruce-tint: #2C382F;
    --spruce-ink: #1B241E;
    --brick: #D98F6F;
    --brick-tint: #3B2C24;
    --gold: #C9A25C;
    --gold-tint: #362F20;
    --meter-track: #3A352B;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, Seravek, "Segoe UI", Frutiger, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}
.serif { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
a { color: var(--spruce); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--spruce); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.wrap { max-width: 1010px; margin: 0 auto; padding: 0 28px 90px; }

/* ---------- masthead & footer ---------- */
.masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 26px 0 18px;
  border-bottom: 2px solid var(--ink);
}
.wordmark { font-size: 21px; font-weight: 600; letter-spacing: .01em; color: var(--ink); text-decoration: none; }
.wordmark small {
  display: block; font-family: "Avenir Next", Avenir, Seravek, "Segoe UI", system-ui, sans-serif;
  font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 3px;
}
.mast-nav { display: flex; align-items: center; gap: 26px; }
.mast-nav a { font-size: 14px; text-decoration: none; color: var(--ink-soft); }
.mast-nav a:hover { color: var(--ink); }
.mast-nav a.current { color: var(--ink); border-bottom: 2px solid var(--spruce); padding-bottom: 2px; }
.mast-nav a.btn { color: var(--spruce-ink); }

.footer {
  margin-top: 70px; padding-top: 16px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-faint);
}
.footer a { color: var(--ink-faint); }
.footer form { display: inline; }
.footer button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 12.5px; text-decoration: underline;
}
.footer .footer-links { display: flex; gap: 16px; align-items: baseline; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--spruce); color: var(--spruce-ink);
  border: 1px solid var(--spruce); border-radius: 3px;
  padding: 9px 18px; font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: background .15s ease;
}
.btn:hover { background: var(--spruce-deep); border-color: var(--spruce-deep); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--spruce); border-color: var(--spruce); }
.btn-quiet { background: none; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-quiet:hover { background: var(--surface); border-color: var(--rule-strong); }
.btn-danger { background: var(--brick); color: var(--paper); border: 1px solid var(--brick); }
.btn-danger:hover { background: var(--brick); border-color: var(--brick); }
.btn-danger:disabled:hover { background: var(--brick); border-color: var(--brick); }

.linkact { text-decoration: none; font-weight: 600; font-size: 13.5px; }
.linkact:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-danger {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brick); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.link-danger:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- notices & flash ---------- */
.flash, .notice {
  display: block; margin: 22px 0 0; padding: 12px 16px;
  border-left: 3px solid var(--spruce);
  background: var(--spruce-tint);
  font-size: 14px; color: var(--ink);
}
.flash-error { background: var(--brick-tint); border-left-color: var(--brick); }
.flash-alert { background: var(--gold-tint); border-left-color: var(--gold); }

/* ---------- page headings ---------- */
.page-title { font-size: 34px; font-weight: 500; line-height: 1.15; margin-top: 40px; }
.page-sub { color: var(--ink-soft); font-size: 15.5px; margin: 8px 0 0; max-width: 62ch; }
.backlink { display: inline-block; margin-top: 28px; font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
.backlink:hover { color: var(--ink); }
.backlink::before { content: "← "; }

/* ---------- filter bar ---------- */
.filterbar {
  margin-top: 34px; padding: 14px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-soft);
}
.filterbar .lbl { font-weight: 600; color: var(--ink); }
.filterlink { font-size: 14px; text-decoration: none; color: var(--ink-soft); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.filterlink:hover { color: var(--ink); }
.filterlink.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--spruce); }
.filterbar .grow { flex: 1; }
.filterbar select, .filterbar input[type="text"] {
  padding: 8px 11px; font: inherit;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink);
}

/* ---------- period sections & class rows ---------- */
.hour { margin-top: 44px; }
.hour-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.hour-name { font-size: 20px; font-weight: 600; }
.hour-count { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }

.classrow {
  display: grid;
  grid-template-columns: 1fr 108px 170px 92px;
  gap: 18px; align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.classrow .title { font-size: 17px; font-weight: 600; }
.classrow .title a { color: var(--ink); text-decoration: none; }
.classrow .title a:hover { color: var(--spruce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.classrow .teacher { font-size: 13.5px; color: var(--ink-soft); }
.classrow .desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; max-width: 58ch; }
.ages { font-size: 13px; color: var(--ink); white-space: nowrap; }
.seats { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.seats.warn { color: var(--gold); font-weight: 600; }
.seats.full { color: var(--brick); font-weight: 600; }
.meter {
  display: block; width: 104px; height: 3px; margin-top: 6px;
  background: var(--meter-track); border-radius: 2px; overflow: hidden;
}
.meter i { display: block; height: 100%; background: var(--spruce); border-radius: 2px; }
.meter.warn i { background: var(--gold); }
.meter.full i { background: var(--brick); }
.rowact { text-align: right; font-size: 13.5px; white-space: nowrap; }
.rowact a { text-decoration: none; font-weight: 600; }
.rowact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rowact .isfull { color: var(--brick); font-weight: 600; }
.empty-hour { padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; color: var(--ink-faint); font-style: italic; }
@media (max-width: 720px) {
  .classrow { grid-template-columns: 1fr auto; }
  .classrow .ages, .classrow .seats { grid-column: 1; }
  .rowact { grid-column: 2; grid-row: 1; align-self: start; }
}

/* ---------- detail meta line ---------- */
.metaline {
  display: flex; gap: 28px; flex-wrap: wrap;
  margin-top: 26px; padding: 14px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.metaline .m .k {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.metaline .m .v { font-size: 14.5px; }
.metaline .m .v.full { color: var(--brick); font-weight: 600; }
.prose { margin-top: 24px; max-width: 65ch; color: var(--ink); font-size: 15px; }

/* ---------- admin bar ---------- */
.adminbar {
  display: flex; gap: 24px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font-size: 13.5px; overflow-x: auto;
}
.adminbar .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.adminbar a { text-decoration: none; color: var(--ink-soft); white-space: nowrap; }
.adminbar a:hover { color: var(--ink); }
.adminbar a.current { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--spruce); padding-bottom: 6px; margin-bottom: -11px; }

/* ---------- stat line ---------- */
.statline {
  display: flex; flex-wrap: wrap;
  margin-top: 34px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.stat { flex: 1 1 140px; padding: 18px 22px 16px 0; border-right: 1px solid var(--rule); margin-right: 22px; }
.stat:last-child { border-right: none; margin-right: 0; }
.stat .num { font-size: 34px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .num.alert { color: var(--brick); }
.stat .lbl { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 7px; }

/* ---------- sections ---------- */
.sect { margin-top: 46px; }
.sect-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.sect-head h2 { font-size: 19px; font-weight: 600; }
.sect-head .more { margin-left: auto; font-size: 13px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.sect-head .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.sect-head .actions { margin-left: auto; display: flex; gap: 16px; align-items: baseline; }
.sect-head .actions a { font-size: 13px; text-decoration: none; font-weight: 600; white-space: nowrap; }
.sect-head .actions a:hover { text-decoration: underline; text-underline-offset: 3px; }

.plainlist > div, .plainlist > a {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.plainlist > a { text-decoration: none; color: var(--ink); }
.plainlist .who { font-weight: 600; color: var(--ink); }
.plainlist .meta { color: var(--ink-soft); font-size: 13px; }
.plainlist .when { margin-left: auto; color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }
.plainlist .act { margin-left: auto; display: flex; gap: 14px; align-items: baseline; white-space: nowrap; }
.plainlist .act a { font-size: 13px; font-weight: 600; text-decoration: none; }
.plainlist .act a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plainlist .empty { color: var(--ink-faint); font-style: italic; }

/* status words */
.status-open { color: var(--spruce); font-weight: 600; }
.status-closed { color: var(--ink-faint); font-weight: 600; }
.status-full { color: var(--brick); font-weight: 600; }
.status-current { color: var(--spruce); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }

/* fill rows (dashboard / semester course lists) */
.fillrow {
  display: grid; grid-template-columns: 1fr 120px 110px 60px; gap: 16px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px;
}
.fillrow.no-action { grid-template-columns: 1fr 120px 130px; }
.fillrow .fname { font-weight: 600; }
.fillrow .fname small { color: var(--ink-soft); font-weight: 400; margin-left: 8px; }
.fillrow .fnum { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fillrow .fnum.full { color: var(--brick); font-weight: 600; }
.fillrow .fact { text-align: right; }
.fillrow .fact a { font-size: 13px; font-weight: 600; text-decoration: none; }
.fillrow .fact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fillrow .meter { margin-top: 0; width: 120px; }
.subhead {
  margin-top: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--rule-strong);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
@media (max-width: 620px) {
  .fillrow, .fillrow.no-action { grid-template-columns: 1fr 100px; }
  .fillrow .meter { display: none; }
}

/* ---------- ledger tables ---------- */
.tablewrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th, .ledger td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger thead th {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 2px solid var(--ink); font-weight: 600;
}
.ledger .primary { font-weight: 600; font-size: 15px; }
.ledger .secondary { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-soft); }
.ledger .sched { color: var(--ink-soft); font-size: 13px; }
.ledger .sched b { color: var(--ink); font-weight: 600; }
.ledger .act { text-align: right; white-space: nowrap; }
.ledger .act a { text-decoration: none; font-weight: 600; font-size: 13px; }
.ledger .act a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ledger .num { font-variant-numeric: tabular-nums; }
.ledger .quiet { color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; }

/* schedule grid (confirmation / registration detail) */
.daygrid { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.daygrid th, .daygrid td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.daygrid thead th {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 2px solid var(--ink); font-weight: 600;
}
.daygrid td.hourcell { font-weight: 600; white-space: nowrap; width: 130px; }
.daygrid .cls { font-weight: 600; }
.daygrid .tch { display: block; font-size: 12.5px; color: var(--ink-soft); }
.daygrid .none { color: var(--ink-faint); font-style: italic; }

/* ---------- forms ---------- */
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; margin-top: 22px; }
.formgrid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .formgrid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field label small { font-weight: 400; color: var(--ink-faint); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field input[type="number"], .field input[type="time"],
.field input[type="password"], .field input[type="datetime-local"],
.field select, .field textarea {
  width: 100%; padding: 9px 11px; font: inherit;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink);
}
.field select { cursor: pointer; }
.field .help { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }
.field .err { font-size: 12.5px; color: var(--brick); margin-top: 5px; font-weight: 600; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--spruce); outline-offset: -1px; border-color: var(--spruce);
}

fieldset.formsect { border: none; padding: 0; margin: 44px 0 0; min-width: 0; }
.formsect .legend {
  width: 100%; padding: 0 0 8px; border-bottom: 2px solid var(--ink);
  font-size: 18px; font-weight: 600;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.formsect .legend .n {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  color: var(--spruce); font-size: 15px; font-weight: 600;
}
.formsect .legend small { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
.formsect .legend .check { margin-left: auto; display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 400; color: var(--ink-soft); cursor: pointer; }
.formsect .legend .check input { accent-color: var(--spruce); }

.formactions { margin-top: 36px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.formactions .cancel { font-size: 14px; color: var(--ink-soft); }
.formactions .hint { font-size: 13px; color: var(--ink-faint); }

.checkline { display: flex; gap: 10px; align-items: baseline; font-size: 14px; cursor: pointer; margin-top: 22px; }
.checkline input { accent-color: var(--spruce); }

/* per-period select rows */
.hourpick { display: grid; grid-template-columns: 128px 1fr; gap: 8px 16px; align-items: center; margin-top: 14px; }
.hourpick .hp-label { font-size: 13.5px; font-weight: 600; }
.hourpick select {
  width: 100%; padding: 9px 11px; font: inherit;
  border: 1px solid var(--rule-strong); border-radius: 3px;
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.hourpick select:focus { outline: 2px solid var(--spruce); outline-offset: -1px; border-color: var(--spruce); }
.hourpick .err { grid-column: 2; font-size: 12.5px; color: var(--brick); font-weight: 600; margin-top: -4px; }
@media (max-width: 620px) { .hourpick { grid-template-columns: 1fr; } .hourpick .err { grid-column: 1; } }

/* ---------- confirmation ---------- */
.confirm-mark { margin-top: 56px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.confirm-mark svg { flex-shrink: 0; }
.confirm-title { font-size: 32px; font-weight: 500; }
.stamp {
  display: inline-block; margin-top: 10px;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--spruce); border: 1px solid var(--spruce); border-radius: 3px;
  padding: 4px 12px;
}
.btnrow { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- danger zone ---------- */
.danger { margin-top: 60px; padding-top: 14px; border-top: 1px solid var(--rule); }
.danger h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brick); font-weight: 600; margin: 0; }
.danger p { font-size: 13.5px; color: var(--ink-soft); max-width: 60ch; }
.dangerbox {
  margin-top: 26px; padding: 14px 16px;
  background: var(--brick-tint); border-left: 3px solid var(--brick);
  font-size: 14px;
}
.dangerbox b { color: var(--brick); }
.dangerbox p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13.5px; }

/* ---------- narrow pages (login) ---------- */
.narrow { max-width: 420px; margin: 0 auto; }

/* ---------- details (csv import) ---------- */
details.quiet { margin-top: 60px; padding-top: 14px; border-top: 1px solid var(--rule); }
details.quiet summary { font-size: 13px; color: var(--ink-faint); cursor: pointer; }
details.quiet summary:hover { color: var(--ink-soft); }
details.quiet .body { margin-top: 14px; }
details.quiet .body form { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
details.quiet .body input[type="file"] { font-size: 13px; color: var(--ink-soft); }
details.quiet .hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; }

/* Inline row-forms (periods card, student rows, team invite) */
.periodrow { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.periodrow input { padding: 7px 10px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.periodrow input[size="6"] { width: 74px; }

/* Field errors outside .field/.hourpick contexts keep the same treatment */
.err { font-size: 12.5px; color: var(--brick); font-weight: 600; }

/* Bracket preset chips on the class form */
.bracketchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.bracketchips button.filterlink { font: inherit; font-size: 13px; cursor: pointer; background: var(--surface); border: 1px solid var(--rule-strong); }
.bracketchips button.filterlink.active { background: var(--spruce); color: #fff; border-color: var(--spruce); }

/* Drag-and-drop reordering (periods, age brackets) */
.plainlist [data-sort-id] { display: flex; align-items: center; gap: 8px; }
.draghandle { cursor: grab; color: var(--ink-faint); user-select: none; font-size: 14px; letter-spacing: -2px; padding: 0 2px; }
[data-sort-id].dragging { opacity: 0.45; }
.bracketable input[type="text"], .bracketable input[type="number"] {
  padding: 6px 9px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; width: 100%;
}
.bracketable td { vertical-align: middle; }
.bracketable tfoot td { border-top: 2px solid var(--rule); }