/* ==========================================================================
   Eleganter brand theme.

   Design tokens mirror the Lovable design system (src/index.css there): vivid
   red primary, warm off-white ground, Outfit typography, generous 0.75rem radii,
   gradient buttons and soft shadows.

   Outfit is SELF-HOSTED, not loaded from Google Fonts: the CSP in Program.cs sets
   `font-src 'self'` / `style-src 'self'`, so a CDN font would simply be blocked.
   Self-hosting also keeps visitor data away from Google (GDPR) and drops a
   render-blocking third-party request.
   ========================================================================== */

/* Variable font: one 31 KB file covers weights 100-900. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette (HSL components, so we can vary alpha) ---- */
  --brand-primary-h: 0;
  --brand-primary-s: 100%;
  --brand-primary-l: 47%;
  --brand-primary: hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l));
  --brand-primary-dark: hsl(0 100% 35%);
  --brand-primary-darker: hsl(0 100% 30%);

  --brand-bg: hsl(20 20% 96%);
  --brand-surface: #fff;
  --brand-fg: hsl(240 10% 15%);
  --brand-muted: hsl(240 5% 85%);
  --brand-muted-fg: hsl(240 5% 40%);
  --brand-border: hsl(240 5% 82%);
  --brand-input-border: hsl(240 5% 78%);

  /* Errors deliberately sit apart from the brand red: a darker, pink-shifted
     crimson. With the brand red reserved for actions (and always carrying a
     gradient + glow), a flat wine-red reads unmistakably as "something is wrong". */
  --brand-danger: hsl(348 78% 36%);
  --brand-danger-dark: hsl(348 78% 29%);

  --brand-gradient: linear-gradient(135deg, hsl(0 100% 47%) 0%, hsl(0 100% 35%) 100%);
  --brand-shadow-card: 0 4px 24px hsl(240 10% 15% / 0.10);
  --brand-shadow-card-hover: 0 10px 32px hsl(240 10% 15% / 0.14);
  --brand-shadow-button: 0 4px 20px hsl(0 100% 47% / 0.35);
  --brand-radius: 0.75rem;

  /* ---- Bootstrap 5.3 global overrides ---- */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 240, 0, 0;
  --bs-link-color: var(--brand-primary-dark);
  --bs-link-color-rgb: 179, 0, 0;
  --bs-link-hover-color: var(--brand-primary-darker);

  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: 163, 20, 49;

  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-fg);
  --bs-secondary-color: var(--brand-muted-fg);
  --bs-border-color: var(--brand-border);
  --bs-emphasis-color: var(--brand-fg);

  --bs-border-radius: var(--brand-radius);
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;

  --bs-body-font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-weight: 400;
}

/* Every font-size, spacing and radius value elsewhere in this file is set in rem, so this root size is the
   one lever that scales the whole site's readability at once. Raised from 14px/16px (mobile/desktop) to
   16px/18px on request for bigger, more readable text everywhere. */
html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html { font-size: 18px; }
}

