/* QuantiCoder client portal. Same family as quantinia.ai: Inter, light surfaces, indigo accent.
   Grid: one 1040px container; spacing on an 8px scale; type scale 13 / 15 / 17 / 22 / 30. */
:root{
  --bg:#f7f8fa;--surface:#fff;--sunken:#f8fafc;--ink:#0f172a;--ink-2:#334155;--muted:#64748b;--faint:#94a3b8;
  --line:#eef1f5;--line-2:#e2e8f0;--line-3:#cbd5e1;
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-press:#3730a3;--accent-soft:#eef0fe;--accent-line:#c7d2fe;--accent-ink:#3730a3;
  --green:#0f9d58;--green-ink:#0b7a44;--green-soft:#e7f6ee;--amber:#b45309;--amber-soft:#fef3e2;--red:#b91c1c;--red-soft:#fdecec;
  --r-panel:16px;--r-block:12px;--r-ctl:10px;
  --shadow:0 0 0 1px rgba(15,23,42,.02),0 1px 2px rgba(15,23,42,.04),0 4px 12px -4px rgba(15,23,42,.05),0 16px 32px -16px rgba(15,23,42,.06);
  --shadow-pop:0 1px 2px rgba(15,23,42,.06),0 12px 32px -8px rgba(15,23,42,.18);
  --ring:0 0 0 4px rgba(79,70,229,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;interpolate-size:allow-keywords}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.025em}
h2{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
h3{font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em}
h4{font-size:15px;font-weight:600}
ul,ol{padding:0;list-style:none}
.ic{flex:none;display:block}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:var(--accent-soft)}

/* links: never default blue underlined text. Prose links are ink with an accent underline that grows on hover */
a{color:inherit;text-decoration:none}
.link{color:var(--ink);font-weight:500;background:linear-gradient(var(--accent-line),var(--accent-line)) 0 100%/100% 1px no-repeat,
  linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease),color .15s;padding-bottom:1px}
.link:hover{background-size:100% 1px,100% 1px;color:var(--accent-ink)}
.link:focus-visible{border-radius:4px}

/* container + header + footer */
.wrap{width:100%;max-width:1088px;margin:0 auto;padding:0 24px}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.topbar .wrap{height:72px;display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.brand .logo{width:32px;height:32px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.brand .tag{font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-soft);padding:2px 8px;border-radius:999px;margin-left:4px}
.mainnav{display:flex;gap:4px}
.navitem{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r-ctl);color:var(--muted);font-weight:500;
  transition:background .15s,color .15s}
.navitem:hover{color:var(--ink);background:var(--sunken)}
.navitem.on{color:var(--accent-ink);background:var(--accent-soft)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:16px}
.who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;text-decoration:none}.who:hover .email{color:var(--ink)}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.avatar.me{background:var(--ink);color:#fff}
.avatar.ai{background:var(--accent-soft);color:var(--accent)}
/* language menu: a pill like quantinia.ai's ("EN" + chevron) opening a small card of links.
   Without JS it is a details/summary; app.js turns the summary into a button with aria-expanded */
.langpick{position:relative}
.langbtn{font:inherit;height:36px;padding:0 10px 0 12px;display:inline-flex;align-items:center;gap:4px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:600;letter-spacing:.02em;
  list-style:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,color .15s}
.langbtn::-webkit-details-marker{display:none}
.langbtn::marker{content:""}
.langbtn:hover{background:var(--sunken);border-color:var(--line-3);color:var(--ink)}
.langbtn .chev{color:var(--muted);transition:transform .2s var(--ease)}
details.langpick[open] .langbtn,.langbtn[aria-expanded=true]{color:var(--ink);border-color:var(--line-3);background:var(--sunken)}
details.langpick[open] .langbtn .chev,.langbtn[aria-expanded=true] .chev{transform:rotate(180deg)}
.langmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:184px;padding:6px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-block);box-shadow:var(--shadow-pop)}
details.langpick:not([open]) .langmenu,.langmenu[hidden]{display:none}
.langmenu a{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px;padding:0 10px;border-radius:8px;
  font-size:15px;color:var(--ink-2);transition:background .12s,color .12s}
