/* Standalone reconstructed screens (D3, D4, E5).
   Uses ONLY the semantic tokens defined in ../styles.css (AIIS v2.1 light + project dark extension).
   No token is redefined here. */
body.scr { background: var(--bg); font-size: 14px; line-height: 1.45; }
.scr-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--s-12); padding: var(--s-8) var(--s-24); background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: var(--fs-label); color: var(--text-muted); }
.scr-bar a { font-weight: 600; }
.scr-bar .grow { flex: 1; }
.scr-flag { display: inline-flex; align-items: center; gap: var(--s-4); font-weight: 600; color: var(--text-strong); }
.scr-app { max-width: 1440px; margin: 0 auto; padding: var(--s-20) var(--s-24) var(--s-32); }
.scr-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-12) var(--s-24); margin-bottom: var(--s-16); }
.scr-head h1 { font-size: 1.5rem; line-height: 1.25; }
.scr-head p { color: var(--text-muted); font-size: var(--fs-label); margin-top: var(--s-4); }
.scr-head .grow { flex: 1 1 320px; }
.scr-meta { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.illus { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-label); font-weight: 600; color: var(--text-strong); background: var(--surface-sunk); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); padding: var(--s-4) var(--s-8); }
.pill { display: inline-flex; align-items: center; gap: var(--s-4); font-size: var(--fs-label); padding: var(--s-4) var(--s-8); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); white-space: nowrap; }
.grid { display: grid; gap: var(--s-16); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-16); min-width: 0; }
.panel h2 { font-size: 1rem; margin-bottom: var(--s-12); display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.panel h2 .sub { font-size: var(--fs-label); font-weight: 400; color: var(--text-muted); }
.panel h3 { font-size: 0.875rem; margin: var(--s-12) 0 var(--s-8); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-4) var(--s-16); font-size: var(--fs-label); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-strong); font-weight: 500; }
.lst { list-style: none; display: grid; gap: var(--s-8); }
.lst li { display: grid; gap: var(--s-2); padding: var(--s-8) var(--s-12); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-label); }
.lst .t { color: var(--text-strong); font-weight: 600; font-size: 0.875rem; }
.lst .m { color: var(--text-muted); }
.row { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.row.sb { justify-content: space-between; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.tbl th { text-align: left; font-weight: 600; color: var(--text-muted); padding: var(--s-8); border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.tbl td { padding: var(--s-8); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); }
.tbl tr[aria-selected="true"] td { background: var(--accent-soft); }
.tbl tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.scroll-x { overflow-x: auto; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--text-muted); }
.chart .grid-l { stroke: var(--border); stroke-width: 1; }
.chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-16); font-size: var(--fs-label); color: var(--text-muted); margin-top: var(--s-8); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-8); }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; }
.state--review { color: var(--status-info); background: var(--status-info-soft); }
.state--dismiss { color: var(--text-muted); background: var(--surface-sunk); }
.state--offline { color: var(--text-muted); background: var(--surface-sunk); }
.obs, .hyp { border-left: 3px solid; padding: var(--s-8) var(--s-12); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); font-size: var(--fs-label); }
.obs { border-color: var(--border-strong); }
.hyp { border-color: var(--accent); }
.obs b, .hyp b { display: block; color: var(--text-strong); font-size: 0.8125rem; margin-bottom: var(--s-2); }
.note { font-size: var(--fs-label); color: var(--text-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-12); }
.actions .btn { min-height: 36px; padding: var(--s-4) var(--s-12); font-size: var(--fs-label); }
.steps-v { list-style: none; display: grid; gap: 0; counter-reset: s; }
.steps-v li { position: relative; padding: 0 0 var(--s-12) var(--s-32); font-size: var(--fs-label); }
.steps-v li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11px; border: 1.5px solid var(--border-strong); color: var(--text-muted); background: var(--surface); }
.steps-v li::after { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: var(--border-strong); }
.steps-v li:last-child::after { display: none; }
.steps-v li.done::before { content: "✓"; border-color: var(--status-success); color: var(--status-success); }
.steps-v li.now::before { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.steps-v li b { display: block; color: var(--text-strong); font-size: 0.8125rem; }
.steps-v li span { color: var(--text-muted); }
.cam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); }
.cam button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: var(--s-8); padding: var(--s-8); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.cam button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cam button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: var(--surface-sunk); border: 1px solid var(--border); overflow: hidden; }
.frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame .nofeed { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-label); color: var(--text-muted); }
.frame .lbl { position: absolute; left: var(--s-8); bottom: var(--s-8); font-size: 10.5px; padding: 1px var(--s-4); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.cam .cap, .camtile .cap { display: flex; justify-content: space-between; gap: var(--s-8); align-items: center; font-size: var(--fs-label); font-weight: 600; color: var(--text-strong); }
.metric { display: grid; gap: var(--s-2); padding: var(--s-12); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.metric .v { font-size: 1.375rem; font-weight: 650; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.metric .l { font-size: var(--fs-label); color: var(--text-muted); }
@media (max-width: 1023px) { .grid { grid-template-columns: 1fr !important; } .cam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .scr-app { padding: var(--s-16); } .cam { grid-template-columns: 1fr; } .scr-bar { padding: var(--s-8) var(--s-16); } }
.grid > * { min-width: 0; }
.scr-meta .pill { white-space: normal; }
.scroll-x { position: relative; }
.frame .nofeed svg { position: static; width: 18px; height: 18px; }
.frame .nofeed { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }