@layer tokens, base, components, hub;
@import url('/styles/theme.css') layer(tokens);
@import url('/styles/dashboard.css') layer(components);
@import url('/styles/hub.css') layer(hub);

@layer base {

* { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 70rem 45rem at 0 0, var(--glow-accent), transparent 70%),
    radial-gradient(ellipse 60rem 45rem at 100% 100%, var(--glow-green), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
}
::selection { background: var(--electric); color: var(--on-electric); }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: calc(var(--space-small) / 2); }

h1 {
  margin-block: calc(2 * var(--space-large)) calc(var(--space-large) + var(--space-small) / 2);
  font-size: clamp(calc(2.5 * var(--text-base)), 10vw, calc(4.5 * var(--text-base)));
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
h2, h3 { margin-block: 0 var(--space-large); font-size: var(--text-heading); }
p { margin-block: var(--space-medium); }

.home {
  display: flex; flex-direction: column; min-block-size: 100svh;
  & .theme-toggle {
    position: absolute;
    inset-block-start: var(--space-large);
    inset-inline-end: var(--space-large);
  }
  & main {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1;
    padding-block: clamp(var(--space-large), 4svh, calc(2 * var(--space-large)));
    padding-inline: var(--space-large);
  }
  & .home-hero h1 {
    margin: 0; color: var(--accent);
    font-size: clamp(calc(3 * var(--text-base)), min(24vw, 28svh), calc(16 * var(--text-base)));
  }
  & .home-footer {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-large);
    padding: var(--space-large); color: var(--muted); font-size: var(--text-caption);
  }
}

.page {
  inline-size: min(100% - 2 * var(--space-large), var(--page-width));
  margin-block: calc(2 * var(--space-large)) calc(4 * var(--space-large));
  margin-inline: auto;

  & section :is(h2, h3), & .signup h3 {
    &::before { content: '✷' / ''; margin-inline-end: var(--space-small); color: var(--accent); }
  }
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding-block-end: calc(var(--space-large) + var(--space-small) / 2);

  & a:not(.brand) { color: var(--muted); font-size: var(--text-small); }
}
.brand {
  color: var(--accent); font-size: calc(1.5 * var(--text-base)); font-weight: 700;
  letter-spacing: var(--tracking-heading); text-decoration: none;
}
.header-actions { display: flex; align-items: center; gap: var(--space-large); }
.event-detail {
  display: grid; grid-template-columns: calc(1.5 * var(--icon-size)) minmax(0, 1fr); align-items: center; gap: var(--space-large);
  & > svg { inline-size: calc(1.5 * var(--icon-size)); block-size: calc(1.5 * var(--icon-size)); color: var(--muted); }
  & .event-detail-content { margin: 0; padding-block: calc(1.25 * var(--space-large)); font-size: calc(1.125 * var(--text-base)); overflow-wrap: anywhere; }
  &:not(:last-child) .event-detail-content { border-block-end: var(--border); }
}
.date-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-medium); }
.when {
  margin: 0; color: var(--accent);
  & span { color: var(--muted); }
  & strong { color: var(--fg); font-weight: 500; white-space: nowrap; }
}
.calendar-actions { display: flex; flex-wrap: wrap; gap: var(--space-medium); }
.calendar-button, .directions {
  display: inline-flex; align-items: center; gap: var(--space-small);
  border: var(--border); border-radius: var(--radius);
  padding: var(--space-small) var(--space-medium);
  color: var(--accent); font-size: var(--text-small); text-decoration: none;
  &:hover { border-color: var(--accent); }
}
.calendar-button {
  & .google-icon, & svg { flex-shrink: 0; }
}
.google-icon { inline-size: calc(1.125 * var(--icon-size)); block-size: calc(1.125 * var(--icon-size)); background: currentColor; mask: url('/google.svg') center / contain no-repeat; }
.location { margin-block-start: calc(2 * var(--space-medium)); }
.location-callout {
  margin-block-end: var(--space-large); padding: var(--space-large);
  border: var(--border); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg)); font-size: calc(1.0625 * var(--text-base));
}
.location-details {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-medium);
}
.address { margin: 0; }
.location-note { margin: var(--space-small) 0 0; color: var(--muted); font-size: var(--text-small); }
.directions { white-space: nowrap; }
.access {
  margin: var(--space-large) 0 0;
  padding-block-start: var(--space-large); border-block-start: var(--border);
  color: var(--muted); white-space: pre-wrap;
}
.map {
  --map-height: 13.75rem;
  display: block; inline-size: 100%; block-size: var(--map-height);
  border: var(--border); border-radius: var(--radius);
}
.event-map {
  position: relative; margin-block-start: var(--space-large);
  & .map { overflow: hidden; }
  & .map:not(:has(canvas)) { display: none; }
}
.map-circle {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  inline-size: 10rem; block-size: 10rem; border: 2px solid var(--accent); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); pointer-events: none;
}
.map-credit { display: block; margin-block-start: var(--space-small); color: var(--muted); font-size: var(--text-small); }
.what-to-bring {
  margin-block-start: calc(2 * var(--space-large));
  & p { color: var(--muted); }
}
.contribution {
  display: flex; flex-wrap: wrap; gap: var(--space-medium) calc(2 * var(--space-medium));
  margin-block-start: calc(var(--space-large) + var(--space-small) / 2); color: var(--accent);
}
.signup, .share-event {
  margin-block-start: calc(2 * var(--space-large));
  padding-block-start: calc(2 * var(--space-medium));
}

