/* ============================================
   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;

  /* MCI portal brand: pink = actions, mint/amber/gray = status glyph tones.
     Scoped to .mci-* so the global blue --color-accent is left untouched. */
  --mci-accent: #e31c79;
  --mci-accent-hover: #c4156a;
  --mci-accent-subtle: #fce7f1;
  /* Brand pink, darkened just enough to clear WCAG AA (4.5:1) as text/button
     fill on white and the gray shell; --mci-accent stays for glyphs/focus. */
  --mci-accent-strong: #d81873;
  /* Deeper still for active nav text/icons, which sit on the pink tint
     (--mci-accent-subtle) where --mci-accent-strong only reaches 4.15:1. */
  --mci-accent-on-tint: #b01361;
  --mci-info-fg: #0a6e57;
  --mci-info-bg: #e2f6f0;
  --mci-info-border: #bfe8dc;
  --mci-amber-fg: #855a10;
  --mci-amber-bg: #fbf0dc;
  --mci-gray-fg: #5b6170;
  --mci-gray-bg: #f1f1f4;
  /* Authenticated admin shell dimensions (design handoff: shell.jsx). */
  --mci-topbar-h: 64px;
  --mci-sidebar-w: 280px;

  --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;
}

.main-content form.form--wide {
  max-width: none;
}

/* ---- 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;
}

/* A setting that is saveable but leaves a flow unable to do anything (e.g. a
   blank government ticket limit, which silently denies every agency). */
.field-hint--warning {
  color: var(--color-danger);
  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%;
  }
}

/* ============================================
   Simple Login — Aesthetics
   ============================================ */
.simple-login__header {
  max-width: 550px;
  margin: 0 auto;
  text-align: center;
}

/* ============================================
   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;
}

/* ---- MCI portal (pre-auth shell + auth cards) ---- */
.mci-body {
  background: var(--color-surface);
  min-height: 100vh;
  margin: 0;
}

.mci-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mci-shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.mci-shell__logo {
  height: 1.875rem;
  width: auto;
  display: block;
}

.mci-shell__support {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-secondary);
}

.mci-shell__support-link {
  font-weight: 600;
  color: var(--mci-accent-strong);
}

.mci-shell__support-link:hover {
  color: var(--mci-accent-hover);
}

.mci-shell__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Auth card */
.mci-card {
  width: 100%;
  max-width: 430px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2rem 2rem 1.75rem;
}

.mci-card--centered {
  text-align: center;
}

.mci-card__title {
  font-size: 1.4375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--color-ink);
  margin: 0;
}

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

.mci-card__lede strong {
  font-weight: 700;
  color: var(--color-ink);
}

/* Notice shown on the sign-in card when a session was bounced back here (e.g. a
   signed-in email with no resolvable contact yet). */
.mci-card__notice {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--mci-amber-bg);
  border: 1px solid #f0d9a8;
  color: var(--mci-amber-fg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Form + fields */
.mci-form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-top: 1.375rem;
}

.mci-form--hidden {
  display: none;
}

.mci-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: left;
}

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

.mci-field input:focus {
  border-color: var(--mci-accent);
  box-shadow: 0 0 0 3px var(--mci-accent-subtle);
}

.mci-field--invalid input,
.mci-field input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.mci-field-error {
  font-size: 0.8125rem;
  color: var(--color-danger);
  margin: 0;
}

/* Buttons. Scoped under .mci-card so they beat the global input[type=submit]
   rule (which is more specific than a lone class) — submits and link-buttons
   then render identically in pink, without restyling the globals. */
.mci-card .mci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-height: 42px;
  padding: 0.5625rem 1.25rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.mci-card .mci-btn--full {
  width: 100%;
}

.mci-card .mci-btn--primary {
  color: #fff;
  background-color: var(--mci-accent-strong);
}

.mci-card .mci-btn--primary:hover {
  background-color: var(--mci-accent-hover);
  color: #fff;
  text-decoration: none;
}

.mci-card .mci-btn--primary:active {
  transform: scale(0.985);
}

.mci-card .mci-btn--ghost {
  color: var(--color-ink);
  background-color: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

.mci-card .mci-btn--ghost:hover {
  background-color: #f2f2f6;
}

.mci-card .mci-btn:disabled,
.mci-card .mci-btn[disabled],
.mci-card .mci-btn[aria-disabled="true"],
.mci-card .mci-btn:disabled:hover {
  color: var(--color-ink-secondary);
  background-color: var(--mci-gray-bg);
  border-color: var(--color-border);
  cursor: not-allowed;
  transform: none;
}

.mci-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.375rem;
}

.mci-btn-stack .mci-form {
  margin-top: 0;
}

/* Status glyph tiles */
.mci-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}

.mci-glyph svg {
  width: 26px;
  height: 26px;
}

.mci-glyph--mint {
  background: var(--mci-info-bg);
  color: var(--mci-info-fg);
}

.mci-glyph--amber {
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
}

.mci-glyph--gray {
  background: var(--mci-gray-bg);
  color: var(--mci-gray-fg);
}

.mci-glyph--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.mci-glyph--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: 999px;
}

/* Mint informational row (sign-in page footer) */
.mci-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.125rem;
  padding: 0.6875rem 0.8125rem;
  background: var(--mci-info-bg);
  border: 1px solid var(--mci-info-border);
  border-radius: var(--radius-md);
  text-align: left;
}

.mci-info-row svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--mci-info-fg);
}

.mci-info-row p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mci-info-fg);
}

/* Interstitial spinner */
.mci-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-bottom: 1rem;
  border: 3px solid var(--mci-accent-subtle);
  border-top-color: var(--mci-accent);
  border-radius: 999px;
  animation: mci-spin 0.8s linear infinite;
}

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

/* Links + fine print */
.mci-link {
  color: var(--mci-accent-strong);
  font-weight: 600;
}

/* Visible keyboard focus for the pre-auth controls (buttons + accent links),
   matching the pink ring used on inputs. */
.mci-card .mci-btn:focus-visible,
.mci-shell__support-link:focus-visible,
.mci-link:focus-visible,
.mci-link--muted:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

/* Visually hidden but available to screen readers (live-region announcements). */
.mci-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mci-spinner {
    animation-duration: 2s;
  }
}