.langmenu a:hover{background:var(--sunken);color:var(--ink)}
.langmenu a:focus-visible{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent-line)}
.langmenu a.on{color:var(--accent-ink);font-weight:600}
.langmenu .tick{color:var(--accent)}
.logout .lo-ic{display:none}
main{flex:1;padding:0 0 64px}
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot .wrap{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:13px}
.foot a{color:var(--muted);font-weight:500}.foot a:hover{color:var(--ink)}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 16px}
.check.accept{align-items:flex-start;line-height:1.5}.check.accept input{flex:none;margin-top:1px}
.legal .pb p{line-height:1.6}.legal .panel+.panel{margin-top:16px}

/* buttons: exactly two styles (primary, secondary) + an icon-only variant of each and a quiet text button */
.btn{font:inherit;font-size:15px;font-weight:600;height:44px;padding:0 16px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;cursor:pointer;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(15,23,42,.05);transition:background .15s,border-color .15s,box-shadow .15s,transform .08s;text-decoration:none;
  -webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--sunken);border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 1px 2px rgba(55,48,163,.3),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.primary:active{background:var(--accent-press)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn.icon{width:44px;padding:0}
.btn.block{width:100%}
.ghost{font:inherit;font-size:15px;font-weight:500;height:36px;padding:0 12px;margin:0 -12px;border:0;background:none;border-radius:var(--r-ctl);
  color:var(--muted);display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .15s,color .15s}
.ghost:hover{background:var(--accent-soft);color:var(--accent-ink)}
.ghost.danger:hover{background:var(--red-soft);color:var(--red)}
.ghost.sm{font-size:13px;height:32px;padding:0 8px;margin:0 -8px}
form.inline{display:inline}

/* form fields */
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-weight:600}
.field small,.hint{color:var(--muted);font-size:13px;font-weight:400}
.input,input[type=text],input[type=email],input[type=password],input:not([type]),textarea,select{font:inherit;width:100%;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-ctl);padding:0 16px;height:44px;transition:border-color .15s,box-shadow .15s;
  box-shadow:0 1px 2px rgba(15,23,42,.03)}
textarea{height:auto;padding:12px 16px;resize:vertical;line-height:1.6;min-height:96px}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,textarea:hover,select:hover{border-color:var(--line-3)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}
.stack{display:flex;flex-direction:column;gap:24px}
.stack-sm{display:flex;flex-direction:column;gap:16px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-weight:600;margin-bottom:12px;font-size:15px}

/* option cards: the native radio is invisible but covers the card (still focusable, keyboard-operable, clickable) */
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.options.one{grid-template-columns:1fr}
.option{position:relative;display:flex;gap:16px;align-items:flex-start;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-block);
  background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;min-height:100%}
.option>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.option:hover{border-color:var(--line-3);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.option:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.option:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--accent),var(--ring)}
.option .oi{width:40px;height:40px;border-radius:var(--r-ctl);display:grid;place-items:center;background:var(--sunken);color:var(--muted);flex:none;
  border:1px solid var(--line);transition:background .15s,color .15s}
.option:has(input:checked) .oi{background:var(--surface);color:var(--accent);border-color:var(--accent-line)}
.option .ot{display:flex;flex-direction:column;gap:4px;min-width:0}
.option .ot b{font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.01em}
.option .ot span{color:var(--muted)}
.option .ot .price{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.options:not(.one) .option{flex-direction:column;gap:12px}
.option .ot b{padding-right:24px}
.option .tick{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line-3);background:var(--surface);
  display:grid;place-items:center;color:#fff;transition:background .15s,border-color .15s,transform .2s var(--ease)}
.option .tick .ic{opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--ease)}
.option:has(input:checked) .tick{background:var(--accent);border-color:var(--accent)}
.option:has(input:checked) .tick .ic{opacity:1;transform:none}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.check input{appearance:none;width:20px;height:20px;border:1px solid var(--line-3);border-radius:6px;margin:0;background:var(--surface) center/14px no-repeat;
  transition:background-color .15s,border-color .15s}
.check input:checked{background-color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--surface)}

