/* ============================================
   Event Link — Design System
   Aesthetic: Refined utilitarian. Crisp surfaces,
   confident type, purposeful spacing.
   ============================================ */

/* Fonts — DM Sans: geometric, modern, warm authority */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

/* Design tokens */
:root {
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  --color-ink: #0f1114;
  --color-ink-secondary: #4a4e57;
  --color-ink-tertiary: #6b7080;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-border: #e2e4e9;
  --color-border-strong: #cdd0d5;
  --color-accent: #2754eb;
  --color-accent-hover: #1b3fc4;
  --color-accent-subtle: #eef1fd;
  --color-danger: #c4280a;
  --color-danger-bg: #fef0ec;
  --color-danger-border: #fcd4ca;
  --color-success: #0f6b31;
  --color-success-bg: #edfbf2;
  --color-success-border: #b8eec9;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15, 17, 20, 0.05);
  --shadow-md:
    0 2px 8px rgba(15, 17, 20, 0.08), 0 1px 2px rgba(15, 17, 20, 0.04);
  --shadow-lg:
    0 8px 24px rgba(15, 17, 20, 0.12), 0 2px 4px rgba(15, 17, 20, 0.04);
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Navigation ---- */
.top-nav {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.92);
}

.nav-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
}

.nav-brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-ink);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-brand::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

.nav-brand:hover {
  text-decoration: none;
}

.top-nav form {
  display: inline;
}

.top-nav button[type="submit"] {
  background: none;
  color: var(--color-ink-tertiary);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  min-height: auto;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.top-nav button[type="submit"]:hover {
  background: var(--color-surface);
  color: var(--color-ink);
  border-color: var(--color-border);
  text-decoration: none;
}

.top-nav button[type="submit"]:active {
  background: var(--color-border);
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.org-switcher {
  position: relative;
}

.org-switcher__toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.3125rem 0.625rem 0.3125rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.org-switcher__toggle:hover {
  background: var(--color-border);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

.org-switcher__label {
  color: var(--color-ink-tertiary);
  font-weight: 400;
  margin-right: 0.125rem;
}

.org-switcher__value {
  font-weight: 600;
}

.org-switcher__chevron {
  color: var(--color-ink-tertiary);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.org-switcher__menu--open ~ .org-switcher__toggle .org-switcher__chevron,
.org-switcher__toggle[aria-expanded="true"] .org-switcher__chevron {
  transform: rotate(180deg);
}

.org-switcher__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 15rem;
  max-height: 20rem;
  z-index: 10;
  animation: dropdown-enter 0.12s ease-out;
  overflow: hidden;
}

@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.org-switcher__menu--open {
  display: flex;
  flex-direction: column;
}

.org-switcher__search {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.org-switcher__search input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}

.org-switcher__search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}

.org-switcher__list {
  overflow-y: auto;
  max-height: 14rem;
  padding: 4px;
}

.org-switcher__list a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 450;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.1s ease;
}

.org-switcher__list a:hover {
  background-color: var(--color-surface);
  text-decoration: none;
}

.org-switcher__list a[hidden] {
  display: none;
}

.org-switcher__empty {
  padding: 1rem 0.75rem;
  text-align: center;
  color: var(--color-ink-tertiary);
  font-size: 0.8125rem;
}

.org-switcher__empty[hidden] {
  display: none;
}

.org-switcher__single {
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: all 0.15s ease;
}

.org-switcher__single:hover {
  background: var(--color-border);
  border-color: var(--color-border-strong);
  text-decoration: none;
}

/* ---- Layout ---- */
.container {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.container--narrow {
  max-width: 26rem;
  margin: 4rem auto 2rem;
}

/* Sidebar layout */
.layout-with-sidebar {
  display: flex;
  max-width: 80rem;
  margin: 0 auto;
  min-height: calc(100vh - 57px);
}

.sidebar {
  width: 15rem;
  flex-shrink: 0;
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border);
  padding: 1.25rem 0.5rem;
  position: sticky;
  top: 57px;
  height: calc(100vh - 57px);
  overflow-y: auto;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar__section {
  padding: 0 0.25rem;
  margin-bottom: 0.75rem;
}

.sidebar__section + .sidebar__section {
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  margin: 0 -0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.sidebar__heading {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  padding: 0.375rem 0.75rem 0.375rem;
  text-decoration: none;
}

.sidebar__heading:hover {
  color: var(--color-ink-secondary);
  text-decoration: none;
}

.sidebar__link {
  display: block;
  padding: 0.4375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 450;
  color: var(--color-ink-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.1s ease;
}

.sidebar__link:hover {
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
}

.sidebar__link--active {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  font-weight: 600;
}

.sidebar__link--active:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.sidebar__link--nested {
  padding-left: 1.25rem;
}

.sidebar__sub {
  margin: 0.25rem 0 0.25rem 0.5rem;
  border-left: 1px solid var(--color-border);
  padding-left: 0.25rem;
}

.sidebar__link--sub {
  padding-left: 0.75rem;
  font-size: 0.8125rem;
}

.sidebar__link--add {
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.sidebar__link--add::before {
  content: "+ ";
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 2.5rem 2rem;
  max-width: 64rem;
}

.content--narrow {
  max-width: 26rem;
}

.main-content form {
  max-width: 32rem;
}

/* ---- Dashboard stats ---- */
.dashboard-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.dashboard-stat {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  min-width: 8rem;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

a.dashboard-stat:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.dashboard-stat__value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dashboard-stat__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-tertiary);
  margin-top: 0.25rem;
}

/* ---- Typography ---- */
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 1.75rem;
  color: var(--color-ink);
  line-height: 1.25;
}

h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  margin: 2rem 0 0.75rem;
}

h2:first-child {
  margin-top: 0;
}

p {
  margin: 0 0 1rem;
  color: var(--color-ink-secondary);
}

label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.375rem;
}

small {
  color: var(--color-ink-tertiary);
  font-size: 0.8125rem;
}

code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.8em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.125rem 0.375rem;
}

