/* Structure and components. Colours, fonts, textures and flourishes come from the variables in
   css/themes/<name>.css; every optional variable below has a plain fallback. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body, 1.05rem);
  line-height: 1.55;
  overflow-wrap: anywhere; /* long names, codes and URLs must wrap, never push the page wider */
}
h1, h2, h3 {
  font-family: var(--font-display); color: var(--accent); margin: 0 0 .6rem;
  line-height: 1.2; text-shadow: var(--heading-shadow, none);
}
h1 { font-size: 2rem; letter-spacing: var(--heading-spacing, 0); }
h2 { font-size: 1.4rem; letter-spacing: var(--heading-spacing, 0); }
/* a decorative rule under each heading (a theme sets --divider; plain leaves it off) */
h1::after, h2::after {
  content: ""; display: block; height: var(--divider-h, 0); margin-top: .35rem;
  background: var(--divider, none);
}
p { margin: 0 0 .75rem; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }

header.bar {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: .8rem 1.25rem; background: var(--header-bg, var(--panel));
  border-bottom: 2px solid var(--border); box-shadow: var(--header-shadow, none);
}
header.bar .brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: var(--heading-spacing, 0);
  color: var(--accent); text-decoration: none; text-shadow: var(--heading-shadow, none);
}
header.bar .brand::before {
  content: ""; width: 1.5rem; height: 1.5rem; background: currentColor;
  -webkit-mask: var(--brand-icon) center / contain no-repeat; mask: var(--brand-icon) center / contain no-repeat;
}
footer.site { max-width: 980px; margin: 0 auto; padding: 0 1rem 2rem; text-align: center; color: var(--muted); font-size: .9rem; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent); }
/* long-form pages (privacy policy, terms) */
.legal h2 { margin-top: 1.6rem; }
.legal ul { padding-left: 1.3rem; }
.legal li { margin-bottom: .4rem; }
.legal code { font-size: .95em; }
main { max-width: 980px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.panel {
  position: relative; background: var(--panel-bg, var(--panel)); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem;
  box-shadow: var(--shadow); min-width: 0;
}
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
label { display: flex; flex-direction: column; font-size: .9rem; font-weight: 600; gap: .3rem; min-width: 0; color: var(--label, var(--text)); }
label:has(> span > input[type="checkbox"]) { font-weight: normal; }
input, select, button {
  font: inherit; padding: .55rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--input-bg); color: var(--text); max-width: 100%;
}
input, select { box-shadow: var(--input-shadow, none); transition: border-color .15s, box-shadow .15s; }
input:hover, select:hover { border-color: var(--accent); }
input:focus-visible, select:focus-visible { border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; padding: 0; vertical-align: middle; }
button {
  cursor: pointer; background: var(--button-image, var(--button-bg)); color: var(--button-text);
  border-color: var(--button-border, var(--accent)); font-family: var(--font-display);
  letter-spacing: var(--button-spacing, 0); box-shadow: var(--button-shadow, none);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
button:hover:not(:disabled) { filter: brightness(1.15); box-shadow: var(--button-glow, var(--button-shadow, none)); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secondary {
  background: transparent; color: var(--text); font-family: var(--font-body);
  border-color: var(--border-strong, var(--border)); box-shadow: none; letter-spacing: 0;
}
button.secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); box-shadow: none; }
/* for the one action that cannot be undone */
button.danger {
  background: transparent; color: var(--danger); border-color: var(--danger);
  font-family: var(--font-body); box-shadow: none; letter-spacing: 0;
}
button.danger:hover:not(:disabled) { background: var(--danger); color: var(--panel); box-shadow: none; filter: none; }
ul.plain li > button.danger { margin-left: auto; padding: .25rem .8rem; font-size: .9rem; }
.muted { color: var(--muted); font-size: .95rem; }
.error { color: var(--danger); min-height: 1.2em; }
.error:empty { min-height: 0; height: 0; margin: 0; overflow: hidden; } /* no gap while there is nothing to say */
.ok { color: var(--ok); }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li {
  padding: .6rem .1rem; border-bottom: 1px dashed var(--border);
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
ul.plain li:last-child { border-bottom: none; }
.badge {
  font-size: .78rem; padding: .08rem .6rem; border: 1px solid var(--border-strong, var(--border));
  border-radius: 999px; color: var(--muted); background: var(--badge-bg, transparent);
  letter-spacing: var(--badge-spacing, 0); white-space: nowrap;
}
.badge.ok { color: var(--ok); border-color: var(--ok); }

/* availability grid: a painted tile per slot, coloured by the person's own answer */
.grid-wrap { overflow-x: auto; padding-bottom: .25rem; }
table.grid {
  border-collapse: separate; border-spacing: 2px; user-select: none; width: 100%; table-layout: fixed;
  touch-action: manipulation; /* taps work instantly and the page still scrolls under a finger */
}
table.grid th { font-size: .78rem; font-weight: normal; padding: .1rem .2rem; color: var(--muted); }
table.grid th.day-head {
  cursor: pointer; text-align: center; line-height: 1.2; padding: .25rem .2rem .45rem;
  font-family: var(--font-display); color: var(--text);
}
table.grid th.day-head:hover, table.grid th.time-label:hover { color: var(--accent); }
table.grid th.time-label { width: 3.2rem; text-align: right; vertical-align: top; cursor: pointer; white-space: nowrap; padding-right: .4rem; }
table.grid.readonly th { cursor: default; }
table.grid td.cell {
  height: 1.55rem; border: 1px solid var(--cell-border, var(--border)); border-radius: 4px; cursor: pointer;
  background: color-mix(in srgb, var(--heat-color) calc(var(--heat, 0) * 45%), var(--cell-bg));
  transition: filter .08s, transform .08s;
}
table.grid td.cell:hover { filter: brightness(1.3); }
table.grid.readonly td.cell { cursor: default; }
table.grid.readonly td.cell:hover { filter: none; }
table.grid td.cell:focus-visible, table.grid th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.grid td.cell-empty { border: none; background: none; }
/* the answer colours (also used by the legend swatches) */
.cell-free { background: var(--free) !important; border-color: var(--free-edge, transparent) !important; }
.cell-maybe { background: var(--maybe) !important; border-color: var(--maybe-edge, transparent) !important; }
.cell-no { background: var(--no) !important; border-color: var(--no-edge, transparent) !important; }
ul.legend {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: .6rem .9rem; margin: 0 0 .75rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg, transparent);
}
ul.legend li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
ul.legend .swatch { display: inline-block; width: 1.3rem; height: 1.3rem; border-radius: 4px; border: 1px solid var(--border); }

