/* ENNAI Workspace — Design Baseline V1 (founder-approved Design Lab, review link MsktQyeze16KWc4SsjTfN1 v8, tag design-baseline-v1;
   Action Center V0.1 preview WxCnQLMaDiRD7ayrxPHWKU). Sections marked [ref] are copied verbatim from the approved prototype CSS
   (docs/design-lab/business-overview/business-overview.template.html as built at e8f9a7b); [app] maps the existing Workspace
   components onto the same tokens. Lab-only controls, embedded labs and the decorative Hairline figures are not part of the product. */
@font-face { font-family: "Geist"; src: url("/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* [ref] tokens, light + dark (data-theme="system" follows the OS through :not([data-theme="light"])) */
:root {
  --bg: #f6f7f9; --s1: #ffffff; --s2: #f1f3f6; --s3: #e8ecf1;
  --line: rgba(22,27,36,.1); --line-2: rgba(22,27,36,.2); --graphite: #2a313c;
  --fg: #0e1117; --muted: #4b5363; --faint: #6c7484;
  --data: #2b7f9e; --data-2: #1d6884; --data-soft: rgba(43,127,158,.1); --data-tint: #e3f0f5; --data-tint-2: #c9e2ec;
  --ok: #1f7a4d; --ok-soft: rgba(31,122,77,.1); --warn: #8a5a00; --warn-soft: rgba(138,90,0,.1); --err: #b4321f; --err-soft: rgba(180,50,31,.08);
  --face-l: #e3e8ee; --face-r: #d5dce5; --ground: rgba(22,27,36,.035);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.22,.8,.2,1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0a0c10; --s1: #10141a; --s2: #151a21; --s3: #1b2129; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.17); --graphite: #c7cdd6;
  --fg: #eef1f5; --muted: #9aa2b1; --faint: #7a8291; --data: #74c8e6; --data-2: #a6dcf0; --data-soft: rgba(116,200,230,.12); --data-tint: #15303b; --data-tint-2: #1d4352;
  --ok: #7fdca4; --ok-soft: rgba(127,220,164,.12); --warn: #f2c66d; --warn-soft: rgba(242,198,109,.12); --err: #ff9b8a; --err-soft: rgba(255,155,138,.1);
  --face-l: #121820; --face-r: #0d1218; --ground: rgba(255,255,255,.035); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0a0c10; --s1: #10141a; --s2: #151a21; --s3: #1b2129; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.17); --graphite: #c7cdd6;
  --fg: #eef1f5; --muted: #9aa2b1; --faint: #7a8291; --data: #74c8e6; --data-2: #a6dcf0; --data-soft: rgba(116,200,230,.12); --data-tint: #15303b; --data-tint-2: #1d4352;
  --ok: #7fdca4; --ok-soft: rgba(127,220,164,.12); --warn: #f2c66d; --warn-soft: rgba(242,198,109,.12); --err: #ff9b8a; --err-soft: rgba(255,155,138,.1);
  --face-l: #121820; --face-r: #0d1218; --ground: rgba(255,255,255,.035); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--mono); }
.meta { font: 500 .7rem/1.45 var(--mono); letter-spacing: .04em; color: var(--muted); }
.eyebrow { font: 500 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--data); }
.lbl { font: 500 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); } .small { font-size: .84rem; }
.sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
a { color: var(--data-2); text-underline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--s1); padding: .5rem .75rem; z-index: 80; }
.skip:focus { left: .5rem; }
/* [ref] segmented control */
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--s1); }
.seg button { background: transparent; border: 0; padding: 6px 10px; min-height: 32px; cursor: pointer; color: var(--muted); font-size: .8rem; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--data-soft); color: var(--fg); }

/* ---------------------------------------------------------------- [ref] Workspace shell. The prototype frame (.frame) is the viewport here. */
.frame { container-type: inline-size; width: 100%; min-height: 100vh; background: var(--bg); }
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 820px; }
.side { border-right: 1px solid var(--line); background: var(--s1); padding: 16px 10px; display: flex; flex-direction: column; gap: 16px; }
/* B · Centred brand header: compact, centred in a band exactly as tall as the top bar; its hairline continues the top bar's bottom border. */
.side.logo-b { --ink: 124px; padding-top: 0; }
.side.logo-b .brand { display: grid; place-items: center; height: var(--top-h, 57px); margin: 0 -10px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.side.logo-b .logo { width: calc(var(--ink) * 800 / 784); margin: 0; }
.orgbox { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 1px; }
.nav { display: grid; gap: 2px; }
.nav .lbl { padding: 4px 8px; }
.nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 9px; min-height: 36px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--muted); }
.nav button:hover { background: var(--s2); color: var(--fg); }
.nav button[aria-current="page"] { background: var(--s2); color: var(--fg); box-shadow: inset 2px 0 0 var(--data); }
.nav svg, .bnav svg, .ico { width: 16px; height: 16px; flex-shrink: 0; }
.nav .count { margin-left: auto; font: 500 .66rem/1 var(--mono); color: var(--warn); }
.side .foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--line); }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--s1); }
.crumb { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: .86rem; min-width: 0; }
.crumb b { color: var(--fg); font-weight: 500; }
.top .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.view { padding: 22px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.view > *, .card, .tw { min-width: 0; }   /* wide tables scroll inside their own container, never the page */
.bnav { display: none; }
.head { display: grid; gap: 4px; }
.head h1 { font-size: 1.65rem; font-weight: 300; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px dashed var(--warn); border-radius: 10px; background: var(--warn-soft); font-size: .8rem; }
.banner b { font-weight: 500; }

/* ---------------------------------------------------------------- [ref] building blocks */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: 14px; }
.card-h { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.card-h h2 { font-size: 1rem; font-weight: 500; margin-right: auto; }
.card-b { padding: 14px 16px; display: grid; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--s1); cursor: pointer; font-size: .84rem; font-weight: 500; text-align: center; }
.btn:hover { border-color: var(--data); }
.btn.primary { background: var(--graphite); color: var(--s1); border-color: transparent; }
.btn.small { min-height: 30px; padding: 4px 10px; font-size: .78rem; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 .68rem/1 var(--mono); letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-soft); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }
.chip.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); background: var(--err-soft); }
.chip.data { color: var(--data-2); border-color: color-mix(in srgb, var(--data) 40%, transparent); background: var(--data-soft); }
.chip.ghost { border-style: dashed; }
.pips { display: inline-flex; gap: 3px; align-items: center; }
.pips i { width: 7px; height: 7px; border-radius: 2px; border: 1px solid var(--data); }
.pips i.on { background: var(--data); }
.sig { display: inline-flex; gap: 4px; align-items: center; }
.sig svg { width: 13px; height: 13px; }
.sig .ok { color: var(--ok); } .sig .warn { color: var(--warn); } .sig .err { color: var(--err); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { border-top: 1px solid var(--line); }
.jr-f dd { font-size: .88rem; }
.vtabs { display: inline-flex; flex-wrap: wrap; justify-self: start; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; background: var(--s1); }
.vtabs button { border: 0; background: none; padding: 7px 12px; min-height: 34px; cursor: pointer; color: var(--muted); font-size: .82rem; }
.vtabs button + button { border-left: 1px solid var(--line); } .vtabs button[aria-selected="true"] { background: var(--data-soft); color: var(--fg); }

/* ---------------------------------------------------------------- [ref] Overview — A · Editorial Premium (Agency + Direct) */
/* ---- Agency Overview (A · Editorial Premium composition, ported from the agency-overview Design Lab onto this prototype's tokens) */
.ov-welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 28px; padding: 4px 18px 0; }
.ov-id { display: grid; gap: 8px; min-width: 0; }
.ov-org { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 500 .68rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ov-org b { color: var(--fg); font-weight: 500; } .ov-org i { width: 18px; height: 1px; background: var(--line-2); }
.ov-welcome h1 { font-size: clamp(1.9rem, 1.4rem + 1.6cqi, 2.6rem); font-weight: 300; letter-spacing: -.032em; line-height: 1.08; }
.ov-sub { color: var(--muted); font-size: .98rem; max-width: 34rem; }
.ov-cta { min-height: 42px; padding: 9px 18px 9px 14px; font-size: .9rem; margin-bottom: 4px; } .ov-cta svg { width: 16px; height: 16px; }
.ov-grid { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); gap: 1px; }
.ov-cell { background: var(--s1); padding: 18px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.ov-cell .sub { font-size: .82rem; color: var(--muted); }
.ov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-kpi { gap: 6px; } .ov-kpi .lbl { display: flex; align-items: center; gap: 8px; }
.ov-kpi .v { font-size: 2.15rem; font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.ov-kpi .d { font-size: .78rem; color: var(--muted); }
.ov-kpi.live .lbl { color: var(--fg); } .ov-kpi.live .v { color: var(--data); }
.ov-kpi.live .lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--data); box-shadow: 0 0 0 3px var(--data-soft); }
.ov-panels { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.ov-panels .wide { grid-column: span 2; }
.ov-continue { gap: 12px; padding: 20px; background: linear-gradient(180deg, var(--data-soft), transparent 70%), var(--s1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--data) 40%, transparent); }
/* the highlight ring follows the panel's rounded corner (the grid clips with radius 14px, inside a 1px border) */
.ov-continue { border-top-left-radius: 13px; }
.ov-continue h3 { font-size: 1.35rem; font-weight: 400; letter-spacing: -.02em; }
/* Design Lab V4 b7a9a20 (R-20261012-10), lines 301-319 of business-overview.template.html, verbatim: the Continue figures (Settle · Riffle ·
   Phosphor) — size, placement and colours. */
