/* Patchnet AI Advisor workspace. One stylesheet, one layer, in reading order: tokens, reset,
   type, header, band, layout grid, thread column, turns, decision row, card shell, fields,
   options, bar and pills, platform tiles, report card, engagement card, progress rail, brief,
   dialogs, dock, start page, plan pages, footer, phone, motion, reduced motion.
   Display type is IBM Plex Sans; body and UI text is the system stack. */

/* Tokens: a single light-dark block. The appearance switch sets color-scheme on the document and the app. */
#pn-setup{
  --bg:#FFFFFF;--bg-1:#F7F7F5;--bg-2:#EFEEEB;--bg-elev:#FFFFFF;
  --line:#E7E6E2;--line-2:#CFCCC4;
  --text:#262626;--text-2:#565656;--text-3:#6b6b6b;
  --accent:#3DA8DC;--accent-ink:#1F6B95;--accent-deep:#1F7FA8;--accent-muted:#1f6b95;
  --accent-hot:#2A8AB8;--accent-bright:#6FC1E8;
  --accent-soft:#e8f4fa;--accent-edge:rgba(61,168,220,.32);
  --gold:#D97757;--bad-ink:#BD291F;--bad-soft:#FFF7F6;
  --display:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --shadow-sm:0 1px 1px rgba(15,12,8,.03),0 2px 4px -2px rgba(15,12,8,.03),0 4px 8px -4px rgba(15,12,8,.02);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(15,12,8,.04),0 1px 1px rgba(15,12,8,.03);
  --btn-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,12,8,.05);
  --toast-shadow:0 10px 30px -10px rgba(15,12,8,.35),0 2px 8px -3px rgba(15,12,8,.2);
  --chrome-shadow:0 1px 2px rgba(15,12,8,.04),0 8px 24px -16px rgba(15,12,8,.18);
  --band-shadow:0 6px 20px -14px rgba(15,12,8,.25);
  --dialog-shadow:0 30px 120px rgba(0,0,0,.28);
  --focus-ring-cta:0 0 0 2px var(--bg),0 0 0 4px var(--accent-ink);
  --focus-ring-field:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent);
  /* Chrome geometry: the header inset, the header, the gap and the band as one number the
     thread's scroll offsets read. The ResizeObservers republish it in pixels at run time. */
  --header-h:56px;--chrome-inset:16px;--chrome-gap:8px;
  --chrome-h:calc(var(--chrome-inset) + var(--header-h) + var(--chrome-gap) + var(--band-h,0px));
  --dock-inset:14px;--dock-clearance:calc(var(--dock-h,96px) + var(--dock-inset) + var(--kb,0px) + env(safe-area-inset-bottom) + 32px);
  --action-height:38px;--action-small:32px;--r-xl:20px;
  /* The thread and the rail read as one composition: 680 of reading measure, a gap, a rail that
     never outgrows its content, centred together rather than pushed to opposite edges. */
  --flow-width:1240px;--progress-width:clamp(320px,25vw,360px);--flow-gap:56px;--flow-edge:max(32px,calc((100vw - var(--flow-width))/2 + 32px));
  /* Motion: one family of curves and five durations; nothing outside this set. */
  --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-expo:cubic-bezier(.22,1,.36,1);
  --ease-settle:cubic-bezier(.32,.72,0,1);--ease-select:cubic-bezier(.3,1.28,.36,1);
  --m-press:120ms;--m-ui:140ms;--m-depth:220ms;--m-draw:260ms;--m-enter:320ms;--m-struct:380ms;--m-pop:420ms;
  /* The Patchnet 3x3 mark, drawn once and reused as the advisor's author cue and the report mark. */
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mark-3x3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='%23262626'%3E%3Crect width='6.33' height='6.33' rx='1'/%3E%3Crect x='15.67' width='6.33' height='6.33' rx='1'/%3E%3Crect y='15.67' width='6.33' height='6.33' rx='1'/%3E%3Crect x='15.67' y='15.67' width='6.33' height='6.33' rx='1'/%3E%3C/g%3E%3Cg fill='%233da8dc'%3E%3Crect x='7.83' width='6.33' height='6.33' rx='1'/%3E%3Crect y='7.83' width='6.33' height='6.33' rx='1'/%3E%3Crect x='15.67' y='7.83' width='6.33' height='6.33' rx='1'/%3E%3Crect x='7.83' y='15.67' width='6.33' height='6.33' rx='1'/%3E%3C/g%3E%3Crect x='7.83' y='7.83' width='6.33' height='6.33' rx='1' fill='%23d97757'/%3E%3C/svg%3E");
  min-height:100dvh;font:14px/1.55 var(--ui);color:var(--text);background:var(--bg);
}
#pn-setup[data-appearance=light]{color-scheme:light}

