/* One identity, three ripening stages. Green is also the no-JavaScript default. */
:root,
html[data-phase="green"] {
  --bg:#f8faf3;
  --accent:#39732b;
  --accent-hover:#2d5f21;
  --node-fill:#639c2d;
  --blush:#dce9c7;
  --accent-soft:#eaf0df;
  --accent-border:#b7c99f;
  --accent-line:#94ad73;
  --surface:#f0f4e9;
  --canvas-surface:#fafbf6;
  --line:#dce2d3;
  --stage-light:#bcdf91;
  --stage-active:#35472b;
}
html[data-phase="yellow"] {
  --bg:#fbfaf3;
  --accent:#80611a;
  --accent-hover:#674d10;
  --node-fill:#b38b1e;
  --blush:#f1e3b6;
  --accent-soft:#f4eedb;
  --accent-border:#d2c28e;
  --accent-line:#b9a05b;
  --surface:#f6f1e1;
  --canvas-surface:#fcfbf5;
  --line:#e4dfcf;
  --stage-light:#f0ce69;
  --stage-active:#49442c;
}
html[data-phase="red"] {
  --bg:#faf9f5;
  --accent:#bc3a28;
  --accent-hover:#a82c1d;
  --node-fill:#d94b36;
  --blush:#f3c9c0;
  --accent-soft:#f5e8e1;
  --accent-border:#d6b6a9;
  --accent-line:#cb7866;
  --surface:#edf1e7;
  --canvas-surface:#fafbf8;
  --line:#dedfd6;
  --stage-light:#ffae96;
  --stage-active:#3b4631;
}
:root {
  /* Compatibility aliases for the existing components. */
  --red:var(--accent);
  --tomato:var(--node-fill);
  --green:#496d46;
  --sage:#e5eddf;
  --phase-green:#639c2d;
  --phase-yellow:#b38b1e;
  --phase-red:#d94b36;
}
/* A release status, not a theme selector. */
.maturity{display:flex;align-items:center;gap:15px;width:350px;max-width:100%;margin:28px auto 0;padding:16px 19px;background:var(--canvas-surface);border:1px solid var(--line);border-radius:12px;position:relative;text-align:left}
.maturity-mark{display:block;width:50px;height:50px;flex:0 0 50px;overflow:visible}
.maturity-fruit{fill:var(--node-fill)}
.maturity-leaf{fill:var(--green);transform-box:fill-box;transform-origin:10% 85%;animation:maturity-leaf-sway 7s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.maturity-copy{flex:1;min-width:0}
.maturity-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:6px}
.maturity-label{font-size:9px;line-height:1.5;color:var(--muted)}
.maturity-stage{font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.maturity-stage b{font-weight:500;color:var(--accent)}
.maturity-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.maturity-title>strong{font-size:16px;font-weight:800;line-height:1.35;color:var(--ink);letter-spacing:-.025em}
.maturity-note{margin:0;font-size:10px;line-height:1.6;color:var(--muted)}
.maturity-track{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}
.maturity-track>span{height:3px;border-radius:2px;background:var(--line)}
.maturity-track .is-reached{background:var(--node-fill)}
.maturity-track .is-current{animation:maturity-status-breathe 7s ease-in-out infinite;animation-play-state:paused}
[data-maturity-motion=animated] .maturity-leaf,[data-maturity-motion=animated] .maturity-track .is-reached{animation-play-state:running}
html[data-paused=true] .maturity-leaf,html[data-paused=true] .maturity-track .is-reached{animation-play-state:paused}
html[data-motion=still] .maturity-leaf,html[data-motion=still] .maturity-track .is-reached{animation:none}
.maturity-compact{width:auto;max-width:none;margin:0;padding:0;gap:7px;border:0;border-radius:0;background:transparent}
.maturity-compact .maturity-mark{width:25px;height:25px;flex-basis:25px}
.maturity-compact .maturity-heading,.maturity-compact .maturity-note,.maturity-compact .maturity-track{display:none}
.maturity-compact .maturity-title>strong{font-size:10px;font-weight:600;letter-spacing:0;color:var(--accent)}
@keyframes maturity-leaf-sway{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-7deg)}75%{transform:rotate(2deg)}}
@keyframes maturity-status-breathe{0%,100%{opacity:1}50%{opacity:.58}}
@media(max-width:760px){.maturity:not(.maturity-compact){margin-top:24px;width:330px;padding:14px 16px;gap:13px}.maturity:not(.maturity-compact) .maturity-mark{width:45px;height:45px;flex-basis:45px}.maturity-title{gap:8px}.maturity-title>strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.maturity-leaf,.maturity-track .is-reached{animation:none!important}}
.context-flow {--flow-accent:var(--stage-light)}
.context-flow[data-stage=mapping] [data-context-row=mapping],
.context-flow[data-stage=mapping] [data-context-row=scope],
.context-flow[data-stage=rules] [data-context-row=rule],
.context-flow[data-stage=rules] [data-context-row=identity] {background:var(--stage-active)}
/* Comparison remains readable in the all-green phase and without color vision. */
.preview-bar-track.confirmed i,
.preview-chart-legend span:last-child:before {background:repeating-linear-gradient(135deg,var(--green) 0 3px,var(--sage) 3px 5px)}