/* "Linen": warm cream, a serif for titles and day numbers, soft floating cards, terracotta accent.
   --display is a local serif stack: the CSP (server.js) is default-src 'self', so a hosted webfont would be
   blocked; to use one (Fraunces), drop the files in public/, add them to STATIC_FILES and @font-face it here. */
:root {
  --bg: #f4efe6;
  --card: #fffcf6;
  --fg: #2a2420;
  --muted: #7a6f66;
  --line: #e6ddd0;
  --accent: #b5522c;
  --accent-soft: #f3dfd4;
  --on-accent: #fff;
  --ok: #3f6b3a;
  --ok-bg: #e3ecd9;
  --err: #a33a2a;
  --maybe: #a4661c;
  --code-bg: #efe8dc;
  --ev-bg: #f2e6cf;
  --ev-fg: #6b4f1a;
  --shadow: 0 1px 2px rgb(60 40 20 / .06), 0 8px 24px -12px rgb(60 40 20 / .18);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --gap: 6px; /* between calendar cells; .ev-text and .ev.from count on it */
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg) radial-gradient(1200px 500px at 50% -10%, #fff8ea, transparent 70%) no-repeat;
}
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.2rem;
  padding: .9rem 1.4rem;
  max-width: 960px;
  margin: 0 auto;
}
header .brand { font: 700 1.5rem var(--display); letter-spacing: -.01em; text-decoration: none; color: var(--fg); margin-right: auto; }
/* nav has the popover attribute (the phone menu); the last six lines undo the browser's popover look
   on wide screens. */
nav {
  display: flex;
  gap: .3rem;
  align-items: center;
  flex-wrap: wrap;
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
}
.menu-btn { display: none; font-size: 1.3rem; line-height: 1; padding: .2rem .5rem; }
@media (max-width: 600px) {
  .menu-btn { display: block; }
  nav:not(:popover-open) { display: none; }
  nav:popover-open {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(16rem, 80vw);
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: .6rem;
    padding: 1.2rem;
    background: var(--card);
    border-right: 1px solid var(--line);
    box-shadow: 4px 0 16px rgb(0 0 0 / .15);
  }
  nav::backdrop { background: rgb(0 0 0 / .35); }
}
nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .95rem; padding: .3rem .6rem; border-radius: 999px; }
nav a:hover { color: var(--fg); }
nav a.active { color: var(--accent); background: var(--accent-soft); } /* app.js marks the current page */
nav button.link { color: var(--muted); font-weight: 500; }
/* The language menu (templates/language-menu.html): the icon at the end of the nav, or at the top right of a
   logged-out page's header, opening a small list under it. In the phone menu it reads "icon Language" and its
   list opens in place, under it. */
.lang-menu { position: relative; margin: 0; }
.lang-menu summary {
  display: flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer;
  color: var(--muted); font-weight: 500; font-size: .95rem; padding: .3rem .6rem; border-radius: 999px;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--fg); }
