/* Direction: Braeuer GrowthOS — deep charcoal, streaming purple, restrained electric blue */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0f0f14;
  --surface: #17171f;
  --surface-2: #20202b;
  --border: #2e2e3b;
  --border-strong: #57575b;
  --ink: #f5f5f8;
  --muted: #a3a3b5;
  --accent: #7c3aed;
  --accent-hover: #9058f0;
  --accent-ink: #ffffff;
  --accent-text: #b9a1ff;
  --accent-strong: #a171f1;
  --accent-soft: #271844;
  --accent-border: #402276;
  --success: #34d399;
  --success-ink: #ffffff;
  --success-soft: #173a31;
  --success-strong: #34d399;
  --warning: #fbbf24;
  --warning-ink: #ffffff;
  --warning-soft: #433618;
  --warning-strong: #fbbf24;
  --danger: #f87171;
  --danger-ink: #ffffff;
  --danger-soft: #422528;
  --danger-strong: #f87171;
  --chart-1: #7c3aed;
  --chart-2: #ee2096;
  --chart-3: #c36209;
  --chart-4: #858b1d;
  --chart-5: #18938e;
  --chart-6: #0e89ec;

  --x-blue: #4da3ff;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: -0.02em;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --card-pad: 1.1rem;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dedce0;
  --border-strong: #b8b5bc;
  --ink: #0f0f14;
  --muted: #6f6f72;
  --accent: #7c3aed;
  --accent-hover: #6931c9;
  --accent-ink: #ffffff;
  --accent-text: #7c3aed;
  --accent-strong: #7c3aed;
  --accent-soft: #ede3fc;
  --accent-border: #c4a6f7;
  --success: #34d399;
  --success-ink: #0f0f14;
  --success-soft: #e7faf3;
  --success-strong: #1d7656;
  --warning: #fbbf24;
  --warning-ink: #0f0f14;
  --warning-soft: #fff7e5;
  --warning-strong: #8d6b14;
  --danger: #f87171;
  --danger-ink: #0f0f14;
  --danger-soft: #feeeee;
  --danger-strong: #a44b4b;
  --chart-1: #7c3aed;
  --chart-2: #ee2096;
  --chart-3: #894201;
  --chart-4: #858b1d;
  --chart-5: #0b6451;
  --chart-6: #0a92c6;
}

.app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.sb { @apply bg-surface border-r border-border; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30; }
.sb a.nav { @apply text-muted; display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 8px; font-size: .9rem; }
.sb a.nav:hover { @apply bg-surface-2 text-ink; }
.sb a.nav[aria-current="page"] { @apply bg-accent-soft text-accent-strong; font-weight: 600; }
body.sb-collapsed .app { grid-template-columns: 4.4rem minmax(0, 1fr); }
body.sb-collapsed .sb .nl { display: none; }
body.sb-collapsed .sb a.nav { justify-content: center; }
.scrim { display: none; }
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sb { position: fixed; inset: 0 auto 0 0; width: 15rem; transform: translateX(-102%); transition: transform .2s ease; }
  body.sb-open .sb { transform: none; }
  body.sb-open .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55); }
  body.sb-collapsed .sb .nl { display: inline; }
  body.sb-collapsed .sb a.nav { justify-content: flex-start; }
}
.kcol { min-width: 17rem; width: 17rem; }
.kcard { cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcol.drop-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.cal-cell.drop-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.chip-post { cursor: grab; }
.bar-fill { transition: width .4s ease; }
html.reduced-motion .bar-fill, html.reduced-motion .sb { transition: none; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
.rest-visible { animation: rise .35s ease both; }
@keyframes rise { from { transform: translateY(6px); } to { transform: none; } }
html.reduced-motion .rest-visible { animation: none; }