/* Operations page (read-only Flow view). Builds on styles.css. */
#app.ops { grid-template-columns: 300px minmax(0, 1fr) 340px; grid-template-areas: "top top top" "left stage right" "status status status"; }
@media (max-width: 1280px) { #app.ops { grid-template-columns: 270px minmax(0, 1fr) 300px; } }

.ro-badge { font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); padding: 5px 7px; border-radius: 2px; white-space: nowrap; }

.sec { padding: 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.conn { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.conn small { color: var(--ink-3); font: 500 10.5px/1.3 var(--mono); }
.dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dates label { display: grid; gap: 4px; font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.dates input { width: 100%; height: 30px; padding: 0 6px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink); font: 500 12px var(--mono); color-scheme: dark; }
.dates-label { font: 600 11.5px/1.3 var(--mono); color: var(--cyan); }
.status-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.status-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); padding: 3px 4px; border-radius: 3px; cursor: pointer; }
.status-legend li:hover { background: var(--raise); color: var(--ink); }
.status-legend li.off { opacity: .4; }
.status-legend li span { flex: 1; }
.status-legend b { font: 700 11px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sw { width: 18px; height: 11px; border-radius: 2px; flex: none; border: 1px solid rgb(0 0 0 / .45); }
.sw.partial { border: 1.5px dashed var(--ink-2); background: transparent; }
.sw.hold { background: repeating-linear-gradient(135deg, #c4b5fd 0 3px, #ede9fe 3px 6px); border-color: #6d28d9; }
.offmap .chip { min-width: 34px; height: 22px; font-size: 10.5px; border-color: rgb(0 0 0 / .4); color: #0b0f14; }

/* hover card: same details as Flow's site-map card */
.opcard { position: fixed; z-index: 50; width: 268px; pointer-events: none; padding: 10px 11px; border-radius: 5px; border: 1px solid var(--line-2);
  background: rgb(13 18 24 / .96); box-shadow: 0 18px 44px rgb(0 0 0 / .55); backdrop-filter: blur(8px); font-size: 12px; color: var(--ink); }
.opcard .hd, .pin .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.opcard .site, .pin .site { font-weight: 800; font-stretch: 115%; font-size: 15px; letter-spacing: .02em; }
.opcard .type, .pin .type { font: 600 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.st { margin-top: 5px; display: flex; align-items: center; gap: 7px; font-weight: 700; }
.st em { font-style: normal; font-weight: 600; color: var(--ink-3); }
.res { margin-top: 6px; display: grid; gap: 5px; }
.res > div { border: 1px solid var(--line); background: var(--panel-2); border-radius: 3px; padding: 5px 7px; }
.res .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .ln { font: 500 10.5px/1.45 var(--mono); color: var(--ink-2); }
.res .held { font: 600 10.5px/1.4 var(--mono); color: #c4b5fd; }
.more, .tip { font: 500 10.5px/1.4 var(--mono); color: var(--ink-3); margin-top: 5px; }
.maint { margin-top: 6px; color: #fde68a; font-size: 11.5px; }
.avail { margin-top: 6px; color: var(--ink-2); font: 500 11px/1.5 var(--mono); }
.lock { color: #c4b5fd; margin-right: 3px; }
.pin { border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel-2); padding: 12px; }
.pin .site { font-size: 26px; }
.pin .res > div { background: var(--panel); }
.pin .actions { margin-top: 10px; display: flex; gap: 6px; }
.pin-empty { color: var(--ink-3); font-size: 12px; line-height: 1.5; }