/* Founder OS (PRAXERI-FOUNDER-OS-INTEGRATION-1). The visual and interaction authority is the approved Lovable Founder OS
   prototype: these tokens, type and spacing are taken from it. Fonts are self-hosted (fonts/LICENSE.txt) so the page's
   CSP stays 'self'-only. No inline styles anywhere: every visual state is a class. */

@font-face { font-family: "Geist"; src: url("/fonts/Geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --background: oklch(98.5% 0.004 85);
  --foreground: oklch(21% 0.012 255);
  --popover: oklch(100% 0 0);
  --primary: oklch(21% 0.012 255);
  --primary-foreground: oklch(98.5% 0.004 85);
  --muted-foreground: oklch(50% 0.012 255);
  --faint: oklch(68% 0.01 255);
  --border: oklch(90% 0.006 85);
  --hairline: oklch(93% 0.005 85);
  --ring: oklch(21% 0.012 255 / 0.3);
  --surface: oklch(100% 0 0);
  --sunken: oklch(96.5% 0.005 85);
  --signal: oklch(50% 0.1 160);
  --signal-soft: oklch(95% 0.03 160);
  --attention: oklch(60% 0.14 65);
  --attention-ink: oklch(45% 0.12 65);
  --label: oklch(42% 0.012 255);
  --drawer-shade: oklch(21% 0.012 255 / 0.48);
  --attention-soft: oklch(96% 0.04 80);
  --risk: oklch(55% 0.16 30);
  --risk-soft: oklch(96% 0.025 30);
  --destructive-foreground: oklch(98.5% 0.004 85);
  --shadow-float: 0 1px 2px oklch(20% 0.01 255 / 0.06), 0 12px 32px -12px oklch(20% 0.01 255 / 0.18);
  --shadow-soft: 0 1px 2px oklch(20% 0.01 255 / 0.05);
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--sans); font-size: 16px;
  line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; cursor: pointer; padding: 0; text-align: inherit; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.block { display: block; } .p3 { padding: 12px; } .py5 { padding-top: 20px; padding-bottom: 20px; }
.grid-center { display: inline-grid; place-items: center; width: 14px; flex-shrink: 0; }
.sysblock:first-child { border-top: 0; }
.card > [data-a="adapt-dismiss"] { position: absolute; right: 12px; top: 12px; }
details summary { cursor: pointer; }

/* ---------------------------------------------------------------- type & color */
.fd { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.mono { font-family: var(--mono); }
.t10 { font-size: 10px; line-height: 14px; } .t11 { font-size: 11px; line-height: 16px; }
.txs { font-size: 12px; line-height: 16px; } .tsm { font-size: 14px; line-height: 20px; }
.t15 { font-size: 15px; line-height: 1.375; } .tbase { font-size: 16px; line-height: 24px; }
.t2xl { font-size: 24px; line-height: 1.25; } .t26 { font-size: 26px; line-height: 1.15; }
.t28 { font-size: 28px; line-height: 1.25; } .t3xl { font-size: 30px; line-height: 1.25; }
.t4xl { font-size: 36px; line-height: 1.15; } .t5xl { font-size: 48px; line-height: 1.05; }
.fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw4 { font-weight: 400; }
.muted { color: var(--muted-foreground); } .faint { color: var(--faint); } .fg { color: var(--foreground); }
.signal { color: var(--signal); } .attention { color: var(--attention-ink); } .risk { color: var(--risk); }
.relaxed { line-height: 1.625; } .snug { line-height: 1.375; } .tight-lead { line-height: 1.15; }
.italic { font-style: italic; } .tnum { font-variant-numeric: tabular-nums; } .center { text-align: center; }
.strike { text-decoration: line-through; text-decoration-color: var(--faint); }
.upper { text-transform: uppercase; letter-spacing: .08em; }
.eyebrow { font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hover-fg:hover { color: var(--foreground); }

/* ---------------------------------------------------------------- layout utilities */
.row { display: flex; align-items: center; } .row.start { align-items: flex-start; } .row.base { align-items: baseline; }
.row.end { align-items: flex-end; } .col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; } .grow { flex: 1 1 0%; min-width: 0; } .shrink0 { flex-shrink: 0; } .ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap1 { gap: 4px; } .gap15 { gap: 6px; } .gap2 { gap: 8px; } .gap25 { gap: 10px; } .gap3 { gap: 12px; } .gap4 { gap: 16px; } .gap8 { gap: 32px; }
.mt05 { margin-top: 2px; } .mt1 { margin-top: 4px; } .mt15 { margin-top: 6px; } .mt2 { margin-top: 8px; } .mt25 { margin-top: 10px; }
.mt3 { margin-top: 12px; } .mt4 { margin-top: 16px; } .mt5 { margin-top: 20px; } .mt6 { margin-top: 24px; } .mt7 { margin-top: 28px; }
.mt8 { margin-top: 32px; } .mt9 { margin-top: 36px; } .mb2 { margin-bottom: 8px; } .mb4 { margin-bottom: 16px; } .mb6 { margin-bottom: 24px; } .mb8 { margin-bottom: 32px; }
.sy1 > * + * { margin-top: 4px; } .sy15 > * + * { margin-top: 6px; } .sy2 > * + * { margin-top: 8px; } .sy3 > * + * { margin-top: 12px; }
.sy4 > * + * { margin-top: 16px; } .sy5 > * + * { margin-top: 20px; } .sy6 > * + * { margin-top: 24px; } .sy7 > * + * { margin-top: 28px; }
.sy8 > * + * { margin-top: 32px; }
.divide > * + * { border-top: 1px solid var(--hairline); } .border-y { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.bt { border-top: 1px solid var(--hairline); } .pt6 { padding-top: 24px; } .pt4 { padding-top: 16px; } .pt1 { padding-top: 4px; }
.py3 { padding-top: 12px; padding-bottom: 12px; } .py25 { padding-top: 10px; padding-bottom: 10px; } .pb3 { padding-bottom: 12px; }
.w-full { width: 100%; } .size35 { width: 14px; height: 14px; flex-shrink: 0; } .size3 { width: 12px; height: 12px; flex-shrink: 0; } .size4 { width: 16px; height: 16px; flex-shrink: 0; }
.kv { display: grid; grid-template-columns: 110px 1fr; row-gap: 6px; column-gap: 8px; font-size: 12px; line-height: 16px; }
.kv.wide { grid-template-columns: 130px 1fr; row-gap: 4px; } .kv.auto { grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 4px; }
.kv dt { color: var(--label); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------------------------------------------------------------- primitives */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--faint); }
.dot.busy { background: var(--foreground); } .dot.attention { background: var(--attention); } .dot.good { background: var(--signal); }
.dot.risk { background: var(--risk); } .dot.pulse { animation: breathe 1.8s ease-in-out infinite; }
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--border); border-top-color: var(--foreground); animation: spin 1s linear infinite; flex-shrink: 0; }
.check { width: 14px; height: 14px; flex-shrink: 0; color: var(--signal); }
.icon { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.s4 { width: 16px; height: 16px; } .icon.s3 { width: 12px; height: 12px; } .icon.rot90 { transform: rotate(90deg); } .icon.rot180 { transform: rotate(180deg); }
.icon { transition: transform .15s; }
.logo { display: inline-grid; place-items: center; border-radius: 6px; background: var(--sunken); border: 1px solid var(--hairline); font-family: var(--mono); flex-shrink: 0; width: 32px; height: 32px; font-size: 12px; }
.logo.sm { width: 20px; height: 20px; font-size: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 0 14px; height: 36px;
  font-size: 14px; font-weight: 500; transition: all .15s; white-space: nowrap; }
.btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; }
.btn.primary { background: var(--primary); color: var(--primary-foreground); } .btn.primary:hover:not(:disabled) { opacity: .9; }
.btn.quiet { background: var(--surface); color: var(--foreground); border: 1px solid var(--border); } .btn.quiet:hover:not(:disabled) { background: var(--sunken); }
.btn.ghost { color: var(--muted-foreground); } .btn.ghost:hover:not(:disabled) { color: var(--foreground); background: var(--sunken); }
.btn.sm { height: 32px; } .btn.xs { height: 32px; font-size: 12px; padding: 0 10px; } .btn.fill { flex: 1 1 0%; }
.textbtn { font-size: 12px; line-height: 16px; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 4px; }
.textbtn:hover { color: var(--foreground); } .textbtn.strong { color: var(--foreground); font-weight: 500; }
.textbtn.strong:hover { text-decoration: underline; text-underline-offset: 4px; }
.chip { font-size: 11px; line-height: 16px; padding: 4px 8px; border-radius: 6px; background: var(--sunken); }
.chip:hover { background: var(--hairline); }

