/* flotry-experience.css — Flotry Experience System (global coherence layer)
 *
 * [FLOTRY-VISUAL-EXPERIENCE-REBUILD-V1]
 *
 * Injected into EVERY served UI page via _inject_pwa_head (app/api/ui_endpoints.py),
 * AFTER each page's own stylesheets/inline styles. To guarantee zero visual
 * regression on pages it cannot individually validate, this layer is deliberately
 * CONSERVATIVE:
 *   - it unifies design TOKENS (one palette/scale across surfaces);
 *   - it applies only UNIVERSALLY-SAFE base polish (overflow control, focus rings,
 *     font rendering, mobile tap targets, motion safety, selection colour);
 *   - all richer components are OPT-IN via .fl-* classes — they never restyle a
 *     page that does not adopt them.
 *
 * It must NEVER set colours/layout on bare element selectors that existing pages
 * already style (button, .card, h1…) — only properties pages do not set.
 */

/* ---- Canonical tokens (single source of truth, mirrored from brand) ---- */
:root {
  --fl-x-teal:        #0C766C;
  --fl-x-teal-ink:    #095e56;
  --fl-x-coral:       #E55C3C;
  --fl-x-canvas:      #FBF7F2;
  --fl-x-surface:     #FFFFFF;
  --fl-x-ink:         #16302C;
  --fl-x-ink-soft:    #4B635E;
  --fl-x-ink-muted:   #7C8A86;
  --fl-x-line:        #E2ECE9;
  --fl-x-moss-soft:   #E1EADB;
  --fl-x-coral-soft:  #FCE6E0;
  /* spacing + radius scale */
  --fl-x-s1: 4px;  --fl-x-s2: 8px;  --fl-x-s3: 12px;
  --fl-x-s4: 16px; --fl-x-s5: 24px; --fl-x-s6: 32px;  --fl-x-s7: 48px;
  --fl-x-r-sm: 8px; --fl-x-r-md: 12px; --fl-x-r-lg: 16px; --fl-x-r-pill: 999px;
  --fl-x-shadow: 0 1px 2px rgba(16,48,44,.04), 0 8px 24px rgba(16,48,44,.06);
  --fl-x-maxw: 560px;
}

/* ---- Universally-safe base polish (no colour/layout clobber) ---- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* media never overflows its container — fixes mobile horizontal scroll everywhere */
img, svg, video, canvas { max-width: 100%; height: auto; }
/* consistent, accessible focus ring across every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fl-x-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--fl-x-coral-soft); color: var(--fl-x-ink); }
/* honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* comfortable mobile tap targets for primary interactive controls */
@media (max-width: 520px) {
  button, .fl-btn, a.fl-btn, input[type="submit"], input[type="button"] { min-height: 44px; }
}

/* ---- OPT-IN component vocabulary (.fl-*) — adopt per page, never automatic ---- */
.fl-shell { max-width: var(--fl-x-maxw); margin: 0 auto; padding: 0 var(--fl-x-s4); box-sizing: border-box; }
.fl-shell--wide { max-width: 960px; }
.fl-stack > * + * { margin-top: var(--fl-x-s4); }

.fl-card {
  background: var(--fl-x-surface);
  border: 1px solid var(--fl-x-line);
  border-radius: var(--fl-x-r-lg);
  padding: var(--fl-x-s4) var(--fl-x-s5);
  box-shadow: var(--fl-x-shadow);
}

.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fl-x-s2);
  font: inherit; font-weight: 700; line-height: 1; cursor: pointer;
  padding: 12px 18px; border-radius: var(--fl-x-r-md); border: 1px solid transparent;
  text-decoration: none; transition: filter .15s ease, transform .05s ease;
}
.fl-btn:active { transform: translateY(1px); }
.fl-btn--primary   { background: var(--fl-x-teal); color: #fff; }
.fl-btn--primary:hover { filter: brightness(1.06); }
.fl-btn--secondary { background: transparent; color: var(--fl-x-teal-ink); border-color: var(--fl-x-line); }
.fl-btn--coral     { background: var(--fl-x-coral); color: #fff; }
.fl-btn--block     { width: 100%; }

.fl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: var(--fl-x-r-pill);
  background: var(--fl-x-moss-soft); color: var(--fl-x-teal-ink);
}
.fl-chip--coral { background: var(--fl-x-coral-soft); color: var(--fl-x-coral); }
.fl-chip--muted { background: #EEF2F1; color: var(--fl-x-ink-muted); }

.fl-badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--fl-x-r-pill); }
.fl-badge--review { background: var(--fl-x-coral-soft); color: var(--fl-x-coral); }
.fl-badge--ok     { background: var(--fl-x-moss-soft); color: var(--fl-x-teal-ink); }

