/* =============================================================
   landing.css — LangSyn makeover landing component family
   (Coherence Spec A3 — one .css per component family). This file is
   registered with the component gate and scanned by the colour gate, and it
   is synced across sites from a single source, since these are the shared
   surfaces the hub + every service sub-landing + the status panel reuse. So
   do not edit a site's copy: edit the source under web/brand/ and re-run the
   sync, or the next sync silently reverts you. Token-only: every color is
   var(--ls-*) — no raw literal.

   The gate and sync commands are deliberately not named here. This file is
   SERVED, so a comment in it is published, and naming our build tooling on a
   public surface is what WEB-INTERNAL-PATH-LINT-TOOL-EXT exists to stop.
   The repo's own web gate runner runs them all and names them in its output.

   Provides:
     .ls-service-card   link-card: hub -> a service sub-landing
     .ls-health-badge   status pill (.is-up / .is-down / .is-unknown)
     .ls-status-board   the .net status-panel list of service rows
   The hero + generic .ls-card skeleton already live in langsyn-theme.css.
   ============================================================= */

/* --- Service card (hub -> sub-landing) --------------------- */
.ls-service-card{
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--ls-surface);border:1px solid var(--ls-border);
  border-radius:var(--ls-radius);padding:1.4rem;
  text-decoration:none;color:var(--ls-text);
  position:relative;overflow:hidden;
  transition:border-color var(--ls-dur) var(--ls-ease),
             transform var(--ls-dur) var(--ls-ease),
             background var(--ls-dur) var(--ls-ease);
}
.ls-service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ls-accent);opacity:.55}
.ls-service-card:hover{border-color:var(--ls-accent-border);transform:translateY(-2px);background:var(--ls-surface-2)}
.ls-service-card-name{font-family:var(--ls-font-mono);font-size:.95rem;font-weight:500;letter-spacing:.02em;color:var(--ls-text)}
.ls-service-card-host{font-family:var(--ls-font-mono);font-size:.72rem;color:var(--ls-text-faint)}
.ls-service-card-desc{font-size:.85rem;color:var(--ls-text-2);line-height:1.6;flex:1}
.ls-service-card-cta{font-family:var(--ls-font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ls-accent);margin-top:.4rem}
.ls-service-card:hover .ls-service-card-cta{color:var(--ls-accent-glow)}

/* --- Health badge (up / down / unknown) -------------------- */
.ls-health-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--ls-font-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;
  border:1px solid var(--ls-border);background:var(--ls-surface-2);color:var(--ls-text-2);
}
.ls-health-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--ls-text-faint);flex-shrink:0}
.ls-health-badge.is-up{border-color:rgb(var(--ls-ok-rgb) / .35);background:rgb(var(--ls-ok-rgb) / .10);color:var(--ls-ok)}
.ls-health-badge.is-up .ls-health-badge-dot{background:var(--ls-ok)}
.ls-health-badge.is-down{border-color:rgb(var(--ls-danger-rgb) / .35);background:rgb(var(--ls-danger-rgb) / .10);color:var(--ls-danger)}
.ls-health-badge.is-down .ls-health-badge-dot{background:var(--ls-danger)}
.ls-health-badge.is-unknown{color:var(--ls-text-faint)}
.ls-health-badge.is-unknown .ls-health-badge-dot{background:var(--ls-text-faint)}

/* --- Status board (.net status panel) ---------------------- */
.ls-status-board{display:flex;flex-direction:column;gap:.75rem;max-width:640px;margin:0 auto}
.ls-status-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--ls-surface);border:1px solid var(--ls-border);border-radius:var(--ls-radius);
  padding:1rem 1.3rem;text-decoration:none;color:var(--ls-text);
  transition:border-color var(--ls-dur) var(--ls-ease);
}
.ls-status-row:hover{border-color:var(--ls-accent-border)}
.ls-status-row-main{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ls-status-row-name{font-family:var(--ls-font-mono);font-size:.9rem;font-weight:500;color:var(--ls-text)}
.ls-status-row-host{font-family:var(--ls-font-mono);font-size:.72rem;color:var(--ls-text-faint)}
.ls-status-note{max-width:640px;margin:1.2rem auto 0;text-align:center;color:var(--ls-text-faint);font-size:.78rem}

/* --- Mobile ------------------------------------------------ */
@media(max-width:640px){
  .ls-status-row{flex-direction:column;align-items:flex-start;gap:.6rem}
}