.lang-menu svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.lang-label { display: none; }
.lang-menu form {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 10;
  display: flex; flex-direction: column; min-width: 9rem; padding: .3rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.lang-menu form button.link { text-align: left; padding: .35rem .7rem; border-radius: 8px; color: var(--fg); text-decoration: none; }
.lang-menu form button.link:hover { background: var(--accent-soft); }
.lang-menu button[aria-current]::after { content: " ✓"; color: var(--accent); }
@media (max-width: 600px) {
  nav .lang-label { display: inline; }
  nav .lang-menu form { position: static; min-width: 0; padding: .2rem 0 0 1.6rem; background: none; border: 0; box-shadow: none; }
}
main { max-width: 900px; margin: 0 auto; padding: 1rem; }
h1 { font: 700 2.2rem/1.1 var(--display); letter-spacing: -.02em; display: flex; align-items: center; gap: .6rem; margin: 1.2rem 0 .8rem; }
/* the month arrows: round buttons */
h1 a {
  color: var(--accent);
  text-decoration: none;
  font-size: 1.8rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
}
h2 { font: 700 1.3rem var(--display); letter-spacing: -.01em; margin: 2rem 0 .6rem; }
.hint { color: var(--muted); font-size: .9rem; }
/* a subtitle right under a page title, like the version on Settings */
h1 + .hint { margin-top: -.6rem; }
.err { color: var(--err); }
/* A form error sits right under its field: tight above, a little room below. */
p.err { margin: .3rem 0 .6rem; }
.stack > p.err { margin: -.5rem 0 0; }
.ok { color: var(--ok); }
input, select, button {
  font: inherit;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
}
button { background: var(--accent); color: var(--on-accent); border-color: var(--accent); cursor: pointer; font-weight: 600; box-shadow: var(--shadow); }
button.link { background: none; color: var(--accent); border: none; padding: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
button.danger, .danger { color: var(--err); }
button.danger:not(.link) { background: var(--card); border-color: var(--line); color: var(--err); }
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  padding: .5rem .9rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.stack { display: grid; gap: .8rem; max-width: 360px; }
.stack label { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; }
.stack label.check { display: flex; align-items: center; gap: .4rem; }
/* Event form: an all-day event has no times, so its time inputs are hidden. */
form:has(#all-day:checked) input[type=time] { display: none; }
/* Repeat: one that does not repeat has no end; only "Custom…" shows its fields, and its unit which of them (the
   weekdays for weeks, which day for months). "This event" of a repeating one hides what is the whole event's. */
form:has(#repeats option[value=""]:checked) .repeat-ends,
form:not(:has(#repeats option[value=custom]:checked)) .repeat-custom,
.repeat-custom:not(:has(option[value=WEEKLY]:checked)) .repeat-weekdays,
.repeat-custom:not(:has(option[value=MONTHLY]:checked)) .repeat-monthly,
form:has(input[name=scope][value=one]:checked) :is(.repeat, .visibility) { display: none; }
/* minmax(0, 1fr): a select as wide as its longest option (French ones are long) shrinks to the phone, not the reverse. */
.repeat, .repeat-custom, .repeat-ends, .scope { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.repeat-ends, .scope { border: none; padding: 0; margin: 0; gap: .3rem; }
.repeat-ends legend, .scope legend { padding: 0; margin-bottom: .3rem; }
.repeat input[type=number] { width: 4.5rem; }
/* Custom's weekdays: a round letter each, like Google Calendar's, the checkbox over it unseen but still there */
.repeat-weekdays { display: flex; gap: .35rem; }
.stack .repeat-weekdays label { position: relative; display: block; }
.repeat-weekdays input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.repeat-weekdays span {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--code-bg); color: var(--muted); font-size: .8rem; font-weight: 600;
}
.repeat-weekdays input:checked + span { background: var(--accent); color: var(--on-accent); }
.repeat-weekdays input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The location box looks like a map search: a pin on the left, the clear button (app.js) on the right. */
.place-picker { display: grid; gap: .2rem; }
.place-box { position: relative; }
.place-box input { width: 100%; padding-left: 2.2rem; padding-right: 2.6rem; }
.place-pin {
  position: absolute; left: .6rem; top: 50%; translate: 0 -50%; width: 1.25rem; height: 1.25rem;
  fill: var(--muted); pointer-events: none;
}
.place-clear {
  position: absolute; right: .3rem; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 2rem; height: 2rem; padding: 0; background: none; border: none; border-radius: 50%; box-shadow: none;
  color: var(--muted);
}
.place-clear[hidden], .place-box input:placeholder-shown ~ .place-clear { display: none; }
.place-clear:hover { background: var(--accent-soft); }
.place-clear svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
/* Who sees it (share-with.html): the group list only matters, and only shows, for a private event or poll. */
form:not(:has(#visibility-private:checked)) .share-groups { display: none; }
.visibility, .share-groups { display: grid; gap: .3rem; }
/* a plain list under its legend, like .colors */
.visibility { border: none; padding: 0; margin: 0; }
.visibility legend { padding: 0; margin-bottom: .3rem; }
.share-groups { padding-left: 1.6rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }
form { margin: 0; }
code { word-break: break-all; font-size: .85rem; background: var(--code-bg); padding: .1rem .3rem; border-radius: 4px; }

/* settings / admin panels: one card per topic, so the page reads as groups, not one long list.
   No two panels on the same page share a color.
   Each .panel-* only sets --panel (fill) and --panel-edge (top stripe + heading); dark mode reuses the names. */
.panel {
  background: var(--panel);
  border-top: 4px solid var(--panel-edge);
  border-radius: 14px;
  padding: .6rem 1.4rem 1.4rem;
  margin: 1.4rem 0;
  box-shadow: var(--shadow);
  /* the tint costs .hint about .2 of contrast ratio; one step darker keeps it over 4.5:1 */
  --muted: #5e544b;
}
/* The default ::marker collides with the block-level h2, so the summary lays itself out as a
   flex row and draws its own triangle. list-style + the -webkit rule kill the native one. */
.panel > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; list-style: none; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before {
  content: "▶";
  font-size: .7rem;
  color: var(--panel-edge);
  transition: transform .15s ease;
}
.panel[open] > summary::before { transform: rotate(90deg); }
/* Only the section title is enlarged. Subtitles stay at body size and lean on weight, not size. */
.panel h2 { font-size: 1.3rem; color: var(--panel-edge); margin: .6rem 0; }
/* section headings inside a panel (Members, Next event, Name…): small spaced capitals in the panel's color,
   so they read as labels and stand apart from the text under them. */
.panel > h3, .panel > form > h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin: 2.2rem 0 .45rem; /* room above, so each section starts clearly apart from the one before it */
  color: var(--panel-edge);
}
/* the first section sits right under the panel title (or Owned by): no extra room needed there */
.panel > h3:first-of-type, .panel > form > h3:first-of-type { margin-top: 1.3rem; }
/* collapsed: drop the bottom padding so the closed panel is a tidy title bar.
   Scoped to details so the admin page's plain <section class=panel> keeps its padding. */
details.panel:not([open]) { padding-bottom: .6rem; }
/* Admin connection log: the panel's full width. It scrolls both ways inside itself (long actions on
   a phone); the header row stays pinned while scrolling down. */
/* Tall enough for the header + 20 rows, then it scrolls. --log-row is one row: text (.8rem at
   line-height 1.4), padding (2 × .25rem) and the 1px bottom border, the same numbers table.log uses below. */
.log-wrap {
  --log-row: calc(.8rem * 1.4 + .5rem + 1px);
  max-height: calc(21 * var(--log-row));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
table.log { border-collapse: collapse; width: 100%; font-size: .8rem; line-height: 1.4; }
table.log th, table.log td {
  padding: .25rem .6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.log th { position: sticky; top: 0; background: var(--card); }
/* one entry per row: no wrapping, except the action, which takes whatever width is left */
table.log td:not(:last-child), table.log th { white-space: nowrap; }
/* width: 1% shrinks #, time, IP and user to their content, so Action gets all the space left over */
table.log th:not(:last-child) { width: 1%; }
table.log td.n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
table.log td:nth-child(2) { font-variant-numeric: tabular-nums; }
/* Earth tones, one per panel: each only sets its stripe + heading color, the fill is a faint tint of it
   over the card (so the set stays coherent, and dark mode only swaps the edges). */
.panel          { --panel: color-mix(in srgb, var(--panel-edge) 6%, var(--card)); }
.panel-feeds    { --panel-edge: #5b7a9a; } /* dusty blue */
.panel-custom   { --panel-edge: #8a5a8c; } /* plum */
.panel-profile  { --panel-edge: #b0566a; } /* rose */
.panel-security { --panel-edge: #b5522c; } /* terracotta, the accent */
.panel-admin    { --panel-edge: #9c3a2e; } /* brick */
.panel-invites  { --panel-edge: #b8862b; } /* ochre */
.panel-integration { --panel-edge: #3f7a6e; } /* sage */
/* Calendar Integration rules: always-busy days × slots */
.busy-grid th, .busy-grid td { padding: .1rem .6rem; text-align: center; font-weight: normal; }
.busy-grid tr > th:first-child { text-align: left; }
.panel-options  { --panel-edge: #6b8a3f; } /* olive */
.panel-log      { --panel-edge: #6f5e8f; } /* heather */
/* one group on the groups page: stripe and title in the group's own color (member_groups.color) */
.panel-group    { --panel-edge: var(--c); }

/* calendar */
/* minmax(0, …): a plain 1fr won't shrink below its content, so one long title would widen its column */
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap); }
.dow { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .4rem 0; }
.day {
  background: var(--card);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .2rem;
  font-size: .75rem;
  box-shadow: var(--shadow);
}
.day.pad { background: none; border: none; box-shadow: none; }
/* continuous calendar: the days of the months before and after, still usable but stepped back */
.day.outside { background: none; box-shadow: none; }
.day.outside .num { color: var(--muted); font-weight: 400; }
/* the button is the whole cell: grid on every wrapper stretches it edge to edge, no fixed heights.
   Each day spans two rows of .grid (head, events, see calendar.html) and passes them down as a
   subgrid, so the head row is as tall as the tallest one in the week: bars start level under
   initials of any height. row-gap 0 inside the cell; --gap stays between weeks. */
.day, .day form, .day button {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  /* minmax(0, …): a label stretched over the next days (.ev-text) must not widen the cell's own column,
     or the day's other events would stretch with it and spill into the next day */
  grid-template-columns: minmax(0, 1fr);
}
.day button { text-align: left; background: none; border: none; color: var(--fg); padding: .1rem .2rem; font-weight: 400; box-shadow: none; }
.day .head { display: block; }
/* the cell's minimum height lives in the events row, so the head stays packed at the top */
.day .day-events { display: flex; flex-direction: column; min-height: 3rem; }
.day .num { font: 600 .95rem var(--display); display: inline-block; min-width: 1.4rem; }
.day.today .num { background: var(--accent); color: var(--on-accent); border-radius: 50%; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; }
/* Holding a day opens the morning/afternoon menu (public/app.js), so the phone's own long-press
   reactions must not fire: no text selection, no iOS callout. manipulation also drops the
   double-tap zoom, so taps land at once. */
.day button {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* "am" / "pm" after the initials of a half-day member. A second free time stacks right under the first:
   inline-grid puts each <i> on its own row, and its baseline is the first row's, so one slot looks as before. */
.who sup { display: inline-grid; font-size: .7em; font-weight: 600; margin-left: 1px; line-height: 1; }
.who sup i { font-style: normal; }

/* the morning / afternoon / all day menu */
#day-part {
  border: none;
  border-radius: 14px;
  padding: 1rem 1.2rem;
  background: var(--card);
  color: var(--fg);
  min-width: 240px;
  box-shadow: var(--shadow);
}
#day-part::backdrop { background: rgb(40 25 15 / .4); }
#day-part h2 { margin: 0 0 .8rem; }
#day-part .stack button { width: 100%; }
/* what the day is set to now */
#day-part .stack button.current { outline: 3px solid var(--fg); outline-offset: 2px; }
/* already free twice that day: a third time cannot be picked until one is taken off */
#day-part .stack button:disabled { opacity: .4; }
#day-part form[method=dialog] { margin-top: .8rem; text-align: center; }
/* day states: one class per DAY_STATES key in src/lib.js */
/* my free days, ringed in my own color: the grid carries my .cN class */
.day.mine { box-shadow: var(--shadow), inset 0 0 0 2px var(--c, var(--accent)); }
/* Settings → Customisation → "Disable border of free days" */
.grid.no-free-border .day.mine { box-shadow: var(--shadow); }
.day.all { background: var(--ok-bg); }
.day.all .num::after { content: " ✓"; color: var(--ok); font-size: .7rem; }
.who { display: flex; flex-wrap: wrap; gap: 2px; }
/* a group's feed link: as wide as the panel allows, so the whole URL is visible on a computer */
.feed-link { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; }
/* the groups page puts initials in front of a name, on the same line */
.group-members .who { display: inline-flex; }
/* user colors: 13 distinct colors, index stored in users.color. --c is for light mode, --cd for dark.
   To add one: a .cN line here, a stop in the .hue gradient below, and bump COLORS in src/lib.js. */
.c0  { --c: #dc2626; --cd: #f87171; }
.c1  { --c: #ea580c; --cd: #fb923c; }
.c2  { --c: #ca8a04; --cd: #facc15; }
.c3  { --c: #65a30d; --cd: #a3e635; }
.c4  { --c: #16a34a; --cd: #4ade80; }
.c5  { --c: #0d9488; --cd: #2dd4bf; }
.c6  { --c: #0284c7; --cd: #38bdf8; }
.c7  { --c: #2563eb; --cd: #60a5fa; }
.c8  { --c: #4f46e5; --cd: #818cf8; }
.c9  { --c: #9333ea; --cd: #c084fc; }
.c10 { --c: #db2777; --cd: #f472b6; }
.c11 { --c: #7c4a1d; --cd: #c9915a; }
.c12 { --c: #475569; --cd: #94a3b8; }
.who span, .swatch { color: var(--c, var(--accent)); padding: 0 .15rem; font-weight: 700; }
.swatch { font-size: 1.3rem; min-width: 2.2rem; text-align: center; }
.hue::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--fg);
}
.hue::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--fg);
}
.hue {
  appearance: none;
  width: 240px;
  height: 10px;
  border: none;
  border-radius: 5px;
  padding: 0;
  /* one equal band per color, .c0 to .c12 */
  background: linear-gradient(to right,
    #dc2626 0.00% 7.69%, #ea580c 7.69% 15.38%, #ca8a04 15.38% 23.08%, #65a30d 23.08% 30.77%,
    #16a34a 30.77% 38.46%, #0d9488 38.46% 46.15%, #0284c7 46.15% 53.85%, #2563eb 53.85% 61.54%,
    #4f46e5 61.54% 69.23%, #9333ea 69.23% 76.92%, #db2777 76.92% 84.62%, #7c4a1d 84.62% 92.31%,
    #475569 92.31% 100.00%);
}
.ev { background: var(--ev-bg); color: var(--ev-fg); border-radius: 6px; padding: 0 .25rem; margin-top: 2px; font-weight: 500; }
/* An event with a color (events.color): a tint of its .cN palette color, text in a darkened shade of it. */
.ev.colored { background: color-mix(in srgb, var(--c) 16%, var(--card)); color: color-mix(in srgb, var(--c) 80%, #000); }
/* the color picker on the event page: one round chip per palette color, the radio inside it hidden */
.colors { display: flex; flex-wrap: wrap; gap: .4rem; border: none; padding: 0; margin: 0; }
.colors legend { padding: 0; margin-bottom: .3rem; }
/* "Default" has no .cN, so it falls back to the default event look */
.swatch-pick {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  cursor: pointer;
  background: var(--c, var(--ev-bg));
  border: 2px solid var(--c, var(--ev-fg));
}
.swatch-pick input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-pick:has(:checked) { outline: 3px solid var(--fg); outline-offset: 2px; }
.swatch-pick:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the event page's Delete: a .stack like the form above, so it is as wide as Save, set apart from it */
.delete-event { margin-top: 1.5rem; }
/* Multi-day bars: one line each so every piece of a bar is the same height; the tooltip has the full title. */
.ev.bar { white-space: nowrap; }
/* The label runs across the bar's next cells in the week (run-N = N cells, set in views.js).
   One cell step is a column plus the gap: (100cqw + gap) / 7, cqw being 1% of .grid's width.
   Minus the gap, the cell's inset on both sides (.4rem padding + 1px border) and the bar's padding.
   z-index lifts it over the later cells, which paint after this one; pointer-events: none lets a
   click on the text still reach the day under it. */
.grid { container-type: inline-size; }
.ev-text {
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(var(--run) * (100cqw + var(--gap)) / 7 - var(--gap) - .8rem - 2px - .5rem);
}
.run-1 { --run: 1; }
.run-2 { --run: 2; }
.run-3 { --run: 3; }
.run-4 { --run: 4; }
.run-5 { --run: 5; }
.run-6 { --run: 6; }
.run-7 { --run: 7; }
.ev.gap { visibility: hidden; }
/* A piece that carries on stretches over the cell's padding (.2rem + .2rem on the button) and 1px border,
   and the one continuing it also over the grid gap, so the two meet edge to edge.
   Not across a week break: the first column (7 weekday headers, then 7n+1) keeps its padding. */
.day button { overflow: visible; }
.ev.to { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: calc(-.4rem - 1px); }
.ev.from { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: calc(-.4rem - 1px - var(--gap)); }
.day:nth-child(7n+1) .ev.from { margin-left: 0; }
/* too much text makes the cell taller, not wider: wrap, and break words that are longer than the cell */
.day button { overflow-wrap: anywhere; }
/* one card per event, like the days above */
.events { list-style: none; padding: 0; }
.events li { margin: .4rem 0; padding: .6rem .9rem; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); }
.events li.past { opacity: .6; } /* its last day is before today */
.events li a { color: var(--accent); }

/* polls */
.polls li { margin: .4rem 0; }
.polls a { color: var(--accent); }
.polls small { color: var(--muted); margin-left: .5rem; }
.polls .to-answer { color: var(--accent); font-size: .9rem; margin-left: .5rem; }
table.poll { border-collapse: collapse; width: 100%; margin: 1rem 0; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
table.poll th, table.poll td { border-bottom: 1px solid var(--line); padding: .6rem .7rem; text-align: center; font-size: .9rem; }
table.poll th { font-weight: 600; color: var(--muted); }
table.poll th.best { background: var(--ok-bg); color: var(--ok); }
table.poll td:first-child { text-align: left; }
/* an answer filled in from my free days, not saved yet (poll.suggested) */
table.poll select.suggested { border-style: dashed; border-color: var(--muted); }
table.poll tr.tot td { color: var(--muted); font-size: .8rem; border: 0; }
.a.yes { color: var(--ok); font-weight: 600; }
.a.no { color: var(--err); }
.a.maybe { color: var(--maybe); }
.a.none { color: var(--muted); }
.result { background: var(--ok-bg); padding: 1rem 1.2rem; border-radius: 12px; margin: 1rem 0; }
.result h2 { margin-top: 0; }
.feeds li { margin: .8rem 0; }
details { margin: .8rem 0; }
a { color: var(--accent); }
@media (max-width: 600px) {
  :root { --gap: 4px; }
  .day { font-size: .65rem; border-radius: 8px; }
  .day .num { font-size: .8rem; min-width: 1.2rem; }
  .day.today .num { width: 1.2rem; height: 1.2rem; line-height: 1.2rem; }
  .day .day-events { min-height: 1.8rem; }
  .who span { padding: 0 .15rem; }
  h1 { font-size: 1.8rem; }
}

/* dark mode: follows the OS setting. Same warmth, pulled down to deep brown. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1a1613;
    --card: #241f1b;
    --fg: #efe7dc;
    --muted: #a1958a;
    --line: #3a322c;
    --accent: #e2825a;
    --accent-soft: #3a271d;
    --on-accent: #1a1613;
    --ok: #9bcf8a;
    --ok-bg: #273523;
    --err: #f08a7a;
    --maybe: #e6b35a;
    --code-bg: #2e2822;
    --ev-bg: #3a3020;
    --ev-fg: #ecd3a1;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
  }
  body { background: var(--bg); }
  .who span, .swatch { color: var(--cd, var(--accent)); }
  .day.mine { box-shadow: var(--shadow), inset 0 0 0 2px var(--cd, var(--accent)); }
  .ev.colored { background: color-mix(in srgb, var(--cd) 20%, var(--card)); color: var(--cd); }
  .swatch-pick { background: var(--cd, var(--ev-bg)); border-color: var(--cd, var(--ev-fg)); }
  /* the same earth tones, lifted so they read on the dark card; the fill tints a little stronger.
     Dark needs no --muted bump: #a1958a clears 4.5:1 on all of them. */
  .panel { --muted: #a1958a; --panel: color-mix(in srgb, var(--panel-edge) 10%, var(--card)); }
  .panel-feeds    { --panel-edge: #9ab6d3; }
  .panel-custom   { --panel-edge: #c9a0cb; }
  .panel-profile  { --panel-edge: #e59aa9; }
  .panel-security { --panel-edge: #e2825a; }
  .panel-admin    { --panel-edge: #e8927f; }
  .panel-invites  { --panel-edge: #e0b35a; }
  .panel-integration { --panel-edge: #8ccbbb; }
  .panel-options  { --panel-edge: #b0c97e; }
  .panel-log      { --panel-edge: #b5a7d8; }
  .panel-group    { --panel-edge: var(--cd); }
}