/* Dialog system: a quiet frame, a clear task, one scroll surface per panel. */
body>dialog:not(:where(#arcade-studio)) {font: var(--fs-lg)/1.5 var(--font-ui);color: var(--n-900);background: var(--n-25);border: 1px solid var(--n-200);border-radius: var(--r-md);box-shadow: var(--sh-3);max-height: calc(100dvh - 40px);scrollbar-width: thin;scrollbar-color: var(--n-400) transparent}
body>dialog::backdrop{background: color-mix(in srgb, var(--n-950) 82%, transparent);backdrop-filter: blur(9px)}
body>dialog:not(:where(#arcade-studio)) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){font: inherit;min-height: 44px;height: auto;background: var(--n-0);border: 1px solid var(--n-300);border-radius: var(--r-md);color: var(--n-900);padding: 10px 12px;box-shadow: none;max-width: 100%}
body>dialog:not(:where(#arcade-studio)) input:focus-visible,body>dialog:not(:where(#arcade-studio)) select:focus-visible{outline: 3px solid color-mix(in srgb, var(--accent-500) 20%, transparent);outline-offset: 1px;border-color: var(--accent-600)}
body>dialog:not(:where(#arcade-studio)) button{height: auto;min-height: 40px;font-family: inherit;font-size: var(--fs-md);line-height: 1.4;font-weight: 600;white-space: normal;padding: 9px 14px;border-radius: var(--r-md)}
body>dialog .dialog-heading{border-bottom: 1px solid var(--n-200);padding-bottom: 20px;margin-bottom: 22px;gap: 20px}
body>dialog .dialog-heading h2{font-size: var(--fs-4xl);line-height: 1.2;letter-spacing: -.8px;color: var(--n-900)}
body>dialog .dialog-heading button{width: 40px;flex: 0 0 40px;background: var(--n-100);border: 0;font-size: var(--fs-4xl)}
body>dialog .dialog-actions{gap: 10px;border-top: 1px solid var(--n-200);padding-top: 18px;margin-top: 24px}
body>dialog .dialog-actions .primary{background: var(--n-850);color: var(--n-0);border-color: var(--n-850)}
body>dialog p{line-height: 1.6}
#properties-dialog{width: min(720px,calc(100vw - 40px));padding: 0;overflow: hidden}
#properties-dialog[open]{display: flex;flex-direction: column}
#properties-dialog>.dialog-heading{flex: 0 0 auto;padding: 22px 26px;margin: 0;background: var(--n-100)}
#properties-dialog>.dialog-heading h2{font-size: var(--fs-2xl);letter-spacing: -.5px}
#properties-dialog #properties-host{padding: 24px 26px;overflow: auto;min-height: 0;overscroll-behavior: contain}
#properties-dialog .component-description{color: var(--n-600);font-size: var(--fs-lg)}
#properties-dialog #element-form>label{display: block;margin: 6px 0;font-size: var(--fs-sm);font-weight: 600}
#properties-dialog #element-form>label>input,#properties-dialog #element-form>label>select{display: block;width: 100%;margin-top: 7px}
#properties-dialog .component-preview{width: 58px;height: 58px;padding: 9px;background: var(--n-150);border-color: var(--n-300);border-radius: var(--r-md)}
#properties-dialog .pin-assignment{display: none}
#properties-dialog .signal-card .quick-input-group:only-child{grid-column: 1/-1}
#properties-dialog .signal-card .variable-quick-bar:empty{display: none}
#properties-dialog .signal-card .variable-quick-bar{margin: 10px 0 0}
#properties-dialog .signal-card .signal-pin-link{display: flex;justify-content: space-between;width: 100%;margin-top: 12px;background: transparent;border: 0;border-top: 1px solid var(--n-200);border-radius: 0;padding: 12px 0 0;font-size: var(--fs-xs);color: var(--n-700)}
#properties-dialog #element-mapping{display: none}
#properties-dialog .button-row{margin-top: 12px}
#properties-dialog #element-form>.primary{margin-top: 18px;min-height: 46px;background: var(--n-850);border-color: var(--n-850)}

#properties-dialog #inspector-content{padding: 0;overflow: visible;font-size: var(--fs-lg)}
#properties-dialog #inspector-content>h2{font-size: 30px;margin: 8px 0;letter-spacing: -1px}
#properties-dialog #inspector-content>p{font-size: var(--fs-lg);margin: 8px 0 22px;color: var(--n-600)}
#properties-dialog .appearance-options{background: var(--n-50);border: 1px solid var(--n-200);border-radius: var(--r-md);padding: 12px;margin-top: 22px}
#properties-dialog .appearance-options summary{font-size: var(--fs-md);font-weight: 600}
#properties-dialog :is(.property-grid,.signal-grid){gap: 14px}
#properties-dialog .signal-card{box-shadow: none !important;border-radius: var(--r-md) !important;padding: 16px !important;margin: 12px 0 !important}
#properties-dialog .signal-card-head{padding-bottom: 10px;border-bottom: 1px solid var(--n-150);margin-bottom: 6px}
#properties-dialog .signal-role-title{font-size: var(--fs-lg)}
#properties-dialog .variable-quick-bar{background: transparent;padding: 0;gap: 12px}
#properties-dialog .signal-card[data-signal-key="element-address"] .variable-quick-bar{display: none !important}
#properties-dialog .variable-trigger{min-height: 60px !important}
#mapping-dialog .board-layout{align-items: start}
#mapping-dialog .board-preview{margin-block: 16px}
#mapping-dialog .section-title{align-items: center;gap: 12px}
#mapping-dialog .section-title>strong{min-width: 100px;font-size: var(--fs-lg)}
#mapping-dialog .table-scroll{border: 1px solid var(--n-200);border-radius: var(--r-md)}
#mapping-dialog th{font-family: inherit;font-size: var(--fs-xs);line-height: 1.5;font-weight: 600;text-transform: uppercase;letter-spacing: .05em}
#mapping-dialog td{padding: 8px}
#mapping-dialog .board-info{background: var(--n-50);box-shadow: none}
#variable-picker.signal-picker[open]{padding: 0;width: min(920px,calc(100vw - 40px));max-width: 920px;height: min(740px,calc(100dvh - 40px));max-height: calc(100dvh - 40px);display: grid;grid-template-rows: auto minmax(0,1fr) auto;overflow: hidden}
#variable-picker.signal-picker:not([open]){display: none}
#variable-picker .sp-head{display: flex;align-items: center;gap: 16px;padding: 26px 30px;background: var(--n-0);border-bottom: 1px solid var(--n-200)}
#variable-picker .sp-emblem{background: var(--n-850);color: var(--n-200);width: 52px;height: 52px;flex: 0 0 52px;display: grid;place-items: center;border-radius: var(--r-md)}
#variable-picker .sp-emblem svg{width: 30px;height: 30px}
#variable-picker .sp-overline{font: 600 var(--fs-2xs)/1.4 var(--font-mono);letter-spacing: .15em;color: var(--n-600);margin: 0 0 6px}
#variable-picker h2{font-size: var(--fs-5xl);letter-spacing: -1px;line-height: 1.2;margin: 0;color: var(--n-900)}
#variable-picker .sp-subtitle{font-size: var(--fs-md);line-height: 1.4;color: var(--n-600);margin: 6px 0 0}
#variable-picker .sp-subtitle strong{color: var(--n-800)}
#variable-picker .sp-close{margin-left: auto;align-self: flex-start;flex: 0 0 40px;width: 40px;min-height: 40px;padding: 0;border: 1px solid var(--n-200);background: var(--n-50);font-size: var(--fs-4xl);font-weight: 400}
#variable-picker .sp-layout{min-height: 0;display: grid;grid-template-columns: 214px minmax(0,1fr)}
#variable-picker .sp-sidebar{padding: 24px 18px;background: var(--n-100);border-right: 1px solid var(--n-200);display: flex;flex-direction: column;gap: 12px;overflow: auto}
#variable-picker .sp-section-label{font: 600 var(--fs-2xs)/1.4 var(--font-mono);color: var(--n-600);text-transform: uppercase;letter-spacing: .08em}
#variable-picker .sp-filters{display: flex;flex-direction: column;gap: 5px}
#variable-picker .sp-filters button{min-height: 42px;padding: 11px 10px;display: flex;justify-content: space-between;gap: 8px;text-align: left;border: 0;background: transparent;color: var(--n-700);font-size: var(--fs-sm)}
#variable-picker .sp-filters button[aria-pressed=true]{background: var(--n-0);color: var(--n-900);box-shadow: var(--sh-1)}
#variable-picker .sp-filters code{font-size: var(--fs-xs);color: var(--n-600)}
#variable-picker .sp-board{margin-top: auto;border-top: 1px solid var(--n-200);padding-top: 20px}
#variable-picker .sp-board>strong{display: block;margin: 8px 0 12px;font-size: var(--fs-sm);line-height: 1.5}
#variable-picker .sp-board p{font-size: var(--fs-xs);color: var(--n-600);margin: 8px 0 16px}
#variable-picker .sp-capacity{display: flex;align-items: center;justify-content: space-between;gap: 8px;font-size: var(--fs-2xs);color: var(--n-600)}
#variable-picker .sp-capacity>span:first-child{font-size: var(--fs-3xl);font-weight: 650;color: var(--n-800)}
#variable-picker .sp-capacity small{font-size: var(--fs-2xs);font-weight: 400}
#variable-picker meter{width: 100%;height: 9px;display: block;margin: 8px 0;accent-color: var(--n-700)}
#variable-picker #variable-manage{width: 100%;background: transparent;border: 1px solid var(--n-300);font-size: var(--fs-xs);display: flex;justify-content: space-between}
#variable-picker .sp-main{display: flex;flex-direction: column;min-width: 0;min-height: 0;padding: 24px 24px 18px;background: var(--n-25)}
#variable-picker .sp-search{margin: 0;position: relative;display: block;flex: 0 0 auto}
#variable-picker .sp-search>svg{position: absolute;top: 14px;left: 14px;width: 20px;height: 20px;color: var(--n-600);pointer-events: none}
#variable-picker #variable-query{padding: 12px 14px 12px 43px;min-height: 48px;width: 100%;font-size: var(--fs-lg);border: 1px solid var(--n-300);background: var(--n-0)}
#variable-picker .sp-list-heading{display: flex;justify-content: space-between;margin: 22px 2px 10px;font-size: var(--fs-xs);line-height: 1.4;color: var(--n-600);flex: 0 0 auto}
#variable-picker .sp-choices{flex: 1 1 auto;min-height: 60px;overflow: auto;overscroll-behavior: contain;display: flex;flex-direction: column;gap: 8px;padding: 2px 4px 8px 2px;scrollbar-width: thin}
#variable-picker button.sp-option{flex: 0 0 auto;min-height: 76px;height: auto;width: 100%;display: grid;grid-template-columns: 78px minmax(0,1fr) 22px;gap: 14px;align-items: center;padding: 14px;background: var(--n-0);border: 1px solid var(--n-200);border-radius: var(--r-md);text-align: left;font-weight: 400}
#variable-picker button.sp-option:hover{background: var(--n-50);border-color: var(--n-400)}
#variable-picker button.sp-option[aria-pressed=true]{background: var(--n-100);border: 1px solid var(--n-600);box-shadow: inset 3px 0 var(--n-800)}
#variable-picker .sp-address{font: 600 var(--fs-md)/1.4 var(--font-mono);background: var(--n-50);border: 1px solid var(--n-200);color: var(--n-700);border-radius: var(--r-sm);padding: 9px 6px;text-align: center}
#variable-picker .sp-address[data-signal-kind=Q]{color: var(--n-800);background: var(--n-100);border-color: var(--n-200)}
#variable-picker .sp-address[data-signal-kind=T],#variable-picker .sp-address[data-signal-kind=C]{color: var(--warn-ink);background: var(--n-50);border-color: var(--n-200)}
#variable-picker .sp-option-copy{min-width: 0;display: grid;gap: 6px}
#variable-picker .sp-option-copy strong{font-size: var(--fs-md);font-weight: 650;color: var(--n-800);line-height: 1.4;overflow-wrap: anywhere;white-space: normal}
#variable-picker .sp-option-copy small{font-size: var(--fs-xs);color: var(--n-600);line-height: 1.4}
#variable-picker .sp-option-copy small span{margin: 0 4px}
#variable-picker .sp-selected{color: var(--n-600);font-size: var(--fs-2xl)}
#variable-picker .sp-option[aria-pressed=true] .sp-selected{color: var(--n-800)}
#variable-picker .sp-empty{text-align: center;padding: 30px 14px}
#variable-picker .sp-empty strong{font-size: var(--fs-lg)}
#variable-picker .sp-empty p{font-size: var(--fs-sm);color: var(--n-600)}
#variable-picker .sp-create{flex: 0 0 auto;border-top: 1px solid var(--n-200);margin-top: 12px;padding-top: 12px}
#variable-picker #variable-new{background: var(--n-100);border: 1px solid var(--n-200);width: 100%;display: flex;align-items: center;gap: 12px;text-align: left;padding: 12px;color: var(--n-800)}
#variable-picker #variable-new>span:nth-child(2){flex: 1;font-size: var(--fs-sm)}
#variable-picker #variable-new strong{font-weight: 400;display: block;font-size: var(--fs-2xs);margin-top: 3px;color: var(--n-600)}
#variable-picker .sp-plus{font-size: var(--fs-4xl);font-weight: 400}
#variable-picker #variable-create-form{padding-top: 12px;margin: 0}
#variable-picker .sp-create-fields{display: grid;grid-template-columns: minmax(0,1fr) 140px;gap: 12px}
#variable-picker .sp-create-fields label{font-size: var(--fs-xs);margin: 0;display: grid;gap: 5px}
#variable-picker .sp-create-fields input,#variable-picker .sp-create-fields select{width: 100%;font-size: var(--fs-sm)}
#variable-picker .sp-create-bottom{display: flex;justify-content: space-between;align-items: center;margin-top: 12px;gap: 8px;font-size: var(--fs-xs);color: var(--n-600)}
#variable-picker #variable-create-error:empty{display: none}
#variable-picker #variable-create-error{font-size: var(--fs-sm);color: var(--fault-ink);margin: 10px 0 0}
#variable-picker .sp-footer{display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 16px 26px;border-top: 1px solid var(--n-200);background: var(--n-0)}
#variable-picker .sp-footer>span{font-size: var(--fs-xs);color: var(--n-600);display: flex;align-items: center;gap: 7px}
#variable-picker .sp-footer i{width: 6px;height: 6px;border-radius: 50%;background: var(--accent-400);flex: 0 0 6px}
#variable-picker .sp-done{background: var(--n-0);border: 1px solid var(--n-200)}
#ui-feedback-dialog{width: min(450px,calc(100vw - 24px));padding: 26px}
#ui-feedback-dialog .audio-option{padding: 16px 0;border-bottom: 1px solid var(--n-200);display: flex;flex-direction: row;align-items: center;justify-content: space-between;gap: 20px;text-align: left}
#ui-feedback-dialog .audio-option strong{display: block;font-size: var(--fs-lg)}
#ui-feedback-dialog .audio-option small{display: block;font-size: var(--fs-sm);color: var(--n-600);margin-top: 4px}
#ui-feedback-dialog .audio-option input{appearance: none;width: 42px;height: 26px;min-height: 26px;flex: 0 0 42px;border: 1px solid var(--n-300);border-radius: var(--r-md);background: var(--n-200);position: relative;cursor: pointer;margin: 0}
#ui-feedback-dialog .audio-option input::before{content: "";position: absolute;top: 3px;left: 3px;width: 18px;height: 18px;border-radius: 50%;background: var(--n-0);box-shadow: var(--sh-1);transition: transform .15s}
#ui-feedback-dialog .audio-option input:checked{background: var(--n-800);border-color: var(--n-800)}
#ui-feedback-dialog .audio-option input:checked::before{transform: translateX(16px)}
#ui-feedback-dialog .audio-option input:focus-visible{outline: 3px solid var(--n-400);outline-offset: 3px}
#ui-feedback-dialog .audio-volume{margin: 24px 0;display: grid;gap: 12px}
#ui-feedback-dialog .audio-volume>span{display: flex;justify-content: space-between;font-size: var(--fs-sm)}
#ui-feedback-dialog input[type=range]{width: 100%;accent-color: var(--n-800)}
#ui-feedback-toggle{display: flex;align-items: center;gap: 5px}
#ui-feedback-toggle svg{width: 14px;height: 14px}
#toast{border-radius: var(--r-md) !important;box-shadow: var(--sh-3) !important;border: 1px solid var(--n-200) !important;background: var(--n-0) !important;color: var(--n-800) !important;font-size: var(--fs-md) !important;padding: 14px 20px !important;max-width: min(560px,calc(100vw - 24px))}
#toast[data-tone=error]{border-color: var(--warn-line) !important;color: var(--fault-ink) !important;background: var(--n-25) !important}
#toast[data-tone=success]{border-left: 4px solid var(--n-700) !important}
@media(max-width:650px){
 body>dialog:not(:where(#arcade-studio)){max-height: calc(100dvh - 16px);max-width: calc(100vw - 16px);border-radius: var(--r-md);padding: 20px}
 #properties-dialog{width: calc(100vw - 16px);padding: 0}
 #properties-dialog>.dialog-heading{padding: 16px 18px}
 #properties-dialog>.dialog-heading h2{font-size: var(--fs-xl)}
 #properties-dialog #properties-host{padding: 18px}
 #properties-dialog .property-grid{grid-template-columns: repeat(2,minmax(0,1fr))}
 body>dialog .dialog-heading h2{font-size: var(--fs-3xl)}
 body>dialog .dialog-actions{flex-wrap: wrap}
 #variable-picker.signal-picker[open]{width: calc(100vw - 16px);height: calc(100dvh - 16px);max-height: calc(100dvh - 16px);margin: 8px auto;padding: 0}
 #variable-picker .sp-head{padding: 18px;gap: 12px}
 #variable-picker .sp-emblem{width: 40px;height: 40px;flex-basis: 40px;border-radius: var(--r-md)}
 #variable-picker .sp-emblem svg{width: 24px;height: 24px}
 #variable-picker h2{font-size: var(--fs-3xl)}
 #variable-picker .sp-overline{font-size: var(--fs-2xs)}
 #variable-picker .sp-subtitle{font-size: var(--fs-sm)}
 #variable-picker .sp-close{width: 36px;flex-basis: 36px;min-height: 36px}
 #variable-picker .sp-layout{display: flex;flex-direction: column}
 #variable-picker .sp-sidebar{padding: 8px 14px;flex: 0 0 auto;border: 0;border-bottom: 1px solid var(--n-200);overflow: visible;gap: 0}
 #variable-picker .sp-sidebar>.sp-section-label,#variable-picker .sp-board{display: none}
 #variable-picker .sp-filters{flex-direction: row;overflow: auto;gap: 5px}
 #variable-picker .sp-filters button{white-space: nowrap;flex: 0 0 auto;min-height: 42px;font-size: var(--fs-xs);padding: 10px}
 #variable-picker .sp-filters code{display: none}
 #variable-picker .sp-main{padding: 14px;flex: 1}
 #variable-picker .sp-list-heading{margin: 15px 2px 8px}
 #variable-picker button.sp-option{grid-template-columns: 64px minmax(0,1fr) 18px;gap: 10px;padding: 12px;min-height: 76px}
 #variable-picker .sp-option-copy strong{font-size: var(--fs-sm)}
 #variable-picker .sp-option-copy small{font-size: var(--fs-2xs)}
 #variable-picker .sp-address{font-size: var(--fs-sm);padding: 8px 4px}
 #variable-picker .sp-footer{padding: 10px 16px}
 #variable-picker .sp-footer>span{font-size: var(--fs-2xs);max-width: 220px}
 #variable-picker .sp-create-fields{grid-template-columns: 1fr 112px;gap: 8px}
 #variable-picker .sp-create-bottom{align-items: flex-start}
}
@media(max-height:590px){#variable-picker .sp-head{padding: 12px 18px}#variable-picker .sp-emblem{display: none}#variable-picker .sp-overline{display: none}#variable-picker h2{font-size: var(--fs-3xl)}#variable-picker .sp-subtitle{margin-top: 2px}#variable-picker .sp-main{padding: 10px 16px}#variable-picker .sp-list-heading{margin: 8px 0}#variable-picker .sp-create{margin-top: 6px;padding-top: 6px}#variable-picker .sp-footer{padding: 8px 16px}#variable-picker .sp-board{display: none}}
@media(prefers-reduced-motion:no-preference){body>dialog[open]{animation: dialog-arrive .18s cubic-bezier(.2,.7,.3,1)} @keyframes dialog-arrive{from{opacity: 0;transform: translateY(8px) scale(.985)}to{opacity: 1;transform: none}}}
#variable-picker .sp-main:has(#variable-create-form:not([hidden])){overflow: auto}
#variable-picker .sp-main:has(#variable-create-form:not([hidden])) .sp-choices{flex: 0 0 auto;max-height: 160px}

@media(prefers-reduced-motion:reduce){body>dialog,body>dialog *{animation: none !important;transition: none !important}}

#properties-dialog #inspector-content :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),select){min-height: 44px;border-radius: var(--r-md);padding: 10px 12px;font-size: var(--fs-md);border-color: var(--n-300)}
#properties-dialog #inspector-content .signal-card{margin: 6px 0 !important;background: var(--n-50) !important;border-color: var(--n-200) !important}
#properties-dialog #inspector-content .variable-trigger{background: var(--n-0) !important;border-color: var(--n-300) !important;border-radius: var(--r-md) !important}

#properties-dialog #element-form>.primary{position: sticky;bottom: 0;z-index: 2;box-shadow: var(--sh-2)}
#mapping-dialog #board-pinout-details{margin: 0;border-top: 1px solid var(--n-200);padding-top: 12px}
#mapping-dialog #board-pinout-details summary{font-size: var(--fs-sm);color: var(--n-700);cursor: pointer;min-height: 36px;display: list-item}
#mapping-dialog .board-layout{background: var(--n-50)}
#mapping-dialog .dialog-heading h2{color: var(--n-900)}
#mapping-dialog .pin-capacity-card{background: var(--n-100);border-color: var(--n-300)}
@media(max-width:768px){
 #mapping-dialog .board-layout{padding: 16px;gap: 20px}
 #mapping-dialog .board-info{padding: 14px !important;gap: 10px}
 #mapping-dialog .pin-capacity-card{padding: 10px;margin: 0}
 #mapping-dialog .pin-capacity-note{display: none}
 #mapping-dialog .pin-capacity-meter-wrap{margin-block: 6px}
 #mapping-dialog .board-info>label{margin: 0}
}
#variable-picker :is(.sp-subtitle,.sp-section-label,.sp-list-heading,.sp-option-copy small,.sp-footer>span,.sp-create-bottom,.sp-board p),#ui-feedback-dialog .audio-option small{color: var(--n-700)}
#variable-picker :is(.sp-overline,.sp-filters code,.sp-capacity){color: var(--n-700)}
#variable-picker .sp-emblem{background: var(--n-900);color: var(--accent-50)}
#variable-picker .sp-filters button[aria-pressed=true]{color: var(--accent-500);background: var(--n-0)}
#variable-picker button.sp-option[aria-pressed=true]{background: var(--accent-50);border-color: var(--accent-400);box-shadow: inset 3px 0 var(--accent-500)}
#variable-picker .sp-selected,#variable-picker .sp-option[aria-pressed=true] .sp-selected{color: var(--accent-500)}
#ui-feedback-dialog .audio-option input:checked{background: var(--accent-500);border-color: var(--accent-500)}
#ui-feedback-dialog input[type=range]{accent-color: var(--accent-500)}
#properties-dialog #element-form>.primary,body>dialog .dialog-actions .primary{background: var(--accent-500);border-color: var(--accent-500);color: var(--n-0)}
#properties-dialog .component-heading .eyebrow,#properties-dialog .appearance-options summary,#mapping-dialog .cap-label{color: var(--n-700)}