/* ---- Flash messages ---- */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.flash--alert {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

.flash--notice {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

/* ---- Forms ---- */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Honor the HTML5 hidden attribute even when an author rule sets a form's display.
   Without this, `formTarget.hidden = true` from the lumi-loading Stimulus controller
   would not visually hide the form. */
form[hidden] {
  display: none;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="datetime-local"],
textarea,
select {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-ink);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  appearance: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-ink-tertiary);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

/* Checkboxes follow the standard convention: the box sits inline to the left
   of its clickable label, vertically centered. This overrides the default
   stacked label-above-field layout, which only suits text inputs and selects.
   Stacked .checkbox-field rows (e.g. collection_check_boxes) get a small gap. */
.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-field input[type="checkbox"] {
  flex: none;
  margin: 0;
}

.checkbox-field label {
  margin: 0;
  cursor: pointer;
}

.checkbox-field + .checkbox-field {
  margin-top: 0.375rem;
}

input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0.5625rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 40px;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--color-accent-hover);
}

input[type="submit"]:active,
button[type="submit"]:active {
  background-color: #17349e;
  transform: scale(0.985);
}

input[type="submit"]:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled:hover,
button[type="submit"]:disabled:hover,
input[type="submit"]:disabled:active,
button[type="submit"]:disabled:active {
  background-color: var(--color-border-strong);
  color: var(--color-ink-tertiary);
  cursor: not-allowed;
  transform: none;
}

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background-color: var(--color-accent-subtle);
}

td form {
  display: inline;
  max-width: none;
}

