/* Two layers, on purpose. The FRAME (header, footer) is Venabili's — the console's palette and its one
   monospace — and is the same for every team of agents the harness serves. The BODY is the Node's: its colours
   come from `instance.yaml → node.theme` (set by ui.js as --n-* properties); without a theme, the console's.
   No web font: the page carries the launch token and makes no request beyond its own origin.
   The body is three columns (worksite 0048): the conversations and the library | the conversation, or a library
   page | what waits for a « oui » and the journal. Below 960 px, one column: the navigation folds behind a button. */
:root{
  /* Venabili frame */
  --v-void:#0A1120; --v-deep:#0E1A2B; --v-line:#22374B; --v-ink:#E9EDE6; --v-muted:#9FB0B5; --v-galaxy:#86D8C6;
  --v-mono:'IBM Plex Mono','SF Mono','SFMono-Regular',Menlo,Consolas,monospace;
  /* the Node's body — defaults: the console's own */
  --n-ground:#0A1120; --n-surface:#152538; --n-sunk:#0B1523; --n-ink:#E9EDE6; --n-muted:#9FB0B5; --n-line:#22374B;
  --n-primary:#86D8C6; --n-primary-ink:#86D8C6; --n-on-primary:#0A1120; --n-accent:#E0B458; --n-fail:#D9755A; --n-ok:#1F9D6A;
  --n-display:var(--v-mono); --n-body:var(--v-mono);
  /* derived: tints of the Node's own colours, so any theme stays coherent */
  --n-soft:color-mix(in srgb,var(--n-primary) 10%,var(--n-surface));
  --n-soft-line:color-mix(in srgb,var(--n-primary) 28%,var(--n-line));
  --n-gold-soft:color-mix(in srgb,var(--n-accent) 12%,var(--n-surface));
  --n-gold-ink:color-mix(in srgb,var(--n-accent) 72%,var(--n-ink));
  --n-ok-soft:color-mix(in srgb,var(--n-ok) 10%,var(--n-surface));
  --n-hair:color-mix(in srgb,var(--n-line) 60%,var(--n-surface));
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--n-ground);color:var(--n-ink);font:400 15px/1.6 var(--n-body);height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--v-mono)}
.small{font-size:.76rem;color:var(--n-muted)}
[hidden]{display:none !important}