/* Flex column + min-height keeps the footer at the foot of the viewport on short pages without taking
   it out of the flow, which is what used to make it overlap the content. The old margin-bottom: 60px
   reserved space for the absolutely-positioned footer and is no longer needed. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--brand-bg);
  color: var(--brand-fg);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography -------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-body-font-family);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-fg);
}

h1, .h1 { font-weight: 800; letter-spacing: -0.03em; }

.text-muted { color: var(--brand-muted-fg) !important; }

/* Red-to-lighter-red gradient text, for hero headline accents. */
.text-gradient {
  background-image: linear-gradient(135deg, hsl(0 100% 47%) 0%, hsl(0 100% 60%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Buttons ------------------------------------------------------------ */
/* Bootstrap 5.3 buttons read their own --bs-btn-* custom properties, so the
   global --bs-primary alone would not retint them; each variant is set here. */

.btn {
  --bs-btn-border-radius: var(--brand-radius);
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary-dark);
  --bs-btn-hover-border-color: var(--brand-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-darker);
  --bs-btn-active-border-color: var(--brand-primary-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: hsl(0 40% 70%);
  --bs-btn-disabled-border-color: hsl(0 40% 70%);
  background-image: var(--brand-gradient);
  box-shadow: var(--brand-shadow-button);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 26px hsl(0 100% 47% / 0.45);
  transform: translateY(-1px);
}

.btn-primary:disabled, .btn-primary.disabled {
  background-image: none;
  box-shadow: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary-dark);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary-dark);
  --bs-btn-active-border-color: var(--brand-primary-dark);
}

.btn-danger {
  --bs-btn-bg: var(--brand-danger);
  --bs-btn-border-color: var(--brand-danger);
  --bs-btn-hover-bg: var(--brand-danger-dark);
  --bs-btn-hover-border-color: var(--brand-danger-dark);
  --bs-btn-active-bg: var(--brand-danger-dark);
  --bs-btn-active-border-color: var(--brand-danger-dark);
}

.btn-outline-danger {
  --bs-btn-color: var(--brand-danger);
  --bs-btn-border-color: var(--brand-danger);
  --bs-btn-hover-bg: var(--brand-danger);
  --bs-btn-hover-border-color: var(--brand-danger);
  --bs-btn-active-bg: var(--brand-danger-dark);
  --bs-btn-active-border-color: var(--brand-danger-dark);
}

/* ---- Focus ring --------------------------------------------------------- */
/* Replaces the stock blue focus ring; keeps a visible, accessible indicator. */
.btn:focus-visible,
.btn:active:focus-visible,
.btn-link.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem hsl(0 100% 47% / 0.25);
  outline: 0;
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ---- Surfaces ----------------------------------------------------------- */

.card {
  --bs-card-border-radius: var(--brand-radius);
  --bs-card-border-color: var(--brand-border);
  --bs-card-inner-border-radius: calc(var(--brand-radius) - 1px);
  background-color: var(--brand-surface);
  box-shadow: var(--brand-shadow-card);
}

.modal-content, .dropdown-menu {
  border-radius: var(--brand-radius);
  border-color: var(--brand-border);
  box-shadow: var(--brand-shadow-card);
}

.alert { border-radius: var(--brand-radius); }
.table { --bs-table-border-color: var(--brand-border); }

.badge.bg-primary { background-image: var(--brand-gradient); }

/* ---- Form controls ------------------------------------------------------ */

.form-control, .form-select {
  border-radius: var(--brand-radius);
  border-color: var(--brand-input-border);
  background-color: var(--brand-surface);
}

.form-control::placeholder { color: hsl(240 5% 60%); }

/* ---- Navbar + footer ---------------------------------------------------- */
/* Translucent, blurred, hairline-bordered — the Lovable navbar treatment. */

.navbar {
  background-color: hsl(20 20% 96% / 0.82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--brand-border) !important;
  box-shadow: none !important;
}

.navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.navbar-brand img { height: 42px; width: auto; display: block; }

.navbar .nav-link {
  color: var(--brand-muted-fg) !important;
  font-weight: 500;
  font-size: .95rem;
  transition: color .2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible { color: var(--brand-fg) !important; }

/* Current page: brand red with a short underline. */
.navbar .nav-link.active {
  color: var(--brand-primary-dark) !important;
  font-weight: 600;
}

/* Marketing nav (landing page): fewer items than the app menu, and it carries the language/currency
   selects the design doesn't have — so keep every item on one line and shrink the selects to fit. */
.navbar--marketing .nav-link,
.navbar--marketing .btn { white-space: nowrap; }

@media (min-width: 768px) {
  .navbar--marketing .navbar-nav { gap: 1.5rem; }
  .navbar--marketing .form-select {
    width: auto;
    min-width: 0;
    font-size: .82rem;
    padding: .3rem 1.8rem .3rem .6rem;
    background-position: right .5rem center;
  }
  .navbar--marketing .btn { padding: .45rem 1.15rem; font-size: .92rem; }
}

/* 🐛 THE BAR GOES FLAT AT 1200px AND DOES NOT FIT THERE. Careers and Investors were added beside the
   Company dropdown on 2026-11-08 (deliberately repeated — they are in the dropdown too), which pushed
   the row to 1286px inside a 1200px window: a horizontal scrollbar, with "Sign out" off the right edge.
   Measured, not guessed — the links were hidden and the page re-measured to confirm they were the cause.

   So the airy 1.5rem spacing is for screens that can afford it. Between the flat-bar breakpoint and
   1400px the gaps and the link padding tighten instead, which buys back more than the 86px needed
   without taking the hamburger up to 1400 and hiding the whole menu from a 1280px laptop. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar--marketing .navbar-nav { gap: .6rem; }
  .navbar--marketing .nav-link { padding-left: .4rem; padding-right: .4rem; }
  .navbar--marketing .btn { padding: .45rem .85rem; }
}

/* The content area takes the slack so the footer is pushed to the bottom; the layout renders either a
   bare <main> (full-width pages) or a .container wrapper, so both are covered. */
body > main,
body > .container {
  flex: 1 0 auto;
}

footer.footer {
  flex-shrink: 0;
  background-color: var(--brand-surface);
  border-top: 1px solid var(--brand-border) !important;
  color: var(--brand-muted-fg);
  padding: 2.25rem 0;   /* was 1.25rem, which was sized for the old single-line footer */
}

footer.footer a { color: var(--brand-primary-dark); text-decoration: none; }
footer.footer a:hover { text-decoration: underline; }

/* Footer menu: brand on the left, link columns after it. auto-fit rather than a fixed column count so
   adding a third column later needs no breakpoint work, and so the columns collapse to one on a phone. */
.footer__grid {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 2.5rem;
  align-items: start;
}

.footer__brand { display: flex; align-items: center; gap: .5rem; }

.footer__heading {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-fg); margin: 0 0 .6rem;
}

.footer__menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer__menu a { font-size: .9rem; }

@media (max-width: 575.98px) {
  .footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ==========================================================================
   Signed-in app surfaces — the Lovable "My Account" visual language.
   Purely presentational: pages, routes and logic are unchanged.
   ========================================================================== */

/* The signed-in area sits on the plain page colour — same as the Proposals and
   Archive screens — so nothing competes with dense forms and tables. */
.app-surface {
  position: relative;
  min-height: 100%;
}

.app-surface h2:not(.app-card__title):not(.app-banner__title) {
  font-weight: 800;
  letter-spacing: -.03em;
}

.app-title {
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 1.5rem;
}

.app-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 1.25rem;
  box-shadow: var(--brand-shadow-card);
  padding: 1.75rem;
}

/* Icon + title + subtitle header inside a card. */
.app-card__head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.1rem; }

