/* ============================================================================
   LX Portal — Visual polish layer (2026-10-31)
   ----------------------------------------------------------------------------
   Survives V3 append_css() (separate file; not under @@V3_CSS_START@@).
   Research → CSS mapping:
   · aydesign 2026: product-first hero, bento density that scrolls, editorial type
   · Ottermind Scaling Platform: fluid clamp type, measured gutters (~16–20px),
     intentional motion durations, one accent color
   · SaaSFrame / Framiq / Kage bento: 16–24px gutters, visual 60–70% of card,
     hover 200–300ms / 2–4px lift, size = hierarchy
   Brand lock: #4f46e5 + orange accent — NO purple-on-white AI cliché.
   ========================================================================== */

/* Self-hosted latin(+ext) woff2 — see assets/fonts/lx-fonts.css + *.woff2
   CJK falls back to PingFang SC / Microsoft YaHei in --lx-font-body. */
@import url("/assets/fonts/lx-fonts.css");

:root{
  --lx-font-display:"Manrope","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
  --lx-font-body:"IBM Plex Sans","Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --lx-gutter:18px;
  --lx-card-pad:1rem;
  --lx-motion:220ms cubic-bezier(.2,.7,.2,1);
}

/* Expressive type — replace Inter stack without touching structure */
body{
  font-family:var(--lx-font-body);
  letter-spacing:-.011em;
}
#fleet h1,
.lx-sec-head h2,
.lx-tool-card h3,
.lx-out-cap b,
.lx-shot-cap b,
.lx-footer-brand{
  font-family:var(--lx-font-display);
}

/* Fluid hero hierarchy (Ottermind clamp pattern, on-brand blue atmosphere) */
#fleet h1{
  font-size:clamp(2rem,1.35rem + 2.4vw,3.15rem);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:800;
}
#fleet > .max-w-6xl > p,
#fleet .mt-4.text-lg,
#fleet p.text-lg{
  max-width:42rem;
  font-size:clamp(1rem,.95rem + .35vw,1.125rem);
  line-height:1.65;
  color:var(--mute,#5A6478);
}

/* Hero atmosphere: brand blue + soft orange only (kill indigo/violet wash) */
#fleet::before{
  background:
    radial-gradient(48% 60% at 22% 28%,rgba(79,70,229,.18) 0%,transparent 70%),
    radial-gradient(40% 55% at 78% 18%,rgba(255,138,52,.10) 0%,transparent 72%),
    radial-gradient(70% 70% at 50% 0%,rgba(79,70,229,.09) 0%,transparent 78%) !important;
}
/* Subtle paper grain without purple */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Motion 1 — hero title reveal */
@keyframes lxHeroIn{
  from{opacity:0;transform:translate3d(0,14px,0);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
#fleet h1{
  animation:lxHeroIn .7s var(--lx-motion) both;
}
#fleet .lx-eyebrow,
#fleet .eyebrow{
  animation:lxHeroIn .55s var(--lx-motion) .06s both;
}

/* Motion 2 — live pulse (StatusMicro + hero LIVE) */
@keyframes lxLivePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(31,157,106,.35)}
  50%{box-shadow:0 0 0 4px rgba(31,157,106,0)}
}
.sm-live--on .sm-dot,
.lx-out-live{
  animation:lxLivePulse 2.4s ease-in-out infinite;
}
.lx-out-live{border-radius:6px!important} /* less pill clutter */

/* Motion 3 — card / out-rail hover polish */
.lx-tool-card,
.card-hover.lx-tool-card{
  transition:border-color var(--lx-motion),box-shadow var(--lx-motion),transform var(--lx-motion);
}
.lx-tool-card:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(11,14,20,.04),0 18px 36px -18px rgba(79,70,229,.28);
}
.lx-tool-card .thumb{
  margin-bottom:.65rem;
  border-radius:12px;
  aspect-ratio:16/10;
}
.lx-tool-card .thumb img{
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.lx-tool-card:hover .thumb img{transform:scale(1.03)}

/* Catalog grid: SaaSFrame gutters 16–24px; visual-first density */
.card-grid{
  gap:var(--lx-gutter)!important;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))!important;
}
.lx-cat-chip{
  border-radius:7px!important; /* quiet chip, not rounded-full pill cluster */
  letter-spacing:.01em;
}

/* ---------- StatusMicro (honest metadata only) ---------- */
.status-micro{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  margin-top:.55rem;min-height:22px;
}
.sm-live{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--lx-mono,ui-monospace,monospace);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sm-live--on{color:#0B7A3B}
.sm-live--listed{color:var(--mute-2,#8A93A6)}
.sm-dot{
  width:6px;height:6px;border-radius:50%;flex:none;background:currentColor;
}
.sm-live--on .sm-dot{background:var(--ok,#1F9D6A)}
.sm-meter{
  display:inline-flex;align-items:flex-end;gap:2px;height:12px;padding:0 2px;
}
.sm-bar{
  display:block;width:3px;border-radius:1px;background:#D7DEEA;height:6px;
}
.sm-bar:nth-child(2){height:9px}
.sm-bar:nth-child(3){height:12px}
.sm-bar.on{background:var(--blue,#4f46e5)}
.sm-chip{
  display:inline-flex;align-items:center;
  font-family:var(--lx-mono,ui-monospace,monospace);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mute,#5A6478);
  background:var(--surface-alt,#EEF2FF);
  border:1px solid var(--line-2,#E4E7EC);
  border-radius:5px;padding:.12rem .4rem;
}
.sm-chip--flag{
  color:var(--blue-dark,#4338ca);
  background:rgba(79,70,229,.08);
  border-color:rgba(79,70,229,.22);
}
.sm-chip--pack{
  color:#8A4A12;
  background:var(--accent-soft,#FFF1E4);
  border-color:#FFD9B8;
}
.sm-chip--shot{
  color:var(--ink-2,#161B26);
  background:#F7F8FA;
}

/* Hero showcase polish — on-brand top rail (indigo family) */
.lx-out::before{
  background:linear-gradient(90deg,#4f46e5 0%,#6366f1 45%,#f97316 100%)!important;
  opacity:.95!important;
}
.lx-out{
  border-radius:14px!important;
  width:min(320px,78vw)!important;
}
.lx-out-rail{margin-top:1.75rem!important}
.lx-show-head .lx-kicker{
  font-family:var(--lx-font-display);
  letter-spacing:.12em;
  color:var(--blue-dark,#4338ca)!important;
}
#hero-showcase{
  margin-top:1.75rem!important;
  padding-bottom:.25rem;
}

/* Section rhythm: density that scrolls, not overwhelms */
#directory{padding-top:2.75rem!important;padding-bottom:2.75rem!important}
#directory > .mb-4 h2,
#directory h2{
  font-family:var(--lx-font-display);
  letter-spacing:-.025em;
}

/* Soften competing pill rows on cat tabs slightly */
.cat-tab{border-radius:8px!important}

@media (prefers-reduced-motion:reduce){
  #fleet h1,#fleet .lx-eyebrow,#fleet .eyebrow{animation:none!important}
  .sm-live--on .sm-dot,.lx-out-live{animation:none!important}
  .lx-tool-card:hover{transform:none}
  .lx-tool-card:hover .thumb img{transform:none}
}

@media (max-width:640px){
  .card-grid{gap:14px!important}
  .lx-out{width:min(280px,86vw)!important}
  #fleet h1{font-size:clamp(1.75rem,5.5vw,2.35rem)}
}