@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;
    --color-background: light-dark(#fff, #16181d);
    --color-surface: light-dark(#f4f5f8, #1f2229);
    /* The app shell's sidebar, a shade off the page panel beside it. */
    --color-sidebar: light-dark(#eef0f4, #0f1114);
    --color-sidebar-hover: light-dark(#e2e5eb, #1f2229);
    --color-text: light-dark(#1f1f1f, #e8eaee);
    --color-muted: light-dark(#545a66, #a4aab5);
    /* Dividers and outlines of surfaces. They are decorative, so they stay
       quiet and leave contrast to the content and the controls. */
    --color-border: light-dark(#e1e4ea, #2e323a);
    /* Outlines that identify controls need 3:1 against background and
       surface (WCAG 1.4.11). */
    --color-border-control: light-dark(#7d838f, #6b7280);
    /* petermax.at's brand red (--color-brand-primary and -dark); the dark
       scheme lightens it to keep 4.5:1 against background and surface. */
    --color-accent: light-dark(#8c1718, #ff9b96);
    --color-accent-hover: light-dark(#7b1415, #ffc2bf);
    --color-accent-background: light-dark(#fbecec, #3a1a1b);
    --color-on-accent: light-dark(#fff, #2b0805);
    /* Primary buttons are ink: the brand red is close to danger red, and a red
       primary button would read as destructive. */
    --color-primary: light-dark(#1f1f1f, #e8eaee);
    --color-primary-hover: light-dark(#3a3d44, #c9cdd5);
    --color-on-primary: light-dark(#fff, #16181d);
    --color-danger: light-dark(#b42318, #ff8a80);
    --color-danger-hover: light-dark(#8f1c13, #ffb0a8);
    --color-on-danger: light-dark(#fff, #2b0805);
    /* Outlines places for destructive actions without outshouting the page. */
    --color-danger-border: light-dark(#f0c5c1, #5e2620);
    --color-success-background: light-dark(#edf7ef, #12291a);
    --color-success: light-dark(#1d6b34, #7ad397);
    --color-error-background: light-dark(#fef3ee, #2e1512);
    --color-error: light-dark(#911d1b, #ff9c94);
    --color-warning-background: light-dark(#fdf4dc, #2e2410);
    --color-warning: light-dark(#8a5300, #f5cc78);
    /* Avatar variants besides the accent one, each at least 4.5:1. */
    --color-avatar-1: light-dark(#0f5e57, #7fdcd2);
    --color-avatar-1-background: light-dark(#e3f4f1, #123532);
    --color-avatar-2: light-dark(#7a4a00, #f2c46d);
    --color-avatar-2-background: light-dark(#fbf0d9, #33260c);
    /* Categorical chart colors, each at least 3:1 against background and
       surface in both schemes (WCAG 1.4.11). Legends carry the meaning in
       text. */
    --color-chart-0: light-dark(#2a62c9, #6ea0ff);
    --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(#6d4fd6, #a78bfa);
    --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.25), rgb(0 0 0 / 0.7));
    --shadow-overlay: 0 0.5rem 2rem var(--color-shadow);
    --radius: 0.5rem;
    /* For controls such as inputs, which sit closer together than cards. */
    --radius-small: 0.25rem;
    /* 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 bar: 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 */
/* Inter 4.1, Latin subset with all weights (internal/ui/vendor, OFL). The
   layout preloads it (FontPath). */
@font-face {
  font-family: "Inter";
  src: url("/assets/vendor/inter-4.1-latin.woff2") format("woff2");
  font-weight: 100 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;
}

/* Arial scaled to Inter's metrics, so swapping in Inter barely shifts the
   layout. Systems without Arial fall back to system-ui. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}

@layer document {
  html {
    font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
    line-height: 1.5;
  }
  body {
    background: var(--color-background);
    color: var(--color-text);
  }
  a {
    color: var(--color-accent);
  }
  :focus-visible {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.125rem;
  }
  [tabindex="-1"]:focus {
    outline: none;
  }
  main {
    padding: 1.5rem;
  }
  .skip-link {
    position: absolute;
    inset-block-start: -10rem;
    inset-inline-start: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-background);
  }
  .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;
    }
    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;
  border-inline-start: 0.25rem solid currentColor;
  border-radius: var(--radius);
}
/* 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-surface);
  color: var(--color-muted);
}
.base-alert--success {
  background: var(--color-success-background);
  color: var(--color-success);
}
.base-alert--error {
  background: var(--color-error-background);
  color: var(--color-error);
}
.base-alert--warning {
  background: var(--color-warning-background);
  color: var(--color-warning);
}
.base-alert__content {
  display: grid;
  gap: 0.25rem;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.base-alert__title {
  font-weight: 600;
}
/* A button in the footer keeps its own width. */
.base-alert__footer {
  justify-self: start;
}
}
/* 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-size: 1.25rem;
  font-weight: 700;
  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-region {
  display: grid;
  align-content: start;
  gap: 1rem;
}
.base-app-shell__group-label {
  margin: 0 0 0.25rem;
  padding-inline: 1rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.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);
  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-background);
  color: var(--color-accent);
  font-weight: 500;
}
.base-app-shell__badge {
  margin-inline-start: auto;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  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);
  }
  .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);
    border-start-end-radius: var(--radius);
  }
  /* 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));
    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);
    border-start-end-radius: var(--radius);
    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-background);
  color: var(--color-accent);
  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-1-background);
  color: var(--color-avatar-1);
}
.base-avatar--tint-2 {
  background: var(--color-avatar-2-background);
  color: var(--color-avatar-2);
}
.base-avatar--placeholder,
.base-avatar--more {
  border: 0.125rem dashed var(--color-border-control);
  background: var(--color-background);
  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 background color separates the overlapping avatars. */
  box-shadow: 0 0 0 0.125rem var(--color-background);
}
.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.5rem;
  border-radius: 1rem;
  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-background);
  color: var(--color-accent);
}
.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-small);
  background: var(--color-surface);
  overflow: hidden;
}
/* The background-colored outline separates neighboring segments. */
.base-bar__segment {
  stroke: var(--color-background);
  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-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 1rem;
  border: 0.125rem solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}
.base-button--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.base-button--primary:hover {
  background: var(--color-primary-hover);
}
.base-button--secondary {
  border-color: var(--color-border-control);
  background: transparent;
  color: var(--color-text);
}
.base-button--secondary:hover {
  background: var(--color-surface);
}
.base-button--danger {
  background: var(--color-danger);
  color: var(--color-on-danger);
}
.base-button--danger:hover {
  background: var(--color-danger-hover);
}
.base-button--danger-secondary {
  border-color: var(--color-danger);
  background: transparent;
  color: var(--color-danger);
}
.base-button--danger-secondary:hover {
  background: var(--color-error-background);
}
.base-button--ghost {
  background: transparent;
  color: var(--color-text);
}
.base-button--ghost:hover {
  background: var(--color-surface);
}
/* 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: 0.75rem;
}
.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-column-chart.css */
@layer components {
.base-column-chart {
  margin: 0;
}
.base-column-chart__label {
  margin: 0 0 0.5rem;
  font-weight: 600;
}
/* The scale sits beside the columns, the axis below them. */
.base-column-chart__plot {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 10rem auto;
  column-gap: 0.5rem;
  padding-inline-end: 1.5rem;
}
.base-column-chart__scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Optical alignment: the labels' middles meet the top and bottom lines. */
  margin-block: -0.5lh;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.base-column-chart__bars,
.base-column-chart__axis {
  display: block;
  inline-size: 100%;
  overflow: visible;
}
.base-column-chart__bars {
  block-size: 100%;
}
.base-column-chart__axis {
  grid-column: 2;
  block-size: 1.5em;
  font-size: 0.875rem;
  fill: var(--color-muted);
}
.base-column-chart__grid {
  stroke: var(--color-border);
  stroke-dasharray: 0.25rem;
  stroke-width: 0.0625rem;
}
.base-column-chart__baseline {
  stroke: var(--color-border);
  stroke-width: 0.125rem;
}
.base-column-chart__bar {
  fill: var(--color-chart-0);
}
.base-column-chart--danger .base-column-chart__bar {
  fill: var(--color-danger);
}
.base-column-chart__values {
  margin-block-start: 0.5rem;
}
.base-column-chart__values > summary {
  cursor: pointer;
  color: var(--color-muted);
}
.base-column-chart__values[open] > summary {
  margin-block-end: 0.5rem;
}
@media print {
  .base-column-chart__values > summary {
    display: none;
  }
}
}
/* 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;
  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);
  background: var(--color-background);
  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: 0;
  }
}
.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-background);
}
.base-dialog__title {
  font-size: 1.25rem;
  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 1rem;
  border: 0.125rem dashed var(--color-border);
  border-radius: var(--radius);
  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-size: 1.125rem;
  font-weight: 600;
}
.base-empty-state__text {
  max-inline-size: 32rem;
  color: var(--color-muted);
}
}
/* base-form-error-summary.css */
@layer components {
.base-form-error-summary {
  padding: 1rem 1.5rem;
  border: 0.25rem solid var(--color-error);
  border-radius: 0.25rem;
  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;
}
.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 0.75rem;
  border: 0.125rem solid var(--color-border-control);
  border-radius: var(--radius-small);
  background: var(--color-background);
  color: inherit;
}
/* 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-error);
}
.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);
}
.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: 1rem;
  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);
  background: var(--color-accent);
}
.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-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 0.75rem;
  border: 0;
  /* Concentric with the popover's corners. */
  border-radius: calc(var(--radius) - 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: 1rem;
  background: var(--color-surface);
  overflow: hidden;
}
.base-meter__fill {
  fill: var(--color-accent);
}
.base-meter--over .base-meter__fill {
  fill: var(--color-danger);
}
.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-size: 1.75rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.base-page-header__lead {
  margin-block-start: 0.25rem;
  font-size: 1.25rem;
  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);
  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);
  background: var(--color-background);
  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;
  border-radius: var(--radius-small);
}
.base-search__input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--size-target);
  padding-block: 0.25rem;
  padding-inline: 0.75rem var(--size-target);
  border: 0.125rem solid var(--color-border-control);
  border-radius: var(--radius-small);
  background: var(--color-background);
  color: inherit;
}
.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--danger {
  padding: 1rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
}
.base-section--danger {
  border-color: var(--color-danger-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--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 {
  --base-section-content-gap: 1rem;
  display: grid;
  gap: var(--base-section-content-gap);
  justify-items: start;
  min-inline-size: 0;
}
.base-section__footer {
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Tables, forms, lists, and charts fill the width. */
.base-section__content
  > :is(
    .base-table,
    .base-bar,
    .base-meter,
    .base-column-chart,
    .base-form,
    .base-description-list,
    .base-stat-list,
    .base-search,
    .base-empty-state,
    .base-table-bar
  ) {
  justify-self: stretch;
}
/* A table bar and its table are one unit: the table pulls up across the grid
   gap, which the grid would otherwise put between them. */
.base-section__content > .base-table-bar + .base-table {
  margin-block-start: calc(-1 * var(--base-section-content-gap));
}
@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-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
}
/* 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-success);
  background: var(--color-success);
  color: var(--color-background);
}
.base-steps__step--current .base-steps__marker {
  border-color: var(--color-accent);
  background: var(--color-accent-background);
}
.base-steps__step--current .base-steps__marker::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}
.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 several 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 0.75rem;
  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);
  border-start-end-radius: var(--radius);
  background: var(--color-background);
}
/* The bar and the table read as one unit. 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);
    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));
      }
    }
  }
}
.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);
}
.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);
}
.base-table__table {
  inline-size: 100%;
  border-collapse: collapse;
}
.base-table__caption {
  padding: 0.75rem 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-background);
  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 blue 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);
}
/* 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;
  color: var(--color-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.base-tabs__tab:hover {
  color: var(--color-text);
}
.base-tabs__tab[aria-current="page"] {
  border-color: var(--color-accent);
  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.5rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: 1rem;
  background: var(--color-background);
  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;
  border: 0.0625rem solid currentColor;
  border-radius: var(--radius);
}
/* Optical alignment of the icon with the first line of text. */
.base-toast > .base-icon {
  margin-block-start: 0.125rem;
}
.base-toast--success {
  background: var(--color-success-background);
  color: var(--color-success);
}
.base-toast--error {
  background: var(--color-error-background);
  color: var(--color-error);
}
.base-toast__body {
  display: grid;
  flex: 1;
  gap: 0.25rem;
  color: var(--color-text);
  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;
}
/* 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);
}
.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 contacts 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,
  .gallery__row
) {
  grid-column: 1 / -1;
}
.gallery__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.gallery__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
}
/* filter-form.css */
@layer views {
/* A filtered list: the filters, then the results, as one block. */
.filter-list {
  display: grid;
  gap: 0.75rem;
}
.filter-form__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}
.filter-form__field {
  flex: 1 1 12rem;
}
.filter-form__actions {
  display: flex;
  gap: 0.5rem;
}
/* The bar and the table are one unit; only pagination sits apart. */
.filter-results {
  min-inline-size: 0;
}
.filter-results .base-pagination {
  margin-block-start: 1rem;
}
/* Messages and summaries wrap; other cells stay on one line. */
.filter-results .filter-results__text {
  display: block;
  min-inline-size: 16rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.readable-text {
  display: block;
  min-inline-size: 12rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.filter-results__folded > summary {
  cursor: pointer;
}
.filter-results__folded[open] > summary {
  margin-block-end: 0.25rem;
}
}
/* page-alerts.css */
@layer views {
/* The sections are laid out by the page. */
.alerts-content {
  display: contents;
}
}
/* page-audit.css */
@layer views {
.audit-action {
  white-space: nowrap;
}
/* The page's blocks are laid out by the page. */
.page-audit-entry {
  display: contents;
}
/* Messages and values keep their lines and break anywhere. */
.page-audit-entry .base-description-list__detail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
}
/* page-blocklist.css */
@layer views {
.blocklist-status {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.blocklist-status > .base-alert {
  justify-self: stretch;
}

/* The bar and the table are one unit; only pagination sits apart. */
.blocklist-results {
  justify-self: stretch;
  min-inline-size: 0;
}
.blocklist-results .base-pagination {
  margin-block-start: 1rem;
}

/* Explanations and error messages wrap; labels and counts stay on one
   line. */
.blocklist-explained {
  justify-self: stretch;
  min-inline-size: 0;
}
:is(.blocklist-explained, .blocklist-results)
  .base-table__table
  td:last-child:not(.base-table__cell--numeric) {
  min-inline-size: 16rem;
  white-space: normal;
}
}
/* 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-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-overview.css */
@layer views {
/* One tile per area, as many per row as fit. */
.page-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.page-overview__note,
.page-overview__failed {
  color: var(--color-muted);
}
}
/* page-raffles.css */
@layer views {
.raffle-history {
  justify-self: stretch;
  min-inline-size: 0;
}
.raffle-history .base-pagination {
  margin-block-start: 1rem;
}
}
/* page-recipe.css */
@layer views {
.page-recipe__preformatted {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
}
/* page-recipes.css */
@layer views {
/* The section is laid out by the page. */
.recipes-results {
  display: contents;
}
/* The bar sits flush on the table's top edge. */
.recipes-table {
  justify-self: stretch;
  min-inline-size: 0;
}
}
/* page-review-export.css */
@layer views {
.review-range {
  display: grid;
  gap: 1rem;
  justify-self: stretch;
}
/* The two dates sit side by side where there is room. */
.review-range__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-inline-size: 32rem;
}
.review-range__fields > * {
  flex: 1 1 12rem;
  min-inline-size: 0;
}
.review-range__fields input {
  inline-size: 100%;
  min-inline-size: 0;
}

.review-export-result {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.review-export-result > .base-alert {
  justify-self: stretch;
}

/* The bar and the table are one unit; only pagination sits apart. */
.review-results {
  justify-self: stretch;
  min-inline-size: 0;
}
.review-results .base-pagination {
  margin-block-start: 1rem;
}
}
/* page-shortlinks.css */
@layer views {
/* QR code beside the short URL and its actions; stacked on narrow screens. */
.shortlink-share {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: start;
}
.shortlink-share-qr {
  inline-size: 12rem;
  flex: none;
}
.shortlink-share-actions {
  display: grid;
  gap: 1rem;
  flex: 1 1 16rem;
  min-inline-size: 0;
}
.shortlink-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
}
/* page-submissions.css */
@layer views {
.page-submissions {
  display: grid;
  gap: 0.75rem;
}
.submission-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.submission-action {
  display: grid;
  gap: 1rem;
}
/* The page's blocks are laid out by the page. */
.page-submission {
  display: contents;
}
/* Messages and addresses keep their lines and break anywhere. */
.page-submission .base-description-list__detail {
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.submissions-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* A custom range's days show only while it is chosen; without :has() they
   always show and apply only to a custom range. */
.page-submissions
  .base-search__form:not(
    :has(#submissions-range option[value="custom"]:checked)
  )
  .base-search__filter:has(#submissions-from, #submissions-to) {
  display: none;
}
.submissions-dashboard {
  display: grid;
  gap: 1rem;
}
.submissions-dashboard__notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.submissions-dashboard__note {
  margin: 0;
  color: var(--color-muted);
}
.submissions-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  margin: 0;
}
.submissions-kpis__item {
  padding: 1rem;
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
}
.submissions-kpis__label {
  color: var(--color-muted);
}
.submissions-kpis__value {
  margin: 0.25rem 0 0;
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.submissions-kpis__change {
  margin: 0.25rem 0 0;
  color: var(--color-muted);
  font-size: 0.875rem;
}
.submissions-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1rem;
}
.submissions-dashboard__stack {
  display: grid;
  justify-self: stretch;
  gap: 1rem;
}
.page-submissions-print {
  display: grid;
  gap: 2rem;
}
}
/* page-vouchers.css */
@layer views {
.page-vouchers {
  display: grid;
  gap: 0.75rem;
}
.page-vouchers__description {
  color: var(--color-muted);
}
}
/* recipe-upload.css */
@layer views {
.recipe-upload {
  display: grid;
  gap: 1rem;
  justify-self: stretch;
}
.recipe-upload[hidden],
.recipe-upload__notice[hidden] {
  display: none;
}
.recipe-upload__done {
  color: var(--color-success);
  overflow-wrap: anywhere;
}
.recipe-upload__check:empty,
.recipe-upload__status:empty {
  display: none;
}
.recipe-upload__check,
.recipe-upload__status {
  color: var(--color-muted);
}
.recipe-upload__progress {
  display: grid;
  gap: 0.5rem;
}
.recipe-upload__progress[hidden],
.recipe-upload__progress [hidden] {
  display: none;
}
.recipe-upload__progress progress {
  inline-size: 100%;
  block-size: 0.5rem;
  accent-color: var(--color-accent);
}
.recipe-upload__warning,
.recipe-upload__error {
  padding: 0.75rem 1rem;
  border-inline-start: 0.25rem solid currentColor;
  border-radius: var(--radius);
}
.recipe-upload__warning {
  background: var(--color-accent-background);
  color: var(--color-accent);
}
.recipe-upload__error {
  background: var(--color-error-background);
  color: var(--color-error);
}
.recipe-upload__warning[hidden],
.recipe-upload__error[hidden] {
  display: none;
}
.recipe-upload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.recipe-upload__actions [hidden] {
  display: none;
}
}
/* vouchers-results.css */
@layer views {
/* The bar and the table are one unit; only pagination sits apart. */
.vouchers-results .base-pagination {
  margin-block-start: 1rem;
}
.vouchers-error {
  display: block;
  min-inline-size: 12rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
}