/* NezhaGate (2026-10-29, design/DESIGN.md): the new parts only; everything else is tokens.css, app.css and ai.js's own styles.
   No new token, no new colour except the NezhaGate mark #3a6df0. */

/* 1. The NezhaGate mark: the same tile as .ai-cmark, .svc and .tm-m, blue (white «N» on it is 4.5:1) */
.ai-cmark.nezhagate,.svc-nezhagate{background:#3a6df0}
.tm-m{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:var(--r-1);background:#d646b8;color:var(--white);font:700 var(--fs-0)/1 var(--font)}
.tm-m.ng,.mpick .tm-m.ng{background:#3a6df0}

/* 2. The service choice (.svp): one row per service with its state and what it can spend. The same component in the AI page's
   Generation card (the person's default) and in the Generation request (this request). role=radiogroup / role=radio */
.svps{display:grid;gap:6px;margin:0;padding:0}
.svp{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;min-height:52px;padding:var(--s-2) var(--s-3);border-radius:var(--r-2);
  background:var(--bg);box-shadow:var(--edge-strong);color:var(--text);text-align:left;cursor:pointer;
  transition:background-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.svp:hover{background:var(--hover)}
.svp:active{background:var(--raised)}
.svp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svp[aria-checked=true]{background:var(--hover);box-shadow:var(--edge-accent)}
.svp[aria-disabled=true]{cursor:default}
.svp[aria-disabled=true]:hover{background:var(--bg)}
.svp[aria-disabled=true][aria-checked=true]:hover{background:var(--hover)}
.svp-t{display:grid;gap:2px;min-width:0}
.svp-n{display:flex;align-items:baseline;gap:var(--s-2);min-width:0;font:600 var(--fs-3)/20px var(--font)}
.svp-def{display:inline-flex;align-items:center;gap:var(--s-1);color:var(--accent);font-size:var(--fs-0);line-height:16px;font-weight:500;white-space:nowrap}
.svp-def .i{width:var(--icon-xs);height:var(--icon-xs);stroke-width:2.4}
.svp-s{overflow:hidden;color:var(--text-2);font-size:var(--fs-1);line-height:16px;text-overflow:ellipsis;white-space:nowrap}
.svp-s.warn{color:var(--amber)}
.svp-v{display:grid;justify-items:end}
.svp-v b{color:var(--text);font:500 var(--fs-3)/20px var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.svp-v small{color:var(--text-3);font-size:var(--fs-0);line-height:14px}
.svp.dry .svp-v b{color:var(--text-3)}
.ai-card .svps{margin-top:6px}
.ai-ch h2 .g-q{margin-left:6px;vertical-align:-2px}

/* 3. The AI page: «NezhaGate keys» reuses .tm, .tm-h, .tm-row; a key row has no meter and shows the key's last 4 characters */
.tm-key{display:block;color:var(--text-3);font:400 var(--fs-1)/16px var(--mono);letter-spacing:0}
.tm-ng .tm-cr .tm-sub{margin-top:var(--s-1)}
.tm-ng .tm-cr .bal-rf{margin-left:2px}   /* no meter to align to: the refresh sits by the figure */

/* 4. The Add key dialog: the field with a show/hide eye (the sign-in form's .af-eye) */
.ng-pw{position:relative;display:flex;align-items:center}
.ng-pw .in{padding-right:var(--s-9);font-family:var(--mono);letter-spacing:.04em}
.ng-pw .af-eye{right:4px}
.field .af-err{margin-top:2px}
.btn .ai-spin.sm{border-top-color:var(--on-primary)}
.ng-ferr{margin:-2px 0 14px}   /* a form-level error (NezhaGate didn't answer, no connection): no field is wrong */

/* 5. The checklist: a lane «partly ready» (one service can't run on this computer) */
.ai-lsum li[data-state=part]{color:var(--amber)}

/* 6. The queue: a service chip the requester or a manager can open (move a waiting job), the group bar of a dry service,
   the spend tables per service */
button.qwho{cursor:pointer;transition:background-color var(--dur-2) var(--ease)}
button.qwho:hover{background:var(--hover)}
button.qwho:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qwho .i.chev{width:12px;height:12px;margin:0 -4px 0 -2px;color:var(--text-3)}
.qreason.warn > .i,.qreason.warn .qnote{color:var(--amber)}
.qwho .svc{flex:none;margin-left:var(--s-1)}
.qwho.qsvc{flex:none;max-width:132px}   /* the service chip keeps its label */
.qfoot > .qwho:first-child{flex-shrink:1;min-width:0;max-width:100%}   /* FINAL FV-5/m2: the chips wrap to a second line (app.css .qfoot) instead of cutting the name at 110 px; only a name wider than the row ends with an ellipsis */
.qspend-svc{display:flex;align-items:center;gap:var(--s-2);margin:14px 0 6px;color:var(--text);font-size:var(--fs-2);line-height:18px;font-weight:600}
.qspend-svc .svc{width:16px;height:16px}
.qspend-svc + .qspend-t thead th{padding-top:var(--s-1)}
.qspend-svc + .qspend-t tbody th{min-width:96px}   /* both services' tables keep one column line */

/* 7. The header chip shows the person's default service by its mark */
.stat .svc{flex:none}

/* Usage (DESIGN §9): the NezhaGate mark beside the Magnific and Claude ones */
.us-svc[data-s=nezhagate]{background:#3a6df0;box-shadow:0 0 12px -3px #3a6df0}

/* the key field is a text input shown as dots (a password input would let the browser offer to save the key) */
.ng-secret { -webkit-text-security: disc; text-security: disc; }