/* ════════════════════════════════════════════════════════════════════════
   CLOUD GARDEN — COMPONENTS
   Canonical, hand-built primitives. Load AFTER tokens/tokens.css,
   type/fonts.css and type/type-scale.css. Reuse these — never recompose by
   hand and never reach for an off-the-shelf UI kit (reference/engineering-standards.md).

   Contents
     1. .lk          — the wordmark lockup (the one logo component, §3)
     2. .cg-clause   — institutional clause label  §NN — NAME
     3. .cg-btn      — primary / ghost button
     4. .cg-rule     — hairline divider (plain cool grey)
     5. .cg-plate    — grayscale image in a hairline plate (§6.1)
     6. .cg-regmarks — corner registration ticks (§7)
     7. .cg-bed / .cg-soil — laurel-bed (§4.6) & dark-soil (§3.5) surfaces
   ════════════════════════════════════════════════════════════════════════ */


/* ── 1 · THE WORDMARK LOCKUP ─────────────────────────────────────────────
   ONE component, parametrised by a SINGLE font-size on .lk. The mark LEADS
   (in front of the word). On LIGHT it is the laurel Kachel (≈1.42× cap). On
   DARK/BED it falls back to the open paper-white Wolkenkrone (≈1.5× cap) —
   the green tile is never shown on dark (§4.2). Markup carries BOTH inline
   SVGs (.cg-m-tile + .cg-m-open); CSS shows the right one. See lockup markup
   in components.html. Clear space (≥1 cap) is baked as padding — keep it,
   or zero it only where surrounding whitespace already provides ≥1 cap. */
.lk{
  font-family:var(--cg-font);
  display:inline-flex; align-items:center;
  gap:var(--cg-lk-gap); line-height:1;
  font-kerning:normal; font-feature-settings:"kern" 1;
  padding:var(--cg-lk-clear);            /* baked clear space ≈ 1 cap height */
  font-size:46px;                        /* the SINGLE parameter — set per use */
}
.lk__wm{position:relative; display:block; line-height:.84; font-size:1em}
.lk__cloud{
  display:block; font-weight:500; color:var(--cg-ink); font-size:1em;
  text-transform:none;                   /* Title Case — "Cloud Garden" */
  letter-spacing:var(--cg-track-wordmark);
  white-space:nowrap;
}
.lk__garden{color:var(--cg-green)}       /* the one signal word, laurel on light */

/* the signet, leading */
.lk__mark{order:-1; flex:none; display:inline-flex; color:var(--cg-dark-ink); font-size:1em}
.lk__mark svg{width:auto; display:block}
.lk__mark .cg-m-tile{height:1.42em; height:var(--cg-mark-cap)}   /* em fallback, then cap (Kachel on light) */
.lk__mark .cg-m-open{height:1em; height:1cap; fill:currentColor; display:none}

/* dark / bed contexts → open paper-white mark, never the green tile.
   The open Wolkenkrone has no solid tile, so it is sized LARGER than the
   Kachel (its crown ≈ the tile's crown) and the whole lockup is centre-aligned
   like the light one; a small downward nudge seats the crown on the cap line
   (the crown sits high in the glyph box, the trunk descends like a stem). */
.lk--reversed .lk__mark .cg-m-tile,
.lk--bed .lk__mark .cg-m-tile{display:none}
.lk--reversed .lk__mark .cg-m-open,
.lk--bed .lk__mark .cg-m-open{display:block}
/* open mark = cap-height GLYPH (height:1cap from base), baseline-aligned when a wordmark is
   present: viewBox cropped to the ink so the box == the tree, then `align-items:baseline`
   plants the trunk on the baseline and the crown on the cap line by construction — no nudge.
   (Mark-only variant sizes the mark by width via --cg-mark-size, so it is excluded.) */
.lk--reversed:not(.lk--mark),
.lk--bed:not(.lk--mark){align-items:baseline}

/* reversed on dark "soil": paper-white wordmark, "Garden" GREY (never green) */
.lk--reversed .lk__cloud{color:var(--cg-dark-ink)}
.lk--reversed .lk__garden{color:var(--cg-grey-300)}   /* grey, NOT laurel */
.lk--reversed .lk__mark{color:var(--cg-dark-ink)}

/* on the laurel bed: paper-white wordmark, "Garden" goes paper-white too
   (you cannot show the accent on its own hue — tonal contrast carries it) */
.lk--bed .lk__cloud{color:var(--cg-bed-ink)}
.lk--bed .lk__garden{color:var(--cg-bed-ink)}
.lk--bed .lk__mark{color:var(--cg-bed-ink)}

/* stacked — mark centred above the wordmark (square / narrow formats) */
.lk--stacked{flex-direction:column; align-items:center; gap:var(--cg-lk-gap); text-align:center}
.lk--stacked .lk__mark{order:-1}

/* compact — tightest horizontal slot: signet + wordmark, tightest tracking
   (clear-space padding is already baked on .lk) */
.lk--compact .lk__wm{line-height:1}
.lk--compact .lk__cloud{letter-spacing:-.026em}

/* mark-only — the signet alone. Size via --cg-mark-size (the one named
   exception to cap-relative sizing). Used for favicon/avatar/app icon. */
.lk--mark{font-size:0; padding:calc(var(--cg-mark-size,52px) * .55)}
.lk--mark .lk__mark{font-size:1rem}
.lk--mark .lk__mark svg{height:auto; width:var(--cg-mark-size,52px)}