/* Visual exploration: Hairline "Settle" (MIT, vendored) at the foot of Continue. Decorative only — never live connectivity or data.
   Its own row takes the remaining height, so it sits bottom-right when the card is tall and simply follows the button when it is not. */
.ov-continue.has-settle { grid-template-rows: repeat(7, auto) 1fr;   /* rows per state are set inline by continueCell(); 7 = in progress */ align-content: stretch; overflow: hidden; }
/* bottom-right; the drawing's right edge sits as far from the card edge as the text does on the left (the card padding). The negative margins take up
   the empty bands the 5:4 drawing leaves around itself (about 3.7 % of its width at each side, more below). */
.ov-settle { justify-self: end; align-self: end; width: clamp(170px, 62%, 290px); margin: 4px calc(clamp(170px, 62%, 290px) * -.037) -40px 0;
  --hairline-plate: var(--s1); --hairline-hi: var(--data); --hairline-edge: color-mix(in srgb, var(--fg) 64%, transparent);
  --hairline-mid: color-mix(in srgb, var(--fg) 34%, transparent); --hairline-lo: var(--line-2); --hairline-stroke: .8; }
@container (max-width: 560px) { .ov-settle { margin-bottom: -24px; } }
/* All caught up · Riffle (Hairline, same vendored package): the same box and the same layout margins as Settle, so the card keeps exactly its height. The tray is
   drawn in the middle ~57 % of the 5:4 box (empty bands: 21.3 % of the width at the right, 10.7 % below), so the right margin takes up the right band and a
   transform (no layout effect) lifts the drawing: its right and bottom edges sit 20 px from the card edge, like the text. */
.ov-settle.ov-riffle { margin-right: calc(clamp(170px, 62%, 290px) * -.213); transform: translateY(calc(13.38% - 40px)); }   /* % of its own height; 10.7 % of the width = 13.38 % of the 5:4 height */
/* Waiting on ENNAI · Phosphor (same package): monochrome dots in the ink colour, as the original figure; "calm" softens the lit dots (experiment). */
/* Same box and bottom margin as Settle (its bottom band already leaves 20 px); the matrix sits left of centre in its 5:4 box (18.4 % of the width empty at the right), so the
   right margin takes that band up: the platform's right edge sits 20 px from the card edge, like the text and Riffle. */
