@charset "UTF-8";
/* Import all styles first - @import must come before other statements */
/* Light mode styles */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --text-secondary: #4b5563; /* Darker gray for better contrast in light mode */
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
  --highlight-bg: #f3f4f6;
  --highlight-text: #1f2937;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Dark mode CSS variables */
.dark {
  --bg-color: #1f2937;
  --text-color: #f3f4f6;
  --text-secondary: #e5e7eb; /* Much lighter gray for better contrast in dark mode */
  --card-bg: #111827;
  --border-color: #374151;
  --highlight-bg: #374151;
  --highlight-text: #f9fafb;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
/* Dark mode styles for the EventEditor component */
.dark .bg-white {
  background-color: #ffffff;
  background-color: var(--card-bg);
}
.dark .border {
  border-color: #e5e7eb;
  border-color: var(--border-color);
}
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-gray-900 {
  color: #333333;
  color: var(--text-color);
}
.dark .bg-gray-50 {
  background-color: #f3f4f6;
  background-color: var(--highlight-bg);
}
.dark .shadow-lg {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-shadow: var(--shadow);
}
/* Theme transition */
html,
html.dark,
body,
.bg-white,
.border,
.text-gray-600,
.text-gray-700,
.text-gray-900,
.bg-gray-50,
.shadow-lg {
  transition: all 0.3s ease;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * Jumpstart Pro default styles
 * Remove these if you'd like to use TailwindUI which expects a clean slate
*/
:root,
.light {
  /*Primary*/
  --bg-primary: #ec1c24;
  --bg-primary-hover: #f16222;
  --text-on-primary: #fff;
  --border-primary: #f16222;
  --border-primary-hover: #f16222;
  --text-primary: #ec1c24;
  --text-primary-hover: #f16222;

  /*Secondary*/
  --bg-secondary: #fff;
  --text-on-secondary: #1e293b;
  --bg-secondary-hover: #f1f5f9;
  --text-on-secondary-hover: #334155;
  --border-secondary: #cbd5e1;

  /*Danger*/
  --bg-danger: #b91c1c;
  --bg-danger-hover: #dc2626;
  --text-on-danger: #fff;
  --border-danger: #ef4444;
  --border-danger-focus: #ef4444;
  --text-danger: #b91c1c;
  --bg-danger-secondary: #fef2f2;
  --text-on-danger-secondary: #b91c1c;
  --icon-on-danger-secondary: #dc2626;

  /*Success*/
  --bg-success: #166534;
  --bg-success-hover: #15803d;
  --text-on-success: #fff;
  --border-success: #16a34a;
  --border-success-focus: #22c55e;
  --text-success: #166534;
  --bg-success-secondary: #f0fdf4;
  --text-on-success-secondary: #15803d;
  --icon-on-success-secondary: #16a34a;

  /*Info*/
  --bg-info-secondary: #eff6ff;
  --text-on-info-secondary: #1d4ed8;
  --icon-on-info-secondary: #3b82f6;

  /*Warning*/
  --bg-warning-secondary: #fffbeb;
  --text-on-warning-secondary: #b45309;
  --icon-on-warning-secondary: #b45309;

  /*Accent*/
  --bg-accent: #2883c4;
  --text-on-accent: #fff;
  --border-accent: #2883c4;
  --text-accent: #2883c4;

  /*Light*/
  --bg-light: #fff;
  --bg-light-hover: #f8fafc;
  --text-on-light: #1e293b;
  --text-on-light-outline: #1e293b;
  --border-light: #cbd5e1;

  /*Dark*/
  --bg-dark: #1e293b;
  --bg-dark-secondary: #64748b;
  --bg-dark-hover: #334155;
  --text-on-dark: #fff;
  --text-on-dark-outline: #1e293b;
  --border-dark: #334155;
  --border-dark-focus: #64748b;

  /*Disabled*/
  --bg-disabled: #e2e8f0;
  --bg-disabled-selected: #94a3b8;
  --text-on-disabled-selected: #e2e8f0;
  --border-disabled: #cbd5e1;
  --bg-disabled-secondary: #cbd5e1;
  --icon-disabled: #94a3b8;

  /*Base*/
  --base-text: #050707;
  --base-text-secondary: #374151;
  --base-text-tertiary: #6b7280;
  --base-text-disabled: #9ca3af;
  --base-icon: #2883c4;
  --base-bg-backdrop: #050707;
  --base-bg-highest: #eee2ce;
  --base-bg-high: #eee2ce;
  --base-bg-base: #eee2ce;
  --base-bg-low: #fff;
  --base-bg-lowest: #eee2ce;
  --base-border-primary: #2883c4;
  --base-border-secondary: #f6a081;
  --base-border-tertiary: #eee2ce;
  --base-border-focus: #ec1c24;
  --base-bg-selected: #ec1c24;
  --base-bg-hover: #eee2ce;
  --base-bg-tooltip: #050707;
  --base-text-on-tooltip: #fff;

  /* Background */
  background-color: #ffffff;

  /* Shared colour tokens */
  --color-black: #000000;
  --color-gray-200: #e5e7eb;
  --color-gray-700: #374151;
  --color-red-50: #fef2f2;
  --color-red-500: #ef4444;
}
/* BLUME D2 "Flow" design system — namespaced .bz tokens + primitives (additive,
   cannot collide with the un-ported screens). See app/assets/stylesheets/design-system/ */
/* ================================================================
   BLUME Design System — master entry ("D2 Flow")
   Load order is deliberate: raw palette → semantic tokens →
   primitives → status. Everything is .bz-namespaced and additive,
   so it never collides with un-ported screens. Imported once from
   application.tailwind.css. See design_handoff_blume_flow/ for the
   source handoff and DESIGN_SYSTEM.md for the usage rules.
   ================================================================ */
/* ================================================================
   BLUME Design System — PALETTE
   The ONLY place raw colour values live. Rebrand = edit this file.
   Semantic roles (tokens.css) and components reference these vars;
   never hardcode hex anywhere else (see DESIGN_SYSTEM.md).
   Scoped to .bz so it cannot affect un-ported screens.
   ================================================================ */
.bz {
  /* — Ink / neutrals — */
  --c-ink: #1b1a17; /* deep warm ink: primary text + primary button */
  --c-ink-hover: #141310; /* primary button hover */
  --c-white: #ffffff; /* panels, fields */
  --c-chrome-ink: #1b1a17; /* dark chrome (d3 direction) */

  /* Grounds */
  --c-paper-cream: #f7f3ea; /* base warm ground; also primary-button text */
  --c-paper-d2: #fcf8f3; /* D2 ground (the chosen direction) */
  --c-chrome-cream: #efe7d7; /* cream nav/sidebar (base direction) */
  --c-paper-raised: #fffdfa; /* warm near-white for raised chrome: header + DB search bars */

  /* Alpha-ink (text, hairlines, washes — based on #1B1A17) */
  --c-ink-a45: rgba(27, 26, 23, 0.45); /* modal drop shadow */
  --c-ink-a56: rgba(27, 26, 23, 0.56);
  --c-ink-a72: rgba(27, 26, 23, 0.72); /* dark-grey fill behind light text (step marker) */
  --c-ink-a36: rgba(27, 26, 23, 0.36);
  --c-ink-a11: rgba(27, 26, 23, 0.11);
  --c-ink-a08: rgba(27, 26, 23, 0.08);
  --c-ink-a07: rgba(27, 26, 23, 0.07);
  --c-ink-a06: rgba(27, 26, 23, 0.06);
  --c-ink-a05: rgba(27, 26, 23, 0.05);
  --c-ink-a04: rgba(27, 26, 23, 0.04);
  --c-ink-a025: rgba(27, 26, 23, 0.025);

  /* — Brand accents (use sparingly — see DESIGN_SYSTEM.md) — */
  --c-clay: #f16222; /* live total + active marker ONLY */
  --c-clay-hover: #d9531a; /* clay button hover */
  --c-clay-a08: rgba(241, 98, 34, 0.08); /* clay outline-button hover wash */
  --c-danger: #c9302b; /* destructive / over-budget ONLY */
  --c-danger-a08: rgba(201, 48, 43, 0.08);
  --c-danger-line: rgba(201, 48, 43, 0.22); /* calm hairline for danger surfaces */
  --c-brand-red: #ec1c24; /* BLUME logo red — pricing-page accent ONLY */
  --c-brand-red-a08: rgba(236, 28, 36, 0.08);

  /* Tinted-button washes — soft fill + hover fill, paired with a base colour
     token for text/border. The shared vocabulary for the action buttons
     (Save-draft green · Send red · Sync blue · Customise clay · Download green). */
  --c-blue: #2883c5; /* integrations / Xero actions */
  --c-blue-bg: rgba(40, 131, 197, 0.12);
  --c-blue-bg-hi: rgba(40, 131, 197, 0.2);
  --c-danger-bg: rgba(201, 48, 43, 0.1);
  --c-danger-bg-hi: rgba(201, 48, 43, 0.18);
  --c-clay-bg: rgba(241, 98, 34, 0.12);
  --c-clay-bg-hi: rgba(241, 98, 34, 0.2);
  --c-green: #3e6b47;
  --c-green-bg: rgba(94, 148, 104, 0.14);
  --c-green-bg-hi: rgba(94, 148, 104, 0.22);

  /* — Status hues (dot / bg / fg) — dot is the brand identity colour;
     bg is the same hue at low alpha, fg a darkened shade for readable text. — */
  --c-status-quick-quote-dot: #a89b86;
  --c-status-quick-quote-bg: rgba(168, 155, 134, 0.16);
  --c-status-quick-quote-fg: #73685a;
  --c-status-inquiry-dot: #2f7fe0;
  --c-status-inquiry-bg: rgba(47, 127, 224, 0.12);
  --c-status-inquiry-fg: #1e5bb0;
  --c-status-quote-sent-dot: #f5a300;
  --c-status-quote-sent-bg: rgba(245, 163, 0, 0.14);
  --c-status-quote-sent-fg: #8a6300;
  --c-status-quote-confirmed-dot: #1fa855;
  --c-status-quote-confirmed-bg: rgba(31, 168, 85, 0.13);
  --c-status-quote-confirmed-fg: #157a3d;
  --c-status-quote-declined-dot: #e5483a;
  --c-status-quote-declined-bg: rgba(229, 72, 58, 0.12);
  --c-status-quote-declined-fg: #b0291e;
  --c-status-in-progress-dot: #7c5ce6;
  --c-status-in-progress-bg: rgba(124, 92, 230, 0.13);
  --c-status-in-progress-fg: #553ba8;
  --c-status-deposit-paid-dot: #00abab;
  --c-status-deposit-paid-bg: rgba(0, 171, 171, 0.13);
  --c-status-deposit-paid-fg: #017373;
  --c-status-completed-dot: #2e8b57;
  --c-status-completed-bg: rgba(46, 139, 87, 0.11);
  --c-status-completed-fg: #226641;
  --c-status-cancelled-dot: #9a9590;
  --c-status-cancelled-bg: rgba(27, 26, 23, 0.06);
  --c-status-cancelled-fg: #6b6660;
  /* Comparison — a what-if scratch duplicate. Warm sienna, distinct from every
     pipeline hue; comparison events are kept off the calendar and stats. */
  --c-status-comparison-dot: #9c6b4a;
  --c-status-comparison-bg: rgba(156, 107, 74, 0.14);
  --c-status-comparison-fg: #6f4a30;
  /* Comparison identity washes — the same sienna hue at much lower alpha than
     the pill's -bg, because these fill whole surfaces (an events-index row, the
     entire editor page) rather than a 20px pill. Deliberately a wash and never
     an opacity drop: a comparison is being actively priced, so its money column
     must stay as legible as a real event's. -wash-hi is the row hover, kept
     stronger than the neutral row hover so the hover still reads. */
  --c-status-comparison-wash: rgba(156, 107, 74, 0.05);
  --c-status-comparison-wash-hi: rgba(156, 107, 74, 0.09);
  /* Page-level tint for a comparison's own event page — lighter again, since it
     sits behind the whole editor for as long as the florist is working. */
  --c-status-comparison-tint: rgba(156, 107, 74, 0.035);
  /* Non-status calendar entries (flower arrival = rose, pickup = orange) */
  --c-status-flower-arrival-dot: #e0568c;
  --c-status-flower-arrival-bg: rgba(224, 86, 140, 0.13);
  --c-status-flower-arrival-fg: #a8345f;
  --c-status-flower-pickup-dot: #f2790b;
  --c-status-flower-pickup-bg: rgba(242, 121, 11, 0.13);
  --c-status-flower-pickup-fg: #9a4d00;

  /* Budget-health meter (over = --c-danger) */
  --c-budget-ok: #5e9468;
  --c-budget-warn: #8a6a1e;

  /* Header banners + warning feedback (warm amber — calmer than the old #f59e0b) */
  --c-warn-bg: #f4e8ce;
  --c-warn-fg: #6e5414;
  --c-warn-line: rgba(110, 84, 20, 0.22);

  /* Tip / help callout — light clay wash (hover help, see .bz-tip / InfoTooltip) */
  --c-tip-bg: #fcefe9;
  --c-tip-line: rgba(200, 82, 28, 0.18);
}
/* Modal scrim — exposed globally (not just under .bz) because overlays are a
   full-screen, app-wide concern and must work on not-yet-ported (legacy) modals
   too. The raw value still lives only here in the palette. Used by .bz-scrim. */
:root {
  --bz-scrim: rgba(27, 26, 23, 0.34);
}
/* ================================================================
   BLUME Design System — SEMANTIC TOKENS
   Roles that components consume. These reference palette.css only —
   components must never reach past this layer to raw hex.
   Direction wrappers (.bz-d2) override grounds. The app uses .bz-d2.
   ================================================================ */
/* ── Self-hosted sans — Hanken Grotesk & Public Sans ────────────
   Both were loaded from fonts.googleapis.com until 2026-07-29. That put a
   third-party request in the critical path of every single page render, and
   it broke a rule the project states outright: no test may depend on the
   network. WebMock does not help — it intercepts Ruby-level HTTP, not the
   browser's own requests — so system tests were really fetching these, at a
   measured 1.0–3.0s with 3x variance, times however many headless Chromes
   were running. That is a page that is still reflowing while Capybara is
   clicking it.

   Each family ships as ONE variable woff2 covering its whole weight range,
   which is exactly what Google was serving: its CSS declared six separate
   faces for Public Sans, all pointing at the same file (verified by md5).
   The declared ranges below match the weights the app previously requested,
   so rendering is unchanged — a request outside the range clamps to its end,
   just as it did when it matched the nearest static face.

   Latin subset only, matching the Libre Caslon precedent below. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/hanken-grotesk/latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/public-sans/latin-wght-normal.woff2') format('woff2');
}
/* ── Self-hosted serif — Libre Caslon Condensed ─────────────────
   Not on Google Fonts; files vendored from Fontsource (OFL-1.1,
   @fontsource/libre-caslon-condensed 5.2.4) into
   public/fonts/libre-caslon-condensed/ so every page — including the
   public e-signature views — loads it from our own origin. Weights
   match the roles the design system uses (400/500, normal + italic). */
@font-face {
  font-family: 'Libre Caslon Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/libre-caslon-condensed/latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Condensed';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/libre-caslon-condensed/latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/libre-caslon-condensed/latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Condensed';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/libre-caslon-condensed/latin-500-italic.woff2') format('woff2');
}
.bz {
  /* Text */
  --ink:   var(--c-ink);
  --mute:  var(--c-ink-a56);
  --faint: var(--c-ink-a36);

  /* Lines / surfaces */
  --line:       var(--c-ink-a11);
  --line-soft:  var(--c-ink-a07);
  --paper:      var(--c-paper-cream);
  --panel:      var(--c-white);
  --chrome:     var(--c-chrome-cream);
  --chrome-ink: var(--c-chrome-ink);
  --field:      var(--c-white);

  /* "Soft but defined" elevation — a warm-ink hairline + a layered drop shadow
     (a tight 1–2px shadow for crispness plus a wider, very soft shadow for
     lift). Used together on surfaces (cards, tables, search bars, inputs); the
     hairline alone is the internal divider (row separators, heading underline). */
  --hairline:   var(--c-ink-a08);
  --elevation:  0 1px 2px var(--c-ink-a08), 0 8px 22px -8px var(--c-ink-a08);

  /* Accents */
  --accent: var(--c-clay);
  --danger: var(--c-danger);

  /* Tip callout — hover help box + trigger badge (InfoTooltip) */
  --tip-bg:    var(--c-tip-bg);
  --tip-line:  var(--c-tip-line);
  --tip-label: var(--c-clay);
  --tip-fg:    var(--c-ink);

  /* Type */
  --serif: 'Libre Caslon Condensed', Georgia, serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bz *, .bz *::before, .bz *::after { box-sizing: border-box; }
/* Direction ground — D2 is the chosen, shipping direction */
.bz-d2 { --paper: var(--c-paper-d2); --chrome: var(--c-paper-raised); }
/* Page ground — the warm paper that fills the viewport below the 70px header,
   so a short or empty table never reveals the white body underneath. Apply to
   the outermost wrapper of a ported index/show screen alongside `bz bz-d2`. */
.bz-page { min-height: calc(100vh - 70px); }
/* On mobile <main> keeps a 12px side gutter (components/base.css) for legacy
   screens without their own padding. The paper page is meant to fill the
   viewport, so on those widths break it out of that gutter to the screen edges;
   its inner content wrapper keeps its own padding. Desktop main has no gutter,
   so this is scoped below the lg breakpoint. */
@media (max-width: 1023px) {
  .bz-page { margin-left: -12px; margin-right: -12px; }
}
/* ── Type helpers ─────────────────────────────────────────── */
.bz-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.bz-eyebrow a { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; }
.bz-title   { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.bz-mono    { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.bz-sans    { font-family: var(--sans); }
.bz-serif   { font-family: var(--serif); }
/* ================================================================
   BLUME Design System — PRIMITIVES
   Shared .bz-* components. Consume semantic tokens only; no raw hex.
   Radius / shadow / colour rules are documented in DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Buttons (square corners by design) ───────────────────── */
.bz-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:-0.01em; border-radius:0; border:1px solid transparent; cursor:pointer;
  padding:11px 18px; white-space:nowrap; transition: background .18s, color .18s, border-color .18s; }
.bz-btn-primary { background: var(--ink); color: var(--c-paper-cream); }
/* flat — no shadow */
/* color asserted on hover/focus/active so the legacy global orange link states
   can't win on anchor-rendered primary buttons (link_to ... class: "bz-btn-primary") */
.bz-btn-primary:hover { background: var(--c-ink-hover); }
.bz-btn-primary:hover, .bz-btn-primary:focus, .bz-btn-primary:active { color: var(--c-paper-cream); }
.bz-btn-ghost { background: var(--c-ink-a05); color: var(--ink); border-color: transparent; box-shadow: var(--elevation); }
.bz-btn-ghost:hover { background: var(--c-ink-a08); border-color: var(--ink); }
/* same legacy-orange guard as bz-btn-primary, for anchor-rendered ghost buttons */
.bz-btn-ghost:hover, .bz-btn-ghost:focus, .bz-btn-ghost:active { color: var(--ink); }
.bz-btn-danger { background: var(--c-danger-a08); color: var(--danger); border-color: transparent; }
.bz-btn-danger:hover { border-color: var(--danger); }
.bz-btn-sm { padding:8px 13px; font-size:13px; border-radius:0; }
.bz-btn:disabled { opacity:0.5; cursor:default; }
.bz-btn:disabled:hover { border-color:transparent; }
/* Clay accent actions — filled + outline (square corners, like every other
   button). The quote editor's Add arrangement / Add hire item. NOTE: these
   intentionally use --accent on a button, which the rest of the system
   reserves for the live total; scoped to deliberate primary actions only. */
.bz-btn-accent { background: var(--accent); color: var(--c-paper-cream); }
.bz-btn-accent:hover { background: var(--c-clay-hover); }
.bz-btn-accent-outline { background: var(--c-white); color: var(--accent); border-color: var(--accent); }
.bz-btn-accent-outline:hover { background: var(--c-clay-a08); }
/* ── Fields ───────────────────────────────────────────────── */
.bz-label { display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--faint); margin-bottom:8px; }
/* Fields are barely-lifted white surfaces: hairline edge + tight drop shadow. */
.bz-field { width:100%; background: var(--field); border:1px solid var(--hairline); border-radius:7px; padding:11px 13px;
  font-family:var(--sans); font-size:15px; color:var(--ink); box-shadow: var(--elevation); outline:none; }
.bz-field:focus { border-color: var(--ink); background: var(--field); }
.bz-field::-moz-placeholder { color: var(--faint); }
.bz-field::placeholder { color: var(--faint); }
/* Autofilled fields: Chrome paints them pale blue by default. Mask that with the
   opaque field surface (--field is white) and give the filled state a BLUME clay
   border instead of blue. Duplicated under .bz so it wins over the
   .bz input.bz-field re-assert below (higher specificity). */
.bz-field:-webkit-autofill,
.bz-field:-webkit-autofill:hover,
.bz-field:-webkit-autofill:focus,
.bz input.bz-field:-webkit-autofill,
.bz textarea.bz-field:-webkit-autofill,
.bz select.bz-field:-webkit-autofill {
  border-color: var(--accent);
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset, var(--elevation);
  caret-color: var(--ink);
}
/* @tailwindcss/forms (base strategy) styles bare [type='text']/textarea/select at
   equal specificity but loads later, so its white bg + grey border would override
   the field surface. Re-assert under .bz (higher specificity → wins, no
   !important needed). */
.bz input.bz-field, .bz textarea.bz-field, .bz select.bz-field {
  background: var(--field); border:1px solid var(--hairline); border-radius:7px;
  color: var(--ink); box-shadow: var(--elevation); }
.bz input.bz-field, .bz textarea.bz-field { padding:11px 13px; }
.bz input.bz-field:focus, .bz textarea.bz-field:focus, .bz select.bz-field:focus {
  border-color: var(--ink); background: var(--field); box-shadow: var(--elevation); outline: none; }
/* ── Tables (internal dividers are the warm-ink hairline) ──── */
.bz-th { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);
  font-weight:500; text-align:left; padding:0 0 14px; }
.bz-td { font-family:var(--sans); font-size:14.5px; color:var(--ink); padding:16px 0; border-top:1px solid var(--hairline); vertical-align:middle; }
/* ── Card surface: barely-lifted (hairline edge + tight drop shadow) ─ */
.bz-card { background: var(--panel); border-radius:11px; border:1px solid var(--hairline); box-shadow: var(--elevation); }
/* ── Avatar (initials fallback when no photo) ─────────────── */
.bz-avatar-initials { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border-radius:999px; background: var(--c-ink-a08); color: var(--mute);
  font-family: var(--mono); font-weight:600; font-size:0.8rem; letter-spacing:0.02em; text-transform:uppercase; overflow:hidden; }
/* ── Status pill (colours via .bz-pill--<status> in status.css) ─ */
.bz-pill { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:0.04em;
  padding:4px 10px 4px 9px; border-radius:999px; white-space:nowrap; }
/* Secondary payment badge — sits under the pipeline pill; a touch smaller/quieter
   so the pipeline status stays the primary read. */
.bz-pill--payment { font-size:10px; padding:2px 8px 2px 7px; gap:5px; }
.bz-pill--payment .bz-dot { width:5px; height:5px; }
.bz-dot { width:6px; height:6px; border-radius:50%; flex:0 0 auto; background: currentColor; background: var(--dot, currentColor); }
/* Status pill rendered as a button that opens the status & notes modal.
   The trailing arrow lives inside the pill and inherits the status colour. */
.bz-status-cell { position:relative; }
.bz-status-trigger { border:none; background:transparent; padding:0; margin:0; font:inherit; cursor:pointer; display:inline-flex; }
.bz-status-trigger:hover .bz-pill { filter:brightness(0.97); }
/* Arrow is hidden (but keeps its box, so no layout shift) until the row/cell is
   hovered or the trigger is keyboard-focused. */
.bz-status-arrow { margin-left:1px; opacity:0; transition:opacity .12s ease; flex:0 0 auto; }
.bz-status-cell:hover .bz-status-arrow,
.bz-evt-row:hover .bz-status-arrow,
.bz-status-trigger:focus-visible .bz-status-arrow { opacity:1; }
/* ================================================================
   BLUME Design System — STATUS PILLS
   One modifier class per status; each sets the dot colour (--dot),
   background and text from palette.css. Colours live in the palette;
   the Ruby helper (BzStatusHelper) maps Event::Statusable enum values
   onto these classes + display labels.
   ================================================================ */
.bz-pill--quick-quote     { --dot: var(--c-status-quick-quote-dot);     background: var(--c-status-quick-quote-bg);     color: var(--c-status-quick-quote-fg); }
.bz-pill--inquiry         { --dot: var(--c-status-inquiry-dot);         background: var(--c-status-inquiry-bg);         color: var(--c-status-inquiry-fg); }
.bz-pill--quote-sent      { --dot: var(--c-status-quote-sent-dot);      background: var(--c-status-quote-sent-bg);      color: var(--c-status-quote-sent-fg); }
.bz-pill--quote-confirmed { --dot: var(--c-status-quote-confirmed-dot); background: var(--c-status-quote-confirmed-bg); color: var(--c-status-quote-confirmed-fg); }
.bz-pill--quote-declined  { --dot: var(--c-status-quote-declined-dot);  background: var(--c-status-quote-declined-bg);  color: var(--c-status-quote-declined-fg); }
.bz-pill--in-progress     { --dot: var(--c-status-in-progress-dot);     background: var(--c-status-in-progress-bg);     color: var(--c-status-in-progress-fg); }
.bz-pill--deposit-paid    { --dot: var(--c-status-deposit-paid-dot);    background: var(--c-status-deposit-paid-bg);    color: var(--c-status-deposit-paid-fg); }
.bz-pill--completed       { --dot: var(--c-status-completed-dot);       background: var(--c-status-completed-bg);       color: var(--c-status-completed-fg); }
.bz-pill--cancelled       { --dot: var(--c-status-cancelled-dot);       background: var(--c-status-cancelled-bg);       color: var(--c-status-cancelled-fg); }
.bz-pill--comparison      { --dot: var(--c-status-comparison-dot);      background: var(--c-status-comparison-bg);      color: var(--c-status-comparison-fg); }
/* ================================================================
   BLUME Design System — PIPELINE SEGMENT BAR (events index)
   The florist's mental model as a single control:
   All · Quick Quote · Inquiry · Quote · Confirmed · In Progress · Completed,
   with a detached "Archived" pill. Each segment links to its status_filter[]
   set (see EventsHelper::EVENT_PIPELINE_SEGMENTS). Colours come from the
   ink-alpha palette; no raw values here.
   ================================================================ */
.bz-segbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.bz-segbar__track {
  display: flex;
  align-items: center;
  gap: 2px;
  /* 40px overall height to match the events toolbar controls (search field,
     Filters/New-event buttons in events-table.css). Vertical padding gives way
     to the fixed height; align-items centres the segments within it. */
  height: 40px;
  padding: 0 4px;
  background: var(--panel);
  border-radius: 11px;
  box-shadow: var(--elevation);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.bz-segbar__divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 6px;
  flex: 0 0 auto;
}
.bz-segbar__chevron {
  display: flex;
  align-items: center;
  color: var(--faint);
  padding: 0 1px;
  flex: 0 0 auto;
}
.bz-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  cursor: pointer;
  font: inherit;
  border-radius: 7px;
  padding: 7px 11px;
  white-space: nowrap;
  flex: 0 0 auto;
  -webkit-text-decoration: none;
  text-decoration: none;
  /* Resting coloured chips carry a soft tinted fill (the faint wash token
     doubled via an inset flood so the pastel reads on the white track) + dot +
     tinted label, dimmed to a calm 78% so the row sits quietly. Hover lifts to
     full opacity; selecting keeps the same hue but reads stronger via full
     opacity plus a solid coloured border + ring. */
  background: transparent;
  background: var(--seg-bg, transparent);
  color: var(--seg-fg, var(--mute));
  box-shadow: inset 0 0 0 100px transparent;
  box-shadow: inset 0 0 0 100px var(--seg-bg, transparent);
  opacity: .78;
  transition: background .15s, color .15s, box-shadow .15s, opacity .15s;
}
/* Coloured status dot before the label (omitted on the neutral "All"). */
.bz-seg__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: var(--seg-dot, var(--mute)); }
/* ── Multi-select checkbox ────────────────────────────────────
   Each stage is a checkbox that toggles its status_filter[] set in/out of the
   union, so several stages can be selected at once. At rest the box is an empty
   tinted outline; when checked it fills with the status hue and reveals the tick
   (drawn in the panel colour). */
.bz-seg__check {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--seg-dot, var(--c-ink-a36));
  color: transparent;
  transition: background .15s, color .15s, box-shadow .15s;
}
.bz-seg__check-mark { display: block; }
.bz-seg--active .bz-seg__check {
  background: var(--seg-dot, var(--ink));
  box-shadow: inset 0 0 0 1.5px var(--seg-dot, var(--ink));
  color: var(--panel);
}
/* ── Per-segment status hue ───────────────────────────────────
   Each pipeline stage carries its Event::Statusable colour: a soft wash
   fill + dot + tinted label at rest, and a bolder selected state (stronger
   tint, a solid coloured border and a soft outer ring). "All" sets no
   --seg-* vars, so it stays neutral ink. Keyed off the data-segment label
   (set in _pipeline.html.erb). */
.bz-seg[data-segment="quick-quote"] { --seg-dot: var(--c-status-quick-quote-dot);     --seg-bg: var(--c-status-quick-quote-bg);     --seg-fg: var(--c-status-quick-quote-fg); }
.bz-seg[data-segment="inquiry"]     { --seg-dot: var(--c-status-inquiry-dot);         --seg-bg: var(--c-status-inquiry-bg);         --seg-fg: var(--c-status-inquiry-fg); }
.bz-seg[data-segment="quote"]       { --seg-dot: var(--c-status-quote-sent-dot);      --seg-bg: var(--c-status-quote-sent-bg);      --seg-fg: var(--c-status-quote-sent-fg); }
.bz-seg[data-segment="confirmed"]   { --seg-dot: var(--c-status-quote-confirmed-dot); --seg-bg: var(--c-status-quote-confirmed-bg); --seg-fg: var(--c-status-quote-confirmed-fg); }
.bz-seg[data-segment="in-progress"] { --seg-dot: var(--c-status-in-progress-dot);     --seg-bg: var(--c-status-in-progress-bg);     --seg-fg: var(--c-status-in-progress-fg); }
.bz-seg[data-segment="completed"]   { --seg-dot: var(--c-status-completed-dot);       --seg-bg: var(--c-status-completed-bg);       --seg-fg: var(--c-status-completed-fg); }
.bz-seg[data-segment="archived"]    { --seg-dot: var(--c-status-quote-declined-dot);  --seg-bg: var(--c-status-quote-declined-bg);  --seg-fg: var(--c-status-quote-declined-fg); }
/* Hover — no opacity flash or outline; the label just goes bold. Colour is
   re-asserted to its status hue to override the legacy global `a:hover` orange
   (base.css), which would otherwise win on these anchor-rendered chips. */
.bz-seg:hover { color: var(--seg-fg, var(--mute)); }
.bz-seg:hover .bz-seg__label { font-weight: 600; }
/* Active — stronger tint (a second wash layer via the inset flood), a
   solid coloured border (1.5px inset ring), and a soft outer ring. The
   neutral "All" has no --seg-* vars, so it falls back to a solid ink
   border on a clean (unfilled) ground. */
.bz-seg--active,
.bz-seg--active:hover {
  opacity: 1;
  color: var(--seg-fg, var(--ink));
  box-shadow:
    inset 0 0 0 1.5px var(--seg-dot, var(--ink)),
    inset 0 0 0 100px transparent,
    0 0 0 3px var(--seg-bg, var(--c-ink-a05));
  box-shadow:
    inset 0 0 0 1.5px var(--seg-dot, var(--ink)),
    inset 0 0 0 100px var(--seg-bg, transparent),
    0 0 0 3px var(--seg-bg, var(--c-ink-a05));
}
.bz-seg__label { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
.bz-seg--active .bz-seg__label { font-weight: 600; }
.bz-seg__count {
  font-size: 11px;
  line-height: 1;
  color: var(--faint);
  background: transparent;
  border-radius: 5px;
  padding: 2px 5px;
  min-width: 18px;
  text-align: center;
}
.bz-seg--active .bz-seg__count { color: var(--seg-fg, var(--ink)); background: var(--seg-bg, var(--c-ink-a08)); }
/* Detached, right-aligned "Archived" pill — its own raised surface, tinted a
   soft red so the closed bucket (archived / cancelled / declined) reads apart
   from the active pipeline. */
.bz-segbar__archived {
  display: inline-flex;
  align-items: center;
  height: 40px;
  border-radius: 11px;
  padding: 0 11px;
  background: var(--c-status-quote-declined-bg);
  box-shadow: var(--elevation);
}
.bz-segbar__archived:hover { background: var(--c-status-quote-declined-bg); }
.bz-segbar__archived .bz-seg__label { padding-left: 3px; }
/* ── Mobile (≤640px) ──────────────────────────────────────────
   The horizontal pipeline bar (7 segments + Archived) is too dense for a phone;
   hide it and let the mobile-only Status popover in the toolbar
   (.bz-evt-status-filter, _status_filter.html.erb) drive status filtering
   instead. Same status_filter[] contract, so counts/URL stay consistent. */
@media (max-width: 640px) {
  .bz-segbar { display: none; }
}
/* ================================================================
   BLUME Design System — BUDGET-HEALTH METER (events table)
   A one-glance bar: how much of the client's budget the quote uses, with the
   exact headroom (or overage) beneath. Green normally, amber from 85%, danger
   when over. State + numbers come from EventsHelper#event_budget_health.
   ================================================================ */
.bz-meter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-top: 6px;
}
.bz-meter__track {
  width: 100%;
  max-width: 92px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-ink-a08);
  overflow: hidden;
}
.bz-meter__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--meter-color);
}
.bz-meter__label {
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--meter-color);
}
.bz-meter--ok   { --meter-color: var(--c-status-completed-fg); }
/* green  */
.bz-meter--near { --meter-color: var(--c-status-quote-sent-fg); }
/* amber  */
.bz-meter--over { --meter-color: var(--danger); }
/* danger */
/* ================================================================
   BLUME Design System — EVENTS INDEX TABLE
   Screen-specific layout on top of the .bz-th / .bz-td primitives:
   column paddings, right-aligned numerics, the clickable row + hover,
   and the merged Event / Updated cells. Colours are tokens only.
   ================================================================ */
