/* Compact Console chrome; palette stays shared with the existing charts. */
:root{--control-compact:32px;--rail-narrow:64px;--rail-gap:40px}
.scope button,.getkey,.time-window button{min-height:var(--control-compact);padding:var(--space-1) var(--space-3)}
/* the header's right column stacks Mint API key over the page's time window, both flush right */
.top{margin-bottom:var(--space-6)}.topact{flex-direction:column;align-items:flex-end}
.tag-demo{display:none}
.brand{position:relative;padding-bottom:var(--rail-gap);padding-right:var(--space-5)}
/* the collapse button: a 28px round
 * hairline with a chevron that points the way the rail will move; it flips
 * when collapsed, the hover fills lightly */
#rail-toggle{position:absolute;right:0;top:2px;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--dim)}
#rail-toggle:hover{background:var(--raise);color:var(--ink);border-color:var(--line3)}
#rail-toggle svg{display:block}
.rail-collapsed #rail-toggle svg{transform:scaleX(-1)}
.rail-anim #rail-toggle svg{transition:transform var(--rail-ms) var(--rail-ease)}
.nav{display:flex;flex-direction:column;flex:1;gap:var(--space-6);padding-bottom:var(--space-3)}
.nav-primary{display:flex;flex-direction:column;gap:var(--space-1)}
.nav-secondary{display:flex;flex-direction:column;gap:var(--space-1);margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--line2)}
.railfoot{display:flex;align-items:center;gap:var(--space-1)}
.acct{min-width:0;flex:1;min-height:var(--touch-target)}
.logout-button{display:grid;place-items:center;color:var(--dim);width:var(--row-control);height:var(--row-control);flex:none;border:1px solid transparent;border-radius:var(--radius-control)}
.logout-button:hover{color:var(--dn);background:color-mix(in srgb,var(--dn) 12%,transparent);border-color:color-mix(in srgb,var(--dn) 35%,transparent)}
/* theme toggle: the sign-out button's twin, neutral on hover */
.theme-button{display:grid;place-items:center;color:var(--dim);width:var(--row-control);height:var(--row-control);flex:none;border:1px solid transparent;border-radius:var(--radius-control);cursor:pointer;background:none}
.theme-button:hover{color:var(--ink);background:var(--hover);border-color:var(--line)}
.theme-button:focus-visible{outline-offset:2px}
/* Rail collapse / expand animates.
 * The shell's grid columns, the rail padding, the brand gap and the toggle's
 * offset transition over --rail-ms; the labels (brand word, nav text, account
 * email) shrink to zero width and fade instead of switching display, so each
 * icon slides to its collapsed spot. The footer wraps to two rows only when
 * the rail is too narrow for both buttons. .rail-anim is added by applyRail()
 * the first time the state changes, so a deep link to #/docs lands collapsed
 * without animating. Reduced motion: the console-wide rule caps every
 * transition at .01ms. */