label { display: block; margin-block: var(--space-large) var(--space-small); font-size: var(--text-small); }
button, input, textarea { font: inherit; }
textarea, input:not([type="hidden"]):not([type="checkbox"]) {
  display: block; inline-size: 100%; min-inline-size: 0;
  min-block-size: var(--control-size);
  border: var(--border); border-radius: var(--radius);
  padding: var(--space-small) var(--space-medium);
  background: var(--field-bg); color: var(--fg);
}
textarea { resize: vertical; }
.page:has(.notes) { --page-width: 52rem; }
.notes {
  overflow-wrap: anywhere;
  & h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); }
  & h2, & h3 { margin-block-start: var(--space-large); }
  & h2 { font-size: 1.5rem; }
  & h3 { font-size: 1.3rem; }
  & h4 { margin-block: var(--space-large) var(--space-small); font-size: 1.15rem; }
  & ul, & ol { padding-inline-start: 1.5rem; }
  & li { margin-block: .4rem; }
  & li > ul, & li > ol { margin-block: .4rem; }
  & a { text-decoration: underline; }
  & pre { overflow-x: auto; }
}
.announcement { margin-block-start: calc(2 * var(--space-large)); }
.announcement-hint { color: var(--muted); font-size: var(--text-small); }
.announcement-actions, .saved-announcements form {
  display: flex; flex-wrap: wrap; gap: var(--space-small);
}
.saved-announcements {
  list-style: none; padding: 0;
  & li { padding-block: var(--space-medium); border-block-end: var(--border); }
  & p { white-space: pre-wrap; overflow-wrap: anywhere; }
  & .delete-announcement {
    min-inline-size: var(--control-size); min-block-size: var(--control-size);
    font-size: 1.5em; text-decoration: none;
  }
}
button {
  min-block-size: var(--control-size);
  border: var(--border-width) solid var(--button-border, transparent);
  border-radius: var(--radius);
  padding: var(--space-small) var(--space-large);
  background: var(--button-bg); color: var(--button-fg);
  font-weight: 700; cursor: pointer;
  transition: scale 120ms ease, box-shadow 120ms ease;

  &:disabled { opacity: .55; cursor: wait; }
  @media (hover: hover) {
    &:hover:not(:disabled) { box-shadow: 0 0 0 var(--focus-width) var(--accent); }
  }
  &:active:not(:disabled) { scale: .97; box-shadow: inset 0 var(--focus-width) calc(2 * var(--focus-width)) #0003; }
  @media (prefers-reduced-motion: reduce) {
    transition: none;
    &:active { scale: 1; }
  }
}
.secondary-button, .copy-link, .theme-toggle {
  --button-bg: transparent;
  --button-fg: var(--fg);
  --button-border: var(--line);
}
.text-button {
  --button-bg: transparent;
  --button-fg: var(--muted);
  min-block-size: auto; border: 0; padding: calc(var(--space-small) / 2) 0;
  font-size: var(--text-small); font-weight: 400; text-decoration: underline;
}
.theme-toggle {
  --button-fg: var(--muted);
  flex-shrink: 0; inline-size: var(--control-size); block-size: var(--control-size);
  border-radius: 50%; padding: var(--space-small);

  &:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
  & svg { inline-size: calc(1.25 * var(--icon-size)); block-size: calc(1.25 * var(--icon-size)); }
  & .theme-sun { display: none; }
  &[aria-checked="true"] {
    & .theme-moon { display: none; }
    & .theme-sun { display: block; }
  }
}

[data-status], .rsvp-fields button[value="maybe"] {
  --status-bg: light-dark(color-mix(in oklab, var(--status-color) 6%, var(--bg)), color-mix(in oklab, var(--status-color) 12%, var(--bg)));
  --status-line: color-mix(in oklab, var(--status-color) 30%, var(--bg));
}
[data-status="confirmed"] { --status-color: light-dark(#426936, var(--electric)); }
[data-status="maybe"], .rsvp-fields button[value="maybe"] { --status-color: light-dark(#806018, #ffc83d); }
[data-status="cancelled"] { --status-color: light-dark(#984950, #ff6484); }

.rsvp-fields {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end; gap: var(--space-medium);

  & label { margin-block-start: 0; }
  & button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-small); white-space: nowrap;

    &[value="maybe"] {
      --button-bg: var(--status-bg);
      --button-fg: var(--status-color);
      --button-border: var(--status-line);
    }
  }
  @media (width <= 28.75rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    & > div { grid-column: 1 / -1; }
  }
}
.status-message {
  color: var(--accent); font-size: var(--text-small);
  &:empty { margin: 0; }
}
.attendee-count { margin-block-start: var(--space-large); color: var(--muted); font-size: var(--text-small); }

dialog {
  --dialog-width: 25rem;
  inline-size: min(100% - 2 * var(--space-large), var(--dialog-width));
  border: var(--border); border-radius: var(--radius);
  padding: calc(2 * var(--space-medium)); background: var(--bg); color: var(--fg); overflow-wrap: anywhere;

  &::backdrop { background: #0008; }
  & form {
    display: flex; flex-wrap: wrap; justify-content: flex-end;
    gap: var(--space-medium); margin-block-start: calc(2 * var(--space-medium));
  }
}
.wide { inline-size: 100%; margin-block-start: calc(var(--space-large) + var(--space-small) / 2); }

.event-list, .guest-list { margin: 0; padding: 0; list-style: none; }
.event-list {
  & a {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: var(--space-small) calc(var(--space-large) + var(--space-small) / 2); padding-block: calc(var(--space-large) + var(--space-small) / 2);
    text-decoration: none; overflow-wrap: anywhere;

    &:hover { color: var(--accent); }
  }
  & time { color: var(--muted); font-size: var(--text-small); }
}
.host-divider {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-medium);
  margin-block: calc(2 * var(--space-large)) var(--space-medium); padding-block-start: calc(var(--space-large) + var(--space-small) / 2);
  & h2 { grid-column: 2; margin: 0; }
  & a { justify-self: end; }
}
.guest-list {
  --avatar-size: 4rem;
  --guest-column-width: calc(4 * var(--avatar-size));
  columns: var(--guest-column-width) 2;
  column-gap: var(--space-medium);

  & li[data-status] {
    break-inside: avoid;
    margin-block-end: var(--space-medium);
    display: grid; grid-template-columns: var(--avatar-size) minmax(0, 1fr);
    align-items: center; gap: var(--space-medium); min-inline-size: 0;
    border: var(--border-width) solid var(--status-line); border-radius: calc(4 * var(--radius) / 3);
    padding: var(--space-large); background: var(--status-bg);

    &:has(.guest-actions:not(:empty)) { grid-template-rows: minmax(var(--avatar-size), 1fr) auto; }
    &[data-status="cancelled"] .guest-name { color: var(--muted); text-decoration: line-through; }
  }
  & li > svg { inline-size: var(--avatar-size); block-size: auto; aspect-ratio: 1; border-radius: var(--radius); }
  & rect[fill="#e0eee766"] { fill: light-dark(#e0eee766, #8bd6b133); }
  & rect[fill="#f6e9d866"] { fill: light-dark(#f6e9d866, #e9c48933); }
  & rect[fill="#e8e0f266"] { fill: light-dark(#e8e0f266, #b69ade33); }
  & rect[fill="#dceaf466"] { fill: light-dark(#dceaf466, #8fbadd33); }
  & rect[fill="#f3dfe566"] { fill: light-dark(#f3dfe566, #dfa5b833); }
  & .guest-details { min-inline-size: 0; overflow-wrap: anywhere; }
  & .guest-name { display: block; font-weight: 600; }
  & .guest-status {
    display: inline-flex; align-items: center; gap: calc(var(--space-small) / 2);
    margin-block-start: calc(var(--space-small) / 2); color: var(--status-color); font-size: var(--text-caption);
  }
  & .guest-actions {
    display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center; gap: var(--space-medium);
    border-block-start: var(--border-width) solid var(--status-line); padding-block-start: var(--space-small);

    &:empty { display: none; }
    & form { display: contents; }
    & form[action$="/cancel"] button { grid-column: 2; }
  }
  & .text-button {
    --button-fg: var(--status-color);
    display: inline-flex; align-items: center; justify-self: start; gap: calc(var(--space-small) / 2);
    text-decoration: none; white-space: nowrap;
  }
}
.status-icon { display: inline-block; flex-shrink: 0; inline-size: var(--icon-size); block-size: var(--icon-size); }

.share-event {
  --qr-size: clamp(9rem, 40vw, 12rem);
  display: grid; grid-template-columns: var(--qr-size) minmax(0, max-content);
  justify-content: center; align-items: center; gap: var(--space-large); text-align: center;

  & .share-details { grid-column: 2; grid-row: 1; min-inline-size: 0; }
  & .share-actions {
    display: flex; flex-direction: column; gap: var(--space-medium);
  }
  & .event-qr { grid-column: 1; grid-row: 1; display: block; inline-size: var(--qr-size); block-size: auto; aspect-ratio: 1; border-radius: var(--radius); }
}
.honeypot { position: absolute; inset-inline-start: -100vw; inline-size: var(--border-width); block-size: var(--border-width); overflow: hidden; }

.map-pin {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 2px var(--accent);
  pointer-events: none;
}
.maplibregl-ctrl-attrib { font-family: inherit; font-size: 10px; }

.metro-stations {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
}
.metro-station, .metro-lines { display: inline-flex; align-items: center; gap: .25rem; }
.metro-station { gap: .4rem; white-space: nowrap; }
.metro-lines img { inline-size: 1.25rem; block-size: 1.25rem; }
.metro-separator { color: var(--muted); }

.metro-logo { inline-size: 1.375rem; block-size: 1.375rem; flex-shrink: 0; }

textarea { resize: vertical; }
.optional { color: var(--muted); font-weight: 400; }
.signup-contribution { margin-block-start: var(--space-large); }
summary { cursor: pointer; color: var(--accent); font-size: var(--text-small); }
.guest-contribution, .edit-contribution {
  grid-column: 1 / -1; min-inline-size: 0; overflow-wrap: anywhere;
  & p { margin: 0; white-space: pre-wrap; font-size: var(--text-small); }
  & img { display: block; inline-size: 100%; max-block-size: 14rem; object-fit: contain; border-radius: var(--radius); margin-block-start: var(--space-small); }
}
.edit-contribution {
  & form { display: block; }
  & button { margin-block-start: var(--space-medium); inline-size: 100%; }
  & .remove-photo { display: flex; align-items: center; gap: var(--space-small); }
}

}