@charset "UTF-8";

/* ==========================================================================
   PICNIC TRAVELS — GLOBAL DESIGN SYSTEM
   --------------------------------------------------------------------------
   One stylesheet. No inline styles. No per-page overrides.

   Cascade layers give a fixed, predictable priority order, so utilities
   always beat components without a single `!important`:

       tokens  <  base  <  layout  <  components  <  utilities

   Anything unlayered would outrank all of it, so every rule below lives in
   a layer on purpose.

   Responsiveness model — "adapt, don't snap":
   Type and section spacing are fluid via clamp(), and grids use
   `repeat(auto-fit, minmax(min(<basis>, 100%), 1fr))`. Columns are chosen
   from the space actually available, so the layout reflows continuously as
   the viewport changes instead of jumping at breakpoints. Media queries are
   reserved for genuine mode changes (sidebar becomes a drawer, table becomes
   a stack) rather than for resizing things.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */

@layer tokens {
  :root {
    /* --- Brand palette ---------------------------------------------------- */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;

    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;

    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-600: #16a34a;
    --green-700: #15803d;

    --amber-50:  #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-600: #d97706;
    --amber-700: #b45309;

    --red-50:  #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-600: #dc2626;
    --red-700: #b91c1c;

    --cyan-50:  #ecfeff;
    --cyan-100: #cffafe;
    --cyan-200: #a5f3fc;
    --cyan-600: #0891b2;
    --cyan-700: #0e7490;

    --pink-50:  #fdf2f8;
    --pink-300: #f9a8d4;
    --pink-500: #ec4899;

    /* --- Semantic roles --------------------------------------------------- */
    --color-primary:        var(--blue-600);
    --color-primary-hover:  var(--blue-700);
    --color-primary-active: var(--blue-800);
    --color-primary-soft:   var(--blue-50);
    --color-primary-border: var(--blue-200);
    --color-on-primary:     #ffffff;

    --color-success:        var(--green-600);
    --color-success-soft:   var(--green-50);
    --color-success-border: var(--green-200);

    --color-warning:        var(--amber-600);
    --color-warning-soft:   var(--amber-50);
    --color-warning-border: var(--amber-200);

    --color-danger:         var(--red-600);
    --color-danger-soft:    var(--red-50);
    --color-danger-border:  var(--red-200);

    --color-info:           var(--cyan-600);
    --color-info-soft:      var(--cyan-50);
    --color-info-border:    var(--cyan-200);

    /* --- Surfaces & text -------------------------------------------------- */
    --color-bg:             var(--slate-50);
    --color-surface:        #ffffff;
    --color-surface-sunken: var(--slate-50);
    --color-surface-raised: #ffffff;
    --color-border:         var(--slate-200);
    --color-border-strong:  var(--slate-300);

    --color-text:           var(--slate-900);
    --color-text-secondary: var(--slate-500);
    --color-text-muted:     var(--slate-400);
    --color-text-inverse:   #ffffff;

    /* --- Dark shell (sidebar, public nav, hero) --------------------------- */
    --color-shell:          var(--slate-900);
    --color-shell-raised:   var(--slate-800);
    --color-shell-text:     var(--slate-400);
    --color-shell-text-strong: #ffffff;
    --color-shell-border:   rgb(255 255 255 / 0.08);
    --gradient-shell: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 50%, var(--slate-900) 100%);
    --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-800) 100%);
    --gradient-banner: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-800) 55%, var(--blue-800) 100%);

    /* --- Fluid type scale -------------------------------------------------
       Each step interpolates between a mobile and a desktop size across the
       360px–1280px viewport range, so text never jumps at a breakpoint.     */
    --text-2xs: 0.6875rem;
    --text-xs:  0.75rem;
    --text-sm:  0.8125rem;
    --text-base: 0.875rem;
    --text-md:  1rem;
    --text-lg:  clamp(1.0625rem, 0.99rem + 0.33vw, 1.125rem);
    --text-xl:  clamp(1.125rem, 1.03rem + 0.43vw, 1.25rem);
    --text-2xl: clamp(1.3125rem, 1.16rem + 0.65vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 1.24rem + 1.09vw, 1.875rem);
    --text-4xl: clamp(1.875rem, 1.44rem + 1.85vw, 2.5rem);
    --text-5xl: clamp(2.25rem, 1.28rem + 4.13vw, 3.5rem);

    --leading-tight: 1.2;
    --leading-snug:  1.4;
    --leading-normal: 1.6;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* --- Spacing scale ---------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Fluid rhythm — used for page padding and section gaps only, so that
       component internals stay identical at every width. */
    --space-gutter:  clamp(1rem, 0.6rem + 1.8vw, 2rem);
    --space-section: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);

    /* --- Radii ------------------------------------------------------------ */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-pill: 9999px;

    /* --- Elevation -------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.06), 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md: 0 4px 12px rgb(15 23 42 / 0.06), 0 2px 4px rgb(15 23 42 / 0.04);
    --shadow-lg: 0 12px 28px rgb(15 23 42 / 0.10), 0 4px 8px rgb(15 23 42 / 0.04);
    --shadow-xl: 0 24px 56px rgb(15 23 42 / 0.16);
    --shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.18);
    --shadow-focus-danger: 0 0 0 3px rgb(220 38 38 / 0.18);

    /* --- Motion ----------------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration: 200ms;
    --duration-slow: 300ms;

    /* --- Structure -------------------------------------------------------- */
    --sidebar-width: 264px;
    --topbar-height: 64px;
    --container-max: 1280px;
    --container-narrow: 768px;
    --container-wide: 1440px;

    /* --- Typeface ---------------------------------------------------------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;

    /* Control sizing — one source of truth so inputs and buttons always
       line up when they sit side by side. */
    --control-height: 2.625rem;
    --control-height-sm: 2rem;
    --control-height-lg: 3rem;
    --control-padding-x: 0.875rem;
    --tap-target: 44px;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Reserve the scrollbar so pages with and without overflow don't shift. */
    scrollbar-gutter: stable;
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Nothing may cause a sideways scroll. */
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    line-height: var(--leading-tight);
    color: var(--color-text);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
  h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
  h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
  h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
  h5 { font-size: var(--text-md); font-weight: var(--weight-semibold); }
  h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); }

  p { margin: 0 0 var(--space-3); }
  p:last-child { margin-bottom: 0; }

  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
  }
  a:hover { color: var(--color-primary-hover); }

  img, svg, video, canvas {
    display: block;
    max-width: 100%;
  }
  img, video { height: auto; }

  svg { flex-shrink: 0; }

  ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
  }

  code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

  /* Inputs inherit the typeface rather than falling back to the UA default. */
  button, input, select, textarea { font: inherit; color: inherit; }

  /* Visible focus for keyboard users only — never a ring on mouse click. */
  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  ::selection {
    background: var(--color-primary);
    color: var(--color-on-primary);
  }

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

/* ==========================================================================
   LAYOUT
   ========================================================================== */