.bz-evt-table {
  width: 100%;
  border-collapse: collapse;
}
.bz-evt-table thead tr {
  background: var(--c-ink-a04);
  border-bottom: 1px solid var(--hairline);
}
.bz-evt-table .bz-th {
  padding: 15px 12px 13px;
}
.bz-evt-table .bz-th:first-child {
  padding-left: 26px;
}
.bz-evt-table .bz-th:last-child {
  padding-right: 22px;
}
.bz-evt-table .bz-td {
  padding: 13px 12px;
  border-top: 1px solid var(--hairline);
}
.bz-evt-table .bz-td:first-child {
  padding-left: 26px;
}
.bz-evt-table .bz-td:last-child {
  padding-right: 22px;
}
.bz-evt-table tbody tr:first-child .bz-td {
  border-top: none;
}
/* Right-aligned numeric columns (budgeted / total / slush). */
.bz-evt-num {
  text-align: right;
  white-space: nowrap;
}
/* Clickable row (Stimulus event-row#showEvent drives navigation). */
.bz-evt-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
.bz-evt-row:hover {
  background: var(--c-ink-a025);
}
.bz-evt-row--archived {
  opacity: 0.7;
}
/* A what-if comparison. Sienna wash + a 3px sienna rule down the left edge, so
   the row reads apart from the real events around it at a glance.
   NOT opacity like --archived above: an archived event is retired, a comparison
   is being actively priced and its Total must stay fully legible.
   These rules sit AFTER .bz-evt-row:hover on purpose — equal specificity, so
   source order is what lets the comparison hover win. */
.bz-evt-row--comparison {
  background: var(--c-status-comparison-wash);
}
.bz-evt-row--comparison:hover {
  background: var(--c-status-comparison-wash-hi);
}
/* The rule is an inset shadow on the first cell, not a border on the <tr>: in
   the collapsing border model a row border collapses against the cell borders
   (.bz-td already declares border-top) and nudges the column by the border
   width. An inset shadow paints inside the cell with zero layout effect, so the
   Event column stays aligned with every other row. */
.bz-evt-row--comparison .bz-td:first-child {
  box-shadow: inset 3px 0 0 var(--c-status-comparison-dot);
}
.bz-evt-name {
  font-weight: 600;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-evt-sub {
  color: var(--mute);
  font-size: 13px;
  margin-top: 2px;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bz-evt-muted {
  color: var(--mute);
  font-size: 13.5px;
  white-space: nowrap;
}
.bz-evt-faint {
  color: var(--faint);
}
/* Subtle tax-basis tag beside the Total figure ("incl. tax" / "excl. tax"). */
.bz-evt-taxtag {
  color: var(--faint);
  font-size: 11px;
  font-weight: 400;
}
/* Location truncates rather than widening the column (matches the handoff). */
.bz-evt-loc {
  display: block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bz-evt-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.bz-evt-updated .bz-evt-time {
  font-family: var(--mono);
  color: var(--faint);
  font-size: 12.5px;
}
/* Empty state. */
.bz-evt-empty {
  text-align: center;
  padding: 56px 24px;
  color: var(--mute);
}
.bz-evt-empty__title {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin: 12px 0 4px;
}
/* ── Filter toolbar (search · count · Filters popover · New event) ─ */
.bz-evt-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Matches the 16px segbar→table gap below the status bar, so the
     search→status and status→table gaps read as equal. */
  margin-bottom: 16px;
}
.bz-evt-search {
  /* Narrowed from 440px to make room for the Payment + Xero filter dropdowns. */
  flex: 0 1 260px;
}
/* search sits left, doesn't fill the row */
.bz-evt-toolbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Toolbar controls + the pipeline segment bar share one height (40px) so the
   search field, Filters/New-event buttons, and status bar read as a set.
   Kept in sync with .bz-segbar__track in segbar.css. */
.bz-evt-search input.bz-field,
.bz-evt-filters__toggle,
.bz-evt-toolbar__actions > .bz-btn-primary {
  height: 40px;
}
/* The borderless + 11px-radius surface is shared by every DB-page search bar
   (see .bz-cat-search input.bz-field in catalog.css); events only adds height. */
/* Selects styled as fields; the native chevron stays (no extra markup/hex). */
.bz-select {
  cursor: pointer;
  min-width: 100%;
}
select.bz-field {
  padding-right: 34px;
}
/* Filters popover — a <details> whose <summary> is the ghost button. */
.bz-evt-filters {
  position: relative;
}
.bz-evt-filters__toggle {
  list-style: none;
  background: var(--c-white);
  border-color: var(--hairline);
  box-shadow: var(--elevation);
}
.bz-evt-filters__toggle:hover {
  background: var(--c-white);
  border-color: var(--ink);
  box-shadow: var(--elevation);
}
.bz-evt-filters__toggle::-webkit-details-marker {
  display: none;
}
.bz-evt-filters__toggle::marker {
  content: '';
}
.bz-evt-filters__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 32px -12px var(--c-ink-a45);
  padding: 18px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bz-evt-filters__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Toolbar filter dropdowns (Payment axis, Xero sync) — same <details> popover
   pattern as Filters, but the panel is a tight option list (dot · label ·
   count) instead of form groups. Dots reuse the status palette: payment
   deposit/paid map to the deposit-paid/completed dots, Xero synced to the
   completed dot; other options stay faint. */
.bz-evt-drop__panel {
  padding: 8px;
  min-width: 230px;
  gap: 2px;
}
.bz-evt-drop__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
}
/* Colour is re-asserted on hover to override the legacy global a:hover orange
   (base.css), which would otherwise flip these option links to clay — clay is
   reserved for the active marker (see segbar.css). */
.bz-evt-drop__opt:hover,
.bz-evt-drop__opt--active:hover {
  background: var(--c-ink-a05);
  color: var(--ink);
}
.bz-evt-drop__opt--active {
  background: var(--c-ink-a08);
  color: var(--ink);
  font-weight: 600;
}
.bz-evt-drop__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.bz-evt-drop__dot--deposit_paid {
  background: var(--c-status-deposit-paid-dot);
}
.bz-evt-drop__dot--paid_in_full,
.bz-evt-drop__dot--synced {
  background: var(--c-status-completed-dot);
}
.bz-evt-drop__label {
  flex: 1;
}
.bz-evt-drop__count {
  color: var(--faint);
  font-size: 12.5px;
}
/* Payment + Xero share one multi-select popover: section headings group the two
   axes, rows are <label>s wrapping a checkbox. */
.bz-evt-drop__heading {
  padding: 8px 12px 2px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.bz-evt-drop__heading:not(:first-child) {
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
}
.bz-evt-drop__opt--check {
  cursor: pointer;
}
/* Live active highlight as boxes are ticked (navigation is deferred to the
   popover close), mirroring the --active state used by the single-select rows. */
.bz-evt-drop__opt--check:has(.bz-evt-drop__checkbox:checked) {
  background: var(--c-ink-a08);
  font-weight: 600;
}
.bz-evt-drop__checkbox {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  cursor: pointer;
  accent-color: var(--ink);
}
/* Sort group: the order select + a square direction toggle. */
.bz-evt-sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bz-evt-sort .bz-field {
  flex: 1;
}
/* The mobile-only status popover replaces the (hidden) pipeline bar on phones;
   on desktop the segment bar owns status, so it stays hidden here. Both these
   desktop-hide rules sit BEFORE the @media block so the mobile show rules win on
   source order (equal specificity). */
.bz-evt-status-filter { display: none; }
.bz-evt-cards { display: none; }
/* ── Mobile (≤640px) ──────────────────────────────────────────
   The toolbar is one nowrap flex row (search · count · actions) that can't fit
   a phone. Let it wrap: search takes a full row, the count + action buttons sit
   on the next. The table already scrolls (wrapped in overflow-x-auto), so it
   just needs main{min-width:0} to stop stretching the page. */
@media (max-width: 640px) {
  .bz-evt-toolbar { flex-wrap: wrap; gap: 12px; }
  .bz-evt-search { flex: 1 1 100%; }
  /* The four controls wrap onto more than one row on a phone. space-between
     pushes each row out to both edges instead of leaving it packed left with
     dead space on the right. */
  .bz-evt-toolbar__actions {
    margin-left: 0; flex-wrap: wrap; width: 100%;
    justify-content: space-between;
  }
  /* Where the controls wrap depends on the screen: on a wider phone the three
     filters fit one row and New event lands alone on the next, where
     space-between has no free space to distribute and would leave it stranded
     on the left. An auto margin pushes it right on its own line too. */
  .bz-evt-toolbar__actions > .bz-btn-primary { margin-left: auto; }
  /* Keep the anchored filter/payment popovers within the viewport. */
  .bz-evt-filters__panel,
  .bz-evt-drop__panel { max-width: calc(100vw - 24px); }
  /* Status is the left-most toolbar control, so its panel must open RIGHTWARD
     (left:0) — anchored right:0 like the others it spills off the left edge and
     clips every label. It's also a long list, so cap height and scroll. */
  .bz-evt-drop--status .bz-evt-drop__panel {
    left: 0; right: auto; max-height: 70vh; overflow-y: auto;
  }
  /* The pipeline segment bar is hidden on phones; expose the status popover. */
  .bz-evt-status-filter { display: block; }
  /* Swap the desktop table for the accordion card list. */
  .bz-evt-table-wrap { display: none; }
  .bz-evt-cards { display: block; }
}
/* ── Mobile accordion cards (replace the table on phones) ─────
   .bz-evt-cards is hidden on desktop (rule above the @media block); the media
   block swaps the table for it. Each card is a <details>: tap the summary
   (name · client · status) to expand the fields + actions. */
.bz-evt-card { border-bottom: 1px solid var(--hairline); }
.bz-evt-card:last-child { border-bottom: 0; }
.bz-evt-card--archived { opacity: 0.72; }
/* Comparison card — the phone-sized twin of .bz-evt-row--comparison: same
   sienna wash, same 3px left rule (inset shadow so it survives the card's
   border-bottom hairline), same refusal to dim the content. The hover rule is
   more specific than .bz-evt-card__summary:hover below, so it wins regardless
   of source order. */
.bz-evt-card--comparison {
  background: var(--c-status-comparison-wash);
  box-shadow: inset 3px 0 0 var(--c-status-comparison-dot);
}
.bz-evt-card--comparison .bz-evt-card__summary:hover { background: var(--c-status-comparison-wash-hi); }
/* Summary row — remove the native disclosure marker; the caret rotates on open. */
.bz-evt-card__summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.bz-evt-card__summary::-webkit-details-marker { display: none; }
.bz-evt-card__summary:hover { background: var(--c-ink-a025); }
.bz-evt-card__ident { min-width: 0; flex: 1 1 auto; }
.bz-evt-card__name {
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bz-evt-card__client {
  font-size: 13px; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bz-evt-card__status { flex: 0 0 auto; }
.bz-evt-card__caret { flex: 0 0 auto; color: var(--faint); transition: transform .18s ease; }
.bz-evt-card[open] .bz-evt-card__caret { transform: rotate(180deg); }
/* Expanded body — field grid + actions. */
.bz-evt-card__body { padding: 2px 16px 16px; }
.bz-evt-card__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px 16px;
  gap: 12px 16px; margin: 12px 0 16px;
}
.bz-evt-card__field dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px;
}
.bz-evt-card__field dd { margin: 0; font-size: 14px; color: var(--ink); }
.bz-evt-card__actions { display: flex; align-items: center; gap: 10px; }
.bz-evt-card__view { flex: 1 1 auto; justify-content: center; }
/* ================================================================
   BLUME Design System — CATALOG SCREENS
   The shared layout for the five directory/catalog index screens
   (Flowers · Materials · Hire items · Clients · Suppliers): a page
   header with eyebrow + title, a toolbar (search · count · add), and
   a .bz-card table built on the .bz-th / .bz-td primitives. Mirrors
   the events table; colours are tokens only. Inline-edit keeps its
   dual-cell (.display-mode / .edit-mode) structure — this layer only
   styles surface, type and layout.
   ================================================================ */
/* --- Page header ------------------------------------------------ */
/* Title block on the left, a short description on the right (wraps below on
   narrow viewports). */
.bz-cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 22px; }
/* override the global `h1` padding (typography.css) so the title hugs its box */
.bz-cat-head__title { font-size: 25px; margin-top: 2px; line-height: 1; padding: 0; }
.bz-cat-head__desc { flex: 0 1 440px; max-width: 440px; margin: 0; color: var(--mute); font-size: 15px; line-height: 1.45; }
/* Toolbar: search grows, count + actions sit to the right. */
.bz-cat-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bz-cat-search { position: relative; flex: 1; min-width: 0; }
.bz-cat-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none; display: flex;
}
/* Borderless search surface on the same soft elevation as the .bz-field
   primitive, with the rounded radius shared by every DB-page search bar (and
   the events status/segment bar). Leading padding makes room for the icon. */
.bz-cat-search input.bz-field {
  width: 100%;
  padding-left: 40px;
  border: none;
  border-radius: 11px;
}
/* Raised warm near-white for the DB-page search bars (events + catalog),
   matching the header's --chrome tone. Set here rather than on --field so only
   the search surfaces lift off white, not every input in the app. */
.bz-cat-search input.bz-field,
.bz-evt-search input.bz-field {
  background: var(--c-paper-raised);
}
.bz-cat-count { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
/* --- Table ------------------------------------------------------ */
.bz-cat-table { width: 100%; border-collapse: collapse; }
.bz-cat-table thead tr { background: var(--c-ink-a04); border-bottom: 1px solid var(--hairline); }
.bz-cat-table .bz-th { padding: 15px 14px 13px; }
.bz-cat-table .bz-th:first-child { padding-left: 26px; }
.bz-cat-table .bz-th:last-child { padding-right: 26px; }
.bz-cat-table .bz-td { padding: 13px 14px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.bz-cat-table .bz-td:first-child { padding-left: 26px; }
.bz-cat-table .bz-td:last-child { padding-right: 26px; }
.bz-cat-table tbody tr:first-child .bz-td { border-top: none; }
/* Right-aligned numeric columns (prices, counts). */
.bz-cat-num { text-align: right; white-space: nowrap; font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.bz-cat-table .bz-th--num { text-align: right; }
/* The row: hover wash; an editing row gets a calm highlight. */
.bz-cat-row { transition: background .12s ease; }
.bz-cat-row:hover { background: var(--c-ink-a025); }
.bz-cat-row.is-editing { background: var(--c-ink-a04); }
.bz-cat-name { font-weight: 600; color: var(--ink); }
.bz-cat-sub  { color: var(--mute); font-size: 13px; margin-top: 2px; }
.bz-cat-muted { color: var(--mute); }
.bz-cat-faint { color: var(--faint); }
/* Stacked edit inputs inside a cell. */
.bz-cat-edit { display: flex; flex-direction: column; gap: 8px; }
/* --- Row actions ------------------------------------------------ */
.bz-cat-actions { text-align: right; white-space: nowrap; }
.bz-cat-actions__group { display: inline-flex; justify-content: flex-end; gap: 8px; }
.bz-cat-kebab {
  display: inline-flex; border: none; background: transparent; color: var(--mute);
  cursor: pointer; padding: 6px; margin: -6px; border-radius: 8px;
}
.bz-cat-kebab:hover { background: var(--c-ink-a05); color: var(--ink); }
/* The fixed-positioned dropdown menu (position set inline by JS). */
.bz-cat-menu {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 12px 32px -12px var(--c-ink-a45);
  overflow: hidden;
  min-width: 168px;
}
.bz-cat-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: transparent; border: none; cursor: pointer;
}
/* color re-asserted on hover/focus: anchor-rendered items (link_to) otherwise
   take the legacy global a:hover/a:focus orange from components/base.css. */
.bz-cat-menu__item:hover, .bz-cat-menu__item:focus { background: var(--c-ink-a04); color: var(--ink); }
.bz-cat-menu__item--danger { color: var(--danger); }
.bz-cat-menu__item--danger:hover, .bz-cat-menu__item--danger:focus { color: var(--danger); }
/* An action refused for this record (e.g. sending from a what-if comparison):
   kept in place and greyed, with the reason spelled out beneath it — hiding the
   item would leave the florist hunting for an action that simply isn't there. */
.bz-cat-menu__item:disabled { color: var(--faint); cursor: not-allowed; }
.bz-cat-menu__item:disabled:hover, .bz-cat-menu__item:disabled:focus {
  background: transparent; color: var(--faint);
}
.bz-cat-menu__note {
  font-family: var(--sans); font-size: 12px; line-height: 1.4;
  color: var(--faint); padding: 0 16px 10px; margin: -4px 0 0;
}
/* --- Empty state ------------------------------------------------ */
.bz-cat-empty { text-align: center; padding: 56px 24px; color: var(--mute); }
.bz-cat-empty__icon { color: var(--faint); margin: 0 auto; }
.bz-cat-empty__title { font-family: var(--sans); font-weight: 600; color: var(--ink); margin: 12px 0 4px; }
.bz-cat-empty__sub { font-size: 14px; color: var(--mute); margin-bottom: 18px; }
/* --- Add-flower possible-duplicate warning (warn, still allow) --- */
.bz-flower-dupe {
  margin-top: 4px;
  /* Matches .bz-formerr so this appended box keeps breathing room from the
     (now border-less) modal footer instead of butting up against it. */
  margin-bottom: 20px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-warn-fg);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-line);
  border-radius: 8px;
  padding: 10px 12px;
}
/* The accordion card list is mobile-only. This desktop-hide rule sits BEFORE
   the @media block so the mobile show rule wins on source order (equal
   specificity) — same arrangement as the events table. */
.bz-cat-cards { display: none; }
/* ── Mobile (≤640px) ──────────────────────────────────────────
   Shared by all five catalog screens (flowers · materials · hire items ·
   clients · suppliers). The toolbar is one nowrap row (search · count · Add);
   let the search take a full row so the count + button drop below it. Tables
   already scroll inside their inline overflow-x wrapper. */
@media (max-width: 640px) {
  .bz-cat-toolbar { flex-wrap: wrap; }
  .bz-cat-search { flex: 1 1 100%; }
  /* Search owns the first row, so the count + Add button land on the second.
     Push Add to the right edge — flush with the end of the search bar above it
     — instead of leaving it crowded against the count. All five catalog
     toolbars end in this button, so one rule keeps them consistent. */
  .bz-cat-toolbar > .bz-btn { margin-left: auto; }
  /* JS positions this fixed menu from the kebab; cap it to the viewport. */
  .bz-cat-menu { max-width: calc(100vw - 24px); }
  /* Where a screen offers cards (clients), swap the table for them rather than
     leaving a 5-column table to be scrolled sideways. */
  .bz-cat-table-wrap { display: none; }
  .bz-cat-cards { display: block; }
}
/* ── Mobile accordion cards (replace the table on phones) ─────
   Mirrors .bz-evt-card on the events index. Each card is a <details>: tap the
   summary (name · billing email) to expand the fields + actions. The fields
   carry the same .display-mode / .edit-mode pairs as the table row, so inline
   edit behaves identically here. */
.bz-cat-card { border-bottom: 1px solid var(--hairline); }
.bz-cat-card:last-child { border-bottom: 0; }
/* Summary row — remove the native disclosure marker; the caret rotates on open. */
.bz-cat-card__summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
}
.bz-cat-card__summary::-webkit-details-marker { display: none; }
.bz-cat-card__summary:hover { background: var(--c-ink-a025); }
.bz-cat-card__ident { min-width: 0; flex: 1 1 auto; }
.bz-cat-card__name {
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bz-cat-card__sub {
  font-size: 13px; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bz-cat-card__caret { flex: 0 0 auto; color: var(--faint); transition: transform .18s ease; }
.bz-cat-card[open] .bz-cat-card__caret { transform: rotate(180deg); }
/* Expanded body — field grid + actions. */
.bz-cat-card__body { padding: 2px 16px 16px; }
.bz-cat-card__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px 16px;
  gap: 12px 16px; margin: 12px 0 16px;
}
/* Name and address run long — give them the full width. */
.bz-cat-card__field--wide { grid-column: 1 / -1; }
.bz-cat-card__field dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px;
}
.bz-cat-card__field dd { margin: 0; font-size: 14px; color: var(--ink); word-wrap: anywhere; }
.bz-cat-card__field dd .bz-field { width: 100%; }
/* Email / phone / website are tappable on a phone — mark them as links without
   the shouty blue. */
.bz-cat-card__link { color: var(--ink); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; }
/* The address edit stacks five fields; keep them apart. */
.bz-cat-card__field .bz-cat-edit { display: flex; flex-direction: column; gap: 8px; }
.bz-cat-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* ================================================================
   BLUME Design System — SETTINGS + PROFILE
   The Account-&-team settings screen (accounts#show), the Profile &
   Security screen (devise/registrations) and the preferences screen
   (users/settings#show). Ported from
   design_handoff_blume_flow/blume-settings.jsx (AccountScreen /
   ProfileScreen / Integration / Plan). Consumes semantic tokens + the
   status palette only; no raw hex. See DESIGN_SYSTEM.md.

   Inline edit-in-place: each editable card holds a .display-mode block
   and a hidden .edit-mode <form>; settings_edit_controller toggles the
   .hidden utility between them (Edit / Cancel) and the form submits to
   the existing update action.
   ================================================================ */
/* ── Page scaffold ────────────────────────────────────────── */
.bz-settings { display: flex; flex-direction: column; gap: 14px; padding: 24px 0 48px; }
.bz-settings__head { display: flex; align-items: center; gap: 16px; }
.bz-settings__title { font-size: 23px; line-height: 1.05; }
/* pairs with .bz-title */
.bz-settings__headmeta { flex: 1; min-width: 0; }
/* Square account avatar in the head */
.bz-settings__avatar { width: 44px; height: 44px; border-radius: 8px; flex: 0 0 auto; -o-object-fit: cover; object-fit: cover; }
.bz-settings__avatar--initials { display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink-a08); color: var(--ink); font-family: var(--mono); font-weight: 600;
  font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
/* ── Card (built on the .bz-card surface) ─────────────────── */
.bz-set-card { background: var(--panel); border-radius: 11px; border: 1px solid var(--hairline);
  box-shadow: var(--elevation); overflow: hidden; }
/* Cards that are deep-link anchor targets clear the sticky header. */
.bz-set-card[id] { scroll-margin-top: 90px; }
.bz-set-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 24px 0; }
.bz-set-card__headtext { min-width: 0; }
.bz-set-card__title { font-size: 13.5px; letter-spacing: 0.01em; }
/* pairs with .bz-title */
.bz-set-card__desc { font-size: 12.5px; color: var(--mute); margin: 4px 0 0; line-height: 1.45; }
.bz-set-card__actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bz-set-card__body { padding: 18px 24px; }
.bz-set-card__body--tight { padding: 2px 24px 18px; }
/* ── Field grid (display + edit share it) ─────────────────── */
.bz-set-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px 22px; gap: 14px 22px; }
.bz-set-grid__span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .bz-set-grid { grid-template-columns: 1fr; } }
/* Read-only display field (the handoff DField) */
.bz-dfield__label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.bz-dfield__value { font-size: 15px; color: var(--ink); font-family: var(--sans); }
.bz-dfield__value--mono { font-family: var(--mono); }
.bz-dfield__value--empty { color: var(--faint); }
.bz-dfield__value--pre { white-space: pre-line; line-height: 1.5; }
/* ── Inset sub-panel (branding / billing / integration grounds) ─ */
.bz-set-tile { background: var(--c-ink-a025); border-radius: 12px; padding: 18px; }
.bz-set-tile__label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.bz-set-tilegrid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; }
@media (max-width: 640px) { .bz-set-tilegrid { grid-template-columns: 1fr; } }
.bz-set-tilegrid--stack { grid-template-columns: 1fr; }
/* ── Logo / avatar upload row (base64-upload preserved) ───── */
.bz-set-upload { display: flex; align-items: center; gap: 16px; }
.bz-set-upload__preview { width: 64px; height: 64px; border-radius: 10px; background: var(--panel);
  box-shadow: 0 1px 4px var(--c-ink-a08); display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-family: var(--mono); font-size: 18px; flex: 0 0 auto; -o-object-fit: contain; object-fit: contain; overflow: hidden; }
.bz-set-upload__preview--round { border-radius: 50%; }
.bz-set-upload__hint { font-size: 12px; color: var(--faint); margin: 0 0 10px; max-width: 260px; line-height: 1.5; }
/* Native file input → ink "Choose file" affordance */
.bz-set-file { display: block; width: 100%; font-family: var(--sans); font-size: 13px; color: var(--mute); cursor: pointer; }
.bz-set-file::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 0;
  font-family: var(--sans); font-size: 13px; font-weight: 600; background: var(--ink); color: var(--c-paper-cream); cursor: pointer; }
.bz-set-file::file-selector-button:hover { background: var(--c-ink-hover); }
/* ── Integration tile ─────────────────────────────────────── */
.bz-integration { display: flex; flex-direction: column; padding: 18px; background: var(--c-ink-a025);
  border-radius: 12px; height: 100%; }
.bz-integration__head { display: flex; align-items: flex-start; gap: 12px; }
.bz-integration__logo { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); color: var(--ink);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: 0 1px 3px var(--c-ink-a08); }
.bz-integration__meta { flex: 1; min-width: 0; }
.bz-integration__name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bz-integration__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.bz-integration__desc { font-size: 13px; color: var(--mute); line-height: 1.5; margin: 3px 0 0; }
.bz-integration__head-actions { flex: 0 0 auto; margin-left: 12px; }
/* Full-bleed "connected as · last synced" banner */
.bz-integration__synced { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 16px -18px 0; padding: 10px 18px; background: var(--c-ink-a025);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 12.5px; color: var(--mute); }
.bz-integration__synced svg { color: var(--faint); flex: 0 0 auto; }
.bz-integration__synced-sep { color: var(--faint); }
/* Two-column body: what-gets-synced | sync-direction, divider between */
.bz-integration__sync-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin-top: 18px; }
.bz-integration__sync-grid--single { grid-template-columns: 1fr; }
.bz-integration__sync-col { padding: 4px 0; min-width: 0; }
.bz-integration__sync-grid:not(.bz-integration__sync-grid--single) > .bz-integration__sync-col:first-child { padding-right: 32px; }
.bz-integration__sync-grid:not(.bz-integration__sync-grid--single) > .bz-integration__sync-col + .bz-integration__sync-col {
  border-left: 1px solid var(--line-soft); padding-left: 32px; }
@media (max-width: 640px) {
  .bz-integration__sync-grid { grid-template-columns: 1fr; }
  .bz-integration__sync-grid > .bz-integration__sync-col:first-child { padding-right: 0; }
  .bz-integration__sync-grid > .bz-integration__sync-col + .bz-integration__sync-col {
    border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 18px; }
}
.bz-integration__col-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 18px; }
/* What-gets-synced checklist */
.bz-synclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.bz-synclist__item { display: flex; align-items: flex-start; gap: 12px; }
.bz-synclist__check { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-status-completed-bg); color: var(--c-status-completed-fg); }
/* Xero's checklist uses the brand-blue accent reserved for the integration, and
   lays its four items out in two columns rather than a single tall column. */
.bz-synclist--xero { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px 28px; gap: 18px 28px; }
.bz-synclist--xero .bz-synclist__check { background: var(--c-blue-bg); color: var(--c-blue); }
@media (max-width: 640px) { .bz-synclist--xero { grid-template-columns: 1fr; } }
.bz-synclist__title { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.bz-synclist__sub { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; line-height: 1.45; }
/* Sync-direction radios as selectable cards */
.bz-set-radio { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: var(--panel); margin-bottom: 10px;
  transition: border-color .15s, background .15s; }
.bz-set-radio:hover { border-color: var(--c-ink-a11); }
.bz-set-radio input[type="radio"] { margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.bz-set-radio:has(input[type="radio"]:checked) { border-color: var(--accent); background: var(--c-clay-a08); }
.bz-set-radio__title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bz-set-radio__sub { display: block; font-size: 12px; color: var(--mute); margin: 2px 0 0; line-height: 1.45; }
/* ── Billing / plan tile ──────────────────────────────────── */
.bz-plan { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--c-ink-a04); border-radius: 12px; }
.bz-plan__head { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 10px; padding: 14px 16px; }
.bz-plan__name { font-size: 15px; font-weight: 600; color: var(--ink); }
.bz-plan__pricewrap { text-align: right; white-space: nowrap; }
.bz-plan__price { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.bz-plan__cycle { font-size: 13px; color: var(--faint); font-family: var(--mono); }
.bz-plan__desc { font-size: 13px; color: var(--mute); line-height: 1.5; }
.bz-plan__meta { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; gap: 10px; }
.bz-plan__metacell { padding: 10px 12px; background: var(--panel); border-radius: 8px; }
.bz-plan__metacell .bz-dfield__value { font-family: var(--mono); font-size: 13.5px; }
.bz-plan__foot { margin-top: 2px; display: flex; justify-content: flex-end; gap: 8px; }
.bz-plan__price--hero { font-size: 28px; }
.bz-plan--empty { align-items: flex-start; gap: 12px; text-align: left; }
.bz-plan__empty-text { font-size: 13px; color: var(--mute); }
/* ── Plan-selection card (subscriptions#edit) + checkout feature list ── */
.bz-plan-card { display: flex; flex-direction: column; flex: 1 1 280px; max-width: 360px; }
.bz-plan-card__title { font-size: 16px; }
/* pairs with .bz-title */
.bz-plan-card__body { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.bz-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bz-feature-list__item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink); }
.bz-feature-list__check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--c-budget-ok); }
/* Modifiers that retire one-off inline overrides */
.bz-set-card__body--flush-top { padding-top: 0; }
.bz-set-card__desc--warn { color: var(--danger); }
.bz-settings__head .bz-eyebrow { margin-bottom: 6px; }
/* ── Team table ───────────────────────────────────────────── */
.bz-set-team { width: 100%; border-collapse: collapse; }
.bz-set-team thead tr { background: var(--c-ink-a025); }
.bz-set-team .bz-th { padding: 14px 14px 12px; }
.bz-set-team .bz-th:first-child { padding-left: 26px; }
.bz-set-team .bz-th:last-child { padding-right: 26px; text-align: right; }
.bz-set-team .bz-td { padding: 16px 14px; border-top: 1px solid var(--hairline); }
.bz-set-team .bz-td:first-child { padding-left: 26px; }
.bz-set-team .bz-td:last-child { padding-right: 26px; text-align: right; }
.bz-set-team__user { display: flex; align-items: center; gap: 12px; }
.bz-set-team__name { font-weight: 600; color: var(--ink); }
.bz-set-team__email { font-size: 12.5px; color: var(--faint); font-family: var(--mono); }
.bz-set-team__pending td { background: var(--c-warn-bg); }
.bz-roletags { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-roletag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--c-ink-a06); color: var(--mute); }
.bz-roletag--owner { background: var(--ink); color: var(--c-paper-cream); }
.bz-roletag--pending { background: var(--c-warn-bg); color: var(--c-warn-fg); }
.bz-set-team__rowactions { display: inline-flex; align-items: center; gap: 14px; justify-content: flex-end; }
/* ── Danger row ───────────────────────────────────────────── */
.bz-set-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; }
.bz-set-danger__title { font-size: 17px; }
/* pairs with .bz-title */
.bz-set-danger__desc { font-size: 13px; color: var(--mute); margin: 5px 0 0; }
/* ── Profile & Security two-column grid + photo rail ──────── */
.bz-profile-grid { display: grid; grid-template-columns: 1fr 320px; grid-gap: 14px; gap: 14px; align-items: start; }
.bz-profile-grid__main { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 880px) { .bz-profile-grid { grid-template-columns: 1fr; } }
.bz-set-photo { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 22px 24px; }
.bz-set-photo__hint { font-size: 12.5px; color: var(--mute); margin: 0; line-height: 1.5; }
.bz-set-photo__avatar { width: 84px; height: 84px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; }
/* Security read state */
.bz-set-security { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 14px; }
.bz-set-security__icon { color: var(--c-budget-ok); display: flex; flex: 0 0 auto; }
.bz-set-help { font-size: 12px; color: var(--faint); margin: 4px 0 0; }
/* ── Preferences (users/settings#show) card spacing ───────── */
.bz-set-section { display: flex; flex-direction: column; gap: 14px; }
/* ── Vue settings apps (Internationalization / DefaultTerms / ESignature)
   These mount inside a .bz bz-d2 card body; helpers let the Vue <template>s
   consume tokens without raw hex / dark: variants. Inputs/labels reuse
   .bz-field / .bz-label. ── */