.ov-settle.ov-phosphor { margin-right: calc(clamp(170px, 62%, 290px) * -.184); --hairline-hi: color-mix(in srgb, var(--fg) 82%, transparent); }
.ov-settle.ov-phosphor.calm { --hairline-hi: color-mix(in srgb, var(--fg) 46%, transparent); }
@container (max-width: 560px) { .ov-settle.ov-riffle { transform: translateY(calc(13.38% - 24px)); } }
.ov-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .8rem; color: var(--muted); }
.ov-bar { flex: 1 1 8rem; max-width: 16rem; height: 4px; border-radius: 999px; background: var(--line-2); overflow: hidden; } .ov-bar i { display: block; height: 100%; background: var(--data); border-radius: inherit; }
.ov-go { justify-self: start; min-width: 9.5rem; min-height: 40px; }
.ov-mini { display: block; width: 100%; height: auto; max-height: 60px; }
.ov-blk .t { fill: var(--s3); } .ov-blk .l { fill: var(--face-l); } .ov-blk .r { fill: var(--face-r); }
.ov-blk.done .t { fill: color-mix(in srgb, var(--ok) 34%, var(--s3)); } .ov-blk.done .l { fill: color-mix(in srgb, var(--ok) 22%, var(--face-l)); } .ov-blk.done .r { fill: color-mix(in srgb, var(--ok) 16%, var(--face-r)); }
.ov-blk.cur .t, .ov-blk.lv2 .t { fill: color-mix(in srgb, var(--data) 70%, var(--s3)); } .ov-blk.cur .l, .ov-blk.lv2 .l { fill: color-mix(in srgb, var(--data) 45%, var(--face-l)); } .ov-blk.cur .r, .ov-blk.lv2 .r { fill: color-mix(in srgb, var(--data) 34%, var(--face-r)); }
.ov-blk.lv1 .t { fill: color-mix(in srgb, var(--data) 26%, var(--s3)); } .ov-blk.lv1 .l { fill: color-mix(in srgb, var(--data) 18%, var(--face-l)); } .ov-blk.lv1 .r { fill: color-mix(in srgb, var(--data) 12%, var(--face-r)); }
.ov-blk:not(.wait) .t, .ov-blk:not(.wait) .l, .ov-blk:not(.wait) .r { stroke: color-mix(in srgb, var(--fg) 62%, transparent); stroke-width: .8px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }   /* the same hairline edges as the Journey cubes, constant on screen in the scaled mini SVGs */
.ov-blk.wait .t, .ov-blk.wait .l, .ov-blk.wait .r { fill: transparent; stroke: var(--line-2); stroke-dasharray: 3 3; }
.ov-rows { list-style: none; margin: 0; padding: 0; } .ov-rows li + li { border-top: 1px solid var(--line); }
.ov-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; background: none; border: 0; text-align: left; cursor: pointer; min-width: 0; min-height: 44px; color: inherit; font: inherit; }
.ov-row:hover .row-t { color: var(--data-2); } .ov-row:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; border-radius: 6px; }
.ov-row .num { font: 500 .7rem/1 var(--mono); color: var(--faint); width: 1.4rem; flex-shrink: 0; }
.ov-row .row-t { flex: 1; min-width: 0; } .ov-row .row-t small { display: block; color: var(--muted); font-size: .78rem; } .ov-row .arr { color: var(--faint); }
.ov-pslot { flex: 0 0 8.6rem; display: flex; justify-content: flex-end; }   /* one width for every status, so all lifecycle tracks start and end at the same x */
.ov-dots { display: flex; align-items: center; flex: 1.4; min-width: 7rem; max-width: 16rem; }
.ov-dots span { position: relative; flex: 1; height: 9px; }
.ov-dots span::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--faint); background: var(--s1); z-index: 1; box-sizing: border-box; }
.ov-dots span::after { content: ""; position: absolute; left: 9px; right: 0; top: 4px; height: 1px; background: var(--line-2); }
.ov-dots span:last-child { flex: 0 0 9px; } .ov-dots span:last-child::after { display: none; }
.ov-dots .done::before { background: var(--muted); border-color: var(--muted); } .ov-dots .done::after { background: var(--muted); }
.ov-dots .cur::before { background: var(--data); border-color: var(--data); box-shadow: 0 0 0 3px var(--data-soft); }
.ov-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: 600 .62rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.ov-pill.in_progress, .ov-pill.draft { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.ov-pill.submitted, .ov-pill.under_review { color: var(--data-2); background: var(--data-soft); border-color: transparent; }
.ov-pill.completed { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.ov-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.ov-feed li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 9px 0; font-size: .9rem; } .ov-feed li + li { border-top: 1px solid var(--line); }
.ov-feed .ic { width: 8px; height: 8px; margin: 7px 0 0 4px; border-radius: 50%; background: var(--faint); } .ov-feed .ic.ennai { background: var(--data); } .ov-feed .ic.team { background: var(--ok); }
.ov-feed small { display: block; color: var(--muted); font-size: .76rem; }
.ov-caught { display: grid; place-items: center; text-align: center; gap: 6px; padding: 18px 6px; } .ov-caught .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ok); } .ov-caught .ok svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- [ref] clients, cards, business overview, journey */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.facts > div { background: var(--s1); padding: 10px 12px; display: grid; gap: 2px; }
.facts dt { font: 500 .62rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: .94rem; }
.hub-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; }
.addc-btn { background: var(--s1); border-color: var(--line-2); color: var(--fg); } .addc-btn:hover { border-color: var(--data); }
.crumb-l { all: unset; cursor: pointer; color: var(--muted); border-radius: 4px; } .crumb-l:hover { color: var(--fg); } .crumb-l:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
.sec-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 10px; }
.sec-h h2 { font-size: 1rem; font-weight: 500; margin-right: auto; }
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 12px; }
.pf-card { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 12px; align-content: start; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pf-card:hover, .pf-card:focus-within { border-color: var(--data); box-shadow: 0 12px 30px -20px rgba(14,17,23,.4); }
.pf-top { display: grid; gap: 2px; } .pf-top h3 { font-size: 1.02rem; font-weight: 500; }
.stretch { all: unset; cursor: pointer; } .stretch::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.stretch:focus-visible::after { outline: 2px solid var(--data); outline-offset: 2px; }
.pf-facts, .bo-facts { margin: 0; }
.pf-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pf-facts dt, .bo-facts dt { font: 500 .6rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pf-facts dd, .bo-facts dd { margin: 0; } .pf-facts dd { font-size: .86rem; } .pf-facts small, .bo-facts small { color: var(--muted); font-size: .74rem; }
.warn-t { color: var(--warn) !important; }
.pf-pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bo-id { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px 28px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.bo-name { display: grid; gap: 4px; min-width: 0; } .bo-name h1 { font-size: 2.1rem; font-weight: 300; letter-spacing: -.025em; line-height: 1.1; }
.bo-desc { color: var(--muted); max-width: 44rem; } .demo { color: var(--warn); }
.bo-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bo-facts > div { background: var(--s1); padding: 10px 12px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.bo-facts dd { font-size: 1rem; } .bo-facts dd small { display: block; }

.nxa { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px 16px 20px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--graphite), 0 14px 32px -26px rgba(14,17,23,.55); }
.nxa-t { display: grid; gap: 3px; flex: 1 1 22rem; min-width: 0; } .nxa h2 { font-size: 1.15rem; font-weight: 500; }
.nxa.quiet { box-shadow: inset 3px 0 0 var(--line-2); }
.nxa .btn.primary { min-height: 44px; padding-inline: 18px; }

.bo-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bo-side { display: grid; gap: 16px; min-width: 0; }
.bo-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jr-s { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); min-width: 0; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.jr-s::after { content: ""; position: absolute; top: 23px; right: -11px; width: 10px; height: 1px; background: var(--line-2); } .jr-s:last-child::after { display: none; }
.jr-s.done { background: var(--s1); } .jr-s.done .jr-i { color: var(--ok); } .jr-s.done::after { background: var(--ok); }
.jr-s.cur, .jr-s.part { background: var(--data-tint); border-color: color-mix(in srgb, var(--data) 45%, transparent); box-shadow: 0 1px 0 var(--line), 0 16px 28px -22px color-mix(in srgb, var(--data) 80%, transparent); transform: translateY(-3px); }
.jr-s.wait { color: var(--muted); }
.jr-i { width: 22px; height: 22px; display: grid; place-items: center; color: var(--data-2); } .jr-i svg { width: 18px; height: 18px; }
.jr-n { font: 500 .62rem/1 var(--mono); letter-spacing: .12em; color: var(--faint); }
.jr-s b { font-weight: 500; font-size: .92rem; } .jr-l { font-size: .8rem; color: var(--muted); }
.ring { width: 12px; height: 12px; border: 1.5px solid var(--line-2); border-radius: 50%; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--data); animation: bo-ping 2.6s var(--ease) infinite; }
@keyframes bo-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--data) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
.jr-f { margin-top: 6px; }

.mini-card .card-b { gap: 10px; }
.mini-row { display: flex; gap: 10px; align-items: start; justify-content: space-between; } .mini-row > span:first-child { display: grid; gap: 2px; } .mini-row b { font-weight: 500; }
.clist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.clist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.clist li > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; } .clist b { font-weight: 500; font-size: .86rem; }

/* ---------------------------------------------------------------- [ref] unified client switcher (A1 / A24) */
/* ---------------------------------------------------------------- Unified client switcher (navigation refinement) */
.csw { position: relative; }
.csw-t { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s1); color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
button.csw-t:hover { border-color: color-mix(in srgb, var(--data) 45%, var(--line-2)); background: var(--s2); }
.csw-t[aria-expanded="true"] { border-color: var(--data); box-shadow: 0 0 0 3px var(--data-soft); }
.csw-t.static { cursor: default; }
/* A direct business's own business on the agency switcher's card: in the sidebar it must look exactly like the agency's switcher (the
   reference), which the sidebar's .nav button rule (line 67) flattens. */
