/* ============================================================
 * DILLO FLOWS · G11 ON TIDE — shared bridge for the five G11 surfaces
 * (gateway, approvals, builder, timeline, quirks).
 *
 * Load order on every surface:
 *   ../../../../design-system/tokens.css   (Tide — the one source)
 *   ../../../../design-system/tide.css
 *   ../flows-tide.css                      (this file)
 *   ../../../../design-system/tide.js  + ../flows-tide.js
 *
 * This file copies nothing from Tide. It holds only:
 *   1. legacy --29d-* names the old ref/tokens.css defined and Tide
 *      does not, re-pointed at Tide tokens (so old rules keep working);
 *   2. Flows chrome shared by the five pages (bar, surface nav, dillo
 *      mark, SIMULATED stamp, 44px floor for Tide's small controls);
 *   3. the hard reduced-motion gate: ZERO animations and transitions.
 * ============================================================ */

@layer c29.tokens {
  :root {
    /* type */
    --29d-font-ui: var(--font-ui); --29d-font-display: var(--font-display); --29d-font-mono: var(--font-mono);
    --29d-font-features: "tnum" 0;
    --29d-text-2xs: 11.5px; --29d-lh-2xs: 16px; --29d-text-xs: 12.5px; --29d-lh-xs: 17px;
    --29d-text-sm: 14px; --29d-lh-sm: 20px; --29d-text-md: 15.5px; --29d-lh-md: 24px;
    --29d-text-lg: 18px; --29d-lh-lg: 26px; --29d-text-xl: 21px; --29d-lh-xl: 28px;
    --29d-text-2xl: 26px; --29d-lh-2xl: 32px; --29d-text-3xl: 32px; --29d-lh-3xl: 38px;
    --29d-text-4xl: 40px; --29d-lh-4xl: 46px;
    --29d-weight-regular: 400; --29d-weight-medium: 550; --29d-weight-semibold: 650; --29d-weight-bold: 750; --29d-weight-xbold: 800;
    --29d-body-size: var(--29d-text-md); --29d-body-lh: var(--29d-lh-md);
    /* space (Tide 4pt grid, scaled by --density) */
    --29d-s-0: calc(2px * var(--density)); --29d-s-1: var(--s1); --29d-s-2: var(--s2); --29d-s-3: var(--s3);
    --29d-s-4: var(--s4); --29d-s-6: var(--s6); --29d-s-8: var(--s8); --29d-s-12: var(--s12); --29d-s-16: calc(64px * var(--density));
    --29d-card-pad: var(--s5); --29d-section-gap: var(--s8); --29d-page-pad: var(--s4);
    --29d-control-h: var(--tap); --29d-control-h-sm: var(--tap); --29d-row-h: 52px;
    /* radius: concentric with --corner */
    --29d-r-1: 8px; --29d-r-2: var(--r-sm); --29d-r-3: var(--r-md); --29d-r-4: calc(var(--corner) - 2px); --29d-pill: var(--r-pill);
    /* motion: Tide's calm wave, scaled by --speed */
    --29d-t-instant: calc(90ms / var(--speed)); --29d-t-fast: var(--d1); --29d-t-base: var(--d2); --29d-t-slow: var(--d3); --29d-t-page: var(--d4);
    --29d-ease: var(--ease); --29d-ease-pop: var(--ease-give);
    /* light, not shadows */
    --29d-shadow-pop: var(--lift); --29d-shadow-modal: var(--lift-hi);
    --29d-focus-halo: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
    --29d-focus-ring: 0 0 0 1.5px var(--accent);
    --29d-ring: color-mix(in srgb, var(--ink-1) 14%, transparent);
    --29d-wash: var(--wash); --29d-wash-2: var(--wash-2);
    /* hues Tide leaves to the page */
    --29d-coral-900: #652412; --29d-on-dark: #FFFFFF;
    --29d-blue-100: #E3EEF6; --29d-blue-600: #2B7FA6; --29d-blue-700: #1F6283;
    --29d-green-700: #20693A; --29d-amber-700: #8F5D10; --29d-red-500: #E06A62; --29d-red-700: #A33A33;
    --29d-gold-500: var(--sun-500); --29d-gold-600: #C98A35;
    --29d-teal-700: var(--sea-700);
    /* the Flows extras */
    --fl-dispatch: #3E5BA8; --fl-dispatch-soft: color-mix(in srgb, #3E5BA8 13%, var(--surface));
  }
  [data-theme="dark"] {
    --29d-coral-50: #241A13; --29d-coral-900: #FFD2B0; --29d-on-dark: #0C1824;
    --29d-blue-100: #102A3E; --29d-blue-600: #8FC7EE; --29d-blue-700: #B9DCF7;
    --29d-green-700: #85DDA9; --29d-amber-700: #F7C87C; --29d-red-500: #F2837E; --29d-red-700: #FAABA3;
    --29d-gold-500: #F5C15C; --29d-gold-600: #F5C15C; --29d-teal-100: #123A37;
    --29d-ring: rgba(196,214,224,.16);
    --fl-dispatch: #9DB2F2; --fl-dispatch-soft: rgba(157,178,242,.14);
  }
}

/* Chrome is unlayered on purpose: the legacy page sheets are unlayered too,
   so these win by specificity instead of losing to any layered rule. */
:where(html) { scroll-padding-top: 76px; }

  body { font-family: var(--font-ui); color: var(--ink); }
  body::before { content: ""; position: fixed; inset: 0; background: var(--glow); pointer-events: none; z-index: -1; }

  /* ---------- the Flows bar: brand · surface · theme ---------- */
  .fl-bar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; gap: var(--s2);
    padding: calc(var(--s2) + var(--safe-t)) var(--s4) var(--s2); min-height: 60px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(var(--pane-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--pane-blur)) saturate(1.3);
    box-shadow: 0 1px 0 var(--edge-soft); }
  .fl-brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--tap); flex: 1; text-decoration: none; color: inherit; }
  .fl-brand b { display: block; white-space: nowrap; font: 750 16px/1.15 var(--font-display); letter-spacing: -.01em; }
  .fl-brand small { display: block; font-size: 12px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fl-brand > span { min-width: 0; }
  .fl-dillo { width: 38px; height: 38px; flex: none; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(150deg, var(--sea-100), var(--sun-100)); box-shadow: inset 0 0 0 1px var(--pane-edge), var(--hair); color: var(--sea-700); }
  [data-theme="dark"] .fl-dillo { background: linear-gradient(150deg, var(--sea-100), #2A2418); color: var(--sea-700); }
  .fl-dillo svg { width: 28px; height: 28px; overflow: visible; }
  .fl-dillo .shell { transform-origin: 13px 15px; transition: transform var(--d5) var(--ease-give); }
  .fl-brand:hover .fl-dillo .shell, .fl-dillo.is-happy .shell { transform: rotate(-8deg) translateY(-1px); }
  .fl-dillo.is-roll svg { animation: fl-roll calc(900ms / var(--speed)) var(--ease) 1; }
  @keyframes fl-roll { 0% { transform: none; } 45% { transform: translateX(3px) rotate(200deg) scale(.86); } 100% { transform: rotate(360deg); } }

  @media (max-width: 359px) { .fl-bar { gap: 6px; padding-inline: 12px; } .fl-dillo { width: 34px; height: 34px; border-radius: 12px; } .fl-bar .fl-sim { padding: 5px 7px; letter-spacing: .05em; } }

  /* surface switcher: scrolls inside itself, never widens the page */
  .fl-nav { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: var(--s2) var(--s4) var(--s3); margin: 0; list-style: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .fl-nav::-webkit-scrollbar { display: none; }
  .fl-nav::after { content: ""; flex: 0 0 28px; }
  .fl-nav a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 99px;
    font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; background: var(--wash); white-space: nowrap;
    transition: background var(--d2) var(--ease), color var(--d2) var(--ease); }
  .fl-nav a:hover { background: var(--wash-2); color: var(--ink); }
  .fl-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
  .fl-nav a:focus-visible, .fl-brand:focus-visible { outline: none; box-shadow: var(--focus); }
  .fl-nav a i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }

  /* ---------- shared bits ---------- */
  .fl-sim { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
    color: var(--warn); background: var(--warn-bg); padding: 5px 8px; border-radius: 99px; white-space: nowrap; vertical-align: middle; }
  .fl-sim::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
  .fl-kbd { font: 600 11px/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; background: var(--wash); box-shadow: inset 0 -1px 0 var(--edge); color: var(--ink-soft); }
  .fl-foot { max-width: 560px; margin: var(--s8) auto 0; padding: 0 var(--s4) calc(var(--s12) + var(--safe-b)); color: var(--ink-mute); font-size: 13px; text-align: center; text-wrap: balance; }

  /* 44px floor for Tide's compact controls on Flows surfaces */
  .t-btn.is-sm, .t-chip, c29-composer .cp-tools .t-chip { min-height: var(--tap); }
  c29-composer .cp-send { min-width: var(--tap); min-height: var(--tap); }
  c29-toasts { z-index: 90; }

/* ---------- reduced motion: ZERO animations, ZERO transitions ----------
   Tide's own rule keeps 160ms fades; the Flows gate is stricter.
   Same unlayered !important tier as Tide's rule, later in source: wins. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  c29-toasts .drain { display: none !important; }
}