.bz-vue-stack { display: flex; flex-direction: column; gap: 20px; }
.bz-vue-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px; gap: 18px; }
@media (max-width: 640px) { .bz-vue-row { grid-template-columns: 1fr; } }
.bz-vue-i18ngrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px; gap: 18px; }
@media (max-width: 720px) { .bz-vue-i18ngrid { grid-template-columns: 1fr; } }
.bz-vue-h { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-size: 15px; margin: 0 0 4px; }
.bz-vue-desc { font-size: 13px; color: var(--mute); margin: 0 0 4px; line-height: 1.5; }
.bz-vue-suffix { position: relative; display: block; }
.bz-vue-suffix__unit { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center;
  padding-right: 13px; pointer-events: none; color: var(--faint); font-family: var(--mono); font-size: 13px; }
.bz-vue-suffix .bz-field { padding-right: 36px; }
.bz-vue-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--c-ink-a04);
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--mute); }
.bz-vue-status__ok { color: var(--c-budget-ok); display: flex; flex: 0 0 auto; }
.bz-vue-status__spin { color: var(--mute); display: flex; flex: 0 0 auto; }
/* Inline help tooltip (DefaultTerms) — ink, replaces the raw-hex inline box */
.bz-vue-tipwrap { position: relative; display: inline-flex; margin-left: 4px; }
.bz-vue-tipicon { width: 16px; height: 16px; color: var(--faint); cursor: help; transition: color .12s; }
.bz-vue-tipicon:hover { color: var(--mute); }
.bz-vue-tip { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px;
  min-width: 300px; padding: 10px 12px; z-index: 50; font-size: 12px; line-height: 1.5;
  background: var(--ink); color: var(--c-paper-cream); border-radius: 7px; box-shadow: 0 8px 20px var(--c-ink-a45); }
.bz-vue-labelrow { display: flex; align-items: center; margin-bottom: 8px; }
/* ================================================================
   BLUME Design System — AUTH (Devise screens)
   Sign in / sign up / password reset / confirmation / unlock / OTP.
   Editorial, left-aligned single column on the warm paper ground —
   no card chrome. Filled, borderless fields; ghost OAuth buttons; a
   black ink primary action. Consumes tokens + primitives only; no
   raw hex. The .bz-oauth ghost button is shared with the
   connected-accounts settings screen. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Page ground (sits below the 70px app header) ─────────────── */
.bz-auth {
  min-height: calc(100vh - 70px);
  background: var(--paper);
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* <main> carries 12px side padding + a white background below 1024px;
     break out of it so the paper ground is full-bleed on mobile. */
  margin-left: -12px;
  margin-right: -12px;
}
@media (min-width: 1024px) {
  .bz-auth {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Top utility link (e.g. "New here? See pricing →") — pinned to the very top
   of the page, in line with the logo. Fixed (not absolute) so it escapes the
   <main> stacking context and sits clickable above the transparent header. */
.bz-auth__top { position: fixed; top: 28px; right: 24px; z-index: 101; }
@media (min-width: 1024px) { .bz-auth__top { right: 32px; } }
.bz-auth__toplink {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}
.bz-auth__toplink strong { color: var(--ink); font-weight: 600; }
.bz-auth__toplink:hover strong { color: var(--accent); }
/* ── Centred single column (content left-aligned within) ──────── */
.bz-auth__card { width: 100%; max-width: 460px; margin: 0 auto; padding-top: 0; }
/* ── Heading block ────────────────────────────────────────────── */
.bz-auth__head { margin-bottom: 22px; }
.bz-auth__eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 9px;
}
.bz-auth__title {
  font-family: var(--sans); font-weight: 700; letter-spacing: -0.03em;
  font-size: 54px; line-height: 0.98; color: var(--ink); margin: 0;
  /* reset the global `h1` padding (typography.css) so the title hugs its box */
  padding: 0;
}
.bz-auth__title em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.bz-auth__title--sm { font-size: 31px; line-height: 1.1; }
.bz-auth__sub { margin: 9px 0 0; font-size: 16px; line-height: 1.45; color: var(--mute); }
/* ── OAuth provider buttons (also used on settings) ───────────── */
.bz-auth__oauth { display: flex; flex-direction: column; gap: 10px; }
.bz-oauth { justify-content: center; gap: 11px; }
.bz-oauth__logo { width: 18px; height: 18px; flex: 0 0 auto; }
.bz-auth .bz-oauth { width: 100%; padding-top: 15px; padding-bottom: 15px; font-size: 15px; }
/* ── "or" divider (hairline · label · hairline) ───────────────── */
.bz-auth__or {
  display: flex; align-items: center; gap: 16px; margin: 22px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--faint);
}
.bz-auth__or::before, .bz-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
/* ── Fields (filled, borderless, rounded — auth only) ─────────── */
.bz-auth__group { margin-bottom: 13px; }
.bz-auth__labelrow { display: flex; align-items: baseline; justify-content: space-between; }
.bz-auth .bz-field, .bz-auth input.bz-field {
  background: var(--c-ink-a04); border-color: transparent; border-radius: 11px;
  box-shadow: none; padding: 9px 15px; font-size: 15px;
}
.bz-auth .bz-field:focus, .bz-auth input.bz-field:focus {
  background: var(--c-ink-a05); border-color: var(--hairline); box-shadow: none;
}
.bz-auth .bz-field::-moz-placeholder { color: var(--faint); }
.bz-auth .bz-field::placeholder { color: var(--faint); }
.bz-auth__hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
/* Field with an inline trailing action (the password Show/Hide toggle) */
.bz-auth__field { position: relative; }
.bz-auth__field .bz-field { padding-right: 64px; }
.bz-auth__reveal { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); }
/* Micro action links — uppercase mono (Forgot? / Show) */
.bz-auth__action {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); background: none; border: 0; padding: 0; cursor: pointer;
}
.bz-auth__action:hover { color: var(--ink); }
.bz-auth__action--strong { color: var(--ink); font-weight: 600; }
.bz-auth__action--strong:hover { color: var(--accent); }
/* ── Consent / checkbox rows ──────────────────────────────────── */
.bz-auth__check { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 20px; }
.bz-auth__check input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto;
  accent-color: var(--ink); border-radius: 4px;
}
.bz-auth__check label { font-size: 15px; line-height: 1.5; color: var(--mute); margin: 0; }
/* ── Submit (full-width ink primary) ──────────────────────────── */
.bz-auth__submit { width: 100%; justify-content: center; padding: 17px 18px; font-size: 15px; }
/* ── Footer (centred) ─────────────────────────────────────────── */
.bz-auth__foot { margin-top: 24px; text-align: center; font-size: 15px; color: var(--mute); }
.bz-auth__link { color: var(--ink); font-weight: 600; -webkit-text-decoration: none; text-decoration: none; }
.bz-auth__link:hover { color: var(--accent); }
.bz-auth__foot--ruled { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.bz-auth__foot .bz-auth__link + .bz-auth__link { margin-left: 14px; }
/* Inline links inside copy (ToS consent, etc.) */
.bz-auth__inline { color: var(--ink); font-weight: 600; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; }
.bz-auth__inline:hover { color: var(--accent); }
/* ── Invitation banner (sign-up via account invite) ───────────── */
.bz-auth__invite {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 22px; padding: 12px 14px; border-radius: 10px;
  background: var(--c-status-inquiry-bg); border: 1px solid var(--c-status-inquiry-dot);
  font-size: 13.5px; color: var(--c-status-inquiry-fg);
}
/* ── Notice / alert chips (confirmation-instructions screen) ──── */
.bz-auth__notice {
  padding: 12px 14px; margin-bottom: 16px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
}
.bz-auth__notice--ok  { background: var(--c-status-quote-confirmed-bg); color: var(--c-status-quote-confirmed-fg); border-color: var(--c-status-quote-confirmed-dot); }
.bz-auth__notice--err { background: var(--c-danger-a08); color: var(--danger); border-color: var(--danger); }
/* ── Confirmation success card (post sign-up) ─────────────────── */
.bz-auth__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  background: var(--c-clay-a08); color: var(--accent); margin-bottom: 16px;
}
.bz-auth__help {
  padding: 14px 16px; margin: 22px 0; border-radius: 12px;
  background: var(--c-ink-a04); border: 1px solid var(--hairline);
}
.bz-auth__help-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.bz-auth__help ul { margin: 0; padding-left: 18px; list-style: disc; }
.bz-auth__help li { font-size: 13px; line-height: 1.7; color: var(--mute); }
/* ================================================================
   BLUME Design System — ONBOARDING (first-run studio setup wizard)
   Direction B "Workspace wizard": checklist sidebar + centered card +
   footer nav, with the step context hung off the app's logo header.
   Surfaces are square-cornered. Welcome is a centered card; finishing
   setup hands straight off to checkout (no done screen).
   Consumes tokens + primitives only; no raw hex. Source handoff:
   design_handoff_onboarding_flow/. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Page ground (sits below the app header, like .bz-auth) ───── */
.bz-onb {
  min-height: calc(100vh - 70px);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  margin-left: -12px;
  margin-right: -12px; /* break out of <main>'s mobile side padding */
}
@media (min-width: 1024px) {
  .bz-onb { margin-left: 0; margin-right: 0; }
}
/* ── Header context (hangs off the app's logo header — no second bar) ────── */
.bz-onb__header-divider { width: 1px; height: 18px; background: var(--line); flex: 0 0 auto; }
.bz-onb__header-count { font-size: 12px; color: var(--faint); }
.bz-onb__header-skip-form { display: contents; }
.bz-onb__header-skip {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 500; color: var(--mute);
}
.bz-onb__header-skip svg { flex: 0 0 auto; }
.bz-onb__header-skip:hover { color: var(--ink); }
@media (max-width: 767px) {
  .bz-onb__header-label, .bz-onb__header-divider { display: none; }
}
/* ── Step body: checklist sidebar + centered card ─────────────── */
.bz-onb__body {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 34px;
  /* No top padding — the wizard sits directly under the sticky app header
     rather than floating below it. Bottom padding stays for scroll comfort. */
  padding: 0 32px 40px;
}
.bz-onb__aside { flex: 0 0 232px; padding-top: 8px; }
.bz-onb__aside-eyebrow { margin-bottom: 18px; }
/* The checklist follows you down a long step (integrations, terms).
   align-self is required: a stretched flex item can't stick. The offset
   clears the 70px sticky app header. */
@media (min-width: 1024px) {
  .bz-onb__aside {
    position: sticky;
    top: calc(70px + 24px);
    align-self: flex-start;
  }
}
.bz-onb__main { flex: 0 1 620px; min-width: 0; }
/* Square corners — the wizard's surfaces follow the square-button rule. */
.bz-onb__card {
  background: var(--panel);
  border-radius: 0;
  box-shadow: var(--elevation);
  border: 1px solid var(--hairline);
  padding: 24px 30px 22px;
}
/* Denser field metrics inside the wizard card only, so a whole step fits the
   viewport without scrolling. Scoped deliberately — .bz-field and .bz-label are
   app-wide primitives and every other BLUME form keeps its roomier sizing.
   The element-qualified selectors are required, not stylistic: primitives.css
   re-asserts `.bz input.bz-field { padding: 11px 13px }` at (0,2,1), which
   outranks a plain two-class rule here. Including `select` is what makes the
   role dropdown the same height as the text inputs beside it — primitives
   deliberately leaves select out of its padding rule. */
.bz-onb__card .bz-label { margin-bottom: 5px; }
.bz .bz-onb__card input.bz-field,
.bz .bz-onb__card select.bz-field,
.bz .bz-onb__card textarea.bz-field {
  padding: 8px 11px; font-size: 14px; line-height: 1.4;
}
/* Sidebar collapses to a horizontal strip on narrow viewports */
@media (max-width: 1023px) {
  .bz-onb__body { flex-direction: column; align-items: stretch; gap: 20px; padding: 0 16px 24px; }
  .bz-onb__aside { flex: none; padding-top: 0; }
  .bz-onb__aside-eyebrow { display: none; }
  .bz-onb__checklist { flex-direction: row; flex-wrap: wrap; gap: 2px 14px; }
  .bz-onb__check-label { font-size: 12.5px; }
  .bz-onb__card { padding: 26px 22px 22px; }
}
/* ── Checklist ────────────────────────────────────────────────── */
.bz-onb__checklist { display: flex; flex-direction: column; gap: 3px; }
/* Steps are links — the florist can jump back to revise anything. */
.bz-onb__check { display: flex; align-items: center; gap: 12px; padding: 8px 0; -webkit-text-decoration: none; text-decoration: none; color: inherit; }
.bz-onb__check:hover .bz-onb__check-label { color: var(--ink); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 3px; }
.bz-onb__check:hover .bz-onb__dot { border-color: var(--ink); }
.bz-onb__dot {
  /* Square, like every other surface in the wizard (see the file header). */
  width: 24px; height: 24px; border-radius: 0; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
  color: var(--faint);
}
.bz-onb__check[data-state="todo"] .bz-onb__dot { border-color: var(--line); }
.bz-onb__check[data-state="done"] .bz-onb__dot { background: var(--c-ink-a11); color: var(--ink); }
.bz-onb__check[data-state="active"] .bz-onb__dot { background: var(--accent); color: var(--c-white); }
.bz-onb__check-label { font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.bz-onb__check[data-state="todo"] .bz-onb__check-label { color: var(--faint); }
.bz-onb__check[data-state="active"] .bz-onb__check-label { font-weight: 600; }
/* ── Step heading ─────────────────────────────────────────────── */
.bz-onb__heading { margin-bottom: 16px; }
.bz-onb__heading .bz-eyebrow { margin-bottom: 7px; }
/* padding:0 resets the global `h1` rule (components/typography.css), which
   indents the title 12px while the eyebrow and sub-line beside it sit flush. */
.bz-onb__title { font-size: 22px; line-height: 1.15; margin: 0 0 5px; padding: 0; }
.bz-onb__sub { margin: 0; font-size: 13.5px; color: var(--mute); max-width: 520px; line-height: 1.45; }
/* ── Field layout ─────────────────────────────────────────────── */
.bz-onb__grid2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px 18px; gap: 12px 18px; }
.bz-onb__span2 { grid-column: span 2; }
@media (max-width: 640px) {
  .bz-onb__grid2 { grid-template-columns: 1fr; }
  .bz-onb__span2 { grid-column: auto; }
}
.bz-onb__hint { display: block; font-size: 11.5px; color: var(--faint); margin-top: 4px; line-height: 1.35; }
/* Row rhythm for the stacked steps (terms is the tallest). Kept in step with
   .bz-onb__grid2's 12px row gap so the two-column and full-width rows read as
   one list rather than two rhythms. */
.bz-onb__stack { display: flex; flex-direction: column; gap: 12px; }
/* Prefix/suffix numeric field ($ … / hr, … %) */
.bz-onb__affix {
  display: flex; align-items: center; gap: 0;
  background: var(--field); border: 1px solid var(--hairline); border-radius: 7px;
  box-shadow: var(--elevation); padding: 0 13px;
}
.bz-onb__affix:focus-within { border-color: var(--ink); }
.bz-onb__affix-unit { font-family: var(--mono); font-size: 13px; color: var(--faint); flex: 0 0 auto; }
.bz .bz-onb__affix input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  box-shadow: none; padding: 11px 8px; font-size: 15px; color: var(--ink);
  font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums;
}
.bz .bz-onb__affix input:focus { border: none; box-shadow: none; background: transparent; }
/* Segmented control (Inclusive / Exclusive) */
.bz-onb__seg { display: flex; gap: 8px; }
.bz-onb__seg-btn {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 0;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--mute); border: 1px solid var(--line);
}
.bz-onb__seg-btn[aria-pressed="true"] {
  background: var(--c-clay-a08); color: var(--accent);
  border: 1.5px solid var(--accent); font-weight: 600;
}
/* Muted callout strip (live example, team note, e-sign note) */
.bz-onb__callout {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; background: var(--c-ink-a04); border-radius: 10px;
  font-size: 13px; color: var(--mute); line-height: 1.45;
}
.bz-onb__callout-icon { color: var(--accent); display: flex; flex: 0 0 auto; }
.bz-onb__callout-icon--mute { color: var(--mute); }
.bz-onb__callout .bz-mono { color: var(--ink); }
/* ── Logo upload tiles ────────────────────────────────────────── */
.bz-onb__logos { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px 18px; gap: 12px 18px; }
@media (max-width: 640px) { .bz-onb__logos { grid-template-columns: 1fr; } }
.bz-onb__logo-tile { display: flex; align-items: center; gap: 12px; }
.bz-onb__logo-preview {
  width: 48px; height: 48px; border-radius: 0; flex: 0 0 auto; -o-object-fit: contain; object-fit: contain;
  background: var(--c-ink-a04); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint);
}
/* min-width:0 is what stops the file control forcing the tile wider than its
   grid column — without it the row overflowed the card's right edge. */
.bz-onb__logo-text { flex: 1; min-width: 0; }
/* A native file input renders browser chrome ("Choose file | No file chosen")
   that can't be restyled or shortened, and it was what overflowed. The input is
   visually hidden inside a label that acts as the button instead: the Stimulus
   controller only reads event.target.files on change, so it stays functional,
   and the chosen image still shows in the preview tile beside it. */
.bz-onb__logo-btn {
  position: relative; display: inline-flex; align-items: center; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--c-ink-a05); border: 1px solid var(--line); border-radius: 0;
  padding: 6px 12px; transition: background .18s, border-color .18s;
}
.bz-onb__logo-btn:hover { background: var(--c-ink-a08); border-color: var(--ink); }
/* Clipped rather than display:none, so the input keeps keyboard focus. */
.bz-onb__logo-btn:focus-within { border-color: var(--ink); }
.bz-onb__logo-file {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ── Connect cards (Xero + Google Calendar share one step) ────── */
.bz-onb__connect-stack { display: flex; flex-direction: column; gap: 24px; }
.bz-onb__connect { max-width: 560px; }
.bz-onb__connect-card {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 0;
  padding: 26px 26px 24px; box-shadow: var(--elevation);
}
.bz-onb__connect-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.bz-onb__connect-mark {
  display: flex; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: 12px; flex: 0 0 auto; background: var(--c-ink-a04);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--faint); text-align: center;
}
.bz-onb__connect-title { font-size: 17px; font-weight: 600; }
.bz-onb__connect-sub { font-size: 13px; color: var(--mute); }
.bz-onb__connect-bullets { display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.bz-onb__connect-bullet { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
.bz-onb__connect-bullet-check { color: var(--accent); display: flex; flex: 0 0 auto; margin-top: 1px; }
.bz-onb__connect-cta { width: 100%; justify-content: center; }
/* Partner-coloured connect buttons, so each CTA reads as the tool it opens.
   Tinted-button vocabulary from palette.css: the soft `-bg` wash as the fill,
   the base token at full strength for the label, `-bg-hi` on hover — the same
   pairing .bz-onb__connected uses below. --c-blue already carries the
   "integrations / Xero actions" note; clay is the BLUME accent. Colour is
   re-asserted on hover/focus/active for the same reason .bz-btn-primary does
   it — the legacy global orange link states would otherwise win on an
   anchor-rendered button. */
.bz-onb__connect-cta--xero { background: var(--c-blue-bg); }
.bz-onb__connect-cta--xero:hover { background: var(--c-blue-bg-hi); }
.bz-onb__connect-cta--xero,
.bz-onb__connect-cta--xero:hover,
.bz-onb__connect-cta--xero:focus,
.bz-onb__connect-cta--xero:active { color: var(--c-blue); }
.bz-onb__connect-cta--gcal { background: var(--c-clay-bg); }
.bz-onb__connect-cta--gcal:hover { background: var(--c-clay-bg-hi); }
.bz-onb__connect-cta--gcal,
.bz-onb__connect-cta--gcal:hover,
.bz-onb__connect-cta--gcal:focus,
.bz-onb__connect-cta--gcal:active { color: var(--c-clay); }
.bz-onb__connect-foot { font-size: 11px; color: var(--faint); margin-top: 14px; text-align: center; }
.bz-onb__connected {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  background: var(--c-green-bg); color: var(--c-green);
}
/* ── Invite rows (team step) ──────────────────────────────────── */
.bz-onb__invites { display: flex; flex-direction: column; gap: 10px; }
.bz-onb__invite-row { display: flex; gap: 10px; align-items: center; }
.bz-onb__invite-row .bz-onb__invite-name { flex: 0 0 31%; }
.bz-onb__invite-row .bz-onb__invite-email { flex: 1; }
.bz-onb__invite-role { flex: 0 0 128px; }
.bz-onb__invite-remove {
  display: flex; flex: 0 0 auto; border: none; background: transparent;
  color: var(--faint); cursor: pointer; padding: 8px; border-radius: 8px; font-size: 17px; line-height: 1;
}
.bz-onb__invite-remove:hover { color: var(--danger); }
/* Role reference tooltip. Deliberately CSS-only — hover plus :focus-within, no
   Stimulus controller — since it shows static copy and never changes state. */
.bz-onb__roleinfo {
  position: relative; flex: 0 0 auto; cursor: help;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; color: var(--faint);
}
.bz-onb__roleinfo:hover, .bz-onb__roleinfo:focus-within { border-color: var(--ink); color: var(--ink); }
.bz-onb__roletip {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 20;
  width: 268px; padding: 10px 12px; text-align: left;
  background: var(--ink); color: var(--c-paper-cream);
  font-family: var(--sans); font-size: 12px; line-height: 1.45; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.bz-onb__roletip strong { font-weight: 600; }
.bz-onb__roleinfo:hover .bz-onb__roletip,
.bz-onb__roleinfo:focus-within .bz-onb__roletip { opacity: 1; visibility: visible; }
.bz-onb__invite-add { display: flex; justify-content: flex-end; margin-top: 12px; }
.bz-onb__invite-pending { font-size: 13px; color: var(--mute); margin-bottom: 14px; }
/* ── Footer nav ───────────────────────────────────────────────── */
/* Sits ABOVE the card on the page ground, so the actions stay in view on
   long steps without being boxed in with the step's content. */
.bz-onb__nav {
  margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* The nav sits under the checklist in the 232px rail, so it needs a tighter
   gap than the old full-width row above the card — and wrap as the safety
   valve, since a skippable step adds a third control. */
.bz-onb__aside .bz-onb__nav {
  margin-top: 28px; margin-bottom: 0; flex-wrap: wrap; gap: 10px;
}
.bz-onb__nav-right { display: flex; align-items: center; gap: 14px; }
.bz-onb__skip { border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--mute); -webkit-text-decoration: none; text-decoration: none; }
.bz-onb__skip:hover { color: var(--ink); }
.bz-onb__skip-form { display: contents; }
/* ── Welcome screen ───────────────────────────────────────────── */
.bz-onb__center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.bz-onb__welcome-card {
  width: 100%; max-width: 560px;
  background: var(--panel); border-radius: 0; border: 1px solid var(--hairline);
  box-shadow: var(--elevation); padding: 40px 44px;
}
@media (max-width: 640px) { .bz-onb__welcome-card { padding: 28px 22px; } }
.bz-onb__serif-title {
  font-family: var(--serif); font-size: 30px;
  letter-spacing: -0.01em; color: var(--ink); line-height: 1.1;
  /* reset the global `h1` padding (components/typography.css) so the title
     lines up with the eyebrow above it */
  padding: 0;
}
.bz-onb__welcome-sub { margin: 8px 0 0; font-size: 14.5px; color: var(--mute); max-width: 420px; line-height: 1.5; }
.bz-onb__cover { display: flex; flex-direction: column; margin: 26px 0 30px; }
.bz-onb__cover-row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.bz-onb__cover-row:first-child { border-top: none; }
.bz-onb__cover-num { font-family: var(--mono); font-size: 11px; color: var(--faint); width: 18px; flex: 0 0 auto; }
.bz-onb__cover-label { font-size: 14.5px; color: var(--ink); }
/* Validation errors on a step card */
.bz-onb__errors {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 10px;
  background: var(--c-danger-a08); color: var(--danger); font-size: 13.5px; line-height: 1.5;
}
/* ── Small layout helpers ─────────────────────────────────────── */
.bz-onb__welcome-eyebrow { margin-bottom: 14px; }
/* Same right-aligned action row as .bz-onb__invite-add. */
.bz-onb__welcome-actions { display: flex; justify-content: flex-end; }
/* Wider than the standard .bz-btn (11px 18px) — scoped here so the welcome
   call-to-action reads as the page's one action without touching every button. */
.bz-onb__welcome-actions .bz-btn { padding-left: 34px; padding-right: 34px; }
.bz-onb__callout--spaced { margin-top: 14px; }
.bz-onb__logos-block { margin-top: 14px; }
.bz-onb__esign { border-top: 1px solid var(--line); padding-top: 14px; }
.bz-onb__esign .bz-eyebrow { margin-bottom: 8px; }
.bz-onb__esign-expiry { max-width: 280px; }
/* ================================================================
   BLUME Design System — MARKETING / STATIC
   Public pages on the application layout: legal documents
   (terms / privacy / refund / acceptable-use) and the pricing grid.
   Editorial prose on the warm paper ground. Tokens + primitives
   only; no raw hex. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Page ground ──────────────────────────────────────────────── */
.bz-static {
  min-height: calc(100vh - 70px);
  background: var(--paper);
  padding: 56px 16px 80px;
  /* <main> carries 12px side padding + a white background below 1024px;
     break out of it so the paper ground is full-bleed on mobile. */
  margin-left: -12px;
  margin-right: -12px;
}
@media (min-width: 1024px) {
  .bz-static {
    margin-left: 0;
    margin-right: 0;
  }
}
/* Pull content up directly under the (bare) header — e.g. pricing. */
.bz-static--flush {
  padding-top: 24px;
}
/* ── Legal documents ──────────────────────────────────────────── */
.bz-legal {
  max-width: 760px;
  margin: 0 auto;
}
.bz-legal__title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 42px;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 18px;
}
.bz-legal__meta {
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 28px;
}
/* Prose — descendant selectors so existing markup needs no per-element
   classes (they out-specify leftover Tailwind text-* utilities). */
.bz-prose {
  font-family: var(--sans);
  color: var(--mute);
  font-size: 15.5px;
  line-height: 1.7;
}
.bz-prose section {
  margin-bottom: 36px;
}
.bz-prose h2 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 14px;
}
.bz-prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 22px 0 10px;
}
.bz-prose p {
  margin: 0 0 16px;
  color: var(--mute);
}
.bz-prose strong {
  color: var(--ink);
  font-weight: 600;
}
.bz-prose ul,
.bz-prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--mute);
}
.bz-prose li {
  margin-bottom: 8px;
  line-height: 1.65;
}
.bz-prose a {
  color: var(--accent);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bz-prose a:hover {
  color: var(--c-clay-hover);
}
/* ── Pricing (flat editorial layout) ──────────────────────────── */
/* The pricing page runs the BLUME logo red as its accent instead of the
   app-wide clay. The "itself" flourish and the feature checks consume
   var(--accent); remapping it on the page root (bz-static--flush is unique to
   this page) recolours those without touching any component rule. */
.bz-static--flush {
  --accent:     var(--c-brand-red);
  --c-clay-a08: var(--c-brand-red-a08);
}
.bz-pricing {
  max-width: 1080px;
  margin: 0 auto;
}
/* Top utility link ("Already have an account? Sign in →") — pinned top-right,
   in line with the logo, mirroring the auth screens. */
.bz-pricing__top {
  position: fixed;
  top: 28px;
  right: 24px;
  z-index: 101;
}
@media (min-width: 1024px) {
  .bz-pricing__top {
    right: 32px;
  }
}
.bz-pricing__toplink {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.bz-pricing__toplink strong {
  color: var(--ink);
  font-weight: 600;
}
.bz-pricing__toplink:hover strong {
  color: var(--accent);
}
/* Page header — eyebrow · serif display headline · lede, centred */
.bz-pricing__header {
  /* Full container width so the one-line headline doesn't wrap; the lede keeps
     its own narrower max-width below. */
  max-width: 1080px;
  margin: 0 auto 48px;
  text-align: center;
}
.bz-pricing__eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  /* Sits flush above the headline — no gap. */
  margin: 0;
}
.bz-pricing__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 62px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.bz-pricing__title em {
  font-style: italic;
  color: var(--accent);
}
.bz-pricing__lede {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 560px;
  margin: 18px auto 0;
}
@media (max-width: 640px) {
  .bz-pricing__title {
    font-size: 42px;
  }
  .bz-pricing__lede {
    font-size: 17px;
  }
  .bz-price-card__amt {
    font-size: 64px;
  }
}
.bz-pricing__grid {
  display: grid;
  grid-gap: 56px;
  gap: 56px;
}
/* Plan — flat two-column block on the paper ground (no card chrome). The two
   columns stretch to equal height so the CTA (margin-top:auto) bottom-aligns
   with the end of the feature list. */
.bz-price-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-gap: 72px;
  gap: 72px;
}
.bz-price-card__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Right pane — the feature list. min-width:0 lets long feature text wrap
   inside its grid track (grid children default to min-width:auto); the class
   also documents the second, auto-placed grid child. */
.bz-price-card__aside {
  min-width: 0;
}
/* Single-column variant (empty state) — a simple centred stack. */
.bz-price-card--stack {
  display: block;
}
@media (max-width: 768px) {
  .bz-price-card {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* Plan identity — small caps label with a hairline trailing to the edge. */
.bz-price-card__name {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0;
}
.bz-price-card__name::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}
.bz-price-card__desc {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 30px 0 0;
}
/* Price — small serif currency · large serif figure · sans cycle. */
.bz-price-card__price {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 36px 0 0;
}
.bz-price-card__cur {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 10px;
}
.bz-price-card__amt {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.bz-price-card__per {
  align-self: flex-end;
  font-family: var(--sans);
  font-size: 17px;
  color: var(--mute);
  margin: 0 0 12px 4px;
}
/* Billing caption — sinks to the bottom of the pane, just above the CTA. */
.bz-price-card__meta {
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  /* --mute (not --faint): this line carries the cancellation terms, so it must
     clear WCAG contrast on the paper ground (--faint ≈ 2.25:1 fails). */
  color: var(--mute);
}
.bz-price-card__cta {
  width: 100%;
  justify-content: center;
  margin-top: 16px;
  padding: 18px;
  font-size: 15px;
}
/* Feature list — single column, red check, hairline between rows. */
/* Mirrors the plan-name label: Hanken Grotesk bold, 0.125em, with a hairline
   trailing to the edge. */
.bz-price-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 6px;
}
.bz-price-card__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}
.bz-price-card__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 40px;
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.bz-price-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.bz-price-card__check {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  color: var(--accent);
}
.bz-price-card__empty {
  font-size: 15px;
  color: var(--faint);
  font-style: italic;
  margin: 0;
}
/* Collapse the feature list to one column on narrow screens. Placed after the
   base two-column rule so this override wins the cascade (equal specificity). */
@media (max-width: 768px) {
  .bz-price-card__features {
    grid-template-columns: 1fr;
  }
}
/* ================================================================
   BLUME Design System — QUOTE BUILDER (Vue event editor)
   Shared primitives for the quote builder, arrangement editor and
   Review screen (Phase 4). Source: design_handoff_blume_flow/
   blume-d1.jsx + blume-flow-review.jsx. Colours are tokens only;
   --accent is reserved for the live grand total + active markers.
   Everything renders inside the .bz bz-d2 editor root.
   ================================================================ */
/* ── Collapsible / section panel ───────────────────────────────
   The barely-lifted surface that wraps each editor section
   (Arrangements, Hire items, Quote summary). A hairline divides the
   header from the body; the chevron rotates on open. CollapsiblePanel
   drives the open/close state — this layer only styles surface + type. */
.bz-panel { background: var(--panel); border: 1px solid var(--hairline); border-radius: 11px;
  box-shadow: var(--elevation); overflow: hidden; margin-bottom: 16px; }