.nav .csw-t.static { padding: 8px 9px; min-height: 36px; border: 0; background: none; border-radius: 8px; color: var(--muted); }
.csw-t.busy { cursor: progress; }
.csw-av { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--s2); font: 600 .6rem/1 var(--mono); letter-spacing: .02em; color: var(--graphite); flex-shrink: 0; }
.csw-n { flex: 1; min-width: 0; display: grid; }
.csw-n b { font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw-n small { font: 500 .62rem/1.35 var(--mono); letter-spacing: .03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csw-cv { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.csw-t[aria-expanded="true"] .csw-cv { transform: rotate(180deg); }
.csw-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 288px; max-width: calc(100cqw - 24px); display: grid; gap: 4px; padding: 6px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 28px -14px rgba(14,17,23,.3); }
.csw-pop > .lbl { padding: 6px 8px 2px; }
/* Sidebar trigger: the same popover, positioned against the viewport so it floats over the main content even when the sidebar scrolls (sidebar v2)
   and never widens or shifts the sidebar. Placement is computed from the trigger: below it, or above when there is no room; kept inside the viewport. */
.csw-pop.float { position: fixed; z-index: 60; max-width: none; }
.csw-q { width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg); color: var(--fg); font: inherit; font-size: .86rem; }
.csw-q:focus-visible { outline: 2px solid var(--data); outline-offset: 0; }
.csw-l { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: 1px; }
.csw-l:focus-visible { outline: 2px solid var(--data); outline-offset: 1px; border-radius: 8px; }
.csw-o { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px; min-height: 40px; border-radius: 8px; cursor: pointer; color: var(--fg); }
.csw-o .ck { width: 14px; height: 14px; color: var(--data); visibility: hidden; }
.csw-o[aria-selected="true"] .ck { visibility: visible; }
.csw-o b { font-weight: 400; font-size: .88rem; overflow-wrap: anywhere; }
.csw-o[aria-selected="true"] b { font-weight: 500; }
.csw-o small { display: block; font: 500 .62rem/1.35 var(--mono); letter-spacing: .03em; color: var(--muted); }
.csw-o:hover { background: var(--s2); }
.csw-o.act { background: var(--s2); box-shadow: inset 2px 0 0 var(--data); }
.csw-empty { padding: 10px 8px; font-size: .82rem; color: var(--muted); }
.csw-foot { border-top: 1px solid var(--line); padding-top: 4px; }
.csw-foot button { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 36px; padding: 6px 8px; border: 0; background: none; border-radius: 8px; color: var(--data-2); font-size: .84rem; cursor: pointer; }
.csw-foot button:hover { background: var(--s2); }
.nav .nav-biz { display: grid; gap: 2px; margin-top: 4px; }
.csw-none { display: grid; gap: 8px; justify-items: start; padding: 10px; border: 1px dashed var(--line-2); border-radius: 10px; }
.top .csw-m { display: none; }
@container (max-width: 860px) { .top .csw-m { display: block; width: 100%; order: 2; } .top .csw-m .csw-pop { width: auto; right: 0; max-width: none; } }
@container (max-width: 560px) { .csw-o, .csw-foot button { min-height: 44px; } .csw-q { height: 44px; } }
@media (prefers-reduced-motion: no-preference) { .csw-cv { transition: transform .15s; } }

/* ---------------------------------------------------------------- [ref] Security (S1 composition) */
/* ---------------------------------------------------------------- Security — refined (Design Lab, synthetic) */
.sec-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sec-strip > div { background: var(--s1); padding: 14px 16px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.sec-strip .v { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; }
.sec-strip .v .ico { color: var(--ok); } .sec-strip .v.off .ico { color: var(--warn); }
.sec-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sec-col { display: grid; gap: 18px; min-width: 0; }
.sec-rows, .ses, .sec-ev, .sec-opts { list-style: none; margin: 0; padding: 0; }
.sec-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 16px; }
.sec-rows > li + li, .ses > li + li { border-top: 1px solid var(--line); }
.sec-rows b, .sec-ev b, .sec-opts b { font-weight: 500; display: block; }
.sec-rows .st { display: inline-flex; align-items: center; gap: 5px; }
.sec-rows .st .ico { width: 13px; height: 13px; color: var(--ok); } .sec-rows .st.off .ico { color: var(--warn); }
.ses-t { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; width: 100%; min-height: 58px; padding: 10px 16px; border: 0; background: none; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.ses-t:hover, .ses-t[aria-expanded="true"] { background: var(--s2); }
.ses-t[aria-expanded="true"] .csw-cv { transform: rotate(180deg); }
.ses-ic { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--s2); display: grid; place-items: center; color: var(--graphite); }
.ses-n { min-width: 0; display: grid; } .ses-n b { font-weight: 500; }
.ses-d { display: grid; gap: 12px; justify-items: start; padding: 4px 16px 16px 60px; background: var(--s2); }
.sec-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; margin: 0; width: 100%; }
.sec-dl div { display: grid; gap: 1px; min-width: 0; } .sec-dl dt { font: 500 .62rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sec-dl dd { margin: 0; font-size: .88rem; }
.sec-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.sec-ev li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 16px; }
.sec-ev li + li { border-top: 1px solid var(--line); }
.sec-ev .evd { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); align-self: center; }
.sec-ev .evd.ok { background: var(--ok); } .sec-ev .evd.warn { background: var(--warn); } .sec-ev .evd.data { background: var(--data); }
.sec-ev time { white-space: nowrap; }
.sec-note { display: grid; gap: 6px; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 14px; }
.sec-real summary { padding: 14px 16px; cursor: pointer; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.sec-real[open] summary { border-bottom: 1px solid var(--line); }
.sec-opts li { display: grid; gap: 2px; padding: 10px 0; } .sec-opts li + li { border-top: 1px solid var(--line); }
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn.danger:hover { border-color: var(--err); background: var(--err-soft); }
.banner .seg { margin-left: auto; flex: none; flex-wrap: nowrap; } .banner:has(> .seg) { flex-wrap: wrap; align-items: center; } .banner:has(> .seg) > span:not(.seg) { flex: 1 1 260px; min-width: 0; }
.sw-dlg.wide { width: min(560px, calc(100vw - 32px)); }
#sec-dlg-b { display: grid; gap: 10px; margin-bottom: 18px; } #sec-dlg-b p { margin: 0; color: var(--fg); } #sec-dlg-b p.meta, #sec-dlg-b .meta { color: var(--muted); }
#sec-dlg-b .sec-ev { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
@container (max-width: 1080px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 860px) { .sec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 560px) { .sec-rows > li { grid-template-columns: minmax(0, 1fr); } .sec-rows .btn { justify-self: start; } .ses-d { padding-left: 16px; } .ses-t { grid-template-columns: 32px minmax(0, 1fr) 14px; } .ses-t .chip { grid-column: 2; justify-self: start; } .ses-t > span:empty { display: none; } .ses-t .csw-cv { grid-column: 3; grid-row: 1; } .sec-real summary { min-height: 44px; } .banner .seg { margin-left: 0; } }
@media (prefers-reduced-motion: no-preference) { .ses-t .csw-cv { transition: transform .15s; } }

/* ---------------------------------------------------------------- [ref] theme + language switchers (A16) */
/* ---------------------------------------------------------------- Theme switcher (vanilla port of 21st.dev "theme-switcher-1"; Workspace has no React).
   Same anatomy: a pill radiogroup System · Light · Dark, icon buttons, a ring that springs to the active option. ENNAI tokens instead of zinc. */
.tsw { position: relative; display: inline-flex; align-items: center; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line-2); --tsw-s: 32px; }
.tsw button { position: relative; z-index: 1; width: var(--tsw-s); height: var(--tsw-s); display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; }
.tsw button:hover, .tsw button[aria-checked="true"] { color: var(--fg); }
.tsw button svg { width: 16px; height: 16px; }
.tsw button:focus-visible { outline: 2px solid var(--data); outline-offset: -2px; }
.tsw-ring { position: absolute; top: 0; left: 0; width: var(--tsw-s); height: var(--tsw-s); border-radius: 999px; border: 1px solid color-mix(in srgb, var(--data) 38%, var(--line-2)); pointer-events: none; transform: translateX(calc(var(--i, 0) * var(--tsw-s))); }
.tsw-ring.go { transition: transform .6s cubic-bezier(.3, 1.45, .55, 1); }
.top .right:has(.tsw) { width: auto; margin-left: auto; }
/* Founder decision 2026-10-10: the top bar with breadcrumbs is APPROVED and is the default; "Off" (removal) was cancelled and stays only as a lab record.
   No breadcrumbs: the desktop top bar is not shown (content starts at the top); the phone bar keeps the switcher and the controls. */
@container (min-width: 861px) { .top.nocrumb { display: none; } }
.side-prefs { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 0 9px; }
.side-prefs .lsw { margin-right: 0; margin-left: -5px; }
.side.sv-a .side-prefs, .side.sv-b .side-prefs { margin-top: 0; }
.side:not(.sv-a):not(.sv-b) .side-prefs { margin-top: auto; } .side:not(.sv-a):not(.sv-b) .side-prefs + .foot { margin-top: 0; }
/* Language: quiet text "ES / EN" beside the theme switcher (founder: Spanish first, calmer than the theme pill). The active language is the one in full colour. */
.lsw { display: inline-flex; align-items: center; gap: 0; margin-right: 6px; }
.lsw button { min-width: 0; height: 32px; padding: 0 5px; border: 0; background: none; color: var(--faint); font: 400 .72rem/1 var(--mono); letter-spacing: .08em; cursor: pointer; border-radius: 4px; }
.lsw button:hover { color: var(--muted); } .lsw button[aria-pressed="true"] { color: var(--fg); font-weight: 500; }
.lsw button:focus-visible { outline: 2px solid var(--data); outline-offset: 0; }
.lsw .sep { color: var(--line-2); font: 400 .72rem/1 var(--mono); user-select: none; }
@container (max-width: 560px) { .lsw button { height: 44px; min-width: 36px; } }
@container (max-width: 560px) { .tsw { --tsw-s: 44px; } }
@media (prefers-reduced-motion: reduce) { .tsw-ring.go { transition: none; } }


/* ---------------------------------------------------------------- [ref] Sidebar B · Minimal grouped (A10), sticky (A4), above the page (A24) */
.side.sv-b { gap: 12px; }
.side.sv-a > *, .side.sv-b > * { flex-shrink: 0; }   /* the sidebar scrolls instead of squeezing the brand band or groups */
@container (min-width: 861px) { .app:has(> .side.sv-a), .app:has(> .side.sv-b) { background: linear-gradient(to right, var(--s1) 231px, var(--line) 231px 232px, transparent 232px); } }   /* desktop only: the sidebar is collapsed on phones */
/* Sticky sidebar (founder-approved 2026-10-10): the sidebar stays in place while the page scrolls. Sticky stops at the end of the app, so nothing of the
   lab page may sit below it — otherwise the last scroll pushes the sidebar up and hides the logo. Lab chrome only; the Workspace has nothing below the app. */