/* ── Venabili frame ── */
.vtop,.vfoot{font-family:var(--v-mono);background:var(--v-void);color:var(--v-ink);padding:.75rem clamp(16px,3vw,32px);flex:0 0 auto}
.vtop{border-bottom:1px solid var(--v-line);padding-bottom:0}
.vbrand{display:flex;align-items:center;gap:.6rem;font-weight:500;letter-spacing:.02em}
.vbrand em{color:var(--v-muted);font-style:normal;font-weight:300}
.vmark{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--v-galaxy);border-radius:50%;color:var(--v-galaxy);font-size:.9rem}
.vfoot{display:flex;justify-content:space-between;gap:.25rem 1.5rem;flex-wrap:wrap;font-size:.72rem;color:var(--v-muted);border-top:1px solid var(--v-line);padding-top:.45rem;padding-bottom:.45rem}
.vfoot b{color:var(--v-galaxy);font-weight:500}
.vbar{display:flex;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap;padding-bottom:.75rem}
.vstat{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--v-muted);min-width:0;flex:1 1 16rem}
.vstat span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--v-muted)}
.vdot.ok{background:var(--v-galaxy)} .vdot.hot{background:#E0B458} .vdot.bad{background:#D9755A}
.vact{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.vwho{font-size:.8rem;color:var(--v-muted);max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vtop button.vbtn{white-space:nowrap;min-height:32px;padding:0 .8rem;border:1px solid var(--v-line);border-radius:999px;background:transparent;color:var(--v-ink);font:400 .78rem/1 var(--v-mono);display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.vtop button.vbtn:hover{border-color:var(--v-galaxy);color:var(--v-galaxy)}
.vtop button.vbtn.tiny{min-height:26px;margin-top:.4rem;font-size:.72rem}
.chev{display:inline-block;transition:transform .25s}
[aria-expanded="true"] .chev{transform:rotate(180deg)}
.vpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.vpanel.open{grid-template-rows:1fr}
.vpanel-in{overflow:hidden;min-height:0}
.tele{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.6rem;margin:0;padding:.2rem 0 1rem}
.tele div{border:1px solid var(--v-line);border-radius:10px;padding:.55rem .7rem;background:var(--v-deep);min-width:0}
.tele dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--v-muted)}
.tele dd{margin:.15rem 0 0;font-size:.9rem;color:var(--v-ink);overflow-wrap:anywhere}
.tele dd.sub{font-size:.74rem;color:var(--v-muted);margin-top:.05rem}
/* the telemetry drawer (worksite 0049): what the team IS on the left, what it DID today on the right */
.tgrid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2.3fr);gap:1.4rem;padding:.4rem 0 1.1rem}
.tsh{margin:0 0 .55rem;font:400 .66rem/1 var(--v-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v-muted);display:flex;align-items:center;gap:.5rem}
.tdl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;margin:0}
.tdl div{padding:.45rem 0 .5rem;border-bottom:1px solid var(--v-line);min-width:0}
.tdl dt{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--v-muted)}
.tdl dd{margin:.12rem 0 0;font-size:.82rem;color:var(--v-ink);overflow-wrap:anywhere}
.tdl dd.sub{font-size:.7rem;color:var(--v-muted);margin-top:.05rem}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.kpi{position:relative;background:var(--v-deep);border:1px solid var(--v-line);border-radius:12px;padding:.75rem .9rem .7rem;overflow:hidden;min-width:0}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--k,var(--v-galaxy));opacity:.8}
.kpi.warn{--k:#E0B458} .kpi.bad{--k:#D9755A} .kpi.quiet{--k:var(--v-line)}
.kl{margin:0;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--v-muted)}
.kn{margin:.3rem 0 .12rem;font-size:1.55rem;font-weight:500;line-height:1.1;color:var(--v-ink);font-variant-numeric:tabular-nums}
.kn small{font-size:.78rem;color:var(--v-muted);font-weight:300;margin-left:.2rem}
.ks{margin:0;font-size:.7rem;color:var(--v-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kspark{display:flex;align-items:flex-end;gap:2px;height:18px;margin:.25rem 0 .35rem}
.kspark i{flex:1 1 0;background:var(--v-galaxy);border-radius:1.5px;min-height:2px;opacity:.85}
.kspark i.z{background:var(--v-line);opacity:.7} .kspark i.later{background:transparent;border:1px dashed var(--v-line);opacity:.5}
.hbar{display:flex;gap:2px;height:5px;border-radius:3px;overflow:hidden;margin:.4rem 0 .45rem;background:#0B1523}
.hbar i{display:block;min-width:3px} .hbar i.ok{background:var(--v-galaxy)} .hbar i.park{background:#E0B458} .hbar i.deny{background:#D9755A}
.tlivedot{width:7px;height:7px;border-radius:50%;background:var(--v-galaxy);animation:blink 2.4s infinite}
.tzone{margin-left:auto;letter-spacing:.04em;text-transform:none}
.tfoot{margin:.6rem 0 0;font-size:.7rem;color:var(--v-muted);overflow-wrap:anywhere}
@media (max-width:960px){.tgrid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.tlivedot{animation:none}}
.banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:var(--v-void);border:1px solid var(--n-fail);color:#F2B8A6;padding:.6rem 1rem;border-radius:12px;max-width:calc(100vw - 32px);font-family:var(--v-mono);font-size:.85rem;z-index:20}

/* ── controls (the Node's) ── */
button{font:inherit;cursor:pointer;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1.1rem;border-radius:999px;border:1.5px solid var(--n-ink);background:var(--n-surface);color:var(--n-ink);font:600 .9rem/1 var(--n-body);text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--n-ink);color:var(--n-surface)}
.btn.primary{background:var(--n-ink);color:var(--n-surface)}
.btn.primary:hover{background:var(--n-primary);border-color:var(--n-primary);color:var(--n-on-primary)}
.btn.go{background:var(--n-primary);border-color:var(--n-primary);color:var(--n-on-primary)}
.btn.quiet{border-color:var(--n-line)}
.btn.quiet:hover{border-color:var(--n-ink)}
.btn.small{min-height:36px;padding:0 .9rem;font-size:.82rem}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.iconbtn{width:40px;height:40px;flex:0 0 auto;border-radius:999px;border:1px solid var(--n-line);background:var(--n-surface);color:var(--n-ink);display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{border-color:var(--n-primary);color:var(--n-primary-ink)}
.iconbtn .mono{font-size:1rem;font-weight:500}
.btn:focus-visible,.iconbtn:focus-visible,.navitem:focus-visible,.ptab:focus-visible,.opt:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--n-primary);outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:.35rem;height:26px;padding:0 .7rem;border-radius:999px;background:var(--n-soft);color:var(--n-primary-ink);font:500 .74rem/1 var(--v-mono);white-space:nowrap}
.chip.plain{background:var(--n-surface);border:1px solid var(--n-line);color:var(--n-muted)}
.chip.gold{background:var(--n-gold-soft);color:var(--n-gold-ink)}
.chip.ok{background:var(--n-ok-soft);color:var(--n-ok)}
.handle{font-family:var(--n-body);font-weight:600;color:var(--n-primary-ink)}
.empty{margin:0;font-size:.86rem;color:var(--n-muted)}
.empty.pad{padding:1.6rem 1.2rem}
kbd{font:500 .8em var(--v-mono);border:1px solid var(--n-line);border-bottom-width:2px;border-radius:5px;padding:0 .3rem;background:var(--n-surface)}

/* ── the three columns ── */
.shell{flex:1;min-height:0;display:grid;grid-template-columns:clamp(232px,19vw,272px) minmax(0,1fr) clamp(300px,28vw,408px)}
.shell:not([data-view="thread"]){grid-template-columns:clamp(232px,19vw,272px) minmax(0,1fr)}
.shell:not([data-view="thread"]) .panel{display:none}
.booting .shell{opacity:0}
.shell{transition:opacity .2s}
/* `node.notice` (worksite 0076): one line for everyone, above the page's body */
.notice{flex:0 0 auto;padding:7px 16px;background:var(--n-gold-soft);color:var(--n-gold-ink);border-bottom:1px solid var(--n-line);font:500 .82rem/1.4 var(--n-body);text-align:center}

/* left: the Node, its conversations, its library */
.side{background:var(--n-surface);border-right:1px solid var(--n-line);padding:18px 14px 22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:0}
.nodeid{display:flex;align-items:center;gap:.7rem;padding:0 .3rem}
.nmark{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 .45rem;border-radius:10px;background:var(--n-primary);color:var(--n-on-primary);font:600 .95rem/1 var(--n-display);flex:0 0 auto}
.nmark.logo{background:none;padding:0;min-width:0;width:40px;height:40px}
.nmark.logo img{display:block;width:100%;height:100%;object-fit:contain}
.nid{min-width:0;flex:1}
.nname{font:600 1rem/1.25 var(--n-display);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsub{font-size:.76rem;color:var(--n-muted)}
.menu{display:none}
.sidebody{display:flex;flex-direction:column;gap:16px}
.sidesec{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--n-hair)}
.sidehead{font:500 .74rem/1 var(--n-body);color:var(--n-muted);padding:0 .6rem .2rem;display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-height:24px}
.findbtn{display:inline-grid;place-items:center;width:26px;height:26px;margin:-4px -4px -4px 0;border:0;border-radius:7px;background:none;color:var(--n-muted);cursor:pointer}
.findbtn:hover,.findbtn[aria-expanded="true"]{background:var(--n-ground);color:var(--n-ink)}
.findbtn:focus-visible{outline:2px solid var(--n-primary);outline-offset:1px}
.sidesec .side-search{margin:.2rem .2rem .4rem;height:34px;min-width:0}
.navlist{display:flex;flex-direction:column;gap:1px}
.navitem{display:flex;align-items:center;gap:.6rem;width:100%;min-height:36px;padding:.35rem .6rem;border:0;border-radius:10px;background:none;color:var(--n-ink);font:400 .88rem/1.3 var(--n-body);text-align:left}
.navitem:hover{background:var(--n-ground)}
.navitem[aria-current="page"]{background:var(--n-soft);color:var(--n-primary-ink);font-weight:600}
.navitem .meta{margin-left:auto;font-size:.74rem;color:var(--n-muted);font-weight:400}
.navitem.two{min-height:50px}
.lines{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lines b{font-weight:500;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lines small{font-size:.74rem;color:var(--n-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navitem[aria-current="page"] .lines small{color:var(--n-primary-ink)}
.lines small.wait{color:var(--n-gold-ink);font-weight:500}
.tico{width:28px;height:28px;flex:0 0 auto;border-radius:8px;background:var(--n-ground);border:1px solid var(--n-hair);display:inline-flex;align-items:center;justify-content:center;color:var(--n-muted)}
.navitem[aria-current="page"] .tico{background:var(--n-surface);color:var(--n-primary-ink);border-color:var(--n-soft-line)}
/* the apps the person pinned, and « Mon harnais AI » folded by default (worksite 0074, as mocked) */
details.sidesec{display:block}
details.sidesec>.navlist{margin-top:6px}
.harnhead{cursor:pointer;list-style:none;border-radius:8px;user-select:none}
.harnhead::-webkit-details-marker{display:none}
.harnhead:hover{color:var(--n-ink)}
.harnhead:focus-visible{outline:2px solid var(--n-primary);outline-offset:2px}
.harnhead .caret{display:inline-block;transition:transform .15s ease}
details[open]>.harnhead .caret{transform:rotate(90deg)}
details.has-cur:not([open])>.harnhead{color:var(--n-primary-ink);font-weight:600}
@media (prefers-reduced-motion:reduce){.harnhead .caret{transition:none}}
.navitem .ubadge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--n-primary);color:var(--n-on-primary);font:600 .72rem/20px var(--n-body);text-align:center}
.navitem .tico.emo{font-size:15px;line-height:1}
.app .pin{display:inline-flex;align-items:center;gap:.4rem}
.app .pin[aria-pressed="true"]{background:var(--n-soft);color:var(--n-primary-ink);border-color:var(--n-soft-line)}
.app .abar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.app .abar .open{margin-left:auto}

/* middle: the conversation */
.view{min-width:0;min-height:0;overflow-y:auto}
.convo{display:flex;flex-direction:column;overflow:hidden}
.threadhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:14px clamp(16px,2.4vw,28px);border-bottom:1px solid var(--n-line);flex:0 0 auto}
.th-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.threadhead h1{margin:0;font:600 1.2rem/1.25 var(--n-display);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.th-l{flex:1 1 20rem}
.th-r{display:flex;align-items:center;gap:10px;font:400 .74rem/1.4 var(--v-mono);color:var(--n-muted);white-space:nowrap}
.th-r .btn{font-family:var(--n-body)}
.th-r .btn.go{color:var(--n-on-primary)}
.side-search{min-width:0;height:38px}
.side-empty{padding:.2rem .6rem;font-size:.78rem}
.callnote{font-size:.8rem;color:var(--n-muted);border:1px dashed var(--n-line);border-radius:12px;padding:.45rem .8rem}
.callnote .mono{font-size:.76rem}
.messages{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:18px;padding:24px clamp(16px,2.4vw,28px) 12px}
.lane{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lane.mine{align-items:flex-end}
.welcome{margin-top:clamp(8px,8vh,80px);display:flex;flex-direction:column;gap:.4rem}
.welcome h2{margin:0;font:600 1.5rem/1.25 var(--n-display);letter-spacing:-.02em}
.welcome p{margin:0;color:var(--n-muted);max-width:40rem}
.bubble{max-width:78%;background:var(--n-ink);color:var(--n-surface);padding:.7rem 1rem;border-radius:18px 18px 6px 18px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.who{display:flex;align-items:center;gap:.5rem;font-size:.76rem;color:var(--n-muted)}
.answer{max-width:92%;background:var(--n-surface);border:1px solid var(--n-line);border-radius:6px 18px 18px 18px;padding:.9rem 1.1rem;overflow-wrap:anywhere}
.steps{display:flex;flex-direction:column;gap:4px;max-width:min(560px,100%);padding:.6rem .9rem;border-radius:14px;border:1px dashed color-mix(in srgb,var(--n-line) 80%,var(--n-muted));background:var(--n-surface);font:400 .78rem/1.5 var(--v-mono);color:var(--n-muted)}
.steps .k{color:var(--n-primary-ink)}
.steps>span::before{content:"▸ ";color:var(--n-accent)}
.msg-err{max-width:92%;border:1px solid var(--n-fail);color:var(--n-fail);border-radius:12px;padding:.6rem .9rem;background:var(--n-surface)}
.typing{display:inline-flex;gap:4px;padding:.2rem 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--n-muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* files (UI-3): the chips in the composer, the cards in the conversation and the panel, the drop zone */
.convo{position:relative}
.atts{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 2px}
.att{display:flex;align-items:center;gap:8px;max-width:100%;border:1px solid var(--n-line);border-radius:12px;padding:5px 6px 5px 8px;background:var(--n-ground);font-size:.8rem;position:relative;overflow:hidden}
.att .nm{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.att .st{font:400 .7rem/1 var(--v-mono);color:var(--n-muted)}
.att.error{border-color:var(--n-fail)} .att.error .st{color:var(--n-fail)}
.att .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--n-primary);transition:width .2s}
.att button{width:24px;height:24px;border:0;border-radius:50%;background:none;color:var(--n-muted);display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1}
.att button:hover{background:var(--n-surface);color:var(--n-ink)}
.fico{width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--n-soft);color:var(--n-primary-ink);display:inline-flex;align-items:center;justify-content:center;font:600 .62rem/1 var(--v-mono);letter-spacing:.04em}
.att .fico{width:26px;height:26px;border-radius:7px;font-size:.55rem}
.filecard{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--n-surface);border:1px solid var(--n-line);max-width:min(360px,100%)}
.filecard .lines b{font-size:.86rem;font-weight:600}
.filecard .lines small{font-family:var(--v-mono);font-size:.7rem}
.flist{display:flex;flex-direction:column;gap:8px}
.flist .filecard{max-width:none}
.dropzone{position:absolute;inset:10px;z-index:8;border:2px dashed var(--n-primary);border-radius:22px;background:color-mix(in srgb,var(--n-surface) 88%,transparent);display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.dropzone div{display:flex;flex-direction:column;gap:4px}
.dropzone b{font:600 1.1rem/1.3 var(--n-display)} .dropzone span{font:400 .76rem var(--v-mono);color:var(--n-muted)}

/* the memory (lot M): proposals, the memory page, the memories an answer used */
.props{display:flex;flex-direction:column;gap:10px}
.memprop{border:1px solid var(--n-accent);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--n-surface)}
.memprop.kept{border-color:var(--n-ok);background:var(--n-ok-soft)}
.memprop.gone{border-color:var(--n-line);opacity:.7}
.mphead,.mmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.76rem;color:var(--n-muted)}
.mphead{justify-content:space-between}
.mtext{margin:0;font-size:.92rem;line-height:1.5;color:var(--n-ink)}
.memedit{width:100%;min-height:40px;border:1px solid var(--n-primary);border-radius:10px;padding:0 10px;font:400 .92rem var(--n-body);color:var(--n-ink);background:var(--n-surface)}
.lead2{color:var(--n-ink);font-size:.8rem}
.memgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.memcol{display:flex;flex-direction:column;gap:20px;min-width:0}
.pend{background:var(--n-surface);border:1px solid var(--n-accent);border-radius:22px;overflow:hidden}
.pendhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 18px;background:var(--n-gold-soft);border-bottom:1px solid var(--n-hair)}
.pt{display:flex;flex-direction:column;gap:4px}
.pend h2,.lib h2{margin:0;font:600 1.1rem/1.2 var(--n-display);letter-spacing:-.015em}
.prow{display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-bottom:1px solid var(--n-hair)}
.prow:last-child{border-bottom:0}
.lib .pills{padding:12px 18px;border-bottom:1px solid var(--n-hair)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--n-line);background:var(--n-surface);font:400 .82rem var(--n-body);color:var(--n-ink)}
.pill:hover{border-color:var(--n-primary)}
.pill[aria-pressed="true"]{background:var(--n-ink);border-color:var(--n-ink);color:var(--n-surface)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--n-hair)}
.mrow:last-child{border-bottom:0}
.mrow .mbody{display:flex;flex-direction:column;gap:8px;min-width:0}
.mrow .acts{justify-content:flex-end}
.flash{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--n-ok-soft);color:var(--n-ok);font:400 .78rem var(--v-mono)}
.side2{display:flex;flex-direction:column;gap:16px}
.mcard{background:var(--n-surface);border:1px solid var(--n-line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px}
.mcard h3{margin:0;font:600 1rem/1.25 var(--n-display)}
.mcard p,.mcard ul{margin:0;font-size:.84rem;line-height:1.55;color:var(--n-muted)}
.mcard ul{padding-left:18px}
.setrow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.setrow b{display:block;font-size:.88rem;font-weight:500}
.setrow small{display:block;font-size:.76rem;line-height:1.45;color:var(--n-muted);margin-top:2px}
.where{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 10px;margin:0;font-size:.82rem}
.where dt{font:400 .66rem/1.6 var(--v-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted)}
.where dd{margin:0}
.used{display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:100%}
.usedbtn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--n-line);background:var(--n-surface);font:400 .76rem var(--n-body);color:var(--n-muted)}
.usedbtn:hover{border-color:var(--n-primary);color:var(--n-primary-ink)}
.usedlist{list-style:none;margin:0;padding:12px 14px;border-radius:14px;background:var(--n-surface);border:1px solid var(--n-hair);display:flex;flex-direction:column;gap:10px;max-width:min(560px,100%)}
.usedlist li{display:flex;flex-direction:column;gap:2px;font-size:.88rem;line-height:1.45}
.usedlist small{font-size:.74rem;color:var(--n-muted)}
@media (max-width:1180px){.memgrid{grid-template-columns:1fr}}
@media (max-width:640px){.mrow{grid-template-columns:1fr}.mrow .acts{justify-content:flex-start}}

