770 lines
76 KiB
CSS
770 lines
76 KiB
CSS
/* Row 53 (#1542): the console shell restyled to docs/design (tokens.css, icons.svg, IMPLEMENTING.md).
|
||
Loaded last, after tokens.css, so it overrides app.css, console.css, live.css and bus.css
|
||
without editing them. Colours come only from tokens.css; nothing here is set inline. */
|
||
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400.woff2) format("woff2")}
|
||
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500.woff2) format("woff2")}
|
||
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-700.woff2) format("woff2")}
|
||
:root{--bar-h:53px;--foot-h:33px}
|
||
/* app.css sets a light --shadow and a darker one for html[data-mode=dark|dim]; System on a dark OS needs the darker one too. */
|
||
@media (prefers-color-scheme:dark){:root:not([data-mode]){--shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px rgb(0 0 0/.35)}}
|
||
|
||
/* Type scale: page title 28/800, section 20/800, question 16/700, text 14/1.5, table 13, labels 11/700 caps, mono 12.5. */
|
||
body{font:400 14px/1.5 var(--font);color:var(--text);background:var(--canvas)}
|
||
.content h1{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--strong)}
|
||
.content h2,.inspector h2{font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--strong)}
|
||
.content h3{font-size:16px;font-weight:700}
|
||
.s1-q{font-size:16px;font-weight:700;color:var(--strong)}
|
||
.tree-title,.label{font:700 11px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
|
||
code,kbd,pre,.mono{font-family:var(--mono);font-size:12.5px}
|
||
kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 .35em;background:var(--surface);color:var(--strong);white-space:nowrap;font-size:11.5px}
|
||
.count,td,.s1-twhen,time,.fresh,.kv dd{font-variant-numeric:tabular-nums}
|
||
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
|
||
table.sessions tbody tr:focus-visible,table.s1-table tbody tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
|
||
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
|
||
|
||
/* Command bar: mark, Ctrl+K, freshness line, appearance. */
|
||
.cmdbar{flex-wrap:nowrap;gap:10px;padding:8px 12px;min-height:var(--bar-h);min-width:0}
|
||
.wordmark{color:var(--strong);font-weight:800;font-size:16px;flex-wrap:nowrap;white-space:nowrap}
|
||
.wordmark .mark{width:20px;height:auto;fill:var(--action);flex:none}
|
||
.wordmark small{font-size:11px}
|
||
.cmdk{flex:1 1 160px;max-width:460px;display:flex;align-items:center;gap:8px;min-height:36px;border:1px solid var(--line);background:var(--canvas);border-radius:var(--r);padding:5px 10px;color:var(--muted);cursor:pointer;text-align:left;min-width:0;font:inherit;font-size:13px}
|
||
.cmdk span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.cmdk:hover{border-color:var(--border)}
|
||
.fresh{font-size:12px;color:var(--muted);white-space:nowrap;margin:0 0 0 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
|
||
.fresh b{color:var(--success);font-weight:600}
|
||
.fresh .warn{color:var(--warning);font-weight:700}
|
||
#fresh-bus,body.on-bus #fresh-board{display:none}
|
||
body.on-bus #fresh-bus{display:inline}
|
||
.fresh+.cmd-right{margin-left:0}
|
||
.cmd-right{flex-wrap:nowrap}
|
||
.cmd-right .btn{min-height:32px;padding:4px 10px;font-size:13px}
|
||
.cmd-right select{min-height:32px;font-size:13px;border-radius:var(--r)}
|
||
/* Labels sit beside their selects so the bar stays one row of --bar-h. */
|
||
.cmd-right label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
|
||
@media (max-width:1279px){.cmd-right label{font-size:0;gap:0}.cmd-right label select{font-size:13px}}
|
||
|
||
/* Section list: icon, label, count. */
|
||
.s1-section{gap:9px;padding:6px 8px;border:0;border-radius:var(--r);color:var(--text);font-size:13.5px;min-height:34px;flex-wrap:nowrap}
|
||
.s1-section:hover{background:var(--raised)}
|
||
.s1-section[aria-current=page]{background:color-mix(in srgb,var(--action) 13%,var(--surface));color:var(--strong);border:0}
|
||
.s1-section[aria-current=page] svg{color:var(--action)}
|
||
.s1-section .count{font:600 11px var(--mono);background:none;padding:0;color:var(--muted)}
|
||
.s1-section .count.hot{color:var(--surface);background:var(--danger);border-radius:999px;padding:0 6px}
|
||
|
||
/* Dense table. */
|
||
.table-wrap{border-radius:var(--r-table)}
|
||
table.sessions,table.s1-table{border-collapse:collapse;width:100%;font-size:13px}
|
||
table.sessions th,table.s1-table thead th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
|
||
table.sessions td,table.s1-table td,table.s1-table tbody th{padding:7px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);vertical-align:top}
|
||
table.sessions tbody tr:last-child td,table.s1-table tbody tr:last-child>*{border-bottom:0}
|
||
table.sessions tbody tr:hover,table.s1-table tbody tr:hover{background:color-mix(in srgb,var(--raised) 55%,var(--surface))}
|
||
table.sessions tbody tr.is-selected{background:color-mix(in srgb,var(--action) 10%,var(--surface));box-shadow:inset 3px 0 0 var(--action)}
|
||
table.s1-table td code{font-size:12.5px;white-space:nowrap}
|
||
|
||
/* Status mark: glyph and word, never colour alone. The glyph is generated content with empty alt text, so the word is what is read. */
|
||
.badge{font-size:12px;padding:1px 7px}
|
||
.st::before{width:auto;height:auto;background:none;border-radius:0;line-height:1;content:"?" / ""}
|
||
.st-working::before{content:"●" / ""}
|
||
.st-waiting::before{content:"◐" / ""}
|
||
.st-error::before{content:"▲" / ""}
|
||
.st-offline::before{content:"○" / ""}
|
||
.st-idle::before{content:"–" / ""}
|
||
|
||
/* Class chip. BLOCKING is its own chip. */
|
||
/* Inline-block, not flex: flex drops the space after the dot in "gated · <code>action</code>". */
|
||
.tag{display:inline-block;vertical-align:middle;font-size:12px;font-weight:600;line-height:18px;padding:1px 7px;border-radius:4px;background:var(--raised);color:var(--strong);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
|
||
.tag code{font-size:11.5px}
|
||
.tag-gated{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
|
||
.tag-block{background:var(--danger);color:var(--surface);text-transform:uppercase;letter-spacing:.04em}
|
||
.tag-cross-role{background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent)}
|
||
.tag-within-role,.tag-routine{background:var(--raised);color:var(--muted)}
|
||
|
||
/* Copy command. */
|
||
.s1-cmd code{font-size:12.5px;border-radius:var(--r)}
|
||
|
||
/* View states: empty, banner (error and refusal), skeleton rows. */
|
||
.empty{padding:28px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--surface)}
|
||
.empty b{display:block;color:var(--strong);font-size:15px;margin-bottom:4px}
|
||
.empty p{margin:4px auto 0;max-width:62ch}
|
||
.banner{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-table);margin-bottom:12px;border:1px solid;font-size:13px;color:var(--text);text-align:left}
|
||
.banner>p,.banner>div:not(.actions){flex:1 1 280px;min-width:0;margin:0;overflow-wrap:anywhere}
|
||
.banner .actions{margin:0}
|
||
.banner.err{border-color:color-mix(in srgb,var(--danger) 50%,var(--line));background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
|
||
.banner.ref{border-color:color-mix(in srgb,var(--warning) 50%,var(--line));background:color-mix(in srgb,var(--warning) 9%,var(--surface))}
|
||
.banner b,.banner strong{color:var(--strong)}
|
||
.banner code{overflow-wrap:anywhere}
|
||
/* F3: the Console restart banner stays in view while the page waits for the Console, and the bus restart control sits inline in the receipt or banner that asks for it. */
|
||
.console-reconnect{position:sticky;top:0;z-index:30;align-items:center}
|
||
.console-reconnect>span{flex:1 1 220px;min-width:0;overflow-wrap:anywhere}
|
||
.bus-restart{display:inline-flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0}
|
||
.bus-restart [role=status]:empty{display:none}
|
||
.routes-apply{margin:12px 0 0;padding-left:18px;display:grid;gap:8px}
|
||
.routes-apply li{overflow-wrap:anywhere}
|
||
.agent-restart{display:inline-flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-width:0}
|
||
.agent-restart [role=status]:empty{display:none}
|
||
#proxy-dev-setup pre{overflow-x:auto;max-width:100%}
|
||
/* #1873 proxy setup */
|
||
.proxy-setup-state{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0 0 12px}.proxy-setup-state dt{color:var(--muted);font-weight:600}.proxy-setup-state dd{margin:0;overflow-wrap:anywhere}
|
||
.proxy-setup-next{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}.proxy-setup-next p{margin:0;flex:1 1 280px}
|
||
.proxy-setup-buttons{display:flex;flex-wrap:wrap;gap:8px}.proxy-setup-buttons button{min-height:44px}
|
||
#proxy-setup pre{overflow-x:auto;max-width:100%;font-size:12px}#proxy-setup h3{margin:16px 0 4px}#proxy-setup details{margin:0 0 12px}#proxy-setup summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
|
||
#proxy-setup-receipts{padding-left:20px;overflow-wrap:anywhere;font-size:13px}
|
||
@media(max-width:479px){.proxy-setup-state{grid-template-columns:1fr}.proxy-setup-state dd{margin-bottom:6px}}
|
||
/* Stream S4: which organization this is, in words. Colour (the theme) is never the only cue; the strip appears whenever the theme is not the built-in one. */
|
||
.org-cue{margin:0 0 12px;padding:6px 10px;border:1px solid var(--line);border-left:4px solid var(--action);border-radius:var(--r-table);background:var(--raised);color:var(--text);font-size:13px;overflow-wrap:anywhere}.skel-rows{display:grid;gap:10px;padding:14px 12px;border:1px solid var(--line);border-radius:var(--r-table);background:var(--surface)}
|
||
.skel{display:block;height:12px;border-radius:4px;background:var(--raised);animation:skel 1.4s ease-in-out infinite}
|
||
.skel:nth-child(odd){width:82%}
|
||
@keyframes skel{50%{opacity:.45}}
|
||
body.board-refused #board-view{display:none}
|
||
body.on-bus #board-refused{display:none}
|
||
|
||
/* Toast: one line, polite, bottom centre. */
|
||
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--strong);color:var(--surface);padding:6px 8px 6px 14px;border-radius:var(--r);font-size:13px;z-index:60;max-width:calc(100% - 24px);box-shadow:var(--shadow)}
|
||
/* Off, the toast stays in the accessibility tree, empty and visually hidden, so the first copy is announced. */
|
||
.toast:not(.on){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
|
||
.toast span{min-width:0;overflow-wrap:anywhere}
|
||
.toast.err{background:var(--danger)}
|
||
.toast button{font:inherit;font-weight:600;border:1px solid currentColor;background:none;color:inherit;border-radius:4px;padding:1px 8px;cursor:pointer}
|
||
.toast:not(.err) button{display:none}
|
||
|
||
/* Command palette. */
|
||
.pk{width:min(560px,calc(100% - 24px));padding:0;margin:10vh auto auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
|
||
.pk::backdrop{background:color-mix(in srgb,var(--strong) 28%,transparent)}
|
||
.pk-in{display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--muted)}
|
||
.pk input{flex:1;min-width:0;border:0;padding:12px 0;background:none;font:inherit;font-size:15px;color:var(--strong)}
|
||
.pk input:focus{outline:none}
|
||
.pk-in:focus-within{box-shadow:inset 0 -2px 0 var(--focus)}
|
||
.pk-list{list-style:none;margin:0;padding:6px;max-height:min(340px,60vh);overflow:auto}
|
||
.pk-list li{display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:var(--r);cursor:pointer;font-size:13.5px;min-width:0}
|
||
.pk-list li>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.pk-list li[aria-selected=true]{background:color-mix(in srgb,var(--action) 14%,var(--surface));color:var(--strong)}
|
||
.pk-list li .g{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
|
||
.pk-list .pk-none{cursor:default;color:var(--muted)}
|
||
.pk-foot{margin:0;padding:6px 14px;border-top:1px solid var(--line);color:var(--muted)}
|
||
|
||
/* Not found. */
|
||
.nf code{overflow-wrap:anywhere}
|
||
|
||
/* Two columns and up: the footer is a one-line status bar held at the bottom, and the side column
|
||
fits between it and the command bar, so a short page does not scroll and a long one keeps the nav in view. */
|
||
@media (min-width:760px){
|
||
footer.foot{position:sticky;bottom:0;z-index:15;background:var(--surface);min-height:var(--foot-h);padding:6px var(--pad);align-items:center;flex-wrap:nowrap;font-size:12px}
|
||
footer.foot>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
|
||
.frame{min-height:calc(100vh - var(--bar-h) - var(--foot-h))}
|
||
.tree,.inspector{top:var(--bar-h);height:calc(100vh - var(--bar-h) - var(--foot-h))}
|
||
}
|
||
/* The live region after the footer sits at its static place, one pixel past the screen; pin it so it adds no scroll. */
|
||
#announce,#display-announcement{position:fixed;top:0;left:0}
|
||
|
||
/* Breakpoints. 760 to 959 px keeps the side column (console.css drops it at 959). */
|
||
@media (min-width:760px) and (max-width:959px){
|
||
.frame,body.has-inspector .frame,body.on-bus .frame,body.on-bus.has-inspector .frame{grid-template-columns:200px minmax(0,1fr)}
|
||
.tree{position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h) - var(--foot-h));border-right:1px solid var(--line);border-bottom:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
|
||
.tree-title{flex:none}
|
||
.tree-list{display:grid;flex-wrap:nowrap;overflow:visible}
|
||
.tree .small{flex-basis:auto;margin-top:auto}
|
||
.s1-sections{display:grid;gap:2px}
|
||
.s1-section{border-radius:var(--r);padding:6px 8px}
|
||
.cmdbar{position:sticky}
|
||
}
|
||
@media (max-width:1099px){
|
||
body.has-inspector .frame{grid-template-columns:240px minmax(0,1fr)}
|
||
.inspector{position:fixed;top:var(--bar-h);right:0;bottom:0;left:auto;width:min(400px,100%);height:auto;max-height:none;border-left:1px solid var(--line);border-top:0;border-radius:0;z-index:30;box-shadow:-12px 0 30px -12px color-mix(in srgb,#000 35%,transparent)}
|
||
}
|
||
@media (max-width:959px){body.has-inspector .frame{grid-template-columns:minmax(0,1fr)}}
|
||
@media (min-width:760px) and (max-width:959px){body.has-inspector .frame{grid-template-columns:200px minmax(0,1fr)}}
|
||
@media (max-width:759px){
|
||
.cmdbar{position:static;flex-wrap:wrap}
|
||
/* One column: the nav and the page take their own height, not a share of the screen. */
|
||
.frame{align-content:start}
|
||
.cmdk{flex:1 1 100%;max-width:none;order:3}
|
||
.fresh{display:none}
|
||
/* Both selects and both buttons share one row; the selects give up width first. */
|
||
.cmd-right{margin-left:0;flex:1 1 100%;flex-wrap:nowrap;min-width:0}
|
||
.cmd-right label{flex:1 1 0;min-width:0}
|
||
.cmd-right .btn{flex:none}
|
||
/* The section list is one strip that scrolls inside itself (IMPLEMENTING.md), so more sections never add rows. */
|
||
.s1-sections{display:flex;flex-wrap:nowrap;overflow-x:auto;flex-basis:100%;min-width:0;max-width:100%;gap:2px;padding-bottom:2px;scrollbar-width:thin}
|
||
.s1-sections>li{flex:none}
|
||
.s1-section{border-radius:var(--r);padding:5px 8px;white-space:nowrap;flex:none}
|
||
.inspector{inset:0;top:0;width:100%;z-index:40;box-shadow:none}
|
||
}
|
||
/* Below 360 px one row would cut the select labels; the buttons wrap under them instead. */
|
||
@media (max-width:359px){.cmd-right{flex-wrap:wrap}.cmd-right label{flex:1 1 110px}}
|
||
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
|
||
@media (forced-colors:active){.tag,.empty,.banner,.toast,.pk{border:1px solid CanvasText}.s1-section[aria-current=page]{outline:2px solid Highlight}table.sessions tbody tr.is-selected{outline:2px solid Highlight}}
|
||
|
||
/* W15 shell. Archive integration may style .project-archive-control and
|
||
.project-archived-filter with these shared button and filter treatments. */
|
||
.project-archive-control,.project-archived-filter{min-height:44px;border-radius:var(--r)}
|
||
#nav-open,.drawer-head{display:none}
|
||
.s1-section{min-height:44px}
|
||
.content .btn.primary{min-height:var(--action-target)}
|
||
[data-sidebar-density=compact] .s1-section{min-height:44px;padding-block:3px}
|
||
.display-settings fieldset{border:1px solid var(--line);border-radius:var(--r);margin:0 0 16px;padding:12px}
|
||
.display-settings label{display:block;min-height:44px;padding:10px 0}
|
||
.display-preview{padding:12px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow-wrap:anywhere}
|
||
.display-dialog{max-width:min(32rem,calc(100% - 24px));border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--text);padding:20px}
|
||
.display-dialog::backdrop{background:rgb(0 0 0 / .5)}
|
||
.display-dialog button{min-height:44px;margin:4px}
|
||
@media (min-width:960px){.frame,body.on-bus .frame{grid-template-columns:226px minmax(0,1fr)}.content{padding:22px}}
|
||
@media (max-width:759px){
|
||
#nav-open{display:inline-flex;min-height:44px;align-items:center}
|
||
.drawer-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-12px;z-index:2;background:var(--surface);padding:8px 0}
|
||
#nav-close{min-height:44px}
|
||
.tree{display:flex;visibility:hidden;pointer-events:none;position:fixed;inset:0 auto 0 0;z-index:100;width:min(330px,calc(100vw - 32px));height:100dvh;max-height:none;overflow-y:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:12px;background:var(--surface);box-shadow:var(--shadow)}
|
||
body.nav-open .tree{visibility:visible;pointer-events:auto}
|
||
#nav-scrim:not([hidden]){display:block;position:fixed;inset:0;background:rgb(0 0 0 / .5);z-index:99}
|
||
.s1-sections{display:grid;overflow:visible;flex-basis:auto}
|
||
.s1-sections>li{width:100%}
|
||
.s1-section{white-space:normal}
|
||
.content h1{font-size:22px}
|
||
}
|
||
|
||
/* W15 navigation: the rail is a sibling of the project/sidebar column. */
|
||
.rail{display:none}
|
||
@media (min-width:960px){
|
||
.frame,body.on-bus .frame,body.has-inspector .frame,body.on-bus.has-inspector .frame{grid-template-columns:var(--rail-width) var(--sidebar-width) minmax(0,1fr)}
|
||
body.has-inspector .frame,body.on-bus.has-inspector .frame{grid-template-columns:var(--rail-width) var(--sidebar-width) minmax(0,1fr) 340px}
|
||
.frame.frame > .tree{position:sticky;width:auto}
|
||
.frame.frame > .content{grid-column:3}
|
||
body{--processing-nav:calc(var(--rail-width) + var(--sidebar-width))}
|
||
.rail{position:sticky;top:var(--bar-h);height:calc(100vh - var(--bar-h) - var(--foot-h));display:flex;flex-direction:column;gap:4px;padding:10px 6px;border-right:1px solid var(--line);background:var(--surface)}
|
||
.rail a{display:flex;min-height:58px;align-items:center;justify-content:center;flex-direction:column;gap:3px;border-radius:var(--r);color:var(--text);font-size:11px;text-decoration:none}
|
||
.rail a:hover,.rail a[aria-current=page]{background:var(--raised);color:var(--strong)}
|
||
.rail a[aria-current=page]{box-shadow:inset 3px 0 var(--action)}
|
||
}
|
||
#project-context:not(:empty){border-bottom:1px solid var(--line);padding:0 4px 10px;overflow-wrap:anywhere}
|
||
.context-project{display:block;min-height:var(--action-target);padding:10px 0;color:var(--action);font-weight:700}
|
||
.context-conversation{display:block;min-height:var(--action-target);padding:10px 0;margin:0;color:var(--strong);overflow-wrap:anywhere}
|
||
#project-tree:not(:empty){border-bottom:1px solid var(--line);padding-bottom:10px}
|
||
.project-archive-control,.project-archived-filter{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 12px}
|
||
.project-archive-control:hover,.project-archived-filter:hover{background:var(--raised)}
|
||
a{ text-underline-offset: .15em }
|
||
button:disabled,[aria-disabled=true]{cursor:not-allowed}
|
||
@media (max-width:759px){.tree{width:100%;overscroll-behavior:contain;scrollbar-gutter:stable}#console-nav>*{flex:0 0 auto}}
|
||
/* Settings uses the same shell and palette tokens as the rest of the Console. */
|
||
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
|
||
#settings-nav{display:flex;flex-direction:column}
|
||
.settings-group{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 8px}
|
||
.settings-group:not(:first-child){margin-top:16px}
|
||
#settings-nav a{min-height:44px;padding:11px 16px;border-left:3px solid transparent;border-radius:var(--r);color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
|
||
#settings-nav a:hover,#settings-nav a[aria-current=page]{background:var(--raised)}
|
||
#settings-nav a[aria-current=page]{border-left-color:var(--action);color:var(--strong);font-weight:600}
|
||
.settings-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warning);margin-left:8px}
|
||
#settings-disclosure{display:none}
|
||
.settings-content{min-width:0}
|
||
.settings-content>h2{font-size:23px;line-height:1.3;margin:0;color:var(--strong)}
|
||
.settings-helper{font-size:14px;color:var(--muted);margin:0 0 16px}
|
||
.settings-content .panel{margin:0 0 16px;padding:16px}
|
||
.settings-content .panel h3{font-size:16px;margin:0;color:var(--strong)}
|
||
.settings-content.settings-business .panel h3{margin:14px 0 6px}
|
||
.settings-content .panel>p{margin:4px 0 12px;color:var(--muted);font-size:14px}
|
||
.settings-content input:not([type=radio]):not([type=checkbox]),.settings-content select,.settings-content textarea{min-height:44px;max-width:100%;border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);color:var(--text);font:inherit;padding:8px 12px}
|
||
.settings-content input:disabled,.settings-content select:disabled,.settings-content textarea:disabled{background:var(--raised);border-color:var(--line);color:var(--muted)}
|
||
.settings-content button,.settings-content summary{min-height:44px;min-width:44px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);padding:8px 18px;font:inherit;cursor:pointer}
|
||
.settings-content button[type=submit]{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
|
||
.settings-content :is(button,input,select,textarea,a,summary):focus-visible,#settings-nav a:focus-visible,#settings-disclosure:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
|
||
.settings-segments{display:inline-flex;max-width:100%;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
|
||
.settings-segments label{position:relative;display:block}
|
||
.settings-segments input,.palette-tile input{position:absolute;opacity:0;width:1px;height:1px}
|
||
.settings-segments span{display:grid;place-items:center;min-height:44px;min-width:104px;padding:0 14px;border-right:1px solid var(--border);cursor:pointer;font-size:14px}
|
||
.settings-segments label:last-child span{border:0}.settings-segments input:checked+span{background:var(--action);color:var(--onAction);font-weight:600}.settings-segments input:focus-visible+span,.palette-tile input:focus-visible+.palette-content{outline:2px solid var(--focus);outline-offset:-3px}
|
||
.settings-segments input:hover:not(:checked)+span{background:var(--raised)}
|
||
.settings-appearance .panel:last-child .settings-segments span{min-width:140px}
|
||
.palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
|
||
.palette-tile{position:relative;min-width:0;cursor:pointer}
|
||
.palette-content{position:relative;display:flex;min-height:72px;flex-direction:column;justify-content:center;gap:5px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r);font-size:14px}
|
||
.palette-content:hover{border-color:var(--border)}.palette-tile input:checked+.palette-content{border:2px solid var(--action);background:var(--raised);padding:7px 15px;color:var(--strong)}
|
||
.palette-check{display:none;position:absolute;right:9px;top:5px;color:var(--action);font-size:19px}.palette-tile input:checked+.palette-content .palette-check{display:block}
|
||
.palette-missing{cursor:not-allowed}.palette-missing .palette-content{border-style:dashed;color:var(--muted)}.palette-gone{font-size:12px;color:var(--muted)}
|
||
.settings-source{margin:12px 0 8px;font-size:13px;color:var(--muted)}.settings-source strong{color:var(--text)}
|
||
.palette-swatches{display:flex;gap:6px}.palette-swatches i{display:block;width:16px;height:16px;border-radius:50%;background:var(--swatch-canvas);border:1px solid var(--line)}.palette-swatches i:nth-child(2){background:var(--swatch-action);border:0}.palette-swatches i:nth-child(3){background:var(--swatch-accent);border:0}
|
||
.settings-browser-status{color:var(--success)!important;margin:0!important}.settings-browser-status:not(:empty){margin-top:10px!important}.settings-browser-status.warning{color:var(--warning)!important}
|
||
.settings-readonly{padding:12px 16px;background:var(--raised);border-radius:var(--r)}
|
||
@media(max-width:959px) and (min-width:760px){.settings-layout{grid-template-columns:180px minmax(0,1fr);gap:24px}}
|
||
@media(max-width:759px){.settings-layout{display:block}.settings-layout>div:first-child{margin-bottom:20px}#settings-disclosure{width:100%;min-height:44px;display:flex;align-items:center;gap:12px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);text-align:left}#settings-disclosure small{color:var(--muted)}#settings-disclosure span{margin-left:auto}#settings-disclosure[aria-expanded=false]+#settings-nav{display:none}#settings-nav{padding:12px 0}.settings-content>h2{font-size:21px}.palette-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.palette-content{min-height:64px;padding:7px}.palette-tile input:checked+.palette-content{padding:6px}.settings-segments{display:flex;width:100%}.settings-segments label{flex:1;min-width:0}.settings-segments span,.settings-appearance .panel:last-child .settings-segments span{min-width:0;padding:0 4px}.settings-content .table-wrap{max-width:100%}}
|
||
.settings-content [aria-invalid=true]{border:2px solid var(--danger)!important}
|
||
.fallback-toggle{display:none}
|
||
@media(max-width:759px){
|
||
.settings-actions.has-draft{position:fixed;z-index:20;bottom:0;left:0;right:0;display:flex;gap:8px;align-items:center;padding:12px;background:var(--surface);border-top:1px solid var(--line)}
|
||
.settings-actions.has-draft button{flex:1}.settings-actions.has-draft p{display:none}.settings-content:has(.settings-actions.has-draft){padding-bottom:90px}
|
||
#routes-table,#routes-table tbody,#routes-table tr,#routes-table th,#routes-table td{display:block;width:100%}#routes-table thead{display:none}#routes-table tr{border:1px solid var(--line);border-radius:var(--r);margin:0 0 12px;padding:12px}#routes-table td{border:0;padding:4px 0}#routes-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:12px}#routes-table select{width:100%}.fallback-toggle{display:block;width:100%}.route-row:not(.fallback-open) .fallback-cell select,.route-row:not(.fallback-open) .fallback-cell:not(:nth-of-type(4)){display:none}.route-row.fallback-open .fallback-toggle{display:none}
|
||
}
|
||
.agent-actions{position:relative;white-space:nowrap}.agent-actions .agent-more{padding:0;margin-left:6px}.agent-menu{position:absolute;right:0;z-index:10;min-width:180px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 18px var(--shadow,transparent)}.agent-menu[hidden]{display:none}.agent-menu button{display:block;width:100%;border:0;text-align:left;background:transparent}.agent-menu button:hover,.agent-menu button:focus{background:var(--raised)}.agent-danger{color:var(--danger)!important}.hiring-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px}.hiring-grid>div{display:flex;align-items:center;justify-content:space-between}.hiring-grid button[role=switch]{border:0;background:transparent;padding:10px 0}.switch-track{display:block;width:44px;height:24px;background:var(--raised);border:1px solid var(--border);border-radius:12px;position:relative}.switch-track:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--muted);border-radius:50%}[aria-checked=true]>.switch-track{background:var(--action)}[aria-checked=true]>.switch-track:after{left:23px;background:var(--onAction)}
|
||
@media(max-width:759px){.hiring-grid{grid-template-columns:1fr}}
|
||
.settings-content.readonly :is(button[type=submit],button[data-limit-reset],#routes-reload,#launch-settings-reload,[data-assistant-name],[data-assistant-stop]){display:none}
|
||
.settings-content input::placeholder,.settings-content textarea::placeholder{color:var(--muted)}
|
||
.settings-success{color:var(--success)}
|
||
.settings-content fieldset{border:0;padding:0;margin:12px 0;min-width:0}.settings-content legend{color:var(--muted);font-size:12px;font-weight:600}.settings-content .filters{gap:12px}.settings-content label{min-width:0}.settings-content label:has(input[type=number]){display:flex;align-items:center;gap:12px;flex-wrap:wrap}.settings-content input[type=number]{width:120px}.settings-content .settings-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
|
||
@media(max-width:759px){#agents-table,#agents-table tbody,#agents-table tr,#agents-table td,#agents-table th{display:block;width:100%}#agents-table thead{display:none}#agents-table tr{border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;padding:12px}#agents-table td{border:0;padding:4px}.agent-actions{white-space:normal}.agent-menu{right:0}}
|
||
#agents-table tbody th,#routes-table tbody th{text-transform:none;font-size:14px;font-weight:600;color:var(--strong)}
|
||
@media(max-width:759px){.settings-content .routing-panel{border:0;background:transparent;padding:0}.routing-panel .table-wrap{border:0;overflow:visible}.routing-panel #routes-table tr{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;background:var(--surface)}.routing-panel #routes-table th,.routing-panel #routes-table td:first-of-type,.routing-panel #routes-table .fallback-cell:first-of-type{grid-column:1/-1}.routing-panel #routes-table td:nth-of-type(4){grid-column:1/-1}.routing-panel #routes-table td:nth-of-type(4)::before{content:'Fallback: None'}.routing-panel #routes-table .fallback-open td:nth-of-type(4)::before{content:'Fallback harness'}}
|
||
.settings-content label:has(>input[type=checkbox]){display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px}
|
||
/* E2E6 minor: the harness checkboxes sit side by side, each keeping its 44px target, instead of one per
|
||
50px row. Save and the receipt keep their own full-width rows. */
|
||
.settings-content fieldset.harness-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
|
||
.settings-content fieldset.harness-control>legend{flex-basis:100%}
|
||
.settings-content fieldset.harness-control>:is(button,p){flex-basis:100%}
|
||
.settings-content :is(.instance-form,.level-form) textarea,.settings-content .assistant-form textarea{display:block;width:100%}
|
||
.route-definition{display:none}.settings-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:middle;animation:settings-spin .8s linear infinite}@keyframes settings-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.settings-spinner{animation:none}}
|
||
@media(max-width:759px){#routes-table .route-definition{display:inline;float:right;color:var(--muted);font-size:12px;font-weight:400}}
|
||
/* Settings forms: align controls across rows without changing their write paths. */
|
||
#settings-page-title:focus{outline:none}
|
||
.settings-limits-table,.settings-model-table{width:100%;table-layout:fixed;border-collapse:collapse}
|
||
.settings-limits-table col:first-child{width:45%}.settings-limits-table col:nth-child(2){width:144px}.settings-model-table col:first-child{width:25%}.settings-model-table col:nth-child(2),.settings-model-table col:nth-child(3){width:37.5%}
|
||
.settings-limits-table :is(th,td),.settings-model-table :is(th,td){padding:8px;text-align:left;vertical-align:middle}.settings-limits-table tbody th,.settings-model-table tbody th{text-transform:none;font-size:14px;font-weight:500;color:var(--text)}.settings-limits-table .limit-group th{padding-top:14px;color:var(--muted);font-size:12px;font-weight:600}.settings-model-table input{width:100%}
|
||
.settings-content :is(.instance-form,.level-form) .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--gap);align-items:end}.settings-content :is(.instance-form,.level-form) .filters>label:not(:has(input[type=checkbox])){display:flex;flex-direction:column;gap:6px}.settings-content :is(.instance-form,.level-form) .filters>label:not(:has(input[type=checkbox])) :is(input,select){width:100%}.settings-content :is(.instance-form,.level-form) .filters>label:has(input[type=checkbox]){display:flex;gap:8px;align-items:center;min-height:44px;white-space:nowrap}.settings-content :is(.instance-form,.level-form) details{margin:var(--gap) 0}.hiring-grid>div{justify-content:flex-start;gap:var(--gap)}
|
||
@media(max-width:759px){.settings-content :is(.instance-form,.level-form) .filters{grid-template-columns:1fr}.settings-limits-table,.settings-limits-table tbody,.settings-limits-table tr,.settings-limits-table th,.settings-limits-table td,.settings-model-table,.settings-model-table tbody,.settings-model-table tr,.settings-model-table th,.settings-model-table td{display:block;width:100%}.settings-limits-table colgroup,.settings-model-table colgroup,.settings-limits-table thead,.settings-model-table thead{display:none}.settings-limits-table tbody tr:not(.limit-group){display:grid;grid-template-columns:120px 1fr;gap:0 12px;border-bottom:1px solid var(--line)}.settings-limits-table tbody tr:not(.limit-group)>th{grid-column:1/-1}.settings-limits-table :is(th,td),.settings-model-table :is(th,td){padding:6px 0}.settings-model-table tbody tr{padding:8px 0;border-bottom:1px solid var(--line)}.settings-model-table td:before{display:block;color:var(--muted);font-size:12px}.settings-model-table td:nth-of-type(1):before{content:'Provider'}.settings-model-table td:nth-of-type(2):before{content:'Model'}#routes-table .route-row:not(.fallback-open) td.fallback-cell:nth-of-type(n+5){display:none}}
|
||
|
||
/* Agent menus must extend beyond the table without being clipped by its scroll region. */
|
||
.settings-agents .table-wrap{overflow:visible}
|
||
|
||
/* Review fixes: preserve readable actions, labels and targets at every width. */
|
||
.settings-content :is(.instance-form,.level-form) .filters>label:not(:has(input[type=checkbox])){align-items:flex-start}
|
||
.settings-content :is(.instance-form,.level-form) .filters>label:has(input[type=checkbox]){grid-column:1/-1;justify-self:start}
|
||
.settings-content .settings-actions .banner:not(:empty){order:-1;flex:1 0 100%;margin:0}
|
||
.agent-mobile-label{display:none}
|
||
#bus-view .page-head:has(+ .settings-layout) p{font-size:16px}
|
||
.settings-segments:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
|
||
.settings-segments input:focus-visible+span{outline:none}
|
||
#proxy-authorize:not([hidden]){display:inline-flex;align-items:center;min-height:44px}
|
||
.settings-content #proxy-accounts .proxy-priority-save{background:var(--surface);color:var(--text);border-color:var(--border)}
|
||
@media(min-width:760px){#routes-table select{min-width:132px}}
|
||
@media(max-width:759px){
|
||
#agents-table :is(th,td,code){min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
|
||
.agent-mobile-label{display:inline;color:var(--muted)}
|
||
.settings-content .settings-actions.has-draft{max-height:45vh;overflow-y:auto;align-items:center}
|
||
.settings-content .settings-actions.has-draft p:not(:empty){display:block;order:-1;flex:1 0 100%;margin:0}
|
||
.settings-content:has(.settings-actions.has-draft){padding-bottom:50vh}
|
||
}
|
||
|
||
.settings-success:not(:empty)::before{content:"✓ ";}
|
||
/* Keep wide tables reachable and show their scrollbar. */
|
||
@media (min-width:760px) { .routing-panel .table-wrap { overflow-x:scroll; } }
|
||
@media (max-width:759px) {
|
||
.table-wrap:has(.s1-agents), .table-wrap:has(.s1-authority), .table-wrap:has(.s1-creds),
|
||
.table-wrap:has(#token-usage-table), .table-wrap:has(#token-limits-table),
|
||
.table-wrap:has(#proxy-accounts), .table-wrap:has(#proxy-keys) { overflow-x:scroll; max-width:100%; }
|
||
.s1-agents, .s1-authority, .s1-creds, #token-usage-table, #token-limits-table,
|
||
.table-wrap:has(#proxy-accounts) table, .table-wrap:has(#proxy-keys) table { min-width:650px; }
|
||
.s1-authority :is(th,td), .s1-creds :is(th,td) { white-space:nowrap; }
|
||
/* #1873 A2: the root and project agent level grids scroll inside their card. */
|
||
.table-wrap:has(#agent-levels-root-grid), .table-wrap:has(#agent-levels-project-grid) { overflow-x:scroll; max-width:100%; }
|
||
#agent-levels-root-grid { min-width:650px; }
|
||
#agent-levels-project-grid { min-width:480px; }
|
||
}
|
||
body:not(:has(.project-chat)) .content { padding-bottom:calc(22px + var(--foot-h)); }
|
||
@media (max-width:759px) {
|
||
section[aria-label="Proxy-reported usage"] .table-wrap { overflow-x:scroll; }
|
||
section[aria-label="Proxy-reported usage"] table { min-width:650px; }
|
||
}
|
||
|
||
@media(max-width:759px){
|
||
.settings-content .route-actions{position:fixed;z-index:20;bottom:0;left:0;right:0;padding:12px;background:var(--surface);border-top:1px solid var(--line)}
|
||
.settings-content .route-actions button{flex:1}
|
||
.settings-content:not(.readonly) .route-actions #routes-reload[hidden]{display:block!important}
|
||
.settings-content:has(.route-actions){padding-bottom:100px}
|
||
}
|
||
.assistant-form textarea[data-assistant-field="vars"] { field-sizing:content; min-height:6em; max-height:16em; overflow-y:auto; }
|
||
/* Unified workspace, organization mode (PRD 1.20, U2). The sample 01, 03 and 08 layouts, ported
|
||
from docs/design/samples/2026-11-09-unified-workspace/workspace.css with ws- names, so nothing
|
||
collides with the Console's own .btn, .chip, .panel, .split, .label or .cfg. */
|
||
html[data-organizations]{--glyph:"DejaVu Sans","Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",var(--font)}
|
||
@media (min-width:960px){html[data-organizations]{--sidebar-width:240px}}
|
||
/* An organization's colour for the page's mode: workspace.js sets the three pairs inline. */
|
||
html[data-organizations] .ws-o{--org:var(--org-l);--org-on:var(--org-on-l)}
|
||
@media (prefers-color-scheme:dark){html[data-organizations]:not([data-mode="light"]):not([data-mode="dim"]) .ws-o{--org:var(--org-d);--org-on:var(--org-on-d)}}
|
||
html[data-organizations][data-mode="dark"] .ws-o{--org:var(--org-d);--org-on:var(--org-on-d)}
|
||
html[data-organizations][data-mode="dim"] .ws-o{--org:var(--org-m);--org-on:var(--org-on-m)}
|
||
html[data-organizations] .ws-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
|
||
html[data-organizations] .ws-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
|
||
html[data-organizations] .ws-line{margin:0;padding:3px 8px 3px 10px;font-size:12px;color:var(--muted);list-style:none}
|
||
|
||
/* Sidebar (sample 01). */
|
||
html[data-organizations] .tree{padding:10px 8px 14px;gap:2px}
|
||
html[data-organizations] #project-tree{border-bottom:0;padding-bottom:0}
|
||
html[data-organizations] .drawer-head{background:var(--nav-surface,var(--surface))}
|
||
html[data-organizations] #workspace-nav{display:flex;flex-direction:column;gap:2px;min-width:0;border:0;padding:0}
|
||
html[data-organizations] .s1-sections{display:grid;gap:2px;flex-basis:auto;overflow:visible;padding:0}
|
||
html[data-organizations] .s1-sections>li{width:100%;flex:none}
|
||
html[data-organizations] .ws-nav,html[data-organizations] .s1-section.ws-nav{display:flex;align-items:center;gap:9px;padding:5px 8px;min-height:0;min-width:0;border:0;border-radius:var(--r);box-shadow:none;background:transparent;color:var(--text);text-decoration:none;font:600 13.5px/1.5 var(--font);flex-wrap:nowrap;white-space:nowrap}
|
||
html[data-organizations] .ws-nav:hover{background:var(--raised)}
|
||
html[data-organizations] .ws-nav[aria-current=page],html[data-organizations] .s1-section.ws-nav[aria-current=page]{background:color-mix(in srgb,var(--action) 13%,var(--surface));box-shadow:none;color:var(--strong)}
|
||
html[data-organizations] .ws-nav svg.i{width:18px;height:18px;stroke-width:1.75;color:inherit}
|
||
html[data-organizations] .ws-nav[aria-current=page] svg.i{color:var(--action)}
|
||
html[data-organizations] .ws-nav .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
html[data-organizations] .ws-nav.sel{color:var(--strong)}
|
||
html[data-organizations] .ws-n{margin-left:auto;font:600 11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
|
||
html[data-organizations] .ws-n.hot{color:var(--surface);background:var(--danger);border-radius:999px;padding:0 6px}
|
||
html[data-organizations] .ws-hr{border:0;border-top:1px solid var(--line);margin:6px 4px;width:auto}
|
||
html[data-organizations] .ws-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
|
||
html[data-organizations] .ws-grp{display:flex;flex-direction:column;gap:1px}
|
||
html[data-organizations] .ws-grp-h{display:flex;align-items:center;gap:6px;padding:10px 8px 4px;color:var(--muted)}
|
||
html[data-organizations] .ws-grp-t{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left}
|
||
html[data-organizations] .ws-grp-t .ws-label{flex:1}
|
||
html[data-organizations] .ws-grp-h>.ws-label{flex:1}
|
||
html[data-organizations] .ws-grp-h svg.i{width:14px;height:14px;transition:transform .15s}
|
||
html[data-organizations] .ws-grp-t[aria-expanded=false] svg.chev{transform:rotate(-90deg)}
|
||
html[data-organizations] .ws-grp-h .ws-n{margin-left:0}
|
||
html[data-organizations] .ws-add{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:var(--r);color:var(--muted);border:1px solid var(--line)}
|
||
html[data-organizations] .ws-add:hover{background:var(--raised);color:var(--strong)}
|
||
html[data-organizations] .ws-marks{display:flex;gap:4px;padding:0 8px 6px 28px}
|
||
html[data-organizations] .ws-orgs{display:flex;flex-direction:column;gap:1px;list-style:none;margin:0;padding:0}
|
||
html[data-organizations] .ws-orgs[hidden]{display:none}
|
||
html[data-organizations] .ws-project-list[hidden]{display:none}
|
||
html[data-organizations] .ws-seg{display:inline-flex;margin-left:auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
|
||
html[data-organizations] .ws-seg>button{border:0;background:none;padding:2px 8px;color:var(--muted);font:600 12px/1.5 var(--font);display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;min-height:0}
|
||
html[data-organizations] .ws-seg.xs>button{padding:0 6px;font-size:11px}
|
||
html[data-organizations] .ws-seg [aria-pressed=true]{background:var(--action);color:var(--onAction)}
|
||
html[data-organizations] .ws-pgroup{display:flex;flex-direction:column;gap:1px;margin-bottom:4px}
|
||
html[data-organizations] .ws-pgroup-h{display:flex;align-items:center;gap:7px;padding:4px 8px 2px;font-size:12px;font-weight:700;color:var(--strong)}
|
||
html[data-organizations] .ws-pgroup-h .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
html[data-organizations] .ws-projs{margin-left:17px;border-left:2px solid var(--org);display:flex;flex-direction:column;gap:1px}
|
||
html[data-organizations] .ws-proj{padding:3px 8px 3px 10px;font-weight:500;font-size:13px}
|
||
html[data-organizations] .ws-proj.flat{padding-left:8px}
|
||
html[data-organizations] .ws-flat{display:flex;flex-direction:column;gap:1px}
|
||
|
||
/* Avatars, status marks, chips, buttons. */
|
||
html[data-organizations] .ws-av{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:5px;background:var(--org,var(--muted));color:var(--org-on,var(--surface));font:700 9.5px/1 var(--font);letter-spacing:.02em}
|
||
html[data-organizations] .ws-av.xs{width:16px;height:16px;border-radius:4px;font-size:8.5px;letter-spacing:0}
|
||
html[data-organizations] .ws-av.md{width:28px;height:28px;border-radius:7px;font-size:12px}
|
||
html[data-organizations] .ws-av.lg{width:44px;height:44px;border-radius:10px;font-size:17px}
|
||
html[data-organizations] .ws-av.all{background:var(--raised);color:var(--strong)}
|
||
html[data-organizations] .ws-av.all .mosaic-logo{width:18px;height:18px;fill:currentColor}
|
||
html[data-organizations] .ws-dot{display:inline-flex;align-items:center;gap:6px;flex:none}
|
||
html[data-organizations] .ws-dot b{font:400 13px/1 var(--glyph);width:14px;text-align:center}
|
||
html[data-organizations] .ws-dot.s-working{color:var(--success)}
|
||
html[data-organizations] .ws-dot.s-waiting{color:var(--warning)}
|
||
html[data-organizations] .ws-dot.s-error{color:var(--danger)}
|
||
html[data-organizations] .ws-dot.s-offline,html[data-organizations] .ws-dot.s-idle,html[data-organizations] .ws-dot.s-unknown{color:var(--muted)}
|
||
html[data-organizations] .ws-nav .ws-dot{margin-left:auto}
|
||
html[data-organizations] .ws-org-row .ws-dot{font-size:12.5px;font-weight:500}
|
||
html[data-organizations] .ws-org-row .ws-dot.s-offline,html[data-organizations] .ws-org-row .ws-dot.s-error{color:var(--text)}
|
||
html[data-organizations] .ws-org-row .ws-dot.s-offline b{color:var(--muted)}
|
||
html[data-organizations] .ws-org-row .ws-dot.s-error b{color:var(--danger)}
|
||
html[data-organizations] .ws-btn,html[data-organizations] .ws-busctl [data-bus-restart],html[data-organizations] .ws-busctl [data-bus-stop]{display:inline-flex;align-items:center;gap:6px;min-height:0;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:4px 10px;font:600 13px/1.4 var(--font);color:var(--strong);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none}
|
||
html[data-organizations] .ws-btn:hover:not(:disabled),html[data-organizations] .ws-busctl [data-bus-restart]:hover:not(:disabled),html[data-organizations] .ws-busctl [data-bus-stop]:hover:not(:disabled){background:var(--raised)}
|
||
html[data-organizations] .ws-btn:disabled,html[data-organizations] .ws-busctl [data-bus-restart]:disabled,html[data-organizations] .ws-busctl [data-bus-stop]:disabled{color:var(--muted);cursor:not-allowed;opacity:1}
|
||
html[data-organizations] .ws-btn svg.i{width:15px;height:15px}
|
||
/* The live bus restart is console-restart.js's own button; it carries its icon through repaints,
|
||
so the icon stays on the button however wide the receipt below it is. */
|
||
/* E2E6 P2-13: the disabled pair (a pane, or a Console without the trail) sits in a flex row too. As two
|
||
inline-flex boxes on one line, Restart bus took its baseline from its glyph and sat 2.6px above Stop bus. */
|
||
html[data-organizations] [data-dashboard-bus]:not(.ws-busctl){display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
|
||
html[data-organizations] .ws-busctl{display:inline-flex;flex-direction:column;align-items:flex-end}
|
||
html[data-organizations] .ws-busctl .bus-restart{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px}
|
||
html[data-organizations] .ws-busctl .bus-buttons{display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
|
||
html[data-organizations] .ws-busctl [data-bus-restart] svg.i{width:15px;height:15px}
|
||
html[data-organizations] .ws-busctl [data-bus-restart-receipt]{font-size:12px;color:var(--muted);max-width:28em;text-align:right}
|
||
html[data-organizations] .ws-busctl [data-bus-restart-receipt]:empty{display:none}
|
||
html[data-organizations] .ws-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
|
||
|
||
/* Page frame (sample main column). */
|
||
html[data-organizations] .content:has(.ws){padding-top:18px;padding-inline:24px}
|
||
body:has([data-org-dashboard]) #breadcrumbs,body:has([data-org-agents]) #breadcrumbs{display:none}
|
||
html[data-organizations] .ws{font-size:14px;line-height:1.5;color:var(--text);min-width:0}
|
||
html[data-organizations] .ws h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--strong)}
|
||
html[data-organizations] .ws h1:focus,html[data-organizations] .ws h1:focus-visible{outline:none}
|
||
html[data-organizations] .ws h2{margin:0;font-size:15px;font-weight:700;color:var(--strong)}
|
||
html[data-organizations] .ws code,html[data-organizations] .ws .mono{font-family:var(--mono);font-size:12.5px}
|
||
html[data-organizations] .ws .muted,html[data-organizations] .ws .note{color:var(--muted)}
|
||
html[data-organizations] .ws .note{font-size:13px}
|
||
html[data-organizations] .ws-crumb{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:4px}
|
||
html[data-organizations] .ws-crumb a{color:var(--muted);text-decoration:none}
|
||
html[data-organizations] .ws-crumb a:hover{color:var(--action);text-decoration:underline}
|
||
html[data-organizations] .ws-vh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:14px}
|
||
html[data-organizations] .ws-vh .sub{flex-basis:100%;margin:0;font-size:13.5px;color:var(--muted)}
|
||
html[data-organizations] .ws-right{margin-left:auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
|
||
html[data-organizations] .ws-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:22px 0 8px}
|
||
html[data-organizations] .ws-sec-h .note{flex:1}
|
||
html[data-organizations] .ws-sec-h a{margin-left:auto;font-size:13px;font-weight:600;color:var(--action);text-decoration:none}
|
||
html[data-organizations] .ws-sec-h a:hover{text-decoration:underline}
|
||
html[data-organizations] .ws-panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0}
|
||
html[data-organizations] .ws-panel.tight{padding:12px 14px}
|
||
html[data-organizations] .ws-split{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start}
|
||
html[data-organizations] .ws-split{margin-top:22px}
|
||
html[data-organizations] .ws-split>section>.ws-sec-h:first-child{margin-top:0}
|
||
/* E2E6 P1-3: the long editors (Autonomy, Packs, Workflows) span the page below the split, so neither
|
||
column runs screens past the other at 1440. */
|
||
html[data-organizations] .ws-wide{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:22px}
|
||
html[data-organizations] .ws-wide>.panel{margin:0}
|
||
|
||
/* Organization dashboard (sample 03). */
|
||
html[data-organizations] .ws-orghead{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:14px}
|
||
html[data-organizations] .ws-orghead h1{display:flex;align-items:center;gap:10px}
|
||
html[data-organizations] .ws-orghead h1 svg.i{width:20px;height:20px;color:var(--muted)}
|
||
html[data-organizations] .ws-meta{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin:-6px 0 0;padding-left:58px;font-size:13px;color:var(--muted)}
|
||
html[data-organizations] .ws-meta code{color:var(--text)}
|
||
html[data-organizations] .ws-meta .ws-dot{color:var(--muted)}
|
||
html[data-organizations] .ws-meta .ws-dot.s-working b{color:var(--success)}
|
||
html[data-organizations] .ws-meta .ws-dot.s-offline b,html[data-organizations] .ws-meta .ws-dot.s-error b{color:var(--danger)}
|
||
html[data-organizations] .ws-docrow{margin-top:8px}
|
||
html[data-organizations] .ws-docrow .ws-label{min-width:104px}
|
||
html[data-organizations] .ws-doc{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:2px 8px;font-size:12.5px;font-weight:600;color:var(--strong);text-decoration:none}
|
||
html[data-organizations] .ws-doc:hover{background:var(--raised)}
|
||
html[data-organizations] .ws-doc svg.i{width:14px;height:14px;color:var(--muted)}
|
||
html[data-organizations] .ws-doc small{font-weight:500;color:var(--muted);font-size:11px}
|
||
html[data-organizations] .ws-more{font-size:13px;font-weight:600;margin-left:4px;color:var(--action);text-decoration:none}
|
||
html[data-organizations] .ws-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
|
||
html[data-organizations] .ws-tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:grid;gap:6px;align-content:start}
|
||
html[data-organizations] .ws-tile.is-empty{grid-column:1/-1;border-style:dashed;background:transparent}
|
||
html[data-organizations] .ws-empty-t{font-size:13.5px;font-weight:600;color:var(--strong)}
|
||
html[data-organizations] .ws-tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
|
||
html[data-organizations] .ws-tbl table{width:100%;border-collapse:collapse;font-size:13px;margin:0}
|
||
html[data-organizations] .ws-tbl th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);background:none;white-space:nowrap}
|
||
html[data-organizations] .ws-tbl td{padding:7px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);vertical-align:middle}
|
||
html[data-organizations] .ws-tbl tr:last-child td{border-bottom:0}
|
||
html[data-organizations] .ws-tbl .t1{color:var(--strong)}
|
||
html[data-organizations] .ws-tbl .t2{display:block;font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-tbl td.mono{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
|
||
html[data-organizations] .ws-cfg{display:grid;list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
|
||
html[data-organizations] .ws-cfg li{display:grid;align-items:center;grid-template-columns:18px 132px minmax(0,1fr) auto auto;gap:0 10px;padding:7px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
|
||
html[data-organizations] .ws-cfg li:last-child{border-bottom:0}
|
||
html[data-organizations] .ws-cfg svg.i{width:16px;height:16px;color:var(--muted)}
|
||
html[data-organizations] .ws-cfg .k{font-size:13px;font-weight:600;color:var(--strong)}
|
||
html[data-organizations] .ws-cfg .v{font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
html[data-organizations] .ws-cfg .src-tag{font:500 11px var(--mono);color:var(--accent);white-space:nowrap}
|
||
html[data-organizations] .ws-cfg .go{font-size:12.5px;font-weight:600;color:var(--action);text-decoration:none;min-width:32px;text-align:right}
|
||
html[data-organizations] .ws-cfg a.go:hover{text-decoration:underline}
|
||
html[data-organizations] .ws-cfg li.danger .k,html[data-organizations] .ws-cfg li.danger svg.i,html[data-organizations] .ws-cfg li.danger .go,html[data-organizations] .ws-cfg li.danger .src-tag{color:var(--danger)}
|
||
|
||
/* Agents (sample 08). */
|
||
html[data-organizations] .ws-lvl{display:inline-block;font:700 10.5px/1.5 var(--font);letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:3px;margin-right:6px;vertical-align:1px}
|
||
html[data-organizations] .ws-lvl.root{background:var(--strong);color:var(--surface)}
|
||
html[data-organizations] .ws-lvl.org{background:color-mix(in srgb,var(--org,var(--action)) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--org,var(--action)) 50%,transparent);color:var(--strong)}
|
||
html[data-organizations] .ws-lvl.proj{box-shadow:inset 0 0 0 1px var(--line);color:var(--text)}
|
||
html[data-organizations] .ws-span-band{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 12px;margin-bottom:14px;border-radius:8px;border:1px solid var(--action);background:color-mix(in srgb,var(--action) 8%,var(--surface));font-size:13px;color:var(--strong)}
|
||
html[data-organizations] .ws-span-band .orgs{display:inline-flex;gap:4px}
|
||
html[data-organizations] .ws-band-note{flex-basis:100%;font-size:12.5px}
|
||
html[data-organizations] .ws-levels{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
|
||
html[data-organizations] .ws-levels>div{padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-right:1px solid color-mix(in srgb,var(--line) 60%,transparent);min-width:0}
|
||
html[data-organizations] .ws-levels>.endc{border-right:0}
|
||
html[data-organizations] .ws-levels>.last{border-bottom:0}
|
||
html[data-organizations] .ws-levels>.lh{background:color-mix(in srgb,var(--raised) 45%,transparent);display:grid;gap:4px;align-content:start}
|
||
html[data-organizations] .ws-levels>.lh .ws-lvl{justify-self:start}
|
||
html[data-organizations] .ws-levels>.lh small{font-size:11.5px;color:var(--muted);line-height:1.4}
|
||
html[data-organizations] .ws-levels>.oh{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--strong);background:color-mix(in srgb,var(--raised) 45%,transparent)}
|
||
html[data-organizations] .ws-levels>.span{grid-column:2/-1;display:flex;align-items:center}
|
||
html[data-organizations] .ws-levels .mlabel{display:none;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--strong);margin-bottom:4px}
|
||
html[data-organizations] .ws-agent{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 8px;font-size:12.5px;font-weight:600;background:var(--canvas);margin:2px 4px 2px 0;color:var(--strong)}
|
||
html[data-organizations] .ws-agent small{color:var(--muted);font-weight:500;font-size:11px}
|
||
html[data-organizations] .ws-agent .ws-dot b{font-size:11px;width:10px}
|
||
html[data-organizations] .ws-agent{flex-wrap:wrap}
|
||
html[data-organizations] .ws-agent .btn{min-height:24px;padding:0 10px;font-size:11.5px;border-radius:999px}
|
||
html[data-organizations] .ws-fire-confirm{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:500}
|
||
html[data-organizations] [data-agents-receipt]:empty{display:none}
|
||
html[data-organizations] [data-agents-receipt] .receipt{margin:0 0 12px}
|
||
html[data-organizations] .ws-rules{display:grid;gap:10px;font-size:13px}
|
||
html[data-organizations] .ws-rules p{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:0}
|
||
html[data-organizations] .ws-psel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:0 0 0 8px;font-size:13px;color:var(--strong);white-space:nowrap;max-width:100%}
|
||
html[data-organizations] .ws-psel select{border:0;background:transparent;color:inherit;font:inherit;padding:3px 8px 3px 0;min-width:0;max-width:240px;text-overflow:ellipsis;cursor:pointer}
|
||
html[data-organizations] .ws-psel:focus-within{outline:2px solid var(--action);outline-offset:1px}
|
||
html[data-organizations] .ws-psel select:focus{outline:0}
|
||
html[data-organizations] .ws-away{margin:8px 0 0}
|
||
html[data-organizations] .ws-off{display:block;margin-top:4px}
|
||
html[data-organizations] .ws-rules .ws-lvl{margin-right:0}
|
||
html[data-organizations] .ws-scope{margin:-8px 0 14px}
|
||
|
||
/* Across organizations (U3): the main dashboard, projects and inbox, samples 02, 04 and 05. */
|
||
body:has([data-ws-home]) #breadcrumbs,body:has([data-ws-projects]) #breadcrumbs,body:has([data-ws-inbox]) #breadcrumbs{display:none}
|
||
html[data-organizations] .ws-edge{box-shadow:inset 3px 0 0 var(--org)}
|
||
html[data-organizations] .ws-orgref{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--strong);font-weight:600}
|
||
html[data-organizations] .ws-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:1px 7px;border-radius:4px;background:var(--raised);color:var(--strong);white-space:nowrap;line-height:1.5}
|
||
html[data-organizations] .ws-chip.gated{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
|
||
html[data-organizations] .ws-chip.block{background:var(--danger);color:var(--surface)}
|
||
html[data-organizations] .ws-chip.outline{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font-family:var(--mono);font-weight:500;font-size:11.5px}
|
||
html[data-organizations] .ws-dot.s-ok{color:var(--success)}
|
||
html[data-organizations] .ws-tbl .ws-dot,html[data-organizations] .ws-sess .ws-dot{color:var(--text)}
|
||
html[data-organizations] .ws-tbl .ws-dot.s-working b,html[data-organizations] .ws-tbl .ws-dot.s-ok b{color:var(--success)}
|
||
html[data-organizations] .ws-tbl .ws-dot.s-waiting b{color:var(--warning)}
|
||
html[data-organizations] .ws-tbl .ws-dot.s-error b{color:var(--danger)}
|
||
html[data-organizations] .ws-tbl .ws-dot.s-idle b,html[data-organizations] .ws-tbl .ws-dot.s-offline b{color:var(--muted)}
|
||
html[data-organizations] .ws-g5{display:grid;gap:10px;grid-template-columns:repeat(5,minmax(0,1fr))}
|
||
html[data-organizations] .ws-tile .ws-big{font-size:24px;font-weight:800;color:var(--strong);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
|
||
html[data-organizations] .ws-tile .ws-big small{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:4px}
|
||
html[data-organizations] .ws-tile .ws-delta{font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-tile .ws-delta b{color:var(--success);font-weight:600}
|
||
html[data-organizations] .ws-tile.quiet{border-style:dashed;background:transparent}
|
||
html[data-organizations] .ws-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--raised);gap:2px}
|
||
html[data-organizations] .ws-bar i{display:block;background:var(--org,var(--action))}
|
||
html[data-organizations] .ws-by{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--text)}
|
||
html[data-organizations] .ws-by>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
|
||
html[data-organizations] .ws-by .ws-av{width:14px;height:14px;border-radius:3px;font-size:7px}
|
||
html[data-organizations] .ws-orgtbl td{vertical-align:top}
|
||
html[data-organizations] .ws-orgtbl .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
|
||
html[data-organizations] .ws-orgtbl .who a{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--strong);font-weight:700;text-decoration:none}
|
||
html[data-organizations] .ws-orgtbl .who a:hover .nm{text-decoration:underline}
|
||
html[data-organizations] .ws-orgtbl .who .ws-dot{font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-orgtbl .who .ws-dot.s-working b{color:var(--success)}
|
||
html[data-organizations] .ws-orgtbl .who .why{flex:1 0 100%;font-size:12px;color:var(--danger);overflow-wrap:anywhere}
|
||
html[data-organizations] .ws-orgtbl tr.off .ws-dot{color:var(--danger)}
|
||
/* #1873 SP2: a figure keeps its words on one line ("4 agents (0 working)", "none waiting"); the organization cell takes the wrap. */
|
||
html[data-organizations] .ws-orgtbl td:not(.who){white-space:nowrap}
|
||
html[data-organizations] .ws-dash [data-org-down]{margin:0 0 14px}
|
||
html[data-organizations] .ws-dash [data-org-down] .why{display:block;margin-top:4px;color:var(--muted)}
|
||
html[data-organizations] .ws-orgcards{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
|
||
html[data-organizations] .ws-orgcard a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:inset 3px 0 0 var(--org);color:var(--text);text-decoration:none;font-size:13px;height:100%}
|
||
html[data-organizations] .ws-orgcard a:hover{background:var(--raised)}
|
||
html[data-organizations] .ws-orgcard .ws-av{grid-row:1/3}
|
||
html[data-organizations] .ws-orgcard .nm{font-weight:700;color:var(--strong);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
html[data-organizations] .ws-orgcard .ws-dot{grid-column:2;grid-row:2;font-size:12.5px;color:var(--text)}
|
||
html[data-organizations] .ws-orgcard .ws-dot.s-working b{color:var(--success)}
|
||
html[data-organizations] .ws-orgcard .ws-dot.s-waiting b{color:var(--warning)}
|
||
html[data-organizations] .ws-orgcard .ws-dot.s-error b{color:var(--danger)}
|
||
html[data-organizations] .ws-orgcard .at{grid-column:3;grid-row:1;font:500 11.5px var(--mono);color:var(--muted)}
|
||
html[data-organizations] .ws-orgcard .why{grid-column:1/-1;font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-orgcard.off a{border-style:dashed}
|
||
html[data-organizations] .ws-home-split{margin-top:4px}
|
||
html[data-organizations] .ws-trail{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
|
||
html[data-organizations] .ws-trail li{display:grid;grid-template-columns:48px 20px minmax(0,1fr);gap:10px;padding:7px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);font-size:13px;align-items:center}
|
||
html[data-organizations] .ws-trail li:last-child{border-bottom:0}
|
||
html[data-organizations] .ws-trail time{font-family:var(--mono);font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-trail .what{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
html[data-organizations] .ws-trail .what a{color:var(--strong);text-decoration:none}
|
||
html[data-organizations] .ws-trail .what a:hover{text-decoration:underline}
|
||
html[data-organizations] .ws-trail .what b{font-weight:600}
|
||
html[data-organizations] .ws-trail .src{color:var(--muted)}
|
||
html[data-organizations] .ws-states{display:grid;gap:8px}
|
||
html[data-organizations] .ws-srow{display:grid;grid-template-columns:112px 24px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
|
||
html[data-organizations] .ws-srow .sl{color:var(--strong);font-weight:600}
|
||
html[data-organizations] .ws-srow .sn{font:700 13px var(--mono);color:var(--strong);text-align:right}
|
||
html[data-organizations] .ws-srow .ws-bar{height:8px;max-width:100%}
|
||
html[data-organizations] .ws-needs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
|
||
html[data-organizations] .ws-needs li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
|
||
html[data-organizations] .ws-needs li>.ws-av{grid-row:1/3}
|
||
html[data-organizations] .ws-needs .q{color:var(--strong);font-weight:600;font-size:13.5px;text-decoration:none}
|
||
html[data-organizations] .ws-needs .q:hover{text-decoration:underline}
|
||
html[data-organizations] .ws-needs .src{grid-column:2;font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-needs .ws-chip{grid-row:1/3;grid-column:3}
|
||
html[data-organizations] .ws-more-line{margin:6px 0 0}
|
||
html[data-organizations] .ws-sess td.who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0;width:100%}
|
||
html[data-organizations] .ws-sess td.who .ws-orgref{vertical-align:middle}
|
||
html[data-organizations] .ws-sess td.ws-st{white-space:nowrap}
|
||
/* Filters and tables on Projects and Inbox. */
|
||
html[data-organizations] .ws-toolbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:12px}
|
||
html[data-organizations] .ws-toolbar .ws-right{align-items:center}
|
||
html[data-organizations] .ws-toolbar .ws-seg{margin-left:0}
|
||
html[data-organizations] .ws-fchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
|
||
html[data-organizations] .ws-fchips .f{display:inline-flex;align-items:center;gap:6px;min-height:0;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px 10px 2px 4px;font:600 12.5px/1.5 var(--font);color:var(--text);white-space:nowrap;cursor:pointer;box-shadow:none}
|
||
html[data-organizations] .ws-fchips .f.plain{padding-left:10px}
|
||
html[data-organizations] .ws-fchips .f:hover{background:var(--raised)}
|
||
html[data-organizations] .ws-fchips .f[aria-pressed="true"]{background:var(--strong);color:var(--surface);border-color:var(--strong)}
|
||
html[data-organizations] .ws-fchips .f .ws-av{width:18px;height:18px;border-radius:999px;font-size:8.5px;letter-spacing:0}
|
||
html[data-organizations] .ws-fchips .f .n{margin-left:2px;font:600 11px var(--mono);opacity:.8}
|
||
html[data-organizations] .ws-sel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:0 0 0 8px;font-size:13px;color:var(--strong);white-space:nowrap}
|
||
html[data-organizations] .ws-sel .ws-label{font-size:10px}
|
||
html[data-organizations] .ws-sel select{border:0;background:transparent;color:var(--strong);font:500 13px/1.5 var(--font);padding:3px 6px 3px 2px;min-height:0;box-shadow:none;width:auto}
|
||
html[data-organizations] .ws-search{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:0 8px;color:var(--muted);font-size:13px;min-width:180px}
|
||
html[data-organizations] .ws-search svg.i{width:14px;height:14px;flex:none}
|
||
html[data-organizations] .ws-search input{border:0;background:transparent;color:var(--strong);font:500 13px/1.5 var(--font);padding:3px 0;min-height:0;box-shadow:none;width:100%;min-width:0}
|
||
html[data-organizations] .ws-search:focus-within,html[data-organizations] .ws-sel:focus-within{outline:2px solid var(--focus,var(--action));outline-offset:1px}
|
||
html[data-organizations] .ws-search input:focus,html[data-organizations] .ws-sel select:focus{outline:none}
|
||
html[data-organizations] .ws-tbl th.sorted{color:var(--strong)}
|
||
html[data-organizations] .ws-tbl th .ar{font-family:var(--mono);margin-left:3px;color:var(--action)}
|
||
html[data-organizations] .ws-tbl td.num,html[data-organizations] .ws-tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
|
||
html[data-organizations] .ws-tbl tr.ws-edge td:first-child{box-shadow:inset 3px 0 0 var(--org)}
|
||
html[data-organizations] .ws-tbl tr.ws-edge{box-shadow:none}
|
||
html[data-organizations] .ws-tbl .nm{color:var(--strong);font-weight:600;text-decoration:none}
|
||
html[data-organizations] .ws-tbl a.nm:hover{text-decoration:underline}
|
||
html[data-organizations] .ws-tbl .ws-n{margin-left:0}
|
||
html[data-organizations] .ws-grp-row th{padding:8px 10px 6px;background:color-mix(in srgb,var(--raised) 45%,var(--surface));text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--strong);box-shadow:inset 3px 0 0 var(--org)}
|
||
html[data-organizations] .ws-grp-row th>*{vertical-align:middle}
|
||
html[data-organizations] .ws-grp-row th>span{margin-left:8px}
|
||
html[data-organizations] .ws-tbl .ws-grp-row th>.ws-n{margin-left:8px}
|
||
html[data-organizations] .ws-unread td{font-size:12.5px}
|
||
html[data-organizations] .ws-unread-note{margin:-4px 0 10px}
|
||
html[data-organizations] .ws-av.mob{display:none}
|
||
html[data-organizations] .ws .show-m{display:none}
|
||
/* Inbox. */
|
||
html[data-organizations] .ws-ibx-grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
|
||
html[data-organizations] .ws-ibx-grid.with-insp{grid-template-columns:minmax(0,1fr) minmax(300px,360px);align-items:start}
|
||
html[data-organizations] .ws-ibx-list>.ws-sec-h{margin-top:22px}
|
||
html[data-organizations] .ws-ibx td.src{white-space:nowrap}
|
||
html[data-organizations] .ws-ibx .q{color:var(--strong);font-weight:600;text-decoration:none}
|
||
html[data-organizations] .ws-ibx .q:hover{text-decoration:underline}
|
||
html[data-organizations] .ws-ibx .via{display:block;font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-ibx tr.on{background:color-mix(in srgb,var(--action) 10%,var(--surface))}
|
||
html[data-organizations] .ws-ibx tr.on td:first-child{box-shadow:inset 3px 0 0 var(--action)}
|
||
/* SP3: the system Inbox's filter rows and the organization and project chips on each item. */
|
||
html[data-organizations] .ws-ibx-filters{flex-direction:column;align-items:flex-start;gap:8px}
|
||
html[data-organizations] .ws-fgroup{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap}
|
||
html[data-organizations] .ws-ibx-filters .ws-fchips>.ws-label,html[data-organizations] .ws-fgroup>.ws-label{min-width:36px}
|
||
html[data-organizations] .ws-ichips{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:3px}
|
||
html[data-organizations] .ws-ichips .via{display:inline}
|
||
/* #1873 SP5: the system Agents table. Open and Fire sit side by side at one size; a confirm wraps in its cell. */
|
||
html[data-organizations] .ws-agt .ws-arole{font-size:12px;color:var(--muted)}
|
||
html[data-organizations] .ws-agt td.ws-act{white-space:nowrap;text-align:right;width:1%}
|
||
html[data-organizations] .ws-agt td.ws-act>*+*{margin-left:6px}
|
||
html[data-organizations] .ws-agt td.ws-act .btn.small{min-height:0;padding:4px 10px;font:600 13px/1.4 var(--font);border-radius:var(--r)}
|
||
html[data-organizations] .ws-agt .ws-fire-confirm{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;white-space:normal}
|
||
html[data-organizations] .ws-agt .t2.mono{overflow-wrap:anywhere}
|
||
html[data-organizations] .ws-agt tr.on{background:color-mix(in srgb,var(--action) 10%,var(--surface))}
|
||
html[data-organizations] .ws-agt tr.on td:first-child{box-shadow:inset 3px 0 0 var(--action)}
|
||
@media (forced-colors:active){html[data-organizations] .ws-agt tr.on td:first-child{border-left:3px solid Highlight}}
|
||
html[data-organizations] .ws-ochip{background:color-mix(in srgb,var(--org,var(--muted)) 14%,var(--surface))}
|
||
html[data-organizations] .ws-ochip i{width:8px;height:8px;border-radius:999px;background:var(--org,var(--muted));flex:none}
|
||
html[data-organizations] .ws-msrc{align-items:center;gap:5px;font-size:12px;color:var(--muted);margin-bottom:2px}
|
||
html[data-organizations] .ws-insp{border:1px solid var(--line);border-radius:10px;background:var(--surface);display:flex;flex-direction:column;min-width:0;position:sticky;top:12px;max-height:calc(100vh - 80px);overflow:auto}
|
||
html[data-organizations] .ws-insp header{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:1;box-shadow:inset 3px 0 0 var(--org)}
|
||
html[data-organizations] .ws-insp header .x{margin-left:auto;color:var(--muted);display:inline-flex}
|
||
html[data-organizations] .ws-insp header .x svg.i{width:18px;height:18px}
|
||
html[data-organizations] .ws-insp .body{padding:14px;display:grid;gap:14px}
|
||
html[data-organizations] .ws-insp h3{margin:0;font-size:16px;font-weight:700;color:var(--strong)}
|
||
html[data-organizations] .ws-insp .note{margin:0}
|
||
html[data-organizations] .ws-auth{border:1px solid var(--line);border-left:3px solid var(--org,var(--action));border-radius:0 6px 6px 0;padding:8px 10px;background:var(--canvas);font-size:13px;color:var(--strong)}
|
||
html[data-organizations] .ws-opts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
|
||
html[data-organizations] .ws-opts li{border:1px solid var(--line);border-radius:8px;padding:9px 10px;display:grid;gap:6px;background:var(--canvas)}
|
||
html[data-organizations] .ws-opts .k{font:700 13px var(--mono);color:var(--strong)}
|
||
html[data-organizations] .ws-opts .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
|
||
html[data-organizations] .ws-opts b{font-weight:600;color:var(--strong)}
|
||
html[data-organizations] [data-ws-cmds]{display:grid;gap:6px}
|
||
html[data-organizations] .ws-cmd{display:flex;gap:6px;align-items:center;min-width:0}
|
||
html[data-organizations] .ws-cmd code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:3px 6px;font-size:12px;color:var(--strong)}
|
||
html[data-organizations] .ws-cmd .ws-btn{padding:4px 6px}
|
||
html[data-organizations] #copy-status:empty{display:none}
|
||
@media (max-width:1100px){
|
||
html[data-organizations] .ws-g5{grid-template-columns:repeat(3,minmax(0,1fr))}
|
||
html[data-organizations] .ws-ibx-grid.with-insp{grid-template-columns:minmax(0,1fr)}
|
||
html[data-organizations] .ws-insp{position:static;max-height:none}
|
||
}
|
||
|
||
@media (pointer:coarse){html[data-organizations] .ws-nav,html[data-organizations] .s1-section.ws-nav{min-height:40px}}
|
||
@media (max-width:759px){
|
||
html[data-organizations] .content:has(.ws){padding:14px 16px 24px}
|
||
html[data-organizations] .tree{padding:10px 12px 20px}
|
||
html[data-organizations] .ws h1{font-size:24px}
|
||
html[data-organizations] .ws-split,html[data-organizations] .ws-tiles{grid-template-columns:minmax(0,1fr)}
|
||
html[data-organizations] .ws-tile.is-empty{grid-column:auto}
|
||
html[data-organizations] .ws-sec-h .note{flex-basis:100%;order:3}
|
||
html[data-organizations] .ws-cfg li{grid-template-columns:18px minmax(0,1fr) auto auto}
|
||
html[data-organizations] .ws-cfg .v{grid-column:2/-1;grid-row:2}
|
||
html[data-organizations] .ws-meta{padding-left:0;margin-top:0}
|
||
html[data-organizations] .ws-orghead .ws-right{margin-left:0}
|
||
html[data-organizations] .ws-busctl,html[data-organizations] .ws-busctl .bus-restart{align-items:flex-start}
|
||
html[data-organizations] .ws-busctl [data-bus-restart-receipt]{text-align:left}
|
||
html[data-organizations] .ws-busctl .bus-buttons{justify-content:flex-start}
|
||
html[data-organizations] .ws-docrow .ws-label{min-width:0}
|
||
html[data-organizations] .ws-levels{grid-template-columns:minmax(0,1fr)!important}
|
||
html[data-organizations] .ws-levels>div{border-right:0}
|
||
html[data-organizations] .ws-levels>.hide-m,html[data-organizations] .ws .hide-m{display:none}
|
||
html[data-organizations] .ws-levels>.span{grid-column:auto}
|
||
html[data-organizations] .ws-levels>.last.lh{border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
|
||
html[data-organizations] .ws-levels .mlabel{display:flex}
|
||
html[data-organizations] .ws-g5{grid-template-columns:minmax(0,1fr)}
|
||
html[data-organizations] .ws-g5.keep2{grid-template-columns:repeat(2,minmax(0,1fr))}
|
||
html[data-organizations] .ws-g5.keep2>:last-child:nth-child(odd){grid-column:1/-1}
|
||
html[data-organizations] .ws-orgcards{grid-template-columns:minmax(0,1fr)}
|
||
html[data-organizations] .ws-srow{grid-template-columns:92px 20px minmax(0,1fr)}
|
||
html[data-organizations] .ws-srow .ws-by{grid-column:1/-1}
|
||
html[data-organizations] .ws-trail li{grid-template-columns:42px 18px minmax(0,1fr);gap:8px}
|
||
html[data-organizations] .ws-trail .what{white-space:normal}
|
||
html[data-organizations] .ws-toolbar .ws-right{margin-left:0}
|
||
html[data-organizations] .ws-search{min-width:0;flex:1 1 100%}
|
||
html[data-organizations] .ws .show-m,html[data-organizations] .ws-tbl .t2.show-m{display:block}
|
||
html[data-organizations] .ws span.show-m{display:inline-flex}
|
||
html[data-organizations] .ws span.ws-msrc.show-m{display:flex}
|
||
html[data-organizations] .ws-av.mob{display:inline-grid;margin-right:6px;vertical-align:-3px}
|
||
html[data-organizations] .ws-tbl .t2.mono.hide-m{display:none}
|
||
}
|