/* portal-next styles, lifted from the approved v5 mockup (design/mockups/portal-v5/index.html) in the same order;
   additions for the real app sit at the end under "portal-next additions". Tokens live in tokens.css. */
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"cv11"}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.num,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.logo{width:24px;height:24px;flex:none;display:block}
.spark{width:14px;height:14px;flex:none;display:block}

/* shell */
/* the side column is painted on the shell too, so it reaches the bottom of a page taller than the screen (the sticky panel
   itself is one screen tall); off on a phone, where the panel is a drawer */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;background:linear-gradient(to right,var(--surface) calc(var(--side) - 1px),var(--line) 0 var(--side),transparent 0)}
body.collapsed{--side:68px}
.side{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow:hidden;z-index:40}
.side-top{display:flex;align-items:center;gap:8px;padding:16px 12px 10px 18px}
.wm{display:flex;align-items:center;gap:9px;font:500 18px/1 var(--wordmark);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;text-decoration:none}
.wm:hover{text-decoration:none}
.iconbtn{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;border-radius:8px;color:var(--ink-3);cursor:pointer;flex:none;position:relative}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.iconbtn[aria-current="page"],.iconbtn.on{background:var(--brand-wash);color:var(--brand)}
.side-top .iconbtn{margin-left:auto}
.quick{display:flex;gap:4px;padding:2px 12px 10px 14px}
.quick .iconbtn{width:40px;height:34px;border-radius:17px}
.scope-btn{margin:0 12px 8px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer;text-align:left;min-width:0}
.scope-btn:hover{border-color:var(--btn-bd);background:var(--panel)}
.scope-btn .sc-t{min-width:0;flex:1;line-height:1.25}
.scope-btn .sc-n{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope-btn .sc-k{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope-btn .sc-ic{width:28px;height:28px;border-radius:6px;background:var(--panel);display:grid;place-items:center;color:var(--ink-3);flex:none}
.nav{flex:1;overflow-y:auto;padding:4px 12px 12px}
.nav .sec{font-size:13px;color:var(--ink-3);padding:14px 10px 6px;white-space:nowrap}
.nav a{display:flex;align-items:center;gap:12px;height:38px;padding:0 10px;border-radius:8px;color:var(--ink-2);font-size:15px;text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--hover);color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{background:var(--brand-wash);color:var(--brand);font-weight:500}
.nav a .cnt{margin-left:auto}
.cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;font-weight:600;display:inline-grid;place-items:center;background:var(--line-2);color:var(--ink-2)}
.cnt.err{background:var(--err-bg);color:var(--err)}
.side-foot{display:flex;align-items:center;gap:10px;padding:12px 12px 14px 16px;border-top:1px solid var(--line)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--av-bg);color:var(--av-ink);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.side-foot .mef{min-width:0;flex:1;line-height:1.3}
.side-foot .mef b{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .mef span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:11px;color:var(--ink-3);letter-spacing:.05em;text-transform:uppercase;white-space:normal;overflow:hidden;overflow-wrap:anywhere}
body.collapsed .wm span,body.collapsed .nav .sec,body.collapsed .nav a .lbl,body.collapsed .nav a .cnt,body.collapsed .scope-btn .sc-t,body.collapsed .scope-btn>svg,body.collapsed .side-foot .mef,body.collapsed .quick .iconbtn:not(:first-child){display:none}
body.collapsed .side-top{flex-direction:column;padding:16px 0 8px;align-items:center}
body.collapsed .side-top .iconbtn{margin:0}
body.collapsed .quick{justify-content:center;padding:0 0 8px}
body.collapsed .scope-btn{margin:0 auto 8px;padding:4px;border:0}
body.collapsed .nav a{justify-content:center;padding:0}
body.collapsed .side-foot{flex-direction:column;padding:12px 0}
.mbar{display:none}
.scrim{display:none}

.main{min-width:0;position:relative}
.wash{position:absolute;left:0;right:0;top:0;height:420px;background:linear-gradient(135deg,var(--wash1) 0%,var(--wash2) 38%,var(--bg) 78%);pointer-events:none}
.page{position:relative;max-width:1400px;margin:0 auto;padding:28px 36px 96px;display:flex;flex-direction:column;gap:20px}

/* page header */
.ph{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.ph h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.ph .desc{margin:4px 0 0;color:var(--ink-3)}
.ph .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-top:-6px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;padding:10px 0 11px;cursor:pointer;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500;display:flex;align-items:center;gap:6px}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{border-bottom-color:var(--brand);color:var(--brand)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:18px 20px 14px;flex-wrap:wrap}
.card-h h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.card-h .sub{color:var(--ink-3);font-size:13px}
.card-h .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-b{padding:0 20px 20px}
.sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sc{padding:20px;display:flex;flex-direction:column;gap:6px}
.sc h3{margin:0;font-size:14px;font-weight:600}
.sc .big{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.sc .big b{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.sc .sl{color:var(--ink-3);font-size:13px}
.delta{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.delta.good{background:var(--ok-bg);color:var(--ok)}
.delta.bad{background:var(--err-bg);color:var(--err)}
.delta.flat{background:var(--line-2);color:var(--ink-3)}
.askchip{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:5px 12px;text-align:left;line-height:1.35;border-radius:15px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);font-size:13px;cursor:pointer}
.askchip:hover{background:var(--brand-wash);color:var(--brand-d);border-color:var(--brand-wash2)}
.sc .spacer{height:8px}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--btn-bd);background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:500;transition:background .12s,border-color .12s}
.btn:hover{background:var(--hover);text-decoration:none}
.btn:disabled{color:var(--ink-3);cursor:not-allowed;background:var(--surface)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover{background:var(--primary-d);border-color:var(--primary-d)}
.btn.danger{background:#C9372C;border-color:#C9372C;color:#fff}
.btn.danger:hover{background:#9E1F16}
.btn.sm{height:30px;padding:0 12px;font-size:13px}
.btn.xs{height:26px;padding:0 10px;font-size:12px}
.btn .i{width:16px;height:16px}
.seg{display:inline-flex;border:1px solid var(--btn-bd);border-radius:8px;padding:2px;background:var(--surface)}
.seg button{border:0;background:transparent;height:28px;padding:0 12px;border-radius:6px;cursor:pointer;color:var(--ink-3);font-weight:500;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--brand-wash);color:var(--brand)}
.field{width:100%;height:36px;border:1px solid var(--btn-bd);border-radius:8px;padding:0 12px;background:var(--surface)}
.field:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,108,231,.18)}
textarea.field{height:auto;min-height:60px;padding:8px 12px;resize:vertical;line-height:1.45}
label.lbl{display:block;font-size:13px;color:var(--ink-3);margin-bottom:4px}

/* status and badges */
.st{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.st.ok{color:var(--ok)}.st.watch{color:var(--warn)}.st.fail{color:var(--err)}.st.idle,.st.none{color:var(--idle)}
.st.watch::before{border-radius:1px;transform:rotate(45deg);width:7px;height:7px;background:var(--warn-line)}
.st.fail::before{border-radius:1px}
.st.idle::before,.st.none::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:12px;font-weight:500;background:var(--line-2);color:var(--ink-2);white-space:nowrap;line-height:1}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.err{background:var(--err-bg);color:var(--err)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.brand{background:var(--brand-wash);color:var(--brand-d)}
.badge.out{background:var(--surface);border:1px solid var(--line);color:var(--ink-3)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-line);animation:pulse 2s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,165,89,.4)}70%{box-shadow:0 0 0 6px rgba(34,165,89,0)}100%{box-shadow:0 0 0 0 rgba(34,165,89,0)}}
.fpill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 12px;border-radius:14px;background:var(--brand-wash);color:var(--brand-d);font-size:13px;font-weight:500}
.fpill button{border:0;background:transparent;color:inherit;cursor:pointer;width:22px;height:22px;display:grid;place-items:center;border-radius:11px}
.fpill button:hover{background:var(--brand-wash2)}
.fpill .i{width:14px;height:14px}

/* home */
.hello{text-align:center;margin:28px 0 0}
.hello h2{margin:0;font-size:30px;font-weight:500;letter-spacing:-.02em}
.prompt{max-width:760px;width:100%;margin:22px auto 0;background:var(--surface);border:1px solid var(--btn-bd);border-radius:16px;box-shadow:inset 0 1px 2px rgba(27,39,51,.05),0 6px 20px rgba(26,108,231,.07);padding:14px 14px 10px}
.prompt:focus-within{border-color:var(--brand-bd);box-shadow:inset 0 1px 2px rgba(27,39,51,.05),0 0 0 4px rgba(26,108,231,.10)}
.prompt .row1{display:flex;gap:10px;align-items:flex-start}
.prompt .mk{width:28px;height:28px;border-radius:8px;background:var(--brand-wash);display:grid;place-items:center;flex:none;margin-top:2px}
.prompt textarea{flex:1;border:0;outline:none;resize:none;min-height:56px;font-size:16px;line-height:1.5;padding:4px 0;background:transparent}
.prompt textarea::placeholder{color:var(--ink-3)}
.prompt .row2{display:flex;align-items:center;gap:8px;margin-top:4px}
.prompt .row2 .purv{font-size:12px;color:var(--ink-3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roundbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--btn-bd);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:none}
.roundbtn:hover{background:var(--hover)}
.roundbtn.send{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.roundbtn.send:hover{background:var(--brand-d)}
.roundbtn .i{width:16px;height:16px}
.hchips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:920px;margin:14px auto 0}
.hchip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink-2);font-size:14px}
.hchip:hover{border-color:var(--brand-bd);background:var(--hover);color:var(--ink)}
.hchip .i{width:16px;height:16px;color:var(--ink-3)}
.hthread{max-width:760px;width:100%;margin:14px auto 0;display:flex;flex-direction:column;gap:10px}
.hthread:empty{display:none}
.promo{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 20px}
.promo .vis{height:104px;border-radius:8px;background:var(--panel);border:1px solid var(--line-2);display:grid;place-items:center}
.promo h3{margin:0;font-size:16px;font-weight:600}
.promo p{margin:4px 0 12px;color:var(--ink-3)}
.promo .x{align-self:start}

/* tables */
.tscroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:13px;font-weight:500;color:var(--ink-3);text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:11px 16px;border-bottom:1px solid var(--line-2);white-space:nowrap;vertical-align:middle}
tbody tr:hover td{background:var(--hover)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink)}
th .arr{display:inline-block;margin-left:4px;font-size:10px;color:var(--ink-3)}
th.sorted{color:var(--ink)}
th.sorted .arr{color:var(--brand)}
tr.clk{cursor:pointer}
.who{display:flex;align-items:center;gap:10px}
.kdot{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2)}
.kdot svg{width:14px;height:14px}
.empty{padding:32px 16px;text-align:center;color:var(--ink-3)}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.emptyart{padding:40px 20px 44px;text-align:center}
.emptyart h3{margin:14px 0 6px;font-size:18px;font-weight:600}
.emptyart p{margin:0 auto 18px;max-width:460px;color:var(--ink-3)}

/* diagram */
.gwrap{position:relative;width:100%;min-height:120px}
.gsvg{display:block;overflow:visible}
.gsvg text{font-family:var(--font);fill:var(--ink)}
.gsvg .t-name{font-size:13px;font-weight:600}
.gsvg .t-sub{font-size:12px;fill:var(--ink-3)}
.gsvg .t-grp{font-size:11px;font-weight:600;fill:var(--ink-3);letter-spacing:.06em}
.gsvg .t-st{font-size:12px;font-weight:600}
.gsvg .t-st.ok{fill:var(--ok)}.gsvg .t-st.watch{fill:var(--warn)}.gsvg .t-st.fail{fill:var(--err)}.gsvg .t-st.idle,.gsvg .t-st.none{fill:var(--idle)}
.gsvg .enc{fill:var(--panel);stroke:var(--btn-bd);stroke-dasharray:4 3}
.gsvg .busl{stroke:var(--bus);stroke-linecap:butt}
.gsvg .sabox{fill:var(--surface);stroke:var(--brand);stroke-width:1.5}
.gsvg .t-sa{font-size:13px;font-weight:600;fill:var(--brand-d)}
.pipe{cursor:pointer;outline:none}
.pipe .ring{fill:transparent;stroke:var(--brand);stroke-width:2;opacity:0;rx:4}
.pipe:focus-visible .ring{opacity:1}
.pipe .hit{fill:transparent}
.pipe:hover .t-name{fill:var(--brand-d)}
.gsvg.has-sel .pipe:not(.sel){opacity:.32}
.pipe.sel .ring{opacity:1;fill:rgba(26,108,231,.04)}
.flow{stroke:#fff;stroke-opacity:.5;stroke-dasharray:8 16;fill:none;animation:flow 1.1s linear infinite;pointer-events:none}
@keyframes flow{to{stroke-dashoffset:-24}}
.ov{position:absolute;transform:translateY(-50%)}
.legend{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);align-items:baseline}
.legend .sw{display:inline-block;vertical-align:middle;margin-right:5px;border-radius:2px}
.tip{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-pop);padding:12px 14px;width:270px;pointer-events:none;opacity:0;transition:opacity .1s;font-size:13px}
.tip.on{opacity:1}
.tip h4{margin:0;font-size:14px;font-weight:600}
.tip .k{color:var(--ink-3);margin-bottom:8px;font-size:12px}
.tip dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0 0 8px}
.tip dt{color:var(--ink-3)}
.tip dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.tip .why{padding-top:8px;border-top:1px solid var(--line-2);line-height:1.45}

/* chart */
.chart svg{display:block;width:100%}
.chart text{font-family:var(--font);font-size:11px;fill:var(--ink-3)}

