/* ==========================================================================
   Planorahub — Enterprise Platform
   Authentication screens stylesheet
   --------------------------------------------------------------------------
   1. Design tokens
   2. Reset / base
   3. Layout        (.auth)
   4. Components    (.brand, .card, .field, .btn, .notice, .strength, ...)
   5. Utilities
   6. Responsive (auth)
   7. App shell     (.shell, .sidenav, .topbar, .page)
   8. App components(.stat, .panel, .table, .evcard, .wizard, .choice, ...)
   9. Responsive (app)
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Brand palette ---- */
  --color-brand-900: #240a26;
  --color-brand-800: #3b0f3a;
  --color-brand-700: #551a4c;
  --color-brand-600: #6d2160;
  --color-brand-500: #8d3f7d;
  --color-brand-400: #a35592;

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-surface: #f4f5f7;
  --color-surface-alt: #fbfbfc;
  --color-border: #d8dae0;
  --color-border-soft: #e6e8ec;
  --color-text: #14161a;
  --color-text-muted: #6b7280;
  --color-text-subtle: #9ca3af;
  --color-text-label: #374151;

  /* ---- Feedback ---- */
  --color-success: #16a34a;
  --color-success-strong: #22c55e;
  --color-success-soft: #dcfce7;
  --color-info: #2563eb;
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-danger: #dc2626;
  --color-danger-soft: #fef2f2;
  --color-warn: #b45309;
  --color-warn-soft: #fffbeb;
  --color-warn-border: #fde68a;
  --color-accent: #f59e0b;
  --color-accent-soft: #fef3c7;
  --color-info-strong: #3b82f6;
  --color-alert-soft: #fdf2f8;
  --color-alert-border: #f9d0e4;
  --color-track: #e5e7eb;
  --color-header-row: #fafafb;

  /* ---- On-dark alphas ---- */
  --on-dark-strong: rgba(255, 255, 255, 0.92);
  --on-dark: rgba(255, 255, 255, 0.74);
  --on-dark-muted: rgba(255, 255, 255, 0.58);
  --on-dark-line: rgba(255, 255, 255, 0.16);

  /* ---- Typography ---- */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-3xl: 2.125rem;   /* 34px — brand headline            */
  --fs-2xl: 1.75rem;    /* 28px — card heading              */
  --fs-xl: 1.1875rem;   /* 19px — wordmark                  */
  --fs-lg: 0.9375rem;   /* 15px — body / inputs / buttons   */
  --fs-md: 0.90625rem;  /* 14.5px — feature list            */
  --fs-sm: 0.875rem;    /* 14px — labels                    */
  --fs-xs: 0.84375rem;  /* 13.5px — requirement rows        */
  --fs-2xs: 0.8rem;     /* 12.8px — notice text             */
  --fs-3xs: 0.75rem;    /* 12px — meta                      */

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-normal: 1.5;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-btn: 0 1px 2px rgba(20, 22, 26, 0.08);
  --shadow-focus: 0 0 0 3px rgba(109, 33, 96, 0.18);
  --shadow-panel: 0 18px 48px rgba(36, 10, 38, 0.18);

  /* ---- Layout ---- */
  --card-width: 28rem;        /* 448px */
  --brand-width: 40%;
  --gutter: 2.5rem;

  /* ---- App shell layout ---- */
  --rail-width: 4rem;         /* 64px  — collapsed sidebar   */
  --sidenav-width: 14rem;     /* 224px — expanded sidebar    */
  --wizard-width: 13.75rem;   /* 220px — wizard step rail    */
  --topbar-height: 4.625rem;  /* 74px                        */
  --page-gutter: 2rem;
  --content-max: 48rem;       /* 768px — wizard content col  */
  --z-drawer: 60;
  --z-topbar: 40;

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* An SVG with no width/height and no sizing class falls back to the CSS
   default replaced-element box (300x150), which is what made inline heading
   icons balloon. :where() keeps specificity at zero so every component rule
   below still wins. */
svg:where(:not([class])) {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

/* Icons sitting inside a heading or label track the text size and baseline */
:where(h1, h2, h3, .hubhead__title, .panel__title, .figure__label,
       .field__label, .ratebox__head, .overagebox__head, .auditbar,
       .commission__title) > svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: 0 0 auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* The hidden attribute must win over component display rules */
[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 700;
}

:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 2px;
}

/* Screen-reader-only helper */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. LAYOUT — .auth
   ========================================================================== */

.auth {
  display: flex;
  min-height: 100vh;
}

.auth__brand {
  position: relative;
  flex: 0 0 var(--brand-width);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gutter);
  overflow: hidden;
  color: var(--color-white);
  background-image:
    radial-gradient(
      120% 90% at 8% 100%,
      rgba(163, 86, 146, 0.85) 0%,
      rgba(163, 86, 146, 0) 60%
    ),
    linear-gradient(
      158deg,
      var(--color-brand-900) 0%,
      var(--color-brand-800) 38%,
      var(--color-brand-700) 68%,
      var(--color-brand-500) 100%
    );
}

.auth__main {
  flex: 1 1 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--gutter);
  background-color: var(--color-surface);
}

/* Decorative circle + dot field on the brand panel */
.auth__orb {
  position: absolute;
  top: -8%;
  left: 55%;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.045) 55%,
    rgba(255, 255, 255, 0) 72%
  );
  pointer-events: none;
}

.auth__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.22) 1.2px, transparent 1.4px);
  background-size: 74px 96px;
  background-position: 18px 30px;
  opacity: 0.5;
}

/* Brand panel content sits above the decorative layers */
.auth__brand > .brand,
.auth__brand > .pitch,
.auth__brand > .proof {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* ---- 4.1 Brand identity ------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.brand__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--on-dark-line);
}

.brand__mark svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.brand__tagline {
  font-size: var(--fs-3xs);
  color: var(--on-dark-muted);
  line-height: 1.3;
}

/* ---- 4.2 Brand pitch ---------------------------------------------------- */

.pitch {
  max-width: 22rem;
  padding-block: var(--space-10);
}

.pitch__title {
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

.pitch__text {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--on-dark);
  margin-bottom: var(--space-8);
}

.pitch__list {
  display: grid;
  gap: var(--space-3);
}

.pitch__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-md);
  color: var(--on-dark-strong);
}

.pitch__check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid var(--on-dark-line);
}

.pitch__check svg {
  width: 0.625rem;
  height: 0.625rem;
}

/* ---- 4.3 Social proof --------------------------------------------------- */

.proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.proof__avatars {
  display: flex;
  flex: 0 0 auto;
}

.proof__avatar {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-brand-800);
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.proof__avatar + .proof__avatar {
  margin-left: -0.125rem;
}

.proof__avatar--a { background-color: #7c3f9e; }
.proof__avatar--b { background-color: #2f7ee0; }
.proof__avatar--c { background-color: #1fa463; }

.proof__title {
  display: block;
  font-size: 0.78125rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.35;
}

.proof__meta {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--on-dark-muted);
  line-height: 1.35;
}

/* ---- 4.4 Card ----------------------------------------------------------- */

.card {
  width: 100%;
  max-width: var(--card-width);
}

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

.card__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  font-size: var(--fs-lg);
  color: var(--color-text-label);
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.card__back:hover,
.card__back:focus-visible {
  color: var(--color-brand-600);
}

.card__back svg {
  width: 1rem;
  height: 1rem;
}

.card__title {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.card__subtitle {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.card--centered .card__subtitle {
  margin-bottom: var(--space-10);
}

/* ---- 4.5 Notice --------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0.875rem;
  margin-bottom: var(--space-6);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  border-radius: var(--radius-md);
}

.notice--info {
  color: var(--color-info);
  background-color: var(--color-info-soft);
  border: 1px solid var(--color-info-border);
}

.notice__icon {
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  margin-top: 0.125rem;
}

/* ---- 4.6 Form ----------------------------------------------------------- */

.form__field + .form__field {
  margin-top: var(--space-5);
}

.formgrid .form__field + .form__field,
.formgrid > .form__field {
  margin-top: 0;
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-label);
}

.field__required {
  margin-left: 0.125rem;
  color: var(--color-danger);
}

.field__control {
  position: relative;
}

.field__input {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field__input::placeholder {
  color: var(--color-text-subtle);
}

.field__input:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

.field__control--with-action .field__input {
  padding-right: 2.75rem;
}

.field__toggle {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  transition: color var(--transition);
}

.field__toggle:hover,
.field__toggle:focus-visible {
  color: var(--color-text-label);
}

.field__toggle svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.field__toggle .field__icon--hide {
  display: none;
}

.field__toggle[aria-pressed="true"] .field__icon--show {
  display: none;
}

.field__toggle[aria-pressed="true"] .field__icon--hide {
  display: block;
}

/* ---- 4.7 Password strength --------------------------------------------- */

.strength {
  margin-top: var(--space-2);
}

.strength__meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.strength__segment {
  height: 3px;
  border-radius: var(--radius-pill);
  background-color: var(--color-track);
  transition: background-color var(--transition);
}

.strength__segment.is-filled {
  background-color: var(--color-success-strong);
}

.strength[data-level="1"] .strength__segment.is-filled,
.strength[data-level="2"] .strength__segment.is-filled {
  background-color: #ef4444;
}

.strength[data-level="3"] .strength__segment.is-filled {
  background-color: #f59e0b;
}

.strength__label {
  display: block;
  margin-top: 0.375rem;
  font-size: var(--fs-3xs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.strength[data-level="4"] .strength__label {
  color: var(--color-success);
}

/* ---- 4.8 Requirement checklist ----------------------------------------- */

.requirements {
  display: grid;
  gap: 0.125rem;
  margin-top: var(--space-5);
  padding: 0.875rem var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.requirements__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.requirements__item.is-met {
  color: var(--color-success);
}

.requirements__icon {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
}

/* ---- 4.9 Button --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn);
  transition: filter var(--transition), transform var(--transition);
}

.btn--primary {
  color: var(--color-white);
  background-image: linear-gradient(
    100deg,
    var(--color-brand-700) 0%,
    var(--color-brand-600) 55%,
    #7f2a71 100%
  );
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--primary:active {
  transform: translateY(1px);
}

.btn--block {
  width: 100%;
}

.form__actions {
  margin-top: var(--space-6);
}

/* ---- 4.10 Success state ------------------------------------------------- */

.success {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
}

.success__badge {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background-color: var(--color-success-soft);
}

.success__badge svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-success-strong);
}

.success__status {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   5. UTILITIES
   ========================================================================== */

.u-text-success { color: var(--color-success); }
.u-mt-0 { margin-top: 0; }

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --brand-width: 44%;
    --gutter: 2rem;
    --fs-3xl: 1.875rem;
    --fs-2xl: 1.625rem;
    --card-width: 26rem;
  }

  .auth__orb {
    width: 24rem;
    height: 24rem;
    left: 45%;
  }

  .pitch {
    max-width: 20rem;
  }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --fs-3xl: 1.75rem;
    --fs-2xl: 1.5rem;
    --card-width: 100%;
  }

  .auth {
    flex-direction: column;
  }

  .auth__brand {
    flex: 0 0 auto;
    gap: var(--space-6);
    padding-block: var(--space-8);
    box-shadow: var(--shadow-panel);
  }

  .auth__main {
    flex: 1 1 auto;
    align-items: flex-start;
    padding-block: var(--space-10);
  }

  .auth__orb {
    top: -30%;
    left: 40%;
    width: 20rem;
    height: 20rem;
  }

  .pitch {
    max-width: 34rem;
    padding-block: 0;
  }

  .pitch__text {
    margin-bottom: var(--space-6);
  }

  .card__back {
    margin-bottom: var(--space-6);
  }
}

/* ---- Small phones ------------------------------------------------------- */
@media (max-width: 380px) {
  :root {
    --gutter: 1.125rem;
    --fs-3xl: 1.5rem;
  }

  .pitch__list {
    gap: var(--space-4);
  }
}

/* ---- Large desktops ---------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --fs-3xl: 2.375rem;
    --gutter: 3.5rem;
    --card-width: 30rem;
  }

  .pitch {
    max-width: 26rem;
  }
}

/* ==========================================================================
   7. APP SHELL — .shell / .sidenav / .topbar / .page
   ========================================================================== */

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

.shell__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.shell__main {
  flex: 1 1 auto;
  padding: var(--space-8) var(--page-gutter) var(--space-12);
}

/* ---- 7.1 Side navigation ------------------------------------------------ */

.sidenav {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--sidenav-width);
  width: var(--sidenav-width);
  color: var(--on-dark-strong);
  background-color: var(--color-brand-900);
  background-image: linear-gradient(180deg, #2a0a2e 0%, #240a26 100%);
  transition: flex-basis var(--transition), width var(--transition);
}

/* Collapsed rail variant */
.sidenav--rail {
  flex-basis: var(--rail-width);
  width: var(--rail-width);
  align-items: center;
}

.sidenav__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-4);
  flex: 0 0 auto;
}

.sidenav--rail .sidenav__head {
  justify-content: center;
  padding: 0;
}

.sidenav__logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background-color: var(--color-brand-600);
  color: var(--color-white);
}

.sidenav__logo svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.sidenav__identity {
  min-width: 0;
  flex: 1 1 auto;
}

.sidenav__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.sidenav__chip {
  display: inline-block;
  margin-top: 0.1875rem;
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--on-dark);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

.sidenav__collapse {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  color: var(--on-dark-muted);
  transition: background-color var(--transition), color var(--transition);
}

.sidenav__collapse:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.1);
}

.sidenav__collapse svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition);
}

.sidenav--rail .sidenav__collapse svg {
  transform: rotate(180deg);
}

.sidenav__list {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3) var(--space-4);
  overflow-y: auto;
}

.sidenav--rail .sidenav__list {
  justify-items: center;
  padding-inline: 0;
}

.sidenav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--on-dark);
  border-radius: var(--radius-md);
  transition: background-color var(--transition), color var(--transition);
}

.sidenav__link:hover {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.07);
}

.sidenav__link[aria-current="page"] {
  color: var(--color-white);
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.1);
}

.sidenav__link svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
}

.sidenav--rail .sidenav__link {
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
}

.sidenav--rail .sidenav__link[aria-current="page"] {
  background-color: var(--color-brand-600);
}

.sidenav--rail .sidenav__label,
.sidenav--rail .sidenav__identity,
.sidenav--rail .sidenav__user,
.sidenav--rail .sidenav__dot,
.sidenav--rail .sidenav__exit-label {
  display: none;
}

/* Collapsed, the chevron is the only way back — keep it, and flip it. */
.sidenav--rail .sidenav__head {
  flex-direction: column;
  gap: var(--space-2);
  height: auto;
  padding-block: var(--space-4) var(--space-2);
}

.sidenav--rail .sidenav__collapse {
  display: grid;
  order: 2;
}

.sidenav__dot {
  width: 0.375rem;
  height: 0.375rem;
  margin-left: auto;
  border-radius: 50%;
  background-color: var(--color-success-strong);
}

.sidenav__foot {
  flex: 0 0 auto;
  padding: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidenav--rail .sidenav__foot {
  border-top: 0;
}

.sidenav__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.06);
}

.sidenav__user-name {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.3;
}

.sidenav__user-role {
  display: block;
  font-size: 0.6875rem;
  color: var(--on-dark-muted);
  line-height: 1.3;
}

/* ---- 7.2 Top bar -------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--topbar-height);
  padding: 0 var(--page-gutter);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-soft);
}

.topbar__burger {
  display: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  color: var(--color-text-label);
  border: 1px solid var(--color-border-soft);
}

.topbar__burger svg {
  width: 1.125rem;
  height: 1.125rem;
}

.topbar__titles {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
}

.topbar__subtitle {
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.topbar__tools {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.searchbox {
  position: relative;
  width: 11.875rem;
}

.searchbox__input {
  width: 100%;
  height: 2.125rem;
  padding: 0 var(--space-3) 0 2rem;
  font-size: var(--fs-2xs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.searchbox__input:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

.searchbox__icon {
  position: absolute;
  top: 50%;
  left: var(--space-2);
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  color: var(--color-text-label);
  transition: background-color var(--transition), color var(--transition);
}

.iconbtn:hover {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.iconbtn svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

.iconbtn__badge {
  position: absolute;
  top: 0.25rem;
  right: 0.3125rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-danger);
}

/* ---- 7.3 Avatars -------------------------------------------------------- */

.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-brand-600);
}

.avatar--square {
  border-radius: var(--radius-md);
  font-size: var(--fs-2xs);
}

/* ---- 7.4 Page header ---------------------------------------------------- */

.page__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.page__title {
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}

.page__subtitle {
  margin-top: 0.1875rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   8. APP COMPONENTS
   ========================================================================== */

/* ---- 8.1 Button additions ---------------------------------------------- */

.btn--outline {
  color: var(--color-text-label);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-brand-600);
  color: var(--color-brand-600);
}

.btn--quiet {
  color: var(--color-text-muted);
  box-shadow: none;
}

.btn--quiet:hover {
  color: var(--color-text);
}

.btn--translucent {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.btn--translucent:hover {
  background-color: rgba(255, 255, 255, 0.24);
}

.btn--sm {
  min-height: 2.125rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-2xs);
}

.btn svg {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: 0 0 auto;
}

/* ---- 8.2 Tinted icon tiles --------------------------------------------- */

.tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
}

.tile svg {
  width: 0.9375rem;
  height: 0.9375rem;
}

.tile--lg {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg);
}

.tile--lg svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tile--xl {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-lg);
}

.tile--xl svg {
  width: 1.5rem;
  height: 1.5rem;
}

.tile--brand   { color: var(--color-brand-600);  background-color: #f7eef5; }
.tile--info    { color: var(--color-info);       background-color: var(--color-info-soft); }
.tile--success { color: var(--color-success);    background-color: #ecfdf3; }
.tile--accent  { color: var(--color-accent);     background-color: var(--color-accent-soft); }
.tile--danger  { color: var(--color-danger);     background-color: var(--color-danger-soft); }
.tile--muted   { color: var(--color-text-muted); background-color: var(--color-surface); }

/* ---- 8.3 Panel (generic white card) ------------------------------------ */

.panel {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
}

.panel__head--plain {
  border-bottom: 0;
  padding-bottom: 0;
}

.panel__head--plain > :first-child { margin-right: auto; }

.panel__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: var(--font-display);
}

.panel__title--lg {
  font-size: 1.0625rem;
}

.panel__meta {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.panel__body {
  padding: var(--space-6);
}

.panel__foot--table {
  margin-top: -1px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* ---- 8.4 Grids ---------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

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

/* ---- 8.5 Live-event banner --------------------------------------------- */

.live {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  background-image:
    radial-gradient(60% 140% at 92% 50%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(100deg, var(--color-brand-800) 0%, var(--color-brand-600) 62%, #7f2a71 100%);
}

.live__body {
  flex: 1 1 16rem;
  min-width: 0;
}

.live__flag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
}

.live__pulse {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: var(--color-success-strong);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}

.live__title {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.live__meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--fs-2xs);
  color: var(--on-dark);
}

.live__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.live__meta svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

.live__stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
}

.live__figure {
  text-align: center;
}

.live__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.live__caption {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--on-dark);
}

.live__figure--tracked .live__caption {
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--color-success-strong);
}

/* ---- 8.6 KPI card ------------------------------------------------------- */