/* page header */
.phead{padding:32px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}
.phead .crumb{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px;transition:color .15s}
.phead .crumb .ic{margin-left:-4px}
.phead .crumb:hover{color:var(--accent-ink)}
.phead .crumb-sep{display:block}
.title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.title-row .head-act{margin-left:auto}
.phead-text{flex:1;min-width:0}
.phead .lead{margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--accent-ink);background:var(--accent-soft);white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--green-ink);background:var(--green-soft)}
.pill.warn{color:var(--amber);background:var(--amber-soft)}
.pill.off{color:var(--muted);background:var(--line)}
.pill.live::before{animation:blink 1.6s ease-in-out infinite}
.lead{color:var(--muted);max-width:72ch}
.muted{color:var(--muted)}.small{font-size:13px}.strong{font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* stepper: the one bold element */
.stepper{position:relative;margin:0 0 32px;padding-bottom:4px}
.stepper ol{position:relative;display:flex;justify-content:space-between;min-height:104px}
.stepper .track{position:absolute;left:18px;right:18px;top:17px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.stepper .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#6366f1);border-radius:2px}
.stepper[data-cur="2"] .fill{width:25%;animation:fill2 .9s var(--ease) .1s backwards}
.stepper[data-cur="3"] .fill{width:50%;animation:fill3 .9s var(--ease) .1s backwards}
.stepper[data-cur="4"] .fill{width:75%;animation:fill4 .9s var(--ease) .1s backwards}
.stepper[data-cur="5"] .fill{width:100%;animation:fill5 .9s var(--ease) .1s backwards}
@keyframes fill2{from{width:0}}@keyframes fill3{from{width:25%}}@keyframes fill4{from{width:50%}}@keyframes fill5{from{width:75%}}
.step{position:relative;width:36px;flex:none}
.step>a,.step>span{display:block;color:inherit}
.node{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--line-3);color:var(--faint);transition:transform .15s var(--ease),box-shadow .15s}
.step.done .node{background:var(--accent);border-color:var(--accent);color:#fff}
.step.current .node{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.step.current .node::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:pulse 2.4s ease-out 1s infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.35}80%,100%{transform:scale(1.45);opacity:0}}
@keyframes blink{50%{opacity:.35}}
.step .label{position:absolute;top:48px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;
  white-space:nowrap}
.step[data-step="1"] .label{left:0;transform:none;align-items:flex-start;text-align:left}
.step[data-step="5"] .label{left:auto;right:0;transform:none;align-items:flex-end;text-align:right}
.step .name{font-size:13px;font-weight:500;color:var(--muted);line-height:20px}
.step.done .name{color:var(--ink-2)}
.step.skipped .node{border-style:dashed}
.step.skipped .name{color:var(--faint);text-decoration:line-through}
.step.current .name{color:var(--ink);font-weight:700;font-size:15px;line-height:20px}
.step .sub{font-size:13px;color:var(--muted);line-height:20px;margin-top:2px}
.step a:hover .name{text-decoration:underline;text-decoration-color:var(--accent-line);text-underline-offset:4px}
.step a:hover .node{transform:scale(1.06)}
.step a:focus-visible{box-shadow:none}
.step a:focus-visible .node{box-shadow:var(--ring)}

/* columns */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:32px;align-items:start}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.narrow{max-width:440px;margin:0 auto}
.narrow .phead{display:block}

/* panels: one main panel per step, lighter info panels on the side */
.panel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-panel);box-shadow:var(--shadow);min-width:0}
.panel>.ph{padding:32px 32px 0}
.panel>.ph .lead{margin-top:8px}
.panel>.pb{padding:24px 32px 32px}
.panel>.ph+.pf{margin-top:32px}
.pf{display:flex;align-items:center;gap:16px;padding:16px 32px;border-top:1px solid var(--line);background:linear-gradient(var(--sunken),var(--sunken));
  border-radius:0 0 var(--r-panel) var(--r-panel)}
