:root {
  --backdrop: #161A12;
  --ink: #1E2218;
  --ink-2: #2C3224;
  --paper: #F2EDE0;
  --paper-soft: #E4DDCC;
  --muted: #B8B09A;
  --line: #454A38;
  --atom: #9AFF4A;
  --hot: #F94BF3;
  --link: #5AD4C8;
  --terra: #C99252;
  --cta-ink: #142010;
  --error: #f87171;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  /* Grid column widths. Must match TIME_COL / CELL_MIN in src/client/grid.ts, which reads
     these two custom properties on mount and on resize instead of holding its own literals. */
  --time-col: 72px;
  --cell-min: 56px;
  /* Measured height of header.site, set at runtime by src/client/main.ts. This fallback is
     only what paints before that first measurement. */
  --header-h: 65px;
  --brush-h: 0px;
}
@media (min-width: 700px) {
  :root { --cell-min: 40px; }
}
* { box-sizing: border-box; border-radius: 0; }
/* Author-origin `display` rules (button { display: inline-block }, .brush-bar { display: grid },
   .pager { display: flex }, ...) beat the user agent's default [hidden] { display: none } at equal
   or lower specificity, because normal author declarations always win over normal user-agent ones
   regardless of specificity. Without this, `el.hidden = true` on a button, the brush bar or the
   pager silently does nothing. */
[hidden] { display: none !important; }
html {
  color-scheme: dark;
  /* So the browser's own "scroll this into view" (keyboard focus, anchor jumps) never lands a
     target behind the fixed brush bar; matches the real layout space body reserves below. */
  scroll-padding-bottom: var(--brush-h);
}
html, body {
  margin: 0;
  padding: 0;
  background: var(--backdrop);
  color: var(--paper-soft);
  font-family: var(--font-sans);
  line-height: 1.4;
  min-height: 100%;
}
body {
  /* Fixed brush bar padding lives here (not on main#app), so it protects the footer too. */
  padding-bottom: var(--brush-h);
}
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--paper);
}
h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}
h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5rem 0 0.6rem;
}
h3 { font-size: 1rem; margin: 0.8rem 0 0.4rem; }
/* The UA default is 1em top AND bottom, which was quietly stacking a lot of unwanted height
   through the many status/notice paragraphs on the event page. Selectors that need their own
   rhythm (.legend, .best-row p, the footer) already set an explicit margin, which wins over this
   on specificity, so they are unaffected. */
p { margin: 0 0 0.5rem; }
button, input, select, textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: inherit;
  border-radius: 0;
}
:focus-visible {
  outline: 2px solid var(--atom);
  outline-offset: 2px;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  backdrop-filter: blur(6px);
}
header.site .site-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
header.site .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
}
header.site .brand:hover { text-decoration: none; }
header.site .brand .mark { width: 32px; height: 32px; display: block; }
header.site .brand .wordmark { height: 18px; width: auto; display: block; }
header.site nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 1.15rem;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
header.site nav a { color: var(--paper-soft); }
header.site nav a.sharathon {
  border: 1px solid var(--atom);
  background: color-mix(in oklab, var(--atom) 10%, transparent);
  color: var(--atom);
  padding: 6px 12px;
}
@media (max-width: 419px) {
  header.site nav .sharathon { display: none; }
}
footer.site { border-top: 1px solid var(--line); margin-top: 2rem; }
footer.site .foot-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.6;
  color: var(--muted);
}
footer.site .foot-inner p { margin: 0 0 0.35rem; }
/* Matches sandiegoaistudio.com's own header/footer side padding (`px-6 md:px-10`: 24px below the
   768px breakpoint, 40px from it up), so the logo and nav do not sit further out on Overlap than on
   the site people arrive from. Below 768px the base rules above (24px) and the phone-width override
   below (16px, header only) are untouched. */
@media (min-width: 768px) {
  header.site .site-inner { padding: 16px 40px; }
  footer.site .foot-inner { padding: 40px 40px; }
}
/* The organizer form sits in a fieldset so one property locks every control while a save runs.
   It must not look like a fieldset. */