.kpi {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.kpi__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.kpi__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kpi__value {
  margin: var(--space-3) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.kpi__foot {
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.kpi__delta {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 0.1875rem;
  font-weight: 600;
  color: var(--color-success);
}

/* ---- 8.7 Metric card (icon beside value) ------------------------------- */

.metric {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.metric__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.metric__label {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* ---- 8.8 Bar chart ------------------------------------------------------ */

.chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  gap: var(--space-4);
  height: 17.5rem;
  padding-top: var(--space-6);
}

.chart__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
}

.chart__track {
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-height: 0;
}

.chart__label { text-align: center; }

.chart__bar {
  width: 82%;
  margin: 0 auto;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-color: var(--color-brand-500);
  transition: background-color var(--transition);
}

.chart__col:hover .chart__bar {
  background-color: var(--color-brand-600);
}

.chart__label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* ---- 8.9 Badges / pills ------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.badge--nodot::before { display: none; }

.badge--live      { color: var(--color-success); background-color: #ecfdf3; }
.badge--upcoming  { color: var(--color-info);    background-color: var(--color-info-soft); }
.badge--draft     { color: var(--color-text-muted); background-color: var(--color-surface); }
.badge--completed { color: var(--color-success); background-color: #ecfdf3; }
.badge--neutral   { color: var(--color-text-muted); background-color: var(--color-surface); }

.trend {
  display: inline-flex;
  margin-left: auto;
  white-space: nowrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-success);
  background-color: #ecfdf3;
  border-radius: var(--radius-pill);
}

/* ---- 8.10 Event shortlist ---------------------------------------------- */

.evlist {
  display: grid;
  gap: var(--space-1);
}

.evlist__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background-color var(--transition);
}

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

.evlist__body {
  flex: 1 1 auto;
  min-width: 0;
}

.evlist__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}

.evlist__date {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.linkmore {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-info);
}

.linkmore:hover { text-decoration: underline; }

.linkmore svg { width: 0.75rem; height: 0.75rem; }

/* ---- 8.11 Quick actions ------------------------------------------------- */

.quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.quick__tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.quick__tile:hover {
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-btn);
}

/* ---- 8.12 Filter toolbar ----------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.125rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: color var(--transition), background-color var(--transition);
}

.tabs__tab:hover { color: var(--color-text); }

.tabs__tab[aria-selected="true"] {
  color: var(--color-text);
  font-weight: 600;
  background-color: var(--color-white);
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-btn);
}

.tabs__count {
  padding: 0 0.3125rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
}

.tabs__tab[aria-selected="true"] .tabs__count {
  color: var(--color-brand-600);
  background-color: #f7eef5;
}

.toolbar__search {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.toolbar__search .searchbox { width: 100%; }

.toolbar__search .searchbox__input {
  height: 2.375rem;
  background-color: var(--color-white);
  border-color: var(--color-border);
}

.viewswitch {
  display: flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.viewswitch__btn {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
}

.viewswitch__btn svg { width: 0.9375rem; height: 0.9375rem; }

.viewswitch__btn[aria-pressed="true"] {
  color: var(--color-brand-600);
  background-color: #f7eef5;
}

/* ---- 8.13 Data table ---------------------------------------------------- */

.tablewrap {
  /* A static scroll container does not contain its absolutely positioned
     descendants — the visually-hidden <caption> escapes it and drags the page
     into horizontal scroll on narrow screens. Positioning the wrap fixes it. */
  position: relative;
  overflow-x: auto;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  min-width: 62rem;
  border-collapse: collapse;
  text-align: left;
}

.table th {
  padding: var(--space-3) var(--space-4);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-header-row);
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
}

.table td {
  padding: var(--space-4);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}

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

.table tbody tr:hover { background-color: #fcfcfd; }

.cellstack {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cellstack__body { min-width: 0; }

.cellstack__name {
  display: block;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cellsub {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.cellsub svg { width: 0.75rem; height: 0.75rem; }

.format {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
}

.format svg { width: 0.875rem; height: 0.875rem; color: var(--color-info); }

.format--private svg { color: var(--color-brand-500); }
.format--virtual svg { color: var(--color-success); }

.sold {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 8rem;
  font-size: var(--fs-2xs);
}

.sold__count { font-weight: 700; font-size: var(--fs-xs); }
.sold__total { color: var(--color-text-subtle); }
.sold__pct { font-weight: 600; }

.sold__pct--warn { color: var(--color-accent); }
.sold__pct--full { color: var(--color-danger); }
.sold__pct--low  { color: var(--color-success); }
.sold__pct--none { color: var(--color-text-subtle); }

.meter {
  display: block;
  height: 4px;
  margin-top: var(--space-2);
  overflow: hidden;
  background-color: var(--color-track);
  border-radius: var(--radius-pill);
}

.meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-600);
}

.meter__fill--live { background-color: var(--color-success-strong); }
.meter__fill--done { background-color: var(--color-info-strong); }

.rowactions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.rowactions .iconbtn { width: 1.75rem; height: 1.75rem; color: var(--color-text-subtle); }
.rowactions .iconbtn svg { width: 0.9375rem; height: 0.9375rem; }

.pager {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pager__btn {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}

.pager__btn[aria-current="page"] {
  color: var(--color-white);
  background-color: var(--color-brand-600);
}

/* ---- 8.14 Event cards (grid view) -------------------------------------- */

.evcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.evcard:hover {
  box-shadow: 0 8px 24px rgba(20, 22, 26, 0.07);
}

.evcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background-color: var(--color-text-subtle);
}

.evcard--live::before     { background-color: var(--color-success-strong); }
.evcard--upcoming::before { background-color: var(--color-info-strong); }
.evcard--draft::before    { background-color: #c7cad1; }
.evcard--completed::before{ background-color: var(--color-success-strong); }

.evcard__title {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.evcard__meta {
  display: grid;
  gap: 0.25rem;
}

.evcard__sold {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.evcard__soldvalue { font-weight: 700; color: var(--color-text); }

.evcard__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}

.evcard__revenue {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-brand-600);
  line-height: 1.2;
}

.evcard__revlabel {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.evcard__note {
  text-align: right;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-info);
}

.evcard__note--live { color: var(--color-success); }

.evcard__notelabel {
  display: block;
  font-size: var(--fs-3xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

.evcard__actions {
  display: flex;
  gap: var(--space-2);
}

/* ---- 8.15 Wizard shell -------------------------------------------------- */

.wizard {
  display: flex;
  min-height: 100vh;
}

.wizard__side {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--wizard-width);
  width: var(--wizard-width);
  background-color: var(--color-white);
  border-right: 1px solid var(--color-border-soft);
}

.wizard__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  flex: 0 0 auto;
}

.wizard__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
}

.wizard__saved {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-size: 0.6875rem;
  color: var(--color-success);
}

.wizard__saved svg { width: 0.6875rem; height: 0.6875rem; }

.wizard__steps {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 0.125rem;
  padding: var(--space-2);
  overflow-y: auto;
}

.wizard__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0.625rem;
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  transition: background-color var(--transition), color var(--transition);
}

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

.wizard__step[aria-current="step"] {
  color: var(--color-text);
  font-weight: 600;
  background-color: #f7eef5;
}

.wizard__step[aria-current="step"] .tile {
  color: var(--color-white);
  background-color: var(--color-brand-600);
}

.wizard__step--done { color: var(--color-success); font-weight: 600; }

.wizard__step--done .tile {
  color: var(--color-white);
  background-color: var(--color-success);
}

.wizard__step--todo { color: var(--color-text-subtle); }

.wizard__step[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.75;
}

.wizard__check {
  width: 0.875rem;
  height: 0.875rem;
  margin-left: auto;
  color: var(--color-success);
}

.wizard__progress {
  flex: 0 0 auto;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.wizard__progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.wizard__progress-value { font-weight: 700; color: var(--color-text); }

.wizard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.wizard__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-soft);
}

.wizard__crumb { flex: 1 1 auto; min-width: 0; }

.wizard__stepno {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}

.wizard__stepname { color: var(--color-text); font-weight: 700; }

.wizard__hint {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.wizard__topactions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.wizard__content {
  flex: 1 1 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.wizard__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.wizard__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border-soft);
}

.wizard__foot-end {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

/* ---- 8.16 Step 1 — event-type choice cards ----------------------------- */

.steplead {
  margin-bottom: var(--space-8);
  text-align: center;
}

.steplead__title {
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}

.steplead__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
  margin-bottom: var(--space-6);
}

.choices > * { min-width: 0; }

.choice {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.choice:hover { border-color: var(--color-info-border); }

.choice--selected {
  border: 2px solid var(--color-info);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.choice__head {
  display: block;
  padding: var(--space-6);
}

.choice--selected .choice__head {
  color: var(--color-white);
  background-image: linear-gradient(140deg, #2563eb 0%, #3f6fe8 100%);
}

.choice__head--private { background-color: #fbf1f6; }
.choice__head--virtual { background-color: #eefaf3; }

.choice__head--private .tile {
  color: var(--color-brand-500);
  background-color: #f6e5ef;
}

.choice__head--virtual .tile {
  color: var(--color-success);
  background-color: #dcf5e7;
}

.choice--selected .choice__head .tile {
  color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.22);
}

.choice__flag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: var(--color-info);
  background-color: var(--color-white);
}

.choice__flag svg { width: 0.8125rem; height: 0.8125rem; }

.choice__title {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: var(--lh-tight);
}

.choice__subtitle {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.choice--selected .choice__subtitle { color: rgba(255, 255, 255, 0.85); }

.choice__body {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}

.choice__caption {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.choice__list {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-xs);
}

.choice__list > span {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.choice__list svg {
  flex: 0 0 auto;
  width: 0.8125rem;
  height: 0.8125rem;
  margin-top: 0.1875rem;
  color: var(--color-info);
}

.choice__note {
  display: block;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.choice__note b { color: var(--color-text-label); }

.choice__auto {
  display: block;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.choice__auto-title {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-info);
}

.choice__auto-list {
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.choice__auto-list > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.choice__auto-list svg {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-info);
}

/* ---- 8.17 Notice variants ---------------------------------------------- */

.notice--alert {
  color: var(--color-text-label);
  background-color: var(--color-alert-soft);
  border: 1px solid var(--color-alert-border);
  font-size: var(--fs-sm);
}

.notice--alert .notice__icon { color: var(--color-brand-500); }

.notice--warn {
  color: var(--color-warn);
  background-color: var(--color-warn-soft);
  border: 1px solid var(--color-warn-border);
  font-size: var(--fs-2xs);
}

.notice--flat { margin-bottom: 0; }

/* ---- 8.18 Forms — selects, textareas, layout grids --------------------- */

.formgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* Grid children default to min-width:auto, which lets wide content (seat maps,
   long inputs) push a track past the viewport. Opt every track out. */
.formgrid > *,
.optins > *,
.lines > *,
.grid > * {
  min-width: 0;
}

.formgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.field__hint {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.field__select {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-8) 0 var(--space-4);
  font-size: var(--fs-sm);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
}

.field__select:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

.editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.editor__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  padding: var(--space-2);
  background-color: #f9fafb;
  border-bottom: 1px solid var(--color-border-soft);
}

.editor__tool {
  padding: 0.25rem var(--space-2);
  font-size: var(--fs-3xs);
  color: var(--color-text-label);
  border-radius: var(--radius-sm);
}

.editor__tool:hover { background-color: var(--color-white); }

.editor__area {
  display: block;
  width: 100%;
  min-height: 8rem;
  padding: var(--space-4);
  font-size: var(--fs-sm);
  border: 0;
  resize: vertical;
}

.editor__area:focus { outline: none; }

.editor__area::placeholder { color: var(--color-text-subtle); }

/* ---- 8.19 Option tiles (schedule mode) --------------------------------- */

.options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.option {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background-color var(--transition);
}

.option:hover { border-color: var(--color-info-border); }

.option--selected {
  border-color: var(--color-info);
  background-color: var(--color-info-soft);
}

.option__icon { font-size: 1.25rem; line-height: 1; }

.option__title { font-size: var(--fs-sm); font-weight: 600; }

.option--selected .option__title { color: var(--color-info); }

.option__text {
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.option__check {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-info);
}

/* ---- 8.20 Venues & halls ----------------------------------------------- */

.venue + .venue {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.venue__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.venue__no {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-success);
  border-radius: 50%;
}

.venue__title { font-size: var(--fs-sm); font-weight: 700; }

.venue__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-danger);
}

.venue__remove svg { width: 0.8125rem; height: 0.8125rem; }

.halls {
  margin-top: var(--space-5);
  padding: var(--space-3);
  background-color: #f9fafb;
  border-radius: var(--radius-md);
}

.halls__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.halls__add {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-success);
}

.hall {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.hall + .hall { margin-top: var(--space-2); }

.hall__icon { width: 0.875rem; height: 0.875rem; color: var(--color-brand-500); }

.hall__name,
.hall__cap {
  font-size: var(--fs-2xs);
  border: 0;
  background: none;
}

.hall__name { flex: 1 1 auto; min-width: 0; }
.hall__name:focus, .hall__cap:focus { outline: none; }

.hall__cap { width: 3.5rem; text-align: right; color: var(--color-text-muted); }

.hall__people { width: 0.8125rem; height: 0.8125rem; color: var(--color-text-subtle); }

.hall__remove { color: var(--color-text-subtle); font-size: var(--fs-2xs); }

/* ---- 8.21 Toggle cards -------------------------------------------------- */

.switchcard {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: #f2fbf6;
  border: 1px solid #bbf0d0;
  border-radius: var(--radius-md);
}

.switchcard__body { flex: 1 1 auto; min-width: 0; }

.switchcard__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.switchcard__text {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.375rem;
  height: 1.375rem;
  padding: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-track);
  transition: background-color var(--transition);
}

.switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-white);
  box-shadow: var(--shadow-btn);
  transition: transform var(--transition);
}

.switch[aria-checked="true"] {
  background-color: var(--color-success-strong);
}

.switch[aria-checked="true"]::after {
  transform: translateX(1rem);
}

/* ---- 8.22 Upload dropzone ---------------------------------------------- */

.dropzone {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background-color: var(--color-white);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background-color var(--transition);
}

.dropzone:hover {
  border-color: var(--color-brand-600);
  background-color: #fdfbfd;
}

.dropzone__title { font-size: var(--fs-lg); font-weight: 600; }

.dropzone__text { font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ---- 8.23 Type pill (step 2 header) ------------------------------------ */

.typebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.typepill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-info);
  background-color: var(--color-info-soft);
  border-radius: var(--radius-pill);
}

.typepill svg { width: 0.875rem; height: 0.875rem; }

.typebar__change {
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ---- 8.24 Checkbox row -------------------------------------------------- */

.checkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-label);
}

.checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-brand-600);
}

.textlink {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-brand-600);
}

.textlink:hover { text-decoration: underline; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-border-soft);
}

.sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 2.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}

.sso:hover { border-color: var(--color-brand-600); }

.sso__mark {
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: #ea4335;
  border-radius: var(--radius-sm);
}

/* ---- 8.25 Off-canvas backdrop ----------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: rgba(20, 22, 26, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.backdrop.is-open { opacity: 1; visibility: visible; }

/* ---- 8.26 Utilities (app) --------------------------------------------- */

.u-live      { color: var(--color-success); font-weight: 600; }
.u-upcoming  { color: var(--color-info); font-weight: 600; }
.u-muted     { color: var(--color-text-muted); }
.u-nowrap    { white-space: nowrap; }
.u-right     { text-align: right; }
.u-hidden    { display: none !important; }
.u-mb-6      { margin-bottom: var(--space-6); }
.u-mt-5      { margin-top: var(--space-5); }

/* Inline status dot, e.g. "● Live now" under a revenue figure */
.dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.25rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* ==========================================================================
   9. RESPONSIVE (APP)
   ========================================================================== */

/* ---- Large desktop down ------------------------------------------------- */
@media (max-width: 1280px) {
  .grid--main { grid-template-columns: minmax(0, 1fr); }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --page-gutter: 1.5rem; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .live__stats { gap: var(--space-6); }

  /* Sidebar becomes an off-canvas drawer */
  .sidenav {
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
    transition: transform var(--transition);
  }

  .sidenav.is-open { transform: translateX(0); }

  /* A drawer is always the expanded variant, even if the page opted into
     the rail at desktop width. */
  .sidenav--rail {
    flex-basis: var(--sidenav-width);
    width: var(--sidenav-width);
    align-items: stretch;
  }

  .sidenav--rail .sidenav__label,
  .sidenav--rail .sidenav__exit-label { display: inline; }

  .sidenav--rail .sidenav__identity { display: block; }

  .sidenav--rail .sidenav__user { display: flex; }

  .sidenav--rail .sidenav__dot { display: block; }

  .sidenav--rail .sidenav__collapse { display: none; }

  .sidenav--rail .sidenav__head {
    justify-content: flex-start;
    padding: 0 var(--space-4);
  }

  .sidenav--rail .sidenav__list {
    justify-items: stretch;
    padding-inline: var(--space-3);
  }

  .sidenav--rail .sidenav__link {
    width: auto;
    height: 2.25rem;
    padding: 0 var(--space-3);
    justify-content: flex-start;
  }

  .sidenav--rail .sidenav__link[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .sidenav--rail .sidenav__foot {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .topbar__burger { display: grid; }

  .wizard__side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--transition);
  }

  .wizard__side.is-open { transform: translateX(0); }

  .wizard__burger { display: grid; }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 768px) {
  :root { --page-gutter: 1rem; }

  .shell__main { padding-block: var(--space-6) var(--space-10); }

  .grid--4,
  .grid--3,
  .grid--2,
  .quick,
  .formgrid--2,
  .formgrid--3,
  .options { grid-template-columns: minmax(0, 1fr); }

  .page__head { flex-direction: column; align-items: stretch; }
  .page__head .btn { width: 100%; }

  .topbar { gap: var(--space-2); }
  .topbar .searchbox { display: none; }

  .live { padding: var(--space-5); }
  .live__stats { width: 100%; justify-content: space-between; }
  .live__stats .btn { flex: 0 0 auto; }

  .chart { height: 13rem; gap: var(--space-2); }

  .panel__body,
  .panel__head,
  .panel__foot { padding-inline: var(--space-4); }

  .toolbar { gap: var(--space-2); }
  .toolbar__search { flex-basis: 100%; order: 3; }

  .wizard__content { padding: var(--space-6) var(--space-4) var(--space-8); }
  .wizard__topbar { padding: var(--space-3) var(--space-4); }
  .wizard__foot { padding: var(--space-3) var(--space-4); }
  .wizard__foot .btn { flex: 1 1 auto; }
  .wizard__stepno { font-size: var(--fs-sm); }
  .wizard__hint { display: none; }
  .wizard__topactions .wizard__saved { display: none; }
  .wizard__topbar > .iconbtn { display: none; }

  .evcard__foot { flex-wrap: wrap; }
  .evcard__actions { width: 100%; }
  .evcard__actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   10. DATA-DRIVEN SIZES
   --------------------------------------------------------------------------
   Bar heights and meter widths are *data*, not decoration, so they are
   expressed as data attributes in the markup and mapped to sizes here.
   This keeps the "no inline styles" rule intact while staying declarative.
   ========================================================================== */

.chart__bar[data-height="30"]  { height: 30%; }
.chart__bar[data-height="37"]  { height: 37%; }
.chart__bar[data-height="46"]  { height: 46%; }
.chart__bar[data-height="51"]  { height: 51%; }
.chart__bar[data-height="71"]  { height: 71%; }
.chart__bar[data-height="88"]  { height: 88%; }
.chart__bar[data-height="100"] { height: 100%; }

.meter__fill[data-fill="0"]   { width: 0; }
.meter__fill[data-fill="4"]   { width: 4%; }
.meter__fill[data-fill="14"]  { width: 14%; }
.meter__fill[data-fill="15"]  { width: 15%; }
.meter__fill[data-fill="29"]  { width: 29%; }
.meter__fill[data-fill="44"]  { width: 44%; }
.meter__fill[data-fill="64"]  { width: 64%; }
.meter__fill[data-fill="85"]  { width: 85%; }
.meter__fill[data-fill="100"] { width: 100%; }

/* ---- 8.27 Numbered badge (event shortlist) ----------------------------- */

.numbadge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-brand-600);
}

.numbadge--live  { background-color: var(--color-success); }
.numbadge--muted { background-color: #9ca3af; }

/* ==========================================================================
   11. WIZARD STEPS 4–8
   --------------------------------------------------------------------------
   11.1  Segmented control        .segment
   11.2  Ticket tier             .tier
   11.3  Conditional disclosure  .reveal / .optin
   11.4  Seating (per tier)      .seatplan / .seatmap / .tablemap
   11.5  Line-item editors       .lines (add-ons, promo codes, FAQ, members)
   11.6  Totals bar              .totals
   11.7  Accordion               .accordion
   11.8  Feature toggle rows     .featurerow
   11.9  Payout banner/timeline  .banner / .timeline
   11.10 Review & publish        .reviewhero / .kv / .checklist / .publishpick
   ========================================================================== */

/* ---- 11.1 Segmented control -------------------------------------------- */

.segment {
  display: inline-flex;
  gap: 0.125rem;
  padding: 0.1875rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.segment__btn {
  min-height: 1.875rem;
  padding: 0 var(--space-4);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), color var(--transition);
}

.segment__btn[aria-pressed="true"] {
  color: var(--color-text);
  background-color: var(--color-white);
  box-shadow: var(--shadow-btn);
}

/* ---- 11.2 Ticket tier -------------------------------------------------- */

.tier {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.tier + .tier { margin-top: var(--space-4); }

.tier__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.tier__no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-white);
  border-radius: var(--radius-sm);
  background-color: var(--color-brand-600);
}

