/* ===================================================================
   flora.css — the Eclipse-Flora design language (floralovercast.com)
   Layers ON TOP of theme.css (the base Eclipse HUD kit) + fonts.css.
   Core system: .fx-card (black glass, chamfered, stepped bottom),
   .fx-fill (filled UV variant), .stat trio, ghost-button lift.
   Canonical copy: Claude Space/flora-kit/flora.css
   =================================================================== */
  :root { color-scheme: dark; }
  html, body { margin:0; height:100%; }
  body {
    background:#08080a; color:#e8e8e8;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    overflow-x:hidden;
  }
  /* petal + relativity-grid canvas sits at the very back */
  canvas#bg { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
  /* content column floats above the CRT overlays */
  .wrap { position:relative; z-index:5; zoom:0.86; max-width:840px; margin:0 auto; padding:84px 24px 96px; }
  .eclipse-header { zoom:0.86; }
  .hero { padding:26px 26px 22px; }
  .hero h1 {
    font-family:"Chakra Petch","Segoe UI",sans-serif; text-transform:uppercase;
    letter-spacing:.16em; font-size:1.9rem; font-weight:700; margin:0 0 10px; color:#f3f0ff;
  }
  .hero h1 .v { color:var(--eclipse-uv); text-shadow:0 0 24px var(--eclipse-uv-glow-strong); }
  .hero p { margin:0; color:var(--eclipse-fg-dim); max-width:60ch; line-height:1.7; font-size:.9rem; }
  .statrow { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0 6px; }
  .cards { display:flex; flex-direction:column; gap:12px; margin-top:18px; }
  .eclipse-card h2 {
    font-family:"Chakra Petch",sans-serif; text-transform:uppercase; letter-spacing:.14em;
    font-size:.92rem; font-weight:600; margin:0 0 6px; color:#f1efff;
    display:flex; align-items:center; gap:10px;
  }
  .eclipse-card h2 .idx { color:var(--eclipse-uv); font-size:.7rem; opacity:.7; }
  .eclipse-card p { margin:0 0 12px; color:var(--eclipse-fg-dim); line-height:1.6; font-size:.82rem; }
  .links { display:flex; flex-wrap:wrap; gap:8px; }
  .eclipse-btn { min-height:30px; font-size:9.5px; padding:0 14px; display:inline-flex; align-items:center; text-decoration:none; position:relative; }
  .eclipse-btn > span { position:relative; z-index:1; }
  .eclipse-pill, .eclipse-status-pill { display:inline-flex; text-decoration:none; }
  .center-tag { justify-self:center; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#fff; }

  /* ===== card / panel restyle (2026-07-28) — cyberpunk chamfer, translucent, one UV-filled ===== */
  /* no outer panel: the cards float directly on the petal grid */
  .eclipse-panel { background:none; border:none; overflow:visible; }
  .eclipse-panel-corner { display:none; }
  .hero p { color:#bcbac8; }                         /* readability lift */

  /* ===== unified glass-card system — black glass, refracting =====
     the element is a faint dark glass sheet (darker rim than before); ::before is the "black water":
     a tint + a single-direction refraction (straw-in-water) pooled at the bottom edge. a top-ward mask
     fades the whole card from black at the bottom to COMPLETELY see-through at the top, so the glass —
     and its distortion — is really only read at the edges. */
  .fx-card {
    --chamfer: 26px;
    /* stepped bottom edge: ___/‾‾| — low run, 45° rise (--lift tall), raised shelf (--shelf wide), right wall.
       lift ≈ 24% of card height across all card types (matched to the trio's proportion) */
    --lift: 32px;
    --shelf: 150px;
    /* the fill itself fades to transparent toward the top — NOT a mask, so the card's TEXT stays full-opacity */
    --fx-rim: linear-gradient(to bottom, rgba(58,52,80,0.60) 0%, rgba(30,26,42,0.45) 100%);
    position: relative;
    border: none;
    background: var(--fx-rim);
    clip-path: polygon(var(--chamfer) 0, 100% 0,
                       100% calc(100% - var(--lift)),
                       calc(100% - var(--shelf)) calc(100% - var(--lift)),
                       calc(100% - var(--shelf) - var(--lift)) 100%,
                       0 100%, 0 var(--chamfer));
    transition: filter .18s ease;
  }
  .fx-card > * { position: relative; z-index: 1; }
  .fx-card::before {                                      /* black water: tint + one-way refraction, strongest at the bottom edge */
    content:""; position:absolute; inset:1px; z-index:0;
    width:auto; height:auto; opacity:1;   /* beat kit .eclipse-stat:before (2x14 uv bar) so the interior covers the tile */
    background: rgba(4,3,8,0.86);
    -webkit-backdrop-filter: blur(3px) saturate(1.1); backdrop-filter: blur(3px) saturate(1.1);
    /* progressive-enhance: if the browser supports SVG filter refs in backdrop-filter, add the refraction */
    -webkit-backdrop-filter: blur(3px) saturate(1.1) url(#fx-refract); backdrop-filter: blur(3px) saturate(1.1) url(#fx-refract);
    -webkit-mask-image: none;
            mask-image: none;
    clip-path: polygon(var(--chamfer) 0, 100% 0,
                       100% calc(100% - var(--lift)),
                       calc(100% - var(--shelf)) calc(100% - var(--lift)),
                       calc(100% - var(--shelf) - var(--lift)) 100%,
                       0 100%, 0 var(--chamfer));
  }
  /* UV accent rail (the kit's stat-tile animation, re-homed to ::after): starts just below the top-left cut,
     grows full-height on hover — clip-path keeps it inside the chamfer */
  .fx-card::after {
    content:""; position:absolute; z-index:2;
    left:0; top:var(--chamfer); width:2px; height:16px;
    background:var(--eclipse-uv); opacity:.55;
    transition: height .25s ease, opacity .25s ease;
  }
  .fx-card p { color:#c8c6d6; }                           /* readability lift over the clearer glass */
  .eclipse-card.fx-card { padding:20px 22px; }            /* roomier tool cards (kit default is 14/16) */
  .fx-card:not(.fx-fill):hover::after { height: calc(100% - var(--chamfer)); opacity:1; }
  .fx-card.hover:hover { filter: brightness(1.18); }

  /* the ghost buttons (Firefox / GitHub): kit's hairline border is near-invisible — lift it */
  .eclipse-btn:not(.primary) { border:1px solid rgba(202,187,255,0.6); }

  /* filled variant — the UV panel we pulled off Viretta, now living on the title card; stays fully filled */
  .fx-fill { background: linear-gradient(158deg, #b1a0ef 0%, #8d70e2 100%); color:#0b0a12; -webkit-mask-image:none; mask-image:none; }
  .fx-fill::before, .fx-fill::after { display:none; }

  /* the trio: rebuilt from scratch on the fx-card system — no kit .eclipse-stat class, no inherited rules */
  .stat { --chamfer: 13px; --lift: 22px; --shelf: 70px; display:flex; flex-direction:column; gap:10px; min-height:82px; padding:16px 18px; }
  .stat-label { font-family:var(--eclipse-display); font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#ffffff; }
  .stat-value { font-family:var(--eclipse-display); font-size:17px; font-weight:600; line-height:1.15; letter-spacing:.005em; color:#ffffff; word-break:break-word; }
  .stat-value.uv, .stat-value.dim { color:#ffffff; }

  /* title card: the filled UV block holding the hero heading + intro */
  .title-card {
    --chamfer: 30px; padding:26px 30px 24px; margin:0 0 20px;
    /* plain parallel chamfers: same-size cuts top-left + bottom-right, no stepped bottom */
    clip-path: polygon(var(--chamfer) 0, 100% 0,
                       100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
                       0 100%, 0 var(--chamfer));
  }
  .title-card h1 { color:#0b0a12; }
  .title-card h1 .v { color:#3a2b6e; text-shadow:none; }
  .title-card p { color:#000000; }