.side.sv-a .nav, .side.sv-b .nav { gap: 1px; }
.side.sv-a .nav button span, .side.sv-b .nav button span { min-width: 0; line-height: 1.3; }
.side-low { margin-top: auto; display: grid; gap: 14px; }
.side.sv-a .side-low { padding-top: 12px; border-top: 1px solid var(--line); }
.side.sv-b .side-low { gap: 12px; }
.side.sv-a .foot, .side.sv-b .foot { margin-top: 0; }
.nav .nav-disc { justify-content: flex-start; }
.nav .nav-disc .csw-cv { margin-left: auto; transition: none; }
.nav .nav-disc[aria-expanded="true"] .csw-cv { transform: rotate(180deg); }
.nav .nav-disc .count { margin-left: 6px; }
.nav-sub { display: grid; gap: 1px; padding-left: 26px; } .nav-sub[hidden] { display: none; }
.nav-sub button { min-height: 32px; padding-block: 6px; font-size: .9rem; }

/* ---------------------------------------------------------------- Responsive (frame width) */
@container (max-width: 1080px) {

/* ---------------------------------------------------------------- [ref] responsive (frame width) */
  .queue { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .bnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: sticky; bottom: 0; z-index: 5; background: color-mix(in srgb, var(--s1) 96%, transparent); border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bnav button { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font-size: .72rem; cursor: pointer; }
  .bnav button[aria-current="page"] { color: var(--data-2); }
  .bnav svg { width: 20px; height: 20px; }
  .top { padding: 10px 14px; } .view { padding: 14px; gap: 14px; }
  .head h1 { font-size: 1.35rem; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .conn-table { display: none; } .conn-cards { display: grid; }
  .hubtabs { display: flex; }
}
@container (max-width: 560px) {
  .queue { grid-template-columns: minmax(0, 1fr); }
  .l2wrap { display: none; } .tcards { display: grid; }
  .top .right { width: 100%; margin-left: 0; } .top .right select { flex: 1; }
  .btn, .btn.small, .seg button, select.sel { min-height: 44px; }
  .seg button { min-width: 44px; }
  .meta { font-size: .74rem; }
}
@container (max-width: 1080px) { .bo-main, .bo-two, .bo-id { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 860px) { .ex-grid { grid-template-columns: minmax(0, 1fr); } .attn li { grid-template-columns: minmax(0, 1fr) auto; } .attn-c { grid-column: 1 / -1; } .bo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 1080px) { .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ov-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ov-continue { grid-column: 1 / -1; border-top-right-radius: 13px; } .ov-panels > .wide + .ov-cell:last-child { grid-column: 1 / -1; } }
@container (max-width: 860px) { .ov-panels, .ov-entries { grid-template-columns: minmax(0, 1fr); } .ov-panels .wide { grid-column: auto; } }
@container (max-width: 560px) {
  .addc-g { grid-template-columns: minmax(0, 1fr); } .addc-btn, .addc-a .btn { width: 100%; min-height: 44px; } .fld input { min-height: 44px; } .addc-a { flex-direction: column-reverse; }
  .jv-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; } .jv-stats > div { padding: 0; border-left: 0; } .jv-log li { grid-template-columns: minmax(0, 1fr); gap: 0; } .jv-head .sel { flex: 1; min-height: 44px; } .jv-head .seg button { min-height: 44px; min-width: 44px; } #jv-replay { min-height: 44px; }
  .ov-welcome { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 14px; } .ov-welcome h1 { font-size: 1.85rem; } .ov-cta { width: 100%; min-height: 44px; margin: 0; }
  .ov-cell { padding: 14px; } .ov-kpi .v { font-size: 1.75rem; } .ov-go { min-height: 44px; } .ov-row { flex-wrap: wrap; } .ov-dots { flex-basis: 100%; max-width: none; order: 3; } .ov-entry { grid-template-columns: minmax(0, 1fr) 96px; }
  .vtabs { display: flex; width: 100%; } .vtabs button { flex: 1; min-height: 44px; }
  .cosw, .cosw-sel { width: 100%; } .cosw-g { flex: 1; } .cosw-g button { min-height: 44px; } .cosw-sel .sel { flex: 1; min-height: 44px; }
  .jr { grid-template-columns: minmax(0, 1fr); } .jr-s::after { display: none; } .jr-s.cur, .jr-s.part { transform: none; }
  .ctx { grid-template-columns: minmax(0, 1fr); } .bo-name h1 { font-size: 1.5rem; } .pwrap { display: none; } .plist { display: grid; }
  .attn li { grid-template-columns: minmax(0, 1fr); } .attn li .btn { justify-self: start; } .ctx button, .ex, .opt, .na-chk, .crumb-l { min-height: 44px; }
  .home-act { width: 100%; } .home-act .btn { flex: 1; } .nxa .btn { width: 100%; } .rq-foot .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .spin, .skel, .pulse-dot { animation: none; } .jr-s.cur, .jr-s.part { transform: none; } .pf-card { transition: none; } }

/* ---------------------------------------------------------------- [ref] geometry rule A25 */
/* Geometry rule (founder, 2026-10-10): cards that stand side by side end on one horizontal line on every Workspace page. Two-column
   rows stretch to the taller column; in a stacked column the last card takes the remaining height. Content stays top-aligned. */
.bo-main, .bo-two, .sec-grid { align-items: stretch; }
.bo-main > .bo-side, .sec-grid > .sec-col { display: flex; flex-direction: column; } .bo-main > .bo-side { gap: 16px; } .sec-grid > .sec-col { gap: 18px; }
.bo-main > .bo-side > :last-child, .sec-grid > .sec-col > :last-child { flex-grow: 1; }
.sec-grid > .sec-col > .sec-note:last-child { flex-grow: 0; } .sec-grid > .sec-col > :has(+ .sec-note:last-child) { flex-grow: 1; }   /* a short dashed note keeps its size; the card above it takes the height */
@container (max-width: 1080px) { .bo-main > .bo-side > :last-child, .sec-grid > .sec-col > :last-child { flex-grow: 0; } }   /* stacked: natural heights */

/* =============================================================== [app] Workspace components on the approved tokens */
/* Shell: the prototype's nav entries are buttons; the Workspace uses real links (same look). */
.nav a { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 9px; min-height: 36px; border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--muted); text-decoration: none; }
.nav a:hover { background: var(--s2); color: var(--fg); }
.nav a[aria-current="page"] { background: var(--s2); color: var(--fg); box-shadow: inset 2px 0 0 var(--data); }
.side.sv-b .nav a span { min-width: 0; line-height: 1.3; }
.side .brand a { display: block; line-height: 0; border-radius: 6px; }
.side .logo { height: auto; }
.app { min-height: 100vh; }
.side .logo.dk { display: none; }
:root[data-theme="dark"] .side .logo.lt { display: none; } :root[data-theme="dark"] .side .logo.dk { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .side .logo.lt { display: none; } :root:not([data-theme="light"]) .side .logo.dk { display: block; } }
.side .foot p { margin: 2px 0 0; overflow-wrap: anywhere; }
.orgbox > span:last-child { overflow-wrap: anywhere; }
.csw-none p { font-size: .82rem; color: var(--muted); }
.crumb { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; } .crumb > * { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .crumb > [aria-hidden] { flex-shrink: 0; }
.crumb a.crumb-l { text-decoration: none; }
.view { outline: none; }
.bnav a { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 6px 2px; border: 0; background: none; color: var(--muted); font-size: .72rem; cursor: pointer; text-decoration: none; }
.bnav a[aria-current="page"] { color: var(--data-2); }
@container (max-width: 860px) { .bnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
@container (min-width: 861px) { .phone-only { display: none !important; } }

/* Pages */
.page { display: grid; gap: 18px; align-content: start; min-width: 0; }
.page > * { min-width: 0; }
.page.narrow { max-width: 44rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; }
.page-head > .head { min-width: 0; }
.lead, .aside { color: var(--muted); font-size: .92rem; }
.spread { display: flex; gap: 10px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.wrap { flex-wrap: wrap; }
.grid-2 { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
h2.inline { display: inline; margin: 0; }
.card-b > h3 { font-size: .9rem; font-weight: 500; }

/* Buttons: the Workspace class names on the approved button anatomy (.btn / .btn.primary / .btn.small / .btn.danger) */
.btn { color: var(--fg); text-decoration: none; }
.btn-primary { background: var(--graphite); color: var(--s1); border-color: transparent; }
.btn-primary:hover { border-color: transparent; background: color-mix(in srgb, var(--graphite) 88%, var(--data)); }
.btn-small { min-height: 30px; padding: 4px 10px; font-size: .78rem; }
.btn-danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn-danger:hover { border-color: var(--err); background: var(--err-soft); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Status pills: same anatomy as the prototype's .ov-pill */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: 600 .62rem/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.badge-in_progress, .badge-draft, .badge-warn, .badge-awaiting_founder { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.badge-submitted, .badge-under_review, .badge-accepted { color: var(--data-2); background: var(--data-soft); border-color: transparent; }
.badge-completed, .badge-active, .badge-done { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.badge-blocked { color: var(--err); background: var(--err-soft); border-color: transparent; }
.badge-sent { color: var(--fg); }
.ov-pill.not_started { color: var(--muted); }

/* Provenance dots (ENNAI = data, team = ok, pending = hollow) */
.prov { display: inline-flex; gap: 6px; align-items: center; font: 500 .7rem/1.45 var(--mono); letter-spacing: .03em; color: var(--muted); }
.prov::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--data); flex: none; }
.prov-user::before { background: var(--ok); }
.prov-pending::before { background: transparent; border: 1px solid var(--faint); }

/* Forms: the prototype's field anatomy (.fld) on the Workspace classes */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; font-size: .84rem; min-width: 0; }
.field label, .question .legend { font-weight: 500; font-size: .84rem; }
.optional { color: var(--faint); font-weight: 400; }
.input, textarea.input, select.input { font: inherit; font-size: .92rem; color: inherit; background: var(--s1); border: 1px solid var(--line-2); border-radius: 9px; padding: 9px 11px; min-height: 40px; width: 100%; }
textarea.input { min-height: 6rem; resize: vertical; line-height: 1.5; }
.input:focus, .input:focus-visible { outline: none; border-color: var(--data); box-shadow: 0 0 0 3px var(--data-soft); }
.input[aria-invalid="true"] { border-color: var(--err); }
.hint, .counter { color: var(--muted); font-size: .78rem; margin: 0; }
.counter { justify-self: end; font-family: var(--mono); }
.notice { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: .86rem; border: 1px solid transparent; }
.notice-error { color: var(--err); background: var(--err-soft); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.notice-success { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.notice-info { color: var(--fg); background: var(--data-soft); border-color: color-mix(in srgb, var(--data) 25%, transparent); }
.view .form-status:empty { display: none; }
.secret { display: block; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; overflow-wrap: anywhere; user-select: all; font: 400 .82rem/1.5 var(--mono); }
.codes { columns: 2; padding-left: 1.2rem; font-family: var(--mono); font-size: .84rem; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; }
.pw-toggle:hover { color: var(--fg); }
.pw-toggle svg { width: 18px; height: 18px; }

/* Rows and lists */
.rows li + li { border-top: 1px solid var(--line); }
.row-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 2px; color: var(--fg); text-decoration: none; flex-wrap: wrap; }
.row-link:hover .row-name { color: var(--data-2); }
.row-link.static { cursor: default; }
.row-name { font-weight: 500; }
.row-meta { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: .9rem; }
.info dt { font: 500 .62rem/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.info dd { margin: 0; overflow-wrap: anywhere; }

/* Clients list (prototype "Empresas cliente": .dna-item cards) */
.dna-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dna-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); }
.dna-item h3 { font-size: 1rem; font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.dna-item .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.dna-item .acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* Business context (Business Understanding) — two-column domain list in the prototype's DNA card language */
.bu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.bu-row { display: grid; gap: 6px; align-content: start; padding: 14px 0; border-top: 1px solid var(--line); min-width: 0; }
.bu-list > .bu-row:nth-child(-n+2) { border-top: 0; padding-top: 2px; }
.bu-row h3 { margin: 0; font-size: .95rem; font-weight: 500; display: flex; gap: 8px; align-items: center; }
.bu-row h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--data); flex: none; }
.bu-row.empty h3::before { background: transparent; border: 1.5px solid var(--line-2); }
.bu-value { margin: 0; white-space: pre-wrap; font-size: .9rem; overflow-wrap: anywhere; }
.bu-row .btn { justify-self: start; }
.bu-row > .spread { justify-content: flex-start; }
@container (max-width: 760px) { .bu-list { grid-template-columns: minmax(0, 1fr); } .bu-list > .bu-row:nth-child(2) { border-top: 1px solid var(--line); padding-top: 14px; } }

/* Journey (business overview) for 4 real stages */
.jr-s .jr-l .badge { margin-top: 4px; }

/* Lifecycle dots in the prototype's ov-dots language (kept for the map / company cards) */
.lifecycle { display: flex; list-style: none; margin: 0; padding: 0; min-width: 0; }
.lifecycle li { position: relative; flex: 1 1 0; display: grid; gap: 6px; justify-items: start; min-width: 0; }
.lifecycle li::before { content: ""; position: absolute; top: 4px; left: 9px; right: 0; height: 1px; background: var(--line-2); }
.lifecycle li:last-child { flex: 0 0 auto; }
.lifecycle li:last-child::before { display: none; }
.lifecycle li.done::before { background: var(--muted); }
.lifecycle .dot { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--faint); background: var(--s1); }
.lifecycle .done .dot { background: var(--muted); border-color: var(--muted); }
.lifecycle .current .dot { background: var(--data); border-color: var(--data); box-shadow: 0 0 0 3px var(--data-soft); }
.lc-label { color: var(--faint); font: 500 .6rem/1.25 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-right: 6px; }
.lifecycle .current .lc-label { color: var(--fg); }
.lifecycle .done .lc-label { color: var(--muted); }
.lifecycle.is-compact li:not(.current) .lc-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Overview states */
.ov-skel { display: grid; gap: 14px; }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--s2), var(--s3), var(--s2)); background-size: 200% 100%; animation: kw-shimmer 1.4s linear infinite; }
.skel.tall { height: 120px; border-radius: 14px; }
@keyframes kw-shimmer { to { background-position: -200% 0; } }
.ov-error { display: grid; gap: 10px; justify-items: start; }
a.ov-row { text-decoration: none; }
.ov-row .row-t { color: var(--fg); }
.ov-continue .lbl + h3 { margin-top: -6px; }
.ov-caught .ok svg { width: 16px; height: 16px; }
.ov-feed .ic.pending { background: transparent; border: 1px solid var(--faint); }
.pf-pulse .meta { margin: 0; }

