/* The rules of the design files' <style> blocks, merged (apps/console/design/*.html), plus the console's menu popover. Everything else
   is inline style on the components, copied from the design. */
body{margin:0;background:#FAFAF9}
a{color:#111111;text-decoration:none}
a:hover{color:#000000}
.cnav:hover{background:#EFEEEB;color:#111111}
.btn-primary:hover{opacity:0.88}
.btn-ghost:hover{background:#F5F5F4;border-color:#A8A29E}
.btn-oauth:hover{background:#F5F5F4;border-color:#A8A29E}
.icon-btn:hover{background:#F5F5F4}
.chip:hover{border-color:#A8A29E}
.text-link:hover{text-decoration:underline;text-underline-offset:3px}
.text-btn:hover{color:#000000;text-decoration:underline;text-underline-offset:3px}
.bar:hover{background:#111111}
.src:hover{border-color:#A8A29E}
label.src:has(input:checked){border-color:#111111 !important;box-shadow:0 0 0 1px #111111}
.seg:hover{color:#111111}
.seg[aria-pressed="true"]{background:#FFFFFF;color:#111111;box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.seg[aria-pressed="false"]{background:transparent;color:#57534E;box-shadow:none}
.field:focus{outline:none;border-color:#111111;box-shadow:0 0 0 3px rgba(17,17,17,0.08)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}
.bgfield::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url(assets/caas-dotfield.png);background-size:1320px 1320px;background-repeat:repeat;background-position:center top;opacity:var(--bg-op,0.5)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #111111;outline-offset:2px;border-radius:6px}
.bgfield a:focus-visible,.bgfield button:focus-visible{border-radius:8px}

/* Not in the design: disabled controls (and fields kept as typed while what they hold is checked, a provider's key), and the popover
   menus of the workspace switcher and row ••• buttons. */
button:disabled{opacity:0.5;cursor:default}
.field:disabled,.field[readonly]{background:#F5F5F4 !important;color:#6B6B6B !important}
.menu-anchor{position:relative;display:inline-block;width:0;height:0;vertical-align:bottom}
.menu-anchor-wide{display:block;width:auto;margin-top:-20px}
.menu{position:absolute;z-index:20;top:4px;right:0;min-width:160px;box-sizing:border-box;display:flex;flex-direction:column;padding:4px;background:#FFFFFF;border:1px solid #E7E5E4;border-radius:12px;box-shadow:0 8px 24px rgba(17,17,17,0.12);text-align:left}
.menu-anchor-wide .menu{left:0;right:0}
.menu-item{height:32px;padding:0 10px;border:0;border-radius:8px;background:transparent;font-family:inherit;font-size:14px;color:#111111;text-align:left;white-space:nowrap;cursor:pointer}
.menu-item:hover{background:#F5F5F4}
.menu-item[aria-current]{font-weight:600}
.menu-item-danger{color:#B91C1C}
.list-row{cursor:pointer}
/* Not in the design: a long value never widens a table. A row's name and every value marked .truncate (an image, a tag) keep to
   one line and end in an ellipsis, whole on its own page or in its title; any other long text in a cell wraps between words, and
   splits a word only where it alone would overflow, so a number or an amount is never broken. */
td{overflow-wrap:break-word}
/* The usage page's meters: an amount, a usage or a rate stays on one line; only a meter's name wraps, between its words, when the
   card is narrow. */
section[aria-labelledby="meter-h"] td{white-space:nowrap}
/* A runtime log line's copy icon shows while the line is hovered or holds focus, and always where nothing hovers. */
.log-line .icon-btn{opacity:0}
.log-line:hover .icon-btn,.log-line:focus-within .icon-btn{opacity:1}
@media (hover:none){.log-line .icon-btn{opacity:1}}
/* Not in the design: a circled i (InfoTip) whose detail shows beside it on hover or keyboard focus, such as a meter's rate. */
.info-tip{position:relative;display:inline-flex;vertical-align:-2px;margin-left:6px;color:#A8A29E;cursor:help;border-radius:50%}
.info-tip:hover,.info-tip:focus-visible{color:#44403C;outline:none}
.info-tip:hover::after,.info-tip:focus-visible::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);z-index:5;white-space:pre;padding:6px 10px;border-radius:6px;background:#1C1917;color:#FFFFFF;font-size:12px;font-weight:400;line-height:1.5;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.list-row td .text-link,.truncate{display:inline-block;max-width:min(32ch,100%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.list-row:hover{background:#FAFAF9}
.list-row[aria-selected]{background:#F5F5F4}
.selection-action:hover{background:rgba(255,255,255,0.12)}
.selection-action-danger:hover{background:rgba(248,113,113,0.18)}
.selection-clear:hover{color:#FFFFFF!important}
.selection-bar{animation:selection-in 160ms ease-out}
@keyframes selection-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.menu-item-danger:hover{background:#FEF2F2}
/* Not in the design: a field whose value is wrong, a label chip's remove button (screens/parts/Labels.tsx), and a field with a fixed
   prefix ($ before a variable). */
.field[aria-invalid="true"]{border-color:#B91C1C !important}
.label-remove:hover{background:#E7E5E4;color:#111111}
.affix:focus-within{border-color:#111111 !important;box-shadow:0 0 0 3px rgba(17,17,17,0.08)}
.affix input:focus,.affix input:focus-visible{outline:none;box-shadow:none}
/* Not in the design: the workflow editor (components/CodeEditor.tsx), outlined as a focused field while its text has the focus. */
.code-editor:focus-within{border-color:#111111 !important;box-shadow:0 0 0 3px rgba(17,17,17,0.08)}
.problem:hover{background:#FEF2F2 !important}
.step-link:hover{text-decoration:underline;text-underline-offset:3px}
/* Not in the design: tabs (components/Tabs.tsx), drawn as the sign-in screen's segmented control. */
.tab[aria-selected="true"]{background:#FFFFFF;color:#111111;box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.tab[aria-selected="false"]{background:transparent;color:#57534E;box-shadow:none}
.tab[aria-selected="false"]:hover{color:#111111}
/* Not in the design: the themed select (components/Select.tsx), a trigger like the inputs and a list like the menus. */
.select-trigger:hover{border-color:#A8A29E}
.select-trigger:focus-visible{outline:none}
.select-trigger[aria-expanded="true"]{border-color:#111111;box-shadow:0 0 0 3px rgba(17,17,17,0.08)}
.select-list{z-index:30;right:auto;max-height:280px;overflow-y:auto;margin:0;list-style:none;font-family:'Geist', ui-sans-serif, system-ui, sans-serif}
.select-option{display:flex;align-items:center;justify-content:space-between;gap:16px;line-height:32px}
.select-option:hover{background:transparent}
.select-option[data-active]{background:#F5F5F4}
.select-option[aria-selected="true"]{font-weight:500}
.select-option-rich{height:auto;padding:8px 10px;line-height:1.4;white-space:normal}
.select-option[aria-disabled="true"]{cursor:default;opacity:0.5}
/* Not in the design: the full-page loader (components/BootScreen.tsx). The logo eases between full and faint, never vanishing;
   an opacity animation runs on the compositor, so it stays smooth while the app's script loads and runs. */
.boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#FAFAF9;transition:opacity 300ms ease}
.boot[data-done]{opacity:0;pointer-events:none}
.boot-logo{display:block;width:148px;animation:boot-pulse 1.2s cubic-bezier(0.37,0,0.63,1) infinite alternate;will-change:opacity}
.boot-logo svg{display:block;width:100%;height:auto}
@keyframes boot-pulse{from{opacity:1}to{opacity:0.28}}
@media (prefers-reduced-motion:reduce){.boot-logo{animation-duration:2.4s}}
/* Not in the design: loading skeletons (components/Skeleton.tsx), grey placeholders in a page's own layout while its data loads.
   They ease between full and faint, slower and softer than the boot logo, and hold still for reduced motion. */
.skeleton{background:#E7E5E4;animation:skeleton-pulse 1.6s cubic-bezier(0.37,0,0.63,1) infinite alternate}
@keyframes skeleton-pulse{from{opacity:1}to{opacity:0.5}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}
/* Not in the design: on desktop, where the sidebar sits beside the page (the shell wraps it above the page below about 800px),
   it stays in view at full window height while the page scrolls. It only scrolls itself on a window too short to fit it. */
@media (min-width:800px){.shell-sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-y:auto}}
/* Not in the design: on a phone the sidebar is a bar across the top that stays in view, its links folded behind a menu button
   (components/Shell.tsx); open, it scrolls itself on a window too short to fit it. */
@media (max-width:799px){div:has(>.shell-sidebar){flex-direction:column;flex-wrap:nowrap!important}.shell-sidebar{flex:none!important;position:sticky;top:0;z-index:25;max-height:100vh;max-height:100dvh;overflow-y:auto;padding:8px 12px!important;border-right:0!important;border-bottom:1px solid #E7E5E4}}