/* 4.0 · the sheet.

   Linear's idiom applied to Spren: dark, dense, keyboard-first. Rows rather
   than cards, 12 to 14px in the body, one 20px verdict line per screen.

   Every colour, size and rule here comes from
   design_handoff_spren_linear/START_HERE.md. The ones that are not
   decoration:

     No percentage, progress bar, gauge, sentiment index or confidence
     number. There is deliberately no bar rule in this file. The only number
     out of 21 is the AI-readiness score, and only where seven judgements
     exist; everywhere else a state is an icon and a phrase naming who said
     what.

     #4CC38A is a foreground accent on dark and never carries white ink.
     A solid red fill is #C7343A under white; red ink is #F0656A on a wash.

     #8A8A96 is the dimmest legal ink. Nothing quieter is defined, because
     nothing quieter passes 4.5:1 on these surfaces.

     Spren never runs the customer's work, so there is no style for a
     control that would. */

:root{
  /* surfaces, darkest first */
  --page:#08080A;
  --side:#0C0C0F;
  --card:#101013;
  --raise:#131317;
  --panel:#141419;
  --over:#16161B;
  --sunk:#1C1C24;
  --chip:#26262E;

  /* hairlines */
  --line:#1E1E24;
  --line2:#17171C;
  --edge:#23232A;
  --rule:#2E2E38;
  --ghost:#3A3A44;

  /* ink */
  --ink:#E9E9EE;
  --ink2:#C4C4CE;
  --ink3:#9A9AA6;
  --dim:#8A8A96;      /* the dimmest legal ink */
  --mute:#7C7C88;     /* connectors and glyphs only, never body text */

  /* meaning */
  --brand:#5E6AD2;
  --brand2:#8B93EC;
  --good:#4CC38A;     /* ink only, never a fill under white */
  --warn:#E5A83A;
  --bad:#E5484D;
  --bad-ink:#F0656A;
  --bad-wash:rgba(229,72,77,.13);
  --bad-fill:#C7343A;
  --sys:#5E9EFF;

  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.4px}
p{margin:0}
a{color:var(--brand2);text-decoration:none}
a:hover{color:#A8AEF2}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--brand2);outline-offset:1px;border-radius:4px}
::selection{background:rgba(94,106,210,.4)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.vis-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the shell ---------- */
#shell{display:flex;height:100vh;overflow:hidden}
#side{
  width:230px;flex:none;background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:12px 0 10px;overflow-y:auto;
}
#main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--card);overflow:hidden}
@media (max-width:860px){
  #side{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .16s}
  #side.open{transform:none}
  #shell.narrow #main{width:100%}
}

/* the workspace switcher and nav */
.ws{
  display:flex;align-items:center;gap:9px;padding:4px 14px 12px;cursor:pointer;
  background:none;border:0;width:100%;text-align:left;color:inherit;font:inherit;
}
.ws .chip{
  width:20px;height:20px;border-radius:5px;background:var(--brand);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
.ws b{font-size:13px;font-weight:600;letter-spacing:-.2px}
.navsec{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.1px;
  color:var(--dim);padding:14px 16px 6px;text-transform:uppercase;
}
.nav{
  display:flex;align-items:center;gap:9px;height:28px;padding:0 10px;margin:0 8px;
  border-radius:5px;color:var(--ink3);font-size:12.5px;cursor:pointer;
  background:none;border:0;width:calc(100% - 16px);text-align:left;
}
.nav:hover{background:var(--line2);color:var(--ink)}
.nav[aria-current="page"]{background:var(--sunk);color:var(--ink)}
.nav .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim)}
.nav .sq{width:6px;height:6px;border-radius:1.5px;flex:none;background:var(--ghost)}
.nav .sq.needs{background:var(--bad)} .nav .sq.drift{background:var(--warn)}
.nav .sq.live{background:var(--good)} .nav .sq.quiet{background:var(--ghost)}
.nav .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--bad)}
.sidefoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line2)}
.khint{
  display:flex;align-items:center;gap:8px;padding:8px 18px 2px;font-size:11.5px;color:var(--dim);
}
.kbd{
  font-family:var(--mono);font-size:10.5px;background:var(--sunk);border:1px solid var(--rule);
  border-radius:4px;padding:1px 5px;color:var(--ink3);
}

