/* Prototypes can flip these foreground/surface variables with their theme. */
:root { --status-fg: var(--forest); --status-surface: var(--ivory); --status-secondary: var(--soil); }
[data-theme="dark"], .on-dark { --status-fg: var(--straw); --status-surface: var(--charcoal); --status-secondary: var(--paper); }
.status { display: inline-block; padding: .15em .6em; border: 1px solid currentColor; border-radius: 999px; color: var(--status-fg); background: var(--status-surface); line-height: 1.5; }
.status[data-status="operating"], .status[data-legend-status="operating"] { background: var(--status-fg); color: var(--status-surface); }
.status[data-status="under-construction"] { border-width: 3px; border-style: double; color: var(--status-secondary); }
.status[data-status="development"] { color: var(--status-secondary); }
.status[data-status="development"]::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-inline-end: .4em; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.status[data-status="pipeline"] { border-width: 2px; border-style: dotted; color: var(--status-secondary); }
.status[data-status="ambition"] { border-style: dashed; }
.status[data-status="target"] { border-width: 2px; }
.status[data-status="deploying"], .status[data-status="pilot"], .status[data-status="evaluating"], .status[data-status="research"] { border-radius: 0; }
.status[data-status="deploying"] { background: var(--status-fg); color: var(--status-surface); }
.status[data-status="pilot"] { border-width: 3px; border-style: double; color: var(--status-secondary); }
.status[data-status="evaluating"] { border-width: 2px; border-style: dotted; }
.status[data-status="research"] { border-style: dashed; color: var(--status-secondary); }

.status[data-status="track-record"] { border-radius: 0; border-style: solid; border-inline-start-width: 5px; }