.app-card__icon {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  border-radius: .8rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom right, hsl(0 100% 47% / .18), hsl(0 100% 47% / .05));
  color: var(--brand-primary);
}

.app-card__icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-card__title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.app-card__subtitle { font-size: .9rem; color: var(--brand-muted-fg); margin: .15rem 0 0; }

/* The dashboard's primary CTA card: no icon, no heading — just the button, with the explanatory line
   small underneath it rather than in a head row above it. */
.app-card--cta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
/* 1rem matches .btn-lg's own horizontal padding, so this lines up with the button's label rather than
   its edge — align-items: flex-start alone would line the two up at the button's outer edge instead. */
.app-card--cta .app-card__subtitle { margin: 0; padding-left: 1rem; }

/* Full-width notice with a call to action on the right (e.g. "No Active Subscription"). */
.app-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--brand-surface);
  border: 1px solid hsl(0 100% 47% / .35);
  border-radius: 1.25rem;
  padding: 1.4rem 1.75rem;
  box-shadow: var(--brand-shadow-card);
}

.app-banner__title { font-weight: 700; margin: 0; }
.app-banner__text { color: var(--brand-muted-fg); margin: .15rem 0 0; font-size: .93rem; }

/* Dashed empty state. */
.app-empty {
  border: 2px dashed var(--brand-border);
  border-radius: 1.25rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--brand-muted-fg);
  background: hsl(0 0% 100% / .55);
}

.app-empty svg { width: 2rem; height: 2rem; margin-bottom: .9rem; color: var(--brand-muted-fg); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.app-empty__title { font-weight: 700; color: var(--brand-fg); margin-bottom: .3rem; }

/* Status pill, e.g. plan state. */
.app-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 999px; padding: .45rem 1.1rem;
  font-weight: 600; font-size: .88rem;
}

.app-pill svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-pill--ok { background: hsl(145 60% 94%); color: hsl(145 65% 26%); }
.app-pill--warn { background: hsl(38 95% 92%); color: hsl(30 90% 32%); }
.app-pill--muted { background: hsl(0 100% 47% / .14); color: var(--brand-primary-dark); }

/* ---- Motion ------------------------------------------------------------- */

@keyframes brandFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up { animation: brandFadeUp .6s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-fade-up { animation: none; }
  .btn { transition: none; }
  .btn-primary:hover:not(:disabled) { transform: none; }
}

