:root {
  --bg: #ffffff;
  --fg: #202124;
  --muted: #7a7f85;
  --faint: #b4b8bd;
  --line: #ebedef;
  --hover: #f1f3f4;
  --we: #f7f8f9;
  --school: #e6f4ea;
  --school-we: #dbeee1;
  --school-fg: #2d7a4a;
  --pub: #fce8e6;
  --pub-fg: #d93025;
  --accent: #1a73e8;
  --on-accent: #ffffff;
  --pop: #ffffff;
  --shadow: 0 10px 32px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
  --tip-bg: #303134;
  --tip-fg: #f1f3f4;
  --tip-pub: #f6aea9;
  --tip-school: #a8dab5;
  color-scheme: light;
}
/* Dark: chosen with the header switch (data-theme on <html>), or the system setting when
   nothing was chosen. */
:root[data-theme="dark"] {
  --bg: #141517;
  --fg: #e8eaed;
  --muted: #9aa0a6;
  --faint: #5f6368;
  --line: #26282b;
  --hover: #26282b;
  --we: #191a1c;
  --school: #15291e;
  --school-we: #193022;
  --school-fg: #81c995;
  --pub: #3b1f1d;
  --pub-fg: #f28b82;
  --accent: #8ab4f8;
  --on-accent: #202124;
  --pop: #202124;
  --shadow: 0 10px 32px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --tip-bg: #e8eaed;
  --tip-fg: #202124;
  --tip-pub: #c5221f;
  --tip-school: #137333;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141517;
    --fg: #e8eaed;
    --muted: #9aa0a6;
    --faint: #5f6368;
    --line: #26282b;
    --hover: #26282b;
    --we: #191a1c;
    --school: #15291e;
    --school-we: #193022;
    --school-fg: #81c995;
    --pub: #3b1f1d;
    --pub-fg: #f28b82;
    --accent: #8ab4f8;
    --on-accent: #202124;
    --pop: #202124;
    --shadow: 0 10px 32px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --tip-bg: #e8eaed;
    --tip-fg: #202124;
    --tip-pub: #c5221f;
    --tip-school: #137333;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.35 system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, select, input, textarea { font: inherit; color: inherit; }

/* Header */
header.top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  padding: 0 12px;
}
.nav { display: flex; align-items: center; gap: 2px; }
h1 {
  margin: 0 4px;
  min-width: 52px;
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ib {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.ib:hover { background: var(--hover); color: var(--fg); }
.ib svg { display: block; width: 18px; height: 18px; margin: auto; }
.tb {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.tb:hover { background: var(--hover); }
.tb.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tb.primary:hover { filter: brightness(1.08); }
.tb.danger { border-color: transparent; color: var(--pub-fg); }
.right { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.sw.pub { background: var(--pub); box-shadow: inset 0 0 0 1px var(--pub-fg); }
.sw.school { margin-left: 8px; background: var(--school); box-shadow: inset 0 0 0 1px var(--school-fg); }
#status { color: var(--faint); font-size: 11px; white-space: nowrap; }
#status.warn { color: var(--pub-fg); }
select {
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  cursor: pointer;
}

/* Grid */
main#grid { flex: 1; min-height: 0; padding: 0 12px 8px; overflow: auto; }
.days { position: relative; display: grid; min-height: 0; }
.cell {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  user-select: none;
  white-space: nowrap;
}
.cell .num { font-variant-numeric: tabular-nums; }
.cell.we { background: var(--we); }
.cell.we .num { color: var(--muted); }
.cell.school { background: var(--school); }
.cell.school.we { background: var(--school-we); }
.cell.pub { background: var(--pub); }
.cell.pub .num, .cell.publ .num { color: var(--pub-fg); font-weight: 600; }
.cell.publ .num { text-decoration: underline dotted; text-underline-offset: 2px; }
.cell.today .num {
  padding: 0 3px;
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.layer { position: absolute; inset: 0; pointer-events: none; }

/* Twelve month grids, weeks Monday to Sunday (--cols/--rows set by app.js). When the year fits
   the window every month reserves six week rows so the grids line up; when it scrolls, a month
   only takes the weeks it has. */
.year {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  gap: 8px 16px;
  height: 100%;
}
.year.scroll { height: auto; grid-template-rows: none; align-items: start; gap: 10px 12px; }
.ymonth { display: flex; flex-direction: column; min-height: 0; }
.ym-title { padding: 0 0 1px 18px; font-size: 12px; font-weight: 600; text-align: center; user-select: none; }
.ym-head { display: grid; grid-template-columns: 18px repeat(7, minmax(0, 1fr)); color: var(--muted); font-size: 9px; line-height: 14px; }
.ym-head span { text-align: center; }
.ym-weeks { flex: 1; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); min-height: 0; }
.year.scroll .ym-weeks { flex: none; grid-template-rows: none; grid-auto-rows: 34px; }
.ym-week { display: grid; grid-template-columns: 18px minmax(0, 1fr); min-height: 0; }
.kw { padding-top: 2px; color: var(--faint); font-size: 9px; }
.ym-week:last-child .days { border-bottom: 1px solid var(--line); }
.year .days { grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.year .cell { padding: 1px 0 0; font-size: 11px; line-height: 13px; text-align: center; }
.year .cell.void { background: none; }

/* Event lines */
.ev {
  position: absolute;
  overflow: hidden;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--c);
  color: var(--tc);
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.ev:not(.head) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ev:not(.tail) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ev:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ev.sel, .ev.drag { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 3px var(--c); z-index: 2; }
.ev .hd { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.ev .hd.l { left: 0; }
.ev .hd.r { right: 0; }
.more {
  position: absolute;
  color: var(--muted);
  font-size: 9px;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
}
.more:hover { color: var(--fg); }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.resizing, body.resizing * { cursor: ew-resize !important; }

/* Phones: one header line, narrow side margins */
@media (max-width: 760px) {
  header.top { gap: 6px; height: 42px; padding: 0 6px; }
  .legend, #status { display: none; }
  .right { gap: 2px; }
  h1 { min-width: 46px; font-size: 17px; }
  select { max-width: 150px; }
  main#grid { padding: 0 6px 8px; }
  .ym-title { padding-left: 14px; }
  .ym-head, .ym-week { grid-template-columns: 14px repeat(7, minmax(0, 1fr)); }
  .ym-week { grid-template-columns: 14px minmax(0, 1fr); }
  .kw { font-size: 8px; }
}

/* Popovers */
.pop {
  position: fixed;
  z-index: 20;
  border-radius: 10px;
  background: var(--pop);
  box-shadow: var(--shadow);
}
.editor { display: flex; flex-direction: column; gap: 10px; width: 340px; padding: 14px 16px 12px; }
.editor input, .editor textarea {
  width: 100%;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  outline: none;
  resize: vertical;
}
.editor input:focus, .editor textarea:focus { border-bottom-color: var(--accent); }
.editor .ed-title { font-size: 18px; }
.ed-row { display: flex; align-items: center; gap: 8px; }
.ed-row input[type=date], .ed-row input[type=time] { flex: 1; min-width: 0; }
.dash { color: var(--muted); }
.chk { display: flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.editor .chk input { width: auto; }
.times { display: flex; flex: 1; align-items: center; gap: 8px; }
.ed-colors { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0; }
.ed-colors button {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
}
.ed-colors button.on { box-shadow: 0 0 0 2px var(--pop), 0 0 0 4px var(--c); }
.ed-actions { display: flex; align-items: center; gap: 8px; }
.grow { flex: 1; }

.menu { display: flex; flex-direction: column; width: 230px; padding: 6px; }
.menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.menu button:hover { background: var(--hover); }
.menu-help { padding: 8px 10px 6px; border-top: 1px solid var(--line); margin-top: 4px; color: var(--muted); font-size: 11px; }

.daylist { width: 250px; padding: 12px; }
.daylist h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.daylist .hol { margin-bottom: 4px; font-size: 12px; }
.daylist .hol.p { color: var(--pub-fg); }
.daylist .hol.s { color: var(--school-fg); }
.daylist button.item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.daylist button.item:hover { background: var(--hover); }
.daylist .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.daylist .add { margin-top: 6px; width: 100%; }

#tip {
  position: fixed;
  z-index: 30;
  max-width: 300px;
  padding: 7px 9px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-size: 12px;
  pointer-events: none;
}
#tip .sub { opacity: .7; }
#tip .p { color: var(--tip-pub); }
#tip .s { color: var(--tip-school); }