/* ---- Form errors ---- */
.form-errors {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.form-errors p {
  color: inherit;
  margin-bottom: 0.25rem;
}
.form-errors ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.form-errors li {
  margin-bottom: 0.125rem;
}

/* ---- Action links ---- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.actions a {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---- Inline button ---- */
form.button--inline {
  display: inline;
}

form.button--inline input[type="submit"],
form.button--inline button[type="submit"] {
  width: auto;
  min-height: auto;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}

/* ---- Danger button ---- */
form.button--danger input[type="submit"],
form.button--danger button[type="submit"] {
  background-color: var(--color-surface-raised);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

form.button--danger input[type="submit"]:hover,
form.button--danger button[type="submit"]:hover {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger);
}

form.button--danger input[type="submit"]:active,
form.button--danger button[type="submit"]:active {
  background-color: var(--color-danger);
  color: #fff;
}

/* ---- Links ---- */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.1s ease;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Lists ---- */
ul {
  padding-left: 0;
  list-style: none;
}

ul li {
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
  font-size: 0.875rem;
}

ul li:last-child {
  border-bottom: none;
}

ul li a {
  font-weight: 500;
}

/* ---- Feature rows ---- */
.feature-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.feature-row__label {
  flex: 1;
  font-weight: 500;
  color: var(--color-ink);
}

.feature-row__count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-tertiary);
  min-width: 2rem;
  text-align: right;
}

.feature-row__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-row__actions a {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ---- Portal URLs (settings form) ---- */
.portal-urls {
  margin: 0 0 1.5rem;
}

.portal-urls li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.portal-urls__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-tertiary);
  min-width: 8rem;
}

.portal-urls a {
  word-break: break-all;
}

/* ---- Return URL recipe (NAMIC SSO settings) ----
   A single-line, copy-friendly URL display where the substitution
   placeholder needs to read at a glance against an otherwise dense
   URL-encoded blob. The URL doesn't wrap — it scrolls horizontally
   on overflow — so the placeholder never gets sliced across lines. */
.return-url-recipe {
  margin: 0 0 1.5rem;
}

.return-url-recipe__label {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
  line-height: 1.55;
}

.return-url-recipe__label code {
  font-size: 0.85em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  color: var(--color-ink);
}

.return-url-recipe__field {
  display: flex;
  align-items: stretch;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.return-url-recipe__value {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* The Stimulus controller scrolls this container to its rightmost
     position on connect so the placeholder is the part the user actually
     sees. Fade the LEFT edge so users can tell there's more URL hiding
     in that direction. */
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 100%);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 2rem,
    #000 100%
  );
}

/* No fade when content fits — only apply when there's actually overflow.
   `scrollbar-width: thin` keeps the optional scrollbar quiet. */
.return-url-recipe__value {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

.return-url-recipe__value::-webkit-scrollbar {
  height: 6px;
}

.return-url-recipe__value::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 999px;
}

