:root {
  --bg: #0b0d10;
  --card-bg: #16191d;
  --input-bg: #1e2126;
  --text: #e8eaed;
  --subtext: #9aa0a6;
  --accent: #4f9dff;
  --border: #2a2e35;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding: 16px;
}

.card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 20px;
}
.card.wide { max-width: 720px; }

h1 { font-size: 1.4rem; margin: 0 0 4px; }
.subtitle { color: var(--subtext); margin: 0 0 20px; font-size: 0.9rem; }
.event-description { color: var(--text); margin: 0 0 12px; font-size: 0.9rem; }
.field-hint { color: var(--subtext); margin: -8px 0 14px; font-size: 0.78rem; }

form label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--subtext);
}
form input, form select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
}

.day-mode-toggle { display: flex; gap: 8px; margin: 4px 0 12px; }
.mode-btn {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--subtext);
  cursor: pointer;
  font-size: 0.85rem;
}
.mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.error-text { color: #ff6b6b; font-size: 0.85rem; margin: -8px 0 14px; }

.weekday-filter { margin: 4px 0 14px; }
.weekday-filter-label {
  display: block;
  font-size: 0.8rem;
  color: var(--subtext);
  margin-bottom: 6px;
}
.weekday-checks { display: flex; gap: 4px; flex-wrap: wrap; }
.weekday-check-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--text);
  margin: 0;
  cursor: pointer;
}
.weekday-check-label input {
  width: auto;
  margin: 0;
}

.day-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.day-row input { flex: 1; }
.remove-day {
  background: none;
  border: 1px solid var(--border);
  color: var(--subtext);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
}
#add-day {
  background: none;
  border: 1px dashed var(--border);
  color: var(--accent);
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  margin: 8px 0 16px;
  cursor: pointer;
  font-size: 0.9rem;
}
.time-row { display: flex; gap: 12px; }
.time-row label { flex: 1; }

button.primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #06111f;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

button.secondary {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--subtext);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
button.secondary:hover { color: var(--text); }

/* Desktop: one real grid, filled column-first so each .day-col (dissolved by
   display: contents) becomes a column and rows line up across days. Columns
   have a floor so a fortnight scrolls sideways inside the card instead of
   blowing out the page. */
.grid-scroll {
  overflow-x: auto;
  margin: 16px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(64px, 1fr));
  grid-template-rows: auto repeat(var(--rows), auto);
  grid-auto-flow: column;
  gap: 4px;
}
.day-col, .day-cells { display: contents; }
.day-header {
  font-size: 0.75rem;
  text-align: center;
  color: var(--subtext);
  padding-bottom: 4px;
}
.slot-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  padding: 8px 4px;
  min-height: 44px;
  border-radius: 6px;
  font-size: 0.75rem;
  background: rgba(79, 157, 255, calc(var(--intensity, 0) * 0.7));
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation; /* touch scrolls and taps; only a mouse drag-paints */
}
.slot-cell.empty { visibility: hidden; cursor: default; }
.slot-cell.mine {
  border: 2px solid var(--accent);
  font-weight: 600;
}
.slot-cell.full {
  background: rgba(56, 193, 114, 0.85);
  border-color: #38c172;
}
.slot-cell.full.mine { border-color: var(--accent); }

.slot-time { line-height: 1.1; }

/* Phone: days stack vertically, each a block of wrapping tiles, so the page
   only ever scrolls down. No row alignment to preserve, so the padding
   cells that keep the desktop grid square go away. */
@media (max-width: 600px) {
  .grid-scroll { overflow-x: visible; }
  .grid { display: block; }
  .day-col { display: block; margin-bottom: 16px; }
  .day-header {
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    padding-bottom: 6px;
  }
  .day-cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
  }
  .slot-cell.empty { display: none; }
}

.avatar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  min-height: 14px;
}
.avatar {
  width: 14px;
  height: 14px;
  line-height: 14px;
  border-radius: 3px;
  font-size: 0.55rem;
  font-weight: 700;
  color: #06111f;
  text-align: center;
}