/* ==========================================================================
   App-specific rules (pre-existing — retained)
   ========================================================================== */

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Clickable value that applies a filter (e.g. an email in the activity log). Not a link: no underline,
   just a hand cursor to signal the action. */
.js-filter-value {
  cursor: pointer;
}

/* Autosave "Saved" hint: invisible until shown, fades in/out (no layout shift). */
.js-save-status {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.js-save-status.show {
  opacity: 1;
}

/* Chip picker: equal-width word chips, up to 5 per line (fewer on narrow screens). */
.chip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 576px) {
  .chip-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .chip-grid { grid-template-columns: repeat(5, 1fr); }
}

.chip-grid .js-chip {
  width: 100%;
}

/* ==========================================================================
   Proposal form — section cards, chips and action bar (matches the design).
   ========================================================================== */

/* 🚩 CENTRED, AND A SHADE LARGER (Francisco, 2026-11-10). The width was an inline style on the <form>
   tag, which pinned it to the left of whatever contained it; moved here so it can also be centred, and
   so the one place that decides how wide this form is is the same place that decides how it reads.

   ⚠️ EVERY SIZE BELOW IS SCOPED TO .slot-form. The same classes dress every other form on the site —
   the trial request, the enterprise enquiry, the contact page — and none of them was asked to change. */
.slot-form { max-width: 900px; margin-inline: auto; }

.slot-form__body { display: flex; flex-direction: column; gap: 1.25rem; }

.form-section {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  box-shadow: var(--brand-shadow-card);
  padding: 1.5rem;
}

.form-section__title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}

.slot-form .form-label { font-size: .95rem; font-weight: 500; margin-bottom: .35rem; }
/* ⚠️ THE :not() IS LOAD-BEARING. The three *-sm controls in this form are the compact CMYK and Pantone
   boxes beside each colour, and they are meant to stay small. Written first as a plain
   `.slot-form .form-control`, it beat `.form-control-sm` on specificity — two classes against one — and
   quietly grew them too. Measured in the browser, where they came back 18.9px alongside the full-size
   boxes instead of Bootstrap's smaller step. */
.slot-form .form-control:not(.form-control-sm),
.slot-form .form-select:not(.form-select-sm),
.slot-form textarea:not(.form-control-sm) { font-size: 1.05rem; }

/* Chips: bordered pill rows with a ring marker, three across (the design's grid). */
.slot-form .chip-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 768px) { .slot-form .chip-grid { grid-template-columns: repeat(3, 1fr); } }

.slot-form .js-chip {
  --bs-btn-border-radius: .6rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .6rem .8rem;
  font-size: .92rem;
  font-weight: 500;
  text-align: left;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface);
  color: var(--brand-fg);
  background-image: none;
  box-shadow: none;
}

/* The ring: hollow when unselected, filled when chosen. */
.slot-form .js-chip::before {
  content: "";
  flex: 0 0 auto;
  width: .85rem; height: .85rem;
  border-radius: 50%;
  border: 2px solid var(--brand-primary);
  background: transparent;
  transition: box-shadow .15s, background-color .15s;
}

/* Round means "one of these", square means "as many as you like" — the same promise a radio and a checkbox
   make. Keyed off data-max so it follows the picker's own cap: only data-max="1" keeps the circle, and any
   picker that later allows more than one gets squares without a CSS change. */
.slot-form .js-chip-picker:not([data-max="1"]) .js-chip::before {
  border-radius: .25rem;
}

.slot-form .js-chip:hover { border-color: var(--brand-primary); }

.slot-form .js-chip.btn-primary {
  border-color: var(--brand-primary);
  background: hsl(0 100% 47% / .07);
  color: var(--brand-fg);
}

.slot-form .js-chip.btn-primary::before {
  background: var(--brand-primary);
  box-shadow: inset 0 0 0 2px #fff;
}

/* Choosing an event type scrolls to the top of the form it reveals. The navbar is sticky-top, so a plain
   'start' alignment would slide the first field under it — this reserves room for it.
   Deliberately NOT on .js-event-type-choice: that one is centred, and scroll-margin shifts a 'center'
   alignment just as much as a 'start' one, which pushed the question half the margin below centre. */
.js-event-type-body {
  scroll-margin-top: 5.5rem;
}