.mci-link--muted {
  display: inline-block;
  margin-top: 1rem;
  color: var(--color-ink-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

.mci-fine-print {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
}

/* ---- MCI portal (authenticated admin shell) ---- */
/* Skip past the fixed top bar and sidebar straight to the content. */
.mci-skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 50;
  padding: 8px 14px;
  background: var(--color-surface-raised);
  color: var(--mci-accent-strong);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.15s ease;
}

.mci-skip-link:focus {
  top: 8px;
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-app__content:focus {
  outline: none;
}

/* Full-height frame: the top bar stays put while the sidebar and content area
   each scroll independently. */
.mci-app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
}

.mci-app__topbar {
  flex: 0 0 var(--mci-topbar-h);
  height: var(--mci-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}

.mci-app__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.mci-app__sidebar {
  flex: 0 0 var(--mci-sidebar-w);
  width: var(--mci-sidebar-w);
  padding: 1.125rem 1rem;
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
}

.mci-app__content {
  flex: 1;
  min-width: 0;
  padding: 2rem;
  overflow-y: auto;
}

/* Top bar — brand cluster */
.mci-topbar__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mci-topbar__logo {
  height: 1.875rem;
  width: auto;
  display: block;
}

.mci-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
}

/* Top bar — account chip + menu */
.mci-account {
  position: relative;
}

.mci-account__chip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 6px 10px 6px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-body);
}

.mci-account__chip:hover {
  background: var(--color-surface);
}

.mci-account__chip[aria-expanded="true"] {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.mci-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--mci-accent);
  color: #fff;
  font-size: 0.78125rem;
  font-weight: 700;
}

.mci-account__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.mci-account__name {
  font-size: 0.84375rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-account__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.mci-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--mci-info-fg);
  background: var(--mci-info-bg);
  border-radius: 4px;
  padding: 1px 5px;
}

.mci-account__org {
  font-size: 0.71875rem;
  color: var(--color-ink-secondary);
}

.mci-account__chevron {
  display: inline-flex;
  color: var(--color-ink-secondary);
  transition: transform 0.15s ease;
}

.mci-account__chevron svg {
  width: 16px;
  height: 16px;
}

.mci-account__chip[aria-expanded="true"] .mci-account__chevron {
  transform: rotate(180deg);
}

.mci-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 288px;
  padding: 7px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(16, 18, 40, 0.16);
  z-index: 30;
  display: none;
}

.mci-menu.is-open {
  display: block;
}

.mci-menu__header {
  padding: 8px 10px 10px;
}

.mci-menu__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink);
}

.mci-menu__detail {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--color-ink-secondary);
}

.mci-menu__divider {
  height: 1px;
  margin: 7px 4px;
  background: var(--color-border);
}

.mci-menu form {
  margin: 0;
}

/* Scoped under .mci-menu so it beats the global submit-button rule (which would
   otherwise paint Log out as a filled accent button), matching how .mci-card
   buttons override the same global. */
.mci-menu .mci-menu__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  min-height: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-ink-secondary);
  font-family: var(--font-body);
  font-size: 0.84375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mci-menu .mci-menu__item:hover {
  background: var(--color-surface);
}

.mci-menu .mci-menu__item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Sidebar navigation */
.mci-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mci-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.mci-nav-item:hover {
  background: var(--color-surface);
}

.mci-nav-item svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #71768a;
}

.mci-nav-item--active {
  background: var(--mci-accent-subtle);
  color: var(--mci-accent-on-tint);
  font-weight: 650;
}

.mci-nav-item--active svg {
  color: var(--mci-accent-on-tint);
}

.mci-sidebar__section {
  margin-top: 1.125rem;
}

.mci-sidebar__label {
  padding: 0 12px 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5f6475;
}

.mci-sidebar__group {
  margin-left: 9px;
  padding-left: 13px;
  border-left: 1.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Admin page header + stat cards */
.mci-page {
  max-width: 1000px;
}

.mci-page__title {
  margin: 0;
  font-size: 1.9375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-ink);
}

.mci-page__sub {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--color-ink-secondary);
}

.mci-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.mci-stat {
  flex: 1;
  min-width: 200px;
  padding: 18px 20px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-stat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mci-stat__label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--color-ink-secondary);
}

.mci-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--mci-info-bg);
  color: var(--mci-info-fg);
}

.mci-stat__icon svg {
  width: 16px;
  height: 16px;
}

.mci-stat__value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}

.mci-stat__value {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-ink);
}

.mci-stat__sub {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-secondary);
}

/* Reports screen (Epic 8 / A5): a report rail + a panel. */
.mci-reports {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 20px;
  margin-top: 24px;
}

.mci-reports__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  align-self: start;
}

.mci-reports__rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 9px;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.mci-reports__rail-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--color-ink-tertiary);
}

.mci-reports__rail-item:hover {
  background: var(--color-surface);
}