.return-url-recipe__placeholder {
  display: inline-block;
  padding: 0 0.25rem;
  margin: 0 0.05rem;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.return-url-recipe__field:hover .return-url-recipe__placeholder {
  background: var(--color-accent);
  color: var(--color-surface-raised);
}

.clipboard-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 0;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.clipboard-button:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.clipboard-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.clipboard-button--copied {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.clipboard-button--copied:hover {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.clipboard-button__icon {
  flex: 0 0 auto;
}

/* ---- Copy link (link + clipboard button) ---- */
.copy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.copy-link__url {
  word-break: break-all;
}

.copy-link__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-ink-tertiary);
  line-height: 0;
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease;
}

.copy-link__button:hover {
  color: var(--color-accent);
  border-color: var(--color-border-strong);
}

.copy-link__button:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.copy-link__glyph {
  width: 1rem;
  height: 1rem;
}

.copy-link__glyph--done {
  display: none;
}

.copy-link--copied .copy-link__button {
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.copy-link--copied .copy-link__glyph--idle {
  display: none;
}

.copy-link--copied .copy-link__glyph--done {
  display: inline;
}

.copy-link__status {
  font-size: 0.8125rem;
  color: var(--color-success);
}

/* Reset list style inside form-errors */
.form-errors ul {
  list-style: disc;
  padding-left: 1.25rem;
}
.form-errors ul li {
  padding: 0;
  border-bottom: none;
  font-size: inherit;
}

/* ---- Dashboard nav links (p > a pattern) ---- */
h1 + p + p a,
p + p a {
  font-weight: 500;
}

/* ---- Responsive ---- */
@media (max-width: 48rem) {
  .layout-with-sidebar {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
  }

  .sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .sidebar__section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    padding: 0 0.5rem;
  }

  .sidebar__heading {
    padding: 0.375rem 0.5rem;
  }

  .sidebar__link {
    padding: 0.375rem 0.5rem;
  }
  .sidebar__link--nested {
    padding-left: 0.5rem;
  }

  .sidebar__sub {
    display: flex;
    margin-left: 0;
    border-left: none;
    padding-left: 0;
  }

  .main-content {
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 40rem) {
  .dashboard-stats {
    flex-direction: column;
    gap: 0.75rem;
  }

  .container {
    padding: 1.5rem 1rem;
  }

  .container--narrow {
    margin: 2rem auto;
  }

  .nav-inner {
    padding: 0 1rem;
    height: 48px;
  }

  h1 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
  }

  input[type="submit"],
  button[type="submit"] {
    width: 100%;
  }

  .nav-actions {
    gap: 0.125rem;
  }

  table {
    font-size: 0.75rem;
  }

  th,
  td {
    padding: 0.625rem 0.625rem;
  }

  .actions {
    gap: 0.5rem;
  }
}

/* ---- Lumi attendee shell ---- */
.lumi-body {
  background: var(--color-surface);
  min-height: 100vh;
  margin: 0;
}

.lumi-shell {
  /* Header can run wide (up to 64rem) so a long event title doesn't wrap into
     a cramped multi-line masthead. The form column inside is held narrow by
     .lumi-shell__content below, so the form's usability isn't compromised by
     an arbitrarily long event name. */
  max-width: 64rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Wider shell for the approver portal — the signup flow's narrow column is
   right for a single-column form, but the contacts table needs full width. */
.lumi-shell--portal {
  max-width: 64rem;
  padding: 2.5rem 1.5rem 2.5rem;
  gap: 1.5rem;
}

.lumi-shell__header {
  width: 100%;
  text-align: center;
}

/* Event logo pulled from EventsAir (Event.logo). Capped so a large source
   image sits comfortably above the masthead without dominating the shell. */
.lumi-shell__logo {
  display: block;
  max-width: 200px;
  max-height: 96px;
  width: auto;
  height: auto;
  margin: 0 auto 1rem;
  object-fit: contain;
}

/* The page's primary heading: the event title is the most prominent thing on
   the landing page, sitting above the focused signup card. Mixed-case (no
   uppercase) so long event names don't artificially eat horizontal space; the
   shell width allows up to ~64rem before any wrap. */
.lumi-shell__masthead {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0;
}

.lumi-shell__content {
  width: 100%;
  /* Hold the signup form to its original narrow column even though the shell
     itself is wide (to accommodate long event titles in the masthead). The
     approver portal overrides this below so its contacts table can use the
     full shell width. */
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lumi-shell--portal .lumi-shell__content {
  max-width: none;
}

.lumi-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lumi-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--color-ink);
  margin: 0;
}

.lumi-card__lede {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-secondary);
  margin: 0;
}

/* Optional event-specific welcome/instructions copy (BEM settings). Sits
   between the lede and the form; paragraphs come from simple_format. */
.lumi-card__intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

.lumi-card__intro p {
  margin: 0 0 0.75rem;
}

.lumi-card__intro p:last-child {
  margin-bottom: 0;
}

.lumi-form {
  gap: 1.25rem;
}

.lumi-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.lumi-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.lumi-field--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lumi-field--inline label {
  flex: 0 1 auto;
}

.lumi-field--inline .field-hint {
  flex-basis: 100%;
}

/* Best-effort, admin-confirmable defaults sourced from EventsAir. Accent
   colour marks them apart from the static explanatory field hints. */
.field-hint--suggested {
  color: var(--color-accent);
  font-weight: 500;
}

.bem-admin-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.bem-admin-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.bem-admin-section__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-ink);
}