:root{--rail-ms:260ms;--rail-ease:cubic-bezier(.4,0,.2,1)}
.brand{height:calc(var(--row-control) + var(--rail-gap))}
.brand .mark,.brand .bar,.brand .word{min-width:0;max-width:160px;overflow:hidden;white-space:nowrap}
.nav a{overflow:hidden}
.nav a span{display:block;min-width:0;max-width:160px;overflow:hidden;white-space:nowrap}
.railfoot{flex-wrap:wrap}.railfoot .acct{min-width:var(--row-control)}
.acct .who{max-width:200px}
.rail-anim{transition:grid-template-columns var(--rail-ms) var(--rail-ease)}
.rail-anim .rail{transition:padding var(--rail-ms) var(--rail-ease)}
.rail-anim .brand{transition:padding var(--rail-ms) var(--rail-ease),gap var(--rail-ms) var(--rail-ease)}
.rail-anim #rail-toggle{transition:right var(--rail-ms) var(--rail-ease),background-color .18s,color .18s,border-color .18s}
.rail-anim .nav a{transition:color .18s,background-color .18s,padding var(--rail-ms) var(--rail-ease)}
.rail-anim .brand .mark,.rail-anim .brand .bar,.rail-anim .brand .word,.rail-anim .nav a span,.rail-anim .acct .who{transition:max-width var(--rail-ms) var(--rail-ease),margin var(--rail-ms) var(--rail-ease),opacity .18s ease .1s}
.rail-collapsed{grid-template-columns:var(--rail-narrow) minmax(0,1fr)}
.rail-collapsed .rail{padding-left:var(--space-2);padding-right:var(--space-2)}
.rail-collapsed .brand{padding:0 0 var(--rail-gap);gap:0}
.rail-collapsed .brand .word,.rail-collapsed .brand .bar,.rail-collapsed .brand .mark,.rail-collapsed .nav a span,.rail-collapsed .acct .who{max-width:0;opacity:0;visibility:hidden}
.rail-collapsed.rail-anim .brand .mark,.rail-collapsed.rail-anim .brand .bar,.rail-collapsed.rail-anim .brand .word,.rail-collapsed.rail-anim .nav a span,.rail-collapsed.rail-anim .acct .who{transition:max-width var(--rail-ms) var(--rail-ease),margin var(--rail-ms) var(--rail-ease),opacity .12s ease,visibility 0s linear var(--rail-ms)}
.rail-collapsed .nav a span,.rail-collapsed .acct .who{margin-left:-10px}
.rail-collapsed #rail-toggle{right:calc((var(--rail-narrow) - 2*var(--space-2) - 28px)/2)}
.rail-collapsed .nav a{padding:var(--space-2) calc((var(--rail-narrow) - 2*var(--space-2) - 14px)/2);margin-left:0}
.rail-collapsed .railfoot{justify-content:center}
.rail-collapsed .acct{justify-content:center}
@media(max-width:600px){.rail-collapsed .nav a{padding-left:calc((52px - 2*var(--space-1) - 14px)/2);padding-right:calc((52px - 2*var(--space-1) - 14px)/2)}}
.settings-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);border-bottom:1px solid var(--line);padding-bottom:var(--space-4);margin-bottom:var(--space-6)}
.settings-tabs a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);color:var(--dim);border:1px solid transparent}
.settings-tabs a[aria-current="page"]{background:var(--raise);color:var(--ink);border-color:var(--line)}
.settings-provider-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.provider-connection{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-panel);padding:var(--space-4);min-width:0;background:var(--panel)}
.provider-connection .provider-label{flex:1;min-width:0}.provider-connection .provider-label strong{display:block;font-size:var(--text-body);font-weight:500}.provider-connection .provider-label small{display:block;color:var(--dim);font-size:var(--text-note)}
.provider-symbol{width:var(--row-control);height:var(--row-control);display:grid;place-items:center;flex:none;font-family:var(--mono);color:var(--sec)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--line2)}
.settings-row:first-child{border-top:0}.settings-row .sub{color:var(--dim);font-size:var(--text-label)}
#portal-go{color:var(--up);border-color:color-mix(in srgb,var(--up) 40%,var(--line))}
.api-keys-panel .key-cap{min-width:8em}
.member-picker{position:relative;min-width:12em}.member-picker summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);background:var(--raise)}
.member-picker summary::after{content:'⌄';float:right;margin-left:var(--space-3)}
.member-picker-list{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:20;min-width:100%;width:max-content;max-width:min(24rem,75vw);max-height:18rem;overflow:auto;background:var(--raise);border:1px solid var(--line);padding:var(--space-2);border-radius:var(--radius-control);box-shadow:var(--shadow)}
.member-picker-list label{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);white-space:nowrap;font-size:var(--text-label);cursor:pointer}.member-picker-list input{accent-color:var(--up)}
.confirm-dialog .note{margin-bottom:var(--space-4)}.confirm-dialog .inp{margin-bottom:var(--space-3)}
.confirm-dialog [role="alert"]{color:var(--dn);margin:var(--space-3) 0}
/* owner 2026-09-06: "Use an email code instead" shares the buttons' row (left;
 * Cancel and Confirm right) and nothing sits under that row */
