/* Goli — the Kaleidr brand typeface (variable 300–700). Same font files +
   @font-face as kaleidr-studio-ui / kaleidr-analytics-ui, so the store reads as a
   visual sibling (titles/body use --font-primary below). */
@font-face {
  font-family: "Goli";
  src:
    url("assets/goli/fonts/variable/GoliVF.woff2") format("woff2-variations"),
    url("assets/goli/fonts/variable/GoliVF.woff2") format("woff2"),
    url("assets/goli/fonts/variable/GoliVF.ttf") format("truetype-variations"),
    url("assets/goli/fonts/variable/GoliVF.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Editor-chrome aliases → the centralized --s-* theme (defined just below), so
     the customizer editor shares the landing/studio light-dark surface instead
     of a bespoke hard-dark palette. Every editor rule reads these, so the whole
     chrome re-themes (and follows light/dark) from this one block. */
  --font-primary: "Goli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bg: var(--s-bg);
  --panel: var(--s-surface);
  --panel-2: var(--s-surface);
  --line: var(--s-border);
  --ink: var(--s-text);
  --muted: var(--s-text-secondary);
  --faint: var(--s-text-muted);
  --accent: var(--s-primary);
  --focus: var(--s-primary);
  --s-header-h: 64px; /* studio/analytics rail + panel header height */
  font-synthesis: none;
}

/* Landing-store theme scale (--s-*). SSOT = mirror-by-value (no shared package):
   this block is copied FROM kaleidr-studio-ui/src/styles/index.css and matches it
   EXACTLY. studio-ui, analytics-ui, and this store landing all carry the same
   values — keep them in sync when refining together. Light by default; dark under
   an explicit data-theme or the OS preference. */
:root {
  --s-bg: #ffffff;
  --s-surface: #f3f4f6;
  --s-surface-hover: #e5e7eb;
  --s-border: #e5e7eb;
  --s-text: #111827;
  --s-text-secondary: #6b7280;
  --s-text-muted: #9ca3af;
  /* Follows the user's GLOBAL accent (--kaleidr-accent, stamped by
     auth-core paintAppearance + roamed via the shared cookie); brand
     green is the fallback. */
  --s-primary: var(--kaleidr-accent, #2da84a);
  --s-danger: #dc2626;
  /* Full-page hero photo behind an --s-bg scrim — mirrors
     kaleidr-home-ui/src/styles/base.css --page-bg BY VALUE: a 20% light / 25% dark
     scrim over the cdn.kaleidr.com/brand/kaleidr_landing_{brightmode,darkmode}.
     {avif,webp,jpg} image-set (AVIF → WebP → JPG). */
  --page-bg:
    linear-gradient(color-mix(in srgb, var(--s-bg) 20%, transparent), color-mix(in srgb, var(--s-bg) 20%, transparent)),
    image-set(url("https://cdn.kaleidr.com/brand/kaleidr_landing_brightmode.avif") type("image/avif"),
              url("https://cdn.kaleidr.com/brand/kaleidr_landing_brightmode.webp") type("image/webp"),
              url("https://cdn.kaleidr.com/brand/kaleidr_landing_brightmode.jpg")  type("image/jpeg"));
}
html[data-theme="dark"] {
  --s-bg: #111721;
  --s-surface: #1b212a;
  --s-surface-hover: #252d38;
  --s-border: #3e3e3e;
  --s-text: #ffffff;
  --s-text-secondary: #aaaaaa;
  --s-text-muted: #808080;
  --s-primary: color-mix(in srgb, var(--kaleidr-accent, #2da84a), #fff 20%);
  --s-danger: #f85149;
  --page-bg:
    linear-gradient(color-mix(in srgb, var(--s-bg) 25%, transparent), color-mix(in srgb, var(--s-bg) 25%, transparent)),
    image-set(url("https://cdn.kaleidr.com/brand/kaleidr_landing_darkmode.avif") type("image/avif"),
              url("https://cdn.kaleidr.com/brand/kaleidr_landing_darkmode.webp") type("image/webp"),
              url("https://cdn.kaleidr.com/brand/kaleidr_landing_darkmode.jpg")  type("image/jpeg"));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s-bg: #111721;
    --s-surface: #1b212a;
    --s-surface-hover: #252d38;
    --s-border: #3e3e3e;
    --s-text: #ffffff;
    --s-text-secondary: #aaaaaa;
    --s-text-muted: #808080;
    --s-primary: color-mix(in srgb, var(--kaleidr-accent, #2da84a), #fff 20%);
    --s-danger: #f85149;
    --page-bg:
      linear-gradient(color-mix(in srgb, var(--s-bg) 25%, transparent), color-mix(in srgb, var(--s-bg) 25%, transparent)),
      image-set(url("https://cdn.kaleidr.com/brand/kaleidr_landing_darkmode.avif") type("image/avif"),
                url("https://cdn.kaleidr.com/brand/kaleidr_landing_darkmode.webp") type("image/webp"),
                url("https://cdn.kaleidr.com/brand/kaleidr_landing_darkmode.jpg")  type("image/jpeg"));
  }
}

/* Plain Background — flat ground (no brand photo). */
html[data-background="plain"] {
  --page-bg:
    linear-gradient(color-mix(in srgb, var(--s-bg) 20%, transparent), color-mix(in srgb, var(--s-bg) 20%, transparent)),
    linear-gradient(var(--s-bg), var(--s-bg));
}
html[data-theme="dark"][data-background="plain"] {
  --page-bg:
    linear-gradient(color-mix(in srgb, var(--s-bg) 25%, transparent), color-mix(in srgb, var(--s-bg) 25%, transparent)),
    linear-gradient(var(--s-bg), var(--s-bg));
}

/* ---- @kaleidr/auth-core sign-in modal: host-token overrides ----
   The vendored auth.css (vendor/auth.css) renders the modal from these
   upstream host tokens. Mapping them onto the landing's --s-* scale —
   which already flips light/dark — makes --auth-highlight resolve to
   --s-primary (green Sign-in button) and the surface/border/text read
   dark, so the modal is identical to analytics-ui's AuthModal. */
:root {
  --glass-bg: var(--s-surface);                     /* → --auth-glass-bg: modal card surface */
  --modal-card-border: 1px solid var(--s-border);   /* → --auth-modal-border */
  --highlight-color: var(--s-primary);              /* → --auth-highlight: green CTA + focus */
  --color-primary: var(--s-primary);
  --color-primary-white: var(--s-text);             /* → --auth-text-primary */
  --color-secondary-white: var(--s-text-secondary); /* → --auth-text-secondary */
  --color-tertiary-white: var(--s-text-muted);      /* → --auth-text-muted */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

/* ---- Editor top toolbar (full-width; replaces the old .topbar + the in-pane
   preview toolbar). One icon-above-label button style for every action,
   centralized on the --s-* theme like the landing rail. ---- */
.ck-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 12px;
  background: var(--s-surface); border-bottom: 1px solid var(--s-border);
}
.ck-tb-group, .ck-tabs { display: flex; align-items: center; gap: 4px; }
.ck-tb-sep { width: 1px; align-self: stretch; margin: 6px 6px; background: var(--s-border); }

.ck-tb-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 58px; padding: 6px 10px;
  border: 1px solid transparent; border-radius: 10px;
  background: none; color: var(--s-text-secondary);
  font: inherit; font-size: 11px; line-height: 1.1; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, filter .12s;
}
.ck-tb-btn svg { width: 20px; height: 20px; }
.ck-tb-btn span { white-space: nowrap; }
/* Ghost fill only on non-primary buttons — a shared :hover would override the
   primary green (equal specificity) while keeping its white text, rendering
   Save/Download white-on-white. Mirrors the landing rail's centralized hover. */
.ck-tb-btn:not(.ck-tb-btn--primary):hover:not(:disabled) { background: var(--s-surface-hover); color: var(--s-text); }
.ck-tb-btn:focus-visible { outline: 2px solid var(--s-primary); outline-offset: -2px; }
.ck-tb-btn:disabled { opacity: .4; cursor: default; }

/* Active page tab (Home / Map) — accent label, no fill. */
.ck-tb-btn.tab.is-active { color: var(--s-primary); }
/* Edit toggle while editing (is-active set by editor.js). */
.ck-tb-btn--toggle.is-active {
  background: color-mix(in srgb, var(--s-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--s-primary) 40%, transparent);
  color: var(--s-primary);
}
/* Primary actions — Save + Download. */
.ck-tb-btn--primary { background: var(--s-primary); color: #fff; }
.ck-tb-btn--primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
.ck-tb-btn--primary:disabled { opacity: .55; }
/* Save / Download result flash — reversed colors (light fill, accent/danger text+icon). */
.ck-tb-btn--primary.is-sent { background: var(--s-bg); color: var(--s-primary); border-color: var(--s-primary); }
.ck-tb-btn--primary.is-error { background: var(--s-bg); color: var(--s-danger); border-color: var(--s-danger); }
.ck-tb-btn--primary.is-sent:hover, .ck-tb-btn--primary.is-error:hover { filter: none; }

/* ---- Preview mode: hide all chrome, the site fills the viewport ---- */
body.previewing .ck-toolbar { display: none; }
/* Reuses the primary toolbar-button look (.ck-tb-btn--primary: accent fill,
   white icon + label). Only fixed positioning + show/hide is bespoke; nudged
   in from the right edge so it clears the preview's scrollbar. */
.ck-preview-exit {
  position: fixed; top: 8px; right: 24px; z-index: 40000;
  display: none;
}
body.previewing .ck-preview-exit { display: inline-flex; }

/* Store-landing card styles (.ms-*) — home.html's site cards + template
   gallery (siteCard / galleryCard in home.js). Glass card: */
.ms-card {
  border-radius: 16px; border: 1px solid var(--s-border); overflow: hidden; cursor: pointer;
  background-color: color-mix(in srgb, var(--s-surface) 45%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all .15s ease;
}
.ms-card:hover {
  border-color: var(--s-primary);
  background-color: color-mix(in srgb, var(--s-surface-hover) 55%, transparent);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.ms-card:focus-visible { outline: 2px solid var(--s-primary); outline-offset: 2px; }

/* cover — 4:3 image */
.ms-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #11151c; }
.ms-cover-media { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-cover-img { object-fit: cover; }

/* label chip (top-left) */
.ms-chip {
  position: absolute; top: 8px; left: 8px; pointer-events: none;
  background: rgba(0, 0, 0, .55); color: #fff; text-transform: uppercase; letter-spacing: .05em;
  font-size: 14px; padding: 2px 8px; border-radius: 9999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}

/* "Customize" CTA — bottom-right of the cover, revealed on card hover; mirrors
   analytics-ui's TemplateCard CTA pill BY VALUE (uppercase, small, accent). The
   whole card is clickable; this is the explicit CTA. */
.ms-customize {
  position: absolute; right: 8px; bottom: 8px; z-index: 10;
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 9999px;
  background: var(--s-primary); color: #fff;
  font-size: 14px; text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  opacity: 0; transition: opacity .15s ease, filter .15s ease;
}
.ms-card:hover .ms-customize, .ms-card:focus-within .ms-customize { opacity: 1; }
.ms-customize:hover { filter: brightness(1.08); }

/* text block */
.ms-body { padding: 14px; }
.ms-body-row { display: flex; align-items: center; gap: 8px; }
.ms-body-row .ms-name { flex: 1; min-width: 0; }
.ms-name {
  font-size: 16px; font-weight: 600; color: var(--s-text);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-card:hover .ms-name { color: var(--s-primary); }
.ms-meta { margin-top: 2px; font-size: 12px; color: var(--s-text-muted); }

/* site-card kebab (⋯) + its body-mounted popover menu (position: fixed so the
   card's overflow:hidden can't clip it; anchored by home.js) */
.ms-kebab {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--s-text-secondary);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.ms-kebab:hover { background: var(--s-surface-hover); color: var(--s-text); }
.ms-kebab:focus-visible { outline: 2px solid var(--s-primary); outline-offset: 1px; }
.ms-menu {
  position: fixed; z-index: 32000; min-width: 180px; padding: 6px;
  background: color-mix(in srgb, var(--s-surface) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--s-border); border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
}
.ms-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--s-text); font: inherit; font-size: 13px; cursor: pointer;
}
.ms-menu-item:hover { background: var(--s-surface-hover); }
.ms-menu-item--danger { color: var(--s-danger); }
.ms-menu-ico { flex: 0 0 auto; display: inline-flex; }

/* inline rename (swaps in for .ms-name) */
.ms-rename {
  flex: 1; min-width: 0; padding: 2px 6px;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--s-text);
  background: var(--s-surface); border: 1px solid var(--s-primary); border-radius: 6px;
}

/* Inputs share the auth-modal (sign-in) border system: a 1px text-derived
   hairline idle, stronger on hover, and the centralized highlight ONLY on
   focus — a 1px accent border + a 1px ring that reads as a 2px outline with no
   content-shift. Mirrors vendor/auth.css --auth-input-border* BY VALUE. */
input, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--s-text) 22%, transparent);
  border-radius: 8px;
  padding: 8px 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, textarea:hover { border-color: color-mix(in srgb, var(--s-text) 36%, transparent); }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--s-primary);
  box-shadow: 0 0 0 1px var(--s-primary);
}
textarea { resize: vertical; font-family: inherit; }

/* ---- Layout ---- */
.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr; /* preview-only by default (the "demo" view) */
  min-height: 0;
}
/* "Edit template" on → reveal the editing chrome (left panel); off → clean preview */
body.editing .layout {
  grid-template-columns: minmax(340px, 420px) 1fr;
}
body:not(.editing) .form-pane {
  display: none;
}
/* Undo / Redo (+ their divider) are editing-only tools — hidden while previewing. */
body:not(.editing) .ck-edit-only { display: none; }

.pane { min-height: 0; min-width: 0; }

.form-pane {
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--s-border);
  background: var(--s-bg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--s-text) 22%, transparent) transparent;
}
.form-pane::-webkit-scrollbar { width: 10px; }
.form-pane::-webkit-scrollbar-track { background: transparent; }
.form-pane::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--s-text) 22%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: padding-box;
}
.form-pane::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--s-text) 34%, transparent); background-clip: padding-box;
}

