.ops-view { --ops-navy: #172a31; --ops-teal: #0b7a75; }
.ops-page-head, .ops-tabs, .ops-filters, .ops-detail-head, .ops-section-head, .ops-plan-card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ops-page-head { margin-bottom: 16px; }
.ops-page-head h2, .ops-detail-head h2, .ops-section h3 { margin: 0; }
.ops-page-head p, .ops-detail-head p { margin: 6px 0 0; color: var(--muted); }
.ops-readonly-mark { padding: 7px 10px; border: 1px solid #c7d9d3; border-radius: 999px; color: #3b655b; background: #f3f8f6; font-size: 12px; font-weight: 700; }
.ops-tabs { justify-content: flex-start; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.ops-tabs button { padding: 11px 3px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 700; }
.ops-tabs button.active { border-color: var(--ops-teal); color: var(--ops-teal); }
.ops-filters { align-items: flex-end; flex-wrap: wrap; padding: 13px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ops-filters label { display: grid; gap: 5px; min-width: 128px; color: var(--muted); font-size: 11px; }
.ops-filters label:first-child { flex: 1; min-width: 220px; }
.ops-filters input, .ops-filters select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: #fff; }
.ops-result-count { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ops-error, .ops-warning { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #e7c990; border-radius: 8px; color: #704511; background: #fff9ed; }
.ops-warning strong { display: block; margin-bottom: 5px; }
.ops-warning p { margin: 4px 0; font-size: 13px; line-height: 1.55; }
.ops-current-layout, .ops-retrospective-layout { display: grid; grid-template-columns: minmax(230px, 310px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ops-plan-list, .ops-retrospective-list { display: grid; gap: 8px; position: sticky; top: 12px; }
.ops-plan-card { width: 100%; display: grid; gap: 7px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; text-align: left; color: var(--ink); background: #fff; }
.ops-plan-card:hover, .ops-plan-card.is-selected { border-color: #78aaa2; box-shadow: 0 7px 20px rgba(11, 122, 117, .08); }
.ops-plan-card.is-selected { border-left: 4px solid var(--ops-teal); padding-left: 10px; }
.ops-plan-card span:not(.ops-status), .ops-plan-card small { color: var(--muted); font-size: 12px; }
.ops-plan-detail, .ops-retrospective-detail { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ops-detail-head { align-items: flex-start; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ops-detail-head h2 { margin-top: 4px; font-size: 24px; }
.ops-eyebrow { color: var(--ops-teal); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ops-detail-meta { display: grid; justify-items: end; gap: 7px; color: var(--muted); font-size: 12px; }
.ops-status { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ops-status.is-success { color: #11653d; background: #e7f6ed; }
.ops-status.is-danger { color: #9b2d2d; background: #fdeaea; }
.ops-status.is-warning { color: #915405; background: #fff0d5; }
.ops-status.is-active { color: #1f579e; background: #e8f0fd; }
.ops-status.is-muted { color: #5f6a66; background: #eef1f0; }
.ops-contract-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.ops-contract-grid article { min-height: 88px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfa; }
.ops-contract-grid span, .ops-contract-grid small, .ops-version-list small, .ops-evidence-list small { display: block; color: var(--muted); font-size: 11px; }
.ops-contract-grid strong { display: block; margin: 9px 0 3px; font-size: 13px; }
.ops-section { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.ops-section-head span { color: var(--muted); font-size: 12px; }
.ops-timeline { margin-top: 12px; }
.ops-timeline-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; padding: 0 0 18px; position: relative; }
.ops-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.ops-step { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--ops-navy); font-size: 12px; font-weight: 800; }
.ops-step-body { min-width: 0; padding-top: 3px; }
.ops-step-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ops-step-body p, .ops-step-body small { display: block; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.ops-inline-error { margin-top: 7px; color: var(--red); font-size: 12px; }
.ops-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ops-evidence-list, .ops-version-list { display: grid; gap: 8px; margin-top: 10px; }
.ops-evidence-list article, .ops-version-list article { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; }
.ops-evidence-list a { color: var(--ops-teal); font-weight: 700; text-decoration: none; }
.ops-version-list article { grid-template-columns: auto minmax(0, 1fr); }
.ops-version-list small { grid-column: 2; }
.ops-review-copy { color: var(--muted); font-size: 13px; line-height: 1.6; }
.ops-fact-list, .ops-unknown-list, .ops-analysis-list { display: grid; gap: 10px; margin-top: 10px; }
.ops-fact-list article, .ops-unknown-list article, .ops-analysis-list article, .ops-conclusion { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfa; }
.ops-fact-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ops-fact-head code { color: var(--ops-teal); font-size: 11px; }
.ops-fact-list pre { max-height: 220px; overflow: auto; margin: 9px 0; padding: 10px; border-radius: 6px; color: #29413f; background: #eef5f3; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ops-fact-list small, .ops-unknown-list small, .ops-analysis-list small, .ops-conclusion small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.ops-fact-list p, .ops-unknown-list p, .ops-analysis-list p, .ops-conclusion p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.ops-calendar-list { display: grid; gap: 12px; }
.ops-day-group { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.ops-day-label { display: grid; align-content: start; gap: 5px; }
.ops-day-label span { color: var(--muted); font-size: 12px; }
.ops-day-items { display: grid; gap: 7px; }
.ops-day-items article { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-left: 3px solid #8fb7af; background: #f7faf9; }
.ops-day-items time { color: var(--ops-teal); font-weight: 800; }
.ops-day-items article div { display: grid; gap: 3px; }
.ops-day-items span, .ops-day-items small { color: var(--muted); font-size: 11px; }
.ops-empty { padding: 18px; color: var(--muted); text-align: center; }
.ops-empty-large { min-height: 180px; display: grid; place-items: center; }
.ops-view.is-loading { cursor: progress; }
.ops-view.is-loading .ops-plan-list, .ops-view.is-loading .ops-calendar-list, .ops-view.is-loading .ops-retrospective-list { opacity: .6; }
@media (max-width: 1120px) { .ops-current-layout, .ops-retrospective-layout, .ops-two-columns { grid-template-columns: 1fr; } .ops-plan-list, .ops-retrospective-list { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ops-contract-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ops-plan-list, .ops-retrospective-list, .ops-contract-grid { grid-template-columns: 1fr; } .ops-day-group { grid-template-columns: 1fr; } .ops-day-items article { grid-template-columns: 52px minmax(0, 1fr); } .ops-day-items .ops-status { grid-column: 2; } .ops-page-head { align-items: flex-start; } }