input[type="submit"].lumi-form__submit,
button[type="submit"].lumi-form__submit {
  align-self: stretch;
  min-height: 44px;
}

input[type="text"].lumi-otp-input {
  font-feature-settings: "tnum";
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.125rem;
}

/* Type-to-filter store picker. The text input reuses the base input styling;
   the listbox floats below it, matching the org-switcher dropdown treatment. */
.lumi-combobox {
  position: relative;
}

.lumi-combobox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.lumi-combobox__list[hidden] {
  display: none;
}

.lumi-combobox__option {
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-ink);
  cursor: pointer;
}

.lumi-combobox__option[hidden] {
  display: none;
}

.lumi-combobox__option:hover,
.lumi-combobox__option--active {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-hover);
}

.lumi-combobox__empty {
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--color-ink-tertiary);
}

.lumi-combobox__empty[hidden] {
  display: none;
}

.lumi-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  animation: lumi-loading-fade-in 200ms ease-out;
}

.lumi-loading-panel[hidden] {
  display: none;
}

.lumi-loading__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  animation: lumi-loading-spin 800ms linear infinite;
}

.lumi-loading__message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-secondary);
  text-align: center;
}

@keyframes lumi-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes lumi-loading-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lumi-loading__spinner,
  .lumi-loading-panel {
    animation: none;
  }
}

@media (max-width: 480px) {
  .lumi-shell {
    padding: 2.5rem 1rem 2rem;
  }

  .lumi-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ---- AIMGroup attendee shell ---- */
.aimgroup-body {
  background: var(--color-surface);
  min-height: 100vh;
  margin: 0;
}

.aimgroup-shell {
  max-width: 30rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Wider shell for the approver portal if needed in the future. */
.aimgroup-shell--portal {
  max-width: 64rem;
  padding: 2.5rem 1.5rem 2.5rem;
  gap: 1.5rem;
}

.aimgroup-shell__header {
  text-align: center;
}

.aimgroup-shell__masthead {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  margin: 0;
}

.aimgroup-shell__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.aimgroup-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.aimgroup-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--color-ink);
  margin: 0;
}

.aimgroup-card__lede {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-secondary);
  margin: 0;
}

.aimgroup-form {
  gap: 1.25rem;
}

.aimgroup-field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.aimgroup-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.aimgroup-field--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.aimgroup-field--inline label {
  flex: 0 1 auto;
}

.aimgroup-field--inline .field-hint {
  flex-basis: 100%;
}

input[type="submit"].aimgroup-form__submit,
button[type="submit"].aimgroup-form__submit {
  align-self: stretch;
  min-height: 44px;
}

input[type="text"].aimgroup-otp-input {
  font-feature-settings: "tnum";
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.125rem;
}

.aimgroup-combobox {
  position: relative;
}

.aimgroup-combobox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.aimgroup-combobox__list[hidden] {
  display: none;
}

.aimgroup-combobox__option {
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-ink);
  cursor: pointer;
}

.aimgroup-combobox__option[hidden] {
  display: none;
}

.aimgroup-combobox__option:hover,
.aimgroup-combobox__option--active {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-hover);
}

.aimgroup-combobox__empty {
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: var(--color-ink-tertiary);
}

.aimgroup-combobox__empty[hidden] {
  display: none;
}

.aimgroup-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  animation: aimgroup-loading-fade-in 200ms ease-out;
}

.aimgroup-loading-panel[hidden] {
  display: none;
}

.aimgroup-loading__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  animation: aimgroup-loading-spin 800ms linear infinite;
}

.aimgroup-loading__message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-secondary);
  text-align: center;
}

@keyframes aimgroup-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aimgroup-loading-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aimgroup-loading__spinner,
  .aimgroup-loading-panel {
    animation: none;
  }
}

@media (max-width: 480px) {
  .aimgroup-shell {
    padding: 2.5rem 1rem 2rem;
  }

  .aimgroup-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ---- Approver portal ---- */

.approvals-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.approvals-header h1 {
  margin: 0;
}

.approvals-header__refresh-form {
  margin: 0;
}

.approvals-warning {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  margin: 0 0 1.25rem;
}

.approvals-filter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.approvals-filter__pills {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  margin: 0;
}

.approvals-filter__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-secondary);
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.12s ease,
    background-color 0.12s ease;
}