.mci-reports__rail-item--active {
  background: var(--mci-accent-soft, #fce7f1);
  color: var(--mci-accent-on-tint, #b01361);
  font-weight: 650;
}

.mci-reports__rail-item--active svg {
  color: var(--mci-accent-on-tint, #b01361);
}

.mci-reports__panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.mci-reports__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.mci-reports__name {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-reports__caption {
  margin: 2px 0 0;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

.mci-reports__export {
  padding: 7px 12px;
  font-size: 0.8125rem;
  text-decoration: none;
}

.mci-reports__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mci-reports__table {
  width: 100%;
  border-collapse: collapse;
}

.mci-reports__table th {
  padding: 12px 16px;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.mci-reports__table th.mci-reports__th--num {
  text-align: right;
}

.mci-reports__cell {
  padding: 13px 16px;
  font-size: 0.875rem;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}

.mci-reports__table tbody tr:last-child .mci-reports__cell {
  border-bottom: 0;
}

.mci-reports__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.mci-reports__cell--ok {
  color: #1b7a43;
}

.mci-reports__cell--low {
  color: var(--mci-amber-fg);
}

.mci-reports__empty {
  margin: 0;
  padding: 48px 20px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-ink-secondary);
}

/* Amber accent for the "Pending approvals" stat (Story 6.4). */
.mci-stat--amber {
  border-color: #f0dcb6;
  background: linear-gradient(180deg, #fffaf1, var(--color-surface-raised));
}

.mci-stat--amber .mci-stat__icon {
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
}

/* Dashboard cards row: pending approvals preview + quick actions (Stories 6.4 / 8.11). */
.mci-dash-cards {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  margin-top: 24px;
  align-items: start;
}

@media (max-width: 720px) {
  .mci-dash-cards {
    grid-template-columns: 1fr;
  }
}

.mci-quick {
  padding: 22px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-quick__title {
  margin: 0 0 14px;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-quick__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mci-quick__action {
  justify-content: flex-start;
  width: 100%;
  text-decoration: none;
}

/* Capacity screen (Epic 11 / A8). */
.mci-cap__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mci-cap__section-label {
  margin: 24px 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.mci-cap {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.mci-cap__row {
  display: grid;
  grid-template-columns: 180px 1fr 150px 110px;
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--color-border);
}

.mci-cap__row:last-child {
  border-bottom: 0;
}

.mci-cap__row--head {
  padding: 12px 20px;
  background: #fbfbfd;
}

.mci-cap__row--head span {
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9dad;
}

.mci-cap__num {
  text-align: right;
}

.mci-cap__month {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-cap__tag {
  margin-left: 7px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mci-accent-on-tint, var(--mci-accent-strong));
}

.mci-cap__bar {
  display: block;
  height: 10px;
  background: var(--mci-gray-bg);
  border-radius: 999px;
  overflow: hidden;
}

.mci-cap__bar-fill {
  display: block;
  height: 100%;
  background: var(--mci-accent-strong);
  border-radius: 999px;
  transition: width 0.3s;
}

.mci-cap__bar-fill--amber {
  background: var(--mci-amber-fg);
}

.mci-cap__booked {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-cap__left {
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-success);
}

.mci-cap__left--amber {
  color: var(--mci-amber-fg);
}

.mci-cap__left--red {
  color: var(--color-danger);
}

.mci-cap__left-unit {
  font-size: 0.75rem;
  color: var(--color-ink-secondary);
}

.mci-cap__not-configured {
  font-size: 0.8125rem;
  color: var(--color-ink-tertiary, var(--color-ink-secondary));
}

.mci-cap__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

.mci-cap__footer svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Settings screen (Epic 10 / A7). */
.mci-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
  max-width: 760px;
}

.mci-settings-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
  overflow: hidden;
}

.mci-settings-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 0;
}

.mci-settings-card__title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-settings-card__desc {
  margin: 6px 0 0;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
}

.mci-settings-card__body {
  padding: 16px 22px 4px;
}

.mci-settings-card__footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 22px 18px;
}

.mci-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mci-field--narrow {
  max-width: 420px;
}

.mci-field__label {
  font-size: 0.84375rem;
  font-weight: 650;
  color: var(--color-ink);
}

/* Branding card (Story 10.2). */
.mci-branding {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mci-branding__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 76px;
  border-radius: 10px;
  flex: 0 0 auto;
}

.mci-branding__preview--empty {
  border: 1.5px dashed #c9cbe0;
  background: #fbfbfd;
}

.mci-branding__preview--set {
  border: 1.5px dashed var(--mci-accent-strong);
  background: var(--mci-lav-bg, #f6f5fd);
}

.mci-branding__logo {
  max-width: 144px;
  max-height: 56px;
  object-fit: contain;
}

.mci-branding__placeholder {
  font-size: 0.75rem;
  font-weight: 650;
  color: #9a9db8;
}

.mci-branding__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.mci-branding__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mci-branding__pick {
  cursor: pointer;
}

.mci-branding__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
}

.mci-topbar__client-logo {
  max-height: 30px;
  max-width: 140px;
  object-fit: contain;
}

/* Sign-in access card (Story 10.3). */
.mci-domains__toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mci-domains__toggle-copy {
  max-width: 420px;
}

.mci-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 44px;
  height: 26px;
  cursor: pointer;
}

.mci-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.mci-switch__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background 0.15s;
}

.mci-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.25);
  transition: transform 0.15s;
}

.mci-switch input:checked + .mci-switch__track {
  background: var(--mci-accent-strong);
}

.mci-switch input:checked + .mci-switch__track .mci-switch__thumb {
  transform: translateX(18px);
}

.mci-switch input:focus-visible + .mci-switch__track {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-domains__section--off {
  opacity: 0.45;
  pointer-events: none;
}

.mci-domains__heading {
  margin-bottom: 9px;
}

.mci-domains__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.mci-domains__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: var(--mci-gray-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.84375rem;
  font-weight: 600;
}

.mci-domains__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.mci-domains__chip-remove svg {
  width: 13px;
  height: 13px;
}

.mci-domains__chip-remove:hover {
  background: #e4e4ea;
}

.mci-domains__empty {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-domains__add {
  display: flex;
  gap: 9px;
  max-width: 420px;
}

.mci-domains__input {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 9px;
}

.mci-domains__at {
  color: var(--color-ink-secondary);
  font-size: 0.90625rem;
}

.mci-domains__input input {
  flex: 1;
  border: 0;
  outline: none;
  font-size: 0.875rem;
  font-family: inherit;
  background: transparent;
}

.mci-domains__input:focus-within {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-domains__chip-remove:focus-visible,
.mci-faq__move:focus-visible,
.mci-faq__action:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

/* Keyboard focus lands on the visually-hidden file input; surface it on the
   styled "Upload logo" label so the control's focus is visible. */
.mci-branding__pick:has(+ input:focus-visible) {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

/* Member defaults card (Story 10.4). */
.mci-stepper--big .mci-stepper__btn {
  width: 38px;
  height: 38px;
}

.mci-stepper--big .mci-stepper__value {
  min-width: 2.5rem;
  font-size: 1.125rem;
}

.mci-members__defaults-note,
.mci-invite__defaults {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-members__defaults-note a {
  color: var(--mci-accent-strong);
  font-weight: 650;
}

/* Help & FAQ card (Stories 10.5–10.8). */
.mci-settings-card__head-copy {
  flex: 1;
  min-width: 0;
}

.mci-faqs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mci-faqs__empty {
  padding: 24px 0;
  text-align: center;
}

.mci-faqs__empty-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-ink);
}

.mci-faqs__empty-sub {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-faq {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.mci-faq__reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}

.mci-faq__move-form,
.mci-faq__action-form {
  display: contents;
}

/* These reorder/delete controls are button_to forms, i.e. <button type="submit">,
   which the global submit-button style would paint solid accent-blue with a
   white icon and a 40px min-height. Scope them under their container so they win
   on specificity and read as bare icon buttons. */
.mci-faq__reorder .mci-faq__move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  min-height: 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.mci-faq__reorder .mci-faq__move svg {
  width: 13px;
  height: 13px;
}

.mci-faq__reorder .mci-faq__move--up svg {
  transform: rotate(180deg);
}

.mci-faq__reorder .mci-faq__move:disabled {
  background-color: transparent;
  color: var(--color-ink-secondary);
  opacity: 0.3;
  cursor: default;
}

.mci-faq__content {
  flex: 1;
  min-width: 0;
}

.mci-faq__q {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 0.90625rem;
  font-weight: 700;
  color: var(--color-ink);
}

.mci-faq__a {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mci-faq__actions {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.mci-faq__actions .mci-faq__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background-color: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.mci-faq__actions .mci-faq__action svg {
  width: 16px;
  height: 16px;
}

.mci-faq__actions .mci-faq__action:hover {
  background-color: var(--mci-gray-bg);
}

.mci-faq__actions .mci-faq__action--danger:hover {
  color: var(--color-danger);
}

/* FAQ delete confirmation (Story 10.10): a centered modal reusing the drawer's
   backdrop + dismissal behaviour instead of the right slide-over. */
.mci-drawer--confirm .mci-drawer__panel {
  position: fixed;
  inset: 0;
  margin: auto;
  width: 420px;
  max-width: 92vw;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 92vh;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 18, 40, 0.24);
}

.mci-confirm {
  padding: 22px 24px 20px;
}

.mci-confirm__title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-confirm__body {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
}

.mci-confirm__question {
  margin: 12px 0 0;
  padding: 11px 13px;
  background: var(--mci-gray-bg);
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* The danger button carries an icon + label; .mci-btn has no gap of its own. */
.mci-confirm__actions .mci-btn {
  gap: 6px;
}

.mci-drawer--narrow .mci-drawer__panel {
  max-width: 460px;
}

/* Help Desk card (Story 9.1 / A6). */
.mci-help {
  max-width: 640px;
  margin-top: 24px;
  padding: 22px 24px 20px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-help__title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.1875rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-help__sub {
  margin: 6px 0 16px;
  font-size: 0.875rem;
  color: var(--color-ink-secondary);
}

.mci-help__textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  box-sizing: border-box;
}

.mci-help__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.mci-help__caption {
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

.mci-help--sent {
  text-align: left;
}

.mci-help--sent .mci-help__lede {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-ink-secondary);
}

.mci-help__again {
  margin-top: 14px;
}

/* Pending approvals preview card (Story 6.4). */
.mci-pending {
  padding: 6px 22px 18px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-pending__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 6px;
}

.mci-pending__title {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-pending__link {
  flex: 0 0 auto;
  font-size: 0.84375rem;
  font-weight: 650;
  color: var(--mci-accent-strong);
  text-decoration: none;
}

.mci-pending__link:hover {
  text-decoration: underline;
}

.mci-pending__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mci-pending__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--color-border);
}

.mci-pending__row:last-child {
  border-bottom: 0;
}

.mci-pending__who {
  flex: 1;
  min-width: 0;
}

.mci-pending__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-pending__course {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mci-pending__date {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
  white-space: nowrap;
}

.mci-pending__more {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-ink-tertiary);
  text-decoration: none;
}

.mci-pending__more:hover {
  text-decoration: underline;
}

.mci-pending__empty {
  margin: 0;
  padding: 28px 0;
  font-size: 0.875rem;
  color: var(--color-ink-secondary);
  text-align: center;
}

/* Visible keyboard focus for shell controls, matching the pink ring elsewhere. */
.mci-account__chip:focus-visible,
.mci-menu__item:focus-visible,
.mci-nav-item:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

/* ---- MCI admin: Registrations (A3) ---- */
.mci-page--wide {
  max-width: 1020px;
}

.mci-avatar--sm {
  width: 30px;
  height: 30px;
  font-size: 0.6875rem;
}

.mci-filter-card {
  margin: 22px 0 18px;
  padding: 16px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.mci-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.mci-input {
  height: 42px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink);
  background: var(--color-surface-raised);
  border: 1.5px solid var(--color-border);
  border-radius: 9px;
}

.mci-input--grow {
  flex: 1;
  min-width: 170px;
}

.mci-input--date {
  min-width: 150px;
}

.mci-select {
  cursor: pointer;
}

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

.mci-filter__dash {
  color: var(--color-ink-secondary);
  font-size: 0.8125rem;
}

.mci-reg-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mci-reg-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-groupby {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mci-groupby__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-ink-secondary);
}

.mci-segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  background: var(--mci-gray-bg);
  border-radius: 9px;
}

.mci-segmented__btn {
  padding: 6px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-ink-secondary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.mci-segmented__btn--on {
  background: var(--color-surface-raised);
  color: var(--color-ink);
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.1);
}

.mci-segmented__btn:focus-visible,
.mci-sort:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Flat table */
.mci-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.mci-table thead th {
  text-align: left;
  padding: 11px 16px;
  background: #fbfbfd;
  border-bottom: 1px solid var(--color-border);
}

.mci-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-ink);
  vertical-align: middle;
}

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

.mci-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f6475;
}

.mci-sort--active {
  color: var(--mci-accent-on-tint);
}

.mci-table__actions {
  width: 1%;
  white-space: nowrap;
}

.mci-reg-row__contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mci-reg-row__class,
.mci-reg-row__time {
  margin-top: 2px;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

.mci-reg-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
  margin-bottom: 16px;
  overflow: hidden;
}

.mci-reg-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fbfbfd;
  border-bottom: 1px solid var(--color-border);
}

