/* DES-03. Shared Board components; loaded after the chassis palette.
   Orange = main action, cyan = navigation/focus. Health/chart colors stay data. */
:root{
 --board-radius:6px;--board-gap:12px;--board-motion:150ms;
 --board-mono:ui-monospace,SFMono-Regular,Consolas,monospace;
 --board-metal:linear-gradient(180deg,var(--panel2),var(--panel));
 --board-inset:inset 0 1px 3px #0002,inset 0 -1px 0 var(--cyber-highlight);
 --board-frame:inset 0 1px 0 var(--cyber-highlight),0 6px 20px #0002;
 --board-focus:var(--cyber-cyan);
 color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){color-scheme:light}}
body{line-height:1.45;-webkit-font-smoothing:antialiased}
*{scrollbar-width:thin;scrollbar-color:var(--cyber-control-line) var(--surface)}
::selection{background:var(--cyber-cyan);color:var(--surface)}
header .header-inner{min-height:66px}
header h1.board-brand{gap:7px;flex-shrink:0}
header .brand-logo{width:38px;height:50px;object-fit:contain}
header .board-wordmark{width:159px;height:40px}
header .board-family{font-size:10px;letter-spacing:2.6px}
.sect,.card,.modal,.chart-detail{box-shadow:var(--board-frame)}
.sect{border-radius:var(--board-radius);border-top-color:var(--cyber-control-line)}
.sect>h3:first-child{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--dim);font-size:12px;letter-spacing:1.2px}
.sect>h3:first-child::before{content:"";width:16px;height:2px;flex:none;background:var(--cyber-cyan);box-shadow:0 0 7px var(--cyber-soft)}
.fleet-tabs{padding:6px;gap:4px;border-radius:var(--board-radius)}
:root:is([data-theme],:not([data-theme])) .btn.tab{border-radius:4px;letter-spacing:.1px}
:root:is([data-theme],:not([data-theme])) .tab.on,
:root:is([data-theme],:not([data-theme])) .tab[aria-selected="true"]{
 color:var(--cyber-cyan);border-bottom-color:var(--cyber-cyan);box-shadow:inset 0 -2px 0 var(--cyber-cyan);
 background:linear-gradient(0deg,var(--cyber-soft),transparent);
}
:root:is([data-theme],:not([data-theme])) .btn.tag.on{
 background:var(--cyber-soft);border-color:var(--cyber-cyan);color:var(--fg);
}
/* One geometry for text fields, including forms that do not use askForm. */
:root:is([data-theme],:not([data-theme])) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea){
 box-sizing:border-box;max-width:100%;min-width:0;border:1px solid var(--cyber-control-line);
 border-radius:var(--board-radius);padding:8px 10px;font:inherit;line-height:1.35;
 background:var(--cyber-field);color:var(--fg);box-shadow:var(--board-inset);
 transition:border-color var(--board-motion) ease,box-shadow var(--board-motion) ease;
}
:root:is([data-theme],:not([data-theme])) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select){min-height:38px}
textarea{resize:vertical;min-height:90px}
select option{background:var(--panel);color:var(--fg)}
:root:is([data-theme],:not([data-theme])) :is(input,select,textarea):focus-visible{
 outline:2px solid var(--board-focus);outline-offset:2px;border-color:var(--board-focus);
}
:root:is([data-theme],:not([data-theme])) :is(input,select,textarea):disabled{
 background:var(--panel2);color:var(--dim);box-shadow:none;cursor:not-allowed;opacity:.65;
}
:root:is([data-theme],:not([data-theme])) :is(input,textarea)[readonly]{border-style:dashed;color:var(--dim);box-shadow:none}
:root:is([data-theme],:not([data-theme])) [aria-invalid="true"]{border-color:var(--bad)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;flex:none;vertical-align:middle}
input[type=range]{min-height:24px}
.modal-lab{font-size:13px;font-weight:600;letter-spacing:.2px;color:var(--fg);margin-bottom:6px}
.modal-hint,.modal-note{font-size:12px;line-height:1.5;color:var(--dim)}
.modal-row{margin-bottom:16px}
.modal-check{padding:7px;border-radius:4px}
.modal-checks{background:var(--cyber-field);border-color:var(--line)}
fieldset{min-width:0;border:1px solid var(--line);border-radius:var(--board-radius);padding:12px}
legend{color:var(--dim);font-size:13px;padding-inline:6px}
/* Headers/footers remain in flex flow so scrolling never hides form actions. */
.modal{border-radius:8px;border-color:var(--cyber-control-line);overflow:hidden}
.modal-t{padding:16px 20px;border-top:2px solid var(--cyber-cyan);font-size:17px;flex-shrink:0}
.modal-b{padding:18px 20px;overscroll-behavior:contain}
.modal-f{padding:14px 20px;flex-wrap:wrap;flex-shrink:0;gap:10px}
.modal-intro{font-size:14px;line-height:1.55;padding-bottom:12px;border-bottom:1px solid var(--line)}
.modal.danger .modal-t{border-top-color:var(--bad)}
.modal-err{border-left:3px solid var(--bad);background:var(--panel2);line-height:1.5;overflow-wrap:anywhere}
:root:is([data-theme],:not([data-theme])) .btn.primary{
 color:#fff;border-color:#d2773e;background:linear-gradient(160deg,#b84d19,#943408 52%,#732807);
 box-shadow:inset 0 1px 0 #ffbe864d,0 3px 0 #491b0c,0 5px 14px #e76c2424;
}
:root:is([data-theme],:not([data-theme])) .btn.danger{
 color:var(--bad);background:linear-gradient(160deg,color-mix(in srgb,var(--bad) 12%,var(--panel2)),var(--panel));border-color:var(--bad);
}
:root:is([data-theme],:not([data-theme])) .btn.primary:not(:disabled):active{box-shadow:inset 0 2px 4px #0004,0 1px 0 var(--control-edge)}
:root:is([data-theme],:not([data-theme])) .btn:disabled,
:root:is([data-theme],:not([data-theme])) .btn[aria-disabled="true"]{box-shadow:none;transform:none;cursor:not-allowed}
.btn,.back{white-space:normal}
.btn:focus-visible,.back:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--board-focus);outline-offset:3px}
/* Quiet table rhythm; preserve the GPU identity and existing responsive scroll. */
.scroll-x{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.modal.modal-compact .modal-lab{font-size:13px;color:var(--fg)}
.modal-step-btn{border-color:var(--cyber-control-line);color:var(--fg);border-radius:4px}
th{color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.7px}
td,th{border-bottom-color:var(--line)}
.sect table:not(.gpu-overview) td{padding-block:10px}
.sect table tbody tr:nth-child(even){background:var(--cyber-row)}
.sect table tbody tr:hover{background:var(--cyber-hover)}
code,pre,.mono{font-family:var(--board-mono);font-variant-numeric:tabular-nums}
pre{padding:12px;border:1px solid var(--line);border-radius:var(--board-radius);background:var(--log-bg);max-width:100%;overflow:auto}
.flight-block,.ai-flight-planner,.native-package{border-color:var(--line);background:var(--cyber-field);border-radius:var(--board-radius)}
.flight-block{border-left:2px solid var(--cyber-cyan);padding:14px}
.native-package{padding:12px;margin-block:8px;border:1px solid var(--line)}
.saved-sheet-main{transition:border-color var(--board-motion) ease}
.saved-sheet-main[open]{border-color:var(--cyber-control-line)}
.saved-sheet-config{font-family:var(--board-mono);font-size:12px;line-height:1.65}
.empty{padding:28px 16px;border:1px dashed var(--line);border-radius:var(--board-radius);background:var(--cyber-soft);margin-block:12px;font-size:14px}
.toast{background:var(--panel);border-color:var(--cyber-control-line);border-left:3px solid var(--cyber-cyan);border-radius:var(--board-radius);box-shadow:var(--depth);color:var(--fg)}
.toast.err,.toast.error{border-left-color:var(--bad)}
.login-card{padding:20px;max-width:440px;border:1px solid var(--line);border-top:2px solid var(--cyber-cyan);border-radius:8px;background:linear-gradient(140deg,var(--cyber-soft),transparent 65%),var(--panel);box-shadow:var(--depth)}
.login-card h2{font-size:18px;margin-block:12px 20px}
.login-card .login-brand{margin-inline:auto}
.login-card input{margin-bottom:10px}
.login-card #lg-go{min-height:42px}
.chart-detail{border-color:var(--cyber-control-line)}
.chart-detail-head{border-bottom:1px solid var(--line);padding-bottom:12px}
@media(max-width:640px){
 header .header-inner{min-height:56px}
 header .brand-logo{width:31px;height:40px}header .board-wordmark{width:127px;height:32px}
 header .board-family{font-size:9px;letter-spacing:1.8px}
 .modal-back{padding:8px}.modal{max-height:94dvh}.modal-t{padding:14px}.modal-b{padding:14px}.modal-f{padding:12px 14px}
 .modal-f .btn{min-height:44px}.modal-f .modal-note{flex-basis:100%;margin:0}
 .flight-block{padding:10px}.login-card{padding:16px;max-width:calc(100% - 24px)}
}
@media(pointer:coarse){
 .btn,.back,select,.modal-check,summary{min-height:44px}
 input:not([type=checkbox]):not([type=radio]):not([type=range]){min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important}
 .saved-sheet-main,input,textarea,select{transition:none!important}
}
@media(forced-colors:active){
 :root{--board-focus:Highlight;--board-frame:none;--board-inset:none}
 .sect>h3:first-child::before{background:CanvasText;box-shadow:none}
 .login-card,.empty,.native-package,.flight-block{background:Canvas;border-color:CanvasText;box-shadow:none}
 :root:is([data-theme],:not([data-theme])) .btn.primary,:root:is([data-theme],:not([data-theme])) .btn.danger{background:ButtonFace;color:ButtonText;border-color:ButtonText;box-shadow:none}
}

/* PAR-08C: compact inventory first, physical devices on demand. */
.sect.gpu-fleet{max-width:1100px;width:100%;box-sizing:border-box}
.gpu-fleet-heading,.gpu-fleet-model{max-width:560px}
.gpu-fleet-model[open]{max-width:none}
.gpu-fleet-filters{display:grid;grid-template-columns:minmax(180px,2fr) minmax(140px,1fr) minmax(150px,1fr) auto;gap:12px;align-items:end;margin-block:18px}
.gpu-fleet-filters label{display:grid;gap:6px;min-width:0;font-size:13px;color:var(--dim)}
.gpu-fleet-filters .btn{min-height:38px}
.gpu-fleet-heading,.gpu-fleet-model>summary{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;align-items:center}
.gpu-fleet-heading{font-size:11px;letter-spacing:.6px;color:var(--dim);padding:8px 14px}
.gpu-fleet-heading>:last-child,.gpu-fleet-model>summary>b{text-align:right}
.gpu-fleet-model{border:1px solid var(--line);border-radius:6px;margin-bottom:6px;background:var(--panel)}
.gpu-fleet-model>summary{cursor:pointer;list-style:none;min-height:44px;padding:8px 14px;box-sizing:border-box;font-weight:600}
.gpu-fleet-model>summary::-webkit-details-marker{display:none}
.gpu-fleet-model>summary>span{overflow-wrap:anywhere}
.gpu-fleet-model>summary>span::before{content:'›';display:inline-block;margin-right:9px;color:var(--cyber-cyan)}
.gpu-fleet-model[open]>summary{border-bottom:1px solid var(--line);background:var(--cyber-soft)}
.gpu-fleet-model[open]>summary{max-width:560px}
.gpu-fleet-model[open]>summary>span::before{content:'⌄'}
.gpu-fleet-model>summary>b{font-family:var(--board-mono);font-variant-numeric:tabular-nums}
.gpu-fleet-devices{min-width:760px;margin-top:0;font-size:13px}
.gpu-fleet-devices caption{text-align:left;font-size:12px;color:var(--dim);padding:10px 14px}
.gpu-fleet-devices :is(td,th){padding-inline:14px;vertical-align:top}
.gpu-fleet-devices td:first-child{max-width:260px;overflow-wrap:anywhere}
.gpu-fleet-devices a{color:var(--cyber-cyan);text-underline-offset:3px}
.gpu-fleet-devices td:not(:first-child){white-space:nowrap}
.gpu-fleet-devices small{display:block;font-size:11px}
.gpu-fleet-pagination{display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:12px;font-size:13px;color:var(--dim)}
.gpu-fleet-state{color:var(--dim)}.gpu-fleet-state.mining{color:var(--ok)}
.gpu-fleet-state.reserved{color:var(--accent)}
.gpu-overview .gpu-identity-slot{gap:0;font-size:14px;line-height:1.1}
.gpu-overview .gpu-identity-slot small{font-size:11px;line-height:1.1}
@media(max-width:700px){.gpu-fleet-filters{grid-template-columns:1fr 1fr}.gpu-fleet-filters label:first-child{grid-column:1/-1}.gpu-fleet-filters .btn{grid-column:1/-1;min-height:44px}}

.oc-profile-row{flex-wrap:wrap;gap:8px}.oc-profile-row>span:nth-child(2){min-width:180px;overflow-wrap:anywhere}.oc-profile-actions{display:flex;flex-wrap:wrap;gap:6px}

/* PAR-02B visual rule builder. Long previews scroll inside the dialog. */
.modal.oc-editor-dialog{width:min(1080px,calc(100vw - 24px));max-width:1080px}
.oc-editor-dialog .modal-b{overflow:auto;min-height:0}
.oc-editor-form{display:grid;gap:14px;min-width:0}
.oc-editor-notice{margin:0;color:var(--dim);font-size:13px}
.oc-editor-identity,.oc-editor-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.oc-editor-selectors{grid-template-columns:1fr 2fr 1fr}
.oc-editor-field{display:grid;gap:5px;min-width:0;font-size:12px;color:var(--dim);align-content:start}
.oc-editor-field input,.oc-editor-field select{width:100%;font-size:14px}
.oc-editor-field small{font-size:11px}
.oc-editor-base,.oc-editor-rule{margin:0;padding:12px;border:1px solid var(--line);border-radius:var(--board-radius);min-width:0;background:var(--panel)}
.oc-editor-base legend,.oc-editor-rule legend{color:var(--cyber-cyan);font-size:13px;padding:0 6px}
.oc-editor-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.oc-editor-base .sub{margin:9px 0 0;font-size:12px}
.oc-editor-rules{display:grid;gap:12px}
.oc-editor-rule .oc-editor-values{margin-top:12px}
.oc-editor-rule>.btn{margin-top:10px}
.oc-editor-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.oc-editor-toolbar h4{margin:0;margin-right:auto}.oc-editor-toolbar>span{color:var(--dim);font-size:12px}
.oc-editor-scroll{overflow-x:auto;max-width:100%}.oc-editor-preview{min-width:700px;width:100%;font-size:12px}
.oc-editor-preview :is(th,td){text-align:left;padding:8px;vertical-align:top}
.oc-editor-preview td{overflow-wrap:anywhere}.oc-editor-preview td:nth-child(3){min-width:215px}
.oc-editor-preview-area .oc-editor-toolbar{justify-content:flex-end;margin-top:10px}
.oc-editor-conflict{color:var(--warn,#ffb54a);font-weight:600}
.oc-editor-field[hidden]{display:none}
@media(max-width:760px){.oc-editor-values{grid-template-columns:repeat(2,minmax(0,1fr))}.oc-editor-selectors{grid-template-columns:1fr 1fr}.oc-editor-selectors>label:last-child{grid-column:1/-1}}
@media(max-width:480px){.oc-editor-identity,.oc-editor-selectors{grid-template-columns:1fr}.oc-editor-dialog .modal-f{flex-wrap:wrap}.oc-editor-dialog .modal-f .btn{flex:1 1 100%}}

/* PAR-03A GPU fan planning; case fan controls remain independent. */
.gpu-fan-summary{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gpu-fan-reasons{color:var(--dim);font-size:12px;line-height:1.55;padding-left:20px;margin:10px 0 14px}
.gpu-fan-scroll{max-width:100%;overflow-x:auto;margin:12px 0}
.gpu-fan-table{min-width:690px;width:100%;font-size:12px}
.gpu-fan-table :is(th,td){padding:8px;text-align:left;vertical-align:top}
.gpu-fan-table td{overflow-wrap:anywhere}.gpu-fan-table td:last-child{max-width:330px}
.modal.gpu-fan-dialog{width:min(1000px,calc(100vw - 24px));max-width:1000px}
.gpu-fan-dialog .modal-b{overflow:auto;min-height:0}
.gpu-fan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gpu-fan-field{display:grid;gap:6px;font-size:13px;color:var(--dim);min-width:0}
.gpu-fan-field input,.gpu-fan-field select{width:100%}
.gpu-fan-exclusions{min-width:0;border:1px solid var(--line);border-radius:var(--board-radius);margin:16px 0;padding:12px}
.gpu-fan-exclusions legend{color:var(--cyber-cyan);padding:0 6px;font-size:13px}
.gpu-fan-exclusions label{display:flex;gap:8px;align-items:start;overflow-wrap:anywhere;font-size:13px;padding:4px}
.gpu-fan-exclusions input{flex:none;margin-top:4px}
@media(max-width:600px){.gpu-fan-grid{grid-template-columns:1fr}.gpu-fan-dialog .modal-f{flex-wrap:wrap}.gpu-fan-dialog .modal-f .btn{flex:1 1 100%}}

.gpu-fan-projects{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}
.gpu-fan-projects h4{margin:0 0 10px;color:var(--cyber-cyan)}
.gpu-fan-project-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.gpu-fan-project-row>span{flex:1;min-width:180px;overflow-wrap:anywhere}
.gpu-fan-dialog>.modal-b>.gpu-fan-field{margin:12px 0}
.gpu-fan-dialog .modal-f{flex-wrap:wrap}

.farmcontext{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.farmcontext select{max-width:200px}.farmcontext button{font:inherit;padding:3px 7px}
.account-field{display:flex;flex-direction:column;gap:5px;margin:12px 0;font-size:.9rem}.account-field input{box-sizing:border-box;width:100%;min-height:38px;padding:8px 10px;color:var(--fg);background:var(--panel2);border:1px solid var(--cyber-control-line,var(--line));border-radius:6px}.account-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;font-size:.85rem}#account-message{line-height:1.45;overflow-wrap:anywhere}