.card { border-radius: 12px; border: 1px solid var(--hairline); padding: 16px; }
.card.lead { border-color: oklch(21% 0.012 255 / 0.15); background: var(--surface); box-shadow: var(--shadow-soft); }
.card.dim { opacity: .7; }
.card.attn { border-color: oklch(60% 0.14 65 / 0.3); background: oklch(96% 0.04 80 / 0.5); }
.boxsunk { border-radius: 12px; background: var(--sunken); padding: 16px; } .boxsunk.soft { background: oklch(96.5% 0.005 85 / 0.7); }
.boxrisk { border-radius: 12px; background: var(--risk-soft); padding: 12px 16px; }
.panelbox { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); padding: 20px; }
.field { width: 100%; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 12px; font-size: 14px; outline: none; resize: none; }
.field.line { height: 44px; padding: 0 12px; }
.search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; }
.search.h9 { height: 36px; } .search input { flex: 1 1 0%; min-width: 0; background: transparent; border: 0; outline: none; }
.search input::placeholder, .field::placeholder, textarea::placeholder { color: var(--faint); }

.rise { animation: rise .32s ease-out both; }
@keyframes rise { 0% { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, to { opacity: .35; } 50% { opacity: 1; } }
@keyframes sweep { 0% { transform: translate(-100%); } to { transform: translate(300%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* an element already on screen before a re-render keeps still (founder.js render) */
.seen, .drawer .sheet.seen, .drawer .shade.seen { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .rise, .dot.pulse, .spin, .sweepbar > span { animation: none; } }

/* ---------------------------------------------------------------- entry (no project yet) */
.entry-top { height: 64px; border-bottom: 1px solid var(--hairline); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; }
.entry-top .brand { font-family: var(--serif); font-size: 24px; }
.entry { max-width: 512px; margin: 0 auto; padding: 64px 24px; }
.choice { width: 100%; text-align: left; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 14px 16px; transition: all .15s; display: block; }
.choice:hover:not(:disabled) { border-color: oklch(21% 0.012 255 / 0.3); box-shadow: var(--shadow-soft); }
.choice.on { border-color: var(--foreground); } .choice.off { opacity: .6; cursor: default; }
.choice-row { display: flex; align-items: center; gap: 12px; }
.connectcard { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); padding: 20px; }

/* ---------------------------------------------------------------- cockpit (desktop) */
.app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--background); }
.desk { display: none; }
.bar { min-height: 56px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; padding: 8px 20px; flex-shrink: 0; flex-wrap: wrap; }
.bar .brand { font-family: var(--serif); font-size: 26px; line-height: 1; }
.vsep { width: 1px; height: 20px; background: var(--hairline); }
.tools { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.lenspop .px { padding: 6px 12px; }
.cv-focus { padding: 28px 32px 0; }
details > summary { cursor: pointer; }
@media (max-width: 1180px) { .desk .tool .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .desk .tool { position: relative; } }
.tool { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; font-size: 12px; color: var(--muted-foreground); }
.tool:hover { color: var(--foreground); background: var(--sunken); }
.pathbar { height: 36px; padding: 0 20px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; gap: 12px; font-size: 12px; width: 100%; text-align: left; flex-shrink: 0; }
.pathbar:hover { background: oklch(96.5% 0.005 85 / 0.7); }
.pathbar .more { margin-left: auto; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.pathbar:hover .more { color: var(--foreground); }
.managed { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 4px 8px; text-align: left; }
.managed:hover { background: var(--sunken); }
.managed .icon { color: var(--signal); }
.grid3 { flex: 1 1 0%; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) 300px; }
.left { border-right: 1px solid var(--hairline); display: flex; flex-direction: column; min-height: 0; }
.left .scroll { flex: 1 1 0%; overflow-y: auto; padding: 24px 24px 56px; }
.composer-dock { padding: 16px; border-top: 1px solid var(--hairline); background: var(--background); }
.center { background: oklch(96.5% 0.005 85 / 0.5); min-width: 0; min-height: 0; overflow-y: auto; }   /* min-height: 0 lets a grid column scroll instead of growing the page */
.right { border-left: 1px solid var(--hairline); overflow-y: auto; padding: 24px; }
.foot { border-top: 1px solid var(--hairline); padding: 10px 20px; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--muted-foreground); flex-shrink: 0; }
.foot .mode { display: inline-flex; align-items: center; gap: 6px; }
.foot .mode.review { color: var(--attention-ink); font-weight: 500; }
.structure-rows { margin-top: 12px; border-left: 1px solid var(--hairline); padding-left: 12px; }
.structure-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; padding: 4px 0; font-size: 13px; line-height: 18px; width: 100%; text-align: left; }
.structure-row:hover .v { text-decoration: underline; text-underline-offset: 3px; }
.goalbtn { width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; }
.goalbtn:hover .icon { color: var(--foreground); }

.canvas { position: relative; height: 100%; min-height: 560px; display: flex; flex-direction: column; }
.canvas-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.canvas-body { flex: 1 1 0%; display: grid; place-items: center; padding: 32px 0; }
.canvas-note { margin: 16px 24px 0; }
.ba { display: flex; align-items: flex-end; gap: 32px; } .ba .before { opacity: .5; transform: scale(.88); transform-origin: bottom; display: none; }
.liveprod { width: min(520px, 90%); border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-float); padding: 24px; }

