/* The readout uses the same dark measurement surface in every lighting study. */
#app[data-studio] {
  --engraving:#e7dfd0; --secondary:#b6b2ad; --brass:#baaa8d; --thumb:#f2e6d0;
  --label:#e4dccc; --label-shadow:0 1px 3px #101016, 0 0 9px #16141c;
  --tab-strip:#151c23e8; --dialog-surface:#1b232b;
  color:var(--engraving);
}
#app[data-theme="Verdigris"] {
  --engraving:#e0eee1; --secondary:#a1c0b1; --brass:#8bbba6; --thumb:#e0f2dd;
  --label:#d5ebde; --label-shadow:0 1px 4px #071d17, 0 0 8px #12271d;
  --tab-strip:#102721eb; --dialog-surface:#172f29;
}
#app[data-theme="Daylight"] {
  --engraving:#1f343b; --secondary:#384f56; --brass:#516a70; --thumb:#f0f3ed;
  --label:#1c343c; --label-shadow:0 1px 2px #d7dfde, 0 0 5px #dde2dd;
  --tab-strip:#dce2e1f5; --dialog-surface:#eaeeeb;
  --electric:#146276; --magnetic:#896018; --accent:#2b6372;
}
#app[data-theme="Carbon"] {
  --engraving:#e5eaf3; --secondary:#a6b1bf; --brass:#929fb0; --thumb:#dce5f0;
  --label:#d8e2ef; --label-shadow:0 1px 3px #06080a, 0 0 7px #0f141a;
  --tab-strip:#0c1015eb; --dialog-surface:#14181e;
}
#app[data-theme="Daylight"][data-palette="amber"] {--electric:#86541b;--magnetic:#375e92}
#app[data-theme="Daylight"][data-palette="silver"] {--electric:#445a63;--magnetic:#72578b}
[data-studio] .experiment { color: var(--secondary); }
[data-studio] .experiment:is(:hover,[aria-pressed=true]) { color: var(--engraving); }
[data-studio] .world-label,
[data-studio] .world-label .katex {
  color: var(--label);
  text-shadow: var(--label-shadow);
}
[data-studio] #label-links path { stroke: var(--label); }
[data-studio] .scene-actions .icon {
  color: var(--secondary);
  box-shadow: inset 0 0 0 1px #ddcdae14;
}
[data-studio] .scene-actions .icon:is(:hover,[aria-pressed=true],[aria-expanded=true]) {
  color: var(--engraving);
  background: #ac9a7d2e;
}
[data-studio] .detector-window { box-shadow: 0 0 0 1px #dfcdae35; }
[data-studio] .detector-window .view-modes { background: var(--tab-strip); }
[data-studio] .detector-window .view-modes button { color: var(--secondary); }
[data-studio] .detector-window .view-modes button:is(:hover,[aria-selected=true]) { color: var(--engraving); }
[data-studio] :is(.control-heading,.setting-label,.setting>label,.switch,.settings-tabs button,.cycle-heading,.camera-choices button,.segmented button,.settings-footer button,.comparison-control button,.focus-stops button) { color: var(--secondary); }
[data-studio] :is(.settings-heading,.setting output,#experiment-value,#distance-value,#detector-handle),
[data-studio] :is(.settings-tabs button,.segmented button,.comparison-control button,.focus-stops button):is([aria-selected=true],[aria-pressed=true]) { color: var(--engraving); }
[data-studio] input[type=range] { accent-color: var(--brass); }
[data-studio] input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg,var(--brass) var(--fill),#b7adb32e var(--fill)); }
[data-studio] input[type=range]::-moz-range-progress { background: var(--brass); }
[data-studio] input[type=range]::-webkit-slider-thumb { background: var(--thumb); border-color: var(--brass); }
[data-studio] input[type=range]::-moz-range-thumb { background: #f2e6d0; border-color: var(--brass); }
[data-studio] .switch input:checked+i { background: #afa0864d; border-color: #cbbda766; }
[data-studio] .switch input:checked+i:after { background: var(--engraving); }
[data-studio] .segmented { background: #10101470; border-color: #dccbb91b; }
[data-studio] :is(.segmented,.palette-choices) button[aria-pressed=true] {
  background: #bda98e17;
  box-shadow: inset 0 0 0 1px #d8c5a82c;
  color: var(--engraving);
}
[data-studio] :is(.setting-note,.palette-choices button,#reset-appearance) { color: var(--secondary); }
[data-studio] dialog { background: var(--dialog-surface); color: var(--engraving); border-color: #c1ced533; }
[data-studio] :is(#element-legend, dialog p) { color: var(--secondary); }
[data-studio] :is(#element-kind, dialog h2, dialog .equation) { color: var(--engraving); }

[data-theme="Daylight"] .experiment::before { border-color: #52717c28; opacity: 1; }
[data-theme="Daylight"] .experiment[aria-pressed=true]::before { border-color: #486974aa; }
[data-theme="Daylight"] .scene-actions .icon { background: #edf2f2c9; box-shadow: inset 0 0 0 1px #4d6b7526; }
[data-theme="Daylight"] .scene-actions .icon:is(:hover,[aria-pressed=true],[aria-expanded=true]) { background: #c5d4d8; }
[data-theme="Daylight"] .detector-window { box-shadow: 0 0 0 1px #526c7759; }
[data-theme="Daylight"] .settings-panel { background: #f3f6f5f0; box-shadow: 0 8px 32px #293e4824; }
[data-theme="Daylight"] :is(.settings-tabs,.segmented) { background: #748c930f; border-color: #5e798530; }
[data-theme="Daylight"] :is(.camera-choices,.focus-stops,.comparison-control,.palette-choices,.settings-tabs,.segmented) button:is(:hover,[aria-selected=true],[aria-pressed=true]) {
  color: var(--engraving); background: #5c879625; border-color: #617f892e;
}
[data-theme="Daylight"] :is(.field-switches button,.icon,.close,#loading-text,.sources a) { color: var(--secondary); }
[data-theme="Daylight"] .field-switches button[aria-pressed=true] { color: var(--electric); }
[data-theme="Daylight"] .field-switches button:last-child[aria-pressed=true] { color: var(--magnetic); }
[data-theme="Daylight"] .switch input:checked+i { background-color: #8ca4ad; }
[data-theme="Daylight"] #detector-quantity { color: #d2e2e6; }
[data-theme="Daylight"] :is(dialog h2,.camera-choices,.sources) { border-color: #4d6b7533; }
[data-theme="Daylight"] dialog::backdrop { background: #4a5d6659; }

.lighting-choices {display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.lighting-choices button {
  display:flex;align-items:center;gap:8px;min-height:32px;padding:6px 10px;
  border:1px solid transparent;border-radius:6px;font-size:10px;
  color:var(--secondary,#91aab9);transition:border-color .16s,color .16s;
}
.lighting-choices button::before {
  content:'';width:12px;height:12px;border-radius:50%;background:var(--swatch);
  box-shadow:inset 0 0 0 1px rgb(var(--edge-rgb)/.42);
}
.lighting-choices button:is(:hover,:focus-visible,[aria-pressed=true]) {color:var(--engraving,#def0f3);}
.lighting-choices button[aria-pressed=true] {border-color:rgb(var(--edge-rgb)/.33);}

/* Measurements share the preview's edge, surface and type in every palette.
   The overlay is outside its layout, so probing never moves the sampled pixel. */
#probe-readout {
  position:absolute;right:0;bottom:calc(100% + 10px);
  width:max(100%,252px);max-width:calc(100vw - 32px);box-sizing:border-box;
  margin:0;padding:11px 13px 13px;border:0;border-radius:5px;
  background:var(--tab-strip,#101b24f2);color:var(--engraving,#d4e7eb);
  box-shadow:0 0 0 1px rgb(var(--edge-rgb,167 198 206)/.25),0 5px 18px #00000012;
  backdrop-filter:blur(16px);font-size:10px;pointer-events:auto;
  animation:probe-appear 160ms ease-out;
}
#probe-readout>div {margin:0;min-height:25px;display:flex;align-items:center;}
#probe-readout .probe-heading {justify-content:space-between;gap:8px;margin-bottom:7px;}
#probe-coordinates {color:var(--secondary,#91aab9);font-size:9px;}
#probe-flux {color:var(--secondary,#91aab9);}
#probe-readout #clear-probe {
  position:static;width:28px;height:28px;padding:0;margin:-5px -6px -5px 0;
  border-radius:4px;color:var(--secondary,#91aab9);font-size:21px;
  transition:color 140ms ease,background 140ms ease;
}
#probe-readout #clear-probe:hover {color:var(--engraving,#d4e7eb);background:rgb(var(--edge-rgb,167 198 206)/.09);}
.detector-window #detector-quantity {text-align:left;line-height:1.4;min-height:28px;margin:-4px;padding:4px;border:0;}
.detector-window #detector-quantity:not(:disabled) {pointer-events:auto;cursor:pointer;transition:opacity 140ms ease,background 140ms ease;}
.detector-window #detector-quantity:not(:disabled):hover {opacity:1;background:#08121a66;}
.detector-window #detector-quantity:disabled {cursor:default;}
@keyframes probe-appear {from{opacity:0}to{opacity:1}}
@media(max-height:600px) and (min-width:651px) {
  #probe-readout {width:252px;right:calc(100% + 12px);bottom:0;}
}
@media(max-height:540px) and (min-aspect-ratio:1/1) {
  /* Keep the nanojet's extra profile below the readout, beside the inset.
     Stacking all three instruments would overlap the catalogue here. */
  #app[data-experiment=nanojet] #jet-scan {position:absolute;right:calc(100% + 12px);bottom:0;width:160px;}
  #app[data-experiment=nanojet] #probe-readout {bottom:86px;}
}