/* the composer */
.composer{flex:0 0 auto;padding:10px clamp(16px,2.4vw,28px) 14px}
.box{position:relative;max-width:860px;margin:0 auto;background:var(--n-surface);border:1px solid var(--n-line);border-radius:22px;padding:8px 8px 8px 12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 24px 48px -36px rgba(10,17,32,.45)}
.box:focus-within{border-color:var(--n-soft-line)}
.box textarea{border:0;resize:none;font:400 .95rem/1.5 var(--n-body);color:var(--n-ink);background:transparent;padding:.45rem .3rem;min-height:3rem;max-height:40vh}
.box textarea:focus-visible{outline:none}
.boxrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.boxrow .btn{margin-left:auto}
.hint{max-width:860px;margin:6px auto 0;font-size:.74rem;color:var(--n-muted);text-align:center}
.picker{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);max-height:min(340px,46vh);overflow-y:auto;background:var(--n-surface);border:1px solid var(--n-line);border-radius:16px;padding:6px;box-shadow:0 24px 48px -24px rgba(10,17,32,.45);z-index:5}
.picker .ph{font:500 .7rem/1 var(--v-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--n-muted);padding:.5rem .6rem .35rem}
.opt{display:flex;align-items:center;gap:.6rem;width:100%;padding:.45rem .6rem;border:0;border-radius:10px;background:none;text-align:left;color:var(--n-ink)}
.opt[aria-selected="true"],.opt:hover{background:var(--n-soft)}
.opt .lines b{font-weight:600}
.opt .nm{font:500 .84rem/1.3 var(--v-mono)}