.candidate {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .7rem 1rem; margin-bottom: .6rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg, transparent);
}
.candidate .when { font-weight: bold; min-width: 14rem; }
.candidate.mine { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }

a.button-link {
  display: inline-block; padding: .55rem 1.1rem; border-radius: var(--radius);
  background: var(--button-image, var(--button-bg)); color: var(--button-text);
  border: 1px solid var(--button-border, var(--accent)); box-shadow: var(--button-shadow, none);
  font-family: var(--font-display); letter-spacing: var(--button-spacing, 0); text-decoration: none;
  transition: filter .15s, box-shadow .15s;
}
a.button-link:hover { filter: brightness(1.15); color: var(--button-text); box-shadow: var(--button-glow, var(--button-shadow, none)); }

/* The hidden attribute must always win: .row, label and friends set display and would
   otherwise keep "hidden" controls (such as organizer-only inputs) on screen. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Phones. Everything stacks, controls are big enough to tap, and nothing may be wider than the screen. */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  header.bar { padding: .55rem .8rem; gap: .5rem; }
  header.bar .brand { font-size: 1.2rem; }
  header.bar .brand::before { width: 1.25rem; height: 1.25rem; }
  main { padding: .6rem .5rem 2rem; }
  .panel { padding: .9rem; margin-bottom: .85rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: 1.2rem; }
  .row { align-items: stretch; }
  .row > label, .row > button, .row > input, .row > select { flex: 1 1 100%; }
  input, select, button { min-height: 2.75rem; font-size: 1rem; width: 100%; }
  input[type="checkbox"] { width: 1.2rem; min-height: 0; }
  button, a.button-link { min-height: 2.75rem; }
  a.button-link { display: block; text-align: center; padding-top: .7rem; }
  .candidate { gap: .5rem; }
  .candidate .when { min-width: 0; flex: 1 1 100%; }
  .candidate button { flex: 1 1 auto; width: auto; }
  ul.plain li { gap: .35rem; }
  /* a destructive button must stay small and out of the way of a thumb, not stretch across the row */
  ul.plain li > button.danger { width: auto; min-height: 2.25rem; margin-left: auto; font-size: .9rem; }
  ul.legend { gap: .4rem 1rem; padding: .5rem .7rem; }
  /* the grid: seven narrow day columns that fit the screen, dates stacked ("Wed," over "Oct 14") */
  table.grid { border-spacing: 1px; }
  table.grid th { font-size: .62rem; padding: 0 .05rem; }
  table.grid th.day-head { padding: .15rem 0 .3rem; }
  table.grid th.day-head .dow, table.grid th.day-head .md { display: block; }
  table.grid th.time-label { width: 2.5rem; padding-right: .2rem; }
  table.grid td.cell { height: 1.7rem; border-radius: 3px; }
}