/* Operations snapshot (2026-10-11): shared by the studio's Validate value page and the public
   Value Guide. Colours are local custom properties (the guide has no design tokens); values match
   the "Drafting sheet" palette in styles.css. Rendered by MicroLeanValueUI.dashboard(). */
.ops-dash { --o-ink: #003656; --o-ink-2: #173E5B; --o-ink-3: #466074; --o-pen: #003656; --o-pen-2: #007BAE; --o-wash: #E9F8FE; --o-deep: #DDF2FB; --o-grid: #D3E8F1; --o-rule: #BED8E4; --o-paper: #FFFFFF; --o-flag: #D9542B; --o-flag-ink: #8E3417; --o-amber: #B9831A; --o-amber-ink: #7A5410; --o-amber-wash: #F8ECCF; --o-ease: cubic-bezier(.2,.7,.2,1);
  display: grid; gap: 14px; padding: 16px; border-radius: 14px; background: var(--o-paper); color: var(--o-ink); box-shadow: 0 0 0 1px var(--o-deep), 0 1.5px 0 var(--o-rule); border-top: 3px solid var(--o-pen); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ops-dash h3, .ops-dash h4 { margin: 0; font-family: Sora, ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; color: var(--o-ink); }
.ops-dash h3 { font-size: 18px; line-height: 1.25; } .ops-dash h4 { font-size: 15px; line-height: 1.3; }
.ops-head, .ops-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ops-chart-head { margin-bottom: 8px; }
.ops-head h3, .ops-chart-head h4, .ops-tile-label { position: relative; display: flex; align-items: center; gap: 6px; }
.ops-horizon, .ops-count { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font: 600 12px/1.25 "DM Sans", system-ui, sans-serif; white-space: nowrap; background: var(--o-deep); color: var(--o-ink-2); }
.ops-count { background: var(--o-amber-wash); color: var(--o-amber-ink); } .ops-count.ok { background: var(--o-wash); color: var(--o-pen); }
.ops-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* No overflow clip and no lingering transform: either would trap the fixed-position info popover. */
.ops-tile { position: relative; display: grid; gap: 6px; align-content: start; padding: 14px 16px 14px 18px; border-radius: 8px; background: var(--o-wash); animation: ops-rise 420ms var(--o-ease) backwards; }
.ops-tile:nth-child(2) { animation-delay: 60ms; } .ops-tile:nth-child(3) { animation-delay: 120ms; } .ops-tile:nth-child(4) { animation-delay: 180ms; }
.ops-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 8px 0 0 8px; background: var(--o-rule); }
.ops-tile.good::before { background: var(--o-pen-2); } .ops-tile.bad::before { background: var(--o-flag); }
.ops-tile-label { font-size: 13px; font-weight: 600; color: var(--o-ink-2); }
.ops-tile-value { font: 600 26px/1.1 Sora, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.03em; color: var(--o-ink); overflow-wrap: anywhere; }
.ops-tile-value .from { font-size: 17px; color: var(--o-ink-3); }
.ops-tile.bad .ops-tile-value { color: var(--o-flag-ink); }
.ops-tile-sub { font-size: 12.5px; line-height: 1.4; color: var(--o-ink-2); }
.ops-tile.good .ops-tile-sub { color: var(--o-pen); font-weight: 600; } .ops-tile.bad .ops-tile-sub { color: var(--o-flag-ink); font-weight: 600; }
.ops-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ops-chart, .ops-ready { margin: 0; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--o-grid); background: var(--o-paper); min-width: 0; }
.ops-chart-empty { display: grid; align-content: start; justify-items: start; gap: 8px; }
.ops-chart-empty p { margin: 0; color: var(--o-ink-2); }
.ops-button { min-height: 40px; padding: 8px 16px; border: 1px solid var(--o-rule); border-radius: 999px; background: var(--o-paper); color: var(--o-ink); font: 600 14px "DM Sans", system-ui, sans-serif; cursor: pointer; }
.ops-button:hover { border-color: var(--o-pen-2); }
.ops-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ops-gridline { stroke: var(--o-grid); stroke-width: 1; }
.ops-axis { font: 500 11px "DM Sans", system-ui, sans-serif; fill: var(--o-ink-3); }
.ops-dash .eff-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--o-ink-2); }
.ops-dash .eff-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.ops-dash .eff-legend i.asis { background: var(--o-ink-3); } .ops-dash .eff-legend i.tobe { background: var(--o-pen); }
.ops-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: ops-draw 900ms var(--o-ease) 120ms forwards; }
.ops-line.asis { stroke: var(--o-ink-3); } .ops-line.tobe { stroke: var(--o-pen); }
.ops-gap { fill: var(--o-pen-2); opacity: .14; animation: ops-fade 420ms var(--o-ease) 700ms both; }
.ops-pb { stroke: var(--o-pen-2); stroke-width: 1.5; stroke-dasharray: 4 4; animation: ops-fade 220ms var(--o-ease) 800ms both; }
.ops-pb-dot { fill: var(--o-paper); stroke: var(--o-pen-2); stroke-width: 3; animation: ops-fade 220ms var(--o-ease) 850ms both; }
.ops-pb-label { font: 600 12px "DM Sans", system-ui, sans-serif; fill: var(--o-pen); animation: ops-fade 220ms var(--o-ease) 850ms both; }
.ops-meter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 10px; }
.ops-meter i { height: 8px; border-radius: 999px; background: var(--o-deep); } .ops-meter i.on { background: var(--o-pen-2); }
.ops-checks { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; }
.ops-checks li { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.ops-checks li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; }
.ops-checks li.ok::before { background: var(--o-pen-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.5' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px; }
.ops-checks li.todo::before { border: 2px solid var(--o-amber); }
.ops-checks li.ok span { color: var(--o-ink-2); }
.ops-link { padding: 0; border: 0; background: none; text-align: left; color: var(--o-amber-ink); font: 600 14px/1.4 "DM Sans", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ops-next { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--o-wash); font-size: 14px; }
.ops-next strong { font: 600 12px/1.3 "DM Sans", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--o-pen-2); }
/* Value Guide info notes are absolutely positioned: in a tile they span the tile, so none can
   run off the right edge at any width. */
.ops-dash .guide-help-text:not([hidden]) { top: calc(100% + 6px); left: 0; right: auto; }
.ops-tile .guide-help-text:not([hidden]) { right: 0; width: auto; }
/* Live updates (Value Guide edits) redraw without replaying the entrance motion. */
.ops-static .ops-tile, .ops-static .ops-line, .ops-static .ops-gap, .ops-static .ops-pb, .ops-static .ops-pb-dot, .ops-static .ops-pb-label { animation: none; stroke-dashoffset: 0; }
@keyframes ops-draw { to { stroke-dashoffset: 0; } }
@keyframes ops-fade { from { opacity: 0; } }
@keyframes ops-rise { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 559.98px) { .ops-axis { font-size: 19px; } .ops-pb-label { font-size: 20px; } .ops-line { stroke-width: 4; } }
@media (min-width: 560px) { .ops-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .ops-dash { padding: 20px; } .ops-tile-value { font-size: 30px; } }
@media (min-width: 1100px) { .ops-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ops-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .ops-grid.solo { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .ops-dash *, .ops-dash *::before { animation: none !important; } .ops-line { stroke-dashoffset: 0; } }
@media print { .ops-dash * { animation: none !important; } .ops-line { stroke-dashoffset: 0; } .ops-dash .guide-info, .ops-dash .info-tip { display: none !important; } }