.approvals-filter__pill:hover {
  color: var(--color-ink);
}

.approvals-filter__pill.is-active {
  background: var(--color-surface-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}

.approvals-filter__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.approvals-filter__pill:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.approvals-filter__search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 14rem;
  min-width: 12rem;
  margin: 0;
}

.approvals-filter__search-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.approvals-filter__search input {
  flex: 1;
  min-width: 0;
}

.approvals-filter__submit {
  align-self: flex-start;
}

.approvals-table-wrapper {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.approvals-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.approvals-table th,
.approvals-table td {
  padding: 0.9375rem 1.125rem;
  text-align: left;
  vertical-align: middle;
  font-size: 0.875rem;
  color: var(--color-ink-secondary);
  border-bottom: 1px solid var(--color-border);
}

.approvals-table th {
  background: var(--color-surface);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
}

.approvals-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Whole-row click target. Each row carries `role="link"` + `tabindex="0"`
   plus a clickable-row Stimulus controller, so cursor + hover + focus styles
   should match a real link. The accent-subtle hover wash + chevron color
   shift make the click target obvious without needing a visible button. */
.approvals-table tbody tr.approvals-row {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.approvals-table tbody tr.approvals-row:hover {
  background-color: var(--color-accent-subtle);
}

.approvals-table tbody tr.approvals-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.approvals-table__chevron-col {
  width: 2.25rem;
  padding: 0;
}

.approvals-row__chevron {
  width: 2.25rem;
  padding-left: 0;
  padding-right: 1rem;
  text-align: right;
  color: var(--color-ink-tertiary);
  transition:
    color 0.12s ease,
    transform 0.12s ease;
  line-height: 0;
}

.approvals-row__chevron-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.approvals-table tbody tr.approvals-row:hover .approvals-row__chevron,
.approvals-table tbody tr.approvals-row:focus-visible .approvals-row__chevron {
  color: var(--color-accent);
  transform: translateX(2px);
}

.approvals-row__id {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-tertiary);
  white-space: nowrap;
}

.approvals-row__first-name,
.approvals-row__last-name {
  color: var(--color-ink);
  font-weight: 500;
}

.approvals-row--decided {
  color: var(--color-ink-tertiary);
}

.approvals-row--decided .approvals-row__first-name,
.approvals-row--decided .approvals-row__last-name {
  color: var(--color-ink-secondary);
  font-weight: 400;
}

.approvals-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.approvals-status-pill__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
}

.approvals-status-pill--pending {
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  border: 1px solid var(--color-border);
}

