dsh-mobile-plugin 0.5.27 → 0.5.29

package/extensions/magpie/plugins/routing/routing.css

@@ -0,0 +1,1111 @@
+/* Routing, live: the Gateway view's stage for what routing does with each
+   request (client.js). The same stage as the site's Model Routing, only
+   played by the gateway's own trace. */
+.rt { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; margin: 0 0 18px; }
+.rt-top { display: flex; flex-direction: column; gap: 3px; }
+.rt-what { font-size: 13px; color: var(--muted); }
+.rt-what b { color: var(--fg); font-weight: 600; }
+.rt-mode { margin: 0; font-size: 12.5px; color: var(--fg-2); line-height: 1.45; }
+/* the agents' and magpie's columns at least 124px, and as wide as their
+   words up to 15% of the stage: at 124px a full-screen window cut an agent
+   to "Claude Desk…" while its keys' rows ran on across the rest (refeccd
+   on Discord) */
+.rt-stage { position: relative; display: grid; grid-template-columns: fit-content(max(124px, 15%)) fit-content(max(124px, 15%)) minmax(0, 1fr); column-gap: 56px; align-items: center; padding: 22px 2px; }
+.rt-stage > :is(.rt-srcs, .rt-hub) { min-width: 124px; }
+.rt-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+.rt-wires path { fill: none; stroke: var(--line); stroke-width: 1.5; transition: opacity .3s; }
+.rt-wires path.live { stroke: var(--agent, var(--muted)); stroke-dasharray: 3 5; animation: rtflow .7s linear infinite; }
+/* lit: the way the request shown went, over; only a request in flight flows (#2386) */
+.rt-wires path.lit { stroke: var(--agent, var(--muted)); }
+.rt-wires path.rest { stroke-dasharray: 2 6; opacity: .45; }
+/* a flowing wire is drawn by its copy in .rt-flows, a layer of its own, so
+   the wires that don't move aren't drawn again each frame (#3164) */
+.rt-wires path.flown { visibility: hidden; animation: none; }
+.rt-flows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; will-change: transform; }
+.rt-flows path { fill: none; stroke: var(--agent, var(--muted)); stroke-width: 1.5; stroke-dasharray: 3 5; animation: rtflow .7s linear infinite; }
+@keyframes rtflow { to { stroke-dashoffset: -8; } }
+/* the magpies: one carries each request out, another brings its answer
+   back — the dot at the tip of its beak. They fly along the wires and
+   under the cards, through magpie's box rather than over its words: over
+   them, with two agents sending at once one sat on the hub's address and
+   another on a member's row (penershu on X). Each flight starts and ends
+   a dot clear of the card at either end of its wire (pose). */
+.rt-sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+/* each agent's requests and answers fly in its colour: a request filled
+   with it, an answer ringed with it, a failure ringed red */
+.rt-sky .pkt { fill: var(--agent, var(--fg)); filter: drop-shadow(0 0 3px var(--agent, var(--muted))); }
+.rt-sky .pkt.back { fill: var(--card); stroke: var(--agent, var(--fg)); stroke-width: 2.25; }
+.rt-sky .pkt.back.err { fill: var(--agent, var(--card)); stroke: var(--red); }
+.rt-sky path.via { fill: none; stroke: none; }
+.rt-sky .pkt.held { animation: rtheld 1.2s ease-in-out infinite; }
+@keyframes rtheld { 50% { opacity: .45; } }
+.rt-flier { color: var(--fg); }
+.rt-flier .body, .rt-flier .tail, .rt-flier .wing path:first-child, .rt-flier .wing.far { fill: currentColor; }
+.rt-flier .wing.far { opacity: .45; }
+.rt-flier .belly { fill: var(--card); }
+.rt-flier .wing .bar { fill: none; stroke: var(--card); stroke-width: 1.3; stroke-linecap: round; }
+/* the wings beat from the shoulder: down hard, up easy */
+.rt-flier .wing { transform-box: fill-box; transform-origin: 50% 100%; animation: rtflap .42s cubic-bezier(.45, 0, .3, 1) infinite; }
+.rt-flier .wing.far { animation-delay: -.03s; }
+@keyframes rtflap { 0%, 100% { transform: scaleY(1); } 55% { transform: scaleY(-.62) skewX(-8deg); } }
+.rt-flier .rt-lift { animation: rtcome .3s ease-out; transition: transform .45s cubic-bezier(.3, 0, .2, 1), opacity .45s; }
+.rt-flier.away .rt-lift { transform: translate(14px, -16px) scale(.8); opacity: 0; }
+@keyframes rtcome { from { transform: translate(-6px, -10px) scale(.85); opacity: 0; } }
+.rt-srcs { position: relative; z-index: 1; min-width: 0; display: grid; gap: 10px; }
+.rt-srcs.many .rt-node { padding: 8px 8px 7px; }
+.rt-src b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--agent); vertical-align: middle; }
+.rt-srcs.many .rt-node .rt-ic .ic, .rt-srcs.many .rt-node .rt-ic .ic img, .rt-srcs.many .rt-node .rt-ic .ic svg { width: 20px; height: 20px; }
+.rt-node { position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: center; }
+.rt-node .rt-ic .ic, .rt-node .rt-bird { width: 26px; height: 26px; margin-bottom: 3px; }
+.rt-node .rt-ic .ic img, .rt-node .rt-ic .ic svg { width: 26px; height: 26px; }
+.rt-node b { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-node small { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-hub { border-color: var(--fg); box-shadow: 0 0 0 4px var(--card-2); }
+.rt-hub i { font-style: normal; font-size: 10.5px; font-weight: 560; margin-top: 5px; padding: 1px 8px; border-radius: 999px; background: var(--fg); color: var(--card); }
+.rt-hub.tick, .rt-src.tick { animation: rttick .4s ease-out; }
+@keyframes rttick { 40% { transform: scale(1.04); } }
+/* one column as wide as the list: a row out of sight is as wide as WebKit
+   last drew it (content-visibility), and in a column as wide as its rows
+   "No request yet" held the page as wide as a wider window had it, a
+   scrollbar under it (young02036 on Discord) */
+.rt-accts { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; }
+/* a row's name, plan and model as wide as they are, and what it says the
+   rest: a long status (an intent smart routing picked it for) is what is
+   cut short, never the model, which says what answered (yi_time on
+   Discord). It keeps at least min(14em, 40%) of the row, where the name
+   and plan are cut first (b below) */
+.rt-accts li { position: relative; display: grid; grid-template-columns: 10px minmax(0, max-content) minmax(min(14em, 40%), 1fr); align-items: center; column-gap: 10px; row-gap: 6px; padding: 9px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; transition: opacity .3s, border-color .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }
+.rt-accts li { margin-left: calc(var(--depth, 0) * 18px); }
+/* a key off screen is not laid out or painted (#3164): with hundreds of
+   keys open, WebKit painted every row again on each frame a magpie flew.
+   One not drawn yet is as tall as a key drawn is (--rt-row, client.js's
+   layout). A row a failure tagged keeps its tag up over its top edge,
+   which this would cut, so it is drawn whole until the tag has faded
+   (lift, client.js) */
+.rt-accts li:not(.lift) { content-visibility: auto; contain-intrinsic-size: auto var(--rt-row, 38px); }
+/* a run of keys far from sight, out of the list (client.js place, #3164) */
+.rt-accts li.rt-gap { display: block; padding: 0; border: 0; background: none; content-visibility: visible; contain: strict; pointer-events: none; }
+/* a group in the group: a heading its models hang from, set in under it */
+.rt-accts li.rt-sub { display: flex; align-items: center; gap: 7px; padding: 5px 10px; font-size: 12px; color: var(--muted); background: var(--card-2); border-style: dashed; }
+.rt-accts li.rt-sub.on { border-style: solid; border-color: var(--fg-2); color: var(--fg); }
+.rt-accts li.rt-sub svg { flex: none; color: var(--fg-2); }
+.rt-accts li.rt-sub code.mdl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-accts li.rt-sub i { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 560; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); white-space: nowrap; }
+/* it folds from its heading (Aiirobyte on Discord): folded, it says what
+   it routes to together on a line of its own */
+.rt-accts li.rt-sub { flex-wrap: wrap; row-gap: 4px; cursor: pointer; user-select: none; }
+.rt-accts li.rt-sub .n { white-space: nowrap; }
+.rt-accts li.rt-sub .n:empty, .rt-accts li.rt-sub em:empty, .rt-accts li.rt-sub i:empty { display: none; }
+/* a route's heading, when more than one route is on the stage: its provider's logo */
+.rt-accts li.rt-sub > .ic { flex: none; }
+.rt-accts li.rt-sub .chev { display: inline-flex; color: var(--muted); transition: transform .2s; }
+.rt-accts li.rt-sub .chev svg { color: inherit; }
+.rt-accts li.rt-sub:hover .chev { color: var(--fg); }
+.rt-accts li.rt-sub.open .chev { transform: rotate(180deg); }
+.rt-accts li.rt-sub em { flex: 1 0 100%; min-width: 0; white-space: normal; padding-left: 21px; }
+.rt-accts li.rt-sub:focus { outline: none; }
+.rt-accts li.rt-sub:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
+.rt-accts li.idle { display: block; color: var(--muted); border-style: dashed; text-align: center; }
+.rt-accts b { font-weight: 560; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* a row's and a fold's head: the name and the plan give up their room
+   before the model's chip and its tags do, each cut short on its own */
+.rt-accts li:not(.rt-sub) > b { display: flex; align-items: baseline; min-width: 0; }
+.rt-accts li:not(.rt-sub) > b > * { flex: none; }
+.rt-accts li:not(.rt-sub) > b > span:not(.ic) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.rt-accts li:not(.rt-sub) > b > span.who { flex-shrink: 100; } /* the name first, the plan after it */
+.rt-accts li:not(.rt-sub) > b > span:not(.ic):not(.who):not(:empty) { margin-left: .3em; }
+.rt-accts li:not(.rt-sub) > b > .ic { align-self: center; }
+.rt-accts b > span:not(.ic) { font-weight: 450; color: var(--muted); }
+.rt-accts b > span.who { color: var(--fg); font-weight: 560; }
+.rt-accts b .ic { display: inline-flex; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px; }
+.rt-accts b .ic img, .rt-accts b .ic svg { width: 16px; height: 16px; }
+.rt-accts b .fb { margin-left: 6px; font-size: 10.5px; font-weight: 560; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
+.rt-accts b code.mdl, :is(.rt-req, .rt-probe) code, .rt-act code.mdl { font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); background: var(--card-2); border-radius: 5px; padding: 0 5px; }
+.rt-accts b code.mdl { margin-left: 7px; font-weight: 450; }
+.rt-accts em { font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+/* what a row says has at most its column: a long one (an intent smart
+   routing picked it for) is cut short, its name kept, never run off the
+   row's edge (penershu on X) */
+.rt-accts li > em { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; }
+/* the session an account answers (connor_yang on Discord): one line cut
+   short, also where a narrow stage lets the status wrap */
+.rt-accts em .ses { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
+.rt-accts .bar { grid-column: 2 / 4; height: 3px; border-radius: 2px; background: var(--card-2); overflow: hidden; }
+.rt-accts .bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--muted); transition: width .4s; }
+.rt-accts li.nobar .bar { display: none; }
+.rt-accts .dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
+.rt-accts li.on { border-color: var(--fg); }
+.rt-accts li.on em { color: var(--fg); }
+.rt-accts li.on .bar i { background: var(--fg); }
+.rt-accts li.on .dot { background: var(--fg); border-color: var(--fg); }
+/* A live dot's pulse: a disk 6px wider all round grows from the dot and
+   fades. It moves by transform and opacity, on the compositor: as a
+   box-shadow it repainted the page every frame while requests were in
+   flight, and 64 of them kept a core half busy (unscientific9). A muted
+   dot's disk goes behind it, in a parent that isolates it; a filled one's
+   is the dot's own colour, so it may lie on top. */
+.rt-accts li.now .dot, .rt-livedot.on, :is(.rt-req, .rt-probe).wait .to i, .ps-dst.wait > i { position: relative; }
+.rt-accts li.now .dot::after, .rt-livedot.on::after, :is(.rt-req, .rt-probe).wait .to i::after, .ps-dst.wait > i::after, .rt-steps li.wait::after {
+  content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--fg) 40%, transparent); opacity: 0; pointer-events: none;
+  animation: rtlive 1.8s infinite;
+}
+.rt-accts li.now .dot::after { inset: -1.5px; animation-name: rtlive-dot; }
+:is(.rt-req, .rt-probe).wait .to, .ps-dst.wait, .rt-steps li.wait { isolation: isolate; }
+:is(.rt-req, .rt-probe).wait .to i::after, .ps-dst.wait > i::after, .rt-steps li.wait::after { z-index: -1; }
+.rt-steps li.wait::after { inset: auto; left: 5px; top: .5em; width: 6px; height: 6px; }
+/* 6px each side: a 6px dot grows to 18px, the 8px account dot to 20px */
+@keyframes rtlive { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3); opacity: 0; } }
+@keyframes rtlive-dot { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(2.5); opacity: 0; } }
+.rt-accts li.low em { color: var(--fg-2); }
+.rt-accts li.rest { border-style: dashed; }
+/* a reply still out with no content for 15s: the dot stops pulsing */
+.rt-accts li.quiet .dot { background: var(--amber); border-color: var(--amber); }
+.rt-accts li.quiet .dot::after { animation: none; }
+.rt-accts li.rest > :not(.tag) { opacity: .5; }
+.rt-accts li.rest em { color: var(--red); opacity: .85; }
+.rt-accts li.left { border-style: dotted; }
+.rt-accts li.left > :not(.tag) { opacity: .45; }
+.rt-accts li.hit { animation: rthit .45s; }
+.rt-accts li.new { animation: rtin .4s ease-out; }
+@keyframes rthit { 20% { translate: -5px; } 40% { translate: 4px; } 60% { translate: -2px; } 80% { translate: 1px; } }
+.rt-accts .tag { position: absolute; right: 10px; top: -10px; padding: 1px 7px; border-radius: 6px; background: var(--red); color: #fff; font: var(--code-style, normal) 600 10.5px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); opacity: 0; transform: translateY(4px) scale(.9); transition: opacity .25s, transform .25s; pointer-events: none; }
+.rt-accts li.tagged .tag { opacity: 1; transform: none; }
+/* a provider's keys for one model, folded into one row (#1319): it opens
+   to head them, as a group in the group heads its models */
+.rt-accts li.rt-fold { grid-template-columns: 10px minmax(0, max-content) minmax(min(14em, 40%), 1fr) auto; cursor: pointer; user-select: none; }
+.rt-accts li.rt-fold em { white-space: normal; text-align: right; }
+.rt-accts li.rt-fold .chev { display: inline-flex; color: var(--muted); transition: transform .2s; }
+.rt-accts li.rt-fold:hover .chev { color: var(--fg); }
+.rt-accts li.rt-fold.open { background: var(--card-2); }
+.rt-accts li.rt-fold.open .chev { transform: rotate(180deg); }
+.rt-accts li.rt-fold:focus { outline: none; }
+.rt-accts li.rt-fold:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
+.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
+.rt-cap { flex: 1 1 20em; margin: 0; min-height: 3em; display: flex; align-items: center; font-size: 13px; line-height: 1.45; color: var(--fg); }
+.rt-cap.in { animation: rtin .4s ease-out; }
+@keyframes rtin { from { opacity: 0; transform: translateY(4px); } }
+.rt-stats { display: flex; gap: 18px; font-size: 11px; color: var(--muted); }
+.rt-stats > span { display: flex; flex-direction: column; }
+.rt-stats b { font-size: 19px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
+.rt-log { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
+/* each session's context window, over the card, while several send at
+   once (tjhhhh on Discord): a quiet block each, the one the card tells of
+   lit as a picked request is */
+.rt-ctx-sess { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; margin-top: 12px; }
+.rt-ctx-sess[hidden] { display: none; }
+/* a block is a grid, not a flex column: WebKit up to Safari 17 (macOS 14)
+   puts a flex <button>'s children in a box of its own as wide as the
+   longest line, so a long name ran past its block over the next ones
+   (tz_188 on Discord); a grid button has no such box */
+.rt-ctx-s { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-width: 0; padding: 8px 10px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
+.rt-ctx-s[aria-pressed="true"] { background: var(--card-2); color: var(--fg); }
+.rt-ctx-s .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.rt-ctx-s .sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.rt-ctx-s .ctx-stack { display: flex; max-width: none; width: 100%; height: 4px; border-radius: 2px; }
+.rt-log-head { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; font-size: 12px; font-weight: 600; color: var(--fg); }
+.rt-log-head .grow { flex: 1; }
+/* a request's request and response, opened from the story's head */
+.rt-bodies { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: var(--card); }
+.rt-bodies[hidden] { display: none; }
+.rt-bodies > .call-details { border-top: 0; }
+.rt-bodies > .call-archive { border: 0; }
+.rt-bodies > .none, .rt-bodies-gone { margin: 0; padding: 10px 12px; font-size: 11.5px; font-weight: 400; color: var(--muted); }
+.rt-bodies > .call-archive-err { padding: 10px 12px 4px; }
+.rt-bodies > .call-archive-err + button.text { margin: 0 12px 10px; }
+.rt-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; align-content: start; gap: 5px; counter-reset: rt; max-height: 200px; overflow-y: auto; }
+.rt-steps li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
+.rt-steps li::before { content: ""; position: absolute; left: 5px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
+.rt-steps li.why { color: var(--fg); }
+.rt-steps li.why::before { background: var(--fg); }
+.rt-steps li.aside { color: var(--muted); }
+.rt-steps li.said { font-family: var(--code-font, var(--code)); font-size: 11.5px; overflow-wrap: anywhere; white-space: pre-wrap; }
+:where(html[data-fonts]) .rt-steps li.said { font-style: var(--code-style, inherit); font-weight: var(--code-weight, inherit); font-stretch: var(--code-stretch, 100%); }
+.rt-stats > span.rt-errs:not([aria-disabled="true"]) { cursor: pointer; }
+.rt-stats > span.rt-errs:not([aria-disabled="true"]):hover b { color: var(--red); }
+.rt-steps li.aside::before { background: none; border: 1px solid var(--muted); width: 4px; height: 4px; }
+.rt-steps li.ok::before { background: var(--green); }
+.rt-steps li.bad::before { background: var(--red); -webkit-mask: var(--x-mark) center / contain no-repeat; mask: var(--x-mark) center / contain no-repeat; border-radius: 0; transform: scale(1.5); }
+
+/* where a try's time went: one stacked bar, magpie's, the network's and
+   the vendor's told apart by a swatch, each part named with its time */
+.rt-time { display: grid; gap: 5px; max-width: 560px; }
+.rt-time-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--fg-2); }
+.rt-time-who { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
+.rt-time-who::before, .rt-time-parts li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--rt-time); }
+.rt-time-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); gap: 1px; }
+.rt-time-bar span { min-width: 2px; background: var(--rt-time); }
+.rt-time-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
+.rt-time-parts li { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
+.rt-time-parts .v { color: var(--fg-2); font-variant-numeric: tabular-nums; }
+.rt-time .magpie { --rt-time: var(--accent); }
+.rt-time .net { --rt-time: var(--amber); }
+.rt-time .vendor { --rt-time: var(--fg-2); }
+.rt-off { padding: 18px 4px; text-align: center; color: var(--muted); font-size: 13px; }
+@media (prefers-reduced-motion: reduce) {
+  .rt-wires path.live, .rt-flows path, .rt-sky .pkt.held, .rt-accts li.new, .rt-accts li.hit, .rt-hub.tick, .rt-src.tick, .rt-cap.in, .masking .pii { animation: none; }
+  .rt-accts li.now .dot::after, .rt-steps li.wait::after { animation: none; }
+  .rt-accts li { transition: none; }
+}
+/* The narrow and wide layouts below go by a box's own width, as container
+   queries would: client.js sets max560 on a box 560px wide or less, min1150
+   on one 1150px or wider. Not container queries: in WebKit they kept the
+   page from scrolling to its end (#1249). :where() keeps each rule as
+   strong as it was inside its query. */
+/* a narrow list: what a row says goes under its name */
+.rt-accts:where(.max460) li { grid-template-columns: 10px minmax(0, 1fr); }
+.rt-accts:where(.max460) em { grid-column: 2; white-space: normal; }
+.rt-accts:where(.max460) .bar { grid-column: 2; }
+.rt-accts:where(.max460) li.rt-fold { grid-template-columns: 10px minmax(0, 1fr) auto; }
+.rt-accts:where(.max460) li.rt-fold em { grid-row: 2; text-align: left; }
+.rt-accts:where(.max460) li.rt-fold .chev { grid-column: 3; grid-row: 1; }
+/* narrow (the tray panel): magpie and the agent side by side, the
+   accounts under them, on a lane down their left */
+:where(.rt.max560) .rt-stage { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 26px; padding: 16px 0; }
+:where(.rt.max560) .rt-stage > :is(.rt-srcs, .rt-hub) { min-width: 0; }
+:where(.rt.max560) .rt-accts { grid-column: 1 / -1; padding-left: 22px; }
+.rt-accts:where(.max560) li { grid-template-columns: 10px minmax(0, 1fr); }
+.rt-accts:where(.max560) em { grid-column: 2; white-space: normal; }
+.rt-accts:where(.max560) .bar { grid-column: 2; }
+/* under the name, what a row says starts where the name does */
+.rt-accts:where(.max460, .max560) li > em { text-align: left; }
+/* ★ 本地改动（不是上游）：窄屏上「名字 + 套餐 + 模型」这一行换行，名字独占一行。
+   上游那套窄屏规则只把**状态**（`em`）挪到第二行，名字与模型、套餐仍挤在同一行里，
+   而 `span.who` 是 `flex-shrink: 100`（宽屏上这是对的：状态被截短、名字保住）—— 到了
+   手机宽度，`b` 那一行只剩两百来像素，模型标签先占住，名字就被压成「1..」这样两三个字。
+   实测 390px 宽的机型上 `wnluo2@gmail.com` 的可用宽度只有 10px。所以窄屏另立一条：
+   `b` 允许换行、`who` 占满第一行（`1 1 100%`，不再参与收缩），模型标签与套餐掉到第二行。 */
+.rt-accts:where(.max460, .max560) li:not(.rt-sub) > b { flex-wrap: wrap; row-gap: 3px; }
+.rt-accts:where(.max460, .max560) li:not(.rt-sub) > b > span.who { flex: 1 1 100%; min-width: 0; }
+.rt-accts:where(.max460, .max560) li:not(.rt-sub) > b > code.mdl { margin-left: 0; }
+:where(.rt.max560) .rt-stats { gap: 14px; }
+/* the Routing view */
+/* the Routing view, and the Routing groups view beside it */
+:is(#view-routing, #view-groups) .row-head { margin: 14px 0 6px; padding: 0 2px; gap: 0; }
+:is(#view-routing, #view-groups) .row-head .note { font-size: 11px; color: var(--faint); margin-left: 8px; }
+#view-routing .row-head .rt-livedot + .note { margin-left: 8px; }
+.rt-gnew { display: inline-flex; align-items: center; gap: 4px; }
+/* the groups page's toolbar: the filter first, then how many */
+.rt-gsec > .row-head:first-child .rt-gfilter { flex: 0 1 300px; width: auto; margin: 0; }
+.rt-gsec > .row-head:first-child .rt-gcount { margin-left: 10px; white-space: nowrap; }
+.rt-gsec > .row-head:first-child .rt-gfilter + .rt-gcount { margin-left: 10px; }
+/* the settings for every group, a card under the list */
+.rt-gset > :is(.rt-gfound, .rt-gnames) { padding: 12px 14px; }
+.rt-gset > .rt-gnames { border-top: 1px solid var(--line-2); }
+/* an email, hidden: stand-in letters of its shape, softly blurred —
+   coming in out of focus when asked for */
+.pii { filter: blur(2.2px); opacity: .5; user-select: none; }
+.masking .pii { animation: rtpii .35s ease-out backwards; }
+@keyframes rtpii { from { filter: blur(0); opacity: 1; } }
+#view-routing .rt { margin: 0; }
+.rt-more { padding-bottom: 12px; }
+.rt-cols { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
+/* side by side, the accounts end where the requests do and scroll like
+   them, not run on down the page beside an empty column: of no height of
+   their own, they take what the requests give the row, and no less than a
+   few accounts'. Only where the requests' column still keeps each request
+   on one line (wider than 760px, see below): narrower, one column of
+   one-line requests reads better than two with each request on three
+   (#860, huoranxuanyuan). Where the page is 1150px wide or more. Kept to
+   28%, no more than 360px: in a page kept to 1200px the accounts had room
+   to spare while the requests' models were cut (#1926, hibaliqya-yonma) */
+:where(.rt-more.min1150) .rt-cols { grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 360px); }
+:where(.rt-more.min1150) .rt-cols:not(.solo) .rt-col:last-child { display: flex; flex-direction: column; }
+:where(.rt-more.min1150) .rt-cols:not(.solo) .rt-acts { flex: 1 1 auto; height: 0; min-height: 216px; overflow-y: auto; overscroll-behavior: contain; }
+/* each column sized by its own width: a request's row lays itself out by
+   the list's width, not the page's (#273: in two columns of ~470px the
+   rows kept to one line, and the reasoning was drawn over the numbers) */
+.rt-col { min-width: 0; }
+/* the model that answered keeps room of its own (at least 14em, or 30%
+   of a narrower list) and the metrics wrap in theirs, up to 40%: an auto
+   column took the widest row's metrics for every row, and the model went
+   to "· hi…" (#1926, hibaliqya-yonma) */
+/* Each row has columns of its own, as wide as the measuring grid's (a
+   hidden .rt-sizer holding one probe of each row's shape) found its own
+   (--rt-cols, set by the page); until it is measured, a row sizes its
+   own. A row was a subgrid of the list: Safari 16 (macOS 13) recursed in
+   sizing the list's fit-content() columns through it, and its WebContent
+   process crashed and reloaded the page, up to 93 times a minute under
+   traffic (#3731, gpboyer2). */
+.rt-reqs { --rt-tpl: auto fit-content(32%) minmax(min(14em, 30%), 1fr) fit-content(40%); padding: 4px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; }
+.rt-reqs > * { flex: none; }
+.rt-req { display: grid; grid-template-columns: var(--rt-cols, var(--rt-tpl)); align-items: center; column-gap: 12px; padding: 6px 8px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
+.rt-req:hover { background: var(--card-2); }
+/* a long list draws only the rows near its sight, between gaps as tall as
+   the rest; a probe is a row unlike any drawn, there for the columns'
+   widths only (#2524) */
+.rt-reqs.win { overflow-anchor: none; }
+/* the measuring grid: as wide as a row's content, with its gaps, and no
+   height. Each probe's cells are in the columns a row's are (a layout's
+   placing them wins over these), in whatever row: only the columns are
+   measured */
+.rt-sizer { display: grid; grid-template-columns: var(--rt-tpl); column-gap: 12px; padding-inline: 9px; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; font-size: 12px; }
+.rt-sizer > .rt-probe { display: contents; }
+/* a probe is measured, never seen: its dot doesn't pulse */
+.rt-sizer *, .rt-sizer *::before, .rt-sizer *::after { animation: none !important; transition: none !important; }
+:where(.rt-sizer) .at { grid-column: 1; }
+:where(.rt-sizer) .asked { grid-column: 2; }
+:where(.rt-sizer) .to { grid-column: 3; }
+:where(.rt-sizer) .meta { grid-column: 4; }
+.rt-req[aria-pressed="true"] { background: var(--card-2); border-color: var(--line); color: var(--fg); }
+:is(.rt-req, .rt-probe) .at { font-variant-numeric: tabular-nums; color: var(--muted); }
+:is(.rt-req, .rt-probe) .asked { display: flex; align-items: center; gap: 6px; min-width: 0; }
+:is(.rt-req, .rt-probe) .asked i.ag { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--agent); }
+:is(.rt-req, .rt-probe) .asked .ic, :is(.rt-req, .rt-probe) .asked .ic img, :is(.rt-req, .rt-probe) .asked .ic svg { width: 14px; height: 14px; flex: none; }
+:is(.rt-req, .rt-probe) .m, :is(.rt-req, .rt-probe) .to span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* the waiting dot's 6px glow fits inside the clip: 6px on its left,
+   1px more above and below, given back outside so nothing moves
+   (#2553, dumplings) */
+:is(.rt-req, .rt-probe) .to { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--fg); padding: 1px 0 1px 6px; margin: -1px 0 -1px -6px; }
+:is(.rt-req, .rt-probe) .to .said { flex-shrink: 100000; min-width: min(9em, 60%); }
+:is(.rt-req, .rt-probe) .to .said.split { display: flex; }
+:is(.rt-req, .rt-probe) .to .said .who { flex: 0 1000 auto; min-width: 2.5em; }
+:is(.rt-req, .rt-probe) .to .said .mdl { flex: none; max-width: calc(100% - 2.5em); white-space: pre; }
+/* on a phone the account keeps a few letters, not a sliver of one (40px,
+   where phone-rows.test.cjs calls a text cut to a sliver) */
+@media (max-width: 600px) {
+  :is(.rt-req, .rt-probe) .to .said .who { min-width: 40px; }
+  :is(.rt-req, .rt-probe) .to .said .mdl { max-width: calc(100% - 40px); }
+}
+:is(.rt-req, .rt-probe) .to > .ic { width: 14px; height: 14px; }
+:is(.rt-req, .rt-probe) .to i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
+:is(.rt-req, .rt-probe).moved .to i { background: var(--accent); }
+:is(.rt-req, .rt-probe).bad .to { color: var(--red); }
+:is(.rt-req, .rt-probe).bad .to i { background: var(--red); -webkit-mask: var(--x-mark) center / contain no-repeat; mask: var(--x-mark) center / contain no-repeat; border-radius: 0; transform: scale(1.5); }
+:is(.rt-req, .rt-probe).wait .to i { background: var(--muted); }
+/* one its agent canceled: neither an answer's dot nor a failure's mark */
+.rt-req.gone .to i { background: var(--muted); }
+/* the reasoning keeps to its own box: what it was asked at is cut first,
+   then what it was sent at, never drawn over the numbers beside it (#435) */
+:is(.rt-req, .rt-probe) .to .ef { flex: 0 1 auto; display: flex; min-width: 0; margin-left: -2px; color: var(--muted); }
+:is(.rt-req, .rt-probe) .ef::before { content: "· "; flex: none; white-space: pre; }
+:is(.rt-req, .rt-probe) .to .ef span { min-width: 0; white-space: pre; }
+:is(.rt-req, .rt-probe) .to .ef .was { flex-shrink: 100000; }
+:is(.rt-req, .rt-probe) .to .ef.picked { color: var(--fg-2); }
+:is(.rt-req, .rt-probe) .ef .was { opacity: .75; }
+/* what a call was for (a Codex guardian review, a title…): a quiet grey tag by the model */
+:is(.rt-req, .rt-probe) .asked .kind, .rp-req .kind, .rt-steps li .kind { flex: none; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); white-space: nowrap; }
+.rt-steps li .kind { display: inline-block; vertical-align: 1px; }
+.rt-steps li .rt-named { white-space: nowrap; }
+.rt-steps li .rt-named > .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
+/* in a narrow row the model keeps its room first: the tag gives way, to an ellipsis */
+:is(.rt-req, .rt-probe) .asked .kind { flex: 0 100 auto; min-width: 3.2em; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
+:is(.rt-req, .rt-probe) .asked.kinded .m { flex: none; max-width: calc(100% - 3.2em - 40px); }
+:is(.rt-req, .rt-probe) .to .swap, .rt-steps li .swap { font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--amber); background: var(--amber-soft); white-space: nowrap; }
+:is(.rt-req, .rt-probe) .to .swap { flex: none; max-width: 70%; }
+:is(.rt-req, .rt-probe) .to .routed, .pr-to .routed { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; color: var(--muted); white-space: nowrap; }
+.rt-steps li.swap::before { background: var(--amber); }
+/* short of room, where it went gives way down to the provider's name, then this does
+   (.upstreamed, set with the tag: Safari before 15.4 has no :has()) */
+:is(.rt-req, .rt-probe) .to.upstreamed .said { min-width: min(10em, 45%); }
+:is(.rt-req, .rt-probe) .to .upstream, .pr-to .upstream { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; color: var(--muted); white-space: nowrap; }
+:is(.rt-req, .rt-probe) .meta { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 2px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
+.rt-metric { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; min-width: 0; }
+.rt-metric .k { color: var(--muted); }
+.rt-metric .v { font-variant-numeric: tabular-nums; }
+:is(.rt-req, .rt-probe) .tokens, .rt-session .rt-token-total { cursor: help; }
+:is(.rt-req, .rt-probe) .meta .retry-count { white-space: nowrap; }
+:is(.rt-req, .rt-probe) .meta > * + .rt-metric::before { content: "·"; margin: 0 2px; }
+:is(.rt-req, .rt-probe) .meta .cost-metric { margin-left: 10px; color: var(--fg-2); }
+:is(.rt-req, .rt-probe) .meta .cost-metric::before { display: none; }
+:is(.rt-req, .rt-probe) .meta[hidden] { display: none; }
+.rt-session { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; padding: 9px 8px; margin-top: 4px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; }
+button.rt-session { cursor: pointer; }
+.rt-session .arrow { flex: none; width: 10px; color: var(--muted); }
+.rt-session .nm { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.rt-session .dir { flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.rt-session .dir[hidden] { display: none; }
+.rt-session .summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.rt-session > .cost { flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
+.rt-session > .cost[hidden] { display: none; }
+.rt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+.rt-filters > .rt-days { flex: 1; min-width: 0; }
+.rt-group-by { flex: none; }
+/* Purpose is a list tool in its heading; the bar below chooses day and view. */
+#view-routing .rt-req-head { height: auto; min-height: 26px; flex-wrap: wrap; }
+.rt-purpose-tools { flex: none; display: inline-flex; align-items: center; margin-left: 8px; border-radius: 6px; }
+.rt-purpose-tools.set { background: var(--pill); }
+.rt-purpose { display: inline-flex; align-items: center; gap: 3px; max-width: 180px; height: 24px; }
+.rt-purpose span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-purpose svg { flex: none; opacity: .7; transition: transform .15s var(--ease); }
+.rt-purpose.open svg { transform: rotate(180deg); }
+.rt-metric-pick { display: inline-flex; align-items: center; gap: 3px; height: 24px; margin-left: 6px; }
+.rt-metric-pick.open svg { transform: rotate(180deg); }
+.rt-fold-all { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin-left: 2px; }
+.pop.proto-menu.rt-metric-menu { width: 190px; max-width: calc(100vw - 16px); background: var(--card); }
+.rt-metric-menu .pm-item { align-items: center; }
+.rt-metric-menu .pm-tick { height: 13px; width: 13px; border: 1px solid var(--line); border-radius: 3px; }
+.rt-metric-menu .on .pm-tick { border-color: var(--muted); }
+.rt-metric-menu .pm-note { display: none; }
+.rt-purpose-tools.set .rt-purpose { color: var(--fg-2); }
+.rt-purpose-clear { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 24px; padding: 0; }
+.pop.proto-menu.rt-purpose-menu { width: 190px; max-width: calc(100vw - 16px); background: var(--card); }
+.rt-purpose-menu .pm-head, .rt-purpose-menu .pm-note { display: none; }
+.rt-purpose-menu .pm-item { align-items: center; padding: 7px 8px; }
+.rt-purpose-menu .pm-tick { height: 13px; width: 13px; border: 1px solid var(--line); border-radius: 3px; }
+.rt-purpose-menu .on .pm-tick { border-color: var(--muted); }
+.rt-purpose-menu .pm-name { font-weight: 400; overflow-wrap: anywhere; }
+#view-routing :where(.rt-col.max440) .rt-req-head .note { flex: 1 1 100%; order: 1; margin: 2px 0 0; }
+:where(.rt-col.max440) .rt-purpose { max-width: 150px; }
+/* Keep the compact row on wide lists. In a narrow column the destination
+   and the metrics go under the model; individual metrics stay whole. */
+/* Where a request's numbers don't fit their column on one line (set by
+   metaFit), they go on a line of their own under where it went, which keeps
+   its room (#2288, xishuchkui-code). */
+:where(.rt-col.meta-under:not(.max760)) .rt-reqs { --rt-tpl: auto fit-content(45%) minmax(0, 1fr); }
+:where(.rt-col.meta-under:not(.max760)) .rt-req { row-gap: 2px; }
+:where(.rt-col.meta-under:not(.max760)) :is(.rt-req, .rt-probe) .meta { grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; }
+:where(.rt-col.max760) .rt-reqs { --rt-tpl: auto minmax(0, 1fr); }
+:where(.rt-col.max760) .rt-req { row-gap: 2px; }
+:where(.rt-col.max760) :is(.rt-req, .rt-probe) .asked { grid-column: 2; grid-row: 1; }
+:where(.rt-col.max760) :is(.rt-req, .rt-probe) .to { grid-column: 2; grid-row: 2; }
+:where(.rt-col.max760) :is(.rt-req, .rt-probe) .meta { grid-column: 2; grid-row: 3; justify-content: flex-start; }
+.rt-acts { padding: 4px 0; }
+/* under the requests, as wide as the page, the accounts and keys flow
+   in columns, each provider's heading over its own (in one block with
+   its first row, .rt-lead): one to a line, or a heading across each
+   line, a page of many providers ran on far below the requests (Jiabubu
+   on Discord, twice). Beside the requests (min1150) the column holds one.
+   A column is wide enough for an account's name, plan and Try now on one
+   line (danzi002 on Discord), two of them still on a phone */
+:where(.rt-more:not(.min1150)) .rt-acts, .rt-cols.solo .rt-acts { columns: min(240px, 40vw); column-gap: 0; }
+:where(.rt-more:not(.min1150)) .rt-acts > *, .rt-cols.solo .rt-acts > * { break-inside: avoid; }
+.rt-cols.solo { grid-template-columns: minmax(0, 1fr); }
+.rt-reqs.none { display: block; background: none; border-color: transparent; }
+.rt-reqs.none .empty-state { padding: 14px 12px 18px; font-size: 12px; line-height: 1.6; }
+.rt-reqs.none .empty-state b { font-size: 13px; }
+.rt-prov { display: flex; align-items: center; gap: 7px; padding: 8px 12px 4px; font-size: 12px; }
+.rt-prov .ic, .rt-prov .ic img, .rt-prov .ic svg { width: 14px; height: 14px; }
+.rt-prov > span:last-child { margin-left: auto; font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; }
+.rt-acts > :not(:first-child) > .rt-prov:first-child { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
+/* a routing named where it can be changed: a way to where it is set */
+.rt-go { cursor: pointer; }
+.rt-go::after { content: " ›"; }
+/* :focus-visible in rules of its own: Safari before 15.4 drops a list
+   holding it whole, hover included */
+.rt-prov > span.rt-go:hover { color: var(--fg); border-color: var(--fg); }
+.rt-prov > span.rt-go:focus-visible { color: var(--fg); border-color: var(--fg); }
+.rt-hub i.rt-go:hover { box-shadow: 0 0 0 3px var(--card-2), 0 0 0 4px var(--fg); }
+.rt-hub i.rt-go:focus-visible { box-shadow: 0 0 0 3px var(--card-2), 0 0 0 4px var(--fg); }
+.rt-go:focus-visible { outline: none; }
+.rt-found { animation: rtfound 1.4s ease-out; }
+@keyframes rtfound { 0%, 40% { box-shadow: inset 0 0 0 2px var(--fg); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
+@media (prefers-reduced-motion: reduce) { .rt-found { animation: none; } }
+/* an account or key: one cell each, alike (danzi002 on Discord: "显示的好
+   乱"). Its name, plan and Try now on one line, a dot before it for how it
+   is; under it what is left or when it is back, how it fared on hover.
+   Red only for what the reader has to do (.act) */
+.rt-act { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 6px 12px 9px 33px; font-size: 12px; line-height: 18px; }
+.rt-act > * { grid-column: 1 / -1; min-width: 0; }
+.rt-act > .nm { grid-column: 1; grid-row: 1; }
+.rt-act > .fix { grid-column: 2; grid-row: 1; }
+/* Try now no taller than the name beside it (WebKit's button is): the
+   cell keeps its height when the rest is lifted */
+.rt-act:not(.act) > .fix { height: 18px; align-items: center; }
+/* what the reader has to do has a line of its own, its words in full */
+.rt-act.act > .fix { grid-column: 1 / -1; grid-row: auto; flex-wrap: wrap; white-space: normal; }
+.rt-act .nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.rt-act .nm b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-act .nm span { color: var(--muted); white-space: nowrap; }
+/* narrow, the plan gives way before the name does */
+.rt-act:not(.rt-keys) .nm span { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.rt-act .nm .dot { position: absolute; left: 19px; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
+.rt-act.on .nm .dot { background: var(--green); }
+.rt-act.rest .nm .dot { background: var(--amber); }
+.rt-act.act .nm .dot { background: var(--red); }
+/* in full, a second line if it must: when it is back is what it says (#1016) */
+.rt-act .st { color: var(--fg-2); overflow-wrap: anywhere; }
+.rt-act .st:empty { display: none; }
+.rt-act .st.rest, .rt-act .st.left { color: var(--muted); }
+.rt-act.act .st.rest { color: var(--red); }
+/* the accounts' allowances read again by hand (#1834), beside the heading */
+.rt-read { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin: -3px 0 -3px 6px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; transition: background .12s, color .12s; }
+.rt-read[hidden] { display: none; }
+.rt-read:hover { color: var(--fg); background: var(--pill-hover); }
+.rt-read:focus-visible { color: var(--fg); background: var(--pill-hover); outline: none; }
+.rt-read svg { flex: none; }
+.rt-read.busy { cursor: default; color: var(--fg-2); }
+.rt-read.busy svg > * { transform-box: view-box; transform-origin: 50% 50%; animation: spin .8s linear infinite; }
+@media (prefers-reduced-motion: reduce) { .rt-read.busy svg > * { animation: none; } }
+/* a subscription account's windows (#1833), one line where it has no
+   figure of its own, the rest of it on hover */
+.rt-act .wins { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-size: 11px; font-variant-numeric: tabular-nums; }
+.rt-act .wins span + span { margin-left: 12px; }
+.rt-act .tally { display: flex; gap: 0 10px; overflow: hidden; white-space: nowrap; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.rt-act .tally > span { flex: none; }
+.rt-act .tally > span:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* with a line of its own, how it fares is on hover; one to fix says it */
+.rt-act.said > .tally { display: none; }
+.rt-act.act .tally .bad { color: var(--red); }
+.rt-act .fix { display: flex; gap: 10px; font-size: 11px; white-space: nowrap; }
+.rt-act .fix button.link { color: var(--muted); }
+.rt-act .fix button.link:hover { color: var(--fg); }
+.rt-act .fix button.link:focus-visible { color: var(--fg); }
+.rt-act .fix button.rt-signin, .rt-act.act .fix button.link { color: var(--red); }
+/* under the cell, in its bottom padding: every cell keeps its height. In
+   the flow, not absolute: Chromium put an absolute bar of a row in a
+   column's unbroken block (.rt-lead) over the row above it */
+.rt-act .bar { height: 2px; margin: 2px 0 -4px; border-radius: 2px; background: var(--card-2); overflow: hidden; }
+.rt-act:has(> .bar) { padding-bottom: 8px; }
+.rt-act .bar i { display: block; height: 100%; border-radius: 2px; background: var(--muted); }
+/* a provider's keys summed up in one row (#1319), opened to each */
+.rt-act.rt-keys { cursor: pointer; user-select: none; }
+.rt-act.rt-keys .chev { display: inline-flex; align-self: center; margin-left: auto; color: var(--muted); transition: transform .2s; }
+.rt-act.rt-keys:hover .chev { color: var(--fg); }
+.rt-act.rt-keys.open .chev { transform: rotate(180deg); }
+.rt-act.rt-keys:focus { outline: none; }
+.rt-act.rt-keys:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
+.rt-livedot { width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--green); --fg: var(--green); }
+/* it pulses while a request is under way only (#2827) */
+@media (prefers-reduced-motion: reduce) { .rt-livedot.on::after { animation: none; } }
+/* routing groups, and the providers routing over several of their own */
+.rt-gsec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
+.rt-gsec .row-head .note { margin-right: 6px; }
+/* the groups filtered by name and model, beside Select and New group */
+.rt-gsec .rt-gfilter { width: 190px; min-width: 0; flex: 0 1 190px; height: 24px; margin: 0 6px 0 4px; }
+.rt-gsec .rt-pools { margin-bottom: 0; }
+.rt-gsec .row-head + .list + .row-head { margin-top: 8px; }
+.rt-groups > *, .rt-pools > * { border-top: 1px solid var(--line-2); }
+.rt-groups > :first-child, .rt-pools > :first-child { border-top: 0; }
+.rt-group { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; cursor: pointer; transition: background .12s; }
+.rt-group:hover { background: var(--card-2); }
+.rt-group.off { opacity: .6; }
+/* switched off as a whole: its switch, its "switched off" tag and its
+   grey logos say so, and its words stay readable (jiabubu on Discord: at
+   half opacity they were too faint to read), the name a step quieter than
+   an on group's and not dimmed again by .off */
+.rt-group.disabled { opacity: 1; }
+.rt-group.disabled .nm b { color: var(--fg-2); font-weight: 500; }
+.rt-group.disabled > .ics, .rt-group.disabled > .rt-ghandle { filter: grayscale(1); opacity: .6; }
+.rt-group .rt-gon { flex: none; transform: scale(.85); }
+.rt-group .ics { display: flex; gap: 3px; flex: none; min-width: 18px; }
+.rt-group .ics .ic { width: 16px; height: 16px; }
+/* a group's logos are its handle (#779), as an agent row's logo is: the
+   grip in the row's left margin is drawn only while the row is under the
+   pointer, dragged, or its handle has the keyboard or its menu open —
+   always there it is clutter, as on the Agents page. .ag-handle is in the
+   selector so it outweighs body.window .ag-handle, whose 28px held a stack
+   of logos in, spilling it over the card's left edge onto the name (ARNO
+   on Discord) */
+.rt-group .rt-ghandle.ag-handle { position: relative; align-items: center; justify-content: center; width: auto; min-width: 24px; height: 24px; padding: 0 3px; }
+.rt-group .rt-ghandle::before { content: ""; position: absolute; left: -7px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; }
+.rt-group:is(:hover, .dragging) .rt-ghandle::before, .rt-group .rt-ghandle.open::before { opacity: 1; }
+/* apart: Safari before 15.4 drops a whole selector list with :focus-visible in it */
+.rt-group .rt-ghandle:focus-visible::before { opacity: 1; }
+/* while a row is dragged the others slide out of its way */
+.rt-groups.sorting { user-select: none; -webkit-user-select: none; }
+.rt-groups.sorting > .rt-group { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
+.rt-groups.sorting .rt-ghandle { cursor: grabbing; }
+.rt-groups > .rt-group.dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 6px 18px rgba(20, 22, 30, .12), 0 0 0 1px var(--line); border-radius: 8px; transition: none; }
+@media (prefers-reduced-motion: reduce) { .rt-groups.sorting > .rt-group { transition: none; } }
+.rt-group .main { flex: 1; min-width: 0; }
+.rt-group .nm { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
+.rt-group .nm b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.rt-group .nm code.mdl { font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); background: var(--card-2); border-radius: 5px; padding: 0 5px; white-space: nowrap; }
+.rt-group .nm small.auto { font-size: 11px; color: var(--faint); white-space: nowrap; }
+/* the check a group just saved shows by its name (savedMark) */
+.rt-group .nm .rt-gsaved { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; }
+/* Save, while the gateway saves: a small spinner, as iOS's */
+.rt-gedit button.primary.busy { opacity: .75; display: inline-flex; align-items: center; gap: 6px; }
+.rt-gedit button.primary.busy::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.6px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
+@media (prefers-reduced-motion: reduce) { .rt-gedit button.primary.busy::before { animation-duration: 2s; } }
+/* what a group's card and its editor say can be selected and copied
+   (jiabubu on Discord): its name and id, its models, its patterns, what
+   is left of its accounts; a drag across them selects, a click still
+   opens the editor (groupRow). Its controls stay controls. */
+.rt-groups:not(.sorting) > .rt-group :is(.nm b, .nm code.mdl, .mem),
+.rt-gedit .fallback:not(.rt-rules) > .fbl:not(.sorting) > .fbrow > .n, .rt-gaccts > .fbrow > .n { user-select: text; -webkit-user-select: text; }
+.rt-group .mem { margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* a pattern the group finds models by, and how many it matches now */
+.rt-group .mem.pat code, .rt-pats code { font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); }
+.rt-group .mem.pat.none, .rt-pats .fbrow.none small { color: var(--amber); }
+/* a classifier that failed (#1929): a dot, never a stripe */
+.rt-group .mem.clsfail { color: var(--amber); }
+.rt-group .mem.clsfail .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
+.rt-patadd { display: flex; gap: 6px; align-items: center; }
+.rt-pats .fbl:not(:empty) + .rt-patadd { margin-top: 4px; }
+.rt-patadd input { flex: 1; min-width: 0; }
+/* the tags take up to half the row, onto more lines rather than pushing
+   Edit and the switch out of it (young02036 on Discord) */
+.rt-group .tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 50%; }
+.rt-group .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 18px; padding: 0 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); white-space: nowrap; }
+.rt-group .tag.bad { color: var(--red); }
+.rt-group .tag.idle { opacity: .55; }
+/* the routing tag is a pop-up button for the group's routings (#3450) */
+.rt-group button.tag.rt-groute { display: inline-flex; align-items: center; gap: 3px; height: auto; margin: 0; padding: 0 6px 0 8px; border: 0; background: transparent; font: inherit; font-size: 11px; line-height: 18px; color: var(--muted); cursor: pointer; transition: color .12s, background .12s; }
+.rt-group button.tag.rt-groute svg { flex: none; opacity: .7; }
+.rt-group button.tag.rt-groute:hover, .rt-group button.tag.rt-groute.open { color: var(--fg); background: var(--card-2); }
+.rt-group button.tag.rt-groute:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
+/* a manual group's members on its card: the one picked, marked by a dot */
+.rt-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
+.rt-pick { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
+.rt-pick:hover { color: var(--fg); border-color: var(--muted); background: var(--card); }
+.rt-pick .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); }
+.rt-pick .ic, .rt-pick .ic-stack { width: 13px; height: 13px; flex: none; }
+.rt-pick .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-pick small { color: var(--faint); font-size: 10.5px; white-space: nowrap; }
+.rt-pick.on { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); cursor: default; }
+.rt-pick.on .dot { background: var(--accent); box-shadow: none; }
+.rt-pick.off { opacity: .55; }
+.rt-pick:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
+.rt-gnone { padding: 14px; font-size: 12px; line-height: 1.5; }
+/* the routing groups switched off: where they were, a line of why and the
+   way back on */
+.rt-goff { display: grid; gap: 6px; }
+.rt-goffbox { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; }
+.rt-goffwhy { flex: 1 1 260px; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--fg-2); }
+.rt-goffon { flex: none; }
+.rt-gfound, .rt-gnames { display: flex; align-items: center; gap: 12px; padding: 2px 4px 4px; }
+.rt-gfound .txt, .rt-gnames .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
+.rt-gfound b, .rt-gnames b { font-size: 12.5px; font-weight: 600; }
+.rt-gfound small, .rt-gnames small { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
+/* the names setting's three choices go under its words when it is narrow */
+.rt-gnames { flex-wrap: wrap; }
+/* the providers kept out of found groups: a text button under the
+   switch's words, its menu the app's */
+.rt-gfound .rt-skip-pick { justify-self: start; display: inline-flex; align-items: center; gap: 3px; max-width: 100%; height: 22px; margin-left: -7px; font-size: 11.5px; }
+.rt-skip-pick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-skip-pick svg { flex: none; opacity: .7; transition: transform .15s var(--ease); }
+.rt-skip-pick.open svg { transform: rotate(180deg); }
+.pop.proto-menu.rt-skip-menu { width: 230px; max-width: calc(100vw - 16px); background: var(--card); }
+.rt-gnames .txt { flex-basis: 220px; }
+.rt-ghidden { display: flex; align-items: center; padding: 4px 12px 4px 8px; }
+.rt-ghidden .rt-gremoved { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); }
+.rt-ghidden .rt-gremoved:hover, .rt-ghidden .rt-gremoved.open { color: var(--fg-2); }
+.rt-gsel { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 14px; }
+.rt-group.rt-gpick { cursor: default; }
+.rt-group.rt-gpick.on { background: var(--card-2); }
+.rt-gedit { cursor: default; scroll-margin-top: 12px; }
+/* the group being edited reads as selected among the others: a soft tint
+   and an accent ring, as a list marks its selected row; its Save and
+   Cancel stay at the bottom of the window while its rows scroll by, at a
+   push button's size (Jiabubu on Discord). The list clips instead of
+   hiding its overflow, so the bar can stick. */
+.list.rt-groups { overflow: hidden; overflow: clip; }
+.rt-groups > .rt-gedit { --ged-bg: color-mix(in srgb, var(--accent) 4%, var(--card)); background: var(--ged-bg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
+.rt-groups > .rt-gedit:first-child { border-radius: 11px 11px 0 0; }
+.rt-groups > .rt-gedit:last-child { border-radius: 0 0 11px 11px; }
+.rt-groups > .rt-gedit:only-child { border-radius: 11px; }
+.rt-groups > .rt-gedit + * { border-top-color: transparent; }
+/* the editor's Cancel and Add stay in sight, the bar's ground down to the
+   window's edge: the view's own foot padding (.view, body.window and the
+   phone page's in app.css) under it had shown as a gap (Jiabubu on Discord) */
+.rt-gedit > .bar { position: sticky; bottom: calc(-1 * var(--vfoot, 4px)); z-index: 3; background: var(--ged-bg, var(--card)); padding-bottom: calc(10px + var(--safe, 0px)); margin-bottom: calc(-10px - var(--safe, 0px)); }
+body.window .rt-gedit > .bar { --vfoot: 8px; }
+@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) { body.web .rt-gedit > .bar { --vfoot: max(12px, env(safe-area-inset-bottom)); --safe: env(safe-area-inset-bottom, 0px); } }
+.rt-gedit > .bar > button.text:not(.danger) { height: 28px; padding: 0 12px; border-radius: 7px; font-size: 13px; }
+.rt-gedit .ehead.folds { cursor: pointer; }
+.rt-gedit .ehead.folds:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.rt-gedit .segs { max-width: 100%; }
+/* its hint as close under the choices as every other row's: 4px */
+.rt-gedit .ctx-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+.rt-gedit .ctx-wrap .hint { flex-basis: 100%; margin-top: 0; }
+.rt-gedit .gsuffix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
+.rt-gedit .gsuffix .hint { overflow-wrap: anywhere; }
+.rt-gedit .ctx-wrap input.ctx-in { width: 96px; flex: none; }
+.rt-gedit .ctx-wrap input.first-in { width: 64px; }
+.rt-gedit .ctx-wrap .first-unit { margin-left: -2px; color: var(--muted); font-size: 12px; }
+.rt-gedit .ctx-wrap .first-unit[hidden] { display: none; }
+.rt-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px 10px 14px; }
+.rt-pool .nm { flex: 1 1 12em; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
+.rt-pool .nm .ic { width: 16px; height: 16px; }
+.rt-pool .nm b { font-weight: 600; }
+.rt-pool .nm span:last-child { font-size: 12px; color: var(--muted); }
+/* a label column and a control column, so Routing's and Stays' segments
+   start at one edge whatever their labels' widths */
+.rt-pool .ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 6px 8px; min-width: 0; max-width: 100%; }
+.rt-pool .segs { max-width: 100%; flex-wrap: wrap; }
+.rt-pool .lab { display: contents; }
+.rt-pool .lab small { font-size: 11px; color: var(--muted); }
+/* narrow, a row keeps only its routing, which switches from here */
+@media (max-width: 560px) { body:not(.web) .rt-group .tags > :not(.rt-groute) { display: none; } }
+@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
+  body.web .rt-group {
+    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; /* the logos as wide as they are */
+    gap: 6px 8px; padding: 12px 12px 12px 14px; /* the grip's room, as wide */
+  }
+  body.web .rt-group .tags { justify-content: flex-start; max-width: none; grid-column: 2 / -1; grid-row: 2; }
+  body.web .rt-group > .text { grid-column: 3; grid-row: 1; }
+  body.web .rt-group .nm { flex-wrap: wrap; }
+  body.web .rt-group .mem { white-space: normal; overflow-wrap: anywhere; }
+  body.web .rt-pick { height: auto; min-height: 44px; padding: 8px; font-size: 12.5px; }
+  body.web .rt-pick { flex-wrap: wrap; }
+  body.web .rt-gedit { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; }
+  body.web .rt-gedit label { text-align: left; padding-top: 8px; }
+  body.web .rt-gedit .segs { flex-wrap: wrap; }
+  body.web .rt-gedit .fbrow { flex-wrap: wrap; justify-content: normal; }
+  body.web .rt-gedit .fbrow .n { flex: 1 1 calc(100% - 60px); white-space: normal; overflow-wrap: anywhere; }
+  body.web .rt-gedit .fbrow > .grow { display: none; }
+  body.web .rt-gedit .fbrow .text { min-width: 44px; }
+  body.web .rt-cond { height: auto; min-height: 44px; }
+  body.web .rt-gadd { min-height: 44px; }
+  body.web .rt-pool .ctl { grid-template-columns: minmax(0, 1fr); }
+  body.web .rt-pool .lab small { padding-top: 6px; }
+  body.web .rt-stats { flex-wrap: wrap; gap: 10px 16px; }
+  /* the upstream a request went to takes a line of its own on a phone,
+     so the reasoning beside the provider isn't cut to two letters */
+  body.web :is(.rt-req, .rt-probe) .to.upstreamed { flex-wrap: wrap; row-gap: 0; }
+  body.web :is(.rt-req, .rt-probe) .to.upstreamed .said { flex: 1 1 0; min-width: 0; }
+  body.web :is(.rt-req, .rt-probe) .to .upstream { flex-basis: 100%; padding-left: 12px; }
+  body.web #view-routing > .row-head .note { flex: 1 1 100%; order: 1; margin: 0; }
+}
+.rt-gsec .segs .opt { white-space: nowrap; }
+/* the groups, in a page 520px wide or less */
+:where(.rt-gpage.max520) .rt-gsec .row-head .note { display: none; }
+:where(.rt-gpage.max520) .rt-gsec .rt-gfilter { flex: 1 1 auto; width: auto; }
+:where(.rt-gpage.max520) .rt-gedit { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+:where(.rt-gpage.max520) .rt-gedit label { text-align: left; padding-top: 8px; }
+:where(.rt-gpage.max520) .rt-gedit .segs .opt { padding-left: 9px; padding-right: 9px; }
+/* the models and patterns take the column's width and no more: a grid's
+   auto track grows to its widest row's content, so a long model name with
+   its chips pushed the rows past the editor's edge, cut off there, and
+   the patterns below no longer lined up with them. Tight, the name gives
+   way (it ellipsizes, to 8em), and tighter still (German's longer words)
+   the chips go on a line of their own, right-aligned, rather than past
+   the edge; none of them is ever cut */
+.rt-gedit .fallback, .rt-gedit .fallback:not(.rt-rules) .fbl { grid-template-columns: minmax(0, 1fr); }
+/* in :where, so a phone's own row (body.web, above) still wins */
+:where(.rt-gedit .fallback:not(.rt-rules)) .fbrow { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
+:where(.rt-gedit .fallback:not(.rt-rules)) .fbrow .n { flex: 1 1 8em; }
+.rt-gedit .fbrow .n { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.rt-gedit .fbrow .n > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.rt-gedit .fbrow .n > small { flex: 0 100 auto; } /* gives way before the name */
+.rt-gedit .fbrow .n small { color: var(--muted); font-size: 11.5px; }
+.rt-gedit .fbrow.off .n { color: var(--muted); text-decoration: line-through; }
+.rt-gedit .fbrow .rt-mon { transform: scale(.85); }
+/* a named member's number is its handle: the grip beside it shows on
+   hover, dragged or from the keyboard only, as on the groups' cards */
+.rt-gedit .fbrow .rt-mhandle.ag-handle { position: relative; width: 18px; height: 22px; margin: 0 -2px; font: inherit; color: var(--muted); font-variant-numeric: tabular-nums; }
+.rt-gedit .fbrow .rt-mhandle::before { content: ""; position: absolute; left: -7px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; }
+.rt-gedit .fbrow:is(:hover, .dragging) .rt-mhandle::before { opacity: 1; }
+/* apart: Safari before 15.4 drops a whole selector list with :focus-visible in it */
+.rt-gedit .fbrow .rt-mhandle:focus-visible::before { opacity: 1; }
+.rt-gedit .fbl.sorting { user-select: none; -webkit-user-select: none; }
+.rt-gedit .fbl.sorting > .fbrow { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
+.rt-gedit .fbl.sorting .rt-mhandle { cursor: grabbing; }
+.rt-gedit .fbl > .fbrow.dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 6px 18px rgba(20, 22, 30, .12), 0 0 0 1px var(--line); border-radius: 8px; transition: none; }
+@media (prefers-reduced-motion: reduce) { .rt-gedit .fbl.sorting > .fbrow { transition: none; } }
+.rt-gedit .fbrow.muted > :not(.rt-mon):not(.text) { opacity: .45; }
+/* a member's own reasoning, beside its Up and Remove */
+.rt-gedit .fbrow .rt-fixed { height: 24px; padding: 0 9px; font-size: 11.5px; flex: none; }
+/* a member's weight under By weight (#1910), edited in place */
+.rt-gedit .fbrow .rt-weight { font-variant-numeric: tabular-nums; }
+.rt-gedit .fbrow .rt-weight-in { width: 64px; flex: none; height: 24px; font-size: 12px; padding: 0 6px; }
+/* a group a member of a group is: it takes no reasoning of its own (its
+   models reason as it says, provider.SaveGroup), so its chip names the group
+   it follows and opens that group's card instead. It takes the room it needs
+   and gives it back when the row is tight, rather than widening it: the
+   desktop app's member row doesn't wrap (only body.web's does) */
+.rt-gedit .fbrow .rt-inner { flex: 0 1 auto; min-width: 0; }
+.rt-gedit .fbrow .rt-inner > span { overflow: hidden; text-overflow: ellipsis; }
+/* a group's account choice (Group.Accounts): a long account name ellipsizes */
+.rt-gedit .fbrow .rt-gacct { flex: 0 1 auto; min-width: 0; }
+.rt-gedit .fbrow .rt-gacct > span { overflow: hidden; text-overflow: ellipsis; }
+.rt-gedit > .rt-gacc[hidden] { display: none; }
+.rt-gadd {
+  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 11px 0 9px; border-radius: 8px;
+  border: 1px dashed var(--line); background: transparent; color: var(--muted);
+  font: inherit; font-size: 12.5px; cursor: pointer;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.rt-gadd:hover, .rt-gadd.open { color: var(--fg); border-color: var(--muted); background: var(--card); }
+.rt-gadd svg { flex: none; }
+/* Add a rule, and beside it a rule by what the message asks for */
+.rt-gadds { display: flex; flex-wrap: wrap; gap: 6px; }
+.rt-gadds > [hidden] { display: none; }
+/* Add a model, and beside it Sort by weight while it would move something */
+.rt-madds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.rt-madds > [hidden] { display: none; }
+/* a group's rules, each one line read as a sentence: the conditions it
+   has, → and the model it sends that turn to first; its acts under ⋯ */
+.rt-rules .fbl:not(:empty) + .rt-gadds { margin-top: 2px; }
+/* every rule's → and model start at one x: the number, the conditions
+   (as wide as the widest rule's, to at most half the width before they
+   wrap), what it does, the ⋯. Each rule is a grid of its own, its
+   conditions at least --rt-condw wide, the widest rule's conditions as
+   measured (fitConds). The rules were a subgrid of the list once, the way
+   Safari 16 crashed sizing the requests (#3731, #3955) */
+.rt-rules .fbl { display: flex; flex-direction: column; }
+.rt-rule { display: grid; grid-template-columns: 16px fit-content(50%) minmax(0, 1fr) auto; align-items: start; column-gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
+.rt-rule > .rt-line.when { min-width: var(--rt-condw, 0); }
+.rt-rule:first-child { border-top: 0; padding-top: 2px; }
+.rt-rule > .i { line-height: 26px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }
+/* a rule's number is its handle, as a model's is: the grip beside it
+   shows on hover, dragged or from the keyboard only */
+.rt-rule > .rt-rhandle.ag-handle { position: relative; width: 16px; height: 26px; padding: 0; margin: 0; font: inherit; font-size: 11.5px; line-height: 26px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
+.rt-rule > .rt-rhandle::before { content: ""; position: absolute; left: -5px; top: 50%; width: 5px; height: 11px; margin-top: -5.5px; background: radial-gradient(circle, var(--muted) .9px, transparent 1.2px) 0 0 / 3.5px 3.75px; opacity: 0; transition: opacity .15s; }
+.rt-rule:is(:hover, .dragging) > .rt-rhandle::before { opacity: 1; }
+/* apart: Safari before 15.4 drops a whole selector list with :focus-visible in it */
+.rt-rule > .rt-rhandle:focus-visible::before { opacity: 1; }
+.rt-rules > .fbl.sorting { user-select: none; -webkit-user-select: none; }
+.rt-rules > .fbl.sorting > .rt-rule { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
+.rt-rules > .fbl.sorting .rt-rhandle { cursor: grabbing; }
+.rt-rules > .fbl > .rt-rule.dragging { position: relative; z-index: 2; background: var(--card); box-shadow: 0 6px 18px rgba(20, 22, 30, .12), 0 0 0 1px var(--line); border-radius: 8px; transition: none; }
+@media (prefers-reduced-motion: reduce) { .rt-rules > .fbl.sorting > .rt-rule { transition: none; } }
+.rt-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+/* on a narrow page what it does goes under the conditions */
+@media (max-width: 640px) {
+  .rt-rule { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 6px; }
+  .rt-rule > .rt-line.when { min-width: 0; }
+  .rt-rule > .rt-then { grid-column: 2; grid-row: 2; }
+  .rt-rule > .rt-rmore { grid-column: 3; grid-row: 1; }
+}
+.rt-arrow { color: var(--muted); font-size: 12px; padding: 0 1px; }
+/* a set condition, and the × on its corner that takes it off: shown on
+   hover or focus, always where nothing hovers */
+.rt-c { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
+.rt-cx {
+  position: absolute; top: -5px; right: -5px; z-index: 1; display: grid; place-items: center;
+  width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
+  background: var(--card); color: var(--muted); cursor: pointer;
+  opacity: 0; pointer-events: none; transition: opacity .12s, color .12s;
+}
+.rt-cx:hover { color: var(--fg); border-color: var(--muted); }
+.rt-c:hover > .rt-cx, .rt-c:focus-within > .rt-cx { opacity: 1; pointer-events: auto; }
+@media (hover: none) { .rt-cx { opacity: 1; pointer-events: auto; } }
+/* the quiet + that adds a condition (in words while the rule has none),
+   and the one that adds the rule's next model */
+.rt-addc, .rt-adduse {
+  display: inline-grid; grid-auto-flow: column; place-items: center; gap: 5px;
+  width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid transparent;
+  background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.rt-addc.wide { width: auto; height: 26px; padding: 0 10px 0 8px; border: 1px dashed var(--line); }
+.rt-addc:hover, .rt-addc.open, .rt-addc:focus-visible, .rt-adduse:hover, .rt-adduse.open, .rt-adduse:focus-visible { color: var(--fg); background: var(--card-2); }
+.rt-addc.wide:hover, .rt-addc.wide.open { border-color: var(--muted); }
+/* the rule's ⋯, always drawn, in the icons' quiet grey: it is the only
+   way to move or remove a rule, and drawn on hover alone nobody found it
+   (ppBruce on Discord: "a rule added has no delete button") */
+.rt-rule > .rt-rmore { align-self: start; }
+.rt-rule > .rt-rmore.open { background: var(--pill); color: var(--fg); }
+/* why Save refused the rule, under it until it has a condition */
+.rt-rule > .rt-rneed { grid-column: 2 / -1; color: var(--amber, var(--muted)); font-size: 11.5px; }
+.rt-rule > .rt-rneed[hidden] { display: none; }
+/* how a part works, under an ⓘ beside it */
+.rt-info { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); cursor: help; outline: none; }
+.rt-info:hover, .rt-info:focus-visible { color: var(--fg); }
+.rt-info:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
+.rt-info[hidden] { display: none; }
+.rt-gadds { align-items: center; }
+.rt-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.rt-cond {
+  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
+  border: 1px dashed var(--line); background: transparent; color: var(--muted);
+  font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; max-width: 100%;
+  transition: color .15s, border-color .15s, background .15s;
+}
+.rt-cond:hover { color: var(--fg); border-color: var(--muted); }
+.rt-cond.on { border-style: solid; color: var(--fg); background: var(--card-2); }
+/* a chip in a Settings row too, where .row .ic makes icons 18–22px (duanckham on X) */
+.rt-cond .ic, .row .rt-cond .ic, body.window .row .rt-cond .ic { width: 14px; height: 14px; flex: none; }
+.rt-cond > span { overflow: hidden; text-overflow: ellipsis; }
+/* a group's logos overlap in discs whose rings sit outside them: clipped, the first lost its edge */
+.rt-cond > .ic-stack { overflow: visible; }
+.rt-cond.tk { cursor: text; }
+.rt-cond.in { cursor: text; }
+.rt-cond.fd { cursor: text; }
+.rt-cond.fd input, .editor .rt-cond.fd input[type="text"] { width: 24ch; }
+.rt-cond.xf { cursor: text; }
+.rt-cond.xf input, .editor .rt-cond.xf input[type="text"] { width: 24ch; }
+/* a narrow line squeezes what was typed (it scrolls in its box), never
+   the word that says what the box is */
+.rt-cond.in > span:not(.rt-grow), .rt-cond.fd > span, .rt-cond.xf > span { flex: none; }
+.rt-cond.fd > input, .rt-cond.xf > input { min-width: 0; flex: 0 1 auto; }
+/* the intent, a sentence, shown whole: its box as wide as the words and
+   onto more lines where the line ends. A hidden copy of the words, in the
+   same cell and font, gives the box its size; the pill rounds less once
+   it is more than one line */
+.rt-cond.in { height: auto; min-height: 26px; padding-top: 2px; padding-bottom: 2px; border-radius: 13px; white-space: normal; }
+.rt-cond.in > span:first-child { align-self: flex-start; line-height: 20px; }
+.rt-cond > .rt-grow { align-self: flex-start; display: inline-grid; flex: 0 1 auto; min-width: min(6ch, 100%); max-width: 100%; overflow: visible; }
+.rt-grow::after, .rt-grow > textarea, .editor .rt-grow > textarea {
+  grid-area: 1 / 1; box-sizing: border-box; margin: 0; padding: 0 2px; border: 0; min-width: 0;
+  font: inherit; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.rt-grow::after { content: attr(data-v) " "; visibility: hidden; }
+.rt-grow > textarea, .editor .rt-grow > textarea {
+  width: 100%; height: 100%; min-height: 20px; resize: none; overflow: hidden;
+  background: transparent; color: inherit; outline: none; box-shadow: none; border-radius: 0;
+}
+@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
+  /* a phone's page sets its boxes at 16px; a rule's fields keep the line's
+     own size (iOS gets maximum-scale=1 from layout.js, so focus doesn't zoom) */
+  body.web .rt-cond input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
+  body.web .rt-grow, body.web .rt-grow > textarea { font-size: inherit; }
+  body.web .rt-cond.in { padding-top: 11px; padding-bottom: 11px; } /* the first line in the middle of the 44px pill */
+  body.web .rt-grow > textarea { min-height: 0; }
+}
+/* a rule's hours: two times in the pill, typed; one that isn't a time is marked */
+.rt-cond.tm { cursor: text; }
+.rt-cond.tm input.clock, .editor .rt-cond.tm input.clock[type="text"] { width: 5.5ch; text-align: center; }
+.rt-cond.tm.bad { border-style: solid; border-color: var(--amber, var(--muted)); }
+/* the time zone a rule's hours are in, when the server's clock is another */
+.rt-zone { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.rt-cond[hidden] { display: none; }
+.rt-classifier { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
+.rt-classifier[hidden] { display: none; }
+.rt-classifier .w { color: var(--muted); font-size: 12px; }
+.rt-classifier .hint { flex-basis: 100%; }
+/* the effort's classifier offering to pick the model too: a line of its
+   own, wrapping rather than running past a narrow window */
+.rt-gadds .rt-try { white-space: normal; text-align: left; color: var(--accent); }
+.rt-classifier .rt-cls-more { margin-left: -7px; white-space: normal; text-align: left; color: var(--accent); }
+/* the levels a group names for agents (#295): one toggle each */
+.rt-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; }
+.rt-levels[hidden] { display: none; }
+/* the field is the pill: the editor's boxed input (its border and focus ring) stays off it */
+.rt-cond input, .editor .rt-cond input[type="text"], .editor .rt-cond input[type="number"], .editor .rt-cond input:focus { box-shadow: none; border-radius: 0; }
+.editor .rt-cond input:focus-visible { box-shadow: none; border-radius: 0; }
+.rt-cond:focus-within { border-style: solid; border-color: var(--accent); color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
+.rt-cond input, .editor .rt-cond input[type="text"], .editor .rt-cond input[type="number"] { width: 7ch; height: 20px; padding: 0 2px; border: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
+.rt-cond input::-webkit-outer-spin-button, .rt-cond input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.rt-rwarn { color: var(--amber, var(--muted)); font-size: 11.5px; }
+.rt-rwarn:empty { display: none; }
+
+/* a replay: the time it is replaying, what is in flight then, and a track */
+.rt-replay { margin: 10px 0 2px; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; }
+.rp-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.rp-tag { font-size: 11px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
+.rp-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rppulse 1.2s ease-in-out infinite; }
+@keyframes rppulse { 50% { opacity: .3; } }
+.rp-clock { font-size: 22px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
+.rp-day { font-size: 11px; color: var(--muted); }
+.rp-skip { font-size: 11px; color: var(--accent); }
+.rp-top .grow { flex: 1; }
+.rp-what { display: grid; gap: 3px; min-height: 20px; }
+.rp-req { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; cursor: pointer; }
+.rp-req b { color: var(--fg); font-weight: 600; }
+.rp-req.on .rp-n { color: var(--fg); }
+.rp-req i.ag { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--agent); }
+.rp-req .rp-to { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rp-req .rp-at { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; color: var(--faint); }
+.rp-n { flex: none; font-variant-numeric: tabular-nums; }
+.rp-wait { font-size: 12px; color: var(--faint); }
+.rp-track { position: relative; height: 16px; cursor: pointer; }
+.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--line); }
+.rp-mark { position: absolute; top: 4px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 1.5px; background: var(--agent); opacity: .45; transition: opacity .2s, transform .2s; }
+.rp-mark.on { opacity: 1; transform: scaleY(1.5); }
+.rp-head { position: absolute; top: 1px; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--fg); pointer-events: none; }
+@media (max-width: 520px) { .rp-req .rp-at { display: none; } }
+
+/* the days the routing history keeps: live, then each day, newest first */
+.rt-days, .rt-group-by { display: flex; gap: 4px; overflow-x: auto; padding: 0 2px 6px; scrollbar-width: none; }
+.rt-days::-webkit-scrollbar, .rt-group-by::-webkit-scrollbar { display: none; }
+.rt-day { flex: none; display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--muted); padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: none; white-space: nowrap; }
+.rt-day small { font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
+.rt-day:hover { color: var(--fg); }
+.rt-day.on { color: var(--fg); border-color: var(--fg); }
+/* the days that fit, the rest under the last pill (#961) */
+.rt-days { overflow-x: hidden; }
+.rt-days .rt-day[hidden] { display: none; }
+.rt-day-more svg { flex: none; align-self: center; opacity: .7; transition: transform .15s var(--ease); }
+.rt-day-more.open svg { transform: rotate(180deg); }
+
+/* the tray panel's Routing tab: a small stage, then the gateway's latest
+   requests, two lines each */
+.pr-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); column-gap: 38px; align-items: center; height: 104px; padding: 0 10px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); overflow: hidden; }
+.ps-wires, .ps-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+.ps-wire { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; transition: stroke .25s; }
+.ps-wire.on { stroke: color-mix(in srgb, var(--agent, var(--accent)) 55%, transparent); }
+.ps-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.ps-from { align-items: flex-end; }
+.ps-to { align-items: flex-start; }
+.ps-node { display: flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; height: 22px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; color: var(--fg); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); }
+.ps-node .ic, .ps-node .ic img, .ps-node .ic svg { width: 13px; height: 13px; flex: none; }
+.ps-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
+.ps-name small { margin-left: 4px; font-size: 10.5px; font-weight: 400; color: var(--muted); }
+.ps-dst > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
+.ps-dst.bad > i { background: var(--red); -webkit-mask: var(--x-mark) center / contain no-repeat; mask: var(--x-mark) center / contain no-repeat; border-radius: 0; transform: scale(1.5); }
+.ps-dst.wait > i { background: var(--muted); }
+.ps-hub { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--fg); background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px rgba(0, 0, 0, .08); }
+.ps-hub svg { width: 24px; height: 24px; }
+.ps-hub.busy { animation: ps-ring 1.8s ease-out infinite; }
+@keyframes ps-ring { 0% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 color-mix(in srgb, var(--fg) 16%, transparent); } 70%, 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 7px transparent; } }
+.ps-dot { fill: var(--agent, var(--accent)); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--agent, var(--accent)) 60%, transparent)); transition: fill .2s, opacity .3s; }
+.ps-dot.ok { fill: var(--green); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--green) 60%, transparent)); }
+.ps-dot.bad { fill: var(--red); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--red) 60%, transparent)); }
+.ps-dot.wait { animation: ps-wait 1.2s ease-in-out infinite; }
+.ps-dot.gone { opacity: 0; }
+@keyframes ps-wait { 50% { opacity: .45; } }
+.panel-routing { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 6px; }
+.pr-head { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 2px 0 4px; font-size: 12px; color: var(--muted); }
+.pr-head .rt-livedot { margin-left: 0; flex: none; }
+.pr-today { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.pr-today b { color: var(--fg); font-weight: 600; }
+.pr-head .text { flex: none; font-size: 12px; }
+.skeleton.pr-sk { display: inline-block; width: 150px; height: 9px; border-radius: 4px; vertical-align: middle; }
+/* the stage and the requests to come, their own size, as skeletons */
+.skeleton.pr-ghost { border-radius: 11px; }
+.pr-ghost > * { visibility: hidden; }
+/* a Manual group's model, picked from the tray (#2489) */
+.pr-picks { display: flex; flex-direction: column; padding: 4px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); }
+.pr-pick { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 2px 4px 2px 8px; font-size: 12px; }
+.pr-gname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 550; }
+.pr-pick .sess-pick { flex: 0 1 auto; min-width: 0; max-width: 62%; }
+.pr-none { margin: 0; padding: 12px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); font-size: 12px; line-height: 1.55; color: var(--muted); }
+.pr-none b { display: block; color: var(--fg); font-weight: 550; }
+.pr-list { display: flex; flex-direction: column; padding: 4px; border-radius: 11px; background: var(--card); box-shadow: var(--card-edge); }
+.pr-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: 12px; text-align: left; color: var(--fg-2); background: none; border: 0; cursor: pointer; }
+.pr-req:hover { background: var(--card-2); }
+.pr-a, .pr-to { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.pr-a .ic, .pr-a .ic img, .pr-a .ic svg { width: 14px; height: 14px; flex: none; }
+.pr-who { flex: none; color: var(--fg); font-weight: 550; }
+.pr-a .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--code-style, normal) 500 11px/1.5 var(--code-font, var(--code)); font-stretch: var(--code-stretch, 100%); color: var(--fg-2); background: var(--card-2); border-radius: 5px; padding: 0 5px; }
+.pr-a .kind { flex: 0 100 auto; min-width: 3.2em; max-width: 8em; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--muted); background: var(--card-2); border: 1px solid var(--line); white-space: nowrap; }
+.pr-req .at { justify-self: end; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
+.pr-to { padding-left: 20px; gap: 5px; color: var(--fg-2); }
+.pr-to > i { flex: none; width: 14px; margin-left: -20px; margin-right: 1px; text-align: center; font-style: normal; font-size: 11px; color: var(--faint); }
+.pr-req.moved .pr-to > i { color: var(--accent); }
+.pr-req.bad .pr-to { color: var(--red); }
+.pr-req.bad .pr-to > i { color: var(--red); }
+.pr-req.wait .pr-to > i { color: var(--fg-2); animation: ps-wait 1.2s ease-in-out infinite; }
+.pr-where { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pr-m { flex: 0 2 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
+.pr-m::before { content: "· "; }
+.pr-to .swap { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; color: var(--amber); background: var(--amber-soft); white-space: nowrap; }
+.pr-line { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-width: 0; }
+.pr-line .pr-to { flex: 1 1 auto; }
+.pr-req .meta { flex: none; max-width: 100%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
+@media (prefers-reduced-motion: reduce) { .pr-req.wait .pr-to > i, .ps-hub.busy, .ps-dot.wait { animation: none; } .ps-dst.wait > i::after { animation: none; } }
+@supports not (grid-template-columns: subgrid) {
+  @media (max-width: 700px) {
+    .rt-reqs { --rt-tpl: auto minmax(0, 1fr); }
+    .rt-req { row-gap: 2px; }
+    :is(.rt-req, .rt-probe) .asked { grid-column: 2; grid-row: 1; }
+    :is(.rt-req, .rt-probe) .to { grid-column: 2; grid-row: 2; }
+    :is(.rt-req, .rt-probe) .meta { grid-column: 2; grid-row: 3; justify-content: flex-start; }
+  }
+}
+/* templates: groups for common needs made of the user's own models, each
+   added in a click (provider.Templates) */
+.rt-gtpl { padding: 10px 12px 12px; display: grid; gap: 8px; }
+.rt-gtpl-head { font-size: 12px; color: var(--muted); }
+/* Import a group (laincatx on X): the text pasted, then what came of it */
+.rt-gimport { padding: 10px 12px 12px; display: grid; gap: 8px; min-width: 0; border-bottom: 1px solid var(--line); }
+.rt-gimport-text { width: 100%; box-sizing: border-box; min-height: 72px; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-family: var(--code-font, var(--code)); font-size: 12px; line-height: 1.45; resize: vertical; outline: none; overflow-wrap: anywhere; }
+.rt-gimport-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
+.rt-gimport .acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
+.rt-gimport-done { font-size: 12.5px; font-weight: 600; }
+.rt-gimport-missing, .rt-gimport-note { font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
+.rt-gimport-missing { color: var(--danger, #d66); }
+.rt-gtpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
+.rt-gtpl-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
+.rt-gtpl-card .hd { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.rt-gtpl-card .hd b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
+.rt-gtpl-card .hd .ic, .rt-gtpl-card .hd .ic-stack { flex: none; }
+.rt-gtpl-card .desc { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
+.rt-gtpl-card .mem { font-size: 11.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-gtpl-card .mem.why { color: var(--faint); white-space: normal; }
+.rt-gtpl-card.off b { color: var(--muted); }
+.rt-gtpl-card .acts { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
+.rt-gtplbtn { display: inline-flex; align-items: center; gap: 4px; }
+.rt-log-head .mask-badge { margin-left: 8px; }
+/* under Accounts and keys: Show N more, and the way to each account's
+   allowances in full on the Usage page (ferock4669, iyou00 on Discord) */
+.rt-acts-foot { display: flex; align-items: center; gap: 12px; padding: 2px 12px 4px 33px; font-size: 11px; }
+.rt-acts-foot[hidden] { display: none; }
+.rt-acts-foot .grow { flex: 1; }
+.rt-acts-foot button.text { font-size: 11px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rt-acts-foot button.text:hover { color: var(--fg); }
+.rt-acts-foot button.text[hidden] { display: none; }