.bz-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 18px; background: transparent; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink); transition: background .12s ease; }
.bz-panel__head:hover { background: var(--c-ink-a025); }
.bz-panel__titlewrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.bz-panel__title { font-family: var(--sans); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.bz-panel__sub { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.bz-panel__chev { flex: 0 0 auto; color: var(--faint); transition: transform .2s ease; }
.bz-panel__chev--open { transform: rotate(180deg); }
/* ── Bare section header (no card) ─────────────────────────────
   Top-level editor sections (Arrangements, Event hire items) that
   read as headings directly on the paper background rather than
   inside a panel card. The title + faint mono count form a clickable
   toggle (left caret rotates open) so the section stays collapsible;
   an optional action (e.g. Add hire item) sits on the right. */
.bz-section { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bz-section__toggle { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0;
  background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; text-align: left; color: var(--ink); }
.bz-section__caret { flex: 0 0 auto; align-self: center; color: var(--faint); transition: transform .2s ease; }
.bz-section__caret--open { transform: rotate(90deg); }
.bz-section__title { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.bz-section__sub { font-family: var(--mono); font-size: 12px; color: var(--faint); }
/* Body sits below a hairline divider on a soft paper well, so the white
   arrangement cards / hire-items table inside read clearly as nested content
   while the panel itself reads as the enclosing section card. */
.bz-panel__body { border-top: 1px solid var(--hairline); padding: 18px; background: var(--paper); }
/* ── Inline table field (grey, borderless, compact) ────────────
   For inputs that live inside a data table row (e.g. the arrangement
   flower table): a soft warm-grey fill instead of the white card field,
   no border/shadow, tighter padding. Scoped under .bz so it wins over
   @tailwindcss/forms' later base rules without !important. */
/* A soft warm-grey filled field (always on), slightly darker on hover/focus.
   No width here — callers set the column width with a utility (w-14/w-20/…);
   a width here would out-specify those utilities. Scoped under .bz so it wins
   over @tailwindcss/forms' later base rules without !important. */
.bz input.bz-field-inline, .bz select.bz-field-inline, .bz textarea.bz-field-inline {
  max-width: 100%;
  background: var(--c-ink-a05);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 7px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  box-shadow: none;
  outline: none;
}
.bz .bz-field-inline::-moz-placeholder { color: var(--faint); }
.bz .bz-field-inline::placeholder { color: var(--faint); }
.bz input.bz-field-inline:hover, .bz select.bz-field-inline:hover, .bz textarea.bz-field-inline:hover { background: var(--c-ink-a08); }
.bz input.bz-field-inline:focus, .bz select.bz-field-inline:focus, .bz textarea.bz-field-inline:focus {
  background: var(--c-ink-a08); border-color: var(--c-ink-a11); box-shadow: none;
}
/* ── Grey fields across the quote editor ───────────────────────
   On the editor page every .bz-field reads as a soft grey fill (matching the
   inline table fields) rather than the white card field. Scoped to the editor
   root (.bz-quote-editor) so the rest of the app keeps the white .bz-field.
   The input/select/textarea variants match the forms-plugin override's
   specificity so they win on source order (quote.css loads after primitives). */
.bz-quote-editor .bz-field,
.bz-quote-editor input.bz-field,
.bz-quote-editor select.bz-field,
.bz-quote-editor textarea.bz-field {
  background: var(--c-ink-a05);
  border-color: transparent;
  box-shadow: none;
}
.bz-quote-editor .bz-field:hover,
.bz-quote-editor input.bz-field:hover,
.bz-quote-editor select.bz-field:hover,
.bz-quote-editor textarea.bz-field:hover {
  background: var(--c-ink-a08);
}
.bz-quote-editor .bz-field:focus,
.bz-quote-editor input.bz-field:focus,
.bz-quote-editor select.bz-field:focus,
.bz-quote-editor textarea.bz-field:focus {
  background: var(--c-ink-a08);
  border-color: var(--c-ink-a11);
  box-shadow: none;
}
/* ── Summary lines (live quote rail + cost summaries) ──────────
   A label/value row with mono tabular numerals. `--strong` is the
   subtotal emphasis. --accent appears ONLY on .bz-live-total below. */
.bz-sumline { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; }
.bz-sumline__k { font-family: var(--sans); font-size: 13.5px; color: var(--mute); }
.bz-sumline__v { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.bz-sumline--strong .bz-sumline__k { color: var(--ink); font-weight: 600; font-size: 14px; }
.bz-sumline--strong .bz-sumline__v { font-weight: 600; font-size: 15px; }
.bz-sumline__divider { border-top: 1px solid var(--hairline); margin: 8px 0; }
/* Positive / negative deltas (under vs over budget). */
.bz-sumline--ok .bz-sumline__k, .bz-sumline--ok .bz-sumline__v { color: var(--c-budget-ok); }
.bz-sumline--over .bz-sumline__k, .bz-sumline--over .bz-sumline__v { color: var(--danger); }
/* ── Live quote rail ───────────────────────────────────────────
   The barely-lifted summary surface; the grand total sits in a warm
   inset footer and is the single place --accent (clay) is used. */
.bz-live-rail { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--elevation); overflow: hidden; }
.bz-live-rail__body { padding: 20px 22px 8px; }
.bz-live-rail__foot { padding: 18px 22px; background: var(--paper); border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bz-live-rail__foot-label { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.bz-live-total { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 27px;
  font-weight: 600; color: var(--accent); letter-spacing: -0.01em; }
/* ── Comparison page chrome (what-if event) ────────────────────
   A comparison is a scratch duplicate: excluded from the calendar and the money
   stats, and unable to send anything while its status stays `comparison`. The
   header banner (QuoteStepHeader .qsh__cmp) carries the words; these two carry
   the signal through the scroll, once the banner is off-screen.

   The switch is a class on <body>, toggled from EventEditor via
   useComparisonPageChrome — <body> is the only shared ancestor the Vue editor
   can reach (events/show.html.erb is a bare `<div id="app">`, and a scoped style
   block cannot paint an ancestor). The paint lands here, on .bz-quote-editor:
   that is the full-bleed ground (core/App.vue) and the ONLY element on this
   screen that spans the viewport, so the tint reads as a tinted page rather than
   a tinted panel with paper either side of it. It is also inside .bz, so the
   palette tokens resolve — <body> itself sits outside that scope.

   Exactly one element owns the tint: EventEditor's own .spreadsheet-container
   deliberately declares no background, or the two alphas would stack and the
   centre column would come out darker than the gutters.

   linear-gradient(tint, tint) rather than `background:` — the token is
   translucent, and a flat background would REPLACE the warm paper underneath
   instead of tinting it. Layering it as an image keeps .bz's paper background
   as the base.

   The 3px rule is an inset shadow, matching the events-index row treatment: it
   paints inside the box, so it can sit at the true left edge of the viewport
   without adding width or risking a horizontal scrollbar. Moved out here from
   the editor column on purpose — against a page-wide tint a rule floating at an
   inset column's edge reads as an accident; at the screen edge it reads as a
   deliberate margin mark on the whole page. */
body.bz-comparison-page .bz-quote-editor {
  background-image: linear-gradient(var(--c-status-comparison-tint), var(--c-status-comparison-tint));
  box-shadow: inset 3px 0 0 var(--c-status-comparison-dot);
}
/* ================================================================
   BLUME Design System — Documents (".bz-doc-*")
   ----------------------------------------------------------------
   The printable documents of the Review step: client quote, florist
   worksheet and supplier order (plus the on-screen cost breakdown).

   HARD CONSTRAINT — these rules MUST stay un-scoped and global. The
   single HTML→PDF engine (Documents::HtmlToPdf) serializes a Vue
   document component's DOM and re-renders it server-side in headless
   Chrome with this compiled stylesheet injected. Vue's scoped-CSS
   data attributes do NOT survive that round-trip, so anything the
   documents rely on lives here, namespaced under .bz-doc so it can
   never collide with the editor chrome.

   Built on the shared primitives (.bz-th/.bz-td/.bz-mono/.bz-label/
   .bz-eyebrow/.bz-title) — this file adds only document LAYOUT, never
   re-declares a primitive. Mirrors design_handoff_blume_flow/
   blume-flow-review.jsx. Imported once from design-system.css.
   ================================================================ */
/* ---- Page shell -------------------------------------------------
   .bz-doc is one printed page. On screen it sits inside a preview
   card; in the PDF it IS the page (the engine wraps it in
   <body class="bz bz-d2"> and zeroes the @page margin), so the shell
   owns its own internal padding via the section bands below. */
.bz-doc {
  background: var(--panel);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  /* A4 portrait aspect on screen; print ignores max-width. */
  width: 100%;
  margin: 0;
}
/* Header band — wordmark + sender on the left, document title + ref
   on the right. */
.bz-doc__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 34px 40px 26px;
  border-bottom: 1px solid var(--line);
}
.bz-doc__wordmark {
  height: 18px;
  margin-bottom: 14px;
}
/* Account name as the header wordmark (shown on its own, or beneath the logo). */
.bz-doc__brand-name {
  font-size: 18px;
}
/* Account logo in the document header — capped so tall/wide uploads stay
   in proportion, with the account name sitting just beneath. */
.bz-doc__logo {
  display: block;
  max-height: 48px;
  max-width: 220px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 8px;
}
/* When the logo is present the name is a quiet caption under it, not a
   second wordmark. */
.bz-doc__brand-name--with-logo {
  font-size: 12.5px;
  color: var(--mute);
}
.bz-doc__sender {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.6;
}
.bz-doc__heading-group {
  text-align: right;
  flex: 0 0 auto;
}
.bz-doc__heading {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 26px;
  margin: 0;
}
.bz-doc__ref {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-top: 6px;
  line-height: 1.7;
}
/* Inline count next to a heading (e.g. "Worksheet  4 arrangements"). Same
   font size as the heading; lighter weight + faint to read as a count. */
.bz-doc__heading-count {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--faint);
  margin-left: 8px;
}
/* Parties band — "prepared for" / "event date" two-up. */
.bz-doc__parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding: 22px 40px;
  border-bottom: 1px solid var(--line);
}
.bz-doc__party-name {
  font-size: 15.5px;
  font-weight: 600;
  margin-top: 2px;
}
.bz-doc__party-sub {
  font-size: 13px;
  color: var(--mute);
  margin-top: 3px;
}
/* Generic padded section + an internal eyebrow heading. */
.bz-doc__section {
  padding: 8px 40px 16px;
}
.bz-doc__section-title {
  margin-bottom: 12px;
}
/* ---- Line-item table -------------------------------------------
   Reuses .bz-th / .bz-td for cell typography; this only handles
   widths, alignment and the desc/detail/note stack. */
.bz-doc__table {
  width: 100%;
  border-collapse: collapse;
}
.bz-doc__col-qty {
  text-align: center;
  width: 70px;
}
/* Per-unit price, printed beside Qty so the client can see how a line total
   was reached (Description | Qty | Unit price | Total). Right-aligned and the
   same width as the Total column so the two money columns line up. */
.bz-doc__col-unit {
  text-align: right;
  width: 110px;
}
.bz-doc__col-amount {
  text-align: right;
  width: 110px;
}
.bz-doc__line-title {
  font-weight: 600;
  font-size: 14.5px;
}
.bz-doc__line-detail {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 2px;
}
/* Per-arrangement, client-facing note (new in the Flow review). Set
   off from the internal detail line by the accent rule. */
.bz-doc__line-note {
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  line-height: 1.55;
}
/* ---- Totals block ----------------------------------------------- */
.bz-doc__totals-wrap {
  padding: 4px 40px 30px;
  display: flex;
  justify-content: flex-end;
}
.bz-doc__totals {
  width: 300px;
}
.bz-doc__total-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--mute);
}
.bz-doc__total-row--grand {
  padding: 13px 0 0;
  margin-top: 6px;
  border-top: 1px solid var(--ink);
  align-items: baseline;
  color: var(--ink);
}
.bz-doc__total-grand-label {
  font-size: 15px;
  font-weight: 600;
}
.bz-doc__total-grand-value {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
}
.bz-doc__total-row--deposit {
  padding: 10px 0 0;
  font-size: 12.5px;
  color: var(--faint);
}
/* Recorded-payments block (invoice presentation): real money in (deposit +
   part payments), then the balance still owed. Replaces the projected
   "% deposit to confirm" line once payments have been recorded. */
.bz-doc__total-row--paid {
  padding: 7px 0 0;
  font-size: 13px;
  color: var(--mute);
}
.bz-doc__total-row--balance {
  padding: 11px 0 0;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  align-items: baseline;
  color: var(--ink);
  font-weight: 600;
}
.bz-doc__total-balance-value {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
}
/* ---- Payment details (invoice presentation only) ----------------
   Direct-deposit block between the totals and the terms footer. Quiet
   bordered card so the account number reads as reference data, not a
   line item. */
.bz-doc__payment {
  margin: 0 40px 26px;
  padding: 14px 18px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.bz-doc__payment-row {
  display: flex;
  gap: 16px;
  padding: 3px 0;
  font-size: 12.5px;
  color: var(--mute);
}
.bz-doc__payment-label {
  flex: none;
  width: 130px;
  color: var(--faint);
}
/* ---- Terms + signature (client quote only) ---------------------- */
.bz-doc__terms {
  padding: 20px 40px 34px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.bz-doc__terms-body {
  font-size: 12.5px;
  color: var(--mute);
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 68ch;
  /* Florist-authored terms may carry intentional line breaks. */
  white-space: pre-line;
}
/* Footer line beneath the signature block — quiet, centred sign-off. */
.bz-doc__terms-footer {
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.6;
  margin: 22px 0 0;
  text-align: center;
  white-space: pre-line;
}
.bz-doc__sign {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  gap: 40px;
}
/* Each column stacks the (server-baked) value slot above its labelled line.
   min-width:0 lets a wide baked signature shrink instead of overflowing. */
.bz-doc__sign-col {
  min-width: 0;
}
.bz-doc__sign-line {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
/* Value slot above each sign line. Reserves a consistent area so the server can
   bake the drawn signature / date in exactly where the client placed them — the
   content bottom-aligns to sit directly on the line. Empty on the unsigned
   quote (renders as blank signing space). */
.bz-doc__sign-value {
  display: flex;
  align-items: flex-end;
  min-height: 46px;
  padding-bottom: 4px;
}
.bz-doc__sign-img {
  display: block;
  max-height: 46px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.bz-doc__sign-date {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
}
.bz-doc__sign-date-fmt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--faint);
  margin-left: 5px;
}
/* ---- Internal breakdown rows (cost breakdown + worksheet/supplier
   subtotals). A compact key/value line used outside the main table. */
.bz-doc__kv {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
}
.bz-doc__kv-k {
  color: var(--mute);
}
.bz-doc__kv-v {
  font-family: var(--mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.bz-doc__kv--strong .bz-doc__kv-k,
.bz-doc__kv--strong .bz-doc__kv-v {
  color: var(--ink);
  font-weight: 600;
}
.bz-doc__rule {
  border-top: 1px solid var(--line);
  margin: 7px 0;
}
/* ---- Worksheet / supplier grouping ------------------------------
   Internal documents group rows under a supplier or arrangement
   heading. */
.bz-doc__group {
  margin-top: 4px;
}
.bz-doc__group + .bz-doc__group {
  margin-top: 22px;
}
.bz-doc__group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
}
.bz-doc__group-title {
  font-size: 15px;
  font-weight: 600;
}
.bz-doc__group-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
}
/* ---- Landscape worksheet (allocation sheet) ---------------------
   A wide single table grouped by arrangement. The component renders
   with .bz-doc--landscape; the PDF is rendered landscape server-side. */
.bz-doc--landscape {
  /* Roomier base width so the 8-column table breathes on screen; the PDF
     uses real A4-landscape geometry. */
  min-width: 920px;
}
/* Meta header strip — client / date / reference / labor. */
.bz-doc__wsmeta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 18px 24px;
  gap: 18px 24px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
}
.bz-doc__wsmeta-v {
  font-size: 14px;
  font-weight: 600;
  margin-top: 3px;
}
/* The long allocation table. Tighter cells than the quote table, with a
   ruled header and shaded per-arrangement group rows. */
.bz-doc__wstable {
  table-layout: fixed;
}
.bz-doc__wstable .bz-th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--ink);
}
.bz-doc__wstable .bz-td {
  padding: 9px 8px;
  font-size: 12.5px;
  vertical-align: top;
  word-break: break-word;
}
.bz-doc__wsgroup .bz-td {
  background: var(--chrome, var(--paper));
  border-top: 1px solid var(--ink);
  font-weight: 600;
}
.bz-doc__wsgroup-title {
  font-size: 13.5px;
  font-weight: 600;
}
.bz-doc__wsgroup-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  margin-left: 8px;
}
.bz-doc__wsmuted {
  color: var(--faint);
  font-style: italic;
}
/* Print: drop screen-only chrome and let content flow to the page. */
@media print {
  .bz-doc {
    box-shadow: none;
    border-radius: 0;
  }
  .bz-doc--landscape {
    min-width: 0;
  }
  /* Page-break integrity — the HTML→PDF engine paginates in print media, so
     these keep whole blocks off the fold. Without them a table row, totals
     block or the terms/signature block is sliced through the middle at the page
     break, which reads as content "running to the page edge" with no breathing
     room. Both properties are set: `break-inside` is the standard,
     `page-break-inside` the legacy alias headless Chrome still honours.

     `.bz-doc__terms` keeps the whole Terms · Acceptance section together, so if
     it can't fit at the foot of a page it moves to the next one as a unit
     rather than splitting mid-section. If the terms are genuinely taller than a
     full page (a very long T&C), the browser can't honour that and splits
     anyway — the per-paragraph (`.bz-doc__terms-body`) and signature
     (`.bz-doc__sign`) guards then keep those atomic units intact at the split. */
  .bz-doc__header,
  .bz-doc__parties,
  .bz-doc__table thead,
  .bz-doc__table tr,
  .bz-doc__datebucket,
  .bz-doc__totals-wrap,
  .bz-doc__total-row,
  .bz-doc__payment,
  .bz-doc__payment-row,
  .bz-doc__terms,
  .bz-doc__terms-body,
  .bz-doc__sign {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Never orphan a heading/label at the foot of a page from the block it
     introduces (supplier name over its lines, "Payment details" over the rows). */
  .bz-doc__group-head,
  .bz-doc__datebucket-head,
  .bz-label {
    -moz-column-break-after: avoid;
         break-after: avoid;
    page-break-after: avoid;
  }
}
/* — Supplier order · delivery info + per-date buckets —
   A supplier using individual dates gets its lines grouped by date; each
   bucket is colour-coded (cycling four print-safe fg hues) so a mixed-date
   order scans at a glance. The bold warning tells the supplier to
   double-check per-flower dates. */
.bz-doc__parties--3col { grid-template-columns: 1fr 1fr 1fr; }
.bz-doc__delivery-warn { font-weight: 700; }
.bz-doc__group-meta--warn { font-weight: 700; color: var(--ink); }
.bz-doc__datebucket { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--line); }
.bz-doc__datebucket-head { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.01em; }
.bz-doc__datebucket--0 { border-left-color: var(--c-status-inquiry-fg); }
.bz-doc__datebucket--0 .bz-doc__datebucket-head { color: var(--c-status-inquiry-fg); }
.bz-doc__datebucket--1 { border-left-color: var(--c-status-completed-fg); }
.bz-doc__datebucket--1 .bz-doc__datebucket-head { color: var(--c-status-completed-fg); }
.bz-doc__datebucket--2 { border-left-color: var(--c-status-flower-pickup-fg); }
.bz-doc__datebucket--2 .bz-doc__datebucket-head { color: var(--c-status-flower-pickup-fg); }
.bz-doc__datebucket--3 { border-left-color: var(--c-status-in-progress-fg); }
.bz-doc__datebucket--3 .bz-doc__datebucket-head { color: var(--c-status-in-progress-fg); }
/* ================================================================
   BLUME Design System — DASHBOARD CALENDAR
   The dashboard month/day/year calendar + the two read-only sidebars
   (Upcoming events / Recent activity). Ported from
   design_handoff_blume_flow/blume-flow-dash.jsx. Consumes semantic
   tokens + the status palette only; no raw hex. Replaces the retired
   entrypoints/dashboard.css and components/calendar.css — the z-index
   hierarchy that lived there (scattered !important) is reconciled into
   the --bz-z-* tokens below. See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── z-index hierarchy (was 19 !important rules in calendar.css) ──
   Layered so calendar dropdowns/context-menu portal above the page but
   below the profile sidebar (which sits at 999999 inline). The legacy
   "lower everything while the sidebar is open" hack is preserved via
   body:has(...) at the bottom of this file. */
.bz {
  --bz-z-cal-base:     0;       /* grid, day-events container, #event-calendar */
  --bz-z-cal-pill:    10;       /* event chips (so their dropdown anchors) */
  --bz-z-cal-menu: 99999;       /* day right-click context menu */
  --bz-z-cal-drop: 999999;      /* event/arrival/pickup action dropdowns (portaled) */
}
/* ── Calendar card ────────────────────────────────────────── */
.bz-cal { background: var(--panel); border-radius: 14px; border: 1px solid var(--hairline);
  box-shadow: var(--elevation); overflow: hidden; }
/* Keep the views area from collapsing between Day/Month/Year (was a 600px
   min-height in the retired dashboard.css). */
.bz #event-calendar { min-height: 540px; }
.bz-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; flex-wrap: wrap; }
.bz-cal__headgroup { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bz-cal__headgroup.hidden { display: none; }
/* calendar-view hides the inactive period nav */
.bz-cal__title { font-size: 22px; }
/* pairs with .bz-title */
/* Fixed-width period labels so the prev/next arrows keep their position as the
   label text changes length ("May 2026" vs "September 2026"); sized to the
   longest value each view can render. The year label ("2026") is naturally
   stable and needs no minimum. */
.bz-cal__title--month { min-width: 7.5em; }
.bz-cal__title--day { min-width: 15em; text-align: center; }
.bz-cal__nav { display: flex; align-items: center; gap: 7px; }
/* Square ghost nav buttons (prev/next month·day·year, Refresh) */
.bz-cal-navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px;
  background: var(--c-ink-a05); color: var(--mute); font-family: var(--sans); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.bz-cal-navbtn:hover { background: var(--c-ink-a08); color: var(--ink); }
.bz-cal-navbtn svg { width: 16px; height: 16px; }
.bz-cal__today { font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 6px 10px; border-radius: 7px; -webkit-text-decoration: none; text-decoration: none; transition: background .15s; }
.bz-cal__today:hover { background: var(--c-ink-a05); }
/* ── Google Calendar connection status chip ───────────────────
   Ghost control matching .bz-cal-navbtn / .bz-cal-seg__btn; links to the sync
   settings and shows the connected state (status dot) + active sync direction.
   --off variant when no calendar is connected. */
.bz-cal__gcal { display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 10px; border-radius: 7px; background: var(--c-ink-a05); color: var(--mute);
  font-family: var(--sans); font-size: 13px; font-weight: 600; -webkit-text-decoration: none; text-decoration: none;
  transition: background .15s, color .15s; }
.bz-cal__gcal:hover { background: var(--c-ink-a08); color: var(--ink); }
.bz-cal__gcal svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Connected/disconnected dot colours track the Settings-page status pills
   (.bz-pill--completed / --cancelled) so both surfaces agree. */
.bz-cal__gcal-dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-status-completed-dot); flex-shrink: 0; }
.bz-cal__gcal--off .bz-cal__gcal-dot { background: var(--c-status-cancelled-dot); }
/* --warn: the grant lapsed and only a reconnect fixes it. Same amber as the
   .bz-pill--quote-sent status pill on the Settings page, so both surfaces read
   as one state. No new palette entries. */
.bz-cal__gcal--warn,
.bz-cal__gcal--warn:hover { background: var(--c-status-quote-sent-bg); color: var(--c-status-quote-sent-fg); }
.bz-cal__gcal--warn .bz-cal__gcal-dot { background: var(--c-status-quote-sent-dot); }
.bz-cal__gcal-label { white-space: nowrap; }
/* ── Segmented Day/Month/Year control ─────────────────────── */
.bz-cal-seg { display: inline-flex; border-radius: 0; overflow: hidden; }
.bz-cal-seg__btn { padding: 8px 16px; font-family: var(--sans); font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; background: var(--c-ink-a05); color: var(--mute);
  transition: background .15s, color .15s; }
.bz-cal-seg__btn:hover { background: var(--c-ink-a08); color: var(--ink); }
/* Active segment — the controller toggles .is-active in lockstep */
.bz-cal-seg__btn.is-active { background: var(--panel); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--c-ink-a08); }
/* ── Month grid ───────────────────────────────────────────── */
.bz-cal__weekhead { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--paper); background: var(--c-ink-a025); }
.bz-cal__weekday { padding: 12px 14px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); border-left: 1px solid var(--paper); }
.bz-cal__weekday:first-child { border-left: none; }
.bz-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--paper);
  position: relative; z-index: var(--bz-z-cal-base); }
.bz-cal__week:last-child { border-bottom: none; }
.bz-cal-cell { min-width: 0; min-height: 110px; padding: 9px 9px 11px; border-left: 1px solid var(--paper);
  background: transparent; cursor: pointer; transition: background .12s; }
.bz-cal-cell:first-child { border-left: none; }
.bz-cal-cell:hover { background: var(--c-ink-a04); }
.bz-cal-cell--other { background: var(--c-ink-a025); }
.bz-cal-cell--other:hover { background: var(--c-ink-a04); }
/* Today — the one place --accent (clay) appears on the dashboard */
.bz-cal-cell--today { background: var(--c-clay-a08); }
.bz-cal-cell--today:hover { background: var(--c-clay-a08); }
.bz-cal-cell__head { display: flex; justify-content: flex-end; margin-bottom: 7px; }
.bz-cal-cell__num { font-family: var(--mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-size: 12.5px;
  color: var(--mute); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.bz-cal-cell--other .bz-cal-cell__num { color: var(--faint); }
.bz-cal-cell--today .bz-cal-cell__num { color: var(--accent); font-weight: 700; }
.bz-cal-cell__events { display: flex; flex-direction: column; gap: 4px;
  position: relative; z-index: var(--bz-z-cal-base); }
/* ── Event chip — layout only; colour comes from a .bz-pill--<status>
   modifier (status.css) set alongside it. Square-ish, truncating. ── */
/* overflow stays visible so the hover tooltip + action dropdown can pop out of
   the chip (the old .calendar-event-pill forced overflow:visible for this); the
   label truncates itself. */
.bz-cal-evt { display: flex; align-items: center; gap: 6px; border-radius: 5px; padding: 3px 7px;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.2; font-weight: 500;
  white-space: nowrap; cursor: pointer; border: none; -webkit-text-decoration: none; text-decoration: none;
  position: relative; z-index: var(--bz-z-cal-pill); transition: box-shadow .12s ease;
  /* min-width:0 lets this flex item shrink below its nowrap min-content so the
     label's ellipsis engages instead of blowing out the day cell / grid track. */
  min-width: 0; max-width: 100%; }
/* Subtle hover — a full-bleed inset ink tint darkens whatever status colour the
   pill already has, without recolouring text/dot or overriding per-status bg. */
.bz-cal-evt:hover { box-shadow: inset 0 0 0 999px var(--c-ink-a08); }
.bz-cal-evt__dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 5px; background: currentColor; background: var(--dot, currentColor); }
.bz-cal-evt__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Non-status calendar entries (no raw hex — see palette.css):
   flower arrival = rose, pickup = orange, Google = lilac (shares In Progress). */
.bz-cal-evt--arrival { --dot: var(--c-status-flower-arrival-dot); background: var(--c-status-flower-arrival-bg); color: var(--c-status-flower-arrival-fg); }
.bz-cal-evt--pickup  { --dot: var(--c-status-flower-pickup-dot);  background: var(--c-status-flower-pickup-bg);  color: var(--c-status-flower-pickup-fg); }
.bz-cal-evt--gcal    { --dot: var(--c-status-in-progress-dot);    background: var(--c-status-in-progress-bg);    color: var(--c-status-in-progress-fg); }
/* The legacy delegated hooks (.event-item / .calendar-event-pill) need the same
   stacking context so their portaled dropdown anchors correctly. */
.bz .event-item, .bz .calendar-event-pill { position: relative; z-index: var(--bz-z-cal-pill); }
/* ── Day-view rows (rendered by calendar_day_view_controller) ─ */
.bz-cal-dayrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 7px;
  box-shadow: var(--elevation); position: relative; }
.bz-cal-dayrow__main { min-width: 0; }
.bz-cal-dayrow__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-cal-dayrow__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.bz-cal-dayrow__empty { font-family: var(--sans); font-size: 14px; color: var(--faint); font-style: italic; padding: 4px 0; }
/* ── Year-view month tiles (rendered by calendar_year_view_controller) ─ */
.bz-cal-monthtile { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  text-align: left; padding: 16px 18px; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 7px; box-shadow: var(--elevation); cursor: pointer; transition: background .15s; }
.bz-cal-monthtile:hover { background: var(--c-ink-a04); }
.bz-cal-monthtile__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bz-cal-monthtile__count { font-family: var(--mono); font-size: 12px; color: var(--mute); margin-top: 2px; }
.bz-cal-monthtile__chev { width: 18px; height: 18px; color: var(--faint); flex-shrink: 0; }
/* A small text link used inside calendar rows ("View event" / "View status") */
.bz-cal-link { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--mute);
  background: none; border: none; padding: 0; cursor: pointer; -webkit-text-decoration: none; text-decoration: none; transition: color .12s; }
.bz-cal-link:hover { color: var(--ink); }
/* ── Hover tooltip (neutral ink, not status-coloured) ─────────
   .event-tooltip / .event-hover-tooltip are toggled by
   calendar_tooltip_controller via the .hidden class. */
.bz .event-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px;
  background: var(--ink); color: var(--c-paper-cream); font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  padding: 7px 10px; border-radius: 7px; box-shadow: 0 8px 20px var(--c-ink-a45); white-space: nowrap;
  pointer-events: none; transition: opacity .18s ease; z-index: 50; }
.bz .event-tooltip__sub { color: var(--c-paper-cream); opacity: 0.7; }
.bz .event-tooltip.hidden { opacity: 0; visibility: hidden; }
.bz .event-tooltip:not(.hidden) { opacity: 1; visibility: visible; }
/* Tooltip arrow */
.bz .event-tooltip__arrow { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4px solid var(--ink); }
/* ── Action dropdowns (event / arrival / pickup) ──────────────
   Surface only — the legacy JS portals these into
   #global-dropdown-container and sets position:fixed + the z-index
   inline, so this layer styles the panel, not its placement. The JS
   clamps placement into the viewport; max-width covers the remaining
   case of a menu wider than a phone screen. */
.bz .event-dropdown, .bz .arrival-dropdown, .bz .pickup-dropdown {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 0; min-width: 10rem;
  max-width: calc(100vw - 16px);
  box-shadow: 0 10px 24px -6px var(--c-ink-a45); }
.bz-cal-menu { padding: 4px 0; }
.bz-cal-menu__item { display: block; width: 100%; text-align: right; padding: 9px 16px 9px 0;
  font-family: var(--sans); font-size: 13px; color: var(--ink); background: none; border: none;
  cursor: pointer; -webkit-text-decoration: none; text-decoration: none; transition: background .12s; }
.bz-cal-menu__item:hover { background: var(--c-ink-a05); }
.bz-cal-menu__item--danger { color: var(--danger); }
/* ── Right-click "Create event" context menu ──────────────── */
.bz-cal-context { background: var(--panel); border: 1px solid var(--hairline); border-radius: 7px;
  box-shadow: 0 10px 24px -6px var(--c-ink-a45); padding: 4px 0; min-width: 180px;
  z-index: var(--bz-z-cal-menu); }
.bz-cal-context__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 16px; font-family: var(--sans); font-size: 13px; color: var(--ink); background: none;
  border: none; cursor: pointer; transition: background .12s; }
.bz-cal-context__item:hover { background: var(--c-ink-a05); }
.bz-cal-context__item svg { width: 16px; height: 16px; }
/* ── Headline stats strip (above the calendar card) ──────────
   Inline, centered values + a Hide/Show toggle persisted in localStorage by
   stats_toggle_controller. The toggle row stays put; only the strip collapses. */
.bz-dash-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 10px; }
.bz-dash-stats.hidden { display: none; }
.bz-dash-stats__item { display: inline-flex; align-items: baseline; gap: 6px; }
/* A stat carrying an explanation: dotted-underline the label and reveal a
   dark tooltip bubble below it on hover/focus (pure CSS, no controller). */
.bz-dash-stats__item--tip { position: relative; cursor: help; }
.bz-dash-stats__item--tip .bz-dash-stats__label { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted;
  text-decoration-color: var(--line); text-underline-offset: 3px; }
.bz-dash-stats__tip { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: -moz-max-content;
  width: max-content; max-width: 260px; text-align: left; background: var(--ink); color: var(--c-paper-cream);
  font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1.45; padding: 9px 11px;
  border-radius: 8px; box-shadow: 0 8px 20px var(--c-ink-a45); opacity: 0; visibility: hidden;
  pointer-events: none; transition: opacity .15s ease; z-index: 60; }
.bz-dash-stats__tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom-color: var(--ink); }
.bz-dash-stats__item--tip:hover .bz-dash-stats__tip,
.bz-dash-stats__item--tip:focus-within .bz-dash-stats__tip { opacity: 1; visibility: visible; }
/* A stat that links somewhere (Outstanding balance → filtered events index).
   Rendered as an <a>; overrides the tip's help-cursor and nudges on hover. */
