/* Pixdly design system (stage 12). One stylesheet for /twin, /creator and /admin.
   Loaded LAST on each page (end of <body>) so it refines the page's own rules without removing any of them.
   Tokens → base → shell → components → product-specific refinements. See DESIGN_SYSTEM.md.

   Identity: a deep navy shell, Pixdly blue for what is active, cool laboratory greys for surfaces.
   Two voices: Hanken Grotesk for the interface and data; Newsreader for the sentences in which Pixdly states a
   conclusion ("24 markets potentially affected…"). The one memorable element is the signal path: a chain of nodes
   joined by the chevron of the Pixdly mark, used wherever something flows (a change, a workspace being prepared,
   data moving between systems, the guided roadmap). */

/* ================= 1. Tokens ================= */
:root, :root[data-theme="light"] {
  --paper:#F3F5F9; --surface:#FFFFFF; --surface2:#F1F4F8; --surface3:#E9EDF4;
  --ink:#131B2E; --ink2:#3A4560; --muted:#647089; --rule:#E2E7EF; --rule2:#C9D1DE;
  --signal:#2A4FD6; --signal-t:#EBF0FE; --signal-2:#1C3BAE;
  --track:#11805C; --track-t:#E2F3EB; --watch:#A15F00; --watch-t:#FCF0DC; --risk:#BF3A27; --risk-t:#FBE9E5;
  --est:#8C97AB; --band:#E6EAF1; --neutral-t:#EEF1F5;
  --shell:#0F1729; --shell2:#18233B; --shell-ink:#E8EDF7; --shell-muted:#8C99B5; --shell-rule:rgba(255,255,255,.08);
  --f:"Hanken Grotesk","Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-voice:"Newsreader","Iowan Old Style","Georgia",serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* type scale: 12 · 13 · 14 · 16 · 20 · 28 · 40 */
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:28px; --t-3xl:40px;
  /* spacing scale (4-based) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* radius by hierarchy: controls · inner blocks · sections · sheets */
  --r-ctl:8px; --r-in:10px; --r-sec:16px; --r-sheet:20px;
  /* elevation */
  --e1:0 1px 0 rgba(19,27,46,.04),0 1px 2px rgba(19,27,46,.05);
  --e2:0 1px 0 rgba(19,27,46,.03),0 10px 30px -14px rgba(19,27,46,.18);
  --e3:0 24px 60px -20px rgba(15,23,41,.35);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --paper:#0B1220; --surface:#111A2C; --surface2:#16213A; --surface3:#1C2945;
  --ink:#E7ECF6; --ink2:#BAC5D9; --muted:#8693AD; --rule:#1E2A44; --rule2:#2C3B5C;
  --signal:#8AA6FF; --signal-t:#1A2750; --signal-2:#B4C6FF;
  --track:#5CCB9E; --track-t:#10302A; --watch:#E9B65A; --watch-t:#33270F; --risk:#F08D77; --risk-t:#3A1E19;
  --est:#77849C; --band:#1A2640; --neutral-t:#172238;
  --shell:#070C17; --shell2:#0F1729; --shell-ink:#E7ECF6; --shell-muted:#7F8BA6;
  --e1:0 1px 0 rgba(0,0,0,.3); --e2:0 12px 32px -16px rgba(0,0,0,.6); color-scheme:dark;
}
@media (prefers-color-scheme:dark) { :root[data-theme="auto"] {
  --paper:#0B1220; --surface:#111A2C; --surface2:#16213A; --surface3:#1C2945;
  --ink:#E7ECF6; --ink2:#BAC5D9; --muted:#8693AD; --rule:#1E2A44; --rule2:#2C3B5C;
  --signal:#8AA6FF; --signal-t:#1A2750; --signal-2:#B4C6FF;
  --track:#5CCB9E; --track-t:#10302A; --watch:#E9B65A; --watch-t:#33270F; --risk:#F08D77; --risk-t:#3A1E19;
  --est:#77849C; --band:#1A2640; --neutral-t:#172238;
  --shell:#070C17; --shell2:#0F1729; --shell-ink:#E7ECF6; --shell-muted:#7F8BA6;
  --e1:0 1px 0 rgba(0,0,0,.3); --e2:0 12px 32px -16px rgba(0,0,0,.6); color-scheme:dark; } }

