/* AI page (Connection), AI2 build of ai/AI-SPEC.md (DR-145). Classes ai2-*, on the DS-1 parts the app already has (card.css, badge.css, alert.css, app.css).
   Top block: the page head, the presence dot and the quiet row that other pages share. Below: the AI-1 frame CSS (ai/frames/ai-next.css) without its frame-only helpers. */
.ai-head.p5-head{display:flex;margin-bottom:var(--s-4)}
.ai-head.p5-head .title-row{margin:0}
#view-ai .ai > .us-tabs{margin:0 0 var(--s-4)}   /* the frame's .p5-bar: tabs 16 under the head, 16 above the band or the cards */
.pres{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}
.pres.now{background:var(--green)}
.pres.recent{box-shadow:inset 0 0 0 1.5px var(--text-3)}
.pres.away{box-shadow:var(--edge-strong)}
.si:is(.queued,.off,.archived,.locked,.removed,.cancelled,.stopped,.once){color:var(--text-3)}
.p5-in{display:flex;align-items:center;gap:var(--s-2);height:40px;padding:0 var(--s-3);border-radius:var(--r-2);border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font-size:var(--fs-3)}
.p5-in.sm{display:inline-flex;height:28px;width:64px;padding:0 var(--s-2);justify-content:flex-end;font:inherit;font-size:var(--fs-2);text-align:right}
.p5-in.sm:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cx-quiet{display:flex;align-items:center;gap:var(--s-3);min-height:48px;padding:0 var(--s-3) 0 var(--s-4);border-radius:var(--r-3);border:1px dashed var(--line-strong);font-size:var(--fs-3)}
.cx-quiet > .i{width:var(--icon-md);height:var(--icon-md);color:var(--text-3)}
.cx-quiet b{font-weight:500}
.cx-quiet .grow{flex:1}

/* AI-1: the new AI > Connection page. New classes only (prefix ai2-), on the app's CSS + DS-1 (app/ds1.css, body.pg) + the
   no accent layer (owner DR-110 addition 4: «Аккуратные минималистичные сюрфейсы»). Tokens only; literals are the DS-1 sizes. */
