/* app/static/style.css */
:root {
  --stone: #efeae0;
  --surface: #faf7f1;
  --surface-raised: #ffffff;
  --ink: #1c2620;
  --ink-muted: #5c6a5f;
  --border: #ddd5c8;
  --brass: #8f6524;
  --brass-strong: #6f4e1c;
  --velvet: #24392f;
  --velvet-tint: #e4e9e2;
  --yes: #2f7a51;
  --yes-bg: #e2efe6;
  --maybe: #a06a1a;
  --maybe-bg: #f4e9d6;
  --no: #a13d30;
  --no-bg: #f4e0dc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stone: #12211b; --surface: #1b2c24; --surface-raised: #20342a;
    --ink: #ede6d8; --ink-muted: #9bab9f; --border: #2e4238;
    --brass: #d6a54a; --brass-strong: #ecc06e; --velvet: #3a5949; --velvet-tint: #24392f;
    --yes: #6cc191; --yes-bg: #1f3a2c; --maybe: #e6b45c; --maybe-bg: #3a2f1a;
    --no: #e0897c; --no-bg: #3d2420;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--stone); color: var(--ink);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
}
.serif { font-family: ui-serif, Georgia, "Iowan Old Style", serif; }
.app { max-width: 860px; margin: 0 auto; padding: 0 20px 80px; }
.top { padding: 40px 0 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.connect-telegram {
  flex: none; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; text-decoration: none; color: var(--brass-strong); font-size: 0.8rem; font-weight: 600;
}
.wordmark { font-size: 1.9rem; font-weight: 600; }
.wordmark span { color: var(--brass); }
.tagline { color: var(--ink-muted); font-size: 0.85rem; }
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.tabs a { padding: 10px 4px; text-decoration: none; color: var(--ink-muted); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--brass); }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.card {
  display: block; background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; text-decoration: none; color: inherit;
}
.card-details {
  display: inline-block; margin-top: 12px; font-size: 0.78rem; color: var(--brass-strong);
  text-decoration: none; font-weight: 600;
}
.card-photo-img, .detail-photo-img { width: 100%; border-radius: 8px; display: block; margin-bottom: 10px; }
.chip {
  display: inline-flex; padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.63rem; font-weight: 600; margin-bottom: 8px;
}
.chip.idea { background: var(--velvet-tint); color: var(--velvet); }
.chip.dates_proposed { background: var(--maybe-bg); color: var(--maybe); }
.chip.decided { background: var(--yes-bg); color: var(--yes); }
.chip.attended { background: var(--stone); color: var(--ink-muted); }
.card-title { display: block; font-size: 1.15rem; font-weight: 600; text-decoration: none; color: inherit; }
.card-venue, .detail-venue { color: var(--ink-muted); font-size: 0.85rem; }
.card-date-line { margin-top: 10px; font-weight: 600; }
.card-time-line { color: var(--ink-muted); font-size: 0.85rem; }
.card-attendees { margin-top: 8px; padding-left: 20px; color: var(--ink-muted); font-size: 0.82rem; }
.card-votes { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.detail-notes {
  margin: 16px 0; padding: 12px 14px; background: var(--surface); border-left: 3px solid var(--brass);
  border-radius: 4px;
}
.block { margin-top: 30px; }
.stub { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 10px; }
.tally { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; margin-right: 4px; }
.tally.yes { background: var(--yes-bg); color: var(--yes); }
.tally.maybe { background: var(--maybe-bg); color: var(--maybe); }
.tally.no { background: var(--no-bg); color: var(--no); }
.confirmed-badge { background: var(--yes-bg); color: var(--yes); padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 0.72rem; }
.going-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.going-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 0.82rem; }
.comment { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-time { color: var(--ink-muted); font-size: 0.7rem; }
.empty { color: var(--ink-muted); }
.error { color: var(--no); font-size: 0.85rem; }
form { margin-top: 10px; }
input, button { font-family: inherit; font-size: 0.9rem; }
button {
  background: var(--brass); color: var(--surface-raised); border: none; border-radius: 6px;
  padding: 8px 14px; cursor: pointer;
}