/* ================= 2. Base ================= */
body { font:var(--t-sm)/1.55 var(--f); letter-spacing:-.003em; background:var(--paper); }
h1,h2,h3 { font-family:var(--f); letter-spacing:-.018em; }
h1 { font-size:var(--t-xl); font-weight:650; } h2 { font-size:var(--t-lg); font-weight:620; } h3 { font-size:var(--t-sm); font-weight:620; }
.small { font-size:var(--t-xs); } .tiny { font-size:11.5px; }
::selection { background:var(--signal-t); }
:focus-visible { outline:2px solid var(--signal); outline-offset:2px; border-radius:4px; }
a { text-underline-offset:3px; }
.voice { font-family:var(--f-voice); font-weight:400; letter-spacing:-.005em; }
[hidden] { display:none!important; }
code,.mono { font-family:var(--f-mono); font-size:.92em; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* ================= 3. Shell: /twin ================= */
body.px-twin .app { grid-template-columns:232px 1fr; grid-template-rows:56px 1fr; }
body.px-twin .top { background:var(--surface); border-bottom:1px solid var(--rule); padding:0 20px 0 0; gap:14px; }
body.px-twin .top .brand { align-self:stretch; width:232px; flex:none; padding:0 20px; background:var(--shell); margin:0; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--shell-rule); }
body.px-twin .top .brand .lg-l { display:none!important; } .top .brand .lg-d { display:block!important; }
body.px-twin .top .brand .px-wsid { display:flex; align-items:center; gap:8px; min-width:0; color:var(--shell-ink); font-size:12px; font-weight:600; border-left:1px solid var(--shell-rule); padding-left:10px; }
body.px-twin .top .brand .px-wsid span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96px; }
body.px-twin .search input { border-radius:999px; padding:8px 14px 8px 34px; background:var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647089' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%; border-color:transparent; }
body.px-twin .search input:focus { background-color:var(--surface); border-color:var(--rule2); }
body.px-twin .top-r { gap:10px; }
body.px-twin .top-r .link { font-weight:500; color:var(--ink2); }
body.px-twin .top-r .link:hover { color:var(--signal); }
body.px-twin .top-r .btn { border-radius:999px; }

.rail { background:var(--shell); border-right:0; padding:14px 12px 16px; gap:1px; color:var(--shell-ink); scrollbar-width:thin; scrollbar-color:var(--shell2) transparent; }
.rail button { color:#C6CFE2; padding:7px 10px; border-radius:8px; font-weight:500; gap:10px; justify-content:flex-start; position:relative; }
.rail button .px-ico { color:var(--shell-muted); flex:none; }
.rail button .cnt { margin-left:auto; color:var(--shell-muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.rail button:hover { background:rgba(255,255,255,.06); color:#fff; }
.rail button:hover .px-ico { color:#fff; }
.rail button[aria-current="page"] { background:rgba(138,166,255,.14); color:#fff; }
.rail button[aria-current="page"] .px-ico { color:#9DB4FF; }
.rail button[aria-current="page"]::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:#7E9BFF; }
.rail button:focus-visible { outline:2px solid #9DB4FF; outline-offset:0; }
.rail button[disabled] { opacity:.35!important; }
.rail .gd-grp { margin-bottom:10px; }
.rail .gd-grph { color:var(--shell-muted)!important; font-size:11.5px!important; font-weight:600!important; letter-spacing:.02em!important; text-transform:none!important; padding:8px 10px 4px!important; }
.rail .gd-grph:hover { color:#fff!important; background:transparent!important; }
.rail .gd-grph .px-chev { transition:transform .18s var(--ease); }
.rail .gd-grph[aria-expanded="false"] .px-chev { transform:rotate(-90deg); }
.rail .role { color:var(--shell-muted); border-top:1px solid var(--shell-rule); margin-top:auto; padding:14px 10px 0; }
.rail .role select { background:var(--shell2); border-color:var(--shell-rule); color:var(--shell-ink); border-radius:8px; }
.rail .role .link { color:#9DB4FF; }
.rail .role .tag { background:rgba(233,182,90,.14); color:#F2C979; border-color:transparent; }
.rail .sep { background:var(--shell-rule); }
.main { background:var(--paper); }
.page { padding:28px 36px 96px; gap:20px; }

/* ================= 4. Components ================= */
/* panels: sections carry hierarchy; they are not all the same card */
.panel { border-radius:var(--r-sec); border-color:var(--rule); box-shadow:var(--e1); }
.panel > header { padding:14px 18px; border-bottom-color:var(--rule); }
.panel > header h2 { font-size:var(--t-md); }
.panel .bd { padding:16px 18px; }
/* buttons */
.btn { border-radius:var(--r-ctl); padding:7px 14px; border-color:var(--rule2); background:var(--surface); font-weight:550; transition:background .15s, border-color .15s, color .15s, transform .1s; display:inline-flex; align-items:center; gap:6px; justify-content:center; }
.btn:hover { border-color:var(--ink2); background:var(--surface2); }
.btn:active { transform:translateY(1px); }
.btn.pri { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.pri:hover { background:var(--signal); border-color:var(--signal); }
:root[data-theme="dark"] .btn.pri { background:var(--signal); border-color:var(--signal); color:#0B1220; }
.btn.sm { padding:4px 11px; font-size:12.5px; border-radius:7px; }
.btn.ghost { border-color:transparent; background:transparent; }
.btn.ghost:hover { background:var(--surface2); }
.link { font-weight:550; }
.why { border-radius:999px; padding:0 8px; border-color:color-mix(in srgb,var(--signal) 40%,transparent); }
/* tags carry text; the dot is a second cue, never the only one */
.tag { border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:550; border-color:var(--rule); background:var(--neutral-t); color:var(--ink2); }
.tag.track,.tag.watch,.tag.risk,.tag.sig { display:inline-flex; align-items:center; gap:5px; }
.tag.track::before,.tag.watch::before,.tag.risk::before,.tag.sig::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.seg { border-radius:var(--r-ctl); background:var(--surface2); border-color:var(--rule); padding:2px; gap:2px; }
.seg button { border:0!important; border-radius:6px; padding:5px 12px; }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--e1); }
/* inputs */
input[type=text],input[type=number],input[type=date],input[type=email],input[type=url],input[type=search],select,textarea { border-radius:var(--r-ctl); border-color:var(--rule2); padding:7px 10px; transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--signal); box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 18%,transparent); }
/* tables: comparable rows only */
table.t th,.t th { font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.01em; }
.t td { border-bottom-color:var(--rule); }
.t tr.click:hover td { background:var(--surface2); }
/* notes */
.note { border-radius:var(--r-in); border-left-width:3px; }
/* drawer = contextual side panel */
.drawer { top:56px; border-left:1px solid var(--rule); box-shadow:var(--e3); border-radius:var(--r-sheet) 0 0 var(--r-sheet); width:440px; animation:pxSlide .22s var(--ease); }
.drawer > header { padding:18px 20px 14px; }
.drawer > header h2 { font-size:var(--t-lg); }
.drawer .bd { padding:16px 20px 24px; }
@keyframes pxSlide { from { transform:translateX(24px); opacity:0; } to { transform:none; opacity:1; } }
.toast { border-radius:999px; padding:10px 18px; box-shadow:var(--e3); background:var(--shell); color:#fff; }
.empty { padding:36px 24px; }
/* change header */
.chead { background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:saturate(1.4) blur(8px); padding:16px 36px 0; }
.lens button { padding:10px 12px; border-bottom-width:2px; font-weight:550; }
.lens button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--signal); }

/* ---------- icons ---------- */
.px-ico { display:inline-block; width:16px; height:16px; flex:none; vertical-align:-3px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.px-ico.lg { width:20px; height:20px; } .px-ico.xl { width:24px; height:24px; }

/* ---------- status mark: icon + word, never colour alone ---------- */
.px-st { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:550; color:var(--ink2); white-space:nowrap; }
.px-st .px-dotic { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--neutral-t); color:var(--muted); flex:none; }
.px-st .px-dotic .px-ico { width:12px; height:12px; stroke-width:2.4; }
.px-st.done .px-dotic,.px-st.complete .px-dotic { background:var(--track); color:#fff; }
.px-st.attention .px-dotic,.px-st.review .px-dotic { background:var(--watch-t); color:var(--watch); box-shadow:inset 0 0 0 1.5px var(--watch); }
.px-st.blocked .px-dotic,.px-st.failed .px-dotic { background:var(--risk-t); color:var(--risk); box-shadow:inset 0 0 0 1.5px var(--risk); }
.px-st.now .px-dotic,.px-st.active .px-dotic,.px-st.recommended .px-dotic { background:var(--signal); color:#fff; }
.px-st.todo .px-dotic,.px-st.optional .px-dotic,.px-st.notstarted .px-dotic { background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--rule2); }

/* ---------- confidence: three bars and a word ---------- */
.px-conf { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink2); white-space:nowrap; }
.px-conf i { display:inline-flex; gap:2px; align-items:flex-end; }
.px-conf i b { width:4px; border-radius:1px; background:var(--rule2); display:block; }
.px-conf i b:nth-child(1) { height:6px; } .px-conf i b:nth-child(2) { height:9px; } .px-conf i b:nth-child(3) { height:12px; }
.px-conf.High i b { background:var(--track); } .px-conf.Medium i b:nth-child(-n+2) { background:var(--watch); } .px-conf.Low i b:nth-child(1) { background:var(--risk); }

/* ---------- provenance label ---------- */
.px-prov { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; letter-spacing:.01em; padding:2px 8px; border-radius:6px; border:1px solid var(--rule2); color:var(--ink2); background:var(--surface); white-space:nowrap; }
.px-prov .px-ico { width:12px; height:12px; }
.px-prov.verified { color:var(--track); border-color:color-mix(in srgb,var(--track) 45%,transparent); background:var(--track-t); }
.px-prov.customer,.px-prov.imported { color:var(--signal); border-color:color-mix(in srgb,var(--signal) 40%,transparent); background:var(--signal-t); }
.px-prov.public { color:var(--signal-2); border-style:dashed; }
.px-prov.derived,.px-prov.modelled,.px-prov.estimated { color:var(--ink2); border-style:dashed; }
.px-prov.ai,.px-prov.synthetic,.px-prov.illustrative { color:var(--watch); border-color:color-mix(in srgb,var(--watch) 45%,transparent); background:var(--watch-t); border-style:dashed; }
.px-prov.unknown { color:var(--muted); }

/* ---------- company identity ---------- */
.px-logo { --sz:32px; width:var(--sz); height:var(--sz); border-radius:calc(var(--sz) * .28); flex:none; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); position:relative; }
.px-logo img { width:78%; height:78%; object-fit:contain; display:block; }
.px-logo.ini { color:#fff; font-weight:700; font-size:calc(var(--sz) * .38); letter-spacing:-.02em; box-shadow:none; background:var(--hue,#3A4D8F); }
.px-logo.sm { --sz:22px; } .px-logo.lg { --sz:48px; } .px-logo.xl { --sz:72px; }
.px-ident { display:flex; align-items:center; gap:12px; min-width:0; }
.px-ident .nm { font-weight:650; font-size:var(--t-md); line-height:1.2; }
.px-ident .sub { color:var(--muted); font-size:12px; }

/* ---------- product identity ---------- */
.px-prod { display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 12px; align-items:center; min-width:0; }
.px-prod .pi { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--signal-t),var(--surface2)); color:var(--signal); grid-row:span 2; }
.px-prod .pi .px-ico { width:22px; height:22px; }
.px-prod .nm { font-weight:650; font-size:var(--t-md); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-prod .sp { color:var(--muted); font-size:12px; }
.px-prod .facts { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink2); margin-top:6px; }
.px-prod .facts b { font-weight:650; color:var(--ink); }

/* ---------- recommendation (Accept · Change · Ignore) ---------- */
.px-rec { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 14px; align-items:center; padding:12px 14px; border-radius:var(--r-in); background:linear-gradient(90deg,var(--signal-t),color-mix(in srgb,var(--signal-t) 30%,var(--surface)) 70%); border:1px solid color-mix(in srgb,var(--signal) 22%,transparent); }
.px-rec .ic { width:30px; height:30px; border-radius:9px; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--signal); grid-row:span 2; box-shadow:var(--e1); }
.px-rec .l { font-size:11.5px; color:var(--muted); font-weight:550; }
.px-rec .v { font-weight:650; font-size:var(--t-md); }
.px-rec .why { all:unset; grid-column:2; font-size:12px; color:var(--ink2); }
.px-rec .acts { grid-row:1/span 2; grid-column:3; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.px-rec.accepted { background:var(--track-t); border-color:color-mix(in srgb,var(--track) 30%,transparent); }
.px-rec.accepted .ic { color:var(--track); }
.px-rec.ignored { opacity:.6; background:var(--surface2); }

/* ---------- tag selector (fast selection) ---------- */
.px-tags { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.px-tags .px-tg { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule2); font-size:12.5px; font-weight:550; color:var(--ink2); transition:background .15s, box-shadow .15s, color .15s; user-select:none; }
.px-tags .px-tg:hover { box-shadow:inset 0 0 0 1px var(--ink2); color:var(--ink); }
.px-tags .px-tg[aria-pressed="true"] { background:var(--ink); color:#fff; box-shadow:none; }
:root[data-theme="dark"] .px-tags .px-tg[aria-pressed="true"] { background:var(--signal); color:#0B1220; }
.px-tags .px-tg:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.px-tags .px-tg .rc { font-size:10.5px; font-weight:700; color:var(--signal); }
.px-tags .px-tg[aria-pressed="true"] .rc { color:#B9C9FF; }
.px-tags .px-tg .px-ico { width:13px; height:13px; }
.px-tags input[type=search] { border-radius:999px; padding:5px 12px; font-size:12.5px; width:150px; }
.px-field { display:flex; flex-direction:column; gap:8px; }
.px-field > .lb { font-size:12px; font-weight:600; color:var(--ink2); display:flex; gap:8px; align-items:baseline; }
.px-field > .lb .muted { font-weight:400; }

/* ---------- the signal path: a chain of nodes joined by the Pixdly chevron ---------- */
.px-path { list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:0; position:relative; }
.px-path > li { position:relative; min-width:0; display:flex; }
.px-path > li:not(:last-child)::after { content:""; position:absolute; top:22px; left:calc(50% + 22px); right:calc(-50% + 22px); height:2px; background:linear-gradient(90deg,var(--line-a,var(--rule2)),var(--line-b,var(--rule2))); border-radius:2px; }
.px-path > li:not(:last-child)::before { content:""; position:absolute; top:18px; right:calc(-50% + 14px); width:8px; height:8px; border-top:2px solid var(--line-b,var(--rule2)); border-right:2px solid var(--line-b,var(--rule2)); transform:rotate(45deg); z-index:1; }
.px-path > li.done:not(:last-child) { --line-a:var(--track); }
.px-path > li.done + li { --dummy:1; }
.px-path > li.done:not(:last-child)::after { background:var(--track); }
.px-path > li.done:not(:last-child)::before { border-color:var(--track); }
.px-path .node { all:unset; cursor:pointer; box-sizing:border-box; width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:0 6px 8px; border-radius:12px; position:relative; }
.px-path .node:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.px-path .orb { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--rule2),var(--e1); color:var(--muted); position:relative; z-index:2; transition:transform .18s var(--ease), box-shadow .18s; }
.px-path .orb .px-ico { width:20px; height:20px; }
.px-path .orb .badge { position:absolute; right:-6px; bottom:-6px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); box-shadow:0 0 0 2px var(--surface); }
.px-path .orb .badge .px-ico { width:11px; height:11px; stroke-width:3; }
.px-path li.done .orb { color:var(--track); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--track) 55%,transparent),var(--e1); background:var(--track-t); }
.px-path li.done .badge { background:var(--track); color:#fff; }
.px-path li.attention .orb { color:var(--watch); box-shadow:inset 0 0 0 1.5px var(--watch),var(--e1); background:var(--watch-t); }
.px-path li.attention .badge { background:var(--watch); color:#fff; }
.px-path li.blocked .orb { color:var(--risk); box-shadow:inset 0 0 0 1.5px var(--risk),var(--e1); background:var(--risk-t); }
.px-path li.blocked .badge { background:var(--risk); color:#fff; }
.px-path li.now .orb { color:#fff; background:var(--signal); box-shadow:0 0 0 4px var(--signal-t),var(--e2); }
.px-path li.now .badge { background:var(--surface); color:var(--signal); }
.px-path li.todo .orb,.px-path li.optional .orb { background:var(--surface); }
.px-path li.todo .badge,.px-path li.optional .badge { display:none; }
.px-path .node:hover .orb { transform:translateY(-2px); }
.px-path .node[aria-pressed="true"] .orb { box-shadow:0 0 0 3px var(--signal),var(--e2); }
.px-path .lb { font-weight:650; font-size:12.5px; color:var(--ink); margin-top:6px; line-height:1.2; }
.px-path .mt { font-size:12px; color:var(--ink2); line-height:1.3; overflow-wrap:anywhere; }
.px-path .st { font-size:11px; color:var(--muted); }
.px-path.compact .orb { width:30px; height:30px; border-radius:10px; } .px-path.compact .orb .px-ico { width:15px; height:15px; }
.px-path.compact > li:not(:last-child)::after { top:14px; left:calc(50% + 16px); right:calc(-50% + 16px); }
.px-path.compact > li:not(:last-child)::before { top:10px; right:calc(-50% + 10px); width:6px; height:6px; }
.px-path.compact .lb { font-size:11px; font-weight:550; color:var(--ink2); margin-top:4px; }
.px-path.compact .orb .badge { width:13px; height:13px; right:-4px; bottom:-4px; } .px-path.compact .orb .badge .px-ico { width:8px; height:8px; }
/* one orchestrated moment: on first paint a pulse travels the path once */
.px-path.run > li:not(:last-child)::after { background-size:200% 100%; }
.px-path .pulse { position:absolute; top:21px; left:0; height:4px; width:40px; border-radius:4px; background:linear-gradient(90deg,transparent,var(--signal),transparent); opacity:0; z-index:1; pointer-events:none; }
.px-path.run .pulse { animation:pxTravel 1.6s .25s var(--ease) 1 both; }
@keyframes pxTravel { 0% { left:4%; opacity:0; } 10% { opacity:.9; } 90% { opacity:.9; } 100% { left:92%; opacity:0; } }
.px-path li.now .orb::after { content:""; position:absolute; inset:-4px; border-radius:17px; border:2px solid var(--signal); opacity:0; animation:pxRing 2.6s ease-out infinite; }
@keyframes pxRing { 0% { opacity:.55; transform:scale(.92); } 70%,100% { opacity:0; transform:scale(1.18); } }

/* vertical variant (roadmaps, pipelines, data flow on narrow screens) */
.px-vpath { list-style:none; margin:0; padding:0; position:relative; }
.px-vpath > li { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:4px 14px; padding:12px 0; align-items:start; }
.px-vpath > li:not(:last-child)::after { content:""; position:absolute; left:17px; top:46px; bottom:-10px; width:2px; background:var(--rule2); border-radius:2px; }
.px-vpath > li.done:not(:last-child)::after { background:var(--track); }
.px-vpath > li.active:not(:last-child)::after,.px-vpath > li.run:not(:last-child)::after { background:linear-gradient(var(--signal),var(--rule2)); }
.px-vpath .orb { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--rule2); color:var(--muted); position:relative; z-index:1; }
.px-vpath .orb .px-ico { width:17px; height:17px; }
.px-vpath li.done .orb { background:var(--track); color:#fff; box-shadow:none; }
.px-vpath li.attention .orb,.px-vpath li.review .orb,.px-vpath li.partial .orb { background:var(--watch-t); color:var(--watch); box-shadow:inset 0 0 0 1.5px var(--watch); }
.px-vpath li.blocked .orb,.px-vpath li.failed .orb { background:var(--risk-t); color:var(--risk); box-shadow:inset 0 0 0 1.5px var(--risk); }
.px-vpath li.now .orb,.px-vpath li.active .orb,.px-vpath li.recommended .orb { background:var(--signal); color:#fff; box-shadow:0 0 0 4px var(--signal-t); }
.px-vpath li.run .orb { background:var(--signal-t); color:var(--signal); box-shadow:inset 0 0 0 1.5px var(--signal); }
.px-vpath li.run .orb::after { content:""; position:absolute; inset:-3px; border-radius:13px; border:2px solid transparent; border-top-color:var(--signal); animation:gdspin .9s linear infinite; }
.px-vpath li.skipped .orb,.px-vpath li.na .orb { background:var(--surface2); color:var(--muted); box-shadow:inset 0 0 0 1.5px var(--rule); }
.px-vpath li.skipped .t,.px-vpath li.na .t { color:var(--muted); }
.px-vpath .t { font-weight:650; font-size:var(--t-md); line-height:1.3; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.px-vpath .d { color:var(--ink2); font-size:12.5px; margin-top:2px; max-width:76ch; }
.px-vpath .meta { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--muted); margin-top:6px; }
.px-vpath .acts { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; padding-top:2px; }
.px-vpath details { grid-column:2/-1; }
.px-vpath details > summary { cursor:pointer; color:var(--signal); font-size:12px; font-weight:550; width:fit-content; }
.px-vpath details > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px; padding:10px 0 2px; font-size:12.5px; }
.px-vpath details dt { font-size:11.5px; color:var(--muted); font-weight:600; } .px-vpath details dd { margin:0; color:var(--ink2); }

/* ---------- side panel content (stage panel) ---------- */
.px-sp { display:flex; flex-direction:column; gap:18px; }
.px-sp .hero { display:flex; gap:14px; align-items:center; }
.px-sp .hero .orb { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--signal-t); color:var(--signal); flex:none; }
.px-sp .hero .orb .px-ico { width:22px; height:22px; }
.px-sp .metric { font-size:var(--t-xl); font-weight:650; letter-spacing:-.02em; line-height:1.2; }
.px-sp section { display:flex; flex-direction:column; gap:6px; }
.px-sp h3 { font-size:11.5px; font-weight:650; color:var(--muted); letter-spacing:.02em; }
.px-sp ul.ev,.px-sp ul.miss { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.px-sp ul.ev li { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; font-size:12.5px; color:var(--ink2); align-items:start; }
.px-sp ul.ev li .px-ico { width:14px; height:14px; margin-top:2px; color:var(--track); }
.px-sp ul.miss li { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; font-size:12.5px; color:var(--ink2); padding:8px 10px; border-radius:8px; background:var(--watch-t); }
.px-sp ul.miss li .px-ico { width:14px; height:14px; margin-top:2px; color:var(--watch); }
.px-sp .act { background:var(--surface2); border-radius:var(--r-in); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.px-sp .act b { font-size:var(--t-md); }

/* ---------- consequence flow of a change (the Change Twin hero) ---------- */
.px-twinhero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; align-items:start; }
.px-twinhero .who { display:flex; gap:14px; align-items:center; }
.px-twinhero .kind { font-size:12.5px; color:var(--muted); font-weight:550; }
.px-twinhero h1 { font-size:var(--t-2xl); letter-spacing:-.025em; line-height:1.15; }
.px-twinhero .gd-lead,.gd-summary .gd-lead { font-family:var(--f-voice); font-size:21px; line-height:1.42; color:var(--ink); max-width:62ch; letter-spacing:-.006em; }
.px-twinhero .gd-lead b,.gd-summary .gd-lead b { font-weight:600; }
.px-flowbox { background:var(--surface); border-radius:var(--r-sheet); padding:24px 20px 14px; box-shadow:var(--e2); position:relative; overflow:hidden; }
.px-flowbox::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 160px at 12% 0%,color-mix(in srgb,var(--signal-t) 70%,transparent),transparent 70%); pointer-events:none; }
.px-flowbox > header { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; margin:0 6px 18px; position:relative; }
.px-flowbox > header h2 { font-size:var(--t-md); }
.px-flowbox .px-path { position:relative; }
.px-flowscroll { overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.px-flowscroll .px-path { min-width:980px; }
.px-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); align-items:center; }
.px-legend .px-st { font-size:11.5px; font-weight:500; color:var(--muted); }
.px-legend .px-st .px-dotic { width:16px; height:16px; } .px-legend .px-st .px-dotic .px-ico { width:10px; height:10px; }

/* ---------- home ---------- */
.gd-home { max-width:1240px; gap:28px; }
.px-welcome { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:end; }
.px-welcome .hi { display:flex; gap:16px; align-items:center; }
.px-welcome .hello { color:var(--muted); font-weight:550; font-size:var(--t-sm); }
.px-welcome h1 { font-family:var(--f-voice); font-weight:400; font-size:36px; line-height:1.12; letter-spacing:-.02em; margin-top:4px; max-width:24ch; }
.px-welcome .ctx { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--muted); margin-top:8px; }
.px-welcome .ctx span { display:inline-flex; gap:5px; align-items:center; }
.px-port { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:var(--shell); color:var(--shell-ink); border-radius:var(--r-sheet); overflow:hidden; box-shadow:var(--e2); position:relative; }
.px-port::after { content:""; position:absolute; inset:0; background:radial-gradient(520px 240px at 100% 0%,rgba(126,155,255,.22),transparent 70%); pointer-events:none; }
.px-port .lhs { padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
.px-port .lhs h2 { font-size:12.5px; color:var(--shell-muted); font-weight:600; }
.px-port .figs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
.px-port .gd-stat { all:unset; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:0!important; border:0!important; }
.px-port .gd-stat .v { font-size:34px; font-weight:650; letter-spacing:-.03em; line-height:1.05; color:#fff; font-variant-numeric:tabular-nums; }
.px-port .gd-stat .l { font-size:12.5px; color:#C6CFE2; }
.px-port .gd-stat .tiny { color:var(--shell-muted)!important; }
.px-port .gd-stat:hover .l { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.px-port .gd-stat:focus-visible { outline:2px solid #9DB4FF; outline-offset:4px; border-radius:6px; }
.px-port .rhs { padding:22px 24px; background:rgba(255,255,255,.04); border-left:1px solid var(--shell-rule); display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.px-port .rhs .gd-eyebrow { color:#9DB4FF!important; }
.px-port .rhs h2 { font-family:var(--f-voice); font-weight:400; font-size:24px; line-height:1.25; color:#fff; letter-spacing:-.01em; }
.px-port .rhs p { color:#C6CFE2; font-size:13px; }
.px-port .rhs .btn.pri { background:#fff; color:var(--shell); border-color:#fff; align-self:flex-start; }
.px-port .rhs .btn.pri:hover { background:#DCE5FF; border-color:#DCE5FF; }
.px-port .rhs .btn:not(.pri) { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.px-port .rhs .why { color:#C6CFE2; }
.px-port .rhs .why b { color:#fff; font-weight:600; }
.gd-eyebrow { text-transform:none!important; letter-spacing:0!important; font-size:12.5px!important; font-weight:600!important; color:var(--signal)!important; }
.gd-hd h2 { font-size:var(--t-lg); }
.gd-continue,.gd-next { border-radius:var(--r-sec)!important; border-color:var(--rule)!important; box-shadow:var(--e1); padding:20px 22px!important; }
.gd-att ol { border-top:0!important; display:flex; flex-direction:column; gap:8px; }
.gd-att li { background:var(--surface); border:1px solid var(--rule)!important; border-radius:var(--r-in); padding:14px 16px!important; box-shadow:var(--e1); }
.gd-att .n { background:var(--watch-t)!important; color:var(--watch)!important; border-radius:8px!important; }
.gd-changes { border-top:0!important; display:flex; flex-direction:column; gap:8px; }
.gd-changes li { border-bottom:0!important; }
.gd-changes button { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-in); padding:12px 16px!important; box-shadow:var(--e1); transition:border-color .15s, box-shadow .15s; }
.gd-changes button:hover { border-color:var(--rule2); box-shadow:var(--e2); }
.gd-changes .pg,.px-meter { height:6px; border-radius:6px; background:var(--band); overflow:hidden; display:block; }
.gd-changes .pg i,.px-meter i { display:block; height:100%; background:linear-gradient(90deg,var(--signal),var(--track)); border-radius:6px; }

/* readiness map: datasets with a state in words */
.px-ready { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:10px; }
.px-ready .ds { all:unset; box-sizing:border-box; cursor:pointer; border-radius:var(--r-in); padding:12px 14px; background:var(--surface); border:1px solid var(--rule); display:flex; flex-direction:column; gap:6px; min-width:0; transition:border-color .15s, box-shadow .15s; }
.px-ready .ds:hover { border-color:var(--rule2); box-shadow:var(--e1); }
.px-ready .ds:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.px-ready .ds .k { display:flex; justify-content:space-between; gap:6px; align-items:center; font-size:12px; color:var(--muted); font-weight:600; }
.px-ready .ds .v { font-weight:650; font-size:var(--t-md); line-height:1.25; }
.px-ready .ds .b { font-size:11.5px; color:var(--muted); }
.px-ready .ds .bar { display:flex; gap:3px; } .px-ready .ds .bar i { flex:1; height:4px; border-radius:3px; background:var(--band); }
.px-ready .ds.strong .bar i { background:var(--track); }
.px-ready .ds.partial .bar i:nth-child(-n+2) { background:var(--watch); }
.px-ready .ds.limited .bar i:nth-child(1) { background:var(--watch); }
.px-ready .ds.needed { border-style:dashed; }
.px-ready .ds.needed .bar i:nth-child(1) { background:var(--signal); }

/* guided roadmap */
.px-road { background:var(--surface); border-radius:var(--r-sheet); box-shadow:var(--e2); padding:22px 24px; display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:24px 36px; }
.px-road .intro h2 { font-family:var(--f-voice); font-weight:400; font-size:26px; line-height:1.2; letter-spacing:-.015em; }
.px-road .intro p { color:var(--ink2); margin-top:8px; }
.px-road .count { display:flex; gap:12px; align-items:center; margin-top:16px; }
.px-road .count .px-meter { flex:1; height:8px; }
.px-road .knows { margin-top:16px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink2); }
.px-road .knows div { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; }
.px-road .knows .px-ico { width:14px; height:14px; margin-top:2px; }
.px-road .knows .k .px-ico { color:var(--track); } .px-road .knows .m .px-ico { color:var(--watch); }
.px-road .px-vpath > li { padding:10px 0; }
.px-road .px-vpath .t { font-size:13.5px; }
.px-road .more { margin-top:4px; }

/* resume card */
.px-resume { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 18px; align-items:center; padding:18px 22px; border-radius:var(--r-sec); background:var(--surface); box-shadow:var(--e2); border:1px solid color-mix(in srgb,var(--signal) 25%,var(--rule)); }
.px-resume .orb { width:44px; height:44px; border-radius:13px; background:var(--signal); color:#fff; display:flex; align-items:center; justify-content:center; grid-row:span 2; }
.px-resume .orb .px-ico { width:20px; height:20px; }
.px-resume .l { font-size:12.5px; color:var(--muted); font-weight:550; }
.px-resume .v { font-size:var(--t-lg); font-weight:650; }
.px-resume .y { grid-column:2; font-size:12.5px; color:var(--ink2); }
.px-resume .acts { grid-column:3; grid-row:1/span 2; display:flex; gap:8px; }

/* data flow (integrations) */
.px-dflow { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; position:relative; }
.px-dflow .n { position:relative; padding:14px 18px 14px 14px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.px-dflow .n:not(:last-child)::after { content:""; position:absolute; right:2px; top:28px; width:9px; height:9px; border-top:2px solid var(--rule2); border-right:2px solid var(--rule2); transform:rotate(45deg); }
.px-dflow .n .h { display:flex; gap:8px; align-items:center; font-weight:650; font-size:13px; }
.px-dflow .n .h .px-ico { color:var(--muted); }
.px-dflow .n .s { font-size:11.5px; color:var(--muted); }
.px-dflow .n.ok .h .px-ico { color:var(--track); } .px-dflow .n.warn .h .px-ico { color:var(--watch); } .px-dflow .n.bad .h .px-ico { color:var(--risk); } .px-dflow .n.run .h .px-ico { color:var(--signal); }

/* entity graph */
.px-graph { width:100%; height:auto; display:block; }
.px-graph .lnk { fill:none; stroke:var(--rule2); stroke-width:1.4; }
.px-graph .lnk.verified { stroke:var(--track); stroke-width:1.8; }
.px-graph .lnk.public { stroke:var(--signal); stroke-dasharray:5 4; }
.px-graph .lnk.derived { stroke:var(--est); stroke-dasharray:2 4; }
.px-graph .lnk.conflict { stroke:var(--risk); stroke-width:2; }
.px-graph .nd { cursor:pointer; }
.px-graph .nd circle { fill:var(--surface); stroke:var(--rule2); stroke-width:1.5; transition:stroke .15s; }
.px-graph .nd.company circle { fill:var(--shell); stroke:var(--shell); }
.px-graph .nd.product circle { stroke:var(--signal); } .px-graph .nd.site circle { stroke:var(--watch); } .px-graph .nd.market circle { stroke:var(--track); }
.px-graph .nd:hover circle,.px-graph .nd:focus circle,.px-graph .nd.sel circle { stroke:var(--ink); stroke-width:2.5; }
.px-graph .nd:focus { outline:none; }
.px-graph .nd text { font:600 11px var(--f); fill:var(--ink2); }
.px-graph .nd.company text.in { fill:#fff; font-size:12px; }
.px-graph .nd use,.px-graph .nd .gi { color:var(--muted); }
.px-graph .dim { opacity:.15; }

/* skeleton: an honest loading state with the shape of what is coming */
.px-skel { background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%); background-size:400% 100%; animation:pxShim 1.4s ease infinite; border-radius:8px; }
@keyframes pxShim { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

/* teaching empty state */
.px-teach { display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; padding:18px 20px; border-radius:var(--r-sec); background:var(--surface); border:1px dashed var(--rule2); }
.px-teach .orb { width:40px; height:40px; border-radius:12px; background:var(--surface2); color:var(--muted); display:flex; align-items:center; justify-content:center; grid-row:span 4; }
.px-teach b { font-size:var(--t-md); }
.px-teach p { color:var(--ink2); font-size:12.5px; }
.px-teach .row { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.gd-teach { border-radius:var(--r-in)!important; }

/* sections without boxes: a heading, a line of context, content */
.px-sec { display:flex; flex-direction:column; gap:12px; min-width:0; }
.px-sec > header { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; }
.px-sec > header h2 { font-size:var(--t-lg); }
.px-sec > header p { color:var(--muted); font-size:12.5px; }
.px-cols { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px; align-items:start; }

/* journey (stage 10) restyled into the signal path language */
.gd-journey li .gd-ic { width:22px!important; height:22px!important; }
.gd-ic { border-radius:7px!important; }
.gd-ic .px-ico { width:12px; height:12px; stroke-width:2.6; }
.gd-impact { border-radius:var(--r-sec)!important; box-shadow:var(--e1); }
.gd-dim .v { letter-spacing:-.02em; }
.gd-scen > div { border-radius:var(--r-in)!important; }
.gd-delay .bar i { border-radius:4px 4px 0 0; background:linear-gradient(var(--signal),color-mix(in srgb,var(--signal) 55%,var(--surface)))!important; }
.gd-links button { border-radius:0; }
.ring { background:conic-gradient(var(--track) calc(var(--p)*1%),var(--band) 0)!important; }


/* ---------- stage 13: what matters most ---------- */
.px-matters { background:var(--surface); border-radius:var(--r-sheet); padding:22px 24px; box-shadow:var(--e1); }
.px-mm, .px-cg ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.px-mm li, .px-cg li { display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; font-size:13px; align-items:start; }
.px-mm .px-ico { color:var(--signal); margin-top:2px; } .px-cg li.ok .px-ico { color:var(--track); margin-top:2px; } .px-cg li.miss .px-ico { color:var(--watch); margin-top:2px; }
.px-cg { margin-bottom:12px; } .px-cg .px-h { font-size:12px; color:var(--muted); margin-bottom:6px; }
.px-chain { margin:6px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; }
.px-chain li span:first-child { margin-right:6px; } .px-chain .px-prov { vertical-align:1px; } .px-chain .tiny { display:block; }
/* ---------- stage 12 home refinements ---------- */
.px-back { flex:none; border-radius:999px!important; }
.px-back .px-ico { width:15px; height:15px; }
.px-steplink { all:unset; cursor:pointer; font:inherit; color:inherit; border-radius:4px; }
.px-steplink:hover { color:var(--signal); text-decoration:underline; text-underline-offset:3px; }
.px-steplink:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.px-road .knows .px-steplink { text-decoration:underline; text-decoration-color:var(--rule2); text-underline-offset:3px; }
.px-dfwrap .px-dflow { padding:8px 12px 14px; }
.px-dflow .s .px-ico { width:12px; height:12px; vertical-align:-2px; }
.px-path .txt { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.px-port .gd-stats { border:0!important; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 24px; }
.px-port .gd-stats .gd-stat { padding:0!important; border:0!important; }
.px-port .gd-next,.px-port .rhs { border:0!important; border-radius:0!important; box-shadow:none!important; padding:24px 26px!important; background:rgba(255,255,255,.04)!important; }
.px-port .pxwhy { color:#C6CFE2; font-size:13px; }
.px-port .pxwhy b { color:#fff; font-weight:600; }
.px-port .gd-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.px-welcome h1 { max-width:30ch; }
.px-chgs button.px-chg { display:flex!important; flex-direction:column; gap:14px; align-items:stretch; padding:16px 18px!important; }
.px-chg .hd { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:16px; align-items:center; }
.px-chg .hd .nm { display:flex; flex-direction:column; gap:3px; align-items:flex-start; min-width:0; }
.px-chg .hd .nm b { font-size:var(--t-md); }
.px-chg .px-path { max-width:none; }
.px-chg .ft { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.px-valstats { border-top:1px solid var(--rule)!important; border-bottom:1px solid var(--rule)!important; }
.px-twinhero .pid .px-prod .nm { font-size:var(--t-lg); }
@media (max-width:760px) { .px-chg .hd { grid-template-columns:1fr; } }

/* ================= 5. Shell: /creator ================= */
body.px-creator .top { background:var(--shell); height:56px; padding:0 20px; border-bottom:1px solid var(--shell-rule); }
body.px-creator .top b { font-size:14px; letter-spacing:-.01em; }
body.px-creator .top .px-badge { font-size:11px; font-weight:700; color:#0F1729; background:#F2C979; border-radius:6px; padding:2px 7px; }
body.px-creator .app { grid-template-columns:232px 1fr; min-height:calc(100vh - 56px); }
body.px-creator nav { background:var(--shell); border-right:0; padding:8px 12px 16px; }
body.px-creator nav .grp { color:var(--shell-muted); font-size:11.5px; font-weight:600; padding:16px 10px 4px; letter-spacing:.02em; }
body.px-creator nav button,body.px-creator nav a.ext { color:#C6CFE2; border-radius:8px; padding:7px 10px; position:relative; align-items:center; }
body.px-creator nav button > span:first-child { display:inline-flex; gap:10px; align-items:center; }
body.px-creator nav button .px-ico { color:var(--shell-muted); }
body.px-creator nav button:hover,body.px-creator nav a.ext:hover { background:rgba(255,255,255,.06); color:#fff; }
body.px-creator nav button[aria-current="page"] { background:rgba(138,166,255,.14); color:#fff; }
body.px-creator nav button[aria-current="page"] .px-ico { color:#9DB4FF; }
body.px-creator nav button[aria-current="page"]::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:#7E9BFF; }
body.px-creator nav a.ext { color:var(--shell-muted); font-size:12.5px; }
body.px-creator nav .n { background:rgba(233,182,90,.18); color:#F2C979; }
body.px-creator main { padding:28px 36px 96px; gap:20px; }
body.px-creator .panel { border-radius:var(--r-sec); box-shadow:var(--e1); }
body.px-creator .cr-tabs button[aria-selected="true"] { color:var(--ink); border-color:var(--signal); }
body.px-creator .cr-chip { border-radius:999px; padding:4px 12px; }
body.px-creator .cr-chip:has(input:checked) { background:var(--ink); border-color:var(--ink); color:#fff; }
body.px-creator .cr-drawer { border-radius:var(--r-sheet) 0 0 var(--r-sheet); box-shadow:var(--e3); }
body.px-creator .hl .v { letter-spacing:-.02em; }

/* studio */
.px-studio { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start; }
.px-studio .controls { display:flex; flex-direction:column; gap:18px; background:var(--surface); border-radius:var(--r-sheet); padding:22px 24px; box-shadow:var(--e2); }
.px-studio .controls h2 { font-family:var(--f-voice); font-weight:400; font-size:26px; letter-spacing:-.015em; }
.px-studio .launch { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--rule); }
.px-studio .launch .btn.pri { padding:11px 20px; font-size:14px; border-radius:10px; }
.px-studio .side { display:flex; flex-direction:column; gap:14px; position:sticky; top:16px; }
.px-studio .runs { background:var(--shell); color:var(--shell-ink); border-radius:var(--r-sheet); padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.px-studio .runs h3 { color:var(--shell-muted); font-size:12px; }
.px-studio .runs .r { all:unset; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 10px; align-items:center; padding:8px; border-radius:10px; }
.px-studio .runs .r:hover,.px-studio .runs .r[aria-current="true"] { background:rgba(255,255,255,.07); }
.px-studio .runs .r .nm { font-weight:600; font-size:13px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-studio .runs .r .s { grid-column:2; font-size:11.5px; color:var(--shell-muted); }
.px-studio .runs .r .px-logo { grid-row:span 2; }
.px-gen { background:var(--surface); border-radius:var(--r-sheet); box-shadow:var(--e2); padding:22px 24px; display:flex; flex-direction:column; gap:14px; }
.px-gen > header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 16px; align-items:center; }
.px-gen > header h2 { font-size:var(--t-xl); }
.px-gen .px-vpath > li { padding:9px 0; }
.px-gen .px-vpath .t { font-size:13.5px; }
.px-url { display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:12.5px; padding:4px 10px; border-radius:8px; background:var(--surface2); border:1px solid var(--rule); color:var(--ink); }
.px-mode { display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--neutral-t); color:var(--ink2); }
.px-mode.creator_only { background:var(--surface3); } .px-mode.internal_preview { background:var(--signal-t); color:var(--signal); } .px-mode.invited { background:var(--watch-t); color:var(--watch); } .px-mode.active,.px-mode.pilot { background:var(--track-t); color:var(--track); } .px-mode.archived { color:var(--muted); }

/* ================= 6. Responsive ================= */
@media (max-width:1100px) {
  .px-studio,.px-cols,.px-road,.px-port { grid-template-columns:1fr; }
  .px-port .rhs { border-left:0; border-top:1px solid var(--shell-rule); }
  .px-studio .side { position:static; }
}
@media (max-width:760px) {
  body.px-twin .app { grid-template-rows:56px auto 1fr; }
  body.px-twin .top { padding:0 10px 0 0; }
  body.px-twin .top .brand { width:auto; padding:0 12px; }
  body.px-twin .top .brand .px-wsid { display:none; }
  .rail { padding:8px 10px; }
  .rail button[aria-current="page"]::before { display:none; }
  .rail .gd-grp { flex-direction:row; margin-bottom:0; }
  .page { padding:18px 16px 80px; }
  .chead { padding:12px 16px 0; }
  .px-welcome { grid-template-columns:1fr; }
  .px-welcome h1 { font-size:28px; }
  .px-port .figs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-port .gd-stat .v { font-size:28px; }
  .px-twinhero { grid-template-columns:1fr; }
  .px-twinhero .gd-lead,.gd-summary .gd-lead { font-size:18px; }
  .px-resume { grid-template-columns:auto minmax(0,1fr); }
  .px-resume .acts { grid-column:1/-1; grid-row:auto; }
  .px-rec { grid-template-columns:auto minmax(0,1fr); }
  .px-rec .acts { grid-column:1/-1; grid-row:auto; justify-content:flex-start; }
  .px-vpath > li { grid-template-columns:36px minmax(0,1fr); }
  .px-vpath .acts { grid-column:2; justify-content:flex-start; }
  .px-vpath details > div { grid-template-columns:1fr; }
  .drawer { width:100vw; border-radius:0; }
  body.px-creator main { padding:18px 14px 80px; }
  body.px-creator nav button[aria-current="page"]::before { display:none; }
  .px-gen > header { grid-template-columns:auto minmax(0,1fr); }
  .px-gen > header > :last-child { grid-column:1/-1; }
  /* the flow becomes a vertical path on a phone: same nodes, read top to bottom */
  .px-flowscroll .px-path { min-width:0; grid-auto-flow:row; grid-auto-columns:auto; gap:2px; }
  .px-flowscroll .px-path > li::after,.px-flowscroll .px-path > li::before { display:none; }
  .px-flowscroll .px-path .node { flex-direction:row; text-align:left; align-items:center; gap:12px; padding:6px 4px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; }
  .px-flowscroll .px-path .node .lb { margin:0; }
  .px-flowscroll .px-path .node .txt { display:flex; flex-direction:column; }
  .px-path .pulse { display:none; }
}
@media print { .rail,.top,.px-path .pulse { display:none!important; } .px-port,.px-flowbox,.px-road { box-shadow:none; } }
@media (max-width:800px) {
  body.px-creator .app { grid-template-columns:minmax(0,1fr); }
  body.px-creator nav { flex-direction:row; overflow-x:auto; padding:8px 10px; }
  body.px-creator nav .grp { display:none; }
}

/* ================= 7. Phone pass ================= */
/* Long lists and passages fold behind "Show more" (px-mobile.js); these two classes are its whole vocabulary. */
.px-hid { display:none!important; }
.px-more { list-style:none; display:block; }
tr.px-more td { padding:6px 10px!important; border:0!important; background:transparent!important; }
.px-morebtn,button.px-morebtn.px-morebtn { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin:8px 0 2px; padding:7px 14px; min-height:36px; border-radius:999px; border:1px solid var(--rule2); background:var(--surface); color:var(--signal); font-weight:600; font-size:13px; }
.px-morebtn.px-morebtn { display:inline-flex!important; flex-direction:row!important; width:auto!important; }
.px-morebtn::after { content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.px-morebtn[aria-expanded="true"]::after { transform:translateY(2px) rotate(-135deg); }
.px-morebtn:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }
.px-moretxt { margin-top:4px; padding:4px 12px; min-height:30px; font-size:12.5px; }
.px-clamp { display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; }
.px-menubtn { display:none!important; }
.px-navscrim { display:none; }
.px-railx { display:none; }
.px-cheadtgl { display:none; }

/* One column on a phone. The desktop shell rule above (232px rail column) out-ranks the generic .app rule, so it is
   restated here with more weight — without this, the whole product rendered inside a 232px strip. */
@media (max-width:760px) {
  html,body { height:auto; min-height:100%; overflow-x:hidden; }
  body.px-twin { -webkit-text-size-adjust:100%; }
  /* the page scrolls, not an inner box: momentum scrolling, the address bar tucks away, no scroll traps */
  body.px-twin .app { display:block; height:auto; min-height:100vh; min-height:100dvh; }
  body.px-twin .main { overflow:visible; min-height:calc(100dvh - 56px); }
  body.px-twin .top { position:sticky; top:0; z-index:40; height:56px; padding:0 8px 0 0; gap:6px; overflow:visible; }
  body.px-twin .top .brand { width:auto; padding:0 12px; }
  body.px-twin .top-r { margin-left:auto; gap:6px; min-width:0; flex:0 1 auto; justify-content:flex-end; overflow:hidden; }
  body.px-twin .top-r #themeBtn,body.px-twin .top-r a.link,body.px-twin .top-r #fresh,body.px-twin .top-r .btn .muted { display:none!important; }
  body.px-twin .top-r .btn { padding:6px 10px; min-height:36px; font-size:12.5px; }
  body.px-twin .top-r .demo { font-size:10px; padding:2px 5px; letter-spacing:0; flex:none; white-space:nowrap; }
  body.px-twin .top .px-back { flex:none; width:36px; min-height:36px; padding:0; justify-content:center; display:inline-flex; align-items:center; }
  body.px-twin .top .px-back[hidden] { display:none!important; }
  body.px-twin .top .px-back span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  body.px-twin .top .brand img { height:22px; }
  /* the bell and the menu become icons; their names stay for screen readers */
  body.px-twin #bellBtn { font-size:0; gap:0; width:38px; padding:0; justify-content:center; display:inline-flex; align-items:center; position:relative; }
  body.px-twin #bellBtn::before { content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat; }
  body.px-twin #bellBtn #bellN { font-size:10px; position:absolute; top:-4px; right:-4px; padding:0 5px; line-height:16px; min-width:16px; border-radius:999px; }
  body.px-twin .px-menubtn .px-menulbl { display:none; }
  body.px-twin .px-menubtn { width:38px; padding:0!important; justify-content:center; }
  body.px-twin .px-menubtn[hidden] { display:none!important; }
  body.px-twin .px-menubtn:not([hidden]) { display:inline-flex!important; align-items:center; gap:7px; flex:none; }
  .px-burger { display:inline-flex; flex-direction:column; gap:3px; width:14px; }
  .px-burger i { display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .18s, opacity .18s; }
  body.px-navopen .px-burger i:nth-child(1) { transform:translateY(5px) rotate(45deg); }
  body.px-navopen .px-burger i:nth-child(2) { opacity:0; }
  body.px-navopen .px-burger i:nth-child(3) { transform:translateY(-5px) rotate(-45deg); }

  /* navigation: a sheet under the top bar, opened by Menu */
  body.px-twin .rail { display:none; position:fixed; z-index:39; top:56px; left:0; right:0; bottom:0; flex-direction:column; flex-wrap:nowrap; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:10px 14px calc(24px + env(safe-area-inset-bottom,0px)); border:0; gap:2px; }
  body.px-twin.px-navopen .rail { display:flex; }
  body.px-navopen { overflow:hidden; }
  body.px-twin .rail .gd-grp { flex-direction:column; margin:0 0 8px; }
  body.px-twin .rail button { box-sizing:border-box; white-space:normal; padding:10px 12px; font-size:15px; min-height:44px; height:auto; flex:none; display:flex; flex-direction:row; align-items:center; line-height:1.3; }
  body.px-twin .rail .gd-grph { box-sizing:border-box; min-height:36px; padding:10px 12px 4px!important; font-size:12px!important; }
  body.px-twin .rail .sep { display:block; }
  body.px-twin .rail .role { display:block; padding:14px 12px 0; margin-top:8px; }
  body.px-twin .rail .role select { min-height:44px; font-size:15px; }
  body.px-twin .rail .px-railx { display:block; padding:6px 0 0; }
  body.px-twin .rail button[aria-current="page"]::before { display:block; left:-4px; }

  /* page rhythm */
  body.px-twin .page { padding:16px 14px 72px; gap:14px; max-width:100%; }
  body.px-twin .phead { align-items:flex-start; gap:10px; }
  body.px-twin .phead > * { min-width:0; }
  body.px-twin .chead { position:static; padding:12px 14px 0; }
  .panel > header { padding:12px 14px; }
  .panel .bd { padding:12px 14px; }
  body.px-twin .grid,body.px-twin .split,body.px-twin .g2,body.px-twin .g3,body.px-twin .twin-wrap { grid-template-columns:minmax(0,1fr)!important; }
  /* nothing escapes the screen: long words wrap, media and tables shrink or scroll in their own box */
  .main,.drawer { overflow-wrap:break-word; word-break:normal; }
  .main a,.main .mono,.main code { overflow-wrap:anywhere; }
  .main img,.main svg:not(.px-ico),.main canvas,.main video { max-width:100%; height:auto; }
  .main table { max-width:100%; }
  .main pre { white-space:pre-wrap; }
  .main .btn,.drawer .btn { white-space:normal; text-align:center; }
  .main label.f,.main .f { min-width:0; max-width:100%; }
  .main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.main select,.main textarea,.drawer input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.drawer select,.drawer textarea { max-width:100%; min-width:0; font-size:16px; } /* 16px: iOS does not zoom into the field */
  .main textarea,.drawer textarea { width:100%; }
  .main [style*="grid-template-columns"],.drawer [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr)!important; }
  .main [style*="white-space:nowrap"] { white-space:normal!important; }
  /* tab and segment rows: one line that scrolls sideways, never words split into syllables */
  .seg,.main [role="tablist"],.main .tabs,.main .lenses,.main .lens,.main .px-tabs,.main .gd-tabs { max-width:100%; overflow-x:auto; flex-wrap:nowrap!important; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .seg::-webkit-scrollbar,.main [role="tablist"]::-webkit-scrollbar,.main .tabs::-webkit-scrollbar,.main .lenses::-webkit-scrollbar,.main .lens::-webkit-scrollbar { display:none; }
  .seg > *,.main [role="tablist"] > *,.main .tabs > *,.main .lenses > *,.main .lens > * { flex:none; white-space:nowrap; }
  /* tap targets */
  .main .btn,.drawer .btn { min-height:38px; }
  .main .btn.sm,.drawer .btn.sm { min-height:34px; }
  /* the mini progress strip on a change card: icons only, the names are in each step's label */
  .px-path.compact .lb { display:none!important; }
  .px-path.compact { gap:2px; }
  /* the full consequence path reads as a list: icon, then text, left-aligned and tight */
  .px-flowscroll .px-path .node { justify-items:start; padding:4px 2px!important; }
  .px-flowscroll .px-path .node .txt { text-align:left; align-items:flex-start; }
  .px-flowscroll .px-path .node .orb { width:40px; height:40px; }
  /* label → value tables stack */
  table.px-kvt,table.px-kvt tbody,table.px-kvt tr,table.px-kvt th,table.px-kvt td { display:block; width:auto!important; text-align:left!important; }
  table.px-kvt thead { display:none; }
  table.px-kvt tr { padding:8px 0; border-bottom:1px solid var(--rule); }
  table.px-kvt tr:last-child { border-bottom:0; }
  table.px-kvt th,table.px-kvt td { border:0!important; padding:0!important; }
  table.px-kvt tr > :first-child { font-size:12px; color:var(--muted); font-weight:500; margin-bottom:2px; }
  table.px-kvt tr.px-more { padding:0; border:0; }
  /* rows of fields wrap rather than squeeze */
  .main .row,.main .gd-row,.main .f-row,.drawer .row { flex-wrap:wrap; }
  .main [style*="display:flex"]:has(> label.f),.main [style*="display:flex"]:has(> .f) { flex-wrap:wrap!important; }
  .main [style*="display:flex"] > label.f { flex:1 1 140px!important; min-width:0!important; }
  .main label.f > input,.main label.f > select,.main label.f > textarea,.drawer label.f > input,.drawer label.f > select { width:100%!important; }
  .main [style*="display:flex"]:has(> label.f) > .btn,.main [style*="display:flex"]:has(> label.f) > button.btn { flex:1 1 100%; min-height:42px; }
  /* change header: the title and data badge stay; the rest folds behind "Details" */
  .chead .px-cheadtgl { display:inline-flex; }
  .chead:not(.px-open) .r1 > :not(h1):not(.tag.watch):not(.px-cheadtgl):not(.gd-kind) { display:none!important; }
  .chead:not(.px-open) .r2 { display:none!important; }
  .chead .r1 { gap:8px 10px; }
  /* sideways rows hint that there is more to the right */
  .chead .lens,.main [role="tablist"],.seg { -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); padding-right:24px; }
  /* the impact chain reads top to bottom on a phone: step name left, value right */
  .main .bd:has(> .sc[data-lens]) { flex-direction:column; overflow:visible!important; gap:4px!important; }
  .main .bd:has(> .sc[data-lens]) > span[aria-hidden] { display:none; }
  .main .bd > .sc[data-lens] { flex-direction:row!important; min-width:0!important; min-height:0!important; width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:12px; text-align:left; padding:10px 12px; }
  .main .bd > .sc[data-lens] > :last-child { text-align:right; }
  .px-morebtn { white-space:nowrap; }
  .px-cheadtgl { all:unset; cursor:pointer; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--signal); padding:4px 10px; border-radius:999px; border:1px solid var(--rule2); }
  .px-cheadtgl::after { content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
  .px-cheadtgl[aria-expanded="true"]::after { transform:translateY(1px) rotate(-135deg); }
  /* tables: cells wrap so the last column is not cut off; truly wide tables scroll inside their panel */
  .main td,.main th { white-space:normal!important; }
  .main td .link,.main td .btn { white-space:nowrap; }
  .main .panel:has(> table),.main .bd:has(> table),.main .panel:has(> .bd > table) { overflow-x:auto; }
  /* drawers and the copilot are full-screen sheets */
  .drawer,.drawer.copilot { width:100vw!important; max-width:100vw; left:0; right:0; border-radius:0; }
  .toast { left:12px!important; right:12px!important; transform:none!important; max-width:none; bottom:calc(12px + env(safe-area-inset-bottom,0px))!important; }
}
@media (max-width:760px) {
  .px-navscrim { display:block; position:fixed; inset:56px 0 0; z-index:38; background:rgba(8,14,26,.45); }
  .px-navscrim[hidden] { display:none; }
}
/* creator and admin consoles on a phone: fields do not trigger iOS zoom, long words wrap */
@media (max-width:760px) {
  body:not(.px-twin) main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),body:not(.px-twin) main select,body:not(.px-twin) main textarea { font-size:16px; max-width:100%; }
  body:not(.px-twin) main { overflow-wrap:break-word; }
}