/* Accepted glass, Balance / Mixed palette. See DESIGN.md. */
@property --light-energy { syntax: "<number>"; inherits: true; initial-value: .62; }
html[data-palette='balanced'] body {
  --page:#eeedeb; --canvas:#f5f4f2; --node:#fdfdfb; --paper:#fffffd; --field:#fbfaf8;
  --ink:#282725; --muted:#64615d; --line:#ccc9c4;
  --accent:#4a443e; --accent-wash:#e6e2de;
  --button:#302d2a; --button-top:#4c4742; --button-text:#fffffe;
  --coat:rgb(255 254 251 / .445); --rim:rgb(255 255 253 / .93);
  --low-rim:rgb(53 46 39 / .18); --reflection:rgb(255 254 250 / .3);
  --shadow:25 23 20; --saturation:100%; --palette-rail:#8a837b; --palette-backdrop:23 21 20;
}
html[data-palette='balanced'] body[data-theme='dark'] {
  --page:#181716; --canvas:#211f1e; --node:#302e2c; --paper:#272524; --field:#302e2c;
  --ink:#f0eeeb; --muted:#bdb8b1; --line:#54504b;
  --accent:#ded4c7; --accent-wash:#453f3a;
  --button:#dbd5ce; --button-top:#f2ede7; --button-text:#292623;
  --coat:rgb(48 45 42 / .44); --rim:rgb(249 242 234 / .355);
  --low-rim:rgb(4 3 1 / .65); --reflection:rgb(255 247 235 / .115);
  --shadow:3 2 1; --palette-rail:#756e66;
}

.optical {
  position: relative; background: var(--coat); border: 1px solid var(--rim);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--saturation));
  backdrop-filter: blur(var(--blur)) saturate(var(--saturation));
  box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 var(--low-rim), 0 12px 30px -12px rgb(var(--shadow) / .27), 0 2px 5px rgb(var(--shadow) / .06);
}
.optical::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(123deg, var(--reflection), transparent 32%, transparent 72%, rgb(var(--shadow) / .035)); }
.optical::after { content: ''; position: absolute; inset: var(--bevel); border: 1px solid var(--reflection); border-radius: inherit; pointer-events: none; }
.optical > * { position: relative; }

/* A single inherited energy value drives each source and its reflection.
   The source never goes out; text, geometry and backdrop filters stay fixed. */
