/* Dash M3 Expressive v2 - design tokens, shell and component layer.
   Tokens and motion values are taken 1:1 from the "Dash M3 Expressive v2" design. */
:root{--exp:cubic-bezier(.38,1.21,.22,1);--std:cubic-bezier(.2,0,0,1);--emph-in:cubic-bezier(.3,0,1,1);--emph-out:cubic-bezier(.05,.7,.1,1);--spring-fast:cubic-bezier(.34,1.56,.64,1);--dur-s:.2s;--dur-m:.35s;--dur-l:.5s}
:root,[data-theme="dark"]{--bg:#0e1415;--scl0:#090f10;--scl:#161d1e;--scn:#1a2122;--sch:#252b2c;--schh:#2f3637;--on:#dee3e5;--onv:#bfc8ca;--ol:#899294;--olv:#3f484a;--inv:#dee3e5;--oninv:#2b3133;--e:#ffb4ab;--oe:#690005;--ec:#93000a;--oec:#ffdad6;--ok:#7ddc95;--okc:#1f5130;--onokc:#a8f5b8;--warn:#ffb951;--warnc:#5c4000;--onwarnc:#ffddb3;--p:#4fd8eb;--op:#00363d;--pc:#004f58;--opc:#97f0ff;--s2:#b1cbd0;--sc2:#334b4f;--osc2:#cde7ec;--t:#bac6ea;--tc:#3b4664;--otc:#dae2ff;color-scheme:dark}
[data-theme="light"]{--bg:#f5fafb;--scl0:#ffffff;--scl:#eff5f6;--scn:#e9eff0;--sch:#e3e9ea;--schh:#dee3e5;--on:#171d1e;--onv:#3f484a;--ol:#687273;--olv:#bfc8ca;--inv:#2b3133;--oninv:#ecf2f3;--e:#ba1a1a;--oe:#ffffff;--ec:#ffdad6;--oec:#410002;--ok:#1e6b38;--okc:#a8f5b8;--onokc:#00210c;--warn:#7d5700;--warnc:#ffddb3;--onwarnc:#271900;--p:#006874;--op:#ffffff;--pc:#97f0ff;--opc:#001f24;--s2:#4a6267;--sc2:#cde7ec;--osc2:#051f23;--t:#525e7d;--tc:#dae2ff;--otc:#0e1b37;color-scheme:light}
[data-theme="dark"][data-accent="violet"]{--p:#d0bcff;--op:#381e72;--pc:#4f378b;--opc:#eaddff;--s2:#ccc2dc;--sc2:#4a4458;--osc2:#e8def8;--t:#efb8c8;--tc:#633b48;--otc:#ffd8e4;--bg:#141218;--scl0:#0f0d13;--scl:#1d1b20;--scn:#211f26;--sch:#2b2930;--schh:#36343b;--on:#e6e0e9;--onv:#cac4d0;--ol:#938f99;--olv:#49454f}
[data-theme="light"][data-accent="violet"]{--p:#6750a4;--op:#ffffff;--pc:#eaddff;--opc:#21005d;--s2:#625b71;--sc2:#e8def8;--osc2:#1d192b;--t:#7d5260;--tc:#ffd8e4;--otc:#31111d;--bg:#fef7ff;--scl:#f7f2fa;--scn:#f3edf7;--sch:#ece6f0;--schh:#e6e0e9;--on:#1d1b20;--onv:#49454f;--ol:#79747e;--olv:#cac4d0}
[data-theme="dark"][data-accent="green"]{--p:#a1d39a;--op:#0a390f;--pc:#235024;--opc:#bcf0b4;--s2:#b9ccb4;--sc2:#3a4b39;--osc2:#d5e8cf;--t:#a1ced7;--tc:#1f4d54;--otc:#bcebf3;--bg:#10140f;--scl0:#0b0f0a;--scl:#181d17;--scn:#1c211b;--sch:#262b25;--schh:#31362f;--on:#e0e4da;--onv:#c2c8bc;--ol:#8c9388;--olv:#424940}
[data-theme="light"][data-accent="green"]{--p:#3b6939;--op:#ffffff;--pc:#bcf0b4;--opc:#002204;--s2:#52634f;--sc2:#d5e8cf;--osc2:#101f10;--t:#39656d;--tc:#bcebf3;--otc:#001f24;--bg:#f7fbf1;--scl:#f1f5eb;--scn:#ebefe6;--sch:#e5e9e0;--schh:#e0e4da;--on:#181d17;--onv:#424940;--ol:#72796f;--olv:#c2c8bc}

/* ---------- base (design helmet) ---------- */
html,body{margin:0;height:100%;overflow:hidden;overflow:clip}
html{background:var(--scn)}
body{background:var(--scn);color:var(--on);-webkit-font-smoothing:antialiased;font-family:'Roboto Flex',system-ui,sans-serif;font-size:14px;line-height:20px}
button,input,select,textarea{font-family:inherit}
a{color:var(--p,#4fd8eb)}a:hover{color:var(--opc,#97f0ff)}
.material-symbols-rounded,.material-symbols-outlined{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased;user-select:none}
.material-symbols-outlined{width:1em;height:1em;overflow:hidden;flex:none}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--olv);border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}
input::placeholder,textarea::placeholder{color:var(--ol);opacity:1}
[data-theme="light"] input::placeholder,[data-theme="light"] textarea::placeholder{color:var(--onv);opacity:.78}
@keyframes m3spin{to{transform:rotate(360deg)}}
@keyframes m3pop{0%{opacity:0;transform:scale(.84) translateY(16px)}100%{opacity:1;transform:none}}
@keyframes m3popOut{to{opacity:0;transform:scale(.92) translateY(8px)}}
@keyframes m3fade{from{opacity:0}to{opacity:1}}
@keyframes m3fadeOut{to{opacity:0;visibility:hidden}}
@keyframes m3drop{0%{opacity:0;transform:translateY(-8px) scaleY(.9)}100%{opacity:1;transform:none}}
@keyframes m3snack{0%{opacity:0;transform:translate(-50%,28px) scale(.9)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes m3snackOut{to{opacity:0;transform:translate(-50%,16px) scale(.95)}}
@keyframes m3fab{0%{opacity:0;transform:translateX(-20px) scale(.5)}100%{opacity:1;transform:none}}
/* breathing status dot: transform + opacity only (the old ring animated box-shadow = a repaint per frame) */
@keyframes m3pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.6}}
@keyframes m3splash{0%{opacity:0;transform:scale(.8) translateY(10px)}100%{opacity:1;transform:none}}
button,.m3b{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:transform var(--dur-m) var(--spring-fast),background-color var(--dur-s) var(--std),color var(--dur-s) var(--std),border-color var(--dur-s) var(--std),border-radius .45s var(--exp),box-shadow var(--dur-s) var(--std)}
button>*,.m3b>*{position:relative;z-index:1}
button:not(:disabled):active,.m3b:active{transform:scale(.95)}
button:focus-visible,.m3b:focus-visible{outline:3px solid var(--p);outline-offset:2px}
.m3b{text-decoration:none;box-sizing:border-box}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---------- app shell ---------- */
#m3-root{display:flex;height:100vh;height:100dvh;width:100%;background:var(--scn);color:var(--on);font-family:'Roboto Flex',system-ui,sans-serif;overflow:hidden;overflow:clip;position:relative;font-size:14px;line-height:20px}
/* Rail and drawer share one container whose width springs between 96 and 280px while the two layers crossfade,
   so expanding/collapsing is one continuous motion instead of a display swap. */
#m3-nav{position:relative;flex:none;width:96px;overflow:hidden;contain:layout paint;transition:width .4s var(--std)}
html.m3-nav-open #m3-nav{width:280px}
#m3-rail{position:absolute;top:0;bottom:0;left:0;width:96px;display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;box-sizing:border-box;transition:opacity .28s var(--std) .12s,transform .5s var(--exp),visibility 0s}
#m3-drawer{position:absolute;top:0;bottom:0;left:0;width:280px;display:flex;flex-direction:column;padding:16px 12px;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;box-sizing:border-box;transition:opacity .3s var(--std) .1s,transform .5s var(--exp),visibility 0s}
html.m3-nav-open #m3-rail{opacity:0;visibility:hidden;transform:translateX(-16px) scale(.96);transition:opacity .16s var(--emph-in),transform .3s var(--emph-in),visibility 0s .3s}
html:not(.m3-nav-open) #m3-drawer{opacity:0;visibility:hidden;transform:translateX(-40px);transition:opacity .16s var(--emph-in),transform .3s var(--emph-in),visibility 0s .3s}
.m3-drawer-mobile,#m3-bottom,#m3-mobile-fab,#m3-mobile-search,#m3-search-back{display:none}
.m3-rail-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:80px;flex:none;padding:4px 0 8px;background:none;border:0;cursor:pointer;color:var(--onv)}
.m3-rail-item:hover{color:var(--onv)}
.m3-rail-item .m3-ind{width:24px;height:32px;border-radius:16px;display:grid;place-items:center;background:transparent;transition:background .3s,width .35s var(--std);position:relative}
.m3-rail-item .material-symbols-rounded,.m3-drawer-item .material-symbols-rounded{font-variation-settings:'FILL' 0;transition:font-variation-settings .35s}
.m3-rail-item .m3-lbl{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.3px}
.m3-rail-item.is-active,.m3-rail-item.is-active:hover{color:var(--on)}
.m3-rail-item.is-active .m3-ind{width:56px;background:var(--sc2)}
.m3-rail-item.is-active .material-symbols-rounded,.m3-drawer-item.is-active .material-symbols-rounded{font-variation-settings:'FILL' 1}
.m3-rail-item.is-active .m3-lbl{font-weight:700}
.m3-drawer-item{height:48px;border-radius:24px;border:0;background:transparent;color:var(--onv);display:flex;align-items:center;gap:12px;padding:0 16px;cursor:pointer;font-size:14px;font-weight:500;text-align:left;transition:background .2s;flex:none}
.m3-drawer-item:hover{color:var(--onv)}
.m3-drawer-item.is-active,.m3-drawer-item.is-active:hover{background:var(--sc2);color:var(--osc2);font-weight:700}
.m3-drawer-item:hover{background:var(--sch)!important}
.m3-drawer-item .m3-lbl{flex:1}
#m3-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:8px 8px 8px 0;overflow:hidden;overflow:clip}
#m3-surface{flex:1;min-height:0;background:var(--bg);border-radius:32px;display:flex;flex-direction:column;overflow:hidden;overflow:clip;position:relative;transition:background .4s}
#m3-header{display:flex;align-items:center;gap:12px;padding:20px 28px 12px;flex-wrap:wrap}
#m3-headline{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0}
#dash-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px 28px 28px;scroll-behavior:smooth;position:relative}
#m3-strip{display:flex;align-items:center;gap:12px}
html[data-m3-route="dash"] #m3-strip{display:none}
#m3-routing{position:absolute;left:28px;right:28px;top:4px;z-index:6;animation:m3fade .2s}
#m3-search-pop[hidden]{display:none!important}
#m3-strip{display:contents}
html.m3-booted #m3-boot{display:none}
#m3-header .m3-lbl{max-width:80px}
.m3-rail-item .m3-lbl{max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#m3-mobile-menu{display:none}
.m3-scrim{position:absolute;inset:0}

#m3-nav-scrim{display:none;position:fixed;inset:0;z-index:69;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .3s var(--std)}

/* ---------- phones: top app bar, bottom navigation bar, FAB and a modal drawer ---------- */
@media (max-width:760px){
  #m3-root{flex-direction:column}
  #m3-nav{position:fixed;left:0;top:0;bottom:0;z-index:70;width:min(320px,86vw)!important;background:var(--scl);border-radius:0 28px 28px 0;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:translateX(-105%);visibility:hidden;transition:transform .32s cubic-bezier(.3,0,.8,.15),visibility 0s .32s}
  html.m3-nav-open #m3-nav{transform:none;visibility:visible;transition:transform .5s var(--emph-out),visibility 0s}
  #m3-rail{display:none!important}
  #m3-drawer,html:not(.m3-nav-open) #m3-drawer{position:absolute;inset:0;width:auto;opacity:1;visibility:inherit;transform:none;transition:none;padding:12px 12px calc(16px + env(safe-area-inset-bottom))}
  #m3-drawer .m3-drawer-fab{display:none!important}
  .m3-drawer-mobile{display:flex;flex-direction:column;gap:8px;padding:4px 4px 12px;flex:none}
  #m3-nav-scrim{display:block}
  html.m3-nav-open #m3-nav-scrim{opacity:1;pointer-events:auto}
  #m3-main{padding:0;min-height:0;flex:1}
  #m3-surface{border-radius:0}
  #m3-header{padding:8px 8px 8px 4px;gap:4px;flex-wrap:nowrap;min-height:64px;box-sizing:border-box}
  #m3-headline{flex:1 1 auto!important;gap:8px!important}
  #m3-headline>div{flex:1 1 auto!important}
  #m3-headline a[aria-label="Back"]{width:40px!important;height:40px!important;background:transparent!important}
  #m3-title{font-size:22px!important;line-height:28px!important;letter-spacing:0!important}
  #m3-headline>div>div:first-child{font-size:11px!important;line-height:14px!important;white-space:normal!important;text-overflow:clip!important;overflow:visible!important}
  #m3-strip,#m3-header>[data-m3-act="theme"],#m3-header>[data-lang-switch]{display:none!important}
  #m3-avatar{width:32px!important;height:32px!important;font-size:13px;margin:0 6px 0 2px}
  #m3-mobile-menu,#m3-mobile-search{display:grid}
  #m3-search-wrap{display:none}
  html.m3-search-open #m3-search-wrap{display:flex;align-items:center;gap:4px;position:fixed!important;left:0;right:0;top:0;z-index:80!important;padding:8px 12px 8px 4px;background:var(--scn);min-width:0!important;flex:none!important;box-sizing:border-box;animation:m3fade .2s}
  html.m3-search-open #m3-search-back{display:grid;width:48px;height:48px;border-radius:24px;border:0;background:transparent;color:var(--on);place-items:center;cursor:pointer;flex:none}
  html.m3-search-open #m3-search{flex:1;min-width:0}
  html.m3-search-open #m3-search [data-m3-kbd]{display:none}
  html.m3-search-open #m3-search-pop{position:fixed!important;left:8px!important;right:8px!important;top:64px!important;min-width:0!important;max-height:calc(100dvh - 80px);overflow-y:auto;border-radius:28px!important}
  html.m3-search-open #m3-nav-scrim{opacity:1;pointer-events:auto;z-index:79}
  #dash-content{padding:4px 12px calc(168px + env(safe-area-inset-bottom))}
  #m3-routing{left:12px;right:12px}
  #m3-bottom{display:flex;flex:none;height:calc(72px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:var(--scl);box-sizing:border-box;position:relative;z-index:20}
  .m3-bottom-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;color:var(--onv);text-decoration:none;cursor:pointer;padding:0;font:inherit}
  .m3-bottom-item:hover{color:var(--onv)}
  .m3-bottom-item .m3-ind{width:56px;height:32px;border-radius:16px;display:grid;place-items:center;transition:background .3s,width .35s var(--std)}
  .m3-bottom-item .material-symbols-rounded{font-variation-settings:'FILL' 0;transition:font-variation-settings .35s}
  /* long translated labels wrap to a second line instead of being cut ("Maintenanc...") */
  .m3-bottom-item .m3-lbl{font-size:12px;line-height:13px;font-weight:500;letter-spacing:.2px;max-width:100%;text-align:center;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .m3-bottom-item.is-active,.m3-bottom-item.is-active:hover{color:var(--on)}
  .m3-bottom-item.is-active .m3-ind{background:var(--sc2);color:var(--osc2)}
  .m3-bottom-item.is-active .material-symbols-rounded{font-variation-settings:'FILL' 1}
  .m3-bottom-item.is-active .m3-lbl{font-weight:700}
  #m3-mobile-fab{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:45;width:56px;height:56px;border:0;border-radius:16px;background:var(--pc);color:var(--opc);box-shadow:0 3px 10px rgba(0,0,0,.3);cursor:pointer;animation:m3pop .5s var(--exp) .2s backwards;transition:opacity .2s,transform .35s var(--exp),border-radius .45s var(--exp)}
  #m3-mobile-fab:hover{border-radius:28px}
  html[data-m3-route="console"] #m3-mobile-fab,html.m3-nav-open #m3-mobile-fab,html.m3-search-open #m3-mobile-fab{opacity:0;pointer-events:none;transform:scale(.6)}
  #m3-fab-layer [data-m3-fab-list]{left:auto!important;top:auto!important;right:16px;bottom:calc(156px + env(safe-area-inset-bottom));align-items:flex-end!important;flex-direction:column-reverse!important}
  #m3-fab-layer [data-m3-act^="fab:"]{animation-name:m3fabUp!important;transform-origin:right bottom!important}
  .m3-grow-m{flex:1 1 100%!important;max-width:none!important}
  .m3-half-m{flex:1 1 0!important;justify-content:center;padding:0 12px!important;min-width:0}
  .m3-tabrow{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;min-width:0;max-width:calc(100% + 24px);margin:0 -12px;padding:0 36px 0 12px;box-sizing:border-box;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .m3-tabrow::-webkit-scrollbar{display:none}
  .m3-tabrow>*{flex:none!important;white-space:nowrap}
  .m3-savebar{justify-content:flex-start!important}
  #m3-toast{bottom:calc(88px + env(safe-area-inset-bottom))!important;min-width:0!important;width:calc(100% - 24px);max-width:560px}
  html[data-m3-route="console"] #m3-toast{bottom:calc(150px + env(safe-area-inset-bottom))!important}
}
@keyframes m3fabUp{0%{opacity:0;transform:translateY(20px) scale(.6)}100%{opacity:1;transform:none}}

/* ---------- M3 plain tooltip (replaces the browser's native title bubbles) ---------- */
#m3-tip{position:fixed;left:0;top:0;z-index:10000;max-width:min(320px,calc(100vw - 16px));padding:6px 10px;border-radius:6px;background:var(--inv);color:var(--oninv);font:500 12px/16px 'Roboto Flex',system-ui,sans-serif;letter-spacing:.2px;pointer-events:none;white-space:pre-line;overflow-wrap:anywhere;box-shadow:0 2px 8px rgba(0,0,0,.2);opacity:0;transform:scale(.85);transform-origin:var(--tip-o,center top);transition:opacity .15s var(--std),transform .2s var(--std)}
#m3-tip.is-on{opacity:1;transform:none}

/* ---------- reusable pieces ---------- */
.m3-shape{position:relative;flex:none}
.m3-shape>svg{position:absolute;inset:0}
.m3-shape>.m3-shape-c{position:absolute;inset:0;display:grid;place-items:center}
.m3-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.m3-switch{position:relative;width:52px;height:32px;border-radius:16px;border:2px solid var(--ol);background:var(--schh);flex:none;cursor:pointer;padding:0;transition:background var(--dur-s) var(--std),border-color var(--dur-s) var(--std);box-sizing:border-box;overflow:visible}
/* 48px touch target around the 52x32 track (the button itself keeps overflow:visible for this) */
.m3-switch::after{content:"";position:absolute;inset:-8px -2px}
.m3-switch>span{position:absolute;top:50%;left:2px;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ol);transform:scale(.6667);transition:transform var(--dur-m) var(--spring-fast),background-color var(--dur-s) var(--std)}
.m3-switch.is-on{border-color:var(--p);background:var(--p)}
/* M3 filter chip: <label class="m3-fchip"><input type="checkbox" hidden><span class="material-symbols-rounded m3-fchip-check">check</span>Label</label> */
.m3-fchip{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--olv);color:var(--onv);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;box-sizing:border-box;transition:background var(--dur-s) var(--std),border-radius .3s var(--std),color var(--dur-s) var(--std)}
.m3-fchip:hover{background:var(--sch)}
.m3-fchip .m3-fchip-check{display:none;font-size:18px;margin-left:-4px}
.m3-fchip:has(input:checked){background:var(--sc2);color:var(--osc2);border-color:transparent;border-radius:16px}
.m3-fchip:has(input:checked) .m3-fchip-check{display:inline}
.m3-fchip:has(input:disabled){opacity:.6;cursor:default}
.m3-fchip:has(input:focus-visible){outline:3px solid var(--p);outline-offset:2px}
.m3-fchip input:is([hidden],[type=checkbox],[type=radio]){position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;display:inline-block!important}
.m3-fchip{position:relative}
.m3-switch.is-on>span{transform:translateX(20px);background:var(--op)}
.m3-switch:disabled{opacity:.38;cursor:default}
form.m3-inline{display:contents}
[hidden]{display:none!important}
.m3-field:focus-within>span{color:var(--p)!important}

/* ---------- select popover (outlined field + menu like the design's overflow menus) ---------- */
.dash-select{position:relative;width:100%;min-width:0}
.dash-select-button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--ol)!important;border-radius:12px!important;background:transparent!important;color:var(--on)!important;padding:0 10px 0 16px!important;text-align:left;font-size:15px;line-height:20px;box-shadow:none!important;cursor:pointer;transition:border-color .2s,background .2s}
.dash-select-button:hover{background:var(--scl)!important}
.dash-select-button:focus-visible,.dash-select[data-open="true"] .dash-select-button{outline:none;border:2px solid var(--p)!important;padding:0 9px 0 15px!important}
.dash-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-select.is-pill{width:auto;flex:none}
.dash-select.is-pill .dash-select-button{min-height:0;height:var(--pill-h,48px);border-radius:calc(var(--pill-h,48px) / 2)!important;border-color:var(--olv)!important;font-size:14px;font-weight:600;padding:0 8px 0 16px!important;gap:6px}
.dash-select.is-pill.is-filled .dash-select-button{background:var(--bg)!important;border-color:transparent!important;font-size:15px}
.dash-select.is-pill .dash-select-button:focus-visible,.dash-select.is-pill[data-open="true"] .dash-select-button{padding:0 7px 0 15px!important}
.dash-select-chevron{flex:none;color:var(--onv);transition:transform .3s var(--std)}
.dash-select[data-open="true"] .dash-select-chevron{transform:rotate(180deg)}
.dash-select-menu{position:fixed;left:0;top:0;z-index:9998;min-width:12rem;max-width:calc(100vw - 24px);max-height:280px;overflow-y:auto;border:0;border-radius:20px;background:var(--schh);box-shadow:0 10px 28px rgba(0,0,0,.3);padding:6px;opacity:0;transform:translateY(-8px) scaleY(.9);transform-origin:top center;pointer-events:none;transition:opacity .2s var(--std),transform .3s var(--std);box-sizing:border-box}
.dash-select-menu[data-placement="top"]{transform-origin:bottom center;transform:translateY(8px) scaleY(.9)}
.dash-select-menu[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.dash-select-option{width:100%;min-height:44px;display:flex;align-items:center;gap:12px;border:0;border-radius:14px;background:transparent;color:var(--on);padding:0 14px;text-align:left;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}
.dash-select-option:hover,.dash-select-option[data-active="true"]{background:var(--sch)}
.dash-select-option[aria-selected="true"]{background:var(--sc2);color:var(--osc2);font-weight:600}
.dash-select-option:disabled{opacity:.38;cursor:default}
.dash-select.is-disabled{opacity:.38;pointer-events:none}
select.dash-select-native{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;min-width:1px!important;height:1px!important;padding:0!important;border:0!important}
select.m3-select-sm{height:28px;border-radius:8px;border:1px solid var(--olv);background:var(--bg);color:var(--on);font:inherit;font-size:12px;padding:0 6px;color-scheme:inherit}
.m3-mono{font-family:'JetBrains Mono',monospace}
.m3-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- legacy page compatibility: maps the old utility palette onto M3 roles (both themes) ---------- */
#dash-content{--tw-ring-color:transparent}
#dash-content :is(.font-display,.font-body){font-family:'Roboto Flex',system-ui,sans-serif}
#dash-content :is(.backdrop-blur-xl,.backdrop-blur,.backdrop-blur-sm){-webkit-backdrop-filter:none;backdrop-filter:none}
#dash-content :is(.shadow-2xl,.shadow-xl,.shadow-lg,.shadow-glow-primary,.hover\:shadow-glow-primary:hover,.shadow-inner){box-shadow:none}
#dash-content :is(.text-white,.text-slate-100,.text-slate-200,.text-gray-300,.hover\:text-white:hover,.hover\:text-slate-200:hover){color:var(--on)}
#dash-content :is(.text-slate-300,.text-slate-400){color:var(--onv)}
#dash-content :is(.text-slate-500,.text-slate-600){color:var(--ol)}
#dash-content :is(.text-black,.text-slate-950,.text-background-dark,.hover\:text-black:hover){color:var(--op)}
#dash-content :is(.text-primary,.text-primary\/80,.text-cyan-100,.text-cyan-200,.text-cyan-300,.text-cyan-400,.text-cyan-500,.text-sky-100\/80,.text-sky-200,.text-sky-300,.text-sky-400,.text-blue-200,.text-blue-400,.text-blue-600,.hover\:text-primary:hover,.hover\:text-cyan-300:hover,.hover\:text-cyan-200:hover,.hover\:text-cyan-400:hover,.group:hover .group-hover\:text-cyan-200){color:var(--p)}
#dash-content :is(.text-emerald-100,.text-emerald-200,.text-emerald-300,.text-emerald-400,.text-emerald-500,.text-green-400,.text-green-500,.text-teal-300,.text-teal-400,.hover\:text-emerald-400:hover){color:var(--ok)}
#dash-content :is(.text-rose-100,.text-rose-200,.text-rose-200\/80,.text-rose-300,.text-rose-400,.text-red-300,.text-red-400,.hover\:text-rose-400:hover,.hover\:text-rose-300:hover,.hover\:text-rose-200:hover){color:var(--e)}
#dash-content :is(.text-amber-100\/80,.text-amber-200,.text-amber-300,.text-amber-300\/80,.text-amber-300\/90,.text-amber-400,.text-amber-400\/80,.hover\:text-amber-400:hover,.hover\:text-amber-200:hover){color:var(--warn)}
#dash-content :is(.text-purple-300,.text-purple-400,.text-violet-300,.text-indigo-300,.hover\:text-purple-400:hover){color:var(--t)}
#dash-content :is(.bg-glass-surface,.bg-slate-900,.bg-slate-900\/70,.bg-slate-900\/80,.bg-slate-900\/90,.bg-slate-900\/95,.bg-gray-900,.bg-gray-800,.bg-slate-800,.bg-slate-800\/60,.bg-slate-950,.bg-deep-space){background:var(--scl);background-image:none}
#dash-content :is(.bg-glass-surface,.bg-slate-900,.bg-gray-900,.bg-gray-800,.bg-slate-800) :is(.bg-glass-surface,.bg-slate-900,.bg-slate-900\/70,.bg-slate-800,.bg-slate-800\/60,.bg-gray-800){background:var(--bg)}
#dash-content :is(.bg-black\/20,.bg-black\/30,.bg-black\/40,.bg-black\/50,.bg-slate-950\/25,.bg-slate-950\/30,.bg-slate-950\/35,.bg-slate-950\/40,.bg-slate-950\/50,.bg-slate-950\/60,.bg-slate-950\/70,.bg-white\/5,.bg-white\/\[0\.005\],.bg-white\/\[0\.025\],.bg-\[\#000000\]\/40,.bg-\[\#000000\]\/60){background:var(--bg)}
#dash-content :is(.bg-white\/10,.bg-slate-600,.bg-slate-600\/40,.bg-slate-600\/50,.bg-slate-700,.bg-slate-700\/40,.bg-slate-700\/50,.hover\:bg-white\/5:hover,.hover\:bg-white\/10:hover){background:var(--sch)}
#dash-content :is(.bg-primary,.bg-cyan-500,.hover\:bg-primary:hover,.hover\:bg-cyan-500:hover,.hover\:bg-white:hover){background:var(--p);color:var(--op)}
#dash-content :is(.bg-primary\/10,.bg-primary\/15,.bg-primary\/20,.bg-cyan-500\/10,.bg-cyan-500\/15,.bg-sky-500\/10,.bg-sky-500\/20,.bg-blue-500\/20,.hover\:bg-sky-500\/30:hover){background:var(--pc)}
#dash-content :is(.bg-emerald-500\/5,.bg-emerald-500\/10,.bg-emerald-500\/15,.bg-emerald-500\/20,.bg-green-900\/30,.hover\:bg-emerald-500\/30:hover){background:var(--okc)}
#dash-content :is(.bg-emerald-500,.hover\:bg-emerald-400:hover,.hover\:bg-emerald-600:hover){background:var(--ok);color:var(--okc)}
#dash-content :is(.bg-rose-500\/10,.bg-rose-500\/15,.bg-rose-500\/20,.hover\:bg-rose-500\/10:hover,.hover\:bg-rose-500\/30:hover){background:var(--ec)}
#dash-content :is(.bg-rose-500,.bg-rose-600,.bg-red-500){background:var(--e);color:var(--oe)}
#dash-content :is(.bg-amber-400\/5,.bg-amber-400\/10,.bg-amber-500\/5,.bg-amber-500\/10,.bg-amber-500\/15,.bg-amber-500\/20,.hover\:bg-amber-500\/30:hover){background:var(--warnc)}
#dash-content :is(.bg-amber-300,.bg-amber-500,.hover\:bg-amber-500:hover){background:var(--warn);color:var(--warnc)}
#dash-content :is(.bg-purple-500\/20,.hover\:bg-purple-500\/30:hover){background:var(--tc)}
#dash-content :is(.bg-purple-500,.hover\:bg-purple-600:hover){background:var(--t);color:var(--tc)}
#dash-content .bg-black\/70{background:rgba(0,0,0,.45)}
#dash-content .bg-gradient-to-br{background-image:none;background:var(--sch)}
#dash-content :is(.bg-emerald-500\/10,.bg-emerald-500\/15,.bg-emerald-500\/20) :is(.text-emerald-300,.text-emerald-400,.text-emerald-200){color:var(--onokc)}
#dash-content :is(.bg-rose-500\/10,.bg-rose-500\/15,.bg-rose-500\/20) :is(.text-rose-200,.text-rose-300,.text-rose-400){color:var(--oec)}
#dash-content :is(.bg-amber-500\/10,.bg-amber-500\/15,.bg-amber-500\/20,.bg-amber-400\/10) :is(.text-amber-200,.text-amber-300,.text-amber-400){color:var(--onwarnc)}
#dash-content :is(.bg-primary\/10,.bg-primary\/20,.bg-cyan-500\/10,.bg-sky-500\/10,.bg-sky-500\/20) :is(.text-primary,.text-cyan-200,.text-cyan-300,.text-sky-200,.text-sky-300,.text-sky-400){color:var(--opc)}
#dash-content :is(.border-glass-border,.border-white\/5,.border-white\/10,.border-slate-600,.border-slate-600\/50,.border-slate-600\/60,.border-slate-700,.border-slate-700\/50,.border-slate-700\/70,.border-slate-800,.hover\:border-white\/20:hover,.hover\:border-slate-500:hover){border-color:var(--olv)}
#dash-content :is(.border-primary\/20,.border-primary\/25,.border-primary\/30,.border-primary\/40,.border-cyan-500\/20,.border-cyan-500\/25,.border-cyan-500\/30,.border-cyan-500\/40,.border-sky-500\/20,.border-sky-500\/30,.border-blue-500\/40,.border-emerald-500\/20,.border-emerald-500\/25,.border-emerald-500\/30,.border-emerald-500\/40,.border-rose-500\/20,.border-rose-500\/25,.border-rose-500\/30,.border-rose-500\/40,.border-amber-400\/30,.border-amber-500\/25,.border-amber-500\/30){border-color:transparent}
#dash-content :is(.focus\:border-primary,.focus\:border-cyan-400,.focus\:border-purple-400):focus,#dash-content :is(.hover\:border-primary,.hover\:border-cyan-500\/40):hover{border-color:var(--p)}
#dash-content :is(.placeholder-slate-500,.placeholder-gray-400)::placeholder{color:var(--onv)}
#dash-content .rounded-3xl{border-radius:32px}
#dash-content .rounded-2xl{border-radius:24px}
#dash-content .rounded-xl{border-radius:16px}
#dash-content .rounded-lg{border-radius:12px}
#dash-content :is(.accent-cyan-400,.accent-emerald-400){accent-color:var(--p)}
:where(#dash-content) :is(input[type=text],input[type=password],input[type=number],input[type=email],input[type=search],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input:not([type]),select,textarea):not([style]){background:transparent;border:1px solid var(--ol);border-radius:12px;color:var(--on);font-family:inherit;font-size:15px;min-height:44px;padding:8px 14px;box-shadow:none;outline:none;box-sizing:border-box}
:where(#dash-content) textarea:not([style]){line-height:22px}
:where(#dash-content) :is(input,select,textarea):not([style]):focus{border-color:var(--p);box-shadow:inset 0 0 0 1px var(--p)}
#dash-content :is(input[type=checkbox],input[type=radio]):not([style]):not([hidden]),input.m3-check{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;border:2px solid var(--onv);border-radius:2px;background:transparent none;display:inline-grid;place-content:center;cursor:pointer;box-shadow:none;outline:none;vertical-align:middle;transition:background .15s,border-color .15s;box-sizing:border-box}
#dash-content input[type=radio]:not([style]):not([hidden]){border-radius:50%}
#dash-content :is(input[type=checkbox],input[type=radio]):not([style]):not([hidden]):checked,input.m3-check:checked{background:var(--p) none;border-color:var(--p)}
#dash-content input[type=checkbox]:not([style]):not([hidden]):checked::after,input.m3-check:checked::after{content:"";width:10px;height:5px;border-left:2px solid var(--op);border-bottom:2px solid var(--op);transform:translateY(-1px) rotate(-45deg)}
#dash-content input[type=radio]:not([style]):not([hidden]):checked,input.m3-check.m3-radio:checked{background:radial-gradient(circle,var(--p) 0 4px,transparent 4.5px)}
input.m3-radio{border-radius:50%}
input.m3-check.m3-radio:checked::after{content:none}
#dash-content :is(input[type=checkbox],input[type=radio]):not([style]):not([hidden]):focus-visible,input.m3-check:focus-visible{box-shadow:0 0 0 6px color-mix(in srgb,var(--p) 22%,transparent)}
#dash-content :is(input[type=checkbox],input[type=radio]):not([style]):not([hidden]):disabled{opacity:.38;cursor:default}
:where(#dash-content) table{border-collapse:separate;border-spacing:0}
:where(#dash-content) thead :is(tr,th){background:transparent;color:var(--onv);font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
:where(#dash-content) tbody tr{transition:background .15s}
:where(#dash-content) tbody tr:hover{background:var(--sch)}

/* utilities kept from the retired Tailwind bundle */
.hidden{display:none!important}.flex{display:flex}.text-\[20px\]{font-size:20px}.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}

/* Upload drop zones: the (visually hidden) file input stays keyboard-focusable, so the zone shows the focus ring. */
#nd-up-drop:focus-within,#nd-bl-drop:focus-within{outline:3px solid var(--p);outline-offset:2px}
/* Stop is the most destructive action on the updates page: use the error colour instead of the primary one. */
[data-nd-system="stop"]{color:var(--e)!important}

/* language menu rows (built by dash-i18n.js): hover/pressed from CSS, not from mouse listeners */
.m3-langmenu button:not([aria-checked="true"]):hover{background:var(--schh)!important}
.m3-langmenu button:not([aria-checked="true"]):active{background:var(--sch)!important}
m3-chart:focus-visible,m3-multichart:focus-visible{outline:3px solid var(--p);outline-offset:2px;border-radius:12px}
m3-chart,m3-multichart{-webkit-tap-highlight-color:transparent}
/* phones: the floating quick-action button steps aside while a field is being edited (it used to cover inputs) */
@media (max-width:760px){
  html:has(#dash-content :is(input:not([type=checkbox],[type=radio],[type=file],[type=range]),textarea,select):focus) #m3-mobile-fab{opacity:0;pointer-events:none;transform:scale(.6)}
}
/* Reduced motion: the CSS half of what dash-m3.js RM() already does for scripted animation. Also stops the
   endless decorative spinners (iteration count 1 + ~0 duration) and the dialog pop-in. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .m3-skel{animation:none}
}

/* ---------- focus: every interactive thing shows the same 3px ring (keyboard only) ---------- */
a:focus-visible,summary:focus-visible,select:focus-visible,[role=button]:focus-visible,[role=tab]:focus-visible,[role=link]:focus-visible,[role=menuitem]:focus-visible,[role=option]:focus-visible,[data-m3-go]:focus-visible,#dash-content:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible{outline:3px solid var(--p);outline-offset:2px}
#dash-content:focus-visible{outline-offset:-3px}
/* Fields whose own outline is switched off inline (console command line, search boxes ...) light up their wrapper instead. */
label:not(.m3-field):has(:is(input,textarea)[style*="outline:none"]:focus-visible),label:not(.m3-field):has(:is(input,textarea)[style*="outline: none"]:focus-visible),form:has(>:is(input,textarea)[style*="outline:none"]:focus-visible){outline:3px solid var(--p);outline-offset:2px}
input[type=file].m3-sr:focus-visible+*,label:has(input[type=file]:focus-visible){outline:3px solid var(--p);outline-offset:2px}

/* ---------- skip link, skeletons, shared animation helpers ---------- */
.m3-skip{position:fixed;left:12px;top:-64px;z-index:100000;padding:12px 20px;border-radius:16px;background:var(--p);color:var(--op);font:600 14px/20px 'Roboto Flex',system-ui,sans-serif;text-decoration:none;transition:top var(--dur-s) var(--std)}
.m3-skip:focus{top:12px;color:var(--op)}
@keyframes m3skel{from{opacity:.45}to{opacity:1}}
.m3-skel{display:block;background:var(--sch);border-radius:16px;min-height:16px;animation:m3skel 1.2s ease-in-out infinite alternate}
.m3-skel-text{height:14px;border-radius:7px;margin:6px 0}
@keyframes m3rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes m3dot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.m3-rise{animation:m3rise .25s var(--std) both}
/* dash-m3.js adds .m3-hidden instead of touching style.display, so the original (flex/grid) display survives */
.m3-hidden{display:none!important}
/* Visually hidden but still keyboard focusable (replaces [hidden] on file inputs and radio/checkbox chips) */
.m3-sr-focus{position:absolute!important;opacity:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;pointer-events:none}
/* Long unbroken words (names, hashes, URLs) wrap inside cards instead of pushing the layout */
.m3-wrap{overflow-wrap:anywhere;min-width:0}

/* ---------- touch: 48px targets. Visual size stays where a pseudo-element can carry the hit area ---------- */
@media (pointer:coarse),(max-width:760px){
  :where(#dash-content,#m3-header,#m3-drawer,#m3-nav,#m3-toast) :is(button:not(.m3-switch),.m3b,[role=button],summary,.dash-select-button){min-height:48px}
  :where(#dash-content,#m3-header,#m3-drawer,#m3-nav,#m3-toast) :is(button:not(.m3-switch),.m3b,[role=button]):has(>.material-symbols-rounded:only-child){min-width:48px}
  #m3-toast button{width:48px!important;height:48px!important}
  .m3-fchip::after{content:"";position:absolute;inset:-8px -2px}
  #dash-content :is(input[type=checkbox],input[type=radio]):not([style]):not([hidden]),input.m3-check{position:relative}
  #dash-content :is(input[type=checkbox],input[type=radio]):not([style]):not([hidden])::before,input.m3-check::before{content:"";position:absolute;inset:-15px}
  :where(#dash-content) :is(input[type=text],input[type=password],input[type=number],input[type=email],input[type=search],input[type=url],input[type=date],input[type=time],input[type=datetime-local],input:not([type]),select,textarea):not([style]){min-height:48px}
  select.m3-select-sm{height:48px}
}

/* ---------- Autopilot presence: count on the Intelligence entry (rail, drawer, phone bar) ---------- */
.m3-ap-badge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--e);color:var(--oe);font-size:11px;font-weight:700;line-height:16px;display:inline-grid;place-items:center;box-sizing:border-box;flex:none}
.m3-ind>.m3-ap-badge{position:absolute;top:-2px;right:-4px;box-shadow:0 0 0 2px var(--scn)}
.m3-bottom-item .m3-ind{position:relative}