.bz-dash-stats__item--link { cursor: pointer; -webkit-text-decoration: none; text-decoration: none; color: inherit; }
.bz-dash-stats__item--link:hover .bz-dash-stats__value { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 3px; }
.bz-dash-stats__value { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.bz-dash-stats__label { font-size: 13px; color: var(--mute); }
.bz-dash-stats__div { width: 1px; height: 14px; background: var(--line); margin: 0 16px; }
.bz-dash-stats__toggle-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.bz-dash-stats__toggle { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none;
  background: transparent; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  color: var(--mute); transition: color .12s; }
.bz-dash-stats__toggle:hover { color: var(--ink); }
.bz-dash-stats__chev { width: 14px; height: 14px; transition: transform .15s; }
.bz-dash-stats__chev.is-open { transform: rotate(180deg); }
/* On phones the horizontal stat strip wraps into a tall, cramped block that
   pushes the calendar below the fold — hide the whole strip (values + toggle)
   and let the calendar own the screen. */
@media (max-width: 640px) {
  .bz-dash-stats-wrap { display: none; }
  /* The day-view label's 15em minimum (~330px at 22px) can't shrink and
     overflows a phone even in a wrap container. Let it size to its text; the
     arrows still flank it, just without the fixed reservation. */
  .bz-cal__title--day { min-width: 0; }
}
/* ── Status legend (sits on the paper below the calendar card) ─ */
.bz-cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin-top: 18px; padding: 0 2px; }
.bz-cal-legend__item { display: flex; align-items: center; gap: 8px; }
.bz-cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--mute)); }
.bz-cal-legend__label { font-family: var(--sans); font-size: 12.5px; color: var(--mute); }
/* ── Inline stat strip (Upcoming / Recent sidebars header rhythm) ─ */
.bz-dash-side { margin-top: 32px; }
.bz-dash-side__title { font-size: 16px; margin-bottom: 14px; }
/* pairs with .bz-title */
.bz-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--hairline); }
.bz-dash-row:first-child { border-top: none; }
.bz-dash-row__main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bz-dash-row__name { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-dash-row__sub { font-family: var(--sans); font-size: 13px; color: var(--mute); margin-top: 1px; }
.bz-dash-row__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bz-dash-row__icon { width: 38px; height: 38px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; background: var(--c-ink-a08); color: var(--mute); }
.bz-dash-row__icon svg { width: 18px; height: 18px; }
.bz-dash-empty { font-family: var(--sans); font-size: 14px; color: var(--faint); text-align: center; padding: 18px 0; }
/* ── Profile-sidebar-open z-index lowering (preserved from
   calendar.css). When the slide-over is open, drop the calendar's
   pills + portaled dropdowns beneath it. ── */
body:has(#profile-sidebar.open) .bz .event-item,
body:has(#profile-sidebar.open) .bz .calendar-event-pill,
body:has(#profile-sidebar.open) .bz-cal-evt { z-index: 1; }
body:has(#profile-sidebar.open) .event-dropdown,
body:has(#profile-sidebar.open) .arrival-dropdown,
body:has(#profile-sidebar.open) .pickup-dropdown { z-index: 1; }
/* ================================================================
   BLUME Design System — XERO SYNC INDICATOR
   A neutral mono "Xero · Synced" glyph+label (no trademark). Green when the
   event is synced to Xero, faint otherwise. Rendered by EventsHelper#bz_xero_indicator.
   (BLUME tracks sync state only — not invoice payment status — so this is a
   sync indicator, not the handoff's full invoice pill.)
   ================================================================ */
.bz-xero {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
}
.bz-xero__icon { display: inline-flex; }
.bz-xero--synced { color: var(--c-status-completed-fg); }
/* "Invoice sent" indicator — same mono glyph+label treatment as the Xero
   indicator, shown once Events::InvoiceDelivery has emailed the invoice.
   Rendered by BzStatusHelper#bz_invoice_sent_indicator. */
.bz-sent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--c-status-completed-fg);
}
.bz-sent__icon { display: inline-flex; }
/* ================================================================
   BLUME Design System — MODAL (Event Status & Notes)
   A centred-top card over a dim scrim. Visibility is toggled by the
   `.hidden` utility in JS — this layer only styles surface, type and
   layout, never `display` on the panel itself.
   ================================================================ */
.bz-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 72px 24px;
  z-index: 200;
}
/* The .bz base paints an opaque --paper background and, once compiled, lands after
   this file — so a single-class override loses on source order. Use a two-class
   selector (the overlay root always carries .bz) to clear it regardless of order,
   letting the page show through the translucent .bz-modal-backdrop scrim. */
.bz.bz-modal-overlay { background: transparent; }
/* On phones the 72px vertical inset wastes scarce height (the panel body already
   scrolls); pull the card near the top so more of it is visible above the fold. */
@media (max-width: 640px) {
  .bz-modal-overlay { padding: 16px 12px; }
}
/* Reusable scrim — self-contained (no .bz ancestor required) so legacy modals
   can adopt the warm, page-revealing backdrop. Page shows through, dimmed. */
.bz-scrim {
  background: rgba(27, 26, 23, 0.34);
  background: var(--bz-scrim);
  backdrop-filter: blur(2px);
}
.bz-modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(27, 26, 23, 0.34);
  background: var(--bz-scrim);
  backdrop-filter: blur(2px);
}
/* Short modals (e.g. the run-comparison explainer) centre vertically rather than
   pinning near the top. margin-block:auto collapses to 0 when the panel fills the
   available height, so tall modals still top-align and scroll. */
.bz-modal-panel--centered { margin-top: auto; margin-bottom: auto; }
.bz-modal-panel {
  position: relative;
  z-index: 1;
  /* Layout wrappers between the scrim and the panel carry pointer-events:none
     so backdrop clicks fall through to the .modal-overlay the page JS listens
     on; the panel re-enables hit-testing for its own content. */
  pointer-events: auto;
  background: var(--panel);
  border-radius: 16px;
  width: min(900px, 100%);
  max-height: calc(100vh - 144px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px -20px var(--c-ink-a45);
  overflow: hidden;
}
.bz-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px 22px;
}
.bz-modal-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bz-modal-close {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  padding: 6px;
  margin: -6px;
  border-radius: 8px;
}
.bz-modal-close:hover { background: var(--c-ink-a05); color: var(--ink); }
.bz-modal-form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bz-modal-body { flex: 1; overflow-y: auto; padding: 0 30px; }
.bz-modal-field { margin-bottom: 24px; }
.bz-modal-field--last { margin-bottom: 30px; }
/* Two fields side by side (e.g. Pipeline stage + Payment status). Its children's
   own margin-bottom provides the row's spacing; collapses to one column when narrow. */
.bz-modal-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; gap: 20px; }
@media (max-width: 480px) { .bz-modal-row { grid-template-columns: 1fr; gap: 0; } }
.bz-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 30px 24px;
}
.bz-modal-section-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Status history list */
.bz-modal-history { display: flex; flex-direction: column; gap: 2px; }
.bz-modal-history__row { background: var(--paper); border-radius: 10px; padding: 14px 16px; }
.bz-modal-history__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bz-modal-history__when { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.bz-modal-history__by { font-size: 13.5px; color: var(--mute); margin-top: 9px; }
.bz-modal-history__note { font-size: 14.5px; color: var(--ink); margin-top: 5px; white-space: pre-wrap; }
.bz-modal-history__empty { font-size: 14px; color: var(--mute); font-style: italic; }
/* Delete-event confirmation modal (Archive vs Permanently delete). */
.bz-delete-modal { max-width: 30rem; }
.bz-delete-modal__lead { font-family: var(--sans); font-size: 15px; color: var(--ink); line-height: 1.5; margin: 0 0 14px; }
.bz-delete-modal__options { margin: 0 0 30px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.bz-delete-modal__options li { font-family: var(--sans); font-size: 13.5px; color: var(--mute); line-height: 1.5; }
.bz-delete-modal__options strong { color: var(--ink); }
.bz-delete-modal__warn { font-family: var(--sans); font-size: 14px; color: var(--mute); line-height: 1.5; margin: 0 0 30px; }
.bz-delete-modal__warn strong { color: var(--danger); }
/* Cancel sits left; the archive/delete actions push to the right. */
.bz-delete-modal__foot { flex-wrap: wrap; }
/* Run-comparison explainer modal (what-if duplicate → opens in a new tab). */
.bz-run-comparison__lead { font-family: var(--sans); font-size: 15px; color: var(--ink); line-height: 1.5; margin: 0 0 14px; }
.bz-run-comparison__points { margin: 0 0 30px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.bz-run-comparison__points li { font-family: var(--sans); font-size: 13.5px; color: var(--mute); line-height: 1.5; }
.bz-run-comparison__points strong { color: var(--ink); }
.bz-delete-modal__foot #cancelDeleteEventModal { margin-right: auto; }
.bz-delete-modal__form { margin: 0; }
/* A select styled as a .bz-field with a chevron affordance. */
.bz-modal-select-wrap { position: relative; }
.bz-modal-select-wrap select.bz-field { -moz-appearance: none; appearance: none; -webkit-appearance: none; font-size: 16px; padding: 13px 15px; cursor: pointer; }
.bz-modal-select-wrap .bz-modal-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; display: flex; }
/* Generic modal content pieces (shared by the Flow-ported modals). */
.bz-modal-card { background: var(--paper); border-radius: 10px; padding: 14px 16px; }
.bz-modal-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 3px 0; }
.bz-modal-hint { font-size: 13px; color: var(--mute); margin: 6px 0 0; }
.bz-modal-error { padding: 12px 14px; background: var(--c-danger-a08); color: var(--danger); font-size: 14px; }
/* ================================================================
   BLUME Design System — FEEDBACK (header banners + toasts)
   Shared alert chrome. Consume tokens / status palette — no raw hex.
   • .bz-banner   — full-bleed header notices (subscription paused…)
   • .bz-toast    — floating notifications (window.showNotification /
                    showToast) and the server flash partial.
   Variants map onto the calm status palette so every alert tracks the
   one source of colour (palette.css). See DESIGN_SYSTEM.md.
   ================================================================ */
/* ── Header banners ───────────────────────────────────────────── */
.bz-banner {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px 16px;
  border-bottom: 1px solid transparent;
}
.bz-banner--warn { background: var(--c-warn-bg); color: var(--c-warn-fg); border-bottom-color: var(--c-warn-line); }
.bz-banner__action { color: inherit; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; margin-left: 12px; }
.bz-banner__action:hover { opacity: 0.78; }
/* ── Toasts (layout utilities stay in markup; colour lives here) ─ */
.bz-toast { font-family: var(--sans); color: var(--ink); }
.bz-toast p { color: inherit; }
.bz-toast svg { color: inherit; }
.bz-toast--success { background: var(--c-status-quote-confirmed-bg); color: var(--c-status-quote-confirmed-fg); border-color: var(--c-status-quote-confirmed-dot); }
.bz-toast--error   { background: var(--c-danger-a08);               color: var(--danger);                       border-color: var(--danger); }
.bz-toast--info    { background: var(--c-status-inquiry-bg);        color: var(--c-status-inquiry-fg);          border-color: var(--c-status-inquiry-dot); }
.bz-toast--warning { background: var(--c-warn-bg);                  color: var(--c-warn-fg);                    border-color: var(--c-warn-line); }
/* ── Form error summary (validation errors above a form) ──────── */
/* The ONE style for validation errors — render application/_error_messages
   (or reuse these classes for JS-filled modal error boxes). Calm treatment:
   soft danger wash + hairline, never a full-strength red border. */
.bz-formerr {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 20px; border-radius: 12px;
  background: var(--c-danger-a08); border: 1px solid var(--c-danger-line);
  font-family: var(--sans);
  font-size: 13.5px; color: var(--danger);
}
.bz-formerr.hidden { display: none; }
.bz-formerr__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--danger); }
.bz-formerr__body { min-width: 0; }
.bz-formerr__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--danger); }
.bz-formerr__list { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.bz-formerr__list li { font-size: 13.5px; line-height: 1.6; color: var(--danger); }
/* ================================================================
   BLUME Design System — TOP NAV (D2 "Flow" header)
   Scoped under .bz-nav so it only restyles the new WEB header; the
   Turbo Native navbar keeps using components/nav.css untouched.
   Structural class names (.top-nav / .nav-container / .nav-user-controls
   / .logo) are preserved so existing JS selectors keep working; nav
   links use the new .bz-nav__link class to sidestep nav.css's !important.
   ================================================================ */
/* Bar */
.bz-nav.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: 70px;
  padding: 0 16px;
  background: var(--chrome);
  border: 0;
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--elevation);
}
@media (min-width: 1024px) { .bz-nav.top-nav { padding: 0 32px; } }
/* Bare header (auth + public marketing pages): blend the bar into the page
   ground — paper background, no divider, no shadow, logo only. */
.bz-nav.top-nav.bz-nav--bare {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* Logo (pinned left) */
.bz-nav .logo { position: absolute; left: 16px; display: flex; align-items: center; height: 100%; z-index: 10; }
.bz-nav .logo img { height: 22px; width: auto; display: block; }
@media (min-width: 1024px) { .bz-nav .logo { left: 32px; } }
/* Right-side context for bare-header screens (e.g. the onboarding wizard),
   so a focused flow can show its state without adding a second header bar. */
.bz-nav__aside { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-right: 16px; }
@media (min-width: 1024px) { .bz-nav__aside { padding-right: 32px; } }
/* Centre nav */
.bz-nav .nav-container { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 100%; }
.bz-nav .nav-container--right { justify-content: flex-end; padding-right: 56px; }
.bz-nav .nav-container nav { display: inline-flex; align-items: center; gap: 4px; }
/* Links */
.bz-nav__link {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--mute); -webkit-text-decoration: none; text-decoration: none;
  padding: 7px 14px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.bz-nav__link:hover { color: var(--ink); background: var(--c-ink-a04); }
.bz-nav__link.active { color: var(--ink); font-weight: 600; background: var(--c-ink-a05); }
/* User controls (pinned right) */
.bz-nav .nav-user-controls { position: absolute; right: 16px; display: flex; align-items: center; gap: 14px; height: 100%; z-index: 10; }
@media (min-width: 1024px) { .bz-nav .nav-user-controls { right: 32px; } }
/* Avatar trigger */
.bz-nav #profile-sidebar-btn { display: inline-flex; align-items: center; justify-content: center; padding: 2px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.bz-nav #profile-sidebar-btn img { width: 32px; height: 32px; border-radius: 999px; display: block; -o-object-fit: cover; object-fit: cover; }
/* Events dropdown panel */
.bz-nav .events-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 50;
  min-width: 280px; max-width: 320px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 18px 50px -28px rgba(27, 26, 23, 0.30);
  overflow: hidden;
}
.bz-nav .events-dropdown .events-dropdown-item:hover { background: var(--c-ink-a04); }
/* ================================================================
   MOBILE NAV (≤1023px) — the dense horizontal link row can't fit a
   phone, so below the lg breakpoint we hide it and expose a hamburger.
   The hamburger opens the profile drawer (.bz-sidebar), into which the
   app nav links fold on mobile (see _account_menu.html.erb + sidebar.css)
   — one drawer for both navigation and profile. Desktop (≥1024px) is
   untouched: the burger stays hidden and the links live in the bar.
   ================================================================ */
/* Hamburger trigger — sits in .nav-user-controls next to the avatar,
   hidden until mobile. Opens the profile drawer (window.toggleProfileSidebar). */
.bz-nav__burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -4px; padding: 0;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--ink); cursor: pointer;
  transition: background-color .15s ease;
}
.bz-nav__burger:hover { background: var(--c-ink-a05); }
@media (max-width: 1023px) {
  /* Swap the horizontal link row for the hamburger. */
  .bz-nav .nav-container { display: none; }
  .bz-nav__burger { display: inline-flex; }
  /* The centred/right container is gone, so keep user controls pinned right. */
  .bz-nav .nav-container--right { padding-right: 0; }
}
/* ================================================================
   BLUME Design System — PROFILE SLIDE-OVER (.bz-sidebar)
   Rebuilds the account/profile slide-over onto the handoff's
   "ProfileDrawer": eyebrow header, avatar + name + mono email, two-
   line nav items, and a clay "Sign out" pinned to the bottom.
   Open/close is driven by inline JS in _account_menu.html.erb, which
   sets display:flex / none — this file owns flex-direction so the
   bottom-pinned foot (margin-top:auto) works once the panel is open.
   ================================================================ */
.bz-sidebar {
  width: 380px;
  max-width: 90vw;
  flex-direction: column;          /* meaningful once JS sets display:flex */
  background: var(--panel);
  color: var(--ink);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px -40px rgba(27, 26, 23, 0.40);
}
/* Header — eyebrow + close */
.bz-sidebar__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.bz-sidebar__close { display: flex; color: var(--mute); border-radius: 8px; padding: 6px; margin: -6px; border: 0; background: transparent; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.bz-sidebar__close:hover { color: var(--ink); background: var(--c-ink-a04); }
/* Identity block */
.bz-sidebar__user { display: flex; align-items: center; gap: 14px; padding: 22px; }
.bz-sidebar__user .bz-avatar-initials { font-size: 16px; }
.bz-sidebar__name  { font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; line-height: 1.25; }
.bz-sidebar__email { font-family: var(--mono); font-size: 12.5px; color: var(--mute); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Item groups */
.bz-sidebar__items { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; padding: 6px 12px 12px; border-top: 1px solid var(--line); }
.bz-sidebar__group-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 12px 14px 4px; }
.bz-sidebar__foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--line); }
/* Item (two-line: label + sub) — links and form buttons share this */
.bz-sidebar__item {
  display: flex; align-items: center; gap: 13px; width: 100%;
  text-align: left; -webkit-text-decoration: none; text-decoration: none;
  padding: 12px 14px; border-radius: 10px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink); font-family: var(--sans);
  transition: background-color .15s ease;
}
.bz-sidebar__item:hover { background: var(--c-ink-a04); }
.bz-sidebar__item-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--mute); }
.bz-sidebar__item-icon svg { width: 19px; height: 19px; }
.bz-sidebar__item-avatar { width: 26px; height: 26px; border-radius: 999px; -o-object-fit: cover; object-fit: cover; display: block; }
.bz-sidebar__item-text  { min-width: 0; }
.bz-sidebar__item-label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bz-sidebar__item-sub   { display: block; font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Danger item (sign out) */
.bz-sidebar__item--danger { color: var(--danger); }
.bz-sidebar__item--danger .bz-sidebar__item-icon,
.bz-sidebar__item--danger .bz-sidebar__item-label { color: var(--danger); }
.bz-sidebar__item--danger:hover { background: var(--c-danger-a08); }
/* ── Mobile nav folded into the drawer ────────────────────────
   Below the lg breakpoint the top-bar links collapse into the hamburger, which
   opens this profile drawer; the app nav links appear at the top of it so a
   phone has ONE menu for both navigation and profile. Hidden on desktop, where
   the links live in the bar. Reuses .bz-nav__link (from nav.css) restacked
   full-width, so the labels never drift from the desktop nav. */
.bz-sidebar__nav { display: none; }
@media (max-width: 1023px) {
  .bz-sidebar__nav {
    display: block; padding-bottom: 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
}
.bz-sidebar__nav nav { display: flex; flex-direction: column; gap: 2px; }
.bz-sidebar__nav .events-nav-item { width: 100%; }
.bz-sidebar__nav .bz-nav__link {
  width: 100%; justify-content: flex-start;
  font-size: 13px; padding: 12px 14px; border-radius: 10px;
}
/* The EVENTS hover dropdown is a desktop affordance; keep it out of the drawer. */
.bz-sidebar__nav .events-dropdown { display: none; }
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-row-gap: 0;
  row-gap: 0;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 400;
  line-height: 1.5;
  background-color: #ffffff;
}
main {
  /* body is display:grid; without min-width:0 the main grid item defaults to
     min-width:auto and stretches to its widest child (a nowrap table), pushing
     the whole document wider than the viewport on mobile. Pinning it to 0 keeps
     main at viewport width so inner overflow-x wrappers (.overflow-x-auto on
     the events/catalog tables) scroll their own content instead. */
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  background-color: #ffffff;
  border: none !important;
}
@media (min-width: 1024px) {
main {
    padding-left: 0px;
    padding-right: 0px;
}
  }
/* Override container class to use wider margins */
.container {
  max-width: 1400px !important;
}
a {
  color: #ec1c24;
  color: var(--text-primary);
}
a:hover,a:focus {
    color: #f16222;
    color: var(--text-primary-hover);
    transform: none;
  }
ul {
  list-style-type: disc;
  list-style-position: inside;
}
ol {
  list-style-type: decimal;
  list-style-position: inside;
}
.table {
  width: 100%;

}
.table th,.table td {
    vertical-align: top;
  }
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}
/* We need to override trix.css’s image gallery styles to accommodate the
  <action-text-attachment> element we wrap around attachments. Otherwise,
  images in galleries will be squished by the max-width: 33%; rule.
*/
.link_to_embed {
  white-space: normal;
  margin-top: 1rem
}
@media (min-width: 768px){
  .link_to_embed{
    margin-left: 1rem;
  }
}
.link_to_embed [data-behavior='embed_url']{
  display: block;
}
@media (min-width: 768px){
.link_to_embed [data-behavior='embed_url']{
    margin-left: 0.75rem;
  }
}
@media (min-width: 768px){
.link_to_embed [data-behavior='embed_url']{
    display: inline-block;
  }
}
.trix-content img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }
.trix-content .attachment-gallery  > action-text-attachment,.trix-content .attachment-gallery  > .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%;
    }
.trix-content .attachment-gallery.attachment-gallery--2  > action-text-attachment,.trix-content .attachment-gallery.attachment-gallery--4  > action-text-attachment,.trix-content .attachment-gallery.attachment-gallery--2  > .attachment,.trix-content .attachment-gallery.attachment-gallery--4  > .attachment {
        flex-basis: 50%;
        max-width: 50%;
      }
.trix-content .embed {
    display: inline-block;
    line-height: 1;
    margin: 1em 0 !important;
    padding: 0 !important;
    width: 100%;
  }
.trix-content iframe,.trix-content twitter-widget {
    display: inline-block !important;
  }
/* Trix attachment formatting */
.attachment--preview {
  margin: 0.6em 0;
  text-align: center;
  width: 100%;
}
/* Tribute styles */
.tribute-container {
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 0 4px rgba(0,0,0,0.1), 0 5px 20px rgba(0,0,0,0.05);
}
.tribute-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
.tribute-container li {
    background: #fff;
    padding: 0.2em 1em;
    min-width: 15em;
    max-width: 100%;
  }
.tribute-container .highlight{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, 1);
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1));
}
.tribute-container .highlight {
    color: #fff;
  }
.tribute-container .highlight span {
      font-weight: bold;
    }
/* Tweet embeds */
blockquote.twitter-tweet {
    display: inline-block;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-color: #eee #ddd #bbb;
    border-radius: 5px;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    margin: 10px 5px;
    padding: 0 16px 16px;
    max-width: 468px
}
blockquote.twitter-tweet p {
    font-size: 16px;
    font-weight: normal;
    line-height: 20px
}
blockquote.twitter-tweet a {
    color: inherit;
    font-weight: normal;
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: 0 none
}
blockquote.twitter-tweet a:hover,blockquote.twitter-tweet a:focus {
    -webkit-text-decoration: underline;
    text-decoration: underline
}
blockquote.twitter-tweet {
    position: relative;
    background: white;
    padding: 72px 20px 28px !important;
    box-shadow: none;
    border: 1px solid #e1e8ed;
    border-radius: 4px;
    margin: 0;
    font-style: normal;
    text-align: left;
    width: 500px;
    max-width: 100%
}
@media (max-width: 369px) {
    blockquote.twitter-tweet {
        padding:60px 17.5px 21.5px !important
    }
}
blockquote.twitter-tweet:before {
    content: 'Follow';
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 5.5px 12px 6.5px 33px;
    background: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.89 7.012c.808-.496 1.343-1.173 1.605-2.034-.786.417-1.569.703-2.351.861-.703-.756-1.593-1.14-2.66-1.14-1.043 0-1.924.366-2.643 1.078-.715.717-1.076 1.588-1.076 2.605 0 .309.039.585.117.819-3.076-.105-5.622-1.381-7.628-3.837-.34.601-.51 1.213-.51 1.846 0 1.301.549 2.332 1.645 3.089-.625-.053-1.176-.211-1.645-.47 0 .929.273 1.705.82 2.388.549.676 1.254 1.107 2.115 1.291-.312.08-.641.118-.979.118-.312 0-.533-.026-.664-.083.23.757.664 1.371 1.291 1.841.625.472 1.344.721 2.152.743-1.332 1.045-2.855 1.562-4.578 1.562-.422 0-.721-.006-.902-.038 1.697 1.102 3.586 1.649 5.676 1.649 2.139 0 4.029-.542 5.674-1.626 1.645-1.078 2.859-2.408 3.639-3.974.784-1.564 1.172-3.192 1.172-4.892v-.468c.758-.57 1.371-1.212 1.84-1.921-.68.293-1.383.492-2.11.593z' fill='%23ccc'/%3E%3C/svg%3E") 9px center no-repeat;
    background-size: 21px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #ccc;
    font-size: 14px
}
@media (max-width: 369px) {
    blockquote.twitter-tweet:before {
        display:none
    }
}
blockquote.twitter-tweet:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    background: #eee url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 12c2.21 0 4-1.795 4-4 0-2.21-1.79-4-4-4s-4 1.79-4 4c0 2.205 1.79 4 4 4zm0 2c-2.665 0-8 1.335-8 4v2h16v-2c0-2.665-5.335-4-8-4z' fill='%23444'/%3E%3C/svg%3E") center center no-repeat;
    border-radius: 4px
}
@media (max-width: 369px) {
    blockquote.twitter-tweet:after {
        top:17.5px;
        left: 17.5px
    }
}
blockquote.twitter-tweet p {
    white-space: pre-wrap;
    margin: 0 0 28px
}
@media (max-width: 369px) {
    blockquote.twitter-tweet p {
        font-size:14px;
        margin-bottom: 16px
    }
}
blockquote.twitter-tweet a {
    border: 0;
    box-shadow: none;
    color: #2b7bb9
}
blockquote.twitter-tweet>a {
    color: #888
}
.alert,
.banner {
  background: #eee2ce;
  background: var(--base-bg-base);
  color: #374151;
  color: var(--base-text-secondary);
  padding: 16px;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  font-family: Inter;
  font-size: 14px;
  line-height: 20px;
}
.alert svg,.banner svg {
    height: 20px;
    width: 20px;
    color: #2883c4;
    color: var(--base-icon);
    flex-shrink: 0;
  }
.alert h4 a,.banner h4 a,.alert p a,.banner p a {
    display: inline;
    margin-right: 0px;
  }
.alert p,.banner p {
    font-weight: 400;
    color: #374151;
    color: var(--base-text-secondary);
  }
.alert {
  font-weight: 600;
  border-radius: 4px;
  gap: 16px;
}
.alert svg {
    align-self: start;
  }
.alert h4 {
    font-size: 14px;
  }
.alert a {
    color: #ec1c24;
    color: var(--text-primary);
    display: inline-block;
    font-weight: 600;
    margin-top: 16px;
    margin-right: 24px;
  }
.alert li {
    color: #ec1c24;
    color: var(--text-primary);
    font-weight: 400;
  }
.alert.alert-info {
    background: #eff6ff;
    background: var(--bg-info-secondary);
    color: #1d4ed8;
    color: var(--text-on-info-secondary);
  }
.alert.alert-info svg {
      color: #3b82f6;
      color: var(--icon-on-info-secondary);
    }
.alert.alert-info a,.alert.alert-info li {
      color: #1d4ed8;
      color: var(--text-on-info-secondary);
    }
.alert.alert-success {
    background: #f0fdf4;
    background: var(--bg-success-secondary);
    color: #15803d;
    color: var(--text-on-success-secondary);
  }
.alert.alert-success svg {
      color: #16a34a;
      color: var(--icon-on-success-secondary);
    }
.alert.alert-success a,.alert.alert-success li {
      color: #15803d;
      color: var(--text-on-success-secondary);
    }
.alert.alert-error {
    background: #fef2f2;
    background: var(--bg-danger-secondary);
    color: #b91c1c;
    color: var(--text-on-danger-secondary);
  }
.alert.alert-error svg {
      color: #dc2626;
      color: var(--icon-on-danger-secondary);
    }
.alert.alert-error a,.alert.alert-error li {
      color: #b91c1c;
      color: var(--text-on-danger-secondary);
    }
.alert.alert-warning {
    background: #fffbeb;
    background: var(--bg-warning-secondary);
    color: #b45309;
    color: var(--text-on-warning-secondary);
  }
.alert.alert-warning svg {
      color: #b45309;
      color: var(--icon-on-warning-secondary);
    }
.alert.alert-warning a,.alert.alert-warning li {
      color: #b45309;
      color: var(--text-on-warning-secondary);
    }
.banner {
  justify-content: center;
  gap: 8px;
}
.banner.banner-info {
    background: #eff6ff;
    background: var(--bg-info-secondary);
    color: #1d4ed8;
    color: var(--text-on-info-secondary);
  }
.banner.banner-info p {
      color: #1d4ed8;
      color: var(--text-on-info-secondary);
    }
.banner.banner-success {
    background: #f0fdf4;
    background: var(--bg-success-secondary);
    color: #15803d;
    color: var(--text-on-success-secondary);
  }
.banner.banner-success p {
      color: #15803d;
      color: var(--text-on-success-secondary);
    }
.banner.banner-error {
    background: #fef2f2;
    background: var(--bg-danger-secondary);
    color: #b91c1c;
    color: var(--text-on-danger-secondary);
  }
.banner.banner-error p {
      color: #b91c1c;
      color: var(--text-on-danger-secondary);
    }
.banner.banner-warning {
    background: #fffbeb;
    background: var(--bg-warning-secondary);
    color: #b45309;
    color: var(--text-on-warning-secondary);
  }
.banner.banner-warning p {
      color: #b45309;
      color: var(--text-on-warning-secondary);
    }
.banner.banner-impersonate {
    background: #dc2626;
    background: var(--bg-danger-hover);
    color: #fff;
    color: var(--text-on-danger);
  }
.banner.banner-impersonate a {
      color: #fff;
      color: var(--text-on-danger);
    }
.banner.banner-impersonate  > * + * {
      margin-left: 8px;
    }
.icon-alert {
  fill: #b45309;
  fill: var(--icon-on-warning-secondary);
}
.icon-error {
  fill: #dc2626;
  fill: var(--icon-on-danger-secondary);
}
.icon-notice {
  fill: #3b82f6;
  fill: var(--icon-on-info-secondary);
}
.icon-success {
  fill: #16a34a;
  fill: var(--icon-on-success-secondary);
}
.icon-default {
  fill: #2883c4;
  fill: var(--base-icon);
}
.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
.fadeIn {
  animation-name: fadeIn;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes slide-in-from-left {
  from {
    transform: translateX(-100%);
  }
}
@keyframes slide-out-to-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
  }
}
@keyframes slide-out-to-right {
  to {
    transform: translateX(100%);
  }
}
.announcement-new{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, 1);
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.announcement-fix{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, 1);
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.announcement-update{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 252, 231, 1);
  background-color: rgba(220, 252, 231, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(22, 163, 74, 1);
  color: rgba(22, 163, 74, var(--tw-text-opacity, 1));
}
.announcement-improvement{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 232, 255, 1);
  background-color: rgba(243, 232, 255, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(147, 51, 234, 1);
  color: rgba(147, 51, 234, var(--tw-text-opacity, 1));
}
.avatar {
  font-size: 13px;
  font-weight: 600;
  position: relative;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  min-width: 14px;
  color: #fff;
  align-items: center;
  justify-content: center;
}
.avatar .avatar-small {
    position: absolute;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 0 2px #fff;
  }
/* Hotwire's version of data-disable-with */
button                  .when-disabled { display: none; }
button[disabled]        .when-disabled { display: inline; display: initial; }
button                  .when-enabled { display: inline; display: initial; }
button[disabled]        .when-enabled { display: none; }
pre{
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
pre code.hljs{
  border-radius: 0.25rem;
}
pre code.hljs{
  padding: 1rem;
}
code{
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.direct-upload {
  display: inline-block;
  position: relative;
  padding: 2px 4px;
  margin: 0 3px 3px 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  font-size: 11px;
  line-height: 13px;
}
.direct-upload--pending {
  opacity: 0.6;
}
.direct-upload__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  opacity: 0.2;
  background: #0076ff;
  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);
}
.direct-upload--complete .direct-upload__progress {
  opacity: 0.4;
}
.direct-upload--error {
  border-color: red;
}
input[type=file][data-direct-upload-url][disabled] {
  display: none;
}
/* File upload error and success messages */
.file-upload-error {
  animation: slideIn 0.3s ease-out;
}
.file-upload-success {
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Enhanced direct upload error styling */
.direct-upload--error {
  border-color: #ef4444;
  background-color: #fef2f2;
}
.direct-upload--error .direct-upload__filename {
  color: #dc2626;
}
.docs-main {
  min-height: calc(100vh - 64px);
}
.image-placeholder {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, 1);
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity, 1));
}
.form-group {
  margin-bottom: 24px;
  position: relative;
}
.form-group:has( > input:required) label::after,.form-group:has( > select:required) label::after {
    content: "*";
    color: #dc2626;
    color: var(--icon-on-danger-secondary);
  }
.form-group .calendar-icon {
    position: absolute;
    right: 8px;
    top: 50%;
  }
.form-group input:focus-visible  + .calendar-icon path {
      fill: #f16222;
      fill: var(--border-primary-hover);
      color: #f16222;
      color: var(--border-primary-hover);
    }
.form-group input:focus  + .calendar-icon path {
      fill: #f16222;
      fill: var(--border-primary-hover);
      color: #f16222;
      color: var(--border-primary-hover);
    }
.form-group input.error  + .calendar-icon path {
      fill: #dc2626;
      fill: var(--icon-on-danger-secondary);
      color: #dc2626;
      color: var(--icon-on-danger-secondary);
    }
.form-group:has( > [data-controller="flatpickr"]) {
    width: 33.33%;
  }
/* non-input elements (like the Stripe card form) can be styled to look like an input */
div.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-width: 1px;
  padding-top: .5rem;
  padding-right: .75rem;
  padding-bottom: .5rem;
  padding-left: .75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