.confirm-dialog .identity-actions{flex-wrap:nowrap}
.confirm-dialog .confirm-alternate{margin:0 auto 0 0;padding:0;min-height:var(--row-control);font-size:var(--text-label);color:var(--dim);text-decoration:underline;text-underline-offset:3px;text-align:left;white-space:nowrap}
.confirm-dialog .confirm-alternate:hover{color:var(--ink)}
body[data-console-view="docs"] .top{display:none}
@media(max-width:1150px){.settings-provider-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.brand .mark{display:none}.brand{height:calc(var(--touch-target) + var(--rail-gap));padding:0}#rail-toggle{right:0}.railfoot{display:flex;flex-direction:column}.acct .who{display:none}.nav a{justify-content:center}.settings-provider-list{grid-template-columns:1fr}}
@media(max-width:600px){.settings-tabs{gap:var(--space-1)}.settings-tabs a{padding:var(--space-2)}.settings-row{flex-wrap:wrap}.settings-provider-list{grid-template-columns:1fr}.shell,.rail-collapsed{grid-template-columns:52px minmax(0,1fr)}.rail-collapsed .rail{padding-left:var(--space-1);padding-right:var(--space-1)}.provider-connection{padding:var(--space-3);gap:var(--space-2)}}
@media(pointer:coarse){.scope button,.getkey,.time-window button,.logout-button,.theme-button{min-height:var(--touch-target)}.logout-button,.theme-button{width:var(--touch-target)}}
/* Docs: the reading room owns its own columns, so the console page column gives up its gutter and 1300px cap (the docs sidebar then sits flush right of the rail). The lazy-load notice keeps a gutter until the reader mounts. */
body[data-console-view="docs"] .main{max-width:none;padding:0;margin:0}
body[data-console-view="docs"] .hw-docs-root:not(:has(.hw-docs)){padding:24px 32px}
/* Focus, console-wide: no glow on a mouse click anywhere; keyboard focus gets
 * one thin neutral ring (--focus, index.html), which also outranks the
 * outline any control declares for itself — only their outline-offsets
 * still apply. Text fields, selects and search boxes never ring: their
 * hairline goes one step lighter while focused. */
:focus:not(:focus-visible){outline:none!important}
:focus-visible{outline:1px solid var(--focus)!important;outline-offset:2px}
.af-stop:focus-visible{outline:none!important}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,select:focus-visible,textarea:focus-visible,.inp:focus,.inp:focus-visible{outline:none!important;border-color:var(--mute);box-shadow:none}
.arinput:focus-within{border-color:var(--mute)}
/* mint forms: one control height across the row (the member picker sat taller than the project select) */
.mintform>.inp,.mintform>span>.inp,.mintform .member-picker summary,.mintform .seg,.mintform>.btn{min-height:var(--control-compact);box-sizing:border-box}
.mintform>.btn{height:var(--control-compact);padding-top:0;padding-bottom:0}
.mintform .member-picker summary{display:flex;align-items:center;font-family:var(--mono);font-size:var(--text-label);padding:0 11px;background:var(--field);line-height:1}
.mintform .member-picker summary::after{float:none;margin-left:auto;padding-left:var(--space-3)}
/* the panel header's right slot when it holds actions */
.ph-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap;min-width:0}
/* Get started (owner 2026-09-07, rebuilt r13 after Experiential Labs' bottom
 * right): a small fixed button on every view, raise ground, one hairline,
 * console corners, sans with the done count in mono; it opens a narrow
 * panel above itself — serif title like the panels, an × top right, four
 * hairline rows with a 16px check ring each (the ring is the only round
 * shape). z-index 5 sits over page content; every <dialog> is in the top
 * layer above it. The main column's own 80px bottom padding already clears
 * the button, so the page needs no extra room while it shows. */
.getstarted{position:fixed;right:24px;bottom:24px;z-index:5;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--space-2);max-width:calc(100vw - 48px)}
.gs-btn{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target);padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--raise);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;box-shadow:var(--shadow-sm);transition:border-color .18s,background-color .18s,color .18s}
.gs-btn .gs-rocket{flex:none;width:var(--space-4);height:var(--space-4);color:var(--sec)}
.gs-btn:hover{border-color:var(--mute);background:var(--raise-hi)}
.gs-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.gs-btn .gs-count{display:inline-block;font-family:var(--mono);font-size:var(--text-note);font-weight:400;color:var(--dim);font-variant-numeric:tabular-nums}
/* r18 (owner 2026-09-09) — a fresh account (0 of 4): the button wears the
 * console's primary look and a slow breathing halo until the first step lands */
