/* dside events — one stylesheet, no breakpoints, no build step. */

:root {
  --bg: #fff;
  --fg: #111;
  --muted: #555;
  --link: #0000ee;
  --error: #b00020;
  --rule: #ccc;
  --measure: 68ch;
  color-scheme: light dark;
  font: 100%/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --fg: #e6e6e6;
    --muted: #a0a0a0;
    --link: #8ab4f8;
    --error: #ff8080;
    --rule: #3a3a3a;
  }
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto;
  padding: 0 1rem 2rem;
  max-width: var(--measure);
  background: var(--bg);
  color: var(--fg);
  overflow-wrap: anywhere;
}
h1, h2, p, ul, form, fieldset, hr, div.desc { margin: 0 0 1rem; }
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 {
  font-size: 1rem;
  margin-top: 1.5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--rule);
}
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
a { color: var(--link); text-decoration: underline; text-underline-offset: .15em; }
[aria-current] { font-weight: bold; text-decoration: none; }
[aria-current] a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--rule); }
small, .muted, .hint, .count { color: var(--muted); }
small, .hint { font-size: .9375rem; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Header, filters, footer */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: 1rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
header h1, header .brand { font-size: 1.25rem; font-weight: bold; margin: 0; }
header nav, .filters { line-height: 1.75; }
.filters { margin-bottom: 1rem; }
footer { margin-top: 3rem; }

/* Lists: programme rows, event links, past rows, followed curators */
.events, .links, .past, .curators { list-style: none; padding: 0; }
.past li, .curators li { margin-bottom: .5rem; }

/* Programme column: time | title + details */
.events li { display: grid; grid-template-columns: 6ch 1fr; margin-bottom: .75rem; }
.events time { font-variant-numeric: tabular-nums; }
.events form { margin: .25rem 0 0; }

/* Event page */
.desc p { white-space: pre-line; }

/* Forms */
label { display: block; margin-bottom: .25rem; }
input, textarea, button { font: inherit; color: inherit; }
input:not([type="checkbox"]):not([type="hidden"]), textarea {
  display: block;
  width: 100%;
  padding: .375rem .5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--muted);
  border-radius: 0;
  background: var(--bg);
}
textarea { min-height: 10rem; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .25rem; }
.check { display: inline-block; margin: 0 1rem .5rem 0; }
.check input { width: 1.125rem; height: 1.125rem; margin: 0 .375rem 0 0; vertical-align: -.15em; }
.hint { margin: -.75rem 0 1rem; }
.row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.row > div { flex: 1 1 8rem; }

/* Buttons and toggles: pressed = fg/bg swapped, label never changes */
button {
  display: inline-block;
  min-height: 2rem;
  padding: .25rem .75rem;
  border: 1px solid var(--fg);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}
button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
form.inline { display: inline; }
.interest button { margin: 0 .5rem .5rem 0; }
.tagfollows { margin-bottom: 1rem; }
.tagfollows button { margin: 0 .5rem .5rem 0; }

/* Errors */
.error, .errors { color: var(--error); }
.error { margin: 0 0 1rem; font-size: .9375rem; }
input + .error, textarea + .error, .hint + .error { margin-top: -.75rem; }
.errors ul { margin-bottom: 0; }
.errors a { color: inherit; }
[aria-invalid="true"] { border-color: var(--error); }