.mci-reg-card__course {
  flex: 1;
  min-width: 0;
}

.mci-reg-card__name {
  font-size: 0.9375rem;
  font-weight: 750;
  color: var(--color-ink);
}

.mci-reg-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 5px;
}

.mci-reg-card__fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

.mci-reg-card__fact svg {
  width: 13px;
  height: 13px;
}

.mci-reg-card__count {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--mci-gray-bg);
  color: var(--color-ink-secondary);
  font-size: 0.78125rem;
  font-weight: 650;
  white-space: nowrap;
}

.mci-reg-rows {
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.mci-reg-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
}

.mci-reg-row:last-child {
  border-bottom: none;
}

.mci-reg-row__name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status chips */
.mci-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78125rem;
  font-weight: 650;
  white-space: nowrap;
}

.mci-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentcolor;
}

.mci-chip--green {
  background: #e7f6ec;
  color: #1b7a43;
}

.mci-chip--amber {
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
}

.mci-chip--mint {
  background: var(--mci-info-bg);
  color: var(--mci-info-fg);
}

.mci-chip--gray {
  background: var(--mci-gray-bg);
  color: var(--mci-gray-fg);
}

/* Quiet link (course names): inherits colour, underlines on hover. */
.mci-link-quiet {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mci-link-quiet:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Right slide-over (course details + later action drawers) */
.mci-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 40, 0.32);
  z-index: 50;
}

.mci-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  box-shadow: -12px 0 40px rgba(16, 18, 40, 0.14);
  z-index: 51;
}