form { display: flex; flex-direction: column; }

/* Flat sections — no boxes. Centralized spacing: a legend hugs its own content
   (tight gap), and sections are separated by a larger whitespace gutter so each
   reads as one group. Both values live here, so every section is consistent. */
fieldset { border: 0; padding: 0; margin: 0; background: none; }
fieldset + fieldset { margin-top: 28px; }
legend {
  padding: 0;
  display: block;
  width: 100%;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--s-text-muted);
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}
label:last-child { margin-bottom: 0; }
/* A label immediately followed by a section CTA (e.g. the map-embed field above
   "Build Your Map in Studio") sits tight to the button. */
label:has(+ .section-cta) { margin-bottom: 6px; }
label input, label textarea { color: var(--ink); }

.hint { font-size: 11px; color: var(--faint); font-weight: 400; }
.hint.inline { display: inline; text-transform: none; }

/* File input — strip the boxed input chrome, style just the "Choose File" button. */
input[type="file"] { padding: 0; border: 0; background: none; color: var(--s-text-secondary); font-size: 12px; }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--s-border); background: var(--s-surface); color: var(--s-text);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--s-surface-hover); }

/* Section CTA (e.g. "Build in Studio") — matches the "Choose File" box style
   (bordered surface button), not an accent fill. */
.section-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; margin-top: 0;
  border-radius: 8px;
  border: 1px solid var(--s-border);
  background: var(--s-surface); color: var(--s-text);
  font-family: inherit; font-size: 13px; font-weight: 500; text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.section-cta:hover { background: var(--s-surface-hover); }