/* pages: the team, the skills, the applications */
.page{padding:clamp(20px,3vw,32px) clamp(16px,3vw,36px) 48px;display:flex;flex-direction:column;gap:24px}
.page>*{flex-shrink:0}          /* a column that scrolls: its blocks keep their height (a squeezed .lib clipped its rows) */
.pagehead{display:flex;flex-direction:column;gap:10px;max-width:760px}
.eyebrow{font:500 .72rem/1 var(--v-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--n-primary-ink);display:flex;align-items:center;gap:10px}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--n-accent)}
.page h1{margin:0;font:600 clamp(1.6rem,2.6vw,2rem)/1.15 var(--n-display);letter-spacing:-.025em}
.lead{margin:0;font-size:1rem;line-height:1.6;color:var(--n-muted)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:16px}
.agent{background:var(--n-surface);border:1px solid var(--n-line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;transition:transform .25s,box-shadow .25s,border-color .25s}
.agent:hover{transform:translateY(-4px);border-color:var(--n-primary);box-shadow:0 20px 40px -28px rgba(10,17,32,.35)}
.agent .row{display:flex;align-items:center;gap:.7rem}
.agent h3{margin:0;font:600 1.05rem/1.2 var(--n-display);letter-spacing:-.015em}
.agent .row .chip{margin-left:auto}
.agent p{margin:0;font-size:.88rem;line-height:1.55;color:var(--n-muted)}
.agent .hint2{font-size:.8rem;color:var(--n-ink);background:var(--n-ground);border-radius:10px;padding:.5rem .7rem}
.agent .skills{display:flex;flex-wrap:wrap;gap:6px}
.agent .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--n-hair)}
.av{width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--n-soft);color:var(--n-primary-ink);display:inline-flex;align-items:center;justify-content:center;font:600 .85rem/1 var(--n-display)}
.av.sm{width:28px;height:28px;font-size:.72rem}
.lib{background:var(--n-surface);border:1px solid var(--n-line);border-radius:22px;overflow:hidden}
.libhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--n-line)}
.search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--n-line);border-radius:12px;background:var(--n-ground);color:var(--n-muted);min-width:min(100%,300px)}
.search input{border:0;background:transparent;font:400 .9rem var(--n-body);color:var(--n-ink);flex:1;min-width:0}
.search input:focus-visible{outline:none}
.search:focus-within{outline:2px solid var(--n-primary);outline-offset:1px}
.skrow{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) 130px auto;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--n-hair)}
.skrow:last-child{border-bottom:0}
.skrow .nm{font:500 .86rem/1.3 var(--v-mono);overflow-wrap:anywhere}
.skrow .ds{font-size:.86rem;line-height:1.5;color:var(--n-muted)}
.skrow .own{font-size:.82rem;color:var(--n-muted)}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;align-items:stretch}
.app-new{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.2rem;border:1.5px dashed var(--n-line);border-radius:18px;background:var(--n-surface);color:var(--n-ink);text-decoration:none;transition:border-color .2s,transform .2s}
.app-new:hover{border-color:var(--n-primary);transform:translateY(-2px)}
.app-ico{color:var(--n-primary)}
.app-new-t{font:600 1rem/1.3 var(--n-display)}
.app-new-s{font-size:.85rem;color:var(--n-muted)}
.apps-empty{margin:0;align-self:center;font-size:.88rem;color:var(--n-muted)}
.apps-doc{background:var(--n-surface);border:1px solid var(--n-line);border-radius:18px;padding:1.2rem 1.4rem;line-height:1.6;max-width:1000px}
.apps-doc h3{margin:1rem 0 .5rem;font:600 1rem/1.3 var(--n-display)}.apps-doc h3:first-child{margin-top:0}
/* folded by default (Émile, 4 Nov.): the summary is the whole bar, a chevron says it opens */
.apps-doc>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px}
.apps-doc>summary::-webkit-details-marker{display:none}
.apps-doc>summary::after{content:"";grid-column:2;grid-row:1/span 2;width:9px;height:9px;border-right:2px solid var(--n-muted);border-bottom:2px solid var(--n-muted);transform:rotate(45deg);transition:transform .15s;margin-right:4px}
.apps-doc[open]>summary::after{transform:rotate(-135deg)}
.apps-doc>summary h3{margin:0}
.apps-doc-sub{grid-column:1;font-size:.86rem;color:var(--n-muted)}
.apps-doc[open]>summary .apps-doc-sub{display:none}
.apps-doc[open]>summary{margin-bottom:.6rem}
.apps-doc>summary:focus-visible{outline:2px solid var(--n-primary);outline-offset:4px;border-radius:8px}
.apps-doc p{margin:0 0 .6rem}
.apps-doc ol,.apps-doc ul{margin:0 0 .4rem;padding-left:1.3rem}.apps-doc li{margin:.3rem 0}
.apps-doc b{font-weight:600}
.apps-doc .inherit{list-style:none;padding:0;margin:.2rem 0 .4rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.apps-doc .inherit li{margin:0;padding:12px 14px;border-radius:14px;background:var(--n-ground);border:1px solid var(--n-hair);display:flex;flex-direction:column;gap:3px}
.apps-doc .inherit b,.apps-doc .howto b{font:600 .9rem/1.3 var(--n-display)}
.apps-doc .inherit span,.apps-doc .howto span{font-size:.86rem;line-height:1.5;color:var(--n-muted)}
.apps-doc .howto{counter-reset:h;list-style:none;padding:0;margin:.2rem 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.apps-doc .howto li{counter-increment:h;margin:0;padding:14px;border-radius:14px;border:1px solid var(--n-hair);background:var(--n-surface);display:flex;flex-direction:column;gap:4px;position:relative}
.apps-doc .howto li::before{content:counter(h);width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;margin-bottom:4px;background:var(--n-soft);color:var(--n-primary-ink);font:600 .75rem/1 var(--v-mono)}
@media (max-width:1180px){.apps-doc .howto{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.apps-doc .inherit,.apps-doc .howto{grid-template-columns:1fr}}
.flowdoc{counter-reset:f;list-style:none;padding-left:0 !important}
.flowdoc li{counter-increment:f;position:relative;padding-left:2.2rem}
.flowdoc li::before{content:counter(f);position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:var(--n-primary);color:var(--n-on-primary);font:600 .75rem/1 var(--v-mono)}
.flowdoc li:not(:last-child)::after{content:"";position:absolute;left:.72rem;top:1.7rem;bottom:-.55rem;width:2px;background:var(--n-line)}

/* right: what waits for a « oui », and the journal */
.panel{background:var(--n-surface);border-left:1px solid var(--n-line);display:flex;flex-direction:column;min-height:0}
.ptabs{display:flex;gap:2px;padding:10px 8px 0;border-bottom:1px solid var(--n-line);overflow-x:auto;flex:0 0 auto}
.ptab{min-height:44px;padding:0 8px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--n-muted);font:400 .84rem/1 var(--n-body);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ptab[aria-selected="true"]{color:var(--n-ink);font-weight:600;border-bottom-color:var(--n-primary)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--n-ground);color:var(--n-muted);font:500 .7rem/1 var(--v-mono)}
.count.hot{background:var(--n-gold-soft);color:var(--n-gold-ink)}
.pbody{padding:16px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0;flex:1}
.inbox{display:flex;flex-direction:column;gap:12px}
.retain{margin:0;font-size:.76rem;line-height:1.5;color:var(--n-muted)}
.journal{background:var(--v-void);border:1px solid var(--v-line);border-radius:16px;padding:14px;color:var(--v-ink)}
.journal h2{margin:0 0 8px;font:400 .68rem/1 var(--v-mono);letter-spacing:.14em;text-transform:uppercase;color:#8EA2FF}
.audit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.audit li{display:grid;grid-template-columns:4.6rem 1fr;gap:.5rem;font:400 .74rem/1.45 var(--v-mono)}
.audit .t{color:var(--v-muted)} .audit .e{overflow-wrap:anywhere}
.audit .k-gate_allow,.audit .k-approved_call_executed{color:var(--v-galaxy)}
.audit .k-gate_park,.audit .k-approval_parked{color:#D9A946} .audit .k-gate_deny{color:#D9755A}

/* an approval: the same card in the conversation and in « À approuver » */
.appr{border:1px solid var(--n-accent);border-radius:18px;background:var(--n-surface);overflow:hidden;box-shadow:0 24px 48px -36px rgba(10,17,32,.4);width:100%}
.appr.done{border-color:var(--n-ok)}
.appr.denied{border-color:var(--n-line);opacity:.8}
.apprhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--n-gold-soft);border-bottom:1px solid var(--n-hair)}
.appr.done .apprhead{background:var(--n-ok-soft)}
.appr.denied .apprhead{background:var(--n-ground)}
.apprhead b{font-size:.88rem;font-weight:600;overflow-wrap:anywhere}
.apprbody{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.apprbody .why{margin:0;font-size:.84rem;color:var(--n-muted)}
.kv{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr);gap:6px 12px;margin:0;font-size:.86rem}
.panel .kv{grid-template-columns:1fr;gap:2px}
.panel .kv dd{margin-bottom:6px}
.kv dt{font:400 .68rem/1.4 var(--v-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--n-muted);padding-top:3px;overflow-wrap:anywhere}
.kv dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap;max-height:12rem;overflow-y:auto}
.kv dd.code{font:400 .8rem/1.5 var(--v-mono)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fp{font:400 .7rem/1.4 var(--v-mono);color:var(--n-muted)}
.res{font-size:.78rem;color:var(--n-muted);overflow-wrap:anywhere}

/* the answers' Markdown */
.md{white-space:normal;line-height:1.6}
.md>:first-child{margin-top:0}.md>:last-child{margin-bottom:0}
.md p{margin:0 0 .6rem}
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{font-family:var(--n-display);font-weight:600;line-height:1.25;margin:.9rem 0 .4rem}
.md h1{font-size:1.3em}.md h2{font-size:1.18em}.md h3{font-size:1.06em}.md h4,.md h5,.md h6{font-size:1em}
.md ul,.md ol{margin:.2rem 0 .6rem;padding-left:1.3rem}.md li{margin:.15rem 0}.md li>ul,.md li>ol{margin:.15rem 0}
.md li:has(>input[type=checkbox]){list-style:none;margin-left:-1.1rem}.md input[type=checkbox]{margin:0 .4rem 0 0;vertical-align:-1px}
.md blockquote{margin:.4rem 0 .6rem;padding:.2rem 0 .2rem .8rem;border-left:3px solid var(--n-line);color:var(--n-muted)}
.md hr{border:0;border-top:1px solid var(--n-line);margin:.8rem 0}
.md a{color:var(--n-primary-ink);text-decoration:underline;text-underline-offset:2px}
.md strong{font-weight:600}.md del{opacity:.7}
.md code{font:400 .86em var(--v-mono);background:var(--n-ground);border:1px solid var(--n-line);border-radius:6px;padding:0 .3rem}
.md pre{margin:.4rem 0 .7rem;background:var(--n-ground);border:1px solid var(--n-line);border-radius:10px;padding:.6rem .75rem;overflow-x:auto}
.md pre code{border:0;padding:0;background:none;font-size:.82em;white-space:pre}
.md .tablewrap{overflow-x:auto;margin:.3rem 0 .7rem}
.md table{border-collapse:collapse;font-size:.9em}
.md th,.md td{border-bottom:1px solid var(--n-line);padding:.35rem .9rem .35rem 0;text-align:left;vertical-align:top}
.md th{font:400 .7rem/1.4 var(--v-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted)}
.md th[align=right],.md td[align=right],.md .num{text-align:right;font-variant-numeric:tabular-nums}
.md th[align=center],.md td[align=center]{text-align:center}

/* one column below 960 px: the page scrolls as a document, the navigation folds */
/* the library stays at the foot of the column, always in view; the conversations scroll above it and fade out over
   its last 24 px (Émile, 4 Nov.: « le volet Bibliothèque devrait être collé au bas de la fenêtre […] un genre de
   fade-out de 20-30 px ») — on a wide screen only: a phone's column is a fold-out list */
@media (min-width:961px){
  .side{overflow:hidden}
  .sidebody{flex:1;min-height:0}
  .convsec{flex:1;min-height:0}
  .convsec .navlist{flex:1;min-height:0;overflow-y:auto;padding-bottom:24px;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent)}
  .libsec,.appsec{flex:0 0 auto}
}
@media (max-width:960px){
  body{height:auto;min-height:100dvh;overflow:visible}
  .shell,.shell:not([data-view="thread"]){display:flex;flex-direction:column;flex:1 0 auto}
  .side{border-right:0;border-bottom:1px solid var(--n-line);padding:12px 16px;overflow:visible}
  .menu{display:inline-flex}
  .sidebody{display:none}
  .side.open .sidebody{display:flex}
  .view,.convo{overflow:visible}
  .messages{overflow:visible;padding:18px 16px 8px}
  .composer{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--n-ground) 28%);padding:10px 12px 12px}
  .panel{border-left:0;border-top:1px solid var(--n-line)}
  .pbody{overflow:visible}
  .bubble{max-width:90%}.answer{max-width:100%}
  .skrow{grid-template-columns:1fr auto;gap:4px 12px}
  .skrow .ds{grid-column:1/-1;grid-row:2}
  .skrow .own{grid-column:1;grid-row:3}
  .skrow .btn{grid-column:2;grid-row:1}
  .kv{grid-template-columns:1fr;gap:2px}
  .threadhead{padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){.vpanel,.chev,.agent,.app-new,.shell{transition:none}.typing i{animation:none}}

