/* FounderGrowthOS demo workspace: theme tokens, demo-only parts and phone-width rules.
 * The design's hard-coded colours were rewritten to var(--c-<hex>) at build time; the light
 * values below are the design's own, the dark values are the demo's dark palette.
 * Generated into site/ by build_demo_site.py; edit demo_src/demo.css, not site/.
 */
:root {
  --c-f3f4f0: #f3f4f0;
  --c-fff: #fff;
  --c-f8f9f5: #f8f9f5;
  --c-f0f1ec: #f0f1ec;
  --c-eef0e9: #eef0e9;
  --c-e6e8e0: #e6e8e0;
  --c-e3e5dd: #e3e5dd;
  --c-e0e2da: #e0e2da;
  --c-dcdfd6: #dcdfd6;
  --c-d7dad0: #d7dad0;
  --c-cfd2c8: #cfd2c8;
  --c-c4c8bc: #c4c8bc;
  --c-adb1a6: #adb1a6;
  --c-9b9f95: #9b9f95;
  --c-6f736a: #6f736a;
  --c-4c5048: #4c5048;
  --c-35382f: #35382f;
  --c-171815: #171815;
  --c-edf100: #edf100;
  --c-2f7a55: #2f7a55;
  --c-8c5700: #8c5700;
  --c-b5422b: #b5422b;
  --c-glass: rgba(255,255,255,.7);
  --c-scrim: rgba(23,24,21,.28);
  --c-scrim-soft: rgba(23,24,21,.14);
  --c-shadow: rgba(23,24,21,.07);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --c-f3f4f0: #121311;
  --c-fff: #1b1c19;
  --c-f8f9f5: #232420;
  --c-f0f1ec: #2a2b27;
  --c-eef0e9: #2c2d29;
  --c-e6e8e0: #30322d;
  --c-e3e5dd: #33352f;
  --c-e0e2da: #363832;
  --c-dcdfd6: #3b3d37;
  --c-d7dad0: #40423b;
  --c-cfd2c8: #5a5d55;
  --c-c4c8bc: #666960;
  --c-adb1a6: #8d9187;
  --c-9b9f95: #91958b;
  --c-6f736a: #aeb2a8;
  --c-4c5048: #cacdc3;
  --c-35382f: #d6d9cf;
  --c-171815: #ecede6;
  --c-edf100: #edf100;
  --c-2f7a55: #63c793;
  --c-8c5700: #e5ab4e;
  --c-b5422b: #f28f75;
  --c-glass: rgba(27,28,25,.82);
  --c-scrim: rgba(0,0,0,.55);
  --c-scrim-soft: rgba(0,0,0,.42);
  --c-shadow: rgba(0,0,0,.4);
  color-scheme: dark;
}


html { background: var(--c-f3f4f0); }
body { background: var(--c-f3f4f0); color: var(--c-171815); }

/* In dark mode an ink-filled element turns light, so whatever sits on it reads as it did on ink. */
:root[data-theme="dark"] [style*="--inv"] {
  --c-9b9f95: #62665d; --c-adb1a6: #585c53; --c-35382f: #c9ccc2; --c-f3f4f0: #1b1c19;
  --c-6f736a: #52564d; --c-4c5048: #3b3e37; --c-e3e5dd: #c9ccc2; --c-cfd2c8: #9a9e93;
}
/* Text on the yellow mark stays ink in both themes. */
:root[data-theme="dark"] [style*="--acc"] { --c-171815: #171815; --c-fff: #fff; color: #171815; }

/* Toast */
#dm-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 2147483000;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(460px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: 12px;
  background: var(--c-171815); color: var(--c-fff);
  font: 500 13px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(23, 24, 21, .16);
  transition: opacity .18s ease, transform .18s ease;
}
#dm-toast.dm-show { opacity: 1; transform: translate(-50%, 0); }
#dm-toast .dm-toast-tag {
  flex: 0 0 auto; height: 20px; display: inline-flex; align-items: center; padding: 0 8px;
  border-radius: 999px; background: #edf100; color: #171815; font-size: 11.5px; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { #dm-toast { transition: none; } }

