/* Gauge — shared screen chrome. Everything else comes from tokens.css. */

/* the mono DEMO tag, shown in the top bar on every demo surface */
.demo-flag {
  display: none;
  font: 500 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  padding: 5px 8px;
  align-self: center;
}
.is-demo .demo-flag { display: inline-block; }

/* fabric / chart panels — the simulated knitting, framed like a swatch */
.fabric-panel { padding: 16px 16px 14px; }
.fabric-panel canvas {
  display: block;
  width: 100%;
  background: var(--wool);
  border: 1px solid var(--rule);
  margin-top: 10px;
}
.fabric-counter { font: 500 13px/1.6 var(--mono); color: var(--ink); margin: 10px 0 0; }
.fabric-note { font: 400 12px/1.6 var(--mono); color: var(--ink-soft); margin: 8px 0 0; }

.fabric-duo { display: grid; grid-template-columns: 2fr 3fr; gap: 16px; margin: 0 0 36px; }
@media (max-width: 760px) { .fabric-duo { grid-template-columns: 1fr; } }

.status-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .status-grid { grid-template-columns: 1fr; } }

/* mono receipt lines (shared shape with 02) */
.receipt-line { margin: 8px 0 0; font: 400 13px/1.8 var(--mono); }
.receipt-line .ok { color: var(--ink); font-weight: 600; }
/* a failed call is not a pipeline verdict — no red here; the raw reason, in ink */
.receipt-line .err { font-weight: 600; }