:root {
  color-scheme: light dark;
  font: 16px/1.5 system-ui, sans-serif;
  --bg: #f3f6fa; --surface: #fff; --text: #152235; --muted: #40536a;
  --border: #bac7d7; --accent: #145aa8; --stripe: #f2f6fa;
  --inactive: #e9eef4; --yes-bg: #d9f4e3; --yes-text: #14532d;
  --no-bg: #fff0d2; --no-text: #713f12; --warn: #904000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101820; --surface: #1c2835; --text: #f1f5f9; --muted: #c2d0df;
    --border: #5a6d82; --accent: #9dccff; --stripe: #253444;
    --inactive: #2b3948; --yes-bg: #164526; --yes-text: #d1fae5;
    --no-bg: #61420c; --no-text: #fff4d6; --warn: #ffbd7d;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; background: var(--surface); color: var(--text); }
button:hover, button[aria-expanded="true"], button[aria-pressed="true"] { border-color: var(--accent); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
input, select, textarea { max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); padding: .45rem; }
input[type=checkbox] { width: 1.15rem; height: 1.15rem; }
label { display: flex; flex-direction: column; gap: .2rem; }
label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem max(16px,calc((100vw - 1440px)/2)); background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 1.4rem; margin: 0; }
.topbar p { margin: 0; color: var(--muted); }
.identity, .controls, .sectionHead { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.sectionHead { justify-content: space-between; align-items: end; }
.identity span { white-space: nowrap; }
main { max-width: 1472px; padding: 16px; margin: auto; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 8px #0001; }
h2 { font-size: 1.25rem; margin: .25rem 0; }
h3 { font-size: 1.05rem; }
p { margin: .45rem 0; }
#notice:not(:empty), #editMessage:not(:empty), #loginMessage:not(:empty) { padding: .6rem; border-left: 4px solid var(--accent); background: var(--stripe); }
.eventList { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: .7rem; }
.eventCard { text-align: left; display: block; width: 100%; min-height: 120px; }
.eventCard strong, .eventCard span { display: block; }
.eventCard span { color: var(--muted); }
.badge { display: inline-block; border: 1px solid var(--border); border-radius: 1rem; padding: 0 .4rem; font-size: .85rem; margin-right: .25rem; }
.tableScroll { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; }
table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
th, td { border-bottom: 1px solid var(--border); padding: .5rem .65rem; text-align: left; white-space: nowrap; }
thead th { background: var(--surface); position: sticky; top: 0; z-index: 2; }
tbody tr:nth-child(even) { background: var(--stripe); }
tbody tr.notParticipating { background: var(--inactive); }
#participantsTable .stickyId { position: sticky; left: 0; z-index: 3; min-width: 96px; background: var(--surface); }
#participantsTable .stickyName { position: sticky; left: 96px; z-index: 3; min-width: 150px; background: var(--surface); }
#participantsTable.idCollapsed .stickyName { left: 0; }
#participantsTable thead .stickyId, #participantsTable thead .stickyName { z-index: 4; }
#participantsTable tbody tr:nth-child(even) .stickyId, #participantsTable tbody tr:nth-child(even) .stickyName { background: var(--stripe); }
#participantsTable tbody tr.notParticipating .stickyId, #participantsTable tbody tr.notParticipating .stickyName { background: var(--inactive); }
.hourChip { display: inline-block; padding: .1rem .32rem; border: 1px solid var(--border); border-radius: 4px; margin: .1rem; }
.hourChip.active, .hourAvailable { background: var(--accent); color: var(--surface); border-color: var(--accent); font-weight: 700; text-align: center; }
.hourUnavailable { color: var(--muted); text-align: center; }
.participationBadge { display: inline-block; border-radius: .5rem; padding: .18rem .5rem; font-weight: 700; }
.participationBadge.yes { color: var(--yes-text); background: var(--yes-bg); }
.participationBadge.no { color: var(--no-text); background: var(--no-bg); }
.warning { color: var(--warn); font-weight: 600; }
#groupControls { margin: .7rem 0; }
#groupControls button { font-size: .86rem; }
.participationSwitch { border: 2px solid var(--accent); border-radius: 10px; padding: .65rem; font-size: 1.05rem; font-weight: 700; }
.participationSwitch input { width: 1.6rem; height: 1.6rem; }
details { border-top: 1px solid var(--border); padding: .7rem 0; }
summary { cursor: pointer; font-weight: 600; }
.formGrid { display: grid; gap: .8rem; min-width: min(540px,90vw); }
.formGrid label { min-width: 0; }
.hourGrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(72px,1fr)); gap: .3rem; }
.hourGrid label { border: 1px solid var(--border); border-radius: 5px; padding: .25rem; white-space: nowrap; }
fieldset { border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
dialog { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); max-width: min(700px,96vw); max-height: 92vh; overflow: auto; }
dialog::backdrop { background: #0009; }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 650px) {
  .topbar { padding: 16px; align-items: start; flex-direction: column; }
  .identity { width: 100%; }
  .sectionHead { align-items: start; flex-direction: column; }
  .controls { width: 100%; }
  .controls label { flex: 1 1 150px; }
  .card { padding: .75rem; }
  .eventList { grid-template-columns: 1fr; }
  dialog { width: 96vw; }
}