:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #091013; color: #e8f1f3; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 12% -20%, #12343d 0, transparent 32rem), #091013; }
button { font: inherit; }
.review-shell { width: min(100% - 32px, 1680px); margin: 0 auto; padding: 32px 0 56px; }
.review-header { max-width: 980px; }
.eyebrow { margin: 0 0 8px; color: #74e2f4; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.055em; }
.lede { max-width: 78ch; color: #a9bbbf; line-height: 1.55; }
.summary { color: #7ce2ab; font-weight: 650; }
.screen-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 7px; margin: 28px 0; }
.screen-list button { min-height: 56px; padding: 9px 10px; border: 1px solid #22363c; border-radius: 10px; background: #101a1d; color: #bed0d4; cursor: pointer; text-align: left; }
.screen-list button:hover, .screen-list button:focus-visible { border-color: #68d6e9; outline: none; }
.screen-list button[aria-current="true"] { background: #12313a; border-color: #72dff2; color: white; }
.screen-list .number { display: block; color: #74e2f4; font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.screen-list .missing { color: #f5b575; }
.comparison { min-height: 700px; }
@supports (aspect-ratio: 1) { @media (max-width: 700px) { .frames { gap: 12px; } } }
.comparison-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin: 0 0 14px; }
.comparison h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -.03em; }
.pair-status { color: #a9bbbf; font-size: .9rem; text-align: right; }
.pair-status strong { color: #7ce2ab; }
/* STACKED, EACH A TRUE 16:9. Side by side gave each pane about half the page width and
   a tall narrow box, so neither the app nor the design page was being shown at the shape
   it is actually designed for -- the app renders at 1280x800 and the package pages at the
   same. Two full-width 16:9 panes, one above the other, with the page scrolling, shows
   both at a sane size and puts the same region of each directly above the other, which is
   what makes a difference visible. */
.frames { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.frame { position: relative; min-width: 0; border: 1px solid #2a4148; border-radius: 12px; overflow: hidden; background: #05090a; box-shadow: 0 20px 50px rgb(0 0 0 / .2); }
.frame-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #243b41; background: #101a1d; }
.frame-title { display: grid; gap: 2px; min-width: 0; }
.frame-title b { font-size: .87rem; }
.frame-title small { color: #9eb1b6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-state { display: inline-flex; align-items: center; gap: 7px; color: #84eab0; font-size: .72rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.motion-dot { width: 9px; height: 9px; border-radius: 99px; background: #6dffaf; box-shadow: 0 0 0 0 rgb(109 255 175 / .8); animation: review-live-pulse 1.15s ease-out infinite; }
.frame[data-side="package"] .motion-dot { background: #79dcff; box-shadow: 0 0 0 0 rgb(121 220 255 / .8); animation-name: review-package-pulse; }
.frame-body { position: relative; width: 100%; aspect-ratio: 16 / 9; height: auto; min-height: 0; background: #080c0d; }
@supports not (aspect-ratio: 16 / 9) { .frame-body { height: 0; padding-bottom: 56.25%; } }
iframe { display: block; width: 100%; height: 100%; border: 0; background: #080c0d; }
.missing-package { display: grid; place-items: center; height: 100%; min-height: 0; padding: 32px; background: linear-gradient(135deg, #1e1711, #0e1416); color: #f4d1a8; text-align: center; line-height: 1.5; }
.missing-package strong { display: block; color: #fff0da; font-size: 1.1rem; margin-bottom: 8px; }
.frame-foot { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid rgb(198 247 255 / .25); border-radius: 999px; background: rgb(3 11 13 / .82); color: #c9edf1; font-size: .68rem; backdrop-filter: blur(7px); }
.frame-foot .motion-line { width: 28px; height: 2px; background: linear-gradient(90deg, transparent, #7cf6ff, transparent); animation: review-sweep 1.3s linear infinite; }
@keyframes review-live-pulse { 70% { box-shadow: 0 0 0 9px rgb(109 255 175 / 0); } 100% { box-shadow: 0 0 0 0 rgb(109 255 175 / 0); } }
@keyframes review-package-pulse { 70% { box-shadow: 0 0 0 9px rgb(121 220 255 / 0); } 100% { box-shadow: 0 0 0 0 rgb(121 220 255 / 0); } }
@keyframes review-sweep { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
@media (max-width: 900px) { .frames { grid-template-columns: 1fr; } .frame-body { height: 80vw; } .comparison-head { display: block; } .pair-status { text-align: left; margin-top: 8px; } }

/* The decisions link. The owner asked where the decisions were: they existed as plan
   artifacts he had no way to reach, which is the same failure as a review that lives only
   in a terminal. A deliverable he cannot open has not been delivered. */
.review-tabs { margin-top: 14px; }
.review-tab { display: inline-block; padding: 9px 14px; border: 1px solid #2d707a; border-radius: 9px;
  background: #12262b; color: #7cf6ff; text-decoration: none; font-weight: 600; }
.review-tab:hover { border-color: #7cf6ff; }
.decisions { max-width: 980px; }
.decisions h2 { margin: 34px 0 10px; font-size: 1.35rem; }
.decisions table { width: 100%; border-collapse: collapse; margin: 14px 0; background: #0d1315; }
.decisions th, .decisions td { padding: 9px 12px; border-bottom: 1px solid #26343a; text-align: left; }
.decisions th { color: #9eb1b6; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }
.decisions td.num, .decisions th.num { text-align: right; font-variant-numeric: tabular-nums; }
.decisions .ask { margin: 16px 0; padding: 14px 16px; border-left: 3px solid #7ce2ab;
  background: #10201a; border-radius: 0 9px 9px 0; }
.decisions .ask b { color: #7ce2ab; }
.decisions .note { color: #a9bbbf; }
.decisions code { color: #c7e8eb; }

/* TASK 7997 owner reviews are generated from the plan and grouped into one
   judgement kind per sitting. Review material stays full-width so the thing
   being judged remains the dominant object, not the decision controls. */
.owner-review-groups { display: grid; gap: 34px; margin-top: 30px; }
.owner-review-group > h2 { margin: 0 0 14px; font-size: 1.35rem; }
.owner-review-cards { display: grid; gap: 18px; }
.owner-review-card { padding: 18px; border: 1px solid #2a4148; border-radius: 12px; background: #0d1518; }
.owner-review-card h3 { margin: 3px 0 16px; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.owner-task { margin: 0; color: #74e2f4; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.owner-materials { display: grid; gap: 14px; }
.owner-material { overflow: hidden; border: 1px solid #243b41; border-radius: 9px; background: #080c0d; }
.owner-material-title { margin: 0; padding: 9px 12px; border-bottom: 1px solid #243b41; color: #a9bbbf; font-size: .8rem; font-weight: 700; }
.owner-material img { display: block; width: 100%; height: auto; background: #080c0d; }
.owner-material iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.owner-copy { margin: 0; padding: 18px; color: #e8f1f3; font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
.owner-material-error { margin: 0; padding: 18px; color: #f4d1a8; }
.owner-answer { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; padding: 0; border: 0; }
.owner-answer legend { width: 100%; margin-bottom: 2px; color: #a9bbbf; font-size: .82rem; font-weight: 700; }
.owner-answer label { display: inline-flex; align-items: center; gap: 7px; min-width: 92px; min-height: 44px; padding: 9px 13px; border: 1px solid #2d707a; border-radius: 9px; background: #12262b; color: #d9f5f8; cursor: pointer; font-weight: 700; }
.owner-answer label:has(input:checked) { border-color: #7cf6ff; background: #12313a; color: white; }
.owner-answer label:focus-within { outline: 2px solid #7cf6ff; outline-offset: 2px; }
.owner-answer input { accent-color: #2ac0f0; }
.owner-answer-status { align-self: center; margin: 0 0 0 4px; color: #7ce2ab; font-size: .82rem; }
.owner-empty { margin-top: 30px; padding: 28px; border: 1px solid #2a4148; border-radius: 12px; background: #0d1518; text-align: center; }
.owner-empty h2 { margin: 0 0 8px; }
.owner-empty strong { display: block; margin-top: 14px; color: #f5b575; font-size: clamp(2rem, 6vw, 4rem); }
.owner-not-ready { padding: 16px 18px; border: 1px solid #493b2d; border-radius: 12px; background: #18130f; }
.owner-not-ready summary { color: #f5b575; cursor: pointer; font-weight: 750; }
.owner-not-ready ul { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 22px; color: #c9bdb1; }
.owner-not-ready strong { color: #f4d1a8; font-size: .78rem; letter-spacing: .05em; }
@media (max-width: 560px) {
  .owner-review-card { padding: 14px; }
  .owner-empty { padding: 22px 14px; }
  .owner-answer label { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-dot, .frame-foot .motion-line { animation: none; }
}