/* ---------- the top bar ---------- */
.top{
  height:46px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:14px;padding:0 18px;
}
.top h1{font-size:13.5px;font-weight:600;letter-spacing:-.2px}
.top .crumb{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink3);min-width:0}
.top .crumb .sep{color:var(--ghost)}
.top .crumb b{color:var(--ink);font-weight:600}
.top .stat{font-family:var(--mono);font-size:11.5px;color:var(--dim);white-space:nowrap}
.top .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.burger{display:none;background:none;border:0;color:var(--ink3);cursor:pointer;padding:4px}
@media (max-width:860px){.burger{display:block}}

/* ---------- the scroller ---------- */
.body{flex:1;min-height:0;overflow-y:auto}
.pad{padding:18px 18px 60px}
.wrapc{max-width:1180px}

/* one verdict line per screen */
.verdict{font-size:20px;font-weight:600;letter-spacing:-.5px;line-height:1.32;max-width:78ch}
.verdict.lg{font-size:21px}
.verdict em{font-style:normal;color:var(--bad-ink)}
.one{font-size:12.5px;color:var(--ink3);line-height:1.5;max-width:88ch;margin-top:7px}
.one b{color:var(--ink2);font-weight:600}

/* ---------- chips and pills ---------- */
.chipbar{display:flex;gap:6px;flex-wrap:wrap}
.fchip{
  font-size:11.5px;font-weight:500;color:var(--ink3);background:var(--sunk);
  border:1px solid var(--line);border-radius:5px;padding:4px 9px;cursor:pointer;
}
.fchip:hover{color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--chip);color:var(--ink);border-color:var(--rule)}
.pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  border-radius:4px;padding:2px 7px;white-space:nowrap;
  background:var(--sunk);color:var(--ink3);
}
.pill.good{background:rgba(76,195,138,.11);color:var(--good)}
.pill.warn{background:rgba(229,168,58,.12);color:var(--warn)}
.pill.bad{background:var(--bad-wash);color:var(--bad-ink)}
.pill.sys{background:rgba(94,158,255,.12);color:var(--sys)}
.pill.brand{background:rgba(139,147,236,.14);color:var(--brand2)}
/* the only solid red: a verdict somebody has to act against */
.pill.stop{background:var(--bad-fill);color:#fff}
.pill.out{background:none;border:1px solid var(--rule);color:var(--ink3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:5px;
  font-size:12.5px;font-weight:500;cursor:pointer;
  background:var(--sunk);border:1px solid var(--line);color:var(--ink2);
}
.btn:hover{background:var(--chip);color:var(--ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#6C77DA;color:#fff}
.btn.danger{background:var(--bad-fill);border-color:var(--bad-fill);color:#fff}
.btn.ghost{background:none;border-color:transparent;color:var(--ink3)}
.btn.ghost:hover{background:var(--line2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.btn.lg{height:32px;padding:0 14px;font-size:13px}

/* ---------- rows ----------
   A row states a fact and its consequence. It is never a card. */
.group{
  display:flex;align-items:center;gap:10px;height:7px;margin:20px 0 0;
}
.groupbar{
  display:flex;align-items:center;gap:10px;background:var(--raise);border-radius:5px;
  padding:0 12px;height:30px;margin-top:18px;font-size:12px;
}
.groupbar .nm{font-weight:600;color:var(--ink)}
.groupbar .def{color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groupbar .n{font-family:var(--mono);font-size:11px;color:var(--dim);margin-left:auto}
.groupbar .sq{width:6px;height:6px;border-radius:1.5px;flex:none}

.rows{display:flex;flex-direction:column}
.row{
  display:flex;align-items:center;gap:12px;height:44px;padding:0 12px;
  border-bottom:1px solid var(--line2);cursor:pointer;
  background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:inherit;
}
.row:hover{background:var(--line2)}
.row.h40{height:40px} .row.h46{height:46px} .row.h48{height:48px}
.row.h52{height:52px} .row.h56{height:56px}
.row.tall{height:auto;min-height:52px;padding-top:10px;padding-bottom:10px;align-items:flex-start}
.row .ref{font-family:var(--mono);font-size:11px;color:var(--dim);width:88px;flex:none;white-space:nowrap}
.row .ref.w70{width:70px}
.row .said{
  flex:1;min-width:0;font-size:12.5px;color:var(--ink2);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* A row that is deliberately taller may wrap; a fixed-height one never does. */
.row.tall .said{white-space:normal;overflow:visible}
/* A row with more actions than fit beside it: the actions drop to their own
   line, and wrap among themselves, rather than push a sheet sideways. */
.row.wrap{flex-wrap:wrap;row-gap:6px;align-items:center}
.row.wrap .said{flex:1 1 160px}
.row.wrap .end{flex:0 1 auto;min-width:0;flex-wrap:wrap;margin-left:auto}
.row .said b{color:var(--ink);font-weight:600}
.row .said .cons{color:var(--dim)}
.row .nm{font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .role{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .age{font-family:var(--mono);font-size:11px;color:var(--dim);flex:none}
.row .end{flex:none;display:flex;align-items:center;gap:10px}
.row.dead{opacity:.55}
.row.struck .nm{text-decoration:line-through}
.blocking{color:var(--bad-ink);font-weight:600}

/* ---------- state icons ----------
   An icon plus a phrase. There is no percentage form of this. */
.ic{width:16px;height:16px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:9px;font-weight:700}
.ic.needs{background:var(--bad-wash);color:var(--bad-ink)}
.ic.part{background:rgba(229,168,58,.14);color:var(--warn)}
.ic.sys{background:rgba(94,158,255,.14);color:var(--sys)}
.ic.done{background:rgba(76,195,138,.13);color:var(--good)}
.ic.none{border:1.5px solid var(--ghost)}
.ic.sm{width:13px;height:13px;font-size:8px}

/* one square per activity, always. never a summary square */
.sq{width:14px;height:14px;border-radius:3px;flex:none;background:var(--chip)}
.sq.understood{background:var(--good)}
.sq.partial{background:var(--warn)}
.sq.clarification{background:var(--bad)}
.sq.not_explored{background:var(--chip)}
.sq.out{background:none;border:1px dashed var(--ghost)}
.sqs{display:flex;flex-wrap:wrap;gap:4px}

/* ---------- avatars ---------- */
.av{
  width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:600;background:var(--chip);color:var(--ink2);
}
.av.lg{width:28px;height:28px;font-size:11px}
.av.xl{width:34px;height:34px;font-size:12.5px}
.avs{display:flex}
.avs .av{margin-left:-5px;border:1.5px solid var(--card)}
.avs .av:first-child{margin-left:0}

/* ---------- panels ---------- */
.panels{display:grid;gap:12px;margin-top:16px}
.panels.three{grid-template-columns:repeat(3,1fr)}
.panels.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:1000px){.panels.three{grid-template-columns:1fr}.panels.two{grid-template-columns:1fr}}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:13px 15px;
  display:flex;flex-direction:column;gap:6px;
}
.panel .eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.1px;
  color:var(--dim);text-transform:uppercase;display:flex;align-items:center;gap:7px;
}
.panel .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--ghost);display:block}
.panel b{font-size:13px;font-weight:600;color:var(--ink)}
.panel p{font-size:12px;color:var(--ink3);line-height:1.5}
.panel.warn{background:rgba(229,168,58,.06);border-color:rgba(229,168,58,.25)}
.panel.warn .eyebrow{color:var(--warn)}
.panel.bad{background:rgba(229,72,77,.05);border-color:rgba(229,72,77,.24)}
.panel.bad .eyebrow{color:var(--bad-ink)}
.panel.good{background:rgba(76,195,138,.05);border-color:rgba(76,195,138,.22)}
.panel.good .eyebrow{color:var(--good)}
.panel.sys{background:rgba(94,158,255,.05);border-color:rgba(94,158,255,.22)}
.panel.sys .eyebrow{color:var(--sys)}
.panel.brand{background:rgba(94,106,210,.06);border-color:rgba(94,106,210,.32)}

/* ---------- the right rail ---------- */
.split{display:flex;gap:22px;align-items:flex-start}
.split .col{flex:1;min-width:0}
.rail{width:290px;flex:none;display:flex;flex-direction:column;gap:16px}
.rail.w330{width:330px} .rail.w360{width:360px} .rail.w370{width:370px} .rail.w400{width:400px}
@media (max-width:1080px){.split{flex-direction:column}.rail,.rail.w330,.rail.w360,.rail.w370,.rail.w400{width:100%}}
.railsec{display:flex;flex-direction:column;gap:8px}
.railsec .eyebrow{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.1px;
  color:var(--dim);text-transform:uppercase;
}
.kv{display:flex;gap:10px;font-size:12.5px;padding:5px 0;border-bottom:1px solid var(--line2)}
.kv:last-child{border-bottom:0}
.kv .k{width:96px;flex:none;color:var(--dim)}
.kv .v{flex:1;min-width:0;color:var(--ink2)}

/* the score. the only number out of 21 anywhere in the product */
.score{display:flex;align-items:baseline;gap:7px}
.score b{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-1px;color:var(--warn)}
.score.low b{color:var(--bad-ink)}
.score.none b{color:var(--dim)}
.score span{font-size:12px;color:var(--dim)}
.scorecell{font-family:var(--mono);font-size:12.5px;color:var(--ink3);width:34px;flex:none;text-align:right}
.scorecell.hi{color:var(--warn)} .scorecell.clash{color:var(--bad-ink)} .scorecell.none{color:var(--ghost)}

/* ---------- quotations ----------
   Two accounts of the same work are shown side by side, verbatim. Never
   averaged into one. */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:14px 16px}
.quote .who{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.quote .who b{font-size:12.5px;font-weight:600}
.quote .who span{font-size:11.5px;color:var(--dim)}
.quote q{font-size:13px;line-height:1.6;color:var(--ink2);font-style:italic;quotes:'“' '”'}

/* ---------- the flow ---------- */
.flow{background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:16px;overflow-x:auto;margin-top:14px}
.lane{display:flex;gap:14px;align-items:stretch;min-height:96px}
.lane+.lane{margin-top:2px}
.lane .gut{width:120px;flex:none;padding:10px 0 10px 11px;border-left:2px solid var(--ghost)}
.lane.dock .gut{border-left-color:var(--warn)}
.lane.office .gut{border-left-color:var(--sys)}
.lane .gut b{display:block;font-size:12.5px;font-weight:600}
.lane .gut span{display:block;font-size:11.5px;color:var(--dim);margin-top:2px;line-height:1.4}
.lane .track{display:flex;align-items:center;gap:9px;padding:10px 0;flex:1;min-width:0}
.arrow{color:var(--mute);font-size:17px;flex:none}
.down{color:var(--mute);font-size:17px;padding-left:134px;display:flex;align-items:center;gap:9px}
.down span{font-size:11.5px;color:var(--dim)}
.down.dock{color:var(--warn)} .down.office{color:var(--sys)}
.step{
  width:150px;flex:none;border-radius:7px;padding:9px 11px;min-height:76px;
  display:flex;flex-direction:column;gap:4px;background:var(--sunk);border:1px solid var(--line);
}
.step .eyebrow{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.9px;color:var(--dim)}
.step b{font-size:13.5px;font-weight:500;line-height:1.3}
.step .note{margin-top:auto;font-size:11.5px;color:var(--dim);line-height:1.4}
.step.dock{background:rgba(229,168,58,.08);border-color:rgba(229,168,58,.22)}
.step.office{background:rgba(94,158,255,.08);border-color:rgba(94,158,255,.22)}
.step.unknown{background:#16161B;border:1px dashed var(--ghost)}
.step.changed{background:rgba(76,195,138,.08);border-color:rgba(76,195,138,.3)}
.step.gone{background:var(--sunk);border:1px dashed var(--ghost)}
.step.gone b{text-decoration:line-through;color:var(--dim)}
/* a decision is a wider card, not a diamond, and shows both accounts */
.step.decision{width:200px;background:var(--bad-wash);border-color:rgba(229,72,77,.36)}
.step.decision .eyebrow{color:var(--bad-ink)}

/* ---------- the line, on the plan ---------- */
.cutline{
  display:flex;align-items:center;gap:10px;height:30px;margin:6px 0;padding:0 12px;
  background:rgba(229,72,77,.07);
  border-top:1px solid rgba(229,72,77,.3);border-bottom:1px solid rgba(229,72,77,.3);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:1.1px;color:var(--bad-ink);
}

/* ---------- the command palette ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;background:rgba(4,4,6,.62);
  display:flex;align-items:flex-start;justify-content:center;padding:88px 20px 20px;
}
.palette{
  width:700px;max-width:100%;background:var(--over);border:1px solid var(--rule);border-radius:11px;
  box-shadow:0 28px 80px rgba(0,0,0,.62);overflow:hidden;display:flex;flex-direction:column;max-height:70vh;
}
.palette .find{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.palette .find input{
  flex:1;background:none;border:0;outline:none;color:var(--ink);font:inherit;font-size:15px;caret-color:var(--brand2);
}
.palette .find input::placeholder{color:var(--dim)}
.palette .res{overflow-y:auto;padding:6px 0 10px}
.palette .lbl{
  font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:1.1px;color:var(--dim);
  padding:10px 16px 5px;text-transform:uppercase;
}
.palette .hit{
  display:flex;align-items:center;gap:10px;height:38px;padding:0 16px;cursor:pointer;width:100%;
  background:none;border:0;text-align:left;color:inherit;
}
.palette .hit:hover,.palette .hit.on{background:var(--sunk)}
.palette .hit .t{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette .hit .t mark{background:none;color:var(--ink);font-weight:600}
.palette .hit .sub{font-size:11.5px;color:var(--dim);flex:none}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;color:var(--dim)}
.field input,.field textarea,.field select{
  background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:7px 10px;
  color:var(--ink);font:inherit;font-size:12.5px;outline:none;width:100%;
}
.field input:focus,.field textarea:focus{border-color:var(--brand)}
.tick{
  width:18px;height:18px;flex:none;border-radius:4px;border:1px solid var(--rule);background:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;
}
.tick[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}

/* ---------- empty and error ---------- */
.empty{
  border:1px dashed var(--rule);border-radius:9px;padding:20px;margin-top:16px;
  font-size:12.5px;color:var(--ink3);line-height:1.55;
}
.loading{padding:26px 0;color:var(--dim);font-size:12.5px}

/* ---------- toasts, reusing the 2.0 component's DOM ---------- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:380px}
.toast{
  display:flex;gap:10px;align-items:flex-start;background:var(--over);border:1px solid var(--rule);
  border-left:2px solid var(--good);border-radius:8px;padding:11px 13px;box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.toast.warn{border-left-color:var(--warn)} .toast.bad{border-left-color:var(--bad-fill)}
.toast .mark{
  width:16px;height:16px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;background:rgba(76,195,138,.13);color:var(--good);
}
.toast.warn .mark{background:rgba(229,168,58,.14);color:var(--warn)}
.toast.bad .mark{background:var(--bad-wash);color:var(--bad-ink)}
.toast .face{width:22px;height:22px;border-radius:50%;flex:none;object-fit:cover}
.toast .say{flex:1;min-width:0}
.toast .say .t{font-size:12.5px;font-weight:600}
.toast .say .b{font-size:11.5px;color:var(--ink3);margin-top:2px;line-height:1.45}
.toast .do{background:none;border:0;color:var(--brand2);font-size:11.5px;font-weight:600;cursor:pointer;flex:none}
.toast .shut{background:none;border:0;color:var(--dim);font-size:11.5px;cursor:pointer;flex:none}

/* ---------- dialogs, same component, 4.0's clothes ---------- */
.dlgwrap{position:fixed;inset:0;z-index:65;background:rgba(4,4,6,.62);display:flex;align-items:center;justify-content:center;padding:20px}
.dlg{background:var(--over);border:1px solid var(--rule);border-radius:11px;width:min(520px,100%);max-height:86vh;overflow:auto;box-shadow:0 28px 80px rgba(0,0,0,.6)}
.dlg.wide{width:min(660px,100%)}
.dlg .head{padding:20px 22px 4px}
.dlg .head h2{font-size:16px;font-weight:600;letter-spacing:-.3px}
.dlg .head p{font-size:12.5px;color:var(--ink3);line-height:1.55;margin-top:8px}
.dlg .typed,.dlg .formed,.dlg .choices{padding:16px 22px 4px;display:flex;flex-direction:column;gap:12px}
.dlg .choices{flex-direction:row;flex-wrap:wrap}
.dlg .choices button{font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:5px;cursor:pointer;background:var(--sunk);border:1px solid var(--line);color:var(--ink3)}
.dlg .choices button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.dlg .field .k{font-size:11.5px;color:var(--dim)}
.dlg .field .says{font-size:11.5px;color:var(--dim)}
.dlg input,.dlg textarea,.dlg select{
  background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:8px 10px;
  color:var(--ink);font:inherit;font-size:12.5px;outline:none;width:100%;
}
.dlg textarea{min-height:96px;resize:vertical}
.dlg .acts{display:flex;gap:8px;justify-content:flex-end;padding:18px 22px 20px}
.dlg .acts button{height:28px;padding:0 12px;border-radius:5px;font-size:12.5px;font-weight:500;cursor:pointer}
.dlg .acts .no{background:var(--sunk);border:1px solid var(--line);color:var(--ink2)}
.dlg .acts .go{background:var(--brand);border:1px solid var(--brand);color:#fff}
.dlg .acts .go[disabled]{opacity:.45;cursor:default}
.dlg.bad .acts .go{background:var(--bad-fill);border-color:var(--bad-fill)}
.dlg .panel{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:11px 13px;display:flex;flex-direction:column;gap:5px}
.dlg .panel .k{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}
.dlg .panel .link{font-family:var(--mono);font-size:12px;color:var(--ink);word-break:break-all}
.dlg .panel .msg{font-size:12.5px;color:var(--ink2);line-height:1.55}
.dlg .panel .exp{font-size:11.5px;color:var(--dim)}

/* The invite link (invite() in /2/spren2.js): who it is for, the link with a
   QR of it beside it, and the message with the link already in it. Its rules
   used to live only in spren2.css, which this console never loads, so the
   dialog opened as unstyled browser defaults. */
.dlg.wide .eyebrow{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1.1px;color:var(--dim);text-transform:uppercase}
.dlg.wide .ihead{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 0}
.dlg.wide .iname{font-size:18px;font-weight:600;letter-spacing:-.3px;margin-top:5px}
.dlg.wide .imeta{font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:3px}
.dlg.wide .ishut{margin-left:auto;width:28px;height:28px;flex:none;border-radius:5px;border:1px solid var(--line);background:var(--sunk);color:var(--ink3);font-size:12px;cursor:pointer}
.dlg.wide .ishut:hover{color:var(--ink);border-color:var(--rule)}
.dlg.wide .irow{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;padding:18px 22px}
.dlg.wide .ilinkcol{flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px}
.dlg.wide .ilink{display:flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:var(--sunk)}
.dlg.wide .ilink .u{flex:1;min-width:0;padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg.wide .icopy{flex:none;border:0;padding:0 14px;background:var(--brand);color:#fff;font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.dlg.wide .iqr{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.dlg.wide .iqr canvas{width:132px;height:132px;border-radius:7px;border:1px solid var(--rule)}
.dlg.wide .imsg{border-top:1px solid var(--line);padding:16px 22px 20px;display:flex;flex-direction:column;gap:8px}
.dlg.wide .imsghead{display:flex;align-items:baseline;gap:10px}
.dlg.wide .imsg textarea{min-height:118px;line-height:1.6}
.dlg.wide .iacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:4px}
.dlg.wide .ibtn{min-height:34px;padding:0 12px;border-radius:5px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;background:var(--sunk);border:1px solid var(--line);color:var(--ink2)}
.dlg.wide .ibtn:hover{color:var(--ink);border-color:var(--rule)}
.dlg.wide .ibtn.green{background:var(--brand);border-color:var(--brand);color:#fff}
.dlg.wide .ibtn.last{margin-left:auto}
.dlg.wide .ibtn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:780px){.dlg.wide .iqr{display:none}.dlg.wide .ibtn.last{margin-left:0}}