.approvals-status-pill--approved {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.approvals-status-pill--denied {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

.approvals-status-pill--unconfigured {
  background: var(--color-surface);
  color: var(--color-ink-tertiary);
  border: 1px solid var(--color-border);
}

.approvals-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.approvals-actions__form {
  display: inline-flex;
  margin: 0;
}

.approvals-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4375rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 32px;
  transition:
    background-color 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease;
}

input[type="submit"].approvals-action {
  min-height: 32px;
}

.approvals-action--approve,
input[type="submit"].approvals-action--approve {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.approvals-action--approve:hover,
input[type="submit"].approvals-action--approve:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.approvals-action--decline {
  background: var(--color-surface-raised);
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.approvals-action--decline:hover {
  background: var(--color-surface);
  border-color: var(--color-ink-tertiary);
  color: var(--color-danger);
}

.approvals-action--cancel {
  background: var(--color-surface);
  color: var(--color-ink-secondary);
  border-color: var(--color-border);
}

.approvals-action--cancel:hover {
  background: var(--color-surface-raised);
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

/* Compound selectors needed because the global `input[type="submit"]:hover`
   rule has higher specificity than a bare `.approvals-action--refresh:hover`
   would; without these, the default blue submit-hover paints over our
   styling and renders dark text on dark blue. */
.approvals-action--refresh,
input[type="submit"].approvals-action--refresh,
button[type="submit"].approvals-action--refresh {
  background: var(--color-surface-raised);
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  gap: 0.4em;
}

.approvals-action--refresh:hover,
input[type="submit"].approvals-action--refresh:hover,
button[type="submit"].approvals-action--refresh:hover {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.approvals-action--refresh__icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.approvals-action--confirm-decline,
input[type="submit"].approvals-action--confirm-decline {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.approvals-action--confirm-decline:hover,
input[type="submit"].approvals-action--confirm-decline:hover {
  background: #a02208;
  border-color: #a02208;
}

.approvals-action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.approvals-action.is-processing {
  cursor: wait;
  opacity: 0.85;
  pointer-events: none;
  position: relative;
  padding-left: 2rem;
}

.approvals-action.is-processing::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.4375rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: lumi-loading-spin 800ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .approvals-action.is-processing::before {
    animation: none;
  }
}

.approvals-empty {
  background: var(--color-surface-raised);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-ink-tertiary);
  margin: 0 0 1.5rem;
}

/* Native <dialog> overrides */
.approvals-dialog {
  width: min(28rem, calc(100% - 2rem));
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}

.approvals-dialog::backdrop {
  background: rgba(15, 17, 20, 0.4);
  backdrop-filter: blur(2px);
}

.approvals-dialog[open] {
  animation: approvals-dialog-in 120ms ease-out;
}

.approvals-dialog__title {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.approvals-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.approvals-dialog__field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.approvals-dialog__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink);
}

.approvals-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

@keyframes approvals-dialog-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .approvals-dialog[open],
  .approvals-action,
  .approvals-filter__pill {
    animation: none;
    transition: none;
  }
}

/* Reflow the table to a card-per-contact layout on narrow viewports.
   Each card is a tappable link to the detail page. */
@media (max-width: 720px) {
  .approvals-table-wrapper {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .approvals-table,
  .approvals-table tbody,
  .approvals-table tr,
  .approvals-table td {
    display: block;
    width: 100%;
  }

  .approvals-table thead {
    display: none;
  }

  .approvals-table tbody tr.approvals-row {
    position: relative;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 2.5rem 1rem 1.125rem;
    margin-bottom: 0.625rem;
    box-shadow: var(--shadow-sm);
    transition:
      background-color 0.12s ease,
      border-color 0.12s ease,
      box-shadow 0.12s ease;
  }

  .approvals-table tbody tr.approvals-row:hover {
    background-color: var(--color-accent-subtle);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
  }

  .approvals-table tbody tr.approvals-row:focus-visible {
    background-color: var(--color-accent-subtle);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    outline: none;
  }

  .approvals-table tbody tr.approvals-row:last-child {
    margin-bottom: 0;
  }

  .approvals-table td {
    padding: 0.1875rem 0;
    border-bottom: 0;
    font-size: 0.875rem;
  }

  .approvals-table td:empty {
    display: none;
  }

  .approvals-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ink-tertiary);
    margin-bottom: 0.125rem;
  }

  /* Pin the chevron to the top-right of the card so the click affordance
     stays visible without taking up its own labelled row. */
  .approvals-row__chevron {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
    padding: 0;
    text-align: right;
  }

  .approvals-row__chevron::before {
    display: none;
  }

  .approvals-row__first-name,
  .approvals-row__last-name {
    font-size: 1rem;
  }

  .approvals-row__status {
    margin-top: 0.5rem;
  }

  .approvals-filter__pills {
    width: 100%;
    justify-content: space-between;
  }

  .approvals-filter__pill {
    flex: 1;
    justify-content: center;
  }

  .approvals-filter__search {
    width: 100%;
  }
}

/* ============================================
   Approvals — Detail (show)
   Editorial header + paired information cards.
   ============================================ */

.approvals-show__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-tertiary);
  text-decoration: none;
  margin-bottom: 1.5rem;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--radius-sm);
  transition:
    color 120ms ease,
    background 120ms ease;
}