/* page */
.ai2{display:flex;flex-direction:column;gap:var(--s-4);max-width:1096px}
.ai2 > .p5-head{margin:0}
.ai2 > .us-tabs{margin:0}
.ai2 .ai2-viewer{display:flex;align-items:center;gap:var(--s-2);margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2 .ai2-viewer .i{width:16px;height:16px;color:var(--text-3)}

/* the one status line (job 2): dot, sentence, a jump link. No buttons: each fix sits in its row */
.ai2-st{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-2) var(--s-4);border-radius:var(--r-4);border:1px solid var(--line);background:rgb(var(--p-mist) / .03);font-size:var(--fs-3);line-height:20px}
.ai2-st .dot{position:relative;flex:none;width:8px;height:8px;margin:0 var(--s-1);border-radius:50%;background:var(--text-3);box-shadow:0 0 0 4px rgb(var(--p-mist) / .1)}
.ai2-st.ok .dot{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.ai2-st.warn .dot{background:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
.ai2-st.stop .dot{background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.ai2-st .t{flex:1;min-width:0}
.ai2-st .t b{font-weight:600;color:var(--text)}
.ai2-st .t span{color:var(--text-2)}
.ai2-st .link{flex:none;font-size:var(--fs-2);color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:var(--s-1)}
.ai2-st .link .i{width:14px;height:14px}
.ai2-st .spin{flex:none;width:16px;height:16px}

/* sections: the DS-1 card plate (.ov-card) with the DS-1 card header (.card-h) */
.ai2-sec{gap:0}
.ai2-sec > .card-h{min-height:36px;align-items:center}
.ai2-sec .card-h .tb{display:flex;flex-direction:column;min-width:0}
.ai2-sec .card-h .tb h3{display:flex;align-items:center;gap:var(--s-2)}
.ai2-sub{margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai2-sub b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.ai2-sec .card-h .acts{display:flex;align-items:center;gap:var(--s-2);flex:none}
.ai2-sec .card-h .link{font-size:var(--fs-2);color:var(--accent);text-decoration:none}
.ai2-meter{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap}
.ai2-meter .tr{width:120px;height:6px;border-radius:var(--r-xs);background:rgb(var(--p-mist) / .07);overflow:hidden}
.ai2-meter .tr i{display:block;height:100%;border-radius:var(--r-xs);background:var(--accent)}

/* lists: rows of computers, accounts, keys */
.ai2-list{border-radius:var(--r-4);border:1px solid var(--line);background:rgb(var(--p-navy-rgb) / .18);overflow:hidden}
.ai2-row{display:grid;align-items:center;gap:var(--s-4);min-height:64px;padding:10px var(--s-3) 10px var(--s-4);border-top:1px solid var(--line-soft);font-size:var(--fs-3);line-height:20px}
.ai2-row:first-child{border-top:0}
.ai2-row.acct{grid-template-columns:minmax(200px,1.15fr) 132px minmax(232px,1.5fr) 144px 132px 36px}
.ai2-row.comp{grid-template-columns:20px minmax(220px,1.3fr) minmax(220px,1.5fr) 128px 132px 36px;min-height:60px}
.ai2-row .nm{min-width:0}
.ai2-row .nm b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai2-row .nm small{display:block;color:var(--text-3);font-size:var(--fs-2);line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai2-row .nm small.mono{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.02em}
.ai2-row .c-st{min-width:0}
.ai2-row .c-meta{color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai2-row .act{display:flex;justify-content:flex-end}
.ai2-row .c-pres{justify-self:center}
.ai2-row.dim .nm b,.ai2-row.dim .c-meta{color:var(--text-3)}
/* .ai2-row.work: no tint (fix round 2: no added gradients); its badge says it works */
.ai2-job{display:flex;flex-direction:column;gap:2px;min-width:0}
.ai2-job > span:not(.badge){color:var(--text-2);font-size:var(--fs-2);line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai2-job b{font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-3)}

/* the balance cell: number, bar with the floor tick, the covers it pays for */
.ai2-bal{display:grid;gap:6px;min-width:0}
.ai2-bal .l{display:flex;align-items:baseline;gap:var(--s-2);min-width:0;white-space:nowrap}
.ai2-bal .l b{font-weight:600;font-variant-numeric:tabular-nums}
.ai2-bal .l span{color:var(--text-2);font-size:var(--fs-2);line-height:18px;overflow:hidden;text-overflow:ellipsis}
.ai2-bal .tr{position:relative;height:6px;border-radius:var(--r-xs);background:rgb(var(--p-mist) / .07)}
.ai2-bal .tr i{display:block;height:100%;border-radius:var(--r-xs);background:var(--accent)}
.ai2-bal .tr s{position:absolute;top:-3px;width:2px;height:12px;transform:translateX(-50%);border-radius:var(--r-hair);background:var(--text-2)}
.ai2-bal.off .tr i{background:var(--text-3)}
.ai2-bal.low .l span{color:var(--amber)}
.ai2-bal.bad .l span{color:var(--red)}
.ai2-bal.none .l b{color:var(--text-3)}

/* the floor row (one setting for every account) */
.ai2-floor{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px var(--s-3) 10px var(--s-4);border-top:1px solid var(--line);background:rgb(var(--p-mist) / .03);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-floor > .i{width:16px;height:16px;color:var(--text-3);flex:none}
.ai2-floor b{color:var(--text);font-weight:600}
.ai2-floor .g1{flex:1;min-width:0}
.ai2-floor .hint{color:var(--text-3)}

/* card-level empty state (DS-1 3.7, art 120) */
.ai2-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s-2) 0 var(--s-1)}
.ai2-empty .art{width:120px;height:120px;border-radius:50%;object-fit:cover;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 71%)}
.ai2-empty h4{margin:var(--s-2) 0 0;font:600 var(--fs-4b)/24px var(--font);color:var(--text)}
.ai2-empty p{max-width:46ch;margin:6px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-empty .btn{margin-top:var(--s-4)}

/* the connect flow (job 1): lead, three steps, the art */
.ai2-flow{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-7);align-items:start}
.ai2-flow .lead h4{margin:0;font:600 var(--fs-4b)/24px var(--font);color:var(--text)}
.ai2-flow .lead p{margin:6px 0 0;max-width:60ch;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.ai2-flow .note{display:flex;gap:var(--s-2);align-items:flex-start;margin:var(--s-3) 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-flow .note .i{width:16px;height:16px;flex:none;margin-top:1px;color:var(--text-3)}
.ai2-art{position:relative;align-self:stretch;display:flex;flex-direction:column;gap:var(--s-3)}
.ai2-art img{width:340px;height:300px;object-fit:cover;object-position:50% 46%;border-radius:var(--r-4);-webkit-mask-image:radial-gradient(85% 80% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(85% 80% at 50% 50%,#000 55%,transparent 100%)}
.ai2-art ul{list-style:none;margin:0;padding:0 var(--s-2);display:grid;gap:var(--s-2)}
.ai2-art li{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-art li .i{width:16px;height:16px;flex:none;margin-top:1px;color:var(--accent)}

.ai2-steps{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-direction:column}
.ai2-step{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:0 0 var(--s-5)}
.ai2-step:last-child{padding-bottom:0}
.ai2-step::before{content:"";position:absolute;left:13.5px;top:32px;bottom:4px;width:1px;background:var(--line-strong)}
.ai2-step:last-child::before{display:none}
.ai2-step .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--raised);box-shadow:var(--edge);color:var(--text-3);font:600 var(--fs-2)/1 var(--font);font-variant-numeric:tabular-nums}
.ai2-step .n .i{width:14px;height:14px}
.ai2-step h5{margin:var(--s-1) 0 0;font:600 var(--fs-3)/20px var(--font);color:var(--text-2)}
.ai2-step .b{grid-column:2;margin-top:var(--s-1);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-step.now .n{background:var(--accent-soft);box-shadow:none;color:var(--accent)}
.ai2-step.now h5{color:var(--text)}
.ai2-step.done .n{background:var(--green-soft);box-shadow:none;color:var(--green)}
.ai2-step.done h5{color:var(--text-2);font-weight:500}
.ai2-step.next h5{color:var(--text-3);font-weight:500}
.ai2-step.next .b{color:var(--text-3)}

/* the command block: OS switch, the command, Copy, the code's timer, a new code */
.ai2-cmd{margin-top:var(--s-3);padding:var(--s-3);border-radius:var(--r-4);border:1px solid var(--line);background:rgb(var(--p-navy-rgb) / .55)}
.ai2-cmd .c-hd{display:flex;align-items:center;gap:10px;margin:0 0 10px var(--s-1);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-cmd .c-hd .g1{flex:1}
.ai2-cmd .c-hd .seg{margin-top:var(--s-2)}
.ai2-cmd .code{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border-radius:var(--r-3);background:var(--bg-deep);box-shadow:var(--edge)}
.ai2-cmd .code > .i{width:16px;height:16px;flex:none;color:var(--text-3)}
.ai2-cmd code{flex:1;min-width:0;font:400 var(--fs-2)/20px var(--mono);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai2-cmd code em{font-style:normal;color:var(--accent)}
.ai2-cmd .code.gone code{color:var(--text-3);text-decoration:line-through;text-decoration-color:rgba(167,174,203,.45)}
.ai2-cmd .ft{display:flex;align-items:center;gap:10px;margin:10px var(--s-1) 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-cmd .ft .g1{flex:1}
.ai2-cmd .ft .c-tm{display:inline-flex;align-items:center;gap:var(--s-2);font-variant-numeric:tabular-nums}
.ai2-cmd .ft .c-tm b{color:var(--text);font-weight:600}
.ai2-cmd .ft .c-tm.late b{color:var(--amber)}
.ai2-cmd .ft .c-tm.gone{color:var(--amber)}
.ai2-ring{width:16px;height:16px;flex:none}
.ai2-ring circle{fill:none;stroke-width:2.5}
.ai2-ring .bg{stroke:rgb(var(--p-mist) / .14)}
.ai2-ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.ai2-ring.late .fg{stroke:var(--amber)}

/* the live wait and the computer's checks (step 3) */
.ai2-wait{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 14px;border-radius:var(--r-3);background:rgb(var(--p-accent-rgb) / .05);color:var(--text);font-size:var(--fs-2);line-height:18px}
.ai2-wait .spin{width:16px;height:16px;flex:none}
.ai2-wait small{color:var(--text-2);font-size:var(--fs-2)}
.ai2-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px var(--s-6);margin:var(--s-3) 0 0;padding:var(--s-3) 14px;border-radius:var(--r-3);border:1px solid var(--line);list-style:none}
.ai2-checks li{display:flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:20px;white-space:nowrap}
.ai2-checks li .i{width:16px;height:16px;flex:none}
.ai2-checks li.ok .i{color:var(--green)}
.ai2-checks li.wait .i{color:var(--text-3)}
.ai2-checks li.ok b,.ai2-checks li.wait b{color:var(--text);font-weight:500}
.ai2-checks li small{color:var(--text-3);font-size:var(--fs-1)}

/* fix blocks inside a section (offline, signed out): the DS-1 alert leads, the fix under it */
.ai2-fix{margin:0 0 var(--s-4)}
.ai2-fix .alert{margin:0}
.ai2-relaunch{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);border-radius:var(--r-3);background:var(--bg-deep);box-shadow:var(--edge)}
.ai2-relaunch > .i{width:16px;height:16px;color:var(--text-3);flex:none}
.ai2-relaunch code{flex:1;font:400 var(--fs-2)/20px var(--mono);color:var(--text)}
.ai2-conds{display:flex;align-items:center;gap:var(--s-5);margin:10px 0 0 var(--s-1);color:var(--text-2);font-size:var(--fs-2);line-height:18px;flex-wrap:wrap}
.ai2-conds span{display:inline-flex;align-items:center;gap:6px}
.ai2-conds .i{width:16px;height:16px;color:var(--text-3)}
.ai2-conds .g1{flex:1}
.ai2-conds .link{color:var(--accent);text-decoration:none}

.ai2-older{display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border-top:1px solid var(--line-soft);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-older .i{width:16px;height:16px;color:var(--text-3)}

/* Higgsfield: today's quiet row, kept */
.ai2 .cx-quiet{margin:0}

/* the page-level state (DS-1 3.7 one component, DR-93/94): centred in the area under the head */
.ai2-page-st{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:620px;text-align:center}
.ai2-page-st img{width:320px;height:auto;margin-bottom:var(--s-1)}
.ai2-page-st h2{margin:0;font:600 var(--fs-4b)/24px var(--font)}
.ai2-page-st p{max-width:46ch;margin:6px 0 0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-page-st .btn{margin-top:var(--s-4)}

/* skeleton (DS-1 loading: neutral, no accent) */
.ai2 .sk{display:block;flex:none}

/* dialogs on this page use the DS-1 .dlg (head 64, footer 72); only the content is new */

/* small parts referenced by build.py */
.ai2-spin{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-soft-2);border-top-color:var(--accent);animation:spin var(--loop-spin) linear infinite}
.ai2-spin.dark{border-color:rgb(var(--p-ink-rgb) / .25);border-top-color:var(--ink);margin-right:2px}
.ai2-st .ai2-spin{margin:0 2px}
.badge .ai2-spin{width:10px;height:10px;border-width:1.5px}
.ai2-pres{display:block;width:8px;height:8px;margin:0 auto;border-radius:50%;background:var(--text-3);opacity:.6}
.ai2-pres.on{background:var(--green);opacity:1;box-shadow:0 0 0 3px var(--green-soft)}
.ai2-cmd-msg{margin:0 var(--s-1);color:var(--text-2);font-size:var(--fs-2);line-height:18px}   /* FA-513 */
.ai2-cmd-note{margin:var(--s-2) var(--s-1) 0;color:var(--text-3);font-size:var(--fs-1);line-height:16px}
.ai2-ic{padding:1px 6px;border-radius:var(--r-1);background:rgb(var(--p-mist) / .1);font:400 var(--fs-1)/18px var(--mono);color:var(--text)}
.ai2-manual{margin:var(--s-4) 0 0;color:var(--text-3);font-size:var(--fs-1);line-height:18px}
.ai2-manual .link{font-size:var(--fs-1)}
.ng-pw .icon-btn{position:absolute;right:4px}
.ai2-row.pending{background:rgb(var(--p-accent-rgb) / .05)}
.ai2-row.pending .nm small{font-family:var(--font);font-size:var(--fs-2)}
.ai2-empty svg.art{display:block;width:120px;height:auto;margin:0 auto var(--s-1)}
.ai2-page-st svg.art{display:block;width:200px;height:auto;margin:0 auto var(--s-1)}
.ai2-page-st .btn.lg{margin-top:var(--s-5)}
.ai2-older{width:100%;border:0;background:transparent;cursor:pointer;font:inherit;text-align:left}
.ai2-older .g1{flex:1}
.ai2-older[aria-expanded="true"] > .i{rotate:180deg}
.ai2-step{grid-template-rows:auto auto}
.ai2-step .n{grid-row:1/3;align-self:start}
.ai2-step h5,.ai2-step .b{grid-column:2}
.ai2-step .b .link{color:var(--accent);text-decoration:none}
.ai2-sec .card-h .tb h3 .icon-btn.xs{margin-left:-2px;color:var(--text-3)}
.ai2-sec .card-h .tb h3 .badge.count{margin-left:0}
.ai2-wait small{margin-left:-4px}
.ai2-checks .ai2-spin{width:14px;height:14px}

.g1{flex:1;min-width:0}
.ai2-cmd code{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.ai2-cmd .code{align-items:flex-start}
.ai2-cmd .code > .i{margin-top:2px}
.ai2-cmd .code .btn{align-self:center}
.ai2-st .link,.ai2-sec .link{padding:2px var(--s-1)}
.ai2-row .nm small.k{font-family:var(--font);font-size:var(--fs-2)}
.ai2-row .nm small.k span{font-family:var(--mono);font-size:var(--fs-1)}
.ai2-job .badge{align-self:flex-start}
.ai2-row .c-st .badge{max-width:100%}

/* the plain chip in the command head (#i-terminal) */
.ai2-cmd .c-hd .card-ic{width:28px;height:28px;flex:none;margin-left:-2px}
.ai2-cmd .c-hd .card-ic .i{width:16px;height:16px}
.ai2-cmd .c-hd b{color:var(--text);font-weight:600}

/* the computer checklist: the Claude list's footer row (same shape as the Magnific floor row) */
.ai2-lanes{display:flex;align-items:center;gap:var(--s-3);min-height:56px;padding:10px var(--s-3) 10px var(--s-4);border-top:1px solid var(--line);background:rgb(var(--p-mist) / .03);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-lanes > .i{width:16px;height:16px;color:var(--text-3);flex:none}
.ai2-lanes .who{color:var(--text);font-weight:600;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis;flex:none}
.ai2-lanes .ln{display:flex;align-items:center;gap:var(--s-5);margin:0;padding:0;list-style:none;min-width:0}
.ai2-lanes .ln li{display:flex;align-items:center;gap:6px;color:var(--text);white-space:nowrap}
.ai2-lanes .ln li small{color:var(--text-3);font-size:var(--fs-1);margin-left:2px}
.ai2-lanes .ln li .btn{margin-left:6px}
.ai2-lanes .lm,.ai2-lane .lm{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%}
.ai2-lanes .lm .i,.ai2-lane .lm .i{width:14px;height:14px}
.lm.ok{background:var(--green-soft);color:var(--green)}
.lm.warn{background:var(--amber-soft);color:var(--amber)}
.lm i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.lm .ai2-spin{width:14px;height:14px}
.ai2-lanes .c-rep{color:var(--text-3);white-space:nowrap}
.ai2-lanes.off .ln,.ai2-lanes.off .who{opacity:.6}
.ai2-lanes-x{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);padding:var(--s-1) var(--s-4) var(--s-4);background:rgb(var(--p-mist) / .03)}
.ai2-lane{padding:var(--s-3) 14px;border-radius:var(--r-3);border:1px solid var(--line);background:rgb(var(--p-navy-rgb) / .18)}
.ai2-lane .lh{display:flex;align-items:center;gap:var(--s-2);min-height:32px}
.ai2-lane h5{margin:0;color:var(--text);font:600 var(--fs-3)/20px var(--font)}
.ai2-lane .g1{flex:1}
.ai2-lane > p{margin:var(--s-1) 0 10px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-lane > p span{color:var(--text)}
.ai2-lane ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ai2-lane li{display:flex;align-items:center;gap:var(--s-2);min-height:28px;font-size:var(--fs-2);line-height:18px;color:var(--text-2)}
.ai2-lane li .i{width:16px;height:16px;flex:none}
.ai2-lane li.ok .i{color:var(--green)}
.ai2-lane li b{color:var(--text);font-weight:500;white-space:nowrap}
.ai2-lane li small{color:var(--text-3);font-size:var(--fs-1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ai2-lane li .btn{margin-left:auto}
.ai2-lane li .ai2-spin{width:14px;height:14px;flex:none}
.ai2-lane .dotx{width:16px;height:16px;flex:none;display:grid;place-items:center}
.ai2-lane .dotx::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.ai2-lanes .ln{overflow:hidden}
.ai2-lanes.off .ln li small{display:none}
.ai2-lanes .c-rep{margin-left:var(--s-2)}

/* fix round 1 (MINOR 2): the name column takes the free width, so emails and key lines show whole at 1440 */
.ai2-row.acct{grid-template-columns:minmax(232px,1fr) 124px minmax(270px,1.16fr) 132px 136px 36px}

/* fix round 1: DS-1 Generate in the top bar (DR-37), verbatim from spend/frames/spend-next.css so both AI tabs match */

/* fix round 1: the figure row. One plain DS-1 plate, three figures, covers left first (DR-34). No accent (fix round 2, DR-110 add. 4) */
.ai2-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;gap:0;overflow:hidden}
.ai2-fig{position:relative;display:flex;flex-direction:column;min-width:0;min-height:156px;padding:var(--s-5) var(--s-6);color:inherit;text-decoration:none;
  transition:background-color var(--dur-2) var(--ease)}
.ai2-fig + .ai2-fig{box-shadow:inset 1px 0 0 var(--line)}
a.ai2-fig:hover{background:var(--hover-wash)}
a.ai2-fig:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:var(--r-5)}
.ai2-fig .card-h{display:flex;align-items:center;gap:10px;min-height:28px;margin-bottom:var(--s-4)}
.ai2-fig .card-h h3{margin:0;font:600 var(--fs-3)/20px var(--font);color:var(--text-2)}
.ai2-fig .card-h .sp{flex:1}
.ai2-fig .card-h .badge{margin:0}
.ai2-fig .nrow{display:flex;align-items:baseline;flex-wrap:nowrap;gap:var(--s-2);margin-top:auto;min-width:0;white-space:nowrap}
.ai2-fig .num:not(.badge){font:300 var(--fs-10)/48px var(--mono);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums}
.ai2-fig .num i{font-style:normal;font-size:var(--fs-6);letter-spacing:0;margin-right:6px;color:var(--text-2);vertical-align:.32em}
.ai2-fig .num.none{color:var(--text-3)}
.ai2-fig .unit{font:400 var(--fs-4)/20px var(--font);color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.ai2-fig .cap{margin:var(--s-2) 0 0;font:400 var(--fs-2)/18px var(--font);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai2-figbar{height:4px;margin-top:var(--s-3);border-radius:var(--r-hair);background:rgb(var(--p-mist) / .07);overflow:hidden}
.ai2-figbar i{display:block;height:100%;border-radius:var(--r-hair);background:var(--accent)}
.ai2-figs.is-loading .ai2-fig .nrow{margin-top:auto}
/* figures align on the number: the row starts under the head, the Claude bar adds below the caption */
.ai2-fig .nrow,.ai2-figs.is-loading .ai2-fig .nrow{margin-top:0}
.ai2-fig .card-h .badge .i{width:14px;height:14px}

/* fix round 2: 1:1 alignment (DR-110 add. 4, the SPEND «криво» remark) */
/* numbers share one right edge: the balance number sits in a fixed right-aligned slot, the words share one left edge */
.ai2-row.acct{column-gap:var(--s-3)}
.ai2-bal .l b{flex:none;min-width:52px;text-align:right}
/* «N jobs today»: the count in a right-aligned tabular slot, so 0 and 14 end on one edge */
.ai2-row .c-meta .n{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
/* the figure row: Claude's bar shares the caption line, so the three figures end on one line (no hole under the money figures) */
.ai2-fig .capr{display:flex;align-items:center;gap:var(--s-3);min-width:0;margin-top:var(--s-2)}
.ai2-fig .capr .cap{margin:0;flex:none;max-width:100%}
.ai2-fig .capr .ai2-figbar{flex:1;min-width:48px;margin:0}
/* the computer's parts: three columns in one surface, split by a line; no card plates to stretch into holes */
.ai2-lanes-x{gap:0;padding:var(--s-1) 0 var(--s-4)}
.ai2-lane{padding:var(--s-2) var(--s-4) 0;border:0;border-radius:0;background:none}
.ai2-lane + .ai2-lane{box-shadow:inset 1px 0 0 var(--line)}
/* the bar starts where the words start (after the 52 px number slot + 8 gap), so number, words and bar read as two clean columns */
.ai2-bal .tr{margin-left:60px}

/* ---- design gate round 1 (REVIEW-1, 06.11) ---- */
/* M7 + M3: the checklist strip hangs under its own computer's row: no name, no icon, no plate, indented to the name column (16 + 20 + 16) */
.ai2-lanes{min-height:40px;padding:0 var(--s-3) var(--s-3) 52px;border-top:0;background:none}
.ai2-lanes .ln{flex:0 1 auto}
.ai2-lanes .ln li{flex:none}
.ai2-lanes .ln li:nth-child(2){flex:0 1 auto;min-width:0}
.ai2-lanes .ln li:nth-child(2) small{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ai2-lanes .ln li .btn{flex:none}
.ai2-lanes-x{padding:0 0 var(--s-4) 36px;background:none}
/* MINOR 3: part rows on one grid in every lane: mark 16, name 96, note, action */
.ai2-lane li{display:grid;grid-template-columns:16px 96px minmax(0,1fr) auto;column-gap:var(--s-2)}
.ai2-lane li > .i,.ai2-lane li > .ai2-spin,.ai2-lane li > .dotx{justify-self:center}
.ai2-lane li b{overflow:hidden;text-overflow:ellipsis}
.ai2-lane li .btn{margin-left:0}
/* M8: the command breaks at spaces only, never inside the address */
.ai2-cmd code{word-break:normal;overflow-wrap:normal}
/* MINOR 4: a path in running text never breaks at its hyphen */
.ai2-ic{white-space:nowrap}
/* M9: no plate behind the hero art: the mask is transparent at every edge, so the card ground shows there (DR-110 add. 4) */
.ai2-art img{-webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 42%,transparent 86%);mask-image:radial-gradient(closest-side at 50% 52%,#000 42%,transparent 86%)}
/* MINOR 5: the ≈ sign is lifted without growing the line box, so all three figures share one baseline */
.ai2-fig .num i{vertical-align:baseline;position:relative;top:-.32em;line-height:0}
/* nit: the timer is a clock icon, not a ring */
.ai2-cmd .ft .c-tm > .i{width:16px;height:16px;flex:none;color:var(--text-3)}
.ai2-cmd .ft .c-tm.late > .i,.ai2-cmd .ft .c-tm.gone > .i{color:var(--amber)}
/* M6: the open menu's trigger keeps its pressed look */
.icon-btn.is-open{background:var(--raised);color:var(--text)}
/* M10: a field error in a dialog (today's .af-err) */
/* M8: the command well: code alone, 2 lines at 1440; Copy command opens the row under it */
.ai2-cmd .code{min-height:56px;padding:10px var(--s-4)}
.ai2-cmd .ft{gap:var(--s-3);margin:var(--s-3) 0 0}
.ai2-cmd .ft .c-tm{margin-left:var(--s-1)}
.ai2-cmd code .nb{white-space:nowrap}
.ai2-lanes .ln-t{color:var(--text-2)}
/* MINOR 4: a link inside running text sits in the line: no button padding, so no stray space before the next word or full stop */
.ai2 p .link,.dlg-text .link{padding:0;font:inherit;font-weight:500}
.ai2-empty p{max-width:60ch}
/* MINOR 2: below 1440 the rail folds to 128 px and the page keeps its 1096 px, so 1280 uses the 1440 grid: no column drops, no gap before ⋯ */

/* ---- design gate round 2 (REVIEW-2) ---- */
/* MAJOR 1: dialogs are the DS .dlg family (app.css .dlg, ds1.css 3.12); .ai2-scrim only stands in for dialog::backdrop in a static frame */

.dlg .alert{margin:0 0 var(--s-4)}
.ng-pw > .icon-btn{position:absolute;right:4px}
/* MAJOR 2: «Details» is .btn.ghost.sm; only the chevron turns */
.ai2-disc .i{transition:transform var(--dur-2) var(--ease)}
.ai2-disc[aria-expanded="true"] .i{transform:rotate(180deg)}
/* MAJOR 3: the «you» badge sits beside the name, never inside the part that truncates */
.ai2-row .nm-l{display:flex;align-items:center;gap:6px;min-width:0}
.ai2-row .nm-l b{min-width:0}
.ai2-row .nm-l .you{flex:none}
/* MINOR 1 (MINOR 3 of round 1, 2nd fix, new method): the three lanes share row lines through subgrid: head, description, parts */
.ai2-lanes-x{grid-template-rows:auto auto 1fr}
.ai2-lane{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
.ai2-lane .lh{min-height:36px}
.ai2-lane > p{margin:var(--s-1) 0 10px;align-self:start}
.ai2-lane ul{align-self:start}
/* MINOR 2: the floor input is the DS .num-in (36 x 88, 13/1 500); the frame draws its focus state */
.ai2-floor .num-in{text-align:right;font-variant-numeric:tabular-nums;border-color:var(--accent);box-shadow:var(--ring-field)}

.ai2 .ai-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ai2-sec[hidden],.ai2-figs[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.ai2-st .t,.ai2-st .dot{transition:none}}

/* AI2: the region wrappers, the dimmed list, the connect head, status crossfade */
.ai2 > .ai2-r{display:contents}
.ai2 > [hidden]{display:none}
.ai2-sub.warn{color:var(--amber)}
.ai2-sec.dimmed .ai2-list{opacity:.55}
.ai2-conn-h{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3)}
.ai2-conn-h p{flex:1;min-width:0;margin:0;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.ai2-st .t{transition:opacity var(--dur-2) cubic-bezier(.23,1,.32,1)}
.ai2-st .dot{transition:background-color var(--dur-3) cubic-bezier(.23,1,.32,1),box-shadow var(--dur-3) cubic-bezier(.23,1,.32,1)}
.ai2-fig .num.none{color:var(--text-3)}