.tier__no--2 { background-color: var(--color-info); }
.tier__no--3 { background-color: #d97706; }
.tier__no--4 { background-color: var(--color-success); }

.tier__name { flex: 1 1 auto; font-size: var(--fs-sm); font-weight: 700; }

.tier__tools { display: flex; align-items: center; gap: 0.125rem; }

.tier__tools .iconbtn { width: 1.75rem; height: 1.75rem; color: var(--color-text-subtle); }

.tier__body { padding: var(--space-4); }

.tier__revenue {
  margin-top: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.tier__revenue b { color: var(--color-success); }

/* ---- 11.3 Conditional disclosure --------------------------------------- */

.optins {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border-soft);
}

.optin {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.optin > label,
.optin > span {
  flex: 1 1 auto;
  min-width: 0;
}

.optin__box {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  accent-color: var(--color-brand-600);
}

.optin__title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-label);
}

.optin__hint {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* Panel revealed by an optin / switch — hidden until its control is on */
.reveal {
  min-width: 0;
  margin-top: var(--space-3);
  padding: var(--space-4);
  background-color: #fafafb;
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-brand-600);
  border-radius: var(--radius-sm);
}

.reveal__title {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.reveal--info { border-left-color: var(--color-info); }
.reveal--success { border-left-color: var(--color-success); }

/* ---- 11.4 Seating ------------------------------------------------------- */

.seatplan__modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.seatplan__mode {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: var(--space-3) var(--space-2);
  text-align: center;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background-color var(--transition);
}

.seatplan__mode svg { width: 1rem; height: 1rem; }

.seatplan__mode strong { font-size: var(--fs-3xs); color: var(--color-text-label); }

.seatplan__mode[aria-pressed="true"] {
  border-color: var(--color-info);
  background-color: var(--color-info-soft);
}

.seatplan__mode[aria-pressed="true"] strong { color: var(--color-info); }

.seatmap {
  min-width: 0;
  margin-top: var(--space-4);
  padding: var(--space-5);
  background-color: #1c0c20;
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.stage {
  display: block;
  width: 9rem;
  margin: 0 auto var(--space-4);
  padding: 0.25rem;
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  background-color: var(--color-brand-600);
  border-radius: var(--radius-sm);
}

.seatmap__row {
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}

.seatmap__row + .seatmap__row { margin-top: 3px; }

.seatmap__letter {
  width: 0.75rem;
  flex: 0 0 auto;
  font-size: 0.5625rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
  margin-right: 0.25rem;
}

.seat {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 2px;
  background-color: #4a2148;
}

.seat--vip { background-color: #facc15; }
.seat--premium { background-color: #a78bab; }
.seat--held { background-color: #6b7280; }

.seatmap__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.75);
}

.seatmap__legend span { display: inline-flex; align-items: center; gap: 0.375rem; }

.seatmap__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.seatmap__caption {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.55);
}

.tablemap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

.tablemap__table {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: #4a2148;
  border: 2px dotted rgba(255, 255, 255, 0.35);
}

.tablemap__table span {
  display: block;
  font-size: 0.5rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.standingnote {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--fs-2xs);
  color: rgba(255, 255, 255, 0.7);
}

/* ---- 11.5 Line-item editors -------------------------------------------- */

.lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

.lines__head,
.line {
  display: grid;
  align-items: center;
  gap: var(--space-2);
}

.lines__head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lines--addon .lines__head,
.lines--addon .line { grid-template-columns: minmax(0, 1fr) 6.5rem 5rem 1.75rem; }

.lines--member .lines__head,
.lines--member .line { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 6rem 1.75rem; }

.line__input {
  width: 100%;
  height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-2xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.line__input:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

.line__text { font-size: var(--fs-2xs); }

.line__remove {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 2.25rem;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
}

.line__remove:hover { color: var(--color-danger); background-color: var(--color-danger-soft); }

.line__remove svg { width: 0.875rem; height: 0.875rem; }

.addline {
  width: 100%;
  min-height: 2.25rem;
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-brand-600);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background-color var(--transition);
}

.addline:hover {
  border-color: var(--color-brand-600);
  background-color: #fdfbfd;
}

/* Promo code editor ------------------------------------------------------- */

.promo {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.promo + .promo { margin-top: var(--space-3); }

.promo__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
}

.promo__code {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.promo__summary {
  flex: 1 1 12rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.promo__rules {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px dashed var(--color-border-soft);
  padding-top: var(--space-4);
}

/* Members directory ------------------------------------------------------- */

.upload {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.upload__body { flex: 1 1 12rem; min-width: 0; }

.upload__title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-label);
}

.directory {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.directory__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-header-row);
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.directory__file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-text-label);
}

.directory__file svg { width: 0.875rem; height: 0.875rem; color: var(--color-success); }

.directory__actions { margin-left: auto; display: flex; gap: var(--space-3); }

.directory__action { font-size: var(--fs-3xs); font-weight: 600; color: var(--color-brand-600); }

.directory__action--danger { color: var(--color-danger); }

.directory__scroll { max-height: 11rem; overflow-y: auto; }

.directory__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 5.5rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-2xs);
  border-bottom: 1px solid var(--color-border-soft);
}

.directory__row:last-child { border-bottom: 0; }

.directory__row--head {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  background-color: #fcfcfd;
}

.directory__email { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; }

.directory__foot {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
  background-color: #fcfcfd;
  border-top: 1px solid var(--color-border-soft);
}

/* Key/value list inside a panel (seating recap, review summary) */
.kvlist > .kv:first-child { border-top: 0; }

/* Tier name doubles as an editable field but must read as a heading */
.tier__name.field__input {
  height: 2rem;
  padding-inline: var(--space-2);
  font-family: var(--font-display);
  border-color: transparent;
  background-color: transparent;
}

.tier__name.field__input:hover { border-color: var(--color-border-soft); }

.tier__name.field__input:focus {
  border-color: var(--color-brand-600);
  background-color: var(--color-white);
}

/* A switch used as an opt-in control needs the same top alignment as a box */
.optin .switch { margin-top: 0.0625rem; }

.btn--block.btn--sm { width: 100%; }

/* ---- 11.6 Totals bar ---------------------------------------------------- */

.totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-image: linear-gradient(100deg, #f7eef5 0%, #fbf5f9 60%, #f4f5f7 100%);
  border: 1px solid #f0dfe9;
}

.totals__label {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.totals__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-brand-600);
  line-height: 1.2;
}

.totals__value--plain { color: var(--color-text); }

/* ---- 11.7 Accordion ---------------------------------------------------- */

.accordion {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.04);
}

.accordion + .accordion { margin-top: var(--space-6); }

.accordion__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  text-align: left;
}

.accordion__body { flex: 1 1 auto; min-width: 0; }

.accordion__title { display: block; font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-display); }

.accordion__text { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); }

.accordion__state {
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-success);
}

.accordion__chev { width: 1rem; height: 1rem; color: var(--color-text-subtle); transition: transform var(--transition); }

.accordion__head[aria-expanded="true"] .accordion__chev { transform: rotate(180deg); }

.accordion__panel {
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-5);
}

/* ---- 11.8 Feature toggle rows ------------------------------------------ */

.featurerow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
}

.featurerow + .featurerow { border-top: 1px solid var(--color-border-soft); }

.featurerow__icon { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }

.featurerow__body { flex: 1 1 auto; min-width: 0; }

.featurerow__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.featurerow__text { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); }

.featurerow__state { font-size: var(--fs-3xs); color: var(--color-text-muted); }

.switch--info[aria-checked="true"]  { background-color: var(--color-info-strong); }
.switch--brand[aria-checked="true"] { background-color: var(--color-brand-600); }
.switch--accent[aria-checked="true"]{ background-color: var(--color-accent); }

.settingrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

/* ---- 11.9 Payout banner + timeline ------------------------------------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  background-image: linear-gradient(100deg, var(--color-brand-800) 0%, #4a1544 55%, var(--color-brand-700) 100%);
}

.banner__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.16);
}

.banner__title { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-display); }

.banner__text { font-size: var(--fs-2xs); color: var(--on-dark); }

.timeline { display: grid; gap: var(--space-2); }

.timeline__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.timeline__no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-brand-600);
  border-radius: 50%;
}

.timeline__rule {
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--color-border-soft);
}

.timeline__body { flex: 0 0 auto; text-align: right; }

.timeline__when { display: block; font-size: var(--fs-2xs); font-weight: 700; }

.timeline__what { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* ---- 11.10 Review & publish -------------------------------------------- */

.reviewhero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 12rem;
  padding: var(--space-5);
  color: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-image: linear-gradient(160deg, #45113f 0%, #2c0a2c 55%, #200820 100%);
}

.reviewhero__placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.75rem;
  height: 1.75rem;
  color: rgba(255, 255, 255, 0.35);
}

.reviewhero__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }

.reviewhero__chip {
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.18);
}

.reviewhero__title { font-size: 1.25rem; }

.reviewhero__tagline { font-size: var(--fs-2xs); color: var(--on-dark); }

.factbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}

.factbar__label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.factbar__label svg { width: 0.75rem; height: 0.75rem; }

.factbar__value { display: block; font-size: var(--fs-sm); font-weight: 700; }

.kv {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.kv + .kv { border-top: 1px solid var(--color-border-soft); }

.kv__body { flex: 1 1 auto; min-width: 0; }

.kv__key { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.kv__value { display: block; font-size: var(--fs-sm); }

.checklist { display: grid; }

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
}

.checklist__item + .checklist__item { border-top: 1px solid var(--color-border-soft); }

.checklist__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: var(--color-success);
  background-color: #ecfdf3;
}

.checklist__mark svg { width: 0.75rem; height: 0.75rem; }

.checklist__item--todo { color: var(--color-warn); }

.checklist__item--todo .checklist__mark {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.checklist__fix {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-warn);
}

.checklist__fix svg { width: 0.75rem; height: 0.75rem; }

.countpill {
  padding: 0.1875rem 0.5rem;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-warn);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-pill);
}

.publishpick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.publishpick__opt {
  padding: var(--space-4);
  text-align: left;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background-color var(--transition);
}

.publishpick__opt[aria-pressed="true"] {
  border-color: var(--color-brand-600);
  background-color: #fdf4fa;
}

.publishpick__icon { font-size: 1.125rem; line-height: 1; }

.publishpick__title { display: block; margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: 700; }