.pf .end{margin-left:auto;display:flex;gap:16px;align-items:center}
.pf .note{color:var(--muted);font-size:13px}
.info{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-panel);padding:24px;box-shadow:0 1px 2px rgba(15,23,42,.03)}
.info>h3,.ih{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;margin-bottom:16px;letter-spacing:0}
.info>h3 .ic,.ih .ic{color:var(--muted)}
.info .ih .pill{margin-left:auto}
.info p+p,.info dl+p,.info p+dl{margin-top:16px}
.info .foot-link{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
dl.rows{display:grid;grid-template-columns:1fr auto;row-gap:8px;font-variant-numeric:tabular-nums}
dl.rows dt{color:var(--muted)}
dl.rows dd{text-align:right;font-weight:600;color:var(--ink);padding-left:16px}
dl.rows .total{padding-top:8px;border-top:1px solid var(--line)}
dl.rows dd.total{font-size:17px}
.callout{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:var(--r-block);background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line)}
.callout .ic{margin-top:2px}
.callout.ok{background:var(--green-soft);color:var(--green-ink);border-color:#bfe6d0}
.callout.warn{background:var(--amber-soft);color:#7c3d06;border-color:#f6d9a8}
.callout.err{background:var(--red-soft);color:var(--red);border-color:#f6c9c9}
.callout h3{color:var(--ink);margin-bottom:4px}
.callout p{color:inherit}
.callout .actions{margin-top:16px}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.sep{height:1px;background:var(--line);margin:24px 0}
.section-title{font-size:15px;font-weight:600;margin-bottom:16px}

/* big numbers */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-2);border-radius:var(--r-block);overflow:hidden}
.stat{padding:16px 24px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat+.stat{border-left:1px solid var(--line-2)}
.stat .l{color:var(--muted);font-size:13px;font-weight:500}
.stat .n{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .s{color:var(--muted);font-size:13px}
.stat .s b{color:var(--ink-2);font-weight:600}
.stat.accent{background:var(--accent-soft)}
.stat.accent .n{color:var(--accent)}
.money{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em}
.bignum{font-size:30px;line-height:1.2}

/* segmented budget bar: 20 blocks, filled ones are "on" (no inline widths: strict CSP) */
.budget{display:flex;flex-direction:column;gap:8px}
.budget .bar{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.budget .bar i{height:8px;border-radius:2px;background:var(--line-2)}
.budget .bar i.on{background:var(--accent)}
.budget.over .bar i.on{background:var(--amber)}
.budget .legend{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.budget .legend b{color:var(--ink);font-weight:600}

/* documents */
.dz{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:32px 24px;
  border:1.5px dashed var(--accent-line);border-radius:var(--r-block);background:linear-gradient(180deg,#fafaff,var(--accent-soft));cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s var(--ease)}
.dz:hover,.dz.over{border-color:var(--accent);background:var(--accent-soft)}
.dz.over{transform:scale(1.01)}
.dz:has(input:focus-visible){box-shadow:var(--ring)}
.dz input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.dz .dzi{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(15,23,42,.08),0 0 0 1px var(--accent-line)}
.dz b{font-size:17px;font-weight:600;color:var(--ink)}
.dz b u{text-decoration:none;color:var(--accent)}
.dz .hint{max-width:48ch}
.picked{display:flex;align-items:center;gap:16px}
.picked .chip{display:none}
.picked.show .chip{display:flex}
.enhanced .picked:not(.show){display:none}
.grow{flex:1}
.min0{min-width:0}
.hint .ic.inline,.ic.inline{display:inline-block;vertical-align:-2px;margin-right:8px}
.chips{display:flex;flex-direction:column;gap:8px}
.chip{display:flex;align-items:center;gap:16px;padding:8px 8px 8px 12px;border:1px solid var(--line-2);border-radius:var(--r-block);background:var(--surface);min-width:0}
.chip .ft{width:36px;height:36px;border-radius:var(--r-ctl);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.chip .fn{flex:1;min-width:0;display:flex;flex-direction:column}
.chip .fn a,.chip .fn>span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .fn a:hover{color:var(--accent-ink)}
.chip .fn small{color:var(--muted);font-size:13px}
.chip .ghost{margin:0}
.chip form{flex:none}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:32px 24px;color:var(--muted)}
.empty .ei{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--faint);border:1px solid var(--line)}
.empty b{color:var(--ink);font-size:17px;font-weight:600}
.empty .btn{margin-top:8px}
.empty.sm{padding:16px;flex-direction:row;text-align:left;gap:16px}
.empty.sm .ei{width:36px;height:36px}
pre.spec{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-block);
  padding:16px;max-height:420px;overflow:auto;color:var(--ink-2)}
pre.diff{font:13px/1.6 inherit;font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0 0;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-block);padding:12px 16px;color:var(--ink-2)}

/* disclosures with a height transition (no JS) */
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details::details-content{height:0;overflow:hidden;transition:height .25s var(--ease)}
details[open]::details-content{height:auto;overflow:clip;overflow-clip-margin:24px}
.chev{transition:transform .2s var(--ease)}
details[open]>summary .chev{transform:rotate(90deg)}
.edit{margin-top:16px}
.edit form{margin-top:16px}

/* the quiet row below the panels: Details on the left, cancel/stop on the right */
.quiet{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:24px}
.quiet>details[open]{flex-basis:100%}
.quiet>details.confirm{margin-left:auto}
.quiet>details.confirm[open]{flex-basis:auto;max-width:440px}
.drawer{margin-top:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-panel);padding:8px 32px 32px;box-shadow:var(--shadow)}
.drawer h3{font-size:15px;margin:24px 0 8px}
.confirm-box{margin-top:8px;padding:16px;border:1px solid var(--line-2);border-radius:var(--r-block);background:var(--surface);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:16px;color:var(--ink-2)}
.confirm-box .actions{justify-content:flex-end}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
th{font-weight:500;color:var(--muted);font-size:13px}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.when{color:var(--muted);white-space:nowrap}
tfoot th,tfoot td{border-top:1px solid var(--line-2);border-bottom:0;color:var(--ink);font-weight:600;font-size:15px}

/* chat (questions) */
.chat{display:flex;flex-direction:column;gap:24px;max-height:520px;overflow-y:auto;scroll-behavior:smooth;padding:4px 4px 8px;margin:-4px -4px 0}
.msg{display:flex;gap:12px;align-items:flex-start;max-width:88%}
.msg .mb{display:flex;flex-direction:column;gap:4px;min-width:0}
.msg .bubble{padding:12px 16px;border-radius:var(--r-block);background:#f1f4f9;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.msg .stamp{font-size:13px;color:var(--muted)}
.msg.you{align-self:flex-end;flex-direction:row-reverse}
.msg.you .mb{align-items:flex-end}
.msg.you .bubble{background:var(--accent-soft);color:var(--ink)}
.msg.current .bubble{background:var(--surface);border:1px solid var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft)}
.msg.new{animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
.typing .bubble{display:flex;gap:4px;align-items:center;height:48px}
.typing .bubble i{width:6px;height:6px;border-radius:50%;background:var(--faint);animation:dot 1.2s ease-in-out infinite}
.typing .bubble i:nth-child(2){animation-delay:.15s}.typing .bubble i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.composer{margin-top:24px;display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);
  box-shadow:0 1px 2px rgba(15,23,42,.04);transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.composer textarea{border:0;box-shadow:none;padding:10px 0;min-height:44px;max-height:200px;resize:none;background:transparent}
.composer textarea:focus{box-shadow:none}
.composer input[type=text],.composer input:not([type]){border:0;box-shadow:none;padding:0;background:transparent}
.composer input:focus{box-shadow:none}
.composer .btn{flex:none}
.composer-hint{margin-top:8px;font-size:13px;color:var(--muted)}
/* the CEO chat (bubbles also created by ceo.js) */
.chat-log{display:flex;flex-direction:column;gap:16px;max-height:520px;overflow-y:auto}
.chat-log>li.bubble{max-width:85%;padding:12px 16px;border-radius:var(--r-block);background:#f1f4f9;white-space:pre-wrap;overflow-wrap:anywhere;align-self:flex-start;
  animation:rise .3s var(--ease)}
.chat-log>li.bubble.you{align-self:flex-end;background:var(--accent-soft)}
.chat-log .sources{display:block;font-size:13px;color:var(--muted);margin-top:8px}
.mic{width:44px;height:44px;border-radius:50%;padding:0;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background .15s,transform .1s}
.mic:hover{background:var(--accent-hover)}
.mic:active{transform:scale(.96)}
.mic.live{background:var(--red);box-shadow:0 0 0 6px var(--red-soft)}
.mic:disabled{opacity:.4;cursor:not-allowed}
.composer.ceo{align-items:center;padding:8px}
.composer.ceo input{flex:1;height:44px}

/* stages */
.stages{display:flex;flex-direction:column}
.stage{display:grid;grid-template-columns:32px minmax(0,1fr) auto 160px;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);min-height:76px}
.stage:first-child{padding-top:0;min-height:60px}
.stage:last-child{border-bottom:0;padding-bottom:0}
.sdot{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid var(--line-3);background:var(--surface);color:var(--faint)}
.stage.done .sdot{background:var(--green-soft);border-color:#bfe6d0;color:var(--green)}
.stage.running .sdot{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.stage.running .sdot .ic{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sbody{flex:1;min-width:0;display:flex;flex-direction:column}
.sbody b{font-weight:600}
.sbody small{color:var(--muted);font-size:13px}
.shours{font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:500;white-space:nowrap}
.sact{display:flex;justify-content:flex-end;min-width:0}

/* project list */
.plist{padding:0;overflow:hidden}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 112px 248px 144px 120px;align-items:center;gap:24px;padding:16px 24px;border-top:1px solid var(--line);
  transition:background .15s}
.prow:hover{background:var(--sunken)}
.prow.head{border-top:0;padding-top:12px;padding-bottom:12px;color:var(--muted);font-size:13px;font-weight:500;background:var(--sunken)}
.prow .pname{display:flex;align-items:center;gap:16px;min-width:0}
.prow .pname .pi{width:40px;height:40px;border-radius:var(--r-ctl);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.prow .pname a{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.prow .pname a:hover{color:var(--accent-ink)}
.prow .pname small{display:block;color:var(--muted);font-size:13px}
.prow .plan{color:var(--ink-2)}
.prow .when{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.prow .go{justify-self:end}
.prog{display:flex;flex-direction:column;gap:4px}
.dots{display:flex;gap:4px;align-items:center}
.dots i{width:24px;height:6px;border-radius:3px;background:var(--line-2)}
.dots i.on{background:var(--accent)}
.dots i.cur{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.prog .meta{font-size:13px;color:var(--muted)}

/* toast (one-time confirmation after an action) */
.toast{position:fixed;top:88px;right:24px;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-block);
  background:var(--ink);color:#fff;box-shadow:var(--shadow-pop);font-weight:500;max-width:min(420px,calc(100vw - 32px));
  animation:toast-in .35s var(--ease),toast-out .4s ease 5s forwards}
.toast .ic{color:#86efac}
/* a problem after an action: stays until closed (the reason must be read), red accent */
.toast.err{animation:toast-in .35s var(--ease);align-items:flex-start;border-left:4px solid #f87171;color:#fff}
.toast.err span{color:#fff}
.toast.err .ic{color:#fca5a5;flex:none;margin-top:2px}
.toast .tclose{margin-left:auto;flex:none;background:none;border:0;color:#fff;opacity:.7;cursor:pointer;padding:2px;line-height:0}
.toast .tclose:hover{opacity:1}
.tclose-cb:checked + .toast{display:none}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px);visibility:hidden}}

/* login */
.auth{padding-top:64px}
.auth .panel>.pb{padding-top:24px}
.auth h1{font-size:22px}
.authalt{margin:0;text-align:center;color:var(--muted);font-size:14px}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.topbar .btn.signup,.topbar .btn.login{height:36px;padding:0 14px;font-size:14px;white-space:nowrap}
.err{color:var(--red);font-weight:500;display:flex;gap:8px;align-items:center}

/* checks list */
.checks{display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li .ic{color:var(--green);margin-top:3px}
blockquote{padding:16px;border-radius:var(--r-block);background:var(--sunken);border:1px solid var(--line);white-space:pre-wrap;color:var(--ink-2)}

.mt8{margin-top:8px}.mt16{margin-top:16px}
.proposal+.proposal{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.proposal .ghost,.proposal .pill{margin-top:8px}
.cell-ic{display:inline-flex;align-items:center;gap:8px}.cell-ic .ic{color:var(--muted)}
.sum{color:var(--ink-2)}.sum b{color:var(--ink);font-variant-numeric:tabular-nums}
.foot-link .ghost{margin-left:-12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .step.current .node::after{display:none}
  .toast{animation:none}
}

/* one column below 900px */
@media (max-width:899px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .prow{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px}
  .prow.head{display:none}
  .prow .plan,.prow .when{display:none}
  .prow .prog{grid-column:1;grid-row:2;padding-left:56px}
  .prow .go{grid-column:2;grid-row:1/3}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .topbar .wrap{height:64px;gap:16px}
  .mainnav,.who .email,.brand .tag{display:none}
  .topbar .right{gap:8px}
  .logout{width:44px;padding:0}.logout .lo-ic{display:block}
  .logout .lbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .phead{padding:24px 0;flex-wrap:wrap}
  .phead .head-act{width:100%}
  .phead .head-act .btn{width:100%}
  h1{font-size:22px}
  .stepper{margin-bottom:24px}
  .stepper ol{min-height:72px}
  .step .sub{display:none}
  .step:not(.current) .name{display:none}
  .stage{grid-template-columns:32px minmax(0,1fr) auto}
  .stage .sact{grid-column:2/4;justify-content:flex-start}
  .stage .sact:empty{display:none}
  .step .name{font-size:13px}
  .step.current .name{font-size:13px}
  .panel>.ph{padding:24px 16px 0}
  .panel>.pb{padding:16px 16px 24px}
  .pf{padding:16px;flex-wrap:wrap}
  .pf .end{width:100%;margin-left:0}
  .pf .end .btn,.pf>.btn.primary,.pf form,.pf form .btn{width:100%}
  .pf .end form{flex:1}
  .info{padding:16px}
  .options{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid var(--line-2)}
  .stat .n{font-size:22px}
  .drawer{padding:8px 16px 24px}
  .msg{max-width:96%}
  .msg .avatar{display:none}
  .prow{padding:16px}
  .prow .prog{padding-left:0}
  .prow .pname .pi{display:none}
  .toast{top:76px;right:16px;left:16px}
  .quiet>details.confirm[open]{max-width:none;flex-basis:100%}
  .foot .wrap{flex-direction:column;justify-content:center;gap:4px;padding-top:16px;padding-bottom:16px}
}
.narrow .step:not(.current) .name{display:none}
#voice-status{margin-top:16px}#voice-status:empty{display:none}
.quiet>details.confirm{display:flex;flex-direction:column;align-items:flex-end}

/* a form already sent: the button waits (Claude or the card can take several seconds) */
.btn.busy{opacity:.75;cursor:progress;pointer-events:none}
.btn.busy .ic{animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.btn.busy .ic{animation:none}}

/* the planned stages under the estimate */
.planned h3{font-size:15px;margin:0 0 8px}
.planned ol{margin:0;padding-left:22px;display:grid;gap:6px}
.planned li{padding-left:4px}
.planned li span:first-child{margin-right:8px}
.planned .pill{font-size:12px;vertical-align:1px}

/* what the factory assumed where the specification was silent */
.assumptions{border:1px solid var(--line-2);border-radius:var(--r-block);padding:12px 16px}
.assumptions summary{cursor:pointer;font-weight:600;display:flex;gap:8px;align-items:center}
.assumptions ul{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}

/* public landing ("/" for visitors) and the case pages. One bold element: the delivery report, a real bill set
   against the agency quote it replaces. Everything around it stays in the portal's quiet system. */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding:64px 0 56px}
.hero h1{font-size:44px;line-height:1.1;letter-spacing:-.035em;max-width:16ch}
.hero-lead{margin-top:20px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.btn.big{height:52px;padding:0 22px;font-size:17px}
.hero-note{margin-top:16px;font-size:13px;color:var(--muted)}
.report{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-panel);box-shadow:var(--shadow);padding:24px;
  font-variant-numeric:tabular-nums;align-self:start}
.report-cap{display:flex;flex-direction:column;gap:2px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.report-cap b{font-size:17px}
.report-cap span{font-size:13px;color:var(--muted)}
.report-rows>div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.report-rows dt{color:var(--ink-2)}
.report-rows dd{font-weight:600}
.report-vs{margin-top:16px;display:grid;gap:8px}
.report-vs>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.report-vs span{font-size:13px;color:var(--muted)}
.report-vs .quote s{color:var(--faint);font-size:17px;text-decoration-thickness:2px;white-space:nowrap}
.report-vs .bill b{font-size:30px;letter-spacing:-.02em;color:var(--green-ink)}
.report-foot{margin-top:12px;font-size:13px;color:var(--muted)}
.report .btn{margin-top:20px}

.lsec{padding:56px 0;border-top:1px solid var(--line-2)}
.lsec>h2{font-size:30px;letter-spacing:-.025em}
.lsec>.lead{margin-top:8px}
.steps{margin-top:32px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-top:48px}
.steps li::before{content:counter(step);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;display:grid;
  place-items:center;background:var(--accent);color:#fff;font-weight:600;font-size:15px}
.steps li::after{content:"";position:absolute;top:16px;left:44px;right:-12px;height:1px;background:var(--accent-line)}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:15px}
.team{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px}
.team-head h2{font-size:30px;letter-spacing:-.025em}
.team-head .lead{margin-top:8px}
.team-head .hint{margin-top:16px;font-size:13px;color:var(--muted)}
.roles>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.roles>div:first-child{padding-top:0}
.roles dt{font-weight:600}
.roles dd{color:var(--ink-2)}
.cases{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.case{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line-2);border-radius:var(--r-block);
  background:var(--surface);transition:border-color .15s}
.case:hover{border-color:var(--accent-line)}
.case:hover .case-more{color:var(--accent-ink)}
.case-plan{font-size:13px;font-weight:600;color:var(--accent-ink)}
.case p{color:var(--ink-2);flex:1}
.case-nums{display:flex;flex-wrap:wrap;gap:24px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.case-nums b{font-size:22px;color:var(--ink);margin-right:4px;letter-spacing:-.02em}
.case-more{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--ink-2)}
.plans{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.plans>div{border-top:2px solid var(--ink);padding-top:16px}
.plans dt{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px}
.plans dt .ic{color:var(--accent)}
.plans .p{margin:8px 0;font-size:22px;font-weight:700;letter-spacing:-.02em}
.plans dd:last-child{color:var(--ink-2);font-size:15px}
.lsec .more{margin-top:24px}
.faq details{border-bottom:1px solid var(--line-2);max-width:760px}
.faq details:first-of-type{margin-top:24px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq details p{padding:0 0 16px;color:var(--ink-2);max-width:68ch}
.closing{margin:16px 0 0;padding:48px;border-radius:var(--r-panel);background:var(--accent-soft);text-align:center}
.closing h2{font-size:30px;letter-spacing:-.025em}
.closing .hero-cta{justify-content:center}
.casepage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:start}
.case-main{display:grid;gap:32px}
.csec h2{font-size:22px;margin-bottom:12px}
.csec>p{color:var(--ink-2);max-width:68ch}
.checked>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.checked dt{font-weight:600}
.checked dd{color:var(--ink-2)}
@media (max-width:899px){
  .hero,.team,.casepage{grid-template-columns:minmax(0,1fr)}
  .hero{gap:32px;padding:40px 0}
  .steps{grid-template-columns:minmax(0,1fr);gap:20px}
  .steps li{padding:0 0 0 48px}
  .steps li::after{top:40px;left:16px;right:auto;bottom:-16px;width:1px;height:auto}
  .cases,.plans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hero h1{font-size:32px}
  .hero-lead{font-size:15px}
  .hero-cta .btn{width:100%}
  .lsec{padding:40px 0}
  .lsec>h2,.team-head h2,.closing h2{font-size:22px}
  .roles>div,.checked>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .closing{padding:32px 16px}
  .report{padding:16px}
}