.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--subtext);
  margin: 0 0 12px;
}
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.legend-swatch.full { background: rgba(56, 193, 114, 0.85); border-color: #38c172; }
.legend-swatch.partial { background: rgba(79, 157, 255, 0.5); }

.organizer-panel {
  margin-top: 16px;
  padding: 14px;
  background: var(--input-bg);
  border-radius: 8px;
}
.organizer-panel p { margin: 0 0 10px; font-size: 0.9rem; }
/* The panel isn't inside a <form>, so the global form input/select rules
   don't reach it — restate what the dropdown needs. */
.organizer-panel label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--subtext);
}
.organizer-panel select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.9rem;
}

#save-status {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 8px;
  background: #4a1d1d;
  color: #ffb4b4;
  border: 1px solid #7a2d2d;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 10;
}
#save-status.visible { display: block; }

.confirmed-banner {
  background: #1b3a24;
  color: #7be08a;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 12px;
}

.share-row { display: flex; gap: 8px; }
.share-row input {
  flex: 1;
  margin-top: 0;
  font-size: 0.85rem;
}
.share-row button {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--accent);
  color: #06111f;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.share-hint {
  color: var(--subtext);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 16px;
}

.about {
  margin-top: 28px;
  color: var(--subtext);
  font-size: 0.88rem;
  line-height: 1.55;
}
.about h1 {
  font-size: 1.15rem;
  color: var(--text);
  margin: 0 0 10px;
}
.about h2 {
  font-size: 0.95rem;
  color: var(--text);
  margin: 20px 0 6px;
}
.about p { margin: 0 0 10px; }
.about ol { margin: 0 0 10px; padding-left: 20px; }
.about li { margin-bottom: 6px; }
.about strong { color: var(--text); }

/* Deliberately quiet: subtext colour, small, no border or button. It sits
   below the share box because sharing is the functional thing and this is
   not. An ask that looks like an ad undermines the cost-recovery framing. */
.tip-jar {
  margin: 18px 0 0;
  color: var(--subtext);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}
.tip-jar a { color: var(--accent); text-decoration: none; }
.tip-jar a:hover { text-decoration: underline; }

.site-footer {
  text-align: center;
  margin-top: 24px;
  padding-bottom: 8px;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--subtext);
  text-decoration: none;
  font-size: 0.8rem;
}
.site-footer a:hover { color: var(--accent); }
.footer-tip {
  margin: 6px 0 0;
  color: var(--subtext);
  font-size: 0.75rem;
}
.footer-tip a { color: var(--accent); text-decoration: none; }
.footer-tip a:hover { text-decoration: underline; }
.site-footer svg { width: 15px; height: 15px; fill: currentColor; }

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --text: #1a1d21;
    --subtext: #5f6368;
    --border: #e0e2e6;
  }
}

/* Availability saves on a debounce with no submit step, which reads as
   nothing happening. A real user went looking for a submit button and hit the
   organizer's lock instead, so this states the model up front. */
.autosave-hint {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* The lock is irreversible and mails everyone, so the panel says whose
   control it is and what it costs before the button, not after. */
.organizer-badge {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.organizer-warning {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.75;
}

/* Success state for the save indicator. Failure keeps its existing styling;
   this only softens the transient confirmation so it reassures without
   grabbing attention. */
#save-status.saved {
  background: #16351f;
  color: #b7e4c7;
  /* The base rule is styled for the failure case; the border has to be
     overridden too or "Saved" renders green inside a red outline. */
  border-color: #2c6b40;
}

/* Suppression used to be entirely silent: no mail, no explanation, which a
   user can't tell apart from the app being broken. This says so plainly and
   hands over the recall link, so losing email degrades the feature instead of
   removing it. Deliberately neutral about the reason — someone else may have
   typed this address and complained, and "you marked us as spam" would then
   be both wrong and insulting. */
.email-blocked {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #7a5d2d;
  border-radius: 8px;
  background: #3a2f1d;
  color: #e8d7b0;
  font-size: 0.85rem;
  line-height: 1.45;
}

.email-blocked .recall-link {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 6px 8px;
  border: 1px solid #7a5d2d;
  border-radius: 6px;
  background: #241d12;
  color: #e8d7b0;
  font-size: 0.8rem;
}