.approvals-show__back:hover {
  color: var(--color-ink);
  background: var(--color-surface-raised);
}

.approvals-show__back:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.approvals-show__back-icon {
  width: 14px;
  height: 14px;
  transition: transform 160ms ease;
}

.approvals-show__back:hover .approvals-show__back-icon {
  transform: translateX(-2px);
}

.approvals-show__header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}

.approvals-show__avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: none;
}

.approvals-show__identity {
  min-width: 0;
  flex: 1;
}

.approvals-show__name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 0.5rem;
  line-height: 1.15;
  color: var(--color-ink);
  word-break: break-word;
}

.approvals-show__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.approvals-show__registration {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.25rem 0.625rem;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approvals-show__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.approvals-show__card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
}

.approvals-show__card-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  margin: 0 0 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-border);
}

.approvals-show__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
  margin: 0;
}

.approvals-show__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
  min-width: 0;
}

@media (min-width: 32rem) {
  .approvals-show__row {
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    gap: 1.25rem;
    align-items: baseline;
  }
}

.approvals-show__row dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  margin: 0;
}

.approvals-show__row dd {
  font-size: 0.9375rem;
  color: var(--color-ink);
  margin: 0;
  word-break: break-word;
  min-width: 0;
}

.approvals-show__email {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 120ms ease,
    color 120ms ease;
}

.approvals-show__email:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.approvals-show__id-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.approvals-show__address {
  line-height: 1.5;
}

/* Document chip — used by detail_field_helper for DOCUMENT custom fields. */
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  max-width: 100%;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.3;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}

.doc-chip:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.doc-chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.doc-chip__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.doc-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Decision bar — placed at the top of the detail page (right under the
   header) when the contact is still pending and the approval workflow is
   configured. Surfaces the primary CTA before the supporting context. */
.approvals-show__decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.75rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.approvals-show__decision-meta {
  flex: 1 1 16rem;
  min-width: 0;
}

.approvals-show__decision-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}

.approvals-show__decision-help {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-ink-tertiary);
}

.approvals-show__decision-actions {
  flex: 0 0 auto;
}

@media (max-width: 32rem) {
  .approvals-show__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .approvals-show__avatar {
    width: 52px;
    height: 52px;
    font-size: 1.125rem;
  }

  .approvals-show__name {
    font-size: 1.5rem;
  }

  .approvals-show__card {
    padding: 1.25rem;
  }

  .approvals-show__decision {
    padding: 1.25rem;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .approvals-show__decision-actions {
    width: 100%;
  }
}

/* ============================================
   Brella Sync & Configurations — Aesthetics
   ============================================ */
.recurring-sync-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
  background-color: var(--color-surface-raised);
}

.recurring-sync-fieldset legend {
  padding: 0 0.5rem;
  font-weight: 600;
  color: var(--color-ink);
}

.form-checkbox-row, .form-select-row {
  margin-bottom: 1.25rem;
}

.form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox-row label {
  font-weight: 500;
  cursor: pointer;
}

.form-select-row label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.form-select-row select {
  width: 100%;
  max-width: 20rem;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-raised);
  font-family: var(--font-body);
}

.form-help-text {
  font-size: 0.8125rem;
  color: var(--color-ink-tertiary);
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.recurring-sync-fieldset textarea {
  font-family: monospace;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.sync-progress-banner {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease-in-out;
}

.sync-progress-banner--pending {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
}

.sync-progress-banner--syncing {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-border);
}

.sync-progress-banner--completed {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.sync-progress-banner--failed {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.sync-progress-banner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.sync-progress-banner__stats {
  display: flex;
  gap: 1.5rem;
  font-size: 0.875rem;
}

.sync-progress-banner__stat {
  display: flex;
  flex-direction: column;
}

.sync-progress-banner__label {
  color: var(--color-ink-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.sync-progress-banner__number {
  font-size: 1.25rem;
  font-weight: 700;
}

.sync-progress-banner__error {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
}