/* ── models (worksite 0050): the agent's model on its card, a trial, the composer's model chip and its menu ── */
.agent .foot .mpick{flex:1 1 auto;min-width:0;max-width:max-content}
.agent .foot .btn{flex:0 0 auto}
.mpick{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--n-line);background:var(--n-surface);color:var(--n-ink);font:500 .8rem var(--n-body);cursor:pointer;white-space:nowrap}
.mpick .mname{overflow:hidden;text-overflow:ellipsis;min-width:0}
.mpick .mchev{flex:0 0 auto;font-size:.7rem;color:var(--n-muted)}
.mpick .mbadge{flex:0 0 auto;font-size:.68rem;font-weight:600;color:var(--n-gold-ink)}
.mpick:hover,.mpick:focus-visible{border-color:var(--n-primary)}
.mpick.trial{border-color:color-mix(in srgb,var(--n-accent) 55%,var(--n-line));background:var(--n-gold-soft)}
.mpick.static{cursor:default;border-color:transparent;padding:0;background:none;color:var(--n-muted)}
.msub{font-size:.72rem;color:var(--n-muted)}
.who .wmodel{font-family:var(--v-mono);color:var(--n-muted)}
.modelchip{cursor:pointer;font-family:var(--v-mono)}
.modelchip:hover{border-color:var(--n-primary)}
.mmenu{position:fixed;z-index:60;width:min(380px,calc(100vw - 16px));max-height:min(70vh,520px);overflow:auto;background:var(--n-surface);border:1px solid var(--n-line);border-radius:14px;box-shadow:0 18px 48px rgba(0,0,0,.28);padding:10px;display:flex;flex-direction:column;gap:8px}
.mmenu .mhead{margin:2px 6px;font:600 .82rem var(--n-body);color:var(--n-ink)}
.mmenu .mlist{display:flex;flex-direction:column;gap:4px}
.mmrow{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:9px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--n-ink);font:400 .85rem var(--n-body);cursor:pointer}
.mmrow:hover,.mmrow:focus-visible{border-color:var(--n-primary);background:var(--n-soft)}
.mmrow.on{border-color:var(--n-soft-line);background:var(--n-soft)}
.mmrow.off{opacity:.55;cursor:not-allowed}
.mmrow .mp{font-size:.74rem;color:var(--n-muted)}
.mmenu .mprop{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--n-hair);padding-top:8px}
.mmenu textarea{width:100%;box-sizing:border-box;border:1px solid var(--n-line);border-radius:10px;padding:8px;background:var(--n-sunk);color:var(--n-ink);font:400 .85rem var(--n-body)}
.mmenu .mprop .btn{align-self:flex-end}
.mmenu .mfoot{margin:2px 6px 0;font-size:.72rem;color:var(--n-muted)}
/* ── costs (worksite 0050) ── */
#cperiod{margin:18px 0 6px}
.costs{display:flex;flex-direction:column;gap:6px;max-width:1080px}
.costs[aria-busy="true"]{opacity:.6}
.ckpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:10px 0 8px}
.ckpis .kpi{background:var(--n-surface);border-color:var(--n-line)}
.ckpis .kpi::before{background:var(--n-primary)}
.ckpis .kl{margin:0;font-size:.76rem;color:var(--n-muted)}
.ckpis .kn{color:var(--n-ink)}
.ckpis .ks{margin:0;font-size:.74rem;color:var(--n-muted)}
.csh{margin:18px 0 6px;font:600 .95rem/1.2 var(--n-display);color:var(--n-ink)}
.cbars{display:flex;align-items:flex-end;gap:6px;height:120px;padding:10px 12px 6px;border:1px solid var(--n-line);border-radius:12px;background:var(--n-surface)}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;min-width:0}
.cbar i{display:block;width:100%;max-width:28px;border-radius:5px 5px 2px 2px;background:var(--n-primary)}
.cbar span{font-size:.68rem;color:var(--n-muted);font-family:var(--v-mono)}
.ctab{width:100%;border-collapse:collapse;background:var(--n-surface);border:1px solid var(--n-line);border-radius:12px;overflow:hidden;font-size:.84rem}
.ctab th{text-align:left;font-weight:500;color:var(--n-muted);font-size:.74rem;padding:8px 12px;border-bottom:1px solid var(--n-line)}
.ctab td{padding:8px 12px;border-bottom:1px solid var(--n-hair);color:var(--n-ink)}
.ctab tr:last-child td{border-bottom:0}
.ctab .num{text-align:right;font-family:var(--v-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctab th:not(:first-child){text-align:right}
.billed .bt{margin:2px 0 8px;font:500 1.4rem var(--v-mono);color:var(--n-ink)}
.cnote{margin:10px 0 0;font-size:.76rem;line-height:1.5;color:var(--n-muted);max-width:820px}
@media (max-width:960px){.ckpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ctab{font-size:.78rem}.ctab td,.ctab th{padding:7px 8px}}

/* ── worksite 0051: the context (local or hosted), where a model computes, and the apps' topologies ── */
.vctx{display:inline-flex;align-items:center;gap:.55rem;padding:.38rem .9rem;border-radius:999px;font:700 .78rem/1 var(--v-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.vctx::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:vctxpulse 2s infinite}
.vctx.local{background:#E0B458;color:#0A1120;box-shadow:0 0 0 2px rgba(224,180,88,.35)}
.vctx.local::before{background:#0A1120}
.vctx.remote{background:transparent;color:#86D8C6;border:1.5px solid #86D8C6}
.vtop.local{box-shadow:inset 0 4px 0 #E0B458}
@keyframes vctxpulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
.mpick .mloc{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
.mloc.external{background:var(--n-primary)}
.mloc.local{background:var(--n-accent)}
.mmenu .mgroup{display:flex;align-items:center;gap:8px;margin:6px 6px 2px;font:600 .7rem var(--v-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--n-muted)}
.mtagloc{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font:700 .62rem var(--v-mono);letter-spacing:.08em;vertical-align:middle}
.mtagloc.external{background:var(--n-soft);color:var(--n-primary-ink)}
.mtagloc.local{background:var(--n-gold-soft);color:var(--n-gold-ink)}
.mmrow.placeholder{opacity:.6;border-style:dashed;border-color:var(--n-line);cursor:not-allowed}
.topos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1000px;margin:6px 0 4px}
.topo{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--n-line);border-radius:14px;background:var(--n-surface)}
.topo p{margin:0;font-size:.85rem;line-height:1.5;color:var(--n-muted)}
.topo p b{color:var(--n-ink);font-weight:600}
.tbadge{align-self:flex-start;padding:3px 9px;border-radius:999px;font:700 .68rem var(--v-mono);letter-spacing:.1em;text-transform:uppercase}
.tbadge.cloud{background:var(--n-soft);color:var(--n-primary-ink)}
.tbadge.local{background:var(--n-gold-soft);color:var(--n-gold-ink)}
.tbadge.hybrid{background:color-mix(in srgb,var(--n-ok) 14%,var(--n-surface));color:color-mix(in srgb,var(--n-ok) 75%,var(--n-ink))}
.app{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem;border:1px solid var(--n-line);border-radius:18px;background:var(--n-surface)}
.app.away{opacity:.62}
.app .ahead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.app h3{margin:0;font:600 1rem/1.3 var(--n-display);color:var(--n-ink)}
.app p{margin:0;font-size:.85rem;color:var(--n-muted);line-height:1.5}
.app .afoot{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;font-size:.75rem;color:var(--n-muted)}
@media (max-width:960px){.topos{grid-template-columns:1fr}.vctx{font-size:.7rem;letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.vctx::before{animation:none}}

/* connectors (worksite 0054): one card per MCP server, its status, its capability groups by risk */
.conn .cname{font:600 .72rem var(--v-mono);color:var(--n-muted);letter-spacing:.04em}
.cstat{padding:3px 9px;border-radius:999px;font:700 .68rem var(--v-mono);letter-spacing:.08em;text-transform:uppercase}
.cstat.ok{background:color-mix(in srgb,var(--n-ok) 14%,var(--n-surface));color:color-mix(in srgb,var(--n-ok) 75%,var(--n-ink))}
.cstat.off{background:color-mix(in srgb,var(--n-fail) 14%,var(--n-surface));color:color-mix(in srgb,var(--n-fail) 80%,var(--n-ink))}
.cstat.unk{background:var(--n-gold-soft);color:var(--n-gold-ink)}
.conn.off{border-color:color-mix(in srgb,var(--n-fail) 40%,var(--n-line))}
.ccaps{display:flex;flex-wrap:wrap;gap:6px}
.rk{padding:2px 8px;border-radius:8px;font:500 .72rem var(--v-mono);border:1px solid var(--n-line);color:var(--n-muted)}
.rk.read{background:var(--n-soft)}
.rk.write{background:var(--n-gold-soft)}
.rk.outbound,.rk.destructive{background:color-mix(in srgb,var(--n-fail) 12%,var(--n-surface))}
.ccmd{display:block;padding:8px 10px;border-radius:10px;background:var(--n-soft);font:500 .72rem/1.5 var(--v-mono);color:var(--n-ink);overflow-wrap:anywhere;user-select:all}
/* a parked call in words (worksite 0054) */
.appr .vtitle{margin:0 0 6px;font-weight:600;color:var(--n-ink)}
.appr .vtable{width:100%;border-collapse:collapse;font-size:.86rem}
.appr .vtable th{font:400 .68rem/1.4 var(--v-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--n-muted);text-align:left;vertical-align:top;padding:5px 12px 5px 0;width:38%;overflow-wrap:anywhere}
.appr .vtable td{padding:4px 0;overflow-wrap:anywhere;white-space:pre-wrap}
.appr .vtable tr+tr>*{border-top:1px solid var(--n-hair)}
.appr .rawargs{margin-top:6px;font-size:.78rem;color:var(--n-muted)}
.appr .rawargs summary{cursor:pointer}
.appr .reslink{font-weight:600}
.chip.fail{background:color-mix(in srgb,var(--n-fail) 14%,var(--n-surface));color:color-mix(in srgb,var(--n-fail) 80%,var(--n-ink))}
.appr.failed{border-color:color-mix(in srgb,var(--n-fail) 40%,var(--n-line))}
/* a conversation whose turn runs on this workstation without the page (worksite 0055) */
.navitem small.live{color:var(--n-gold-ink);font-weight:600}
.navitem small.live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--n-accent);vertical-align:middle;animation:vpulse 1.6s ease-in-out infinite}
@keyframes vpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.navitem small.live::before{animation:none}}

/* worksite 0060: a batch card's lines, the organization's documents */
.appr .rwrap{overflow-x:auto;margin:6px 0}
.appr .rtable{border-collapse:collapse;font-size:.8rem;min-width:100%}
.appr .rtable th{font:400 .64rem/1.3 var(--v-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted);text-align:left;padding:4px 8px 4px 0;white-space:nowrap}
.appr .rtable td{padding:4px 8px 4px 0;vertical-align:top;border-top:1px solid var(--n-line,rgba(127,127,127,.2));max-width:16rem;overflow-wrap:anywhere}
.appr .rtable tr.unsure td{background:rgba(212,160,23,.12)}
.appr .rhint{font-size:.78rem;color:var(--n-muted);margin:4px 0 8px}
.appr .ritems{margin:6px 0 0;padding-left:18px;font-size:.82rem}
.appr .ritems li.bad{color:var(--n-bad,#b3261e)}
.appr .ritems li.skip{color:var(--n-muted)}
.docedit{width:100%;min-height:22rem;resize:vertical;font:400 .85rem/1.55 var(--v-mono);padding:10px 12px;border-radius:10px;border:1px solid var(--n-line,rgba(127,127,127,.3));background:var(--n-surface);color:inherit}
.docedit:focus,.docform .memedit:focus{outline:2px solid var(--n-primary);outline-offset:1px}
/* a document read in the library (Émile, 4 Nov.: « l'affichage des fichiers moindrement riches en MD sort un peu mal »):
   inside the card's own margins, a reading measure, its tables framed and scrolling on their own */
.docbody{font-size:.95rem;line-height:1.6;padding:6px 18px 18px;overflow-wrap:anywhere}
#doc-open .docbody{padding:14px 24px 24px}
#doc-open .docbody>:not(.tablewrap):not(.prewrap):not(.docform){max-width:72ch}
.docbody.md h1{font-size:1.35em;margin-top:1.2rem}.docbody.md h2{font-size:1.18em;margin-top:1.2rem;padding-bottom:.25rem;border-bottom:1px solid var(--n-line)}
.docbody.md>:first-child{margin-top:0}
.docbody .tablewrap{border:1px solid var(--n-line);border-radius:10px;margin:.6rem 0 1rem}
.docbody table{border-collapse:collapse;width:100%;font-size:.88em}
.docbody th,.docbody td{border:0;border-bottom:1px solid var(--n-line);padding:.45rem .75rem;text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal;min-width:6ch}
.docbody tr:last-child td{border-bottom:0}
.docbody th{background:var(--n-ground);white-space:nowrap}
.docform{display:flex;flex-direction:column;gap:14px;padding:16px 24px 22px}
.docfield{display:flex;flex-direction:column;gap:6px}
.docfield>label,.docfield>.lab{font:400 .7rem/1.4 var(--v-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted)}
.docfield>small{color:var(--n-muted);font-size:.78rem}
.prow .docbody{padding:0;max-height:22rem;overflow:auto}
.prow .docform,.docbody>.docform{padding:0}

/* ── Memory in two tabs (worksite 0061: « Dans « Mémoire », en onglets ») ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--n-line);margin-top:4px}
.tab{min-height:40px;padding:0 14px;border:0;border-bottom:2px solid transparent;background:none;font:500 .88rem var(--n-body);color:var(--n-muted);display:inline-flex;align-items:center;gap:8px;margin-bottom:-1px}
.tab:hover{color:var(--n-ink)}
.tab[aria-selected="true"]{color:var(--n-ink);border-bottom-color:var(--n-primary)}
.tab .meta{font:400 .72rem var(--v-mono);color:var(--n-muted)}
.tab[hidden]{display:none}

/* ── an AI application's own screen (worksite 0066): its `ui://` document in a sandboxed frame ── */
.app .open{margin-top:6px;align-self:flex-start}
.linkbtn{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.appuri{display:inline-block;align-self:flex-start;width:max-content;margin-top:6px;padding:2px 10px;border:1px solid var(--n-line);border-radius:999px;background:var(--n-surface)}
.appuri:empty{display:none}
.appframe{border:1px solid var(--n-line);border-radius:10px;background:var(--n-surface);overflow:hidden}
.appframe iframe{display:block;width:100%;height:720px;border:0;background:transparent}

/* ── on a phone (Émile, 4 Nov.: « quelques glitchs en mobile pour le harnais ») ── */
/* the notch and the browser's own bars: the dark frame reaches under them, nothing of the page hides behind them */
html{background:var(--v-void)}
.vtop{padding-top:max(.75rem,env(safe-area-inset-top));padding-left:max(clamp(16px,3vw,32px),env(safe-area-inset-left));padding-right:max(clamp(16px,3vw,32px),env(safe-area-inset-right))}
.vfoot{padding-bottom:max(.45rem,env(safe-area-inset-bottom))}
/* while the page connects: a line that says so, not a blank page */
.bootmsg{display:none}
.booting .bootmsg{display:flex;align-items:center;justify-content:center;gap:.6rem;position:fixed;left:0;right:0;top:45%;font:400 .9rem var(--v-mono);color:var(--n-muted)}
.bootdot{width:8px;height:8px;border-radius:50%;background:var(--n-primary);animation:bootpulse 1.2s ease-in-out infinite}
@keyframes bootpulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.bootdot{animation:none}}
@media (max-width:960px){
  .composer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  /* the frame in two short lines: the brand and the status, then who and the buttons — no button breaks in two */
  .vbar{gap:.5rem .8rem}
  .vstat{flex:1 1 8rem;font-size:.74rem}
  .vact{flex:1 1 100%;min-width:0}
  .vwho{flex:1 1 auto;min-width:0;max-width:none;font-size:.74rem}
  .vtop button.vbtn{padding:0 .65rem;font-size:.74rem}
  .vctx{flex:1 1 100%}
}

/* ── the conversations, one line each; their details behind « ⋯ » (Émile, 4 Nov.) ── */
.thrrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:10px}
.thrrow:hover{background:var(--n-ground)}
.thrrow:has(.navitem.thr[aria-current="page"]){background:var(--n-soft);color:var(--n-primary-ink)}
.navitem.thr[aria-current="page"]{background:none}
.navitem.thr{min-height:34px;gap:.45rem;background:none}
.navitem.thr:hover{background:none}
.thrtitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thrlive{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--n-accent);animation:vpulse 1.6s ease-in-out infinite}
.thrmore{width:30px;height:30px;margin-right:2px;border:0;border-radius:8px;background:none;color:var(--n-muted);font:600 1rem/1 var(--n-body);cursor:pointer;opacity:0}
.thrrow:hover .thrmore,.thrrow.open .thrmore,.thrmore:focus-visible,.navitem.thr[aria-current="page"]+.thrmore{opacity:1}
.thrmore:hover{background:var(--n-surface);color:var(--n-ink)}
@media (hover:none){.thrmore{opacity:1}}
.thrdetails{grid-column:1/-1;padding:0 .6rem .45rem;font:400 .74rem/1.4 var(--n-body);color:var(--n-muted)}
@media (prefers-reduced-motion:reduce){.thrlive{animation:none}}

/* ── one block per turn, copy buttons, the agents' faces (Émile, 4 Nov.) ── */
.turnbox{position:relative;display:flex;flex-direction:column;gap:.7rem;padding-bottom:1.6rem}
.turnbox .steps{max-width:none;padding:.15rem 0 .15rem .7rem;border:0;border-left:2px solid var(--n-line);border-radius:0;background:none}
.turnbox .callnote{margin:0}
.turnbox>.copyacts{position:absolute;right:8px;bottom:6px;display:flex;gap:2px}
/* links between a client of the « Harnais » connector and the page (worksite 0071) */
.thrvia{flex:none;margin-left:6px;padding:0 6px;border-radius:999px;font:500 .66rem/1.5 var(--n-body);color:var(--n-muted);border:1px solid var(--n-hair)}
.lane small.via{display:block;font:500 .7rem/1.4 var(--n-body);color:var(--n-muted);margin-bottom:2px;text-align:right}
[data-turn].flash{animation:vhflash 2.4s ease-out}
@keyframes vhflash{0%{background:color-mix(in srgb,var(--n-ok) 18%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){[data-turn].flash{animation:none;outline:2px solid var(--n-ok)}}
.conn.harnais .ccmd{flex:1;min-width:0;overflow-wrap:anywhere}
.copybtn{display:inline-grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--n-muted);cursor:pointer;opacity:.55}
.copybtn:hover,.copybtn:focus-visible{opacity:1;background:var(--n-ground);color:var(--n-ink)}
.copybtn.done{opacity:1;color:var(--n-ok)}
.prewrap{position:relative}
.prewrap>.copybtn{position:absolute;top:6px;right:6px;background:var(--n-surface);opacity:0}
.prewrap:hover>.copybtn,.prewrap>.copybtn:focus-visible,.prewrap>.copybtn.done{opacity:1}
@media (hover:none){.prewrap>.copybtn{opacity:.8}}
.av{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--n-display)}
.av.emo{font-size:1.25rem;background:var(--n-surface);border:1px solid var(--n-box-line)}
.av.sm.emo{font-size:1rem}
.wface{font-size:.95rem;line-height:1}

/* ── the documents' rich-text editor (worksite 0070, Milkdown Crepe in ui/md-editor.*): the page's own colours and
   type, a toolbar that wraps on a phone ── */
.docfieldhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.docfieldhead>.lab{font:400 .7rem/1.4 var(--v-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-muted)}
.segmented{display:inline-flex;border:1px solid var(--n-line);border-radius:999px;padding:2px;background:var(--n-ground)}
.segmented .seg{border:0;background:none;color:var(--n-muted);font:500 .78rem var(--n-body);padding:4px 12px;border-radius:999px;cursor:pointer}
.segmented .seg[aria-pressed=true]{background:var(--n-surface);color:var(--n-ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mdrich{border:1px solid var(--n-line);border-radius:10px;background:var(--n-surface);min-height:22rem;overflow:hidden}
.mdrich:focus-within{outline:2px solid var(--n-primary);outline-offset:1px}
.mdrich .milkdown{
  --crepe-color-background:var(--n-surface);--crepe-color-on-background:var(--n-ink);
  --crepe-color-surface:var(--n-ground);--crepe-color-surface-low:var(--n-sunk,var(--n-ground));
  --crepe-color-on-surface:var(--n-ink);--crepe-color-on-surface-variant:var(--n-muted);
  --crepe-color-outline:var(--n-line);--crepe-color-primary:var(--n-primary-ink);
  --crepe-color-secondary:var(--n-soft);--crepe-color-on-secondary:var(--n-ink);
  --crepe-color-inverse:var(--n-ink);--crepe-color-on-inverse:var(--n-surface);
  --crepe-color-inline-code:var(--n-accent);--crepe-color-error:var(--n-fail);
  --crepe-color-hover:var(--n-soft);--crepe-color-selected:var(--n-soft-line);--crepe-color-inline-area:var(--n-ground);
  --crepe-base-font-size:15px;--crepe-font-title:var(--n-display);--crepe-font-default:var(--n-body);--crepe-font-code:var(--v-mono);
  --crepe-shadow-1:0 1px 3px rgba(0,0,0,.18);--crepe-shadow-2:0 4px 14px rgba(0,0,0,.22);
  background:var(--crepe-color-background);color:var(--crepe-color-on-background)
}
.mdrich .milkdown .ProseMirror{padding:18px 24px 40px;min-height:18rem}
.mdrich .milkdown .milkdown-top-bar{flex-wrap:wrap;background:var(--n-head);border-bottom:1px solid var(--n-head-line);position:sticky;top:0;z-index:2}
.mdrich .milkdown .milkdown-top-bar .top-bar-item svg{color:var(--n-icon-idle);fill:var(--n-icon-idle)}
.mdrich .milkdown .milkdown-top-bar .top-bar-item.active{background:color-mix(in srgb,var(--n-primary) 12%,transparent)}
.mdrich .milkdown .milkdown-top-bar .top-bar-item.active svg{color:var(--n-primary-ink);fill:var(--n-primary-ink)}
.mdrich .milkdown .milkdown-top-bar .top-bar-divider{background:var(--n-head-line)}
.mdrich .milkdown .milkdown-top-bar .top-bar-chevron svg{color:var(--n-icon-idle);stroke:var(--n-icon-idle)}
@media (max-width:640px){.mdrich .milkdown .ProseMirror{padding:14px 14px 32px}}
.mdrich .milkdown table{table-layout:auto;width:100%}
.mdrich .milkdown td,.mdrich .milkdown th{overflow-wrap:normal;word-break:normal;min-width:6ch}

/* ── Punch (Émile, 4 Nov.: « un peu plus de punch/contrastes aux boîtes — surtout les en-têtes […] un léger contraste
   plutôt que du blanc », then « applique ça sur toutes les pages »; the proposal's « Moyenne »): a box's head is a
   band tinted from the Node's own ground, its body stays the surface, its border one step darker, a soft shadow
   under it. Derived from the theme's tokens, so a dark Node gets the same structure in its own colours. ── */
:root{
  --n-head:color-mix(in srgb,var(--n-primary) 4%,color-mix(in srgb,var(--n-ground) 80%,var(--n-line)));
  --n-head-line:color-mix(in srgb,var(--n-line) 92%,var(--n-ink));
  --n-box-line:color-mix(in srgb,var(--n-line) 96%,var(--n-ink));
  --n-icon-idle:color-mix(in srgb,var(--n-muted) 85%,var(--n-surface));
  --n-shadow:0 1px 2px rgba(10,17,32,.05),0 4px 14px rgba(10,17,32,.05);
}
.lib,.mcard,.agent,.app,.apps-doc,.topo{border-color:var(--n-box-line);box-shadow:var(--n-shadow)}
.filecard,.usedlist,.box,.picker,.memedit,.docedit,.mdrich,.segmented{border-color:var(--n-box-line)}
.libhead{background:var(--n-head);border-bottom-color:var(--n-head-line)}
.mcard,.agent{overflow:hidden}
.mcard>h3:first-child{margin:-18px -18px 0;padding:14px 18px;background:var(--n-head);border-bottom:1px solid var(--n-head-line)}
.agent>.row:first-child{margin:-18px -18px 0;padding:14px 18px;background:var(--n-head);border-bottom:1px solid var(--n-head-line)}
.app .ahead{margin:-1.1rem -1.2rem 0;padding:.8rem 1.2rem;background:var(--n-head);border-bottom:1px solid var(--n-head-line);border-radius:18px 18px 0 0}
.md th,.docbody th{background:var(--n-head);color:color-mix(in srgb,var(--n-muted) 80%,var(--n-ink))}
.docbody .tablewrap{border-color:var(--n-box-line)}
.mrow:hover{background:color-mix(in srgb,var(--n-primary) 3%,var(--n-surface))}

/* the editor on the whole window (« ça ne s'affiche pas en plein écran »): the text field lifts over the page */
.fullbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--n-box-line);background:var(--n-surface);color:var(--n-ink);border-radius:8px;padding:5px 10px;font:500 .78rem var(--n-body);cursor:pointer}
.fullbtn:hover{background:var(--n-head)}
.fullbtn svg{width:14px;height:14px}
.docfield.full{position:fixed;inset:12px;z-index:70;background:var(--n-surface);border:1px solid var(--n-box-line);border-radius:16px;padding:12px 14px 14px;box-shadow:0 20px 60px rgba(10,17,32,.28);gap:10px}
.docfield.full>.mdrich,.docfield.full>.docedit{flex:1;min-height:0;overflow:auto}
.docfield.full .mdrich .milkdown .ProseMirror{padding:28px max(28px,calc((100% - 860px)/2)) 60px}
.fullveil{position:fixed;inset:0;z-index:69;background:rgba(10,17,32,.38)}
.keeprow{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--n-hair)}

/* ── the conversation's menu (Émile, 4 Nov.: « les contrôles avec le "..." sont vraiment illisibles ») ── */
.thrmore{opacity:.75;border:1px solid transparent;color:var(--n-ink)}
.thrrow:hover .thrmore,.thrmore[aria-expanded="true"],.navitem.thr[aria-current="page"]+.thrmore{border-color:var(--n-box-line);background:var(--n-surface)}
.thrmore.hdr{opacity:1;width:32px;height:30px;margin-right:6px;border-color:var(--n-box-line);background:var(--n-surface);border-radius:8px}
.thrmenu{position:absolute;z-index:60;width:min(280px,calc(100vw - 16px));padding:6px;border:1px solid var(--n-box-line);border-radius:12px;
  background:var(--n-surface);box-shadow:0 10px 30px rgba(10,17,32,.18)}
.thrmenu .info{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--n-hair);
  font:400 .82rem/1.45 var(--n-body);color:var(--n-muted)}
.thrmenu .info b{font:600 .88rem/1.35 var(--n-body);color:var(--n-ink)}
.thrmenu .menuitem{display:flex;align-items:center;gap:.5rem;width:100%;padding:.55rem .65rem;border:0;border-radius:8px;background:none;
  font:500 .9rem/1.2 var(--n-body);color:var(--n-ink);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thrmenu .menuitem:hover,.thrmenu .menuitem:focus-visible{background:var(--n-ground)}
.thrmenu .menuitem.done{color:var(--n-ok)}
.thrmenu .mid{margin-left:auto;font:400 .74rem var(--v-mono);color:var(--n-muted)}
.thrmenu .note{margin:.3rem .65rem .4rem;font-size:.78rem;color:var(--n-muted)}
/* ── the harness as a server, apart from what the team uses (Émile, 4 Nov.) ── */
#conns-hx{margin-bottom:1.6rem}
.hxeyebrow{margin:0 0 .7rem;font:700 .7rem var(--v-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-muted)}
.hx{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid #1e2c42;border-radius:20px;overflow:hidden;
  box-shadow:0 2px 4px rgba(15,26,43,.08),0 10px 30px rgba(15,26,43,.10)}
.hx.solo{grid-template-columns:1fr}
.hxl{padding:1.5rem 1.7rem;background:#0f1a2b;color:#e9edf3}
.hxl h2{margin:.8rem 0 .35rem;font:600 1.3rem/1.25 var(--n-display);color:#fff}
.hxl p{margin:0 0 1rem;font-size:.86rem;line-height:1.5;color:#b8c3cf}
.hxbadge{display:inline-flex;padding:4px 10px;border-radius:999px;font:700 .68rem var(--v-mono);letter-spacing:.1em;text-transform:uppercase;
  color:#86d8c6;background:rgba(134,216,198,.12);border:1px solid rgba(134,216,198,.35)}
.hxaddr{display:flex;align-items:center;gap:10px;margin-bottom:1.1rem;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.hxaddr code{flex:1;min-width:0;font:600 .86rem var(--v-mono);color:#fff;overflow-wrap:anywhere}
.hxcopy{flex:none;padding:7px 12px;border:0;border-radius:9px;background:#86d8c6;color:#0a1120;font:600 .8rem var(--n-body);cursor:pointer}
.hxcopy.done{background:#d7f3ea}
.hxsteps{margin:0;padding:0;list-style:none;display:grid;gap:.5rem;counter-reset:s}
.hxsteps li{counter-increment:s;display:flex;gap:10px;font-size:.84rem;line-height:1.45;color:#d6dde6}
.hxsteps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);font:700 .74rem var(--v-mono);color:#86d8c6}
.hxl .hxseen{margin:1.6rem 0 0;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.12);font:.74rem var(--v-mono);color:#8fa0b3}
.hxr{padding:1.4rem 1.6rem;background:var(--n-surface)}
.hxr h3{margin:0 0 .3rem;font:600 1rem/1.3 var(--n-display);color:var(--n-ink)}
.hxr .sub.when{margin-top:-.4rem;font-size:.8rem;font-style:italic}
.hxr .sub{margin:0 0 .9rem;font-size:.84rem;line-height:1.5;color:var(--n-muted)}
.hxrow{display:flex;align-items:center;gap:12px;padding:.6rem 0;border-top:1px solid var(--n-hair)}
.hxrow .n{flex:1;min-width:0}
.hxrow .n b{display:block;font:600 .88rem var(--n-body);color:var(--n-ink)}
.hxrow .n span{font:.74rem var(--v-mono);color:var(--n-muted)}
.hxrow .state{font:600 .7rem var(--v-mono);letter-spacing:.04em;text-align:right}
.hxrow .state.on{color:var(--n-ok)} .hxrow .state.off{color:var(--n-muted)}
.hxsw{position:relative;flex:none;width:42px;height:24px;border:0;border-radius:999px;background:color-mix(in srgb,var(--n-muted) 45%,var(--n-surface));cursor:pointer}
.hxsw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.hxsw.on{background:var(--n-ok)} .hxsw.on::after{left:21px}
.hxsw:focus-visible{outline:2px solid var(--n-primary);outline-offset:2px}
.hxr .note{margin-top:.8rem;padding:.6rem .75rem;border-radius:10px;background:var(--n-gold-soft);color:var(--n-gold-ink);font-size:.78rem;line-height:1.45}
.keptpill{align-self:flex-start;padding:2px 8px;border-radius:999px;font:600 .7rem var(--v-mono);color:var(--n-ok);background:var(--n-ok-soft)}
@media (max-width:860px){.hx{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.hxsw::after{transition:none}}

/* « Équipe » (worksite 0073): the Node's people, their role, an invitation, the departures */
/* Émile, 5 Nov.: « le UI est un peu trop compact » — the three boxes stood glued, a person's name sat centred */
#team-body{display:flex;flex-direction:column;gap:20px}
.teamform{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:18px 22px}
.teamform .tf-mail{flex:1 1 260px}
.teamform input,.teamform select,.trow select{width:100%;font:inherit;font-size:.86rem;padding:8px 10px;border:1px solid var(--n-line);border-radius:10px;background:var(--n-surface);color:var(--n-ink)}
.teamform select{min-width:170px}
.trow select{min-width:9rem;width:auto}
.teamlink{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--n-hair);font-size:.84rem;color:var(--n-muted)}
.teamlink code{font:400 .76rem var(--v-mono);overflow-wrap:anywhere;color:var(--n-ink)}
.trow{display:grid;grid-template-columns:minmax(0,1fr) 190px auto;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--n-hair)}
.trow:last-child{border-bottom:0}
.trow .who{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;text-align:left}   /* not the author line's centring (.who) */
.trow .who b{font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.trow .who span{font-size:.8rem;color:var(--n-muted);overflow-wrap:anywhere}
.trow .acts{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:720px){.trow{grid-template-columns:minmax(0,1fr)}.trow .acts{justify-content:flex-start}}