/* phone mock (Review Mode demo product) */
.phone { position: relative; width: 220px; flex-shrink: 0; border-radius: 28px; border: 1px solid var(--border); background: var(--surface); padding: 8px; box-shadow: var(--shadow-float); }
.phone.w250 { width: 250px; } .phone.ring { box-shadow: var(--shadow-float), 0 0 0 1px oklch(21% 0.012 255 / 0.1); } .phone.dim { opacity: .9; }
.phone .screen { border-radius: 22px; overflow: hidden; background: var(--background); height: 400px; display: flex; flex-direction: column; font-size: 10px; }
.phone .ph-top { padding: 12px 12px 8px; display: flex; align-items: center; justify-content: space-between; }
.phone .ph-title { font-weight: 600; font-size: 12px; }
.ph-filters { display: flex; gap: 4px; margin-bottom: 8px; overflow: hidden; padding: 0 8px; }
.ph-filter { padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); font-size: 8px; white-space: nowrap; }
.ph-table { width: 300px; font-size: 8px; padding: 0 8px; }
.ph-tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--hairline); }
.ph-tr.head { color: var(--muted-foreground); border-bottom-color: var(--border); padding: 0 0 4px; }
.ph-chips { display: flex; gap: 6px; margin-bottom: 12px; position: relative; flex-wrap: wrap; padding: 0 12px; }
.ph-chips.broken { flex-wrap: nowrap; width: 260px; }
.ph-chip { padding: 4px 8px; border-radius: 999px; font-size: 9px; white-space: nowrap; background: var(--sunken); }
.ph-chip.on { background: var(--primary); color: var(--primary-foreground); }
.ph-ring { position: absolute; inset: -4px; border-radius: 6px; box-shadow: 0 0 0 2px var(--risk); pointer-events: none; }
.ph-list { padding: 0 12px; } .ph-list > * + * { margin-top: 8px; }
.ph-item { display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); padding: 10px; }
.ph-rank { font-family: var(--serif); font-size: 18px; width: 16px; color: var(--muted-foreground); }
.ph-why { margin-top: auto; margin-bottom: 12px; text-align: center; font-size: 9px; color: var(--muted-foreground); }
.ph-flag { position: absolute; right: -12px; top: 64px; max-width: 150px; border-radius: 8px; background: var(--risk); color: var(--destructive-foreground); font-size: 10px; padding: 6px 8px; box-shadow: var(--shadow-float); }
.sweepbar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 999px; overflow: hidden; background: var(--sunken); }
.sweepbar > span { display: block; height: 100%; width: 33%; background: oklch(21% 0.012 255 / 0.6); animation: sweep 1.6s ease-in-out infinite; }

/* steps */
.steps > * + * { margin-top: 10px; }
.step { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; color: var(--label); }
.step.on { color: var(--foreground); }

/* composer */
.composer { border-radius: 16px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-soft); padding: 12px; transition: box-shadow .15s, border-color .15s; }
.composer:focus-within { box-shadow: var(--shadow-float); border-color: oklch(21% 0.012 255 / 0.2); }
.composer textarea { width: 100%; resize: none; background: transparent; border: 0; outline: none; font-size: 14px; line-height: 20px; }
.composer .crow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.threadpick { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); max-width: 100%; padding: 0 4px; }
.threadpick:hover { color: var(--foreground); }
.trybtn { display: block; text-align: left; font-size: 11px; line-height: 16px; color: var(--muted-foreground); padding: 0 4px; }
.trybtn:hover { color: var(--foreground); }

/* popovers */
.pop { position: absolute; left: 0; top: 100%; margin-top: 8px; width: 300px; z-index: 50; border-radius: 12px; border: 1px solid var(--border); background: var(--popover); box-shadow: var(--shadow-float); padding: 6px; }
.pop.lenspop { width: 280px; max-height: min(70vh, 440px); overflow: auto; top: auto; bottom: calc(100% + 8px); margin-top: 0; }
/* FX-2: in the Conversations workspace the composer follows the messages, often near the top: the lens menu opens downward there */
.thread-form .pop.lenspop { top: calc(100% + 8px); bottom: auto; }
.pop.menu { width: 224px; padding: 4px; margin-top: 4px; z-index: 10; }
.pop-item { width: 100%; text-align: left; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 8px; }
.pop-item:hover, .pop-item.on { background: var(--sunken); }
.pop-item.dis { color: var(--faint); cursor: default; } .pop-item.dis:hover { background: none; }
.menu-item { width: 100%; text-align: left; padding: 6px 12px; border-radius: 6px; font-size: 12px; }
.menu-item:hover { background: var(--sunken); }
.rel { position: relative; }
.switcher { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 8px; margin: 0 -8px; transition: background .15s; }
.switcher:hover { background: var(--sunken); }

/* drawers */
.drawer { position: fixed; inset: 0; z-index: 40; display: flex; }
.drawer .shade { position: absolute; inset: 0; background: var(--drawer-shade); animation: fade .2s ease-out; }
.drawer .sheet { position: relative; margin-left: auto; height: 100%; width: 100%; background: var(--background); box-shadow: var(--shadow-float); overflow-y: auto; border-left: 1px solid var(--border); animation: rise .32s ease-out both; }
.drawer.centered .sheet { margin: auto; height: auto; max-width: 672px; max-height: 88vh; border-radius: 16px; border: 1px solid var(--border); }
.drawer .sheet-head { position: sticky; top: 0; z-index: 2; background: oklch(98.5% 0.004 85 / 0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--hairline); }
.drawer .sheet-body { padding: 24px; }
.libtabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 -4px 8px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.libtab { padding: 0 10px; height: 32px; border-radius: 6px; font-size: 12px; white-space: nowrap; color: var(--muted-foreground); }
.libtab:hover { color: var(--foreground); } .libtab.on { background: var(--sunken); color: var(--foreground); font-weight: 500; }
.res-kind { width: 96px; flex-shrink: 0; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.res-kind.idea { color: var(--attention-ink); } .res-kind.sig { color: var(--signal); }
.msg-you { display: flex; justify-content: flex-end; } .msg-you p { max-width: 85%; border-radius: 16px 16px 6px 16px; background: var(--sunken); padding: 8px 14px; font-size: 14px; line-height: 20px; }
.msg-px { font-size: 14px; line-height: 1.625; }
.thread-form { position: sticky; bottom: 0; }
.timeline { position: relative; border-left: 1px solid var(--hairline); padding-left: 20px; margin-left: 5px; }
.timeline li { position: relative; } .timeline li + li { margin-top: 20px; }
.tl-dot { position: absolute; left: -26px; top: 6px; width: 10px; height: 10px; border-radius: 999px; border: 2px solid var(--background); background: var(--border); }
.tl-dot.done { background: var(--signal); } .tl-dot.now { background: var(--foreground); }
.reveal-row { display: flex; gap: 16px; padding: 12px 0; }
.reveal-row > span:first-child { width: 170px; flex-shrink: 0; font-size: 14px; font-weight: 500; }

/* toast */
.toast { position: fixed; z-index: 60; bottom: 64px; left: 50%; transform: translateX(-50%); border-radius: 999px; background: var(--primary); color: var(--primary-foreground);
  font-size: 12px; padding: 8px 16px; box-shadow: var(--shadow-float); max-width: 90vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: rise .32s ease-out both; }
.toast.bad { background: var(--risk); }

/* Review Mode label: always visible while simulated state is on screen */
.review-flag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--attention-soft); color: var(--attention-ink); font-size: 11px; font-weight: 500; white-space: nowrap; }
.review-flag .dot { background: var(--attention); }