.fl-banner { border: 1px solid var(--fl-x-line); border-left: 4px solid var(--fl-x-teal); background: var(--fl-x-surface); border-radius: var(--fl-x-r-md); padding: var(--fl-x-s3) var(--fl-x-s4); font-size: 14px; color: var(--fl-x-ink-soft); }
.fl-banner--coral { border-left-color: var(--fl-x-coral); }

.fl-empty { text-align: center; color: var(--fl-x-ink-muted); padding: var(--fl-x-s6) var(--fl-x-s4); font-size: 14px; }
.fl-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--fl-x-ink-soft); margin-bottom: 6px; }
.fl-timeline { list-style: none; margin: 0; padding: 0; }
.fl-timeline > li { position: relative; padding: 0 0 var(--fl-x-s4) var(--fl-x-s5); border-left: 2px solid var(--fl-x-line); }
.fl-timeline > li::before { content: ""; position: absolute; left: -6px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--fl-x-teal); }
.fl-timeline > li:last-child { border-left-color: transparent; }

/* ============================================================================
   [FLOTRY-VISUAL-ALIVE-INTERACTION-LAYER-V1] Tasteful "feel alive" layer.
   Warm, modern, premium — NOT neon/gamer. Box-shadow/filter only (no layout
   shift), reduced-motion-guarded, degrades safely on touch, never lowers
   contrast, never hides disabled/error/destructive states.
   ============================================================================ */
:root {
  --fl-x-glow-teal:  0 0 0 1px rgba(12,118,108,.12), 0 6px 18px rgba(12,118,108,.22);
  --fl-x-glow-coral: 0 0 0 1px rgba(229,92,60,.12), 0 6px 18px rgba(229,92,60,.26);
  --fl-x-lift: 0 10px 28px rgba(16,48,44,.12);
}

/* Reusable opt-in interaction classes */
.fl-glow        { box-shadow: var(--fl-x-glow-teal); }
.fl-glow-cta    { transition: box-shadow .2s ease, transform .12s ease, filter .2s ease; }
.fl-glow-cta:hover, .fl-glow-cta:focus-visible { box-shadow: var(--fl-x-glow-teal); transform: translateY(-1px); filter: brightness(1.04); }
.fl-elevated    { box-shadow: var(--fl-x-lift); }
.fl-focus-ring:focus-visible { outline: 2px solid var(--fl-x-teal); outline-offset: 2px; }
.fl-live-card   { transition: box-shadow .2s ease, transform .12s ease; }
.fl-live-card:hover { box-shadow: var(--fl-x-lift); transform: translateY(-2px); }

/* Brand mark — persistent, alive on hover/focus (logo anchor on every shell) */
.fl-logo-mark, .fl-logo-interactive,
a.l-brand, .ha-brand, .hp-brand, a[data-fl-logo] {
  transition: transform .18s ease, filter .18s ease, text-shadow .18s ease;
}
.fl-logo-interactive:hover, .fl-logo-interactive:focus-visible,
a.l-brand:hover, a.l-brand:focus-visible,
a[data-fl-logo]:hover, a[data-fl-logo]:focus-visible {
  transform: translateY(-1px) scale(1.015);
  filter: drop-shadow(0 2px 6px rgba(12,118,108,.28));
}

/* Make the EXISTING primary CTAs across surfaces feel clickable + alive
   (additive :hover enhancement on real deployed classes; box-shadow only). */
