/* ============================================================
   style.css — token classes used by the design system.
   ------------------------------------------------------------
   This file consumes only the variables declared in theme.css
   and turns them into the named tokens (.btn, .card, .form-input,
   .stack-*, etc.) that templates reference.

   Atoms render raw HTML; their `class` attributes always point
   at one of these token classes. To restyle the app, edit
   theme.css (variables) — touching this file should only be
   necessary when adding new tokens for new components.
   ============================================================ */

@import url("./theme.css");

/* ── Reset-ish baseline ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--color-fg);
  background: var(--color-page);
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ── Layout primitives ────────────────────────────────────── */
.page           { max-width: 72rem; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.page-narrow    { max-width: 28rem; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.page-full      { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }

.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

.row            { display: flex; align-items: center; gap: var(--space-4); }
.row-between    { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.row-baseline   { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.row-tight      { display: flex; align-items: center; gap: var(--space-2); }
.cluster        { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.grid-form      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
@media (max-width: 640px) { .grid-form { grid-template-columns: 1fr; } }

.text-center    { text-align: center; }
.text-right     { text-align: right; }

/* ── Typography ───────────────────────────────────────────── */
/* Headings borrow the relaxed `--font-display` serif (Fraunces).
   The "soft" axis tweak (variation-settings) tilts the variable
   font toward its rounder, more humanist instance. */
.heading-xl     { font-family: var(--font-display); font-size: 2rem;    font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin: 0; font-variation-settings: "SOFT" 100, "opsz" 96; }
.heading-lg     { font-family: var(--font-display); font-size: 1.5rem;  font-weight: 600; line-height: 1.2;  letter-spacing: -0.005em; margin: 0; font-variation-settings: "SOFT" 100, "opsz" 36; }
.heading-md     { font-family: var(--font-display); font-size: 1.2rem;  font-weight: 600; margin: 0; font-variation-settings: "SOFT" 100, "opsz" 18; }
.heading-display{ font-family: var(--font-display); font-size: 3.75rem; font-weight: 700; color: var(--color-fg-subtle); margin: 0; line-height: 1.05; font-variation-settings: "SOFT" 100, "opsz" 144; }

.text           { font-size: 0.9375rem; margin: 0; }
.text-sm        { font-size: 0.875rem; margin: 0; }
.text-xs        { font-size: 0.75rem;  margin: 0; }

.text-muted     { color: var(--color-fg-muted); }
.text-subtle    { color: var(--color-fg-subtle); }
.text-danger    { color: var(--color-danger-fg); }
.text-mono      { font-family: var(--font-mono); }
.text-italic    { font-style: italic; }
.text-prewrap   { white-space: pre-wrap; }

/* Inline SVG icons: size with the surrounding text, recolour with `color`. */
.icon           { width: 1em; height: 1em; flex-shrink: 0; color: var(--color-fg-muted); }
.icon-row       { display: flex; align-items: flex-start; gap: var(--space-2); }
.icon-row > .icon { margin-top: 0.2em; }

/* ── Danger zone (destructive actions on settings surfaces) ── */
.danger-zone     { border: 1px solid var(--color-danger, #b3261e);
                   border-radius: var(--radius);
                   padding: var(--space-4);
                   background: color-mix(in srgb, var(--color-danger, #b3261e) 6%, var(--color-surface)); }
.danger-zone h2  { color: var(--color-danger, #b3261e); }

/* ── Multi-select autocomplete (event join "who are you") ──────────
   The field is a single bordered "chip input" that contains both the
   selected chips and the typing input, side-by-side. The input has no
   border of its own — the parent supplies it — and `flex: 1` so it
   stretches to fill remaining row space. The .multi-field is
   `display: none` by default and revealed by JS adding `.is-active`
   on the container; the .multi-fallback fieldset is the inverse, so
   no-JS users see the checkbox list instead. */
.multi-field    { display: none; flex-wrap: wrap; align-items: center;
                  gap: var(--space-2);
                  padding: var(--space-2);
                  border: 1px solid var(--color-border-strong);
                  border-radius: var(--radius);
                  background: var(--color-surface); }
.multi-field:focus-within { border-color: var(--color-primary);
                            box-shadow: 0 0 0 1px var(--color-primary); }
.multi-autocomplete.is-active .multi-field    { display: flex; }
.multi-autocomplete.is-active .multi-fallback { display: none; }

.multi-chips    { display: contents; }
.multi-chip     { display: inline-flex; align-items: center; gap: var(--space-1);
                  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
                  background: var(--color-surface-muted);
                  border: 1px solid var(--color-border);
                  border-radius: 999px;
                  font-size: 0.875rem; line-height: 1.25; }
.multi-chip-remove { background: transparent; border: 0; color: var(--color-fg-muted);
                     cursor: pointer;
                     padding: 0 var(--space-1);
                     font-size: 1.125rem; line-height: 1; }
.multi-chip-remove:hover { color: var(--color-danger); }
.multi-input    { flex: 1; min-width: 8rem;
                  padding: var(--space-1) var(--space-2);
                  border: 0; outline: none; background: transparent;
                  color: var(--color-fg); font: inherit; }
.multi-input:focus { outline: none; }
.multi-fallback { border: 0; padding: 0; margin: 0; }
.multi-fallback legend { padding: 0; margin-bottom: var(--space-2); }

/* ── Tabs (URL-based navigation, one tab per server-rendered page) ── */
.tabs           { display: flex; flex-wrap: wrap; gap: var(--space-1);
                  border-bottom: 1px solid var(--color-border); }
.tab            { display: inline-block; padding: var(--space-2) var(--space-4);
                  color: var(--color-fg-muted); text-decoration: none;
                  border-bottom: 2px solid transparent;
                  margin-bottom: -1px; /* overlap the nav border so the active underline replaces it */ }
.tab:hover      { color: var(--color-fg); }
.tab-active     { color: var(--color-fg); border-bottom-color: var(--color-primary); font-weight: 500; }

/* ── Surfaces ─────────────────────────────────────────────── */
.card           { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.card-flush     { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.card-compact   { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }

.divider        { border: 0; height: 1px; background: var(--color-border); margin: 0; }
.divider-text   { display: flex; align-items: center; gap: var(--space-3); color: var(--color-fg-subtle); font-size: 0.75rem; text-align: center; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn            { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
                  padding: var(--space-2) var(--space-4); border-radius: var(--radius); border: 1px solid transparent;
                  font-weight: 500; font-size: 0.9375rem; line-height: 1.25; transition: background-color 120ms, border-color 120ms; }
.btn:disabled   { opacity: 0.5; cursor: not-allowed; }

.btn-primary    { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

.btn-secondary  { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-muted); }

.btn-ghost      { background: transparent; color: var(--color-fg-muted); border: 0; padding: var(--space-1) var(--space-2); }
.btn-ghost:hover:not(:disabled) { color: var(--color-fg); }

.btn-danger     { background: transparent; color: var(--color-fg-muted); border: 0; padding: var(--space-1) var(--space-2); }
.btn-danger:hover:not(:disabled) { color: var(--color-danger); }

.btn-dashed     { background: var(--color-surface); color: var(--color-fg-subtle);
                  border: 1px dashed var(--color-border-strong); }
.btn-dashed:hover:not(:disabled) { background: var(--color-surface-muted); }

.btn-block      { width: 100%; }
.btn-sm         { padding: var(--space-1) var(--space-3); font-size: 0.8125rem; }

.btn-link       { background: transparent; border: 0; padding: 0; color: var(--color-primary); cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

.text-link      { color: var(--color-primary); }
.text-link:hover{ text-decoration: underline; }

/* ── Forms ────────────────────────────────────────────────── */
.form-field     { display: block; }
.form-label     { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-1); color: var(--color-fg); }
.form-input     { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong);
                  border-radius: var(--radius); background: var(--color-surface); }
.form-input:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary); }
.form-input-mono{ font-family: var(--font-mono); font-size: 0.8125rem; }
.form-error     { color: var(--color-danger-fg); font-size: 0.75rem; margin-top: var(--space-1); margin-bottom: 0; }

.form-actions   { display: flex; justify-content: flex-end; gap: var(--space-2); }
.form-inline    { display: inline; }

/* ── Nav ──────────────────────────────────────────────────── */
.nav            { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.nav-admin      { background: var(--color-surface-muted); border-bottom-color: var(--color-border-strong); }
.nav-admin .nav-brand { color: var(--color-fg-muted); }
.user-link      { color: inherit; text-decoration: none; }
.user-link:hover { color: inherit; text-decoration: underline; }
.aggregate-link { color: var(--color-primary); text-decoration: none; }
.aggregate-link:hover { text-decoration: underline; }
.aggregate-link-mono { font-family: var(--font-mono); font-size: 0.75rem; }
.sort-header    { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.sort-header:hover { color: var(--color-fg); }
.sort-asc, .sort-desc { color: var(--color-fg); }
.nav-inner      { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-4);
                  display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.nav-group      { display: flex; align-items: center; gap: var(--space-6); }
.nav-brand      { font-weight: 600; }
.nav-link       { color: var(--color-fg-subtle); font-size: 0.875rem; }
.nav-link:hover { color: var(--color-fg); }

/* ── Tables ───────────────────────────────────────────────── */
.table          { width: 100%; border-collapse: collapse; }
.table-th       { text-align: left; padding: var(--space-2) var(--space-3); font-size: 0.6875rem; font-weight: 600;
                  letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-fg-subtle);
                  background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); }
.table-td       { padding: var(--space-3); font-size: 0.875rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table-td:last-child, .table-th:last-child { padding-right: var(--space-4); }
.table-td:first-child, .table-th:first-child { padding-left: var(--space-4); }
.table tr:last-child .table-td { border-bottom: 0; }

/* ── Badges / status ──────────────────────────────────────── */
.badge          { display: inline-flex; align-items: center; gap: var(--space-1);
                  padding: var(--space-1) var(--space-2); border-radius: 999px;
                  font-size: 0.75rem; font-weight: 500; }
.badge-active   { color: var(--color-success); }
.badge-inactive { color: var(--color-fg-subtle); }
.badge-info     { color: var(--color-info-fg); background: var(--color-info-bg); }
.badge-success  { color: var(--color-success);    background: var(--color-success-bg); }
.badge-danger   { color: var(--color-danger-fg);  background: var(--color-danger-bg); }
.badge-warning  { color: var(--color-warning-fg); background: var(--color-warning-bg); }
/* "Waiting" is the low-emphasis state: muted text, no fill, so the
   colored states (coming / not coming / maybe) carry the eye. */
.badge-waiting  { color: var(--color-fg-subtle); }

.dot            { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }

.avatar         { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
                  border-radius: 999px; background: var(--color-border); font-size: 0.75rem; font-weight: 600; }
.avatar-img     { object-fit: cover; width: 6rem; height: 6rem; }

/* ── Alerts ───────────────────────────────────────────────── */
.alert          { padding: var(--space-3); border-radius: var(--radius); border: 1px solid transparent; font-size: 0.875rem; }
.alert-error    { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-fg); }
.alert-info     { background: var(--color-info-bg); color: var(--color-info-fg); }

/* ── Code block ───────────────────────────────────────────── */
.code-block     { font-family: var(--font-mono); font-size: 0.75rem;
                  background: var(--color-surface-muted); padding: var(--space-2);
                  border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all;
                  margin-top: var(--space-2); max-width: 40rem; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination     { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; }
.pagination-nav { display: flex; gap: var(--space-2); }

/* ── Disclosure ───────────────────────────────────────────── */
details summary { cursor: pointer; font-weight: 500; }

/* ── Action menu (no-JS row actions popover) ──────────────── */
/* A <details> whose <summary> is a kebab icon button; the body is
   an absolutely-positioned dropdown. No JS — it stays open until the
   trigger is clicked again. */
.action-menu          { position: relative; display: inline-block; }
.action-menu-trigger  { list-style: none; cursor: pointer; display: inline-flex;
                        align-items: center; justify-content: center;
                        width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm);
                        color: var(--color-fg-muted); font-weight: 700; line-height: 1;
                        user-select: none; }
.action-menu-trigger::-webkit-details-marker { display: none; }
.action-menu-trigger:hover    { background: var(--color-surface-muted); }
.action-menu[open] > .action-menu-trigger { background: var(--color-surface-muted); }
.action-menu-body     { position: absolute; right: 0; top: calc(100% + var(--space-1));
                        z-index: 20; min-width: 11rem; display: flex; flex-direction: column;
                        padding: var(--space-1); background: var(--color-surface);
                        border: 1px solid var(--color-border); border-radius: var(--radius);
                        box-shadow: var(--shadow); }
.action-menu-body form { margin: 0; }
.menu-item            { display: block; width: 100%; text-align: left; box-sizing: border-box;
                        padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm);
                        background: none; color: var(--color-fg); font: inherit;
                        cursor: pointer; text-decoration: none; white-space: nowrap; }
.menu-item:hover      { background: var(--color-surface-muted); }

/* ── Sheet (form modal / full-screen page) ───────────────── */
/* `.sheet-backdrop` covers the viewport; it's the click-target
   that "closes" the sheet by navigating back to the parent URL.
   `.sheet` sits centred on top. On mobile the sheet fills the
   whole viewport (no rounded corners, no dim backdrop because
   it doesn't help when the sheet is the only thing on screen).
   On desktop (>= 640px) the sheet shrinks to a card with a
   tinted backdrop showing the parent page below. */
.sheet-backdrop { position: fixed; inset: 0;
                  background: var(--color-page);
                  display: flex; align-items: stretch; justify-content: stretch;
                  z-index: 100; overflow-y: auto; }
.sheet          { background: var(--color-surface);
                  width: 100%; max-width: 100%;
                  padding: var(--space-6) var(--space-4) var(--space-12);
                  display: flex; flex-direction: column; gap: var(--space-4); }
.sheet-header   { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sheet-close    { color: var(--color-fg-muted); font-size: 0.875rem; }
.sheet-close:hover { color: var(--color-fg); }

@media (min-width: 640px) {
  .sheet-backdrop { background: rgba(80, 50, 30, 0.35);
                    align-items: flex-start; justify-content: center;
                    padding: var(--space-12) var(--space-4); }
  .sheet        { max-width: 32rem; border-radius: var(--radius-lg);
                  border: 1px solid var(--color-border);
                  box-shadow: var(--shadow-lg);
                  padding: var(--space-6); }
}

/* ── Share dialog (shared <dialog> exposing the invite URL) ── */
dialog.share-dialog {
  padding: 0;
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: min(30rem, calc(100vw - 2 * var(--space-4)));
  width: 100%;
}
dialog.share-dialog::backdrop {
  background: rgba(80, 50, 30, 0.45);
}
.share-dialog-form { padding: var(--space-6); }
.share-dialog-url {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  width: 100%;
}
.share-dialog-actions { justify-content: flex-end; }

/* ── Notification (ephemeral in-page banner) ────────────────────── */
/* Top-right card that slides in when JS adds `.notification-visible`
   and back out on dismiss or timeout. Variants colour the left border
   and the icon; the rest of the card stays neutral so the message is
   readable. */
.notification {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 18rem;
  max-width: min(28rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.notification.notification-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.notification[hidden] { display: none; }

.notification-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notification-icon svg { width: 100%; height: 100%; }
.notification-message {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.4;
  word-break: break-word;
}
.notification-close {
  background: transparent;
  border: 0;
  color: var(--color-fg-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 var(--space-1);
}
.notification-close:hover { color: var(--color-fg); }

.notification-info    { border-left-color: var(--color-primary); }
.notification-info    .notification-icon { color: var(--color-primary); }
.notification-success { border-left-color: var(--color-success); }
.notification-success .notification-icon { color: var(--color-success); }
.notification-warn    { border-left-color: var(--color-warning-fg); }
.notification-warn    .notification-icon { color: var(--color-warning-fg); }
.notification-error   { border-left-color: var(--color-danger); }
.notification-error   .notification-icon { color: var(--color-danger); }

/* ── Confirm dialog (shared <dialog> for destructive-action confirms) ── */
/* Native <dialog>: hidden by default, centred when opened via showModal().
   `::backdrop` is the dim overlay. We mirror the sheet card on desktop
   and fall back to a near-full-width sheet on mobile so the dialog is
   reachable with a thumb. */
dialog.confirm-dialog {
  padding: 0;
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: min(28rem, calc(100vw - 2 * var(--space-4)));
  width: 100%;
}
dialog.confirm-dialog::backdrop {
  background: rgba(80, 50, 30, 0.45);
}
.confirm-dialog-form {
  padding: var(--space-6);
}
.confirm-dialog-body {
  color: var(--color-fg-muted);
}
.confirm-dialog-actions {
  justify-content: flex-end;
}

/* ── Disabled state used by interactive look-alikes ──────── */
.is-disabled    { opacity: 0.5; pointer-events: none; }

/* ── Demo page utilities ─────────────────────────────────── */
.demo-section       { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.demo-section:last-child { border-bottom: 0; }
.demo-row           { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; }
.demo-label         { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fg-subtle);
                      font-weight: 600; min-width: 8rem; }