/* live sessions: accordion list */
.slist{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:minmax(100px,1fr) 80px minmax(120px,1.3fr) minmax(130px,1.3fr) 150px minmax(250px,2.1fr) 56px 28px;align-items:center;gap:0 12px;padding:0 16px 0 20px;min-height:46px;border-bottom:1px solid var(--line-2);cursor:pointer;outline:none}
.srow:hover{background:var(--hover)}
.srow:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}
.srow.head{min-height:38px;cursor:default;font-size:13px;font-weight:500;color:var(--ink-3);border-bottom:1px solid var(--line)}
.srow.head:hover{background:transparent}
.srow[aria-expanded="true"]{background:var(--brand-wash)}
.srow[aria-expanded="true"] .chev{transform:rotate(90deg);color:var(--brand)}
.srow .c{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .c-contact{font-weight:600}
.srow .c-time{text-align:right;color:var(--ink-3)}
.srow .c-flags{display:flex;gap:4px;overflow:hidden}
.srow .c-meta{display:none}
.srow .c-state .mflags{display:none}
.chev{display:grid;place-items:center;color:var(--ink-3);transition:transform .15s}
.chev .i{width:16px;height:16px}
.srow.fresh{animation:flash 1.4s ease-out}
@keyframes flash{from{background:var(--brand-wash2)}to{background:transparent}}
.sgrp{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 20px;background:var(--panel);border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.sgrp b{font-weight:600}
.sgrp .muted{font-size:13px}
.sgrp .btn{margin-left:auto}
.acc{border-bottom:1px solid var(--line);background:var(--panel);padding:18px 20px 20px;animation:open .18s ease-out}
@keyframes open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.acc-top .meta{color:var(--ink-3);font-size:13px;display:flex;gap:12px;flex-wrap:wrap}
.acc-top .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dd-wrap{position:relative}
.dd{position:absolute;right:0;top:calc(100% + 6px);z-index:25;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-pop);width:330px;padding:6px 0}
.dd .dh{font-size:12px;color:var(--ink-3);padding:6px 14px 4px}
.dd button.it{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;padding:8px 14px;text-align:left;cursor:pointer}
.dd button.it:hover,.dd button.it:focus-visible{background:var(--hover);outline:none}
.dd button.it:disabled{opacity:.5;cursor:not-allowed}
.dd .it .nm{font-weight:500;display:block}
.dd .it .ks{font-size:12px;color:var(--ink-3);display:block}
.dd .it .st{margin-left:auto}
.dd hr{border:0;border-top:1px solid var(--line-2);margin:4px 0}
.dd .more{display:block;width:100%;border:0;background:transparent;color:var(--brand);text-align:left;padding:8px 14px;cursor:pointer;font-weight:500}
.dd .more:hover{background:var(--hover)}
.stepper{display:flex;align-items:flex-start;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.stepper ol{display:flex;list-style:none;margin:0;padding:0;flex:1;min-width:0}
.stepper li{flex:1;min-width:0;position:relative;padding-top:2px}
.stepper li::before{content:"";position:absolute;top:11px;left:26px;right:6px;height:2px;background:var(--line)}
.stepper li:last-child::before{display:none}
.stepper li.done::before{background:var(--ok-line)}
.stepper .dotw{width:20px;height:20px;border-radius:50%;border:2px solid var(--btn-bd);background:var(--surface);display:grid;place-items:center;position:relative;z-index:1;color:#fff}
.stepper .dotw svg{width:12px;height:12px;stroke-width:2.4}
.stepper li.done .dotw{background:var(--ok-line);border-color:var(--ok-line)}
.stepper li.cur .dotw{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-wash2)}
.stepper li.cur .dotw::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}
.stepper .sn{font-size:13px;font-weight:600;margin-top:6px;padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper li.cur .sn{color:var(--brand)}
.stepper li:not(.done):not(.cur) .sn{color:var(--ink-3);font-weight:500}
.stepper .sa{font-size:12px;color:var(--ink-3);padding-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper .eta{flex:none;padding-left:16px;margin-left:8px;border-left:1px solid var(--line-2);text-align:right}
.stepper .eta .l{font-size:12px;color:var(--ink-3)}
.stepper .eta .v{font-weight:600;white-space:nowrap}
.decision{display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.decision .mk{width:28px;height:28px;border-radius:8px;background:var(--brand-wash);display:grid;place-items:center;flex:none}
.decision .txt b{font-weight:600}
.decision .cite{display:block;font-size:13px;color:var(--ink-3);margin-top:1px}
.decision .cite a{font-weight:500}
.flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.appr{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:14px 16px;border:1px solid var(--warn-bd);background:var(--warn-bg);border-radius:var(--radius)}
.appr .ic{width:28px;height:28px;border-radius:8px;background:var(--surface);color:var(--warn);display:grid;place-items:center;flex:none}
.appr .body{flex:1;min-width:0}
.appr .body b{display:block;font-weight:600}
.appr .body span{display:block;font-size:13px;color:var(--ink-2)}
.appr .acts{display:flex;gap:8px;flex:none}
.inline-box{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inline-box .body{flex:1;min-width:200px}
.inline-box .body span{display:block;font-size:13px;color:var(--ink-3)}
.listen{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 14px;border-radius:var(--radius);background:var(--brand-wash);color:var(--brand-d);font-weight:500}
.wave{display:flex;gap:2px;align-items:center;height:14px}
.wave i{width:2px;background:currentColor;border-radius:2px;animation:wave 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}
@keyframes wave{0%,100%{height:3px}50%{height:14px}}
.acc-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin-top:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.panel h4{margin:0;padding:12px 16px;font-size:14px;font-weight:600;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:8px}
.panel h4 .muted{font-weight:400;font-size:12px;margin-left:auto}
.tx{padding:10px 16px 12px;display:flex;flex-direction:column;gap:7px;min-height:120px}
.tx .ln{display:grid;grid-template-columns:110px 1fr;gap:10px}
.tx .spk{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .ln.ag .spk{color:var(--brand-d);font-weight:500}
.tx .ln.sys{color:var(--ink-3);font-size:13px}
.tx .ln.ins{background:var(--brand-wash);border-radius:8px;padding:7px 10px;margin:0 -10px;color:var(--brand-d)}
.tx .ln.ins .spk{color:var(--brand-d);font-weight:600}
.tx .ln.new{animation:open .3s ease-out}
.note{padding:12px 16px 16px;border-top:1px solid var(--line-2)}
.note .row{display:flex;gap:8px;align-items:flex-end}
.note .row .field{flex:1}
.note .eff{margin-top:8px;display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ok)}
.note .eff .i{width:16px;height:16px;margin-top:1px}
.rc{list-style:none;margin:0;padding:4px 0}
.rc li{display:grid;grid-template-columns:44px 1fr auto;gap:10px;padding:8px 16px;align-items:start;border-bottom:1px solid var(--line-2)}
.rc li:last-child{border-bottom:0}
.rc .w{font-weight:500}
.rc .by{display:block;font-size:12px;color:var(--ink-3)}
.rc li.new{animation:open .3s ease-out}

/* context, connectors, settings */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.vlist{display:flex;flex-direction:column;padding:6px}
.vlist button{display:flex;flex-direction:column;gap:2px;border:0;border-radius:8px;background:var(--surface);padding:10px 12px;text-align:left;cursor:pointer}
.vlist button:hover{background:var(--hover)}
.vlist button[aria-current="true"]{background:var(--brand-wash)}
.vlist .vt{display:flex;gap:8px;align-items:center;font-weight:600}
.vlist .vs{font-size:13px;color:var(--ink-3)}
.rule{padding:14px 20px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr auto;gap:2px 16px}
.rule h5{margin:0;font-size:14px;font-weight:600}
.rule p{margin:0;color:var(--ink-2);grid-column:1}
.rule .src{font-size:13px;color:var(--ink-3);grid-column:1}
.rule .ed{grid-row:1/span 3;grid-column:2;align-self:start}
.rule .diff{grid-column:1;font-size:13px;color:var(--brand-d);padding:7px 10px;background:var(--brand-wash);border-radius:8px;margin:4px 0}
.prop{padding:16px 20px;border-top:1px solid var(--line-2);display:grid;grid-template-columns:1fr auto;gap:4px 20px}
.prop h5{margin:0;font-size:14px;font-weight:600}
.prop .ev{color:var(--ink-3);font-size:13px}
.prop .eff{font-size:14px;color:var(--ink-2)}
.prop .acts{grid-column:2;grid-row:1/span 3;display:flex;gap:6px;align-items:flex-start}
.job{display:grid;grid-template-columns:1fr auto;padding:14px 20px;border-top:1px solid var(--line-2);gap:2px 16px}
.job b{font-weight:600}
.job p{margin:0;color:var(--ink-3);font-size:13px;grid-column:1}
.job > .st,.job > .badge{grid-row:1/span 2;grid-column:2;align-self:center}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:16px;height:32px;padding:0 14px;cursor:pointer;font-size:13px;color:var(--ink-2)}
.chip:hover{background:var(--hover);border-color:var(--btn-bd)}
.steps{border-top:1px solid var(--line-2);margin-top:18px}
.stp{display:grid;grid-template-columns:26px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-2);align-items:start}
.stp:last-child{border-bottom:0}
.stp .n{width:24px;height:24px;border-radius:50%;border:2px solid var(--btn-bd);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink-3);background:var(--surface)}
.stp.done .n{background:var(--ok-line);border-color:var(--ok-line);color:#fff}
.stp.done .n svg{width:12px;height:12px;stroke-width:2.4}
.stp.cur .n{border-color:var(--brand);color:var(--brand)}
.stp b{font-weight:600}
.stp p{margin:2px 0 0;color:var(--ink-3);font-size:13px}
.frow{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:16px 20px;border-top:1px solid var(--line-2);align-items:start}
.frow .lab{font-weight:500}
.frow .help{display:block;color:var(--ink-3);font-size:13px;font-weight:400;margin-top:2px}
.form-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)}
.radio-row{display:flex;flex-direction:column;gap:8px}
.radio{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.radio input{margin-top:4px;accent-color:var(--brand)}
.radio small{display:block;color:var(--ink-3);font-size:13px}
.radio:has(input:checked){border-color:var(--brand);background:var(--hover)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* popovers, modal, toast */
.pop{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-pop);padding:6px 0;z-index:90;min-width:270px;display:none}
.pop.on{display:block;animation:open .12s ease-out}
.pop .ph2{font-size:12px;color:var(--ink-3);padding:6px 14px 4px}
.pop button.it{display:flex;width:100%;align-items:center;gap:10px;border:0;background:transparent;padding:8px 14px;cursor:pointer;text-align:left}
.pop button.it:hover,.pop button.it:focus-visible{background:var(--hover);outline:none}
.pop button.it[aria-current="true"]{font-weight:600;color:var(--brand)}
.pop button.it .k{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:400}
.pop .d1{padding-left:28px!important}.pop .d2{padding-left:42px!important}
.pop .srch{padding:8px 10px}
.backdrop{position:fixed;inset:0;background:var(--scrim);z-index:95;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.backdrop.on{display:flex}
.modal{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-pop);width:min(520px,100%);overflow:hidden;animation:open .16s ease-out}
.modal header{padding:20px 24px 4px}
.modal header h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.modal .mb{padding:10px 24px 18px;line-height:1.55;color:var(--ink-2)}
.modal .mb p{margin:0 0 10px}
.modal .mb p:last-child{margin:0}
.modal .mb .pub-diff{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px;max-height:min(46vh,360px);overflow:auto}
.pub-ch{display:grid;gap:3px;padding:8px 10px;border:1px solid var(--line-2);border-radius:8px;font-size:13.5px}
.pub-ch b{color:var(--ink);font-weight:600}
.pub-was,.pub-add{display:grid;grid-template-columns:44px 1fr;gap:6px;overflow-wrap:anywhere}
.pub-was{color:var(--ink-2)}
.pub-add{color:var(--brand-d);background:var(--brand-wash);border-radius:6px;padding:3px 6px;margin:0 -6px}
.pub-k{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.8;padding-top:2px}
.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 24px;border-top:1px solid var(--line-2)}
.toast{position:fixed;left:50%;top:20px;transform:translate(-50%,-8px);background:var(--toast);color:#fff;padding:10px 16px;border-radius:10px;display:flex;gap:10px;align-items:center;z-index:99;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:var(--shadow-pop);width:max-content;max-width:min(720px,calc(100vw - 32px))}
.toast .i{color:#7EE2A1}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#fff;text-decoration:underline}

/* assistant: docked, full screen, minimized */
.ask-tab{position:fixed;left:var(--side);top:50%;transform:translateY(-50%);z-index:45;height:40px;padding:0 14px 0 10px;border-radius:0 20px 20px 0;border:1px solid var(--line);border-left:0;background:var(--surface);box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:6px;cursor:pointer;font:inherit;font-size:13px;font-weight:500;color:var(--brand-d)}
.ask-tab:hover{background:var(--brand-wash)}
.ask-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ask-tab .spark{width:16px;height:16px}
.ask{position:fixed;left:var(--side);top:0;bottom:0;z-index:50;width:360px;max-width:100vw;background:var(--surface);border-right:1px solid var(--line);box-shadow:var(--shadow-pop);display:none}
.ask[data-mode="docked"]{display:flex}
.ask[data-mode="full"]{display:grid;grid-template-columns:280px minmax(0,1fr);left:0;right:0;width:auto;max-width:none;border-right:0;box-shadow:none;z-index:60}
@media (min-width:1100px){body.ask-docked .main{padding-left:360px}body.ask-docked .ask{box-shadow:none;z-index:35}}
.ask-side{display:none}
.ask[data-mode="full"] .ask-side{display:flex;flex-direction:column;gap:10px;padding:16px 14px;border-right:1px solid var(--line);background:var(--panel);min-height:0}
.ask-side .sl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--ink-2);border:0;background:transparent;cursor:pointer;text-align:left;width:100%}
.ask-side .sl:hover{background:var(--hover)}
.ask-side .sl[aria-current="true"]{background:var(--brand-wash);color:var(--brand-d)}
.ask-side .sec2{font-size:12px;color:var(--ink-3);padding:8px 10px 2px}
.ask-side .chl{overflow:auto;display:flex;flex-direction:column;gap:2px;min-height:0}
.ask-side .chl .sl{flex-direction:column;align-items:flex-start;gap:0}
.ask-side .chl .sl small{font-size:12px;color:var(--ink-3)}
.ask-main{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;height:100%}
.ask-top{display:flex;align-items:center;gap:4px;padding:10px 10px 10px 12px;border-bottom:1px solid var(--line-2);min-width:0}
.ask-top .ttl{display:flex;align-items:center;gap:6px;min-width:0;border:0;background:transparent;cursor:pointer;padding:6px 8px;border-radius:8px;font-weight:600;color:var(--ink)}
.ask-top .ttl:hover{background:var(--hover)}
.ask-top .ttl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.ask[data-mode="full"] .ask-top .ttl span{max-width:420px}
.ask-top .sp{flex:1}
.ask-top .iconbtn{width:30px;height:30px}
.ask-top .iconbtn .i{width:16px;height:16px}
.faces{display:flex;margin-right:4px}
.faces .avatar{width:24px;height:24px;font-size:10px;border:2px solid var(--surface);margin-left:-6px}
.faces .avatar:first-child{margin-left:0}
.faces .avatar.ms{background:#FCE3C8;color:#8A4B00}
.faces .avatar.rc{background:#D6F0E3;color:#1E6B45}
.purv2{font-size:12px;color:var(--ink-3);padding:6px 16px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.purv2 .badge[hidden]{display:none}
.thread{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.ask[data-mode="full"] .thread>*{width:100%;max-width:780px;margin-left:auto;margin-right:auto}
.msg{max-width:94%;font-size:14px;line-height:1.55}
.msg.me{align-self:flex-end;background:var(--primary);color:var(--on-primary);padding:8px 12px;border-radius:14px 14px 4px 14px;max-width:85%}
.ask[data-mode="full"] .msg.me{max-width:600px;margin-right:calc((100% - 780px)/2)}
.msg.bot{padding:2px 0}
.msg.bot p{margin:0 0 8px}.msg.bot p:last-child{margin:0}
.msg.other{display:flex;gap:8px;align-items:flex-start}
.msg.other .avatar{width:26px;height:26px;font-size:10px;background:#FCE3C8;color:#8A4B00}
.msg.other .ob{background:var(--panel);border:1px solid var(--line-2);padding:8px 12px;border-radius:4px 14px 14px 14px}
.msg.other .nm{font-size:12px;color:var(--ink-3);display:block;margin-bottom:2px}
.think{margin:0 0 8px;font-size:13px;color:var(--ink-3)}
.think summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px}
.think summary::-webkit-details-marker{display:none}
.think summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.think[open] summary::before{transform:rotate(45deg)}
.think ol{margin:6px 0 0;padding-left:20px}
.msg .cardlet{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:8px;background:var(--surface)}
.msg .cardlet b{display:block;font-weight:600}
.msg .cardlet .acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;align-items:center}
.msg .cardlet .rcrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2);font-size:13px}
.sugg{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 8px}
.ask[data-mode="full"] .sugg,.ask[data-mode="full"] .composer{width:100%;max-width:812px;margin:0 auto}
.composer{padding:8px 16px 12px}
.cbox{border:1px solid var(--btn-bd);border-radius:16px;padding:10px 10px 8px 14px;background:var(--surface)}
.cbox:focus-within{border-color:var(--brand-bd);box-shadow:0 0 0 4px rgba(26,108,231,.12)}
.cbox textarea{width:100%;border:0;outline:none;resize:none;background:transparent;min-height:44px;font-size:14px;line-height:1.5;padding:2px 0}
.cbox .crow{display:flex;align-items:center;gap:8px;margin-top:4px}
.cbox .crow .sp{flex:1}
.cbox select,.cfoot select{border:1px solid var(--line);background:var(--surface);border-radius:14px;height:28px;padding:0 8px;font-size:12px;color:var(--ink-2)}
.cfoot{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.cfoot span{margin-left:auto}
.mebtn{display:flex;align-items:center;gap:10px;flex:1;min-width:0;border:0;background:transparent;padding:4px;border-radius:8px;cursor:pointer;text-align:left;color:inherit}
.mebtn:hover{background:var(--hover)}
.pop .it .ck{margin-left:auto;color:var(--brand)}
/* session path */
.path{position:relative;display:flex;align-items:center;overflow-x:auto;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);scrollbar-width:thin}
.pc{flex:none;width:22px;height:2px;background:var(--conn)}
.pc.fut{height:0;background:none;border-top:2px dashed var(--btn-bd)}
.pn,.hop,.rs{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;cursor:pointer;font:inherit;color:inherit;line-height:1.3;background:var(--surface)}
.pn{width:166px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.pn .who2{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-bottom:4px}
.pn .who2 .kdot{width:20px;height:20px;border-radius:6px}
.pn b,.hop b,.rs b{font-size:13px;font-weight:600}
.pn .s,.hop .s,.rs .s{font-size:12px;color:var(--ink-3)}
.ht{font-size:11px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.hop{width:168px;padding:9px 14px;border:1.5px solid var(--brand-bd);border-radius:22px;background:var(--brand-wash)}
.hop .hk{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--brand-d);margin-bottom:3px}
.hop .hk .spark{width:11px;height:11px}
.hop b{color:var(--brand-d)}
.hop.prompted{border-style:solid;border-color:var(--brand)}
.rail{flex:none;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:8px 10px 10px}
.rail .rh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin:0 0 7px 2px;white-space:nowrap}
.rail .rh .kdot{width:20px;height:20px;border-radius:6px}
.rail .rh b{color:var(--ink);font-size:12px}
.rail.r-fut{border-style:dashed;background:transparent}
.rsteps{display:flex;align-items:center}
.rs{width:148px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.rl{flex:none;width:12px;height:2px;background:var(--btn-bd)}
.pn.fut,.hop.fut,.rs.fut{border-style:dashed;background:transparent}
.pn.fut b,.hop.fut b,.rs.fut b{color:var(--ink-3);font-weight:500}
.hop.fut{border-color:var(--btn-bd)}
.hop.fut .hk{color:var(--ink-3)}
.pn.cur,.hop.cur,.rs.cur{border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-wash2)}
.pn.on,.hop.on,.rs.on{outline:2px solid var(--brand);outline-offset:2px}
.pn.end.done{border-color:var(--ok-line);background:var(--ok-bg)}
.pn.end.done b{color:var(--ok)}
.rcbox{margin-top:8px;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.rcbox .i{width:16px;height:16px;color:var(--ink-3)}
.acts2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.pb{padding:12px 16px 16px}
.pb .row{display:flex;gap:8px;align-items:flex-end}
.pb .row.wrap{flex-wrap:wrap;align-items:center}
.pb .row .field{flex:1}
.pb .eff{margin-top:8px;display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ok)}
.pb .eff .i{width:16px;height:16px;margin-top:1px}
.panel h4 .spark{width:13px;height:13px}
.chips2{display:flex;gap:6px;flex-wrap:wrap}
.ctxchip{display:inline-flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:8px;background:var(--brand-wash);color:var(--brand-d);font-size:13px;font-weight:500}
.ctxchip small{font-size:11px;color:var(--ink-3);font-weight:400}
.outcome{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap;font-size:13px}
/* traffic */
.tstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);margin-bottom:14px}
.tstats>div{padding:12px 20px;border-right:1px solid var(--line-2)}
.tstats>div:last-child{border-right:0}
.tstats .l{font-size:12px;color:var(--ink-3)}
.tstats .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.whyline{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.slx{list-style:none;margin:0;padding:4px 0}
.slx li{display:grid;grid-template-columns:110px 1fr auto;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line-2);align-items:center}
.slx li:last-child{border-bottom:0}
.gsvg .t-dir{font-size:11px;font-weight:700;letter-spacing:.08em;fill:var(--brand-d)}
.chart .gl{stroke:var(--line-2)}
@media (max-width:900px){.tstats{grid-template-columns:repeat(2,minmax(0,1fr))}.ask[data-mode="full"]{grid-template-columns:1fr}.ask[data-mode="full"] .ask-side{display:none}.ask{width:100vw;left:0}.ask-tab{left:0}.slx li{grid-template-columns:1fr auto}.slx li .muted{display:none}}
.kbd{font:500 11px/1 var(--mono);color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:3px 5px;background:var(--panel)}