/* Event type: the first, form-defining choice — a big centered prompt and bold cards so the whole section
   is unmissable the moment the page opens, before anything else on it is read. */
/* .slot-form .form-label (site.css above) is two classes deep and would otherwise win this on
   specificity regardless of source order — matched here rather than raised further, so this stays an
   ordinary override instead of an arms-race selector. */
.slot-form .event-type-prompt {
  display: block;
  text-align: center;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}

@media (max-width: 560px) {
  /* Below the smallest width this can hold the full line without shrinking past legibility, let it wrap
     instead of forcing a font-size that would make it hard to read one word at a time on a phone. */
  .slot-form .event-type-prompt { white-space: normal; }
}

.event-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}

@media (min-width: 576px) {
  .event-type-grid { grid-template-columns: repeat(3, 1fr); }
}

.event-type-btn {
  --bs-btn-border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 4.5rem;
  padding: 1rem 1.1rem;
  font-size: 1.1rem;
  font-weight: 700;
  border: 2px solid var(--brand-primary);
  background: var(--brand-primary);
  background-image: none;
  color: #fff;
  box-shadow: none;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}

.event-type-btn:hover {
  background: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
  transform: translateY(-1px);
}

.btn-check:checked + .event-type-btn {
  background: var(--brand-primary-darker);
  border-color: var(--brand-primary-darker);
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff, var(--brand-shadow-card);
}

/* Action bar: its own bordered strip below the sections. */
.slot-form__actions {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  box-shadow: var(--brand-shadow-card);
  padding: 1.1rem 1.5rem;
}

/* Creative Content / Event Activities: label left, Yes-No right, one per row. */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--brand-border);
}

/* Each row sits inside a type-scoped wrapper now, so it is always the only child of its parent and
   .toggle-row:last-child matched every one of them — which removed every separator line. The wrapper is
   what is last in the group, so that is what the exception has to test. */
/* NOT .toggle-row:last-child — every row is the only child of its type-scoped wrapper, so that
   selector matches all of them and removes every separator. The wrapper is what is last in the group. */
.js-type-scoped:last-child .toggle-row { border-bottom: 0; }
.toggle-row__label { font-size: .92rem; margin: 0; cursor: pointer; flex: 1 1 auto; }
.toggle-row .form-switch { flex: 0 0 auto; padding-left: 0; }

/* Slightly larger than Bootstrap's default so it reads as the row's control. */
.toggle-row .form-check-input {
  width: 2.4rem;
  height: 1.3rem;
  margin: 0;
  cursor: pointer;
  background-color: var(--brand-muted);
  border-color: var(--brand-border);
}

.toggle-row .form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* The agenda builder's rows. Kept here rather than inline so the strict CSP has nothing to object to. */
.agenda-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border: 1px solid #e3e3e8;
    border-radius: .4rem;
    background: #fff;
    margin-bottom: .4rem;
}
.agenda-row.agenda-dragging { opacity: .4; }
.agenda-row.agenda-over { border-color: var(--bs-primary, #b00020); }
.agenda-grip { cursor: grab; color: #adadb5; line-height: 1; user-select: none; }
.agenda-idx { width: 1.5rem; text-align: right; color: #9a9aa2; font-size: .8rem; }
.agenda-name { flex: 1; border: none; background: transparent; padding: .1rem .2rem; border-radius: .2rem; }
.agenda-name:focus { outline: none; background: #f4f4f7; }
.agenda-mini { border: none; background: transparent; color: #9a9aa2; padding: 0 .2rem; line-height: 1; }
.agenda-mini:hover:not(:disabled) { color: #333; }
.agenda-mini:disabled { opacity: .25; }

/* The logo-approval card while a redraw is in flight (see .js-logo-redraw in site.js).

   🐛 THE OLD MARK USED TO SIT THERE LOOKING CURRENT. Francisco, 2026-11-09: a redraw "kept the previous
   logo exposed". Dimmed rather than removed: taking the pictures out would collapse the card and slide the
   progress bar under the pointer the moment it was clicked. Pointer events go with it, so the controls of
   a request already sent cannot be pressed again. */
.eh-redrawing { opacity: .45; pointer-events: none; transition: opacity .15s ease-in; }

/* The progress card needs no rule here: it is a SIBLING of the approval card, above it, so it is never
   dimmed in the first place. (Written as a descendant selector first, which could never have matched.) */