/* =========================================================
   Prismfield Studio — Design System
   Editorial-white dashboard wrapped in a chromatic halo,
   with pixel-glitch accents and a lime action pulse.
   =========================================================

   Vendored into Livelatch Creator Studio from the Prismfield Studio pack
   (Uiverse Design, design.uiverse.io) — © 2026 Uiverse, used under the Uiverse
   Design System License v1, which requires this attribution be kept intact.
   The pack's own docs and credits live in /prismfield-studio (DESIGN.md,
   LICENSE.md) and are not shipped in the packaged app.

   LOCAL CHANGES — everything above the "Livelatch additions" banner at the foot
   of this file is the pack verbatim. Our changes are appended there, and are
   token overrides only, so the pack stays diffable against a future update.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=VT323&display=swap");

/* ---------- Tokens ---------------------------------------- */
:root {
  /* Color — surfaces & ink */
  --color-paper: #f2efe8;
  --color-canvas: #ffffff;
  --color-canvas-soft: #faf9f6;
  --color-ink: #0b0b0f;
  --color-graphite: #5a5a66;
  --color-mute: #8b8b95;
  --color-hairline: #e4e2dd;
  --color-hairline-strong: #d4d2cc;

  /* Color — action */
  --color-lime: #7ce25b;
  --color-lime-ink: #0b1a05;
  --color-lime-soft: #e6f8df;

  /* Color — prism (chromatic accents) */
  --color-prism-magenta: #e8429b;
  --color-prism-cyan: #3fc7e8;
  --color-prism-amber: #f5b946;
  --color-prism-violet: #9b5be8;
  --color-prism-lime: #b8f25f;

  /* Color — semantic */
  --color-focus: var(--color-prism-cyan);
  --color-danger: #e44b4b;

  /* Gradients */
  --gradient-prism: conic-gradient(
    from 200deg at 50% 50%,
    var(--color-prism-magenta) 0deg,
    var(--color-prism-amber) 70deg,
    var(--color-prism-lime) 140deg,
    var(--color-prism-cyan) 210deg,
    var(--color-prism-violet) 280deg,
    var(--color-prism-magenta) 360deg
  );
  --gradient-prism-ribbon: linear-gradient(
    90deg,
    var(--color-prism-magenta) 0%,
    var(--color-prism-violet) 22%,
    var(--color-prism-cyan) 48%,
    var(--color-prism-lime) 72%,
    var(--color-prism-amber) 100%
  );

  /* Typography */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-pixel: "VT323", "Courier New", monospace;

  --text-display-xl: clamp(40px, 6vw, 72px);
  --text-display-lg: clamp(32px, 4.4vw, 52px);
  --text-display-md: 28px;
  --text-headline-lg: 22px;
  --text-headline-md: 18px;
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 13px;
  --text-label-sm: 11px;
  --text-pixel: 18px;

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;
  --tracking-chip: 0.14em;

  /* Spacing scale */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Radius */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--color-hairline);
  --border-strong: 1px solid var(--color-hairline-strong);
  --border-ink: 1px solid var(--color-ink);

  /* Shadows / elevation */
  --shadow-card: 0 1px 0 rgba(11, 11, 15, 0.02), 0 8px 24px -16px rgba(11, 11, 15, 0.18);
  --shadow-pop: 0 12px 32px -16px rgba(11, 11, 15, 0.28);
  --shadow-fab: 0 8px 18px -8px rgba(124, 226, 91, 0.55), 0 2px 4px rgba(11, 11, 15, 0.12);
  --shadow-focus: 0 0 0 3px rgba(63, 199, 232, 0.32);

  /* Pixel grid */
  --pixel-cell: 14px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ---------- Base ----------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-prism-cyan);
  color: var(--color-ink);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Typography utilities -------------------------- */