.publishpick__text { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.btn--success {
  color: var(--color-white);
  background-image: linear-gradient(100deg, #15803d 0%, var(--color-success) 100%);
}

.btn--success:hover { filter: brightness(1.08); }

.btn:disabled,
.btn[aria-disabled="true"] {
  color: var(--color-text-subtle);
  background-image: none;
  background-color: #dfe1e6;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.publishbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Capacity headroom meter (upfront guest billing) ------------------------- */

.headroom { margin-top: var(--space-4); }

.headroom__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.headroom__value { font-weight: 700; color: var(--color-text); }

/* Invoice-style rows ------------------------------------------------------ */

.invoice { display: grid; }

.invoice__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
}

.invoice__row + .invoice__row { border-top: 1px solid var(--color-border-soft); }

.invoice__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border-soft);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.invoice__note { font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* ---- Extra fill values used by steps 4–8 ------------------------------- */

.meter__fill[data-fill="43"]  { width: 43%; }
.meter__fill[data-fill="57"]  { width: 57%; }
.meter__fill[data-fill="71"]  { width: 71%; }
.meter__fill[data-fill="86"]  { width: 86%; }
.meter__fill[data-fill="30"]  { width: 30%; }

/* ---- Selected-state variants for the event-type cards ------------------ */

.choice--public.choice--selected  { border-color: var(--color-info); }
.choice--private.choice--selected { border-color: var(--color-brand-600); }
.choice--virtual.choice--selected { border-color: var(--color-success); }

.choice--private.choice--selected { box-shadow: 0 8px 24px rgba(109, 33, 96, 0.16); }
.choice--virtual.choice--selected { box-shadow: 0 8px 24px rgba(22, 163, 74, 0.16); }

.choice--private.choice--selected .choice__head {
  background-image: linear-gradient(140deg, #4a1544 0%, #6d2160 100%);
}

.choice--virtual.choice--selected .choice__head {
  background-image: linear-gradient(140deg, #15803d 0%, #1f9d55 100%);
}

.choice--private.choice--selected .choice__flag { color: var(--color-brand-600); }
.choice--virtual.choice--selected .choice__flag { color: var(--color-success); }

.choice--private.choice--selected .choice__list svg,
.choice--private.choice--selected .choice__auto-title,
.choice--private.choice--selected .choice__auto-list svg { color: var(--color-brand-600); }

.choice--virtual.choice--selected .choice__list svg,
.choice--virtual.choice--selected .choice__auto-title,
.choice--virtual.choice--selected .choice__auto-list svg { color: var(--color-success); }

/* Auto-configured summary and the check badge belong to the selected card only */
.choice:not(.choice--selected) .choice__auto,
.choice:not(.choice--selected) .choice__flag { display: none; }

/* ---- Responsive: steps 4–8 -------------------------------------------- */

@media (max-width: 1024px) {
  .factbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seatplan__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .publishpick,
  .publishbar,
  .factbar { grid-template-columns: minmax(0, 1fr); }

  .lines--addon .lines__head,
  .lines--member .lines__head { display: none; }

  .lines--addon .line,
  .lines--member .line { grid-template-columns: minmax(0, 1fr) 1.75rem; }

  .accordion__head,
  .accordion__panel,
  .featurerow,
  .kv,
  .checklist__item { padding-inline: var(--space-4); }

  .directory__row { grid-template-columns: minmax(0, 1fr) 5rem; }
  .directory__email { display: none; }
}

/* ==========================================================================
   12. EVENT HUB / TEAM / FOOD / COMMUNICATIONS
   --------------------------------------------------------------------------
   12.1  Sidebar Create-Event call to action
   12.2  Full-bleed live hero band      .hero
   12.3  Section sub-tabs               .subtabs
   12.4  Figure cards                   .figure
   12.5  Donut chart                    .donut
   12.6  Role cards                     .rolecard
   12.7  Modal dialog                   .modal
   12.8  Order cards                    .order
   12.9  Message history                .msg
   12.10 Poll results / feed posts      .poll / .post
   ========================================================================== */

/* ---- 12.1 Sidebar CTA --------------------------------------------------- */

.sidenav__cta {
  flex: 0 0 auto;
  padding: 0 var(--space-3) var(--space-2);
}

.sidenav__create {
  gap: var(--space-2);
  min-height: 2.375rem;
  font-size: var(--fs-2xs);
}

.sidenav--rail .sidenav__cta { padding-inline: 0; }

.sidenav--rail .sidenav__create {
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  margin: 0 auto;
}

/* ---- 12.2 Live hero band ------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6) var(--page-gutter);
  color: var(--color-white);
  background-image:
    radial-gradient(46% 150% at 96% 50%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(100deg, var(--color-brand-800) 0%, #5d1a53 55%, #8a3c79 100%);
}

.hero__body { flex: 1 1 18rem; min-width: 0; }

.hero__flag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__title {
  margin: var(--space-2) 0 var(--space-2);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.hero__meta { font-size: var(--fs-2xs); color: var(--on-dark); }

.hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 0 0 auto;
}

.hero__figure { text-align: center; }

.hero__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.hero__caption {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--on-dark);
}

/* ---- 12.3 Section sub-tabs --------------------------------------------- */

.subtabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  padding: var(--space-2) var(--page-gutter);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-soft);
  scrollbar-width: thin;
}

.subtabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  min-height: 2.125rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}

.subtabs__tab svg { width: 0.875rem; height: 0.875rem; }

.subtabs__tab:hover { color: var(--color-text); background-color: var(--color-surface); }

.subtabs__tab[aria-selected="true"] {
  color: var(--color-brand-600);
  font-weight: 600;
  background-color: #f7eef5;
}

/* ---- 12.4 Figure card (big coloured number) ---------------------------- */

.figure {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.figure__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.figure__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.figure__value--success { color: var(--color-success); }
.figure__value--brand   { color: var(--color-brand-600); }
.figure__value--info    { color: var(--color-info); }
.figure__value--accent  { color: #d97706; }

/* ---- 12.5 Donut chart --------------------------------------------------- */

.mix {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.donut {
  position: relative;
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border-radius: 50%;
  background-color: var(--color-white);
}

/* Ticket mix: VIP 24%, Standard 60%, Early Bird 16% */
.donut--ticketmix {
  background-image: conic-gradient(
    var(--color-brand-700) 0 24%,
    var(--color-brand-500) 24% 84%,
    #d9b8d0 84% 100%
  );
}

.legend { display: grid; gap: var(--space-3); }

.legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.legend__swatch {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
}

.legend__swatch--vip      { background-color: var(--color-brand-700); }
.legend__swatch--standard { background-color: var(--color-brand-500); }
.legend__swatch--early    { background-color: #d9b8d0; }

.legend__name { min-width: 5.5rem; }

.legend__value { font-weight: 700; color: var(--color-text); }

/* ---- 12.6 Role cards --------------------------------------------------- */

.rolecard {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.rolecard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.rolecard__count {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.rolecard__perms {
  font-size: var(--fs-3xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.badge--role {
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
}

.badge--owner    { color: #a21caf; background-color: #fdf4ff; }
.badge--editor   { color: var(--color-info); background-color: var(--color-info-soft); }
.badge--finance  { color: var(--color-success); background-color: #ecfdf3; }
.badge--scanner  { color: #b45309; background-color: var(--color-accent-soft); }
.badge--vendor   { color: var(--color-brand-600); background-color: #f7eef5; }
.badge--paused   { color: #b45309; background-color: var(--color-accent-soft); }
.badge--out      { color: var(--color-danger); background-color: var(--color-danger-soft); }

/* A badge that doubles as a toggle button */
button.badge { cursor: pointer; border: 1px solid transparent; }
button.badge:hover { filter: brightness(0.96); }
.badge--new      { color: var(--color-info); background-color: var(--color-info-soft); }
.badge--ready    { color: var(--color-success); background-color: #ecfdf3; }
.badge--scheduled{ color: var(--color-info); background-color: var(--color-info-soft); }

/* ---- 12.7 Modal dialog ------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background-color: rgba(20, 22, 26, 0.5);
  overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal__dialog {
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(20, 22, 26, 0.28);
}

.modal__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-4);
}

.modal__title { flex: 1 1 auto; font-size: 1.0625rem; }

.modal__body {
  flex: 1 1 auto;
  padding: 0 var(--space-6) var(--space-5);
  overflow-y: auto;
}

.modal__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: 0 var(--space-6) var(--space-6);
}

.modal__note {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  background-color: #fbf5f9;
  border-radius: var(--radius-md);
}

/* Radio cards (broadcast vs post) */
.radiocards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.radiocard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.radiocard:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
}

.radiocard input { margin-top: 0.125rem; accent-color: var(--color-brand-600); }

.radiocard__icon { font-size: 1.125rem; line-height: 1; }

.radiocard__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.radiocard__text { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* Inline checkbox / radio chip row */
.chiprow { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-2xs);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.chip:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
}

.chip input { accent-color: var(--color-brand-600); }

/* Option rows inside the poll builder */
.optionrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem;
  gap: var(--space-2);
  align-items: center;
}

.optionrow + .optionrow { margin-top: var(--space-3); }

.subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.subhead__action {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-brand-600);
}

/* ---- 12.8 Live order cards -------------------------------------------- */

.order {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
}

.order + .order { border-top: 1px solid var(--color-border-soft); }

.order__ref {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.order__body { flex: 1 1 14rem; min-width: 0; }

.order__items { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.order__side {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.order__total { font-size: var(--fs-sm); font-weight: 700; }

/* ---- 12.9 Message history --------------------------------------------- */

.msg {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.msg + .msg { border-top: 1px solid var(--color-border-soft); }

.msg__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: var(--color-brand-600);
  background-color: #f7eef5;
}

.msg__icon svg { width: 0.9375rem; height: 0.9375rem; }

.msg__body { flex: 1 1 12rem; min-width: 0; }

.msg__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.msg__meta { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.msg__stats {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex: 0 0 auto;
  text-align: right;
}

.msg__stat { display: block; }

.msg__num { display: block; font-size: var(--fs-sm); font-weight: 700; }

.msg__num--opened { color: var(--color-success); }

.msg__unit { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* ---- 12.10 Polls and feed posts --------------------------------------- */

.poll { padding: var(--space-5); }

.poll + .poll { border-top: 1px solid var(--color-border-soft); }

.poll__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.poll__question { flex: 1 1 14rem; font-size: var(--fs-sm); font-weight: 600; }

.poll__votes { font-size: var(--fs-3xs); color: var(--color-text-muted); }

.pollbar { display: grid; gap: var(--space-3); }

.pollbar__row { display: grid; gap: 0.375rem; }

.pollbar__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
}

.pollbar__pct { font-weight: 700; }

.post { padding: var(--space-5); }

.post + .post { border-top: 1px solid var(--color-border-soft); }

.post__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.post__who { display: block; font-size: var(--fs-2xs); font-weight: 600; }

.post__when { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.post__text { font-size: var(--fs-xs); color: var(--color-text-label); }

.post__stats {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* ---- Credits strip ---------------------------------------------------- */

.credits {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.credits__body { flex: 1 1 auto; min-width: 0; }

.credits__label { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.credits__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-success);
}

/* ---- Bleed helper: hero + subtabs sit outside the page gutter ---------- */

.shell__main--flush { padding: 0 0 var(--space-12); }

.shell__main--flush .page,
.shell__main--flush .section {
  padding: var(--space-8) var(--page-gutter) 0;
}

/* ---- Icon-button tones ------------------------------------------------- */

.iconbtn--info {
  color: var(--color-info);
  background-color: var(--color-info-soft);
}

.iconbtn--info:hover { background-color: #dbeafe; }

/* ---- Extra progress fills (9-step wizard) ----------------------------- */

.meter__fill[data-fill="13"] { width: 13%; }
.meter__fill[data-fill="25"] { width: 25%; }
.meter__fill[data-fill="38"] { width: 38%; }
.meter__fill[data-fill="50"] { width: 50%; }
.meter__fill[data-fill="62"] { width: 62%; }
.meter__fill[data-fill="63"] { width: 63%; }
.meter__fill[data-fill="75"] { width: 75%; }
.meter__fill[data-fill="88"] { width: 88%; }
.meter__fill[data-fill="11"] { width: 11%; }
.meter__fill[data-fill="22"] { width: 22%; }
.meter__fill[data-fill="33"] { width: 33%; }
.meter__fill[data-fill="44"] { width: 44%; }
.meter__fill[data-fill="56"] { width: 56%; }
.meter__fill[data-fill="67"] { width: 67%; }
.meter__fill[data-fill="78"] { width: 78%; }
.meter__fill[data-fill="89"] { width: 89%; }
.meter__fill[data-fill="45"] { width: 45%; }
.meter__fill[data-fill="67"] { width: 67%; }
.meter__fill[data-fill="32"] { width: 32%; }
.meter__fill[data-fill="20"] { width: 20%; }
.meter__fill[data-fill="23"] { width: 23%; }
.meter__fill[data-fill="28"] { width: 28%; }
.meter__fill[data-fill="31"] { width: 31%; }
.meter__fill[data-fill="46"] { width: 46%; }
.meter__fill[data-fill="52"] { width: 52%; }

/* Live-poll fills reuse the same data-driven widths */
.livepoll__fill[data-fill="8"]  { width: 8%; }
.livepoll__fill[data-fill="20"] { width: 20%; }
.livepoll__fill[data-fill="28"] { width: 28%; }
.livepoll__fill[data-fill="30"] { width: 30%; }
.livepoll__fill[data-fill="42"] { width: 42%; }
.livepoll__fill[data-fill="52"] { width: 52%; }
.meter__fill[data-fill="62"] { width: 62%; }

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix { gap: var(--space-5); }
}

@media (max-width: 768px) {
  .hero { padding-inline: var(--space-4); }
  .hero__stats { width: 100%; justify-content: space-between; gap: var(--space-4); }
  .hero__value { font-size: 1.25rem; }
  .subtabs { padding-inline: var(--space-4); }
  .radiocards,
  .modal__foot { grid-template-columns: minmax(0, 1fr); }
  .grid--5 { grid-template-columns: minmax(0, 1fr); }
  .msg { flex-wrap: wrap; }
  .msg__stats { width: 100%; justify-content: flex-start; text-align: left; }
  .legend__name { min-width: 0; }
  .modal { padding: var(--space-3); }
  .modal__head { padding: var(--space-4) var(--space-4) var(--space-3); }
  .modal__body { padding-inline: var(--space-4); }
  .modal__foot { padding: 0 var(--space-4) var(--space-4); }
  .order__side { width: 100%; justify-content: space-between; }
}

/* Body scroll lock while a modal is open */
body.is-locked { overflow: hidden; }

/* Truncating table cell (permission summaries) */
.u-clip {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page-head action cluster (toggle + button) */
.page__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* A switch label pair with no card chrome, used in page headers */
.switchcard--bare {
  gap: var(--space-3);
  padding: 0;
  background-color: transparent;
  border: 0;
}

.switchcard--bare .switchcard__title { font-size: var(--fs-2xs); }

/* Narrower data tables (no wide progress columns) */
.table--narrow { min-width: 44rem; }

@media (max-width: 768px) {
  .page__actions { width: 100%; }
  .page__actions .btn { flex: 1 1 auto; }
}

/* Empty state shown when a status filter matches nothing */
.emptystate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background-color: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.emptystate__icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-subtle);
}

/* ==========================================================================
   13. SETTINGS
   ========================================================================== */

.settings {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.secnav {
  padding: var(--space-2);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.secnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition);
}

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

.secnav__link[aria-current="true"] { background-color: #f7eef5; }

.secnav__link[aria-current="true"] .tile {
  color: var(--color-brand-600);
  background-color: #f2dfec;
}

.secnav__body { flex: 1 1 auto; min-width: 0; }

.secnav__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-label);
}

.secnav__link[aria-current="true"] .secnav__title { color: var(--color-brand-600); }

.secnav__text {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.secnav__chev {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
  color: var(--color-brand-600);
  opacity: 0;
}

.secnav__link[aria-current="true"] .secnav__chev { opacity: 1; }

.secnav__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.secnav__who { display: block; font-size: var(--fs-2xs); font-weight: 600; }

.secnav__org { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* Profile identity block */
.identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-soft);
}

.identity__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-brand-600);
  border-radius: var(--radius-lg);
}

.identity__name { font-size: 1.0625rem; }

.identity__role { font-size: var(--fs-sm); color: var(--color-text-label); }

.identity__since {
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

/* Credit balance cards */
.creditcard {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.creditcard__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.creditcard__name { display: block; font-size: var(--fs-sm); font-weight: 700; }

.creditcard__rate { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.creditcard__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.creditcard__value--whatsapp { color: var(--color-success); }
.creditcard__value--email { color: var(--color-info); }

.creditcard__note { font-size: var(--fs-3xs); color: var(--color-text-muted); }

.creditcard__usage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.meter__fill--email { background-color: var(--color-info-strong); }

/* History rows (payouts, credit usage) */
.histrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.histrow + .histrow { border-top: 1px solid var(--color-border-soft); }

.histrow__body { flex: 1 1 auto; min-width: 0; }

.histrow__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.histrow__when { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.histrow__side { flex: 0 0 auto; text-align: right; }

.histrow__amount { display: block; font-size: var(--fs-sm); font-weight: 700; }

.histrow__amount--debit { color: var(--color-text); }

/* Security rows */
.securow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.securow + .securow { border-top: 1px solid var(--color-border-soft); }

.securow__body { flex: 1 1 auto; min-width: 0; }

.securow__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.securow__text { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

@media (max-width: 1024px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .secnav { position: static; }
}

/* ==========================================================================
   14. PUBLISH CONFIRMATION
   ========================================================================== */

.confirmbox {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background-color: #fbf5f9;
  border-radius: var(--radius-md);
}

.confirmbox__name { font-size: var(--fs-sm); font-weight: 700; }

.confirmbox__meta { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.confirmlist { display: grid; gap: var(--space-3); }

.confirmlist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.confirmlist__item svg {
  flex: 0 0 auto;
  width: 0.8125rem;
  height: 0.8125rem;
  margin-top: 0.1875rem;
  color: var(--color-success);
}

.confirmlist__item b { color: var(--color-text-label); }

/* Working state */
.working {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-4) var(--space-10);
  text-align: center;
}

.spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid #ecdfe8;
  border-top-color: var(--color-brand-600);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

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

.working__title { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-display); }

.working__text { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.working__track {
  width: 12rem;
  height: 4px;
  overflow: hidden;
  background-color: var(--color-track);
  border-radius: var(--radius-pill);
}

.working__bar {
  display: block;
  width: 40%;
  height: 100%;
  background-color: var(--color-brand-600);
  border-radius: var(--radius-pill);
  animation: fill 2.4s ease-in-out forwards;
}

@keyframes fill { from { width: 12%; } to { width: 100%; } }

/* Review hero gains the seats / potential figures */
.reviewhero__stats {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  gap: var(--space-6);
  text-align: right;
}

.reviewhero__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
}

.reviewhero__caption { display: block; font-size: var(--fs-3xs); color: var(--on-dark); }

/* Checklist rows with a value column */
.checklist__label { flex: 1 1 auto; min-width: 0; }

.checklist__value {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: right;
}

.checklist__value--missing { color: var(--color-warn); font-weight: 600; }

.countpill--ok { color: var(--color-success); background-color: #ecfdf3; }

@media (max-width: 768px) {
  .reviewhero__stats {
    position: static;
    margin-bottom: var(--space-4);
    text-align: left;
  }
  .checklist__item { flex-wrap: wrap; }
  .checklist__value { text-align: left; }
}

/* ==========================================================================
   15. SCHEDULE BUILDER, AGENDA TABLE, CAPACITY METER
   ========================================================================== */

/* ---- Day cards ---------------------------------------------------------- */

.day {
  padding: var(--space-4);
  background-color: #fcfcfd;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.day + .day { margin-top: var(--space-4); }

.day__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.day__no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-brand-600);
  border-radius: var(--radius-sm);
}

.day__title { font-size: var(--fs-sm); font-weight: 700; }

.day__date { flex: 0 0 11rem; }

.day__date .field__input { height: 2.25rem; font-size: var(--fs-2xs); }

.day__remove { margin-left: auto; }

/* ---- Slot rows ---------------------------------------------------------- */

.slots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.slots > * { min-width: 0; }

.slots__head,
.slot {
  display: grid;
  grid-template-columns: 6rem 6rem minmax(0, 1fr) minmax(0, 1fr) 6.5rem 1.75rem;
  gap: var(--space-2);
  align-items: center;
}

.slots--single .slots__head,
.slots--single .slot {
  grid-template-columns: 6rem 6rem minmax(0, 1fr) 6.5rem 1.75rem;
}

.slots__head {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.slot {
  padding: var(--space-2);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), background-color var(--transition);
}

.slot.is-conflict {
  border-color: #f3b4b4;
  background-color: var(--color-danger-soft);
}

.slot__input,
.slot__select {
  width: 100%;
  height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-2xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.slot__select {
  padding-right: var(--space-5);
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.375rem center;
  background-size: 0.875rem;
}

.slot__input:focus,
.slot__select:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

/* ---- Agenda table ------------------------------------------------------- */

.agenda { display: grid; }

.agenda__head,
.agendarow {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1.4fr) 4.25rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
}

.agenda__head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-header-row);
  border-bottom: 1px solid var(--color-border-soft);
}

.agendarow { border-bottom: 1px solid var(--color-border-soft); }

.agendarow:last-child { border-bottom: 0; }

.agendarow__cell { min-width: 0; font-size: var(--fs-xs); }

/* Display text and the editor swap places via .is-editing on the row */
.agendarow__cell [data-edit-display] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agendarow__cell input,
.agendarow__cell select { display: none; }

.agendarow.is-editing .agendarow__cell [data-edit-display] { display: none; }

.agendarow.is-editing .agendarow__cell input,
.agendarow.is-editing .agendarow__cell select {
  display: block;
  width: 100%;
  height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-2xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.agendarow__actions { display: flex; gap: 0.125rem; justify-content: flex-end; }

.agendarow [data-edit-save] { display: none; }
.agendarow.is-editing [data-edit-save] { display: grid; }
.agendarow.is-editing [data-edit-toggle] { display: none; }

.agendarow__time { font-weight: 600; }

/* ---- Capacity reconciliation ------------------------------------------- */

.capbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background-color: #fcfcfd;
  border-top: 1px solid var(--color-border-soft);
}

.capbar__item { flex: 0 0 auto; }

.capbar__label { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.capbar__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.capbar__value--total { color: var(--color-brand-600); }
.capbar__value--remaining { color: var(--color-success); }

/* ---- Free-tier card ----------------------------------------------------- */

.freetier {
  padding: var(--space-5);
  background-color: #f2fbf6;
  border: 1px solid #bbf0d0;
  border-radius: var(--radius-md);
}

.freetier__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.freetier__badge {
  padding: 0.25rem 0.625rem;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-success);
  border-radius: var(--radius-sm);
}

.freetier__note { font-size: var(--fs-3xs); color: var(--color-text-muted); }

@media (max-width: 1024px) {
  .slots__head { display: none; }

  .slot,
  .slots--single .slot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agenda__head { display: none; }

  .agendarow {
    grid-template-columns: minmax(0, 1fr) 4.25rem;
    row-gap: var(--space-2);
  }
}

@media (max-width: 768px) {
  .capbar { gap: var(--space-4); }
  .day__date { flex-basis: 100%; }
}

/* Single-venue mode hides the per-slot venue column */
#multi-venue[hidden] ~ * [data-multivenue-cell],
.slots [data-multivenue-cell] { display: block; }

.is-single-venue [data-multivenue-cell] { display: none; }

.day__head { align-items: flex-end; }

/* ==========================================================================
   16. ACCESS CONTROL, BRANDING PREVIEW, FOOD SERVING
   ========================================================================== */

/* ---- Locked-rule banner ------------------------------------------------- */

.lockbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-info);
  background-color: var(--color-info-soft);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
}

.lockbar svg { width: 1rem; height: 1rem; flex: 0 0 auto; }

.lockbar__text { flex: 1 1 auto; min-width: 0; }

.lockbar__change {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* ---- Radio option rows -------------------------------------------------- */

.radios { display: grid; gap: var(--space-3); }

.radios--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.radio:hover { border-color: var(--color-border); }

.radio:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf5fa;
}

.radio:has(input:disabled) {
  cursor: not-allowed;
  background-color: #fcfcfd;
}

.radio:has(input:disabled) .radio__title,
.radio:has(input:disabled) .radio__text { color: var(--color-text-subtle); }

.radio input {
  flex: 0 0 auto;
  margin-top: 0.1875rem;
  accent-color: var(--color-brand-600);
}

.radio__icon { flex: 0 0 auto; font-size: 0.9375rem; line-height: 1.4; }

.radio__body { flex: 1 1 auto; min-width: 0; }

.radio__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.radio__text {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.autotag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-info);
  background-color: var(--color-info-soft);
  border-radius: var(--radius-sm);
  vertical-align: 0.0625rem;
}

.autotag--muted { color: var(--color-text-muted); background-color: var(--color-surface); }

/* ---- Registration form builder ----------------------------------------- */

.fields { display: grid; gap: var(--space-3); }

.fieldrow {
  display: grid;
  grid-template-columns: 1.25rem 1.75rem minmax(0, 1fr) minmax(0, 1.4fr) 4.5rem 1.5rem 1.5rem;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.fieldrow__grip {
  color: var(--color-text-subtle);
  font-size: var(--fs-2xs);
  cursor: grab;
  text-align: center;
}

.fieldrow__no {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-brand-600);
  background-color: #f7eef5;
  border-radius: var(--radius-sm);
}

.fieldrow__input,
.fieldrow__select {
  width: 100%;
  height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-2xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.fieldrow__req {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.fieldrow__req input { accent-color: var(--color-brand-600); }

.fieldrow__icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 2rem;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
}

.fieldrow__icon svg { width: 0.8125rem; height: 0.8125rem; }

.fieldrow__icon--danger:hover { color: var(--color-danger); background-color: var(--color-danger-soft); }

.fieldrow--locked { background-color: #fcfcfd; }

/* ---- Branding & page ---------------------------------------------------- */

.branding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.logodrop {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.logodrop__box {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--color-text-subtle);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.logodrop__box svg { width: 1.25rem; height: 1.25rem; }

.logodrop__body { flex: 1 1 10rem; min-width: 0; }

.logodrop__hint { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.colorrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.swatch {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0;
  background-color: var(--color-white);
  cursor: pointer;
}

.colorrow__input { flex: 1 1 8rem; min-width: 6rem; }

.presets { display: flex; gap: var(--space-2); flex: 0 0 auto; }

.preset {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.preset--plum   { background-color: #5a1d54; }
.preset--blue   { background-color: #2563eb; }
.preset--green  { background-color: #15803d; }
.preset--rust   { background-color: #8a4413; }
.preset--slate  { background-color: #1f2a37; }

.bgpick { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.bgpick__opt {
  flex: 1 1 5.5rem;
  min-height: 2.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.bgpick__opt--light { color: var(--color-text); background-color: var(--color-white); }
.bgpick__opt--dark  { color: var(--color-white); background-color: #1f2a37; }
.bgpick__opt--brand { color: var(--color-white); background-color: var(--color-brand-700); }

.bgpick__opt[aria-pressed="true"] {
  border-color: var(--color-brand-600);
  box-shadow: 0 0 0 3px rgba(109, 33, 96, 0.15);
}

/* ---- Landing-page preview ---------------------------------------------- */

.preview {
  overflow: hidden;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(20, 22, 26, 0.08);
}

.preview__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: #f1f2f4;
  border-bottom: 1px solid var(--color-border-soft);
}

.preview__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.preview__dot--red { background-color: #ef4444; }
.preview__dot--amber { background-color: #f59e0b; }
.preview__dot--green { background-color: #22c55e; }

.preview__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.preview__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.preview__logo {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  color: var(--color-white);
  background-color: var(--color-brand-700);
  border-radius: var(--radius-sm);
}

.preview__logo svg { width: 0.8125rem; height: 0.8125rem; }

.preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  padding: 0.375rem var(--space-3);
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-white);
  background-color: var(--color-brand-700);
  border-radius: var(--radius-md);
}

.preview__hero {
  display: grid;
  place-items: center;
  height: 6.5rem;
  color: #cbb3c6;
  background-image: linear-gradient(120deg, #f4e9f1 0%, #efe3ec 100%);
}

.preview__hero svg { width: 1.5rem; height: 1.5rem; }

.preview__body { padding: var(--space-4); }

.preview__title { font-size: 1.0625rem; color: var(--color-brand-700); }

.preview__meta {
  margin-top: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.preview__tiers { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-4) 0; }

.preview__tier {
  padding: 0.25rem 0.5rem;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-brand-700);
  background-color: #f7eef5;
  border-radius: var(--radius-sm);
}

.preview__register {
  display: block;
  width: 100%;
  padding: var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-white);
  border-radius: var(--radius-md);
  background-image: linear-gradient(100deg, var(--color-brand-700) 0%, #7f2a71 100%);
}

.preview__note {
  margin-top: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.preview__caption {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

/* ---- Food menu rows ---------------------------------------------------- */

.lines--menu .lines__head,
.lines--menu .line {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 5rem 4.5rem 1.75rem;
}

.lines--counter .lines__head,
.lines--counter .line {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) 5rem 1.75rem;
}

.line__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.line__check input { accent-color: var(--color-brand-600); }

@media (max-width: 1024px) {
  .branding { grid-template-columns: minmax(0, 1fr); }
  .radios--2 { grid-template-columns: minmax(0, 1fr); }
  .fieldrow { grid-template-columns: 1.25rem 1.75rem minmax(0, 1fr) 1.5rem 1.5rem; }
  .fieldrow__select,
  .fieldrow__req { display: none; }
}

@media (max-width: 768px) {
  .lines--menu .lines__head,
  .lines--counter .lines__head { display: none; }

  .lines--menu .line,
  .lines--counter .line { grid-template-columns: minmax(0, 1fr) 1.75rem; }

  .lockbar { flex-wrap: wrap; }
}

/* Left-aligned step lead (branding step uses a page-head layout) */
.u-left { text-align: left; }

/* ==========================================================================
   17. FOOD MENU — editor cards + guest-facing preview
   ========================================================================== */

/* ---- Diet indicator (food-app convention) ------------------------------- */

.diet {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 0.9375rem;
  height: 0.9375rem;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.diet::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.diet--veg   { color: #15803d; }
.diet--vegan { color: #0d9488; }
.diet--egg   { color: #d97706; }

.diet--nonveg { color: #b91c1c; }

/* Non-veg uses a triangle, as food apps do */
.diet--nonveg::after {
  width: 0.5rem;
  height: 0.4375rem;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---- Editor cards ------------------------------------------------------- */

.menugrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.menucard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.menucard:focus-within {
  border-color: var(--color-brand-600);
  box-shadow: 0 6px 20px rgba(20, 22, 26, 0.06);
}

.menucard__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.menucard__name {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.25rem;
  padding: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  background-color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.menucard__name:hover { border-color: var(--color-border-soft); }

.menucard__name:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

.menucard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

/* Grid tracks must be allowed to shrink below their content */
.menugrid > *,
.menucard > *,
.menucard__grid > * {
  min-width: 0;
}

.menucard__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Diet picker (segmented pills with indicators) --------------------- */

.dietpick { display: flex; gap: 0.25rem; flex-wrap: wrap; }

.dietpick__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem var(--space-2);
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.dietpick__opt:has(input:checked) {
  border-color: currentColor;
  background-color: #fafbfa;
}

.dietpick__opt:has(input:checked).dietpick__opt--veg    { color: #15803d; }
.dietpick__opt:has(input:checked).dietpick__opt--nonveg { color: #b91c1c; }
.dietpick__opt:has(input:checked).dietpick__opt--vegan  { color: #0d9488; }
.dietpick__opt:has(input:checked).dietpick__opt--egg    { color: #d97706; }

.dietpick__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dietpick__opt:focus-within { box-shadow: var(--shadow-focus); }

/* ---- Extra-serve stepper ----------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.stepper__btn {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-brand-600);
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
}

.stepper__btn:hover { background-color: #f7eef5; }

.stepper__value {
  width: 2rem;
  height: 1.5rem;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: 700;
  background-color: transparent;
  border: 0;
}

.stepper__value:focus { outline: none; }

/* The card's indicator reflects the selected dietary type */
.menucard:has([data-diet-select] option[value="veg"]:checked) .diet {
  color: #15803d;
}

.menucard:has([data-diet-select] option[value="nonveg"]:checked) .diet {
  color: #b91c1c;
}

.menucard:has([data-diet-select] option[value="nonveg"]:checked) .diet::after {
  width: 0.5rem;
  height: 0.4375rem;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.menucard:has([data-diet-select] option[value="vegan"]:checked) .diet { color: #0d9488; }
.menucard:has([data-diet-select] option[value="egg"]:checked) .diet { color: #d97706; }

/* ---- Guest-facing preview ---------------------------------------------- */

.menupreview {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.menupreview__group + .menupreview__group { border-top: 1px solid var(--color-border-soft); }

.menupreview__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-600);
  background-color: #fbf5f9;
}

.menupreview__count { font-weight: 500; color: var(--color-text-muted); }

.menuitem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
}

.menuitem + .menuitem { border-top: 1px solid #f3f4f6; }

.menuitem__body { flex: 1 1 auto; min-width: 0; }

.menuitem__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.menuitem__meta {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.menuitem__limit {
  flex: 0 0 auto;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-brand-600);
  background-color: #f7eef5;
  border-radius: var(--radius-pill);
}

.menuitem__limit--none { color: var(--color-text-muted); background-color: var(--color-surface); }

.menulegend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
  background-color: #fcfcfd;
  border-top: 1px solid var(--color-border-soft);
}

.menulegend span { display: inline-flex; align-items: center; gap: 0.375rem; }

@media (max-width: 1024px) {
  .menugrid { grid-template-columns: minmax(0, 1fr); }
  .menucard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .menucard__grid { grid-template-columns: minmax(0, 1fr); }
  .menuitem,
  .menupreview__heading,
  .menulegend { padding-inline: var(--space-4); }
}

/* ==========================================================================
   18. EVENT HUB — scope bar, panels, seat picker, RSVP, insights
   ========================================================================== */

/* ---- Date / slot scope bar --------------------------------------------- */

.scopebar {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--page-gutter);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border-soft);
}

.scopebar__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.scopebar__label {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.scopetab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.125rem;
  padding: 0 var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--color-text-label);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), background-color var(--transition);
}

.scopetab:hover { border-color: var(--color-brand-500); }

.scopetab[aria-selected="true"],
.scopetab[aria-pressed="true"] {
  color: var(--color-white);
  font-weight: 600;
  background-color: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

.scopetab__date {
  font-size: 0.625rem;
  opacity: 0.75;
}

.scopetab--chip { min-height: 1.875rem; border-radius: var(--radius-pill); }

.scopebar__meta {
  margin-left: auto;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* ---- Hub panel header -------------------------------------------------- */

.hubhead {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.hubhead__body { flex: 1 1 14rem; min-width: 0; }

.hubhead__title { font-size: 1.125rem; letter-spacing: -0.01em; }

.hubhead__text { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.hubhead__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* ---- Interactive seat map (light) -------------------------------------- */

.seatgrid { display: grid; gap: var(--space-2); justify-items: center; }

.seatgrid__stage {
  width: 12rem;
  padding: 0.375rem;
  margin-bottom: var(--space-4);
  text-align: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
}

.seatgrid__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.seatgrid__letter {
  width: 1.25rem;
  flex: 0 0 auto;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
}

.seatbtn {
  width: 1.875rem;
  height: 1.75rem;
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-label);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.seatbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(20, 22, 26, 0.14);
}

.seatbtn--checked {
  color: var(--color-white);
  background-color: var(--color-brand-700);
  border-color: var(--color-brand-700);
}

.seatbtn--vip {
  color: var(--color-brand-700);
  background-color: #f6e4f0;
  border-color: #eccbe2;
}

.seatbtn--taken {
  color: var(--color-text-subtle);
  background-color: #f7f7f9;
  border-color: var(--color-border-soft);
}

.seatbtn--reserved {
  color: #92400e;
  background-color: #fef9c3;
  border-color: #fde68a;
}

.seatbtn[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-brand-600);
}

.seatlegend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.seatlegend span { display: inline-flex; align-items: center; gap: 0.375rem; }

.seatkey {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 3px;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
}

.seatkey--checked { background-color: var(--color-brand-700); border-color: var(--color-brand-700); }
.seatkey--vip { background-color: #f6e4f0; border-color: #eccbe2; }
.seatkey--taken { background-color: #f7f7f9; }
.seatkey--reserved { background-color: #fef9c3; border-color: #fde68a; }

/* ---- Live poll results ------------------------------------------------- */

.livepoll {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.livepoll + .livepoll { margin-top: var(--space-4); }

.livepoll__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-success);
}

.livepoll__flag--closed { color: var(--color-text-muted); }

.livepoll__question {
  margin: var(--space-3) 0 var(--space-5);
  font-size: 1.0625rem;
}

.livepoll__rows { display: grid; gap: var(--space-4); }

.livepoll__row { display: grid; gap: 0.375rem; }

.livepoll__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}

.livepoll__pct { font-weight: 700; font-family: var(--font-display); }

.livepoll__bar {
  height: 6px;
  overflow: hidden;
  background-color: #f1f2f4;
  border-radius: var(--radius-pill);
}

.livepoll__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-600);
}

.livepoll__fill--2 { background-color: var(--color-brand-500); }
.livepoll__fill--3 { background-color: #b97fae; }
.livepoll__fill--4 { background-color: #d3aecb; }

.livepoll__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.livepoll__foot .btn { margin-left: auto; }

/* ---- RSVP queue -------------------------------------------------------- */

.rsvprow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
}

.rsvprow + .rsvprow { border-top: 1px solid var(--color-border-soft); }

.rsvprow__body { flex: 1 1 12rem; min-width: 0; }

.rsvprow__name { display: block; font-size: var(--fs-sm); font-weight: 600; }

.rsvprow__meta { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.rsvprow__note {
  flex: 1 1 14rem;
  min-width: 0;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.rsvprow__actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }

.bulkbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  background-color: #fbf5f9;
  border-bottom: 1px solid var(--color-border-soft);
}

.bulkbar__actions { margin-left: auto; display: flex; gap: var(--space-2); }

/* ---- Insights ---------------------------------------------------------- */

.insight {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.insight + .insight { border-top: 1px solid var(--color-border-soft); }

.insight__body { flex: 1 1 auto; min-width: 0; }

.insight__name { display: block; font-size: var(--fs-sm); font-weight: 600; }

.insight__meta { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.insight__figure { flex: 0 0 auto; text-align: right; }

.insight__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* ---- Menu management rows (Event Hub) ---------------------------------- */

.mgrow {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1.6fr) minmax(0, 1fr) 8rem 7.5rem 5.5rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
}

.mgrow--head {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-header-row);
  border-bottom: 1px solid var(--color-border-soft);
}

.mgrow + .mgrow { border-top: 1px solid var(--color-border-soft); }

.mgrow.is-out { background-color: #fdf7f7; }

.mgrow.is-out .mgrow__name { color: var(--color-text-subtle); text-decoration: line-through; }

.mgrow__name { font-size: var(--fs-sm); font-weight: 600; }

.mgrow__cat { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.mgrow__actions { display: flex; gap: 0.125rem; justify-content: flex-end; }

.mgrow input[type="text"] { display: none; }

.mgrow.is-editing .mgrow__name span { display: none; }

.mgrow.is-editing input[type="text"] {
  display: block;
  width: 100%;
  height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-2xs);
  border: 1px solid var(--color-brand-600);
  border-radius: var(--radius-sm);
}

/* ---- Slot cards (wizard) ----------------------------------------------- */

.slotcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.slotcard + .slotcard { margin-top: var(--space-3); }

.slotcard > * { min-width: 0; }

.slotcard.is-conflict {
  border-color: #f3b4b4;
  background-color: var(--color-danger-soft);
}

.slotcard__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.slotcard__no {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-brand-600);
  background-color: #f7eef5;
  border-radius: var(--radius-sm);
}

.slotcard__name {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.125rem;
  padding: 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: 600;
  background-color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.slotcard__name:hover { border-color: var(--color-border-soft); }

.slotcard__name:focus {
  outline: none;
  border-color: var(--color-brand-600);
  box-shadow: var(--shadow-focus);
}

.slotcard__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.slotcard__grid > * { min-width: 0; }

.slotcard__label {
  display: block;
  margin-bottom: 0.1875rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---- Registration-form preview ---------------------------------------- */

.formpreview { display: grid; gap: var(--space-4); }

.formpreview__field { display: grid; gap: 0.375rem; }

.formpreview__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-label);
}

.formpreview__mock {
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  font-size: var(--fs-2xs);
  color: var(--color-text-subtle);
  background-color: #fbfbfc;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.formpreview__mock--area { min-height: 4.5rem; align-items: flex-start; padding-top: var(--space-3); }

@media (max-width: 1024px) {
  .mgrow { grid-template-columns: 1.25rem minmax(0, 1fr) 7.5rem 5.5rem; }
  .mgrow__cat,
  .mgrow__limit { display: none; }
  .slotcard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .scopebar { padding-inline: var(--space-4); }
  .seatbtn { width: 1.625rem; height: 1.5rem; }
  .rsvprow__actions { width: 100%; }
  .rsvprow__actions .btn { flex: 1 1 auto; }
  .mgrow { grid-template-columns: 1.25rem minmax(0, 1fr) 5.5rem; }
  .mgrow__avail { display: none; }
  .slotcard__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Dashed grouping box around an optional mode switch */
.dashbox {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  background-color: #fdfcfd;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.dashbox__tag {
  position: absolute;
  top: -0.5rem;
  left: var(--space-4);
  padding: 0 var(--space-2);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-600);
  background-color: var(--color-surface);
}

/* Toolbar select wrappers keep search, filters and actions on one baseline */
.toolbar { align-items: flex-end; }

.toolbar__field { flex: 0 0 auto; min-width: 9rem; }

.toolbar__field .field__select { height: 2.375rem; font-size: var(--fs-2xs); }

.toolbar__search .searchbox__input { height: 2.375rem; }

.toolbar > .btn { flex: 0 0 auto; }

@media (max-width: 768px) {
  .toolbar__field { flex: 1 1 45%; min-width: 0; }
}

/* ==========================================================================
   19. MY PLAN — contract, usage monitor, wallet, invoices, audit
   ========================================================================== */

.contract {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  background-image:
    radial-gradient(60% 140% at 88% 40%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(120deg, #3b0f3a 0%, #4e1548 55%, #611c58 100%);
}

.contract__body { flex: 1 1 20rem; min-width: 0; }

.contract__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }

.contract__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.16);
}

.contract__chip--active { color: #86efac; background-color: rgba(34, 197, 94, 0.16); }
.contract__chip--renew { color: #bfdbfe; background-color: rgba(59, 130, 246, 0.18); }

.contract__name { font-size: 1.375rem; letter-spacing: -0.01em; }

.contract__meta { margin-top: var(--space-2); font-size: var(--fs-2xs); color: var(--on-dark); }

.contract__expiry {
  flex: 0 0 16rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background-color: rgba(0, 0, 0, 0.22);
}

.contract__expiry-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--on-dark);
}

.contract__days {
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fde68a;
  background-color: rgba(253, 230, 138, 0.16);
  border-radius: var(--radius-sm);
}

.contract__dates {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--fs-3xs);
  color: var(--on-dark-strong);
}

.contract__track {
  display: block;
  height: 6px;
  margin-top: var(--space-3);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
}

.contract__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-image: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.contract__note { margin-top: var(--space-2); font-size: 0.6875rem; color: var(--on-dark-muted); }

.contract__fill[data-fill="61"] { width: 61%; }

/* Allocation bar widths */
.alloc__fill[data-fill="76"] { width: 76%; }
.alloc__fill[data-fill="80"] { width: 80%; }
.alloc__fill[data-fill="84"] { width: 84%; }
.alloc__fill[data-fill="93"] { width: 93%; }

/* The contract card's headline reads dark on the wallet panel */
.u-dark { color: var(--color-text); }

/* ---- Allocation cards --------------------------------------------------- */

.alloc {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.alloc__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.alloc__label { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); }

.alloc__value {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.alloc__total { font-size: var(--fs-2xs); font-weight: 500; color: var(--color-text-muted); }

.alloc__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.alloc__bar {
  /* A span defaults to inline, where height is ignored and the block-level
     fill inside blows the line box open — that was the overlapping bar. */
  display: block;
  height: 8px;
  margin-top: var(--space-4);
  overflow: hidden;
  background-color: #eef0f3;
  border-radius: var(--radius-pill);
}

.alloc__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
}

.alloc__fill--ok { background-color: var(--color-success-strong); }
.alloc__fill--warn { background-color: var(--color-accent); }
.alloc__fill--danger { background-color: var(--color-danger); }

.pill {
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pill--warn { color: #92400e; background-color: #fef3c7; }
.pill--danger { color: #991b1b; background-color: #fee2e2; }
.pill--ok { color: #166534; background-color: #dcfce7; }
.pill--brand { color: var(--color-brand-600); background-color: #f7eef5; }

/* ---- Credits summary card ---------------------------------------------- */

.creditsum {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background-image: linear-gradient(140deg, #f7eef5 0%, #fbf5f9 60%, #f4f5f7 100%);
  border: 1px solid #f0dfe9;
}

.creditsum__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.creditsum__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-brand-600);
  line-height: 1.1;
}

.creditsum__split { font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* ---- Channel cards ------------------------------------------------------ */

.channel {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.channel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.channel__name { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-display); }

.channel__text { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.channel__rates {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background-color: #fbfbfc;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.channel__rate {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.channel__rate b { color: var(--color-text); }

.channel__capacity { font-size: var(--fs-3xs); color: var(--color-text-muted); }

.channel__left {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.channel__left--wa { color: var(--color-success); }
.channel__left--email { color: var(--color-info); }
.channel__left--sms { color: var(--color-brand-600); }

/* ---- Commission banner -------------------------------------------------- */

.commission {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-5);
  background-color: #fbf3f8;
  border: 1px solid #f0dfe9;
  border-radius: var(--radius-lg);
}

.commission__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-white);
  background-color: var(--color-brand-700);
  border-radius: var(--radius-md);
}

.commission__body { flex: 1 1 18rem; min-width: 0; }

.commission__title { font-size: var(--fs-lg); font-weight: 700; font-family: var(--font-display); }

.commission__text { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.commission__figure { flex: 0 0 auto; text-align: right; }

.commission__label { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.commission__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-brand-700);
}

.commission__badge {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-success);
  background-color: #dcfce7;
  border-radius: var(--radius-sm);
}

/* ---- Invoices ----------------------------------------------------------- */

.invoicecard {
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.invoicecard + .invoicecard { margin-top: var(--space-4); }

.invoicecard__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

.invoicecard__body { flex: 1 1 auto; min-width: 0; }

.invoicecard__ref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.invoicecard__dates { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.invoicecard__amount { flex: 0 0 auto; text-align: right; }

.invoicecard__total {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
}

.invoicecard__panel { border-top: 1px solid var(--color-border-soft); }

.auditbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-5);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
  background-color: #fbf3f8;
  border: 1px solid #f0dfe9;
  border-radius: var(--radius-md);
}

.auditbar__tag {
  margin-left: auto;
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-brand-800);
  border-radius: var(--radius-sm);
}

.lineitems { width: 100%; border-collapse: collapse; }

.lineitems caption {
  padding: 0 var(--space-5) var(--space-3);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lineitems th {
  padding: var(--space-3) var(--space-5);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: left;
  background-color: var(--color-header-row);
  border-block: 1px solid var(--color-border-soft);
}

.lineitems th:last-child,
.lineitems td:last-child { text-align: right; }

.lineitems td {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-2xs);
  border-bottom: 1px solid #f3f4f6;
}

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

.itemtype {
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.itemtype--subscription { color: #7c3aed; background-color: #f3e8ff; }
.itemtype--commission   { color: #be185d; background-color: #fce7f3; }
.itemtype--addon        { color: #c2410c; background-color: #ffedd5; }
.itemtype--overage      { color: #b45309; background-color: #fef3c7; }
.itemtype--service      { color: #0f766e; background-color: #ccfbf1; }

.totalsblock {
  padding: var(--space-4) var(--space-5);
  background-color: #fbfbfc;
  border-top: 1px solid var(--color-border-soft);
}

.totalsblock__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.25rem 0;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.totalsblock__row--grand {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
}

.invoicecard__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

/* ---- Overage rules ------------------------------------------------------ */

.ratebox {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: #fbfbfc;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.ratebox__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-text-label);
}

.ratebox__head svg { width: 0.875rem; height: 0.875rem; color: var(--color-info); }

.ratebox__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

.ratecard {
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.ratecard__label { display: block; font-size: 0.625rem; color: var(--color-text-muted); }

.ratecard__value {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.overagebox {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-warn-soft);
  border: 1px solid var(--color-warn-border);
  border-radius: var(--radius-md);
}

.overagebox__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-warn);
}

.overagebox__head svg { width: 0.875rem; height: 0.875rem; }

.overagebox__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
}

@media (max-width: 1024px) {
  .contract__expiry { flex-basis: 100%; }
  .ratebox__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .commission__figure { text-align: left; }
  .invoicecard__head { flex-wrap: wrap; }
  .lineitems th,
  .lineitems td { padding-inline: var(--space-4); }
}

/* ---- Wallet header ------------------------------------------------------ */

.wallethead {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6);
}

.wallethead__body { flex: 1 1 22rem; min-width: 0; }

.wallethead__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.wallethead__kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wallethead__title {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.wallethead__text {
  max-width: 34rem;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.wallethead__aside { flex: 0 0 20rem; }

/* ---- Entitlements matrix ----------------------------------------------- */

.entitlements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.entitlement {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--color-text-label);
  background-color: #f4fbf6;
  border: 1px solid #cdeddb;
  border-radius: var(--radius-md);
}

.entitlement__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: auto;
  color: var(--color-white);
  background-color: var(--color-success);
  border-radius: 50%;
}

.entitlement__mark svg { width: 0.625rem; height: 0.625rem; }

@media (max-width: 1024px) {
  .entitlements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallethead__aside { flex-basis: 100%; }
}

@media (max-width: 768px) {
  .entitlements { grid-template-columns: minmax(0, 1fr); }
  .wallethead { padding: var(--space-4); }
}

/* Step 1 needs a wider column than a form step — two large choice cards */
body:has(.choices) .wizard__inner { max-width: 62rem; }

/* ==========================================================================
   20. COVER IMAGE PREVIEW, RSVP STEP, FREE-SEATING SIZES
   ========================================================================== */

/* ---- Cover image gallery ------------------------------------------------ */

.covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.cover {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.cover--primary { border-color: var(--color-brand-600); box-shadow: 0 0 0 2px #f2dfec; }

.cover__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: #ece8ee;
}

.cover__tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 0.125rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-white);
  background-color: var(--color-brand-700);
  border-radius: var(--radius-sm);
}

.cover__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-white);
}

.cover__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

.cover__act {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
}

.cover__act:hover { color: var(--color-brand-600); background-color: #f7eef5; }

.cover__act--danger:hover { color: var(--color-danger); background-color: var(--color-danger-soft); }

.cover__act svg { width: 0.8125rem; height: 0.8125rem; }

.covercount { font-variant-numeric: tabular-nums; }

/* ---- FAQ / policy editor rows ------------------------------------------ */

.qa {
  position: relative;
  padding: var(--space-4);
  padding-right: 3rem;
  background-color: #fafafb;
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-brand-600);
  border-radius: var(--radius-sm);
}

.qa + .qa { margin-top: var(--space-4); }

.qa__remove {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-text-subtle);
  border-radius: var(--radius-sm);
}

.qa__remove:hover { color: var(--color-danger); background-color: var(--color-danger-soft); }

.qa__remove svg { width: 0.875rem; height: 0.875rem; }

.qa__answer { margin-top: var(--space-3); }

/* Bullet-aware textareas keep their list markers readable */
.bulletarea {
  min-height: 7rem;
  font-family: var(--font-body);
  line-height: 1.7;
  white-space: pre-wrap;
}

.bullethint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--color-text-subtle);
}

.bullethint svg { width: 0.8125rem; height: 0.8125rem; }

/* ---- RSVP wizard step -------------------------------------------------- */

.rsvpstat {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.rsvpstat > * { min-width: 0; }

.channelpick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.channelpick > * { min-width: 0; }

.sendcard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.sendcard:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
}

.sendcard input { margin-top: 0.1875rem; accent-color: var(--color-brand-600); }

.sendcard__body { flex: 1 1 auto; min-width: 0; }

.sendcard__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.sendcard__text { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.sendcard__cost {
  flex: 0 0 auto;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* ---- Free-event seating sizes ------------------------------------------ */

.sizegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: end;
}

.sizegrid > * { min-width: 0; }

.sizetotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: #f2fbf6;
  border: 1px solid #bbf0d0;
  border-radius: var(--radius-md);
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
}

.sizetotal__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-success);
}

/* ---- Package & usage monitor: allocation row layout -------------------- */

.allocrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: stretch;
}

.allocrow > * { min-width: 0; }

.sectionhead {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-8) 0 var(--space-5);
}

.sectionhead__body { flex: 1 1 20rem; min-width: 0; }

.sectionhead__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.sectionhead__text {
  margin-top: 0.1875rem;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.sectionhead__action {
  flex: 0 0 auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-brand-600);
}

.sectionhead__action:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .rsvpstat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .allocrow { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .rsvpstat,
  .channelpick,
  .sizegrid { grid-template-columns: minmax(0, 1fr); }
  .covers { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

/* ---- Meter fill ladder --------------------------------------------------
   The wizard progress bar is derived at runtime (private events have one more
   step than public ones), so every whole percentage needs a width rule rather
   than the handful the static build used to emit.
   ------------------------------------------------------------------------ */

.meter__fill[data-fill="0"] { width: 0%; }
.meter__fill[data-fill="1"] { width: 1%; }
.meter__fill[data-fill="2"] { width: 2%; }
.meter__fill[data-fill="3"] { width: 3%; }
.meter__fill[data-fill="4"] { width: 4%; }
.meter__fill[data-fill="5"] { width: 5%; }
.meter__fill[data-fill="6"] { width: 6%; }
.meter__fill[data-fill="7"] { width: 7%; }
.meter__fill[data-fill="8"] { width: 8%; }
.meter__fill[data-fill="9"] { width: 9%; }
.meter__fill[data-fill="10"] { width: 10%; }
.meter__fill[data-fill="11"] { width: 11%; }
.meter__fill[data-fill="12"] { width: 12%; }
.meter__fill[data-fill="13"] { width: 13%; }
.meter__fill[data-fill="14"] { width: 14%; }
.meter__fill[data-fill="15"] { width: 15%; }
.meter__fill[data-fill="16"] { width: 16%; }
.meter__fill[data-fill="17"] { width: 17%; }
.meter__fill[data-fill="18"] { width: 18%; }
.meter__fill[data-fill="19"] { width: 19%; }
.meter__fill[data-fill="20"] { width: 20%; }
.meter__fill[data-fill="21"] { width: 21%; }
.meter__fill[data-fill="22"] { width: 22%; }
.meter__fill[data-fill="23"] { width: 23%; }
.meter__fill[data-fill="24"] { width: 24%; }
.meter__fill[data-fill="25"] { width: 25%; }
.meter__fill[data-fill="26"] { width: 26%; }
.meter__fill[data-fill="27"] { width: 27%; }
.meter__fill[data-fill="28"] { width: 28%; }
.meter__fill[data-fill="29"] { width: 29%; }
.meter__fill[data-fill="30"] { width: 30%; }
.meter__fill[data-fill="31"] { width: 31%; }
.meter__fill[data-fill="32"] { width: 32%; }
.meter__fill[data-fill="33"] { width: 33%; }
.meter__fill[data-fill="34"] { width: 34%; }
.meter__fill[data-fill="35"] { width: 35%; }
.meter__fill[data-fill="36"] { width: 36%; }
.meter__fill[data-fill="37"] { width: 37%; }
.meter__fill[data-fill="38"] { width: 38%; }
.meter__fill[data-fill="39"] { width: 39%; }
.meter__fill[data-fill="40"] { width: 40%; }
.meter__fill[data-fill="41"] { width: 41%; }
.meter__fill[data-fill="42"] { width: 42%; }
.meter__fill[data-fill="43"] { width: 43%; }
.meter__fill[data-fill="44"] { width: 44%; }
.meter__fill[data-fill="45"] { width: 45%; }
.meter__fill[data-fill="46"] { width: 46%; }
.meter__fill[data-fill="47"] { width: 47%; }
.meter__fill[data-fill="48"] { width: 48%; }
.meter__fill[data-fill="49"] { width: 49%; }
.meter__fill[data-fill="50"] { width: 50%; }
.meter__fill[data-fill="51"] { width: 51%; }
.meter__fill[data-fill="52"] { width: 52%; }
.meter__fill[data-fill="53"] { width: 53%; }
.meter__fill[data-fill="54"] { width: 54%; }
.meter__fill[data-fill="55"] { width: 55%; }
.meter__fill[data-fill="56"] { width: 56%; }
.meter__fill[data-fill="57"] { width: 57%; }
.meter__fill[data-fill="58"] { width: 58%; }
.meter__fill[data-fill="59"] { width: 59%; }
.meter__fill[data-fill="60"] { width: 60%; }
.meter__fill[data-fill="61"] { width: 61%; }
.meter__fill[data-fill="62"] { width: 62%; }
.meter__fill[data-fill="63"] { width: 63%; }
.meter__fill[data-fill="64"] { width: 64%; }
.meter__fill[data-fill="65"] { width: 65%; }
.meter__fill[data-fill="66"] { width: 66%; }
.meter__fill[data-fill="67"] { width: 67%; }
.meter__fill[data-fill="68"] { width: 68%; }
.meter__fill[data-fill="69"] { width: 69%; }
.meter__fill[data-fill="70"] { width: 70%; }
.meter__fill[data-fill="71"] { width: 71%; }
.meter__fill[data-fill="72"] { width: 72%; }
.meter__fill[data-fill="73"] { width: 73%; }
.meter__fill[data-fill="74"] { width: 74%; }
.meter__fill[data-fill="75"] { width: 75%; }
.meter__fill[data-fill="76"] { width: 76%; }
.meter__fill[data-fill="77"] { width: 77%; }
.meter__fill[data-fill="78"] { width: 78%; }
.meter__fill[data-fill="79"] { width: 79%; }
.meter__fill[data-fill="80"] { width: 80%; }
.meter__fill[data-fill="81"] { width: 81%; }
.meter__fill[data-fill="82"] { width: 82%; }
.meter__fill[data-fill="83"] { width: 83%; }
.meter__fill[data-fill="84"] { width: 84%; }
.meter__fill[data-fill="85"] { width: 85%; }
.meter__fill[data-fill="86"] { width: 86%; }
.meter__fill[data-fill="87"] { width: 87%; }
.meter__fill[data-fill="88"] { width: 88%; }
.meter__fill[data-fill="89"] { width: 89%; }
.meter__fill[data-fill="90"] { width: 90%; }
.meter__fill[data-fill="91"] { width: 91%; }
.meter__fill[data-fill="92"] { width: 92%; }
.meter__fill[data-fill="93"] { width: 93%; }
.meter__fill[data-fill="94"] { width: 94%; }
.meter__fill[data-fill="95"] { width: 95%; }
.meter__fill[data-fill="96"] { width: 96%; }
.meter__fill[data-fill="97"] { width: 97%; }
.meter__fill[data-fill="98"] { width: 98%; }
.meter__fill[data-fill="99"] { width: 99%; }
.meter__fill[data-fill="100"] { width: 100%; }

/* ---- Allocation / contract bar ladders ---------------------------------- */

.alloc__fill[data-fill="0"],
.contract__fill[data-fill="0"] { width: 0%; }
.alloc__fill[data-fill="1"],
.contract__fill[data-fill="1"] { width: 1%; }
.alloc__fill[data-fill="2"],
.contract__fill[data-fill="2"] { width: 2%; }
.alloc__fill[data-fill="3"],
.contract__fill[data-fill="3"] { width: 3%; }
.alloc__fill[data-fill="4"],
.contract__fill[data-fill="4"] { width: 4%; }
.alloc__fill[data-fill="5"],
.contract__fill[data-fill="5"] { width: 5%; }
.alloc__fill[data-fill="6"],
.contract__fill[data-fill="6"] { width: 6%; }
.alloc__fill[data-fill="7"],
.contract__fill[data-fill="7"] { width: 7%; }
.alloc__fill[data-fill="8"],
.contract__fill[data-fill="8"] { width: 8%; }
.alloc__fill[data-fill="9"],
.contract__fill[data-fill="9"] { width: 9%; }
.alloc__fill[data-fill="10"],
.contract__fill[data-fill="10"] { width: 10%; }
.alloc__fill[data-fill="11"],
.contract__fill[data-fill="11"] { width: 11%; }
.alloc__fill[data-fill="12"],
.contract__fill[data-fill="12"] { width: 12%; }
.alloc__fill[data-fill="13"],
.contract__fill[data-fill="13"] { width: 13%; }
.alloc__fill[data-fill="14"],
.contract__fill[data-fill="14"] { width: 14%; }
.alloc__fill[data-fill="15"],
.contract__fill[data-fill="15"] { width: 15%; }
.alloc__fill[data-fill="16"],
.contract__fill[data-fill="16"] { width: 16%; }
.alloc__fill[data-fill="17"],
.contract__fill[data-fill="17"] { width: 17%; }
.alloc__fill[data-fill="18"],
.contract__fill[data-fill="18"] { width: 18%; }
.alloc__fill[data-fill="19"],
.contract__fill[data-fill="19"] { width: 19%; }
.alloc__fill[data-fill="20"],
.contract__fill[data-fill="20"] { width: 20%; }
.alloc__fill[data-fill="21"],
.contract__fill[data-fill="21"] { width: 21%; }
.alloc__fill[data-fill="22"],
.contract__fill[data-fill="22"] { width: 22%; }
.alloc__fill[data-fill="23"],
.contract__fill[data-fill="23"] { width: 23%; }
.alloc__fill[data-fill="24"],
.contract__fill[data-fill="24"] { width: 24%; }
.alloc__fill[data-fill="25"],
.contract__fill[data-fill="25"] { width: 25%; }
.alloc__fill[data-fill="26"],
.contract__fill[data-fill="26"] { width: 26%; }
.alloc__fill[data-fill="27"],
.contract__fill[data-fill="27"] { width: 27%; }
.alloc__fill[data-fill="28"],
.contract__fill[data-fill="28"] { width: 28%; }
.alloc__fill[data-fill="29"],
.contract__fill[data-fill="29"] { width: 29%; }
.alloc__fill[data-fill="30"],
.contract__fill[data-fill="30"] { width: 30%; }
.alloc__fill[data-fill="31"],
.contract__fill[data-fill="31"] { width: 31%; }
.alloc__fill[data-fill="32"],
.contract__fill[data-fill="32"] { width: 32%; }
.alloc__fill[data-fill="33"],
.contract__fill[data-fill="33"] { width: 33%; }
.alloc__fill[data-fill="34"],
.contract__fill[data-fill="34"] { width: 34%; }
.alloc__fill[data-fill="35"],
.contract__fill[data-fill="35"] { width: 35%; }
.alloc__fill[data-fill="36"],
.contract__fill[data-fill="36"] { width: 36%; }
.alloc__fill[data-fill="37"],
.contract__fill[data-fill="37"] { width: 37%; }
.alloc__fill[data-fill="38"],
.contract__fill[data-fill="38"] { width: 38%; }
.alloc__fill[data-fill="39"],
.contract__fill[data-fill="39"] { width: 39%; }
.alloc__fill[data-fill="40"],
.contract__fill[data-fill="40"] { width: 40%; }
.alloc__fill[data-fill="41"],
.contract__fill[data-fill="41"] { width: 41%; }
.alloc__fill[data-fill="42"],
.contract__fill[data-fill="42"] { width: 42%; }
.alloc__fill[data-fill="43"],
.contract__fill[data-fill="43"] { width: 43%; }
.alloc__fill[data-fill="44"],
.contract__fill[data-fill="44"] { width: 44%; }
.alloc__fill[data-fill="45"],
.contract__fill[data-fill="45"] { width: 45%; }
.alloc__fill[data-fill="46"],
.contract__fill[data-fill="46"] { width: 46%; }
.alloc__fill[data-fill="47"],
.contract__fill[data-fill="47"] { width: 47%; }
.alloc__fill[data-fill="48"],
.contract__fill[data-fill="48"] { width: 48%; }
.alloc__fill[data-fill="49"],
.contract__fill[data-fill="49"] { width: 49%; }
.alloc__fill[data-fill="50"],
.contract__fill[data-fill="50"] { width: 50%; }
.alloc__fill[data-fill="51"],
.contract__fill[data-fill="51"] { width: 51%; }
.alloc__fill[data-fill="52"],
.contract__fill[data-fill="52"] { width: 52%; }
.alloc__fill[data-fill="53"],
.contract__fill[data-fill="53"] { width: 53%; }
.alloc__fill[data-fill="54"],
.contract__fill[data-fill="54"] { width: 54%; }
.alloc__fill[data-fill="55"],
.contract__fill[data-fill="55"] { width: 55%; }
.alloc__fill[data-fill="56"],
.contract__fill[data-fill="56"] { width: 56%; }
.alloc__fill[data-fill="57"],
.contract__fill[data-fill="57"] { width: 57%; }
.alloc__fill[data-fill="58"],
.contract__fill[data-fill="58"] { width: 58%; }
.alloc__fill[data-fill="59"],
.contract__fill[data-fill="59"] { width: 59%; }
.alloc__fill[data-fill="60"],
.contract__fill[data-fill="60"] { width: 60%; }
.alloc__fill[data-fill="61"],
.contract__fill[data-fill="61"] { width: 61%; }
.alloc__fill[data-fill="62"],
.contract__fill[data-fill="62"] { width: 62%; }
.alloc__fill[data-fill="63"],
.contract__fill[data-fill="63"] { width: 63%; }
.alloc__fill[data-fill="64"],
.contract__fill[data-fill="64"] { width: 64%; }
.alloc__fill[data-fill="65"],
.contract__fill[data-fill="65"] { width: 65%; }
.alloc__fill[data-fill="66"],
.contract__fill[data-fill="66"] { width: 66%; }
.alloc__fill[data-fill="67"],
.contract__fill[data-fill="67"] { width: 67%; }
.alloc__fill[data-fill="68"],
.contract__fill[data-fill="68"] { width: 68%; }
.alloc__fill[data-fill="69"],
.contract__fill[data-fill="69"] { width: 69%; }
.alloc__fill[data-fill="70"],
.contract__fill[data-fill="70"] { width: 70%; }
.alloc__fill[data-fill="71"],
.contract__fill[data-fill="71"] { width: 71%; }
.alloc__fill[data-fill="72"],
.contract__fill[data-fill="72"] { width: 72%; }
.alloc__fill[data-fill="73"],
.contract__fill[data-fill="73"] { width: 73%; }
.alloc__fill[data-fill="74"],
.contract__fill[data-fill="74"] { width: 74%; }
.alloc__fill[data-fill="75"],
.contract__fill[data-fill="75"] { width: 75%; }
.alloc__fill[data-fill="76"],
.contract__fill[data-fill="76"] { width: 76%; }
.alloc__fill[data-fill="77"],
.contract__fill[data-fill="77"] { width: 77%; }
.alloc__fill[data-fill="78"],
.contract__fill[data-fill="78"] { width: 78%; }
.alloc__fill[data-fill="79"],
.contract__fill[data-fill="79"] { width: 79%; }
.alloc__fill[data-fill="80"],
.contract__fill[data-fill="80"] { width: 80%; }
.alloc__fill[data-fill="81"],
.contract__fill[data-fill="81"] { width: 81%; }
.alloc__fill[data-fill="82"],
.contract__fill[data-fill="82"] { width: 82%; }
.alloc__fill[data-fill="83"],
.contract__fill[data-fill="83"] { width: 83%; }
.alloc__fill[data-fill="84"],
.contract__fill[data-fill="84"] { width: 84%; }
.alloc__fill[data-fill="85"],
.contract__fill[data-fill="85"] { width: 85%; }
.alloc__fill[data-fill="86"],
.contract__fill[data-fill="86"] { width: 86%; }
.alloc__fill[data-fill="87"],
.contract__fill[data-fill="87"] { width: 87%; }
.alloc__fill[data-fill="88"],
.contract__fill[data-fill="88"] { width: 88%; }
.alloc__fill[data-fill="89"],
.contract__fill[data-fill="89"] { width: 89%; }
.alloc__fill[data-fill="90"],
.contract__fill[data-fill="90"] { width: 90%; }
.alloc__fill[data-fill="91"],
.contract__fill[data-fill="91"] { width: 91%; }
.alloc__fill[data-fill="92"],
.contract__fill[data-fill="92"] { width: 92%; }
.alloc__fill[data-fill="93"],
.contract__fill[data-fill="93"] { width: 93%; }
.alloc__fill[data-fill="94"],
.contract__fill[data-fill="94"] { width: 94%; }
.alloc__fill[data-fill="95"],
.contract__fill[data-fill="95"] { width: 95%; }
.alloc__fill[data-fill="96"],
.contract__fill[data-fill="96"] { width: 96%; }
.alloc__fill[data-fill="97"],
.contract__fill[data-fill="97"] { width: 97%; }
.alloc__fill[data-fill="98"],
.contract__fill[data-fill="98"] { width: 98%; }
.alloc__fill[data-fill="99"],
.contract__fill[data-fill="99"] { width: 99%; }
.alloc__fill[data-fill="100"],
.contract__fill[data-fill="100"] { width: 100%; }

/* ==========================================================================
   21. Package & usage monitor — credits strip and overage table
   ========================================================================== */

.creditstrip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: var(--space-5);
  background-image: linear-gradient(120deg, #fdf7fb 0%, var(--color-white) 60%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.creditstrip__body { flex: 1 1 18rem; min-width: 0; }

.creditstrip__label {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.creditstrip__value {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.15;
}

.creditstrip__split {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.overagetotal { flex: 0 0 auto; text-align: right; }

.overagetotal__label {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.overagetotal__value {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-success);
}

@media (max-width: 768px) {
  .creditstrip { align-items: flex-start; }
  .creditstrip .btn { width: 100%; }
  .overagetotal { text-align: left; }
}

/* ---- Day / session scope picker (food availability, ticket access) ------ */

.scopepicker {
  padding: var(--space-5);
  background-color: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.scopepicker__head {
  margin-bottom: var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.scopeday {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.scopeday + .scopeday { margin-top: var(--space-4); }

.scopeday__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.scopeday__head input { margin-top: 0.1875rem; accent-color: var(--color-brand-600); }

.scopeday__body { flex: 1 1 auto; min-width: 0; }

.scopeday__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.scopeday__meta {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.scopeday__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

.scopeday__slots > * { min-width: 0; }

.scopeslot {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.scopeslot:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
}

.scopeslot input { margin-top: 0.125rem; accent-color: var(--color-brand-600); }

.scopeslot__body { flex: 1 1 auto; min-width: 0; }

.scopeslot__name {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
}

.scopeslot__meta {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .scopeday__slots { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   22. Ticket access & reservation rules
   ========================================================================== */

.ticketaccess {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.ticketaccess__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.ticketaccess__text {
  margin-top: 0.25rem;
  margin-bottom: var(--space-5);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.fieldset { border: 0; }

.fieldset__legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.scopeday__slots--flush {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---- Session filter bar ------------------------------------------------- */

.sessionfilter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sessionfilter > * { min-width: 0; }

.sessionfilter__field--wide { grid-column: span 1; }

.sessionfilter .field__input,
.sessionfilter .field__select { margin-top: 0.25rem; }

/* ---- Session picker rows ----------------------------------------------- */

.sessionlist {
  display: grid;
  gap: var(--space-3);
}

.sessionpick {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.sessionpick:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
}

.sessionpick input { margin-top: 0.1875rem; accent-color: var(--color-brand-600); }

.sessionpick__body { flex: 1 1 auto; min-width: 0; }

.sessionpick__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sessionpick__meta {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.sessionpick__tags {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sessionpick__cap {
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sessionlist__empty {
  margin-top: var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* ---- "This ticket includes" summary ------------------------------------ */

.includes {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: #f2fbf6;
  border: 1px solid #bbf0d0;
  border-radius: var(--radius-md);
}

.includes__label {
  flex: 0 0 auto;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-success);
}

.includes__value {
  flex: 1 1 12rem;
  min-width: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-text-label);
}

/* ---- Purchase -> access -> reservation -> check-in ---------------------- */

.flowline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
}

.flowline__step {
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-text-label);
}

.flowline__step--soft { color: var(--color-text-muted); }

.flowline__if {
  font-weight: 500;
  font-style: italic;
}

.flowline__arrow { display: inline-flex; color: var(--color-text-subtle); }

.flowline__arrow svg { width: 0.875rem; height: 0.875rem; }

@media (max-width: 1024px) {
  .sessionfilter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sessionfilter__field--wide { grid-column: span 2; }
}

@media (max-width: 768px) {
  .sessionfilter { grid-template-columns: minmax(0, 1fr); }
  .sessionfilter__field--wide { grid-column: span 1; }
  .sessionpick { flex-wrap: wrap; }
  .sessionpick__tags { justify-content: flex-start; }
  .flowline { border-radius: var(--radius-lg); }
}

/* ==========================================================================
   23. Toasts, hidden tiers, locked tabs, chip buttons, hand-off list
   ========================================================================== */

.toasts {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
  background-color: #1f2430;
  color: #fff;
  font-size: var(--fs-2xs);
  line-height: 1.45;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 24px rgba(15, 18, 25, 0.28);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition);
}

.toast b { color: #ffd9f4; }

.toast--out { opacity: 0; transform: translateY(0.5rem); }

.toast--warn { background-color: #7c3a05; }

@media (max-width: 768px) {
  .toasts { right: var(--space-4); left: var(--space-4); align-items: stretch; }
  .toast { max-width: none; }
}

/* ---- A tier hidden from buyers ----------------------------------------- */

.tier--hidden { border-style: dashed; background-color: var(--color-surface-alt); }

.tier--hidden .tier__body { opacity: 0.55; }

.tier--hidden .tier__head::after {
  content: "Hidden from buyers";
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.tier--hidden [data-tier-hide] { color: var(--color-brand-600); }

/* ---- A locked hub tab -------------------------------------------------- */

.subtabs__tab--locked {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ---- Chip buttons (preset questions, broadcast templates) --------------- */

.chipbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4375rem 0.75rem;
  font-family: inherit;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-text-label);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}

.chipbtn:hover { border-color: var(--color-brand-600); color: var(--color-brand-600); }

.chipbtn svg { width: 0.8125rem; height: 0.8125rem; flex: 0 0 auto; }

/* ---- Locked panel card ------------------------------------------------- */

.lockcard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-white);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.lockcard__body { flex: 1 1 auto; min-width: 0; }

.lockcard__title { font-size: 1.0625rem; letter-spacing: -0.01em; }

.lockcard__text {
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.lockcard__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ---- "What happens after you publish" hand-off list -------------------- */

.handoff { display: grid; gap: var(--space-4); list-style: none; }

.handoff__step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.handoff__body { flex: 1 1 auto; min-width: 0; }

.handoff__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.handoff__text {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.handoff__link {
  flex: 0 0 auto;
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-brand-600);
  white-space: nowrap;
}

.handoff__link:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .lockcard,
  .handoff__step { flex-wrap: wrap; }
}

/* ==========================================================================
   24. Organisation, roles and the permission matrix
   ========================================================================== */

.orgcard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-6);
  background-image: linear-gradient(120deg, #fdf7fb 0%, var(--color-white) 62%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.orgcard__body { flex: 1 1 22rem; min-width: 0; }

.orgcard__kicker {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-600);
}

.orgcard__name {
  margin-top: 0.125rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.orgcard__text {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
  max-width: 46rem;
}

.orgcard__stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.orgcard__stats dt {
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.orgcard__stats dd {
  margin-top: 0.125rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.rolecard__headline {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---- Role switcher ------------------------------------------------------ */

.roleswitch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.roleswitch > * { min-width: 0; }

.roleswitch__opt {
  display: block;
  padding: var(--space-4);
  text-align: left;
  font-family: inherit;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.roleswitch__opt:hover { border-color: var(--color-brand-600); }

.roleswitch__opt[aria-pressed="true"] {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
  box-shadow: inset 0 0 0 1px var(--color-brand-600);
}

.roleswitch__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
}

.roleswitch__text {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* ---- Permission matrix -------------------------------------------------- */

.matrix th[scope="row"] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  white-space: nowrap;
}

.matrix th[scope="row"] svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--color-text-subtle);
  flex: 0 0 auto;
}

.matrix td { text-align: center; }

.matrix__yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  background-color: var(--color-success);
  border-radius: 50%;
}

.matrix__yes svg { width: 0.6875rem; height: 0.6875rem; }

.matrix__no { color: var(--color-text-subtle); }

.field__select--sm {
  padding: 0.3125rem 1.75rem 0.3125rem 0.5rem;
  font-size: var(--fs-3xs);
}

.iconbtn--danger:hover { color: var(--color-danger); border-color: var(--color-danger); }

@media (max-width: 1024px) {
  .roleswitch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .roleswitch,
  .orgcard__stats { grid-template-columns: minmax(0, 1fr); }
  .orgcard__stats { gap: var(--space-3); }
}

/* ---- "Viewing as <role>" banner ---------------------------------------- */

.rolebanner {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  z-index: 55;
  transform: translateX(-50%);
  max-width: min(38rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-3xs);
  color: #fff;
  background-color: var(--color-brand-600);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 24px rgba(45, 10, 40, 0.3);
  text-align: center;
}

.rolebanner a {
  margin-left: 0.25rem;
  color: #ffd9f4;
  font-weight: 700;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .rolebanner { border-radius: var(--radius-lg); }
}

/* ---- Destructive button ------------------------------------------------- */

.btn--danger {
  color: var(--color-white);
  background-image: linear-gradient(100deg, #a8231f 0%, var(--color-danger) 100%);
}

.btn--danger:hover { filter: brightness(1.08); }

/* ---- Flex items that contain scrollable tables -------------------------- */
/* A flex item keeps min-width:auto, so a wide table inside a .tablewrap still
   forces the whole shell wider than the viewport — the scroll container alone
   does not zero the min-content contribution. */

.shell__main,
.shell__body,
.wizard__body,
.wizard__content { min-width: 0; }

/* ==========================================================================
   25. Speaker directory, profiles and session chips
   ========================================================================== */

.speakers { display: grid; gap: var(--space-5); }

.speaker {
  padding: var(--space-5);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.speaker__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.speaker__photoact { flex: 1 1 12rem; min-width: 0; }

.speaker__photohint {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.speaker__tools { flex: 0 0 auto; display: flex; gap: var(--space-2); }

.speaker__sessions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.speaker__sessions svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }

/* ---- Avatar with photo or initials fallback ---------------------------- */

.speakerav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  background-color: #f7eef5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--color-border-soft);
  border-radius: 50%;
  overflow: hidden;
}

.speakerav__initials {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-brand-600);
}

.speakerav--photo .speakerav__initials { display: none; }

.speakerav--xs { width: 1.375rem; height: 1.375rem; }
.speakerav--xs .speakerav__initials { font-size: 0.5rem; }

.speakerav--lg { width: 5rem; height: 5rem; }
.speakerav--lg .speakerav__initials { font-size: 1.375rem; }

/* ---- Speakers attached to a session ------------------------------------ */

.slotcard__speakers { grid-column: 1 / -1; min-width: 0; }

.speakerchips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0.25rem 0 var(--space-2);
}

.speakerchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.375rem 0.1875rem 0.1875rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.speakerchip--adhoc { padding-left: 0.5rem; border-style: dashed; }

.speakerchip__name { font-size: var(--fs-3xs); font-weight: 600; }

.speakerchip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.speakerchip__x:hover { color: var(--color-danger); background-color: #fdeaea; }

.speakerchip__x svg { width: 0.625rem; height: 0.625rem; }

/* ---- Guest-facing speaker card ----------------------------------------- */

.speakercard {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.speakercard__body { flex: 1 1 auto; min-width: 0; }

.speakercard__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.speakercard__role {
  margin-top: 0.125rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--color-brand-600);
}

.speakercard__bio {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--color-text-label);
}

.speakercard__sessions {
  margin-top: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.modal__dialog--sm { max-width: 32rem; }

@media (max-width: 768px) {
  .speaker__tools { width: 100%; }
  .speakercard { flex-wrap: wrap; }
}

/* ==========================================================================
   26. Reusable form templates
   ========================================================================== */

.tplbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.tplbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.125rem;
  color: var(--color-brand-600);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.tplbar__icon svg { width: 1rem; height: 1rem; }

.tplbar__pick { min-width: 0; }

.tplbar__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.tplbar__acts { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.tplbar__note {
  grid-column: 1 / -1;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

/* ---- Template library --------------------------------------------------- */

.tplcards { display: grid; gap: var(--space-4); }

.tplcard {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.tplcard__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.tplcard__body { flex: 1 1 auto; min-width: 0; }

.tplcard__name { display: block; font-size: var(--fs-sm); font-weight: 700; }

.tplcard__desc {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.tplcard__count {
  flex: 0 0 auto;
  padding: 0.125rem 0.4375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-brand-600);
  background-color: #fdf7fb;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.tplcard__meta {
  margin-top: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

.tplcard__fields {
  margin-top: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-label);
}

.tplcard__acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

@media (max-width: 1024px) {
  .tplbar { grid-template-columns: auto minmax(0, 1fr); }
  .tplbar__acts { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .tplbar { grid-template-columns: minmax(0, 1fr); }
  .tplbar__icon { display: none; }
}

/* ==========================================================================
   27. Pre-publish system check
   ========================================================================== */

.syscheck__idle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.syscheck__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.syscheck__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3125rem;
  padding: 0.3125rem 0.625rem;
  font-size: var(--fs-3xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}

.syscheck__pill b { font-family: var(--font-display); font-size: var(--fs-sm); }

.syscheck__pill--block { color: #8a1c19; background-color: #fdecec; border-color: #f6c9c7; }
.syscheck__pill--warn  { color: #7c4a03; background-color: #fef6e7; border-color: #f6dfb0; }
.syscheck__pill--pass  { color: #14663c; background-color: #f0fbf5; border-color: #bce8d1; }

.syscheck__ran {
  margin-left: auto;
  font-size: var(--fs-3xs);
  color: var(--color-text-subtle);
}

/* ---- Individual findings ------------------------------------------------ */

.findings { display: grid; gap: var(--space-3); }

.finding {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-left-width: 3px;
  border-radius: var(--radius-md);
}

.finding--block { border-left-color: var(--color-danger); }
.finding--warn  { border-left-color: var(--color-accent); }
.finding--pass  { border-left-color: var(--color-success); }

.finding__level {
  flex: 0 0 4.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 0.125rem;
}

.finding--block .finding__level { color: var(--color-danger); }
.finding--warn  .finding__level { color: #a2660a; }
.finding--pass  .finding__level { color: var(--color-success); }

.finding__body { flex: 1 1 auto; min-width: 0; }

.finding__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.finding__detail {
  display: block;
  margin-top: 0.1875rem;
  font-size: var(--fs-3xs);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.finding__fix {
  flex: 0 0 auto;
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-brand-600);
  white-space: nowrap;
}

.finding__fix:hover { text-decoration: underline; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

@media (max-width: 768px) {
  .finding { flex-wrap: wrap; }
  .finding__level { flex-basis: 100%; }
  .syscheck__ran { margin-left: 0; }
}

/* ==========================================================================
   28. Broadcast audience builder
   ========================================================================== */

.segbuilder {
  padding: var(--space-5);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
}

.segbuilder__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.segbuilder__head > div { flex: 1 1 16rem; min-width: 0; }

.segbuilder__title { font-size: var(--fs-sm); font-weight: 700; }

.segbuilder__hint {
  margin-top: 0.125rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.segbuilder__saved {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.seggroups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.seggroups > * { min-width: 0; }

.seggroup {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.seggroup__legend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0;
  margin-bottom: var(--space-3);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.seggroup__any {
  margin-left: auto;
  padding: 0.0625rem 0.375rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border-radius: var(--radius-pill);
}

.seggroup__any--on { color: #fff; background-color: var(--color-brand-600); }

.segchips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.segchip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5625rem;
  font-size: var(--fs-3xs);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.segchip input { accent-color: var(--color-brand-600); }

.segchip:has(input:checked) {
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
  font-weight: 600;
}

.segmatch {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid #bbf0d0;
  border-radius: var(--radius-md);
}

.segmatch > svg { width: 1.25rem; height: 1.25rem; color: var(--color-success); flex: 0 0 auto; }

.segmatch__body { flex: 1 1 14rem; min-width: 0; }

.segmatch__count { display: block; font-size: var(--fs-2xs); }

.segmatch__count b {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-success);
}

.segmatch__detail {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.segchannels {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.segchannels svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }

@media (max-width: 768px) {
  .seggroups { grid-template-columns: minmax(0, 1fr); }
  .segbuilder__saved { width: 100%; }
  .segbuilder__saved .field__select { flex: 1 1 auto; min-width: 0; }
}

/* ---- A dialog opened from inside another dialog ------------------------- */

.modal--stacked { z-index: 90; }

.modal--stacked .modal__scrim { background-color: rgba(15, 18, 25, 0.4); }

/* ==========================================================================
   29. Branding: logo/cover drops and the full event-page preview
   ========================================================================== */

.logodrop__box {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.logodrop__box--wide { width: 8rem; aspect-ratio: 16 / 9; height: auto; }

.logodrop__box.is-set { background-color: var(--color-white); }

.logodrop__ph { display: inline-flex; }

.logodrop__ph svg { width: 1.25rem; height: 1.25rem; color: var(--color-text-subtle); }

.logodrop__name {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 600;
  word-break: break-all;
}

.logodrop__acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---- Preview shell ------------------------------------------------------ */

.previewwrap { min-width: 0; }

.previewwrap__head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.previewwrap__head > div { flex: 1 1 12rem; min-width: 0; }

.previewwrap__title { font-size: var(--fs-sm); font-weight: 700; }

.previewwrap__hint { font-size: var(--fs-3xs); color: var(--color-text-muted); }

.previewwrap__acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.epframe {
  background-color: #1f2430;
  border: 1px solid #141821;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.epframe__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.75rem;
}

.epframe__url {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--space-2);
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.72);
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epframe__lock {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
  padding: 0.1875rem 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #ffd9f4;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
}

.epframe__lock svg { width: 0.625rem; height: 0.625rem; }

.epframe__viewport {
  max-height: 40rem;
  overflow-y: auto;
  background-color: #fff;
}

.epframe--mobile .epframe__viewport { display: flex; justify-content: center; }

.epframe--mobile .ep { width: 22.5rem; max-width: 100%; }

/* ---- The event page itself ---------------------------------------------- */

.ep {
  --ep-primary: #5a1d54;
  --ep-accent: #b583af;
  --ep-bg: #ffffff;
  --ep-fg: #1f2430;
  --ep-muted: #6b7280;
  --ep-line: #e6e8ec;
  --ep-panel: #f9fafb;

  width: 100%;
  padding-bottom: 1px;
  background-color: var(--ep-bg);
  color: var(--ep-fg);
  font-size: 0.75rem;
}

.ep--dark {
  --ep-bg: #14161d;
  --ep-fg: #f3f4f6;
  --ep-muted: #9ca3af;
  --ep-line: #2a2e39;
  --ep-panel: #1c1f28;
}

.ep--brand {
  --ep-bg: #2a0d27;
  --ep-fg: #fdf7fb;
  --ep-muted: #d3b6ce;
  --ep-line: #46203f;
  --ep-panel: #37142f;
}

.ep__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--ep-line);
}

.ep__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

.ep__logo--image { min-width: 5rem; height: 1.75rem; }

.ep__logo--image .ep__logomark,
.ep__logo--image .ep__logotext { visibility: hidden; }

.ep__logomark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
  background-color: var(--ep-primary);
  border-radius: var(--radius-sm);
}

.ep__logomark svg { width: 0.75rem; height: 0.75rem; }

.ep__logotext { font-weight: 700; font-size: 0.6875rem; }

.ep__nav {
  display: flex;
  gap: 0.75rem;
  flex: 1 1 auto;
  font-size: 0.625rem;
  color: var(--ep-muted);
}

.ep__cta {
  flex: 0 0 auto;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--ep-primary);
  border-radius: var(--radius-pill);
}

.ep__hero {
  position: relative;
  min-height: 9rem;
  padding: 1.25rem 1rem;
  display: flex;
  align-items: flex-end;
  background-color: var(--ep-panel);
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid var(--ep-line);
}

.ep__hero.is-set { color: #fff; }

.ep__hero.is-set::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(10, 12, 18, 0.15), rgba(10, 12, 18, 0.78));
}

.ep__heroph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--ep-muted);
}

.ep__heroph svg { width: 1.5rem; height: 1.5rem; }

.ep__herobody { position: relative; z-index: 1; }

.ep__chip {
  display: inline-block;
  padding: 0.125rem 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--ep-accent);
  border-radius: var(--radius-pill);
}

.ep__title {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
}

.ep__tagline { margin-top: 0.1875rem; font-size: 0.6875rem; opacity: 0.85; }

.ep__facts {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.625rem;
  font-size: 0.625rem;
  opacity: 0.9;
}

.ep__facts span { display: inline-flex; align-items: center; gap: 0.25rem; }

.ep__facts svg { width: 0.6875rem; height: 0.6875rem; }

.ep__actions { display: flex; gap: 0.375rem; margin-top: 0.75rem; }

.ep__btn {
  padding: 0.3125rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--ep-primary);
  border-radius: var(--radius-pill);
}

.ep__btnghost {
  padding: 0.3125rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ep-primary);
  background-color: #fff;
  border-radius: var(--radius-pill);
}

.ep__section { padding: 1rem; border-bottom: 1px solid var(--ep-line); }

.ep__h {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ep-primary);
  margin-bottom: 0.5rem;
}

.ep--dark .ep__h,
.ep--brand .ep__h { color: var(--ep-accent); }

.ep__p { font-size: 0.6875rem; line-height: 1.6; color: var(--ep-muted); }

.ep__p + .ep__p { margin-top: 0.5rem; }

/* agenda */
.ep__daytabs { display: flex; gap: 0.375rem; margin-bottom: 0.625rem; }

.ep__daytab {
  padding: 0.25rem 0.625rem;
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--ep-muted);
  background-color: var(--ep-panel);
  border: 1px solid var(--ep-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.ep__daytab[aria-pressed="true"] {
  color: #fff;
  background-color: var(--ep-primary);
  border-color: var(--ep-primary);
}

.ep__session {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ep-line);
}

.ep__stime {
  flex: 0 0 5.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--ep-primary);
}

.ep--dark .ep__stime,
.ep--brand .ep__stime { color: var(--ep-accent); }

.ep__sbody { flex: 1 1 auto; min-width: 0; }

.ep__sname { display: block; font-size: 0.6875rem; font-weight: 600; }

.ep__smeta { display: block; font-size: 0.5625rem; color: var(--ep-muted); }

.ep__stag {
  flex: 0 0 auto;
  padding: 0.0625rem 0.375rem;
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--ep-primary);
  background-color: var(--ep-panel);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* speakers */
.ep__speakers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 0.75rem;
}

.ep__speaker { display: block; text-align: center; min-width: 0; }

.ep__speaker .speakerav { width: 2.75rem; height: 2.75rem; }

.ep__spname {
  display: block;
  margin-top: 0.3125rem;
  font-size: 0.625rem;
  font-weight: 700;
}

.ep__sprole { display: block; font-size: 0.5rem; color: var(--ep-muted); }

.ep__sporg { display: block; font-size: 0.5rem; color: var(--ep-accent); font-weight: 600; }

/* tickets */
.ep__tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
}

.ep__tier {
  padding: 0.625rem;
  min-width: 0;
  background-color: var(--ep-panel);
  border: 1px solid var(--ep-line);
  border-radius: var(--radius-md);
}

.ep__tier--sold { opacity: 0.55; }

.ep__tname { display: block; font-size: 0.625rem; font-weight: 700; }

.ep__tprice {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ep-primary);
}

.ep--dark .ep__tprice,
.ep--brand .ep__tprice { color: var(--ep-accent); }

.ep__tdesc { display: block; font-size: 0.5625rem; color: var(--ep-muted); }

.ep__tincl {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.5rem;
  line-height: 1.4;
  color: var(--ep-muted);
}

.ep__tstate {
  display: inline-block;
  margin-top: 0.375rem;
  padding: 0.0625rem 0.375rem;
  font-size: 0.5rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--ep-accent);
  border-radius: var(--radius-pill);
}

/* venue + lists */
.ep__venue { display: flex; align-items: flex-start; gap: 0.625rem; }

.ep__map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ep-primary);
  background-color: var(--ep-panel);
  border-radius: var(--radius-sm);
}

.ep__map svg { width: 1.125rem; height: 1.125rem; }

.ep__venuebody { min-width: 0; }

.ep__vname { display: block; font-size: 0.6875rem; font-weight: 700; }

.ep__vaddr,
.ep__vhalls { display: block; font-size: 0.5625rem; color: var(--ep-muted); }

.ep__facilities,
.ep__bullets,
.ep__faqs { list-style: none; margin-top: 0.625rem; }

.ep__facilities li,
.ep__bullets li,
.ep__faqs li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0;
  font-size: 0.625rem;
  color: var(--ep-muted);
  border-top: 1px solid var(--ep-line);
}

.ep__facilities li svg { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; color: var(--ep-primary); }

.ep__bullets li::before {
  content: "\2022";
  color: var(--ep-accent);
  font-weight: 700;
}

.ep__faqs li { justify-content: space-between; font-weight: 600; color: var(--ep-fg); }

.ep__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  background-color: var(--ep-panel);
}

.ep__footmeta { flex: 1 1 8rem; min-width: 0; font-size: 0.5625rem; color: var(--ep-muted); }

.ep__terms { font-size: 0.5625rem; font-weight: 700; color: var(--ep-primary); }

.ep--dark .ep__terms,
.ep--brand .ep__terms { color: var(--ep-accent); }

/* full-size dialog */
.modal__dialog--wide { max-width: 68rem; width: 100%; }

@media (max-width: 768px) {
  .epframe__viewport { max-height: 28rem; }
  .previewwrap__acts { width: 100%; }
}

/* ---- Branding step: the preview needs real width ------------------------ */
/* A full event page rendered into half of a 44rem column is narrower than a
   phone, which defeats the point of previewing it. This step gets a wider inner
   column and gives the preview the larger share of it. */

body:has(.branding) .wizard__inner { max-width: 80rem; }

.branding { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }

.branding > .stack { min-width: 0; }

@media (max-width: 1400px) {
  .branding { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .branding { grid-template-columns: minmax(0, 1fr); }
  .previewwrap { order: -1; }
}

/* ==========================================================================
   30. Status-aware row action menus
   ========================================================================== */

.rowactions--menu { position: relative; }

.rowmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.375rem);
  z-index: 30;
  width: 17.5rem;
  padding: var(--space-3);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px rgba(15, 18, 25, 0.16);
  text-align: left;
}

.rowmenu--up { top: auto; bottom: calc(100% + 0.375rem); }

.rowmenu__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
}

.rowmenu__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-3xs);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rowmenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.4375rem var(--space-2);
  font-family: inherit;
  font-size: var(--fs-3xs);
  font-weight: 600;
  color: var(--color-text-label);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.rowmenu__item:hover { background-color: var(--color-surface-alt); color: var(--color-brand-600); }

.rowmenu__item svg { width: 0.9375rem; height: 0.9375rem; flex: 0 0 auto; }

.rowmenu__item--danger { color: var(--color-danger); }

.rowmenu__item--danger:hover { background-color: #fdeaea; color: var(--color-danger); }

.rowmenu__blockedhead {
  margin: var(--space-3) 0 0.25rem;
  padding: var(--space-3) var(--space-2) 0;
  border-top: 1px solid var(--color-border-soft);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.rowmenu__blocked {
  display: block;
  padding: 0.125rem var(--space-2);
  font-size: 0.5625rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.rowmenu__blocked b { color: var(--color-text-label); }

.evcard__menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.evcard__note--out { color: var(--color-text-muted); }

/* ---- Cancellation refund summary --------------------------------------- */

.refundbox {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: #fdf6f6;
  border: 1px solid #f3d4d2;
  border-radius: var(--radius-md);
}

.refundbox__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a1c19;
}

.refundbox__head svg { width: 0.875rem; height: 0.875rem; }

.refundbox__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.1875rem 0;
  font-size: var(--fs-3xs);
  color: var(--color-text-label);
}

.refundbox__row--total {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid #f3d4d2;
  font-weight: 700;
}

.refundbox__note {
  margin-top: var(--space-3);
  font-size: 0.5625rem;
  color: var(--color-text-muted);
}

.endlist { list-style: none; display: grid; gap: var(--space-2); }

.endlist li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
}

.endlist svg { width: 0.875rem; height: 0.875rem; color: var(--color-success); flex: 0 0 auto; }

@media (max-width: 768px) {
  .rowmenu { width: min(17.5rem, calc(100vw - 3rem)); }
}

/* ==========================================================================
   31. Vendors, entry staff and their PINs
   ========================================================================== */

.crews { display: grid; gap: var(--space-4); }

.crew {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.crew__top { display: flex; align-items: flex-start; gap: var(--space-4); }

.crew__body { flex: 1 1 auto; min-width: 0; }

.crew__name { display: block; font-size: var(--fs-sm); font-weight: 700; }

.crew__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.crew__meta svg { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; }

.crew__detail {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-label);
}

.crew__pinbox { flex: 0 0 auto; text-align: right; }

.crew__pinlabel {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.crew__pin {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-brand-600);
  transition: background-color var(--transition);
  border-radius: var(--radius-sm);
}

.crew__pin--fresh { background-color: #fdf0d4; }

.crew__assign {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.crew__assignlabel {
  flex: 0 0 auto;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.assignchips { display: flex; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }

.assignchip {
  padding: 0.125rem 0.4375rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-text-label);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
}

.assignchip--all {
  color: #fff;
  background-color: var(--color-brand-600);
  border-color: var(--color-brand-600);
}

.crew__acts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.crews__empty { font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* ---- PIN preview inside the dialogs ------------------------------------- */

.pinpreview {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: #fdf7fb;
  border: 1px solid #ecd7e6;
  border-radius: var(--radius-md);
}

.pinpreview > svg { width: 1.125rem; height: 1.125rem; color: var(--color-brand-600); flex: 0 0 auto; }

.pinpreview__body { flex: 1 1 10rem; min-width: 0; }

.pinpreview__label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.pinpreview__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-brand-600);
}

.pinpreview--big .pinpreview__value { font-size: 1.75rem; }

@media (max-width: 768px) {
  .crew__top { flex-wrap: wrap; }
  .crew__pinbox { text-align: left; }
}

/* ==========================================================================
   32. Insights reports
   ========================================================================== */

.reportstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.reportstat {
  display: block;
  min-width: 0;
  padding: var(--space-4);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.reportstat__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
}

.reportstat__unit { font-size: var(--fs-2xs); font-weight: 500; color: var(--color-text-muted); }

.reportstat__label {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.reportstat--warn .reportstat__value { color: #a2660a; }
.reportstat--good .reportstat__value { color: var(--color-success); }

/* ---- Inline bar inside a report table ---------------------------------- */

.reportbar {
  display: block;
  height: 5px;
  margin-bottom: 0.25rem;
  overflow: hidden;
  background-color: #eef0f3;
  border-radius: var(--radius-pill);
}

.reportbar__fill {
  display: block;
  height: 100%;
  background-color: var(--color-brand-600);
  border-radius: var(--radius-pill);
}

.reportbar__fill--warm { background-color: var(--color-accent); }

.reportbar__label { font-size: var(--fs-3xs); color: var(--color-text-muted); }

/* ---- Split rows (per day, per method) ---------------------------------- */

.reportsplits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
}

.reportsplit {
  display: block;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-brand-600);
  border-radius: var(--radius-sm);
}

.reportsplit__name { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.reportsplit__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md, 1rem);
  font-weight: 700;
}

.reportsplit__meta { display: block; font-size: 0.5625rem; color: var(--color-text-subtle); }

.reportsub {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}

.payoutstate {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  background-color: #f0fbf5;
  border: 1px solid #bce8d1;
  border-radius: var(--radius-md);
}

.payoutstate__body { flex: 1 1 14rem; min-width: 0; }

.payoutstate__title { display: block; font-size: var(--fs-sm); font-weight: 700; }

.payoutstate__meta { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

@media (max-width: 1024px) {
  .reportstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .reportstats { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   33. Event management: editable vs locked, and destructive rows
   ========================================================================== */

.statusflag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3125rem 0.6875rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-label);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.editgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.editgroup {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}

.editgroup--open { background-color: #f0fbf5; border-color: #bce8d1; }

.editgroup--locked { background-color: var(--color-surface-alt); }

.editgroup__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.editgroup--open .editgroup__head { color: var(--color-success); }
.editgroup--locked .editgroup__head { color: var(--color-text-muted); }

.editgroup__head svg { width: 0.875rem; height: 0.875rem; }

.editgroup__list { list-style: none; display: grid; gap: 0.3125rem; }

.editgroup__list li {
  font-size: var(--fs-3xs);
  line-height: 1.5;
  color: var(--color-text-label);
}

.editgroup--locked .editgroup__list li { color: var(--color-text-muted); }

/* ---- Destructive rows --------------------------------------------------- */

.dangerlist { display: grid; gap: var(--space-3); }

.dangerrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border-soft);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
}

.dangerrow--off { border-left-color: var(--color-border); opacity: 0.72; }

.dangerrow__body { flex: 1 1 18rem; min-width: 0; }

.dangerrow__title { display: block; font-size: var(--fs-sm); font-weight: 600; }

.dangerrow__text {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--fs-3xs);
  line-height: 1.55;
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .editgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Report bar ladder --------------------------------------------------- */

.reportbar__fill[data-fill="0"] { width: 0%; }
.reportbar__fill[data-fill="1"] { width: 1%; }
.reportbar__fill[data-fill="2"] { width: 2%; }
.reportbar__fill[data-fill="3"] { width: 3%; }
.reportbar__fill[data-fill="4"] { width: 4%; }
.reportbar__fill[data-fill="5"] { width: 5%; }
.reportbar__fill[data-fill="6"] { width: 6%; }
.reportbar__fill[data-fill="7"] { width: 7%; }
.reportbar__fill[data-fill="8"] { width: 8%; }
.reportbar__fill[data-fill="9"] { width: 9%; }
.reportbar__fill[data-fill="10"] { width: 10%; }
.reportbar__fill[data-fill="11"] { width: 11%; }
.reportbar__fill[data-fill="12"] { width: 12%; }
.reportbar__fill[data-fill="13"] { width: 13%; }
.reportbar__fill[data-fill="14"] { width: 14%; }
.reportbar__fill[data-fill="15"] { width: 15%; }
.reportbar__fill[data-fill="16"] { width: 16%; }
.reportbar__fill[data-fill="17"] { width: 17%; }
.reportbar__fill[data-fill="18"] { width: 18%; }
.reportbar__fill[data-fill="19"] { width: 19%; }
.reportbar__fill[data-fill="20"] { width: 20%; }
.reportbar__fill[data-fill="21"] { width: 21%; }
.reportbar__fill[data-fill="22"] { width: 22%; }
.reportbar__fill[data-fill="23"] { width: 23%; }
.reportbar__fill[data-fill="24"] { width: 24%; }
.reportbar__fill[data-fill="25"] { width: 25%; }
.reportbar__fill[data-fill="26"] { width: 26%; }
.reportbar__fill[data-fill="27"] { width: 27%; }
.reportbar__fill[data-fill="28"] { width: 28%; }
.reportbar__fill[data-fill="29"] { width: 29%; }
.reportbar__fill[data-fill="30"] { width: 30%; }
.reportbar__fill[data-fill="31"] { width: 31%; }
.reportbar__fill[data-fill="32"] { width: 32%; }
.reportbar__fill[data-fill="33"] { width: 33%; }
.reportbar__fill[data-fill="34"] { width: 34%; }
.reportbar__fill[data-fill="35"] { width: 35%; }
.reportbar__fill[data-fill="36"] { width: 36%; }
.reportbar__fill[data-fill="37"] { width: 37%; }
.reportbar__fill[data-fill="38"] { width: 38%; }
.reportbar__fill[data-fill="39"] { width: 39%; }
.reportbar__fill[data-fill="40"] { width: 40%; }
.reportbar__fill[data-fill="41"] { width: 41%; }
.reportbar__fill[data-fill="42"] { width: 42%; }
.reportbar__fill[data-fill="43"] { width: 43%; }
.reportbar__fill[data-fill="44"] { width: 44%; }
.reportbar__fill[data-fill="45"] { width: 45%; }
.reportbar__fill[data-fill="46"] { width: 46%; }
.reportbar__fill[data-fill="47"] { width: 47%; }
.reportbar__fill[data-fill="48"] { width: 48%; }
.reportbar__fill[data-fill="49"] { width: 49%; }
.reportbar__fill[data-fill="50"] { width: 50%; }
.reportbar__fill[data-fill="51"] { width: 51%; }
.reportbar__fill[data-fill="52"] { width: 52%; }
.reportbar__fill[data-fill="53"] { width: 53%; }
.reportbar__fill[data-fill="54"] { width: 54%; }
.reportbar__fill[data-fill="55"] { width: 55%; }
.reportbar__fill[data-fill="56"] { width: 56%; }
.reportbar__fill[data-fill="57"] { width: 57%; }
.reportbar__fill[data-fill="58"] { width: 58%; }
.reportbar__fill[data-fill="59"] { width: 59%; }
.reportbar__fill[data-fill="60"] { width: 60%; }
.reportbar__fill[data-fill="61"] { width: 61%; }
.reportbar__fill[data-fill="62"] { width: 62%; }
.reportbar__fill[data-fill="63"] { width: 63%; }
.reportbar__fill[data-fill="64"] { width: 64%; }
.reportbar__fill[data-fill="65"] { width: 65%; }
.reportbar__fill[data-fill="66"] { width: 66%; }
.reportbar__fill[data-fill="67"] { width: 67%; }
.reportbar__fill[data-fill="68"] { width: 68%; }
.reportbar__fill[data-fill="69"] { width: 69%; }
.reportbar__fill[data-fill="70"] { width: 70%; }
.reportbar__fill[data-fill="71"] { width: 71%; }
.reportbar__fill[data-fill="72"] { width: 72%; }
.reportbar__fill[data-fill="73"] { width: 73%; }
.reportbar__fill[data-fill="74"] { width: 74%; }
.reportbar__fill[data-fill="75"] { width: 75%; }
.reportbar__fill[data-fill="76"] { width: 76%; }
.reportbar__fill[data-fill="77"] { width: 77%; }
.reportbar__fill[data-fill="78"] { width: 78%; }
.reportbar__fill[data-fill="79"] { width: 79%; }
.reportbar__fill[data-fill="80"] { width: 80%; }
.reportbar__fill[data-fill="81"] { width: 81%; }
.reportbar__fill[data-fill="82"] { width: 82%; }
.reportbar__fill[data-fill="83"] { width: 83%; }
.reportbar__fill[data-fill="84"] { width: 84%; }
.reportbar__fill[data-fill="85"] { width: 85%; }
.reportbar__fill[data-fill="86"] { width: 86%; }
.reportbar__fill[data-fill="87"] { width: 87%; }
.reportbar__fill[data-fill="88"] { width: 88%; }
.reportbar__fill[data-fill="89"] { width: 89%; }
.reportbar__fill[data-fill="90"] { width: 90%; }
.reportbar__fill[data-fill="91"] { width: 91%; }
.reportbar__fill[data-fill="92"] { width: 92%; }
.reportbar__fill[data-fill="93"] { width: 93%; }
.reportbar__fill[data-fill="94"] { width: 94%; }
.reportbar__fill[data-fill="95"] { width: 95%; }
.reportbar__fill[data-fill="96"] { width: 96%; }
.reportbar__fill[data-fill="97"] { width: 97%; }
.reportbar__fill[data-fill="98"] { width: 98%; }
.reportbar__fill[data-fill="99"] { width: 99%; }
.reportbar__fill[data-fill="100"] { width: 100%; }

/* ---- Table filter empty state ------------------------------------------- */

.tablefilter__empty {
  margin-top: var(--space-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   34. Registrations
   ========================================================================== */

.regmiss { font-style: italic; color: var(--color-text-subtle); }

.reglist {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.25rem var(--space-4);
  margin-top: var(--space-4);
}

.reglist dt {
  font-size: var(--fs-3xs);
  font-weight: 700;
  color: var(--color-text-subtle);
  padding: 0.3125rem 0;
  border-top: 1px solid var(--color-border-soft);
}

.reglist dd {
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
  padding: 0.3125rem 0;
  border-top: 1px solid var(--color-border-soft);
  min-width: 0;
  word-break: break-word;
}

@media (max-width: 768px) {
  .reglist { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .reglist dd { border-top: 0; padding-top: 0; }
}

/* ==========================================================================
   35. Check-in: scanner, verdict and doors
   ========================================================================== */

.scanbox {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background-color: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.scanbox__frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  color: var(--color-brand-600);
  background-color: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.scanbox__frame svg { width: 2.25rem; height: 2.25rem; }

.scanbox.is-scanning {
  border-style: solid;
  border-color: var(--color-brand-600);
  background-color: #fdf7fb;
}

.scanbox.is-scanning .scanbox__frame {
  border-color: var(--color-brand-600);
  animation: scanpulse 1.4s ease-in-out infinite;
}

@keyframes scanpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 33, 96, 0.28); }
  50% { box-shadow: 0 0 0 0.5rem rgba(109, 33, 96, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scanbox.is-scanning .scanbox__frame { animation: none; }
}

.scanbox__state { font-size: var(--fs-sm); font-weight: 700; }

.scanbox__hint {
  max-width: 24rem;
  font-size: var(--fs-3xs);
  color: var(--color-text-muted);
}

.scanbox--modal { padding: var(--space-5); }

/* ---- The verdict ------------------------------------------------------- */

.verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-left-width: 3px;
  border-radius: var(--radius-md);
}

.verdict--in { border-left-color: var(--color-success); background-color: #f0fbf5; }
.verdict--denied { border-left-color: var(--color-danger); background-color: #fdf0f0; }
.verdict--repeat { border-left-color: var(--color-accent); background-color: #fef8ec; }

.verdict__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  border-radius: 50%;
}

.verdict--in .verdict__mark { background-color: var(--color-success); }
.verdict--denied .verdict__mark { background-color: var(--color-danger); }
.verdict--repeat .verdict__mark { background-color: var(--color-accent); }

.verdict__body { flex: 1 1 auto; min-width: 0; }

.verdict__name { display: block; font-size: var(--fs-sm); font-weight: 700; }

.verdict__meta { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.verdict__reason {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-label);
}

/* ---- Doors -------------------------------------------------------------- */

.doorrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.doorrow:last-of-type { border-bottom: 0; }

.doorrow__body { flex: 1 1 auto; min-width: 0; }

.doorrow__name { display: block; font-size: var(--fs-2xs); font-weight: 600; }

.doorrow__meta { display: block; font-size: var(--fs-3xs); color: var(--color-text-muted); }

.doorrow__count { flex: 0 0 auto; text-align: right; }

.doorrow__count b { font-family: var(--font-display); font-size: var(--fs-sm); }

.doorrow__unit {
  display: block;
  font-size: 0.5625rem;
  color: var(--color-text-muted);
}

/* ---- Revenue KPI note --------------------------------------------------- */

.reportstat__note {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.5625rem;
  color: var(--color-text-subtle);
}