@layer reset, tokens, document, components, views;
/* reset.css */
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  dl,
  dd {
    margin: 0;
  }
  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }
  button,
  input,
  select,
  textarea {
    font: inherit;
  }
  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }
}
/* tokens.css */
@layer tokens {
  :root[data-theme="light"] {
    color-scheme: light;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  :root {
    color-scheme: light dark;

    /* Palette scales ("Gartenfest", docs/design.md). Components use the
       semantic tokens below, not these. */
    --palette-brand-50: oklch(0.975 0.012 300);
    --palette-brand-100: oklch(0.945 0.026 300);
    --palette-brand-200: oklch(0.895 0.045 300);
    --palette-brand-300: oklch(0.815 0.07 300);
    --palette-brand-400: oklch(0.72 0.09 300);
    --palette-brand-600: oklch(0.545 0.11 300);
    --palette-brand-700: oklch(0.47 0.1 300);
    --palette-brand-800: oklch(0.39 0.082 300);
    --palette-brand-900: oklch(0.31 0.062 300);
    --palette-brand-950: oklch(0.22 0.042 300);
    --palette-linen-50: oklch(0.985 0.004 60);
    --palette-linen-100: oklch(0.965 0.006 60);
    --palette-linen-200: oklch(0.92 0.008 55);
    --palette-linen-300: oklch(0.86 0.01 50);
    --palette-linen-400: oklch(0.72 0.012 45);
    --palette-linen-600: oklch(0.47 0.012 35);
    --palette-linen-700: oklch(0.38 0.012 30);
    --palette-linen-800: oklch(0.28 0.012 30);
    --palette-linen-900: oklch(0.21 0.01 30);
    --palette-linen-950: oklch(0.16 0.008 30);
    --palette-linen-975: oklch(0.13 0.006 30);
    --palette-sage-50: oklch(0.97 0.018 150);
    --palette-sage-100: oklch(0.935 0.035 150);
    --palette-sage-400: oklch(0.7 0.085 150);
    --palette-sage-500: oklch(0.6 0.09 150);
    --palette-sage-700: oklch(0.43 0.07 150);
    --palette-sage-800: oklch(0.35 0.055 150);
    --palette-sage-900: oklch(0.27 0.04 150);
    --palette-honey-50: oklch(0.975 0.025 85);
    --palette-honey-100: oklch(0.945 0.055 85);
    --palette-honey-400: oklch(0.8 0.13 80);
    --palette-honey-500: oklch(0.72 0.14 75);
    --palette-honey-800: oklch(0.4 0.08 65);
    --palette-honey-900: oklch(0.3 0.06 65);
    --palette-red-50: oklch(0.97 0.018 25);
    --palette-red-200: oklch(0.88 0.08 25);
    --palette-red-300: oklch(0.8 0.12 25);
    --palette-red-600: oklch(0.55 0.2 25);
    --palette-red-700: oklch(0.48 0.18 25);
    --palette-red-900: oklch(0.3 0.1 25);
    --palette-red-950: oklch(0.22 0.07 25);

    --font-body:
      "Figtree", "Figtree Fallback", system-ui, -apple-system, sans-serif;
    --font-display: "Young Serif", "Young Serif Fallback", Georgia, serif;

    /* The page, and the white cards on it. */
    --color-background: light-dark(
      var(--palette-linen-50),
      var(--palette-linen-950)
    );
    --color-raised: light-dark(#fff, var(--palette-linen-900));
    /* The app shell's sidebar, a shade off the page panel beside it. */
    --color-sidebar: light-dark(
      var(--palette-linen-100),
      var(--palette-linen-975)
    );
    --color-sidebar-hover: light-dark(
      var(--palette-linen-200),
      var(--palette-linen-900)
    );
    /* Quiet fills: hover, table bands, tracks. */
    --color-surface: light-dark(
      var(--palette-linen-100),
      var(--palette-linen-800)
    );
    /* Inputs sit on cards and are a shade off them. */
    --color-field: light-dark(
      var(--palette-linen-50),
      var(--palette-linen-950)
    );
    --color-text: light-dark(
      var(--palette-linen-900),
      var(--palette-linen-100)
    );
    --color-muted: light-dark(
      var(--palette-linen-600),
      var(--palette-linen-400)
    );
    /* Soft dividers and card outlines; they never identify a control alone. */
    --color-border: light-dark(
      var(--palette-linen-200),
      var(--palette-linen-800)
    );
    /* Outlines that identify controls need 3:1 against background, cards, and
       fields (WCAG 1.4.11). */
    --color-border-control: light-dark(
      oklch(0.64 0.012 42),
      oklch(0.55 0.012 40)
    );

    /* Links, accent text, current state. */
    --color-accent: light-dark(
      var(--palette-brand-700),
      var(--palette-brand-300)
    );
    --color-accent-hover: light-dark(
      var(--palette-brand-800),
      var(--palette-brand-200)
    );
    /* The primary button's fill. */
    --color-accent-fill: light-dark(
      var(--palette-brand-600),
      var(--palette-brand-400)
    );
    --color-accent-fill-hover: light-dark(
      var(--palette-brand-700),
      var(--palette-brand-300)
    );
    --color-on-accent: light-dark(#fff, var(--palette-brand-950));
    --color-accent-background: light-dark(
      var(--palette-brand-50),
      var(--palette-brand-950)
    );
    /* Chips and avatars in the accent. */
    --color-accent-soft: light-dark(
      var(--palette-brand-100),
      var(--palette-brand-900)
    );
    --color-on-accent-soft: light-dark(
      var(--palette-brand-800),
      var(--palette-brand-200)
    );

    /* Avatar variants besides the accent one (sage and honey). */
    --color-avatar-sage: light-dark(
      var(--palette-sage-800),
      var(--palette-sage-100)
    );
    --color-avatar-sage-background: light-dark(
      var(--palette-sage-100),
      var(--palette-sage-900)
    );
    --color-avatar-honey: light-dark(
      var(--palette-honey-800),
      var(--palette-honey-100)
    );
    --color-avatar-honey-background: light-dark(
      var(--palette-honey-100),
      var(--palette-honey-900)
    );

    /* A finished step: a sage disc with a check. */
    --color-step-done: light-dark(
      var(--palette-sage-500),
      var(--palette-sage-400)
    );
    --color-on-step-done: light-dark(#fff, var(--palette-sage-900));

    /* Focus: an outline (3:1 on its own) inside a soft halo. */
    --color-focus: light-dark(
      var(--palette-brand-600),
      var(--palette-brand-300)
    );
    --color-focus-halo: light-dark(
      var(--palette-brand-200),
      var(--palette-brand-800)
    );

    /* Red is for errors and destructive actions only. */
    --color-danger: light-dark(var(--palette-red-700), var(--palette-red-200));
    --color-danger-border: light-dark(
      var(--palette-red-600),
      var(--palette-red-300)
    );
    /* Outlines places for destructive actions without outshouting the page;
       the buttons inside carry the contrast. */
    --color-danger-zone-border: light-dark(
      var(--palette-red-200),
      var(--palette-red-900)
    );
    --color-danger-hover: light-dark(
      var(--palette-red-50),
      var(--palette-red-950)
    );
    --color-danger-halo: light-dark(
      var(--palette-red-200),
      var(--palette-red-900)
    );
    --color-on-danger: light-dark(#fff, var(--palette-red-950));
    --color-error: var(--color-danger);
    --color-error-background: light-dark(
      var(--palette-red-50),
      var(--palette-red-950)
    );

    --color-success: light-dark(
      var(--palette-sage-800),
      var(--palette-sage-100)
    );
    --color-success-background: light-dark(
      var(--palette-sage-50),
      var(--palette-sage-900)
    );

    /* Friendly nudges that never block (honey). */
    --color-warning: light-dark(
      var(--palette-honey-900),
      var(--palette-honey-50)
    );
    --color-warning-muted: light-dark(
      var(--palette-honey-800),
      var(--palette-honey-100)
    );
    --color-warning-background: light-dark(
      var(--palette-honey-50),
      color-mix(
        in oklch,
        var(--palette-honey-900) 40%,
        var(--palette-linen-950)
      )
    );
    --color-warning-chip: light-dark(
      var(--palette-honey-100),
      var(--palette-honey-800)
    );

    /* A guest's reply: background and text per answer, plus a mark for dots
       and strokes. A "no" is calm grey, not an error; no answer is dashed. */
    --color-reply-attending-background: light-dark(
      var(--palette-sage-100),
      var(--palette-sage-900)
    );
    --color-reply-attending: light-dark(
      var(--palette-sage-800),
      var(--palette-sage-100)
    );
    --color-reply-attending-mark: light-dark(
      var(--palette-sage-500),
      var(--palette-sage-400)
    );
    --color-reply-maybe-background: light-dark(
      var(--palette-honey-100),
      var(--palette-honey-900)
    );
    --color-reply-maybe: light-dark(
      var(--palette-honey-800),
      var(--palette-honey-100)
    );
    --color-reply-maybe-mark: light-dark(
      oklch(0.62 0.12 75),
      var(--palette-honey-400)
    );
    --color-reply-declined-background: light-dark(
      var(--palette-linen-200),
      var(--palette-linen-800)
    );
    --color-reply-declined: light-dark(
      var(--palette-linen-700),
      var(--palette-linen-300)
    );
    --color-reply-declined-mark: var(--color-muted);
    --color-reply-open-background: transparent;
    --color-reply-open: var(--color-text);
    --color-reply-open-mark: var(--color-border-control);

    /* Toasts invert the scheme. */
    --color-toast-background: light-dark(
      var(--palette-linen-900),
      var(--palette-linen-100)
    );
    --color-toast: light-dark(
      var(--palette-linen-50),
      var(--palette-linen-900)
    );
    --color-toast-success: light-dark(
      var(--palette-sage-400),
      var(--palette-sage-700)
    );
    --color-toast-error: light-dark(
      var(--palette-red-300),
      var(--palette-red-700)
    );

    /* Categorical chart colors, each at least 3:1 against background, cards,
       and surface in both schemes (WCAG 1.4.11). Legends carry the meaning in
       text. */
    --color-chart-0: light-dark(
      var(--palette-brand-600),
      var(--palette-brand-400)
    );
    --color-chart-1: light-dark(#c2410c, #fb923c);
    --color-chart-2: light-dark(#0f766e, #2dd4bf);
    --color-chart-3: light-dark(#a21caf, #e879f9);
    --color-chart-4: light-dark(#a16207, #facc15);
    --color-chart-5: light-dark(#2a62c9, #6ea0ff);
    --color-chart-6: light-dark(#be123c, #fb7185);
    --color-chart-7: light-dark(#4d7c0f, #a3e635);
    --color-chart-8: light-dark(#0e7490, #38bdf8);
    --color-chart-9: light-dark(#8a5a44, #d6a384);
    --color-chart-10: light-dark(#5b6472, #9ca3af);

    /* QR codes stay dark on light in both modes so that scanners read them. */
    --color-qr-foreground: light-dark(#000, #000);
    --color-qr-background: light-dark(#fff, #fff);
    --color-backdrop: light-dark(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.6));
    --color-shadow: light-dark(rgb(0 0 0 / 0.2), rgb(0 0 0 / 0.7));
    --shadow-overlay: 0 0.5rem 2rem var(--color-shadow);

    --radius: 0.5rem;
    --radius-small: 0.5rem;
    --radius-field: 1rem;
    --radius-card: 1.5rem;
    --radius-pill: 62.5rem;
    /* Minimum size of pointer targets: compact for a mouse, the size of a
       fingertip for touch. Both exceed WCAG 2.5.8's 1.5rem. */
    --size-target: 2.25rem;
    /* Height of the app shell's header: a target plus its padding and border. */
    --size-app-bar: calc(var(--size-target) + 1.0625rem);
  }
  @media (pointer: coarse) {
    :root {
      --size-target: 2.75rem;
    }
  }
}
/* document.css */
/* Figtree (body) and Young Serif (display), Latin subsets
   (internal/ui/vendor, OFL). The layout preloads the body font (FontPath). */
@font-face {
  font-family: "Figtree";
  src: url("/assets/vendor/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/vendor/figtree-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Young Serif";
  src: url("/assets/vendor/young-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Local fonts scaled to the web fonts' metrics, so swapping them in barely
   shifts the layout. Systems without them fall back to system-ui and
   generic serif. */
@font-face {
  font-family: "Figtree Fallback";
  src: local("Arial");
  size-adjust: 100.5%;
  ascent-override: 94.5%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Young Serif Fallback";
  src: local("Georgia");
  size-adjust: 115%;
  ascent-override: 91%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}

@layer document {
  html {
    font-family: var(--font-body);
    line-height: 1.5;
  }
  body {
    background: var(--color-background);
    color: var(--color-text);
  }
  a {
    color: var(--color-accent);
  }
  a:hover {
    color: var(--color-accent-hover);
  }
  h1,
  h2,
  h3,
  h4 {
    font-weight: 600;
  }
  :focus-visible {
    outline: 0.125rem solid var(--color-focus);
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.375rem var(--color-focus-halo);
  }
  [tabindex="-1"]:focus {
    outline: none;
  }
  main {
    padding: 1.5rem;
  }
  .document-footer {
    padding: 1rem 1.5rem;
    border-block-start: 0.0625rem solid var(--color-border);
  }
  .skip-link {
    position: absolute;
    inset-block-start: -10rem;
    inset-inline-start: 1rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: var(--color-raised);
  }
  .skip-link:focus {
    inset-block-start: 1rem;
  }
  .visually-hidden {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Print styles for every page. Components hide their own interactive
     parts in their stylesheets; other elements opt out with .no-print.
     Pages whose screen view prints badly get a dedicated print view
     (patterns/print-view.md). */
  @media print {
    :root {
      color-scheme: only light;
      --color-background: #fff;
      --color-text: #000;
      --color-muted: #333;
      --color-border: #666;
      --color-accent: #000;
      --color-raised: #fff;
    }
    body {
      background: #fff;
      color: #000;
      font-size: 11pt;
      line-height: 1.4;
    }
    main {
      padding: 0;
    }
    .no-print,
    .skip-link,
    dialog {
      display: none !important;
    }
    a {
      text-decoration: underline;
    }
    /* Links to other sites tell where they lead; app-internal links are
       meaningless on paper. */
    a[href^="http"]::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      overflow-wrap: anywhere;
    }
    :where(tr, li, figure, img) {
      break-inside: avoid;
    }
    :where(h1, h2, h3, caption) {
      break-after: avoid;
    }
    thead {
      display: table-header-group;
    }
  }
}
/* base-accordion.css */
@layer components {
.base-accordion {
  border-block-start: 0.0625rem solid var(--color-border);
}
.base-accordion__item {
  border-block-end: 0.0625rem solid var(--color-border);
}
.base-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: var(--size-target);
  padding: 0.75rem 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.base-accordion__summary::-webkit-details-marker {
  display: none;
}
.base-accordion__item[open] > .base-accordion__summary .base-icon {
  rotate: 180deg;
}
@media (prefers-reduced-motion: no-preference) {
  .base-accordion__summary .base-icon {
    transition: rotate 0.15s;
  }
}
.base-accordion__body {
  padding-block-end: 1rem;
}
}
/* base-action-form.css */
@layer components {
.base-action-form {
  display: inline-flex;
}
}
/* base-alert.css */
@layer components {
.base-alert {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-card);
}
/* Optical alignment of the icon with the first line of text. */
.base-alert > .base-icon {
  margin-block-start: 0.125rem;
}
.base-alert--info {
  background: var(--color-accent-background);
  color: var(--color-accent);
}
.base-alert--success {
  background: var(--color-success-background);
  color: var(--color-success);
}
.base-alert--warning {
  background: var(--color-warning-background);
  color: var(--color-warning-muted);
}
.base-alert--warning .base-alert__content {
  color: var(--color-warning);
}
.base-alert--error {
  border: 0.0625rem solid var(--color-danger-border);
  background: var(--color-error-background);
  color: var(--color-error);
}
.base-alert__content {
  display: grid;
  gap: 0.25rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.base-alert__title {
  font-weight: 600;
}
}
/* base-app-shell.css */
@layer components {
.base-app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-block-size: 100dvh;
  background: var(--color-sidebar);
}
.base-app-shell__sidebar {
  display: none;
}
.base-app-shell__inset {
  display: grid;
  grid-template-rows: auto 1fr;
  min-inline-size: 0;
  background: var(--color-background);
}
.base-app-shell__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: var(--size-app-bar);
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  border-block-end: 0.0625rem solid var(--color-border);
  background: var(--color-background);
}
.base-app-shell__divider {
  flex: none;
  inline-size: 0.0625rem;
  block-size: 1.25rem;
  background: var(--color-border);
}
.base-app-shell__bar .base-breadcrumbs {
  min-inline-size: 0;
}
.base-app-shell__toggle {
  display: none;
}
.base-app-shell__main {
  min-inline-size: 0;
}

.base-app-shell__brand {
  padding: 0.5rem 1rem;
  color: inherit;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 1.25rem;
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* The switcher's and the user's buttons span the sidebar and line their text
   up with the links'. */
.base-app-shell__switcher,
.base-app-shell__foot {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.base-app-shell__switcher {
  padding-block-end: 1rem;
  border-block-end: 0.0625rem solid var(--color-border);
}
.base-app-shell__foot {
  padding-block-start: 1rem;
  border-block-start: 0.0625rem solid var(--color-border);
}
:is(.base-app-shell__switcher, .base-app-shell__foot)
  > .base-button:not(.base-button--icon-only) {
  flex: 1;
  min-inline-size: 0;
  justify-content: start;
  padding-inline: 1rem;
  text-align: start;
  overflow-wrap: anywhere;
}
.base-app-shell__sheet {
  display: grid;
  gap: 1rem;
}

.base-app-shell__nav {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.base-app-shell__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-block-size: var(--size-target);
  padding: 0.25rem 1rem;
  border-radius: var(--radius-pill);
  color: inherit;
  text-decoration: none;
}
.base-app-shell__link:hover {
  background: var(--color-surface);
}
.base-app-shell__sidebar .base-app-shell__link:hover {
  background: var(--color-sidebar-hover);
}
.base-app-shell__link[aria-current="page"] {
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
  font-weight: 500;
}
.base-app-shell__badge {
  margin-inline-start: auto;
  padding: 0 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Narrow screens show the parent and the current page. */
@media (width < 48rem) {
  .base-app-shell__bar .base-breadcrumbs__item:nth-last-child(n + 3) {
    display: none;
  }
}

/* The sidebar, and the page in a panel inset from the window's edges. */
@media (width >= 48rem) {
  html:has(.base-app-shell) {
    --base-app-shell-inset: 0.5rem;
    --size-app-bar: calc(
      var(--size-target) + 1.0625rem + var(--base-app-shell-inset)
    );
  }
  .base-app-shell {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
  .base-app-shell--sidebar-hidden {
    grid-template-columns: minmax(0, 1fr);
  }
  .base-app-shell__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0.75rem;
  }
  .base-app-shell--sidebar-hidden .base-app-shell__sidebar {
    display: none;
  }
  .base-app-shell__nav-region {
    flex: 1;
  }
  .base-app-shell__inset {
    margin: var(--base-app-shell-inset);
    margin-inline-start: 0;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .base-app-shell--sidebar-hidden .base-app-shell__inset {
    margin-inline-start: var(--base-app-shell-inset);
  }
  .base-app-shell__bar {
    min-block-size: calc(var(--size-app-bar) - var(--base-app-shell-inset));
    border-start-start-radius: var(--radius-card);
    border-start-end-radius: var(--radius-card);
  }
  /* Qualified to win over .base-button, which comes later in the bundle. */
  .base-app-shell__bar .base-app-shell__menu {
    display: none;
  }
  .base-app-shell__toggle {
    display: block;
  }
}

/* The document stays the scroll container. Short viewports, such as zoomed
   ones, scroll everything instead of losing space to the bar. */
@media screen and (height >= 32rem) {
  html:has(.base-app-shell) {
    /* Keeps focused elements and anchor targets clear of the bar. */
    scroll-padding-block-start: calc(var(--size-app-bar) + 1rem);
  }
  .base-app-shell__bar {
    position: sticky;
    inset-block-start: 0;
    z-index: 3;
  }
  .base-app-shell__sidebar {
    position: sticky;
    inset-block-start: 0;
    align-self: start;
    block-size: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
/* While the bar sticks, ::after draws the panel's top edge with it and
   ::before covers the inset above it, so the page doesn't show through the
   gap or beside the rounded corners. */
@media screen and (height >= 32rem) and (width >= 48rem) {
  .base-app-shell__bar {
    inset-block-start: var(--base-app-shell-inset);
    isolation: isolate;
    border-block-end: 0;
    background: none;
  }
  .base-app-shell__bar::before,
  .base-app-shell__bar::after {
    content: "";
    position: absolute;
    z-index: -1;
  }
  .base-app-shell__bar::before {
    inset: calc(-1 * var(--base-app-shell-inset) - 0.0625rem) -0.0625rem auto;
    block-size: calc(var(--base-app-shell-inset) + var(--radius-card));
    background: var(--color-sidebar);
  }
  .base-app-shell__bar::after {
    inset: -0.0625rem -0.0625rem 0;
    border: 0.0625rem solid var(--color-border);
    border-start-start-radius: var(--radius-card);
    border-start-end-radius: var(--radius-card);
    background: var(--color-background);
  }
}
@media print {
  .base-app-shell__sidebar,
  .base-app-shell__bar {
    display: none;
  }
  .base-app-shell {
    display: block;
    background: none;
  }
  .base-app-shell__inset {
    display: block;
    margin: 0;
    border: 0;
  }
}
}
/* base-avatar.css */
@layer components {
.base-avatar {
  --avatar-size: 2.25rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--avatar-size);
  block-size: var(--avatar-size);
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.base-avatar--small {
  --avatar-size: 1.75rem;
  font-size: 0.75rem;
}
.base-avatar--tint-1 {
  background: var(--color-avatar-sage-background);
  color: var(--color-avatar-sage);
}
.base-avatar--tint-2 {
  background: var(--color-avatar-honey-background);
  color: var(--color-avatar-honey);
}
.base-avatar--placeholder,
.base-avatar--more {
  border: 0.125rem dashed var(--color-border-control);
  background: var(--color-raised);
  color: var(--color-muted);
}
.base-avatar--placeholder .base-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.base-avatar-group {
  display: inline-flex;
  flex: none;
}
.base-avatar-group > .base-avatar {
  /* A ring in the card color separates the overlapping avatars. */
  box-shadow: 0 0 0 0.125rem var(--color-raised);
}
.base-avatar-group > .base-avatar + .base-avatar {
  margin-inline-start: -0.375rem;
}

@media print {
  .base-avatar,
  .base-avatar-group {
    display: none;
  }
}
}
/* base-badge.css */
@layer components {
.base-badge {
  display: inline-block;
  /* Off the spacing scale so the badge fits within a line of text. */
  padding: 0.125rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
.base-badge--neutral {
  background: var(--color-surface);
  color: var(--color-text);
}
.base-badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}
.base-badge--success {
  background: var(--color-success-background);
  color: var(--color-success);
}
.base-badge--danger {
  background: var(--color-error-background);
  color: var(--color-error);
}
}
/* base-bar.css */
@layer components {
.base-bar__label {
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.base-bar__track {
  display: block;
  inline-size: 100%;
  block-size: 1rem;
  border: 0.0625rem solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  overflow: hidden;
}
/* The background-colored outline separates neighboring segments. */
.base-bar__segment {
  stroke: var(--color-raised);
  stroke-width: 0.125rem;
}
.base-bar__empty {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
}
.base-bar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.base-bar__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.base-bar__swatch {
  flex: none;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: 0.125rem;
}
.base-bar__value {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.base-bar__segment--0,
.base-bar__swatch--0 {
  fill: var(--color-chart-0);
  background: var(--color-chart-0);
}
.base-bar__segment--1,
.base-bar__swatch--1 {
  fill: var(--color-chart-1);
  background: var(--color-chart-1);
}
.base-bar__segment--2,
.base-bar__swatch--2 {
  fill: var(--color-chart-2);
  background: var(--color-chart-2);
}
.base-bar__segment--3,
.base-bar__swatch--3 {
  fill: var(--color-chart-3);
  background: var(--color-chart-3);
}
.base-bar__segment--4,
.base-bar__swatch--4 {
  fill: var(--color-chart-4);
  background: var(--color-chart-4);
}
.base-bar__segment--5,
.base-bar__swatch--5 {
  fill: var(--color-chart-5);
  background: var(--color-chart-5);
}
.base-bar__segment--6,
.base-bar__swatch--6 {
  fill: var(--color-chart-6);
  background: var(--color-chart-6);
}
.base-bar__segment--7,
.base-bar__swatch--7 {
  fill: var(--color-chart-7);
  background: var(--color-chart-7);
}
.base-bar__segment--8,
.base-bar__swatch--8 {
  fill: var(--color-chart-8);
  background: var(--color-chart-8);
}
.base-bar__segment--9,
.base-bar__swatch--9 {
  fill: var(--color-chart-9);
  background: var(--color-chart-9);
}
.base-bar__segment--10,
.base-bar__swatch--10 {
  fill: var(--color-chart-10);
  background: var(--color-chart-10);
}
.base-bar__segment--sage,
.base-bar__swatch--sage {
  fill: var(--color-reply-attending-mark);
  background: var(--color-reply-attending-mark);
}
.base-bar__segment--honey,
.base-bar__swatch--honey {
  fill: var(--color-reply-maybe-mark);
  background: var(--color-reply-maybe-mark);
}
.base-bar__segment--grey,
.base-bar__swatch--grey {
  fill: var(--color-reply-declined-mark);
  background: var(--color-reply-declined-mark);
}
.base-bar__segment--open {
  fill: none;
}
.base-bar__swatch--open {
  border: 0.125rem dashed var(--color-reply-open-mark);
}
}
/* base-breadcrumbs.css */
@layer components {
.base-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-muted);
  font-size: 0.875rem;
}
.base-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  overflow-wrap: anywhere;
}
/* The chevrons mark the links; an underline shows on hover. */
.base-breadcrumbs__item a {
  color: inherit;
  text-decoration: none;
}
.base-breadcrumbs__item a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
.base-breadcrumbs [aria-current="page"] {
  color: var(--color-text);
}
}
/* base-button.css */
@layer components {
.base-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: var(--size-target);
  padding: 0.25rem 1.25rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}
.base-button--primary {
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
}
.base-button--primary:hover {
  background: var(--color-accent-fill-hover);
  color: var(--color-on-accent);
}
.base-button--secondary {
  border-color: var(--color-border-control);
  background: var(--color-raised);
  color: var(--color-text);
}
.base-button--secondary:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
/* Destructive, but quiet until confirmed: red outline, not a red fill. */
.base-button--danger {
  border-color: var(--color-danger-border);
  background: transparent;
  color: var(--color-danger);
}
.base-button--danger:hover {
  background: var(--color-danger-hover);
  color: var(--color-danger);
}
.base-button--danger:focus-visible {
  box-shadow: 0 0 0 0.375rem var(--color-danger-halo);
}
.base-button--ghost {
  background: transparent;
  color: var(--color-text);
  padding-inline: 1rem;
}
.base-button--ghost:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.base-button:disabled,
.base-button[aria-disabled="true"] {
  border-color: transparent;
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: not-allowed;
}
/* The icon's own whitespace adds to the padding; less keeps the icon as far
   from the edge as a select's chevron. */
.base-button--icon-start {
  padding-inline-start: 1rem;
}
.base-button--icon-only {
  min-inline-size: var(--size-target);
  padding: 0.25rem;
}
/* Shown while a link waits for its htmx response, or a submit button for the
   response to the request it started (base-button.js). */
.base-button__indicator {
  display: none;
  flex: none;
  inline-size: 1em;
  block-size: 1em;
  border: 0.125rem solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
}
.base-button:is(.htmx-request, .base-button--submitting)
  .base-button__indicator {
  display: inline-block;
}
/* An icon-only button keeps its size: the indicator replaces the icon. */
.base-button--icon-only:is(.htmx-request, .base-button--submitting) .base-icon {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .base-button__indicator {
    animation: base-button-spin 0.8s linear infinite;
  }
}
@keyframes base-button-spin {
  to {
    rotate: 1turn;
  }
}
}
/* base-confirm.css */
@layer components {
.base-confirm {
  display: grid;
  gap: 1rem;
  overflow-wrap: anywhere;
}
/* As wide as a narrow page (PageWidthNarrow). */
.base-confirm--page {
  max-inline-size: 40rem;
}
.base-dialog .base-confirm {
  padding: 1.5rem;
}
.base-confirm__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
.base-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 0.75rem;
}
}
/* base-description-list.css */
@layer components {
.base-description-list {
  container-type: inline-size;
}
.base-description-list__list {
  display: grid;
}
.base-description-list__item {
  display: grid;
  gap: 0.25rem;
  padding-block: 0.75rem;
  border-block-end: 0.0625rem solid var(--color-border);
}
.base-description-list__term {
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.base-description-list__detail {
  overflow-wrap: anywhere;
}
@container (width >= 32rem) {
  .base-description-list__item {
    grid-template-columns: 12rem 1fr;
    gap: 1rem;
  }
}
}
/* base-dialog.css */
@layer components {
.base-dialog {
  inline-size: min(100% - 2rem, 32rem);
  max-block-size: min(100dvh - 2rem, 48rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
  /* Forced colors drop the shadow and show this outline instead. */
  outline: 0.0625rem solid transparent;
  /* Keeps focused content, such as an error summary, clear of the sticky
     header. */
  scroll-padding-block-start: 4rem;
}
.base-dialog::backdrop {
  background: var(--color-backdrop);
}
/* The page behind a modal dialog does not scroll. */
:root:has(.base-dialog:modal) {
  overflow: hidden;
}
.base-dialog--alert {
  inline-size: min(100% - 2rem, 28rem);
}
.base-dialog--sheet {
  inline-size: 100%;
  max-inline-size: none;
  max-block-size: 85dvh;
  margin: auto 0 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
@media (width >= 48rem) {
  .base-dialog--sheet {
    inline-size: min(100%, 32rem);
    block-size: 100dvh;
    max-block-size: none;
    margin: 0 0 0 auto;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
  }
}
.base-dialog__header {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border-block-end: 0.0625rem solid var(--color-border);
  background: var(--color-raised);
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
}
.base-dialog__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.base-dialog__body {
  padding: 1.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .base-dialog,
  .base-dialog::backdrop {
    transition:
      opacity 0.2s,
      translate 0.2s,
      display 0.2s allow-discrete,
      overlay 0.2s allow-discrete;
  }
  .base-dialog:not([open]),
  .base-dialog:not([open])::backdrop {
    opacity: 0;
  }
  @starting-style {
    .base-dialog[open],
    .base-dialog[open]::backdrop {
      opacity: 0;
    }
  }
  .base-dialog--sheet:not([open]) {
    translate: 0 100%;
  }
  @starting-style {
    .base-dialog--sheet[open] {
      translate: 0 100%;
    }
  }
  @media (width >= 48rem) {
    .base-dialog--sheet:not([open]) {
      translate: 100% 0;
    }
    @starting-style {
      .base-dialog--sheet[open] {
        translate: 100% 0;
      }
    }
  }
}
}
/* base-empty-state.css */
@layer components {
.base-empty-state {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  border: 0.125rem dashed var(--color-border-control);
  border-radius: var(--radius-card);
  text-align: center;
  overflow-wrap: anywhere;
}
.base-empty-state > .base-icon {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--color-muted);
}
.base-empty-state__title {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 1.5rem;
  line-height: 1.25;
}
.base-empty-state__text {
  max-inline-size: 32rem;
  color: var(--color-muted);
}
}
/* base-form-error-summary.css */
@layer components {
.base-form-error-summary {
  padding: 1.25rem 1.5rem;
  border: 0.0625rem solid var(--color-danger-border);
  border-radius: var(--radius-card);
  background: var(--color-error-background);
}
.base-form-error-summary:focus {
  outline: 0.125rem solid var(--color-accent);
  outline-offset: 0.25rem;
}
.base-form-error-summary__title {
  margin-block-end: 0.5em;
  font-size: 1.25rem;
  line-height: 1.3;
}
.base-form-error-summary__list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding-inline-start: 1.25rem;
  overflow-wrap: anywhere;
}
.base-form-error-summary__list a {
  color: var(--color-error);
  font-weight: 600;
}
}
/* base-form-field.css */
@layer components {
.base-form-field {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  overflow-wrap: anywhere;
}
.base-form-field--invalid {
  padding-inline-start: 1rem;
  border-inline-start: 0.25rem solid var(--color-error);
}
.base-form-field__label {
  font-weight: 500;
}
textarea.base-form-field__control {
  border-radius: var(--radius-field);
}
.base-form-field__group {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.base-form-field__group legend {
  padding: 0;
  margin-block-end: 0.25rem;
}
.base-form-field__hint {
  color: var(--color-muted);
}
.base-form-field__error {
  color: var(--color-error);
  font-weight: 600;
}
.base-form-field__control {
  inline-size: 100%;
  max-inline-size: 36rem;
  min-block-size: var(--size-target);
  padding: 0.25rem 1rem;
  border: 0.0625rem solid var(--color-border-control);
  border-radius: var(--radius-field);
  background: var(--color-field);
  color: inherit;
}
.base-form-field__control:focus {
  border-color: var(--color-focus);
  background: var(--color-raised);
}
.base-form-field__control::placeholder {
  color: var(--color-muted);
}
/* Browsers draw their own arrow flush with the edge; this chevron keeps the
   control's padding and matches menu buttons. */
.base-form-field__select {
  display: grid;
  align-items: center;
  max-inline-size: 36rem;
}
.base-form-field__select > * {
  grid-area: 1 / 1;
}
.base-form-field__select > .base-form-field__control {
  appearance: none;
  padding-inline-end: 2.5rem;
}
.base-form-field__select > .base-icon {
  justify-self: end;
  margin-inline-end: 0.75rem;
  pointer-events: none;
}
textarea.base-form-field__control {
  resize: vertical;
}
.base-form-field--invalid .base-form-field__control {
  border-color: var(--color-danger-border);
  background: var(--color-error-background);
}
.base-form-field--invalid .base-form-field__control:focus-visible {
  box-shadow: 0 0 0 0.375rem var(--color-danger-halo);
}
.base-form-field__choice {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.base-form-field__checkbox,
.base-form-field__radio {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  accent-color: var(--color-accent-fill);
}
.base-form-field__switch {
  flex: none;
  appearance: none;
  position: relative;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  margin: 0;
  border: 0.125rem solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
}
.base-form-field--invalid .base-form-field__switch:not(:checked) {
  border-color: var(--color-error);
}
.base-form-field__switch::before {
  content: "";
  position: absolute;
  inset-block: 0.125rem;
  inset-inline-start: 0.125rem;
  inline-size: 1rem;
  border-radius: 50%;
  background: var(--color-muted);
}
.base-form-field__switch:checked {
  border-color: var(--color-accent-fill);
  background: var(--color-accent-fill);
}
.base-form-field__switch:checked::before {
  /* The track's inline size minus its borders, the thumb's insets, and the
     thumb. */
  translate: 1.25rem 0;
  background: var(--color-on-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .base-form-field__switch::before {
    transition: translate 0.15s;
  }
}
.base-form-field__count {
  color: var(--color-muted);
}
.base-form-field__count--over {
  color: var(--color-error);
  font-weight: 600;
}
/* Forced colors would paint track and thumb alike, so the switch draws both
   states in system colors itself. */
@media (forced-colors: active) {
  .base-form-field__switch,
  .base-form-field__switch::before {
    forced-color-adjust: none;
  }
  .base-form-field__switch {
    border-color: CanvasText;
    background: Canvas;
  }
  .base-form-field__switch::before {
    background: CanvasText;
  }
  .base-form-field__switch:checked {
    border-color: Highlight;
    background: Highlight;
  }
  .base-form-field__switch:checked::before {
    background: HighlightText;
  }
  .base-form-field__switch:focus-visible {
    outline-color: CanvasText;
  }
}
}
/* base-form.css */
@layer components {
.base-form {
  display: grid;
  gap: 1.5rem;
}
.base-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
}
/* base-honeypot.css */
@layer components {
/* Off-screen rather than display: none, which bots that skip hidden fields
   would also skip. 0.0625rem is the smallest box that still counts as
   rendered. */
.base-honeypot {
  position: absolute;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
}
/* base-icon.css */
@layer components {
/* Icons scale with the surrounding text. */
.base-icon {
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
}
/* base-locale-switcher.css */
@layer components {
.base-locale-switcher {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
}
.base-locale-switcher__label {
  font-weight: 600;
}
.base-locale-switcher__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Browsers draw their own arrow flush with the edge; this chevron keeps the
   control's padding (see base-form-field). */
.base-locale-switcher__select {
  display: grid;
  align-items: center;
}
.base-locale-switcher__select > * {
  grid-area: 1 / 1;
}
.base-locale-switcher__select > .base-icon {
  justify-self: end;
  margin-inline-end: 0.75rem;
  pointer-events: none;
}
.base-locale-switcher__control {
  appearance: none;
  min-block-size: var(--size-target);
  padding: 0.25rem 2.5rem 0.25rem 1rem;
  border: 0.0625rem solid var(--color-border-control);
  border-radius: var(--radius-field);
  background: var(--color-field);
  color: inherit;
}
}
/* base-menu.css */
@layer components {
.base-menu {
  --base-popover-padding: 0.25rem;
  min-inline-size: 12rem;
}
.base-menu__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.base-menu__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--size-target);
  padding: 0.25rem 1rem;
  border: 0;
  /* Concentric with the popover's corners. */
  border-radius: calc(var(--radius-field) - var(--base-popover-padding));
  background: none;
  color: var(--color-text);
  text-align: start;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.base-menu__item:hover {
  background: var(--color-surface);
}
.base-menu__item--danger {
  color: var(--color-danger);
}
.base-menu__hint {
  color: var(--color-muted);
  font-size: 0.875em;
}
}
/* base-meter.css */
@layer components {
.base-meter__label {
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.base-meter__track {
  display: block;
  inline-size: 100%;
  block-size: 0.75rem;
  border: 0.0625rem solid var(--color-border-control);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  overflow: hidden;
}
.base-meter__fill {
  fill: var(--color-reply-attending-mark);
}
.base-meter--over .base-meter__fill {
  fill: var(--color-danger-border);
}
.base-meter__text {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.base-meter__over {
  margin-inline-start: 0.5em;
  color: var(--color-error);
}
}
/* base-page-header.css */
@layer components {
.base-page-header {
  display: grid;
  /* Tabs wider than the page scroll inside their own row. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  container-type: inline-size;
}
.base-page-header__row {
  display: grid;
  gap: 1rem;
  align-items: center;
  /* The title sits at the same place with or without actions. */
  min-block-size: var(--size-target);
}
.base-page-header__tabs {
  margin-block-start: 0.5rem;
}
.base-page-header__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.base-page-header__title {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.base-page-header__lead {
  margin-block-start: 0.25rem;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 1.5rem;
  line-height: 1.3;
}
.base-page-header__description {
  margin-block-start: 0.25rem;
  color: var(--color-muted);
}
.base-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@container (width >= 40rem) {
  .base-page-header__row {
    grid-template-columns: 1fr auto;
  }
}
@media print {
  .base-page-header__actions,
  .base-page-header__tabs {
    display: none;
  }
}
}
/* base-page.css */
@layer components {
.base-page {
  display: grid;
  gap: 1.5rem;
}
.base-page__content {
  display: grid;
  gap: 2rem;
  /* Grid items default to their content's width and would overflow. */
  min-inline-size: 0;
}
.base-page--narrow {
  max-inline-size: 40rem;
}
.base-page--medium {
  max-inline-size: 48rem;
}
}
/* base-pagination.css */
@layer components {
.base-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.base-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-inline-size: var(--size-target);
  min-block-size: var(--size-target);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-decoration: none;
}
.base-pagination__link[aria-disabled="true"] {
  color: var(--color-muted);
}
.base-pagination__link:is(a):hover {
  background: var(--color-surface);
}
.base-pagination__link[aria-current="page"] {
  background: var(--color-accent-background);
  color: var(--color-accent);
  font-weight: 500;
}
.base-pagination__gap {
  padding-inline: 0.5rem;
  color: var(--color-muted);
}
@media print {
  .base-pagination {
    display: none;
  }
}
}
/* base-popover.css */
@layer components {
/* Anchored to the button that opened it (the implicit anchor of
   popovertarget). */
.base-popover {
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block, flip-inline;
  max-inline-size: min(100vw - 2rem, 20rem);
  margin: 0.25rem 0;
  padding: var(--base-popover-padding, 1rem);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-field);
  background: var(--color-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-overlay);
}
/* Without anchor positioning (Safari 18), the margin above would push the
   popover into the viewport's corner; it is centered instead. Remove when all
   supported browsers have it (ADR 0010). */
@supports not (position-area: bottom) {
  .base-popover {
    margin: auto;
  }
}
}
/* base-qr-code.css */
@layer components {
.base-qr-code {
  display: block;
  inline-size: min(100%, 14rem);
  block-size: auto;
  aspect-ratio: 1;
  border: 0.0625rem solid var(--color-border);
}
.base-qr-code__background {
  fill: var(--color-qr-background);
}
.base-qr-code__modules {
  fill: var(--color-qr-foreground);
}
}
/* base-search.css */
@layer components {
.base-search {
  container-type: inline-size;
}
/* The search grows; filters follow it in the same row and wrap as a group.
   Controls share a baseline because labels are one line each. */
.base-search__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 0.75rem;
}
.base-search__field {
  display: grid;
  flex: 3 1 16rem;
  gap: 0.25rem;
}
.base-search__filter {
  flex: 1 1 10rem;
  max-inline-size: 16rem;
}
.base-search__filter .base-form-field {
  justify-items: stretch;
}
@container (max-inline-size: 30rem) {
  .base-search__filter {
    max-inline-size: none;
  }
}
.base-search__label {
  font-weight: 500;
}
/* The submit button sits inside the field's end, so it reads as part of it. */
.base-search__row {
  position: relative;
  display: flex;
}
/* Inset, so its hover background stays inside the field's border. */
.base-search__row > .base-button {
  position: absolute;
  inset-block: 0.25rem;
  inset-inline-end: 0.25rem;
  min-block-size: 0;
  min-inline-size: calc(var(--size-target) - 0.5rem);
  padding: 0.25rem;
}
.base-search__input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--size-target);
  padding-block: 0.25rem;
  padding-inline: 1rem var(--size-target);
  border: 0.0625rem solid var(--color-border-control);
  border-radius: var(--radius-field);
  background: var(--color-field);
  color: inherit;
}
.base-search__input:focus {
  border-color: var(--color-focus);
  background: var(--color-raised);
}
.base-search__state {
  display: contents;
}
@media print {
  .base-search {
    display: none;
  }
}
}
/* base-section.css */
@layer components {
.base-section {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.base-section--footer {
  grid-template-rows: auto 1fr auto;
}
.base-section--footer .base-section__content {
  align-content: start;
}
.base-section--box,
.base-section--accent,
.base-section--danger {
  padding: 1.5rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-raised);
}
.base-section--accent {
  border-color: transparent;
  background: var(--color-accent-background);
}
.base-section--danger {
  border-color: var(--color-danger-zone-border);
}
.base-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.base-section__text {
  flex: 1 1 16rem;
  min-inline-size: 0;
}
.base-section__title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.base-section--accent .base-section__title {
  color: var(--color-accent);
}
.base-section--nested .base-section__title {
  font-size: 1.125rem;
}
.base-section__description {
  margin-block-start: 0.25rem;
  color: var(--color-muted);
}
.base-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.base-section__content {
  display: grid;
  gap: 1rem;
  justify-items: start;
  min-inline-size: 0;
}
.base-section__footer {
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Tables, forms, and lists fill the width. */
.base-section__content
  > :is(
    .base-table,
    .base-form,
    .base-description-list,
    .base-stat-list,
    .base-search,
    .base-empty-state
  ) {
  justify-self: stretch;
}
@media print {
  .base-section__actions,
  .base-section__footer {
    display: none;
  }
}
}
/* base-stat-list.css */
@layer components {
.base-stat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.base-stat-list--compact {
  gap: 0.75rem 1rem;
}
.base-stat-list--compact .base-stat-list__value {
  font-size: 1.125rem;
}
.base-stat-list__item {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  min-inline-size: 0;
}
.base-stat-list__label {
  color: var(--color-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.base-stat-list__value {
  font-family: var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.base-stat-list__item--sage {
  --base-stat-list-mark: var(--color-reply-attending-mark);
}
.base-stat-list__item--honey {
  --base-stat-list-mark: var(--color-reply-maybe-mark);
}
.base-stat-list__item--grey {
  --base-stat-list-mark: var(--color-reply-declined-mark);
}
.base-stat-list__item--open {
  --base-stat-list-mark: var(--color-reply-open-mark);
}
.base-stat-list__item:is(
    .base-stat-list__item--sage,
    .base-stat-list__item--honey,
    .base-stat-list__item--grey
  )
  .base-stat-list__label::before,
.base-stat-list__item--open .base-stat-list__label::before {
  content: "";
  display: inline-block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-end: 0.5rem;
  border-radius: 50%;
  background: var(--base-stat-list-mark);
}
.base-stat-list__item--open .base-stat-list__label::before {
  background: transparent;
  border: 0.125rem solid var(--base-stat-list-mark);
}
}
/* base-steps.css */
@layer components {
.base-steps {
  --marker-size: 2rem;
  container-type: inline-size;
}
.base-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
}
.base-steps__step {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.5rem;
  text-align: center;
}
.base-steps__marker {
  display: grid;
  place-items: center;
  inline-size: var(--marker-size);
  block-size: var(--marker-size);
  border: 0.125rem solid var(--color-border-control);
  border-radius: 50%;
  font-size: 0.875rem;
}
.base-steps__step--done .base-steps__marker {
  border-color: var(--color-step-done);
  background: var(--color-step-done);
  color: var(--color-on-step-done);
}
.base-steps__step--current .base-steps__marker {
  border-color: var(--color-reply-maybe-mark);
  background: var(--color-warning-background);
}
.base-steps__step--current .base-steps__marker::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--color-reply-maybe-mark);
}
.base-steps__step--skipped .base-steps__marker {
  border-style: dashed;
}
.base-steps__text {
  display: grid;
  gap: 0.125rem;
  min-inline-size: 0;
}
.base-steps__label {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.base-steps__step--upcoming .base-steps__label,
.base-steps__step--skipped .base-steps__label {
  color: var(--color-muted);
}
.base-steps__note {
  color: var(--color-muted);
  font-size: 0.875rem;
}

/* Narrow: a vertical list, as four columns would squeeze the labels. */
@container (width < 28rem) {
  .base-steps__list {
    grid-auto-flow: row;
    gap: 0.75rem;
  }
  .base-steps__step {
    grid-template-columns: var(--marker-size) minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: 0.75rem;
    text-align: start;
  }
}
@media print {
  .base-steps__marker {
    border-style: solid;
    background: none;
    color: inherit;
  }
}
}
/* base-table-bar.css */
@layer components {
/* The card's border and background are drawn by ::after, so that ::before
   can fill the rounded corners with the page beneath them: rows scrolling
   under the sticky bar don't show beside its corners. */
.base-table-bar {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  /* The bar keeps its touch height with a mouse too, so it reads as the
     table's head. */
  min-block-size: 3.75rem;
  padding: 0.5rem 1rem;
  border: 0.0625rem solid transparent;
}
.base-table-bar::after {
  content: "";
  position: absolute;
  inset: -0.0625rem;
  z-index: -1;
  border: 0.0625rem solid var(--color-border);
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
  background: var(--color-raised);
}
/* The bar and the table read as one card. The bar draws the line between
   them, so the line stays while rows scroll under the sticky bar. */
.base-table-bar + .base-table {
  border-block-start: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.base-table-bar + .base-table thead tr:first-child > * {
  border-block-start: 0;
}
@media screen and (height >= 32rem) {
  .base-table-bar {
    position: sticky;
    inset-block-start: var(--size-app-bar);
    z-index: 2;
  }
  .base-table-bar::before {
    content: "";
    position: absolute;
    inset: -0.0625rem -0.0625rem auto;
    z-index: -1;
    block-size: var(--radius-card);
    background: var(--color-background);
  }
}
/* Where browsers tell when the bar is stuck, it keeps a gap below the app
   bar, and ::before covers the gap only then: before, it would cover the
   focus halos of the controls above. */
@supports (container-type: scroll-state) {
  @media screen and (height >= 32rem) {
    .base-table-bar {
      --base-table-bar-gap: 0.5rem;
      container-type: inline-size scroll-state;
      inset-block-start: calc(var(--size-app-bar) + var(--base-table-bar-gap));
    }
    @container scroll-state(stuck: top) {
      .base-table-bar::before {
        inset-block-start: calc(-1 * var(--base-table-bar-gap) - 0.0625rem);
        block-size: calc(var(--base-table-bar-gap) + var(--radius-card));
      }
    }
  }
}
.base-table-bar__summary {
  margin-inline-end: auto;
  color: var(--color-muted);
}
.base-table-bar__tools {
  margin-inline-start: auto;
}
.base-table-bar__bulk {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
/* Wide enough for three-digit counts, so the actions don't move while people
   select. */
.base-table-bar__status {
  min-inline-size: 7rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.base-table-bar__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.base-table-bar__all input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--color-accent-fill);
}
.base-table-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.base-table-bar__clear {
  margin-inline-start: auto;
}
@container (max-inline-size: 30rem) {
  .base-table-bar__bulk,
  .base-table-bar__actions {
    flex: 1 1 100%;
  }
  /* The clear button joins the status line instead of a line of its own. */
  .base-table-bar__bulk {
    position: relative;
  }
  .base-table-bar__status {
    display: flex;
    align-items: center;
    min-block-size: var(--size-target);
    padding-inline-end: var(--size-target);
  }
  .base-table-bar__clear {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }
  .base-table-bar__actions > * {
    flex: 1 1 auto;
  }
}
}
/* base-table.css */
@layer components {
/* The containing block for visually hidden labels, which would otherwise
   widen the page beyond the scroll container. */
.base-table {
  --base-table-select-size: 3rem;
  position: relative;
  container-type: inline-size;
  overflow-x: auto;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-raised);
}
.base-table__table {
  inline-size: 100%;
  border-collapse: collapse;
}
.base-table__caption {
  padding: 1rem;
  font-weight: 600;
  text-align: start;
}
.base-table__table :is(th, td) {
  padding: 0.25rem 1rem;
  border-block-start: 0.0625rem solid var(--color-border);
  background: var(--color-raised);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}
.base-table__table thead :is(th, td) {
  padding-block: 0.5rem;
}
/* Rows are as high with a control as without one. */
.base-table__table tbody tr {
  block-size: calc(var(--size-target) + 0.5rem);
}
.base-table__table tfoot :is(th, td) {
  border-block-start-width: 0.125rem;
  font-weight: 600;
}
.base-table__table tbody tr:hover > * {
  background: var(--color-surface);
}
.base-table__header {
  color: var(--color-muted);
  font-weight: 500;
}
.base-table__table th[scope="row"] {
  font-weight: normal;
}
/* Rows are lists of links: the column and the hover tell what is a link, and
   a row of accent underlines would compete with the data. */
.base-table__link {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}
.base-table__link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}
.base-table__header--numeric,
.base-table__cell--numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.base-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}
.base-table__sort:hover {
  text-decoration: underline;
}
.base-table__header:not([aria-sort]) .base-table__sort .base-icon {
  color: var(--color-muted);
}
/* The selection column and the row headers stay visible while the table
   scrolls sideways, once there is room: on narrow tables a long name would
   cover the other columns. */
.base-table__select {
  inline-size: var(--base-table-select-size);
  min-inline-size: var(--base-table-select-size);
}
@container (width >= 40rem) {
  .base-table__select,
  .base-table__table th[scope="row"],
  .base-table__table thead .base-table__header:first-child,
  .base-table__select + .base-table__header {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
  }
  .base-table__select + th[scope="row"],
  .base-table__select + .base-table__header {
    inset-inline-start: var(--base-table-select-size);
  }
}
/* Group headers are quiet bands: the label and count sit at the start of
   the first column, and stay in view while a wide table scrolls sideways. */
.base-table__table .base-table__group-row > * {
  border-block-start-width: 0.125rem;
  background: var(--color-surface);
}
.base-table__group-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  inline-size: fit-content;
  max-inline-size: calc(100cqi - 2rem);
  white-space: normal;
}
.base-table__select + .base-table__group-header .base-table__group-content {
  max-inline-size: calc(100cqi - var(--base-table-select-size) - 2rem);
}
.base-table__group-label {
  font-weight: 600;
}
.base-table__group-count {
  color: var(--color-muted);
  font-weight: normal;
}
@container (width >= 40rem) {
  .base-table__group-content {
    position: sticky;
    inset-inline-start: 1rem;
  }
  .base-table__select + .base-table__group-header .base-table__group-content {
    inset-inline-start: calc(var(--base-table-select-size) + 1rem);
  }
}
/* Block, so the line box's descender space does not lift it off center. */
.base-table__select input {
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--color-accent-fill);
}
/* Paper has no scrolling: let the table wrap and show every column. */
@media print {
  .base-table {
    overflow: visible;
    border: none;
  }
  .base-table__table :is(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .base-table__select,
  .base-table__sort .base-icon {
    display: none;
  }
}
}
/* base-tabs.css */
@layer components {
.base-tabs {
  overflow-x: auto;
  border-block-end: 0.0625rem solid var(--color-border);
}
.base-tabs__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.base-tabs__tab {
  display: block;
  padding: 0.75rem 1rem;
  border-block-end: 0.1875rem solid transparent;
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  color: var(--color-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.base-tabs__tab:hover {
  background: var(--color-surface);
  color: var(--color-text);
}
.base-tabs__tab[aria-current="page"] {
  border-color: var(--color-accent-fill);
  color: var(--color-accent);
}
/* Forced colors show transparent borders, which would underline every tab. */
@media (forced-colors: active) {
  .base-tabs__tab {
    border-block-end-color: Canvas;
  }
  .base-tabs__tab[aria-current="page"] {
    border-block-end-color: Highlight;
  }
}
}
/* base-tag.css */
@layer components {
.base-tag {
  --base-tag-color: var(--color-chart-10);
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.125rem 0.625rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-raised);
  font-size: 0.875rem;
  line-height: 1.5;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
.base-tag__dot {
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: 50%;
  background: var(--base-tag-color);
}
.base-tag--gray {
  --base-tag-color: var(--color-chart-10);
}
.base-tag--blue {
  --base-tag-color: var(--color-chart-0);
}
.base-tag--orange {
  --base-tag-color: var(--color-chart-1);
}
.base-tag--teal {
  --base-tag-color: var(--color-chart-2);
}
.base-tag--magenta {
  --base-tag-color: var(--color-chart-3);
}
.base-tag--yellow {
  --base-tag-color: var(--color-chart-4);
}
.base-tag--violet {
  --base-tag-color: var(--color-chart-5);
}
.base-tag--rose {
  --base-tag-color: var(--color-chart-6);
}
.base-tag--green {
  --base-tag-color: var(--color-chart-7);
}
.base-tag--sky {
  --base-tag-color: var(--color-chart-8);
}
.base-tag--brown {
  --base-tag-color: var(--color-chart-9);
}
}
/* base-theme-toggle.css */
@layer components {
.base-theme-toggle {
  display: contents;
}
.base-theme-toggle__to-light {
  display: none;
}

/* Effective dark: chosen, or no choice and the system prefers it. */
:root[data-theme="dark"] .base-theme-toggle__to-dark {
  display: none;
}
:root[data-theme="dark"] .base-theme-toggle__to-light {
  display: inline-flex;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .base-theme-toggle__to-dark {
    display: none;
  }
  :root:not([data-theme]) .base-theme-toggle__to-light {
    display: inline-flex;
  }
}
}
/* base-toast-region.css */
@layer components {
.base-toast-region {
  display: grid;
  gap: 0.5rem;
}
.base-toast-region:has(.base-toast) {
  padding: 1rem 1.5rem 0;
}
.base-toast {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--color-toast-background);
  color: var(--color-toast);
}
/* Optical alignment of the icon with the first line of text. */
.base-toast > .base-icon {
  margin-block-start: 0.125rem;
}
.base-toast--success > .base-icon {
  color: var(--color-toast-success);
}
.base-toast--error > .base-icon {
  color: var(--color-toast-error);
}
.base-toast__body {
  display: grid;
  flex: 1;
  gap: 0.25rem;
  overflow-wrap: anywhere;
}
.base-toast__message:has(+ .base-toast__detail) {
  font-weight: 600;
}
/* Lets the button keep its target size without making the toast taller. */
.base-toast__dismiss {
  display: none;
  margin: -0.5rem -0.5rem -0.5rem 0;
}
.base-toast .base-toast__dismiss {
  color: inherit;
}
.base-toast .base-toast__dismiss:hover {
  background: color-mix(in srgb, currentColor 15%, transparent);
  color: inherit;
}
.base-toast .base-toast__dismiss:focus-visible {
  outline-color: currentColor;
  box-shadow: none;
}
/* Toasts float only with JavaScript, which dismisses them; without it they
   stay in the page flow. A media query rather than a class set by the script
   survives htmx swapping the body, as on history restore. */
@media (scripting: enabled) {
  .base-toast-region,
  .base-toast-region:has(.base-toast) {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 10;
    inline-size: min(100% - 2rem, 24rem);
    padding: 0;
  }
  .base-toast-region .base-toast {
    box-shadow: var(--shadow-overlay);
  }
  .base-toast-region .base-toast__dismiss {
    display: inline-flex;
  }
  /* Focused controls scroll clear of the toasts (WCAG 2.4.11); the script
     measures them. */
  :root:has(.base-toast-region .base-toast) {
    scroll-padding-block-end: calc(
      var(--base-toast-region-block-size, 0rem) + 1rem
    );
  }
}
@media print {
  .base-toast-region {
    display: none;
  }
}
}
/* gallery.css */
@layer views {
.gallery {
  display: grid;
  gap: 2rem;
}
.gallery__component {
  display: grid;
  min-inline-size: 0;
  gap: 1rem;
}
.gallery__examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
.gallery__example {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: 0.5rem;
  align-content: start;
  padding: 1rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-raised);
}
.gallery__label {
  color: var(--color-muted);
  font-size: 0.875rem;
}
.gallery__example:has(.gallery__icons) {
  grid-column: 1 / -1;
}
.gallery__icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gallery__form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
}
.gallery__example:has(.base-form) {
  grid-column: 1 / -1;
}
.gallery__preview p + p {
  margin-block-start: 1em;
}
/* Laid out like the guests page. */
.gallery__table {
  display: grid;
  gap: 1rem;
}
.gallery__bulk {
  display: grid;
}
.gallery__narrow {
  max-inline-size: 20rem;
}
.gallery__example:has(.base-table, .base-search, .base-table-bar) {
  grid-column: 1 / -1;
}
.gallery__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
}
/* costs-form.css */
@layer views {
/* Flat sums count no guests: hide what only per-guest items use. The
   fields stay in the form, so the choice works without JavaScript and
   switching the type back keeps their values. */
#cost-form:has(input[name="kind"][value="fixed"]:checked)
  :is(
    .base-form-field:has([name="age"]),
    .base-form-field:has([name="includeMaybe"]),
    .base-form-field:has([name="tag"])
  ) {
  display: none;
}
}
/* costs-results.css */
@layer views {
/* The region's blocks are the page's blocks: BasePage spaces them. */
.costs-results {
  display: contents;
}
/* The calculation names the guests it counts, so it may wrap. */
.costs-results .base-table__table td {
  white-space: normal;
}
.costs-results .base-table__table td:nth-child(3) {
  min-inline-size: 14rem;
}
/* The bar sits flush on the table, without the section's gap. */
.costs-items {
  justify-self: stretch;
}
}
/* guests-results.css */
@layer views {
/* The bar and the table are one unit; only pagination sits apart. */
.guests-results .base-pagination {
  margin-block-start: 1rem;
}
.guests-row-actions {
  display: flex;
  gap: 0.25rem;
}
/* Names stay on one line, with the badge below them where space is short; the
   invitation column takes what is left and wraps instead of pushing the narrow
   columns out of view. */
.guests-results .base-table__table :is(th, td):not(:first-child) {
  padding-inline: 0.5rem;
}
.guests-results .base-table__table th[scope="row"] + td {
  inline-size: 100%;
  min-inline-size: 7.5rem;
  white-space: normal;
}
.guest-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.guests-results .base-table__table th[scope="row"] {
  white-space: normal;
}
.guest-name:has(.guest-name__avatar) {
  flex-wrap: nowrap;
  align-items: center;
}
.guest-name__avatar {
  display: inline-flex;
}
.guest-name > a {
  white-space: nowrap;
}
.guest-name--placeholder > a {
  font-style: italic;
}
.guest-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guest-diet__note {
  display: block;
  color: var(--color-muted);
  font-size: 0.875rem;
  white-space: normal;
}
.guest-group__extra {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-weight: normal;
}
.guest-group__tally {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.guest-group__tally .reply {
  font-size: 0.875rem;
}
/* The status menu sits in a narrow cell; its trigger stays compact. */
.guest-status .base-button {
  min-block-size: 2rem;
  padding-block: 0.125rem;
  padding-inline: 0.75rem 0.5rem;
  font-size: 0.875rem;
}
}
/* invitation-link.css */
@layer views {
.invitation-link {
  display: grid;
  gap: 1rem;
  overflow-wrap: anywhere;
}
.invitation-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
}
/* members-content.css */
@layer views {
/* The sections are laid out by the page. */
.members-content {
  display: contents;
}
}
/* page-account-deleted.css */
@layer views {
.page-account-deleted {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
}
/* page-account.css */
@layer views {
.account-org__slug {
  color: var(--color-muted);
  font-size: 0.875em;
}
}
/* page-costs-print.css */
@layer views {
/* Notes and calculations may be long; the page is read, not scrolled. */
#costs-print-table .base-table__table td {
  white-space: normal;
}
}
/* page-dashboard.css */
@layer views {
.page-dashboard {
  display: grid;
  gap: 1rem;
  container-type: inline-size;
}
/* Cards of a row are equally wide and tall. */
.page-dashboard__cards {
  display: grid;
  gap: 1rem;
}
@container (width >= 48rem) {
  .page-dashboard__cards {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.page-dashboard__headline {
  display: block;
}
.page-dashboard__details {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 1rem;
}
.page-dashboard__note {
  margin: 0;
  color: var(--color-muted);
}
.page-dashboard__tasks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-self: stretch;
}
.page-dashboard__task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  block-size: 100%;
  min-block-size: var(--size-target);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-field);
  background: var(--color-raised);
  color: var(--color-text);
  text-decoration: none;
}
.page-dashboard__task:hover {
  background: var(--color-accent-soft);
  color: var(--color-on-accent-soft);
}
.page-dashboard__task > .base-icon {
  flex: none;
  color: var(--color-muted);
}
}
/* page-error.css */
@layer views {
.page-error {
  max-inline-size: 40rem;
  margin-inline: auto;
  padding-block: 3rem;
}
.page-error__content {
  display: grid;
  gap: 1rem;
}
}
/* page-guest-replies.css */
@layer views {
.follow-up-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Boxes fill the width of the list they sit in. */
.record-box {
  justify-self: stretch;
}
}
/* page-guests-form.css */
@layer views {
.guests-form-stack {
  display: grid;
  gap: 2rem;
}
}
/* page-guests.css */
@layer views {
.page-guests {
  display: grid;
  gap: 0.75rem;
}
}
/* page-invitation-created.css */
@layer views {
.page-invitation-created {
  display: grid;
  gap: 1rem;
}
}
/* page-invitation.css */
@layer views {
.page-invitation {
  container-type: inline-size;
  display: grid;
  gap: 1.5rem;
}
.invitation-progress {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-raised);
}
.invitation-progress__summary {
  text-align: center;
}
.invitation-progress__dispatch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
@container (width < 32rem) {
  .invitation-progress__summary {
    text-align: start;
  }
}
.page-invitation__guests {
  display: grid;
  gap: 1rem;
}
}
/* page-invitations.css */
@layer views {
.page-invitations {
  display: grid;
  gap: 0.75rem;
}
.invitation-answers__text,
.invitation-dispatch__date {
  display: block;
  color: var(--color-muted);
  font-size: 0.875rem;
}
/* The bar and the table are one unit; only pagination sits apart. */
.invitations-results .base-pagination {
  margin-block-start: 1rem;
}
}
/* page-invite.css */
@layer views {
.page-invite {
  display: grid;
  gap: 1rem;
  overflow-wrap: anywhere;
}
.page-invite__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
}
/* page-login.css */
@layer views {
/* Fills the viewport less main's block padding, so the card sits in its
   middle. */
.page-login {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.5rem;
  min-block-size: calc(100dvh - 3rem);
}
.page-login__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.page-login__logo {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}
.page-login__card {
  inline-size: min(100%, 26rem);
  padding: 2rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
}
.page-login__content {
  display: grid;
  gap: 1.5rem;
}
.page-login__section {
  display: grid;
  gap: 1rem;
}
.page-login__users {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-login__users .base-button {
  inline-size: 100%;
  justify-content: flex-start;
  overflow-wrap: anywhere;
  text-align: start;
}
.page-login__provider .base-action-form,
.page-login__provider .base-button {
  inline-size: 100%;
}
}
/* page-org-settings.css */
@layer views {
.org-transfer-form {
  justify-self: stretch;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
}
.org-transfer-form .base-form-field {
  flex: 0 1 auto;
}
}
/* page-rsvp.css */
@layer views {
.page-rsvp {
  padding-block: 1.5rem;
}
.page-rsvp > .base-page {
  margin-inline: auto;
}
.page-rsvp__form {
  display: grid;
  gap: 1.5rem;
  justify-self: stretch;
}
.page-rsvp__guest {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-raised);
}
.page-rsvp__guest-name {
  padding-inline: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-variant-numeric: lining-nums;
}
.page-rsvp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
}
/* page-seating.css */
@layer views {
.page-seating-print__empty {
  color: var(--color-muted);
}
@media print {
  .base-section:has(.page-seating-print__guests) {
    break-inside: avoid;
  }
}
}
/* page-tags.css */
@layer views {
.tag-merge {
  display: grid;
  gap: 1rem;
}
}
/* questions-results.css */
@layer views {
/* The region's blocks are the page's blocks: BasePage spaces them. */
.questions-results {
  display: contents;
}
}
/* reply.css */
@layer views {
/* A guest's reply: sage attends, honey is unsure, grey declines, a dashed
   outline has not answered (docs/design.md). */
.guest-status--attending,
.reply--attending {
  --reply-background: var(--color-reply-attending-background);
  --reply-color: var(--color-reply-attending);
  --reply-mark: var(--color-reply-attending-mark);
  --reply-border: transparent;
}
.guest-status--maybe,
.reply--maybe {
  --reply-background: var(--color-reply-maybe-background);
  --reply-color: var(--color-reply-maybe);
  --reply-mark: var(--color-reply-maybe-mark);
  --reply-border: transparent;
}
.guest-status--declined,
.reply--declined {
  --reply-background: var(--color-reply-declined-background);
  --reply-color: var(--color-reply-declined);
  --reply-mark: var(--color-reply-declined-mark);
  --reply-border: transparent;
}
.guest-status--no_response,
.reply--no_response {
  --reply-background: var(--color-reply-open-background);
  --reply-color: var(--color-reply-open);
  --reply-mark: var(--color-reply-open-mark);
  --reply-border: var(--color-reply-open-mark);
}
.reply,
.guest-status > .base-button,
span.guest-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.75rem;
  border: 0.0625rem dashed var(--reply-border);
  border-radius: var(--radius-pill);
  background: var(--reply-background);
  color: var(--reply-color);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.reply::before,
span.guest-status::before {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--reply-mark);
}
.reply--no_response::before,
.guest-status--no_response::before {
  background: transparent;
  border: 0.125rem solid var(--reply-mark);
}
.guest-status > .base-button:hover {
  background: var(--reply-background);
  color: var(--reply-color);
  filter: brightness(0.96);
}
}
/* rsvp-link.css */
@layer views {
.rsvp-link {
  display: grid;
  gap: 1rem;
  overflow-wrap: anywhere;
}
.rsvp-link__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rsvp-link__whatsapp {
  display: grid;
  gap: 0.5rem;
}
.rsvp-link__whatsapp-row {
  display: grid;
  gap: 0.25rem;
}
.rsvp-link__whatsapp-name {
  font-weight: 600;
}
.rsvp-link {
  justify-self: stretch;
}
}
/* seating-board.css */
@layer views {
.seating-board {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
}

.seating-nudges {
  display: grid;
  gap: 0.5rem;
}
.seating-inline-form {
  display: inline-flex;
}

/* The unseated guests sit above the floor plan, so the plan gets the whole
   width. */
.seating-workspace {
  display: grid;
  gap: 1rem;
}

.seating-canvas {
  display: grid;
  gap: 0.5rem;
  min-inline-size: 0;
}
.seating-canvas__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.seating-canvas__tools[hidden] {
  display: none;
}
.seating-canvas__hint {
  color: var(--color-muted);
  font-size: 0.875rem;
}
.seating-canvas__svg {
  display: block;
  inline-size: 100%;
  block-size: min(70vh, 48rem);
  min-block-size: 20rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-raised);
  /* The browser scrolls the page on touch; zoom buttons and drags on tables
     and seats do the rest. */
  touch-action: pan-x pan-y;
  cursor: grab;
}
.seating-canvas__empty {
  color: var(--color-muted);
}

.seating-table {
  cursor: move;
  touch-action: none;
  outline: none;
}
.seating-table__body {
  fill: var(--color-surface);
  stroke: var(--color-border);
  stroke-width: 2;
}
.seating-table:focus-visible .seating-table__body {
  stroke: var(--color-accent);
  stroke-width: 4;
}
.seating-table__label {
  fill: var(--color-text);
  font-weight: 700;
  pointer-events: none;
}
.seating-table__count {
  fill: var(--color-muted);
  pointer-events: none;
}

.seating-seat__chair {
  fill: var(--color-raised);
  stroke: var(--color-border);
  stroke-width: 2;
}
.seating-seat--empty {
  cursor: pointer;
}
.seating-seat--taken {
  cursor: grab;
  touch-action: none;
}
.seating-seat--taken .seating-seat__chair {
  fill: var(--color-reply-attending-background);
  stroke: var(--color-reply-attending-mark);
}
.seating-seat--placeholder .seating-seat__chair {
  stroke-dasharray: 4 3;
}
.seating-seat--away .seating-seat__chair {
  fill: var(--color-reply-declined-background);
  stroke: var(--color-reply-declined-mark);
}
.seating-seat__initials {
  fill: var(--color-text);
  font-weight: 600;
  pointer-events: none;
}
.seating-seat__name {
  fill: var(--color-text);
  pointer-events: none;
}
.seating-seat__badge {
  fill: var(--color-muted);
  font-style: italic;
}
.seating-seat__pin {
  fill: var(--color-accent);
  pointer-events: none;
}
.seating-seat.is-selected .seating-seat__chair {
  fill: var(--color-accent-fill);
  stroke-width: 4;
}
.seating-seat.is-selected .seating-seat__initials {
  fill: var(--color-on-accent);
}
.seating-seat.is-mate .seating-seat__chair {
  stroke-width: 4;
  stroke: var(--color-success);
}
.seating-seat.is-dragging {
  opacity: 0.4;
}
.seating-seat.is-drop-target .seating-seat__chair {
  stroke: var(--color-success);
  stroke-width: 5;
}

.seating-panel__body {
  display: grid;
  gap: 1rem;
  justify-self: stretch;
}
.seating-panel__list {
  display: grid;
  gap: 0.5rem;
}
.seating-panel__count,
.seating-panel__empty {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}
/* About four rows of guests; more scroll, so the floor plan stays close. */
.seating-guests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-block-size: 13rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.seating-canvas__svg,
.seating-guest {
  user-select: none;
}
.seating-guest {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.75rem 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}
.seating-guest__grip {
  display: inline-flex;
  color: var(--color-muted);
  cursor: grab;
  touch-action: none;
}
.seating-guest__name {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.seating-guest__badge {
  color: var(--color-muted);
  font-size: 0.75rem;
}
.seating-guest.is-selected {
  outline: 0.125rem solid var(--color-accent);
}
.seating-guest.is-mate {
  outline: 0.125rem solid var(--color-success);
}
.seating-guest.is-dragging {
  opacity: 0.4;
}

.seating-ghost {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
  pointer-events: none;
}

.seating-tables__table + .seating-tables__table {
  margin-block-start: 1rem;
}
.seating-tables__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}
.seating-tables__heading {
  margin: 0;
  font-size: 1rem;
}
.seating-tables__count {
  color: var(--color-muted);
}
.seating-tables__seats {
  display: grid;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.seating-tables__without-seat {
  margin: 0.5rem 0 0;
  color: var(--color-muted);
}

.seating-sheet-content {
  display: grid;
  gap: 1rem;
}
.seating-sheet-content__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media print {
  .seating-panel,
  .seating-canvas__tools {
    display: none;
  }
}
}