.status-page { min-width: 320px; background: #f4f6f8; color: var(--ink); }
.status-main { width: min(calc(100% - 40px), 1760px); margin: 0 auto; padding: 38px 0 56px; }
.status-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: end; padding: 8px 0 28px; border-bottom: 1px solid var(--line); }
.status-eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.status-hero h1 { max-width: 820px; margin: 0; font-size: clamp(30px,4vw,52px); line-height: 1.06; letter-spacing: -.045em; }
.status-summary { max-width: 760px; margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.snapshot-meta { min-width: 220px; padding-left: 20px; border-left: 2px solid var(--blue); display: grid; gap: 4px; }
.snapshot-meta span, .snapshot-meta small { color: var(--muted); font-size: 11px; }
.snapshot-meta strong { font-size: 18px; }
.status-caution { margin: 18px 0; padding: 12px 14px; display: flex; gap: 12px; align-items: baseline; border: 1px solid #fedf89; border-left: 3px solid var(--amber); background: #fffaeb; color: #7a2e0e; font-size: 12px; line-height: 1.5; }
.status-caution strong { flex: 0 0 auto; }
.metric-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border: 1px solid var(--line); background: var(--surface); }
.metric-grid article { min-height: 104px; padding: 17px 20px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 5px 12px; border-right: 1px solid var(--line); }
.metric-grid article:last-child { border-right: 0; }
.metric-grid span { color: var(--muted); font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.metric-grid strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 28px; letter-spacing: -.04em; }
.metric-grid small { color: var(--faint); font-size: 10px; }
.closure-board { margin-top: 20px; border: 1px solid var(--line); background: #fff; }
.closure-heading { min-height: 88px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); }
.closure-heading h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.closure-heading > p { max-width: 720px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.closure-columns { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.closure-column { min-width: 0; border-right: 1px solid var(--line); }
.closure-column:last-child { border-right: 0; }
.closure-column-head { min-height: 50px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.closure-column-head h3 { margin: 0; font-size: 12px; }
.closure-column-head span { padding: 3px 7px; border-radius: 999px; background: #fff; color: var(--muted); font-size: 9px; font-weight: 700; }
.closure-column.is-complete .closure-column-head { box-shadow: inset 0 2px 0 #12b76a; }
.closure-column.is-in-progress .closure-column-head { box-shadow: inset 0 2px 0 #2e90fa; }
.closure-column.is-blocked .closure-column-head { box-shadow: inset 0 2px 0 #f04438; }
.closure-list article { min-height: 92px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.closure-list article:last-child { border-bottom: 0; }
.closure-list article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.closure-list h4 { margin: 0; font-size: 11px; }
.closure-list strong { flex: 0 0 auto; color: var(--blue-dark); font: 700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.closure-list p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.status-workspace { min-width: 0; margin-top: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.workspace-heading { min-height: 70px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.workspace-heading h2 { margin: 0 0 4px; font-size: 16px; }
.workspace-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.workspace-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.scope-legend { display: flex; align-items: center; gap: 8px; }
.scope-legend > span { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 8px; white-space: nowrap; }
.scope-legend b { font-weight: 700; }
.scope-dot { width: 7px; height: 7px; border-radius: 50%; }
.scope-dot.is-local { background: #12b76a; }
.scope-dot.is-owner { background: #2e90fa; }
.qa-link { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.qa-link:hover, .qa-link:focus-visible { border-color: var(--blue); color: var(--blue-dark); }
.status-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.filter-bar { padding: 10px 12px; display: flex; gap: 8px; border-bottom: 1px solid var(--line); background: var(--subtle); }
.filter-bar label { margin: 0; }
.filter-bar input, .filter-bar select { height: 34px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink-soft); font: inherit; font-size: 12px; outline: none; }
.filter-bar input { width: min(360px,36vw); padding: 0 11px; }
.filter-bar select { min-width: 180px; padding: 0 32px 0 10px; }
.filter-bar input:focus-visible, .filter-bar select:focus-visible, .table-shell:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(54,87,245,.13); }
.table-shell { contain: inline-size; max-width: 100%; min-width: 0; max-height: 640px; overflow: auto; outline: none; }
.status-table { width: 100%; min-width: 1540px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 11px; }
.status-table th { position: sticky; top: 0; z-index: 3; height: 54px; padding: 0 10px; border-bottom: 1px solid var(--line-strong); background: #f8f9fb; color: var(--muted); text-align: left; font-size: 10px; font-weight: 700; line-height: 1.35; white-space: pre-line; }
.status-table td { height: 48px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: #fff; vertical-align: middle; }
.status-table tr:hover td { background: #f9fafb; }
.status-table th:nth-child(1), .status-table td:nth-child(1) { width: 205px; }
.status-table th:nth-child(2), .status-table td:nth-child(2) { width: 52px; text-align: center; }
.status-table th:nth-child(3), .status-table td:nth-child(3) { width: 105px; }
.status-table th:nth-child(n+4):nth-child(-n+19), .status-table td:nth-child(n+4):nth-child(-n+19) { width: 96px; text-align: center; }
.status-table th:nth-child(20), .status-table td:nth-child(20) { width: 108px; }
.status-table th:nth-child(21), .status-table td:nth-child(21) { width: 340px; }
.technical-status-table { min-width: 1320px; }
.technical-status-table th:nth-child(1), .technical-status-table td:nth-child(1) { width: 200px; text-align: left; }
.technical-status-table th:nth-child(n+2), .technical-status-table td:nth-child(n+2) { width: 112px; text-align: center; }
.status-table .sticky-product { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--line); }
.status-table th.sticky-product { z-index: 5; }
.product-cell-content { display: flex; align-items: center; gap: 10px; }
.product-cell img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; background: #fff; }
.product-cell span { min-width: 0; display: grid; gap: 2px; }
.product-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.product-cell small { color: var(--faint); font-size: 9px; }
.evidence-trigger { width: max-content; padding: 0; border: 0; background: transparent; color: var(--blue-dark); font-size: 9px; font-weight: 650; cursor: pointer; }
.evidence-trigger:hover, .evidence-trigger:focus-visible { text-decoration: underline; outline: none; }
.mono-cell { color: var(--muted); font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.progress-cell { display: grid; grid-template-columns: 34px 1fr; gap: 7px; align-items: center; }
.progress-cell > span { height: 4px; overflow: hidden; background: #eaecf0; }
.progress-cell i { display: block; height: 100%; background: var(--blue); }
.progress-cell i[data-progress="93"] { width: 93%; }
.progress-cell i[data-progress="97"] { width: 97%; }
.progress-cell i[data-progress="98"] { width: 98%; }
.progress-cell i[data-progress="99"] { width: 99%; }
.gate-status { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 7px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.gate-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gate-status.is-compact { min-width: 23px; justify-content: center; padding: 0 6px; }
.gate-scope-stack { display: inline-grid; grid-template-columns: repeat(2,23px); gap: 4px; justify-content: center; }
.gate-scope-stack.is-owner { grid-template-columns: 23px; }
.gate-scope-layer { display: grid; justify-items: center; gap: 1px; }
.gate-scope-layer > small { color: var(--faint); font: 700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.gate-scope-layer.is-local > small { color: #067647; }
.gate-scope-layer.is-owner > small { color: #175cd3; }
.gate-scope-layer .gate-status { min-height: 18px; }
.gate-cell .gate-status span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.is-pass { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.is-partial { border-color: #b2ddff; background: #eff8ff; color: #175cd3; }
.is-blocked { border-color: #fecdca; background: #fef3f2; color: #b42318; }
.is-not-run { border-color: #fedf89; background: #fffaeb; color: #b54708; }
.is-na { border-color: var(--line); background: #f9fafb; color: var(--faint); }
.blocker-cell { color: var(--muted); line-height: 1.35; }
.empty-result { padding: 48px; color: var(--muted); text-align: center; }
.source-note { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line); background: #fff; }
.source-note h2 { margin: 0 0 14px; font-size: 14px; }
.source-note > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.source-note p { margin: 0; display: grid; gap: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.source-note strong { color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.evidence-dialog { width: min(calc(100% - 32px),720px); max-height: min(760px,calc(100vh - 40px)); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); box-shadow: var(--shadow-pop); }
.evidence-dialog::backdrop { background: rgba(11,18,32,.44); }
.evidence-dialog-head { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.evidence-product { display: flex; align-items: center; gap: 12px; }
.evidence-product img { width: 38px; height: 38px; border-radius: 10px; object-fit: contain; }
.evidence-product span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.evidence-product h2 { margin-top: 2px; font-size: 16px; }
.evidence-dialog-head > button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 20px; cursor: pointer; }
.evidence-dialog-body { padding: 16px; overflow: auto; }
.evidence-facts { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); }
.evidence-facts p { min-height: 66px; padding: 11px 12px; display: grid; align-content: center; gap: 4px; border-right: 1px solid var(--line); }
.evidence-facts p:last-child { border-right: 0; }
.evidence-facts span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.evidence-facts strong { font-size: 13px; }
.evidence-blocker { margin: 14px 0; padding: 12px; border-left: 3px solid var(--amber); background: #fffaeb; color: #7a2e0e; font-size: 11px; line-height: 1.55; }
.evidence-gates { display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.evidence-gates > div { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evidence-gates > div > span { color: var(--muted); font-size: 10px; }
.evidence-links { margin-top: 14px; display: flex; gap: 8px; }
.evidence-links a { height: 32px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--blue-dark); font-size: 10px; font-weight: 700; }
.status-footer { width: min(calc(100% - 40px),1760px); margin: 0 auto; padding: 18px 0 28px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 1180px) { .metric-grid { grid-template-columns: repeat(3,1fr); } .metric-grid article:nth-child(3n) { border-right: 0; } .metric-grid article:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }
@media (max-width: 980px) { .closure-columns { grid-template-columns: 1fr; } .closure-column { border-right: 0; border-bottom: 1px solid var(--line); } .closure-column:last-child { border-bottom: 0; } .source-note > div { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .status-main { width: min(calc(100% - 24px),1760px); padding-top: 24px; } .status-hero { grid-template-columns: 1fr; gap: 20px; } .snapshot-meta { min-width: 0; } .status-caution { align-items: flex-start; flex-direction: column; gap: 4px; } .metric-grid { grid-template-columns: repeat(2,1fr); } .metric-grid article:nth-child(3n) { border-right: 1px solid var(--line); } .metric-grid article:nth-child(2n) { border-right: 0; } .metric-grid article:nth-child(-n+4) { border-bottom: 1px solid var(--line); } .closure-heading { align-items: flex-start; flex-direction: column; gap: 10px; } .workspace-heading { align-items: flex-start; flex-direction: column; } .workspace-tools { align-items: flex-start; flex-direction: column; } .status-legend { justify-content: flex-start; } .filter-bar { flex-wrap: wrap; } .filter-bar label, .filter-bar input, .filter-bar select { width: 100%; } .status-footer { width: min(calc(100% - 24px),1760px); flex-direction: column; gap: 6px; } .evidence-facts { grid-template-columns: 1fr; } .evidence-facts p { border-right: 0; border-bottom: 1px solid var(--line); } .evidence-facts p:last-child { border-bottom: 0; } }
@media (max-width: 460px) { .metric-grid { grid-template-columns: 1fr; } .metric-grid article, .metric-grid article:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); } .metric-grid article:last-child { border-bottom: 0; } .status-hero h1 { font-size: 34px; } }