:root {
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --ink: #1e1b4b;
  --bg: #fafaff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Several elements below set their own `display`, which otherwise beats the
   browser's default [hidden] rule since author styles always win over the
   user-agent stylesheet regardless of specificity. */
[hidden] {
  display: none !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

header h1 a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.5rem;
}

main {
  margin-bottom: 60px;
}

h2 {
  font-size: 1.8rem;
  margin-bottom: 16px;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
}

p {
  margin-bottom: 12px;
}

a {
  color: var(--brand);
}

button {
  font: inherit;
  cursor: pointer;
}

/* Auth widget */
.auth-forms {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 320px;
  margin-bottom: 30px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.auth-form input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}

.auth-form button[type="submit"] {
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--brand);
  text-decoration: underline;
  font-size: 0.85rem;
  padding: 0;
  text-align: left;
}

.google-btn {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f8f8f8;
}

.error {
  color: #c0392b;
  font-size: 0.85rem;
}

.auth-status {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

/* Sits just under the RSVP form (see "Reading order" in docs/DESIGN.md),
   which has its own border - without this it reads as part of the form. */
#event-host {
  margin-top: 16px;
}

/* On event.html the signed-in status bar sits at the *bottom* of the page
   (see #auth-slot-bottom in event.html), so the divider that normally
   separates it from the content below it has to move to its top edge
   instead - otherwise it underlines the last thing on the page. */
.event-auth-bottom .auth-status {
  margin-top: 30px;
  margin-bottom: 0;
  padding-top: 16px;
  padding-bottom: 0;
  border-top: 1px solid #eee;
  border-bottom: none;
}

.admin-link {
  font-size: 0.9rem;
}

.sign-out-btn {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
}

/* Event list */
.event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-list li {
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 6px;
}

.event-list time {
  display: block;
  color: #666;
  font-size: 0.85rem;
}

.hint {
  color: #666;
  font-size: 0.9rem;
}

/* RSVP / event detail */

/* Stacked (photo above everything else) by default - matches narrow/
   mobile viewports, where a side-by-side layout wouldn't leave enough
   width for either column. At wider ones (see the media query below)
   this switches to photo-on-the-left, content-on-the-right so the page
   uses the extra horizontal space instead of just centering a narrow
   column of text under a narrower, off-center photo. */
.event-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.event-photo-wrap:empty {
  display: none;
}

.event-layout-content {
  min-width: 0;
}

@media (min-width: 700px) {
  .event-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .event-photo-wrap {
    flex: 0 0 280px;
  }

  .event-layout-content {
    flex: 1;
  }
}

.event-detail {
  margin-bottom: 30px;
}

.event-detail time {
  display: block;
  color: #666;
  margin-bottom: 10px;
}

/* Portrait aspect ratio - a typical phone photo shot vertically, so it
   doesn't get force-cropped into a short horizontal strip the way a full-
   width/capped-height box would. object-fit: cover still crops to fill
   this box for photos at a different ratio, but the box itself stays
   phone-shaped rather than landscape-shaped. Sized by its wrapper
   (.event-photo-wrap, stacked full-width on mobile or a fixed column on
   desktop - see .event-layout above) rather than its own max-width/
   centering, so it lines up flush with the text next to or below it
   instead of floating narrower and off-center. */
.event-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}

.event-card-photo {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  margin: 0 auto 12px;
}

.form-photo-preview {
  display: block;
  width: 160px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 8px;
  border: 1px solid #ddd;
}

.photo-upload-status {
  font-size: 0.85rem;
  color: #666;
}

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.rsvp-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.rsvp-form select,
.rsvp-form input,
.rsvp-form textarea {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}

.rsvp-form button {
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
}

.status-msg {
  font-size: 0.9rem;
  margin-top: 6px;
}

.status-msg.success { color: #1e8e3e; }
.status-msg.error { color: #c0392b; }

/* Admin dashboard */
.admin-section {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.admin-section:last-child {
  border-bottom: none;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}

.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}

.admin-form button {
  align-self: flex-start;
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #eee;
}

.inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
  align-items: flex-end;
}

.inline-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

.inline-form input, .inline-form select {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.inline-form button {
  padding: 6px 10px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 4px;
  height: fit-content;
}

.small-btn {
  padding: 4px 8px;
  font-size: 0.85rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f0f0f0;
}

.copy-link-btn {
  padding: 4px 8px;
  font-size: 0.8rem;
}

/* Organizer-only totals, on the event page's guest list and as the RSVP
   table's footer row. Set apart from the individual responses above them
   so the summary doesn't read as just another guest. */
.guest-total {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  font-weight: 600;
  font-size: 0.9rem;
}

.rsvp-total-row td {
  font-weight: 600;
  border-top: 2px solid #ddd;
  border-bottom: none;
}

.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 0.85rem;
}

@media (max-width: 600px) {
  body {
    padding: 15px;
  }
}

/* SimpleEvents branding */
header { border-bottom-color: #e0e0f5; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; letter-spacing: -0.02em; }
.brand b { color: var(--brand); font-weight: 700; }
.brand-mark { border-radius: 8px; }
a { color: var(--brand); }
button:hover { filter: brightness(0.95); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hero { margin-bottom: 28px; padding: 28px 24px; border-radius: 12px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; }
.hero h2 { margin-bottom: 6px; }
.hero p { margin: 0; opacity: 0.9; }