/* ── 2 · INSTITUTIONAL CLAUSE LABEL — §NN — NAME ─────────────────────────
   The "Klärung" voice: a tracked-uppercase clause marker with a green index
   numeral and a hairline tick. Use as an eyebrow / section register. */
.cg-clause{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--cg-font); font-size:clamp(10px,1vw,11px); font-weight:500;
  letter-spacing:var(--cg-track-label); text-transform:uppercase; color:var(--cg-grey-650);
}
.cg-clause .cl-no{color:var(--cg-green); font-variant-numeric:tabular-nums lining-nums}
.cg-clause .cl-tick{width:22px; height:1px; background:var(--cg-grey-300); display:inline-block}
.cg-bed .cg-clause,.cg-soil .cg-clause{color:var(--cg-bed-soft)}
.cg-bed .cg-clause .cl-no{color:var(--cg-bed-ink)}
.cg-bed .cg-clause .cl-tick{background:var(--cg-bed-line)}
.cg-soil .cg-clause{color:var(--cg-dark-soft)}
.cg-soil .cg-clause .cl-no{color:var(--cg-dark-ink)}
.cg-soil .cg-clause .cl-tick{background:var(--cg-dark-line)}


/* ── 3 · BUTTON ──────────────────────────────────────────────────────────
   Hover floods to ink, not a second colour. */
.cg-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--cg-font); font-size:14px; font-weight:500; letter-spacing:0;
  padding:13px 22px; border-radius:var(--cg-radius); cursor:pointer;
  transition:background var(--cg-dur) var(--cg-ease),color var(--cg-dur) var(--cg-ease),border-color var(--cg-dur) var(--cg-ease);
}
.cg-btn--primary{background:var(--cg-green); color:#fff; border:1px solid var(--cg-green)}
.cg-btn--primary:hover{background:var(--cg-ink); border-color:var(--cg-ink)}
.cg-btn--ghost{background:transparent; color:var(--cg-ink); border:1px solid var(--cg-grey-300)}
.cg-btn--ghost:hover{border-color:var(--cg-ink)}
.cg-btn .arw{width:15px; height:15px; transition:transform var(--cg-dur) var(--cg-ease)}
.cg-btn:hover .arw{transform:translateX(3px)}
/* on the bed, the button inverts: paper-white fill, laurel text */
.cg-bed .cg-btn--primary{background:var(--cg-bed-ink); color:var(--cg-green); border-color:var(--cg-bed-ink)}
.cg-bed .cg-btn--primary:hover{background:#fff; border-color:#fff}


/* ── 4 · HAIRLINE RULE ───────────────────────────────────────────────────
   The primary structural device — dividers, plate frames, ticks — always
   plain cool grey; the laurel accent never rides a rule. */
.cg-rule{height:1px; background:var(--cg-rule); border:0}
.cg-soil .cg-rule,.cg-bed .cg-rule{background:var(--cg-dark-line)}


/* ── 5 · IMAGE PLATE (§6.1) ──────────────────────────────────────────────
   Grayscale image, framed in a 1px cool rule with a generous margin — an
   engraved frontispiece. Never warm filters, vignettes, drop shadows. */
.cg-plate{
  position:relative; background:var(--cg-paper);
  border:1px solid var(--cg-grey-200); padding:10px;
}
.cg-plate img{display:block; width:100%; height:auto; filter:grayscale(1)}
.cg-plate figcaption{
  margin-top:10px; font-family:var(--cg-font); font-size:11px; font-weight:500;
  letter-spacing:var(--cg-track-label-micro); text-transform:uppercase; color:var(--cg-grey-500);
}
.cg-plate figcaption .g{color:var(--cg-green)}   /* a green caption keyword stays green-on-light */


/* ── 6 · REGISTRATION / CORNER TICKS (§7) ────────────────────────────────
   Restrained "specimen / datasheet" accent. Keep quiet (grey). */
.cg-regmarks{position:absolute; inset:11px; pointer-events:none}
.cg-regmarks i{position:absolute; width:9px; height:9px; color:var(--cg-grey-300)}
.cg-regmarks i::before,.cg-regmarks i::after{content:""; position:absolute; background:currentColor}
.cg-regmarks i::before{width:9px; height:1px}
.cg-regmarks i::after{width:1px; height:9px}
.cg-regmarks i.tl{top:0; left:0}
.cg-regmarks i.tr{top:0; right:0}.cg-regmarks i.tr::before{right:0}.cg-regmarks i.tr::after{right:0}
.cg-regmarks i.bl{bottom:0; left:0}.cg-regmarks i.bl::before{bottom:0}.cg-regmarks i.bl::after{bottom:0}
.cg-regmarks i.br{bottom:0; right:0}.cg-regmarks i.br::before{right:0;bottom:0}.cg-regmarks i.br::after{right:0;bottom:0}


/* ── 7 · SURFACES — the laurel BED (§4.6) and the dark SOIL (§3.5) ────────
   The bed is the ONLY colour fill the system allows, and only as a section
   ground, rationed like an accent (a few per page, white returns between).
   On both surfaces the accent role is carried by paper-white / grey. */
.cg-bed{
  background:var(--cg-bed); color:var(--cg-bed-ink);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cg-bed h1,.cg-bed h2,.cg-bed h3{color:var(--cg-bed-ink)}
.cg-soil{
  background:var(--cg-dark); color:var(--cg-dark-ink);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.cg-soil h1,.cg-soil h2,.cg-soil h3{color:var(--cg-dark-ink)}


/* ── REDUCED MOTION (§9) — honour the user's preference everywhere ───────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}