select {
  background-color: #fff;
  background-color: var(--base-bg-low);
  border: 1px solid #2883c4;
  border: 1px solid var(--base-border-primary);
  border-radius: 0;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  padding: 6px 0px;
  width: 100%;
}
select[disabled],select[read-only] {
    background-color: #e2e8f0;
    background-color: var(--bg-disabled);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    color: #6b7280;
    color: var(--base-text-tertiary);
    cursor: not-allowed;
  }
select:focus,select:focus-visible {
    box-shadow: inset 0 0 0 1px #f16222;
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
    border: 1px solid #f16222;
    border: 1px solid var(--border-primary-hover);
  }
select:not([multiple]) {
  padding-left: 12px;
}
select[multiple] {
  background: #fff;
  background: var(--base-bg-low);
  border: 1px solid #2883c4;
  border: 1px solid var(--base-border-primary);
  border-radius: 0;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  padding: 6px 0px;
  width: 100%;
}
select[multiple]::-moz-placeholder {
    color: #6b7280;
    color: var(--base-text-tertiary);
  }
select[multiple]::placeholder {
    color: #6b7280;
    color: var(--base-text-tertiary);
  }
select[multiple]:focus,select[multiple]:focus-visible {
    box-shadow: inset 0 0 0 1px #f16222;
    box-shadow: inset 0 0 0 1px var(--border-primary-hover);
    border: 1px solid #f16222;
    border: 1px solid var(--border-primary-hover);
  }
select.error[multiple] {
    background: #fef2f2;
    background: var(--bg-danger-secondary);
    box-shadow: inset 0 0 0 1px #ef4444;
    box-shadow: inset 0 0 0 1px var(--border-danger);
    border: 1px solid #ef4444;
    border: 1px solid var(--border-danger);
    color: #b91c1c;
    color: var(--text-on-danger-secondary);
  }
select.error[multiple]:focus,select.error[multiple]:focus-visible {
      background: #fff;
      background: var(--base-bg-low);
    }
select[multiple][disabled],select[multiple][read-only] {
    background: #e2e8f0;
    background: var(--bg-disabled);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    color: #6b7280;
    color: var(--base-text-tertiary);
    cursor: not-allowed;
  }
select[multiple] option {
    color: #1e293b;
    color: var(--text-on-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 4px 12px;
  }
select[multiple] option[selected] {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
    }
label,
.label {
  color: #374151;
  color: var(--base-text-secondary);
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 5px;
}
.form-hint {
  color: #374151;
  color: var(--base-text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 4px;
}
.form-hint.error {
    color: #b91c1c;
    color: var(--text-danger);
    display: flex;
    align-items: center;
  }
.form-hint.error::before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #dc2626;
      background-color: var(--icon-on-danger-secondary);
      -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.70013 2.25C7.27749 1.25 8.72086 1.25 9.29821 2.25L14.4944 11.25C15.0717 12.25 14.35 13.5 13.1953 13.5H2.80302C1.64832 13.5 0.926631 12.25 1.50398 11.25L6.70013 2.25ZM7.99917 4C8.41338 4 8.74917 4.33579 8.74917 4.75V7.75C8.74917 8.16421 8.41338 8.5 7.99917 8.5C7.58496 8.5 7.24917 8.16421 7.24917 7.75V4.75C7.24917 4.33579 7.58496 4 7.99917 4ZM7.99917 12C8.55146 12 8.99917 11.5523 8.99917 11C8.99917 10.4477 8.55146 10 7.99917 10C7.44689 10 6.99917 10.4477 6.99917 11C6.99917 11.5523 7.44689 12 7.99917 12Z" fill="#DC2626"/></svg>');
              mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.70013 2.25C7.27749 1.25 8.72086 1.25 9.29821 2.25L14.4944 11.25C15.0717 12.25 14.35 13.5 13.1953 13.5H2.80302C1.64832 13.5 0.926631 12.25 1.50398 11.25L6.70013 2.25ZM7.99917 4C8.41338 4 8.74917 4.33579 8.74917 4.75V7.75C8.74917 8.16421 8.41338 8.5 7.99917 8.5C7.58496 8.5 7.24917 8.16421 7.24917 7.75V4.75C7.24917 4.33579 7.58496 4 7.99917 4ZM7.99917 12C8.55146 12 8.99917 11.5523 8.99917 11C8.99917 10.4477 8.55146 10 7.99917 10C7.44689 10 6.99917 10.4477 6.99917 11C6.99917 11.5523 7.44689 12 7.99917 12Z" fill="#DC2626"/></svg>');
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      -webkit-mask-position: center;
              mask-position: center;
    }
.caret {
  pointer-events: none;
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
  color: #1e293b;
  color: var(--text-on-secondary);
}
form.inline .form-group,form.inline .file-input-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }
form.inline .form-group .input {
    flex: 1 1 0%;
  }
form.inline .form-group .label {
    width: 25%;
  }
/* Fix flatpickr */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  display: inline-block;
}
.dayContainer .flatpickr-day:hover,.dayContainer .flatpickr-day.today:hover,.dayContainer .flatpickr-day.selected:hover {
    background: #eee2ce;
    background: var(--base-bg-hover);
    border-color: #eee2ce;
    border-color: var(--base-bg-hover);
    color: #f16222;
    color: var(--text-primary-hover);
  }
.dayContainer .flatpickr-day.today {
    border-color: #ec1c24;
    border-color: var(--base-border-focus);
    color: #050707;
    color: var(--base-text);
  }
.dayContainer .flatpickr-day.selected,.dayContainer .flatpickr-day.selected:hover {
    background: #ec1c24;
    background: var(--bg-primary);
    border-color: #ec1c24;
    border-color: var(--bg-primary);
    color: #fff;
    color: var(--text-on-primary);
  }
.flatpickr-time .numInput.flatpickr-hour {
    font-weight: 400;
  }