[data-state] { --light-output: .62; --light-gain: 1; --light-x: 20px; --light-y: 50%; }
body[data-light-motion='supported'][data-glow='shimmer']:not([data-light='none']) [data-state] { --light-output: var(--light-energy); }
[data-state='done'] { --signal: #21734f; --signal-core: #6cebb0; --signal-rgb: 55 191 127; }
[data-state='running'], [data-state='cancelling'] { --signal: #2f65af; --signal-core: #83baff; --signal-rgb: 60 133 244; --light-gain: 1.25; }
[data-state='review'] { --signal: #805718; --signal-core: #ffd08b; --signal-rgb: 234 163 55; --light-gain: 1.25; }
[data-state='error'], [data-state='timed_out'] { --signal: #b3423a; --signal-core: #ffaaa0; --signal-rgb: 231 94 82; --light-gain: 1.6; }
[data-state='pending'], [data-state='skipped'], [data-state='cancelled'] { --signal: #5c6e80; --signal-core: #b5c2cd; --signal-rgb: 126 148 165; }
body[data-theme='dark'] [data-state='done'] { --signal: #93e5bd; }
body[data-theme='dark'] :is([data-state='running'], [data-state='cancelling']) { --signal: #a6caff; }
body[data-theme='dark'] [data-state='review'] { --signal: #f3ca8f; }
body[data-theme='dark'] :is([data-state='error'], [data-state='timed_out']) { --signal: #ffb3a9; }
body[data-theme='dark'] :is([data-state='pending'], [data-state='skipped'], [data-state='cancelled']) { --signal: #b0bfce; }
.state { display: inline-flex; align-items: center; gap: 9px; color: var(--signal); font-size: 12px; font-weight: 500; }
.lamp { position: relative; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: 0 0 auto; }
body:not([data-light='none']) .lamp { background: radial-gradient(circle at 35% 25%, var(--signal-core), var(--signal) 80%); box-shadow: 0 0 0 2px rgb(var(--signal-rgb) / .07); }
body:not([data-light='none']) .lamp::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 35% 25%, #fff, var(--signal-core) 65%, transparent); opacity: calc((.1 + var(--light-output) * .7) * var(--light-gain)); }
body:not([data-light='none']) .lamp::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--light-output); box-shadow: 0 0 7px 1px rgb(var(--signal-rgb) / calc(.64 * var(--light-gain))), 0 0 3px 1px rgb(var(--signal-rgb) / calc((var(--light-gain) - 1) * .6)); }
body[data-theme='dark']:not([data-light='none']) .lamp::after { box-shadow: 0 0 7px 1px rgb(var(--signal-rgb) / calc(.78 * var(--light-gain))), 0 0 3px 1px rgb(var(--signal-rgb) / calc((var(--light-gain) - 1) * .6)); }
.status-plate { padding: 8px 11px; border: 1px solid rgb(var(--signal-rgb) / .25); background: rgb(var(--signal-rgb) / .065); border-radius: 7px; }
.edge-light, .optical > .edge-light { display: none; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: calc(var(--light-output) * var(--reflection-visible, 1)); }
body[data-light='edge'] [data-state]:not([data-state='pending'], [data-state='skipped'], [data-state='cancelled']) > .edge-light { display: block; }
/* A tapered reflection follows the existing rounded edge, with no separate
   rectangular strip or second outline. Mask only this light, never the glass. */
.edge-light::before { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: radial-gradient(ellipse 64px 72px at var(--light-x) var(--light-y), rgb(var(--signal-rgb) / calc(.95 * var(--light-gain))), rgb(var(--signal-rgb) / calc(.48 * var(--light-gain))) 42%, transparent 90%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }
.edge-light::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 24px 58px at 0 var(--light-y), rgb(var(--signal-rgb) / calc(.19 * var(--light-gain))), transparent 95%); }
/* Nested graph containers must not disable a child's active light. */
[data-state] { --lamp-glow:block; --lamp-fill:radial-gradient(circle at 35% 25%,var(--signal-core),var(--signal) 80%); --lamp-ring:0 0 0 2px rgb(var(--signal-rgb) / .07); }
[data-state='pending'],[data-state='skipped'],[data-state='cancelled'] { --lamp-glow:none; --lamp-fill:var(--signal); --lamp-ring:none; }
body:not([data-light='none']) .lamp { background:var(--lamp-fill); box-shadow:var(--lamp-ring); }
body .lamp::before,body .lamp::after { display:var(--lamp-glow); }
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) { .edge-light::before { display: none; } }

html[data-status-palette='mixed'] body {
  --tone-done-light:#376c3f; --tone-done-dark:#a4d7a6; --tone-done-core:#84d093; --tone-done-rgb:97 178 115;
  --tone-running-light:#3e6492; --tone-running-dark:#a6c2e4; --tone-running-core:#86b0de; --tone-running-rgb:90 142 209;
  --tone-review-light:#7b591e; --tone-review-dark:#e5c68e; --tone-review-core:#e4bf7d; --tone-review-rgb:211 162 74;
  --tone-error-light:#a1473c; --tone-error-dark:#f1b3a7; --tone-error-core:#e49c8e; --tone-error-rgb:207 105 90;
  --tone-idle-light:#61696a; --tone-idle-dark:#babebd; --tone-idle-core:#b9bbb6; --tone-idle-rgb:146 153 152;
}
html[data-status-palette] body [data-state='done'] { --signal:var(--tone-done-light); --signal-dark:var(--tone-done-dark); --signal-core:var(--tone-done-core); --signal-rgb:var(--tone-done-rgb); }
html[data-status-palette] body :is([data-state='running'],[data-state='cancelling']) { --signal:var(--tone-running-light); --signal-dark:var(--tone-running-dark); --signal-core:var(--tone-running-core); --signal-rgb:var(--tone-running-rgb); }
html[data-status-palette] body [data-state='review'] { --signal:var(--tone-review-light); --signal-dark:var(--tone-review-dark); --signal-core:var(--tone-review-core); --signal-rgb:var(--tone-review-rgb); }
html[data-status-palette] body :is([data-state='error'],[data-state='timed_out']) { --signal:var(--tone-error-light); --signal-dark:var(--tone-error-dark); --signal-core:var(--tone-error-core); --signal-rgb:var(--tone-error-rgb); }
html[data-status-palette] body :is([data-state='pending'],[data-state='skipped'],[data-state='cancelled']) { --signal:var(--tone-idle-light); --signal-dark:var(--tone-idle-dark); --signal-core:var(--tone-idle-core); --signal-rgb:var(--tone-idle-rgb); }
html[data-status-palette] body[data-theme='dark'] [data-state] { --signal:var(--signal-dark); }
html[data-status-palette] body [data-state] .state { color:var(--signal); }

/* Light surfaces need their own depth hierarchy. Dark materials stay untouched. */
html[data-palette] body[data-theme='light'] {
  --page:#f4f4f4; --canvas:#e5e5e5; --node:#fdfdfd; --paper:#fff; --field:#f5f5f5;
  --ink:#212121; --muted:#5c5c5c; --line:#c8c8c8;
  --accent:#393939; --accent-wash:#e7e7e7;
  --coat:rgb(255 255 255 / .66); --rim:rgb(255 255 255 / .92);
  --low-rim:rgb(30 30 30 / .12); --reflection:rgb(255 255 255 / .4);
  --shadow:24 24 24; --palette-rail:#888; --palette-backdrop:24 24 24;
  --connector:color-mix(in srgb,var(--muted) 80%,var(--canvas));
}
html[data-palette='balanced'] body[data-theme='light'] {
  --page:#f5f4f2; --canvas:#e7e5e2; --node:#fefdfb; --paper:#fffffd; --field:#f6f4f1;
  --ink:#272523; --muted:#615d58; --line:#ccc8c2;
  --accent:#484037; --accent-wash:#e9e5df;
  --coat:rgb(255 254 250 / .66); --low-rim:rgb(40 35 28 / .12);
  --shadow:30 27 22; --palette-rail:#8d867d; --palette-backdrop:30 27 22;
}

/* A fine exterior edge and an interior highlight read against a light canvas.
   Reflected status light still uses the shared edge-light and its energy curve. */
html[data-palette] body[data-theme='light'] .optical {
  border-color:rgb(var(--shadow) / .18);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--low-rim),
    0 10px 24px -12px rgb(var(--shadow) / .2),0 2px 5px rgb(var(--shadow) / .045);
}
html[data-palette] body[data-theme='light'] .optical::before {
  background:linear-gradient(123deg,var(--reflection),transparent 38%,transparent 78%,rgb(var(--shadow) / .025));
}
html[data-palette] body[data-theme='light'] .optical::after { border-color:rgb(255 255 255 / .4); }
/* Keep the 6px silhouette steady. A broad blur distributes light outside it
   without the dense ring created by spread or a second, tight shadow.
   Energy still drives the same rhythm and the coupled reflection. */
html[data-palette] body[data-theme='light']:not([data-light='none']) .lamp {
  background:var(--signal);
  box-shadow:none;
}
html[data-palette] body[data-theme='light']:not([data-light='none']) .lamp::before {
  inset:1px;
  background:radial-gradient(circle at 35% 25%,var(--signal-core),transparent 85%);
  opacity:calc(.18 + var(--light-output) * .24 * var(--light-gain));
}
html[data-palette] body[data-theme='light']:not([data-light='none']) .lamp::after {
  box-shadow:0 0 10px 0 rgb(var(--signal-rgb) / calc(.62 * var(--light-gain)));
}
html[data-palette] body[data-theme='light'] .edge-light::before {
  background:radial-gradient(ellipse 64px 72px at var(--light-x) var(--light-y),
    rgb(var(--signal-rgb) / calc(.55 * var(--light-gain))),
    rgb(var(--signal-rgb) / calc(.22 * var(--light-gain))) 42%,transparent 90%);
}
html[data-palette] body[data-theme='light'] .edge-light::after {
  background:radial-gradient(ellipse 24px 58px at 0 var(--light-y),
    rgb(var(--signal-rgb) / calc(.08 * var(--light-gain))),transparent 95%);
}

@media(prefers-reduced-motion:reduce) { body[data-light-motion] [data-state] { --light-output:.62 !important; } }
@media(prefers-reduced-transparency:reduce) { .optical { background:var(--field); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .optical { background:var(--field); } }