.fl-btn--primary, .fl-btn--coral,
.l-btn--customer, .l-cta-top, .ha-btn--primary, .hp-btn--primary,
button[data-action="save-helper-profile"], a.flotry-btn--primary {
  transition: box-shadow .2s ease, transform .12s ease, filter .2s ease, background .2s ease;
}
.fl-btn--primary:hover, .l-btn--customer:hover, .l-cta-top:hover,
button[data-action="save-helper-profile"]:hover, a.flotry-btn--primary:hover {
  box-shadow: var(--fl-x-glow-teal); transform: translateY(-1px); filter: brightness(1.05);
}
.fl-btn--coral:hover, .ha-btn--primary:hover, .hp-btn--primary:hover {
  box-shadow: var(--fl-x-glow-coral); transform: translateY(-1px); filter: brightness(1.05);
}
/* never glow disabled / destructive / muted controls */
[disabled], .ha-btn--muted[disabled], .fl-btn[disabled],
.l-btn--danger, [data-destructive] {
  box-shadow: none !important; transform: none !important; filter: none !important;
}

/* Next-action blocks DRAW ATTENTION (the deployed customer/helper next-step
   hints) — a soft, calm emphasis. No infinite distraction. */
[data-qa="ca-card-next"], [data-qa="ha-job-next"], .fl-action-pulse {
  box-shadow: 0 2px 10px rgba(12,118,108,.10);
  transition: box-shadow .25s ease;
}
[data-qa="ha-job-next"] { box-shadow: 0 2px 10px rgba(229,92,60,.12); }

/* Touch devices: no sticky hover state (degrade safely) */
@media (hover: none) {
  .fl-glow-cta:hover, .fl-live-card:hover, .l-btn--customer:hover,
  .ha-btn--primary:hover, a.l-brand:hover { box-shadow: none; transform: none; filter: none; }
}
/* Reduced motion: keep glow (static) but kill movement */
@media (prefers-reduced-motion: reduce) {
  .fl-glow-cta:hover, .fl-live-card:hover, .fl-logo-interactive:hover,
  a.l-brand:hover, .l-btn--customer:hover, .ha-btn--primary:hover,
  .fl-btn--primary:hover, .fl-btn--coral:hover { transform: none !important; }
}

/* === [FLOTRY_FOUNDER_DIRECTED_UX_PRODUCT_FIXES_V1] Metallic / reluciente
   CTA layer. Founder: buttons still read flat/opaque. `.fl-metal` adds a
   VISIBLE-AT-REST metallic sheen (diagonal light band + inner top light +
   bottom shade) over the button's own color, plus a stronger ambient glow.
   Hover sweeps the light band once (no infinite animation); touch and
   reduced-motion degrade to the static sheen. CSS only, no layout shift,
   text contrast untouched (overlay is pointer-events:none alpha-white). */
.fl-metal { position: relative; isolation: isolate; }
.fl-metal::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0) 30%, rgba(255,255,255,.38) 45%,
      rgba(255,255,255,.10) 52%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg,
      rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 40%,
      rgba(0,0,0,.10) 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 18% 0, 0 0;
  transition: background-position .55s ease;
}
.fl-metal {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 10px 26px -10px rgba(15,138,126,.55),
    0 2px 8px rgba(15,138,126,.18);
}
.fl-metal--coral {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 10px 26px -10px rgba(229,92,60,.55),
    0 2px 8px rgba(229,92,60,.18);
}
@media (hover: hover) and (pointer: fine) {
  .fl-metal:hover::after { background-position: 92% 0, 0 0; }
  .fl-metal:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -1px 0 rgba(0,0,0,.08),
      0 16px 34px -10px rgba(15,138,126,.62),
      0 4px 12px rgba(15,138,126,.24);
  }
  .fl-metal--coral:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 -1px 0 rgba(0,0,0,.08),
      0 16px 34px -10px rgba(229,92,60,.62),
      0 4px 12px rgba(229,92,60,.24);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-metal::after { transition: none !important; }
}
[disabled].fl-metal { box-shadow: none !important; }
[disabled].fl-metal::after { display: none; }