.mci-drawer__panel:focus {
  outline: none;
}

.mci-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
}

.mci-drawer__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.mci-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.mci-drawer__close:hover {
  background: var(--color-surface);
}

.mci-drawer__close svg {
  width: 18px;
  height: 18px;
}

.mci-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 24px;
}

.mci-drawer__footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}

.mci-drawer__footer .mci-btn {
  flex: 1;
}

.mci-drawer__panel--wide {
  width: 520px;
}

/* Page header row: title/sub on the left, a primary action on the right. */
.mci-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Add-members-to-a-course slide-over (Epic 7). */
.mci-enroll__step {
  margin-bottom: 22px;
}

.mci-enroll__step:last-child {
  margin-bottom: 0;
}

.mci-enroll__label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.78125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-tertiary);
}

.mci-enroll__course {
  width: 100%;
}

.mci-enroll__seats {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-ink-secondary);
}

.mci-enroll__seats svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.mci-enroll__seats--full {
  color: var(--color-danger);
}

.mci-enroll__empty {
  margin: 0;
  padding: 26px 16px;
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  font-size: 0.84375rem;
  color: var(--color-ink-secondary);
  text-align: center;
}

.mci-enroll__members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mci-enroll__member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
}

.mci-enroll__member:has(.mci-check:checked) {
  border-color: var(--mci-accent-strong);
  background: var(--mci-accent-soft, #fdeef5);
}

.mci-enroll__member[hidden] {
  display: none;
}

.mci-enroll__member--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mci-enroll__pick {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 11px;
  min-width: 0;
  cursor: pointer;
}

.mci-enroll__member--disabled .mci-enroll__pick {
  cursor: not-allowed;
}

.mci-enroll__who {
  flex: 1;
  min-width: 0;
}

.mci-enroll__name {
  display: block;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-enroll__email {
  display: block;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--color-ink-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mci-enroll__usage {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-ink-secondary);
}

.mci-enroll__step-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mci-enroll__step-head .mci-enroll__label {
  margin-bottom: 0;
}

.mci-enroll__toggle {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 650;
}

.mci-enroll__search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.mci-enroll__search svg {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--color-ink-tertiary);
  pointer-events: none;
}

.mci-enroll__search-input {
  width: 100%;
  padding-left: 34px;
}

.mci-enroll__overflow,
.mci-enroll__error {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: 0.8125rem;
  font-weight: 600;
}

.mci-pill {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.71875rem;
  font-weight: 700;
  white-space: nowrap;
}

.mci-pill--green {
  background: #e7f6ec;
  color: #1b7a43;
}

.mci-pill--amber {
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
  cursor: help;
}

.mci-enroll__footer {
  align-items: center;
  justify-content: space-between;
}

.mci-enroll__footer .mci-btn {
  flex: 0 0 auto;
}

.mci-enroll__count {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-ink-secondary);
}

.mci-drawer__confirm {
  flex: 1;
  margin: 0;
}

.mci-drawer__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.mci-drawer__glyph svg {
  width: 22px;
  height: 22px;
}

.mci-drawer__glyph--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.mci-drawer__heading {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-ink);
}

.mci-drawer__text {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.55;
  color: var(--color-ink-secondary);
}

.mci-drawer__warning {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
  font-size: 0.84375rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Drawer buttons — scoped to beat the global submit-button rule, like .mci-card. */
.mci-drawer .mci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.5625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.mci-drawer .mci-btn--ghost {
  color: var(--color-ink);
  background: var(--color-surface-raised);
  border-color: var(--color-border-strong);
}

.mci-drawer .mci-btn--ghost:hover {
  background: var(--color-surface);
}

.mci-drawer .mci-btn--danger {
  color: #fff;
  background: var(--color-danger);
}

.mci-drawer .mci-btn--danger:hover {
  filter: brightness(0.94);
}

.mci-drawer .mci-btn--primary {
  color: #fff;
  background: var(--mci-accent-strong);
}

.mci-drawer .mci-btn--primary:hover {
  background: var(--mci-accent-hover);
  color: #fff;
  text-decoration: none;
}

.mci-drawer .mci-btn:disabled {
  color: var(--color-ink-secondary);
  background: var(--mci-gray-bg);
  cursor: not-allowed;
}

.mci-drawer__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}

/* Reallocation member list */
.mci-member-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mci-member__label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
}

.mci-member__label:hover {
  background: var(--color-surface);
}

.mci-member__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mci-member__name {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-member__email {
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mci-member__usage {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
  white-space: nowrap;
}

.mci-member__usage--full {
  color: var(--color-danger);
  font-weight: 700;
}

.mci-member--disabled .mci-member__label {
  cursor: not-allowed;
  opacity: 0.7;
}

.mci-drawer .mci-btn:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-row-actions .mci-iconbtn--danger:hover {
  color: var(--color-danger);
  border-color: var(--color-danger-bg);
}

.mci-row-actions .mci-iconbtn--ok:hover {
  color: #1b7a43;
  border-color: #cdeed8;
}

.mci-drawer__close:focus-visible,
.mci-link-quiet:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-monochip {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--mci-gray-bg);
  color: var(--color-ink-secondary);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.78125rem;
}

.mci-drawer__course {
  margin: 0 0 16px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-ink);
}

.mci-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
}

.mci-detail-grid div {
  min-width: 0;
}

.mci-detail-label {
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5f6475;
}

.mci-detail-label--section {
  margin: 18px 0 8px;
}

.mci-detail-value {
  margin: 0;
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--color-ink);
}

.mci-overview {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

/* Bulk selection toolbar + checkboxes */
.mci-bulkbar {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--color-ink);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(16, 18, 40, 0.18);
  color: #fff;
}

.mci-bulkbar[hidden] {
  display: none;
}

.mci-bulkbar__count {
  font-size: 0.84375rem;
}

.mci-bulkbar__spacer {
  flex: 1;
}

/* The selectors below are deliberately doubled (.mci-btn-x.mci-btn-x → 0,2,0) so
   these general button classes win over the global button[type="submit"] /
   input[type="submit"] style (0,1,1) when used on a submit control (button_to,
   f.submit, submit_tag) — not only on links. Without this, a submit-rendered
   ghost button paints solid accent-blue and a primary submit shows the wrong
   accent (blue instead of the brand pink). Link buttons are unchanged. */
.mci-btn-sm.mci-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.mci-btn-sm.mci-btn-sm:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mci-btn-sm svg {
  width: 15px;
  height: 15px;
}