/* Checkboxes, Radio Buttons, and Switches/Toggles */
.form-picker-group {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.form-picker-group input[type="checkbox"],.form-picker-group input[type='radio'] {
    margin-top: 4px;
  }
.form-picker-group label {
    display: block;
    margin-bottom: 0px;
    color: #050707;
    color: var(--base-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
  }
.form-picker-group:has( > .form-checkbox:disabled) label,.form-picker-group:has( > .form-checkbox:disabled) p,.form-picker-group:has( > [type="checkbox"]:disabled) label,.form-picker-group:has( > [type="checkbox"]:disabled) p,.form-picker-group:has( > .form-radio:disabled) label,.form-picker-group:has( > .form-radio:disabled) p,.form-picker-group:has( > [type="radio"]:disabled) label,.form-picker-group:has( > [type="radio"]:disabled) p {
    color: #9ca3af;
    color: var(--base-text-disabled);
    cursor: not-allowed;
  }
.form-picker-group.switch:has( > .form-checkbox:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled) label {
      color: #9ca3af;
      color: var(--base-text-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > .form-checkbox:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled) label::before {
      background: #cbd5e1;
      background: var(--bg-disabled-secondary);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > .form-checkbox:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled) label::after {
      background: #e2e8f0;
      background: var(--bg-disabled);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > .form-checkbox:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > .form-checkbox:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.form-picker-group.switch:has( > [type="checkbox"]:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.form-picker-group.toggle:has( > [type="checkbox"]:disabled:checked) label::before {
      background: #94a3b8;
      background: var(--bg-disabled-selected);
      cursor: not-allowed;
    }
.switch,
.toggle {
  position: relative;
}
.switch input[type="checkbox"],.toggle input[type="checkbox"] {
    position: absolute;
    top: 2;
    left: 0;
    opacity: 0;
  }
.switch input[type="checkbox"]:checked + label:not(does-not-exist)::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.toggle input[type="checkbox"]:checked + label:not(does-not-exist)::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.switch input[type="checkbox"]:checked + div label::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.toggle input[type="checkbox"]:checked + div label::before {
          background: #ec1c24;
          background: var(--bg-primary);
        }
.switch input[type="checkbox"]:checked + label:not(does-not-exist)::after {
          transform: translateX(26px);
        }
.toggle input[type="checkbox"]:checked + label:not(does-not-exist)::after {
          transform: translateX(26px);
        }
.switch input[type="checkbox"]:checked + div label::after {
          transform: translateX(26px);
        }
.toggle input[type="checkbox"]:checked + div label::after {
          transform: translateX(26px);
        }
.switch label,.toggle label {
    position: relative;
    padding-left: 64px;
  }
.switch label:hover,.toggle label:hover {
      cursor: pointer;
    }
.switch label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch label::after {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle label::after {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch p,.toggle p {
    position: relative;
    padding-left: 64px;
  }
.switch-right,
.toggle-right {
  position: relative;
}
.switch-right input[type="checkbox"],.toggle-right input[type="checkbox"] {
    position: absolute;
    top: 2px;
    left: 120px;
    opacity: 0;
  }
.switch-right:has(.form-checkbox:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.toggle-right:has(.form-checkbox:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.switch-right:has([type="checkbox"]:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.toggle-right:has([type="checkbox"]:checked) label::before {
      background: #ec1c24;
      background: var(--bg-primary);
    }
.switch-right:has(.form-checkbox:checked) label::after {
      transform: translateX(26px);
    }
.toggle-right:has(.form-checkbox:checked) label::after {
      transform: translateX(26px);
    }
.switch-right:has([type="checkbox"]:checked) label::after {
      transform: translateX(26px);
    }
.toggle-right:has([type="checkbox"]:checked) label::after {
      transform: translateX(26px);
    }
.switch-right label,.toggle-right label {
    position: relative;
    padding-right: 64px;
  }
.switch-right label:hover,.toggle-right label:hover {
      cursor: pointer;
    }
.switch-right label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle-right label:focus::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch-right label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.toggle-right label:focus-visible::before {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.switch-right label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      right: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle-right label::before {
      background: #eee2ce;
      background: var(--base-bg-high);
      position: absolute;
      top: 0;
      right: 0;
      height: 24px;
      width: 50px;
      content: "";
      border-radius: 24px;
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch-right label::after {
      position: absolute;
      top: 2px;
      right: 28px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.toggle-right label::after {
      position: absolute;
      top: 2px;
      right: 28px;
      width: 20px;
      height: 20px;
      box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
      background: #eee2ce;
      background: var(--base-bg-base);
      border-radius: 9999px;
      content: "";
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
      transition-duration: 200ms;
    }
.switch-right p,.toggle-right p {
    position: relative;
    padding-right: 64px;
  }
.form-checkbox,
[type="checkbox"],
.form-radio,
[type='radio'] {
  background: #eee2ce;
  background: var(--base-bg-base);
  border: 1px solid #f6a081;
  border: 1px solid var(--base-border-secondary);
  cursor: pointer;
  margin-bottom: 0;
}
.form-checkbox:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
[type="checkbox"]:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
.form-radio:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
[type='radio']:focus-visible {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
.form-checkbox:focus,[type="checkbox"]:focus,.form-radio:focus,[type='radio']:focus {
    outline: 2px solid #ec1c24;
    outline: 2px solid var(--base-border-focus);
    outline-offset: 2px;
  }
.form-checkbox:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
[type="checkbox"]:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
.form-radio:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
[type='radio']:checked {
    color: #ec1c24;
    color: var(--bg-primary);
  }
.form-checkbox:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
[type="checkbox"]:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
.form-radio:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
[type='radio']:not(:checked):hover {
    border: 2px solid #f16222;
    border: 2px solid var(--border-primary);
  }
.form-checkbox:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
[type="checkbox"]:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
.form-radio:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
[type='radio']:disabled {
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-disabled);
    background: #e2e8f0;
    background: var(--bg-disabled);
    cursor: not-allowed;
  }
.form-checkbox:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type="checkbox"]:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-radio:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type='radio']:disabled:checked {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-checkbox:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type="checkbox"]:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-radio:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
[type='radio']:disabled:checked:hover {
      border: 4px solid #94a3b8;
      border: 4px solid var(--bg-disabled-selected);
      color: #e2e8f0;
      color: var(--bg-disabled);
    }
.form-checkbox:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
[type="checkbox"]:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
.form-radio:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
[type='radio']:disabled:hover {
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
    }
.form-checkbox,
[type="checkbox"] {
  border-radius: 0;
}
.form-checkbox:disabled:checked {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
[type="checkbox"]:disabled:checked {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
.form-checkbox:disabled:checked:hover {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
[type="checkbox"]:disabled:checked:hover {
      background-color: #94a3b8;
      background-color: var(--bg-disabled-selected);
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 14px 14px;
      color: #e2e8f0;
      color: var(--text-on-disabled-selected);
      cursor: not-allowed;
    }
/*File Inputs*/
.file-input-group p.label {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #374151;
    color: var(--base-text-secondary);
  }
.file-input-group p.label span {
      font-family: "Noto Sans";
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      color: #dc2626;
      color: var(--icon-on-danger-secondary);
    }
.file-input-group:has( > [type="file"]:required) p.label::after {
    content: "*";
    color: #dc2626;
    color: var(--icon-on-danger-secondary);
    margin-left: -2px;
  }
.file-input-group:has( > [type="file"]:disabled) label,.file-input-group:has( > [type="file"]:disabled) p {
    opacity: 0.6;
    cursor: not-allowed;
  }
.file-input-group input[type="file"] {
    cursor: pointer;
    opacity: 0;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: auto;
  }
.file-input-group label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;
  }
.input-file {
  cursor: pointer;
  opacity: 0;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: auto;
}
.input-file  + label {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
    transition: ease 0.3s background, ease 0.3s transform, ease 0.2s color;
  }
/* A couple handy classes for responsive YouTube and other iframe embeds */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
[data-controller="stripe--embedded-checkout"] iframe{
  border-radius: 0.5rem;
}
/* Prevent scrolling while dialog is open */
body:has(dialog[open]) {
  filter: blur(4px);
  overflow: hidden;
}
/* Slideover animations */
dialog.slideover[open] {
  animation: slide-in-from-right 200ms forwards ease-in-out;
}
dialog.slideover[closing] {
  pointer-events: none;
  animation: slide-out-to-right 200ms forwards ease-in-out;
}
dialog.modal {
  border-radius: 8px;
  max-height: 100vh;
  width: 100%;
}
dialog.modal[open] {
    animation: fadeIn 200ms forwards;
  }
dialog.modal[closing] {
    animation: fadeOut 200ms forwards;
  }
dialog.modal.modal::backdrop {
    background: #050707;
    background: var(--base-bg-backdrop);
    opacity: 0.5;
  }
dialog.modal.modal-sm {
    max-width: 384px;
  }
dialog.modal.modal-md {
    max-width: 448px;
  }
dialog.modal.modal-lg {
    max-width: 512px;
  }
dialog.modal.modal-full {
    border-radius: 0px;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0px;
  }
dialog.modal .modal-card {
    position: relative;
    padding: 24px;
    background: #fff;
    background: var(--base-bg-low);
  }
dialog.modal .modal-card.full {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
dialog.modal .modal-card.full div:first-of-type {
        align-items: flex-start;
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 66.666667%;
        margin-left: auto;
        margin-right: auto;
      }
dialog.modal .modal-card.full div:last-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 16px;
        margin-left: auto;
        margin-right: auto;
        gap: 8px;
        width: 66.666667%;
      }
dialog.modal .modal-card button[type="button"] {
      position: absolute;
      right: 16px;
      top: 16px;
      border-radius: 8px;
      color: #2883c4;
      color: var(--base-icon);
      outline: 2px solid transparent;
      outline-offset: 2px;
    }
dialog.modal .modal-card button[type="button"]:hover {
        cursor: pointer;
        color: #374151;
        color: var(--base-text-secondary);
      }
dialog.modal .modal-card button[type="button"]:disabled {
        pointer-events: none;
      }
dialog.modal .modal-card .modal-title {
      font-size: 18px;
      line-height: 28px;
      margin-bottom: 8px;
      font-weight: 700;
      color: #050707;
      color: var(--base-text);
    }
dialog.modal .modal-card .modal-body {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      margin-bottom: 8px;
      color: #050707;
      color: var(--base-text);
    }
dialog.modal .modal-card .modal-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 16px;
      gap: 8px;
    }
/* ============================================================
   BLUME Navigation — single source of truth
   Replaces nav.css + top_nav.css
   ============================================================ */
/* ----------------------------------------------------------
   Top bar
   ---------------------------------------------------------- */
.top-nav,
header {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.top-nav::after,
.top-nav::before,
header::after,
header::before {
  display: none !important;
}
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 4px 16px;
  min-height: 64px;
  background: #ffffff;
  background: var(--card-bg, #ffffff);
}
@media (min-width: 1024px) {
  .top-nav {
    padding: 0 32px;
  }
}
/* ----------------------------------------------------------
   Logo (pinned left)
   ---------------------------------------------------------- */
.top-nav .logo {
  position: absolute;
  left: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
}
.top-nav .logo a {
  cursor: default;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .top-nav .logo {
    left: 32px;
  }
}
/* ----------------------------------------------------------
   User controls (pinned right)
   ---------------------------------------------------------- */
.nav-user-controls {
  position: absolute;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 100%;
}
@media (min-width: 1024px) {
  .nav-user-controls {
    right: 32px;
  }
}
/* ----------------------------------------------------------
   Nav container (centred flex)
   ---------------------------------------------------------- */
.nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  margin: 0 auto;
  min-height: 100%;
}
.nav-container nav {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
/* ----------------------------------------------------------
   Nav links — base state
   ---------------------------------------------------------- */
.nav-link,
.nav-container nav .nav-link,
.top-nav .nav-link {
  color: #374151;
  font-weight: bold;
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* ----------------------------------------------------------
   Nav links — hover (unselected only)
   ---------------------------------------------------------- */
nav.top-nav .nav-container nav .nav-link:not(.active):hover,
.nav-container nav .nav-link:not(.active):hover,
.top-nav .nav-link:not(.active):hover {
  color: #f16222 !important;
  background-color: #eee2ce !important;
  padding: 5px 8px;
}
/* No hover change on active link */
.nav-container nav .nav-link.active:hover,
.top-nav .nav-link.active:hover {
  color: #f16222 !important;
  background-color: #eee2ce !important;
  padding: 5px 8px;
}
/* ----------------------------------------------------------
   Nav links — active
   ---------------------------------------------------------- */
.nav-link.active,
.nav-container nav .nav-link.active,
.top-nav .nav-link.active {
  color: #f16222 !important;
  background-color: #eee2ce !important;
  padding: 5px 8px;
}
/* Nav container layout variants */
.nav-container--centered {
  justify-content: center;
}
.nav-container--right {
  justify-content: flex-end;
  padding-right: 16px;
}
/* ----------------------------------------------------------
   Events dropdown
   ---------------------------------------------------------- */
.events-nav-item {
  position: relative;
}
.events-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
}
/* ----------------------------------------------------------
   Profile sidebar
   ---------------------------------------------------------- */
.profile-sidebar ul,
.profile-sidebar nav ul,
.profile-sidebar .space-y-2 {
  list-style: none;
  padding-left: 0;
}
.profile-sidebar li {
  list-style: none;
}
/* ----------------------------------------------------------
   Subscription alert banner (in nav area)
   ---------------------------------------------------------- */
.nav-alert {
  background-color: #fef2f2;
  background-color: var(--color-red-50, #fef2f2);
  border-left: 4px solid #ef4444;
  border-left: 4px solid var(--color-red-500, #ef4444);
  padding: 8px 16px;
}
/* ----------------------------------------------------------
   Dark mode
   ---------------------------------------------------------- */
.dark .top-nav {
  background: #ffffff;
  background: var(--card-bg, #111827);
  border-bottom-color: #e5e7eb;
  border-bottom-color: var(--border-color, #374151);
}
.dark .nav-link {
  color: #333333;
  color: var(--text-color, #f3f4f6);
}
.dark .nav-link:hover {
  color: #333333;
  color: var(--text-color, #ffffff);
}
.dark .nav-link.active {
  color: #ec1c24;
  color: var(--bg-primary, #f16222);
  background-color: rgba(238, 226, 206, 0.15);
}
/* Highlights unseen notifications with background color */
[data-notifications-target="notification"]:not([data-seen-at]){
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.dark [data-notifications-target="notification"]:not([data-seen-at]){
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
/* Highlights unread notifications with blue dot */
[data-notifications-target="notification"]:not([data-read-at]) [unread]{
  display: block;
}
nav.pagy.nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
}
nav.pagy.nav a:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
nav.pagy.nav a:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
nav.pagy.nav a:not(.gap) {
    background: #eee2ce;
    background: var(--base-bg-lowest);
    border: 1px solid #eee2ce;
    border: 1px solid var(--base-border-tertiary);
    color: #ec1c24;
    color: var(--text-primary);
    padding: 8px 12px;
    position: relative;
    display: block;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    margin-left: -1px;
  }
nav.pagy.nav a:not(.gap):hover {
      background: #eee2ce;
      background: var(--base-bg-hover);
      color: #f16222;
      color: var(--text-primary-hover);
    }
nav.pagy.nav a.current[aria-current="page"]:not(.gap) {
      background: #ec1c24;
      background: var(--bg-primary);
      color: #fff;
      color: var(--text-on-primary);
      margin-left: -1px;
    }
nav.pagy.nav a:not(.gap):not([href]) {
      background: #eee2ce;
      background: var(--base-bg-lowest);
      color: #6b7280;
      color: var(--base-text-tertiary);
      margin-left: -1px;
    }
/* bridge--form component */
[data-bridge-components~="form"]
[data-controller~="bridge--form"]
[type="submit"] {
  display: none;
}
.tab-active {
  background: linear-gradient(116deg, #3957F4 22%, #2F87EE 90%);
  border-radius: 4px 4px 0px 0px;
}
.tab-active a{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.tab-active a:hover,.tab-active a:focus {
      background: linear-gradient(308deg, #3957F4 24%, #2F87EE 80%);
      border-radius: 4px 4px 0px 0px;
    }
.tab-active a:hover,.tab-active a:focus{
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, 1);
  color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}
.tippy-box[data-theme~="default"] {
  background-color: #050707;
  background-color: var(--base-bg-tooltip);
  opacity: 0.95;
  color: #fff;
  color: var(--base-text-on-tooltip);
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
}
.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #050707;
  border-top-color: var(--base-bg-tooltip);
}
.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: #050707;
  border-bottom-color: var(--base-bg-tooltip);
}
.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: #050707;
  border-left-color: var(--base-bg-tooltip);
}
.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: #050707;
  border-right-color: var(--base-bg-tooltip);
}
trix-editor {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
trix-toolbar {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0;
}
trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.2em;
  height: 2em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: '';
  background-position: center;
  background-repeat: no-repeat;
}
@media (max-device-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M16.5%206v11.5a4%204%200%201%201-8%200V5a2.5%202.5%200%200%201%205%200v10.5a1%201%200%201%201-2%200V6H10v9.5a2.5%202.5%200%200%200%205%200V5a4%204%200%201%200-8%200v12.5a5.5%205.5%200%200%200%2011%200V6h-1.5z%22%2F%3E%3C%2Fsvg%3E);
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M15.6%2011.8c1-.7%201.6-1.8%201.6-2.8a4%204%200%200%200-4-4H7v14h7c2.1%200%203.7-1.7%203.7-3.8%200-1.5-.8-2.8-2.1-3.4zM10%207.5h3a1.5%201.5%200%201%201%200%203h-3v-3zm3.5%209H10v-3h3.5a1.5%201.5%200%201%201%200%203z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M10%205v3h2.2l-3.4%208H6v3h8v-3h-2.2l3.4-8H18V5h-8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M9.88%2013.7a4.3%204.3%200%200%201%200-6.07l3.37-3.37a4.26%204.26%200%200%201%206.07%200%204.3%204.3%200%200%201%200%206.06l-1.96%201.72a.91.91%200%201%201-1.3-1.3l1.97-1.71a2.46%202.46%200%200%200-3.48-3.48l-3.38%203.37a2.46%202.46%200%200%200%200%203.48.91.91%200%201%201-1.3%201.3z%22%2F%3E%3Cpath%20d%3D%22M4.25%2019.46a4.3%204.3%200%200%201%200-6.07l1.93-1.9a.91.91%200%201%201%201.3%201.3l-1.93%201.9a2.46%202.46%200%200%200%203.48%203.48l3.37-3.38c.96-.96.96-2.52%200-3.48a.91.91%200%201%201%201.3-1.3%204.3%204.3%200%200%201%200%206.07l-3.38%203.38a4.26%204.26%200%200%201-6.07%200z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.73%2014l.28.14c.26.15.45.3.57.44.12.14.18.3.18.5%200%20.3-.15.56-.44.75-.3.2-.76.3-1.39.3A13.52%2013.52%200%200%201%207%2014.95v3.37a10.64%2010.64%200%200%200%204.84.88c1.26%200%202.35-.19%203.28-.56.93-.37%201.64-.9%202.14-1.57s.74-1.45.74-2.32c0-.26-.02-.51-.06-.75h-5.21zm-5.5-4c-.08-.34-.12-.7-.12-1.1%200-1.29.52-2.3%201.58-3.02%201.05-.72%202.5-1.08%204.34-1.08%201.62%200%203.28.34%204.97%201l-1.3%202.93c-1.47-.6-2.73-.9-3.8-.9-.55%200-.96.08-1.2.26-.26.17-.38.38-.38.64%200%20.27.16.52.48.74.17.12.53.3%201.05.53H7.23zM3%2013h18v-2H3v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M6%2017h3l2-4V7H5v6h3zm8%200h3l2-4V7h-6v6h3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12%209v3H9v7H6v-7H3V9h9zM8%204h14v3h-6v12h-3V7H8V4z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.2%2012L15%2015.2l1.4%201.4L21%2012l-4.6-4.6L15%208.8l3.2%203.2zM5.8%2012L9%208.8%207.6%207.4%203%2012l4.6%204.6L9%2015.2%205.8%2012z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%204a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm0%206a2%202%200%201%200%200%204%202%202%200%200%200%200-4zm4%203h14v-2H8v2zm0-6h14v-2H8v2zm0-8v2h14V5H8z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M2%2017h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1%203h1.8L2%2013.1v.9h3v-1H3.2L5%2010.9V10H2v1zm5-6v2h14V5H7zm0%2014h14v-2H7v2zm0-6h14v-2H7v2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M12.5%208c-2.6%200-5%201-6.9%202.6L2%207v9h9l-3.6-3.6A8%208%200%200%201%2020%2016l2.4-.8a10.5%2010.5%200%200%200-10-7.2z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M18.4%2010.6a10.5%2010.5%200%200%200-16.9%204.6L4%2016a8%208%200%200%201%2012.7-3.6L13%2016h9V7l-3.6%203.6z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-8.3-.3l2.8%202.9L6%2014.2%204%2012l2-2-1.4-1.5L1%2012l.7.7zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3%2019h19v-2H3v2zm7-6h12v-2H10v2zm-6.9-1L1%2014.2l1.4%201.4L6%2012l-.7-.7-2.8-2.8L1%209.9%203.1%2012zM3%205v2h19V5H3z%22%2F%3E%3C%2Fsvg%3E);
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #f00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  background-color: #3b82f6;
  border: 1px solid #3b82f6;
  border-radius: 0.375rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  font-size: inherit;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
  width: 100%;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group .trix-button--dialog:last-of-type {
    margin-left: 0.25rem;
  }
@media (max-device-width: 768px) {
  trix-toolbar .trix-dialog__link-fields {
    display: block;
  }

    trix-toolbar .trix-dialog__link-fields .trix-button-group {
      margin-top: 0.5rem;
    }
}
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}
trix-editor
  [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value='100'] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: '';
  background-image: url(data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.4L17.6%205%2012%2010.6%206.4%205%205%206.4l5.6%205.6L5%2017.6%206.4%2019l5.6-5.6%205.6%205.6%201.4-1.4-5.6-5.6z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}
.trix-content {
  line-height: 1.5;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir='rtl'] blockquote,
.trix-content blockquote[dir='rtl'] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir='rtl'] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.trix-content .attachment a:hover,
.trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content
  .attachment__caption
  .attachment__name
  + .attachment__size::before {
  content: ' · ';
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/* JSP customizations */
html.dark .trix-content pre{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.font-display{
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
h1, .h1{
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
h2, .h2{
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
}
h3, .h3{
  line-height: 1.5;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  border: none;
  padding: 0;
  border-radius: 0;
  transition: none;
}
h4, .h4{
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
}
h5, .h5{
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
h6, .h6{
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.link{
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.link:hover,.link:focus{
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.transition {
  transition: ease-in-out 0.2s all;
}
/* Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Dark tooltip */
.tooltip-dark {
  min-width: 200px;
  background-color: #111827;
  color: white;
  border: 1px solid #374151;
  border: 1px solid var(--color-gray-700, #374151);
}
/* Wide modal (900px breakpoint) */
.modal-wide {
  width: 900px !important;
  max-width: 900px !important;
  min-width: 900px !important;
}
/* Uppercase spaced label */
.label-uppercase {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Right-anchored dropdown */
.dropdown-right {
  min-width: 10rem;
  right: 0;
}
/* =========================================================================
   General
   ========================================================================= */
/* =========================================================================
   Loaders
   ========================================================================= */
/* =========================================================================
   Headings
   ========================================================================= */
.dark .braintree-placeholder,
.braintree-heading:not(.does-not-exist) {
  color: #d4d4d4;
}
.dark .braintree-icon--bordered {
  background: #FFFFFF;
  border: 1px solid #BBBBBB;
}
/* =========================================================================
   Upper Container
   ========================================================================= */
.dark .braintree-upper-container::-csstools-invalid-before {
  background-color: #FAFAFA;
  border: 1px solid #B5B5B5;
}
/* =========================================================================
   Payment Options
   ========================================================================= */
.dark .braintree-option {
  background-color: #171717;
  border-color: #B5B5B5;
}
.dark .braintree-option:hover {
  background: #404040;
}
.dark .braintree-option.braintree-disabled {
  background: #EAEAEA;
}
.dark .braintree-option.braintree-disabled .braintree-option__label {
  color: #787878;
}
.dark .braintree-option.braintree-disabled .braintree-option__disabled-message span {
  border-bottom: 1px solid #B5B5B5;
}
.dark .braintree-option .braintree-option__label {
  color: #d4d4d4;
}
/* =========================================================================
   Apple Pay buttons
   ========================================================================= */
@supports not (-webkit-appearance: -apple-pay-button) {
  .dark .apple-pay-button-black {
    background-image: -webkit-named-image(apple-pay-logo-white);
    background-color: black;
  }
  .dark .apple-pay-button-white {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
  }
  .dark .apple-pay-button-white-with-line {
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-color: white;
    border: 0.5px solid black;
  }
}
/* =========================================================================
   Sheets
   ========================================================================= */
.dark .braintree-sheet {
  background-color: #171717;
  border: 1px solid #B5B5B5;
}
.dark .braintree-sheet--has-error .braintree-sheet {
  border: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-methods--edit .braintree-method {
  border-left: 2px solid #CA2A2A;
  border-right: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-methods--edit .braintree-method:first-child {
  border-top: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-methods--edit .braintree-method:last-child {
  border-bottom: 2px solid #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-sheet__error {
  color: #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-sheet__error .braintree-sheet__error-icon use {
  fill: #CA2A2A;
}
.dark .braintree-sheet--has-error .braintree-sheet__error .braintree-sheet__error-text {
  color: #CA2A2A;
}
.dark .braintree-show-methods .braintree-sheet--active.braintree-sheet--has-error .braintree-sheet {
  border-color: #CA2A2A;
}
.dark .braintree-show-methods .braintree-sheet--active .braintree-sheet {
  border-color: #219653;
}
.dark .braintree-sheet__header {
  border-bottom: 1px solid #B5B5B5;
}
.dark .braintree-sheet__header .braintree-sheet__text {
  color: #FFFFFF;
}
/* =========================================================================
   Input Forms
   ========================================================================= */
.dark .braintree-form__hosted-field iframe {
  background-color: #171717;
}
.dark .braintree-sheet__content--form .braintree-form__field-group .braintree-form__label {
  color: #FFFFFF;
}
.dark .braintree-sheet__content--form .braintree-form__field-group .braintree-form__descriptor {
  color: #FFFFFF;
}
/* =========================================================================
   Payment Methods
   ========================================================================= */
.dark .braintree-method {
  background-color: white;
  border-color: #B5B5B5;
}
.dark .braintree-method .braintree-method__label {
  color: #000000;
}
.dark .braintree-method .braintree-method__icon {
  background-color: #FAFAFA;
  fill: #FAFAFA;
}
.dark .braintree-methods--active:not(.braintree-methods--edit) .braintree-method--active {
  border-color: #219653;
}
.dark .braintree-methods--active:not(.braintree-methods--edit) .braintree-method--active .braintree-method__check {
  background-color: #219653;
}
.dark .braintree-methods--active:not(.braintree-methods--edit) .braintree-method--active .braintree-method__icon {
  fill: white;
}
.dark .braintree-method__delete-container .braintree-method__delete {
  background-color: #EC493A;
}
.dark .braintree-method__delete-container .braintree-method__delete:hover {
  background-color: #c62213;
}
.dark .braintree-delete-confirmation {
  background: #FAFAFA !important;
  color: #606060;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container .braintree-delete-confirmation__button {
  border-top: 1px solid #B5B5B5;
  background: #FAFAFA;
  color: #C4C4C4;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__yes"] {
  color: white;
  background: #EC493A;
  border-left: solid 1px #b5b5b5;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__yes"]:hover {
  background: #c62213;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__no"] {
  color: #666666;
}
.dark .braintree-delete-confirmation .braintree-delete-confirmation__button-container [data-braintree-id="delete-confirmation__no"]:hover {
  background: #efefef;
}
.dark .braintree-large-button {
  background: #404040;
  color: #e5e5e5;
}
.dark .braintree-large-button:hover {
  background: #262626;
}
.dark .braintree-large-button:hover span {
  border-color: black;
}
.dark .braintree-large-button span {
  border-bottom: 1px solid #B5B5B5;
}
/* =========================================================================
   Dropin Visibility States
   ========================================================================= */
/* =========================================================================
   Javascript hooks
   ========================================================================= */
/* =========================================================================
   Flexbox-free styling
   ========================================================================= */
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: baseline;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: baseline;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #569ff7;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
[data-tippy-root]{max-width:calc(100vw - 10px)}
.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}
.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:currentcolor;border-top-color:initial;transform-origin:center top}
.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}
.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:currentcolor;border-bottom-color:initial;transform-origin:center bottom}
.tippy-box[data-placement^=left]>.tippy-arrow{right:0}
.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:currentcolor;border-left-color:initial;right:-7px;transform-origin:center left}
.tippy-box[data-placement^=right]>.tippy-arrow{left:0}
.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:currentcolor;border-right-color:initial;transform-origin:center right}
.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}
.tippy-arrow{width:16px;height:16px;color:#333}
.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}
.tippy-content{position:relative;padding:5px 9px;z-index:1}
/**
 * tom-select.css (v2.4.3)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0) 8px calc(8px - 2px - 3px - 0);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0 solid #d0d0d0;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0 solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0 solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow-x: hidden;
  overflow-y: auto;
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}
.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}
.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}
.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}
/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(0px, 8px);
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}
.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}
.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}
.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}
:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}
.ts-control:not(.rtl) {
  padding-right: max(.75rem, 0px + 0px) !important;
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-control.rtl {
  padding-left: max(.75rem, 0px + 0px) !important;
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-wrapper {
  position: relative;
}
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/*# sourceMappingURL=tom-select.css.map */
/* Sharp corners on legacy (non-.bz) form controls. The .bz design system sets its
   own field radius (7px), so this rule is scoped to exclude .bz descendants. */
input:not(.bz *),
textarea:not(.bz *),
select:not(.bz *) {
  border-radius: 0 !important;
}
tr.over-budget td.border,
tr.over-budget th.border {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
}
tr.over-budget {
  background-color: #fee2e2 !important;
  border-color: #ef4444 !important;
}
.overflow-x-auto {
  max-width: 100%;
  overflow-x: auto;
}
input[type='number'] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
          appearance: textfield;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Modal animation */
.modal-overlay {
  backdrop-filter: blur(2px);
}
/* Profile sidebar */
.profile-sidebar ul,
.profile-sidebar nav ul,
.profile-sidebar .space-y-2 {
  list-style: none !important;
  padding-left: 0 !important;
}
.profile-sidebar li {
  list-style: none !important;
}
/* Tailwind directives */
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Public Sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 rgba(0,0,0,0);
}
[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(1px + 0px) #2563eb, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder{
  color: #6b7280;
  opacity: 1;
}
input::placeholder,textarea::placeholder{
  color: #6b7280;
  opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}
::-webkit-date-and-time-value{
  min-height: 1.5em;
  text-align: inherit;
}
::-webkit-datetime-edit{
  display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
  padding-top: 0;
  padding-bottom: 0;
}
select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}
[multiple],[size]:where(select:not([size="1"])){
  background-image: none;
  background-image: initial;
  background-position: 0 0;
  background-position: initial;
  background-repeat: repeat;
  background-repeat: initial;
  background-size: auto auto;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: inherit;
          print-color-adjust: inherit;
}
[type='checkbox'],[type='radio']{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 rgba(0,0,0,0);
}
[type='checkbox']{
  border-radius: 0px;
}
[type='radio']{
  border-radius: 100%;
}
[type='checkbox']:focus,[type='radio']:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #2563eb;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(2px + 2px) #2563eb, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
[type='checkbox']:checked,[type='radio']:checked{
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
[type='checkbox']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  [type='checkbox']:checked{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
[type='radio']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
  [type='radio']:checked{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
  border-color: transparent;
  background-color: currentColor;
}
[type='checkbox']:indeterminate{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
@media (forced-colors: active) {
  [type='checkbox']:indeterminate{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
  border-color: transparent;
  background-color: currentColor;
}
[type='file']{
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  background: initial;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}
[type='file']:focus{
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.prose{
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-links);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  text-align: left;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: rgba(17, 24, 39, 0.1);
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: rgba(255, 255, 255, 0.1);
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgba(0, 0, 0, 0.5);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
  margin-bottom: 0;
}
.\!btn {
    display: inline-flex !important;
    padding: 8px 12px !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important
  }
.btn {
    display: inline-flex;
    padding: 8px 12px;
    -webkit-text-decoration: none;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }
.btn:hover,.btn:focus {
      cursor: pointer;
    }
.btn:focus-visible {
      outline: 2px solid #ec1c24;
      outline: 2px solid var(--base-border-focus);
      outline-offset: 2px;
    }
.btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
.btn svg {
      width: 16px;
      height: 16px;
    }
.btn-outline {
    box-shadow: 0 0 rgba(0,0,0,0);
  }
.btn-xs {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
  }
.btn-sm,
  .btn-small {
    padding: 4px 8px;
  }
.btn-lg,
  .btn-large {
    padding: 10px 14px;
  }
.btn-xl {
    padding: 12px 16px;
  }
.btn-icon {
    padding: 8px;
    border-radius: 0;
  }
.btn-icon.btn-xs {
      padding: 4px;
    }
.btn-icon.btn-sm {
      padding: 10px;
    }
.btn-icon.btn-lg {
      padding: 12px;
    }
.btn-icon.btn-xl {
      padding: 14px;
    }
.btn-icon svg {
      width: 24px;
      height: 24px;
    }
.btn-expanded,
  .btn-block {
    display: flex;
    justify-content: center;
    width: 100%;
  }
.btn-primary {
    background: #ec1c24;
    background: var(--bg-primary);
    color: #fff;
    color: var(--text-on-primary);
  }
.btn-primary:hover {
      background: #f16222;
      background: var(--bg-primary-hover);
      color: #fff;
      color: var(--text-on-primary);
    }
.btn-primary:disabled:hover {
      background: #ec1c24;
      background: var(--bg-primary);
      color: #fff;
      color: var(--text-on-primary);
    }
.btn-primary.btn-outline {
      background: transparent;
      color: #ec1c24;
      color: var(--text-primary);
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
    }
.btn-primary.btn-outline:hover {
        background: #f16222;
        background: var(--bg-primary-hover);
        color: #fff;
        color: var(--text-on-primary);
        border: 1px solid #f16222;
        border: 1px solid var(--bg-primary-hover);
      }
.btn-secondary,
  .btn-tertiary {
    background: #fff;
    background: var(--bg-secondary);
    color: #1e293b;
    color: var(--text-on-secondary);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-secondary);
  }
.btn-secondary:hover,.btn-tertiary:hover {
      background: #f1f5f9;
      background: var(--bg-secondary-hover);
      color: #334155;
      color: var(--text-on-secondary-hover);
    }
.btn-secondary:disabled:hover {
      background: #fff;
      background: var(--bg-secondary);
      color: #1e293b;
      color: var(--text-on-secondary);
    }
.btn-tertiary:disabled:hover {
      background: #fff;
      background: var(--bg-secondary);
      color: #1e293b;
      color: var(--text-on-secondary);
    }
.btn-outline.btn-secondary,.btn-outline.btn-tertiary {
      background: transparent;
      color: #1e293b;
      color: var(--text-on-secondary);
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-secondary);
    }
.btn-outline.btn-secondary:hover,.btn-outline.btn-tertiary:hover {
        background: #f1f5f9;
        background: var(--bg-secondary-hover);
        color: #334155;
        color: var(--text-on-secondary-hover);
      }
.btn-danger {
    background: #b91c1c;
    background: var(--bg-danger);
    color: #fff;
    color: var(--text-on-danger);
  }
.btn-danger:hover {
      background: #dc2626;
      background: var(--bg-danger-hover);
      color: #fff;
      color: var(--text-on-danger);
    }
.btn-danger:disabled:hover {
      background: #b91c1c;
      background: var(--bg-danger);
      color: #fff;
      color: var(--text-on-danger);
    }
.btn-danger:focus-visible {
      outline: 2px solid #ef4444;
      outline: 2px solid var(--border-danger-focus);
      outline-offset: 2px;
    }
.btn-danger.btn-outline {
      background: transparent;
      color: #b91c1c;
      color: var(--text-danger);
      border: 1px solid #ef4444;
      border: 1px solid var(--border-danger);
    }
.btn-danger.btn-outline:hover {
        background: #dc2626;
        background: var(--bg-danger-hover);
        color: #fff;
        color: var(--text-on-danger);
        border: 1px solid #dc2626;
        border: 1px solid var(--bg-danger-hover);
      }
.btn-success {
    background: #166534;
    background: var(--bg-success);
    color: #fff;
    color: var(--text-on-success);
  }
.btn-success:hover {
      background: #15803d;
      background: var(--bg-success-hover);
      color: #fff;
      color: var(--text-on-success);
    }
.btn-success:disabled:hover {
      background: #166534;
      background: var(--bg-success);
      color: #fff;
      color: var(--text-on-success);
    }
.btn-success:focus-visible {
      outline: 2px solid #22c55e;
      outline: 2px solid var(--border-success-focus);
      outline-offset: 2px;
    }
.btn-success.btn-outline {
      background: transparent;
      color: #166534;
      color: var(--text-success);
      border: 1px solid #16a34a;
      border: 1px solid var(--border-success);
    }
.btn-success.btn-outline:hover {
        background: #15803d;
        background: var(--bg-success-hover);
        color: #fff;
        color: var(--text-on-success);
        border: 1px solid #15803d;
        border: 1px solid var(--bg-success-hover);
      }
.btn-light,
  .btn-white,
  .btn-gray {
    background: #fff;
    background: var(--bg-light);
    color: #1e293b;
    color: var(--text-on-light);
    border: 1px solid #cbd5e1;
    border: 1px solid var(--border-light);
  }
.btn-light:hover,.btn-white:hover,.btn-gray:hover {
      background: #f8fafc;
      background: var(--bg-light-hover);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-light:disabled:hover {
      background: #fff;
      background: var(--bg-light);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-white:disabled:hover {
      background: #fff;
      background: var(--bg-light);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-gray:disabled:hover {
      background: #fff;
      background: var(--bg-light);
      color: #1e293b;
      color: var(--text-on-light);
    }
.btn-outline.btn-light,.btn-outline.btn-white,.btn-outline.btn-gray {
      background: transparent;
      color: #1e293b;
      color: var(--text-on-light-outline);
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-light);
    }
.btn-outline.btn-light:hover,.btn-outline.btn-white:hover,.btn-outline.btn-gray:hover {
        background: #f8fafc;
        background: var(--bg-light-hover);
        color: #1e293b;
        color: var(--text-on-light);
      }
.btn-dark {
    background: #1e293b;
    background: var(--bg-dark);
    color: #fff;
    color: var(--text-on-dark);
    border: 1px solid #1e293b;
    border: 1px solid var(--bg-dark);
  }
.btn-dark:hover {
      background: #334155;
      background: var(--bg-dark-hover);
      color: #fff;
      color: var(--text-on-dark);
      border: 1px solid #334155;
      border: 1px solid var(--bg-dark-hover);
    }
.btn-dark:disabled:hover {
      background: #1e293b;
      background: var(--bg-dark);
      color: #fff;
      color: var(--text-on-dark);
    }
.btn-dark:focus-visible {
      outline: 2px solid #64748b;
      outline: 2px solid var(--border-dark-focus);
      outline-offset: 2px;
    }
.btn-dark.btn-outline {
      background: transparent;
      color: #1e293b;
      color: var(--text-on-dark-outline);
      border: 1px solid #334155;
      border: 1px solid var(--border-dark);
    }
.btn-dark.btn-outline:hover {
        background: #334155;
        background: var(--bg-dark-hover);
        color: #fff;
        color: var(--text-on-dark);
      }
.btn-link {
    background: transparent;
    color: #ec1c24;
    color: var(--text-primary);
    box-shadow: 0 0 rgba(0,0,0,0);
  }
.btn-link:hover {
      color: #f16222;
      color: var(--text-primary-hover);
    }
.btn-link:disabled:hover {
      background: transparent;
      color: #ec1c24;
      color: var(--text-primary);
    }
.btn-link.btn-icon {
      background: #eee2ce;
      background: var(--base-bg-lowest);
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
    }
.btn-link.btn-icon:hover {
        background: #fff;
        background: var(--base-bg-low);
      }
.card {
    background: #fff;
    background: var(--base-bg-low);
    color: #050707;
    color: var(--base-text);
    border: 1px solid #f6a081;
    border: 1px solid var(--base-border-secondary);
    border-radius: 8px;
    box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10);
    padding: 32px;
  }
.card h3 {
      font-size: 24px;
      font-weight: 700;
      line-height: 32px;
      margin-bottom: 16px;
    }
.card p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
.card-cta-basic {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
.card-image {
    padding: 0px;
    overflow: hidden;
    width: 100%;
  }
.card-image > :last-child {
      padding: 24px;
    }
@media (min-width: 1024px) {
    .card.card-image {
      width: 50%;
    }
  }
.form-control {
    background: #fff;
    background: var(--base-bg-low);
    border: 1px solid #2883c4;
    border: 1px solid var(--base-border-primary);
    border-radius: 0;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    color: #374151;
    color: var(--base-text-secondary);
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 6px 12px;
    width: 100%;
  }
.form-control::-moz-placeholder {
      color: #6b7280;
      color: var(--base-text-tertiary);
    }
.form-control::placeholder {
      color: #6b7280;
      color: var(--base-text-tertiary);
    }
.form-control:focus,.form-control:focus-visible {
      box-shadow: inset 0 0 0 1px #f16222;
      box-shadow: inset 0 0 0 1px var(--border-primary-hover);
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
    }
.form-control.error {
      background: #fef2f2;
      background: var(--bg-danger-secondary);
      box-shadow: inset 0 0 0 1px #ef4444;
      box-shadow: inset 0 0 0 1px var(--border-danger);
      border: 1px solid #ef4444;
      border: 1px solid var(--border-danger);
      color: #b91c1c;
      color: var(--text-on-danger-secondary);
    }
.form-control.error:focus,.form-control.error:focus-visible {
        background: #fff;
        background: var(--base-bg-low);
      }
.form-control[disabled],.form-control[readonly] {
      background: #e2e8f0;
      background: var(--bg-disabled);
      border: 1px solid #cbd5e1;
      border: 1px solid var(--border-disabled);
      color: #6b7280;
      color: var(--base-text-tertiary);
      cursor: not-allowed;
    }
.form-control[data-controller="flatpickr"] {
      color: #374151;
      color: var(--base-text-secondary);
    }
.form-control[data-controller="flatpickr"]:-moz-read-only {
        background: #fff;
        background: var(--base-bg-low);
      }
.form-control[data-controller="flatpickr"]:read-only {
        background: #fff;
        background: var(--base-bg-low);
      }
.form-control[data-controller="flatpickr"]:-moz-read-only:focus, .form-control[data-controller="flatpickr"]:-moz-read-only:focus-visible {
          box-shadow: inset 0 0 0 1px #f16222;
          box-shadow: inset 0 0 0 1px var(--border-primary-hover);
          border: 1px solid #f16222;
          border: 1px solid var(--border-primary-hover);
        }
.form-control[data-controller="flatpickr"]:read-only:focus,.form-control[data-controller="flatpickr"]:read-only:focus-visible {
          box-shadow: inset 0 0 0 1px #f16222;
          box-shadow: inset 0 0 0 1px var(--border-primary-hover);
          border: 1px solid #f16222;
          border: 1px solid var(--border-primary-hover);
        }
.form-control[data-controller="flatpickr"]:-moz-read-only:disabled {
          background: #e2e8f0;
          background: var(--bg-disabled);
          border: 1px solid #cbd5e1;
          border: 1px solid var(--border-disabled);
          color: #6b7280;
          color: var(--base-text-tertiary);
          cursor: not-allowed;
        }
.form-control[data-controller="flatpickr"]:read-only:disabled {
          background: #e2e8f0;
          background: var(--bg-disabled);
          border: 1px solid #cbd5e1;
          border: 1px solid var(--border-disabled);
          color: #6b7280;
          color: var(--base-text-tertiary);
          cursor: not-allowed;
        }
.form-control.error[data-controller="flatpickr"]:-moz-read-only {
          background: #fef2f2;
          background: var(--bg-danger-secondary);
          box-shadow: inset 0 0 0 1px #ef4444;
          box-shadow: inset 0 0 0 1px var(--border-danger);
          border: 1px solid #ef4444;
          border: 1px solid var(--border-danger);
          color: #b91c1c;
          color: var(--text-on-danger-secondary);
        }
.form-control.error[data-controller="flatpickr"]:read-only {
          background: #fef2f2;
          background: var(--bg-danger-secondary);
          box-shadow: inset 0 0 0 1px #ef4444;
          box-shadow: inset 0 0 0 1px var(--border-danger);
          border: 1px solid #ef4444;
          border: 1px solid var(--border-danger);
          color: #b91c1c;
          color: var(--text-on-danger-secondary);
        }
.form-control.error[data-controller="flatpickr"]:-moz-read-only:focus, .form-control.error[data-controller="flatpickr"]:-moz-read-only:focus-visible {
            background: #fff;
            background: var(--base-bg-low);
          }
.form-control.error[data-controller="flatpickr"]:read-only:focus,.form-control.error[data-controller="flatpickr"]:read-only:focus-visible {
            background: #fff;
            background: var(--base-bg-low);
          }
.pill {
    font-family: Inter;
    border-radius: 9999px;
    padding: 4px 16px;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    line-height: 16px;
    text-transform: uppercase;
    background: #eee2ce;
    background: var(--base-bg-highest);
    color: #374151;
    color: var(--base-text-secondary);
    display: inline-flex;
    gap: 8px;
    align-items: flex-start;
  }
.pill-outline {
    background: transparent;
    border: 1px solid #f6a081;
    border: 1px solid var(--base-border-secondary);
    color: #374151;
    color: var(--base-text-secondary);
  }
.pill-primary {
    background: #f16222;
    background: var(--bg-primary-hover);
    color: #fff;
    color: var(--text-on-primary);
  }
.pill-primary.pill-outline {
      background: transparent;
      border: 1px solid #f16222;
      border: 1px solid var(--border-primary-hover);
      color: #f16222;
      color: var(--text-primary-hover);
    }
.pill-secondary {
    background: #15803d;
    background: var(--bg-success-hover);
    color: #fff;
    color: var(--text-on-success);
  }
.pill-secondary.pill-outline {
      background: transparent;
      border: 1px solid #22c55e;
      border: 1px solid var(--border-success-focus);
      color: #22c55e;
      color: var(--border-success-focus);
    }
.pill-tertiary {
    background: #64748b;
    background: var(--bg-dark-secondary); 
    color: #fff; 
    color: var(--text-on-dark);
  }
.pill-tertiary.pill-outline {
      background: transparent;
      border: 1px solid #6b7280;
      border: 1px solid var(--base-text-tertiary); 
      color: #6b7280; 
      color: var(--base-text-tertiary); 
    }
.pill-accent {
    background: #2883c4;
    background: var(--bg-accent);
    color: #fff;
    color: var(--text-on-accent);
  }
.pill-accent.pill-outline {
      background: transparent;
      border: 1px solid #2883c4;
      border: 1px solid var(--border-accent);
      color: #2883c4;
      color: var(--text-accent);
    }
#toasts {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    right: 16px;
    top: 48px;
    z-index: 30;
    width: 100%;
    max-width: 384px;
  }
#toasts  > * + * {
      margin-top: 16px;
    }
@media (max-width:640px) {
    #toasts {
      left: 50%;
      transform: translateX(-50%);
    }
  }
.toast {
    background: #fff;
    background: var(--base-bg-low);
    border-radius: 4px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: space-between;
    padding: 16px;
    width: 100%;
    max-width: 384px;
  }
.toast section:has( > header > svg) p {
      margin-left: 28px;
    }
.toast section header {
      align-items: center;
      display: flex;
      flex-grow: 1;
      gap: 8px;
    }
.toast section header h2 {
        color: #050707;
        color: var(--base-text);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
      }
.toast p {
      color: #374151;
      color: var(--base-text-secondary);
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
    }
.toast div {
      align-items: flex-start;
      display: flex;
      gap: 16px;
    }
.toast div a {
        color: #ec1c24;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
      }
.toast div a:hover {
          color: #f16222;
          color: var(--text-primary-hover);
        }
.toast div button svg path {
          fill: #2883c4;
          fill: var(--base-icon);
        }
.toast div button:hover svg path {
            fill: #374151;
            fill: var(--base-text-secondary);
          }
.well {
    background: #eee2ce;
    background: var(--base-bg-high);
    color: #050707;
    color: var(--base-text);
    padding: 32px;
    font-family: Inter;
    font-style: normal;
    text-align: center;
    border-radius: 8px;
    max-width: 768px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
.well h2 {
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
    }
.well p {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
.well a {
      color: #ec1c24;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      line-height: 24px;
    }
.well-lg {
    padding: 64px;
    gap: 16px;
  }
.well-lg h2 {
      font-size: 36px;
      line-height: 40px;
    }
.well-lg p {
      font-size: 20px;
      line-height: 28px;
    }
.well-lg a {
      font-size: 18px;
      line-height: 28px;
    }
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none{
  pointer-events: none;
}
.pointer-events-auto{
  pointer-events: auto;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-0{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.inset-y-0{
  top: 0px;
  bottom: 0px;
}
.bottom-0{
  bottom: 0px;
}
.bottom-4{
  bottom: 1rem;
}
.left-0{
  left: 0px;
}
.left-2{
  left: 0.5rem;
}
.left-full{
  left: 100%;
}
.right-0{
  right: 0px;
}
.right-4{
  right: 1rem;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-12{
  top: 3rem;
}
.top-4{
  top: 1rem;
}
.top-full{
  top: 100%;
}
.z-10{
  z-index: 10;
}
.z-20{
  z-index: 20;
}
.z-30{
  z-index: 30;
}
.z-40{
  z-index: 40;
}
.z-50{
  z-index: 50;
}
.z-\[99999999\]{
  z-index: 99999999;
}
.z-\[99999\]{
  z-index: 99999;
}
.z-\[9999\]{
  z-index: 9999;
}
.order-3{
  order: 3;
}
.m-0{
  margin: 0px;
}
.m-1{
  margin: 0.25rem;
}
.m-8{
  margin: 2rem;
}
.m-auto{
  margin: auto;
}
.-mx-2{
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-12{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-24{
  margin-top: 6rem;
  margin-bottom: 6rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-8{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.-mb-px{
  margin-bottom: -1px;
}
.-ml-1{
  margin-left: -0.25rem;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-10{
  margin-bottom: 2.5rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-24{
  margin-bottom: 6rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-8{
  margin-bottom: 2rem;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-9{
  margin-left: 2.25rem;
}
.ml-auto{
  margin-left: auto;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-3{
  margin-right: 0.75rem;
}
.mr-4{
  margin-right: 1rem;
}
.mt-0{
  margin-top: 0px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-12{
  margin-top: 3rem;
}
.mt-16{
  margin-top: 4rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-8{
  margin-top: 2rem;
}
.mt-auto{
  margin-top: auto;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.size-5{
  width: 1.25rem;
  height: 1.25rem;
}
.size-6{
  width: 1.5rem;
  height: 1.5rem;
}
.h-0{
  height: 0px;
}
.h-1{
  height: 0.25rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-20{
  height: 5rem;
}
.h-3{
  height: 0.75rem;
}
.h-32{
  height: 8rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-96{
  height: 24rem;
}
.h-\[90vh\]{
  height: 90vh;
}
.h-dvh{
  height: 100dvh;
}
.h-full{
  height: 100%;
}
.max-h-40{
  max-height: 10rem;
}
.max-h-64{
  max-height: 16rem;
}
.max-h-96{
  max-height: 24rem;
}
.max-h-\[90vh\]{
  max-height: 90vh;
}
.max-h-dvh{
  max-height: 100dvh;
}
.max-h-full{
  max-height: 100%;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.min-h-screen{
  min-height: 100vh;
}
.w-1\/12{
  width: 8.333333%;
}
.w-1\/3{
  width: 33.333333%;
}
.w-1\/5{
  width: 20%;
}
.w-1\/6{
  width: 16.666667%;
}
.w-10{
  width: 2.5rem;
}
.w-12{
  width: 3rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\/5{
  width: 40%;
}
.w-20{
  width: 5rem;
}
.w-24{
  width: 6rem;
}
.w-28{
  width: 7rem;
}
.w-3{
  width: 0.75rem;
}
.w-36{
  width: 9rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-64{
  width: 16rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-96{
  width: 24rem;
}
.w-auto{
  width: auto;
}
.w-full{
  width: 100%;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[280px\]{
  min-width: 280px;
}
.min-w-full{
  min-width: 100%;
}
.max-w-2xl{
  max-width: 42rem;
}
.max-w-3xl{
  max-width: 48rem;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-5xl{
  max-width: 64rem;
}
.max-w-7xl{
  max-width: 80rem;
}
.max-w-\[384px\]{
  max-width: 384px;
}
.max-w-full{
  max-width: 100%;
}
.max-w-lg{
  max-width: 32rem;
}
.max-w-md{
  max-width: 28rem;
}
.max-w-screen-xl{
  max-width: 1280px;
}
.max-w-sm{
  max-width: 24rem;
}
.max-w-xl{
  max-width: 36rem;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink{
  flex-shrink: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink{
  flex-shrink: 1;
}
.shrink-0{
  flex-shrink: 0;
}
.flex-grow{
  flex-grow: 1;
}
.table-fixed{
  table-layout: fixed;
}
.border-collapse{
  border-collapse: collapse;
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), -50%) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\/2{
  --tw-translate-x: 50%;
  transform: translate(50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0{
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), 0px) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1{
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), 0.25rem) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(180deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90{
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(90deg) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-95{
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.95) scaleY(.95);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.cursor-help{
  cursor: help;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.cursor-wait{
  cursor: wait;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-y{
  resize: vertical;
}
.resize{
  resize: both;
}
.list-inside{
  list-style-position: inside;
}
.list-decimal{
  list-style-type: decimal;
}
.list-disc{
  list-style-type: disc;
}
.list-none{
  list-style-type: none;
}
.appearance-none{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-baseline{
  align-items: baseline;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-5{
  gap: 1.25rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-8{
  gap: 2rem;
}
.gap-x-4{
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.gap-y-2{
  row-gap: 0.5rem;
}
.gap-y-6{
  row-gap: 1.5rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * 0);
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * (1 - 0));
  margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(0.5rem * calc(1 - 0));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * 0);
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * (1 - 0));
  margin-left: calc(0.75rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(0.75rem * calc(1 - 0));
  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * 0);
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * (1 - 0));
  margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(1rem * calc(1 - 0));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * 0);
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * (1 - 0));
  margin-left: calc(2rem * (1 - var(--tw-space-x-reverse)));
  margin-left: calc(2rem * calc(1 - 0));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * (1 - 0));
  margin-top: calc(0.25rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(0.25rem * calc(1 - 0));
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * 0);
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * (1 - 0));
  margin-top: calc(2.5rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(2.5rem * calc(1 - 0));
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * 0);
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * (1 - 0));
  margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(0.5rem * calc(1 - 0));
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * 0);
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * (1 - 0));
  margin-top: calc(0.75rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(0.75rem * calc(1 - 0));
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * 0);
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * (1 - 0));
  margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(1rem * calc(1 - 0));
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * 0);
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * (1 - 0));
  margin-top: calc(1.25rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(1.25rem * calc(1 - 0));
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * 0);
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * (1 - 0));
  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(1.5rem * calc(1 - 0));
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * 0);
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * (1 - 0));
  margin-top: calc(2rem * (1 - var(--tw-space-y-reverse)));
  margin-top: calc(2rem * calc(1 - 0));
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * 0);
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * (1 - 0));
  border-top-width: calc(1px * (1 - var(--tw-divide-y-reverse)));
  border-top-width: calc(1px * calc(1 - 0));
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * 0);
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgba(243, 244, 246, 1);
  border-color: rgba(243, 244, 246, var(--tw-divide-opacity, 1));
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgba(229, 231, 235, 1);
  border-color: rgba(229, 231, 235, var(--tw-divide-opacity, 1));
}
.overflow-auto{
  overflow: auto;
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.overflow-x-hidden{
  overflow-x: hidden;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal{
  white-space: normal;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.break-words{
  word-wrap: break-word;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-3xl{
  border-radius: 1.5rem;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-sm{
  border-radius: 0.125rem;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b{
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-t{
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l{
  border-left-width: 1px;
}
.border-t{
  border-top-width: 1px;
}
.border-dashed{
  border-style: dashed;
}
.border-blue-200{
  --tw-border-opacity: 1;
  border-color: rgba(191, 219, 254, 1);
  border-color: rgba(191, 219, 254, var(--tw-border-opacity, 1));
}
.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgba(37, 99, 235, 1);
  border-color: rgba(37, 99, 235, var(--tw-border-opacity, 1));
}
.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgba(243, 244, 246, 1);
  border-color: rgba(243, 244, 246, var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, 1);
  border-color: rgba(229, 231, 235, var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, 1);
  border-color: rgba(209, 213, 219, var(--tw-border-opacity, 1));
}
.border-gray-400{
  --tw-border-opacity: 1;
  border-color: rgba(156, 163, 175, 1);
  border-color: rgba(156, 163, 175, var(--tw-border-opacity, 1));
}
.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, 1);
  border-color: rgba(55, 65, 81, var(--tw-border-opacity, 1));
}
.border-gray-900{
  --tw-border-opacity: 1;
  border-color: rgba(17, 24, 39, 1);
  border-color: rgba(17, 24, 39, var(--tw-border-opacity, 1));
}
.border-green-200{
  --tw-border-opacity: 1;
  border-color: rgba(187, 247, 208, 1);
  border-color: rgba(187, 247, 208, var(--tw-border-opacity, 1));
}
.border-orange-200{
  --tw-border-opacity: 1;
  border-color: rgba(254, 215, 170, 1);
  border-color: rgba(254, 215, 170, var(--tw-border-opacity, 1));
}
.border-primary-500{
  --tw-border-opacity: 1;
  border-color: rgba(239, 68, 68, 1);
  border-color: rgba(239, 68, 68, var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgba(254, 202, 202, 1);
  border-color: rgba(254, 202, 202, var(--tw-border-opacity, 1));
}
.border-red-300{
  --tw-border-opacity: 1;
  border-color: rgba(252, 165, 165, 1);
  border-color: rgba(252, 165, 165, var(--tw-border-opacity, 1));
}
.border-red-500{
  --tw-border-opacity: 1;
  border-color: rgba(239, 68, 68, 1);
  border-color: rgba(239, 68, 68, var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgba(226, 232, 240, 1);
  border-color: rgba(226, 232, 240, var(--tw-border-opacity, 1));
}
.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgba(203, 213, 225, 1);
  border-color: rgba(203, 213, 225, var(--tw-border-opacity, 1));
}
.border-transparent{
  border-color: transparent;
}
.border-yellow-200{
  --tw-border-opacity: 1;
  border-color: rgba(254, 240, 138, 1);
  border-color: rgba(254, 240, 138, var(--tw-border-opacity, 1));
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}
.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgba(219, 234, 254, 1);
  background-color: rgba(219, 234, 254, var(--tw-bg-opacity, 1));
}
.bg-blue-400{
  --tw-bg-opacity: 1;
  background-color: rgba(96, 165, 250, 1);
  background-color: rgba(96, 165, 250, var(--tw-bg-opacity, 1));
}
.bg-blue-50{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 246, 255, 1);
  background-color: rgba(239, 246, 255, var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, 1);
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity, 1));
}
.bg-blue-600{
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, 1);
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity, 1));
}
.bg-cyan-100{
  --tw-bg-opacity: 1;
  background-color: rgba(207, 250, 254, 1);
  background-color: rgba(207, 250, 254, var(--tw-bg-opacity, 1));
}
.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, 1);
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity, 1));
}
.bg-gray-300{
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, 1);
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, 1);
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, 1);
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1));
}
.bg-gray-500{
  --tw-bg-opacity: 1;
  background-color: rgba(107, 114, 128, 1);
  background-color: rgba(107, 114, 128, var(--tw-bg-opacity, 1));
}
.bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, 1);
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}
.bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, 1);
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}
.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.bg-green-100{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 252, 231, 1);
  background-color: rgba(220, 252, 231, var(--tw-bg-opacity, 1));
}
.bg-green-400{
  --tw-bg-opacity: 1;
  background-color: rgba(74, 222, 128, 1);
  background-color: rgba(74, 222, 128, var(--tw-bg-opacity, 1));
}
.bg-green-50{
  --tw-bg-opacity: 1;
  background-color: rgba(240, 253, 244, 1);
  background-color: rgba(240, 253, 244, var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgba(34, 197, 94, 1);
  background-color: rgba(34, 197, 94, var(--tw-bg-opacity, 1));
}
.bg-green-600{
  --tw-bg-opacity: 1;
  background-color: rgba(22, 163, 74, 1);
  background-color: rgba(22, 163, 74, var(--tw-bg-opacity, 1));
}
.bg-indigo-100{
  --tw-bg-opacity: 1;
  background-color: rgba(224, 231, 255, 1);
  background-color: rgba(224, 231, 255, var(--tw-bg-opacity, 1));
}
.bg-indigo-400{
  --tw-bg-opacity: 1;
  background-color: rgba(129, 140, 248, 1);
  background-color: rgba(129, 140, 248, var(--tw-bg-opacity, 1));
}
.bg-indigo-600{
  --tw-bg-opacity: 1;
  background-color: rgba(79, 70, 229, 1);
  background-color: rgba(79, 70, 229, var(--tw-bg-opacity, 1));
}
.bg-indigo-800{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 48, 163, 1);
  background-color: rgba(55, 48, 163, var(--tw-bg-opacity, 1));
}
.bg-orange-100{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 237, 213, 1);
  background-color: rgba(255, 237, 213, var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 247, 237, 1);
  background-color: rgba(255, 247, 237, var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 115, 22, 1);
  background-color: rgba(249, 115, 22, var(--tw-bg-opacity, 1));
}
.bg-orange-600{
  --tw-bg-opacity: 1;
  background-color: rgba(234, 88, 12, 1);
  background-color: rgba(234, 88, 12, var(--tw-bg-opacity, 1));
}
.bg-primary-500{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, 1);
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1));
}
.bg-primary-600{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.bg-purple-100{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 232, 255, 1);
  background-color: rgba(243, 232, 255, var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgba(168, 85, 247, 1);
  background-color: rgba(168, 85, 247, var(--tw-bg-opacity, 1));
}
.bg-purple-600{
  --tw-bg-opacity: 1;
  background-color: rgba(147, 51, 234, 1);
  background-color: rgba(147, 51, 234, var(--tw-bg-opacity, 1));
}
.bg-red-100{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 226, 226, 1);
  background-color: rgba(254, 226, 226, var(--tw-bg-opacity, 1));
}
.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgba(248, 113, 113, 1);
  background-color: rgba(248, 113, 113, var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 242, 242, 1);
  background-color: rgba(254, 242, 242, var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgba(239, 68, 68, 1);
  background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1));
}
.bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.bg-slate-100{
  --tw-bg-opacity: 1;
  background-color: rgba(241, 245, 249, 1);
  background-color: rgba(241, 245, 249, var(--tw-bg-opacity, 1));
}
.bg-slate-200{
  --tw-bg-opacity: 1;
  background-color: rgba(226, 232, 240, 1);
  background-color: rgba(226, 232, 240, var(--tw-bg-opacity, 1));
}
.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgba(15, 23, 42, 1);
  background-color: rgba(15, 23, 42, var(--tw-bg-opacity, 1));
}
.bg-teal-100{
  --tw-bg-opacity: 1;
  background-color: rgba(204, 251, 241, 1);
  background-color: rgba(204, 251, 241, var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
}
.bg-yellow-100{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 249, 195, 1);
  background-color: rgba(254, 249, 195, var(--tw-bg-opacity, 1));
}
.bg-yellow-400{
  --tw-bg-opacity: 1;
  background-color: rgba(250, 204, 21, 1);
  background-color: rgba(250, 204, 21, var(--tw-bg-opacity, 1));
}
.bg-yellow-50{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 252, 232, 1);
  background-color: rgba(254, 252, 232, var(--tw-bg-opacity, 1));
}
.bg-yellow-500{
  --tw-bg-opacity: 1;
  background-color: rgba(234, 179, 8, 1);
  background-color: rgba(234, 179, 8, var(--tw-bg-opacity, 1));
}
.bg-opacity-30{
  --tw-bg-opacity: 0.3;
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-opacity-75{
  --tw-bg-opacity: 0.75;
}
.bg-gradient-to-br{
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-slate-900{
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(15, 23, 42, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-slate-800{
  --tw-gradient-to: rgba(30, 41, 59, 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1e293b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-slate-900{
  --tw-gradient-to: #0f172a var(--tw-gradient-to-position);
}
.bg-cover{
  background-size: cover;
}
.bg-no-repeat{
  background-repeat: no-repeat;
}
.fill-current{
  fill: currentColor;
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1{
  padding: 0.25rem;
}
.p-1\.5{
  padding: 0.375rem;
}
.p-12{
  padding: 3rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-20{
  padding-bottom: 5rem;
}
.pb-3{
  padding-bottom: 0.75rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-8{
  padding-bottom: 2rem;
}
.pl-0{
  padding-left: 0px;
}
.pl-3{
  padding-left: 0.75rem;
}
.pl-6{
  padding-left: 1.5rem;
}
.pl-7{
  padding-left: 1.75rem;
}
.pr-10{
  padding-right: 2.5rem;
}
.pr-3{
  padding-right: 0.75rem;
}
.pr-4{
  padding-right: 1rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-4{
  padding-top: 1rem;
}
.pt-5{
  padding-top: 1.25rem;
}
.pt-6{
  padding-top: 1.5rem;
}
.pt-8{
  padding-top: 2rem;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
}
.align-top{
  vertical-align: top;
}
.align-middle{
  vertical-align: middle;
}
.align-bottom{
  vertical-align: bottom;
}
.font-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans{
  font-family: Public Sans, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-light{
  font-weight: 300;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) tabular-nums var(--tw-numeric-fraction);
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) tabular-nums var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5{
  line-height: 1.25rem;
}
.leading-6{
  line-height: 1.5rem;
}
.leading-loose{
  line-height: 2;
}
.leading-none{
  line-height: 1;
}
.leading-normal{
  line-height: 1.5;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.tracking-\[0\.18em\]{
  letter-spacing: 0.18em;
}
.tracking-wide{
  letter-spacing: 0.025em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.tracking-widest{
  letter-spacing: 0.1em;
}
.text-black{
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, var(--tw-text-opacity, 1));
}
.text-blue-500{
  --tw-text-opacity: 1;
  color: rgba(59, 130, 246, 1);
  color: rgba(59, 130, 246, var(--tw-text-opacity, 1));
}
.text-blue-600{
  --tw-text-opacity: 1;
  color: rgba(37, 99, 235, 1);
  color: rgba(37, 99, 235, var(--tw-text-opacity, 1));
}
.text-blue-700{
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, 1);
  color: rgba(29, 78, 216, var(--tw-text-opacity, 1));
}
.text-blue-800{
  --tw-text-opacity: 1;
  color: rgba(30, 64, 175, 1);
  color: rgba(30, 64, 175, var(--tw-text-opacity, 1));
}
.text-blume-orange{
  --tw-text-opacity: 1;
  color: rgba(241, 98, 34, 1);
  color: rgba(241, 98, 34, var(--tw-text-opacity, 1));
}
.text-cyan-800{
  --tw-text-opacity: 1;
  color: rgba(21, 94, 117, 1);
  color: rgba(21, 94, 117, var(--tw-text-opacity, 1));
}
.text-gray-100{
  --tw-text-opacity: 1;
  color: rgba(243, 244, 246, 1);
  color: rgba(243, 244, 246, var(--tw-text-opacity, 1));
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, 1);
  color: rgba(156, 163, 175, var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, 1);
  color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, 1);
  color: rgba(75, 85, 99, var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
  color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}
.text-gray-800{
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, 1);
  color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
}
.text-gray-900{
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, 1);
  color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
}
.text-green-300{
  --tw-text-opacity: 1;
  color: rgba(134, 239, 172, 1);
  color: rgba(134, 239, 172, var(--tw-text-opacity, 1));
}
.text-green-400{
  --tw-text-opacity: 1;
  color: rgba(74, 222, 128, 1);
  color: rgba(74, 222, 128, var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgba(34, 197, 94, 1);
  color: rgba(34, 197, 94, var(--tw-text-opacity, 1));
}
.text-green-600{
  --tw-text-opacity: 1;
  color: rgba(22, 163, 74, 1);
  color: rgba(22, 163, 74, var(--tw-text-opacity, 1));
}
.text-green-700{
  --tw-text-opacity: 1;
  color: rgba(21, 128, 61, 1);
  color: rgba(21, 128, 61, var(--tw-text-opacity, 1));
}
.text-green-800{
  --tw-text-opacity: 1;
  color: rgba(22, 101, 52, 1);
  color: rgba(22, 101, 52, var(--tw-text-opacity, 1));
}
.text-indigo-600{
  --tw-text-opacity: 1;
  color: rgba(79, 70, 229, 1);
  color: rgba(79, 70, 229, var(--tw-text-opacity, 1));
}
.text-indigo-800{
  --tw-text-opacity: 1;
  color: rgba(55, 48, 163, 1);
  color: rgba(55, 48, 163, var(--tw-text-opacity, 1));
}
.text-neutral-500{
  --tw-text-opacity: 1;
  color: rgba(115, 115, 115, 1);
  color: rgba(115, 115, 115, var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgba(249, 115, 22, 1);
  color: rgba(249, 115, 22, var(--tw-text-opacity, 1));
}
.text-orange-800{
  --tw-text-opacity: 1;
  color: rgba(154, 52, 18, 1);
  color: rgba(154, 52, 18, var(--tw-text-opacity, 1));
}
.text-primary-500{
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.text-primary-600{
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.text-purple-800{
  --tw-text-opacity: 1;
  color: rgba(107, 33, 168, 1);
  color: rgba(107, 33, 168, var(--tw-text-opacity, 1));
}
.text-red-400{
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, 1);
  color: rgba(248, 113, 113, var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgba(239, 68, 68, 1);
  color: rgba(239, 68, 68, var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgba(220, 38, 38, 1);
  color: rgba(220, 38, 38, var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgba(185, 28, 28, 1);
  color: rgba(185, 28, 28, var(--tw-text-opacity, 1));
}
.text-red-800{
  --tw-text-opacity: 1;
  color: rgba(153, 27, 27, 1);
  color: rgba(153, 27, 27, var(--tw-text-opacity, 1));
}
.text-slate-200{
  --tw-text-opacity: 1;
  color: rgba(226, 232, 240, 1);
  color: rgba(226, 232, 240, var(--tw-text-opacity, 1));
}
.text-slate-400{
  --tw-text-opacity: 1;
  color: rgba(148, 163, 184, 1);
  color: rgba(148, 163, 184, var(--tw-text-opacity, 1));
}
.text-slate-500{
  --tw-text-opacity: 1;
  color: rgba(100, 116, 139, 1);
  color: rgba(100, 116, 139, var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity: 1;
  color: rgba(71, 85, 105, 1);
  color: rgba(71, 85, 105, var(--tw-text-opacity, 1));
}
.text-slate-700{
  --tw-text-opacity: 1;
  color: rgba(51, 65, 85, 1);
  color: rgba(51, 65, 85, var(--tw-text-opacity, 1));
}
.text-teal-800{
  --tw-text-opacity: 1;
  color: rgba(17, 94, 89, 1);
  color: rgba(17, 94, 89, var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.text-yellow-400{
  --tw-text-opacity: 1;
  color: rgba(250, 204, 21, 1);
  color: rgba(250, 204, 21, var(--tw-text-opacity, 1));
}
.text-yellow-500{
  --tw-text-opacity: 1;
  color: rgba(234, 179, 8, 1);
  color: rgba(234, 179, 8, var(--tw-text-opacity, 1));
}
.text-yellow-600{
  --tw-text-opacity: 1;
  color: rgba(202, 138, 4, 1);
  color: rgba(202, 138, 4, var(--tw-text-opacity, 1));
}
.text-yellow-700{
  --tw-text-opacity: 1;
  color: rgba(161, 98, 7, 1);
  color: rgba(161, 98, 7, var(--tw-text-opacity, 1));
}
.text-yellow-800{
  --tw-text-opacity: 1;
  color: rgba(133, 77, 14, 1);
  color: rgba(133, 77, 14, var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.no-underline{
  text-decoration-line: none;
}
.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-0{
  opacity: 0;
}
.opacity-100{
  opacity: 1;
}
.opacity-25{
  opacity: 0.25;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-75{
  opacity: 0.75;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-sm{
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.shadow-xl{
  --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.blur{
  --tw-blur: blur(8px);
  filter: blur(8px) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-sm{
  --tw-blur: blur(4px);
  filter: blur(4px) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) invert(100%) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter{
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100{
  transition-duration: 100ms;
}
.duration-150{
  transition-duration: 150ms;
}
.duration-200{
  transition-duration: 200ms;
}
.duration-300{
  transition-duration: 300ms;
}
.ease-in{
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-linear{
  transition-timing-function: linear;
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/* Override legacy orange hover styles - use muted gray instead */
.group:hover .group-hover\:text-orange-600 {
  color: #374151 !important; /* gray-700 */
}
.hover\:text-orange-600:hover,
.hover\:text-orange-700:hover {
  color: #374151 !important; /* gray-700 */
}
.text-orange-600,
.text-orange-700 {
  color: #374151 !important; /* gray-700 */
}
.hover\:bg-orange-50:hover {
  background-color: #f3f4f6 !important; /* gray-100 */
  color: #374151 !important; /* gray-700 */
}
/* Reusable styling for settings action buttons - prevent orange text on hover */
.settings-action-btn,
a.settings-action-btn,
.connect-xero-btn,
a.connect-xero-btn,
a[href*="xero_connect"],
a[href*="google_calendar_connect"] {
  color: rgb(17, 24, 39) !important; /* gray-900 */
}
.settings-action-btn:hover,
a.settings-action-btn:hover,
.connect-xero-btn:hover,
a.connect-xero-btn:hover,
a[href*="xero_connect"]:hover,
a[href*="google_calendar_connect"]:hover {
  color: rgb(17, 24, 39) !important; /* gray-900 - keep gray on hover */
}
.settings-action-btn:hover *,
a.settings-action-btn:hover *,
.connect-xero-btn:hover *,
a.connect-xero-btn:hover *,
a[href*="xero_connect"]:hover *,
a[href*="google_calendar_connect"]:hover * {
  color: rgb(17, 24, 39) !important; /* gray-900 - keep child elements gray too */
}
/* Override ALL orange hover text globally - catch any remaining instances */
/* Use maximum specificity to override inline styles */
a.nav-link:hover,
a.nav-link:hover *,
.nav-link:hover,
.nav-link:hover *,
header a.nav-link:hover,
header a.nav-link:hover *,
.nav-container a.nav-link:hover,
.nav-container a.nav-link:hover *,
.top-nav a.nav-link:hover,
.top-nav a.nav-link:hover *,
.nav-container nav a.nav-link:hover,
.nav-container nav a.nav-link:hover *,
.top-nav nav a.nav-link:hover,
.top-nav nav a.nav-link:hover *,
nav a.nav-link:hover,
nav a.nav-link:hover *,
a:hover.nav-link,
a:hover.nav-link * {
  color: #374151 !important; /* gray-700 - override any orange hover including inline styles */
}
/* Override any inline styles with orange color on hover - target style attribute */
a[style*='f16222']:hover,
a[style*='f16222']:hover *,
.nav-link[style*='f16222']:hover,
.nav-link[style*='f16222']:hover *,
a.nav-link[style*='f16222']:hover,
a.nav-link[style*='f16222']:hover * {
  color: #374151 !important; /* gray-700 */
}
/* Additional high-specificity selectors for navigation */
.nav-container nav .nav-link:hover,
.top-nav .nav-link:hover,
.nav-container a:hover,
.top-nav a:hover {
  color: #374151 !important; /* gray-700 */
}
/* Final override - ensure ALL nav links use gray on hover, overriding any remaining styles */
.nav-link:not(.active):hover,
a.nav-link:not(.active):hover,
header a.nav-link:not(.active):hover,
.nav-container a.nav-link:not(.active):hover,
.top-nav a.nav-link:not(.active):hover,
.nav-container nav a.nav-link:not(.active):hover,
.top-nav nav a.nav-link:not(.active):hover,
nav a.nav-link:not(.active):hover {
  color: #374151 !important; /* gray-700 - final override */
}
.btn-peach {
  background-color: #eee2ce;
  color: #ff7a45;
  border-radius: 0;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-peach:hover,
.btn-peach:focus {
  background-color: #f2cfa9;
  color: #ff5c1a;
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.18);
}
.dark .dark\:prose-invert{
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.file\:mr-3::file-selector-button{
  margin-right: 0.75rem;
}
.file\:mr-4::file-selector-button{
  margin-right: 1rem;
}
.file\:rounded-full::file-selector-button{
  border-radius: 9999px;
}
.file\:border-0::file-selector-button{
  border-width: 0px;
}
.file\:bg-gray-50::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, 1);
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1));
}
.file\:bg-gray-900::file-selector-button{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.file\:px-4::file-selector-button{
  padding-left: 1rem;
  padding-right: 1rem;
}
.file\:py-2::file-selector-button{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.file\:text-sm::file-selector-button{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-semibold::file-selector-button{
  font-weight: 600;
}
.file\:text-gray-700::file-selector-button{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
  color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}
.file\:text-white::file-selector-button{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.backdrop\:bg-black\/50::backdrop{
  background-color: rgba(0, 0, 0, 0.5);
}
.backdrop\:backdrop-blur-sm::backdrop{
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: blur(4px) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.only\:block:only-child{
  display: block;
}
.hover\:cursor-pointer:hover{
  cursor: pointer;
}
.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, 1);
  border-color: rgba(209, 213, 219, var(--tw-border-opacity, 1));
}
.hover\:border-gray-500:hover{
  --tw-border-opacity: 1;
  border-color: rgba(107, 114, 128, 1);
  border-color: rgba(107, 114, 128, var(--tw-border-opacity, 1));
}
.hover\:border-neutral-300:hover{
  --tw-border-opacity: 1;
  border-color: rgba(212, 212, 212, 1);
  border-color: rgba(212, 212, 212, var(--tw-border-opacity, 1));
}
.hover\:bg-black:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(37, 99, 235, 1);
  background-color: rgba(37, 99, 235, var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(29, 78, 216, 1);
  background-color: rgba(29, 78, 216, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, 1);
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-300:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(209, 213, 219, 1);
  background-color: rgba(209, 213, 219, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-400:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(156, 163, 175, 1);
  background-color: rgba(156, 163, 175, var(--tw-bg-opacity, 1));
}
.hover\:bg-gray-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, 1);
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity, 1));
}
.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(22, 163, 74, 1);
  background-color: rgba(22, 163, 74, var(--tw-bg-opacity, 1));
}
.hover\:bg-green-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(21, 128, 61, 1);
  background-color: rgba(21, 128, 61, var(--tw-bg-opacity, 1));
}
.hover\:bg-indigo-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(67, 56, 202, 1);
  background-color: rgba(67, 56, 202, var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(234, 88, 12, 1);
  background-color: rgba(234, 88, 12, var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(194, 65, 12, 1);
  background-color: rgba(194, 65, 12, var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(147, 51, 234, 1);
  background-color: rgba(147, 51, 234, var(--tw-bg-opacity, 1));
}
.hover\:bg-purple-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(126, 34, 206, 1);
  background-color: rgba(126, 34, 206, var(--tw-bg-opacity, 1));
}
.hover\:bg-red-200:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(254, 202, 202, 1);
  background-color: rgba(254, 202, 202, var(--tw-bg-opacity, 1));
}
.hover\:bg-red-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, 1);
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(241, 245, 249, 1);
  background-color: rgba(241, 245, 249, var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity, 1));
}
.hover\:bg-yellow-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(202, 138, 4, 1);
  background-color: rgba(202, 138, 4, var(--tw-bg-opacity, 1));
}
.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, 1);
  color: rgba(0, 0, 0, var(--tw-text-opacity, 1));
}
.hover\:text-blue-700:hover{
  --tw-text-opacity: 1;
  color: rgba(29, 78, 216, 1);
  color: rgba(29, 78, 216, var(--tw-text-opacity, 1));
}
.hover\:text-blue-800:hover{
  --tw-text-opacity: 1;
  color: rgba(30, 64, 175, 1);
  color: rgba(30, 64, 175, var(--tw-text-opacity, 1));
}
.hover\:text-gray-500:hover{
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, 1);
  color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}
.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgba(75, 85, 99, 1);
  color: rgba(75, 85, 99, var(--tw-text-opacity, 1));
}
.hover\:text-gray-700:hover{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, 1);
  color: rgba(55, 65, 81, var(--tw-text-opacity, 1));
}
.hover\:text-gray-800:hover{
  --tw-text-opacity: 1;
  color: rgba(31, 41, 55, 1);
  color: rgba(31, 41, 55, var(--tw-text-opacity, 1));
}
.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, 1);
  color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
}
.hover\:text-indigo-500:hover{
  --tw-text-opacity: 1;
  color: rgba(99, 102, 241, 1);
  color: rgba(99, 102, 241, var(--tw-text-opacity, 1));
}
.hover\:text-indigo-900:hover{
  --tw-text-opacity: 1;
  color: rgba(49, 46, 129, 1);
  color: rgba(49, 46, 129, var(--tw-text-opacity, 1));
}
.hover\:text-neutral-700:hover{
  --tw-text-opacity: 1;
  color: rgba(64, 64, 64, 1);
  color: rgba(64, 64, 64, var(--tw-text-opacity, 1));
}
.hover\:text-red-700:hover{
  --tw-text-opacity: 1;
  color: rgba(185, 28, 28, 1);
  color: rgba(185, 28, 28, var(--tw-text-opacity, 1));
}
.hover\:text-red-900:hover{
  --tw-text-opacity: 1;
  color: rgba(127, 29, 29, 1);
  color: rgba(127, 29, 29, var(--tw-text-opacity, 1));
}
.hover\:text-slate-700:hover{
  --tw-text-opacity: 1;
  color: rgba(51, 65, 85, 1);
  color: rgba(51, 65, 85, var(--tw-text-opacity, 1));
}
.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.hover\:text-yellow-900:hover{
  --tw-text-opacity: 1;
  color: rgba(113, 63, 18, 1);
  color: rgba(113, 63, 18, var(--tw-text-opacity, 1));
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:opacity-100:hover{
  opacity: 1;
}
.hover\:opacity-70:hover{
  opacity: 0.7;
}
.hover\:file\:bg-black::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity, 1));
}
.hover\:file\:bg-gray-100::file-selector-button:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, 1);
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity, 1));
}
.focus\:border-blue-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, 1);
  border-color: rgba(59, 130, 246, var(--tw-border-opacity, 1));
}
.focus\:border-gray-600:focus{
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, 1);
  border-color: rgba(75, 85, 99, var(--tw-border-opacity, 1));
}
.focus\:border-green-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(34, 197, 94, 1);
  border-color: rgba(34, 197, 94, var(--tw-border-opacity, 1));
}
.focus\:border-indigo-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(99, 102, 241, 1);
  border-color: rgba(99, 102, 241, var(--tw-border-opacity, 1));
}
.focus\:border-orange-500:focus{
  --tw-border-opacity: 1;
  border-color: rgba(249, 115, 22, 1);
  border-color: rgba(249, 115, 22, var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: /*!*/ /*!*/ 0 0 0 0px #fff, /*!*/ /*!*/ 0 0 0 calc(2px + 2px) #2563eb, 0 0 rgba(0,0,0,0);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
}
.focus\:ring-blue-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-400:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(156, 163, 175, var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(107, 114, 128, var(--tw-ring-opacity, 1));
}
.focus\:ring-gray-600:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(75, 85, 99, var(--tw-ring-opacity, 1));
}
.focus\:ring-green-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(34, 197, 94, var(--tw-ring-opacity, 1));
}
.focus\:ring-indigo-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity, 1));
}
.focus\:ring-orange-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(249, 115, 22, var(--tw-ring-opacity, 1));
}
.focus\:ring-red-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(239, 68, 68, var(--tw-ring-opacity, 1));
}
.focus\:ring-yellow-500:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(234, 179, 8, var(--tw-ring-opacity, 1));
}
.focus\:ring-offset-2:focus{
  --tw-ring-offset-width: 2px;
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled{
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.group:hover .group-hover\:inline-block{
  display: inline-block;
}
.group:hover .group-hover\:text-gray-900{
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, 1);
  color: rgba(17, 24, 39, var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100{
  opacity: 1;
}
.peer:checked ~ .peer-checked\:hidden{
  display: none;
}
.peer:checked ~ .peer-checked\:blur-none{
  --tw-blur:  ;
  filter:   var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.dark .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity: 1;
  border-color: rgba(55, 65, 81, 1);
  border-color: rgba(55, 65, 81, var(--tw-divide-opacity, 1));
}
.dark .dark\:rounded{
  border-radius: 0.25rem;
}
.dark .dark\:border{
  border-width: 1px;
}
.dark .dark\:border-blue-700{
  --tw-border-opacity: 1;
  border-color: rgba(29, 78, 216, 1);
  border-color: rgba(29, 78, 216, var(--tw-border-opacity, 1));
}
.dark .dark\:border-gray-400\/50{
  border-color: rgba(156, 163, 175, 0.5);
}
.dark .dark\:border-gray-600{
  --tw-border-opacity: 1;
  border-color: rgba(75, 85, 99, 1);
  border-color: rgba(75, 85, 99, var(--tw-border-opacity, 1));
}
.dark .dark\:border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, 1);
  border-color: rgba(55, 65, 81, var(--tw-border-opacity, 1));
}
.dark .dark\:border-gray-800{
  --tw-border-opacity: 1;
  border-color: rgba(31, 41, 55, 1);
  border-color: rgba(31, 41, 55, var(--tw-border-opacity, 1));
}
.dark .dark\:border-orange-700{
  --tw-border-opacity: 1;
  border-color: rgba(194, 65, 12, 1);
  border-color: rgba(194, 65, 12, var(--tw-border-opacity, 1));
}
.dark .dark\:bg-blue-900\/30{
  background-color: rgba(30, 58, 138, 0.3);
}
.dark .dark\:bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, 1);
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-600{
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, 1);
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-700{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, 1);
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-900{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-gray-900\/75{
  background-color: rgba(17, 24, 39, 0.75);
}
.dark .dark\:bg-orange-900\/30{
  background-color: rgba(124, 45, 18, 0.3);
}
.dark .dark\:bg-primary-800{
  --tw-bg-opacity: 1;
  background-color: rgba(153, 27, 27, 1);
  background-color: rgba(153, 27, 27, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-primary-900{
  --tw-bg-opacity: 1;
  background-color: rgba(127, 29, 29, 1);
  background-color: rgba(127, 29, 29, var(--tw-bg-opacity, 1));
}
.dark .dark\:bg-red-600{
  --tw-bg-opacity: 1;
  background-color: rgba(220, 38, 38, 1);
  background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1));
}
.dark .dark\:text-gray-100{
  --tw-text-opacity: 1;
  color: rgba(243, 244, 246, 1);
  color: rgba(243, 244, 246, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-200{
  --tw-text-opacity: 1;
  color: rgba(229, 231, 235, 1);
  color: rgba(229, 231, 235, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-200\/75{
  color: rgba(229, 231, 235, 0.75);
}
.dark .dark\:text-gray-300{
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, 1);
  color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-300\/75{
  color: rgba(209, 213, 219, 0.75);
}
.dark .dark\:text-gray-400{
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, 1);
  color: rgba(156, 163, 175, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-50{
  --tw-text-opacity: 1;
  color: rgba(249, 250, 251, 1);
  color: rgba(249, 250, 251, var(--tw-text-opacity, 1));
}
.dark .dark\:text-gray-500{
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, 1);
  color: rgba(107, 114, 128, var(--tw-text-opacity, 1));
}
.dark .dark\:text-orange-200{
  --tw-text-opacity: 1;
  color: rgba(254, 215, 170, 1);
  color: rgba(254, 215, 170, var(--tw-text-opacity, 1));
}
.dark .dark\:text-white{
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:bg-gray-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(75, 85, 99, 1);
  background-color: rgba(75, 85, 99, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-gray-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(55, 65, 81, 1);
  background-color: rgba(55, 65, 81, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-gray-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(31, 41, 55, 1);
  background-color: rgba(31, 41, 55, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-gray-900:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, 1);
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity, 1));
}
.dark .dark\:hover\:bg-red-700:hover{
  --tw-bg-opacity: 1;
  background-color: rgba(185, 28, 28, 1);
  background-color: rgba(185, 28, 28, var(--tw-bg-opacity, 1));
}
.dark .hover\:dark\:bg-gray-900\/75:hover{
  background-color: rgba(17, 24, 39, 0.75);
}
.dark .dark\:hover\:text-gray-200:hover{
  --tw-text-opacity: 1;
  color: rgba(229, 231, 235, 1);
  color: rgba(229, 231, 235, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:text-gray-300:hover{
  --tw-text-opacity: 1;
  color: rgba(209, 213, 219, 1);
  color: rgba(209, 213, 219, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:text-gray-400:hover{
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, 1);
  color: rgba(156, 163, 175, var(--tw-text-opacity, 1));
}
.dark .dark\:hover\:text-neutral-300:hover{
  --tw-text-opacity: 1;
  color: rgba(212, 212, 212, 1);
  color: rgba(212, 212, 212, var(--tw-text-opacity, 1));
}
.dark .dark\:focus\:ring-offset-gray-800:focus{
  --tw-ring-offset-color: #1f2937;
}
@media (min-width: 640px){
  .sm\:fixed{
    position: fixed;
  }
  .sm\:order-2{
    order: 2;
  }
  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }
  .sm\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .sm\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }
  .sm\:my-8{
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .sm\:mb-0{
    margin-bottom: 0px;
  }
  .sm\:ml-3{
    margin-left: 0.75rem;
  }
  .sm\:ml-4{
    margin-left: 1rem;
  }
  .sm\:mt-0{
    margin-top: 0px;
  }
  .sm\:mt-16{
    margin-top: 4rem;
  }
  .sm\:block{
    display: block;
  }
  .sm\:flex{
    display: flex;
  }
  .sm\:table-cell{
    display: table-cell;
  }
  .sm\:hidden{
    display: none;
  }
  .sm\:h-10{
    height: 2.5rem;
  }
  .sm\:h-screen{
    height: 100vh;
  }
  .sm\:w-10{
    width: 2.5rem;
  }
  .sm\:w-96{
    width: 24rem;
  }
  .sm\:w-\[300px\]{
    width: 300px;
  }
  .sm\:w-auto{
    width: auto;
  }
  .sm\:w-full{
    width: 100%;
  }
  .sm\:max-w-2xl{
    max-width: 42rem;
  }
  .sm\:max-w-4xl{
    max-width: 56rem;
  }
  .sm\:max-w-lg{
    max-width: 32rem;
  }
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:flex-row{
    flex-direction: row;
  }
  .sm\:flex-row-reverse{
    flex-direction: row-reverse;
  }
  .sm\:items-start{
    align-items: flex-start;
  }
  .sm\:items-center{
    align-items: center;
  }
  .sm\:justify-between{
    justify-content: space-between;
  }
  .sm\:overflow-scroll{
    overflow: scroll;
  }
  .sm\:rounded-lg{
    border-radius: 0.5rem;
  }
  .sm\:rounded-md{
    border-radius: 0.375rem;
  }
  .sm\:p-0{
    padding: 0px;
  }
  .sm\:p-6{
    padding: 1.5rem;
  }
  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .sm\:pb-4{
    padding-bottom: 1rem;
  }
  .sm\:pl-\[300px\]{
    padding-left: 300px;
  }
  .sm\:text-left{
    text-align: left;
  }
  .sm\:align-middle{
    vertical-align: middle;
  }
  .sm\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 768px){
  .md\:my-6{
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .md\:inline{
    display: inline;
  }
  .md\:flex{
    display: flex;
  }
  .md\:hidden{
    display: none;
  }
  .md\:min-h-screen{
    min-height: 100vh;
  }
  .md\:w-1\/2{
    width: 50%;
  }
  .md\:w-1\/5{
    width: 20%;
  }
  .md\:w-4\/5{
    width: 80%;
  }
  .md\:max-w-\[300px\]{
    max-width: 300px;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:bg-left{
    background-position: left;
  }
  .md\:px-20{
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .md\:pb-0{
    padding-bottom: 0px;
  }
  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
@media (min-width: 1024px){
  .lg\:absolute{
    position: absolute;
  }
  .lg\:right-0{
    right: 0px;
  }
  .lg\:my-24{
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .lg\:-mt-4{
    margin-top: -1rem;
  }
  .lg\:mt-2{
    margin-top: 0.5rem;
  }
  .lg\:flex{
    display: flex;
  }
  .lg\:w-1\/6{
    width: 16.666667%;
  }
  .lg\:max-w-4xl{
    max-width: 56rem;
  }
  .lg\:flex-1{
    flex: 1 1 0%;
  }
  .lg\:flex-grow{
    flex-grow: 1;
  }
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:rounded{
    border-radius: 0.25rem;
  }
  .lg\:bg-center{
    background-position: center;
  }
  .lg\:p-0{
    padding: 0px;
  }
  .lg\:p-10{
    padding: 2.5rem;
  }
  .lg\:p-2{
    padding: 0.5rem;
  }
  .lg\:p-4{
    padding: 1rem;
  }
  .lg\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lg\:px-40{
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .lg\:pr-4{
    padding-right: 1rem;
  }
  .lg\:text-right{
    text-align: right;
  }
  .lg\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .lg\:hover\:bg-primary-50:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(254, 242, 242, 1);
    background-color: rgba(254, 242, 242, var(--tw-bg-opacity, 1));
  }
}
@media (min-width: 1280px){
  .xl\:w-2\/3{
    width: 66.666667%;
  }
  .xl\:px-56{
    padding-left: 14rem;
    padding-right: 14rem;
  }
}