.display-xl,
.display-lg,
.display-md,
.headline-lg,
.headline-md {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.display-xl {
  font-size: var(--text-display-xl);
  font-weight: 700;
}

.display-lg {
  font-size: var(--text-display-lg);
  font-weight: 700;
}

.display-md {
  font-size: var(--text-display-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.headline-lg {
  font-size: var(--text-headline-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.headline-md {
  font-size: var(--text-headline-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

.body-md {
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-ink);
}

.body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-graphite);
}

.label-sm {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-graphite);
}

.pixel {
  font-family: var(--font-pixel);
  font-size: var(--text-pixel);
  letter-spacing: 0.02em;
  line-height: 1;
}

.text-mute {
  color: var(--color-mute);
}

.text-prism {
  background: var(--gradient-prism-ribbon);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ---------- Scrollbars ------------------------------------ */

/* The OS scrollbar is the one piece of chrome the kit can't restyle into the
   system, so it gets replaced outright: no track, no arrows, just a thumb in
   the hairline colour. Built from tokens, so light/dark follows the theme with
   no extra rules. Styling ::-webkit-scrollbar at all opts the whole document
   out of the native rendering — that is the point of the empty track. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  /* The transparent border + padding-box clip is what insets the thumb, so it
     reads as a floating pill rather than a bar wedged against the content. */
  background: var(--color-hairline-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-mute); background-clip: padding-box; }

/* ---------- Layout primitives ----------------------------- */
.frame {
  position: relative;
  min-height: 100vh;
  padding: 22px;
  background: var(--color-paper);
}

.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-prism);
  filter: saturate(1.05);
  z-index: 0;
}

.frame::after {
  content: "";
  position: absolute;
  inset: 22px;
  background-image:
    radial-gradient(rgba(11, 11, 15, 0.08) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 1px);
  background-size: 4px 4px, 4px 4px;
  background-position: 0 0, 2px 2px;
  opacity: 0.5;
  mix-blend-mode: overlay;
  z-index: 0;
  pointer-events: none;
}

.canvas {
  position: relative;
  z-index: 1;
  background: var(--color-canvas);
  border-radius: var(--radius-lg);
  border: var(--border-hairline);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.divider {
  border: 0;
  border-top: var(--border-hairline);
  margin: 0;
}

.ribbon {
  height: 4px;
  width: 100%;
  background: var(--gradient-prism-ribbon);
  border-radius: var(--radius-full);
}

/* ---------- Sidebar -------------------------------------- */
.sidebar {
  width: 220px;
  padding: var(--space-lg);
  border-right: var(--border-hairline);
  background: var(--color-canvas);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md) var(--space-xl);
}

.sidebar__wordmark {
  font-family: var(--font-pixel);
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--color-ink);
}

.sidebar__group {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-mute);
  padding: var(--space-md) var(--space-md) var(--space-sm);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 10px var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--color-graphite);
  font-size: var(--text-body-md);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
  border: 1px solid transparent;
}

.nav-item:hover {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
}

.nav-item--active {
  background: var(--color-canvas-soft);
  color: var(--color-ink);
  border-color: var(--color-hairline);
  position: relative;
}

.nav-item--active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--gradient-prism-ribbon);
  border-radius: var(--radius-full);
}

.nav-item__icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: currentColor;
}

/* ---------- Buttons -------------------------------------- */
.btn {
  --btn-bg: var(--color-canvas);
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-hairline-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 38px;
  padding: 0 var(--space-lg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  --btn-bg: var(--color-lime);
  --btn-fg: var(--color-lime-ink);
  --btn-border: #5fc73f;
  box-shadow: 0 1px 0 #5fc73f inset, 0 6px 16px -10px rgba(124, 226, 91, 0.6);
}

.btn--primary:hover {
  --btn-bg: #92ea73;
}

.btn--secondary {
  --btn-bg: var(--color-canvas);
  --btn-fg: var(--color-ink);
  --btn-border: var(--color-hairline-strong);
}

.btn--secondary:hover {
  --btn-bg: var(--color-canvas-soft);
  --btn-border: var(--color-ink);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--color-graphite);
}

.btn--ghost:hover {
  --btn-bg: var(--color-canvas-soft);
  --btn-fg: var(--color-ink);
}

.btn--prism {
  --btn-bg: var(--color-canvas);
  --btn-fg: var(--color-ink);
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--color-canvas), var(--color-canvas)) padding-box,
    var(--gradient-prism-ribbon) border-box;
}

.btn--prism:hover {
  background:
    linear-gradient(var(--color-canvas-soft), var(--color-canvas-soft)) padding-box,
    var(--gradient-prism-ribbon) border-box;
}

.btn--sm {
  height: 30px;
  padding: 0 var(--space-md);
  font-size: var(--text-body-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  height: 48px;
  padding: 0 var(--space-xl);
  font-size: var(--text-body-lg);
  border-radius: var(--radius-md);
}

.btn--icon {
  width: 38px;
  padding: 0;
}

.fab {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-lime);
  color: var(--color-lime-ink);
  border: 1px solid #5fc73f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-fab);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.fab:hover {
  transform: translateY(-1px);
}

.fab__icon {
  width: 18px;
  height: 18px;
}