.mci-btn-sm:focus-visible,
.mci-check:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mci-check {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  accent-color: var(--mci-accent-strong);
  cursor: pointer;
}

.mci-table__check {
  width: 1%;
  white-space: nowrap;
}

.mci-menu__item--danger {
  color: var(--color-danger);
}

.mci-menu__item--ok {
  color: #1b7a43;
}

.mci-menu .mci-menu__item__sub {
  margin-left: auto;
  color: var(--color-ink-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
}

.mci-menu .mci-menu__item:disabled {
  color: var(--color-ink-tertiary);
  cursor: not-allowed;
}

.mci-menu .mci-menu__item:disabled:hover {
  background: transparent;
}

/* Row actions (icon buttons) + outbox state */
.mci-reg-state {
  display: inline-flex;
}

.mci-reg-failed {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  font-size: 0.78125rem;
  font-weight: 650;
  white-space: nowrap;
}

.mci-row-actions {
  display: inline-flex;
  gap: 4px;
}

.mci-row-actions form {
  margin: 0;
  display: inline-flex;
}

/* Scoped to beat the global submit-button rule (which would paint these as
   filled accent buttons), like the .mci-card / .mci-menu buttons. */
.mci-row-actions .mci-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.mci-row-actions .mci-iconbtn:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.mci-row-actions .mci-iconbtn svg {
  width: 17px;
  height: 17px;
}

.mci-row-actions .mci-iconbtn:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

/* Toasts */
.mci-toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 60;
}

.mci-toast {
  padding: 12px 18px;
  border-radius: 10px;
  background: #16181f;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Empty state */
.mci-empty {
  margin-top: 22px;
  padding: 48px 16px;
  text-align: center;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

.mci-empty__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-ink);
}

.mci-empty__body {
  margin-top: 5px;
  font-size: 0.84375rem;
  color: var(--color-ink-secondary);
}

/* ---- MCI admin: Members (A4) ---- */
.mci-member-name {
  font-size: 0.90625rem;
  font-weight: 650;
  color: var(--color-ink);
}

.mci-member-email {
  color: var(--color-ink-secondary);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mci-member-usage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mci-member-usage__count {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.mci-meter {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  background: var(--mci-gray-bg);
  overflow: hidden;
}

.mci-meter__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mci-accent);
}

.mci-member-usage--full .mci-member-usage__count {
  color: var(--color-danger);
}

.mci-member-usage--full .mci-meter__fill {
  background: var(--color-danger);
}

.mci-members-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 18px;
}

.mci-search {
  position: relative;
  width: 280px;
  max-width: 100%;
}

.mci-search__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  display: flex;
  color: var(--color-ink-secondary);
  pointer-events: none;
}

.mci-search__icon svg {
  width: 16px;
  height: 16px;
}

.mci-search__input {
  width: 100%;
  padding-left: 36px;
}

/* Members row actions + edit button */
.mci-member-state {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.mci-member-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.mci-member-edit:hover {
  background: var(--mci-gray-bg);
}

.mci-member-edit svg {
  width: 14px;
  height: 14px;
}

.mci-member-edit:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

/* Member-details drawer */
.mci-avatar--lg {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.mci-member-detail__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}

.mci-member-detail__name {
  font-size: 1.125rem;
  font-weight: 750;
  color: var(--color-ink);
}

.mci-member-detail__email {
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.mci-drawer__form .mci-field {
  margin-bottom: 18px;
}

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

.mci-field__hint {
  font-weight: 500;
  color: var(--color-ink-secondary);
}

.mci-readonly-field {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 9px;
  background: var(--mci-gray-bg);
  color: var(--color-ink-secondary);
  font-size: 0.875rem;
}

.mci-readonly-field svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* Monthly-limit stepper */
.mci-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mci-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
  cursor: pointer;
}

.mci-stepper__btn:hover {
  background: var(--mci-gray-bg);
}

.mci-stepper__btn:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-stepper__btn svg {
  width: 14px;
  height: 14px;
}

.mci-stepper__value {
  min-width: 26px;
  text-align: center;
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-ink);
}

.mci-stepper__note {
  margin: 8px 0 0;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

/* Shared MCI buttons used outside cards/drawers (Members controls, invite panel) */
.mci-btn-primary.mci-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 9px 16px;
  border: none;
  border-radius: 9px;
  background: var(--mci-accent-strong);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}

.mci-btn-primary.mci-btn-primary:hover {
  background: var(--mci-accent-hover);
  color: #fff;
  text-decoration: none;
}

.mci-btn-primary.mci-btn-primary:disabled,
.mci-btn-primary.mci-btn-primary[disabled] {
  background: var(--mci-accent-strong);
  color: #fff;
  opacity: 0.5;
  cursor: default;
}

.mci-btn-primary svg {
  width: 15px;
  height: 15px;
}

.mci-btn-primary:focus-visible,
.mci-btn-ghost:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-btn-ghost.mci-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 9px 16px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.mci-btn-ghost.mci-btn-ghost:hover {
  background: var(--mci-gray-bg);
  color: var(--color-ink);
  text-decoration: none;
}

.mci-btn-ghost svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* Add members — full-screen invite panel */
.mci-invite {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
}

.mci-invite__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 36px;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}

.mci-invite__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
}

.mci-invite__sub {
  margin: 3px 0 0;
  max-width: 640px;
  font-size: 0.84375rem;
  color: var(--color-ink-secondary);
}

.mci-invite__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mci-invite__body {
  flex: 1;
  overflow-y: auto;
  padding: 26px 36px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.mci-invite__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr 44px;
  gap: 14px;
  align-items: center;
}

.mci-invite__grid--head {
  padding: 0 2px 9px;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

/* Duplicate-email row: a red border plus aria-invalid (not colour alone). */
.mci-input--invalid,
.mci-input[aria-invalid="true"] {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-bg);
}

.mci-invite__row {
  margin-bottom: 11px;
}

.mci-invite__row .mci-input {
  width: 100%;
  box-sizing: border-box;
}

.mci-invite__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-raised);
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.mci-invite__remove:hover {
  background: var(--mci-gray-bg);
}

.mci-invite__remove:disabled {
  opacity: 0.4;
  cursor: default;
}

.mci-invite__remove svg {
  width: 16px;
  height: 16px;
}

.mci-invite__add {
  margin-top: 16px;
}

.mci-invite__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 36px;
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border);
}

.mci-invite__count {
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
}

.mci-invite__actions {
  display: flex;
  gap: 10px;
}

/* Dashboard inventory stat figures (5.1): mono numerals; muted not-configured */
.mci-stat__value--mono {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.mci-stat__value--muted {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink-secondary);
}