@layer layout {

  /* --- Centred content column ------------------------------------------- */
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
  }
  .container--narrow { max-width: var(--container-narrow); }
  .container--wide   { max-width: var(--container-wide); }
  .container--flush  { padding-inline: 0; }

  /* --- Application shell (sidebar + content) ----------------------------- */
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
  }

  .app-sidebar {
    grid-column: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-shell);
    color: var(--color-shell-text);
    z-index: 60;
    overflow: hidden;
  }

  .app-main {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    min-width: 0; /* lets children shrink instead of forcing overflow */
    min-height: 100vh;
    min-height: 100dvh;
  }

  .app-content {
    flex: 1;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-section) var(--space-gutter);
  }
  .app-content--wide { max-width: var(--container-wide); }
  .app-content--narrow { max-width: var(--container-narrow); }

  /* Backdrop behind the mobile drawer. Present at all widths but inert until
     the drawer opens, so opening it costs no layout work. */
  .app-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(15 23 42 / 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);
    z-index: 55;
  }

  /* --- Drawer mode -------------------------------------------------------
     Below 1024px the sidebar leaves the grid and becomes an overlay panel.
     This is a genuine mode change, so it earns a media query.              */
  @media (max-width: 1023.98px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }

    .app-sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      width: min(var(--sidebar-width), 82vw);
      transform: translateX(-100%);
      transition: transform var(--duration-slow) var(--ease);
      box-shadow: var(--shadow-xl);
      will-change: transform;
    }

    .app-main { grid-column: 1; }

    body.is-drawer-open .app-sidebar { transform: translateX(0); }
    body.is-drawer-open .app-backdrop { opacity: 1; visibility: visible; }
    /* Freeze the page behind the drawer. */
    body.is-drawer-open { overflow: hidden; }
  }

  @media (min-width: 1024px) {
    .app-backdrop { display: none; }
  }

  /* --- Public shell (marketing / logged-out pages) ----------------------- */
  .public-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .public-body {
    flex: 1;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-section) var(--space-gutter);
  }

  /* --- Guest body (login / signup) ---------------------------------------
     Sits inside the public shell between the shared nav and footer, and uses
     the same brand gradient as the hero so signing in reads as the same site
     rather than a separate application. */
  .guest-main {
    flex: 1;
    display: grid;
    place-items: center;
    padding: clamp(2rem, 1.4rem + 2.6vw, 4rem) var(--space-gutter);
    background: var(--gradient-shell);
    position: relative;
    isolation: isolate;
  }

  /* Soft bloom so the gradient doesn't read as a flat fill. */
  .guest-main::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60ch 50ch at 50% 0%, rgb(37 99 235 / 0.20), transparent 65%),
      radial-gradient(50ch 50ch at 85% 100%, rgb(15 23 42 / 0.30), transparent 60%);
  }

  .guest-main__inner {
    width: 100%;
    max-width: 27.5rem;
  }

  /* --- Stack: vertical rhythm without margin collapsing surprises -------- */
  .stack        { display: flex; flex-direction: column; gap: var(--space-4); }
  .stack--xs    { gap: var(--space-2); }
  .stack--sm    { gap: var(--space-3); }
  .stack--lg    { gap: var(--space-6); }
  .stack--xl    { gap: var(--space-8); }

  /* --- Cluster: horizontal group that wraps rather than overflows -------- */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .cluster--xs  { gap: var(--space-1); }
  .cluster--sm  { gap: var(--space-2); }
  .cluster--lg  { gap: var(--space-4); }
  .cluster--between { justify-content: space-between; }
  .cluster--end     { justify-content: flex-end; }
  .cluster--center  { justify-content: center; }
  .cluster--top     { align-items: flex-start; }
  .cluster--baseline{ align-items: baseline; }

  /* --- Auto grid: the core "no snapping" primitive -----------------------
     Column count comes from available space, not from the viewport, so a
     grid inside a narrow column behaves the same as one on a wide page.
     min() keeps single columns from overflowing on very small screens.    */
  .grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }
  .grid--xs   { --grid-min: 8rem; }
  .grid--sm   { --grid-min: 12rem; }
  .grid--md   { --grid-min: 16rem; }
  .grid--lg   { --grid-min: 20rem; }
  .grid--xl   { --grid-min: 26rem; }
  .grid--tight { gap: var(--space-3); }
  .grid--loose { gap: var(--space-6); }

  /* Fixed-ratio splits that collapse to one column only when the container
     genuinely can't hold them. */
  .split {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--split-min, 20rem), 100%), 1fr));
    align-items: start;
  }

  /* Main + aside, where the aside keeps a stable width on desktop. */
  .with-aside {
    display: grid;
    gap: var(--space-6);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 62rem) {
    .with-aside {
      grid-template-columns: minmax(0, 1fr) var(--aside-width, 22rem);
    }
    .with-aside > .with-aside__side { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
    .with-aside--left { grid-template-columns: var(--aside-width, 22rem) minmax(0, 1fr); }
  }
  .with-aside--wide-side { --aside-width: 24rem; }

  .span-2 { grid-column: span 2; }
  .span-full { grid-column: 1 / -1; }
  @media (max-width: 48rem) {
    .span-2 { grid-column: span 1; }
  }

  /* --- Reserved slot -----------------------------------------------------
     For content that appears conditionally (a commission badge, an inline
     validation message). The space is always allocated, so revealing it
     never nudges anything else on the page. */
  .reserve {
    min-height: var(--reserve-height, 2.75rem);
    display: flex;
    align-items: center;
  }
  .reserve > * {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);
  }
  .reserve.is-visible > * { opacity: 1; visibility: visible; }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

