/* The console and the account page, drawn in the Stackworks language (site/shared/language.css: the sheet, the bar, mono navigation,
   the vermilion block, the outlined box, the band). Colour, type and spacing are brand.css's; nothing here names a colour value.
   One working tool: square rules, mono captions, display figures, status by a small square mark. The vermilion block is
   .console-primary, one a view. */
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/console/geist-mono.woff2) format("woff2")}
body{margin:0;color:var(--brand-text);font:400 14px/1.5 var(--brand-sans);-webkit-font-smoothing:antialiased}
.hidden,[hidden]{display:none!important}
a{color:var(--brand-second)}
.console-grow{flex:1}
/* the bar's menus */
.console-menu{position:relative}
.console-menu summary{cursor:pointer;list-style:none;opacity:.6;padding:var(--brand-space-2) 0}
.console-menu summary::-webkit-details-marker{display:none}
.console-menu summary:hover,.console-menu[open] summary{opacity:1}
.console-popover{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;max-width:min(560px,90vw);background:var(--brand-panel);border:1px solid var(--brand-ink);padding:var(--brand-space-4);display:grid;gap:var(--brand-space-3);z-index:5;font:400 14px/1.5 var(--brand-sans);letter-spacing:0;text-transform:none}
.sw-top>.console-menu:last-of-type .console-popover{left:auto;right:0}
.console-popover ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--brand-space-2)}
.console-popover h3,.console-connect h3{margin:0;font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.console-popover a{color:var(--brand-second);text-decoration:none}.console-popover a:hover{text-decoration:underline;text-underline-offset:4px}
.console-popover pre,.console-connect pre{margin:0;padding:var(--brand-space-3);background:var(--code-bg);color:var(--code-ink);overflow:auto;white-space:pre-wrap;font-size:12px}
.console-popover button,.console-results button{font:inherit;text-align:left;background:none;border:0;padding:var(--brand-space-1) 0;color:var(--brand-ink);cursor:pointer}
.console-popover button:hover,.console-results button:hover{color:var(--brand-accent)}
/* the band: the workspace's name, the page's headline, the workspace's own figures */
.console-band-in{display:grid;gap:var(--brand-space-3);padding:clamp(28px,4vw,56px) clamp(18px,3vw,40px) clamp(24px,3vw,40px)}
.console-band .sw-label{color:var(--brand-on-block);opacity:.75}
.console-band .console-title{color:var(--brand-on-block);font-size:clamp(44px,6vw,96px)}
.console-band .console-figures{padding-top:var(--brand-space-4);border-top:1px solid color-mix(in srgb,var(--brand-on-block) 35%,transparent);margin-top:var(--brand-space-3)}
.console-band .console-figures dt{color:var(--brand-on-block);opacity:.75}
.console-band .console-figures dd{color:var(--brand-on-block);font-size:clamp(22px,2.2vw,30px)}
/* the pages: mono navigation under the band, search at its end */
.console-navbar{display:flex;align-items:center;gap:var(--brand-space-5);padding:0 clamp(18px,3vw,40px);border-bottom:1px solid var(--brand-line)}
.console-nav{flex:1;gap:26px;min-height:56px;overflow-x:auto;scrollbar-width:none}
.console-search{position:relative;flex:none}
.console-search input{font:400 12px var(--brand-mono);letter-spacing:.06em;padding:8px var(--brand-space-3);border:1px solid var(--brand-line2);border-radius:0;background:var(--brand-field);color:var(--brand-ink);width:220px}
.console-search input:focus-visible{outline:2px solid var(--brand-second);outline-offset:2px}
.console-results{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;width:320px;margin:0;padding:var(--brand-space-3);list-style:none;background:var(--brand-panel);border:1px solid var(--brand-ink);display:grid;gap:var(--brand-space-1);z-index:4}
.console-results:empty{display:none}
/* the page: its sections, one column */
#console-page{padding:clamp(28px,4vw,48px) clamp(18px,3vw,40px) 72px;display:grid;gap:clamp(32px,4vw,48px);align-content:start;min-width:0}
#console-page:focus{outline:none}
.console-notice,#console-page>p{margin:0}
.console-notice[data-tone=bad]{color:var(--brand-bad)}.console-notice[data-tone=good]{color:var(--brand-good)}
.console-card{display:grid;gap:var(--brand-space-4);align-content:start;min-width:0}
.console-card h2{margin:0;padding-top:var(--brand-space-3);border-top:2px solid var(--brand-ink);font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink)}
.console-card h3{margin:0;font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.console-pair{display:grid;gap:var(--brand-space-5) clamp(32px,5vw,72px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start}
.console-tabbed,.console-tabpanel{display:grid;gap:clamp(24px,3vw,40px);align-content:start;min-width:0}
/* tabs: mono, uppercase, an underline on the current one */
.console-tabs{display:flex;gap:var(--brand-space-5);border-bottom:1px solid var(--brand-line);overflow-x:auto;scrollbar-width:none}
.console-tabs button{font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--brand-muted);padding:var(--brand-space-3) 0;cursor:pointer;white-space:nowrap}
.console-tabs button:hover{color:var(--brand-ink)}
.console-tabs button[aria-selected=true],.console-tabs button[aria-current]{color:var(--brand-ink);border-bottom-color:var(--brand-accent)}
/* a definition list */
.console-rows{margin:0;display:grid;gap:0}
.console-row{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--brand-space-3);padding:var(--brand-space-3) 0;border-bottom:1px solid var(--brand-line)}
.console-row dt{font:400 11px/1.9 var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.console-row dd{margin:0;overflow-wrap:anywhere;color:var(--brand-ink)}
.console-row dd .console-note{margin-left:var(--brand-space-2)}
.console-mono{font-family:var(--brand-mono);font-size:13px}
.console-note,.console-when{color:var(--brand-muted);margin:0}
.console-empty{margin:0;font:400 12px var(--brand-mono);letter-spacing:.06em;color:var(--brand-muted)}
.console-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--brand-space-3)}
.console-list>li{padding-bottom:var(--brand-space-3);border-bottom:1px solid var(--brand-line)}
.console-list[data-advisories]{gap:var(--brand-space-5)}
/* status: a small square mark and a mono word */
.console-status{display:inline-flex;align-items:center;gap:8px;font:400 11px var(--brand-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-ink);white-space:nowrap}
.console-status::before{content:"";width:8px;height:8px;background:var(--brand-line2);flex:none}
.console-status:not(:first-child){margin-left:14px}
.console-status[data-tone=good]::before{background:var(--brand-good)}.console-status[data-tone=watch]::before{background:var(--brand-watch)}
.console-status[data-tone=bad]::before{background:var(--brand-bad)}.console-status[data-tone=info]::before{background:var(--brand-second)}
/* controls: an action is a mono link; the one primary is the vermilion block (.sw-action); a submit that is not it is the outlined box (.sw-outline) */
.console-button,.console-actions button:not(.console-primary),.account-link{font:400 11px var(--brand-mono);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:0;color:var(--brand-second);cursor:pointer;text-decoration:none;white-space:nowrap}
.console-button:hover,.account-link:hover{text-decoration:underline;text-underline-offset:4px}
.console-button[aria-pressed=true]{color:var(--brand-ink)}
.console-primary,.console-submit{justify-self:start}
.console-button[disabled]{opacity:.5;cursor:wait}
.console-actions{display:flex;gap:var(--brand-space-3) var(--brand-space-5);align-items:center;flex-wrap:wrap}
/* counts are figures: display type over a mono label */
.console-figures{display:flex;flex-wrap:wrap;gap:var(--brand-space-4) clamp(28px,4vw,64px);margin:0}
.console-figures div{display:grid;gap:var(--brand-space-1);min-width:0}
.console-figures dt{font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.console-figures dd{margin:0;font:500 clamp(24px,2.6vw,36px)/1.1 var(--brand-sans);letter-spacing:-.04em;color:var(--brand-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.console-toggles{display:inline-flex;justify-self:start;max-width:100%;overflow-x:auto;border:1px solid var(--brand-ink)}
.console-toggles button{font:400 11px var(--brand-mono);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;border-left:1px solid var(--brand-ink);color:var(--brand-text);padding:var(--brand-space-2) var(--brand-space-3);cursor:pointer;white-space:nowrap}
.console-toggles button:first-child{border-left:0}
.console-toggles button[aria-pressed=true]{background:var(--brand-ink);color:var(--brand-bg)}
.console-bar{display:flex;flex-wrap:wrap;gap:var(--brand-space-3);align-items:center}
.console-bar .console-grow{min-width:0}
/* a list of records: one aligned table, a square rule above it, mono column heads */
.console-table{border-collapse:collapse;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums;border-top:2px solid var(--brand-ink)}
.console-table th{text-align:left;font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted);border-bottom:1px solid var(--brand-line2);padding:var(--brand-space-3) var(--brand-space-3) var(--brand-space-3) 0;white-space:nowrap}
.console-table td{padding:var(--brand-space-3) var(--brand-space-3) var(--brand-space-3) 0;border-bottom:1px solid var(--brand-line);vertical-align:baseline;overflow-wrap:anywhere;color:var(--brand-ink)}
.console-table [data-col=status]{width:136px;white-space:nowrap}
.console-table [data-col=who]{width:22%}
.console-table [data-col=when]{width:136px;white-space:nowrap;color:var(--brand-muted)}
.console-table [data-col=figure]{width:150px;text-align:right;overflow-wrap:anywhere}
.console-table [data-col=action]{width:160px;text-align:right;white-space:nowrap;padding-right:0}
.console-table [data-col=action] .console-button{color:var(--brand-text)}
.console-table tr:hover [data-col=action] .console-button,.console-table [data-col=action] .console-button:focus-visible{color:var(--brand-second)}
.console-table [data-col=action] .console-button+.console-button{margin-left:var(--brand-space-4)}
.console-table td .console-note{display:block;font-size:13px}
.console-table tr[data-pick],.console-table tr[data-open]{cursor:pointer}
.console-table tbody tr:hover>td{background:color-mix(in srgb,var(--brand-accent) 6%,transparent)}
.console-table .console-detail>td{background:var(--brand-panel);padding:var(--brand-space-4)}
.console-table .console-detail:hover>td{background:var(--brand-panel)}
.console-detail pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.console-table-wrap{overflow:auto}
.console-timeline{display:flex;align-items:flex-end;gap:2px;height:48px;border-bottom:1px solid var(--brand-ink)}
.console-timeline span{flex:1;min-height:1px;background:var(--brand-line2)}
.console-timeline span[data-tone=bad]{background:var(--brand-bad)}.console-timeline span[data-tone=watch]{background:var(--brand-watch)}
.console-spend{display:flex;justify-content:space-between;gap:var(--brand-space-3)}
.console-meter{height:8px;background:var(--brand-soft);border:1px solid var(--brand-line2)}.console-meter span{display:block;height:100%;background:var(--brand-ink)}
.console-meter[data-tone=watch] span{background:var(--brand-watch)}.console-meter[data-tone=bad] span{background:var(--brand-bad)}
/* forms: square fields, mono captions */
.console-form{display:grid;gap:var(--brand-space-4);max-width:440px}
.console-inline{display:flex;flex-wrap:wrap;gap:var(--brand-space-3);align-items:end}
.console-field{display:grid;gap:var(--brand-space-2);font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.console-field input,.console-form input,.console-form select,.console-actions select,.console-actions input,.console-inline input,.console-inline select,.account-signin input,.account-signin select{font:400 14px var(--brand-sans);letter-spacing:0;text-transform:none;padding:10px var(--brand-space-3);border:1px solid var(--brand-line2);border-radius:0;background:var(--brand-field);color:var(--brand-ink);min-width:0;min-height:44px}
.console-form textarea{font:13px var(--brand-mono);min-height:8em;padding:var(--brand-space-3);border:1px solid var(--brand-line2);border-radius:0;background:var(--brand-field);color:var(--brand-ink)}
.console-form select,.console-form textarea{font-family:var(--brand-sans)}
:is(.console-button,.console-tabs button,.console-toggles button,.account-link):focus-visible,:is(.console-field input,.console-form input,.console-form select,.account-signin input,.account-signin select,.console-form textarea):focus-visible{outline:2px solid var(--brand-second);outline-offset:2px}
@media(max-width:720px){
 .sw-top{gap:var(--brand-space-4)}.sw-top .theme-toggle{padding-left:var(--brand-space-3);min-width:0}
 .console-navbar{flex-wrap:wrap;gap:0}
 .console-nav{flex-basis:100%;min-height:52px}
 .console-search{flex-basis:100%;padding-bottom:var(--brand-space-3)}.console-search input{width:100%}
 .sw-top .console-menu summary{padding-block:var(--brand-space-3)}
 .console-row{grid-template-columns:110px minmax(0,1fr)}
 /* on a phone a record is two lines: its status and what it is, then who and when, its action at the end */
 .console-table,.console-table tbody{display:block}
 .console-table thead{display:none}
 .console-table tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--brand-space-3);padding:var(--brand-space-3) 0;border-bottom:1px solid var(--brand-line)}
 .console-table td{display:block;border:0;padding:0!important;width:auto!important;text-align:left;min-width:0}
 .console-table td[data-col=status]{flex:0 0 auto;white-space:nowrap}
 .console-table td[data-col=what]{flex:1 1 0;min-width:0}
 /* a record with a status breaks after its status and what it is: who, when and its action are the second line */
 .console-table tbody tr:has(>td[data-col=status])::after{content:"";flex-basis:100%;height:0;order:1}
 .console-table tbody tr:has(>td[data-col=status])>td:not([data-col=status]):not([data-col=what]){order:2}
 .console-table td[data-col=who],.console-table td[data-col=when]{flex:0 1 auto;color:var(--brand-muted);font-size:13px}
 .console-table td[data-col=who]:empty,.console-table td[data-col=when]:empty{display:none}
 .console-table td[data-col=figure],.console-table td[data-col=action]{flex:0 0 auto;margin-left:auto;text-align:right}
 .console-table td[data-col=figure]+td[data-col=figure]{margin-left:var(--brand-space-2)}
 /* a figure keeps its column's label once the header is gone */
 .console-table td[data-col=figure][data-label]:not([data-label=""])::before{content:attr(data-label) " ";color:var(--brand-muted);font:400 10px var(--brand-mono);letter-spacing:.1em;text-transform:uppercase}
 .console-table .console-detail{display:block}.console-table .console-detail>td{display:block}
}
.schema-frame{overflow:auto;border:1px solid var(--brand-ink);background:var(--brand-bg);max-width:100%}
.schema-diagram{display:block;min-width:min-content;font:12px var(--brand-mono)}
.schema-box{fill:var(--brand-panel);stroke:var(--brand-ink);stroke-width:1.5}
.schema-entity{cursor:pointer;outline:none}
.schema-entity:hover .schema-box,.schema-entity:focus-visible .schema-box{stroke:var(--brand-accent)}
.schema-name{font:500 14px var(--brand-sans);fill:var(--brand-ink)}
.schema-label{fill:var(--brand-text)}
.schema-kind{fill:var(--brand-muted)}
.schema-states .schema-label{fill:var(--brand-second)}
.schema-reference{fill:none;stroke:var(--brand-second);stroke-width:1.5}
/* the account page (account-page.mjs): sign-in, approvals and the workspace list, under the same bar and band */
#account-page{padding:clamp(28px,4vw,48px) clamp(18px,3vw,40px) 72px;display:grid;gap:clamp(24px,3vw,40px);align-content:start;max-width:1240px}
.account-signin{display:grid;gap:var(--brand-space-4);max-width:440px}
.account-signin .signin,.account-signin form{display:grid;gap:var(--brand-space-3)}
.account-signin label{display:grid;gap:var(--brand-space-2);font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.account-signin button[type=submit]{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;font:500 12px var(--brand-mono);letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--brand-second);color:var(--brand-second);border-radius:0;cursor:pointer}
.account-signin button[type=submit]:hover{background:var(--brand-second);color:var(--brand-bg)}
.account-signin .signin button[type=button]{font:400 11px var(--brand-mono);letter-spacing:.12em;text-transform:uppercase;background:none;border:0;padding:0;color:var(--brand-second);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.account-signin .help,.account-signin .label,.account-signin .cap{margin:0;color:var(--brand-muted)}
.codeboxes{display:flex;gap:var(--brand-space-2)}.codeboxes input{width:2.75em;min-width:0;text-align:center;padding-inline:0}
.account-header{display:flex;align-items:center;gap:var(--brand-space-5);flex-wrap:wrap;justify-content:space-between}
.account-grid{display:grid;gap:clamp(32px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.account-billing:empty{display:none}
.account-list{display:grid;gap:var(--brand-space-4)}
.account-list h2{margin:var(--brand-space-4) 0 0;font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted)}
.account-workspaces{list-style:none;margin:0;padding:0;border-top:2px solid var(--brand-ink)}
.account-workspaces li{border-bottom:1px solid var(--brand-line)}
.account-workspace{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr);gap:var(--brand-space-4);align-items:baseline;padding:var(--brand-space-4) var(--brand-space-2);color:var(--brand-ink);text-decoration:none}
a.account-workspace:hover,a.account-workspace:focus-visible{background:color-mix(in srgb,var(--brand-accent) 6%,transparent)}
a.account-workspace:hover .account-name,a.account-workspace:focus-visible .account-name{color:var(--brand-second)}
.account-name{font:500 clamp(18px,1.8vw,24px)/1.2 var(--brand-sans);letter-spacing:-.03em;overflow-wrap:anywhere}
.account-role,.account-address{font:400 11px var(--brand-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-muted);overflow-wrap:anywhere}
.account-address{text-align:right}
@media (max-width:560px){.account-workspace{grid-template-columns:1fr auto}.account-address{grid-column:1/-1;text-align:left}}
.account-actions{display:flex;gap:var(--brand-space-5);align-items:center;flex-wrap:wrap}
.account-check{display:flex;gap:var(--brand-space-2);align-items:center}
/* the header: the still star beside the wordmark, and a workspace console's switcher (its workspace, and the account's others) */
.console-star{margin-right:10px;image-rendering:pixelated}
.console-switcher summary{opacity:1;max-width:min(42vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.console-switcher [aria-current]{color:var(--brand-ink);font-weight:500}