.gs-btn.is-fresh{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.gs-btn.is-fresh:hover{background:var(--gold);border-color:var(--gold);filter:brightness(.94)}
.gs-btn.is-fresh .gs-rocket,.gs-btn.is-fresh .gs-count{color:inherit}
.gs-btn.is-fresh .gs-count{opacity:.62}
.gs-btn.is-fresh::after{content:"";position:absolute;inset:-5px;border-radius:calc(var(--radius-control) + 4px);border:2px solid var(--cue-ring-strong);pointer-events:none;opacity:0;animation:gs-breathe 2.4s ease-in-out infinite}
@keyframes gs-breathe{0%,100%{opacity:0;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
/* a step flipped while the panel was closed: the button pops a little and its count rolls */
.gs-btn.is-pop{animation:gs-pop .5s cubic-bezier(.22,1,.36,1)}
@keyframes gs-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
/* the odometer: the old figure above the new one, the column slides up by one line */
.gs-odo{display:inline-block;position:relative;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.gs-odo-roll{display:block;animation:gs-odo .45s cubic-bezier(.22,1,.36,1) .15s both}
.gs-odo-roll i{display:block;height:1em;line-height:1;font-style:normal}
@keyframes gs-odo{from{transform:translateY(0)}to{transform:translateY(-1em)}}
.gs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gs-count,.gs-progress{line-height:1}
/* r20 (owner 2026-09-11: "Get started should start with the Get started
 * [button] … the transition to open up is still bugged"): no morph. Open, the
 * button leaves the flow at the corner it shares with the panel, fades over the
 * same beat and is then hidden; the panel is laid out at its final size and
 * place and only rises in — opacity and transform, nothing measured, nothing
 * laid out per frame. Closing (.is-closing on the root, .is-leaving on the
 * panel; gsClose) is the exact reverse, and the paint that follows hides the
 * panel and puts the button back in flow at the same spot. Rows never animate
 * on open. */
.getstarted.is-open .gs-btn{position:absolute;right:0;bottom:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-out,visibility 0s linear .12s}
.getstarted.is-open .gs-btn.is-fresh::after{display:none}
.getstarted.is-closing .gs-btn{opacity:1;visibility:visible;transition:opacity .14s ease-out .04s,visibility 0s}
.getstarted.is-closing .gs-panel{pointer-events:none}
/* the finish's "All set" button (gsClose(host,true)): --up, holds, then fades */
.gs-btn.is-allset{background:var(--up);border-color:var(--up);color:var(--panel)}
.gs-btn.is-allset svg{width:16px;height:16px;flex:none}
.getstarted.is-closing .gs-btn.is-fading{opacity:0;transition:opacity .3s linear}
.gs-panel{position:relative;width:276px;max-height:calc(100vh - 120px);overflow:auto;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-control);box-shadow:var(--shadow);transform-origin:100% 100%}
.gs-panel[hidden]{display:none}
/* the reveal: opacity and transform only, about the bottom-right corner; the
 * exit is the same path backwards. .is-entering is set by gsApply when the
 * open state changes (paintGetStarted's gsWasOpen) and cleared by gsFxClear */
.gs-panel.is-entering{animation:gs-panel-in .18s cubic-bezier(.22,1,.36,1) both}
.gs-panel.is-leaving{animation:gs-panel-out .18s cubic-bezier(.4,0,.6,1) both}
@keyframes gs-panel-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes gs-panel-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.97)}}
.gs-head{padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-bottom:1px solid var(--line2)}
.gs-head-row{display:flex;align-items:center;gap:var(--space-3)}
.gs-title{font-family:'Newsreader',Georgia,serif;font-weight:500;font-size:19px;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.gs-progress{margin-left:auto;font-family:var(--mono);font-size:var(--text-note);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-x{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);border:1px solid transparent;border-radius:var(--radius-control);color:var(--dim);font-size:0;line-height:0}
.gs-x svg{display:block;width:13px;height:13px}
.gs-x:hover{color:var(--ink);background:var(--raise);border-color:var(--line)}
.gs-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the progress track under the head: one segment per step, lit left to right
 * by count (gsTrack); the segment lit this paint fills like a liquid */
.gs-track{display:flex;gap:4px;margin-top:var(--space-3);padding-right:var(--space-1)}
.gs-track i{position:relative;overflow:hidden;flex:1;height:3px;border-radius:2px;background:var(--line3);transform-origin:left center}
.gs-track i.on{background:var(--up)}
.gs-track i.just{animation:gs-liquid .6s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes gs-liquid{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gs-steps{display:flex;flex-direction:column;padding:var(--space-1) 0}
.gs-row{position:relative;display:flex;min-height:var(--touch-target);box-sizing:border-box;align-items:center;gap:var(--space-3);padding:11px var(--space-4);border-top:1px solid var(--line2);color:var(--sec);font-family:var(--sans);font-size:13px;line-height:1.3;text-decoration:none;transition:background-color .15s,color .15s}
.gs-row:first-child{border-top:0}
.gs-row:hover{background:var(--raise);color:var(--ink)}
.gs-row:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* the ring is a 16px border-box circle and the check a 10px glyph centred in it by grid (owner 2026-09-20: "make sure the check marks are centered") */
.gs-ring{flex:none;position:relative;z-index:2;width:16px;height:16px;box-sizing:border-box;display:grid;place-items:center;border:1px solid var(--faint);border-radius:50%;color:transparent}
.gs-ring svg{display:block;width:10px;height:10px}
.gs-ring svg path{stroke-dasharray:14;stroke-dashoffset:0}
.gs-row.done{color:var(--dim)}
.gs-row.done .gs-ring{background:var(--up);border-color:var(--up);color:var(--panel)}
.gs-aside{color:var(--dim)}
.gs-row.done .gs-aside{color:var(--faint)}
/* a step just flipped (owner 2026-09-09, the ink effect he picked over the
 * sparks): the ring fills like ink pooling from its centre, then the check is
 * drawn as a pen would, the label lifts and settles, the segment fills like a
 * liquid; every one a plain state switch under reduced motion */
.gs-row.just-done .gs-ring{animation:gs-ink-edge .5s cubic-bezier(.22,1,.36,1) both}
.gs-row.just-done .gs-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--up);transform:scale(0);animation:gs-ink .42s cubic-bezier(.22,1,.36,1) .08s forwards}
.gs-row.just-done .gs-ring svg{position:relative;z-index:1}
.gs-row.just-done .gs-ring svg path{stroke-dashoffset:14;animation:gs-pen .32s cubic-bezier(.4,0,.2,1) .36s forwards}
.gs-row.just-done .gs-step{animation:gs-ink-label .75s cubic-bezier(.22,1,.36,1) both}
@keyframes gs-ink-edge{0%{background:transparent;border-color:var(--faint)}100%{background:transparent;border-color:var(--up)}}
@keyframes gs-ink{to{transform:scale(1)}}
@keyframes gs-pen{to{stroke-dashoffset:0}}
@keyframes gs-ink-label{0%{color:var(--ink);transform:translateX(0)}50%{transform:translateX(2px)}100%{color:var(--dim);transform:translateX(0)}}
/* the finish: the head reads You're all set over a faint ink wash, the edge
 * turns --up, then gsClose(host,true) lets the panel leave and brings back an
 * "All set" button in --up that holds and fades */
.getstarted.is-finale .gs-panel{border-color:var(--up)}
.getstarted.is-finale .gs-title{animation:gs-title-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes gs-title-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.getstarted.is-finale .gs-head{animation:gs-ink-head .9s cubic-bezier(.22,1,.36,1) .3s both}
@keyframes gs-ink-head{to{background:color-mix(in srgb,var(--up) 9%,transparent)}}
@media (prefers-reduced-motion:reduce){.gs-btn.is-fresh::after{display:none}.gs-row.just-done .gs-ring,.gs-row.just-done .gs-ring::before,.gs-row.just-done .gs-ring svg path,.gs-row.just-done .gs-step,.gs-track i.just,.gs-btn.is-pop,.gs-odo-roll,.getstarted.is-finale .gs-title,.getstarted.is-finale .gs-head,.gs-panel.is-entering,.gs-panel.is-leaving{animation:none}.getstarted.is-open .gs-btn,.getstarted.is-closing .gs-btn{transition:none}.gs-row.just-done .gs-ring svg path{stroke-dashoffset:0}.gs-row.just-done .gs-ring::before{transform:scale(1)}.gs-odo-roll{transform:translateY(-1em)}}
@media(max-width:600px){.getstarted{right:12px;bottom:12px}.gs-panel{width:min(276px,calc(100vw - 24px))}}