/* Toggle switch (Analytics) — clean, no box; accent-green when on. The native
   checkbox is visually hidden but drives state + app.js's data-path wiring. */
.opt-switch { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; }
.opt-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.opt-switch-control {
  flex: 0 0 auto; position: relative; width: 38px; height: 22px; margin-top: 1px;
  border-radius: 9999px; background: var(--s-surface-hover);
  transition: background .15s ease;
}
.opt-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s ease;
}
.opt-switch-input:checked + .opt-switch-control { background: var(--s-primary); }
.opt-switch-input:checked + .opt-switch-control .opt-switch-knob { transform: translateX(16px); }
.opt-switch-input:focus-visible + .opt-switch-control { outline: 2px solid var(--s-primary); outline-offset: 2px; }
.opt-switch-text { display: flex; flex-direction: column; gap: 3px; }
.opt-switch-title { font-size: 13px; font-weight: 600; color: var(--s-text); }
.opt-switch-sub { font-size: 12px; line-height: 1.5; color: var(--s-text-muted); }

/* Color rows — the swatch button toggles the shared color popover
   (CustomizerEditor.toggleColorPopover): click opens, click closes. */
.color-wrap { display: flex; align-items: center; gap: 8px; }
.ck-swatch {
  width: 44px; height: 36px; flex: 0 0 auto;
  padding: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--s-surface-hover);
  cursor: pointer;
}
.hex { width: 110px; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Save/Download status note. */
/* Confirm dialog (KaleidrAuthModal.confirm) — reuses the vendored .auth-modal
   chrome; only the button row + the destructive-primary variant are bespoke. */
.auth-confirm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 20px; }
.auth-confirm-cancel {
  padding: 10px 14px; border: 0; border-radius: 10px; background: transparent;
  color: var(--s-text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.auth-confirm-cancel:hover { background: var(--s-surface-hover); color: var(--s-text); }
.auth-confirm-actions .auth-continue-btn { width: auto; margin: 0; padding: 10px 18px; }
.auth-continue-btn--danger { background: var(--s-danger); }
.auth-continue-btn--danger:hover { filter: brightness(1.08); }

/* ---- Preview (full-bleed — the site fills the pane edge-to-edge) ---- */
.preview-pane { display: flex; flex-direction: column; background: var(--s-bg); }
.preview-frame { flex: 1; padding: 0; min-height: 0; }
#preview {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .form-pane { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-frame { height: 60vh; }
}


/* ================= Store landing (home.html) =================
   The studio-ui / analytics-ui landing chrome: hard-dark default, hero-photo
   background behind an --s-bg scrim, a fixed left rail (logo + My-sites project
   list), a fixed top-right account avatar, and a single normal document scroll.
   Reuses the .ms-card gallery for the template picker. */
.home-body {
  color: var(--s-text);
  background-color: var(--s-bg);           /* base so no white flash + graceful fallback if the photo fails */
  background-image: var(--page-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;             /* scrolls with content — analytics/studio parity (no fixed attachment) */
  min-height: 100vh;
  height: auto;                             /* let <body> be the only scroller (base body height:100% would lock it) */
}

/* Left rail (studio/analytics shell): translucent glass over the hero photo. */
.home-rail {
  position: fixed; left: 0; top: 0; height: 100%; width: 240px; z-index: 30;
  display: flex; flex-direction: column;
  background-color: color-mix(in srgb, var(--s-surface) 45%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--s-border);
  transition: width .2s ease;
}
.home-rail-header {
  flex: 0 0 var(--s-header-h); height: var(--s-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px;
  background: var(--s-surface); border-bottom: 1px solid var(--s-border);
}
.home-rail-header a { display: inline-flex; align-items: center; }
/* Pin WIDTH (height auto) so the 4.78:1 wordmark renders at studio's 110×~23,
   not height:30 → ~143px wide (which reads oversized vs the other UIs). Studio
   gets the same result from Tailwind preflight's img{height:auto} + width=110. */
.home-rail-header img { display: block; width: 110px; height: auto; }
/* Brand logo swapping (home-ui treatment): #ck-logo carries BOTH wordmark
   variants; CSS shows the one matching the painted html[data-theme], so the
   mark can never sit white-on-light. The hide rules carry the html[...]
   prefix to out-specify `.home-rail-header img { display: block }`. */
.brand-logo { display: block; }
html:not([data-theme="light"]) .brand-logo-light { display: none; }
html[data-theme="light"] .brand-logo-dark { display: none; }
/* Collapse toggle (studio/analytics hamburger) — right of the logo. */
.home-rail-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 6px; border: 0; border-radius: 8px; background: transparent;
  color: var(--s-text-secondary); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.home-rail-toggle:hover { background: var(--s-surface-hover); color: var(--s-text); }
.home-rail-toggle svg { display: block; }
.home-rail-nav { flex: 1; padding: 12px 8px; }
.home-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.home-site-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- collapsed rail (72px): hamburger + icon+label verbs only ---- */
.home-rail.collapsed .home-rail-header { justify-content: center; padding: 0 8px; }
.home-rail.collapsed #ck-logo { display: none; }
.home-rail.collapsed .home-rail-nav { padding: 12px 8px; }

/* ---- rail quick-action verbs (centralized icon + label, matches studio / analytics) ---- */
.home-rail-verb {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 8px;
  background: none; color: var(--s-text-secondary);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  transition: background .12s, color .12s;
}
/* Hover fill only on ghost verbs — a shared :hover would override the primary
   verb's green (equal specificity, later source) and, with its white text
   retained, render it as a white-on-white block. Mirrors studio/analytics,
   where hover:bg lives only on the non-primary branch. */
.home-rail-verb:not(.home-rail-verb--primary):hover { background: var(--s-surface-hover); color: var(--s-text); }
.home-rail-verb:focus-visible { outline: 2px solid var(--s-primary); outline-offset: -2px; }
.home-rail-verb--primary { background: var(--s-primary); color: #fff; }
.home-rail-verb--primary:hover { filter: brightness(1.1); color: #fff; }
.home-rail-ico { flex: 0 0 auto; width: 20px; height: 20px; }
/* Collapsed: stack the label under the icon so each function reads without hovering. */
.home-rail.collapsed .home-rail-verb { flex-direction: column; gap: 4px; padding: 8px 2px; }
.home-rail.collapsed .home-rail-verb .home-site-label { font-size: 11px; line-height: 1.25; text-align: center; }

/* Rail "New site" dropdown — centralized style (matches studio / analytics). */
.home-rail-menu {
  position: fixed; z-index: 12000; width: 220px;
  max-height: 70vh; overflow-y: auto;
  background: var(--s-bg); border: 1px solid var(--s-border); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28); padding: 6px;
}
.home-rail-menu-head {
  padding: 6px 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--s-text-muted);
}
.home-rail-menu-item {
  display: flex; align-items: center; width: 100%; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; text-align: left; color: var(--s-text); cursor: pointer;
}
.home-rail-menu-item:hover { background: var(--s-surface-hover); }
.home-rail-menu-empty { padding: 8px 10px; font-size: 14px; color: var(--s-text-muted); margin: 0; }

/* account mount floats top-right over everything — no solid header bar */
.home-account { position: fixed; top: 12px; right: 28px; z-index: 31000; }

.home {
  /* No max-width: the 2→3→4-col grid fills the full width beside the rail.
     margin-left clears the fixed rail (240px, or 72px when collapsed);
     horizontal padding mirrors analytics' lg:px-[5vw]. */
  margin-left: 240px;
  /* Top/bottom mirror analytics/studio's container (pt-15 / pb-16 = 60px / 64px);
     horizontal mirrors their lg:px-[5vw]. */
  padding: 3.75rem clamp(16px, 5vw, 64px) 64px;
  display: flex; flex-direction: column; gap: 44px;
  transition: margin-left .2s ease;
}

/* Rail collapse (240px ↔ 72px), toggled by .home-rail-toggle. The
   collapsed rules out-specify the mobile width below, so they win there too. */
.home-rail.collapsed { width: 72px; }
.home-rail.collapsed ~ .home { margin-left: 72px; }

@media (max-width: 640px) {
  .home-rail { width: 180px; }
  .home { margin-left: 180px; }
}

/* ---- Manage view (signed-in, ≥1 site): page header + site card grid ---- */
/* Card grids need calmer ground: layer an extra ~50% scrim over the base
   20/25% --page-bg (≈60% total) while the manage grid is showing. */
.home-body.surface-manage {
  background-image:
    linear-gradient(color-mix(in srgb, var(--s-bg) 50%, transparent), color-mix(in srgb, var(--s-bg) 50%, transparent)),
    var(--page-bg);
}
.surface-manage .home { padding-top: 40px; }

.home-manage { display: flex; flex-direction: column; gap: 20px; }
.home-manage[hidden], .home-hero[hidden] { display: none; }
.home-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-page-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--s-text); }
.home-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border: 0; border-radius: 9999px;
  background: var(--s-primary); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / .15);
  transition: filter .15s ease;
}
.home-cta:hover { filter: brightness(1.08); }
.home-cta:focus-visible { outline: 2px solid var(--s-primary); outline-offset: 2px; }