@layer components {

  /* ----------------------------------------------------------------------
     Sidebar
     ---------------------------------------------------------------------- */
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--color-shell-border);
    flex-shrink: 0;
  }

  .sidebar-brand__mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    color: var(--color-on-primary);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
  }
  .sidebar-brand__mark svg { width: 22px; height: 22px; }

  .sidebar-brand__text { min-width: 0; }

  .sidebar-brand__name {
    display: block;
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-shell-text-strong);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sidebar-brand__sub {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-shell-text);
    line-height: 1.4;
  }

  .sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-4) 0;
    /* Thin scrollbar that matches the dark shell. */
    scrollbar-width: thin;
    scrollbar-color: var(--slate-700) transparent;
  }
  .sidebar-nav::-webkit-scrollbar { width: 6px; }
  .sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--slate-700);
    border-radius: var(--radius-pill);
  }

  .sidebar-section {
    padding: var(--space-4) var(--space-5) var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate-600);
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    min-height: var(--tap-target);
    color: var(--color-shell-text);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background var(--duration) var(--ease),
                color var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
  }

  .sidebar-link svg {
    width: 20px;
    height: 20px;
    opacity: 0.85;
  }

  .sidebar-link:hover {
    background: var(--color-shell-raised);
    color: var(--color-shell-text-strong);
  }

  .sidebar-link.is-active {
    background: var(--color-shell-raised);
    color: var(--color-shell-text-strong);
    border-left-color: var(--color-primary);
  }
  .sidebar-link.is-active svg { opacity: 1; color: var(--blue-500); }

  .sidebar-footer {
    flex-shrink: 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-shell-border);
  }

  /* ----------------------------------------------------------------------
     Top bar
     ---------------------------------------------------------------------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--topbar-height);
    padding: var(--space-3) var(--space-gutter);
    background: rgb(255 255 255 / 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
  }

  .topbar__lead {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .topbar__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  /* Drawer trigger — only meaningful while the sidebar is an overlay. */
  .drawer-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }
  .drawer-toggle:hover { background: var(--color-surface-sunken); border-color: var(--color-border-strong); }
  @media (max-width: 1023.98px) {
    .drawer-toggle { display: inline-flex; }
  }

  /* The user chip collapses to just the avatar when space is tight, rather
     than wrapping the top bar onto a second line. */
  .user-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }

  .user-chip__avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
  }

  .user-chip__meta { min-width: 0; line-height: 1.3; }

  .user-chip__name {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-chip__role {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: capitalize;
  }

  @media (max-width: 30rem) {
    .user-chip__meta { display: none; }
  }

  /* ----------------------------------------------------------------------
     Public navbar
     ---------------------------------------------------------------------- */
  .public-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--color-shell);
    border-bottom: 1px solid var(--color-shell-border);
  }

  .public-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--topbar-height);
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
  }

  .public-nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-shell-text-strong);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-decoration: none;
    white-space: nowrap;
  }
  .public-nav__brand:hover { color: var(--color-shell-text-strong); }
  .public-nav__brand img { width: 32px; height: 32px; }

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

  .public-nav__link {
    color: rgb(255 255 255 / 0.78);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
    padding: var(--space-2) var(--space-1);
  }
  .public-nav__link:hover { color: #fff; }

  /* Transparent variant that solidifies on scroll (landing page). */
  .public-nav--overlay {
    position: fixed;
    inset-inline: 0;
    top: 0;
    background: transparent;
    border-bottom-color: transparent;
    transition: background var(--duration-slow) var(--ease),
                border-color var(--duration-slow) var(--ease);
  }
  .public-nav--overlay.is-scrolled {
    background: rgb(15 23 42 / 0.92);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--color-shell-border);
  }

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

  .page-header__text { min-width: 0; }

  .page-header__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }

  .page-header__subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
  }

  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  /* On narrow screens, header buttons go full width instead of crowding. */
  @media (max-width: 30rem) {
    .page-header__actions { width: 100%; }
    .page-header__actions > .btn { flex: 1 1 auto; }
  }

  /* Breadcrumbs */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }
  .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
  .breadcrumb a { color: var(--color-text-secondary); text-decoration: none; }
  .breadcrumb a:hover { color: var(--color-primary); }
  .breadcrumb__current { color: var(--color-text); font-weight: var(--weight-semibold); }
  .breadcrumb__sep { width: 14px; height: 14px; opacity: 0.4; }

  /* ----------------------------------------------------------------------
     Card
     ---------------------------------------------------------------------- */
  .card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    min-width: 0;
  }

  .card--raised { box-shadow: var(--shadow-md); }
  .card--flush  { border: 0; box-shadow: none; background: transparent; }
  .card--accent { border-top: 3px solid var(--color-primary); }

  .card--interactive {
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
  }
  .card--interactive:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .card__title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
  }

  .card__subtitle {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .card__body {
    padding: var(--space-5);
    flex: 1;
    min-width: 0;
  }
  .card__body--tight { padding: var(--space-4); }
  .card__body--flush { padding: 0; }

  .card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  }

  /* ----------------------------------------------------------------------
     Stat card
     ---------------------------------------------------------------------- */
  .stat {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
    min-width: 0;
  }
  .stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

  .stat__icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .stat__icon svg { width: 22px; height: 22px; }

  .stat__icon--primary { background: var(--color-primary-soft); color: var(--color-primary); }
  .stat__icon--success { background: var(--color-success-soft); color: var(--color-success); }
  .stat__icon--warning { background: var(--color-warning-soft); color: var(--color-warning); }
  .stat__icon--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
  .stat__icon--info    { background: var(--color-info-soft);    color: var(--color-info); }

  .stat__body { min-width: 0; }

  .stat__value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    /* Tabular figures keep numbers from jittering as values change. */
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .stat__label {
    margin-top: var(--space-1);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
  }

  .stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }
  .stat__delta--up   { color: var(--color-success); }
  .stat__delta--down { color: var(--color-danger); }

  /* ----------------------------------------------------------------------
     Buttons
     ---------------------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    background: transparent;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration-fast) var(--ease);
  }
  .btn svg { width: 18px; height: 18px; }
  .btn:active { transform: translateY(1px); }

  .btn:disabled,
  .btn.is-disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
  }

  .btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-xs);
  }
  .btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }

  .btn--success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
  .btn--success:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }

  .btn--danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
  .btn--danger:hover { background: var(--red-700); border-color: var(--red-700); color: #fff; }

  .btn--warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
  .btn--warning:hover { background: var(--amber-700); border-color: var(--amber-700); color: #fff; }

  .btn--outline {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }
  .btn--outline:hover { background: var(--color-surface-sunken); border-color: var(--color-text-muted); color: var(--color-text); }

  .btn--ghost { background: transparent; color: var(--color-text-secondary); }
  .btn--ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }

  .btn--link {
    background: transparent;
    color: var(--color-primary);
    min-height: auto;
    padding: 0;
    font-weight: var(--weight-semibold);
  }
  .btn--link:hover { text-decoration: underline; }

  /* On the dark shell, outline buttons need light borders to stay visible. */
  .btn--on-dark {
    background: rgb(255 255 255 / 0.08);
    border-color: rgb(255 255 255 / 0.28);
    color: #fff;
  }
  .btn--on-dark:hover { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.45); color: #fff; }

  .btn--sm { min-height: var(--control-height-sm); padding: 0 var(--space-3); font-size: var(--text-sm); }
  .btn--sm svg { width: 15px; height: 15px; }

  /* A 32px control is comfortable with a mouse but fiddly with a thumb.
     On touch devices small controls grow to the 44px tap target while
     keeping their compact typography. */
  @media (hover: none) and (pointer: coarse) {
    .btn--sm,
    .pill,
    .pagination__link { min-height: var(--tap-target); }
    .btn--icon.btn--sm { width: var(--tap-target); }
  }
  .btn--lg { min-height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--text-md); }

  .btn--icon { width: var(--control-height); padding: 0; }
  .btn--icon.btn--sm { width: var(--control-height-sm); }
  .btn--icon.btn--lg { width: var(--control-height-lg); }

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

  /* Groups of actions in a table row or card footer. */
  .btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* ----------------------------------------------------------------------
     Forms
     ---------------------------------------------------------------------- */
  .form-group { margin-bottom: var(--space-5); min-width: 0; }
  .form-group:last-child { margin-bottom: 0; }

  .form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  .form-label__required { color: var(--color-danger); margin-left: 2px; }

  .form-control,
  .form-select,
  .form-textarea {
    display: block;
    width: 100%;
    min-height: var(--control-height);
    padding: 0.5rem var(--control-padding-x);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: 1.5;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
    /* 16px on touch devices stops iOS Safari zooming the page on focus. */
  }

  @media (hover: none) and (pointer: coarse) {
    .form-control,
    .form-select,
    .form-textarea { font-size: 16px; }
  }

  .form-textarea { min-height: 6.5rem; resize: vertical; }

  .form-control::placeholder,
  .form-textarea::placeholder { color: var(--color-text-muted); }

  .form-control:hover,
  .form-select:hover,
  .form-textarea:hover { border-color: var(--color-text-muted); }

  .form-control:focus,
  .form-select:focus,
  .form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
  }

  /* background-color, not the shorthand — .form-select's chevron is a
     background-image and the shorthand would reset its placement. */
  .form-control:disabled,
  .form-select:disabled,
  .form-textarea:disabled,
  .form-control[readonly] {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    cursor: not-allowed;
  }

  .form-control.is-invalid,
  .form-select.is-invalid,
  .form-textarea.is-invalid { border-color: var(--color-danger); }
  .form-control.is-invalid:focus,
  .form-select.is-invalid:focus,
  .form-textarea.is-invalid:focus { box-shadow: var(--shadow-focus-danger); }

  .form-select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1.1rem;
    cursor: pointer;
  }

  .form-error {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-danger);
  }

  .form-hint {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  /* Input with a leading icon or a currency prefix. */
  .input-affix {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  .input-affix__text {
    display: grid;
    place-items: center;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-right: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }
  .input-affix .form-control { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

  /* Row of fields — same auto-fit behaviour as .grid. */
  .form-row {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--field-min, 14rem), 100%), 1fr));
  }
  .form-row--sm { --field-min: 10rem; }
  .form-row--lg { --field-min: 18rem; }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
  }
  @media (max-width: 30rem) {
    .form-actions { flex-direction: column-reverse; }
    .form-actions > .btn { width: 100%; }
  }

  /* Checkbox / radio */
  .form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: var(--space-2) 0;
  }
  .form-check input[type="checkbox"],
  .form-check input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.2rem 0 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
  }
  .form-check label {
    font-size: var(--text-base);
    line-height: 1.45;
    cursor: pointer;
  }

  /* Selectable card — radio/checkbox styled as a full option tile. */
  .option-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease),
                background var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease);
  }
  .option-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-sunken); }
  .option-card:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: var(--shadow-focus);
  }
  .option-card:has(input:focus-visible) { box-shadow: var(--shadow-focus); }

  /* Positive-selection variant — used where checking a box means "include
     this one" rather than "choose this option". */
  .option-card--affirm:has(input:checked),
  .option-card--affirm.is-chosen {
    border-color: var(--color-success);
    background: var(--color-success-soft);
    box-shadow: none;
  }
  .option-card--affirm input { accent-color: var(--color-success); }

  /* Row highlighted as the one currently in effect (active policy tier). */
  .table tr.is-highlighted {
    background: var(--color-success-soft);
    font-weight: var(--weight-semibold);
  }
  .table tr.is-highlighted td {
    border-block: 2px solid var(--color-success);
    color: var(--green-700);
  }
  .option-card input { flex-shrink: 0; accent-color: var(--color-primary); width: 1.15rem; height: 1.15rem; cursor: pointer; }
  .option-card__body { min-width: 0; flex: 1; }
  .option-card__title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
  .option-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); }

  /* Conditional field — shown only while its trigger control is checked.
     Put .reveal-trigger on the radio/checkbox and .reveal-target on the
     field that depends on it; both must share a form ancestor. Pure CSS, so
     the field is correct on first paint with no flash. */
  .reveal-target { display: none; }
  form:has(.reveal-trigger:checked) .reveal-target { display: block; }

  /* Toggle switch */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    cursor: pointer;
    user-select: none;
    min-height: var(--tap-target);
  }
  .switch__input {
    appearance: none;
    position: relative;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    cursor: pointer;
    transition: background var(--duration) var(--ease);
  }
  .switch__input::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform var(--duration) var(--ease);
  }
  .switch__input:checked { background: var(--color-success); }
  .switch__input:checked::before { transform: translateX(17px); }

  /* ----------------------------------------------------------------------
     Tables
     ---------------------------------------------------------------------- */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    -webkit-overflow-scrolling: touch;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
  }

  .table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background: var(--color-surface-sunken);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
  }

  .table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
  }

  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr { transition: background var(--duration-fast) var(--ease); }
  .table tbody tr:hover { background: var(--color-surface-sunken); }

  .table__num { text-align: right; font-variant-numeric: tabular-nums; }
  .table__actions { white-space: nowrap; text-align: right; }
  .table__actions .btn-group { flex-wrap: nowrap; justify-content: flex-end; }

  /* Stacked mode: below 48rem each row becomes its own card and the column
     header is echoed from the cell's data-label. Add .table--stack and give
     every td a data-label. */
  @media (max-width: 48rem) {
    .table--stack { display: block; }
    .table--stack thead {
      position: absolute;
      width: 1px; height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .table--stack tbody,
    .table--stack tr,
    .table--stack td { display: block; width: 100%; }

    .table--stack tr {
      padding: var(--space-2) 0;
      border-bottom: 1px solid var(--color-border);
    }
    .table--stack tr:last-child { border-bottom: 0; }

    .table--stack td {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-4);
      padding: var(--space-2) var(--space-4);
      border: 0;
      text-align: right;
    }
    .table--stack td::before {
      content: attr(data-label);
      flex-shrink: 0;
      font-size: var(--text-xs);
      font-weight: var(--weight-semibold);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--color-text-secondary);
      text-align: left;
    }
    .table--stack td:empty { display: none; }
    .table--stack .table__actions { text-align: right; }
    .table--stack .table__actions .btn-group { justify-content: flex-end; }

    /* The wrapper no longer needs to scroll once rows are stacked. */
    .table-wrap:has(.table--stack) { overflow-x: visible; }
  }

  /* ----------------------------------------------------------------------
     Badges
     ---------------------------------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
  }
  .badge svg { width: 13px; height: 13px; }

  .badge--neutral { background: var(--slate-100); color: var(--slate-600); border-color: var(--slate-200); }
  .badge--primary { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary-border); }
  .badge--success { background: var(--color-success-soft); color: var(--green-700); border-color: var(--color-success-border); }
  .badge--warning { background: var(--color-warning-soft); color: var(--amber-700); border-color: var(--color-warning-border); }
  .badge--danger  { background: var(--color-danger-soft);  color: var(--red-700);   border-color: var(--color-danger-border); }
  .badge--info    { background: var(--color-info-soft);    color: var(--cyan-700);  border-color: var(--color-info-border); }

  .badge--solid.badge--primary { background: var(--color-primary); color: #fff; border-color: transparent; }
  .badge--solid.badge--success { background: var(--color-success); color: #fff; border-color: transparent; }
  .badge--solid.badge--danger  { background: var(--color-danger);  color: #fff; border-color: transparent; }

  /* A badge that is also a link (e.g. the wallet chip in the top bar). */
  .badge--link { text-decoration: none; transition: filter var(--duration) var(--ease); }
  .badge--link:hover { filter: brightness(0.96); }

  /* Small coloured dot for status without text. */
  .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-text-muted);
  }
  .dot--primary { background: var(--color-primary); }
  .dot--success { background: var(--color-success); }
  .dot--warning { background: var(--color-warning); }
  .dot--danger  { background: var(--color-danger); }

  /* ----------------------------------------------------------------------
     Alerts
     ---------------------------------------------------------------------- */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
  }
  .alert:last-child { margin-bottom: 0; }
  .alert__icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
  .alert__body { flex: 1; min-width: 0; }
  .alert__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }

  .alert__close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration) var(--ease);
  }
  .alert__close:hover { opacity: 1; }

  .alert--success { background: var(--color-success-soft); color: var(--green-700); border-color: var(--color-success-border); }
  .alert--error,
  .alert--danger  { background: var(--color-danger-soft);  color: var(--red-700);   border-color: var(--color-danger-border); }
  .alert--warning { background: var(--color-warning-soft); color: var(--amber-700); border-color: var(--color-warning-border); }
  .alert--info    { background: var(--color-info-soft);    color: var(--cyan-700);  border-color: var(--color-info-border); }

  /* ----------------------------------------------------------------------
     Modal
     ---------------------------------------------------------------------- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: rgb(15 23 42 / 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);
  }
  .modal-overlay.is-open { opacity: 1; visibility: visible; }

  .modal {
    width: 100%;
    max-width: var(--modal-width, 30rem);
    max-height: calc(100dvh - var(--space-8));
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    transform: translateY(8px) scale(0.98);
    transition: transform var(--duration) var(--ease);
  }
  .modal-overlay.is-open .modal { transform: translateY(0) scale(1); }

  .modal--sm { --modal-width: 24rem; }
  .modal--lg { --modal-width: 42rem; }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }
  .modal__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
  .modal__body { padding: var(--space-5); overflow-y: auto; flex: 1; }
  .modal__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }
  @media (max-width: 30rem) {
    .modal__footer { flex-direction: column-reverse; }
    .modal__footer > .btn,
    .modal__footer > form { width: 100%; }
    .modal__footer > form > .btn { width: 100%; }
  }

  /* ----------------------------------------------------------------------
     Pagination
     ---------------------------------------------------------------------- */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin-top: var(--space-6);
    padding: 0;
    list-style: none;
  }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-target);
    height: var(--tap-target);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
  }
  .pagination__link:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
    color: var(--color-primary);
  }
  .pagination__link.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  .pagination__link.is-disabled { opacity: 0.45; pointer-events: none; }
  .pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-target);
    height: var(--tap-target);
    color: var(--color-text-muted);
  }

  /* ----------------------------------------------------------------------
     Tabs / pills
     ---------------------------------------------------------------------- */
  .pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  /* Horizontal-scroll variant for long filter strips on mobile. */
  .pills--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pills--scroll::-webkit-scrollbar { display: none; }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                color var(--duration) var(--ease);
  }
  .pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
  .pill.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
  }
  .pill.is-active--success { background: var(--color-success); border-color: var(--color-success); color: #fff; }
  .pill.is-active--warning { background: var(--color-warning); border-color: var(--color-warning); color: #fff; }
  .pill.is-active--danger  { background: var(--color-danger);  border-color: var(--color-danger);  color: #fff; }

  .pill__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-pill);
    background: rgb(15 23 42 / 0.08);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
  }
  .pill.is-active .pill__count { background: rgb(255 255 255 / 0.25); }

  /* Pills on a dark banner (the date strip in search results). */
  .pill--on-dark {
    background: rgb(255 255 255 / 0.12);
    border-color: rgb(255 255 255 / 0.25);
    color: #fff;
  }
  .pill--on-dark:hover { background: rgb(255 255 255 / 0.22); color: #fff; border-color: rgb(255 255 255 / 0.4); }
  .pill--on-dark.is-active {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
  }

  /* ----------------------------------------------------------------------
     Chip list — a set of values built up one at a time (schedule dates).
     ---------------------------------------------------------------------- */
  .chip-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: 3.25rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.4rem 0.3rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  .chip__remove {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .chip__remove:hover { background: var(--color-danger-soft); color: var(--color-danger); }

  .chip-empty { font-size: var(--text-sm); color: var(--color-text-muted); }

  /* Inline callout for a derived value (estimated arrival time). */
  .callout {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--blue-800);
    font-size: var(--text-base);
  }
  .callout svg { width: 18px; height: 18px; flex-shrink: 0; }

  /* Larger segmented control (upper/lower deck). */
  .segmented {
    display: inline-flex;
    gap: var(--space-2);
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
  }
  .segmented__item {
    min-height: var(--control-height);
    padding: 0 var(--space-6);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .segmented__item:hover { color: var(--color-text); }
  .segmented__item.is-active {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-sm);
  }

  /* ----------------------------------------------------------------------
     Banner — dark gradient panel used for search headers and hero strips
     ---------------------------------------------------------------------- */
  .banner {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    background: var(--gradient-banner);
    color: #fff;
    box-shadow: var(--shadow-lg);
  }
  .banner h1, .banner h2, .banner h3, .banner p { color: #fff; }

  .banner__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgb(255 255 255 / 0.75);
  }

  .banner__value {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: #fff;
  }

  /* Fields sitting on a dark banner. */
  /* background-color, never the `background` shorthand: the shorthand would
     reset background-repeat/position/size, and .form-select depends on all
     three to place its chevron. Using it here tiled the arrow across the
     field and dropped it on top of the text. */
  .banner .form-control,
  .banner .form-select {
    background-color: rgb(255 255 255 / 0.1);
    border-color: rgb(255 255 255 / 0.25);
    color: #fff;
  }
  .banner .form-control::placeholder { color: rgb(255 255 255 / 0.6); }

  .banner .form-select {
    /* White chevron for the dark banner. Position/repeat/size are inherited
       from .form-select and re-stated so a future shorthand can't break them. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1.1rem;
  }

  /* Options render in the OS menu, not the banner, so they need readable
     colours of their own — white-on-white otherwise. */
  .banner .form-select option {
    color: var(--color-text);
    background-color: var(--color-surface);
  }
  .banner .form-control:focus,
  .banner .form-select:focus {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.2);
  }

  /* ----------------------------------------------------------------------
     Hero (landing)
     ---------------------------------------------------------------------- */
  .hero {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--topbar-height) + var(--space-8)) var(--space-gutter) var(--space-8);
    background: var(--gradient-shell);
    color: #fff;
    text-align: center;
    position: relative;
    isolation: isolate;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(70ch 50ch at 50% 0%, rgb(37 99 235 / 0.22), transparent 70%);
  }

  /* Full-height hero suits a one-screen page; a hero that leads into further
     sections should size to its content instead, so the next section peeks
     above the fold and invites scrolling. */
  .hero--lead {
    min-height: 0;
    padding-block: calc(var(--topbar-height) + clamp(2.5rem, 1.5rem + 4vw, 5rem))
                   clamp(3rem, 2rem + 4vw, 5rem);
  }

  .hero__inner { max-width: 52rem; }
  .hero__inner--wide { max-width: 64rem; }

  .hero__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-5xl);
    font-weight: var(--weight-extrabold);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
  }
  .hero__accent {
    background: linear-gradient(120deg, var(--blue-500), var(--cyan-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__subtitle {
    margin: 0 auto var(--space-8);
    max-width: 40rem;
    font-size: var(--text-xl);
    font-weight: var(--weight-normal);
    color: rgb(255 255 255 / 0.72);
    line-height: var(--leading-snug);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }
  @media (max-width: 30rem) {
    .hero__actions { flex-direction: column; }
    .hero__actions > .btn { width: 100%; }
  }

  /* ----------------------------------------------------------------------
     Marketing sections
     Vertical rhythm for long-form pages. Padding is fluid so sections
     breathe on desktop without swallowing a phone screen.
     ---------------------------------------------------------------------- */
  .section {
    padding-block: clamp(3rem, 2.1rem + 3.8vw, 5.5rem);
  }
  .section--muted { background: var(--color-surface-sunken); }
  .section--dark {
    background: var(--gradient-shell);
    color: #fff;
  }
  .section--dark .section__title,
  .section--dark .section__lead { color: #fff; }
  .section--dark .section__lead { opacity: 0.75; }

  .section__head {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: var(--space-10);
    text-align: center;
  }
  .section__head--start { margin-inline: 0; text-align: left; }

  .section__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    letter-spacing: -0.02em;
    line-height: 1.12;
  }

  .section__lead {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: var(--leading-snug);
  }

  /* Small uppercase kicker above a heading. */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
  }
  .section--dark .eyebrow,
  .hero .eyebrow { color: var(--blue-500); }

  /* Feature tile — icon, heading, one line of copy. */
  .feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
  }
  .feature:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
  .feature__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .feature__icon svg { width: 22px; height: 22px; }
  .feature__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .feature__text { margin: 0; font-size: var(--text-base); color: var(--color-text-secondary); }

  /* Headline figure — big number with a caption, used in the hero. */
  .figure-stat { text-align: center; }
  .figure-stat__value {
    display: block;
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .figure-stat__label {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
  }

  /* Deck panel for the double-deck explainer. */
  .deck-tile {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .deck-tile__badge {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.15;
  }
  .deck-tile__badge--upper { background: var(--color-shell-raised); }

  /* Big price callout. */
  .price-tag {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .price-tag__from {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
  }
  .price-tag__value {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  /* ----------------------------------------------------------------------
     Numbered steps — "how booking works"
     ---------------------------------------------------------------------- */
  .steps {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    counter-reset: step;
    position: relative;
  }

  .step {
    counter-increment: step;
    text-align: center;
  }

  .step__marker {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
  }
  .step__marker::before { content: counter(step); }

  .step__title { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .step__text { margin: 0; font-size: var(--text-base); color: var(--color-text-secondary); }

  /* ----------------------------------------------------------------------
     Trust marker — a claim with a check, deliberately understated
     ---------------------------------------------------------------------- */
  .trust {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }
  .trust__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-success-soft);
    color: var(--color-success);
  }
  .trust__icon svg { width: 19px; height: 19px; }
  .trust__title { margin: 0 0 2px; font-size: var(--text-base); font-weight: var(--weight-semibold); }
  .trust__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }

  /* On the dark shell. */
  .section--dark .trust,
  .section--dark .feature {
    background: rgb(255 255 255 / 0.04);
    border-color: var(--color-shell-border);
  }
  .section--dark .trust__title,
  .section--dark .feature__title { color: #fff; }
  .section--dark .trust__text,
  .section--dark .feature__text { color: rgb(255 255 255 / 0.66); }

  /* ----------------------------------------------------------------------
     Contact call-to-action pair
     ---------------------------------------------------------------------- */
  .contact-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
  }
  .contact-card:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: inherit;
  }
  .contact-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .contact-card__icon--whatsapp { background: var(--color-success-soft); color: var(--color-success); }
  .contact-card__label {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
  }
  .contact-card__value {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
  }

  /* ----------------------------------------------------------------------
     Site footer
     ---------------------------------------------------------------------- */
  .site-footer {
    background: var(--color-shell);
    color: var(--color-shell-text);
    padding-block: var(--space-10) var(--space-6);
  }

  .site-footer__grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-shell-border);
  }

  .site-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    color: #fff;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }
  .site-footer__brand img { width: 32px; height: 32px; }

  .site-footer__heading {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate-500);
  }

  .site-footer__list { margin: 0; padding: 0; list-style: none; }
  .site-footer__list li + li { margin-top: var(--space-2); }
  .site-footer__list a,
  .site-footer p { color: var(--color-shell-text); text-decoration: none; font-size: var(--text-base); }
  .site-footer__list a:hover { color: #fff; }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--slate-500);
  }

  /* ----------------------------------------------------------------------
     Auth card
     ---------------------------------------------------------------------- */
  .auth-card {
    width: 100%;
    max-width: 27.5rem;
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
  }

  .auth-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    text-decoration: none;
  }
  .auth-card__brand img { width: 36px; height: 36px; }

  .auth-card__title {
    margin: 0 0 var(--space-1);
    text-align: center;
    font-size: var(--text-2xl);
  }

  .auth-card__subtitle {
    margin: 0 0 var(--space-6);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
  }

  .auth-card__footer {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
  }

  /* ----------------------------------------------------------------------
     Empty state
     ---------------------------------------------------------------------- */
  .empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    text-align: center;
  }
  .empty__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
  }
  .empty__icon svg { width: 28px; height: 28px; }
  .empty__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
  .empty__text { margin: 0; max-width: 34rem; color: var(--color-text-secondary); }

  /* ----------------------------------------------------------------------
     Description list — label/value pairs (booking details, receipts)
     ---------------------------------------------------------------------- */
  .detail-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
  }
  .detail-list--cols {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-4) var(--space-6);
  }

  .detail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
  }
  .detail--stacked { display: block; }

  .detail__label {
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }
  .detail--stacked .detail__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }

  .detail__value {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-align: right;
    overflow-wrap: anywhere;
  }
  .detail--stacked .detail__value { text-align: left; font-size: var(--text-md); }

  /* Money row totals. */
  .detail--total {
    padding-top: var(--space-3);
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-border);
  }
  .detail--total .detail__label { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); }
  .detail--total .detail__value { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-primary); }

  .money { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

  /* ----------------------------------------------------------------------
     Journey — origin/destination with a connecting line
     ---------------------------------------------------------------------- */
  .journey {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
  }

  .journey__time {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
  }
  .journey__place {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
  }
  .journey__end { text-align: right; }

  .journey__link {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    min-width: 5rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
  }
  .journey__line {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      var(--color-border-strong) 0 4px,
      transparent 4px 8px
    );
  }

  /* ----------------------------------------------------------------------
     Bus result card
     ---------------------------------------------------------------------- */
  .bus-card {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  }
  .bus-card:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); }

  /* At >=52rem the price column splits off, but the card keeps the same
     internal spacing at every width. */
  @media (min-width: 52rem) {
    .bus-card { grid-template-columns: minmax(0, 1fr) 15rem; }
    .bus-card__aside {
      border-left: 1px solid var(--color-border);
      padding-left: var(--space-5);
      text-align: right;
      align-items: flex-end;
    }
  }

  .bus-card__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

  .bus-card__name {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
  }
  .bus-card__type {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .bus-card__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .bus-card__price {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .bus-card__price-note { font-size: var(--text-xs); color: var(--color-text-secondary); }

  .amenities { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .amenity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }
  .amenity svg { width: 13px; height: 13px; }

  /* ----------------------------------------------------------------------
     Seat map
     ---------------------------------------------------------------------- */
  .seat-map {
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
  }

  .seat-deck {
    display: grid;
    gap: var(--space-2);
    justify-content: center;
    min-width: min-content;
  }

  .seat {
    --seat-size: 2.75rem;
    width: var(--seat-size);
    height: var(--seat-size);
    display: grid;
    place-items: center;
    padding: 0;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease),
                background var(--duration) var(--ease),
                color var(--duration) var(--ease),
                transform var(--duration-fast) var(--ease),
                box-shadow var(--duration) var(--ease);
  }

  /* Sleeper berths are twice as tall as seats. */
  .seat--sleeper { height: calc(var(--seat-size) * 2); border-radius: var(--radius-md); }

  .seat:hover:not(:disabled):not(.is-booked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .seat.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-md);
  }

  .seat.is-booked,
  .seat:disabled {
    background: var(--slate-100);
    border-color: var(--slate-200);
    color: var(--color-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .seat--ladies { background: var(--pink-50); border-color: var(--pink-300); }
  .seat--ladies.is-selected { background: var(--pink-500); border-color: var(--pink-500); color: #fff; }

  .seat-aisle { width: var(--space-5); }

  /* Bus frame — the cabin outline the seat grid sits inside. */
  .bus-frame {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(150deg, var(--slate-50), var(--slate-100));
    overflow-x: auto;
  }

  .bus-frame__driver {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
    border-bottom: 2px dashed var(--color-border-strong);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
  }

  .bus-frame__wheel {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-xs);
  }

  .deck-panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    margin-inline: auto;
    width: fit-content;
  }
  .deck-panel[hidden] { display: none; }

  .seat-row {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
  }

  /* Berth-style seat used by the layout editor: taller, with a headrest. */
  .seat--berth {
    position: relative;
    width: 44px;
    height: 92px;
    flex-direction: column;
    overflow: hidden;
  }
  .seat--berth::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 32px;
    height: 15px;
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-xs);
    background: var(--color-primary-soft);
    pointer-events: none;
  }
  .seat--berth > span { margin-top: var(--space-3); pointer-events: none; }

  /* Dot marking a seat whose settings differ from the default. */
  .seat__flag {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
  }
  .seat__flag[hidden] { display: none; }

  .seat-gap { width: 44px; height: 92px; }

  .seat-divider {
    width: var(--space-6);
    display: grid;
    place-items: center;
  }
  .seat-divider::before {
    content: '';
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(
      to bottom,
      var(--color-border) 0 4px,
      transparent 4px 8px
    );
  }

  .seat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }
  .seat-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); }
  .seat-legend__swatch {
    width: 18px; height: 18px;
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    flex-shrink: 0;
  }
  .seat-legend__swatch--selected { background: var(--color-primary); border-color: var(--color-primary); }
  .seat-legend__swatch--booked   { background: var(--slate-100); border-color: var(--slate-200); }
  .seat-legend__swatch--ladies   { background: var(--pink-50); border-color: var(--pink-300); }

  /* ----------------------------------------------------------------------
     Availability calendar
     ---------------------------------------------------------------------- */
  .calendar {
    width: 100%;
    max-width: 22rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  /* Popover variant anchored under a field. */
  .calendar--popover {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 80;
    box-shadow: var(--shadow-xl);
  }
  .calendar--popover[hidden] { display: none; }

  /* On narrow screens the popover becomes a centred sheet so it can never
     hang off the edge of the viewport. */
  @media (max-width: 30rem) {
    .calendar--popover {
      position: fixed;
      inset: auto var(--space-4) var(--space-4);
      max-width: none;
      width: auto;
    }
  }

  .calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .calendar__month {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
  }

  .calendar__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
  }
  .calendar__legend span { display: inline-flex; align-items: center; gap: var(--space-1); }

  .calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-1);
    text-align: center;
  }

  .calendar__dayname {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-bottom: var(--space-1);
  }

  .calendar__day {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease),
                background var(--duration) var(--ease);
  }

  .calendar__day--available {
    background: var(--color-success);
    color: #fff;
    box-shadow: var(--shadow-xs);
  }
  .calendar__day--available:hover { transform: scale(1.08); background: var(--green-700); }

  .calendar__day--soldout {
    background: var(--color-danger);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.85;
  }

  .calendar__day--none {
    background: var(--slate-100);
    color: var(--color-text-muted);
    cursor: not-allowed;
  }

  .calendar__day--past {
    background: transparent;
    color: var(--color-border-strong);
    cursor: not-allowed;
  }

  .calendar__day.is-selected {
    outline: 3px solid var(--color-primary);
    outline-offset: 1px;
  }

  /* Field that opens a popover — needs a positioning context. */
  .field-popover { position: relative; }

  /* ----------------------------------------------------------------------
     Ticket / receipt
     ---------------------------------------------------------------------- */
  .ticket {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  /* Dark strip across the top of the ticket. */
  .ticket__banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--gradient-shell);
    color: #fff;
  }
  .ticket__banner h1,
  .ticket__banner h2 { color: #fff; margin: 0; }

  .ticket__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .ticket__brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--color-primary);
    flex-shrink: 0;
  }

  .ticket__label {
    display: block;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgb(255 255 255 / 0.7);
  }

  .ticket__main { padding: var(--space-6); min-width: 0; }

  /* City code — the three-letter shorthand on the ticket. */
  .ticket__city {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    line-height: 1.1;
    color: var(--color-primary);
    letter-spacing: 0.02em;
  }

  .barcode { display: block; width: 100%; height: 40px; }

  /* Full-width footer strip: contact/customer info on the left,
     barcode + total paid as the "tear-off" stub on the right. */
  .ticket__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
    gap: var(--space-6);
    padding: var(--space-6);
    border-top: 2px dashed var(--color-border-strong);
    background: var(--color-surface-sunken);
    align-items: center;
  }
  @media (max-width: 40rem) {
    .ticket__footer { grid-template-columns: minmax(0, 1fr); }
  }

  .ticket__footer-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  @media (max-width: 26rem) {
    .ticket__footer-info { grid-template-columns: minmax(0, 1fr); }
  }

  .ticket__footer-pay {
    display: grid;
    gap: var(--space-3);
    padding-left: var(--space-6);
    border-left: 2px dashed var(--color-border-strong);
  }
  @media (max-width: 40rem) {
    .ticket__footer-pay {
      padding-left: 0;
      padding-top: var(--space-4);
      border-left: 0;
      border-top: 2px dashed var(--color-border-strong);
    }
  }

  .ticket__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .ticket__code {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
  }

  /* ----------------------------------------------------------------------
     Timeline (route stops, booking history)
     ---------------------------------------------------------------------- */
  .timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

  .timeline__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    position: relative;
  }
  .timeline__item:last-child { padding-bottom: 0; }

  .timeline__marker {
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border-strong);
    z-index: 1;
  }
  .timeline__item.is-done .timeline__marker { background: var(--color-success); border-color: var(--color-success); }
  .timeline__item.is-current .timeline__marker { background: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-focus); }

  /* Connector line, drawn between markers only. */
  .timeline__item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
  }

  .timeline__body { min-width: 0; padding-bottom: var(--space-1); }
  .timeline__title { font-weight: var(--weight-semibold); font-size: var(--text-base); }
  .timeline__meta { font-size: var(--text-sm); color: var(--color-text-secondary); }

  /* ----------------------------------------------------------------------
     Section heading inside a card / page
     ---------------------------------------------------------------------- */
  .section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
  }

  /* Numbered step marker used in checkout. */
  .step-marker {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
  }

  /* ----------------------------------------------------------------------
     Skeleton / loading
     ---------------------------------------------------------------------- */
  .skeleton {
    background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
    color: transparent;
  }
  @keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
  }

  .spinner {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* ==========================================================================
   UTILITIES
   Single-purpose helpers. Because this layer sits last, none of them need
   `!important` to override a component.
   ========================================================================== */

@layer utilities {

  /* --- Display ----------------------------------------------------------- */
  .u-block   { display: block; }
  .u-inline  { display: inline; }
  .u-inline-block { display: inline-block; }
  .u-flex    { display: flex; }
  .u-inline-flex { display: inline-flex; }
  .u-grid    { display: grid; }
  .u-hidden  { display: none; }
  .u-contents { display: contents; }

  /* Layout components (.cluster, .stack, .grid, …) set their own `display` in
     earlier layers; layer order beats specificity, so without this the
     `hidden` attribute alone can't hide an element that also carries one of
     those classes. Living last in the cascade, this always wins. */
  [hidden] { display: none; }

  /* Hide visually but keep for screen readers. */
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* --- Flex / grid helpers ------------------------------------------------ */
  .u-flex-col   { flex-direction: column; }
  .u-flex-wrap  { flex-wrap: wrap; }
  .u-flex-nowrap{ flex-wrap: nowrap; }
  .u-flex-1     { flex: 1 1 0%; min-width: 0; }
  .u-flex-none  { flex: none; }
  .u-grow       { flex-grow: 1; }
  .u-shrink-0   { flex-shrink: 0; }

  .u-items-start   { align-items: flex-start; }
  .u-items-center  { align-items: center; }
  .u-items-end     { align-items: flex-end; }
  .u-items-baseline{ align-items: baseline; }
  .u-items-stretch { align-items: stretch; }

  .u-justify-start   { justify-content: flex-start; }
  .u-justify-center  { justify-content: center; }
  .u-justify-end     { justify-content: flex-end; }
  .u-justify-between { justify-content: space-between; }

  .u-self-start  { align-self: flex-start; }
  .u-self-center { align-self: center; }
  .u-self-end    { align-self: flex-end; }

  .u-gap-0 { gap: 0; }
  .u-gap-1 { gap: var(--space-1); }
  .u-gap-2 { gap: var(--space-2); }
  .u-gap-3 { gap: var(--space-3); }
  .u-gap-4 { gap: var(--space-4); }
  .u-gap-5 { gap: var(--space-5); }
  .u-gap-6 { gap: var(--space-6); }
  .u-gap-8 { gap: var(--space-8); }

  /* --- Spacing ------------------------------------------------------------ */
  .u-m-0  { margin: 0; }
  .u-mt-0 { margin-top: 0; }      .u-mb-0 { margin-bottom: 0; }
  .u-mt-1 { margin-top: var(--space-1); }  .u-mb-1 { margin-bottom: var(--space-1); }
  .u-mt-2 { margin-top: var(--space-2); }  .u-mb-2 { margin-bottom: var(--space-2); }
  .u-mt-3 { margin-top: var(--space-3); }  .u-mb-3 { margin-bottom: var(--space-3); }
  .u-mt-4 { margin-top: var(--space-4); }  .u-mb-4 { margin-bottom: var(--space-4); }
  .u-mt-5 { margin-top: var(--space-5); }  .u-mb-5 { margin-bottom: var(--space-5); }
  .u-mt-6 { margin-top: var(--space-6); }  .u-mb-6 { margin-bottom: var(--space-6); }
  .u-mt-8 { margin-top: var(--space-8); }  .u-mb-8 { margin-bottom: var(--space-8); }
  .u-mt-auto { margin-top: auto; }
  .u-mx-auto { margin-inline: auto; }

  .u-p-0 { padding: 0; }
  .u-p-2 { padding: var(--space-2); }
  .u-p-3 { padding: var(--space-3); }
  .u-p-4 { padding: var(--space-4); }
  .u-p-5 { padding: var(--space-5); }
  .u-p-6 { padding: var(--space-6); }
  .u-pt-4 { padding-top: var(--space-4); }
  .u-pb-4 { padding-bottom: var(--space-4); }

  /* --- Typography --------------------------------------------------------- */
  .u-text-2xs  { font-size: var(--text-2xs); }
  .u-text-xs   { font-size: var(--text-xs); }
  .u-text-sm   { font-size: var(--text-sm); }
  .u-text-base { font-size: var(--text-base); }
  .u-text-md   { font-size: var(--text-md); }
  .u-text-lg   { font-size: var(--text-lg); }
  .u-text-xl   { font-size: var(--text-xl); }
  .u-text-2xl  { font-size: var(--text-2xl); }
  .u-text-3xl  { font-size: var(--text-3xl); }

  .u-font-normal    { font-weight: var(--weight-normal); }
  .u-font-medium    { font-weight: var(--weight-medium); }
  .u-font-semibold  { font-weight: var(--weight-semibold); }
  .u-font-bold      { font-weight: var(--weight-bold); }
  .u-font-extrabold { font-weight: var(--weight-extrabold); }
  .u-font-mono      { font-family: var(--font-mono); }

  .u-text-left   { text-align: left; }
  .u-text-center { text-align: center; }
  .u-text-right  { text-align: right; }

  .u-uppercase { text-transform: uppercase; }
  .u-capitalize { text-transform: capitalize; }
  .u-tracking-wide { letter-spacing: 0.05em; }
  .u-tracking-widest { letter-spacing: 0.1em; }
  .u-leading-tight { line-height: var(--leading-tight); }
  .u-leading-snug  { line-height: var(--leading-snug); }
  .u-nums { font-variant-numeric: tabular-nums; }

  .u-text-default   { color: var(--color-text); }
  .u-text-secondary { color: var(--color-text-secondary); }
  .u-text-muted     { color: var(--color-text-muted); }
  .u-text-primary   { color: var(--color-primary); }
  .u-text-success   { color: var(--color-success); }
  .u-text-warning   { color: var(--color-warning); }
  .u-text-danger    { color: var(--color-danger); }
  .u-text-info      { color: var(--color-info); }
  .u-text-inverse   { color: var(--color-text-inverse); }

  .u-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Clamp to N lines — set --lines. */
  .u-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--lines, 2);
    line-clamp: var(--lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .u-break { overflow-wrap: anywhere; }
  .u-nowrap { white-space: nowrap; }

  /* --- Colour / surface ---------------------------------------------------- */
  .u-bg-surface { background: var(--color-surface); }
  .u-bg-sunken  { background: var(--color-surface-sunken); }
  .u-bg-primary-soft { background: var(--color-primary-soft); }
  .u-bg-success-soft { background: var(--color-success-soft); }
  .u-bg-warning-soft { background: var(--color-warning-soft); }
  .u-bg-danger-soft  { background: var(--color-danger-soft); }
  .u-bg-transparent  { background: transparent; }

  .u-border     { border: 1px solid var(--color-border); }
  .u-border-t   { border-top: 1px solid var(--color-border); }
  .u-border-b   { border-bottom: 1px solid var(--color-border); }
  .u-border-none{ border: 0; }

  .u-rounded-sm { border-radius: var(--radius-sm); }
  .u-rounded    { border-radius: var(--radius-md); }
  .u-rounded-lg { border-radius: var(--radius-lg); }
  .u-rounded-xl { border-radius: var(--radius-xl); }
  .u-rounded-pill { border-radius: var(--radius-pill); }

  .u-shadow-none { box-shadow: none; }
  .u-shadow-sm   { box-shadow: var(--shadow-sm); }
  .u-shadow-md   { box-shadow: var(--shadow-md); }
  .u-shadow-lg   { box-shadow: var(--shadow-lg); }

  /* --- Sizing -------------------------------------------------------------- */
  .u-w-full { width: 100%; }
  .u-w-auto { width: auto; }
  .u-h-full { height: 100%; }
  .u-min-w-0 { min-width: 0; }

  .u-max-w-xs { max-width: 20rem;  margin-inline: auto; }
  .u-max-w-sm { max-width: 24rem;  margin-inline: auto; }
  .u-max-w-md { max-width: 28rem;  margin-inline: auto; }
  .u-max-w-lg { max-width: 32rem;  margin-inline: auto; }
  .u-max-w-xl { max-width: 36rem;  margin-inline: auto; }
  .u-max-w-2xl{ max-width: 42rem;  margin-inline: auto; }
  .u-max-w-3xl{ max-width: 48rem;  margin-inline: auto; }
  .u-max-w-4xl{ max-width: 56rem;  margin-inline: auto; }
  .u-max-w-5xl{ max-width: 64rem;  margin-inline: auto; }

  /* --- Misc ---------------------------------------------------------------- */
  /* Visible but not yet usable — e.g. an editor panel with nothing selected. */
  .u-inert {
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
  }

  .u-cursor-pointer { cursor: pointer; }
  .u-select-none { user-select: none; }
  .u-relative { position: relative; }
  .u-sticky-top { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
  .u-overflow-auto { overflow: auto; }
  .u-overflow-hidden { overflow: hidden; }
  .u-no-underline { text-decoration: none; }
  .u-underline { text-decoration: underline; }

  /* --- Responsive visibility ---------------------------------------------- */
  @media (max-width: 48rem) {
    .u-hide-mobile { display: none; }
  }
  @media (min-width: 48.01rem) {
    .u-hide-desktop { display: none; }
  }

  /* --- Entrance animations -------------------------------------------------- */
  .u-animate-fade { animation: fade-in var(--duration-slow) var(--ease) both; }
  .u-animate-rise { animation: rise-in var(--duration-slow) var(--ease) both; }

  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ==========================================================================
   PRINT
   Receipts and tickets are the only things worth printing here.
   ========================================================================== */

@layer utilities {
  @media print {
    :root { --color-bg: #fff; }

    body { background: #fff; color: #000; }

    .app-sidebar,
    .app-backdrop,
    .topbar,
    .public-nav,
    .pagination,
    .modal-overlay,
    .page-header__actions,
    .u-no-print { display: none; }

    .app-shell { display: block; }
    .app-content,
    .public-body { padding: 0; max-width: none; }

    .card,
    .ticket {
      border: 1px solid #000;
      box-shadow: none;
      break-inside: avoid;
    }

    .ticket__footer { background: #fff; }

    a { color: #000; text-decoration: none; }

    /* Print only the ticket when one is on the page. */
    .print-only-ticket .ticket { break-inside: avoid; }

    /* The page's print width falls below the breakpoints that the table's
       "stacked" mode and the footer's stacked-on-narrow mode key off, so
       force the wide-viewport layouts here to keep the ticket compact. */
    .ticket__footer {
      grid-template-columns: minmax(0, 1fr) minmax(0, 16rem) !important;
    }
    .ticket__footer-info {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .ticket__footer-pay {
      padding-left: var(--space-6) !important;
      padding-top: 0 !important;
      border-left: 2px dashed #000 !important;
      border-top: 0 !important;
    }
    .ticket__banner,
    .ticket__main,
    .ticket__footer { padding: var(--space-4) !important; }

    .table--stack { display: table !important; }
    .table--stack thead {
      position: static !important;
      width: auto !important;
      height: auto !important;
      overflow: visible !important;
      clip-path: none !important;
      white-space: normal !important;
    }
    .table--stack tbody,
    .table--stack tr { display: table-row-group !important; }
    .table--stack tr { display: table-row !important; }
    .table--stack td {
      display: table-cell !important;
      padding: var(--space-2) !important;
      text-align: left !important;
    }
    .table--stack td::before { content: none !important; }
    .table--stack td[data-label="Fare"] { text-align: right !important; }
  }
}