@media (max-width:1200px){
  .sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srow{grid-template-columns:minmax(110px,1.1fr) 80px minmax(120px,1.2fr) minmax(130px,1.3fr) minmax(120px,1fr) minmax(120px,1.2fr) 52px 24px}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr;background:none}
  body.collapsed{--side:240px}
  .side{position:fixed;left:0;top:0;bottom:0;width:272px;transform:translateX(-102%);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:var(--shadow-pop)}
  body.drawer .side{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:39;opacity:0;pointer-events:none;transition:opacity .2s}
  body.drawer .scrim{opacity:1;pointer-events:auto}
  body.drawer .ask-tab{display:none}
  #collapseBtn{display:none}
  .mbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;height:56px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
  .mbar .wm{font-size:17px}
  .mbar .avatar{margin-left:auto;width:30px;height:30px}
  .page{padding:18px 16px 96px;gap:16px}
  .ph h1{font-size:24px}
  .hello h2{font-size:24px}
  .promo{grid-template-columns:1fr;gap:12px}
  .promo .x{position:absolute;right:10px;top:10px}
  .promo{position:relative}
  .srow.head{display:none}
  .srow{grid-template-columns:minmax(0,1fr) auto 24px;grid-template-areas:"contact time chev" "meta meta meta" "state state state";padding:12px 16px;gap:4px 8px}
  .srow .c-contact{grid-area:contact}.srow .c-time{grid-area:time}.srow .chev{grid-area:chev}
  .srow .c-chan,.srow .c-wf,.srow .c-now,.srow .c-flags{display:none}
  .srow .c-meta{display:block;grid-area:meta;color:var(--ink-3);font-size:13px}
  .srow .c-state{grid-area:state;display:flex;gap:4px;flex-wrap:wrap;overflow:visible}
  .srow .c-state .mflags{display:contents}
  .acc{padding:14px 16px}
  .acc-cols,.two,.split{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr;gap:6px}
  .prop{grid-template-columns:1fr}.prop .acts{grid-column:1;grid-row:auto}
  .stepper{flex-direction:column;gap:10px}
  .stepper ol{flex-direction:column;width:100%}
  .stepper li{display:grid;grid-template-columns:20px 1fr;column-gap:10px;padding:0 0 10px}
  .stepper li::before{left:9px;top:22px;bottom:0;right:auto;width:2px;height:auto}
  .stepper .dotw{grid-row:1/span 2}
  .stepper .sn{margin-top:0}
  .stepper .eta{border-left:0;border-top:1px solid var(--line-2);padding:8px 0 0;margin:0;text-align:left;width:100%}
  .appr{flex-wrap:wrap}.appr .acts{width:100%;justify-content:flex-end}
  .dd{width:min(330px,calc(100vw - 48px))}
  .tx .ln{grid-template-columns:90px 1fr}
  .card-h{padding:16px 16px 12px}.card-b{padding:0 16px 16px}
  .sc{padding:16px}
  .sc .big b{font-size:24px}
}
@media (max-width:520px){
  .sum{gap:10px}
  .sc{padding:14px}
  .sc .askchip{height:auto;min-height:30px;padding:6px 10px;line-height:1.3;font-size:12px}
  .ph .right{margin-left:0;width:100%}
  .card-h .right{margin-left:0;width:100%}
  .hchip{font-size:13px;height:34px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- portal-next additions (not in the mockup; each serves real data or a real state) ---------- */
/* n/a: a status no source reports, in neutral gray (never green) */
.st.na{color:var(--idle)}
.st.na::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;border-radius:50%}
.gsvg .t-st.na{fill:var(--idle)}
/* a control disabled with its reason keeps its tooltip: the title sits on this wrapper */
.gate-tip{display:inline-flex}
/* a live-mode read that failed: said plainly, with the fix */
.banner{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1px solid var(--err-line);background:var(--err-bg);color:var(--err);border-radius:var(--radius);font-size:13px}
.banner b{font-weight:600}
.banner a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* headings follow the outline (h1 > h2 > h3); rule and proposal titles keep the mockup's h5 size */
.rule h3,.prop h3{margin:0;font-size:14px;font-weight:600}
.rule.changed{background:var(--panel)}
.prop.done{background:var(--panel)}
.rule .edit-box{grid-column:1;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.rule .edit-box .row{display:flex;gap:8px;justify-content:flex-end}
.confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);font-size:13px}
.confirm .sp{flex:1}
/* prose stays readable: about 75 characters a line */
.rule p,.rule .diff,.prop .ev,.prop .eff,.job p,.ph .desc{max-width:75ch}
/* connector details under a row */
tr.detail td{background:var(--panel);white-space:normal;font-size:13px;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 24px;padding:4px 0 2px}
.kv > span{min-width:0;overflow-wrap:anywhere;line-height:1.45}
.kv > span > b:first-child{display:block;font-size:12px;font-weight:500;color:var(--ink-3);margin:0 0 2px}
/* data source form (Settings, Security) */
.src-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.src-grid label{font-size:12px;color:var(--ink-3);display:flex;flex-direction:column;gap:4px}
.err{color:var(--err);font-size:12px;margin-top:6px}
/* toast actions: View receipt, Undo */
.toast .tact{background:none;border:0;color:#A9C2FF;cursor:pointer;font:inherit;font-weight:500;padding:0 2px;margin-left:4px}
.toast .tact:hover{text-decoration:underline}
/* the transcript tail, the reply box after a take over, and receipts in the open session */
.acc .panel .rc{max-height:360px;overflow:auto}
.acc .tx{min-height:80px}
.pop{max-width:calc(100vw - 16px);overflow-y:auto}
@media (max-width:900px){.src-grid{grid-template-columns:1fr}.rule{grid-template-columns:1fr}.rule .ed{grid-row:auto;grid-column:1;justify-self:start}.job{grid-template-columns:1fr}.job > .st,.job > .badge{grid-row:auto;grid-column:1;justify-self:start}}

/* Getting started: the spotlight ignores the pointer, so nothing behind it is trapped */
.tour-ring{position:fixed;z-index:90;border:2px solid var(--brand);border-radius:10px;pointer-events:none;box-shadow:0 0 0 4px var(--brand-wash2),0 0 0 9999px rgba(8,16,32,.22);transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease}
.tour-pop{position:fixed;z-index:91;width:340px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:16px 18px 14px}
.tour-pop h2{font-size:16px;font-weight:600;margin:4px 0 6px}
.tour-pop p{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.tour-pop .tour-k{font-size:12px;color:var(--ink-3)}
.tour-pop .tour-acts{display:flex;gap:8px;align-items:center}
.tour-pop .tour-acts .sp{flex:1}
.tour-pop.center{left:50%!important;top:50%!important;transform:translate(-50%,-50%)}
.tour-pop.dock{left:12px!important;right:12px;bottom:12px;top:auto!important;width:auto}
.tour-ring[hidden],.tour-pop[hidden]{display:none}
.tourlink{background:none;border:0;padding:0;color:var(--brand-d);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.tour-ring{transition:none}}

/* menus that would run off the bottom open upward and scroll inside */
.dd{max-height:min(60vh,440px);overflow:auto}
.dd.up{top:auto;bottom:calc(100% + 6px)}
.dd{width:min(330px,calc(100vw - 32px))}

/* live call bar: the audio level, the mode switch, Leave */
.callbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.level{display:inline-block;width:64px;height:8px;border-radius:4px;background:var(--line-2);overflow:hidden}
.level i{display:block;height:100%;background:var(--g-ok);transition:width .12s linear}
@media (prefers-reduced-motion:reduce){.level i{transition:none}}
/* ---------- the grid screens (briefs/grid-ui.md): token slots, registry, connections, catalog, the token card ---------- */
.raised{box-shadow:0 1px 2px rgba(27,39,51,.04),0 8px 24px rgba(27,39,51,.06)}
.stack{display:flex;flex-direction:column;gap:16px;max-width:880px}
.legend .lg{display:inline-flex;align-items:baseline;gap:6px}
.legend .lg > .st,.legend .lg > .dchip{flex:none}
/* token slots */
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.slot{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:14px 16px;box-shadow:0 1px 2px rgba(27,39,51,.04);transition:border-color .15s,box-shadow .15s}
.slot:hover{border-color:var(--btn-bd);box-shadow:0 6px 18px rgba(27,39,51,.07)}
.slot header{display:flex;align-items:center;gap:10px}
.slot header .st{margin-left:auto}
.slot p{margin:2px 0 10px;font-size:13px}
.slot-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.src-grid.one{grid-template-columns:1fr}
/* depth chips: proven, documented, not offered */
.dchip{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1;cursor:default}
.dchip.ok{background:var(--ok-bg);color:var(--ok)}
.dchip.out{background:transparent;color:var(--brand-d);box-shadow:inset 0 0 0 1px var(--brand-bd)}
.dchip.none{background:var(--line-2);color:var(--ink-3)}
/* loading, error, and missing-token states */
.skel{padding:14px 20px 18px}
.skel-t{font-size:13px;color:var(--ink-3);margin-bottom:10px}
.skel-r{display:flex;gap:16px;padding:10px 0;border-top:1px solid var(--line-2)}
.skel-r i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line-2) 0%,var(--hover) 50%,var(--line-2) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.gerr,.ggate{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius);font-size:13px;margin:0}
.gerr{border:1px solid var(--err-line);background:var(--err-bg);color:var(--ink)}
.ggate{border:1px solid var(--line);background:var(--panel)}
.gerr b,.ggate b{display:block;font-weight:600}
.gerr span,.ggate span{display:block;color:var(--ink-2)}
.gerr .btn{margin-left:auto;flex:none}
.gerr-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--surface);color:var(--err)}
.ggate .gerr-ic{color:var(--ink-3)}
.gerr .rid{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap;color:var(--ink-3)}
.okline{display:flex;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);border-radius:var(--radius);font-size:13px;margin-top:12px}
.okline .i{width:16px;height:16px;flex:none}
.okline span{color:var(--ink)}
/* registry detail: capabilities, scopes, tokens */
.dsec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.dsec h3{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.dsec .sub{margin:2px 0 10px;color:var(--ink-3);font-size:13px}
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px}
.capcol{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.capcol h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.capcol h4 span{display:block;font-weight:400;color:var(--ink-3);font-size:12px}
.capcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.capcol li{display:flex;align-items:center;gap:8px;justify-content:space-between;min-width:0}
.capcol li code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.capcol li.off code{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--idle-line)}
.capcol p{margin:0;font-size:12px}
.tpanel{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tp-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.tp-h h3{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
.tp-h .right{margin-left:auto;display:flex;gap:6px}
.tpanel .ggate,.tpanel .gerr{margin:12px 14px}
table.tight td,table.tight th{padding:8px 14px;font-size:13px}
.btn.danger-o{border-color:var(--err-line);color:var(--err)}
.btn.danger-o:hover{background:var(--err-bg)}
/* the token card: the one place the grid hands a person a secret */
.tokcard{position:relative;background:var(--surface);border:1px solid var(--brand-bd);border-radius:14px;padding:20px 22px 18px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 4px rgba(27,39,51,.06),0 18px 44px rgba(26,108,231,.16);animation:open .2s ease-out;margin:14px}
.tokcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,#3B82F6,#0EA5A4,#10B981)}
.tokcard.done{border-color:var(--ok-line);box-shadow:0 2px 4px rgba(27,39,51,.05)}
.tokcard.done::before{display:none}
.tok-h{display:flex;gap:14px;align-items:flex-start}
.tok-h h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.tok-h p{margin:4px 0 0;color:var(--ink-2);max-width:62ch}
.seal{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--brand-wash);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-wash2)}
.seal.ok{background:var(--ok-bg);color:var(--ok);box-shadow:none}
.seal .i{width:20px;height:20px}
.tok-v{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;padding:12px 12px 12px 16px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 1px 3px rgba(27,39,51,.06)}
.tok-v code{flex:1;min-width:0;font-size:13.5px;letter-spacing:.04em;overflow-wrap:anywhere;color:var(--ink);user-select:all}
.tok-b{display:flex;gap:8px}
.tok-meta{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;margin-top:10px;font-size:12px;color:var(--ink-3)}
.tok-meta .btn{margin-left:auto}
.tok-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.tok-foot .btn{margin-left:auto}
.page > .tokcard{margin:0}
/* forms on the grid screens */
.gform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.gform > label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:500;color:var(--ink-2);min-width:0}
.gform small{font-weight:400;color:var(--ink-3);font-size:12px}
.gform .wide,.gform > .gerr{grid-column:1/-1}
.gform fieldset{border:0;margin:0;padding:0;min-width:0}
.gform legend{font-size:13px;font-weight:500;color:var(--ink-2);padding:0;margin-bottom:8px}
.gform legend .muted{font-weight:400;margin-left:6px}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scopegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.ck{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:13px;transition:background .12s,border-color .12s}
.ck:hover{background:var(--hover)}
.ck:has(input:checked){border-color:var(--brand-bd);background:var(--brand-wash)}
.ck input{margin-top:3px;accent-color:var(--brand)}
.ck code{display:block;color:var(--ink-3);font-size:11px}
.limrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;margin-bottom:6px}
.money{display:inline-flex;align-items:center;gap:6px}
.money .field{width:140px}
/* catalog */
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.catcard{padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .15s,border-color .15s,transform .15s}
.catcard:hover{border-color:var(--btn-bd);box-shadow:0 10px 28px rgba(27,39,51,.08);transform:translateY(-1px)}
.cat-h{display:flex;gap:12px;align-items:flex-start}
.cat-h h3{margin:0;font-size:16px;font-weight:600}
.cat-h .badge{margin-left:auto}
.cat-h .kdot{width:34px;height:34px;border-radius:10px}
.cat-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px}
.cat-row .lab{color:var(--ink-3);width:92px;flex:none}
.cat-depth{display:flex;flex-direction:column;gap:8px}
.dbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line-2);gap:2px}
.dbar i{display:block;height:100%}
.dbar i.ok{background:var(--g-ok)}.dbar i.out{background:var(--brand-bd)}.dbar i.none{background:var(--idle-line)}
.dnums{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dnums span{display:inline-flex;gap:5px;align-items:center}
.cat-caps .caps{grid-template-columns:1fr}
.cat-acts{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
/* connections */
.secrets{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.secrets li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.secrets li .muted{width:150px;flex:none;font-size:12px}
.secrets li code{flex:1;min-width:0;overflow-wrap:anywhere}
/* how to connect */
.codeblock{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.codeblock pre{margin:0;padding:12px 90px 12px 14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;line-height:1.55;color:var(--ink)}
.codeblock .btn{position:absolute;top:8px;right:8px}
@media (max-width:900px){.slots,.caps,.gform,.seg3{grid-template-columns:1fr}.catgrid{grid-template-columns:1fr}.tokcard{margin:10px;padding:16px}.secrets li .muted{width:auto}}
@media (prefers-reduced-motion:reduce){.skel-r i{animation:none}.catcard:hover{transform:none}}
.card > .tabs{padding:0 20px;margin-top:0}
.catgrid{align-items:start}
/* the tour follows its target on scroll and resize: no glide while following */
.tour-ring.follow{transition:none}
/* where the tokens go: the confirmed host (Settings, Security) */
.hostline{display:flex;gap:8px;align-items:center;margin-top:10px;padding:8px 12px;border-radius:8px;font-size:13px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd)}
.hostline.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.hostline span{color:var(--ink)}
.hostline .i{width:16px;height:16px;flex:none}
/* ---------- Actions, Audit, the draft's replay, and the tenant's settings (briefs/grid-ui.md screens 4 to 6) ---------- */
.sum.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.runres .sum{padding:4px 20px 0}
.runres .sum .sc{border:1px solid var(--line);border-radius:10px;box-shadow:none}
.dbar.big{height:12px;border-radius:6px}
.dbar i.err{background:var(--g-fail)}
.legend .sw{width:10px;height:10px}
.legend .sw.ok{background:var(--g-ok)}.legend .sw.err{background:var(--g-fail)}.legend .sw.none{background:var(--idle-line)}
.legend .sw.b-all{background:var(--brand-bd)}.legend .sw.b-err{background:var(--g-fail)}
.row-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.rid{display:inline-flex;align-items:center;gap:6px}
.rid code{font-size:12px}
.field.xs{height:26px;font-size:12px;padding:0 6px;width:auto}
.iconbtn.sm{width:26px;height:26px}
.iconbtn.sm .i{width:14px;height:14px}
table.rlog code.mono{font-size:12px}
table.rlog td{vertical-align:top}
.rwhat{white-space:normal;min-width:240px}
.rwhat .rses{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)}
.rwhy{white-space:normal;min-width:170px;max-width:260px;font-size:13px}
.btn.primary:disabled{background:var(--line-2);border-color:var(--line);color:var(--ink-3)}
.ck small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.35;margin-top:2px}
.cellsub{display:block;font-size:12px;color:var(--ink-3);margin-top:3px;font-weight:400}
td.wrapcell{white-space:normal;overflow-wrap:anywhere;max-width:420px}
td .row-acts{flex-wrap:nowrap}
/* request log: filters and the error bars */
.rfilters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.rfilters .field{width:250px;max-width:100%;height:32px}
.rfilters .ck{height:32px;align-items:center;padding:0 10px}
.rfilters .ck input{margin-top:0}
.rfilters .seg button{height:26px}
.rfilters .btn{height:32px}
.ebars svg{display:block;width:100%;height:64px}
.ebars .b-all{fill:var(--brand-bd)}.ebars .b-err{fill:var(--g-fail)}
.ebars rect{transition:opacity .12s}.ebars g:hover rect{opacity:.75}
.ebars .legend{margin-top:6px}
/* replay: the step-through, oldest first */
.rp-head{padding:4px 20px 10px;display:flex;flex-direction:column;gap:8px}
.rp-head p{margin:0;font-size:13px}
.steps-list{list-style:none;margin:0;padding:4px 20px 18px;display:flex;flex-direction:column}
/* one rail down the middle column, a dot per step: hollow for an event, blue ring for a judged decision, red for a flip */
.step{display:grid;grid-template-columns:104px 12px minmax(0,1fr);gap:4px 12px;padding:8px 8px 8px 4px;font-size:13px;background:linear-gradient(var(--line),var(--line)) no-repeat 125px 0/2px 100%}
.step:first-child{background-position:125px 14px}
.step:last-child{background-size:2px 14px}
.step:only-child{background-image:none}
.step::after{content:"";grid-column:2;grid-row:1;align-self:start;justify-self:center;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--btn-bd)}
.step.dec::after{box-shadow:inset 0 0 0 2px var(--brand)}
.step.flip::after{background:var(--err-line);box-shadow:none}
.step.after::after{border-radius:1px;transform:rotate(45deg);background:var(--warn-line);box-shadow:none}
.step.req::after{width:6px;height:6px;margin-top:6px;background:var(--idle-line);box-shadow:none}
.step.req{color:var(--ink-3)}
.step.flip{background-color:var(--err-bg);border-radius:8px}
.step .st-t{grid-column:1;grid-row:1;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.step .st-w{grid-column:3;grid-row:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.step .st-d{grid-column:3;color:var(--ink-2);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;margin-top:4px;max-width:75ch}
.step.flip .st-d{border-color:var(--err-line);background:var(--surface)}
/* a stored run's result: what changes, grouped by rule */
.rr-h{margin:16px 0 8px;font-size:14px;font-weight:600}
.rgroups{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rgroups li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.rgroups .badge{cursor:pointer;border:0;font:inherit;font-size:12px}
.rgroups .badge:hover,.rgroups .badge:focus-visible{background:var(--brand-wash2)}
.dreplay{border-top:1px solid var(--line-2);padding-bottom:6px}
.dreplay.card-b{padding-top:14px}
/* the tenant's settings: changes for a second admin, webhooks, hours, escalation */
.tsec{border-top:1px solid var(--line-2)}
.chglist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.chg{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.chg:hover{border-color:var(--btn-bd);box-shadow:0 4px 14px rgba(27,39,51,.06)}
.chg-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px;overflow-wrap:anywhere}
.chg-t .muted{font-size:12px}
.chg .row-acts{margin-left:auto}
.chg-sep{font-size:12px;color:var(--ink-3);padding:6px 2px 0}
table.hours .field{height:30px;font-size:12.5px;min-width:96px}
table.hours td:first-child .field,table.hours td:nth-child(2) .field{min-width:140px}
.hostnote{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.prefixed{display:flex;align-items:stretch;min-width:0}
.prefixed > span{display:flex;align-items:center;padding:0 8px;border:1px solid var(--btn-bd);border-right:0;border-radius:8px 0 0 8px;background:var(--panel);color:var(--ink-3);font-size:11px;max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prefixed .field{border-radius:0 8px 8px 0;min-width:0;flex:1}
.hostsform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.hostsform .field{height:28px;font-size:12.5px;min-width:220px;flex:1}
.dl-note{font-size:12px;margin-top:6px;color:var(--ink-3);white-space:normal;text-align:right}
.dl-note.good{color:var(--ok)}.dl-note.bad{color:var(--err)}
@media (max-width:900px){.sum.three{grid-template-columns:1fr}.step{grid-template-columns:12px minmax(0,1fr);column-gap:10px;background-position:9px 0}.step:first-child{background-position:9px 14px}.step::after{grid-column:1}.step .st-t{grid-column:2}.step .st-w{grid-column:2;grid-row:2}.step .st-d{grid-column:2}.rfilters .field{width:100%}.chg .row-acts{margin-left:0}.prefixed{flex-direction:column}.prefixed > span{max-width:none;border-right:1px solid var(--btn-bd);border-bottom:0;border-radius:8px 8px 0 0;padding:4px 8px}.prefixed .field{border-radius:0 0 8px 8px}}
@media (prefers-reduced-motion:reduce){.ebars rect,.chg{transition:none}}
/* ---------- polish pass: tables, detail panels, filters, decisions (refinement of the v5 system, no new tokens) ---------- */
/* tables: a quieter header; an open row reads as one piece with its detail; buttons in a cell never touch */
th{font-size:12.5px;letter-spacing:.01em;padding:9px 16px}
tr.clk:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
tr.clk[aria-expanded="true"] td{background:var(--panel);border-bottom-color:transparent}
tr.detail td{padding:6px 16px 20px;border-bottom:1px solid var(--line)}
tbody tr.detail:hover td{background:var(--panel)}
td > .btn + .btn,td > .gate-tip + .btn,td > .btn + .gate-tip,td > .gate-tip + .gate-tip{margin-left:6px}
td .tourlink,.rses .tourlink{text-decoration:none;font-weight:500}
td .tourlink:hover,td .tourlink:focus-visible,.rses .tourlink:hover{text-decoration:underline}
.cellact{margin-top:6px}
.row-acts{align-items:center}
/* the detail under an open row stays in view when a wide table scrolls sideways on a phone */
.tscroll{container-type:inline-size}
.dpanel{position:sticky;left:16px;width:calc(100cqw - 32px)}
/* a decision a person owes: the same held-for-approval box as Mission Control, text left, the two answers right */
.dsec.decide{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:14px 16px;border:1px solid var(--warn-bd);background:var(--warn-bg);border-radius:var(--radius)}
.dsec.decide h3,.dsec.decide .sub{grid-column:1}
.dsec.decide .sub{margin:0;color:var(--ink-2)}
.dsec.decide .row-acts{grid-column:2;grid-row:1/span 2}
/* filters are pills; sections stay underlined tabs */
.subtabs .tabs{border-bottom:0;gap:6px;margin-top:0;padding:2px 0}
.subtabs .tabs button{height:30px;padding:0 12px;margin:0;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink-2);font-size:13px}
.subtabs .tabs button:hover{background:var(--hover);color:var(--ink)}
.subtabs .tabs button[aria-selected="true"]{background:var(--brand-wash);border-color:var(--brand-bd);color:var(--brand-d)}
.subtabs .tabs button .cnt{height:18px;min-width:18px;padding:0 5px;font-size:11px}
.subtabs .tabs button[aria-selected="true"] .cnt{background:var(--surface);color:var(--brand-d)}
@media (max-width:900px){.dsec.decide{grid-template-columns:1fr}.dsec.decide .row-acts{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:8px}}
@media (max-width:520px){.card-h:has(> .right > .iconbtn:only-child){position:relative;padding-right:52px}.card-h > .right:has(> .iconbtn:only-child){position:absolute;top:12px;right:10px;width:auto}}
/* phones: the request log stacks each row (time and status on top, what below) instead of scrolling sideways; secret names get the full width */
@media (max-width:900px){
  table.rlog{min-width:0!important}
  table.rlog thead{display:none}
  table.rlog tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
  table.rlog tr:last-child{border-bottom:0}
  table.rlog td{display:block;padding:0;border:0;white-space:normal;min-width:0;max-width:none;background:transparent!important}
  table.rlog tbody tr:hover{background:var(--hover)}
  table.rlog td:nth-child(1){grid-column:1;grid-row:1}
  table.rlog td:nth-child(4){grid-column:2;grid-row:1;text-align:right}
  table.rlog td:nth-child(3){grid-column:1/-1;grid-row:2}
  table.rlog td:nth-child(2),table.rlog td:nth-child(5),table.rlog td:nth-child(6){grid-column:1/-1}
  table.rlog td:nth-child(2) code{color:var(--ink-3)}
  table.rlog td:nth-child(5):empty{display:none}
  .secrets li .muted,.secrets li code{flex-basis:100%}
}

/* Skills (briefs/grid-skills.md): the Skill filter, the Skills page, the tag on a session or a rule, and the Connected apps sheet */
.scope-btn[hidden]{display:none}
.skillbar{flex-wrap:wrap}
.skilltag{display:inline-flex;align-items:center;height:18px;padding:0 7px;margin-left:6px;border-radius:9px;font-size:11px;font-weight:600;background:var(--panel);color:var(--ink-3);border:1px solid var(--line);white-space:nowrap;line-height:1;vertical-align:middle}
.srow .c-wf{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.srow .c-wf .skilltag{margin-left:0}
.srow .c-meta .skilltag{margin-left:8px}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:4px}
.skillc{padding:20px;display:flex;flex-direction:column;gap:12px}
.skillc.on{border-color:var(--brand-bd);box-shadow:0 0 0 1px var(--brand-bd)}
.skillc .sk-h{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
.skillc h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.skillc .sk-h .muted{font-size:13px}
.skillc .sk-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.skillc .sk-d{margin:0;color:var(--ink-2);max-width:60ch;min-height:4.5em}
.skillc .sk-w{margin:0;font-size:13px;color:var(--warn)}
.sk-n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sk-n div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sk-n b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sk-n span{font-size:12px;color:var(--ink-3)}
.skillc .chips2{min-height:26px}
.sk-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.sk-core{margin:16px 0 0;font-size:13px}
.sk-detail{margin-top:16px}
.sk-two{padding:0 20px 20px;align-items:start}
.sk-two .panel h4{justify-content:flex-start}
.stack2{display:flex;flex-direction:column;gap:16px;min-width:0}
.sk-body{padding:4px 0 8px}
.sk-g{margin:12px 16px 4px;font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;display:flex;gap:8px}
.sk-l{list-style:none;margin:0;padding:0}
.sk-l li{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line-2)}
.sk-l li:last-child{border-bottom:0}
.sk-l li > span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sk-l li .muted{font-size:12.5px;white-space:normal}
.panel .sk-f{padding:0 16px 14px}
.eff.xskill{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 14px;border:1px solid var(--brand-bd);background:var(--brand-wash);color:var(--ink);border-radius:var(--radius);font-size:13.5px}
.eff.xskill .i{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand)}
.checks{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.checks li{display:flex;gap:8px;align-items:center;font-size:14px}
.checks .i{width:16px;height:16px;color:var(--ok)}
.apps-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 4px}
.apps tr.clk:hover td{background:var(--hover)}
.apps tr.clk:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.apps .who .nm{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apps .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.apps .tags .skilltag{margin-left:0}
.apps .chev{display:inline-grid;vertical-align:middle;margin-left:6px}
.apps tr.clk[aria-expanded="true"] .chev{transform:rotate(90deg);color:var(--brand)}
.sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px}
.sheet .wide{grid-column:1/-1}
.sheet .panel h4{display:flex;gap:8px;align-items:baseline}
.sheet .panel .pb{padding:12px 16px 14px}
.sheet .sh{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.sheet .sh:first-child{margin-top:0}
.sheet p{margin:0 0 6px}
.cl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cl li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.cl li > span:first-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.cl .muted{font-size:12.5px;white-space:normal}
.kv.one{grid-template-columns:1fr}
@media (max-width:900px){
  .skills{grid-template-columns:1fr}
  .sheet{grid-template-columns:1fr}
  .sk-n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apps-top .seg{max-width:100%;overflow-x:auto}
}

/* the sparkle wears the accent, light or dark */
.spark path{fill:var(--brand)}

/* ---------- Usage: sessions, tokens by model, and compute (js/views/usage.js, js/usage.js) ---------- */
.ph .right .iconbtn{flex:none}
.ubarcell{min-width:160px;width:26%}
.ubar{height:10px;border-radius:5px;background:var(--line-2);overflow:hidden}
.ubar-fill{display:flex;height:100%;gap:1px}
.ubar-fill i{display:block;height:100%}
.ubar-fill i.in,.legend .sw.u-in{background:var(--brand)}
.ubar-fill i.out,.legend .sw.u-out{background:var(--brand-bd)}
.ubars svg{display:block;width:100%;height:96px}
.ubars .hit{fill:transparent}
.ubars rect.u-open{fill:var(--brand-bd)}.legend .sw.u-open{background:var(--brand-bd)}
.ubars rect.u-res{fill:var(--g-ok)}.legend .sw.u-res{background:var(--g-ok)}
.ubars rect.u-min{fill:var(--brand)}.legend .sw.u-min{background:var(--brand)}
.ubars rect.u-act{fill:var(--brand-bd)}.legend .sw.u-act{background:var(--brand-bd)}
.ubars rect{transition:opacity .12s}.ubars g:hover rect:not(.hit){opacity:.75}
.uaxis{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:12px;color:var(--ink-3)}
.ucols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.uh{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--ink-2)}
@media (max-width:900px){.ucols{grid-template-columns:1fr;gap:18px}}
@media (max-width:520px){.sum.three{grid-template-columns:1fr}.ubarcell{min-width:110px}.ph .right{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.ubars rect{transition:none}}

/* Sessions: the list of every session, its filters and its Instant QA column */
.ses-card .subtabs{overflow-x:auto}
.ses-card .subtabs .tabs{flex-wrap:nowrap}
.ses-card .subtabs .tabs button{flex:none}
.ses-tools .field[type="search"]{width:260px}
.ses-tools select.field{width:220px}
.ses-list th,.ses-list td{padding-left:12px;padding-right:12px}
.ses-list td:nth-child(3){white-space:normal;min-width:120px;max-width:200px}
.ses-list td.num{font-variant-numeric:tabular-nums}
.ses-list td.qa{white-space:normal;min-width:210px}
.ses-list .qa-h{font-weight:500}
.ses-list .qa .cellsub{display:flex;flex-wrap:wrap;gap:4px 12px}
.ses-list td .cellsub .mono{font-size:12px}
.ses-more{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line-2);font-size:13px}
.ses-cov{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 16px;font-size:14px}
.ses-cov b{font-weight:500;font-variant-numeric:tabular-nums}
.ses-cov .muted{font-size:13px}
@media (max-width:900px){.ses-tools .field[type="search"],.ses-tools select.field{width:100%}}
.pop .it.muted{padding:8px 14px;font-size:13px;color:var(--ink-3)}
/* The pilot view (js/pilot.js, js/views/pilot-*.js): three pages, nothing that routes or acts */
body.pilot .quick,body.pilot #scopeBtn,body.pilot #skillBtn,body.pilot #askTab,body.pilot #ask{display:none!important}
body.quiet .quick,body.quiet #scopeBtn,body.quiet #skillBtn,body.quiet #bell,body.quiet #bell2,body.quiet #askTab,body.quiet #ask{display:none!important}
.pl-table{width:100%;min-width:640px}
.pl-table td{vertical-align:top}
.pl-table td .cellsub{max-width:420px;white-space:normal}
.pl-note{margin:0;padding:0 20px 12px;font-size:13px}
.pl-count{margin:0 0 12px;font-size:14px}
.pl-alert{margin-bottom:16px}
.pl-alert .card-h .badge{margin-left:auto}
.pl-alert p{margin:0 0 8px;font-size:14px;line-height:1.5}
.pl-who{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.pl-sids{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:4px}
.pl-sid .mono{font-size:12px}
/* one call on Observe (js/views/observe.js) and the alert a list is filtered to */
.pl-alertbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;justify-content:space-between;margin:0 0 12px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:14px}
.pl-alertbar b{display:block}
.pl-open{margin:12px 0 0}
.pl-ses{min-width:720px}
.pl-ses td:first-child{white-space:nowrap}
.pl-ses td:nth-child(2){min-width:110px}
.pl-ses td.qa{min-width:168px}
.pl-ses td .cellsub .badge{margin-top:2px}
.pl-hid{display:inline-block;padding:0 6px;margin:0 1px;border-radius:4px;background:var(--line-2);color:var(--ink-2);font-size:12px;line-height:18px;vertical-align:1px;white-space:nowrap}
.pl-sid{font-size:13px}
/* acting on a pilot alert, the Review queue, Flags, and Setup (js/views/pilot-alerts.js, -review, -flags, -setup) */
.pl-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.pl-acts{display:flex;flex-wrap:wrap;gap:8px}
.pl-resolve{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.pl-resolve label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-3)}
.pl-resolve .pl-note-f{flex:1 1 260px}
.pl-resolve select.field{min-width:200px}
.pl-formbtns{display:flex;gap:8px}
.pl-actmsg{margin:10px 0 0;font-size:14px}
.pl-actmsg.err{color:var(--err)}
.pl-vbtns{display:inline-flex;gap:6px}
.pl-vbtns .gate-tip{display:inline-flex}
.pl-review td.r{white-space:nowrap}
.pl-review td .pl-actmsg{white-space:normal;max-width:320px;margin-left:auto;text-align:left}
.pl-flags{min-width:760px}
.pl-flags td{vertical-align:top;white-space:normal;min-width:160px;overflow-wrap:anywhere}
.pl-flags td:first-child{min-width:170px;white-space:nowrap}
.pl-suglist{list-style:none;margin:0;padding:0}
.pl-sug{padding:14px 0;border-top:1px solid var(--line-2)}
.pl-sug:first-child{border-top:0}
.pl-sug p{margin:6px 0 0;font-size:14px;line-height:1.5}
.pl-sugh{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.pl-sug .pl-acts{margin-top:10px}
.pl-recips{margin:0 0 8px;padding-left:18px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
/* the alert moment: a calm notice, bottom right, never a modal; the live region stays in the page, empty until an alert opens */
.pl-notice{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;width:min(460px,calc(100vw - 32px));padding:14px 12px 14px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--err);border-radius:var(--radius);box-shadow:var(--shadow-pop);opacity:0;transform:translateY(8px);transition:opacity .2s ease-out,transform .2s ease-out}
.pl-notice:empty{display:none}
.pl-notice.on{opacity:1;transform:none}
.pl-notice>.i{flex:none;color:var(--err)}
.pl-ntx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;font-size:14px;line-height:1.4}
.pl-ntx b{font-weight:500}
.pl-ntx .muted{font-size:13px}
.pl-nx{flex:none;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.pl-nx:hover,.pl-nx:focus-visible{background:var(--hover);color:var(--ink)}
@media (max-width:640px){.pl-notice{right:16px;bottom:16px;flex-wrap:wrap}.pl-ntx{flex-basis:calc(100% - 64px)}}
@media (prefers-reduced-motion:reduce){.pl-notice{transition:none;transform:none}}
.pd-back{margin:0 0 8px;font-size:14px}
.pd-back a{display:inline-flex;align-items:center;gap:4px}
.pd-back svg.i{width:16px;height:16px}
.pd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:start}
.pd-col{display:grid;gap:16px;min-width:0}
.pd-col>.card{margin:0}
.pd-pad{margin:0;padding:14px 20px 18px;font-size:14px}
.pd-finds{list-style:none;margin:0;padding:0 0 4px}
.pd-f{display:grid;grid-template-columns:128px minmax(0,1fr);gap:4px 12px;align-items:start;padding:14px 20px;border-top:1px solid var(--line-2);font-size:14px}
.pd-f:first-child{border-top:0}
.pd-f b{display:block}
.pd-f .muted{font-size:13px}
.pd-ev{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.pd-ev b{display:inline;margin-right:4px;color:var(--ink)}
.pd-ptable{min-width:0}
.pd-ptable td .cellsub{white-space:normal}
.pd-lines{list-style:none;margin:0;padding:0 20px 12px}
.pd-l{display:grid;grid-template-columns:176px minmax(0,1fr);gap:2px 16px;padding:10px 0;border-top:1px solid var(--line-2)}
.pd-l:first-child{border-top:0}
.pd-l p{margin:0;font-size:14px;line-height:1.55}
.pd-who{font-size:13px;font-weight:600;color:var(--ink)}
.pd-l.contact .pd-who{color:var(--ink-2)}
.pd-t{display:block;font-weight:400;font-size:12px;color:var(--ink-3)}
@media (max-width:1100px){.pd-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.pd-f{grid-template-columns:minmax(0,1fr)}.pd-l{grid-template-columns:minmax(0,1fr)}.pd-who{display:flex;gap:8px;align-items:baseline}.pd-t{display:inline}.pd-f{padding:12px 16px}.pd-lines{padding:0 16px 8px}}
@media (max-width:900px){.pl-alert .card-h .badge{margin-left:0}}
/* the pilot's own header (js/pilot.js tenantBarHtml): the tenant's mark and subtitle from GET /v1/whoami display, and a quiet Sample data chip */
.pl-tenant{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:1400px;margin:0 auto;padding:24px 36px 0}
.pl-tmark{display:flex;align-items:center;min-height:32px;padding-right:16px;border-right:1px solid var(--line)}
.pl-tlogo{display:block;height:36px;width:auto;max-width:180px}
.pl-tname{font-size:18px;font-weight:600;color:var(--ink)}
.pl-tsub{font-size:16px;font-weight:500;color:var(--ink-2)}
.pl-sample{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink-3);font-size:12px;font-weight:500;cursor:default;outline:none}
.pl-sample:focus-visible{box-shadow:0 0 0 2px var(--primary)}
.pl-sample::after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:min(300px,calc(100vw - 64px));padding:8px 10px;border-radius:6px;background:var(--toast);color:var(--plate);font-size:12px;font-weight:400;line-height:1.45;white-space:normal;box-shadow:var(--shadow-pop);display:none;pointer-events:none}
.pl-sample:hover::after,.pl-sample:focus::after{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pl-tlogo{padding:5px 8px;border-radius:6px;background:var(--plate);height:40px}}
:root[data-theme="dark"] .pl-tlogo{padding:5px 8px;border-radius:6px;background:var(--plate);height:40px}
@media (max-width:900px){.pl-tenant{padding:16px 16px 0;gap:8px 12px}.pl-tmark{padding-right:12px}.pl-tlogo{height:30px}.pl-tsub{font-size:15px}.pl-sample::after{left:auto;right:0}}
/* an actor's name with its vendor's mark (js/vendor-marks.js): a small white chip so the mark reads in both themes */
.pl-actor{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;max-width:100%}
.pl-actor > span:last-child{min-width:0}
.pd-who .pl-actor{align-items:flex-start}.pd-who .vmark{margin-top:-1px}
.vmark{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:var(--plate);border:1px solid var(--line);box-sizing:border-box}
.vmark svg{width:12px;height:12px;display:block}
/* an app directory's tile: white in both themes with a hairline, so a dark mark (Cresta) never vanishes; a light brand (Intercom) gets a dark tile */
.vmark.vm-dark{background:var(--mark-dark);border-color:var(--mark-dark)}
.vmark.vm-letter span{font:600 9px/1 var(--font);letter-spacing:0;color:var(--mark-ink);text-transform:none}
:root[data-theme="dark"] .vmark{border-color:rgba(255,255,255,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vmark{border-color:rgba(255,255,255,.14)}}
@media (max-width:640px){.pl-table{min-width:0}.pl-table thead{display:none}.pl-table,.pl-table tbody,.pl-table tr,.pl-table td{display:block}.pl-table tr{padding:12px 0;border-bottom:1px solid var(--line-2)}.pl-table tr:last-child{border-bottom:0}.pl-table td{border:0;padding:3px 20px;text-align:left;white-space:normal}.pl-table td[data-label]::before{content:attr(data-label);display:inline-block;min-width:96px;color:var(--ink-3);font-size:13px}.pl-table td[data-label="Agreement"]::before{display:block;margin-bottom:2px}}

/* ------------------------------------------------------------------ the product on a live tenant (js/product.js) */
/* the tenant's header on the full portal: the pilot's header; on the Grid a compact bar above the canvas */
body.on-grid .pl-tenant.pl-full{max-width:none;height:56px;padding:0 24px;flex-wrap:nowrap;overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface)}
body.on-grid .pl-full .pl-tlogo{height:28px}
body.on-grid.has-tenant .gx{height:calc(100dvh - 56px)}
@media (max-width:900px){body.on-grid .pl-tenant.pl-full{padding:0 16px;height:52px}body.on-grid.has-tenant .gx{height:calc(100dvh - 108px)}}
/* a View only note: calm, not an error */
.banner.pf-seat{border-color:var(--brand-bd);background:var(--brand-wash);color:var(--ink-2)}
.banner.pf-seat b{color:var(--ink)}
/* Flags */
.pf-count{margin:-4px 0 0;font-size:14px}
.pf-flag{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.pf-flag.is-off .pf-trig,.pf-flag.is-off .pf-rows{opacity:.62}
.pf-h{display:flex;align-items:flex-start;gap:14px}
.pf-t{flex:1;min-width:0}
.pf-t h3{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.pf-meta{margin:4px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.pf-trig{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5}
.pf-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel)}
.pf-f{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;align-items:baseline}
.pf-l{font-size:13px;color:var(--ink-3);font-weight:500}
.pf-f p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pf-inl{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
.pf-num{width:76px;height:32px;padding:0 8px;font-variant-numeric:tabular-nums}
.pf-ck{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.pf-ck input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.pf-why{font-size:13px!important}
.pf-voices{display:flex;flex-direction:column;gap:8px}
.pf-voice{display:grid;grid-template-columns:minmax(0,220px) minmax(0,280px);gap:4px 12px;align-items:center}
.pf-voice-n{font-size:14px;color:var(--ink)}
.pf-voice .field{height:32px;padding:0 10px}
.pf-voice .field[aria-invalid="true"]{border-color:var(--err)}
.pf-foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.pf-btns{display:flex;gap:8px;margin-left:auto}
.pf-msg{margin:0;font-size:14px;color:var(--ink-3)}
.pf-msg.ok{color:var(--ok)}
.pf-msg.err{color:var(--err)}
.pf-sw{position:relative;display:inline-flex;flex:none;margin-top:2px;cursor:pointer}
.pf-sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.pf-track{width:40px;height:24px;border-radius:12px;background:var(--idle-line);position:relative;transition:background .15s}
.pf-track i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--plate);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.pf-sw input:checked + .pf-track{background:var(--brand)}
.pf-sw input:checked + .pf-track i{transform:translateX(16px)}
.pf-sw input:focus-visible + .pf-track{box-shadow:0 0 0 3px var(--brand-wash2)}
.pf-sw input:disabled + .pf-track{opacity:.55;cursor:not-allowed}
.pf-ro{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 12px;margin:0;font-size:14px}
.pf-ro dt{color:var(--ink-3)}.pf-ro dd{margin:0}
/* Flags: on, grouped technical first; off, collapsed; Add a flag */
.pf-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pf-group{display:flex;flex-direction:column;gap:12px}
.pf-gh{margin:10px 0 -2px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.pf-off{padding:0;overflow:hidden}
.pf-offh{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.pf-offh:hover{background:var(--panel)}
.pf-offh:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pf-offhl{display:flex;flex-direction:column;gap:2px;font-size:14px}
.pf-offhl .muted{font-size:13px}
.pf-chev{width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;flex:none;margin:0 2px}
.pf-off.is-open .pf-chev{transform:rotate(45deg)}
.pf-offl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.pf-offi{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;border-top:1px solid var(--line-2)}
.pf-offi:first-child{border-top:0}
.pf-offt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-offt p{margin:0;font-size:13.5px;line-height:1.45}
.pf-offn{display:flex;align-items:center;gap:8px;font-size:14.5px!important;color:var(--ink)}
.pf-add{padding:18px 20px;display:flex;flex-direction:column;gap:12px;border-color:var(--brand-bd)}
.pf-add-h h2{margin:0;font-size:17px;font-weight:600}
.pf-add-h p{margin:4px 0 0;font-size:14px;line-height:1.5}
.pf-add .pf-f{align-items:center}
.pf-add .field:not(.pf-num){height:34px;padding:0 10px;width:100%;max-width:560px}
.pf-fc{display:flex;flex-direction:column;gap:4px;min-width:0}
.pf-delrow{margin:0}
.pf-del{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--err-line);border-radius:8px;background:var(--err-bg)}
.pf-del p{margin:0;font-size:14px;color:var(--ink-2);flex:1;min-width:220px}
@media (max-width:640px){.pf-flag{padding:16px}.pf-f,.pf-ro,.pf-voice{grid-template-columns:minmax(0,1fr)}.pf-btns{margin-left:0;width:100%;justify-content:flex-end}.pf-offi{flex-wrap:wrap}}
/* Notifications */
.pn-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.pn-grid .pn-card:first-child{grid-row:span 2}
.pn-card .card-b p{margin:0 0 8px;font-size:14px;line-height:1.5}
.pn-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.pn-l{display:block;font-weight:600;font-size:14px;margin-bottom:4px}
.pn-btns{display:flex;justify-content:flex-end;margin-top:10px}
.pn-flags{list-style:none;margin:0;padding:0}
.pn-flags li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line-2);font-size:14px}
.pn-flags li:first-child{border-top:0}
.pn-grid + .pn-card{margin-top:16px}
.pn-btns{gap:8px}
.pn-chips{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pn-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-height:30px;padding:0 4px 0 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:13.5px;color:var(--ink)}
.pn-chip.is-hidden{background:var(--panel);color:var(--ink-3)}
.pn-ct{min-width:0;overflow-wrap:anywhere}
.pn-x{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer}
.pn-x:hover{background:var(--hover);color:var(--ink)}
.pn-x:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pn-x .i{width:12px;height:12px}
.pn-addr{display:flex;gap:8px}
.pn-addr .field{flex:1;min-width:0}
.pn-hint{margin:6px 0 10px!important}
.pn-add .pf-msg{margin-top:6px}
.pn-ch{list-style:none;margin:0;padding:0}
.pn-chr{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:6px 12px;padding:12px 0;border-top:1px solid var(--line-2)}
.pn-chr:first-child{border-top:0}
.pn-chr .vmark{width:28px;height:28px;border-radius:8px}
.pn-chr .vmark svg{width:18px;height:18px}
.pn-chr .vmark.vm-letter span{font-size:12px}
.pn-cht{display:flex;flex-direction:column;gap:2px;min-width:0}
.pn-cht .muted{font-size:13px}
.pn-chn{font-weight:600;font-size:14.5px}
.pn-chb{padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.pn-chb::after{content:"";position:absolute;inset:0}
.pn-chb:focus-visible{outline:none}
.pn-chb:focus-visible::after{outline:2px solid var(--brand);outline-offset:-2px;border-radius:8px}
.pn-chr.is-soon .pn-chn{color:var(--ink-2)}
.pn-chr.is-soon .pn-sw{pointer-events:none}
.pn-chr.is-soon .vmark{opacity:.6}
.pn-wh{grid-column:2/-1;display:flex;gap:8px;position:relative;z-index:0}
.pn-wh .field{flex:1;min-width:0;opacity:.6;cursor:not-allowed}
.pn-wh .btn:disabled{opacity:.55;cursor:not-allowed}
.pn-soon-msg{grid-column:2/-1;margin:0!important;font-size:13px!important;min-height:0}
.pn-soon-msg:empty{display:none}
@media (max-width:900px){.pn-grid{grid-template-columns:minmax(0,1fr)}.pn-grid .pn-card:first-child{grid-row:auto}}
@media (max-width:640px){.pn-chr{grid-template-columns:auto minmax(0,1fr) auto}.pn-chr .badge.out{grid-column:2;justify-self:start}.pn-chr .pn-sw{grid-column:3;grid-row:1}}
/* Notifications: groups, who hears about each flag, live channels */
.pn-card + .pn-card{margin-top:16px}
.pn-gl,.pn-rl{list-style:none;margin:0;padding:0}
.pn-g{padding:16px 0;border-top:1px solid var(--line-2)}
.pn-g:first-child{border-top:0;padding-top:4px}
.pn-gh{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.pn-gh .muted{font-size:13px}
.pn-gn{font-size:15px}
.pn-gname{flex:1;min-width:0;max-width:340px}
.pn-gname .field{width:100%}
.pn-gch{margin:12px 0 0;padding:0;border:0;min-width:0}
.pn-gch legend{padding:0;margin-bottom:6px;font-weight:600;font-size:14px}
.pn-gcs{display:flex;flex-wrap:wrap;gap:6px 18px}
.pn-gc{display:inline-flex;align-items:center;gap:7px;font-size:14px;cursor:pointer}
.pn-gc input{width:16px;height:16px;margin:0;accent-color:var(--brand);cursor:pointer}
.pn-gc input:disabled{cursor:not-allowed}
.pn-gc.is-off{color:var(--ink-3)}
.pn-gc .muted{font-size:13px}
.pn-g .pn-add{margin-top:8px}
.pn-g .pn-form{margin-top:10px;padding-top:0;border-top:0}
.pn-gm{display:inline-flex}
.pn-rl ~ .pn-off{margin-top:10px!important}
.pn-rt{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:8px 16px;padding:10px 0;border-top:1px solid var(--line-2);font-size:14px}
.pn-rt:first-child{border-top:0}
.pn-rt.is-off .pn-rn a{color:var(--ink-3)}
.pn-rg{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pn-rg .muted{font-size:13px}
.pn-gt{min-height:30px;padding:0 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;cursor:pointer}
.pn-gt:hover:not(:disabled){background:var(--hover);color:var(--ink)}
.pn-gt[aria-pressed="true"]{background:var(--brand-wash);border-color:var(--brand-bd);color:var(--ink);font-weight:600}
.pn-gt:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.pn-gt:disabled{cursor:default;opacity:.7}
.pn-gl ~ .pf-msg,.pn-rl ~ .pf-msg{margin-top:12px}
.pn-chx{grid-column:2/-1;display:flex;flex-direction:column;gap:8px;min-width:0}
.pn-chx p{margin:0!important;font-size:13px!important}
.pn-chx .pn-btns{margin-top:2px}
.pn-cu{display:flex;align-items:center;gap:8px;min-width:0}
.pn-cu .field{flex:1;min-width:0}
.pn-url{flex:0 1 auto;min-width:0;max-width:100%;overflow-wrap:anywhere;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink-2);font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pn-sec{display:flex;flex-direction:column;gap:4px}
.pn-sec .pn-l{margin:0;font-size:13px}
@media (max-width:640px){.pn-rt{grid-template-columns:minmax(0,1fr)}.pn-gh{flex-direction:column;align-items:stretch}.pn-gname{max-width:none}.pn-chx{grid-column:1/-1}.pn-cu{flex-wrap:wrap}}
.ps-alt{margin:-6px 0 0}
/* what this grid has not turned on: grayed, never a control, one plain line each (js/product.js NOT_ON) */
.not-on{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.not-on li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px dashed var(--line);border-radius:8px;color:var(--ink-3);font-size:13.5px;line-height:1.45;cursor:not-allowed;user-select:none}
.not-on-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.not-on b{color:var(--ink-3);font-weight:600;font-size:14px}
.not-on-why{flex:none;font-size:12px;padding:1px 8px;border-radius:10px;border:1px solid var(--line);color:var(--ink-3)}
.gx-off[disabled]{opacity:.5;cursor:not-allowed}
.pf-quiet{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-sum{flex:1;min-width:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13.5px;color:var(--ink-2)}
.pf-sum b{font-weight:500;color:var(--ink-3);margin-right:4px}
.pf-flag{gap:8px}
/* how a flag is determined, and what the grid recommends for it (js/views/flags.js) */
.pf-how{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.pf-how b{font-weight:600;color:var(--ink-2)}
.pf-rec{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--brand-bd);border-radius:8px;background:var(--brand-wash)}
.pf-rec-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pf-rec-t p{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.pf-rec-t b{font-weight:500}
.pf-rec-c{margin:0;font-size:13.5px}
.pf-rec-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pf-rec-n{font-size:12.5px}
.pf-quietrec{margin:0;font-size:13px}
.pf-flag.is-focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash2)}
.pl-alert.is-focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash2)}
tr.is-focus{background:var(--brand-wash2)}
/* an alert's why (js/views/pilot-alerts.js) */
.pl-why{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);font-size:14px;line-height:1.5;color:var(--ink-2)}
.pl-why b{font-weight:600;color:var(--ink)}
@media (max-width:900px){body.has-tenant .gx-crumbs{display:none}}

/* The user agent's chat line (js/user-agent-ui.js): always open at the bottom of every page of the full portal on a
   live tenant, expanding into the conversation above it. Not a floating bubble (Nate, 2026-09). */
body.ua-on #askTab,body.ua-on #ask{display:none!important}
body.ua-on .page{padding-bottom:132px}
.ua{position:fixed;left:var(--side);right:0;bottom:0;z-index:44;display:flex;flex-direction:column;align-items:center;padding:0 24px 16px;pointer-events:none}
.ua > *{pointer-events:auto;width:100%;max-width:880px}
.ua::before{content:"";position:absolute;inset:auto 0 0 0;height:72px;background:linear-gradient(to top,var(--bg) 55%,transparent);pointer-events:none;z-index:-1}
.ua-line{display:flex;align-items:center;gap:8px;height:52px;padding:0 6px 0 16px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow-pop)}
.ua-line:focus-within{border-color:var(--brand);box-shadow:var(--shadow-pop),0 0 0 3px var(--brand-wash2)}
.ua-spark{width:18px;height:18px;flex:none;fill:var(--brand)}
.ua-input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none}
.ua-input::placeholder{color:var(--ink-3)}
.ua-ctx{flex:none;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--ink-3);background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:3px 10px}
.ua-send{flex:none;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);cursor:pointer}
.ua-send:hover{background:var(--primary-d)}
.ua-send:disabled{background:var(--line);color:var(--ink-3);cursor:default}
.ua-send .i{width:16px;height:16px}
.ua-off{margin:0;align-self:center;width:auto!important;font-size:12.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:5px 12px}
.ua-panel{display:flex;flex-direction:column;max-height:min(62vh,640px);margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-pop);overflow:hidden}
.ua-top{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line-2)}
.ua-top b{font-size:14px;font-weight:600;color:var(--ink)}
.ua-sub{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ua-top .sp{flex:1}
.ua-thread{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.ua-msg{max-width:100%;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ua-msg p{margin:0 0 6px}.ua-msg p:last-child{margin-bottom:0}
.ua-msg ul{margin:4px 0 6px;padding-left:20px}
.ua-msg.me{align-self:flex-end;max-width:78%;background:var(--brand-wash);color:var(--ink);padding:9px 14px;border-radius:16px 16px 4px 16px}
.ua-msg.agent{align-self:stretch}
.ua-steps{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ua-steps li{font-size:12px;color:var(--ink-3);background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:2px 9px}
.ua-steps li::before{content:"\2713";margin-right:5px;color:var(--ok)}
.ua-think{color:var(--ink-3);font-size:13.5px}
.ua-think::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:ua-dots 1.2s steps(4,end) infinite}
@keyframes ua-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.ua-think::after{animation:none;content:"..."}}
.ua-err{margin:6px 0 0;font-size:13.5px;color:var(--err)}
.ua-empty p{margin:0 0 10px;color:var(--ink-3);font-size:14px}
.ua-chips{display:flex;flex-wrap:wrap;gap:8px}
.ua-card{margin:10px 0 2px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.ua-card.is-pending{border-color:var(--brand-bd);background:var(--surface);box-shadow:0 0 0 3px var(--brand-wash)}
.ua-card-h{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ua-card-h b{font-size:14px;color:var(--ink);font-weight:600}
.ua-diff{width:auto;max-width:100%;align-self:flex-start;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.ua-diff th,.ua-diff td{border:0;background:none;white-space:normal}
.ua-diff thead th{font-size:11.5px;font-weight:500;color:var(--ink-3);text-align:left;padding:0 8px 4px 0;letter-spacing:.02em}
.ua-diff tbody th{font-weight:500;color:var(--ink-2);text-align:left;padding:4px 24px 4px 0;white-space:nowrap;vertical-align:top}
.ua-diff td{padding:4px 12px 4px 0;vertical-align:top;overflow-wrap:anywhere;min-width:48px}
.ua-before{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--line)}
.ua-diff td.ua-arrow{color:var(--ink-3);min-width:0;padding-right:12px}
.ua-after{color:var(--ink);font-weight:600}
.ua-call{align-self:flex-start;font:500 12px/1.4 var(--mono);color:var(--ink-3);background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:2px 7px}
.ua-note{margin:0;font-size:13px;color:var(--ink-2)}
.ua-st{margin:0;font-size:13px;color:var(--ink-3)}.ua-st.ok{color:var(--ok)}.ua-st.err{color:var(--err)}
.ua-acts{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:900px){
  .ua{left:0;padding:0 12px 12px}
  body.drawer .ua{display:none}
  .ua-ctx{display:none}
  .ua-sub{display:none}
  .ua-panel{max-height:68vh}
}

/* Settings, People and roles (js/views/people.js): the people list, the roles and what each can do, and the tabs not set up yet */
.tabs button.tab-off{color:var(--idle);opacity:.75}
.tabs button.tab-off[aria-selected="true"]{opacity:1;border-bottom-color:var(--idle);color:var(--ink-3)}
.pp-gap{display:grid;gap:16px}
.pp-ro{display:flex;align-items:center;gap:8px;margin:0 20px 12px;padding:10px 12px;border-radius:8px;background:var(--line-2);color:var(--ink-2);font-size:13.5px}
.pp-ro svg{flex:none;color:var(--ink-3)}
.pp-err{margin:0 20px 12px;font-size:13px}
.pp-table td{vertical-align:top;white-space:normal}
.pp-table td:first-child{min-width:200px}
.pp-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pp-id{font-size:12px;margin-top:2px}
.pp-id code{font-size:11.5px}
.pp-also{font-size:12px;margin-top:2px}
.pp-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.pp-edit{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pp-edit .field{width:auto;min-width:120px;height:30px}
.pp-toks{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:12px;color:var(--ink-3)}
.pp-toks li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pp-machines{margin:0;padding:12px 20px 16px;font-size:13px}
.pp-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,200px) auto;gap:12px;align-items:end;margin:0 20px 16px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--line-2)}
.pp-invite label{display:grid;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.pp-invite-b{display:flex;gap:8px}
.pp-invite p{grid-column:1/-1;margin:0;font-size:12.5px}
.pp-roles{list-style:none;margin:0;padding:0 20px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.pp-roles li{display:grid;gap:6px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pp-roles li b{color:var(--ink);font-size:14.5px}
.pp-roles .badge{height:20px;font-size:11.5px;padding:0 7px}
.pp-matrix th.c,.pp-matrix td.c{text-align:center;width:96px}
.pp-yes{display:inline-flex;color:var(--ok)}
.pp-no{color:var(--idle);font-size:12.5px}
.pp-off{padding:0 20px 18px;display:grid;gap:12px}
.pp-off p{margin:0;font-size:13.5px}
.pp-self{font-size:12.5px;white-space:nowrap}
.pp-acts .btn:disabled{opacity:.5;cursor:not-allowed}
.pp-matrix td:first-child{white-space:normal}
@media (max-width:640px){
  .pp-table thead{display:none}
  .pp-table,.pp-table tbody,.pp-table tr{display:block}
  .pp-table tr{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .pp-table td{display:block;border:0;padding:4px 12px}
  .pp-table td:first-child{min-width:0}
  .pp-table td:nth-child(3),.pp-table td:nth-child(4){display:inline-block}
  .pp-table td:nth-child(4)::before{content:"Tokens ";color:var(--ink-3);font-size:12.5px}
  .pp-matrix{font-size:12.5px}
  .pp-matrix th,.pp-matrix td{padding-left:4px;padding-right:4px}
  .pp-matrix th.c{font-size:11px}
  .pp-matrix td:first-child{width:38%}
  .pp-matrix th:first-child,.pp-matrix td:first-child{padding-left:12px}
  .pp-invite{grid-template-columns:1fr;margin:0 12px 14px}
  .pp-ro,.pp-err{margin-left:12px;margin-right:12px}
  .pp-roles,.pp-off{padding-left:12px;padding-right:12px}
  .pp-matrix th.c,.pp-matrix td.c{width:auto;padding-left:8px;padding-right:8px}
  .pp-acts{justify-content:flex-start}
}

/* ---------- in-app notifications: the bell's number, the slide-over panel, and the toast (js/views/notification-panel.js) ---------- */
.bell-badge{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--badge-bg);color:var(--badge-ink);font-size:10.5px;font-weight:700;line-height:17px;text-align:center;box-shadow:0 0 0 2px var(--surface);font-variant-numeric:tabular-nums;pointer-events:none}
.bell-badge[hidden]{display:none}
.bell-badge.bump{animation:nf-bump .4s cubic-bezier(.3,1.6,.5,1)}
.bell-badge.dot{min-width:0;width:9px;height:9px;padding:0;top:1px;right:1px}
@keyframes nf-bump{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.mbar .iconbtn{margin-left:auto}
.mbar .iconbtn + .avatar{margin-left:0}
.mbar .iconbtn#menuBtn{margin-left:0}
.nf-scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.nf-scrim.on{opacity:1;pointer-events:auto}
.nf-panel{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-panel);display:flex;flex-direction:column;z-index:72;transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;visibility:hidden}
.nf-panel.on{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.nf-panel:focus{outline:none}
.nf-head{display:flex;align-items:center;gap:8px;padding:16px 12px 0 20px}
.nf-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;flex:1}
.nf-tabs{display:flex;align-items:flex-end;gap:4px;padding:6px 12px 0 12px;border-bottom:1px solid var(--line)}
.nf-tabs .sp{flex:1}
.nf-tab{border:0;background:transparent;height:40px;padding:0 10px;color:var(--ink-3);font:inherit;font-weight:500;font-size:14px;cursor:pointer;position:relative;display:inline-flex;align-items:center;gap:7px}
.nf-tab:hover{color:var(--ink)}
.nf-tab[aria-selected="true"]{color:var(--brand)}
.nf-tab[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.nf-tab .c{min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:var(--brand-wash);color:var(--brand-d);font-size:11.5px;font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.nf-tab .c[hidden]{display:none}
.nf-markall{border:0;background:transparent;color:var(--brand);font:inherit;font-weight:500;font-size:13px;height:30px;padding:0 10px;border-radius:8px;cursor:pointer;margin-bottom:5px}
.nf-markall:hover{background:var(--brand-wash)}
.nf-markall:disabled{color:var(--ink-3);opacity:.6;cursor:default;background:transparent}
.nf-body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.nf-grp{position:sticky;top:0;background:var(--surface);padding:14px 20px 6px;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;z-index:2}
.nf-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:12px 20px;border-top:1px solid var(--line-2);transition:background .12s}
.nf-grp + .nf-row{border-top:0}
.nf-row:hover{background:var(--hover)}
.nf-row.unread{background:var(--unread-bg)}
.nf-row.unread:hover{background:var(--brand-wash)}
.nf-row.fresh{animation:nf-fresh .5s ease-out}
@keyframes nf-fresh{from{background:var(--brand-wash2);transform:translateY(-6px);opacity:.2}to{transform:none;opacity:1}}
.nf-ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.nf-ico.warn{background:var(--warn-bg);color:var(--warn)}
.nf-ico.err{background:var(--err-bg);color:var(--err)}
.nf-ico.ok{background:var(--ok-bg);color:var(--ok)}
.nf-ico.brand{background:var(--brand-wash);color:var(--brand)}
.nf-ico.idle{background:var(--line-2);color:var(--ink-3)}
.nf-txt{min-width:0}
.nf-title{display:block;color:var(--ink);font-size:14px;font-weight:500;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
a.nf-title::after{content:"";position:absolute;inset:0}
.nf-row.unread .nf-title{font-weight:600}
.nf-sent{margin:2px 0 0;font-size:13px;color:var(--ink-3);line-height:1.4;overflow-wrap:anywhere}
.nf-row.unread .nf-sent{color:var(--ink-2)}
.nf-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-top:2px;min-width:44px}
.nf-time{font-size:12px;color:var(--ink-3);white-space:nowrap}
.nf-dot{width:8px;height:8px;border-radius:50%;background:var(--dot)}
.nf-acts{display:flex;gap:8px;margin-top:10px;position:relative;z-index:3;flex-wrap:wrap}
.nf-acts a.btn{text-decoration:none}
.nf-note{position:relative;z-index:3;margin-top:8px}
.nf-row.closed .nf-title{color:var(--ink-2)}
.nf-foot{border-top:1px solid var(--line);padding:6px 12px;background:var(--surface)}
.nf-foot a{display:flex;align-items:center;gap:10px;height:44px;padding:0 10px;border-radius:8px;color:var(--ink-2);font-weight:500;font-size:14px;text-decoration:none}
.nf-foot a:hover{background:var(--hover);color:var(--ink)}
.nf-foot a .go{margin-left:auto;color:var(--ink-3)}
.nf-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 32px 24px}
.nf-empty .ring{width:64px;height:64px;border-radius:50%;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center;margin-bottom:16px}
.nf-empty .ring svg.i{width:28px;height:28px}
.nf-empty b{font-size:16px;font-weight:600}
.nf-empty span:not(.ring){color:var(--ink-3);font-size:13px;margin-top:4px;max-width:260px}
.nf-toast{position:fixed;top:20px;right:20px;width:372px;max-width:calc(100vw - 24px);background:var(--toast);color:var(--toast-ink);border-radius:12px;box-shadow:var(--shadow-pop);padding:14px 12px 12px 14px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:12px;z-index:98;opacity:0;transform:translateX(28px);pointer-events:none;visibility:hidden;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s}
.nf-toast.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .22s,transform .3s cubic-bezier(.2,.8,.2,1)}
.nf-toast .nf-ico{width:32px;height:32px;margin:0}
.nf-toast .nf-ico.warn{background:rgba(253,214,99,.18);color:var(--toast-warn)}
.nf-toast .nf-ico.err{background:rgba(242,139,130,.2);color:var(--toast-err)}
.nf-toast .nf-ico.ok{background:rgba(129,201,149,.2);color:var(--toast-ok)}
.nf-toast .nf-ico.brand{background:rgba(138,180,248,.22);color:var(--toast-brand)}
.nf-toast .nf-ico.idle{background:rgba(255,255,255,.14);color:var(--toast-ink)}
.nf-toast b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.nf-toast p{margin:2px 0 0;font-size:13px;color:var(--toast-ink-2);line-height:1.4}
.nf-tact{margin-top:8px;display:flex;gap:14px}
.nf-tact button{background:none;border:0;padding:0;color:var(--toast-act);font:inherit;font-weight:500;cursor:pointer;font-size:13px}
.nf-tact button:hover{text-decoration:underline}
.nf-x{width:28px;height:28px;border:0;background:transparent;color:var(--toast-ink-2);border-radius:6px;cursor:pointer;display:grid;place-items:center}
.nf-x:hover{background:var(--toast-line);color:var(--toast-ink)}
@media (max-width:900px){.nf-toast{top:10px;right:12px;left:12px;width:auto;transform:translateY(-24px)}.nf-toast.on{transform:none}}
@media (max-width:520px){.nf-panel{width:100%;border-left:0}.nf-head{padding-top:12px}}
@media (prefers-reduced-motion:reduce){.nf-panel,.nf-scrim,.nf-toast,.nf-row,.bell-badge{transition:none!important;animation:none!important}}

/* ---------- the simple shell (briefs/portal-simple-saas.md): the tenant switcher, the login page, the Tenants page ---------- */
body.simple .quick,body.simple #scopeBtn,body.simple #skillBtn,body.simple #askTab,body.simple #ask,body.simple .ua-line{display:none!important}
.tenant-btn{margin-top:4px}
.tenant-btn .sc-ic{background:var(--brand-wash);color:var(--brand)}
body.collapsed .tenant-btn .sc-t,body.collapsed .tenant-btn>svg{display:none}
.pop .srch .field{width:100%}
body.login .side,body.login .mbar,body.login .scrim,body.login #askTab,body.login #bell,body.login #bell2{display:none!important}
body.login .app{grid-template-columns:1fr;background:var(--panel)}
body.login .page{padding:0;min-height:100vh;display:grid;place-items:center}
.login{width:100%;padding:24px 16px}
/* a rail page's head (js/shell.js groupHeadHtml): its name, one question, its tabs; the view's own title and words give way */
.grp{margin:0 0 18px}
.grp h1{margin:0;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.grp .q{margin:4px 0 0;color:var(--ink-3)}
.grp .grp-tabs{margin-top:14px}
.grp .grp-tabs a{padding:10px 0 11px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500;text-decoration:none}
.grp .grp-tabs a:hover{color:var(--ink)}
.grp .grp-tabs a[aria-current="page"]{border-bottom-color:var(--brand);color:var(--brand)}
.page > .grp ~ .ph > div:first-child{display:none}
.page > .grp ~ .ph:has(> .right:empty){display:none}
body.on-grid .page > .grp{padding:20px 24px 0;margin:0}
@media (max-width:900px){.grp h1{font-size:24px}body.on-grid .page > .grp{padding:16px 16px 0}}
.login-card{max-width:420px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px 28px 22px;box-shadow:var(--shadow-pop)}
.login-mark{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',Inter,sans-serif;font-weight:500;font-size:18px;margin-bottom:18px}
.login-mark .logo{width:26px;height:26px}
.login-card h1{margin:0 0 10px;font-size:24px;font-weight:600;letter-spacing:-.01em}
.login-card .field{width:100%;margin-top:4px}
.login-card .btn.primary{width:100%;justify-content:center;height:40px}
.signin-with{display:grid;gap:8px}
.login-card .signin-with .btn{width:100%;justify-content:center;height:40px}
.login-demo{margin:16px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
.linkbtn{border:0;background:none;padding:0;font:inherit;color:var(--brand);cursor:pointer;text-decoration:underline}
.tn-list{display:grid;gap:0}
.tn-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-2);text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;cursor:pointer;font:inherit;color:inherit}
.tn-row:hover{background:var(--hover)}
.tn-row b{display:block;font-weight:600}
.tn-row .muted{font-size:12px}
.tn-row.head{cursor:default;font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;border-top:0}
.tn-row.head:hover{background:none}
.tn-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.tn-form label{display:block;font-size:13px;color:var(--ink-2)}
.tn-form .field,.tn-form select{width:100%;margin-top:4px}
.tn-form .wide{grid-column:1/-1}
.tn-search{display:flex;gap:8px;align-items:center;padding:12px 16px}
.tn-search .field{flex:1}
@media (max-width:900px){.tn-row{grid-template-columns:minmax(0,1fr) auto}.tn-row .tn-org,.tn-row .tn-kind,.tn-row.head{display:none}.tn-form{grid-template-columns:1fr}}
/* Agents (js/views/agents.js): every agent, desk, and app with its health, calls today, and lessons; Connect an agent */
.grp{position:relative}
.grp .grp-seg{position:absolute;top:4px;right:0;display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.grp .grp-seg a{padding:5px 14px;font-size:13px;font-weight:500;color:var(--ink-3);text-decoration:none;line-height:20px}
.grp .grp-seg a + a{border-left:1px solid var(--line)}
.grp .grp-seg a:hover{color:var(--ink);background:var(--hover)}
.grp .grp-seg a[aria-current="page"]{color:var(--brand);background:var(--brand-wash)}
body.on-grid .page > .grp .grp-seg{top:24px;right:24px}
.ag-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.ag-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.ag-tools .badge.out{margin-left:auto}
.ag-tools > .btn,.ag-tools > .gate-tip{flex:none}
.ag-tools > .badge.out + .btn,.ag-tools > .badge.out + .gate-tip{margin-left:0}
.ag-tools > .ag-sum + .btn,.ag-tools > .ag-sum + .gate-tip{margin-left:auto}
.ag-list{list-style:none;margin:0;padding:0}
.ag-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.7fr) minmax(0,1.7fr) minmax(0,.55fr) minmax(0,1.3fr);gap:6px 16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-2)}
.ag-list .ag-head{border-top:0;padding-top:10px;padding-bottom:8px;font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.ag-head span:nth-child(5),.ag-c{text-align:right}
.ag-row.h-attention{box-shadow:inset 3px 0 0 var(--err)}
.ag-row.is-focus{outline:2px solid var(--brand);outline-offset:-2px}
.ag-who{display:flex;align-items:center;gap:8px;min-width:0}
.ag-n{font-weight:600;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.ag-n a{color:inherit}
.ag-n a:hover{color:var(--brand)}
.ag-v,.ag-k{min-width:0;font-size:13px;color:var(--ink-2)}
.ag-h{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.ag-why{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.ag-row.h-attention .ag-why{color:var(--ink-2)}
.ag-c b{font-weight:600;font-variant-numeric:tabular-nums}
.ag-lsns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.ag-lsn{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border:1px solid var(--line);border-radius:12px;font-size:12.5px;color:var(--ink);text-decoration:none;background:var(--surface)}
.ag-lsn:hover{border-color:var(--brand-bd);background:var(--brand-wash)}
.ag-lsn span{color:var(--ink-3);font-size:12px}
.ag-lsn.s-on{border-color:var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.ag-l > .muted{font-size:12.5px}
.ag-connect .card-h{border-bottom:1px solid var(--line-2)}
.ag-steps{list-style:none;margin:0;padding:6px 20px 18px}
.ag-step{padding:14px 0 4px;border-top:1px solid var(--line-2)}
.ag-step:first-child{border-top:0}
.ag-step h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;font-weight:600}
.ag-sn{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--primary);color:var(--on-primary);font-size:12.5px;font-weight:600}
.ag-sn .i{width:14px;height:14px}
.ag-step.is-done .ag-sn{background:var(--ok-bg);color:var(--ok)}
.ag-step.is-off h3{color:var(--ink-3);margin-bottom:6px}
.ag-step.is-off .ag-sn{background:var(--hover);color:var(--ink-3)}
.ag-sb{padding-left:34px;min-width:0}
.ag-sb > p{margin:0 0 10px}
.ag-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.ag-tile{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer}
.ag-tile:hover{background:var(--hover)}
.ag-tile.is-on{border-color:var(--brand);background:var(--brand-wash)}
.ag-tile > span:not(.vmark):not(.badge){display:flex;flex-direction:column;min-width:0;flex:1}
.ag-tile small{font-size:12px;color:var(--ink-3)}
.ag-tile .vmark{width:24px;height:24px;border-radius:6px}
.ag-tile .vmark svg{width:15px;height:15px}
.ag-form{margin-top:4px}
.ag-more{border:1px solid var(--line-2);border-radius:8px;padding:8px 12px}
.ag-more summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-2)}
.ag-more[open] summary{margin-bottom:12px}
.ag-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
.ag-sb .tokcard{margin:12px 0}
.ag-sb .okline{margin-top:0}
.ag-sb .codeblock{margin-bottom:8px}
.ag-first{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px}
.ag-first .i{width:16px;height:16px;color:var(--ok);flex:none}
.ag-agree{margin-bottom:16px}
.ag-agree-b{display:flex;flex-wrap:wrap;align-items:center;gap:16px 40px}
.ag-big{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-big b{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.ag-big b.muted{font-size:16px;font-weight:600}
.ag-big span{font-size:13px;color:var(--ink-3)}
.ag-facts{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0}
.ag-facts dt{font-size:12.5px;color:var(--ink-3)}
.ag-facts dd{margin:2px 0 0;font-weight:500;overflow-wrap:anywhere}
.ag-dis{padding:0 20px 16px;border-top:1px solid var(--line-2)}
.ag-dis h3{margin:14px 0 6px;font-size:14px;font-weight:600}
.ag-dis ul{list-style:none;margin:0;padding:0}
.ag-dis-row{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,200px) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.ag-dis-row:first-child{border-top:0}
.ag-dis-more{margin:8px 0 0;font-size:13px}
@media (max-width:900px){
  .grp .grp-seg{top:2px}
  body.on-grid .page > .grp .grp-seg{top:16px;right:16px}
  .ag-list .ag-head{display:none}
  .ag-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 16px}
  .ag-who{grid-column:1}
  .ag-c{grid-column:2;grid-row:1;justify-self:end;font-size:13px;color:var(--ink-3)}
  .ag-c::after{content:" today"}
  .ag-c .muted{display:none}
  .ag-v,.ag-k{grid-row:2;font-size:12.5px;color:var(--ink-3)}
  .ag-v{grid-column:1}
  .ag-k{grid-column:2;justify-self:end}
  .ag-h,.ag-l{grid-column:1/-1}
  .ag-l:empty,.ag-l > .muted{display:none}
  .ag-row:has(.ag-c .muted) .ag-c::after{content:none}
  .ag-sb{padding-left:0}
  .ag-steps{padding:4px 16px 16px}
  .ag-tiles{grid-template-columns:1fr}
  .ag-dis{padding:0 16px 14px}
  .ag-dis-row{grid-template-columns:minmax(0,1fr)}
}
/* Observe (js/views/observe.js): one list of calls, flags inline; a call opens what was flagged and why */
.obs-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 16px 0;border-bottom:1px solid var(--line)}
.obs-tools .tabs{border-bottom:0;margin:0;gap:20px}
.obs-tools .obs-agent{min-width:0;max-width:240px}
.obs-tools .badge.out{margin-left:auto}
.obs-list{list-style:none;margin:0;padding:0}
.obs-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1.6fr);gap:6px 16px;align-items:center;padding:12px 16px;border-top:1px solid var(--line-2);color:inherit;text-decoration:none}
.obs-list li:first-child .obs-row{border-top:0}
.obs-row:hover{background:var(--hover)}
.obs-row.is-flagged{box-shadow:inset 3px 0 0 var(--err)}
.obs-call b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obs-call .muted{font-size:12px}
.obs-who,.obs-out{min-width:0}
.obs-flags{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.obs-flags .badge{white-space:normal;height:auto;min-height:22px;padding:3px 9px;line-height:1.25}
.obs-acts{display:flex;gap:8px;flex-wrap:wrap}
.obs-dh{margin:4px 0 16px}
.obs-dh h2{margin:0 0 4px;font-size:22px;font-weight:600}
.obs-dh p{margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.obs-fs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.obs-f b{display:block}
.obs-f .muted{font-size:13px}
.obs-review{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.obs-review .muted{font-size:12px}
.page > .pd-tx,.page > .obs-dh + .card{margin-bottom:16px}
@media (max-width:900px){.obs-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.obs-who{grid-column:1}.obs-out{grid-column:2;grid-row:1;justify-self:end}.obs-call{grid-column:1/-1}.obs-flags{grid-column:1/-1}.obs-flags:empty{display:none}.obs-tools .obs-agent{max-width:none;flex:1 1 100%}.obs-tools .tabs{gap:16px}}
/* Train (js/views/train.js): the labels, and what to flag under the lessons */
.trn-note{margin:0 0 12px;color:var(--ink-3);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.trn-k{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 4px}
.trn-flags .card-h .btn{margin-left:auto}
.trn-fl{list-style:none;margin:0;padding:4px 16px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 20px}
.trn-fl li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Train's roll out and roll back confirm (js/views/train.js confirmHtml): who decides, the line, the agents it reaches */
.lsn-cf-who .i{width:22px;height:22px;flex:none;color:var(--brand-d);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lsn-cf-who{display:flex;align-items:center;gap:8px;color:var(--ink)}
.lsn-cf-line{margin:0 0 12px;padding:10px 12px;border-radius:var(--radius);background:var(--brand-wash);color:var(--ink);font-size:13.5px;line-height:1.5}
.modal .mb .lsn-cf{list-style:none;margin:0;padding:0;display:grid;gap:7px;max-height:min(34vh,300px);overflow:auto}
.lsn-cf li{display:flex;gap:10px;align-items:flex-start;font-size:13px}
.lsn-cf li .vmark{margin-top:2px}
.lsn-cf li > span{display:flex;flex-direction:column}
.lsn-cf b{font-weight:600;color:var(--ink)}
.backdrop .modal:has(.lsn-cf){width:min(580px,100%)}
/* Train, lesson first: one card per lesson, its agents as chips (a chip opens what a person can do for that agent) */
.trn-lessons{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.trn-lesson{padding:16px 20px}
.trn-lesson.has-wait{border-color:var(--brand)}
.trn-lesson.is-focus{outline:2px solid var(--brand);outline-offset:2px}
.trn-lesson header{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-start;justify-content:space-between}
.trn-lesson h2{margin:0 0 2px;font-size:18px;font-weight:600}
.trn-lesson .st{font-size:13px}
.trn-acts{display:flex;gap:8px;flex-wrap:wrap}
.trn-line{margin:10px 0 6px;padding:0 0 0 12px;border-left:3px solid var(--line);color:var(--ink-2)}
.trn-from{margin:0 0 4px;font-size:13px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.trn-from .trn-k{margin:0}
.trn-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.trn-chips li{position:relative}
.trn-chip summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 10px 3px 6px;border:1px solid var(--line);border-radius:15px;background:var(--surface);cursor:pointer;font-size:13px}
.trn-chip summary::-webkit-details-marker{display:none}
.trn-chip.s-on summary{border-color:var(--ok);background:var(--ok-bg)}
.trn-chip .trn-cs{font-size:12px;color:var(--ink-3)}
.trn-chip.s-on .trn-cs{color:var(--ok)}
.trn-chip[open] summary{box-shadow:0 0 0 3px var(--brand-wash2)}
.trn-menu{position:absolute;z-index:5;top:calc(100% + 4px);left:0;min-width:220px;max-width:min(300px,calc(100vw - 64px));padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow-pop);display:grid;gap:8px}
.trn-menu .muted{font-size:12px}
.trn-menu .btn{white-space:normal;height:auto;min-height:32px;padding:6px 12px}
@media (max-width:900px){.trn-lesson{padding:14px 16px}}