/* ---------------------------------------------------------------- mobile */
.mob { display: flex; flex-direction: column; flex: 1 1 0%; }
.mob-head { position: sticky; top: 0; z-index: 30; background: oklch(98.5% 0.004 85 / 0.9); backdrop-filter: blur(8px); height: 56px; border-bottom: 1px solid var(--hairline); display: flex; align-items: center; padding: 0 16px; gap: 8px; }
.mob-body { flex: 1 1 0%; padding: 24px 20px 176px; }
.mob-body > * + * { margin-top: 32px; }
.mob-dock { position: fixed; bottom: 40px; left: 0; right: 0; z-index: 30; padding: 12px 16px 8px; background: linear-gradient(to top, var(--background) 60%, transparent); }
.mob-dock > * + * { margin-top: 6px; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; }
.iconbtn:hover { background: var(--sunken); }
.mob .pathbar { height: auto; min-height: 44px; padding: 8px; margin: 0 -8px; border: 0; border-radius: 8px; flex-wrap: wrap; row-gap: 2px; }
.mob .managed { margin-left: -8px; }
.mob .btn { min-height: 44px; } .mob .switcher, .mob .managed, .mob .threadpick, .mob-dock .threadpick { min-height: 44px; } .mob .textbtn, .mob .trybtn { min-height: 44px; }
.mob-foot { position: fixed; bottom: 0; left: 0; right: 0; z-index: 31; background: var(--background); height: 40px; padding-top: 0; padding-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.mob-foot .mode { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 640px) {
  .entry { padding: 96px 24px; } .entry-top { padding: 0 32px; } .t5xl-sm { font-size: 48px; line-height: 1.05; }
  .drawer .sheet { width: 460px; }
}
@media (min-width: 1024px) {
  .mob-foot { height: auto; padding: 10px 20px; }
  .desk { display: flex; flex-direction: column; height: calc(100dvh - 37px); min-height: 640px; }
  .mob { display: none; }
  .mob-foot { position: static; }
}
@media (min-width: 1280px) {
  .grid3 { grid-template-columns: 380px minmax(0, 1fr) 320px; }
  .xl-only { display: inline !important; } .ba .before { display: block; }
}
.xl-only { display: none; }
.md-only { display: none; }
@media (min-width: 768px) { .md-only { display: inline; } }

/* Source ingestion (PRAXERI-LOVABLE-SOURCE-INGESTION-1): real progress, the reveal, the picker and the source preview */
.steps.ingest .step { align-items: flex-start; } .steps.ingest .step > .grid-center { margin-top: 3px; width: 14px; }
.step.fail { color: var(--risk); } .findings { margin-top: 2px; }
.thumb { width: 64px; height: 44px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--border); background: var(--sunken); flex-shrink: 0; }
.shot { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--border); background: var(--sunken); }

/* PRAXERI-BETA-CONVERGENCE-1: the product canvas fills the centre column; every view is labelled for what it is */
.canvas-stage { flex: 1 1 0%; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding: 16px 24px; overflow: auto; }
.canvas-stage .frame { width: 100%; height: 100%; min-height: 420px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.canvas-stage.fit .frame { display: flex; align-items: flex-start; justify-content: center; }
.canvas-stage.fit .cv-img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; }
.canvas-stage.desktop .frame { overflow-y: auto; height: auto; min-height: 0; }
.canvas-stage.desktop .cv-img { width: 100%; height: auto; display: block; }
.canvas-stage.mobile .frame { width: 390px; max-width: 100%; height: 100%; min-height: 560px; border-radius: 28px; padding: 8px; box-shadow: var(--shadow-float); }
.canvas-stage.mobile .cv-img { width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 20px; display: block; }
.cv-frame { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; background: var(--surface); }
.canvas-stage.mobile .cv-frame { border-radius: 20px; }
.cv-empty { align-self: center; margin: auto; width: min(520px, 100%); text-align: left; padding: 24px; }
.canvas-foot { padding: 0 24px 16px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; background: var(--surface); }
.seg button { font-size: 12px; line-height: 16px; padding: 4px 10px; border-radius: 6px; color: var(--muted-foreground); min-height: 28px; }
.seg button.on { background: var(--sunken); color: var(--foreground); font-weight: 500; }
.seg button:hover { color: var(--foreground); }
.siteask .field { margin-top: 4px; }
.drawer.full .sheet.full { margin: 2vh auto; height: 96vh; width: 96vw; max-width: none; border-radius: 16px; border: 1px solid var(--border); overflow: hidden; display: flex; }
.drawer.full .canvas { min-height: 0; width: 100%; }
.mcanvas .mshot { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: var(--surface); }
.mcanvas .mshot .cv-img { width: 100%; height: auto; display: block; }
.facts .fact { list-style: none; }
.facts .fact form textarea { width: 100%; }
@media (max-width: 1023px) {
  .canvas-stage.mobile .frame, .canvas-stage .frame { min-height: 320px; }
}
/* the centre column's layout class shares its name with the text-align utility: the canvas reads left-aligned */
section.center .canvas-top, section.center .canvas-foot, section.center .cv-empty, .drawer.full .canvas-foot { text-align: left; }

/* PRAXERI-FOUNDER-OS-UX-OVERNIGHT-1: hierarchy, less chrome, the current place in navigation, a calmer phone dock */
.clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nowrap { white-space: nowrap; }
.bar .stage { font-size: 11px; line-height: 16px; color: var(--muted-foreground); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.managed { padding: 4px 6px; }
.tool.on { color: var(--foreground); background: var(--sunken); font-weight: 500; }
.recblock { border-top: 1px solid var(--hairline); padding-top: 24px; }
.rec-title { font-size: 18px; line-height: 1.35; letter-spacing: -0.005em; }
.stackrow { display: flex; align-items: flex-start; gap: 10px; }
.stackrow .logo.sm { margin-top: 2px; }
.canvas-top .faint { font-size: 11px; }
/* phone: one-line project name, a status that never wraps, a compact dock that does not cover the page */
.mob-head #switcher { min-width: 0; flex: 1 1 auto; }
/* FJ-1: the phone header's switcher is #switcher-m (founder.js switcher(compact)) -- it shrinks too, so a long project
   name ellipsizes instead of pushing Needs you, the Guide and the menu past a 390px screen */
.mob-head > .switcher-wrap { min-width: 0; flex: 1 1 auto; }
.mob-head .switcher { min-width: 0; max-width: 100%; margin: 0; }
.mob-head .switcher > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mob-head .switcher .icon { flex-shrink: 0; }
.mob-head > .ml-auto { flex-shrink: 0; }
.mob-body { padding-bottom: 210px; }
.mob-dock { background: var(--background); border-top: 1px solid var(--hairline); padding: 6px 16px 8px; }
.mob-dock .composer { padding: 8px 10px; border-radius: 14px; }
.mob-dock .composer .crow { margin-top: 0; }
.mob-dock .composer { display: flex; align-items: flex-end; gap: 8px; }
.mob-dock .composer textarea { flex: 1 1 auto; min-width: 0; padding: 10px 2px; }
.mob-dock .composer .crow { margin-top: 0; flex-shrink: 0; }
.mob-dock .composer .crow > span { display: none; }
/* cleanup S1 #6: the dock is one bar until tapped; the page keeps its real height free, and nothing scrolls under it */
.mob-body { padding-bottom: calc(var(--dock-h, 64px) + 64px); }
html { scroll-padding-bottom: calc(var(--dock-h, 64px) + 48px); }
.mob-dock:not(.open) .dock-full { display: none; }
.mob-dock.open .dock-bar { display: none; }
.dock-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--muted-foreground); font-size: 14px; text-align: left; }
.provline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted-foreground); }
.provline b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.provline .signal b { color: inherit; }
details > .mt6.pt5.bt { border-top: 0; padding-top: 0; }
.mcanvas .mshot { aspect-ratio: 4 / 3; background: var(--sunken); }
.mcanvas .mshot .cv-img { height: 100%; object-fit: cover; object-position: top center; }