fieldset.form-lock { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.form-lock:disabled { opacity: 0.6; }
main#app { display: block; }
main noscript {
  display: block;
  max-width: 1080px;
  margin: 1.5rem auto;
  padding: 0 1rem;
  color: var(--error);
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}
.panel {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 1.5rem 1.25rem 1.75rem;
  box-shadow: 18px 18px 0 color-mix(in oklab, var(--atom) 8%, transparent);
}
.event-page { padding-bottom: 2rem; }
.event-head { margin: 0 0 1rem; }
.event-head h1 { margin-bottom: 0.3rem; }
.muted { color: var(--muted); }
.warn { color: var(--terra); }
.notice { color: var(--terra); font-size: 0.9rem; margin: 0.4rem 0; }
label.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.7rem 0;
}
input[type="text"], input[type="datetime-local"], textarea, select {
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 0.55rem 0.65rem;
  color: var(--paper-soft);
}
textarea { min-height: 4rem; resize: vertical; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.row > * { flex: 1 1 10rem; }
button, a.btn {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 20px;
  background: transparent;
  color: var(--atom);
  border: 1px solid var(--atom);
  cursor: pointer;
  display: inline-block;
}
button:hover:not(:disabled), a.btn:hover {
  background: color-mix(in oklab, var(--atom) 10%, transparent);
}
button.primary {
  background: var(--atom);
  color: var(--cta-ink);
  border: 0;
}
button.primary:hover:not(:disabled) {
  background: var(--paper);
  color: var(--cta-ink);
}
button.active {
  background: color-mix(in oklab, var(--atom) 18%, transparent);
  color: var(--paper);
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 0.4rem 0 0.8rem;
  max-width: 42rem;
}
.cal .dow { text-align: center; padding: 0.2rem 0; }
.cal button.day {
  min-height: 2.2rem;
  padding: 0.25rem 0.15rem;
  font-size: 11px;
}
.cal button.day[aria-pressed="true"] {
  background: var(--atom);
  color: var(--cta-ink);
  border-color: var(--atom);
}
.poll-builder {
  border: 1px solid var(--line);
  padding: 0.75rem;
  margin: 0.6rem 0;
}
.banner {
  border: 1px solid var(--line);
  border-left: 3px solid var(--hot);
  padding: 0.9rem 1rem;
  margin: 0.8rem 0 1.2rem;
  background: var(--ink-2);
}
.banner h2 { margin-top: 0; }
.banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.6rem 0 0;
}
.status-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 1rem;
}
.status-box .label { min-height: 1.2em; }
.pruned-note { color: var(--terra); font-size: 0.85rem; margin: 0 0 0.6rem; }
.share-box {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem 0 0.75rem;
}
.share-box input { flex: 1 1 12rem; }
table.grid {
  border-collapse: separate;
  border-spacing: 1px;
  background: var(--line);
  font-size: 0.75rem;
}
table.grid th, table.grid td {
  text-align: center;
  vertical-align: middle;
}
table.grid th.time, table.grid td.time {
  background: var(--ink);
  min-width: var(--time-col);
  width: var(--time-col);
  text-align: right;
  padding: 0 0.45rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  touch-action: pan-y;
}
table.grid thead th {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--ink);
  min-width: var(--cell-min);
  padding: 0.4rem 0.2rem;
}
table.grid thead th.time {
  min-width: var(--time-col);
  width: var(--time-col);
}
td.cell, td.heat {
  min-width: var(--cell-min);
  width: var(--cell-min);
  height: 28px;
  min-height: 28px;
  padding: 0;
  position: relative;
  user-select: none;
  background: var(--ink);
}
td.cell {
  touch-action: none;
  cursor: pointer;
}
td.cell[data-level="3"] { background: var(--atom); color: var(--cta-ink); }
td.cell[data-level="3"]::after { content: "P"; font-size: 0.65rem; font-weight: 650; }
td.cell[data-level="2"] {
  background: color-mix(in oklab, var(--atom) 45%, var(--ink));
  color: var(--cta-ink);
}
td.cell[data-level="2"]::after { content: "W"; font-size: 0.65rem; font-weight: 650; color: var(--cta-ink); }
td.cell[data-level="1"] {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in oklab, var(--atom) 45%, transparent) 0 1px,
    var(--ink-2) 1px 5px
  );
  color: var(--paper);
}
td.cell[data-level="1"]::after { content: "~"; font-size: 0.65rem; font-weight: 650; }
[aria-disabled="true"] td.cell { cursor: not-allowed; opacity: 0.55; }
td.heat { cursor: pointer; color: var(--paper); font-weight: 650; font-size: 0.7rem; }
td.heat[data-step="0"] { background: var(--ink); }
td.heat[data-step="1"] { background: color-mix(in oklab, var(--atom) 16%, var(--ink)); color: var(--paper); }
td.heat[data-step="2"] { background: color-mix(in oklab, var(--atom) 30%, var(--ink)); color: var(--paper); }
td.heat[data-step="3"] { background: color-mix(in oklab, var(--atom) 44%, var(--ink)); color: var(--paper); }
td.heat[data-step="4"] { background: color-mix(in oklab, var(--atom) 58%, var(--ink)); color: var(--cta-ink); }
td.heat[data-step="5"] { background: color-mix(in oklab, var(--atom) 74%, var(--ink)); color: var(--cta-ink); }
td.heat[data-all="1"] {
  box-shadow: inset 0 0 0 2px var(--cta-ink);
  font-weight: 700;
}
.brush-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.4rem;
  align-items: stretch;
  margin: 0.5rem 0;
}
.brush-bar > button {
  min-height: 44px;
  padding: 8px 4px;
  width: 100%;
}
@media (max-width: 419px) {
  .brush-bar > button {
    font-size: 10px;
    letter-spacing: 0.04em;
    padding-inline: 4px;
  }
}
.locked-note { margin: 0.4rem 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.legend { font-size: 0.85rem; color: var(--muted); margin: 0.3rem 0 0.6rem; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 0.35rem 0; }
.best-1 {
  border-left: 3px solid var(--hot);
  padding-left: 0.7rem;
}
.best-row { margin: 0 0 1rem; }
.best-row p { margin: 0; }
.best-row .best-window { font-weight: 600; color: var(--paper); }
.best-row .best-facts { color: var(--muted); font-size: 0.85rem; margin: 0.15rem 0 0.4rem; }
.vote { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.6rem; }
.vote-row { margin: 0.6rem 0; }
.vote-buttons {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin: 0.3rem 0;
}
.vote-bar {
  height: 6px;
  background: var(--ink-2);
  margin: 0.3rem 0 0.15rem;
}
.vote-bar > span {
  display: block;
  height: 100%;
  background: var(--atom);
}
.vote-counts { color: var(--muted); font-size: 0.8rem; }
.people-note { color: var(--muted); font-size: 0.85rem; }
.error { color: var(--error); font-size: 0.9rem; }
.hover-list {
  position: absolute;
  z-index: 10;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
  max-width: 16rem;
  color: var(--paper-soft);
}
.day-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin: 0.75rem 0;
}
.day-strip button {
  flex: 0 0 auto;
  min-width: 4.4rem;
  padding: 10px 12px;
}
.time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.75rem 0;
}
.confirm-row { margin: 1rem 0 0.4rem; }
.event-layout { display: grid; gap: 1rem; }
.full-span { grid-column: 1 / -1; }
/* .avail-row holds only paint-col and group-col. A 3-row subgrid keeps row 2 (the brush bar vs.
   the legend+chips) the same height in both columns, so row 3 (the actual grid table) starts at
   the same Y regardless of how many lines the legend wraps to. See src/client/views/event.ts. */
.avail-row { display: grid; gap: 1rem; }
.section-controls { margin: 0; }
.section-body { margin: 0; }
@media (min-width: 960px) {
  .avail-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .paint-col, .group-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
  }
}
.pager { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.6rem; }
.grid-info { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 0.8rem; }
.grid-info p { margin: 0; }
.person-admin { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }
[data-testid="organizer-panel"] {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1rem;
}
[data-testid="organizer-panel"] > summary {
  cursor: pointer;
}
.org-form { margin-top: 0.75rem; }
@media (max-width: 699px) {
  .panel { box-shadow: 8px 8px 0 color-mix(in oklab, var(--atom) 8%, transparent); }
  header.site .brand .wordmark { height: 14px; }
  header.site .site-inner { padding: 12px 16px; }
  td.cell, td.heat {
    height: 32px;
    min-height: 32px;
  }
  .brush-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--ink);
    border-top: 1px solid var(--line);
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    margin: 0;
  }
}
@media (min-width: 960px) {
  .event-layout {
    grid-template-columns: 1fr 1fr;
  }
}