/* ---------- Inputs --------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
}

.field__label {
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-graphite);
}

.input,
.textarea,
.select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-md);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.textarea {
  height: auto;
  min-height: 96px;
  padding: var(--space-md);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-mute);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-ink);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: transparent;
  background:
    linear-gradient(var(--color-canvas), var(--color-canvas)) padding-box,
    var(--gradient-prism-ribbon) border-box;
  box-shadow: var(--shadow-focus);
}

.input--search {
  padding-left: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 16px;
}

/* ---------- Chip / Badge --------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--space-sm);
  background: var(--color-canvas-soft);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-chip);
  text-transform: uppercase;
  color: var(--color-graphite);
  white-space: nowrap;
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-lime);
}

.chip--prism {
  border-color: transparent;
  color: var(--color-ink);
  background:
    linear-gradient(var(--color-canvas), var(--color-canvas)) padding-box,
    var(--gradient-prism-ribbon) border-box;
}

.chip--pixel {
  font-family: var(--font-pixel);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--color-ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--space-md);
  background: var(--color-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-full);
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
}

/* ---------- Card ----------------------------------------- */
.card {
  position: relative;
  background: var(--color-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.card:hover {
  border-color: var(--color-hairline-strong);
  box-shadow: var(--shadow-pop);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: 600;
  color: var(--color-ink);
  line-height: var(--leading-snug);
  margin: 0;
}

.card__meta {
  font-size: var(--text-body-sm);
  color: var(--color-graphite);
}

.card__body {
  color: var(--color-ink);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
}

.card__media {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--border-hairline);
  aspect-ratio: 4 / 3;
}

.card--hero {
  background: var(--color-ink);
  color: var(--color-canvas);
  border-color: var(--color-ink);
  padding: var(--space-xl);
  gap: var(--space-lg);
}

.card--hero .card__title,
.card--hero .card__body {
  color: var(--color-canvas);
}

.card--prism {
  border-color: transparent;
  background:
    linear-gradient(var(--color-canvas), var(--color-canvas)) padding-box,
    var(--gradient-prism-ribbon) border-box;
}

/* ---------- Checkbox ------------------------------------- */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--text-body-md);
  color: var(--color-ink);
  user-select: none;
}

.check__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check__box {
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-xs);
  display: inline-grid;
  place-items: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.check:hover .check__box {
  border-color: var(--color-ink);
}

.check__input:focus-visible + .check__box {
  box-shadow: var(--shadow-focus);
}

.check__input:checked + .check__box {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

/* Pixel-mosaic check mark */
.check__box::before,
.check__box::after {
  content: "";
  position: absolute;
  background: var(--color-prism-lime);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.check__box::before {
  width: 3px;
  height: 3px;
  left: 4px;
  top: 10px;
  box-shadow:
    3px 3px 0 0 var(--color-prism-cyan),
    6px 0 0 0 var(--color-prism-lime);
}

.check__box::after {
  width: 3px;
  height: 3px;
  left: 13px;
  top: 4px;
  box-shadow:
    -3px 3px 0 0 var(--color-prism-magenta),
    -3px -3px 0 0 var(--color-prism-amber);
}

.check__input:checked + .check__box::before,
.check__input:checked + .check__box::after {
  opacity: 1;
}

/* ---------- Tabs ----------------------------------------- */
.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-xl);
  border-bottom: var(--border-hairline);
  padding: 0 var(--space-xs);
}

.tab {
  position: relative;
  padding: var(--space-md) 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: 500;
  color: var(--color-graphite);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}

.tab:hover {
  color: var(--color-ink);
}

.tab--active {
  color: var(--color-ink);
  font-weight: 600;
}

.tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gradient-prism-ribbon);
  border-radius: var(--radius-full);
}

.tab__count {
  margin-left: 6px;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--color-mute);
}

/* ---------- Prism Tile (signature) ----------------------- */
.prism-tile {
  --cell: var(--pixel-cell);
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows: repeat(8, var(--cell));
  width: calc(var(--cell) * 10);
  height: calc(var(--cell) * 8);
  background: var(--color-ink);
  border-radius: var(--radius-xs);
  overflow: hidden;
  position: relative;
}

.prism-tile__cell {
  background: var(--color-prism-cyan);
}

.prism-tile--cover {
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

.prism-tile__cell--m { background: var(--color-prism-magenta); }
.prism-tile__cell--c { background: var(--color-prism-cyan); }
.prism-tile__cell--a { background: var(--color-prism-amber); }
.prism-tile__cell--v { background: var(--color-prism-violet); }
.prism-tile__cell--l { background: var(--color-prism-lime); }
.prism-tile__cell--k { background: var(--color-ink); }
.prism-tile__cell--w { background: var(--color-canvas); }

/* ---------- Topbar --------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  border-bottom: var(--border-hairline);
  background: var(--color-canvas);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.topbar__wordmark {
  font-family: var(--font-pixel);
  font-size: 26px;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: var(--border-hairline);
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: var(--color-canvas-soft);
  font-weight: 600;
  font-size: var(--text-body-sm);
  color: var(--color-ink);
}

/* ---------- Dashboard grid -------------------------------- */
.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 600px;
}