/* transient status note (bottom-center glass pill) */
.home-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 8px); z-index: 32000;
  padding: 10px 16px; border-radius: 10px;
  background: color-mix(in srgb, var(--s-surface) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--s-border); color: var(--s-text); font-size: 13px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.home-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* account avatar + dropdown (studio Auth.css style) */
.home-acct-wrap { position: relative; display: inline-flex; }
.home-acct-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; padding: 0;
  border: 1px solid var(--s-primary);
  background: color-mix(in srgb, var(--s-primary) 20%, transparent);
  color: var(--s-primary); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.home-acct-btn:hover { background: color-mix(in srgb, var(--s-primary) 30%, transparent); }
.home-acct-btn:focus-visible { outline: 2px solid var(--s-primary); outline-offset: 2px; }
.home-acct-icon { width: 20px; height: 20px; display: block; fill: currentColor; }

/* Account dropdown = auth-core's <AccountDropdown>. The .auth-dropdown-* internals
   (header / name / email / divider / item / signout) come from vendor/auth.css;
   only the shell (position / size / surface) is consumer-owned, mirrored from
   kaleidr-studio-ui's Auth.css BY VALUE so the menu matches studio / analytics. */
.auth-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--auth-text-primary) 10%, transparent);
  background: var(--auth-glass-bg);
  backdrop-filter: var(--auth-glass-blur); -webkit-backdrop-filter: var(--auth-glass-blur);
  user-select: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
  animation: auth-modal-scale-in .15s cubic-bezier(.34, 1.56, .64, 1);
  z-index: var(--auth-modal-z);
  overflow: hidden;
}
.auth-dropdown[hidden] { display: none; }