/* Intelligence Map */
.map-form { display: grid; gap: 16px; }
.map-status { position: sticky; top: 0; z-index: 4; display: flex; justify-content: space-between; gap: 6px 16px; padding: 9px 14px; background: var(--s1); border: 1px solid var(--line); border-radius: 12px; font-size: .84rem; flex-wrap: wrap; }
.map-status p { margin: 0; }
.save-status { color: var(--muted); min-height: 1.2em; }
.question { border: 0; margin: 0; padding: 14px 0; display: grid; gap: 8px; min-width: 0; }
.question + .question { box-shadow: inset 0 1px 0 var(--line); }
.question legend { padding: 0; float: left; width: 100%; }
.question legend + * { clear: both; }
.question.missing { border-left: 3px solid var(--err); padding-left: 12px; }
.req { color: var(--muted); font-weight: 400; font-size: .78rem; }
.options { display: grid; gap: 6px; }
.option { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--s1); }
.option:hover { border-color: var(--line-2); }
.option:has(input:checked) { border-color: var(--data); background: var(--data-soft); }
.option input { accent-color: var(--data); width: 1.05rem; height: 1.05rem; margin: 0; }
.answers { display: grid; gap: 18px; }
.answers-section h3 { font: 500 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.answers dl { margin: 0; display: grid; gap: 4px; }
.answers dt { font-weight: 500; margin-top: 8px; }
.answers dd { margin: 0; white-space: pre-wrap; }

/* Admin */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { font: inherit; font-size: .86rem; padding: 9px 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--data); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font: 500 .64rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.table tbody tr:last-child td { border-bottom: 0; }
.outbox-item { padding: 12px 0; }

/* Users (WS-02) */
.people { list-style: none; margin: 0; padding: 0; }
.person { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 2px; }
.person + .person { border-top: 1px solid var(--line); }
.person-main { display: grid; gap: 2px; min-width: 0; }
.person-main > * { overflow-wrap: anywhere; }
.person-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mail-preview { display: grid; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.mail-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .86rem; }
.mail-meta dt { color: var(--muted); }
.mail-meta dd { margin: 0; overflow-wrap: anywhere; }
.mail-frame { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 10px; background: #07080b; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .8rem/1.5 var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 8px 0 0; }
.users-history summary { cursor: pointer; list-style: none; }
.users-history summary::-webkit-details-marker { display: none; }
details.totp-off > summary { cursor: pointer; color: var(--data-2); font-size: .86rem; }

/* Account links on phones (the sidebar is collapsed below 860 px) */
.acct { list-style: none; margin: 0; padding: 0; }
.acct li + li { border-top: 1px solid var(--line); }
.acct a, .acct button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 2px; border: 0; background: none; color: var(--fg); font: inherit; text-decoration: none; cursor: pointer; text-align: left; }

@container (max-width: 560px) {
  .info { grid-template-columns: minmax(0, 1fr); } .info dd { margin-bottom: 6px; }
  .btn-small { min-height: 44px; }
  .mail-frame { height: 560px; }
  .dna-item .acts { margin-left: 0; }
  .page-head { align-items: start; }
}
@media (prefers-reduced-motion: no-preference) { .btn, .nav a, .tab { transition: background-color .15s, border-color .15s, color .15s; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Overview helpers (values the prototype set inline) */
.ov-mini-w { max-width: 220px; }
.ov-more { justify-self: start; }
.hub-h .head { min-width: 0; }

.sec-strip.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (max-width: 560px) { .sec-strip.two { grid-template-columns: minmax(0, 1fr); } }

.view .form > .btn, .view .form > .row, .view .card-b > .btn, .view .card-b > a.btn { justify-self: start; }
.users-history > summary { padding: 14px 16px; }
.users-history > summary h2 { font-size: 1rem; font-weight: 500; }
.users-history > :not(summary) { margin: 0 16px 14px; }

/* Client cards: the prototype's grid min (17.5rem) was measured inside the lab frame, 34 px narrower than the browser window
   (16 px lab padding each side + frame border). 18.25rem gives the approved column count at the same window width:
   3 cards at 1440 / 1280, 2 at 1024, 1 on phones. */
.pf-grid { grid-template-columns: repeat(auto-fill, minmax(18.25rem, 1fr)); }

/* Inert navigation entries (design preview): the Impact prototype's convention */
.nav button[aria-disabled="true"] { cursor: default; opacity: .62; }
.nav button[aria-disabled="true"]:hover { background: none; color: var(--muted); }

/* Impact & Results preview host: the prototype's sections are direct children of .view (grid, 18 px gap) in the original */
.ir-host { display: grid; gap: 18px; align-content: start; min-width: 0; }
.ir-host > * { min-width: 0; }
@container (max-width: 860px) { .ir-host { gap: 14px; } }
@container (max-width: 560px) { .view .ir-host .chip { white-space: normal; } }   /* phone layout not reviewed in V0.1 (Agent B): long notices wrap instead of widening the page */
@container (max-width: 560px) { .ac-host .ac-brief .card-h .chip { white-space: normal; height: auto; min-height: 22px; padding-block: 4px; line-height: 1.3; } }   /* action plan card on a phone: a long "Aceptada el … por <name>" chip wraps instead of widening the page */

/* Approved Workspace prototype pages (design preview): the prototype brings its own view padding and detail panel */
.view:has(> .lab-page) { padding: 0; }
.lab-page { gap: 0; }
.lab-page > .banner { margin: 22px 22px 0; }
@container (max-width: 860px) { .lab-page > .banner { margin: 14px 14px 0; } }
.lab-host { display: block; min-width: 0; }


/* =============================================================== Immersive sign-in (founder-approved, R-20261011-09 (c)) — unchanged.
   The generic rules it was built on are kept below, scoped to .immersive, so the sign-in looks exactly as before. */
.immersive { --radius-sm: .375rem; --radius-md: .625rem; --radius-lg: 1rem; --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 40px -24px rgba(0,0,0,.8);
  --s1: #0d0f13; --s2: #12151b; --s3: #1b2129; --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.18); --graphite: #eef1f5;
  --data: #74d6f5; --data-2: #a6e8fb; --data-soft: rgba(116,214,245,.12); --warn: #f2c66d; --warn-soft: rgba(242,198,109,.12); }
.immersive .field { font-size: inherit; }
:where(.immersive) button:not([class*="btn"]):not(.seg) { font: revert; }
.immersive .seg { display: inline-block; border-radius: 0; flex-wrap: nowrap; overflow: visible; }
:where(.immersive) { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.55 "Geist", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
:where(.immersive) h1, :where(.immersive) h2, :where(.immersive) h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 500; letter-spacing: -.012em; }
:where(.immersive) h1 { font-size: 1.6rem; } :where(.immersive) h2 { font-size: 1.1rem; } :where(.immersive) h3 { font-size: 1rem; }
:where(.immersive) p { margin: 0 0 .75rem; }
:where(.immersive) a { color: var(--accent); text-underline-offset: 3px; }
:where(.immersive) a:hover { color: var(--accent-strong); }
:where(.immersive) code, :where(.immersive) .mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: .85em; }
:where(.immersive) :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
:where(.immersive) .seg-group { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
:where(.immersive) .seg { font: 600 .78rem/1 "Geist Mono", monospace; letter-spacing: .06em; padding: .45rem .6rem; min-height: 2rem; background: transparent; color: var(--muted); border: 0; cursor: pointer; }
:where(.immersive) .seg[aria-pressed="true"] { background: var(--accent-soft); color: var(--fg); }
:where(.immersive) .page { display: grid; gap: 1.25rem; }
:where(.immersive) .page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
:where(.immersive) .page-head h1 { margin: 0; }
:where(.immersive) .eyebrow { color: var(--muted); font: 500 .75rem/1.2 "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .35rem; }
:where(.immersive) .lead { color: var(--muted); font-size: 1rem; }
:where(.immersive) .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 1.5rem); box-shadow: var(--shadow); }
:where(.immersive) .card > :last-child { margin-bottom: 0; }
:where(.immersive) .grid-2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
:where(.immersive) .row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
:where(.immersive) .spread { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
:where(.immersive) .muted { color: var(--muted); } :where(.immersive) .small { font-size: .85rem; }
:where(.immersive) .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: .55rem 1rem; font: 600 .92rem/1 "Geist", sans-serif; color: var(--fg); background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; }
:where(.immersive) .btn:hover { border-color: var(--accent); color: var(--fg); }
:where(.immersive) .btn-primary { background: var(--fg); color: var(--bg); border-color: transparent; }
:where(.immersive) .btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); border-color: transparent; }
:where(.immersive) .btn-small { min-height: 2rem; padding: .35rem .7rem; font-size: .85rem; }
:where(.immersive) .btn[disabled] { opacity: .6; cursor: progress; }
:where(.immersive) .badge { display: inline-flex; align-items: center; padding: .2rem .5rem; border-radius: 999px; font: 600 .68rem/1.2 "Geist Mono", monospace; letter-spacing: .06em; border: 1px solid var(--border-strong); color: var(--muted); white-space: nowrap; }
:where(.immersive) .badge-in_progress { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
:where(.immersive) .badge-submitted, :where(.immersive) .badge-under_review { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
:where(.immersive) .badge-completed { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
:where(.immersive) .badge-sent { color: var(--fg); }
:where(.immersive) .badge-draft { color: var(--warn); }
:where(.immersive) .prov { display: inline-flex; gap: .35rem; align-items: center; font-size: .78rem; color: var(--muted); }
:where(.immersive) .prov::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); }
:where(.immersive) .prov-user::before { background: var(--ok); }
:where(.immersive) .form { display: grid; gap: 1rem; }
:where(.immersive) .field { display: grid; gap: .35rem; }
:where(.immersive) .field label, :where(.immersive) .legend { font-weight: 500; font-size: .9rem; }
:where(.immersive) .optional { color: var(--muted); font-weight: 400; }
:where(.immersive) .input, :where(.immersive) textarea.input, :where(.immersive) select.input { width: 100%; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: .6rem .75rem; min-height: 2.6rem; }
:where(.immersive) textarea.input { min-height: 6rem; resize: vertical; line-height: 1.5; }
:where(.immersive) .input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
:where(.immersive) .hint, :where(.immersive) .counter { color: var(--muted); font-size: .8rem; margin: 0; }
:where(.immersive) .counter { justify-self: end; font-family: "Geist Mono", monospace; }
:where(.immersive) .notice { margin: 0; padding: .65rem .8rem; border-radius: var(--radius-md); font-size: .9rem; border: 1px solid transparent; }
:where(.immersive) .notice-error { color: var(--err); background: var(--err-soft); }
:where(.immersive) .notice-success { color: var(--ok); background: var(--ok-soft); }
:where(.immersive) .notice-info { color: var(--fg); background: var(--accent-soft); }
:where(.immersive) .aside { color: var(--muted); font-size: .9rem; margin: 0; }
:where(.immersive) .secret { display: block; padding: .6rem .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-wrap: anywhere; user-select: all; }
:where(.immersive) .codes { columns: 2; padding-left: 1.2rem; }
/* Auth — Immersive sign-in (founder-approved concept 3, design/signin-lab @ 392ae2e). Always dark: the
   ENNAI ink tokens are set on .immersive itself, so forms, buttons and notices inside keep fixed contrast
   whatever the app theme. The form sits on a solid sheet; nothing is blurred behind text. */
.immersive {
  --bg: #07080b; --bg-1: #0d0f13; --bg-2: #12151b;
  --fg: #eef1f5; --muted: #9aa2b1; --faint: #6b7383;
  --border: rgba(255,255,255,.1); --border-strong: rgba(255,255,255,.18);
  --accent: #74d6f5; --accent-strong: #a6e8fb; --accent-soft: rgba(116,214,245,.12); --on-accent: #06222c;
  --ok: #7fdca4; --ok-soft: rgba(127,220,164,.12); --err: #ff9b9b; --err-soft: rgba(255,155,155,.1);
  color-scheme: dark;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--bg); color: var(--fg);
}
.im-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.immersive::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
.im-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 26px 32px; }
.im-logo { display: block; width: 170px; height: auto; }
.im-top .seg-group { border-color: transparent; }
.im-top .seg { background: none; color: var(--faint); min-height: 2.75rem; min-width: 2.75rem; padding: .4rem .5rem; font: 500 .7rem/1 "Geist Mono", monospace; letter-spacing: .08em; }
.im-top .seg[aria-pressed="true"] { background: none; color: var(--fg); }
.im-main { display: grid; place-items: center; padding: 0 20px; outline: none; }
.im-sheet { --halo: 0; width: 100%; max-width: 27rem; padding: 36px 34px; border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 28%), var(--bg-1);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 1px rgba(116,214,245, calc(.04 + var(--halo) * .22)), 0 0 70px -10px rgba(116,214,245, calc(var(--halo) * .16)), 0 40px 90px -50px rgba(0,0,0,.95); }
.im-auth { display: grid; gap: 22px; }
.im-head { display: grid; gap: 10px; }
.im-head h1 { margin: 0; font-weight: 250; font-size: 2.3rem; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.im-lede { margin: 0; color: var(--muted); font-size: .95rem; max-width: 34ch; }
.im-auth .form { gap: 14px; }
.im-auth .field label { font-size: .84rem; }
.im-auth .input { height: 44px; min-height: 44px; padding: 0 12px; border-radius: .55rem; background: rgba(255,255,255,.03); font-size: .95rem; }
.im-auth .input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.im-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.im-forgot { font-size: .82rem; text-decoration: none; }
.im-forgot:hover { text-decoration: underline; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: .4rem; cursor: pointer; }
.pw-toggle:hover { color: var(--fg); }
.pw-toggle svg { width: 18px; height: 18px; }
.im-auth .btn-primary { height: 44px; border-radius: .55rem; font-weight: 500; font-size: .95rem; gap: 10px; }
.im-auth .btn-primary[aria-busy="true"] { cursor: progress; opacity: .85; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.im-auth .notice { font-size: .86rem; border-color: color-mix(in srgb, currentColor 35%, transparent); }
.im-meta { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--muted); }
.im-meta p { margin: 0; }
.im-meta b { color: var(--fg); font-weight: 500; }
.im-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.im-chip { font: 500 .62rem/1 "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 8px; }
.im-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding: 20px; font: 500 .64rem/1.4 "Geist Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.im-signal { display: inline-flex; align-items: center; gap: 8px; }
.im-signal i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (max-width: 44rem) {
  .im-top { padding: 16px 20px; }
  .im-logo { width: 140px; }
  .im-main { padding: 8px 16px 0; align-items: start; }
  .im-sheet { padding: 22px 18px; }
  .im-head h1 { font-size: 1.7rem; }
  .im-foot { gap: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } .im-auth .input { transition: none; } }
@media (prefers-reduced-motion: no-preference) { .im-auth .input { transition: border-color .2s cubic-bezier(.22,.8,.2,1), box-shadow .2s cubic-bezier(.22,.8,.2,1); } }
/* Centro de acción (R-20261017-04): the approved prototype's toast (business-overview.template.html @ e8f9a7b), used by the Action Center host. */
#ac-toast.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; background: var(--graphite); color: var(--s1); padding: 10px 14px; border-radius: 10px; font-size: .84rem; max-width: min(92vw, 34rem); box-shadow: 0 12px 30px -14px rgba(0,0,0,.45); }
#ac-toast[hidden] { display: none; }

/* Design Lab V4 b7a9a20 (R-20261012-10 / R-20261017-06), verbatim, A0-WS-V4-FINAL-20261017: activity mini-grid (265-269), Explore tiles
   (480-483), session rows (574-578), security card foot (582). */
:root { --p0: #eef1f4; --p1: #cfe6ef; --p2: #9ccbdd; --p3: #5ba7c4; --p4: #2b7f9e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p0: #161b22; --p1: #17323d; --p2: #1f5468; --p3: #2f86a6; --p4: #74c8e6; } }
:root[data-theme="dark"] { --p0: #161b22; --p1: #17323d; --p2: #1f5468; --p3: #2f86a6; --p4: #74c8e6; }
.mini rect { stroke: var(--line); stroke-width: .6; }
.mini .pl0 { fill: var(--p0); } .mini .pl1 { fill: var(--p1); } .mini .pl2 { fill: var(--p2); } .mini .pl3 { fill: var(--p3); } .mini .pl4 { fill: var(--p4); }
.ex-grid { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ex { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--s1); cursor: pointer; }
.ex:hover { border-color: var(--data); } .ex:focus-visible { outline: 2px solid var(--data); outline-offset: 2px; }
.ex svg { width: 22px; height: 22px; color: var(--data-2); flex: none; } .ex > span { display: grid; gap: 2px; } .ex b { font-weight: 500; }
.ses-t { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 14px; gap: 12px; align-items: center; width: 100%; min-height: 58px; padding: 10px 16px; border: 0; background: none; color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.ses-t:hover, .ses-t[aria-expanded="true"] { background: var(--s2); }
.ses-t[aria-expanded="true"] .csw-cv { transform: rotate(180deg); }
.ses-ic { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--s2); display: grid; place-items: center; color: var(--graphite); }
.ses-n { min-width: 0; display: grid; } .ses-n b { font-weight: 500; }
.sec-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
@container (max-width: 860px) { .ex-grid { grid-template-columns: minmax(0, 1fr); } }   /* V4 line 684 */
.ses-t.static { cursor: default; } .ses-t.static:hover { background: none; }   /* the current session only: nothing to open */