/* Connect your current setup (PRAXERI-LOCAL-BUILDER-BRIDGE-1) */
.prewrap { white-space: pre-wrap; } .breakall { word-break: break-all; } .maxw260 { max-width: 260px; }
.clamp { max-height: 15em; overflow: hidden; }

/* PRAXERI-UNIFIED-ONBOARDING-2: project activation -- the System Assembly (left) and what needs the founder (right).
   One status vocabulary: configured / prepared / working / needs you / not needed yet / blocked / unknown. */
.activate { max-width: 1120px; margin: 0 auto; padding: 32px 16px 72px; }
.act-head { max-width: 680px; }
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px; }
.asm-area { padding: 18px 0; border-top: 1px solid var(--hairline); }
.asm-area:first-child { border-top: 0; padding-top: 0; }
.asm-area.pending { opacity: .55; }
.asm-items { margin-top: 6px; }
.asm-item { padding: 7px 0; }
.asm-item > button { align-items: flex-start; text-align: left; }
.ml-icon { margin-left: 22px; }
.minw0 { min-width: 0; }
.pill { font-size: 11px; line-height: 16px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--hairline);
  color: var(--muted-foreground); flex-shrink: 0; margin-top: 1px; }
.pill.s-configured { color: var(--signal); background: var(--signal-soft); border-color: transparent; }
.pill.s-needs_you { color: var(--attention-ink); background: var(--attention-soft); border-color: transparent; }
.pill.s-blocked { color: var(--risk); background: var(--risk-soft); border-color: transparent; }
.pill.s-working { color: var(--foreground); }
.pill.s-not_needed, .pill.s-unknown { color: var(--faint); }
.chip.on { background: var(--foreground); color: var(--primary-foreground); }
label.chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.maxw140 { max-width: 140px; }
.kvrow { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 16px; padding: 4px 0; }
.act-right select.field.line { appearance: auto; }
@media (min-width: 640px) { .activate { padding: 48px 24px 80px; } }
@media (min-width: 1024px) { .act-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; } }
@media (max-width: 639px) { .kvrow { grid-template-columns: 1fr; gap: 0; } }
/* below the two-column layout, what needs the founder (AI brain, questions, evidence, the next move) comes first */
@media (max-width: 1023px) { .act-right { order: -1; } }
/* Connect this computer: numbered founder steps (GITHUB-NATIVE-CONNECTION-P0 addendum) */
.stepnum { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--sunken); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
/* PRAXERI-WORLD-CLASS-BETA-HARDENING-1: on a phone the site-address form stacks (the field was squeezed to a few characters) */
.mob form[data-form="site"] > label { flex: 1 1 100%; }

/* ---------------------------------------------------------------- PRAXERI-FOUNDER-OS-BETA-EXPERIENCE-CLOSURE-1: one shell */
.shellpage { min-height: 100dvh; display: flex; flex-direction: column; }
.shellpage .bar, .activate ~ .bar, .bar.shell-top { display: flex; }
.page { flex: 1 1 0%; width: 100%; max-width: 720px; margin: 0 auto; padding: 32px 16px 72px; }
.page.wide { max-width: 1120px; }
.maxw { max-width: 560px; }
.bar .brand { color: inherit; }
.needs-ind { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--muted-foreground); border: 1px solid transparent; }
.needs-ind.on { color: var(--attention-ink); background: var(--attention-soft); font-weight: 500; }
.needs-ind:hover { border-color: var(--hairline); }
.working { padding: 48px 0; }
.errcard { max-width: 640px; }
.errcard .kv dd { line-height: 1.5; }
.conncard .pill { margin-top: 0; }
.conn-details details { border-top: 1px solid var(--hairline); padding-top: 8px; }
.conn-details details:first-child { border-top: 0; padding-top: 0; }
.prov { display: inline-block; font-size: 10px; line-height: 14px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted-foreground); white-space: nowrap; vertical-align: middle; margin-left: 4px; }
.prov.observed { color: var(--signal); background: var(--signal-soft); border-color: transparent; }
.prov.founder { color: var(--foreground); background: var(--sunken); border-color: transparent; }
.prov.inferred { color: var(--attention-ink); background: var(--attention-soft); border-color: transparent; }
.brain-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.brain-sec h3 { font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }
.brain-sec .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.brain-sec .chips .chip { background: var(--surface); border: 1px solid var(--hairline); }
.since { border-radius: 12px; background: var(--sunken); padding: 10px 12px; font-size: 12px; line-height: 16px; }
.since b { font-weight: 500; color: var(--foreground); }
.statecard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 12px; line-height: 16px; }
.statecard dt { color: var(--label); } .statecard dd { color: var(--foreground); }
.canvas[data-mode="candidate"] .canvas-stage, .canvas[data-mode="build"] .canvas-stage, .canvas[data-mode="needs"] .canvas-stage, .canvas[data-mode="idle"] .canvas-stage, .canvas[data-mode="learning"] .canvas-stage { align-items: flex-start; }
.canvas .now { width: min(640px, 100%); margin: 0 auto; }
.seg button[data-a="view"].on { font-weight: 500; }
@media (max-width: 639px) { .shellpage .bar .tool .tl, .activate .bar .tool .tl, .bar.shell-top .tool .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .bar.shell-top .tool { position: relative; } .page { padding: 20px 16px 56px; } }
@media (max-width: 1023px) { .bar.shell-top { position: sticky; top: 0; z-index: 30; background: oklch(98.5% 0.004 85 / 0.92); backdrop-filter: blur(8px); } }

/* drawers sit below the shell header: the switcher, navigation and Needs You stay reachable from every view (§6) */
.drawer { top: 57px; }
.drawer .shade { top: 0; }
.drawer.full { top: 0; }
.mob .drawer, .drawer.mob { top: 56px; }
@media (max-width: 1023px) { .drawer { top: 56px; } }