/* ============================================
   MCI booking portal — member screens (B2–B5)
   ============================================ */

/* ---- My Learning (B2): welcome banner (12.2) ---- */
.mci-welcome {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-welcome__accent {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mci-accent-on-tint);
}

.mci-welcome__title {
  margin: 0.5rem 0 0;
  font-size: 1.375rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  max-width: 46ch;
}

/* Decorative artwork slot — the standard MCI banner panel (P8). A brand-tinted
   gradient stands in until artwork is supplied. */
.mci-welcome__art {
  height: 124px;
  border-radius: 12px;
  background:
    radial-gradient(
      120px 120px at 78% 22%,
      rgba(255, 255, 255, 0.45),
      transparent 70%
    ),
    linear-gradient(135deg, var(--mci-accent-strong), #7b1f8f);
}

/* ---- My Learning header + allowance chip (12.3) ---- */
.mci-page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* The member's monthly allowance chip: mint while they have room, red once the
   month's personal limit is reached. Never shows the org allocation (P32). */
.mci-allowance {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--mci-info-bg);
  border: 1px solid var(--mci-info-border);
  color: var(--mci-info-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.mci-allowance__label {
  font-weight: 600;
}

.mci-allowance__count {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.mci-allowance__left {
  font-weight: 600;
}

.mci-allowance--full {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

/* ---- My Learning "Your next courses" card (12.4) ---- */
.mci-next {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-next__title {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 750;
  color: var(--color-ink);
}

.mci-next__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mci-next__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
}

.mci-next__row:first-child {
  border-top: 0;
}

.mci-next__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mci-next__name {
  font-weight: 650;
  color: var(--color-ink);
}

.mci-next__when {
  flex: 0 0 auto;
  font-size: 0.84375rem;
  color: var(--color-ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---- Find & Book catalogue (B3): month groups + rows (13.1) ---- */
.mci-page--wide {
  max-width: 1100px;
}

.mci-catalogue {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.mci-month__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.mci-month__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 750;
  color: var(--color-ink);
}

/* The member's per-month allowance pill (their own numbers only, P32). */
.mci-monthpill {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mci-info-bg);
  border: 1px solid var(--mci-info-border);
  color: var(--mci-info-fg);
  font-size: 0.71875rem;
  font-weight: 650;
  white-space: nowrap;
}

.mci-monthpill--full {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger);
}

.mci-month__rows {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.mci-course {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.mci-course:first-child {
  border-top: 0;
}

.mci-course__when {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.mci-course__date {
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.mci-course__time {
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
  font-variant-numeric: tabular-nums;
}

.mci-course__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mci-course__name {
  font-weight: 650;
  color: var(--color-ink);
}

.mci-course__class {
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

.mci-course__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mci-course__action {
  display: flex;
  justify-content: flex-end;
  min-width: 96px;
}

/* Seats pill: neutral, amber when low, muted when full. */
.mci-seats {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink-secondary);
  font-size: 0.71875rem;
  font-weight: 650;
  white-space: nowrap;
}

.mci-seats--low {
  background: var(--mci-amber-bg);
  border-color: transparent;
  color: var(--mci-amber-fg);
}

.mci-seats--full {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-ink-tertiary);
}

/* Amber "Starts soon!" pill. */
.mci-soon {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
  font-size: 0.71875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Find & Book filter card extras (13.2) ---- */
.mci-filter__label {
  font-size: 0.78125rem;
  font-weight: 650;
  color: var(--color-ink-secondary);
  white-space: nowrap;
}

.mci-clear {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--mci-accent-on-tint);
  text-decoration: none;
  white-space: nowrap;
}

.mci-clear:hover {
  text-decoration: underline;
}

/* ---- Find & Book sort + flat-list legend (13.3) ---- */
.mci-filter__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.mci-filter__sort .mci-select {
  max-width: 200px;
}

.mci-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.mci-legend__label {
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--color-ink-secondary);
}

.mci-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mci-legend__month {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--color-ink-secondary);
}

/* ---- Find & Book course-details slide-over (13.4) ---- */
.mci-detail-headrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.5rem;
}

.mci-course__name {
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
}

.mci-course__name:hover {
  color: var(--mci-accent-on-tint);
  text-decoration: underline;
}

.mci-overview--empty {
  color: var(--color-ink-tertiary);
  font-style: italic;
}

.mci-drawer__fullnote {
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink-secondary);
}

/* ---- Find & Book register action (13.5) ---- */
/* The Register control is a button_to (submit), so the global button[type=submit]
   rule (0,1,1) would beat a single .mci-* class. Parent-scoping under the row
   action or the drawer footer (0,2,0) restores the brand-pink primary look. */
.mci-course__action .mci-register,
.mci-drawer__footer .mci-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 7px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--mci-accent-strong);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 650;
  cursor: pointer;
}

.mci-course__action .mci-register:hover,
.mci-drawer__footer .mci-register:hover {
  background: var(--mci-accent-hover);
}

.mci-course__action form,
.mci-drawer__footer form {
  margin: 0;
}

/* The green "Registered" state (a static span — immune to the submit rule). */
.mci-registered {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--color-success-bg, #e7f7ec);
  color: #1b7a43;
  font-size: 0.8125rem;
  font-weight: 700;
}

/* ---- <48h register confirm modal (13.7) ---- */
/* Centre the confirm panel rather than sliding it in from the right. */
.mci-drawer--confirm {
  align-items: center;
  justify-content: center;
}

.mci-drawer--confirm .mci-drawer__panel {
  width: min(440px, calc(100vw - 2rem));
  max-height: none;
  border-radius: 16px;
}

/* The register link styled as the primary button needs the anchor reset too. */
.mci-course__action a.mci-register,
.mci-drawer__footer a.mci-register {
  text-decoration: none;
}

/* ---- Find & Book limit banners + disabled register (13.8 / 13.9) ---- */
.mci-banner {
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

.mci-banner--amber {
  background: var(--mci-amber-bg);
  color: var(--mci-amber-fg);
  border: 1px solid #f0d9a8;
}

.mci-banner--red {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

/* A disabled Register (month/org limit reached, or full) reads as inert. */
.mci-course__action .mci-register:disabled,
.mci-drawer__footer .mci-register:disabled {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink-tertiary);
  cursor: not-allowed;
}

/* ---- Display-timezone preference (13.11) ---- */
.mci-tzinfo {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-ink-secondary);
  line-height: 1.5;
}

.mci-menu__tz {
  padding: 8px 10px 4px;
}

.mci-menu__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-tertiary);
  margin-bottom: 6px;
}