/* Reset and shared control behaviour. */
/* The page itself follows the same appearance so overscroll and scrollbars match. */
html,body{margin:0;min-height:100%;color-scheme:light;background:#fff}
html:has(#pn-setup[data-appearance=light]),body:has(#pn-setup[data-appearance=light]){color-scheme:light;background:#fff}
html{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#b4b4b466 transparent}
html:has(#pn-setup){scroll-padding-top:var(--advisor-scroll-top,148px);scroll-padding-bottom:var(--advisor-scroll-bottom,150px)}
html:has(#pn-setup dialog[open]){overflow:hidden}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{border-radius:10px;background:#9b9b9b55}
[hidden]{display:none!important}
#pn-setup *{box-sizing:border-box}
#pn-setup button,#pn-setup input,#pn-setup textarea,#pn-setup select{font:inherit}
#pn-setup button{cursor:pointer;color:inherit}
#pn-setup button:disabled{opacity:.5}
/* Cursors say what a control does: a hand on anything that acts, the arrow when it cannot,
   and the progress cursor for as long as a long action runs. */
#pn-setup :is(summary,label.check-field,label.engagement-option,label.engagement-contact){cursor:pointer}
#pn-setup :disabled,#pn-setup label:has(>input:disabled){cursor:default}
#pn-setup [data-working]{cursor:progress}
#pn-setup h1,#pn-setup h2,#pn-setup h3,#pn-setup h4,#pn-setup p{margin:0}
#pn-setup a{color:var(--accent-ink)}
#pn-setup img{max-width:100%}
#pn-setup input[type=checkbox],#pn-setup input[type=radio]{accent-color:var(--accent-ink)}
#pn-setup input::placeholder,#pn-setup textarea::placeholder{color:var(--text-3);opacity:.85}
#pn-setup button:focus-visible,#pn-setup a:focus-visible,#pn-setup input:focus-visible,#pn-setup textarea:focus-visible,#pn-setup select:focus-visible,#pn-setup summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
#pn-setup h1:focus,#pn-setup :is(.module,.guided-question)>*>h2:focus,#pn-setup :is(.module,.guided-question)>h2:focus{outline:none}
body[data-input=keyboard] #pn-setup h1:focus-visible,body[data-input=keyboard] #pn-setup :is(.module,.guided-question) h2:focus-visible{outline:2px solid var(--accent-ink);outline-offset:4px}
#pn-setup .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#pn-setup ::selection{background:var(--accent-soft);color:var(--text)}
/* Registered so button gradients interpolate instead of snapping. */
@property --btn-from{syntax:"<color>";inherits:false;initial-value:transparent}
@property --btn-to{syntax:"<color>";inherits:false;initial-value:transparent}

/* Type: Plex for headings, system stack for everything else. */
#pn-setup h1{font:400 clamp(28px,3vw,40px)/1.15 var(--display);letter-spacing:-1.2px}
#pn-setup h2{font:500 17px/1.35 var(--display);letter-spacing:-.2px}
#pn-setup h3{font:500 15px/1.4 var(--display);letter-spacing:-.15px}
#pn-setup h4{font:500 13px/1.45 var(--display)}
#pn-setup .pn-sub{margin-top:8px;color:var(--text-2);font-size:14px;line-height:1.7}
#pn-setup .lede{max-width:62ch;margin-top:16px;font-size:15px;line-height:1.75}
#pn-setup .pn-small{color:var(--text-3);font:12px/1.6 var(--ui)}
#pn-setup .pn-link{position:relative;padding:0;border:0;background:none;color:var(--accent-ink);font:400 12px/1.5 var(--ui);text-align:left;text-underline-offset:3px;transition:color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .pn-link:after{content:"";position:absolute;inset:-6px -4px}
/* A link changes ink on hover; only a link inside running prose also draws its underline. */
#pn-setup .pn-link:hover:not(:disabled){color:var(--text)}
#pn-setup :is(p,li,.hint,.quiet-line,.pn-sub) .pn-link:hover:not(:disabled){color:var(--accent-ink);text-decoration:underline}
#pn-setup .pn-link:active:not(:disabled){scale:.98;transition-duration:0s}

/* Header: one quiet floating row. Brand lockup left, appearance and account right. */
/* The chrome stays floating, while a solid ground keeps scrolled text out of its gaps. */
#pn-setup:before{content:"";position:fixed;inset:0 0 auto;height:var(--chrome-h);z-index:21;background:var(--bg);pointer-events:none}
#pn-setup .pn-shell{display:block;min-height:100dvh;padding-top:calc(var(--chrome-h) - var(--band-h,0px))}
#pn-setup .advisor-header{position:fixed;top:var(--chrome-inset);left:var(--chrome-inset);right:var(--chrome-inset);z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--header-h);margin:0;padding:8px 16px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-lg);background:color-mix(in srgb,var(--bg-elev) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:var(--chrome-shadow)}
#pn-setup .brand-home{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:var(--text);font-family:var(--ui);transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .brand-mark{width:20px;height:20px;flex-shrink:0}
#pn-setup .brand-mark rect{fill:#262626}
#pn-setup .brand-mark rect:nth-child(even){fill:#3da8dc}
#pn-setup .brand-mark rect:nth-child(5){fill:#d97757}
#pn-setup .brand-name{font:700 17px/1 Inter,var(--ui);letter-spacing:-.028em}
#pn-setup .brand-ai{margin-left:-6px;font:700 17px/1 Inter,var(--ui);letter-spacing:.005em;background:radial-gradient(ellipse at 26% 16%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 48%),linear-gradient(145deg,var(--accent) 0%,var(--accent-deep) 52%,var(--accent-muted) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent-ink)}
#pn-setup .brand-product{margin-left:2px;color:var(--text-2);font:400 13px/1 var(--ui);letter-spacing:-.2px;white-space:nowrap}
/* The intro page wears the site's header: one full-width frosted bar, the wordmark left, the site's
   lowercase nav pill and the advisor's own controls right. Every other screen keeps the floating row. */
#pn-setup .site-nav{display:none}
#pn-setup[data-phase=start]{--header-h:60px;--chrome-inset:0px;--chrome-gap:0px}
#pn-setup[data-phase=start] .advisor-header{top:0;left:0;right:0;justify-content:flex-start;gap:10px;min-height:60px;padding:0 max(var(--page-gutter,32px),calc((100% - var(--flow-width)) / 2 + var(--page-gutter,32px)));border:0;border-bottom:1px solid rgba(60,50,40,.08);border-radius:0;background:rgba(255,255,255,.88);box-shadow:0 1px 0 rgba(60,50,40,.04),0 6px 18px -12px rgba(60,50,40,.12)}
#pn-setup[data-phase=start] .brand-home{margin-right:auto}
#pn-setup[data-phase=start] .site-nav{position:relative;display:inline-flex;align-items:center;gap:2px;height:38px;padding:0 4px;border:1px solid var(--line);border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg-elev) 70%,transparent);box-shadow:0 1px 2px rgba(15,12,8,.04);font:500 12px/1 Inter,var(--ui);letter-spacing:.01em;text-transform:lowercase}
#pn-setup .site-nav a{position:relative;z-index:1;padding:7px 13px;border-radius:var(--r-pill);color:var(--text-2);text-decoration:none;transition:color 200ms var(--ease),transform 140ms var(--ease)}
#pn-setup .site-nav a:active{transform:scale(.95)}
#pn-setup .site-nav a:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup .site-nav-marker{position:absolute;top:4px;bottom:4px;left:0;z-index:0;width:0;opacity:0;pointer-events:none;border-radius:var(--r-pill);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transform:translateX(0);transition:transform .42s cubic-bezier(.34,1.16,.5,1),width .42s cubic-bezier(.34,1.16,.5,1),opacity .24s ease}
@media(max-width:940px){#pn-setup[data-phase=start] .site-nav{display:none}}
#pn-setup .header-actions{display:flex;align-items:center;gap:8px}
#pn-setup .pn-person{display:flex;align-items:center;gap:4px;flex-direction:row-reverse}
#pn-setup .person-main{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .person-text{display:none}
#pn-setup .pn-avatar{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:var(--bg-1);color:var(--text-2);font:600 10px/1 var(--ui)}
#pn-setup .icon-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .icon-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#pn-setup :is(.brand-home,.person-main,.icon-button):active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup :is(.brand-home,.person-main,#appearance,.icon-button):focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup #appearance .glyph-sun,#pn-setup #appearance .glyph-moon{grid-area:1/1;display:block;width:15px;height:15px;opacity:0;scale:.25;filter:blur(4px);transition:opacity var(--m-enter) var(--ease-out),scale var(--m-enter) var(--ease-out),filter var(--m-enter) var(--ease-out)}
#pn-setup #appearance .glyph-moon{fill:currentColor;stroke:none}
#pn-setup #appearance[data-mode=light] .glyph-sun,#pn-setup #appearance[data-mode=dark] .glyph-moon{opacity:1;scale:1;filter:none}

/* Band: the painted ground carries into the working screen as one slim line under the header. */
#pn-setup .band{position:sticky;top:calc(var(--chrome-h) - var(--band-h,0px));z-index:22;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:44px;margin:0 var(--chrome-inset);padding:0 20px;border-radius:var(--r-lg);background:#1a1815;color:#fff;transition:box-shadow var(--m-depth) var(--ease)}
/* The band never changes size on scroll: its height feeds the chrome measure that the rail, the
   thread and every scroll offset read, so a fold there would move the whole page. Only its shadow deepens. */
#pn-setup .advisor-header.is-scrolled~.band{box-shadow:var(--band-shadow)}
/* On a wide screen the rail already holds every answer; the band's pill is a phone control. */
@media(min-width:1180px){#pn-setup.flow-enabled #band-brief{display:none}}
#pn-setup .band-glaze{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.85}
#pn-setup .band:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,23,22,.8),rgba(20,23,22,.44) 55%,rgba(20,23,22,.12))}
#pn-setup .band-row{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-width:0}
#pn-setup .band-id{display:flex;align-items:baseline;gap:10px;min-width:0;width:100%}
#pn-setup .band h1{margin:0;flex:0 1 auto;overflow:hidden;color:#fff;font:400 16px/1.2 var(--display);letter-spacing:-.4px;white-space:nowrap;text-overflow:ellipsis}
#pn-setup .band p{margin:0;min-width:0;overflow:hidden;color:#c9d2ce;font-size:13px;white-space:nowrap;text-overflow:ellipsis}
#pn-setup .band-link{display:inline-flex;align-items:center;min-height:26px;margin-left:8px;padding:0 10px;border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.10);color:#fff;font:500 12px/1 var(--ui);text-decoration:none;vertical-align:baseline;transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .band-link:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .band-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
#pn-setup .band .rail{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
#pn-setup .band .rail i{display:block;width:var(--p,0%);height:100%;background:var(--accent);transition:width 600ms var(--ease-out)}
/* The band's name and facts arrive with the case, once. */
#pn-setup .band:not([hidden]) .band-row>*{animation:content-arrive var(--m-enter) var(--ease-out) backwards}
#pn-setup .band:not([hidden]) .band-row>:nth-child(2){animation-delay:60ms}
/* The stage pills stay in the document for their jump targets; the band reads as one line. */
#pn-setup .journey-nav{display:none}

/* Layout: the working column and the progress rail, with the preview label under the band. */
#pn-setup .pn-main{max-width:var(--flow-width);margin:0 auto;padding:0 32px;min-width:0;overflow-wrap:break-word}
#pn-setup .preview-label{margin:6px 0;color:var(--text-3);font:10px/1.5 var(--ui);text-align:center}
#pn-setup .pn-split{display:grid;grid-template-columns:minmax(0,1fr) var(--progress-width);gap:var(--flow-gap);align-items:start}
#pn-setup .pn-pane.pn-workspace{display:block;min-width:0;background:var(--bg)}
#pn-setup .pn-workspace>.pane-bar{display:none}
#pn-setup .pn-workspace>.pane-body{display:block;padding:8px 0 190px}
#pn-setup:not([data-phase=start]):not([data-phase=account]) .pn-workspace>.pane-body{padding-bottom:var(--dock-clearance)}
#pn-setup[data-phase=start] .pn-workspace>.pane-body{padding:20px 0 40px}
#pn-setup[data-phase=start] .pn-split,#pn-setup[data-phase=account] .pn-split{display:block}
#pn-setup[data-phase=start] .progress-panel,#pn-setup[data-phase=account] .progress-panel,#pn-setup:has(#sign-in:not([hidden])) .progress-panel,#pn-setup:has(#load-failed:not([hidden])) .progress-panel{display:none}
#pn-setup:has(#load-failed:not([hidden])) .progress-toggle{display:none}
#pn-setup .pn-view{max-width:760px;margin:0 auto;min-width:0}
/* In flow mode the chat is centred on the page and the rail is tucked to the right edge as its
   own column; below 1180px the rail becomes the sheet behind the header's Progress control. */
#pn-setup.flow-enabled:not([data-phase=start]):not([data-phase=account]) .pn-main{max-width:none;padding:0 24px}
#pn-setup.flow-enabled:not([data-phase=start]):not([data-phase=account]) .pn-split{display:block}
/* The thread's left edge is one number: centred on the page until that would bring it within 40px
   of the rail, then held that far from the rail. No breakpoint jump. Below the sheet breakpoint the
   same token simply centres the thread, and the dock always shares it. */
#pn-setup.flow-enabled{--rail-w:288px;--thread-left:max(24px,min(calc((100vw - 680px) / 2),calc(100vw - 24px - var(--rail-w) - 48px - 680px)))}
#pn-setup.flow-enabled:not([data-phase=start]):not([data-phase=account]) .pn-workspace{max-width:680px;margin:0 0 0 calc(var(--thread-left) - 24px)}
/* The rail is its own plate: the header's glass recipe, a hairline all round and a soft drop, so it
   stands apart from the thread without a rule down its side. */
#pn-setup.flow-enabled .pn-split>.progress-panel{position:fixed;top:calc(var(--chrome-h) + 24px);right:24px;z-index:20;width:288px;max-height:calc(100dvh - var(--chrome-h) - 48px);padding:18px 20px 22px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-xl);background:color-mix(in srgb,var(--bg-elev) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:var(--chrome-shadow)}
@media(max-width:1439px){
  #pn-setup.flow-enabled{--rail-w:280px}
  #pn-setup.flow-enabled .pn-split>.progress-panel{width:280px;padding:16px 16px 20px}
  #pn-setup.flow-enabled .progress-step>:is(summary,.progress-line){gap:10px;padding:8px 6px}
  #pn-setup.flow-enabled .progress-step>:is(summary,.progress-line) strong{font-size:14px;letter-spacing:-.15px}
  /* A narrow rail stacks the report's two figures and keeps its title on one line. */
  #pn-setup.flow-enabled .pn-split>.progress-panel>.plan-module{padding:18px 16px}
  #pn-setup.flow-enabled .pn-split>.progress-panel>.plan-module h2{font-size:18px;letter-spacing:-.4px}
}
#pn-setup.flow-enabled .dock{left:var(--thread-left);right:auto;width:min(680px,calc(100vw - 32px));translate:0 0}
#pn-setup .pn-work{display:flex;flex-direction:column}
#pn-setup #sign-in{max-width:760px;margin:64px auto;gap:16px}
#pn-setup #sign-in a{align-self:flex-start;text-decoration:none}
/* Before boot decides who is looking, the page is the header alone. The workspace ships hidden; the composer dock
   and its veil sit outside it and are otherwise hidden only by a phase or a visible sign-in section, which the
   static page has neither of. */
#pn-setup[data-booting] :is(.dock,.veil){display:none}
/* A load that takes longer than a moment says so quietly; a quick one never shows it. The mark is fixed under the
   header: in the flow it would sit below a full-height shell, out of sight, and make the page scroll. */
@media(prefers-reduced-motion:no-preference){#pn-setup[data-booting]::after{content:"";position:fixed;top:calc(var(--chrome-h) + 120px);left:50%;translate:-50% 0;width:32px;height:4px;border-radius:2px;background:var(--text-3);opacity:0;pointer-events:none;animation:booting 1.4s ease-in-out .7s infinite}}
@keyframes booting{0%,100%{opacity:.12}50%{opacity:.4}}
/* A script that never ran (switched off, or failed to load) leaves the booting mark in place for good. The page
   then says so: at once without scripts, after eight seconds otherwise. That delay is a timer, not motion, so the
   repeated id lifts it above the reduced-motion reset. */
#pn-setup .boot-note{position:fixed;top:calc(var(--chrome-h) + 148px);left:0;right:0;margin:0;padding:0 24px;text-align:center;color:var(--text-2);font:14px/1.6 var(--ui)}
#pn-setup #boot-late{display:none}
#pn-setup[data-booting] #boot-late{display:block;top:calc(var(--chrome-h) + 184px);visibility:hidden}
@media(scripting:none){#pn-setup[data-booting] #boot-late{display:none}}
#pn-setup#pn-setup#pn-setup#pn-setup[data-booting] #boot-late{animation:boot-late 1ms linear 8s forwards}
@keyframes boot-late{to{visibility:visible}}
/* The signed-out walkthrough reads as a conversation: the advisor's lines on the left without a
   reply mark (they are client copy, not model turns), what the visitor said on the right in the
   user bubble, and the next answer in a composer-shaped input on the right. No card, no labels. */
#pn-setup #sign-in[data-welcome=true]>:is(h1,#sign-in-copy,.pn-inline){display:none}
#pn-setup #welcome{display:flex;flex-direction:column;gap:20px;width:100%;max-width:680px}
#pn-setup #welcome-thread{display:flex;flex-direction:column;gap:14px;overflow-wrap:anywhere}
#pn-setup #welcome-thread .welcome-line{align-self:flex-start;max-width:78%;margin:0;color:var(--text);font:400 20px/1.4 var(--display);letter-spacing:-.01em;text-wrap:pretty}
#pn-setup #welcome-thread .welcome-line.is-past{color:var(--text-2);font-size:16px}
#pn-setup #welcome-thread .pn-user{margin:2px 0 6px}
#pn-setup #welcome-thread .is-new{animation:materialize var(--m-enter) var(--ease-out) backwards}
#pn-setup #welcome-form{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:0;scroll-margin-bottom:40px}
#pn-setup #welcome-fields{display:flex;flex-direction:column;align-items:flex-end;width:100%}
#pn-setup #welcome .composer{width:100%;align-items:center}
#pn-setup #welcome .composer input{flex:1;min-width:0;min-height:40px;padding:8px 0;border:0;background:transparent;color:var(--text);font:16px/1.5 var(--ui);box-shadow:none}
#pn-setup #welcome .composer input:focus-visible{outline:none}
#pn-setup #welcome .composer:has(input:focus-visible){box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 12%,transparent),0 0 0 3px var(--accent-soft),0 12px 34px rgba(15,12,8,.12)}
#pn-setup #welcome .composer input::placeholder{color:var(--text-3);opacity:.7}
#pn-setup #welcome .composer input[type=number]{appearance:textfield}
#pn-setup #welcome .welcome-choices{display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:100%}
#pn-setup #welcome .welcome-choices .choice-set{width:100%;margin:0}
#pn-setup #welcome .welcome-choices .choice-set>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#pn-setup #welcome .welcome-choices .choice-set>:is(.field-hint,label.field-label){display:none}
/* The error row is reserved, so a message appearing or clearing never moves the controls. */
#pn-setup #welcome-error{align-self:flex-end;min-height:20px;margin:0;text-align:right}
#pn-setup #welcome .welcome-actions{display:flex;gap:16px;justify-content:flex-end}
#pn-setup #welcome .welcome-actions .pn-link{min-height:44px}
#pn-setup #sign-in .sign-in-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#pn-setup #welcome .welcome-actions:not(:has(button:not([hidden]))){display:none}
#pn-setup #status{max-width:760px;margin:20px auto 0;padding:12px 16px;border-radius:10px;background:var(--accent-soft);font-size:13px}
#pn-setup[data-phase=start] #status{max-width:1280px}
#pn-setup #status[data-tone=inline]{background:color-mix(in srgb,var(--bad-ink) 10%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--bad-ink) 18%,transparent);color:var(--bad-ink);animation:content-arrive var(--m-depth) var(--ease-out) backwards}
/* A toast rides above the dock, never over the composer the reader is typing in. */
#pn-setup #status[data-tone=toast]{position:fixed;left:50%;bottom:var(--dock-clearance);z-index:120;max-width:min(560px,calc(100vw - 32px));margin:0;padding:10px 18px;border-radius:var(--r-pill);background:var(--text);color:var(--bg);font:14px/1.3 var(--ui);box-shadow:var(--toast-shadow);transform:translate(-50%,0);animation:toast-in var(--m-enter) var(--ease-settle) backwards}
#pn-setup #status[data-tone=toast].is-leaving{animation:toast-out 160ms var(--ease) forwards}
/* Plan sub-navigation belongs to the plan phase only; the staff entry is the one pill the account phase may show. */
#pn-setup .pn-main>.pn-nav{display:none;flex-direction:row;justify-content:center;gap:3px;max-width:max-content;margin:26px auto 0;padding:5px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-1)}
#pn-setup .pn-main>.pn-nav button{display:none;align-items:center;min-height:40px;padding:0 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font:500 13px/1.3 var(--ui);white-space:nowrap;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease)}
#pn-setup .pn-main>.pn-nav button[aria-current=page]{background:var(--bg-elev);box-shadow:var(--shadow-sm);color:var(--text)}
#pn-setup .pn-main>.pn-nav .step-number,#pn-setup .pn-main>.pn-nav .step-lock{display:none}
#pn-setup .pn-main>.pn-nav small{margin-left:6px;color:var(--text-3);font-size:11px}
#pn-setup .step-badge:empty{display:none}
#pn-setup[data-phase=plan] .pn-main>.pn-nav{display:flex}
#pn-setup[data-phase=plan] .pn-main>.pn-nav button[data-view=adoption],#pn-setup[data-phase=plan] .pn-main>.pn-nav button[data-view=implementation],#pn-setup[data-phase=plan] .pn-main>.pn-nav button[data-view=review]{display:inline-flex}
#pn-setup[data-phase=account] .pn-main>.pn-nav:has(#settings-nav),#pn-setup[data-phase=settings] .pn-main>.pn-nav:has(#settings-nav){display:flex}
#pn-setup[data-phase=account] .pn-main>.pn-nav #settings-nav,#pn-setup[data-phase=settings] .pn-main>.pn-nav #settings-nav{display:inline-flex}

/* The thread column: one reading measure, top to bottom. */
#pn-setup .thread{display:flex;flex-direction:column;gap:22px;max-width:680px;margin:0 auto;padding:24px 0 40px}
#pn-setup .thread>*:empty{display:none}
#pn-setup .conversation-intro{padding:0 0 10px;border:0}
#pn-setup .conversation-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:24px}
#pn-setup .conversation-heading h2{margin:0;font:500 16px/1.4 var(--ui);letter-spacing:-.2px}
#pn-setup #conversation-state{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);font:400 13px/1.5 var(--ui);text-align:right}
#pn-setup #conversation-state:empty{display:none}
#pn-setup #conversation-state:before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--text-3);transition:background-color var(--m-ui) var(--ease)}
#pn-setup #conversation-state[data-available=true]:before{background:var(--accent)}
#pn-setup .conversation-intro p{max-width:54ch;margin:10px 0 0;color:var(--text-2);font-size:14px;line-height:1.6}
/* In flow mode the thread opens on the first receipt or the card; the composer says who is listening. */
#pn-setup.flow-enabled .conversation-intro{display:none}
/* The full form stays in the page for its ids; the flow speaks through the card instead. */
#pn-setup.flow-enabled :is(#guided-work,#decision-toolbar,#current-question-link){display:none}
/* Conversations: a quiet disclosure. A row of text, not a panel. */
#pn-setup .conversation-list{align-self:flex-start;width:min(100%,380px);color:var(--text-3)}
#pn-setup .conversation-list summary{display:flex;align-items:center;gap:8px;min-height:30px;list-style:none;color:var(--text-3);font:400 13px/1.4 var(--ui);cursor:pointer;transition:color var(--m-ui) var(--ease)}
#pn-setup .conversation-list summary:hover{color:var(--text-2)}
#pn-setup .conversation-list summary:after{content:"";display:inline-block;width:12px;height:12px;background:currentColor;-webkit-mask:var(--chevron) center/12px 12px no-repeat;mask:var(--chevron) center/12px 12px no-repeat;transition:transform var(--m-ui) var(--ease)}
#pn-setup .conversation-list[open] summary:after{transform:rotate(90deg)}
#pn-setup .conversation-list summary::-webkit-details-marker{display:none}
#pn-setup .conversation-count{margin-left:auto}
#pn-setup .conversation-count:not(:empty){padding:2px 7px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--text-2);font:11px/1.5 var(--ui)}
#pn-setup .conversation-list .pn-new{display:inline-flex;align-items:center;gap:7px;min-height:30px;margin:6px 0 2px -12px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 13px/1 var(--ui);text-align:left;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .conversation-list .pn-new:hover:not(:disabled){background:var(--bg-2);color:var(--text)}
#pn-setup .conversation-list .pn-new:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup #history{display:flex;flex-direction:column;gap:4px;margin-top:4px}
#pn-setup .pn-history{display:block;width:100%;padding:0;overflow:hidden;border:0;background:none;color:var(--text-2);font:400 13px/1.5 var(--ui);text-align:left;text-overflow:ellipsis;white-space:nowrap;transition:color var(--m-ui) var(--ease)}
#pn-setup .pn-history:hover:not(:disabled){color:var(--text)}
#pn-setup .pn-history[aria-current=page]{color:var(--accent-ink)}

/* Turns: the mark is the author cue on a reply; the reader's own words sit right, in a bubble. */
#pn-setup #messages{display:flex;flex-direction:column;gap:24px;margin:0;overflow-wrap:anywhere}
#pn-setup #messages .is-new{animation:materialize var(--m-enter) var(--ease-out) backwards}
/* The reader's own words are sent, not written: they land with a small settle instead of clearing from a blur. */
#pn-setup #messages .pn-user.is-new{animation:chip-in var(--m-enter) var(--ease-out) backwards}
#pn-setup .message-author{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--text-3);font:500 13px/1.5 var(--ui)}
#pn-setup .pn-reply{width:100%;max-width:100%;font-size:16px}
#pn-setup .pn-reply .message-author:before{content:"";width:16px;height:16px;flex:none;background:var(--mark-3x3) center/contain no-repeat}
/* The mark alone is the advisor's cue and alignment alone is the reader's: the words stay for screen readers. */
#pn-setup.flow-enabled .pn-reply .message-author{font-size:0;line-height:16px;margin-bottom:10px}
#pn-setup.flow-enabled .pn-user .message-author{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* The reader's own turn is right-aligned accent ink, not a bubble (house chat grammar). */
#pn-setup.flow-enabled .pn-user{position:relative;max-width:70%;color:var(--accent-ink);font-size:16px}
#pn-setup.flow-enabled .pn-user .message-text{padding:0;border-radius:0;background:transparent;line-height:1.65}
#pn-setup .pn-reply .message-text{max-width:62ch;line-height:1.7;text-wrap:pretty}
#pn-setup .pn-user{align-self:flex-end;max-width:78%;color:var(--text);font-size:16px;line-height:1.6;text-align:left;text-wrap:pretty}
#pn-setup .pn-user .message-author{justify-content:flex-end}
#pn-setup .pn-user .message-text{padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--bg-2);line-height:1.6;white-space:pre-wrap}
#pn-setup .message-text p,#pn-setup .message-text ul,#pn-setup .message-text ol,#pn-setup .message-text pre{margin:0 0 10px}
#pn-setup .message-text>:last-child{margin-bottom:0}
#pn-setup .message-text ul,#pn-setup .message-text ol{padding-left:22px}
#pn-setup .message-text li{margin:2px 0}
#pn-setup .message-text h4{margin:14px 0 6px;font-size:14px;font-weight:600}
#pn-setup .message-text code{padding:1px 5px;border-radius:4px;background:var(--bg-2);font:12px/1.6 var(--mono)}
#pn-setup .message-text pre{overflow:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-1)}
#pn-setup .message-text pre code{padding:0;background:none;white-space:pre}
#pn-setup .turn-row{display:flex;align-items:center;gap:8px}
#pn-setup .turn-row:has(#turn-state:empty){display:none}
#pn-setup .turn-row{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup #turn-state{color:var(--text-3);font:13px/1.6 var(--ui)}
#pn-setup #turn-state[data-error=true]{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-1);color:var(--text-2);font-size:14px}
/* A turn in flight shows the mark alone; the system never narrates itself. Its words stay in the status region for
   screen readers, and an error is always shown. */
#pn-setup:not(.flow-enabled) #turn-state:not([data-error=true]){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#pn-setup:not(.flow-enabled):has(#chat-form[aria-busy=true]) .turn-row:not(:has(#turn-state[data-error=true])) .working-dots{display:flex}
#pn-setup .working-dots{display:none;align-items:center;gap:4px}
#pn-setup .working-dots i{display:block;width:3.5px;height:3.5px;border-radius:50%;background:var(--accent);opacity:.25}
#pn-setup #retry{align-self:flex-start;display:inline-flex;align-items:center;min-height:var(--action-small);margin-left:-12px;padding:0 12px;border-radius:var(--r-pill);color:var(--text-2);font-size:13px;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup #retry:active:not(:disabled){scale:.96;transition-duration:0s}
/* A turn in flight reads left to right: the mark, the motes, the phrase. */
#pn-setup.flow-enabled .turn-row{gap:10px}
/* While the advisor works, its own mark thinks beside the line: a wave crosses its nine squares
   while the whole mark breathes (Projects' logo recipe). The line keeps its plain grey sweep. */
#pn-setup.flow-enabled .turn-row .working-dots{display:none}
#pn-setup .think-mark{display:none;flex:none;width:16px;height:16px;overflow:visible}
#pn-setup.flow-enabled .turn-row .think-mark{display:block}
#pn-setup.flow-enabled .turn-row:has(#turn-state[data-error=true]) .think-mark{display:none}
#pn-setup .think-mark rect{fill:#262626;transform-box:fill-box;transform-origin:center}
#pn-setup .think-mark rect:nth-child(even){fill:#3da8dc}
#pn-setup .think-mark rect:nth-child(5){fill:#d97757}
/* The wave crosses the mark on the diagonal: each square a tenth of a second behind the last. */
#pn-setup .think-mark rect:nth-child(2),#pn-setup .think-mark rect:nth-child(4){--d:.1s}
#pn-setup .think-mark rect:nth-child(3),#pn-setup .think-mark rect:nth-child(5),#pn-setup .think-mark rect:nth-child(7){--d:.2s}
#pn-setup .think-mark rect:nth-child(6),#pn-setup .think-mark rect:nth-child(8){--d:.3s}
#pn-setup .think-mark rect:nth-child(9){--d:.4s}

#pn-setup.flow-enabled .turn-row .working-dots{order:-1}
#pn-setup.flow-enabled #turn-state{font-size:13px;color:var(--text-3)}
/* A receipt is one line: what was decided, what it says, and the way back into it. */
#pn-setup.flow-enabled #messages{display:flex;flex-direction:column;gap:28px}
#pn-setup.flow-enabled #messages>.current-module{width:100%;margin:0}
#pn-setup .flow-receipt{display:flex;align-items:center;gap:10px;margin:-4px -10px;padding:4px 10px;border-radius:10px;color:var(--text-2);font:400 13px/1.5 var(--ui)}
/* Reopened from its Edit, the receipt glows once so the eye can follow it to the card that arrives. */
#pn-setup .flow-receipt.is-tapped{animation:tone-flash var(--m-pop) var(--ease) backwards}
#pn-setup .flow-receipt>.copy{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}
#pn-setup .flow-receipt strong{flex:none;color:var(--text-2);font-weight:500}
#pn-setup .flow-receipt small{min-width:0;overflow:hidden;color:var(--text-3);font-size:13px;white-space:nowrap;text-overflow:ellipsis}
#pn-setup .flow-receipt small:before{content:"· "}
#pn-setup .flow-receipt>.pn-link{display:inline-flex;align-items:center;flex:none;margin-left:auto;min-height:var(--action-small);padding:0 8px;border-radius:var(--r-sm);color:var(--text-2);font-size:13px;text-decoration:none;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .flow-receipt>.pn-link:active:not(:disabled){scale:.96;transition-duration:0s}
/* A closed decision wears the same filled puck as a picked option: accent ink, a white tick, no wash. */
#pn-setup .flow-saved-check{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:50%;background:var(--accent-ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#pn-setup .flow-saved-check svg{width:11px;height:11px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#pn-setup .flow-receipt.is-new{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
/* The row lands first; its check is drawn a beat later. */
#pn-setup .flow-receipt.is-new .flow-saved-check svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:check-draw var(--m-draw) var(--ease-out) 120ms forwards}
#pn-setup .flow-proposals{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--text-2);font:400 13px/1.6 var(--ui)}
/* The draft-conflict card: the card shell, a title, one line, two buttons. */
#pn-setup .flow-draft-conflict{display:flex;flex-direction:column;gap:6px;margin:4px 0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-1);box-shadow:0 1px 2px rgba(26,22,16,.05),0 8px 20px -14px rgba(26,22,16,.12);font:400 14px/1.6 var(--ui)}
#pn-setup .flow-draft-conflict>strong{font:500 17px/1.35 var(--display);letter-spacing:-.25px;color:var(--text)}
#pn-setup .flow-draft-conflict>p{max-width:52ch;margin:0;color:var(--text-2)}
#pn-setup .flow-draft-conflict>.bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* The decision row: the question still open, and the way to fold its card away. */
#pn-setup .decision-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 0;border-top:1px solid var(--line)}
#pn-setup .decision-toolbar>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;min-width:0}
#pn-setup .decision-toolbar strong{min-width:0;font:500 14px/1.5 var(--ui);overflow-wrap:anywhere}
#pn-setup #decision-draft{flex:none;padding:1px 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font:500 12px/1.6 var(--ui);white-space:nowrap}
#pn-setup #decision-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 13px/1 var(--ui);white-space:nowrap;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup #decision-toggle:hover:not(:disabled){background:var(--bg-2);color:var(--text);text-decoration:none}
#pn-setup #decision-toggle:active:not(:disabled){scale:.96;transition-duration:0s}
/* The flow card carries the same control on its own title line, and the folded card is that row alone. */
#pn-setup .flow-hide{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 13px/1 var(--ui);white-space:nowrap;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup button.flow-hide:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .flow-resume{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:0 12px 0 20px;border:0;border-radius:inherit;background:transparent;color:var(--text);font:500 14px/1.4 var(--ui);text-align:left;transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .flow-resume:active:not(:disabled){scale:.985;transition-duration:0s}
/* The current card, the report card, the engagement card and the closing line stack on the thread's
   own rhythm, so two cards never meet edge to edge. */
#pn-setup .current-module{display:flex;flex-direction:column;gap:22px;min-width:0}
#pn-setup .current-module.is-folding{overflow:clip}
#pn-setup #guided-work{min-width:0}
#pn-setup #guided-work>.pn-view{max-width:none;margin:0}

/* One card shell for the question, the assessment, the report and the engagement card. */
#pn-setup :is(.module,.guided-question,.engagement-module){position:relative;display:flex;flex-direction:column;max-width:none;margin:0;padding:22px 24px 18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-elev);box-shadow:var(--card-shadow);scroll-margin-top:calc(var(--chrome-h) + 20px)}
#pn-setup :is(.module,.engagement-module)>h2,#pn-setup .question-head>h2,#pn-setup #assessment-result>h2{margin:0;max-width:34ch;font:400 22px/1.25 var(--display);letter-spacing:-.02em;text-wrap:balance}
#pn-setup .hint,#pn-setup .guide-hint{max-width:56ch;margin:6px 0 0;color:var(--text-2);font-size:14px;line-height:1.55}
#pn-setup .module>.pn-small{margin-top:6px}
/* No eyebrow line: the title carries its own tag at the right end of its line. */
#pn-setup .question-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#pn-setup .question-head>h2{min-width:0}
#pn-setup .question-tag{flex:none;margin-top:4px;padding:2px 9px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--text-3);font:500 12px/1.6 var(--ui);white-space:nowrap}
#pn-setup .question-tag:empty{display:none}
#pn-setup .guided-question.is-new>:is(.question-head,.guide-hint,.guide-fields,.flow-form,.guide-actions),#pn-setup .module.is-new,#pn-setup .engagement-module.is-new{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup .guided-question.is-new .guide-fields{animation-delay:35ms}
#pn-setup .guided-question.is-resizing{overflow:clip}
/* Every beat brings a new card; its parts arrive in sequence, then the class is dropped. */
#pn-setup .flow-card.is-new{animation:materialize var(--m-enter) var(--ease-out) backwards}
#pn-setup .flow-card.is-new>*{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup .flow-card.is-new>*:nth-child(2){animation-delay:35ms}
#pn-setup .flow-card.is-new>*:nth-child(n+3){animation-delay:70ms}
/* The four tiles follow the card in, one after another. */
#pn-setup .flow-card.is-new #compare>.platform{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(90ms + var(--n,0) * 40ms)}
#pn-setup .flow-card #compare>.platform:nth-child(2){--n:1}
#pn-setup .flow-card #compare>.platform:nth-child(3){--n:2}
#pn-setup .flow-card #compare>.platform:nth-child(4){--n:3}
/* Folding and opening: the height carries the movement while the new content fades in behind it. */
#pn-setup .flow-card.is-resizing>*{animation:fade-in var(--m-depth) var(--ease) 60ms backwards}
/* The conversation card is the shared shell, sized for a thread it sits inside. */
/* The site's card: surface fill, hairline, 20px corners, a short contact shadow and a long soft one. */
#pn-setup.flow-enabled :is(.flow-card,.engagement-module,.plan-module){padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-1);box-shadow:0 1px 2px rgba(26,22,16,.05),0 8px 20px -14px rgba(26,22,16,.12)}.engagement-module,.plan-module){box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 28px -16px rgba(0,0,0,.6)}
#pn-setup.flow-enabled :is(.flow-card,#plan-module){scroll-margin-top:0}
#pn-setup .flow-card .question-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#pn-setup .flow-card .question-head h2{flex:1;min-width:0;margin:0}
#pn-setup.flow-enabled .flow-card .question-head h2{font-size:24px;line-height:1.2;letter-spacing:-.6px}
#pn-setup.flow-enabled .flow-card .guide-hint{max-width:55ch;margin:8px 0 18px;color:var(--text-2);font-size:13px;line-height:1.65}
/* No hint means the first field sits on the title's own rhythm. */
#pn-setup.flow-enabled .question-head+:is(.flow-form,#compare,.quiet-line,.picker){margin-top:18px}
#pn-setup.flow-enabled .guide-hint+.flow-form{margin-top:0}
#pn-setup.flow-enabled .flow-card>.quiet-line{margin-top:16px;font-size:13px}
#pn-setup.flow-enabled .flow-card .guide-actions{margin-top:22px;padding-top:0;border:0}
/* The missing-answer chip sits at the left of the action row; the field it names wears a ring. */
#pn-setup .flow-error{display:inline-flex;align-items:center;gap:8px;min-height:34px;margin:0 auto 0 0;padding:0 12px 0 10px;border-radius:var(--r-pill);background:var(--bad-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad-ink) 24%,transparent);color:var(--bad-ink);font:500 13px/1.3 var(--ui);animation:chip-in var(--m-enter) var(--ease-out) backwards}
#pn-setup .flow-error:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
#pn-setup .is-missing :is(input,textarea,select){border-color:var(--bad-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad-ink) 12%,transparent)}
#pn-setup .is-missing>.field-question,#pn-setup .is-missing>summary .flow-answer-label{color:var(--bad-ink)}
#pn-setup .choice-set.is-missing>legend{color:var(--bad-ink)}
#pn-setup .choice-set.is-missing>.choice-options{border-radius:var(--r-md);box-shadow:0 0 0 1px var(--bad-ink),0 0 0 4px color-mix(in srgb,var(--bad-ink) 12%,transparent)}
/* Folded, the card is a 52px row: the question's name, and the way back into it. */
#pn-setup.flow-enabled .flow-card:has(>.flow-resume){padding:0;overflow:hidden}
#pn-setup .flow-card.is-leaving{animation:card-leave var(--m-ui) var(--ease) forwards}
/* Guided mode keeps the full form in the page but shows only the current question. */
#pn-setup #guided-work .onboard-form[data-guidance=guided]{margin:0;padding:0;border:0;background:none}
#pn-setup form[data-guidance=guided]>.form-block,#pn-setup form[data-guidance=guided]>#intake-fields,#pn-setup form[data-guidance=guided]>.step-footer,#pn-setup form[data-guidance=guided]>.bar{display:none}
#pn-setup #guided-work>.pn-view:has(form[data-guidance=guided])>.form-heading,#pn-setup #details-view:has(form[data-guidance=guided])>h1,#pn-setup #details-view:has(form[data-guidance=guided])>#details-intro,#pn-setup #details-view:has(form[data-guidance=guided])>.step-footer{display:none}
#pn-setup form[data-guidance=guided]>[role=alert]:not(:empty){margin:12px 0 0;padding:12px 14px;border-radius:10px;background:var(--bad-soft);color:var(--bad-ink);font-size:14px;line-height:1.5}
#pn-setup form[data-guidance=guided]>[id$=guide-reload]:not([hidden]){margin-top:12px;white-space:normal;text-align:left}
#pn-setup form[data-guidance=review]{margin-top:24px}

/* Fields inside a card. */
#pn-setup .guide-fields{min-width:0;margin-top:12px}
#pn-setup .guide-fields:empty{display:none}
#pn-setup .guide-fields>.choice-set{margin:0}
#pn-setup .guide-fields>.choice-set>legend,#pn-setup .guide-fields>.field-label>.field-question{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#pn-setup .guide-fields>.field-label>.field-hint,#pn-setup .guide-fields>.choice-set>.field-hint:not(.choice-consequence){display:none}
#pn-setup .guide-fields>.field-label{margin:0}
#pn-setup .guide-fields textarea{min-height:88px;padding:11px 13px;border-radius:10px;font:15px/1.55 var(--ui)}
#pn-setup .guide-fields input:not([type=radio],[type=checkbox]){min-height:42px;padding:9px 12px;border-radius:10px;font:15px/1.5 var(--ui)}
#pn-setup .guide-fields .form-section-fields{display:block}
#pn-setup .guide-fields .field-label{margin:0 0 5px;color:var(--text-2);font:500 13px/1.4 var(--ui)}
#pn-setup .guide-fields .form-section-fields>input{margin-bottom:12px}
#pn-setup .guide-fields .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
#pn-setup .guide-fields .team-size{display:block;margin:0;padding:0;border:0}
#pn-setup .guide-fields .team-size .field-help{display:block;margin:5px 0 0;color:var(--text-3);font-size:12px}
#pn-setup .guide-fields input.short-input{width:110px;flex-basis:auto;font-variant-numeric:tabular-nums}
#pn-setup .guide-fields .field-error{margin-top:6px}
#pn-setup .guide-fields :is(input:not([type=radio],[type=checkbox]),textarea){background:var(--bg-1);border-color:var(--line);transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease)}
#pn-setup .guide-fields :is(input:not([type=radio],[type=checkbox]),textarea):focus{background:var(--bg-elev);border-color:var(--accent-ink)}
#pn-setup .guide-fields input[aria-invalid=true]{border-color:var(--bad-ink);background:var(--bad-soft)}
/* Forms: one grammar for the company intake, the fit check, setup details and staff settings. */
#pn-setup .onboard-form{margin-top:30px}
#pn-setup .field-label{display:block;margin:22px 0 8px;color:var(--text);font:500 14px/1.5 var(--ui)}
#pn-setup .field-question{display:block;font-weight:500}
#pn-setup .field-hint,#pn-setup .field-help{display:block;margin-top:4px;color:var(--text-3);font:400 12px/1.6 var(--ui)}
#pn-setup .field-error{margin-top:6px;color:var(--bad-ink);font:400 12px/1.5 var(--ui);animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup .onboard-form input:not([type=radio],[type=checkbox]),#pn-setup .field-label input,#pn-setup .field-label textarea,#pn-setup select,#pn-setup .configuration-form textarea{display:block;width:100%;min-width:0;min-height:48px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-elev);color:var(--text);font:15px/1.5 var(--ui);transition:border-color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}
#pn-setup .field-label input,#pn-setup .field-label textarea,#pn-setup .field-label select{margin-top:6px}
#pn-setup .field-label textarea,#pn-setup .configuration-form textarea{resize:vertical;line-height:1.6}
#pn-setup .configuration-form textarea{font:12px/1.7 var(--mono)}
#pn-setup .onboard-form input:focus,#pn-setup .field-label input:focus,#pn-setup .field-label textarea:focus,#pn-setup select:focus,#pn-setup .configuration-form textarea:focus{border-color:var(--accent);outline:none;box-shadow:var(--focus-ring-field)}
/* The count is typed, not stepped: the native spinners add a control the design does not use. */
#pn-setup #user-count-input{font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
#pn-setup #user-count-input::-webkit-inner-spin-button,#pn-setup #user-count-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
#pn-setup .onboard-form :is(input,textarea,select)[aria-invalid=true]:not([type=radio],[type=checkbox]){border-color:var(--bad-ink);background:var(--bad-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad-ink) 12%,transparent)}
#pn-setup .form-heading{padding-bottom:12px}
#pn-setup .form-heading>.pn-small{margin-top:16px;font-size:14px}
#pn-setup .form-block{display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;padding:32px 0;border-top:1px solid var(--line)}
#pn-setup .form-section-heading{padding-top:4px}
#pn-setup .form-index{display:block;margin-bottom:13px;color:var(--text-3);font:12px/1.5 var(--mono)}
#pn-setup .form-section-heading h2{font-size:16px}
#pn-setup .form-section-heading p{max-width:22ch;margin-top:8px;color:var(--text-3);font-size:14px;line-height:1.65}
#pn-setup .form-section-fields{min-width:0}
#pn-setup .form-section-fields>.field-grid{margin-top:24px}
#pn-setup .form-section-fields>.field-label:first-child,#pn-setup .field-grid .field-label{margin-top:0}
#pn-setup .form-section-fields>.field-label:not(:first-child){margin-top:28px}
#pn-setup .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#pn-setup .team-size{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#pn-setup .team-size .field-label{margin:0 0 5px}
#pn-setup .short-input{width:128px;flex:0 0 128px}
#pn-setup .optional-tag{display:inline-block;margin-top:12px;padding:2px 8px;border:1px solid var(--line);border-radius:5px;color:var(--text-3);font:400 12px/1.5 var(--ui)}
#pn-setup .support-disclosure{margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
#pn-setup .support-disclosure summary{cursor:pointer;font:500 15px/1.6 var(--ui)}
#pn-setup .support-disclosure summary .optional-tag{margin:0 0 0 8px;vertical-align:middle}
#pn-setup #support-fields{padding-top:24px}
#pn-setup #onboard-questions textarea{min-height:110px}
#pn-setup #onboard-form>.step-footer{margin-top:0;padding-top:24px}
#pn-setup #onboard-form>.step-footer .pn-primary{min-width:190px}
#pn-setup #onboard-error,#pn-setup #intake-error{padding-top:12px;color:var(--bad-ink);font-size:13px}
#pn-setup .form-section h2{margin-bottom:6px}
#pn-setup .form-section .pn-small{margin:0 0 10px;color:var(--text-2)}
#pn-setup #share .check-field{margin:12px -10px}
/* A select carries the app's own chevron: the one drawn token, turned a quarter turn. */
#pn-setup .select-shell{position:relative;display:block;min-width:0}
#pn-setup #report-download .select-shell{max-width:360px}
#pn-setup .select-shell select{appearance:none;-webkit-appearance:none;padding-right:40px}
#pn-setup .select-shell:after{content:"";position:absolute;top:50%;right:14px;width:12px;height:12px;margin-top:-6px;rotate:90deg;background:var(--text-3);-webkit-mask:var(--chevron) center/12px 12px no-repeat;mask:var(--chevron) center/12px 12px no-repeat;pointer-events:none;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .select-shell:has(#plan-version){display:inline-block;min-width:240px;max-width:100%;margin-bottom:24px}
#pn-setup #plan-version{width:100%}
#pn-setup #account-mode{margin-bottom:4px}
#pn-setup #sign-out{display:inline-flex;align-items:center;margin-top:14px;text-decoration:none}
#pn-setup #new-case{margin-top:16px}
/* The real radio stays in the tab order; the puck is what the eye reads. */
#pn-setup .check-field{display:flex;align-items:flex-start;gap:10px;margin:14px -10px;padding:6px 10px;border-radius:10px;font-size:13px;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .check-field input{width:auto;flex:0 0 auto;margin:3px 0 0}
#pn-setup .check-field strong{font-size:14px;font-weight:500;line-height:1.5}
#pn-setup .check-field span small{display:block;margin-top:6px;color:var(--text-3);font-size:13px;line-height:1.65}

/* Selection rows: a ring means selection and nothing else; unselected rows are borderless. */
#pn-setup .choice-set{min-width:0;margin:22px 0 0;padding:0;border:0}
#pn-setup :is(#onboard-questions,#fit-fields,#support-fields,#intake-fields)>.choice-set:first-child{margin-top:0}
#pn-setup .choice-set legend{margin:0 0 10px;padding:0;font:500 16px/1.5 var(--ui)}
#pn-setup .choice-set>.field-hint{margin:-4px 0 10px;font-size:13px}
#pn-setup .choice-set>.choice-consequence{margin:12px 0 0;padding-left:12px;border-left:2px solid var(--line);color:var(--text-2);text-wrap:pretty}
#pn-setup .choice-set>.field-label{display:block;margin:10px 0 0}
#pn-setup .choice-options{display:flex;flex-direction:column;gap:2px;margin:0 -8px}
#pn-setup .choice-options .check-field{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:40px;margin:0;padding:8px 12px 8px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text);font-size:15px;line-height:1.45;cursor:pointer;transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .choice-options .check-field:hover{background:var(--bg-2)}
#pn-setup .choice-options .check-field:active{scale:.985;transition-duration:0s}
#pn-setup .choice-options .check-field:has(input:checked){border-color:var(--accent-edge);background:var(--bg-elev);box-shadow:0 0 0 1px var(--accent-edge)}
#pn-setup .choice-options .check-field input{position:absolute;top:50%;left:10px;width:18px;height:18px;margin:0;opacity:0;pointer-events:none}
#pn-setup .choice-options .check-field>span{min-width:0;overflow-wrap:anywhere}
#pn-setup .choice-options .check-field span small{display:block;margin-top:2px;color:var(--text-3);font-size:13px;line-height:1.4}
#pn-setup .choice-options .check-field:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}
#pn-setup .choice-options .check-field:has(input:disabled){opacity:.6;cursor:default}
#pn-setup .choice-puck{display:grid;place-items:center;width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--line-2);border-radius:50%;background:var(--bg-elev);transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease)}
#pn-setup .check-field:has(input[type=checkbox])>.choice-puck{border-radius:6px}
#pn-setup .choice-puck svg{width:11px;height:11px;overflow:visible;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;stroke-dasharray:24;stroke-dashoffset:24;transition:opacity var(--m-press) var(--ease)}
#pn-setup label:has(input:checked)>.choice-puck{border-color:var(--accent-ink);background:var(--accent-ink);animation:commit-pop var(--m-pop) var(--ease-expo)}
#pn-setup label:has(input:checked)>.choice-puck svg{opacity:1;animation:check-draw var(--m-draw) var(--ease-out) 40ms forwards}
/* The flow card's own fields: one grammar, sized for the card rather than the full form. */
#pn-setup .flow-form .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
#pn-setup .flow-form .field-grid>.field-label{margin:0}
#pn-setup .flow-form .field-label{font-size:12px}
#pn-setup .flow-form .field-label input{min-height:42px;padding:9px 12px}
#pn-setup .flow-form .field-label textarea{min-height:42px;padding:9px 12px;resize:none}
#pn-setup.flow-enabled .flow-form>.field-label{display:block;margin-top:18px}
#pn-setup.flow-enabled .flow-form>.field-label:first-child{margin-top:0}
#pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea){background:var(--bg-elev);border-color:var(--line-2);border-radius:10px;font-size:15px}
#pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea):focus{background:var(--bg-elev);border-color:var(--accent-ink)}
/* The company card's labels float inside their fields: four fields, half the height. */
#pn-setup .flow-form .field-label.floating{position:relative;display:block}
#pn-setup .flow-form .field-label.floating>.field-question{position:absolute;left:13px;top:14px;z-index:1;color:var(--text-3);font:400 15px/1.3 var(--ui);pointer-events:none;transition:top var(--m-ui) var(--ease),font-size var(--m-ui) var(--ease),color var(--m-ui) var(--ease)}
#pn-setup .flow-form .field-label.floating>input{min-height:50px;margin-top:0;padding:20px 12px 6px}
#pn-setup .flow-form .field-label.floating:is(:has(input:focus),:has(input:not(:placeholder-shown)))>.field-question{top:7px;font-size:11px;color:var(--text-2)}
#pn-setup .flow-form .field-label.floating>.field-hint{margin-top:4px}
/* Common goals under the first question: one tap adds one, a second tap takes it back. */
#pn-setup .idea-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* Chips follow the site: 26px, mono, a hairline on the deeper surface; the accent variant marks what is chosen. */
#pn-setup .idea{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-elev);color:var(--text-2);font:500 12px/1.2 var(--ui);white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,12,8,.05);transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease-out),translate var(--m-depth) var(--ease-out),scale var(--m-press) var(--ease-out)}
#pn-setup .idea:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .idea:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup .idea.is-used{border-color:var(--accent-edge);background:var(--accent-soft);color:var(--accent-ink)}
#pn-setup :is(.picker-tile .tag,.platform .tag,.question-tag){font:500 12px/1 var(--ui);letter-spacing:0;min-height:24px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--line);background:var(--bg-elev);color:var(--text-2)}
#pn-setup .flow-form input[type=number]{-moz-appearance:textfield;appearance:textfield}
#pn-setup .flow-form input[type=number]::-webkit-inner-spin-button,#pn-setup .flow-form input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}
#pn-setup.flow-enabled .flow-context textarea,#pn-setup.flow-enabled .flow-form [data-flow-key=notes] textarea{min-height:68px}
#pn-setup.flow-enabled .flow-context [data-flow-key=industry] textarea{min-height:42px;height:42px}
#pn-setup .flow-form .choice-set{margin-top:24px}
#pn-setup .flow-form .choice-set:first-child{margin-top:0}
#pn-setup .flow-form .choice-set>legend{margin-bottom:8px;color:var(--text-2);font:500 13px/1.4 var(--ui)}
#pn-setup .flow-form .choice-set>.choice-consequence{margin-top:10px;padding:0;border:0;color:var(--text-3);font-size:13px}
/* The brief confirmation: a label column, the answer, and the app's own chevron. */
#pn-setup .flow-answer{min-width:0;padding:0;border:0}
#pn-setup .flow-answer>summary{display:grid;grid-template-columns:120px minmax(0,1fr) 12px;gap:14px;align-items:baseline;margin:0 -8px;padding:10px 8px;border-radius:var(--r-sm);list-style:none;cursor:pointer;font-size:14px;line-height:1.6;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .flow-answer>summary::-webkit-details-marker{display:none}
#pn-setup .flow-answer>summary:after{content:"";align-self:center;width:12px;height:12px;background:var(--text-3);-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat;transition:rotate var(--m-ui) var(--ease)}
#pn-setup .flow-answer[open]>summary:after{rotate:90deg}
#pn-setup .flow-answer>summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
#pn-setup .flow-answer-label{color:var(--text-2);font-size:13px}
#pn-setup .flow-answer-value{white-space:pre-line;overflow-wrap:anywhere}
#pn-setup .flow-suggestion{display:block;margin-top:3px;color:var(--accent-ink);font-size:12px}
#pn-setup .flow-answer .field-label{margin-top:14px}

/* The action bar sits on the card's right edge: one pill in three inks, primary last, no gloss. */
#pn-setup .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:8px;row-gap:12px;margin-top:14px}
#pn-setup .bar .step-status{flex:0 1 auto;margin-right:auto;text-align:left}
#pn-setup .bar .step-status:empty{display:none}
#pn-setup .guide-actions{margin-top:22px;padding-top:8px;border:0}
#pn-setup .guide-actions .is-primary{margin-left:auto}
#pn-setup .guide-alternatives{display:flex;align-items:center;gap:8px;margin-right:auto}
#pn-setup .guide-alternatives:not(:has(button:not([hidden]))){display:none}
/* Help opens in place, below the decision; it never competes with the save action. */
#pn-setup details.question-help{flex-basis:100%;order:2;min-width:0;margin-top:2px;color:var(--text-2)}
#pn-setup details.question-help>summary{display:flex;align-items:center;gap:6px;width:max-content;min-height:var(--action-small);padding:0 8px;margin-left:-8px;border-radius:var(--r-sm);list-style:none;font:500 13px/1.4 var(--ui);cursor:pointer}
#pn-setup details.question-help>summary::-webkit-details-marker{display:none}
#pn-setup details.question-help>summary:after{content:"";width:12px;height:12px;background:currentColor;mask:var(--chevron) center/contain no-repeat;opacity:.7;transition:rotate var(--m-ui) var(--ease)}
#pn-setup details.question-help[open]>summary:after{rotate:90deg}
#pn-setup details.question-help>summary:hover{background:var(--bg-1);color:var(--text)}
#pn-setup details.question-help>p{max-width:56ch;margin:6px 0 10px;font-size:13px;line-height:1.55}
#pn-setup details.question-help .pill{margin:4px 4px 0 -8px;min-height:var(--action-small);padding-inline:8px;color:var(--accent-ink)}
#pn-setup .pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--action-height);padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 13px/1.2 var(--ui);letter-spacing:-.005em;white-space:nowrap;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),opacity var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
/* The button that saved a decision pops once as the save lands, before its card leaves. */
#pn-setup .pill.is-committed{animation:commit-pop var(--m-pop) var(--ease-expo)}
/* The ghost pill is the only one that takes the tonal hover; the tonal, secondary and primary
   inks each answer for their own rest fill, so none of them can be greyed out from here. */
#pn-setup .pill:not(.is-primary):not(.is-secondary):hover:not(:disabled){background:var(--bg-2);color:var(--text)}
#pn-setup .pill:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .pill:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup .pill:disabled{opacity:.5}
/* White: the same recipe lit from paper, so the button sits on a card instead of sinking into it. */
#pn-setup :is(.pill.is-secondary,.pn-button:not(.pn-primary)){--btn-from:var(--bg-elev);--btn-to:var(--bg-1);border:1px solid var(--line);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 5px -2px rgba(15,12,8,.13)}
#pn-setup :is(.pill.is-secondary,.pn-button:not(.pn-primary)):hover:not(:disabled){--btn-from:var(--bg-elev);--btn-to:var(--bg-elev);border-color:var(--line-2);translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px -6px rgba(15,12,8,.18)}
#pn-setup :is(.pill.is-secondary,.pn-button:not(.pn-primary)):active:not(:disabled){--btn-from:var(--bg-1);--btn-to:var(--bg-2);translate:0 0;box-shadow:inset 0 2px 4px rgba(15,12,8,.1);transition-duration:0s}.pn-button:not(.pn-primary)){--btn-from:rgba(255,255,255,.16);--btn-to:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#F5F1E8;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px -10px rgba(8,16,24,.45);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}.pn-button:not(.pn-primary)):hover:not(:disabled){--btn-from:rgba(255,255,255,.24);--btn-to:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
/* The site's v49 button: blue and white are one recipe, a two-stop face under the nav pill's chrome —
   pill radius, hairline, top rim-light, a 1px lift on hover, a press onto the deep floor. No dome, no sweep. */
#pn-setup :is(.pill.is-primary,.pill.is-secondary,.pn-button){position:relative;isolation:isolate;font:500 14px/1.2 var(--display);letter-spacing:-.005em;padding:0 18px;background:linear-gradient(180deg,var(--btn-from),var(--btn-to));transition:--btn-from var(--m-ui) var(--ease),--btn-to var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease-out),translate var(--m-depth) var(--ease-out),scale var(--m-press) var(--ease-out),opacity var(--m-ui) var(--ease)}
#pn-setup .pill.is-primary{--btn-from:var(--accent);--btn-to:var(--accent-deep);border:1px solid color-mix(in srgb,var(--accent-muted) 80%,transparent);color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 2px 5px -2px color-mix(in srgb,var(--accent-muted) 45%,transparent)}
/* The hover light follows the pointer between the face and the label. */
#pn-setup :is(.pill.is-primary,.pn-button.pn-primary):before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(56px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.24),rgba(255,255,255,0) 64%);opacity:0;transition:opacity 400ms var(--ease-out)}
/* A lifted button vacates a strip of its own hit area; a paint-free pseudo keeps the pointer inside it. */
#pn-setup :is(.pill.is-primary,.pill.is-secondary,.pn-button):after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
#pn-setup :is(.pill.is-primary,.pill.is-secondary,.pn-button):hover:not(:disabled):after{inset:0 0 -1px 0}
#pn-setup :is(.pill.is-primary,.pn-button.pn-primary):hover:not(:disabled){--btn-from:var(--accent-bright);--btn-to:var(--accent);border-color:var(--accent-muted);color:#fff;translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 5px 14px -6px color-mix(in srgb,var(--accent-muted) 52%,transparent)}
#pn-setup :is(.pill.is-primary,.pn-button.pn-primary):hover:not(:disabled):before{opacity:1}
#pn-setup :is(.pill.is-primary,.pn-button.pn-primary):active:not(:disabled){--btn-from:var(--accent-deep);--btn-to:var(--accent-muted);translate:0 0;box-shadow:inset 0 2px 4px rgba(7,38,56,.22);transition-duration:0s}
#pn-setup :is(.pill.is-primary,.pill.is-secondary,.pn-button):disabled{translate:0 0}
#pn-setup .pill.is-primary[data-working]{color:transparent}
#pn-setup#pn-setup .pill.is-primary[data-working] .working-dots{position:absolute;inset:0;display:flex;justify-content:center}
#pn-setup .pill.is-primary .working-dots i{background:#fff}
#pn-setup .pn-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:6px;align-self:flex-start;min-height:var(--action-height);padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg-elev);color:var(--text-2);font:500 13px/1.2 var(--ui);letter-spacing:-.005em;box-shadow:var(--shadow-sm);transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease-out),opacity var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .pn-button:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .pn-button:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup .pn-button:disabled{opacity:.55;scale:1}
#pn-setup .pn-button.pn-primary{--btn-from:var(--accent);--btn-to:var(--accent-deep);border-color:color-mix(in srgb,var(--accent-muted) 80%,transparent);color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 2px 5px -2px color-mix(in srgb,var(--accent-muted) 45%,transparent)}
#pn-setup .pn-button[data-working]:disabled{opacity:.8;cursor:progress}
#pn-setup .pn-button[data-working] .btn-arrow{display:none}
#pn-setup .pn-button[data-working] .working-dots{display:flex}
#pn-setup .btn-arrow{display:inline-block;transition:transform var(--m-depth) var(--ease-expo)}
#pn-setup .pn-button:hover:not(:disabled) .btn-arrow{transform:translateX(2px)}
#pn-setup .back-step{min-height:var(--action-height);padding:8px;color:var(--text-2);white-space:nowrap}
#pn-setup .pn-inline{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#pn-setup .step-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;padding:20px 0;border-top:1px solid var(--line)}
#pn-setup .step-footer .step-status{flex:1 1 180px;line-height:1.6}
#pn-setup .step-footer .pn-button{min-height:var(--action-height);padding-inline:14px}
#pn-setup #onboard-status{margin-right:8px;font-size:12px;text-align:right}
#pn-setup .link-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:auto;margin:12px -24px -18px;padding:12px 24px;border:0;border-top:1px solid var(--line);border-radius:0 0 15px 15px;background:transparent;color:var(--accent-ink);font:500 13px/1.4 var(--ui);text-align:left;transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .link-row:after{content:"›";display:inline-block;color:var(--text-3);font-size:16px;transition:transform var(--m-depth) var(--ease-expo)}
#pn-setup .link-row:hover:not(:disabled){background:var(--bg-2)}
#pn-setup .link-row:hover:not(:disabled):after{transform:translateX(2px)}
#pn-setup .link-row:active:not(:disabled){scale:.995;transition-duration:0s}
#pn-setup .link-row:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
#pn-setup .guide-recap{display:flex;flex-direction:column;gap:2px;margin:14px -8px 0;padding:0;border:0}
#pn-setup .guide-recap>div{display:block;padding:9px 10px;border:0;border-radius:10px;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .guide-recap>div:hover{background:var(--bg-2)}
#pn-setup .guide-recap dt{color:var(--text-3);font-size:13px;line-height:1.5}
#pn-setup .guide-recap dd{margin:1px 0 0;font-size:15px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}

/* Platform tiles: borderless at rest; the ring is only on the one that is chosen. */
#pn-setup #compare-note{margin-top:10px;color:var(--text-3);font-size:13px}
#pn-setup .quiet-line{margin-top:12px;color:var(--text-3);font-size:13px}
#pn-setup .quiet-line:empty{display:none}
#pn-setup .evidence-group{margin-top:14px}
#pn-setup .evidence-group>summary{min-height:30px;color:var(--text-3);font:400 13px/1.4 var(--ui);cursor:pointer;transition:color var(--m-ui) var(--ease)}
#pn-setup .evidence-group>summary:hover{color:var(--text-2)}
#pn-setup .evidence-group>summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* An opened disclosure hands its rows up in sequence, five deep and then all together. */
#pn-setup :is(.ledger,.assessment-evidence)>*{--n:5}
#pn-setup :is(.ledger,.assessment-evidence)>*:nth-child(1){--n:0}
#pn-setup :is(.ledger,.assessment-evidence)>*:nth-child(2){--n:1}
#pn-setup :is(.ledger,.assessment-evidence)>*:nth-child(3){--n:2}
#pn-setup :is(.ledger,.assessment-evidence)>*:nth-child(4){--n:3}
#pn-setup :is(.ledger,.assessment-evidence)>*:nth-child(5){--n:4}
#pn-setup .evidence-group[open] .assessment-evidence>*{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(var(--n,0) * 30ms)}
#pn-setup .platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px -6px 0}
#pn-setup .platform{position:relative;display:flex;flex-direction:column;gap:5px;padding:14px 14px 12px;border:1px solid transparent;border-radius:13px;background:transparent;transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .platform:hover{background:var(--bg-2)}
#pn-setup .platform:active{scale:.992;transition-duration:0s}
#pn-setup .platform.is-selected{border-color:var(--accent-edge);background:var(--bg-elev);box-shadow:0 0 0 1px var(--accent-edge)}
#pn-setup .platform .head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
#pn-setup .platform .id{display:flex;align-items:center;gap:8px;color:var(--text-3);font:500 12px/1.4 var(--ui)}
#pn-setup .platform .tile{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;border:1px solid light-dark(transparent,var(--line));border-radius:7px;background:#262626}
#pn-setup .platform .tile img{width:17px;height:17px;object-fit:contain}
#pn-setup .platform .tile img[data-v=openai]{width:25px;height:25px}
#pn-setup .platform .tile img[data-v=xai]{width:24px;height:24px}
#pn-setup .platform .tile img[data-v=microsoft]{width:18px;height:18px}
#pn-setup .platform .tile img[data-invert]{filter:brightness(0) invert(1)}
/* Claude keeps its own clay mark on the dark tile, as in the app icon. */
#pn-setup .platform .tile.is-claude:before{content:"";width:23px;height:23px;background:var(--gold);-webkit-mask:var(--vendor-mark) center/contain no-repeat;mask:var(--vendor-mark) center/contain no-repeat}
#pn-setup .platform h3{margin:0;font:400 18px/1.25 var(--display);letter-spacing:-.3px}
#pn-setup .platform>p{margin:0;color:var(--text-2);font-size:13px;line-height:1.55}
#pn-setup .platform .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
#pn-setup .platform .more{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--text-2);font:400 13px/1.5 var(--ui);transition:color var(--m-ui) var(--ease)}
#pn-setup .platform .more:after{content:"";width:11px;height:11px;background:currentColor;-webkit-mask:var(--chevron) center/contain no-repeat;mask:var(--chevron) center/contain no-repeat;transition:rotate var(--m-ui) var(--ease),translate 200ms var(--ease-out)}
#pn-setup .platform .more[aria-expanded=true]:after{rotate:90deg}
#pn-setup .platform .more:hover:not(:disabled){color:var(--text)}
/* The tonal pill: a wash of the row's own ink at rest, one step up on hover. The step is a wash,
   not --bg-2: the tile under it takes --bg-2 on the same hover, and the pill would vanish into it. */
#pn-setup .platform .pill{min-height:28px;padding:0 12px;background:color-mix(in srgb,var(--text-3) 12%,transparent);color:var(--text-2);font-size:13px}
#pn-setup .platform .pill:hover:not(:disabled){background:color-mix(in srgb,var(--text-3) 22%,transparent);color:var(--text)}
#pn-setup .platform .tag{padding:3px 9px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--text-2);font:500 12px/1.4 var(--ui);white-space:nowrap}
#pn-setup .platform.is-selected .tag{background:var(--accent-soft);color:var(--accent-ink)}
#pn-setup .platform .platform-details{margin-top:4px;padding-top:0;border:0}
#pn-setup .platform .platform-details>summary{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* An opened tile is reading matter, not a disabled state: the body keeps its own ink in both appearances. */
#pn-setup .platform-details-body{padding-top:8px;border-top:1px solid var(--line);color:var(--text-2);font-size:13px}
#pn-setup .platform-details-body h4{margin-top:12px;color:var(--text);font-weight:500}
#pn-setup .platform-details-body :is(p,li,.pn-sub,.pn-small){color:var(--text-2)}
#pn-setup .platform-details-body .card-sources :is(span,li){color:var(--text-3)}
#pn-setup .platform-details-body>p,#pn-setup .platform-details-body>ul{margin-top:6px}
#pn-setup .card-models{font-size:13px;line-height:1.5}
#pn-setup .card-sources{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);overflow-wrap:anywhere}
#pn-setup .card-sources ul{margin:0;padding:0;list-style:none;font-size:12px;line-height:1.6}
#pn-setup .assessment-evidence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:4px}
#pn-setup .assessment-evidence>.pn-small{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.55}
#pn-setup .candidate-evidence{min-width:0;padding:10px 0;border-top:1px solid var(--line)}
#pn-setup .candidate-evidence summary{cursor:pointer;font-size:13px;font-weight:500}
#pn-setup .candidate-evidence .pn-detail{margin:0;padding:10px 0 0;border:0;background:none;box-shadow:none}
#pn-setup .candidate-evidence .pn-detail>h3{display:none}
#pn-setup .candidate-evidence .pn-detail>a{display:inline-block;margin:6px 12px 0 0;font-size:13px;line-height:1.7}

/* The picker: four tiles that are the control itself. Tap one, read why it fits, continue.
   The tiles sit white on the card's ground; the chosen one wears the ring and a check. */
#pn-setup .picker{min-width:0;margin:0;padding:0;border:0}
#pn-setup .picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#pn-setup .picker-tile{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start;min-height:112px;padding:14px 40px 14px 14px;border:1px solid transparent;border-radius:14px;background:var(--bg-elev);cursor:pointer;transition:background-color var(--m-ui) var(--ease),border-color var(--m-depth) var(--ease),box-shadow var(--m-depth) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .picker-tile>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#pn-setup .picker-tile:active{scale:.985;transition-duration:0s}
#pn-setup .picker-tile:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}
#pn-setup .picker-tile.is-picked{border-color:var(--accent-edge);box-shadow:0 0 0 1px var(--accent-edge)}
#pn-setup .picker-tile .tile{display:grid;place-items:center;width:34px;height:34px;border:1px solid light-dark(transparent,var(--line));border-radius:9px;background:#262626}
#pn-setup .picker-tile .tile img{width:22px;height:22px;object-fit:contain}
#pn-setup .picker-tile .tile img[data-v=openai]{width:32px;height:32px}
#pn-setup .picker-tile .tile img[data-v=xai]{width:30px;height:30px}
#pn-setup .picker-tile .tile img[data-v=microsoft]{width:23px;height:23px}
#pn-setup .picker-tile .tile img[data-invert]{filter:brightness(0) invert(1)}
#pn-setup .picker-tile .tile.is-claude:before{content:"";width:30px;height:30px;background:var(--gold);-webkit-mask:var(--vendor-mark) center/contain no-repeat;mask:var(--vendor-mark) center/contain no-repeat}
#pn-setup .picker-body{display:flex;flex-direction:column;min-width:0}
#pn-setup .picker-body strong{font:400 17px/1.25 var(--display);letter-spacing:-.3px}
#pn-setup .picker-body small{margin-top:1px;color:var(--text-3);font-size:12px;line-height:1.4}
#pn-setup .picker-summary{margin-top:8px;color:var(--text-2);font-size:13px;line-height:1.5}
/* The check and the Suggested tag share the corner: the check takes it once the tile is picked. */
#pn-setup .picker-check{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent-ink);color:#fff;opacity:0;scale:.6;transition:opacity var(--m-ui) var(--ease),scale var(--m-depth) var(--ease-out)}
#pn-setup .picker-check-mark{display:grid;place-items:center}
#pn-setup .picker-check-mark svg{width:11px;height:11px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#pn-setup .picker-tile.is-picked .picker-check{opacity:1;scale:1;animation:commit-pop var(--m-pop) var(--ease-expo)}
#pn-setup .picker-tile .tag{position:absolute;top:12px;right:12px;padding:2px 8px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font:500 11px/1.5 var(--ui);white-space:nowrap;transition:opacity var(--m-ui) var(--ease)}
#pn-setup .picker-tile.is-picked .tag{opacity:0}
#pn-setup .flow-card.is-new .picker-tile{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(90ms + var(--n,0) * 40ms)}
#pn-setup .picker-grid>.picker-tile:nth-child(2){--n:1}
#pn-setup .picker-grid>.picker-tile:nth-child(3){--n:2}
#pn-setup .picker-grid>.picker-tile:nth-child(4){--n:3}
/* One panel under the grid says why the picked platform fits and what it comes with. */
#pn-setup .picker-detail{margin-top:12px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg-elev)}
#pn-setup .picker-detail.is-new{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup .picker-reason{margin:0 0 12px;color:var(--accent-ink);font-size:14px;line-height:1.55}
#pn-setup .picker-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0;font-size:13px;line-height:1.5}
#pn-setup .picker-facts dt{color:var(--text-3)}
#pn-setup .picker-facts dd{margin:0;color:var(--text-2);overflow-wrap:anywhere}
#pn-setup .picker-more{margin-top:12px}
#pn-setup .picker-more>summary{display:flex;align-items:center;gap:6px;width:max-content;min-height:30px;margin-left:-8px;padding:0 8px;border-radius:var(--r-sm);list-style:none;color:var(--text-2);font:500 13px/1.4 var(--ui);cursor:pointer;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease)}
#pn-setup .picker-more>summary::-webkit-details-marker{display:none}
#pn-setup .picker-more>summary:after{content:"";width:12px;height:12px;background:currentColor;mask:var(--chevron) center/contain no-repeat;opacity:.7;transition:rotate var(--m-ui) var(--ease),translate 200ms var(--ease-out)}
#pn-setup .picker-more[open]>summary:after{rotate:90deg}
#pn-setup .picker-more-body{padding-top:6px;color:var(--text-2);font-size:13px;line-height:1.55}
#pn-setup .picker-more-body h4{margin:12px 0 4px;color:var(--text);font:500 13px/1.4 var(--ui)}
#pn-setup .picker-more-body ul{margin:0;padding-left:18px}
#pn-setup .picker-more-body li{margin:2px 0}
#pn-setup .picker-more-body .picker-sources{list-style:none;padding:0}
#pn-setup .picker-more-body .pill{margin:12px 0 0 -14px;color:var(--accent-ink)}
#pn-setup .picker .guide-actions{justify-content:space-between;align-items:center;gap:12px}
#pn-setup .picker .guide-actions .quiet-line{flex:1 1 auto;margin:0;font-size:12px}
/* The report card closes the thread: the app's mark, two facts and the way to read it. */
#pn-setup .plan-module{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 7%,var(--bg-elev)),var(--bg-elev) 60%)}
#pn-setup .plan-module>h2{display:flex;align-items:baseline;gap:10px}
#pn-setup .plan-module>h2:before{content:"";width:16px;height:16px;flex:none;align-self:center;background:var(--mark-3x3) center/contain no-repeat}
#pn-setup .facts{display:flex;gap:24px;margin:20px 0 6px;padding-top:18px;border-top:1px solid var(--line)}
#pn-setup .facts div{flex:1;min-width:0;padding:0}
#pn-setup .facts b{display:block;font:400 22px/1.15 var(--display);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
#pn-setup .facts span{display:block;margin-top:4px;color:var(--text-3);font-size:12px;line-height:1.4}
#pn-setup #plan-module-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
#pn-setup #plan-module-facts>p{grid-column:1/-1;max-width:60ch;margin:0;color:var(--text-2);font-size:12px;line-height:1.6}
#pn-setup .plan-module .bar{justify-content:flex-start;margin-top:22px}
#pn-setup .assembling{flex:1 0 100%;margin:4px 0 0;color:var(--text-3);font:13px/1.6 var(--ui)}
#pn-setup .plan-module.is-new{animation:materialize var(--m-enter) var(--ease-out) backwards}
#pn-setup .plan-module.is-new .facts b{animation:fade-in var(--m-depth) var(--ease) 200ms backwards}
/* On a wide screen the finished report closes the rail instead of the thread. */
/* The report card keeps its own accent-lit ground in the thread and in the rail (as in PR #12). */
#pn-setup.flow-enabled .plan-module{border-color:color-mix(in srgb,var(--accent) 22%,var(--line));background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 8%,var(--bg-elev)),var(--bg-elev) 62%)}
#pn-setup.flow-enabled .progress-panel>.plan-module{margin-top:20px;padding:20px;border-radius:var(--r-lg)}
#pn-setup.flow-enabled .progress-panel>.plan-module h2{font-size:20px;line-height:1.25;letter-spacing:-.4px}
#pn-setup.flow-enabled .progress-panel>.plan-module .facts{gap:12px;margin:16px 0 4px;padding-top:14px}
#pn-setup.flow-enabled .progress-panel>.plan-module #plan-module-facts{grid-template-columns:1fr;gap:10px}
#pn-setup .facts b,#pn-setup #plan-pages .report-figures b{white-space:nowrap}
#pn-setup.flow-enabled .progress-panel>.plan-module .facts b{font-size:22px}
#pn-setup.flow-enabled .progress-panel>.plan-module .facts span{font-size:12px}
/* The rail's report card never lets a button leave the card: the two stack when the rail is narrow. */
#pn-setup.flow-enabled .progress-panel>.plan-module .bar{flex-direction:column;align-items:stretch;gap:8px;margin-top:18px}
#pn-setup.flow-enabled .progress-panel>.plan-module .bar>.pill{justify-content:center;margin:0}
#pn-setup.flow-enabled .progress-panel>.plan-module .pill{min-height:34px;padding:0 12px;font-size:12px}

/* The engagement card: the same shell, its options as selection rows. */
/* The closing card: three ways forward as three white plates in a row, the site's card inside the card. */
#pn-setup #engagement-form fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;border:0}
#pn-setup .engagement-option{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-content:start;align-items:start;min-height:0;margin:0;padding:14px 14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-elev);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,12,8,.04);cursor:pointer;transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .engagement-option>input{margin-top:3px}
#pn-setup .engagement-option:hover:not(:has(input:checked)):not(:has(input:disabled)){border-color:var(--line-2);background:var(--bg-elev)}
#pn-setup .engagement-option:active:not(:has(input:disabled)){scale:.985;transition-duration:0s}
#pn-setup .engagement-option:has(input:checked){border-color:var(--accent-edge);background:color-mix(in srgb,var(--accent) 6%,var(--bg-elev));box-shadow:0 0 0 1px var(--accent-edge),inset 0 1px 0 rgba(255,255,255,.7)}
#pn-setup .engagement-option:has(input:focus-visible){outline:2px solid var(--accent-ink);outline-offset:2px}
#pn-setup .engagement-option:has(input:disabled){cursor:default;opacity:.65}
#pn-setup .engagement-option strong{display:block;font:500 15px/1.5 var(--ui)}
#pn-setup .engagement-option small{display:block;margin-top:2px;color:var(--text-3);font-size:13px;line-height:1.45}
#pn-setup :is(.engagement-option,.engagement-contact) input{width:18px;height:18px;flex:none;margin:0;appearance:none;border:1.5px solid var(--line-2);border-radius:50%;background:var(--bg-elev);box-shadow:inset 0 0 0 4px var(--bg-elev);transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease)}
#pn-setup .engagement-contact input{position:relative;border-radius:6px;box-shadow:inset 0 0 0 3px var(--bg-elev)}
/* The checkbox draws a check rather than hollowing out: the same tick every puck in the app uses. */
#pn-setup .engagement-contact input:after{content:"";position:absolute;inset:0;background:#fff;mask:var(--check) center/12px 12px no-repeat;opacity:0;scale:.4;transition:opacity var(--m-press) var(--ease),scale 200ms var(--ease-out)}
#pn-setup .engagement-contact input:checked{box-shadow:none}
#pn-setup .engagement-contact input:checked:after{opacity:1;scale:1}
#pn-setup :is(.engagement-option,.engagement-contact) input:checked{border-color:var(--accent-ink);background:var(--accent-ink);animation:commit-pop var(--m-pop) var(--ease-expo)}
#pn-setup :is(.engagement-option,.engagement-contact) input:focus-visible{outline:none}
#pn-setup .engagement-contact{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:center;min-height:44px;margin:8px -8px 0;padding:0 12px 0 10px;border-radius:11px;font-size:14px;line-height:1.5;cursor:pointer;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .engagement-module .field-hint{margin-top:10px;font-size:13px;line-height:1.6}
/* The contact line: consent on the left, a quiet way to reach Patchnet now on the right. */
#pn-setup .engagement-contact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:10px}
#pn-setup .engagement-contact-row .engagement-contact{margin-top:0}
#pn-setup .engagement-link{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 10px;margin-right:-10px;border-radius:10px;color:var(--text-2);font-size:13px;text-decoration:none;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease)}
#pn-setup .engagement-link>span{display:inline-block;transition:translate 200ms var(--ease-out)}
#pn-setup #engagement-saved{margin-top:10px}
#pn-setup #engagement-saved:empty{display:none}
#pn-setup #engagement-saved:not(:empty){color:var(--accent-ink);font:13px/1.6 var(--ui)}

/* The closing line: the thread's own last words, in the intro's quiet register. Never a reply. */

/* The progress rail: every closed decision, ready to reopen. */
#pn-setup .progress-panel{position:sticky;top:calc(var(--chrome-h) + 24px);min-width:0;max-height:calc(100dvh - var(--chrome-h) - 48px);overflow-x:hidden;overflow-y:auto;padding:12px 16px 24px 24px;border-left:1px solid var(--line);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable;scroll-padding-block:12px}
#pn-setup .progress-panel:hover,#pn-setup .progress-panel:focus-within{scrollbar-color:color-mix(in srgb,var(--text) 18%,transparent) transparent}
#pn-setup .progress-panel::-webkit-scrollbar-thumb{background:transparent}
#pn-setup .progress-panel:hover::-webkit-scrollbar-thumb,#pn-setup .progress-panel:focus-within::-webkit-scrollbar-thumb{background:#9b9b9b55}
#pn-setup .progress-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#pn-setup .progress-heading h2{margin:0;font:400 22px/1.2 var(--display);letter-spacing:-.5px}
#pn-setup .progress-count{max-width:14ch;color:var(--text-3);font:400 12px/1.45 var(--ui);text-align:right;font-variant-numeric:tabular-nums;text-wrap:balance}
#pn-setup .progress-intro{margin:8px 0 18px;color:var(--text-3);font-size:13px;line-height:1.55}
/* PR #12 is the baseline: one persistent thread and its progress rail. */
#pn-setup.flow-enabled .progress-intro{display:none}
/* One conversation per case in flow mode: the history disclosure has nothing to list. */
#pn-setup.flow-enabled .conversation-list{display:none}
#pn-setup.flow-enabled .progress-heading{margin-bottom:16px}
#pn-setup #ledger{display:flex;flex-direction:column;gap:8px}
#pn-setup .progress-step{margin:0;border:0;border-radius:var(--r-md);background:transparent}
/* A step with nothing saved behind it is a row, not a disclosure: no chevron, no pointer. */
#pn-setup .progress-step>:is(summary,.progress-line){display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 10px;border-radius:var(--r-md);list-style:none;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .progress-step>summary{cursor:pointer}
#pn-setup .progress-step>summary::-webkit-details-marker{display:none}
#pn-setup .progress-step>summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
#pn-setup .progress-step>summary:after{content:"";flex:none;width:14px;height:14px;margin-left:auto;opacity:.7;background:currentColor;mask:var(--chevron) center/contain no-repeat;transition:rotate var(--m-ui) var(--ease),opacity var(--m-ui) var(--ease)}
#pn-setup .progress-step[open]>summary:after{rotate:90deg}
#pn-setup .progress-step>:is(summary,.progress-line)>div{min-width:0}
#pn-setup .progress-step>:is(summary,.progress-line) strong{display:block;font:500 15px/1.5 var(--ui);letter-spacing:-.1px}
#pn-setup .progress-step>:is(summary,.progress-line)>div>span{display:block;margin-top:3px;color:var(--text-3);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#pn-setup .progress-step[data-state=upcoming]>:is(summary,.progress-line) strong{color:var(--text-3)}
#pn-setup .progress-marker{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:var(--text-3);font:11px/1 var(--mono);font-variant-numeric:tabular-nums;transition:background-color var(--m-depth) var(--ease),border-color var(--m-depth) var(--ease),color var(--m-depth) var(--ease)}
/* The numeral and the check share one cell: closing a stage fades the number as the tick is drawn. */
#pn-setup .progress-marker>.n,#pn-setup .progress-marker>svg{grid-area:1/1;transition:opacity var(--m-ui) var(--ease)}
#pn-setup .progress-marker>.n{font-style:normal}
#pn-setup .progress-marker:has(.n)>svg{opacity:0}
#pn-setup .progress-step[data-state=complete] .progress-marker>.n{opacity:0}
#pn-setup .progress-step[data-state=complete] .progress-marker>svg{opacity:1}
#pn-setup .progress-step[data-state=current] .progress-marker>.n{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup .progress-step[data-just-completed] .progress-marker>.n{animation:fade-out var(--m-press) var(--ease) forwards}
/* The rail's four steps arrive in sequence the first time a case is drawn. */
#pn-setup #ledger.is-arriving>.progress-step{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(var(--n,0) * 40ms)}
#pn-setup #ledger>.progress-step:nth-child(2){--n:1}
#pn-setup #ledger>.progress-step:nth-child(3){--n:2}
#pn-setup #ledger>.progress-step:nth-child(4){--n:3}
#pn-setup .progress-marker svg{width:12px;height:12px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#pn-setup .progress-step[data-state=complete] .progress-marker{border-color:transparent;background:var(--accent-ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#pn-setup .progress-step[data-state=current] .progress-marker{border-color:transparent;background:var(--accent-soft);color:var(--accent-ink)}
#pn-setup .progress-step[data-just-completed] .progress-marker{animation:commit-pop var(--m-pop) var(--ease-expo)}
#pn-setup .progress-step[data-just-completed] .progress-marker svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:check-draw var(--m-draw) var(--ease-out) 40ms forwards}
#pn-setup .progress-step .ledger{display:flex;flex-direction:column;gap:0;margin:2px 4px 10px 22px;padding:0 0 6px 14px;border:0}
#pn-setup .progress-step[open] .ledger>*{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(var(--n,0) * 30ms)}
#pn-setup .progress-note{margin:4px 0 0;color:var(--text-3);font-size:13px;line-height:1.6}
#pn-setup .progress-step .pill{align-self:flex-start;margin-top:12px}
/* A rounded row takes no inset hairline: the rows of an opened step separate on their own air. */
#pn-setup .progress-panel .row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;margin:0 -8px;padding:9px 8px;border:0;border-radius:8px;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .progress-panel .row>.check{display:none}
#pn-setup .row.is-new{animation:materialize var(--m-enter) var(--ease-out) backwards}
#pn-setup .row .q{color:var(--text-3);font-size:13px;line-height:1.5}
#pn-setup .row .a{margin-top:1px;font-size:15px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
#pn-setup .progress-panel .row .q{font-size:12px;line-height:1.4}
#pn-setup .progress-panel .row .a{margin-top:3px;font-size:14px;line-height:1.5}
#pn-setup .row.is-skipped .a{color:var(--text-3)}
#pn-setup .row .pn-link{align-self:center;min-height:var(--action-small);padding:0 8px;border-radius:var(--r-sm);color:var(--text-2);font-size:13px;text-decoration:none;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .row .pn-link:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-ink);text-decoration:none}
#pn-setup .row .pn-link:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .check{display:grid;place-items:center;width:18px;height:18px;border:1px solid var(--accent);border-radius:6px;background:var(--accent)}
#pn-setup .check svg{width:11px;height:11px;overflow:visible;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* The brief: the whole record, one disclosure at the foot of the rail. */

/* Dialogs: the report, and the rail as a sheet on phones. */
#pn-setup :is(.progress-dialog,.plan-dialog){padding:0;border:1px solid var(--line);border-radius:22px;background:var(--bg);color:var(--text);box-shadow:var(--dialog-shadow);max-height:90dvh;overscroll-behavior:contain;--arrive:12px}
#pn-setup dialog::backdrop{background:rgba(16,23,25,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#pn-setup .plan-dialog{width:min(920px,calc(100vw - 48px));height:90dvh;scroll-padding-top:calc(var(--dialog-top-h,60px) + 70px);scroll-padding-bottom:24px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--text) 20%,transparent) transparent}
#pn-setup .dialog-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:60px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--bg);font:500 15px/1.4 var(--ui)}
#pn-setup .dialog-actions{display:flex;align-items:center;gap:12px}
#pn-setup #report-brief{background:transparent;font-size:13px}
#pn-setup #report-brief:hover:not(:disabled){background:var(--bg-2);color:var(--text)}
#pn-setup .dialog-close{display:grid;place-items:center;width:var(--action-small);height:var(--action-small);flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-2);font-size:22px;line-height:1;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .dialog-close:hover{background:var(--bg-2);color:var(--text)}
#pn-setup .dialog-close:active{scale:.96;transition-duration:0s}
#pn-setup .dialog-close:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup .report-nav{position:sticky;top:var(--dialog-top-h,60px);z-index:2;display:flex;flex:none;gap:6px;padding:10px 24px;overflow-x:auto;background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
#pn-setup .report-nav button{min-height:var(--action-height);padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-2);font:500 13px/1.3 var(--ui);white-space:nowrap;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .report-nav button:hover{background:var(--bg-1)}
#pn-setup .report-nav button[aria-current=page]{background:var(--accent-soft);color:var(--accent-ink)}
#pn-setup .report-nav button:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .report-nav button:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}

/* The dock: the Pocket capture form. One row, glass, an ink send that turns accent when it can fire. */
/* The veil is a blur, not a wash: no colour is painted over the thread. The blur is full behind the
   bar and the strip under it, and it lets go gently above the bar, so text scrolls into focus.
   In the flow it runs the full width of the window, so the blur has no side edge to show. */
#pn-setup .veil{position:fixed;left:var(--flow-edge);right:calc(var(--flow-edge) + var(--progress-width) + var(--flow-gap));bottom:0;z-index:19;height:var(--dock-clearance);pointer-events:none;background:none;-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.7) 16%,#000 32%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.7) 16%,#000 32%)}
#pn-setup .dock{position:fixed;left:var(--flow-edge);right:calc(var(--flow-edge) + var(--progress-width) + var(--flow-gap));bottom:calc(var(--dock-inset) + var(--kb,0px) + env(safe-area-inset-bottom));z-index:20;padding:0;pointer-events:none}
#pn-setup.flow-enabled .veil{left:0;right:0;width:auto;translate:none}
#pn-setup .dock-inner{max-width:680px;margin:0 auto;pointer-events:none}
#pn-setup .dock .intents,#pn-setup .dock .pn-compose{pointer-events:auto}
#pn-setup[data-phase=start] .dock,#pn-setup[data-phase=start] .veil,#pn-setup[data-phase=account] .dock,#pn-setup[data-phase=account] .veil,#pn-setup:has(#sign-in:not([hidden])) .dock,#pn-setup:has(#sign-in:not([hidden])) .veil,#pn-setup:has(#load-failed:not([hidden])) .dock,#pn-setup:has(#load-failed:not([hidden])) .veil{display:none}
#pn-setup .intents{display:flex;margin:0 0 10px 2px}
#pn-setup #step-prompt-buttons{display:flex;gap:6px}
/* The questions above the bar are white plates on the blur: a solid face, a hairline, a rim-light, a 1px lift. */
#pn-setup .intent{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-elev);color:var(--text-2);font:500 13px/1.2 var(--ui);text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,12,8,.06),0 4px 10px -6px rgba(15,12,8,.14);animation:chip-in var(--m-enter) var(--ease-out) var(--d,0ms) backwards;transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease-out),translate var(--m-depth) var(--ease-out),scale var(--m-press) var(--ease-out)}.idea,.draft-reminder){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -10px rgba(0,0,0,.5)}.picker-tile,.picker-detail){box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#pn-setup .intent:hover:not(:disabled){border-color:var(--line-2);background:var(--bg-elev);color:var(--text);translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px -6px rgba(15,12,8,.18)}
#pn-setup .intent:active:not(:disabled){scale:.96;transition-duration:0s}
#pn-setup .intent svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:var(--text-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--m-ui) var(--ease)}
#pn-setup .intent:hover:not(:disabled) svg{stroke:var(--accent-ink)}
#pn-setup .pn-compose{margin:0}
#pn-setup .latest-reply{display:block;width:max-content;min-height:var(--action-small);margin:0 auto 12px;padding:0 14px;border:1px solid color-mix(in srgb,var(--line-2) 55%,transparent);border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg-elev) 78%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);font:500 13px/1.2 var(--ui);animation:chip-in var(--m-enter) var(--ease-out) backwards;transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .latest-reply:hover{background:var(--bg-elev)}
/* The flow follows the reply itself; a "latest reply" pill has no job here and only lifts the dock. */
#pn-setup.flow-enabled .latest-reply{display:none}
#pn-setup .latest-reply:active{scale:.96;transition-duration:0s}
#pn-setup #current-question-link{display:flex;align-items:center;gap:7px;width:max-content;max-width:100%;min-height:var(--action-small);margin:0 auto 10px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-elev);color:var(--text-2);box-shadow:var(--shadow-sm);font:500 12px/1.4 var(--ui);text-align:left;pointer-events:auto;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup #current-question-link:before{content:"";width:12px;height:12px;flex:none;background:currentColor;mask:var(--chevron) center/contain no-repeat;rotate:-90deg}
#pn-setup #current-question-link:hover{background:var(--bg-1);color:var(--accent-ink)}
#pn-setup #current-question-link:active{scale:.98;transition-duration:0s}
#pn-setup .conversation-availability,#pn-setup .draft-reminder{margin:0 0 8px 4px;color:var(--text-3);font-size:12px;line-height:1.5}
#pn-setup .conversation-availability{margin:0 12px 10px;color:var(--text-2);text-align:center}
/* The draft note is a line beside the composer, not a box competing with it; it fades in rather than popping. */
#pn-setup .pn-compose{position:relative}
#pn-setup .draft-reminder{position:absolute;right:6px;bottom:100%;width:max-content;margin:0 0 12px;padding:0 10px;line-height:26px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-elev);color:var(--text-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,12,8,.05);opacity:1;transition:opacity 160ms var(--ease),display 160ms allow-discrete}
@starting-style{#pn-setup .draft-reminder{opacity:0}}
#pn-setup .composer{display:flex;align-items:flex-end;gap:10px;padding:6px 6px 6px 18px;border:1px solid color-mix(in srgb,var(--bg-elev) 55%,transparent);border-radius:27px;background:color-mix(in srgb,var(--bg-elev) 76%,transparent);box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent),0 8px 28px rgba(15,12,8,.09),0 2px 8px rgba(15,12,8,.05),inset 0 1px 0 rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:box-shadow var(--m-depth) var(--ease),border-color var(--m-depth) var(--ease),opacity var(--m-depth) var(--ease)}
#pn-setup .composer:focus-within{box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 12%,transparent),0 12px 34px rgba(15,12,8,.12),0 2px 8px rgba(15,12,8,.06),inset 0 1px 0 rgba(255,255,255,.8)}
#pn-setup .composer:has(#message:focus-visible){box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 12%,transparent),0 0 0 3px var(--accent-soft),0 12px 34px rgba(15,12,8,.12)}
#pn-setup .composer.fired{animation:pill-recoil var(--m-enter) var(--ease-out)}
#pn-setup .composer textarea{flex:1;min-width:0;min-height:40px;max-height:144px;padding:9px 0 8px;overflow-y:auto;border:0;background:transparent;color:var(--text);font:16px/1.5 var(--ui);resize:none;scrollbar-width:none}
#pn-setup .composer textarea:focus-visible{outline:none}
#pn-setup .composer textarea::placeholder{color:var(--text-3);opacity:.7}
/* Prod's send disc: a white disc with an ink arrow at rest; the accent dome with its sheen once there is
   something to send. One motion on press, the shrink; no hop on hover. */
#pn-setup .pn-send{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;padding:0;border:1px solid var(--line-2);border-radius:50%;background:var(--bg-elev);color:var(--text);box-shadow:0 1px 2px rgba(15,12,8,.06);transition:transform var(--m-depth) var(--ease-expo),background-color var(--m-depth) var(--ease),border-color var(--m-depth) var(--ease),color var(--m-depth) var(--ease),box-shadow var(--m-depth) var(--ease),filter var(--m-ui) var(--ease-out)}
/* A sent message leaves one pop on the button that fired it. */
#pn-setup .pn-send.fired{animation:send-pop 520ms var(--ease-expo)}
/* Ink at rest, accent when it can fire: an empty composer is not a disabled one. */
#pn-setup .pn-send:disabled{opacity:1}
/* A turn in flight: the motes breathe on the ink ground, never a spinner ring. */
#pn-setup .pn-send[data-working] svg{opacity:0}
#pn-setup .pn-send[data-working] .working-dots{position:absolute;inset:0;display:flex;justify-content:center}
#pn-setup .pn-send .working-dots i{background:currentColor}
#pn-setup .pn-send svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;translate:0 -.5px;transition:translate 200ms var(--ease-out),opacity var(--m-ui) var(--ease)}
#pn-setup .pn-send:active:not(:disabled){transform:scale(.9)}
#pn-setup .pn-send:focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup #message:not(:placeholder-shown)~.pn-send:not(:disabled){border-color:color-mix(in srgb,var(--accent-muted) 70%,var(--accent));background:radial-gradient(130% 115% at 28% 4%,rgba(255,255,255,.32) 0%,rgba(255,255,255,0) 50%),linear-gradient(180deg,var(--accent-hot) 0%,var(--accent) 54%,var(--accent-muted) 100%);color:#fff;box-shadow:inset 0 1px 1.5px rgba(255,255,255,.4),inset 0 -1px 1.5px rgba(0,0,0,.26),0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent),0 7px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
#pn-setup #message:not(:placeholder-shown)~.pn-send:not(:disabled):hover{filter:brightness(1.07);box-shadow:inset 0 1px 1.5px rgba(255,255,255,.46),inset 0 -1px 1.5px rgba(0,0,0,.22),0 0 0 4px color-mix(in srgb,var(--accent) 13%,transparent),0 8px 22px -9px color-mix(in srgb,var(--accent) 72%,transparent)}
#pn-setup .pn-send[data-working]{background:var(--bg-elev);color:var(--text);border-color:color-mix(in srgb,var(--accent) 70%,#fff 30%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
#pn-setup .pn-compose[data-disabled=true] .composer{opacity:.55}
#pn-setup#pn-setup .pn-compose[data-disabled=true] .pn-send{opacity:1;background:var(--bg-2);color:var(--text-3);box-shadow:none}
#pn-setup#pn-setup .pn-compose[data-disabled=true] .pn-send[data-working]{background:var(--bg-elev);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent)}
#pn-setup .pn-compose[data-offline=true] .composer{opacity:1;border-color:var(--line);background:var(--bg);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#pn-setup .pn-compose[data-offline=true] .pn-send{display:none}
#pn-setup .compose-hint{display:block;margin:8px 0 0;font-size:11px;text-align:center}

/* Start page: the Nebula hero, the four-step list and the privacy disclosure. */
#pn-setup #start-view{max-width:1280px}
#pn-setup .intro-hero{position:relative;isolation:isolate;overflow:hidden;min-height:360px;padding:52px 56px 48px;border:1px solid light-dark(transparent,rgba(255,255,255,.08));border-radius:22px;background:#1a1815;color:#fff}
/* The ground sits a little larger than its frame and drifts against the pointer, so the hero has depth. */
#pn-setup .hero-glaze{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;scale:1.06;translate:calc((.5 - var(--px,.5)) * 12px) calc((.5 - var(--py,.5)) * 10px);transition:opacity var(--m-struct) var(--ease),translate 900ms var(--ease-out)}
/* In flow mode the four stages close the hero: one line each, on the glaze's own ground. */
/* Wide screens: the copy holds the left, the four stages stand as a column on the right, both on
   the glaze; phones stack them. */
#pn-setup.flow-enabled .intro-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);align-items:end;column-gap:48px;min-height:400px}
#pn-setup.flow-enabled .intro-hero .hero-copy{align-self:center}
#pn-setup.flow-enabled .intro-hero .phase-list{flex-direction:column;align-items:flex-start;gap:16px;margin:0;padding:0 0 4px 24px;border-left:1px solid rgba(255,255,255,.14)}
#pn-setup.flow-enabled .intro-hero .phase-list strong{font-size:15px}
@media(max-width:900px){
  #pn-setup.flow-enabled .intro-hero{display:flex;flex-direction:column}
  #pn-setup.flow-enabled .intro-hero .hero-copy{flex:1 0 auto}
  #pn-setup.flow-enabled .intro-hero .phase-list{margin-top:36px;padding:0;border:0}
}
#pn-setup.flow-enabled .intro-hero .phase-list li:before{color:#9fb0aa}
#pn-setup.flow-enabled .intro-hero .phase-list strong{color:#e1e6e3;font-weight:500}
#pn-setup.flow-enabled .start-grid{margin-top:20px}
#pn-setup .intro-hero.is-ready .hero-glaze{opacity:1}
#pn-setup .intro-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,23,22,.66),rgba(20,23,22,.32) 52%,transparent 86%);pointer-events:none}
#pn-setup .hero-copy{max-width:690px}
#pn-setup .intro-hero h1{font-size:clamp(36px,4.5vw,62px);line-height:1.06;letter-spacing:-2.6px;color:#fff}
#pn-setup .intro-hero .lede{max-width:42ch;margin-top:24px;color:#e1e6e3;font-size:16px;line-height:1.75}
#pn-setup #start-view .intro-hero .step-footer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:18px;margin-top:32px;padding:0;border:0;background:transparent}
#pn-setup #start-view .intro-hero .step-status{display:block;flex:0 1 auto;color:#c2cbc7;font-size:11px}
#pn-setup #start-view .intro-hero .pn-primary{display:flex;align-items:center;gap:28px;min-height:46px;padding:0 18px;--btn-from:#fff;--btn-to:#EFEFEB;background:linear-gradient(180deg,var(--btn-from),var(--btn-to));border-color:rgba(255,255,255,.55);color:#233238;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.13);transition:--btn-from var(--m-ui) var(--ease),--btn-to var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),transform var(--m-ui) var(--ease-out),box-shadow var(--m-depth) var(--ease-out),scale var(--m-press) var(--ease-out)}
#pn-setup #start-view .intro-hero .pn-primary:hover:not(:disabled){--btn-from:#fff;--btn-to:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
#pn-setup #start-view .intro-hero .pn-primary:active:not(:disabled){--btn-from:#EFEFEB;--btn-to:#E6E6E1;transform:none;box-shadow:inset 0 2px 4px rgba(15,12,8,.12)}
/* The hero call to action is the one glossy register, lit by the delegated pointer stream. */
#pn-setup #start-view .intro-hero .pn-primary:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(56px circle at var(--mx,50%) var(--my,-20%),rgba(61,168,220,.20),transparent 64%);opacity:0;transition:opacity var(--m-struct) var(--ease)}
#pn-setup #start-view .intro-hero .pn-primary:hover:not(:disabled):before{opacity:1}
#pn-setup .start-grid{display:block;margin:40px 10px 0}
#pn-setup .start-grid .pn-detail{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
/* The four stages read as one line each: number and name, the way the rail will say them. */
#pn-setup :is(.start-grid,.intro-hero) .phase-list{display:flex;flex-wrap:wrap;gap:12px 40px;counter-reset:phase;margin:0;padding:0;list-style:none}
#pn-setup :is(.start-grid,.intro-hero) .phase-list li{position:relative;display:flex;align-items:baseline;gap:10px;counter-increment:phase;margin:0;padding:0;border:0}
#pn-setup :is(.start-grid,.intro-hero) .phase-list li:before{content:'0' counter(phase);flex:none;color:var(--text-3);font:11px/1 var(--mono)}
#pn-setup :is(.start-grid,.intro-hero) .phase-list strong{margin:0}
#pn-setup :is(.start-grid,.intro-hero) .phase-list span{display:none}
#pn-setup .phase-list strong{display:block;margin-bottom:8px;font-size:15px;font-weight:500;line-height:1.4;letter-spacing:-.2px}
#pn-setup .phase-list span{display:block;max-width:28ch;color:var(--text-3);font-size:13px;line-height:1.6}
#pn-setup .start-grid .privacy-note{margin-top:28px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#pn-setup .start-grid .privacy-note summary{display:inline-flex;align-items:center;gap:9px;min-height:36px;margin:0 -8px;padding:0 8px;border-radius:10px;list-style:none;color:var(--text-2);font-size:13px;cursor:pointer;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .start-grid .privacy-note summary::-webkit-details-marker{display:none}
#pn-setup .start-grid .privacy-note summary:after{content:"";flex:none;width:12px;height:12px;opacity:.7;background:currentColor;mask:var(--chevron) center/contain no-repeat;color:var(--text-3);transition:rotate var(--m-ui) var(--ease),opacity var(--m-ui) var(--ease)}
#pn-setup .start-grid .privacy-note[open] summary:after{rotate:90deg}
#pn-setup .start-grid .privacy-note p{max-width:90ch;margin:0 0 12px;color:var(--text-2);font-size:13px;line-height:1.75}
#pn-setup .start-grid .privacy-note p:last-child{margin-bottom:22px}
/* Two notes stand open under the hero: what stays private, and what this advisor is and is not. */
#pn-setup.flow-enabled .start-grid .notes{display:grid;grid-template-columns:1fr 1fr;gap:20px 48px;margin-top:36px}
#pn-setup.flow-enabled .start-grid .notes>details{margin:0;padding:0;max-width:none}
#pn-setup.flow-enabled .start-grid .notes>details summary{display:block;min-height:0;margin:0 0 10px;padding:0;border-radius:0;color:var(--text);font:500 15px/1.4 var(--display);letter-spacing:-.2px;text-align:left;cursor:default;pointer-events:none}
#pn-setup.flow-enabled .start-grid .notes>details summary:after{content:none}
#pn-setup.flow-enabled .start-grid .notes>details p{max-width:52ch;margin:0 0 10px;padding:0;color:var(--text-2);font:13px/1.75 var(--ui)}
#pn-setup.flow-enabled .start-grid .notes>details p:last-child{margin-bottom:0}
/* The intro is a real page. Utility links belong at its foot, outside the chat. */
#pn-setup:not([data-phase=start]) .pn-footer{display:none}
#pn-setup.flow-enabled[data-phase=start] .pn-workspace>.pane-body{display:flex;flex-direction:column;min-height:calc(100svh - var(--chrome-h) - 34px);padding-bottom:16px}
#pn-setup.flow-enabled[data-phase=start] #start-view{width:100%}
#pn-setup.flow-enabled[data-phase=start] .pn-footer{width:100%;margin-top:auto;padding-top:28px}
/* Below the notes: how the advisor works and what the report holds, as two quiet card rows. */
#pn-setup .intro-more{display:flex;flex-direction:column;gap:52px;margin:56px 10px 12px}
#pn-setup .intro-block>h2{margin:0 0 20px;font:400 24px/1.2 var(--display);letter-spacing:-.02em}
#pn-setup :is(.how-steps,.report-facts){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
#pn-setup :is(.how-steps,.report-facts)>li{display:flex;flex-direction:column;gap:8px;margin:0;padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg-1);box-shadow:0 1px 2px rgba(26,22,16,.05),0 8px 20px -14px rgba(26,22,16,.12)}.report-facts)>li{box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 28px -16px rgba(0,0,0,.6)}
#pn-setup .how-steps .n{margin-bottom:6px;color:var(--text-3);font:400 11px/1 var(--mono)}
#pn-setup :is(.how-steps,.report-facts) strong{font:500 16px/1.4 var(--display);letter-spacing:-.2px}
#pn-setup :is(.how-steps,.report-facts) p{margin:0;color:var(--text-2);font:14px/1.65 var(--ui)}
@media(max-width:900px){#pn-setup :is(.how-steps,.report-facts){grid-template-columns:1fr}#pn-setup .intro-more{gap:40px;margin:44px 8px 0}#pn-setup .intro-block>h2{font-size:22px}}

/* Saved work and the report pages: readable sections separated by hairlines. */
#pn-setup .pn-detail{margin:16px 0;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-1);box-shadow:var(--card-shadow)}
/* The account page is a list of settings, not a stack of boxes: a rule separates one from the next. */
#pn-setup #account-view .pn-detail{margin:28px 0 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#pn-setup #account-view .pn-detail+.pn-detail{padding-top:28px;border-top:1px solid var(--line)}
#pn-setup #account-view .pn-detail>h2{margin-bottom:10px;font:500 16px/1.4 var(--display);letter-spacing:-.1px}
#pn-setup #account-view>.pn-small{display:block;margin-top:28px;color:var(--text-3);font-size:12px}
#pn-setup .pn-detail ul{margin:10px 0;padding-left:18px;font-size:13px}
#pn-setup .pn-detail li{margin:7px 0}
#pn-setup .explain p{margin-top:6px;font-size:13px;line-height:1.65}
#pn-setup details.explain summary{font:500 15px/1.5 var(--ui);cursor:pointer}
#pn-setup details.explain>p{margin-top:12px}
#pn-setup details.explain .phase-list{display:block;columns:auto;padding-left:20px}
#pn-setup details.explain .phase-list li{margin:8px 0;font-size:14px}
#pn-setup .phase-list{margin:10px 0 0;padding-left:20px;font-size:13px;line-height:1.7}
#pn-setup .version-meta{margin:16px 0 6px}
#pn-setup .implementation-step{margin:22px 0;padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-1);overflow-wrap:anywhere}
#pn-setup .implementation-step h3{margin-bottom:8px;font-size:18px}
#pn-setup .implementation-step dl{display:grid;grid-template-columns:115px minmax(0,1fr);gap:12px;margin:20px 0;font-size:13px;line-height:1.65}
#pn-setup .implementation-step dt{color:var(--text-3)}
#pn-setup .implementation-step dd{margin:0;white-space:pre-wrap}
#pn-setup .step-basis{color:var(--accent-ink);font-size:12px}
#pn-setup .step-source{padding-top:14px;border-top:1px solid var(--line);font-size:12px}
#pn-setup .pn-checklist{display:grid;margin:19px 0}
#pn-setup .pn-check{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}
#pn-setup .pn-check strong{font-weight:500}
#pn-setup .pn-check small{display:block;color:var(--text-3);font-size:11px}
#pn-setup .reference-list{padding-left:18px;line-height:1.7}
#pn-setup .reference-list li{margin-bottom:12px}
#pn-setup .reference-list small{display:block;color:var(--text-3);font-size:11px;line-height:1.7;overflow-wrap:anywhere}
#pn-setup .source-choice{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
#pn-setup .source-choice input{width:auto;margin-top:3px}
#pn-setup .source-choice strong{font-size:13px;font-weight:500}
#pn-setup .source-choice small{display:block;color:var(--text-3);font-size:11px;line-height:1.7;overflow-wrap:anywhere}
#pn-setup #approved-sources{margin-bottom:24px}
#pn-setup .configuration-form{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
#pn-setup .setup-section{margin:18px 0;padding:18px 0;border-top:1px solid var(--line)}
#pn-setup .setup-section summary{margin-bottom:16px;font-weight:500;cursor:pointer}
#pn-setup .back-to-setup{display:inline-flex;align-items:center;min-height:var(--action-height);margin:0 0 6px -12px;padding:0 12px;border-radius:var(--r-pill);color:var(--text-2);font-size:13px;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .back-to-setup:active:not(:disabled){scale:.96;transition-duration:0s}
/* The advisor allowance meter, shown on the account page. */
#pn-setup .usage-meter{display:flex;align-items:center;gap:10px;min-width:0}
#pn-setup .usage-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pn-setup .usage-bar{display:block;width:64px;height:5px;overflow:hidden;border-radius:var(--r-pill);background:var(--bg-2)}
#pn-setup .usage-fill{display:block;width:0;height:100%;border-radius:var(--r-pill);background:var(--accent)}
#pn-setup .usage-meter[data-exhausted=true] .usage-fill{background:var(--gold)}
/* The report pages inside the dialog. */
#pn-setup #plan-pages{padding:0 48px 40px}
#pn-setup #plan-pages .pn-view{display:block;max-width:100%;padding:24px 0 0}
#pn-setup #plan-pages :is(.back-to-setup,.step-footer,#build-adoption-plan,#build-work-plan,#adoption-explain,#implementation-explain){display:none}
#pn-setup #plan-pages :is(#adoption-actions,#implementation-actions){margin:18px 0 24px}
#pn-setup #plan-pages .pn-view>h1{font:400 30px/1.2 var(--display);letter-spacing:-.8px}
/* The download page's first section sits close under its title; the rule between them is the section's own. */
#pn-setup #plan-pages #review-view>h1+.pn-detail,#pn-setup #plan-pages #review-view>h1+.report-scope+.pn-detail{margin-top:16px;padding-top:20px}
#pn-setup #plan-pages .pn-view>h1+p{max-width:62ch;margin-top:12px;color:var(--text-2);font-size:15px;line-height:1.7}
#pn-setup #plan-pages .version-meta{margin:18px 0 0;color:var(--text-3);font-size:12px}
/* Lead with the company's decision, then let the reader open the supporting rationale. */
#pn-setup #plan-pages .report-overview{margin:24px 0 0;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(145deg,var(--accent-soft),var(--bg) 65%)}
#pn-setup #plan-pages .report-overview>h2{margin:0 0 10px;font:400 24px/1.25 var(--display);letter-spacing:-.5px;overflow-wrap:anywhere}
#pn-setup #plan-pages .report-overview>p{max-width:64ch;color:var(--text-2);font-size:15px;line-height:1.7}
#pn-setup #plan-pages .report-figures{display:flex;gap:32px;margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line)}
#pn-setup #plan-pages .report-figures b{display:block;font:400 28px/1.1 var(--display);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
#pn-setup #plan-pages .report-figures span{display:block;margin-top:4px;color:var(--text-3);font-size:12px;line-height:1.4}
#pn-setup #plan-pages .report-facts{display:grid;grid-template-columns:minmax(120px,.35fr) minmax(0,1fr);gap:12px 24px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
#pn-setup #plan-pages .report-facts dt{color:var(--text-3);font-size:13px;line-height:1.6}
#pn-setup #plan-pages .report-facts dd{min-width:0;margin:0;color:var(--text);font-size:14px;font-weight:500;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
#pn-setup #plan-pages .report-overview>.pn-detail{margin-top:20px;padding-top:18px}
#pn-setup #plan-pages .report-overview>.pn-detail>h2{font-size:16px;font-weight:500;letter-spacing:-.1px}
#pn-setup #plan-pages .report-overview>.pn-detail ul{font-size:14px;line-height:1.6}
#pn-setup #plan-pages .report-overview>.report-next-step{margin-top:20px;padding:12px 14px;border-left:2px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6}
#pn-setup #plan-pages .report-rationale{margin-top:22px;border-top:1px solid var(--line)}
#pn-setup #plan-pages .report-rationale>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;margin:0 -8px;padding:10px 8px;border-radius:var(--r-sm);list-style:none;color:var(--text-2);font:500 14px/1.5 var(--ui);cursor:pointer;transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease)}
#pn-setup #plan-pages .report-rationale>summary::-webkit-details-marker{display:none}
#pn-setup #plan-pages .report-rationale>summary:after{content:"";flex:none;width:14px;height:14px;background:currentColor;mask:var(--chevron) center/contain no-repeat;transition:rotate var(--m-ui) var(--ease)}
#pn-setup #plan-pages .report-rationale[open]>summary:after{rotate:90deg}
#pn-setup #plan-pages .report-rationale>summary:hover{background:var(--bg-1);color:var(--text)}
#pn-setup #plan-pages .report-rationale>.pn-detail{margin:0;padding:8px 0 20px;border:0}
#pn-setup #plan-pages .pn-detail{margin:28px 0 0;padding:28px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
/* The long sections are the document: they read lighter than the decision at the top of the page. */
#pn-setup #plan-pages :is(.pn-detail,.implementation-step){font-size:14px;line-height:1.7}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step) h2{margin:0 0 12px;font:500 18px/1.4 var(--display);letter-spacing:-.2px}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step) h3{margin:24px 0 10px;font:500 18px/1.4 var(--display);letter-spacing:-.2px}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step)>h3:first-child{margin-top:0}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step) p+p{margin-top:12px}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step) ul,#pn-setup #plan-pages :is(.pn-detail,.implementation-step) ol{margin:12px 0 0;padding-left:20px;font-size:14px;line-height:1.7}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step) li{margin:10px 0;padding-left:3px}
#pn-setup #plan-pages :is(.pn-detail,.implementation-step) dl{font-variant-numeric:tabular-nums}
#pn-setup #plan-pages li::marker{color:var(--text-3)}
#pn-setup #plan-pages .implementation-step{margin-top:28px;padding:24px;border-radius:14px}
#pn-setup #plan-pages .implementation-step dl{grid-template-columns:minmax(130px,1fr) minmax(0,1.5fr);gap:14px 24px;font-size:14px}
#pn-setup #plan-pages .implementation-step dt{color:var(--text-2)}
#pn-setup #plan-pages .pn-inline{flex-wrap:wrap;gap:8px;margin:16px 0}
#pn-setup #plan-pages .pn-inline+.pn-small{color:var(--text-3);font-size:13px;line-height:1.6}
#pn-setup .plan-dialog .pn-button{min-height:var(--action-height);padding-inline:14px}
#pn-setup .report-scope{margin:28px 0 0;padding-top:22px;border-top:1px solid var(--line)}
#pn-setup .report-scope>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;margin:0 -10px;padding:0 10px;border-radius:10px;list-style:none;color:var(--text-2);font:500 15px/1.5 var(--ui);cursor:pointer;transition:background-color var(--m-ui) var(--ease)}
#pn-setup .report-scope>summary::-webkit-details-marker{display:none}
#pn-setup .report-scope>summary:after{content:"";flex:none;width:12px;height:12px;opacity:.7;background:currentColor;mask:var(--chevron) center/contain no-repeat;color:var(--text-3);transition:rotate var(--m-ui) var(--ease),opacity var(--m-ui) var(--ease)}
#pn-setup .report-scope[open]>summary:after{rotate:90deg}
#pn-setup #review-output{padding-top:18px;line-height:1.7}

/* Footer: the site's closer. Four link columns on the brand field under a cream wash, a hairline,
   then the giant wordmark and the mono meta. Shown on the intro page only. */
#pn-setup .pn-footer{position:relative;max-width:1264px;margin:24px auto 0;padding:28px 0 30px}
#pn-setup .foot-card{position:relative;overflow:hidden;padding:52px 48px 38px;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 46%,color-mix(in srgb,var(--bg) 58%,transparent) 72%,color-mix(in srgb,var(--bg) 22%,transparent) 100%),radial-gradient(60% 80% at 8% 14%,color-mix(in srgb,var(--accent) 52%,transparent) 0%,transparent 46%),radial-gradient(55% 75% at 36% 26%,#9b8ac4 0%,transparent 52%),radial-gradient(60% 80% at 64% 46%,#e8a4b8 0%,transparent 56%),radial-gradient(66% 86% at 90% 74%,#f4c8a8 0%,transparent 58%),linear-gradient(118deg,color-mix(in srgb,var(--accent) 30%,#fff) 0%,#9b8ac4 34%,#e8a4b8 64%,#f4c8a8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 32px -8px rgba(15,12,8,.10),0 4px 8px -4px rgba(15,12,8,.05)}
#pn-setup .foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px;padding-bottom:44px}
#pn-setup .foot-head{display:block;margin-bottom:18px;color:var(--text-3);font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:lowercase}
#pn-setup .foot-col ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
#pn-setup .foot-col :is(a,.pn-link),#pn-setup .foot-loc{color:var(--text-2);font:500 14px/1.4 var(--display);letter-spacing:0;text-decoration:none}
#pn-setup .foot-col :is(a,.pn-link){display:inline-block;padding:5px 12px;margin:-5px -12px;border-radius:8px;transition:color 160ms ease-out,transform 200ms var(--ease-out)}
#pn-setup .foot-col :is(a,.pn-link):focus-visible{outline:none;box-shadow:var(--focus-ring-cta)}
#pn-setup .foot-rule{height:1px;background:color-mix(in srgb,var(--text) 14%,transparent)}
#pn-setup .foot-below{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding-top:30px}
#pn-setup .foot-wordmark{color:var(--text);font:700 clamp(54px,8.5vw,108px)/.92 Inter,var(--ui);letter-spacing:-.045em;text-decoration:none;transition:opacity 180ms ease-out}
#pn-setup .foot-wordmark em{font-style:normal;background:radial-gradient(ellipse at 28% 18%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%),linear-gradient(145deg,var(--accent-bright) 0%,var(--accent) 44%,var(--accent-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent)}
#pn-setup .foot-wordmark sup{margin-left:.08em;color:var(--text-2);font-size:.16em;font-weight:600;letter-spacing:0;line-height:1;vertical-align:super}
#pn-setup .foot-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-bottom:8px;color:var(--text-2);font:11px/1.5 var(--mono);letter-spacing:.05em;text-align:right}
#pn-setup .foot-meta a{display:inline-block;padding:6px 8px;margin:-2px -8px;color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--text) 35%,transparent);text-underline-offset:3px;transition:color 160ms ease-out,text-decoration-color 160ms ease-out}
#pn-setup .pn-footer>.foot-card>.advisor-disclaimer{display:none}
@media(max-width:880px){
  #pn-setup .foot-card{padding:42px 24px 32px;background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 90%,transparent) 24%,color-mix(in srgb,var(--bg) 62%,transparent) 55%,color-mix(in srgb,var(--bg) 22%,transparent) 100%),radial-gradient(60% 80% at 8% 14%,color-mix(in srgb,var(--accent) 52%,transparent) 0%,transparent 46%),radial-gradient(55% 75% at 36% 26%,#9b8ac4 0%,transparent 52%),radial-gradient(60% 80% at 64% 46%,#e8a4b8 0%,transparent 56%),radial-gradient(66% 86% at 90% 74%,#f4c8a8 0%,transparent 58%),linear-gradient(118deg,color-mix(in srgb,var(--accent) 30%,#fff) 0%,#9b8ac4 34%,#e8a4b8 64%,#f4c8a8 100%)}
  #pn-setup .foot-cols{grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:34px}
  #pn-setup .foot-below{flex-direction:column;align-items:flex-start;gap:18px}
  #pn-setup .foot-meta{align-items:flex-start;text-align:left}
}

/* Hover is a pointer affordance only: tone and edge, never position. */
@media(hover:hover){
  #pn-setup .brand-home:hover,#pn-setup .person-main:hover,#pn-setup #appearance:hover,#pn-setup .icon-button:hover{background:var(--bg-2)}
  #pn-setup .pn-nav button:hover:not(:disabled),#pn-setup .pn-history:hover:not(:disabled){background:var(--bg-2)}
  #pn-setup .site-nav a:hover{color:var(--text)}
  #pn-setup .foot-col :is(a,.pn-link):hover{color:var(--text);transform:translateX(3px)}
  #pn-setup .foot-wordmark:hover{opacity:.86}
  #pn-setup .foot-meta a:hover{color:var(--accent);text-decoration-color:var(--accent)}
  #pn-setup .progress-step>summary:hover{background:var(--bg-1)}
  /* A disclosure row is a row: it takes the tone of the page it sits on, and its plus turns. */
  #pn-setup :is(.report-scope,.privacy-note,.advisor-disclaimer)>summary:hover{background:var(--bg-1)}
  #pn-setup .progress-toggle:hover:not(:disabled){border-color:var(--line-2);background:var(--bg-elev)}
  #pn-setup .engagement-option:hover:not(:has(input:checked)):not(:has(input:disabled)),#pn-setup .engagement-contact:hover{background:var(--bg-2)}
  #pn-setup .guide-fields :is(input:not([type=radio],[type=checkbox]),textarea):hover:not(:focus):not(:disabled){border-color:var(--line-2)}
  /* Rows take the tone of the surface behind them: the page in the thread and the rail,
     one step further in where they sit on a card. */
  #pn-setup :is(.progress-panel .row):hover{background:var(--bg-1)}
  #pn-setup :is(.check-field:not(.choice-options .check-field)):hover:not(:has(input:disabled)){background:var(--bg-2)}
  #pn-setup .band-link:hover:not(:disabled){background:rgba(255,255,255,.18)}
  #pn-setup :is(#retry,.back-to-setup):hover:not(:disabled){background:var(--bg-2);color:var(--text);text-decoration:none}
  #pn-setup .select-shell:hover:after{background:var(--text-2)}
  /* The flow's own controls answer to the same families: ghost pills, rows and disclosure lines. */
  #pn-setup button.flow-hide:hover:not(:disabled),#pn-setup .flow-resume:hover:not(:disabled) .flow-hide{background:var(--bg-2);color:var(--text)}
  #pn-setup .flow-resume:hover:not(:disabled){background:var(--bg-1)}
  #pn-setup .flow-answer>summary:hover{background:var(--bg-1)}
  #pn-setup .flow-receipt>.pn-link:hover:not(:disabled){background:var(--accent-soft);color:var(--accent-ink);text-decoration:none}
  /* With a pointer, Edit shows when the row is hovered or focused; on touch it is always there. */
  #pn-setup .flow-receipt>.pn-link{opacity:0;transition:opacity var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
  #pn-setup .flow-receipt:is(:hover,:focus-within)>.pn-link{opacity:1}
  #pn-setup .flow-receipt:hover{background:var(--bg-1)}
  #pn-setup .idea:hover:not(:disabled):not(.is-used){border-color:var(--line-2);background:var(--bg-elev);color:var(--text);translate:0 -1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 14px -6px rgba(15,12,8,.18)}
  #pn-setup .picker-tile:hover:not(.is-picked){background:var(--bg-2)}
  #pn-setup .picker-more>summary:hover{background:var(--bg-1);color:var(--text)}
  #pn-setup .picker-more>summary:hover:after{translate:2px 0}
  /* The one hover that moves: a glyph nudges 2px in the direction it points. The row itself stays put. */
  #pn-setup :is(.progress-step>summary,.flow-answer>summary,details.question-help>summary,.report-scope>summary,.privacy-note summary,.advisor-disclaimer summary):after,#pn-setup #plan-pages .report-rationale>summary:after{transition:rotate var(--m-ui) var(--ease),opacity var(--m-ui) var(--ease),translate 200ms var(--ease-out)}
  #pn-setup :is(.progress-step>summary,.flow-answer>summary,details.question-help>summary,.report-scope>summary,.privacy-note summary,.advisor-disclaimer summary):hover:after,#pn-setup #plan-pages .report-rationale>summary:hover:after,#pn-setup .platform .more:hover:not(:disabled):after{translate:2px 0}
  #pn-setup :is(.progress-step,.flow-answer,details.question-help,.report-scope,.privacy-note,.advisor-disclaimer,.report-rationale)[open]>summary:hover:after,#pn-setup .platform .more[aria-expanded=true]:hover:not(:disabled):after{translate:0 2px}
  #pn-setup .link-row:hover:not(:disabled):after{transform:translateX(2px)}
  #pn-setup .pn-send:hover:not(:disabled) svg{translate:0 -2px}
  #pn-setup .engagement-link:hover{background:var(--bg-2);color:var(--accent-ink)}
  #pn-setup .engagement-link:hover>span{translate:1px -1px}
}
/* Coarse pointers get a comfortable target even where the visible control is slim. */
@media(pointer:coarse){
  #pn-setup :is(.pill,.pn-button,.dialog-close,.latest-reply,.progress-toggle,.intent,.report-nav button,#decision-toggle){position:relative}
  #pn-setup :is(.pill,.pn-button,.dialog-close,.latest-reply,.progress-toggle,.intent,.report-nav button,#decision-toggle):after{content:'';position:absolute;inset:-4px 0}
  #pn-setup :is(.platform .pill,.dialog-close,.latest-reply,.intent,#decision-toggle):after{inset:-7px 0}
  #pn-setup .dialog-close:after{inset:-6px}
}

#pn-setup .progress-toggle{display:none;font-variant-numeric:tabular-nums}
#pn-setup #progress-toggle-count{display:inline-flex;align-items:center}
#pn-setup .progress-toggle-check{display:grid;place-items:center;width:14px;height:14px;color:var(--accent-ink)}
#pn-setup .progress-toggle-check svg{width:12px;height:12px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#pn-setup .progress-toggle-check svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:check-draw var(--m-draw) var(--ease-out) 40ms forwards}

/* Tablet: the rail narrows before it becomes a sheet. */
@media(max-width:1100px){#pn-setup{--flow-gap:32px;--progress-width:320px}}
@media(max-width:1179px){
  #pn-setup{--chrome-inset:12px}
  #pn-setup{--page-gutter:20px}
  #pn-setup .pn-main{padding:0 20px}
  #pn-setup .pn-split{display:block}
  #pn-setup .pn-split>.progress-panel{display:none}
  #pn-setup.flow-enabled{--thread-left:max(24px,calc((100vw - 680px) / 2))}
  #pn-setup .dock,#pn-setup .veil{left:16px;right:16px;width:auto;translate:none}
  #pn-setup.flow-enabled .dock{left:var(--thread-left);right:auto;width:min(680px,calc(100vw - 48px));translate:none}
  #pn-setup .thread{padding-top:24px}
  #pn-setup .intro-hero{min-height:390px;padding:48px 36px}
  #pn-setup .hero-glaze{object-position:58% center}
  #pn-setup .start-grid .phase-list{grid-template-columns:1fr 1fr;gap:24px 32px}
  #pn-setup .progress-toggle:not([hidden]){display:inline-flex;align-items:center;gap:8px;min-height:var(--action-height);padding:0 12px;border:1px solid color-mix(in srgb,var(--line-2) 55%,transparent);border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg-elev) 78%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--text);font:500 13px/1.2 var(--ui);white-space:nowrap;transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
  #pn-setup .progress-toggle:active:not(:disabled){scale:.96;transition-duration:0s}
  /* The rail becomes a sheet that rises from the bottom edge. */
  #pn-setup .progress-dialog{--arrive:24px;width:100%;max-width:100vw;max-height:92dvh;margin:auto 0 0;border:0;border-radius:22px 22px 0 0}
  #pn-setup .progress-dialog .dialog-top{min-height:56px;padding:12px 18px}
  #pn-setup .progress-dialog .progress-panel{display:block;position:static;max-height:none;overflow:visible;padding:8px 18px calc(24px + env(safe-area-inset-bottom));border:0;scrollbar-gutter:auto}
  #pn-setup .progress-dialog .progress-intro{margin-bottom:18px}
  html{scrollbar-gutter:auto}
}
@media(max-width:800px){
  #pn-setup .form-block{grid-template-columns:160px minmax(0,1fr);gap:28px}
}
/* Phone: the chrome tightens, the band takes two lines, the dock insets. */
@media(max-width:650px){
  #pn-setup{--header-h:52px;--dock-inset:12px}
  #pn-setup{--page-gutter:16px}
  #pn-setup .pn-main{padding:0 16px}
  #pn-setup .advisor-header{gap:8px;padding:6px 12px}
  #pn-setup .header-actions{gap:2px}
  #pn-setup .header-actions #appearance{display:none}
  #pn-setup .pn-person{gap:0}
  #pn-setup .brand-home{gap:8px;padding:0 4px}
  #pn-setup .brand-product{font-size:12px}
  #pn-setup .band{min-height:auto;padding:10px 16px}
  #pn-setup .band-row{flex-direction:column;align-items:flex-start;gap:6px}
  #pn-setup .band-id{flex-direction:column;align-items:flex-start;gap:2px}
  #pn-setup .band h1{font-size:16px}
  #pn-setup .band p{white-space:normal}
  #pn-setup .thread{gap:18px;padding:16px 0 32px}
  #pn-setup :is(.module,.guided-question,.engagement-module){padding:16px;border-radius:14px}
  #pn-setup :is(.module,.engagement-module)>h2,#pn-setup .question-head>h2,#pn-setup #assessment-result>h2{font-size:20px}
  #pn-setup .link-row{margin:12px -16px -16px;padding:11px 16px;border-radius:0 0 13px 13px}
  #pn-setup .guide-fields .field-grid{grid-template-columns:1fr}
  #pn-setup .guide-actions{gap:8px;margin-top:18px;padding-top:14px}
  #pn-setup .platforms{grid-template-columns:1fr;gap:10px}
  /* A phone tile is one compact block: mark and name on a line, two lines of summary, the foot. */
  #pn-setup .platform{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head title" "head summary" "head foot" "details details";column-gap:12px;row-gap:4px;padding:12px 12px 10px}
  #pn-setup .platform .head{grid-area:head;align-self:start;margin:0}
  #pn-setup .platform .head .id>span:not(.tile){display:none}
  #pn-setup .platform h3{grid-area:title;font-size:16px}
  #pn-setup .platform>p{grid-area:summary;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
  #pn-setup .platform .foot{grid-area:foot;padding-top:4px}
  #pn-setup .platform .platform-details{grid-area:details}
  #pn-setup .platform .head .tag{position:absolute;right:12px;top:12px}
  /* The picker on a phone: one tile per row, the check on the right, two lines of summary. */
  #pn-setup .picker-grid{grid-template-columns:1fr;gap:8px}
  #pn-setup .picker-tile{grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;min-height:0;padding:12px 12px 12px 12px}
  #pn-setup .picker-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
  #pn-setup .picker-check{position:static;grid-column:3;opacity:.0}
  #pn-setup .picker-tile .tag{display:none}
  #pn-setup .picker .guide-actions{flex-direction:column-reverse;align-items:stretch}
  #pn-setup .picker .guide-actions .is-primary{margin-left:0}
  #pn-setup .assessment-evidence{grid-template-columns:1fr}
  #pn-setup .pn-user{max-width:88%}
  #pn-setup .conversation-intro{padding-bottom:16px}
  #pn-setup.flow-enabled .flow-card{padding:18px;border-radius:14px}
  #pn-setup.flow-enabled .flow-card .question-head h2{font-size:20px}
  #pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea){font-size:16px}
  #pn-setup .flow-resume{padding:0 10px 0 16px}
  /* On a phone the receipt is two stacked lines, and the dot that joined them is not needed. */
  #pn-setup .flow-receipt>.copy{display:block}
  #pn-setup #engagement-form fieldset{grid-template-columns:1fr;gap:8px}
  /* A phone stacks the company card's four fields; the draft note sits in the flow above the bar. */
  #pn-setup .flow-form .field-grid{grid-template-columns:1fr;gap:10px}
  #pn-setup .draft-reminder{position:static;display:block;width:max-content;margin:0 0 8px auto}
  #pn-setup .engagement-option{grid-template-columns:18px minmax(0,1fr);align-items:center;padding:12px 14px}
  #pn-setup .flow-receipt strong{display:block;font-size:13px}
  #pn-setup .flow-receipt small{display:block;overflow:visible;color:var(--text-3);font-size:13px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
  #pn-setup .flow-receipt small:before{content:none}
  #pn-setup .flow-answer>summary{grid-template-columns:95px minmax(0,1fr) 12px;gap:9px;font-size:14px}
  #pn-setup .flow-answer-label{font-size:12px}
  #pn-setup .flow-form .field-grid{gap:14px}
  #pn-setup .decision-toolbar{gap:12px}
  #pn-setup .dock,#pn-setup .veil,#pn-setup.flow-enabled .dock{left:12px;right:12px;width:auto;translate:none}
  #pn-setup .intents{margin:0 -12px 10px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
  #pn-setup .intent{flex:0 0 auto}
  #pn-setup[data-card-active=true] #step-prompts{display:none}
  #pn-setup[data-card-active=true] .composer{padding:4px 5px 4px 14px;border-radius:24px}
  #pn-setup[data-card-active=true] .composer textarea{min-height:36px;max-height:96px;padding-block:6px}
  #pn-setup[data-card-active=true] .pn-send{width:36px;height:36px}
  #pn-setup #current-question-link{max-width:calc(100% - 12px);min-height:32px;margin-bottom:8px;padding:5px 12px}
  #pn-setup .compose-hint{display:none}
  #pn-setup .conversation-availability{margin-bottom:7px;font-size:11px}
  #pn-setup h1{font-weight:500}
  #pn-setup .intro-hero{min-height:430px;padding:36px 26px;border-radius:var(--r-lg)}
  #pn-setup .hero-glaze{object-position:48% center}
  #pn-setup .intro-hero:after{background:linear-gradient(90deg,rgba(23,30,29,.88),rgba(23,30,29,.33))}
  #pn-setup .intro-hero h1{font-size:40px;line-height:1.09;letter-spacing:-1.7px}
  #pn-setup .intro-hero .lede{font-size:14px}
  #pn-setup .intro-hero .lede br{display:none}
  #pn-setup #start-view .intro-hero .step-footer{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
  #pn-setup #start-view .intro-hero .pn-primary{align-self:flex-start;gap:28px;font-size:12px}
  #pn-setup .start-grid{margin:30px 8px 0}
  #pn-setup :is(.start-grid,.intro-hero) .phase-list{flex-direction:column;gap:14px}
  #pn-setup :is(.start-grid,.intro-hero) .phase-list li{min-height:0;padding:0}
  #pn-setup .phase-list span{max-width:none}
  #pn-setup .advisor-disclaimer{flex-basis:100%;margin-left:0}
  #pn-setup.flow-enabled .start-grid .notes{grid-template-columns:1fr;gap:24px;margin-top:30px}
  #pn-setup .advisor-disclaimer summary{text-align:left}
  #pn-setup .form-heading h1{font-size:32px;letter-spacing:-1px}
  #pn-setup .form-block{display:block;padding:26px 0}
  #pn-setup .form-section-heading{display:grid;grid-template-columns:24px 1fr;column-gap:10px;margin-bottom:22px;padding:0}
  #pn-setup .form-section-heading .optional-tag{grid-column:2;justify-self:start;margin-top:8px}
  #pn-setup .form-index{grid-row:1/3;margin:3px 0 0}
  #pn-setup .form-section-heading p{max-width:none;margin-top:4px;font-size:14px}
  #pn-setup .field-grid{grid-template-columns:1fr;gap:0}
  #pn-setup .field-grid>div+div .field-label{margin-top:18px}
  #pn-setup .short-input{width:95px;flex-basis:95px}
  #pn-setup .team-size{gap:12px;margin-top:20px;padding:20px 0}
  #pn-setup .onboard-form input:not([type=radio],[type=checkbox]),#pn-setup .field-label textarea,#pn-setup select,#pn-setup .guide-fields :is(input:not([type=radio],[type=checkbox]),textarea){font-size:16px}
  #pn-setup .implementation-step{padding:16px}
  #pn-setup .implementation-step dl{grid-template-columns:1fr;gap:5px}
  #pn-setup .implementation-step dd{margin-bottom:12px}
  #pn-setup .pn-main>.pn-nav{width:100%;max-width:none;flex-wrap:nowrap;overflow-x:auto}
  #pn-setup .pn-main>.pn-nav button{flex:1 0 auto;font-size:12px}
  /* One compact row: back and the primary action. The #status bar already announces saves. */
  #pn-setup .step-footer{flex-wrap:nowrap;gap:12px;margin-top:26px;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:var(--bg)}
  #pn-setup .step-footer .step-status{display:none}
  #pn-setup #start-view .intro-hero .step-status{display:block}
}
/* Two-column options are for wide cards with lists of five rows or more. */
@media(min-width:560px){
  #pn-setup .choice-options:has(.check-field:nth-child(5)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}
  #pn-setup .choice-options:has(.check-field:nth-child(5)) .check-field{height:100%;min-height:40px}
}
@media(max-width:560px){
  #pn-setup .plan-dialog{width:100%;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  #pn-setup .dialog-top{min-height:56px;padding:12px 16px}
  #pn-setup .report-nav{gap:2px;padding:8px 12px}
  #pn-setup .report-nav button{padding-inline:10px;font-size:12px}
  #pn-setup #plan-pages{padding:0 22px calc(32px + env(safe-area-inset-bottom))}
  #pn-setup #plan-pages .pn-view>h1{font-size:28px}
  #pn-setup #plan-pages .report-overview{padding:18px;margin-top:22px}
  #pn-setup #plan-pages .report-overview>h2{font-size:22px}
  #pn-setup #plan-pages .report-facts{grid-template-columns:1fr;gap:4px;margin-top:16px;padding-top:14px}
  #pn-setup #plan-pages .report-facts dd+dt{margin-top:10px}
  #pn-setup #plan-pages .implementation-step{padding:18px}
  #pn-setup #plan-pages .implementation-step dl{grid-template-columns:1fr;gap:4px}
  #pn-setup #plan-pages .implementation-step dd{margin-bottom:12px}
}
@media(max-width:360px){
  #pn-setup .flow-form .field-grid{grid-template-columns:1fr}
  #pn-setup .flow-answer>summary{grid-template-columns:84px minmax(0,1fr) 12px;gap:8px}
  /* The narrowest phone: the chrome gives every pixel back to the lockup and the two controls. */
  #pn-setup .advisor-header{gap:6px;padding:6px 8px}
  #pn-setup .brand-home{min-width:0;gap:7px;padding:0}
  #pn-setup .brand-name{display:none}
  #pn-setup[data-phase=start] .brand-name{display:inline}
  #pn-setup .brand-product{overflow:hidden;text-overflow:ellipsis}
  #pn-setup .progress-toggle:not([hidden]){padding:0 9px;font-size:12px}
  #pn-setup .intro-hero h1{font-size:34px}
  #pn-setup .intro-hero{padding-inline:22px}
}

/* Motion: entrances end on transform:none and always fill backwards. */
@keyframes materialize{from{opacity:0;transform:translateY(5px);filter:blur(6px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes content-arrive{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes chip-in{from{opacity:0;transform:translateY(6px) scale(.94);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes dialog-arrive{from{opacity:0;translate:0 var(--arrive,12px)}to{opacity:1;translate:0 0}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toast-out{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,6px)}}
@keyframes pill-recoil{0%{translate:0 0}24%{translate:0 3px}62%{translate:0 -1.5px}100%{translate:0 0}}
@keyframes check-draw{to{stroke-dashoffset:0}}
@keyframes commit-pop{0%{scale:1}16%{scale:.84}44%{scale:1.09}68%{scale:.97}100%{scale:1}}
@keyframes send-pop{0%{scale:1}22%{scale:.86}58%{scale:1.08}100%{scale:1}}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0% 0}}
@keyframes dot-breathe{0%,100%{opacity:.25;transform:none}50%{opacity:.9;transform:translateY(-1px)}}
@keyframes logo-think{0%,100%{opacity:.72;transform:scale(.94)}32%{opacity:1;transform:scale(1.13)}}
@keyframes logo-bloom{0%,100%{opacity:.78;transform:scale(.96)}42%{opacity:1;transform:scale(1.08)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
/* The card leaves before the reply lands, so the two never occupy the same place at once. */
@keyframes card-leave{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -4px}}
/* A row that was just reopened glows in the accent wash and settles back to the page. */
@keyframes tone-flash{from{background-color:var(--accent-soft)}to{background-color:transparent}}
/* The dock rises into the chat; the veil simply appears with it. */
@keyframes dock-rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
::view-transition-group(glaze){animation-duration:460ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(glaze),::view-transition-new(glaze){animation-duration:460ms;animation-timing-function:cubic-bezier(.16,1,.3,1);mix-blend-mode:normal;overflow:hidden;border-radius:16px;height:100%;width:100%;object-fit:cover;object-position:center}
::view-transition-old(root){animation:240ms cubic-bezier(.4,0,.2,1) both fade-out}
::view-transition-new(root){animation:320ms cubic-bezier(.16,1,.3,1) 80ms both fade-in}
/* The header changes shape between the intro (the site's full-width bar) and the chat (the floating
   row): its ground morphs and cross-fades without stretching, while the lockup and the controls are
   their own groups, so they glide to their new places instead of dissolving. */
::view-transition-group(header),::view-transition-group(brand),::view-transition-group(actions){animation-duration:420ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-image-pair(header){overflow:clip;border-radius:16px}
::view-transition-old(header),::view-transition-new(header){height:100%;width:100%;object-fit:cover;object-position:left center;mix-blend-mode:normal}
::view-transition-old(header){animation:220ms cubic-bezier(.4,0,.2,1) both fade-out}
::view-transition-new(header){animation:300ms cubic-bezier(.16,1,.3,1) 60ms both fade-in}
::view-transition-old(brand),::view-transition-old(actions){animation:160ms cubic-bezier(.4,0,.2,1) both fade-out}
::view-transition-new(brand),::view-transition-new(actions){animation:200ms cubic-bezier(.16,1,.3,1) 80ms both fade-in}
::view-transition-old(dock){animation:160ms cubic-bezier(.4,0,.2,1) both fade-out}
::view-transition-new(dock){animation:380ms cubic-bezier(.16,1,.3,1) 120ms both dock-rise}
::view-transition-old(veil),::view-transition-new(veil){animation-duration:240ms}
/* A real but inert style change; the theme swap toggles it for one frame to force a repaint.
   Deliberately not a transform or filter: either would make #pn-setup the containing block for
   the fixed header, dock and toast, and move them mid-switch. */
#pn-setup.repaint{outline:0 solid transparent}
/* The one sanctioned !important beside [hidden]: a window while the appearance swaps. */
@media(prefers-reduced-motion:no-preference){#pn-setup.theming,#pn-setup.theming *{transition:background-color var(--m-depth) var(--ease),border-color var(--m-depth) var(--ease),color var(--m-depth) var(--ease)!important}}
@media(prefers-reduced-motion:no-preference){
  #pn-setup .usage-fill{transition:width var(--m-depth) var(--ease)}
  #pn-setup:has(#chat-form[aria-busy=true]) #turn-state{color:transparent;background:linear-gradient(90deg,var(--text-3) 38%,var(--text) 50%,var(--text-3) 62%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:sweep 2s var(--ease) infinite}
  #pn-setup:has(#chat-form[aria-busy=true]) .turn-row .working-dots{display:flex}
  #pn-setup.flow-enabled:has(#chat-form[aria-busy=true]) .turn-row .working-dots{display:none}
  #pn-setup .working-dots i{animation:dot-breathe 1200ms var(--ease) infinite}
  #pn-setup.flow-enabled:has(#chat-form[aria-busy=true]) .think-mark{transform-box:fill-box;transform-origin:center;animation:logo-bloom 1.6s var(--ease) infinite}
  #pn-setup.flow-enabled:has(#chat-form[aria-busy=true]) .think-mark rect{animation:logo-think 1.3s var(--ease) var(--d,0s) infinite}
  #pn-setup .working-dots i:nth-child(2){animation-delay:200ms}
  #pn-setup .working-dots i:nth-child(3){animation-delay:400ms}
  /* Nothing animates in a tab nobody is looking at. */
  #pn-setup.is-away .working-dots i,#pn-setup.is-away #turn-state{animation-play-state:paused}
  /* A view or a report page arrives as one movement, its blocks in sequence. */
  #pn-setup .pn-view.is-entering>*{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),6) * 30ms)}
  #pn-setup #start-view.is-entering .hero-copy>*{animation:content-arrive var(--m-enter) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 60ms)}
  #pn-setup #start-view.is-entering .phase-list>li{animation:content-arrive var(--m-enter) var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms)}
  /* The report's facts land row by row once the overview card is in place. */
  #pn-setup .pn-view.is-entering .report-facts>*{animation:content-arrive var(--m-depth) var(--ease-out) backwards;animation-delay:calc(160ms + var(--n,4) * 40ms)}
  #pn-setup .report-facts>:nth-child(-n+2){--n:0}
  #pn-setup .report-facts>:nth-child(n+3):nth-child(-n+4){--n:1}
  #pn-setup .report-facts>:nth-child(n+5):nth-child(-n+6){--n:2}
  #pn-setup .report-facts>:nth-child(n+7):nth-child(-n+8){--n:3}
  #pn-setup :is(.plan-dialog,.progress-dialog)[open]{animation:dialog-arrive 240ms var(--ease-out) both}
  /* Intro to chat and back: the hero and the band are one element in two sizes, the header holds
     still, the page cross-fades beneath, and the dock rises into place. */
  #pn-setup .intro-hero,#pn-setup .band:not([hidden]){view-transition-name:glaze}
  #pn-setup .advisor-header{view-transition-name:header}
  #pn-setup .brand-home{view-transition-name:brand}
  #pn-setup .header-actions{view-transition-name:actions}
  #pn-setup.flow-enabled .dock{view-transition-name:dock}
  #pn-setup.flow-enabled .veil{view-transition-name:veil}
  /* On a phone the rail is a sheet: it rises over the panel duration and its rows land a beat after it. */
  @media(max-width:1179px){
    #pn-setup .progress-dialog[open]{animation-duration:var(--m-struct)}
    #pn-setup .progress-dialog[open] .progress-panel{animation:fade-in 300ms var(--ease) 140ms backwards}
  }
  #pn-setup dialog[open]::backdrop{animation:fade-in var(--m-depth) var(--ease) both}
  #pn-setup dialog.is-closing::backdrop{animation:fade-out 160ms var(--ease) both}
  /* Native disclosures retain keyboard support. Older browsers use their normal instant toggle. */
  @supports(interpolate-size:allow-keywords){
    #pn-setup :is(.progress-step,.saved-brief,.platform-details,.candidate-evidence,.report-scope,.support-disclosure,.question-help,.report-rationale,.evidence-group,.conversation-list,.privacy-note,.advisor-disclaimer,.explain,.flow-answer,.picker-more){interpolate-size:allow-keywords}
    #pn-setup :is(.progress-step,.saved-brief,.platform-details,.candidate-evidence,.report-scope,.support-disclosure,.question-help,.report-rationale,.evidence-group,.conversation-list,.privacy-note,.advisor-disclaimer,.explain,.flow-answer,.picker-more)::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size 240ms var(--ease-out),opacity 160ms var(--ease),content-visibility 240ms allow-discrete}
    #pn-setup :is(.progress-step,.saved-brief,.platform-details,.candidate-evidence,.report-scope,.support-disclosure,.question-help,.report-rationale,.evidence-group,.conversation-list,.privacy-note,.advisor-disclaimer,.explain,.flow-answer,.picker-more)[open]::details-content{block-size:auto;opacity:1}
  }
}

@media(forced-colors:active){
  #pn-setup :is(.engagement-option,.engagement-contact) input{appearance:auto}
  #pn-setup .choice-options .check-field:has(input:checked){outline:1px solid Highlight}
}

/* Reduced motion: same states, no travel. Drawn marks keep their finished frame. */
@media(prefers-reduced-motion:reduce){
  /* The repeated id lifts these above every animated rule above; no extra !important is spent. */
  #pn-setup#pn-setup#pn-setup *,#pn-setup#pn-setup#pn-setup *:before,#pn-setup#pn-setup#pn-setup *:after{animation:none;transition-duration:1ms;scale:1}
  #pn-setup#pn-setup#pn-setup :is(.choice-puck svg,.check svg,.progress-marker svg path){stroke-dasharray:none;stroke-dashoffset:0}
  #pn-setup#pn-setup#pn-setup .working-dots{display:none}
  #pn-setup#pn-setup#pn-setup .think-mark,#pn-setup#pn-setup#pn-setup .think-mark rect{animation:none}
  #pn-setup#pn-setup#pn-setup .pn-send[data-working] svg{opacity:1}
  #pn-setup#pn-setup#pn-setup .hero-glaze{opacity:1}
  #pn-setup#pn-setup#pn-setup .band .rail i{transition:none}
  #pn-setup#pn-setup#pn-setup .intro-hero .pn-primary:hover:not(:disabled){transform:none}
  #pn-setup#pn-setup#pn-setup .plan-module.is-new .facts b{opacity:1}
  /* The flow's entrances and exits keep only their end states. */
  #pn-setup#pn-setup#pn-setup .flow-card.is-leaving{opacity:0}
  #pn-setup#pn-setup#pn-setup :is(.flow-card.is-new,.flow-receipt.is-new,.flow-card.is-new>*){opacity:1;translate:none;filter:none}
  #pn-setup#pn-setup#pn-setup .flow-card.is-resizing{block-size:auto}
  /* With no animation there is no backwards fill: rows, markers and figures simply stand in their end state. */
  #pn-setup#pn-setup#pn-setup .flow-receipt.is-tapped{background-color:transparent}
  #pn-setup#pn-setup#pn-setup .progress-step[data-state=complete] .progress-marker>.n{opacity:0}
  #pn-setup#pn-setup#pn-setup .flow-receipt .flow-saved-check svg path,#pn-setup#pn-setup#pn-setup .progress-toggle-check svg path{stroke-dasharray:none;stroke-dashoffset:0}
  #pn-setup#pn-setup#pn-setup .engagement-contact input:after{scale:1}
}

/* ---- One conversation, two voices (15 Sep 2026, design/advisor-chat-cards-3000) ----
   The question is the advisor's own sentence; the module under it holds only the fields.
   The saved answer is the person's own turn. Nothing in the thread speaks as "the system". */
#pn-setup.flow-enabled .flow-card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#pn-setup.flow-enabled .flow-card .question-head{align-items:baseline;gap:12px;max-width:62ch}
#pn-setup.flow-enabled .flow-card .question-head h2{font:400 16px/1.7 var(--ui);letter-spacing:0;color:var(--text);text-wrap:pretty}
#pn-setup.flow-enabled .flow-card .guide-hint{max-width:62ch;margin:0;color:var(--text-2);font-size:16px;line-height:1.7}
#pn-setup.flow-enabled .flow-card .flow-hide{min-height:24px;padding:0 6px;color:var(--text-3);font-size:13px}
/* The module shell: bg-1, hairline, 16px corners, no shadow, hung 14px under the sentence that asked. */
#pn-setup.flow-enabled .flow-card>:not(.question-head,.guide-hint,.flow-resume){margin-top:14px;padding:16px 16px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1)}
#pn-setup.flow-enabled .question-head+:is(.flow-form,#compare,.quiet-line,.picker){margin-top:14px}
#pn-setup.flow-enabled .guide-hint+.flow-form{margin-top:14px}
#pn-setup.flow-enabled .flow-form .field-label{color:var(--text-2);font-size:13px}
#pn-setup.flow-enabled .flow-form .field-label.floating>.field-question{color:var(--text-3)}
#pn-setup.flow-enabled .flow-card .guide-actions{justify-content:flex-end;gap:8px;margin-top:16px}
#pn-setup.flow-enabled .flow-card .guide-actions .pill{min-height:var(--action-small);padding:0 12px}
#pn-setup.flow-enabled .flow-card:has(>.flow-resume){padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);overflow:hidden}

/* The action bar sits on the module's right edge: secondary, then primary. Only the missing-answer chip stays left. */
#pn-setup.flow-enabled .flow-card .guide-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end}
#pn-setup.flow-enabled .flow-card .guide-actions>*{margin:0}
#pn-setup.flow-enabled .flow-card .guide-actions>.flow-error{margin-right:auto}
/* A failed turn is one quiet line where the reply would have been, not a boxed notice. */
#pn-setup.flow-enabled #turn-state[data-error=true]{padding:0;border:0;border-radius:0;background:transparent;color:var(--text-3);font:400 13px/1.6 var(--ui)}
/* Rail numerals in the UI face, not mono: the rail is a plan, not a terminal. */
#pn-setup .progress-marker{font:500 12px/1 var(--ui);letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}
/* The retry is a word at the end of the line, not a second row. */
#pn-setup.flow-enabled .turn-row:has(#turn-state[data-error=true]){flex-wrap:wrap;column-gap:6px;row-gap:0}
#pn-setup.flow-enabled #retry{min-height:0;margin:0;padding:0;border-radius:0;background:transparent;color:var(--accent-ink);font:400 13px/1.6 var(--ui);text-decoration:none}
#pn-setup.flow-enabled #retry:hover:not(:disabled){background:transparent;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ---- The finished card is a row, and the row is the plan (15 Sep 2026) ----
   Marker, stage, one-line summary, Edit. It sits exactly where the open card was. */
#pn-setup.flow-enabled .flow-receipt{display:flex;align-items:center;gap:12px;align-self:stretch;max-width:none;min-height:52px;margin:-6px 0 0;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);color:var(--text);font:400 13px/1.4 var(--ui)}
#pn-setup.flow-enabled .flow-receipt>.copy{display:flex;flex:1;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0;overflow:hidden}
#pn-setup.flow-enabled .flow-receipt strong{color:var(--text);font:500 14px/1.4 var(--ui);white-space:nowrap}
#pn-setup.flow-enabled .flow-receipt small{min-width:0;overflow:hidden;color:var(--text-3);font-size:13px;white-space:nowrap;text-overflow:ellipsis}
#pn-setup.flow-enabled .flow-receipt small:before{content:none}
#pn-setup.flow-enabled .flow-receipt>.pn-link{margin-left:auto;min-height:32px;padding:0 4px 0 8px;color:var(--text-2);font-size:13px}
#pn-setup.flow-enabled .flow-receipt>.pn-link:after{content:"";display:inline-block;width:12px;height:12px;margin-left:2px;vertical-align:-1px;background:currentColor;opacity:.7;mask:var(--chevron) center/contain no-repeat}
#pn-setup.flow-enabled .flow-receipt>.pn-link:hover:not(:disabled){background:transparent;color:var(--text)}
/* The row fades in where the card just settled; it does not slide up from below. */
#pn-setup.flow-enabled .flow-receipt.is-new{animation:fade-in var(--m-depth) var(--ease) backwards}
/* Reopened, the row is the card's header: numbered marker, "Editing", no Edit, and the fields hang from it. */
#pn-setup.flow-enabled .flow-receipt.is-editing{margin-bottom:-28px;border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
#pn-setup.flow-enabled .flow-receipt.is-editing>.pn-link{display:none}
#pn-setup.flow-enabled .flow-receipt.is-editing .flow-saved-check{border:1px solid var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink);box-shadow:none}
#pn-setup.flow-enabled .flow-receipt.is-editing .flow-saved-check svg{display:none}
#pn-setup.flow-enabled .flow-receipt.is-editing .flow-saved-check:before{content:attr(data-n);font:500 12px/1 var(--ui)}
#pn-setup.flow-enabled .flow-receipt.is-editing+.current-module .question-head,#pn-setup.flow-enabled .flow-receipt.is-editing+.current-module .guide-hint{display:none}
#pn-setup.flow-enabled .flow-receipt.is-editing+.current-module>.flow-card>:not(.question-head,.guide-hint,.flow-resume){margin-top:0;border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
#pn-setup.flow-enabled .flow-receipt.is-editing+.current-module>.flow-card.is-new{animation:none}
/* Finishing: the card's height settles to the row's while its fields fade during the first half. */
#pn-setup.flow-enabled .flow-card.is-finishing{overflow:clip}
#pn-setup.flow-enabled .flow-card.is-finishing>*{opacity:0;transition:opacity var(--m-depth) var(--ease)}
/* The next card waits for the row to land and the plan to tick before it arrives. */
#pn-setup.flow-enabled .flow-card.is-new.is-after-finish,#pn-setup.flow-enabled .flow-card.is-new.is-after-finish>*{animation-delay:440ms}
/* The plan ticks a beat after the row, so the eye goes thread, then plan. */
#pn-setup .progress-step[data-just-completed] .progress-marker>svg{transition-delay:520ms}
#pn-setup .progress-step[data-just-completed] .progress-marker>.n{animation-delay:520ms}
/* The waiting line lives in the dock, above the composer, so it is visible with the keyboard open. */
#pn-setup .flow-wait{display:flex;align-items:center;gap:8px;margin:0 0 6px 18px;color:var(--text-3);font:400 13px/1.4 var(--ui);animation:fade-in var(--m-depth) var(--ease) backwards}
#pn-setup .flow-wait>.pn-link{min-height:24px;padding:0 4px;color:var(--accent-ink);font-size:13px}
#pn-setup .flow-wait>.pn-link:hover:not(:disabled){background:transparent;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){#pn-setup.flow-enabled .flow-card.is-finishing>*{transition:none}#pn-setup .flow-wait{animation:none}}
/* Editing: the fields hang straight from the header row (outranks the #compare sibling rule). */
#pn-setup.flow-enabled .flow-receipt.is-editing+.current-module>#conversation-card>:not(.question-head,.guide-hint,.flow-resume){margin-top:0;border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
/* A finished row's Edit is always visible: the row is a record, and records say how to change them. */
#pn-setup.flow-enabled .flow-receipt>.pn-link{opacity:1}
/* Edit and its chevron stay on one line at the row's right edge. */
#pn-setup.flow-enabled .flow-receipt>.pn-link{display:inline-flex;flex:none;flex-direction:row;align-items:center;gap:2px;white-space:nowrap}
#pn-setup.flow-enabled .flow-receipt>.pn-link:after{margin-left:0}
#pn-setup.flow-enabled .flow-receipt>.pn-link:after{position:static;inset:auto}

/* ---- Design pass, 15 Sep night: options as pills, cards that read their own width ---- */
/* Choices in a card are pills that wrap, not a column of 40px rows. A choice with a description keeps a full row. */
#pn-setup.flow-enabled .flow-form .choice-options{flex-direction:row;flex-wrap:wrap;gap:6px;margin:0}
#pn-setup.flow-enabled .flow-form .choice-options .check-field{display:inline-grid;grid-template-columns:14px minmax(0,auto) auto;column-gap:8px;min-height:34px;padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-elev);font-size:14px;line-height:1.3}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:hover{background:var(--bg-elev);border-color:var(--line-2)}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:has(input:checked){border-color:var(--accent-ink);background:var(--bg-elev);box-shadow:none}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:has(span small){flex:1 1 100%}
#pn-setup.flow-enabled .flow-form .choice-options .check-field input{left:8px;width:14px;height:14px}
#pn-setup.flow-enabled .flow-form .choice-options .choice-puck{width:14px;height:14px}
#pn-setup.flow-enabled .flow-form .check-field:has(input[type=checkbox])>.choice-puck{border-radius:4px}
#pn-setup.flow-enabled .flow-form .choice-puck svg{width:9px;height:9px}
#pn-setup.flow-enabled .flow-form .choice-set{margin-top:14px}
#pn-setup.flow-enabled .flow-form .choice-set>legend{margin-bottom:6px}
#pn-setup.flow-enabled .flow-form>.field-label{margin-top:14px}
#pn-setup.flow-enabled .flow-form .field-grid{gap:12px 16px}
/* The thread reads its own width. One rule set; the rail is the only thing the page moves. */
#pn-setup.flow-enabled #chat-pane{container-type:inline-size;container-name:thread}
@container thread (max-width:560px){
  #pn-setup.flow-enabled .flow-form .field-grid{grid-template-columns:1fr}
  #pn-setup .picker-grid{grid-template-columns:1fr;gap:8px}
  #pn-setup.flow-enabled .flow-form .choice-options .check-field{flex:1 1 calc(50% - 6px)}
  #pn-setup.flow-enabled .flow-card .guide-actions .pill{flex:1 1 0}
  #pn-setup.flow-enabled .flow-card .guide-actions .pill.is-primary{flex:2 1 0}
  #pn-setup.flow-enabled .pn-user{max-width:88%}
  #pn-setup.flow-enabled .flow-receipt small{white-space:normal}
}
@container thread (max-width:420px){
  #pn-setup.flow-enabled .flow-form .choice-options .check-field{flex:1 1 100%}
  #pn-setup.flow-enabled .flow-receipt>.copy{flex-direction:column;align-items:flex-start;row-gap:0}
  #pn-setup.flow-enabled .pn-reply,#pn-setup.flow-enabled .pn-user{font-size:15px}
}
/* Turns the flow composed for the model are not shown as the person's words. */
#pn-setup.flow-enabled #messages>.pn-user.is-composed{display:none}
/* A failure notice is one quiet line, the same voice as the failed-turn line, not a red box. */
#pn-setup.flow-enabled #status[data-tone=inline]{max-width:none;margin:12px 0 0;padding:0;background:transparent;box-shadow:none;color:var(--text-2);font:400 13px/1.6 var(--ui)}
/* The notice sits in the thread column, one quiet line above the messages. */
#pn-setup.flow-enabled #chat-pane>#status[data-tone=inline]{margin:0 0 -8px}
#pn-setup.flow-enabled #chat-pane>#status:empty{display:none}
/* Goal chips read in both themes: elevated fill, hairline, body ink; the chosen ones wear the accent. */
#pn-setup.flow-enabled .idea-row>.idea{border:1px solid var(--line);background:var(--bg-elev);color:var(--text-2);font-size:12px;box-shadow:none}
#pn-setup.flow-enabled .idea-row>.idea:hover:not(:disabled){border-color:var(--line-2);color:var(--text)}
#pn-setup.flow-enabled .idea-row>.idea.is-used{border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink)}
/* Dark: chips keep body-2 ink on the elevated plate;

/* ---- Rail, picker, band (15 Sep, late) ---- */
/* The rail is rows on the page. The report is the only card in it. */
#pn-setup.flow-enabled .pn-split>.progress-panel{padding:6px 0 16px;border:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#pn-setup.flow-enabled .progress-heading{margin:0 6px 8px}
#pn-setup.flow-enabled .progress-panel>.plan-module{margin-top:16px;padding:18px 18px 16px;border-radius:var(--r-lg);box-shadow:none}
/* Picker: the fit note is the advisor's judgement, so it speaks in body ink, not the person's accent. Sizes on the ladder. */
#pn-setup :is(.picker-tile .tag,.platform .tag,.question-tag){font-size:12px}
#pn-setup.flow-enabled .picker-detail{padding:14px 16px;border-radius:12px}
#pn-setup.flow-enabled .picker-detail>:first-child{color:var(--text);font-size:14px;line-height:1.55}
#pn-setup.flow-enabled .picker-facts{margin-top:10px;font-size:13px}
#pn-setup.flow-enabled .picker-facts dt{color:var(--text-3);font-weight:400}
#pn-setup.flow-enabled .picker-facts dd{color:var(--text-2)}
#pn-setup.flow-enabled .picker-more>summary{color:var(--text-2);font-size:13px}
/* The band: a quiet strip with no glaze. On desktop the plan already carries it, so it only appears below 1180px. */
#pn-setup.flow-enabled .band{min-height:40px;border:1px solid var(--line);background:var(--bg-1);color:var(--text);box-shadow:none}
#pn-setup.flow-enabled .band-glaze,#pn-setup.flow-enabled .band:after,#pn-setup.flow-enabled .band .rail{display:none}
#pn-setup.flow-enabled .band h1{color:var(--text);font:500 14px/1.3 var(--ui);letter-spacing:0}
#pn-setup.flow-enabled .band p{color:var(--text-3)}
#pn-setup.flow-enabled .band:not([hidden]) .band-row>*{animation:none}
/* The band stays at every width: the company's name at the top is what makes the page theirs. */

/* ---- Rail as a frosted plate; the composer and its send (15 Sep, late) ---- */
/* The rail is the header's plate: the same frost, hairline and shadow, so the chrome is one material. */
#pn-setup.flow-enabled .pn-split>.progress-panel{padding:18px 16px 20px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-xl);background:color-mix(in srgb,var(--bg-elev) 72%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:var(--chrome-shadow)}
#pn-setup.flow-enabled .progress-heading{margin:0 4px 10px}
/* The composer: one hairline, the chrome shadow, 17px type, and no ring that grows on focus. */
#pn-setup .composer{gap:10px;min-height:56px;padding:8px 8px 8px 20px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:28px;background:color-mix(in srgb,var(--bg-elev) 80%,transparent);box-shadow:var(--chrome-shadow),inset 0 1px 0 rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
#pn-setup .composer:focus-within{border-color:color-mix(in srgb,var(--text) 22%,transparent);box-shadow:var(--chrome-shadow),inset 0 1px 0 rgba(255,255,255,.7)}
#pn-setup .composer:has(#message:focus-visible){box-shadow:0 0 0 3px var(--accent-soft),var(--chrome-shadow)}
#pn-setup .composer textarea{min-height:40px;padding:9px 0 9px;font:17px/1.45 var(--ui);letter-spacing:-.003em}
#pn-setup .composer textarea::placeholder{color:var(--text-3);opacity:1}
/* Send: ink at rest, the accent dome once there is something to send. The house chat grammar, one size: 40px. */
#pn-setup .pn-send{width:40px;height:40px;border:1px solid transparent;background:var(--text);color:var(--bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(15,12,8,.12)}
#pn-setup .pn-send svg{width:16px;height:16px;stroke-width:2.2}
#pn-setup .pn-send:hover:not(:disabled){background:color-mix(in srgb,var(--text) 88%,var(--bg))}
#pn-setup .pn-send:active:not(:disabled){transform:scale(.94)}
#pn-setup #message:not(:placeholder-shown)~.pn-send:not(:disabled):hover{filter:none}
#pn-setup#pn-setup .pn-compose[data-disabled=true] .pn-send{background:var(--bg-2);color:var(--text-3);box-shadow:none}
/* The band's link reads on the light strip. */
#pn-setup.flow-enabled .band-link{color:var(--text-2)}
#pn-setup.flow-enabled .band-link:hover{color:var(--text)}

/* ---- Narrow layout and the dock (15 Sep, late) ---- */
/* No Progress drawer in the conversation: the rows are in the thread, the band carries the context, the report card is appended to the thread. */
#pn-setup.flow-enabled #progress-toggle{display:none}
/* The dock: chips, then at most one quiet line, then the composer. Same voice as the waiting line. */
#pn-setup.flow-enabled .compose-hint{display:none}
#pn-setup.flow-enabled .draft-reminder{position:static;width:auto;margin:0 0 6px 20px;padding:0;border:0;background:transparent;box-shadow:none;color:var(--text-3);font:400 13px/1.4 var(--ui)}
#pn-setup.flow-enabled .conversation-availability{margin:0 0 6px 20px;color:var(--text-3);font:400 13px/1.4 var(--ui);text-align:left}
#pn-setup.flow-enabled .flow-wait{margin:0 0 6px 20px}
#pn-setup.flow-enabled .pn-compose:has(#flow-wait:not([hidden])) :is(.draft-reminder,.conversation-availability){display:none}
#pn-setup.flow-enabled .pn-compose:has(.draft-reminder:not([hidden])) .conversation-availability{display:none}

/* ---- Header on the page; the account page in the app's grammar (15 Sep, late) ---- */
/* Desktop: the header is not a plate. It sits on the page, masks what scrolls under it, and grows a hairline only once scrolled. */
@media (min-width:1180px){
  #pn-setup.flow-enabled .advisor-header{border-color:transparent;border-radius:0;background:var(--bg);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:box-shadow var(--m-ui) var(--ease)}
  #pn-setup.flow-enabled .advisor-header:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--chrome-inset);background:var(--bg)}
  #pn-setup.flow-enabled .advisor-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
}
/* Account and help: one column, the plan's row anatomy for cases, the v49 pair for actions. */
#pn-setup.flow-enabled #account-view{max-width:680px}
#pn-setup.flow-enabled #account-view h1{font:400 28px/1.2 var(--display);letter-spacing:-.02em}
#pn-setup.flow-enabled #account-view .pn-detail{padding:22px 0;border-top:1px solid var(--line)}
#pn-setup.flow-enabled #account-view .pn-detail h2{margin:0 0 8px;font:500 15px/1.4 var(--ui)}
#pn-setup.flow-enabled #account-view .pn-sub{margin:0 0 6px;color:var(--text-2);font-size:14px;line-height:1.6}
#pn-setup.flow-enabled #account-view .pn-small{color:var(--text-3);font-size:13px}
#pn-setup.flow-enabled #account-view :is(.field-label[for=case-select],.select-shell){display:none}
#pn-setup.flow-enabled .case-rows{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
#pn-setup.flow-enabled .case-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);color:var(--text);font:500 14px/1.4 var(--ui);text-align:left;cursor:pointer;transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup.flow-enabled .case-row:hover{border-color:var(--line-2)}
#pn-setup.flow-enabled .case-row:active{scale:.985}
#pn-setup.flow-enabled .case-row>.m{display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid var(--line-2);border-radius:50%;color:var(--text-3);font:500 12px/1 var(--ui)}
#pn-setup.flow-enabled .case-row.is-current>.m{border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink)}
#pn-setup.flow-enabled .case-row>.t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pn-setup.flow-enabled .case-row>.s{flex:none;color:var(--text-3);font:400 13px/1 var(--ui)}
#pn-setup.flow-enabled .case-row:after{content:"";width:12px;height:12px;flex:none;background:var(--text-3);mask:var(--chevron) center/contain no-repeat}
#pn-setup.flow-enabled .case-row.is-current:after{opacity:0}
#pn-setup.flow-enabled #account-view .pn-button{min-height:var(--action-small);padding:0 12px;font-size:13px}

/* ---- Intro page in the app's grammar (15 Sep, late): no machine voice, one card shape, the plan's numerals ---- */
#pn-setup :is(.start-grid,.intro-hero) .phase-list li:before{content:counter(phase);font:500 12px/1 var(--ui);letter-spacing:0}
#pn-setup .how-steps .n{display:none}
#pn-setup :is(.how-steps,.report-facts)>li{gap:6px;padding:18px 20px 20px;border-radius:var(--r-lg)}
#pn-setup :is(.how-steps,.report-facts) strong{font:500 15px/1.4 var(--ui);letter-spacing:0}
#pn-setup .foot-head{margin-bottom:14px;color:var(--text-3);font:500 13px/1.4 var(--ui);letter-spacing:0;text-transform:none}
#pn-setup .foot-meta{color:var(--text-3);font:400 12px/1.6 var(--ui)}
#pn-setup .foot-meta a{font:inherit}

/* ---- The report dialog on the plan's shell (15 Sep, late) ---- */
#pn-setup.flow-enabled #plan-dialog :is(.report-overview,.implementation-step,.report-rationale,.report-next-step){border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-1);box-shadow:none}
#pn-setup.flow-enabled #plan-dialog .report-overview{padding:22px 24px 20px}
#pn-setup.flow-enabled #plan-dialog h2{font:400 22px/1.25 var(--display);letter-spacing:-.02em}
#pn-setup.flow-enabled #plan-dialog h3{font:500 15px/1.4 var(--ui);letter-spacing:0}
#pn-setup.flow-enabled #plan-dialog .report-figures b{font:500 26px/1.15 var(--display);letter-spacing:-.02em}
#pn-setup.flow-enabled #plan-dialog .report-figures span{color:var(--text-3);font-size:12px}
#pn-setup.flow-enabled #plan-dialog .report-facts dt{color:var(--text-3);font-size:13px}
#pn-setup.flow-enabled #plan-dialog .report-facts dd{color:var(--text);font-size:14px}
#pn-setup.flow-enabled #plan-dialog :is(ul,ol) li{color:var(--text-2);font-size:14px;line-height:1.6}
#pn-setup.flow-enabled #plan-dialog .pn-sub{color:var(--text-2);font-size:14px}
#pn-setup.flow-enabled #plan-dialog .version-meta{color:var(--text-3);font-size:12px}
#pn-setup.flow-enabled #plan-dialog .report-nav button{font-size:13px}

/* The band, bespoke: the company in display type, the facts beside it, one quiet strip under the header. */
#pn-setup.flow-enabled .band{min-height:44px;padding:0 20px}
#pn-setup.flow-enabled .band h1{font:500 16px/1.2 var(--display);letter-spacing:-.2px}
#pn-setup.flow-enabled .band p{font-size:13px}

/* ---- Report dialog tabs as text; the rail's report card keeps its accent (15 Sep, late) ---- */
#pn-setup.flow-enabled .report-nav{gap:18px;padding:8px 24px 0}
#pn-setup.flow-enabled .report-nav button{min-height:36px;padding:0 0 8px;border-radius:0;background:transparent;color:var(--text-3);box-shadow:inset 0 -2px 0 transparent;transition:color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .report-nav button:hover{background:transparent;color:var(--text)}
#pn-setup.flow-enabled .report-nav button[aria-current=page]{background:transparent;color:var(--text);box-shadow:inset 0 -2px 0 var(--accent-ink)}
/* The report card's first step: one line under the figures, in the advisor's voice. */
#pn-setup .plan-module .plan-next{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--text-2);font:400 13px/1.55 var(--ui)}
/* The picker: the recommended and chosen tiles carry the ink; the alternatives step back. */
#pn-setup.flow-enabled .picker-tile:not(:has(input:checked)):not(:has(.tag)){border-color:color-mix(in srgb,var(--line) 70%,transparent)}
#pn-setup.flow-enabled .picker-tile:not(:has(input:checked)):not(:has(.tag)) .picker-body>*{color:var(--text-3)}
#pn-setup.flow-enabled .picker-tile:not(:has(input:checked)):not(:has(.tag)) .picker-body strong{color:var(--text-2)}
#pn-setup.flow-enabled .picker-tile:not(:has(input:checked)):not(:has(.tag)):hover .picker-body>*{color:var(--text)}

/* ---- The chat, end to end (15 Sep, night) ---- */
/* Start rows inside the platform card, above its one Continue. */
#pn-setup.flow-enabled .picker>.flow-start{margin:16px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
#pn-setup.flow-enabled .picker>.flow-start .choice-set{margin-top:0}
#pn-setup.flow-enabled .picker>.flow-start .choice-set+.choice-set{margin-top:14px}
/* The finishing moment: the last reply carries the report's two actions on the right edge. */
#pn-setup.flow-enabled .flow-finish{display:flex;justify-content:flex-end;gap:8px;margin-top:-10px}
#pn-setup.flow-enabled .flow-finish .pill{min-height:var(--action-height);padding:0 16px}
/* "What happens next" inside the report card: a section of the card, not a card of its own. */
#pn-setup.flow-enabled .plan-module>.engagement-module{margin:14px 0 0;padding:14px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
#pn-setup.flow-enabled .plan-module>.engagement-module h2{margin:0 0 8px;font:500 13px/1.4 var(--ui);color:var(--text-2);letter-spacing:0}
#pn-setup.flow-enabled .plan-module>.engagement-module .choice-options{flex-direction:column;gap:6px}
#pn-setup.flow-enabled .plan-module>.engagement-module .choice-options .check-field{min-height:34px;font-size:13px}
#pn-setup.flow-enabled .plan-module>.engagement-module .field-hint,#pn-setup.flow-enabled .plan-module>.engagement-module .pn-small{font-size:12px}
/* A field filled from what the person said says so, in the suggestion's own small voice. */
#pn-setup.flow-enabled .flow-suggestion{display:block;margin-top:6px;color:var(--accent-ink);font-size:12px}
#pn-setup.flow-enabled .progress-heading small{white-space:nowrap;font-size:12px}
/* Inside the report card the three options stack, each a short row, and the contact line follows. */
#pn-setup.flow-enabled .plan-module>.engagement-module #engagement-form fieldset{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-option{grid-template-columns:14px minmax(0,1fr);column-gap:8px;padding:8px 10px;border-radius:10px;background:var(--bg-elev)}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-option>input{margin-top:2px;width:14px;height:14px}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-option strong{font:500 13px/1.35 var(--ui)}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-option small{display:none}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-contact-row{display:flex;flex-direction:column;gap:6px;margin-top:10px}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-contact{font-size:12px;color:var(--text-2)}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-link{font-size:12px;padding:0}
#pn-setup.flow-enabled .plan-module>.engagement-module>h2{margin:0 0 8px;font:500 13px/1.4 var(--ui);color:var(--text-2);letter-spacing:0;max-width:none}
#pn-setup.flow-enabled .plan-module>.engagement-module>#engagement-title{margin:0 0 8px;font:500 13px/1.4 var(--ui);color:var(--text-2);letter-spacing:0;max-width:none}
/* A one-line field is one line: it grows with what is typed and never shows a scrollbar until it is tall. */
#pn-setup.flow-enabled .flow-form textarea{overflow-y:hidden;scrollbar-gutter:auto}
/* The brief review: labels get room to sit on one line beside their answers. */
#pn-setup.flow-enabled .flow-answer>summary{grid-template-columns:156px minmax(0,1fr) 12px}
#pn-setup.flow-enabled .flow-answer-label{font-size:13px;line-height:1.5}

/* ---- A compact rail: everything at a glance, no scrollbar (15 Sep, night) ---- */
#pn-setup.flow-enabled .pn-split>.progress-panel{padding:14px 12px 14px;scrollbar-width:none}
#pn-setup.flow-enabled .pn-split>.progress-panel::-webkit-scrollbar{display:none}
#pn-setup.flow-enabled .progress-heading{margin:0 6px 4px}
#pn-setup.flow-enabled .progress-heading h2{font-size:20px}
#pn-setup.flow-enabled #ledger{gap:0}
#pn-setup.flow-enabled .progress-step>:is(summary,.progress-line){min-height:42px;padding:5px 6px;gap:10px}
#pn-setup.flow-enabled .progress-step>:is(summary,.progress-line) strong{font-size:14px;line-height:1.35}
#pn-setup.flow-enabled .progress-step>:is(summary,.progress-line)>div>span{margin-top:1px;font-size:12px;line-height:1.4}
#pn-setup.flow-enabled .progress-panel>.plan-module{margin-top:10px;padding:14px 14px 12px}
#pn-setup.flow-enabled .progress-panel>.plan-module h2,#pn-setup.flow-enabled .progress-panel>.plan-module>h3{font-size:15px}
#pn-setup.flow-enabled .progress-panel>.plan-module .facts b,#pn-setup.flow-enabled .progress-panel>.plan-module #plan-module-facts b{font-size:20px;line-height:1.15}
#pn-setup.flow-enabled .progress-panel>.plan-module #plan-module-facts>div+div{margin-top:6px}
#pn-setup.flow-enabled .progress-panel>.plan-module #plan-module-facts span{font-size:12px}
#pn-setup.flow-enabled .progress-panel>.plan-module .quiet-line{margin-top:6px;font-size:12px;line-height:1.4}
#pn-setup.flow-enabled .progress-panel>.plan-module .plan-next{margin-top:8px;padding-top:8px;font-size:12px;line-height:1.45}
#pn-setup.flow-enabled .progress-panel>.plan-module #plan-module-bar{margin-top:10px;gap:6px}
#pn-setup.flow-enabled .progress-panel>.plan-module #plan-module-bar .pill{min-height:34px;font-size:13px}
#pn-setup.flow-enabled .progress-panel>.plan-module>.engagement-module{margin-top:10px;padding-top:10px}
#pn-setup.flow-enabled .progress-panel>.plan-module>.engagement-module>#engagement-title{margin-bottom:6px;font-size:12px}
#pn-setup.flow-enabled .progress-panel>.plan-module>.engagement-module #engagement-form fieldset{gap:4px}
#pn-setup.flow-enabled .progress-panel>.plan-module>.engagement-module .engagement-option{min-height:30px;padding:5px 10px}
#pn-setup.flow-enabled .progress-panel>.plan-module>.engagement-module .engagement-option strong{font-size:12px}
#pn-setup.flow-enabled .progress-panel>.plan-module>.engagement-module .engagement-contact-row{margin-top:8px;gap:4px}
/* The card says when the report is behind the answers. */
#pn-setup .plan-module .plan-stale{margin:8px 0 0;color:var(--text-2);font:400 12px/1.45 var(--ui)}
/* One line after a download, in the system's voice. */
#pn-setup.flow-enabled .flow-downloaded{margin-top:-14px;color:var(--text-3);font-size:13px}
/* The data rule's own line sits under its choices, same width as a field. */
#pn-setup.flow-enabled .flow-form .flow-rule{margin:8px 0 0}
#pn-setup.flow-enabled .flow-form .flow-rule .field-question{font-size:12px;color:var(--text-3)}

/* ---- Phone pass (15 Sep, night): what the 390px harness found ---- */
/* The header keeps the mark and the product name; the wordmark is what goes, never half of it. */
@media (max-width:560px){
  #pn-setup .brand-home .brand-name,#pn-setup .brand-home .brand-ai{display:none}
  #pn-setup .brand-home .brand-product{display:inline;margin-left:0;color:var(--text);font-weight:500}
}
@container thread (max-width:420px){
  /* The report card's two figures stack; each keeps its label on one line. */
  #pn-setup.flow-enabled #plan-module-facts{display:flex;flex-direction:column;gap:8px}
  #pn-setup.flow-enabled #plan-module-facts>div+div{margin-top:0}
  /* Picker descriptions wrap on a phone instead of truncating. */
  #pn-setup.flow-enabled .picker-body p,#pn-setup.flow-enabled .picker-body small{white-space:normal;overflow:visible;text-overflow:clip;display:block;-webkit-line-clamp:unset}
  /* The platform card's bar: the note first, then Cancel and the primary sharing one row. */
  #pn-setup.flow-enabled .picker>.bar{flex-wrap:wrap;row-gap:8px}
  #pn-setup.flow-enabled .picker>.bar>.quiet-line{flex:1 1 100%;order:-1;margin:0 0 2px}
  #pn-setup.flow-enabled .picker>.bar>.pill{flex:1 1 0;margin:0}
  #pn-setup.flow-enabled .picker>.bar>.pill.is-primary{flex:2 1 0}
  /* The finish bar's two actions share the row too. */
  #pn-setup.flow-enabled .flow-finish .pill{flex:1 1 0}
  #pn-setup.flow-enabled .flow-finish .pill.is-primary{flex:2 1 0}
}
/* On a phone the platform card's long primary takes its own row; the note sits above, Cancel below. */
@container thread (max-width:420px){
  #pn-setup.flow-enabled .picker>.bar>.pill{flex:1 1 100%}
  #pn-setup.flow-enabled .picker>.bar>.quiet-line{order:0}
  #pn-setup.flow-enabled .picker>.bar>.pill.is-primary{order:1}
  #pn-setup.flow-enabled .picker>.bar>.pill.is-secondary{order:2}
}
/* A setup that cannot be opened: one quiet line, two links, nothing else in the thread. */
#pn-setup.flow-enabled .flow-failed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;color:var(--text-2);font:400 14px/1.6 var(--ui)}
#pn-setup.flow-enabled .flow-failed>.pn-link{min-height:24px;padding:0 4px;color:var(--accent-ink);font-size:14px}
#pn-setup.flow-enabled .flow-failed>.flow-dot{color:var(--text-3)}
/* Sign-in: the first screen a new person sees. One sentence, one button, the privacy line. */
#pn-setup #sign-in{max-width:560px;margin:96px auto 0;padding:0 24px;gap:14px}
#pn-setup #load-failed{max-width:560px;margin:96px auto 0;padding:0 24px;gap:14px}
#pn-setup #load-failed h1{margin:0;font:400 30px/1.2 var(--display);letter-spacing:-.02em;text-wrap:balance;outline:0}
#pn-setup #load-failed .pn-sub{margin:0;max-width:52ch;color:var(--text-2);font-size:16px;line-height:1.6}
#pn-setup #load-failed .pn-inline{margin-top:6px}
#pn-setup #sign-in h1{margin:0;font:400 30px/1.2 var(--display);letter-spacing:-.02em;text-wrap:balance}
#pn-setup #sign-in .pn-sub{margin:0;max-width:52ch;color:var(--text-2);font-size:16px;line-height:1.6}
#pn-setup #sign-in .pn-inline{margin-top:6px}
#pn-setup #sign-in .sign-in-privacy{margin:4px 0 0;color:var(--text-3);font-size:13px}

/* ---- Motion, one clock (16 Sep): text and rows arrive in 220ms, cards land in 320ms, heights settle in 380ms,
   a press is 120ms, a pop is 420ms, a check draws in 260ms. Nothing in the thread uses another number. ---- */
#pn-setup.flow-enabled #messages>.pn-reply.is-new{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled #messages>.pn-user.is-new{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-card.is-new{animation:materialize var(--m-enter) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-card.is-new>*{animation:content-arrive var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-card.is-new>*:nth-child(2){animation-delay:40ms}
#pn-setup.flow-enabled .flow-card.is-new>*:nth-child(n+3){animation-delay:80ms}
@media (prefers-reduced-motion:reduce){
  #pn-setup.flow-enabled :is(.pn-reply,.pn-user,.flow-receipt,.flow-card,.flow-card>*,.flow-wait,.flow-finish,.progress-step){animation:none!important;transition-duration:0s!important}
}

/* ==== Motion pass, the whole app (16 Sep) ====================================================
   One clock: press 120 · tone 140 · arrive 220 · draw 260 · land 320 · settle 380 · pop 420.
   Hover is tone and edge, never position. Press is a squash. Things arrive, they do not load in. */

/* -- Keyframes the pass adds -- */
@keyframes rise-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes send-wake{0%{scale:1}45%{scale:1.08}100%{scale:1}}
@keyframes marker-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 0%,transparent)}}
@keyframes report-glow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}35%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}}
@keyframes done-pop{0%{scale:1}40%{scale:.94}100%{scale:1}}
@keyframes mark-breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* -- Header: every control answers the pointer with tone -- */
#pn-setup .brand-home,#pn-setup .person-main,#pn-setup .icon-button,#pn-setup .dev-reset{transition:background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .brand-home:hover,#pn-setup .person-main:hover{background:var(--bg-1)}
#pn-setup .brand-home:active,#pn-setup .person-main:active,#pn-setup .icon-button:active{scale:.97;transition-duration:0s}
#pn-setup .site-nav a{transition:color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}

/* -- Band: rises in once when a company exists; its facts tick when they change -- */
#pn-setup.flow-enabled .band:not([hidden]){animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .band-link{transition:color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}

/* -- Intro: the hero, its stages and the cards arrive in sequence -- */
#pn-setup[data-phase=start] .intro-hero{animation:rise-in var(--m-enter) var(--ease-out) backwards}
#pn-setup[data-phase=start] .hero-copy>*{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup[data-phase=start] .hero-copy>:nth-child(2){animation-delay:60ms}
#pn-setup[data-phase=start] .hero-copy>:nth-child(3){animation-delay:120ms}
#pn-setup[data-phase=start] .phase-list li{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup[data-phase=start] .phase-list li:nth-child(2){animation-delay:60ms}
#pn-setup[data-phase=start] .phase-list li:nth-child(3){animation-delay:120ms}
#pn-setup[data-phase=start] .phase-list li:nth-child(4){animation-delay:180ms}
#pn-setup[data-phase=start] :is(.how-steps,.report-facts)>li{animation:rise-in var(--m-enter) var(--ease-out) backwards;transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}
#pn-setup[data-phase=start] :is(.how-steps,.report-facts)>li:nth-child(2){animation-delay:70ms}
#pn-setup[data-phase=start] :is(.how-steps,.report-facts)>li:nth-child(3){animation-delay:140ms}
#pn-setup[data-phase=start] :is(.how-steps,.report-facts)>li:hover{border-color:var(--line-2);background:var(--bg-elev)}
#pn-setup .pn-button .btn-arrow{transition:opacity var(--m-ui) var(--ease)}
#pn-setup .pn-button:hover .btn-arrow{opacity:1}
#pn-setup .foot-col :is(a,.pn-link){transition:color var(--m-ui) var(--ease)}
#pn-setup .foot-col :is(a,.pn-link):hover{color:var(--text)}

/* -- Sign-in: the same sequence, smaller -- */
#pn-setup #sign-in:not([hidden])>*{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup #sign-in:not([hidden])>:nth-child(2){animation-delay:60ms}
#pn-setup #sign-in:not([hidden])>:nth-child(3){animation-delay:120ms}
#pn-setup #sign-in:not([hidden])>:nth-child(4){animation-delay:180ms}

/* -- Thread: rows, turns, replies and the finish bar arrive; rows answer the pointer -- */
#pn-setup.flow-enabled .flow-receipt{transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .flow-receipt:hover{border-color:var(--line-2);background:var(--bg-elev)}
#pn-setup.flow-enabled .flow-receipt>.pn-link{transition:color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup.flow-enabled .flow-receipt:hover>.pn-link{color:var(--text)}
#pn-setup.flow-enabled .flow-receipt>.pn-link:active{scale:.94;transition-duration:0s}
#pn-setup.flow-enabled .flow-finish.is-new{animation:rise-in var(--m-depth) var(--ease-out) 120ms backwards}
#pn-setup.flow-enabled .flow-downloaded,#pn-setup.flow-enabled .flow-failed,#pn-setup.flow-enabled .flow-wait{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-suggestion{animation:rise-in var(--m-depth) var(--ease-out) backwards}

/* -- Cards: fields, pills and chips answer the pointer; the puck pops on choice -- */
#pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea){transition:border-color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea):hover{border-color:var(--line-2)}
#pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea):focus{box-shadow:var(--focus-ring-field)}
#pn-setup.flow-enabled .flow-form .choice-options .check-field{transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:active{scale:.97;transition-duration:0s}
#pn-setup.flow-enabled .idea-row>.idea{transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup.flow-enabled .idea-row>.idea.is-used{animation:commit-pop var(--m-pop) var(--ease-expo)}
#pn-setup.flow-enabled .flow-rule:not([hidden]){animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup .picker-tile{transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .picker-tile:hover:not(:has(input:checked)){border-color:var(--line-2)}
#pn-setup .picker-tile:active{scale:.985;transition-duration:0s}
#pn-setup .picker-detail.is-new{animation:rise-in var(--m-depth) var(--ease-out) backwards}

/* -- Pills: secondary tones its edge, primary deepens; both squash on press -- */
#pn-setup .pill{transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out),filter var(--m-ui) var(--ease)}
#pn-setup .pill.is-primary:hover:not(:disabled){filter:brightness(1.05)}
#pn-setup :is(.pill.is-secondary,.pn-button:not(.pn-primary)):hover:not(:disabled){translate:0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 5px -2px rgba(15,12,8,.16)}
#pn-setup .pill.is-done,#pn-setup .pn-button.is-done{animation:done-pop var(--m-pop) var(--ease-expo)}

/* -- Composer and send: the dome wakes when there is something to send, squashes on press,
      and its arrow breathes while the advisor works -- */
#pn-setup .composer{transition:border-color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease)}
#pn-setup .composer:hover{border-color:color-mix(in srgb,var(--text) 16%,transparent)}
#pn-setup .pn-send{transition:background-color var(--m-ui) var(--ease),border-color var(--m-ui) var(--ease),color var(--m-ui) var(--ease),box-shadow var(--m-ui) var(--ease),transform var(--m-press) var(--ease-out),filter var(--m-ui) var(--ease)}
#pn-setup #message:not(:placeholder-shown)~.pn-send:not(:disabled){animation:send-wake var(--m-pop) var(--ease-expo)}
#pn-setup .pn-send[data-working] .working-dots i{animation:mark-breathe 1.4s var(--ease) infinite}
#pn-setup .pn-send[data-working] .working-dots i:nth-child(2){animation-delay:.18s}
#pn-setup .pn-send[data-working] .working-dots i:nth-child(3){animation-delay:.36s}

/* -- Thinking: the mark's wave, and the line beneath it swaps on the clock -- */
#pn-setup.flow-enabled .turn-row{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled #turn-state{transition:color var(--m-ui) var(--ease)}

/* -- Rail: rows answer the pointer, the current stage pulses once, closes tick, the report card glows once -- */
#pn-setup.flow-enabled .progress-step>:is(summary,.progress-line){transition:background-color var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .progress-step>summary:hover{background:var(--bg-1)}
#pn-setup.flow-enabled .progress-step>summary:active{scale:.99;transition-duration:0s}
#pn-setup.flow-enabled .progress-step[data-just-current] .progress-marker{animation:marker-pulse var(--m-pop) var(--ease-out) 120ms}
#pn-setup.flow-enabled .progress-step[data-just-completed]>:is(summary,.progress-line)>div>span{animation:rise-in var(--m-depth) var(--ease-out) 560ms backwards}
#pn-setup.flow-enabled .progress-panel>.plan-module.is-new{animation:materialize var(--m-enter) var(--ease-out) backwards,report-glow 900ms var(--ease) 320ms}
#pn-setup.flow-enabled #plan-module-facts b{transition:color var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .plan-module .plan-next,#pn-setup.flow-enabled .plan-module .plan-stale{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-option{transition:border-color var(--m-ui) var(--ease),background-color var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .plan-module>.engagement-module .engagement-option:hover{border-color:var(--line-2)}

/* -- Dialog: arrives on the clock, its backdrop fades, its tabs slide their underline -- */
#pn-setup .plan-dialog[open]{animation:dialog-arrive var(--m-enter) var(--ease-out)}
#pn-setup .plan-dialog::backdrop{background:rgba(26,22,16,.28);animation:fade-in var(--m-depth) var(--ease)}
#pn-setup.flow-enabled #plan-dialog :is(.report-overview,.implementation-step,.report-rationale){transition:border-color var(--m-ui) var(--ease)}
#pn-setup .dialog-close{transition:background-color var(--m-ui) var(--ease),scale var(--m-press) var(--ease-out)}
#pn-setup .dialog-close:active{scale:.94;transition-duration:0s}

/* -- Account: rows answer the pointer -- */
#pn-setup.flow-enabled .case-row:hover{background:var(--bg-elev)}
#pn-setup.flow-enabled .case-row:focus-visible,#pn-setup.flow-enabled .flow-receipt>.pn-link:focus-visible,#pn-setup .picker-tile:has(input:focus-visible){outline:none;box-shadow:var(--focus-ring-cta)}

/* -- Reduced motion: everything above stands still; state changes stay instant -- */
@media (prefers-reduced-motion:reduce){
  #pn-setup :is(.intro-hero,.hero-copy>*,.phase-list li,.how-steps>li,.report-facts>li,#sign-in>*,.band,.flow-finish,.flow-downloaded,.flow-failed,.flow-wait,.flow-suggestion,.flow-rule,.picker-detail,.turn-row,.plan-next,.plan-stale,.plan-module,.progress-marker,.pill,.pn-send,.idea){animation:none!important}
}

/* ==== Cards arriving and reopening (16 Sep) ================================================ */
/* A new card: the question line rises first, the module lands under it with its blur clearing, its
   parts rise in sequence, the action bar last, and the module's edge is lit for a moment then settles. */
#pn-setup.flow-enabled .flow-card.is-new>.question-head{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-card.is-new>:not(.question-head,.guide-hint,.flow-resume){animation:materialize var(--m-enter) var(--ease-out) 80ms backwards,edge-light 1200ms var(--ease) 80ms}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>*{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>:nth-child(1){animation-delay:160ms}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>:nth-child(2){animation-delay:200ms}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>:nth-child(3){animation-delay:240ms}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>:nth-child(4){animation-delay:280ms}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>:nth-child(n+5){animation-delay:320ms}
#pn-setup.flow-enabled .flow-card.is-new .flow-form>.guide-actions{animation-delay:360ms}
#pn-setup.flow-enabled .flow-card.is-new .picker-grid>.picker-tile{animation:rise-in var(--m-depth) var(--ease-out) backwards;animation-delay:calc(160ms + var(--n,0) * 50ms)}
#pn-setup.flow-enabled .flow-card.is-new .picker-grid>.picker-tile:nth-child(2){--n:1}
#pn-setup.flow-enabled .flow-card.is-new .picker-grid>.picker-tile:nth-child(3){--n:2}
#pn-setup.flow-enabled .flow-card.is-new .picker-grid>.picker-tile:nth-child(4){--n:3}
@keyframes edge-light{0%{border-color:var(--accent-edge)}100%{border-color:var(--line)}}
/* Waiting for the row to settle and the plan to tick, a card after a finish holds its whole sequence back. */
#pn-setup.flow-enabled .flow-card.is-new.is-after-finish>*,#pn-setup.flow-enabled .flow-card.is-new.is-after-finish .flow-form>*{animation-delay:calc(440ms + 0ms)}
#pn-setup.flow-enabled .flow-card.is-new.is-after-finish .flow-form>:nth-child(2){animation-delay:480ms}
#pn-setup.flow-enabled .flow-card.is-new.is-after-finish .flow-form>:nth-child(3){animation-delay:520ms}
#pn-setup.flow-enabled .flow-card.is-new.is-after-finish .flow-form>:nth-child(n+4){animation-delay:560ms}
/* Reopening: the row's check gives way to its number, its summary reads Editing, and the card grows out of it. */
#pn-setup.flow-enabled .flow-card.is-opening{overflow:clip}
#pn-setup.flow-enabled .flow-receipt.is-editing .flow-saved-check:before{animation:rise-in var(--m-depth) var(--ease-out) backwards}
#pn-setup.flow-enabled .flow-receipt.is-editing{animation:tone-flash var(--m-pop) var(--ease) backwards}
#pn-setup.flow-enabled .flow-receipt.is-editing+.current-module>.flow-card.is-new>*{animation:rise-in var(--m-depth) var(--ease-out) 200ms backwards}
@media (prefers-reduced-motion:reduce){#pn-setup.flow-enabled .flow-card.is-new *,#pn-setup.flow-enabled .flow-receipt.is-editing,#pn-setup.flow-enabled .flow-receipt.is-editing *{animation:none!important}}

/* The draft note sits at the left of the card's action bar, only once the card has been touched. */
#pn-setup.flow-enabled .flow-draft-note{margin-right:auto;color:var(--text-3);font:400 12px/1.4 var(--ui);animation:rise-in var(--m-depth) var(--ease-out) backwards}

/* ==== Card tokens (16 Sep): bigger questions, more air, one chip language, a clear selected state ==== */
/* Questions read as questions: 15px, ink, not muted. */
#pn-setup.flow-enabled .flow-form .field-label{font-size:15px}
#pn-setup.flow-enabled .flow-form .field-label>.field-question,#pn-setup.flow-enabled .flow-form .choice-set>legend{color:var(--text);font:500 15px/1.4 var(--ui);letter-spacing:-.005em}
#pn-setup.flow-enabled .flow-form .choice-set>legend{margin-bottom:8px}
#pn-setup.flow-enabled .flow-form .field-label>:is(input,textarea){margin-top:8px}
#pn-setup.flow-enabled .flow-form>.field-label,#pn-setup.flow-enabled .flow-form .choice-set{margin-top:18px}
#pn-setup.flow-enabled .flow-form>.field-label:first-child,#pn-setup.flow-enabled .flow-form .choice-set:first-child{margin-top:0}
#pn-setup.flow-enabled .flow-form .field-hint,#pn-setup.flow-enabled .flow-form .choice-set>.field-hint{margin-top:6px;font-size:12px}
/* The card breathes a little more. */
#pn-setup.flow-enabled .flow-card>:not(.question-head,.guide-hint,.flow-resume){padding:20px 20px 18px}
#pn-setup.flow-enabled .flow-form .field-grid{gap:14px 20px}
/* Fields: a hairline at rest, the accent ring on focus. */
#pn-setup.flow-enabled .flow-form :is(input:not([type=radio],[type=checkbox]),textarea){border-color:var(--line);min-height:44px;padding:10px 14px;font-size:15px}
/* Option buttons: one chip language with the goal chips. Round, 38px, hairline at rest, edge on hover,
   and a selected state you can see from across the room: accent-soft fill, accent ink, accent edge, filled puck. */
#pn-setup.flow-enabled .flow-form .choice-options{gap:8px}
#pn-setup.flow-enabled .flow-form .choice-options .check-field{min-height:38px;padding:8px 14px 8px 12px;border-radius:var(--r-pill);border-color:var(--line);background:var(--bg-elev);color:var(--text);font-size:14px}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:hover{border-color:var(--line-2)}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink);font-weight:500}
#pn-setup.flow-enabled .flow-form .choice-options .choice-puck{width:16px;height:16px;border-color:var(--line-2)}
#pn-setup.flow-enabled .flow-form .check-field:has(input[type=checkbox])>.choice-puck{border-radius:5px}
#pn-setup.flow-enabled .flow-form .choice-puck svg{width:10px;height:10px}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:has(input:checked) .choice-puck{border-color:var(--accent-ink);background:var(--accent-ink)}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:has(input:focus-visible){box-shadow:var(--focus-ring-cta)}
/* Goal chips match: same height, same selected state. */
#pn-setup.flow-enabled .idea-row{gap:8px;margin-top:10px}
#pn-setup.flow-enabled .idea-row>.idea{min-height:34px;padding:0 14px;font-size:13px;color:var(--text)}
#pn-setup.flow-enabled .idea-row>.idea.is-used{border-color:var(--accent-ink);background:var(--accent-soft);color:var(--accent-ink)}
/* Action bar: a touch more presence, still on the right edge. */
#pn-setup.flow-enabled .flow-card .guide-actions{gap:10px;margin-top:20px}
#pn-setup.flow-enabled .flow-card .guide-actions .pill{min-height:38px;padding:0 16px;font-size:14px}
#pn-setup.flow-enabled .picker>.bar>.pill{min-height:38px;padding:0 16px;font-size:14px}
/* ==== Using the card's width (16 Sep) ====
   Questions sit on a two-column grid. Anything long spans both columns: a written answer, its chips,
   a list of five or more choices, the company and people row, the privacy line and the action bar.
   Two short questions share a row. Pills fill their row instead of huddling at the left. */
#pn-setup.flow-enabled .flow-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;align-items:start}
#pn-setup.flow-enabled .flow-form>*{margin-top:0}
#pn-setup.flow-enabled .flow-form>.field-label,#pn-setup.flow-enabled .flow-form>.choice-set{margin-top:0}
#pn-setup.flow-enabled .flow-form>:is(.field-grid,.field-label,.guide-actions,.flow-error,.quiet-line,.field-hint,.flow-answer,.pn-link){grid-column:1/-1}
#pn-setup.flow-enabled .flow-form>.choice-set:has(.check-field:nth-child(5)),#pn-setup.flow-enabled .flow-form>.choice-set:has(.flow-rule:not([hidden])){grid-column:1/-1}
#pn-setup.flow-enabled .flow-form>.choice-set:has(textarea){grid-column:1/-1}
#pn-setup.flow-enabled .flow-form>.field-grid{margin:0}
#pn-setup.flow-enabled .flow-form>.guide-actions{margin-top:2px}
#pn-setup.flow-enabled .flow-form .choice-options .check-field{flex:1 1 auto;justify-content:flex-start}
#pn-setup.flow-enabled .flow-form .choice-options .check-field:has(span small){flex:1 1 100%}
/* The start rows inside the platform card share the same grid. */
#pn-setup.flow-enabled .picker>.flow-start{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
#pn-setup.flow-enabled .picker>.flow-start .choice-set{margin-top:0}
#pn-setup.flow-enabled .picker>.flow-start .choice-set:has(.check-field:nth-child(5)){grid-column:1/-1}
@container thread (max-width:560px){
  #pn-setup.flow-enabled .flow-form,#pn-setup.flow-enabled .picker>.flow-start{grid-template-columns:1fr}
  #pn-setup.flow-enabled .flow-form>*,#pn-setup.flow-enabled .picker>.flow-start>*{grid-column:1}
}
/* A short question shares a row only with another short question next to it; alone, it takes the full width. */
#pn-setup.flow-enabled .flow-form>.choice-set,#pn-setup.flow-enabled .picker>.flow-start .choice-set{grid-column:1/-1}
#pn-setup.flow-enabled .flow-form>.choice-set.is-short:has(+.choice-set.is-short),#pn-setup.flow-enabled .flow-form>.choice-set.is-short+.choice-set.is-short{grid-column:auto}
#pn-setup.flow-enabled .picker>.flow-start .choice-set.is-short:has(+.choice-set.is-short),#pn-setup.flow-enabled .picker>.flow-start .choice-set.is-short+.choice-set.is-short{grid-column:auto}
@container thread (max-width:560px){#pn-setup.flow-enabled .flow-form>.choice-set,#pn-setup.flow-enabled .picker>.flow-start .choice-set{grid-column:1}}
/* The platform card's note takes its own line above the buttons, so the primary never wraps under Cancel. */
#pn-setup.flow-enabled .picker>.bar{flex-wrap:wrap;row-gap:10px}
#pn-setup.flow-enabled .picker>.bar>.quiet-line{flex:1 1 100%;margin:0}

/* ---- Phone pass (16 Sep): the scrollbar, the rows, the report ---- */
/* A phone-width window scrolls without a page scrollbar; the gutter it reserved is what pushed the thread off centre. */
@media (max-width:650px){
  html:has(#pn-setup.flow-enabled){scrollbar-gutter:auto;scrollbar-width:none}
  html:has(#pn-setup.flow-enabled)::-webkit-scrollbar,body:has(#pn-setup.flow-enabled)::-webkit-scrollbar{display:none;width:0;height:0}
}
/* A saved row on a phone: the stage on one line with Edit, the summary wrapping under it with room to breathe. */
@container thread (max-width:560px){
  #pn-setup.flow-enabled .flow-receipt{align-items:flex-start;min-height:0;padding:12px 10px 12px 14px;gap:12px}
  #pn-setup.flow-enabled .flow-receipt .flow-saved-check{margin-top:1px}
  #pn-setup.flow-enabled .flow-receipt>.copy{flex-direction:column;align-items:flex-start;row-gap:3px;overflow:visible}
  #pn-setup.flow-enabled .flow-receipt strong{white-space:normal;line-height:1.3}
  #pn-setup.flow-enabled .flow-receipt small{overflow:visible;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;line-height:1.45;padding-right:4px}
  #pn-setup.flow-enabled .flow-receipt>.pn-link{align-self:flex-start;margin-top:-6px;min-height:32px}
}
/* The report card without a rail: a bar above the composer that opens into the card. */
#pn-setup.flow-enabled .report-dock{pointer-events:auto;margin:0 0 10px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));border-radius:var(--r-lg);background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 9%,var(--bg-elev)),var(--bg-elev) 62%);box-shadow:0 1px 2px rgba(26,22,16,.06),0 10px 24px -14px rgba(26,22,16,.22);overflow:hidden;transition:border-color var(--m-ui) var(--ease),box-shadow var(--m-depth) var(--ease)}
#pn-setup.flow-enabled .report-dock.is-open{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:0 1px 2px rgba(26,22,16,.06),0 18px 40px -18px rgba(26,22,16,.3)}
#pn-setup.flow-enabled .report-bar{display:grid;grid-template-columns:18px minmax(0,1fr) 20px;align-items:center;column-gap:12px;width:100%;min-height:56px;margin:0;padding:8px 14px 8px 16px;border:0;border-radius:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:background-color var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .report-bar:active{transition-duration:0s}
#pn-setup.flow-enabled .report-bar:active .report-bar-text{scale:.985;transition-duration:0s}
#pn-setup.flow-enabled .report-bar-mark{width:18px;height:18px;overflow:visible}
#pn-setup.flow-enabled .report-bar-mark rect{fill:#3da8dc}
#pn-setup.flow-enabled .report-bar-mark rect:nth-child(1),#pn-setup.flow-enabled .report-bar-mark rect:nth-child(3),#pn-setup.flow-enabled .report-bar-mark rect:nth-child(7),#pn-setup.flow-enabled .report-bar-mark rect:nth-child(9){fill:#262626}
#pn-setup.flow-enabled .report-bar-mark rect:nth-child(5){fill:#d97757}
#pn-setup.flow-enabled .report-bar-text{display:flex;flex-direction:column;min-width:0;transform-origin:left center;transition:scale var(--m-press) var(--ease-out)}
#pn-setup.flow-enabled .report-bar-title{color:var(--text);font:500 15px/1.3 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pn-setup.flow-enabled .report-bar-sub{color:var(--text-2);font:400 13px/1.35 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pn-setup.flow-enabled .report-bar-sub:empty{display:none}
#pn-setup.flow-enabled .report-bar:after{content:"";width:20px;height:20px;background:currentColor;opacity:.55;mask:var(--chevron) center/14px no-repeat;rotate:-90deg;transition:rotate var(--m-struct) var(--ease),opacity var(--m-ui) var(--ease)}
#pn-setup.flow-enabled .report-dock.is-open .report-bar:after{rotate:90deg;opacity:.8}
#pn-setup.flow-enabled .report-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--m-struct) var(--ease)}
#pn-setup.flow-enabled .report-dock.is-open .report-body{grid-template-rows:1fr}
#pn-setup.flow-enabled .report-body-inner{min-height:0;overflow:hidden;opacity:0;translate:0 -4px;transition:opacity var(--m-depth) var(--ease),translate var(--m-struct) var(--ease)}
#pn-setup.flow-enabled .report-dock.is-open .report-body-inner{opacity:1;translate:0 0;transition-delay:60ms}
#pn-setup.flow-enabled .report-dock:not(.is-open) .report-body-inner{visibility:hidden;transition:opacity var(--m-ui) var(--ease),translate var(--m-struct) var(--ease),visibility 0s var(--m-struct)}
#pn-setup.flow-enabled .report-body-inner>.plan-module{max-height:min(62dvh,calc(100dvh - 260px));margin:0;padding:4px 16px 24px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);border:0;border-radius:0;background:transparent;box-shadow:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#pn-setup.flow-enabled .report-body-inner>.plan-module::-webkit-scrollbar{display:none}
#pn-setup.flow-enabled .report-body-inner>.plan-module.is-new{animation:none}
#pn-setup.flow-enabled .report-body-inner>.plan-module>h2{display:none}
#pn-setup.flow-enabled .report-body-inner>.plan-module .facts{margin:2px 0 4px;padding-top:12px;border-top:1px solid var(--line);gap:12px}
#pn-setup.flow-enabled .report-body-inner>.plan-module #plan-module-facts{display:flex;flex-direction:column;gap:10px}
#pn-setup.flow-enabled .report-body-inner>.plan-module .facts b{font-size:24px;line-height:1.15}
#pn-setup.flow-enabled .report-body-inner>.plan-module .facts span{font-size:13px}
#pn-setup.flow-enabled .report-body-inner>.plan-module .quiet-line,#pn-setup.flow-enabled .report-body-inner>.plan-module .plan-stale{font-size:13px;line-height:1.5}
#pn-setup.flow-enabled .report-body-inner>.plan-module .plan-next{margin-top:12px;padding-top:12px;font-size:14px;line-height:1.5}
#pn-setup.flow-enabled .report-body-inner>.plan-module #plan-module-bar{display:flex;gap:8px;margin-top:14px}
#pn-setup.flow-enabled .report-body-inner>.plan-module #plan-module-bar .pill{flex:1 1 0;justify-content:center;min-height:42px;margin:0;padding:0 14px;font-size:14px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module{margin-top:14px;padding-top:14px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module>#engagement-title{margin-bottom:8px;font-size:14px;color:var(--text)}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module #engagement-form fieldset{gap:6px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-option{grid-template-columns:16px minmax(0,1fr);column-gap:10px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-option:has(input:checked){border-color:var(--accent-ink);background:var(--accent-soft)}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-option>input{width:16px;height:16px;margin-top:0;align-self:center}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-option strong{font-size:14px;line-height:1.35}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-contact-row{margin-top:12px;gap:8px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-contact{font-size:13px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-contact input{width:16px;height:16px}
#pn-setup.flow-enabled .report-body-inner>.plan-module>.engagement-module .engagement-link{font-size:13px;min-height:36px}
/* The thread's own finish bar is redundant while the report sits in the dock. */
#pn-setup.flow-enabled.has-report-dock .flow-finish{display:none}
#pn-setup.flow-enabled.has-report-dock .flow-downloaded{margin-top:0}
/* Arrival: the bar materialises and glows once, the same beat the rail card has on a desktop. */
#pn-setup.flow-enabled .report-dock.is-new{animation:materialize var(--m-enter) var(--ease-out) backwards,report-glow 900ms var(--ease) 320ms}
@media (prefers-reduced-motion:reduce){
  #pn-setup.flow-enabled .report-dock,#pn-setup.flow-enabled .report-body,#pn-setup.flow-enabled .report-body-inner,#pn-setup.flow-enabled .report-bar:after{transition:none;animation:none}
  #pn-setup.flow-enabled .report-dock.is-new{animation:none}
}