/* PRAXERI-SUBSCRIPTION-FIRST-BETA-EXPERIENCE-CLOSURE-1: AI options, streamed turns, the unavailable card */
.aiopt-list .aiopt.lead { border-color: var(--foreground); }
.apikey .kv dt { color: var(--label); }
.msg-px.live .caret { display: inline-block; width: 6px; height: 14px; margin-left: 2px; vertical-align: -2px; background: var(--muted); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.msg-px.unavail { border-left: 2px solid var(--attention, #b7791f); padding-left: 10px; }
.route-line { color: var(--faint); }
.composer-hint .route-line { color: var(--muted); }
.activate[data-compact] .act-head h1 .dot { width: 10px; height: 10px; }
.ai-res + .ai-res { margin-top: 6px; }

/* ---------------------------------------------------------------- PRAXERI-FOUNDER-EXPERIENCE-2: one disciplined hierarchy
   Tokens: readable muted text, one reading measure, one radius scale, calm spacing. Components: the orientation line,
   the Conversations workspace, Markdown answers, the curated Brain, compact cards. */
:root {
  --muted-foreground: oklch(46% 0.012 255);
  --faint: oklch(62% 0.01 255);
  --reading: 680px;
}
.pathbar.orient { gap: 8px; font-size: 13px; padding: 0 20px; height: 38px; }
.pathbar.orient .prov { margin-left: 2px; }
.pathbar.orient .more { font-size: 12px; }
.desk .left .scroll { padding: 20px 24px; }
.desk .right { padding: 20px 24px; }
.left .eyebrow, .right .eyebrow { letter-spacing: .06em; }
.statecard { grid-template-columns: 120px 1fr; }
.statecard dd { overflow-wrap: anywhere; }
.canvas .now .fd.t2xl { font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.canvas .now .tsm.muted.relaxed { font-size: 14px; line-height: 1.55; max-width: 60ch; }
.card .tsm.fw5.snug { font-size: 15px; }
.composer-hint { line-height: 16px; }
.composer-hint .route-line { color: var(--muted-foreground); }
.recblock .tsm { line-height: 1.45; }
.prov { font-size: 10px; }
/* Conversations as a workspace: the list, the thread in the main canvas, a compact aside */
.grid3.convo { grid-template-columns: 300px minmax(0, 1fr) 280px; }
@media (min-width: 1280px) { .grid3.convo { grid-template-columns: 320px minmax(0, 1fr) 300px; } }
.threads-col .scroll { padding: 16px; }
.thread-row { width: 100%; text-align: left; padding: 10px 8px; border-radius: 8px; display: block; }
.thread-row:hover { background: var(--sunken); }
.thread-row.on { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.convo-center { background: var(--background); overflow-y: auto; text-align: left; }   /* a conversation reads left-aligned, never centred like the Home stage */
.convo-canvas { width: min(var(--reading), 100%); margin: 0 auto; padding: 28px 24px 40px; }
.convo-head { padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.convo-msgs .msg-you p { font-size: 15px; line-height: 1.55; }
.msg-px { font-size: 15px; line-height: 1.6; }
.msg-px.md .md-body > * + * { margin-top: 10px; }
.msg-px.md .md-body p { font-size: 15px; line-height: 1.6; }
.msg-px.md .md-body h3, .msg-px.md .md-body h4 { font-size: 15px; font-weight: 600; margin-top: 16px; }
.msg-px.md .md-body h5, .msg-px.md .md-body h6 { font-size: 14px; font-weight: 600; margin-top: 12px; }
.msg-px.md .md-body ul { list-style: disc; padding-left: 22px; }
.msg-px.md .md-body ol { list-style: decimal; padding-left: 22px; }
.msg-px.md .md-body li + li { margin-top: 4px; }
.msg-px.md .md-body code { font-family: var(--mono); font-size: 13px; background: var(--sunken); border-radius: 4px; padding: 1px 5px; }
.msg-px.md .md-body pre { background: var(--sunken); border-radius: 8px; padding: 12px 14px; overflow-x: auto; }
.msg-px.md .md-body pre code { background: none; padding: 0; font-size: 12.5px; line-height: 1.5; white-space: pre; }
.msg-px.md .md-body blockquote { border-left: 2px solid var(--border); padding-left: 12px; color: var(--muted-foreground); }
.msg-px.md .md-body a { text-decoration: underline; text-underline-offset: 3px; }
.msg-px.md .md-body hr { border: 0; border-top: 1px solid var(--hairline); }
.msg-px.md .md-body strong { font-weight: 600; }
.thread-form textarea { font-size: 15px; line-height: 1.5; }
.convo-aside .tsm { line-height: 1.45; }
/* the curated Project Brain */
.brain-grid { gap: 18px; }
.brain-sec .tsm { font-size: 14px; line-height: 1.5; }
.brain-sec ul li + li { margin-top: 3px; }
.sheet .brain-grid .fw5 { font-size: 15px; }
/* compact setup */
.activate[data-compact] .act-head { max-width: 640px; }
/* phone */
@media (max-width: 1023px) {
  .grid3.convo { display: block; }
  .threads-col { border-right: 0; }
  .convo-canvas { padding: 20px 16px 120px; }
  .pathbar.orient { height: auto; min-height: 36px; padding: 6px 16px; flex-wrap: wrap; row-gap: 2px; }
}

/* FX-2 acceptance round 1: a status chip wraps inside its card instead of breaking out of it; the Account tab strip
   wraps on a phone instead of being cut */
.pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.acct-tabs, .account .tabs { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 640px) {
  .libtabs { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
  header nav.tools .needs-ind { white-space: nowrap; flex: 0 0 auto; }
  header nav.tools .needs-ind .tl { display: inline; }
  header nav.tools { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
}

/* FX-2 acceptance round 5: a phone page outside the cockpit keeps Home, Needs you and Account in reach */
nav.tools[hidden] { display: none; }
.phone-tools { flex-wrap: nowrap; gap: 4px; }

/* external review (d-phone-switcher-behind-sheet): an open project switcher is above any sheet, never under it */
.mob-head:has(.switcher[aria-expanded="true"]), .bar.shell-top:has(.switcher[aria-expanded="true"]) { z-index: 55; }
.pop-item .clamp2 { white-space: normal; }
/* the centre's recommendation card: its links line up under its centred title; the reason reads left-aligned */
[data-rec-centre] > .row { justify-content: center; }
[data-rec-centre] [data-rec-why] { text-align: left; }
/* Setup: a recorded answer wraps and is read in full, never cut inside a one-line field */
.sq-answer { resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 40px; line-height: 1.45; field-sizing: content; overflow: hidden; }
/* B0 account */
.btn.danger { background: var(--risk); color: var(--destructive-foreground); } .btn.danger:hover:not(:disabled) { opacity: .9; }
[data-acct-diag] { white-space: pre-wrap; padding: 12px; max-height: 240px; overflow: auto; }
.trust-page { padding: 48px 16px 64px; margin: 0 auto; max-width: 720px; }
.trust-list { list-style: disc; padding-left: 20px; display: grid; gap: 8px; }
/* B0 connect */
/* Notion, Supabase and Vercel in the browser (founder-connect.js): the cancelled / result line and the check list */
.pc-note { border-left: 2px solid currentColor; padding-left: 8px; }
.pc-checks p { line-height: 1.45; overflow-wrap: anywhere; }
[data-pc-bind] select, [data-pc-links] select { appearance: auto; }

/* B0 HANDOFF (PRAXERI-BETA0-HANDOFF): "Add context" -- bring ChatGPT / Claude / Notion context into the Brain */
.ho { border-top: 1px solid var(--hairline); padding-top: 16px; margin-top: 16px; }
.card > .ho { border-top: 0; padding-top: 0; margin-top: 0; }
.ho-choices { display: grid; gap: 8px; }
.ho-choice { display: block; width: 100%; text-align: left; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); padding: 12px; cursor: pointer; }
.ho-choice:hover { border-color: var(--border); background: var(--sunken); }
.ho-prompt { font-family: var(--mono); font-size: 12px; line-height: 1.45; white-space: pre-wrap; resize: vertical; min-height: 120px; }
.ho-text { resize: vertical; min-height: 140px; line-height: 1.45; }
.ho-file { display: block; margin-top: 6px; max-width: 100%; font-size: 13px; }
.ho-list { list-style: none; margin: 0; padding: 0; }
.ho-item { border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px; background: var(--surface); overflow-wrap: anywhere; }
.ho-item + .ho-item { margin-top: 8px; }
.ho-item.done { background: var(--sunken); }
.ho-item.done .tsm { color: var(--muted-foreground); }
.ho-conf { border-left: 2px solid var(--attention); padding-left: 10px; }
.ho .btn.sm { white-space: normal; }
/* PRAXERI-C3-NOTIONWRITE: the Notion write-back proposal's diff */
.nw-diff { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.nw-diff .nw-mark { display: inline-block; width: 1.2em; }
.nw-diff .nw-add { color: var(--signal); }
.nw-diff .nw-remove { color: var(--risk); text-decoration: line-through; }
.nw .btn.sm { white-space: normal; }
@media (max-width: 480px) { .ho-item { padding: 10px; } .ho .row.gap2 > .btn { flex: 1 1 auto; } }
/* PRAXERI-BETA0-NOTIONUX: the five Notion states, the reading progress */
.nj, .nj-steps { list-style: none; margin: 0; padding: 0; }
.nj-row { overflow-wrap: anywhere; }
.nj-steps > li { align-items: center; }
/* B0 GUIDE: the Guide (founder-guide.js) -- a secondary button, a compact drawer, and the readiness lines on connect cards */
.tool.guide-btn { color: var(--muted-foreground); }
.guide-drawer { z-index: 45; }
.guide-drawer .sheet.guide-sheet { max-width: 420px; }
.guide-drawer .sheet-head { padding: 12px 16px; }
.guide-drawer .sheet-body { padding: 16px; }
.guide-modes .chip { padding: 2px 8px; }
.guide-qa { border-top: 1px solid var(--hairline); padding-top: 12px; }
.guide-qa .relaxed { overflow-wrap: anywhere; }
#guide-form .field { min-width: 0; }
.guide-lines { border-top: 1px solid var(--hairline); padding-top: 10px; }
.guide-lines dd { overflow-wrap: anywhere; }
.mob-head .guide-btn { position: relative; flex-shrink: 0; width: 44px; height: 44px; padding: 0; justify-content: center; }
.mob-head .guide-btn .tl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 639px) { .guide-drawer .sheet.guide-sheet { max-width: none; } }

/* B0 helper (PRAXERI-BETA0-HELPER): the Praxeri Helper state and controls under each computer */
.b0-helper-device { border-top: 1px solid var(--hairline); padding-top: 10px; margin-top: 4px; }
.b0-helper-device .btn { flex: 0 0 auto; }

/* B0 judge */
.b0-judge-outcome { border-left: 3px solid var(--line, rgba(127,127,127,.35)); }
.b0-judge-outcome[data-challenge="CHANGED"] { border-left-color: var(--signal, currentColor); }
.b0-judge-ladder p { margin: 0; }
/* PRAXERI-BETA0-WSSEL: the workspace switcher (only for someone in several workspaces) beside the project switcher */
.bar .ws-switcher .switcher > span { max-width: 240px; }
@media (max-width: 639px) { .ws-switcher .pop { position: fixed; top: 56px; left: 16px; right: 16px; width: auto; } }
/* the toast is centred without a transform: its rise animation (fill both) replaced translateX(-50%), so a longer
   message such as "Switched to ... to open ..." ran off the right edge of a phone; it now wraps instead of being cut */
.toast { left: 16px; right: 16px; width: fit-content; margin: 0 auto; transform: none; white-space: normal; text-align: center; }
/* PRAXERI-C3-UNDERSTAND: What Praxeri understands, inside the Project Brain drawer */
.prov.unknown { color: var(--muted-foreground); background: var(--sunken); border-color: transparent; }
.prov.conflict { color: var(--attention-ink); background: var(--attention-soft); border-color: transparent; }
.un-summary { border: 1px solid var(--hairline); border-radius: 12px; padding: 10px 12px; margin-bottom: 16px; }
.un-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.un-claim { border-top: 1px solid var(--hairline); padding-top: 8px; }
.un-claim:first-child { border-top: 0; padding-top: 0; }
.un-sec[data-un-section="conflicts"] .un-claim { border-left: 2px solid var(--attention); padding-left: 10px; border-top: 0; }
.un-claim .tsm, .un-claim .txs { overflow-wrap: anywhere; }
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }
.ho-learned { border-top: 1px solid var(--hairline); padding-top: 6px; }

/* ---- FESC-1 ONBOARD: Show Praxeri what you're working on · Set up this project ---- */
.ob-tiles { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .ob-tiles { grid-template-columns: 1fr 1fr; } }
.ob-tile .ob-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); display: inline-grid; place-items: center; flex: none; margin-top: 2px; color: var(--foreground); }
.ob-tile.on .ob-box { border-color: var(--foreground); background: var(--foreground); color: var(--background, #fff); }
.ob-tile .choice-row { align-items: flex-start; }
.ob-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1024px) { .ob-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; } .ob-rail { position: sticky; top: 24px; align-self: start; } }
.ob-steps { list-style: none; margin: 0; padding: 0; }
.ob-steps li + li { margin-top: 8px; }
.ob-steps button { text-align: left; padding: 8px 10px; border-radius: 10px; }
.ob-step.on button { background: var(--sunken); }
.ob-step.done .tsm { color: var(--muted-foreground); }
.ob-mark { width: 16px; flex: none; }
.ob-arrow { font-size: 13px; }
.ob-steps.compact button { padding: 4px 0; }
.ob-rail-card { padding: 14px 0 12px; }
.ob-main { max-width: 760px; min-width: 0; }
.ob-head { max-width: 640px; }
.ob-source { padding: 14px 16px; }
.ob-und-group + .ob-und-group { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.ob-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--muted-foreground); background: var(--surface); }
.ob-tag .ob-tag-word { font-size: 10px; letter-spacing: .02em; opacity: .85; }
.ob-tag.on { outline: 1.5px solid var(--foreground); outline-offset: 1px; }
button.ob-tag { cursor: pointer; font: inherit; }
.ob-tag.active { color: var(--signal); background: var(--signal-soft); border-color: transparent; }
.ob-tag.available { color: var(--muted-foreground); background: var(--sunken); border-color: transparent; }
.ob-tag.needs { color: var(--attention-ink); background: var(--attention-soft); border-color: transparent; }
.ob-stage { padding: 14px 0; border-top: 1px solid var(--hairline); }
.ob-stage:first-child { border-top: 0; padding-top: 0; }
.ob-stage:not(.done):not(.running) { opacity: .6; }
.ob-ai-option { padding: 14px 16px; }
.ob-ai-option.on { border-color: var(--foreground); }
.ob-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border); display: inline-grid; place-items: center; flex: none; margin-top: 3px; }
.ob-radio > span { width: 8px; height: 8px; border-radius: 50%; background: var(--foreground); }
.ob-ai-option.on .ob-radio { border-color: var(--foreground); }
.ob-receipt { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline); }
.ob-receipt-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.ob-receipt-row dd { margin: 0; }
@media (max-width: 639px) { .ob-receipt-row { grid-template-columns: 1fr; gap: 2px; } }
/* ---- FESC-1 TOOLS ---- */
/* Tools & Resources: Recommended setup (a fold whose header is the count), capability rows with a Details fold, the
   catalog under Explore more tools; Account > Connections grouped by purpose */