/* Things the fallback handler answers for */
[data-dm-act] { cursor: pointer; }
[data-dm-act]:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--c-171815); outline-offset: 2px; border-radius: 6px;
}

/* Demo-only form fields, drawn in the design's own terms */
.dm-textarea {
  width: 100%; min-height: 120px; resize: vertical; box-sizing: border-box;
  padding: 12px 14px; border: 1px solid var(--c-cfd2c8); border-radius: 12px;
  background: var(--c-fff); color: var(--c-171815);
  font: 14px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dm-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--c-171815);
  font: inherit; padding: 0;
}
.dm-input::placeholder { color: var(--c-9b9f95); }

/* Sidebar: a menu button that only exists at phone width */
.dm-nav-body { display: contents; }
.dm-menu-btn { display: none; }

@media (max-width: 860px) {
  .dm-shell { display: block !important; }
  .dm-nav {
    position: sticky !important; top: 0; z-index: 4; height: auto !important; max-height: 100vh;
    overflow: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--c-e3e5dd);
    padding: 10px 16px !important; gap: 14px !important;
  }
  .dm-nav .dm-chev { display: none; }
  .dm-nav-body { display: none; }
  .dm-nav.dm-open .dm-nav-body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
  .dm-menu-btn {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 34px; padding: 0 13px;
    border: 1px solid var(--c-e3e5dd); border-radius: 12px; background: var(--c-fff); color: var(--c-171815);
    font: 600 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer;
  }
  .dm-head {
    position: relative !important; height: auto !important; min-height: 48px;
    padding: 10px 16px !important; flex-wrap: wrap; row-gap: 6px !important;
  }
  .dm-head > span:last-child { gap: 12px !important; }
  .dm-page {
    padding: 22px 16px 36px !important; grid-template-columns: minmax(0, 1fr) !important;
  }
  .dm-page h1 { font-size: 26px !important; line-height: 1.2; }
  .dm-hide-narrow { display: none !important; }
}

/* Phone-width fitting pass (demo.js marks rows that would overflow or squeeze) */
.dm-narrow .dm-stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.dm-narrow .dm-stats4 > * { border-right: 0 !important; border-bottom: 1px solid var(--c-e3e5dd); }
.dm-narrow [data-dm-fit="one"] { grid-template-columns: minmax(0, 1fr) !important; }
.dm-narrow [data-dm-fit="tabs"] { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
.dm-narrow [data-dm-fit="tabs"] > * { flex: 0 0 auto !important; }
.dm-narrow [data-dm-fit="wrap"] { flex-wrap: wrap !important; row-gap: 8px !important; }
.dm-narrow [data-dm-fit="stack"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px !important; }
.dm-narrow [data-dm-fit="stack"] > * { text-align: left !important; justify-self: start !important; max-width: 100%; }
.dm-narrow [data-dm-fit="stack"] > span:only-child, .dm-narrow [data-dm-fit="stack"] > div { justify-self: stretch !important; }
.dm-narrow [data-dm-fit="icon"] { grid-template-columns: var(--dm-first) minmax(0, 1fr) !important; row-gap: 6px !important; }
.dm-narrow [data-dm-fit="icon"] > :nth-child(n+3) { grid-column: 2 !important; justify-self: start !important; text-align: left !important; }
.dm-narrow [data-dm-fit="icon"] > :nth-child(n+3), .dm-narrow [data-dm-fit="stack"] > * { justify-content: flex-start !important; }
.dm-narrow [data-dm-fit="icon"] > :nth-child(n+3) *, .dm-narrow [data-dm-fit="stack"] > * * { text-align: left !important; }
.dm-narrow [data-dm-fit="hide"] { display: none !important; }
.dm-narrow [data-dm-fit] > [data-dm-chev] { display: none !important; }
.dm-narrow [data-dm-fit="wide"] { min-width: 620px; }
.dm-narrow [data-dm-scroll] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  html, body { overflow-x: clip; }
}