.mci-menu__tz-select {
  width: 100%;
}

.mci-menu form {
  margin: 0;
}

/* ============================================
   MCI booking portal — mobile reflow (B2–B5, P31)
   Booking ships a phone layout; admin stays desktop-first but reflows the same
   shared shell harmlessly. Goal: legible stacks, no horizontal scroll.
   ============================================ */
@media (max-width: 640px) {
  /* Shell: the sidebar becomes a scrollable top strip, content fills the width. */
  .mci-app__body {
    flex-direction: column;
  }

  .mci-app__sidebar {
    flex: 0 0 auto;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
  }

  .mci-sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .mci-sidebar__section {
    margin-top: 0.75rem;
  }

  .mci-sidebar__group {
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .mci-app__content {
    padding: 1.25rem 1rem;
  }

  .mci-app__topbar {
    padding: 0 1rem;
  }

  /* My Learning: banner + header stack. */
  .mci-page__head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .mci-welcome {
    grid-template-columns: 1fr;
  }

  .mci-welcome__art {
    display: none;
  }

  .mci-next__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Find & Book: the filter card and sort stack full-width. */
  .mci-filter {
    flex-direction: column;
    align-items: stretch;
  }

  .mci-filter .mci-input,
  .mci-filter .mci-select {
    width: 100%;
  }

  .mci-filter__dash {
    display: none;
  }

  .mci-clear {
    margin-left: 0;
  }

  .mci-filter__sort {
    flex-wrap: wrap;
  }

  .mci-filter__sort .mci-select {
    max-width: none;
    width: 100%;
  }

  /* Course rows reflow into a legible stack. */
  .mci-course {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .mci-course__when {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
  }

  .mci-course__meta {
    flex-wrap: wrap;
  }

  .mci-course__action {
    justify-content: flex-start;
    min-width: 0;
  }

  /* The detail slide-over and the confirm modal fill the small screen. */
  .mci-drawer__panel {
    width: 100%;
    max-width: none;
  }

  .mci-drawer--confirm .mci-drawer__panel {
    width: calc(100vw - 1.5rem);
  }

  .mci-legend {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---- My Courses (B4): tabs + rows (14.1) ---- */
.mci-tabs {
  display: flex;
  gap: 4px;
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.mci-tab {
  padding: 9px 16px;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--color-ink-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.mci-tab:hover {
  color: var(--color-ink);
}

.mci-tab--active {
  color: var(--mci-accent-on-tint);
  border-bottom-color: var(--mci-accent-strong);
}

.mci-mycourses {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
}

.mci-mycourse {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.mci-mycourse:first-child {
  border-top: 0;
}

.mci-mycourse__main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.mci-mycourse__name {
  font-weight: 650;
  color: var(--color-ink);
}

.mci-mycourse__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mci-mycourse__when {
  font-size: 0.84375rem;
  color: var(--color-ink-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mci-mycourse__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .mci-mycourse {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .mci-mycourse__meta {
    flex-wrap: wrap;
  }

  .mci-mycourse__actions {
    justify-content: flex-start;
  }
}

/* My Learning "Manage" cross-link to My Courses (14.1) */
.mci-next__manage {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--mci-accent-on-tint);
  text-decoration: none;
}

.mci-next__manage:hover {
  text-decoration: underline;
}

/* ---- My Courses row actions: resend / cancel (14.2–14.4) ---- */
/* Resend is a button_to (submit) and Cancel may be a link; parent-scope both so
   the small ghost style beats the global submit rule (0,2,0 > 0,1,1). */
.mci-mycourse__actions .mci-btn-sm {
  min-height: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-ink-tertiary);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* The shared .mci-btn-sm focus ring is white (for filled buttons); these sit on a
   white row, so give them a visible accent ring (WCAG 2.4.7). */
.mci-mycourse__actions .mci-btn-sm:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
}

.mci-mycourse__actions .mci-btn-sm:hover {
  background: var(--color-surface);
}

.mci-mycourse__actions .mci-mycourse__cancel {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.mci-mycourse__actions .mci-btn-sm:disabled {
  color: var(--color-ink-tertiary);
  border-color: var(--color-border);
  background: var(--color-surface);
  cursor: not-allowed;
}

.mci-mycourse__actions form {
  margin: 0;
  display: inline;
}

/* ---- My Courses approved-only toggle (14.5) ---- */
.mci-approved-filter {
  margin-top: 1rem;
}

.mci-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

/* ============================================
   MCI booking portal — Help (B5, Epic 15)
   ============================================ */
.mci-help-card {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 18, 40, 0.03);
}

.mci-help-card__title {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 750;
  color: var(--color-ink);
}

/* FAQ accordion (15.1) — native <details>, exclusive via shared name. */
.mci-faq-item {
  border-top: 1px solid var(--color-border);
}

.mci-faq-item:first-child {
  border-top: 0;
}

.mci-faq-item__q {
  padding: 0.9rem 0;
  font-weight: 650;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mci-faq-item__q::-webkit-details-marker {
  display: none;
}

.mci-faq-item__q::after {
  content: "+";
  color: var(--color-ink-tertiary);
  font-weight: 400;
  font-size: 1.25rem;
  margin-left: 1rem;
}

.mci-faq-item[open] .mci-faq-item__q::after {
  content: "–";
}

.mci-faq-item__q:focus-visible {
  outline: 2px solid var(--mci-accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

.mci-faq-item__a {
  padding: 0 0 1rem;
  color: var(--color-ink-secondary);
  line-height: 1.55;
}

/* "Still need help?" message form (15.2). */
.mci-help-form .mci-field {
  display: block;
}

/* Scoped to the Help form so it doesn't restyle the shared .mci-field__label used
   by admin/booking forms — only adds the block layout + spacing this form needs. */
.mci-help-form .mci-field__label {
  display: block;
  margin-bottom: 6px;
}

.mci-textarea {
  width: 100%;
  resize: vertical;
}

.mci-help-form__caption {
  margin: 6px 0 12px;
  font-size: 0.78125rem;
  color: var(--color-ink-secondary);
}

/* Parent-scope the submit button so the brand-pink primary beats the global
   submit rule (0,2,0 > 0,1,1). */
.mci-help-card .mci-btn-primary {
  background: var(--mci-accent-strong);
  color: #fff;
}

.mci-help-card .mci-btn-primary:hover {
  background: var(--mci-accent-hover);
}

.mci-help-sent__msg {
  color: #1b7a43;
  font-weight: 600;
  margin: 0 0 12px;
}