.tools-rec > details > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; }
.tools-rec > details > summary::-webkit-details-marker { display: none; }
.tools-rec > details > summary .tools-chev { align-self: center; transition: transform .15s ease; }
.tools-rec > details[open] > summary .tools-chev { transform: rotate(90deg); }
.tools-rec .tools-later > summary { cursor: pointer; }
.tools-row > .grow { min-width: 0; }
.tools-row .tools-det > summary { cursor: pointer; }
.tools-row .tools-det .kv.auto { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); }
.tools-row .tools-det .kv dd { overflow-wrap: anywhere; }
.tools-row .btn.sm, .tools-row .textbtn { flex: 0 0 auto; }
.tools-explore > summary { cursor: pointer; }
.tools-explore .search { margin-top: 16px; }
.tools-cgroup .conncard + .conncard { margin-top: 16px; }
@media (max-width: 639px) { .tools-rec > details > summary { gap: 2px 8px; } }
/* ---- FESC-1 COMPUTER ---- */
/* the "This computer" card: one state word, the builder lines, the actions, two peer folds */
.pc-card .pill { flex: none; }
.pc-builders { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .pc-builders { grid-template-columns: 1fr 1fr; } }
.pc-builder { padding: 10px 12px; }
.pc-builder details > summary, .pf-match details > summary { color: var(--muted-foreground); }
.pc-actions .btn { flex: 0 0 auto; }
.pc-more { min-width: 44px; letter-spacing: .12em; }
.pc-menu { max-width: 480px; }
.pc-fold { border-top: 1px solid var(--hairline); padding-top: 8px; }
.pc-fold > summary { font-weight: 500; }
.pc-manage select.field { max-width: 420px; }
.pc-manage .row, .pc-previous .row { min-height: 44px; }
.pf-match, .pc-match { border-left: 3px solid var(--signal, currentColor); }
.pc-add > summary { cursor: pointer; }
.pc-previous > summary { cursor: pointer; }
@media (max-width: 639px) { .pc-card .btn, .pc-card .textbtn.strong { min-height: 44px; } }
/* ---- FESC-1 COCKPIT ---- */
/* Project at a glance ▸ and the folds: a <details> whose open state the page remembers (data-open-key) */
.glance > summary, .fold > summary, .shelf summary { cursor: pointer; list-style: none; }
.glance > summary::-webkit-details-marker, .fold > summary::-webkit-details-marker, .shelf summary::-webkit-details-marker { display: none; }
.glance .gl-head { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; }
.glance .gl-head .icon { flex-shrink: 0; transition: transform .15s; } .glance[open] .gl-head .icon { transform: rotate(90deg); }
.glance .gl-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.glance[open] .gl-line { display: none; }
.gl-rows { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 10px; font-size: 12px; line-height: 16px; margin-top: 10px; }
.gl-rows dt { color: var(--label); } .gl-rows dd { color: var(--foreground); min-width: 0; overflow-wrap: anywhere; }
.gl-rows dd .textbtn { display: inline-flex; min-height: 0; vertical-align: baseline; }
.gl-rows dd .muted { color: var(--muted-foreground); }
.gl-list { margin: 0; padding-left: 16px; } .gl-list li + li { margin-top: 2px; }
/* How Praxeri runs this ▸: the line and the two folds in place */
.sysline .sysbtn { width: 100%; text-align: left; min-height: 32px; align-items: center; }
.sysline .sysbtn .fg { color: var(--foreground); }
.sysview { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 10px; font-size: 12px; line-height: 16px; }
.sysview dt { color: var(--foreground); font-weight: 500; } .sysview dd { color: var(--muted-foreground); min-width: 0; overflow-wrap: anywhere; }
.fold > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; }
.fold[open] > summary .icon { transform: rotate(90deg); }
/* the shelves */
.shelf summary { min-height: 28px; align-items: center; }
.shelf .card.later { border-style: dashed; padding: 12px; }
/* preview words */
.canvas-top .updating { color: var(--muted-foreground); font-size: 11px; align-items: center; }
/* the phone: ≥44px targets, no horizontal overflow at 360px */
.mob .mob-body { overflow-x: hidden; }
.mob .mob-body section, .mob .mob-body .card, .mob .mob-body dd, .mob .mob-body p { min-width: 0; overflow-wrap: anywhere; }
.mob .glance > summary, .mob .shelf summary, .mob .fold > summary { min-height: 44px; display: flex; align-items: center; }
.mob .gl-rows, .mob .sysview { font-size: 13px; line-height: 18px; grid-template-columns: 88px minmax(0, 1fr); }
.mob .goalbtn { min-height: 44px; }
@media (max-width: 400px) { .gl-rows, .sysview { grid-template-columns: 1fr; gap: 2px 0; } .gl-rows dt, .sysview dt { margin-top: 8px; } }
@media (max-width: 1023px) { .ob-actions { position: sticky; bottom: 0; padding: 10px 0 12px; background: var(--background, #fff); border-top: 1px solid var(--hairline); z-index: 2; } }
/* FESC-1 follow-up (Checkpoint 2/3 H-5): below 480 px the build panel's title takes the row; the route line goes under it */
@media (max-width: 480px) { .panelbox > .row.gap2.wrap > .fw5.grow { flex-basis: 100%; } }

/* PRAXERI-REPAIR-QUEUE-1 (ticket 3): a request the page waits on is visible -- a thin bar after 400 ms, a plain line after
   8 s (founder.js netPaint); nothing when nothing is pending */
.netbar { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 0; pointer-events: none; }
.netbar.on { height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); background-size: 50% 100%;
  background-repeat: no-repeat; animation: netsweep 1.1s linear infinite; }
.netbar.slow { height: auto; padding: 6px 16px; background: var(--primary); color: var(--primary-foreground); font-size: 12px;
  text-align: center; animation: none; }
@keyframes netsweep { 0% { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .netbar.on { animation: none; background: var(--primary); } }
/* ---- WAVE3-HOME ---- */
/* the Project card (one clean card per project) and the state chips that replace repeated disclaimers */
.pcard { background: var(--surface); }
.state-chip { display: inline-block; font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 6px; background: var(--sunken); color: var(--muted-foreground); }
/* ---- NX-UX ---- */
/* review pack 7: a card on Home's stage reads left-aligned, so its labels and values scan down one edge */
section.center .card { text-align: left; }
/* review pack 14 (and 8): on the desk a toast sits over the foot of the right rail -- never over the canvas's fields --
   and wraps inside the rail's width */
@media (min-width: 1024px) { .toast { left: auto; right: 16px; bottom: 52px; margin: 0; max-width: 268px; text-align: left; border-radius: 12px; } }
@media (min-width: 1280px) { .toast { max-width: 288px; } }
/* review pack 4/13: a decision card in the narrow right rail keeps its Technical details inside the card */
.right [data-plan-tech] .kv { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.right [data-plan-tech] dd { overflow-wrap: anywhere; min-width: 0; margin-bottom: 6px; }