.dashboard__main {
  display: flex;
  flex-direction: column;
}

.dashboard__content {
  padding: var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-lg);
}

.feature-grid > .col-4 { grid-column: span 4; }
.feature-grid > .col-6 { grid-column: span 6; }
.feature-grid > .col-8 { grid-column: span 8; }
.feature-grid > .col-12 { grid-column: span 12; }

/* ---------- Utility -------------------------------------- */
.mono { font-family: var(--font-pixel); }
.center { display: grid; place-items: center; }
.spacer { flex: 1; }
.shadow-card { box-shadow: var(--shadow-card); }

.swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: var(--border-hairline);
}

.swatch--prism {
  background: var(--gradient-prism-ribbon);
  border-color: transparent;
}

@media (max-width: 860px) {
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { width: 100%; border-right: 0; border-bottom: var(--border-hairline); }
  .feature-grid > .col-4,
  .feature-grid > .col-6,
  .feature-grid > .col-8 { grid-column: span 12; }
}

/* =========================================================
   Livelatch additions
   ---------------------------------------------------------
   Everything above this banner is the Prismfield pack verbatim. Below are the
   only local changes, kept to token overrides + two rules so the pack stays
   diffable against a future update.
   ========================================================= */

/* ---------- 1. Contrast corrections (light) ---------------
   DESIGN.md promises graphite >= 7.4:1 and mute >= 4.6:1 on canvas, but the
   shipped values measure 6.80:1 and 3.37:1 — mute fails WCAG AA outright, and
   it's spec'd for text down to 13px. These nudge both to the ratios the pack's
   own docs claim, on BOTH canvas and canvas-soft. Revert to #5A5A66 / #8B8B95
   for the pack's exact greys.                                                */
:root {
  --color-graphite: #4f4f59; /* 8.09:1 on canvas, 7.69:1 on canvas-soft */
  --color-mute: #6e6e77;     /* 5.05:1 on canvas, 4.79:1 on canvas-soft */
}

/* ---------- 2. Dark layer ---------------------------------
   The pack ships light-only ("theme": "light"; DESIGN.md: "the interior stays
   white"). This is a deliberate documented deviation: Creator Studio follows
   the OS theme.

   Only the stage + ink layers move. The prism gradients and the lime pulse are
   byte-identical in both modes — they are the system's identity, they already
   read on dark, and DESIGN.md's "one saturated accent" rule has to survive the
   flip. Border tokens (--border-hairline etc.) resolve var() lazily, so they
   re-point at the dark hairline automatically and need no override.

   Two selectors, same values:
     - the media query is what nativeTheme.themeSource drives in the app;
     - [data-theme] lets the pages be forced open in a plain browser for review.
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #101014;
    --color-canvas: #17171c;
    --color-canvas-soft: #1d1d23;
    --color-ink: #f8f7f3;      /* 16.66:1 on canvas */
    --color-graphite: #b4b4be; /* 8.69:1 */
    --color-mute: #8b8b95;     /* 5.29:1 */
    --color-hairline: #2a2a32;
    --color-hairline-strong: #3a3a44;
    --color-lime-soft: #1c2a16;

    /* The pack's shadows are rgba(11,11,15,…) — invisible on a dark stage. */
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.24), 0 8px 24px -16px rgba(0, 0, 0, 0.72);
    --shadow-pop: 0 12px 32px -16px rgba(0, 0, 0, 0.85);
  }
}

:root[data-theme="dark"] {
  --color-paper: #101014;
  --color-canvas: #17171c;
  --color-canvas-soft: #1d1d23;
  --color-ink: #f8f7f3;
  --color-graphite: #b4b4be;
  --color-mute: #8b8b95;
  --color-hairline: #2a2a32;
  --color-hairline-strong: #3a3a44;
  --color-lime-soft: #1c2a16;
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.24), 0 8px 24px -16px rgba(0, 0, 0, 0.72);
  --shadow-pop: 0 12px 32px -16px rgba(0, 0, 0, 0.85);
}

/* ---------- 3. Dark fixes the tokens can't reach ----------
   .input--search inlines its glyph as a data URI with stroke='%235A5A66'
   hardcoded, so it stays graphite-on-dark and disappears. Same SVG, light
   stroke. (.card--hero needs nothing: it's ink-on-canvas via var(), so it
   self-inverts to a light card on the dark canvas — still the loudest card.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .input--search {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B4BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  }
}
:root[data-theme="dark"] .input--search {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B4BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
}

/* The frame's dot overlay is tuned for a light stage; soften it on dark so the
   halo keeps its grain without turning milky. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .frame::after { opacity: 0.28; }
}
:root[data-theme="dark"] .frame::after { opacity: 0.28; }