/* Hero — mirrors kaleidr-analytics-ui's Landing hero BY VALUE, Tailwind
   equivalents spelled out (title has no top margin; the gap is the subtitle's):
     eyebrow  = text-sm sm:text-base · uppercase · tracking-[0.2em] · mb-4
     title    = text-4xl sm:text-5xl · font-bold · tracking-tight · leading-tight
     subtitle = mt-3 · text-base sm:text-lg */
.home-hero { margin: 0; text-align: center; }
.home-eyebrow {
  margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--s-text-muted);
}
.home-title {
  margin: 0; font-size: 2.25rem; line-height: 1.25; font-weight: 700;
  letter-spacing: -0.025em; color: var(--s-text);
}
.home-sub {
  margin: 0.75rem 0 0; font-size: 1rem; line-height: 1.5rem; color: var(--s-text-secondary);
}
@media (min-width: 640px) {
  .home-eyebrow { font-size: 1rem; line-height: 1.5rem; }
  .home-title { font-size: 3rem; }
  .home-sub { font-size: 1.125rem; line-height: 1.75rem; }
}

.home-section { display: flex; flex-direction: column; gap: 16px; }
.home-section-head { display: flex; flex-direction: column; }
.home-section-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; color: var(--s-text); }
.home-section-sub { margin: 4px 0 0; font-size: 14px; color: var(--s-text-muted); }

/* card grid — reuses .ms-card, matching analytics' fit-to-screen recipe:
   2 cols → 3 (≥768px) → 4 (≥1280px), gap 16px, so the three template cards
   fill the width. */
.home-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .home-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .home-grid { grid-template-columns: repeat(4, 1fr); } }

.home-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.home-card-blurb {
  margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--s-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s ease;
}
.ms-card:hover .home-card-blurb { color: var(--s-text-secondary); }

/* The sign-in modal chrome (.auth-modal-overlay / .auth-modal / .auth-*) is now
   the vendored @kaleidr/auth-core stylesheet (vendor/auth.css, linked in
   home.html); its --auth-* tokens resolve from the host-token overrides at the
   top of this file. home.js builds the markup with those real .auth-* classes. */