/* GENERATED by Deliverables/_Chrome/export-page-css.py from Deliverables/Home/Home.html + static/fable5/home.app.css - do not edit here; edit the design page and re-run. */
/* ============================================================
   CANONICAL TEMPLATE (v4) — pure login splash on the product-wide
   Cabinet token set (see Dashboard/STYLEGUIDE.md): app frame
   (fills the viewport, footer pinned), slim legal line, no header
   bar, and checkbox-hack debug chips (fixed, bottom-right)
   previewing the website-wide alert strip (full-bleed, very top;
   same alert as the Dashboard) and the
   signing-in state. Supersedes the v3 "pure gate" template
   (recoverable from git history). Baseline reference:
   Home2-Braintopia-Original.html (untouched).
   ============================================================ */
:root {
  --tile-lg: clamp(200px, 22vw, 380px);
  --tile-gradient: linear-gradient(160deg, var(--primary-tint) 0%, var(--primary) 55%, var(--primary-dark) 100%);
  --glow: rgba(120, 219, 122, .34);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text);
  background:
    radial-gradient(var(--bg-glow-w) var(--bg-glow-h) at 50% 30%, #0d3327, transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}





/* app-icon stand-in tiles (raster artwork in the real product) */
.tile {
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--tile-gradient);
  color: var(--on-primary);
  font-family: var(--font-display); font-weight: 900;
  text-shadow:
    -1px -1px 0 rgba(30,12,54,.9), 1px -1px 0 rgba(30,12,54,.9),
    -1px  1px 0 rgba(30,12,54,.9), 1px  1px 0 rgba(30,12,54,.9);
  flex: none; user-select: none;
}
.hero__icon {
  width: var(--tile-lg); height: var(--tile-lg);
  border-radius: var(--r-lg);
  font-size: var(--fs-hero-icon); padding-bottom: var(--hero-icon-lift);
  box-shadow: var(--glow-hero) var(--glow);
}

/* ── buttons (Cabinet) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--gradient-primary);
  color: var(--on-primary);
  font-weight: 700; font-size: var(--fs-sm);
  border: 0; border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  cursor: pointer; white-space: nowrap;
  transition: filter var(--t-fast) ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-md); }
.btn__icon { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* ── hero (app frame: fills the viewport, content centered) ── */
.hero {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-6) var(--page-pad);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.2;
  color: var(--primary);
  margin-top: var(--sp-7);
  overflow-wrap: anywhere;
}
.hero__subtitle {
  font-size: var(--fs-brand); color: var(--text);
  margin-top: var(--sp-4);
  max-width: var(--hero-measure);
}
.hero .btn--lg { margin-top: var(--sp-6); }

/* ── SYSTEM ALERT banner — the website-wide alert, full-bleed strip at the very
      top of the page. Exact copy of the Dashboard's .alert-banner (same class,
      recipe, slot); shown on every page when the platform is down/frozen. ── */
.alert-banner {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;   /* #1 Home: overlay so activating it never shifts the centered hero */
  align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--page-pad);
  background: linear-gradient(180deg, var(--danger-soft), rgba(248, 113, 113, .04)), var(--surface-inset);
  border-top: 1px solid var(--danger-border);
  border-bottom: 1px solid var(--danger-border);
  font-size: var(--fs-sm);
}



/* ── debug preview chips (checkbox-hack, no JS — Cabinet pattern) ── */
.debug-bar {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 60;
  display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2);
  user-select: none;
  -webkit-user-select: none;
}


.debug-chip:active { transform: translateY(1px); }

/* alert state: reveal the top strip (page content moves down, in-flow) */
/* signing state: CTA in-flight (Cabinet .is-loading pattern) */
#dbg-signing:checked ~ main .btn--lg {
  pointer-events: none;
  opacity: .75;
  position: relative;
  color: transparent;
}
#dbg-signing:checked ~ main .btn--lg .btn__icon { visibility: hidden; }
#dbg-signing:checked ~ main .btn--lg::after {
  content: "";
  position: absolute;
  width: var(--icon-xs); height: var(--icon-xs);
  inset: 0; margin: auto;
  border-radius: 50%;
  border: var(--ring) solid rgba(255, 255, 255, .35);
  border-top-color: var(--on-primary);
  animation: spin var(--t-spin) linear infinite;
}


/* ── footer — slim pinned legal line (Cabinet placement) ── */
.site-footer {
  padding: var(--sp-2) var(--page-pad) var(--sp-3);
  text-align: center;
}
.site-footer__text { font-size: var(--fs-xs); color: var(--muted); }

/* ── responsive ── */
@media (max-width: 720px) {
  :root {
  --tile-lg: 108px;
}
  .hero__title { font-size: clamp(var(--fs-hero-min), var(--fs-hero-fluid), var(--fs-hero-max)); }
  .hero__subtitle { font-size: var(--fs-md); }
  .hero__icon { font-size: var(--fs-hero-icon-sm); padding-bottom: var(--hero-icon-lift-sm); }
  .debug-bar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- app-only rules, from static/fable5/home.app.css (the runtime states the design page has no markup for) ---- */
/* home.app.css - the rules the app's landing page needs and the Home design page has no markup for: the hero mark
   (the logo image in the hero tile, with its halo) and the signing-in debug chip's states. Hand-written, small;
   export-page-css.py appends it to the generated home.css (round 119). */
.hero__mark { position: relative; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.hero__mark::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--glow) 0%, color-mix(in srgb, var(--glow) 45%, transparent) 34%, transparent 64%); }
.hero__mark img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
#dbg-signing:checked ~ .debug-bar .debug-chip--signing {
  background: var(--gradient-primary);
  border-color: transparent;
  color: var(--on-primary);
}
#dbg-signing:focus-visible ~ .debug-bar .debug-chip--signing {
  outline: var(--ring) solid var(--accent);
  outline-offset: var(--ring-offset);
}