/* Zenithy landing - ui.css
 * Reusable product-UI pieces (rebuilt in CSS from design/demo/src/css + the Flutter desktop app):
 * derived hue tokens, the app window, cards, pills, the habit button, the animated cursor.
 * Everything reads the tokens, so light / dark / the 8 seeds just work. */

/* ---------- derived hue tokens the token sheet does not have ----------
 * accent2-soft/-ink: for the second accent (chess club, hobbies in the chaos scene).
 * teal: the product's Hobbies colour = halfway between its blue (money) and green (health),
 * so it follows every seed. Declared on every theme/seed scope so nested scopes recompute. */
:root, [data-theme], [data-seed] {
  --accent2-soft: color-mix(in srgb, var(--accent2) 20%, var(--surface));
  --accent2-ink: color-mix(in srgb, var(--accent2) 62%, var(--ink));
  --teal: color-mix(in oklch, var(--money) 50%, var(--health));
  --teal-soft: color-mix(in oklch, var(--money-soft) 50%, var(--health-soft));
  --teal-ink: color-mix(in oklch, var(--money-ink) 50%, var(--health-ink));
}

/* ---------- small atoms ---------- */
/* icon tile: rounded square in the hue's soft colour (goal cards, backlog, habit rows) */
.tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--hs); color: var(--hi); }
.tile .ms { font-size: 22px; font-variation-settings: 'FILL' 1; }
.tile.round { border-radius: 50%; }
.tile.solid { background: var(--h); color: #fff; }
[data-theme="dark"] .tile.solid { color: var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tile.solid { color: var(--bg); } }

.pillx { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.2px; white-space: nowrap; background: var(--hs); color: var(--hi); font-variation-settings: 'ROND' 70; }
.pillx .ms { font-size: 14px; }
.pillx.quiet { background: var(--inset); color: var(--ink2); }

/* ---------- the app window: a scaled-down Zenithy desktop window (rail + content) ----------
 * Positioned by ZL.ui.place (centred in its slot, scaled by ZL.ui.fit). Design size is set by the scene. */
.appwin {
  position: absolute; left: 50%; top: 50%; display: flex; overflow: hidden; transform-origin: 50% 50%; contain: layout paint;
  border-radius: 30px; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.3; text-align: left;
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--line2); will-change: transform; font-variation-settings: 'ROND' 60;
}
.appwin::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--glow) 90%, transparent), transparent 70%), radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--accent-soft) 60%, transparent), transparent 70%); }
.win-rail { position: relative; flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 0 16px; }
.win-logo { width: 36px; height: 36px; margin-bottom: 10px; }
.win-logo svg { width: 100%; height: 100%; }
.win-logo path { fill: var(--accent); }
.rail-i { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 70px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--ink2); }
.rail-i .ms { display: grid; place-items: center; width: 50px; height: 30px; border-radius: 15px; font-size: 22px; }
.rail-i.on { color: var(--accent-ink); }
.rail-i.on .ms { background: var(--accent-soft); font-variation-settings: 'FILL' 1; }
.win-main { position: relative; flex: 1; min-width: 0; padding: 20px 24px 18px 6px; }
.win-tabs { display: none; }
.appwin.is-m .win-rail { display: none; }
.appwin.is-m { border-radius: 32px; }
.appwin.is-m .win-main { padding: 16px 14px 12px; }

/* ---------- the habit button: circle -> cookie6 + check (lib habit button; design/demo components) ---------- */
.hbtn { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.hbtn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hbtn path { fill: transparent; stroke: var(--h); stroke-width: 4; stroke-opacity: 0.75; transition: fill var(--dur-effects) var(--ease-effects), stroke-opacity var(--dur-effects) var(--ease-effects); }
.hbtn.is-done path { fill: var(--h); stroke-opacity: 0; }
.hbtn .hb-i { position: relative; font-size: 21px; color: var(--hi); font-variation-settings: 'FILL' 1; transition: opacity 0.2s, transform var(--dur-spatial) var(--ease-spatial); }
.hbtn.is-done .hb-i { opacity: 0; transform: scale(0.4); }
.hbtn .hb-c { position: absolute; font-size: 24px; color: var(--surface); opacity: 0; transform: scale(0.3) rotate(-30deg); font-variation-settings: 'FILL' 0, 'wght' 700;
  transition: opacity 0.2s, transform var(--dur-spatial) var(--ease-spatial); }
.hbtn.is-done .hb-c { opacity: 1; transform: none; }

/* ---------- the animated mouse cursor ---------- */
.cursor { --press: 0; position: absolute; left: 0; top: 0; z-index: 60; width: 28px; height: 32px; pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--shadow-c) 38%, transparent)); }
.cursor svg { position: absolute; inset: 0; width: 28px; height: 32px; }
.cursor-body { fill: var(--ink); stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.cursor-ring { position: absolute; left: -9px; top: -9px; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--accent);
  opacity: calc(var(--press) * 0.75); transform: scale(calc(0.55 + var(--press) * 0.45)); transition: opacity 0.18s, transform 0.3s var(--ease-spatial); }