/* Review components use the shared app tokens. Image coordinates are evidence data. */
.review-app *, .review-app *::before, .review-app *::after { box-sizing: border-box; }
.review-app { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-body); }
.review-app h1,.review-app h2,.review-app h3 { line-height: var(--leading-heading); margin: 0 0 var(--space-3); }
.review-app h1 { font-size: var(--text-3xl); max-width: var(--measure); }
.review-app h2 { font-size: var(--text-2xl); }
.review-app h3 { font-size: var(--text-xl); }
.review-app p { margin: 0 0 var(--space-3); max-width: var(--measure); }
.review-app a { color: var(--color-brand); text-underline-offset: .18em; }
.review-app button,.review-app select { font-family: var(--font-sans); font-size: var(--text-md); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-text-muted); border-radius: var(--radius); line-height: var(--leading-body); }
.review-app button { min-height: 44px; padding: var(--space-2) var(--space-3); cursor: pointer; }
.review-app button:hover { background: var(--color-surface); }
.review-app button[disabled] { cursor: default; opacity: .5; }
.review-app :focus-visible { outline: var(--focus-ring); outline-offset: var(--space-1); }
.review-app [hidden] { display: none !important; }
.review-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.review-app .skip-link { position: absolute; z-index: 10; inset-inline-start: var(--space-4); inset-block-start: calc(-1 * var(--space-16)); padding: var(--space-3); background: var(--color-brand); color: var(--color-on-brand); }
.review-app .skip-link:focus { inset-block-start: var(--space-2); }
.review-app main { max-width: 92rem; margin-inline: auto; padding: var(--space-6) var(--space-6) var(--space-16); }
.review-app .eyebrow { font-size: var(--text-sm); font-weight: bold; color: var(--color-text-muted); margin-block-end: var(--space-2); }
.review-app .lead { font-size: var(--text-lg); margin-block-end: var(--space-6); }
.review-app .guided { border-block-start: 1px solid var(--color-border); border-block-end: 0; padding-block: var(--space-6) var(--space-4); margin-block-start: var(--space-12); }
.review-app .guided-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-2) 0 0; counter-reset: stop; }
.review-app .guided-list li { counter-increment: stop; min-width: 0; }
.review-app .guided-list a { display: block; height: 100%; border: 1px solid var(--color-border); padding: var(--space-3); text-decoration: none; }
.review-app .guided-list a:hover { border-color: var(--color-brand); background: var(--color-surface); }
.review-app .guided-list strong { display: block; color: var(--color-text); margin-block-end: var(--space-1); }
.review-app .guided-list strong::before { content: counter(stop) '. '; color: var(--color-brand); }
.review-app .guided-list span { display: block; color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-body); }
.review-app .muted,.review-app .source-notice { color: var(--color-text-muted); }
.review-app section[id] { scroll-margin-block-start: var(--space-6); }
.review-app .review-controls { border-block-start: 1px solid var(--color-border); padding-block: var(--space-2) var(--space-4); margin-block-end: var(--space-3); }
.review-app .area-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); border-block-end: 1px solid var(--color-border); }
.review-app .area-tabs button { border: 0; border-radius: 0; background: none; padding: var(--space-2) 0; margin-block-end: -1px; color: var(--color-text-muted); font-weight: 600; }
.review-app .area-tabs button:hover { background: none; color: var(--color-brand); }
.review-app .area-tabs button[aria-pressed=true] { color: var(--color-brand); border-block-end: 3px solid var(--color-brand); }
.review-app .area-tabs button[data-category=shared] { margin-inline-start: auto; }
.review-app .category-summary { width: 100%; padding: var(--space-3) var(--space-4); margin-block: var(--space-3) 0; border-inline-start: var(--highlight-bar); background: var(--color-surface); }
.review-app .screen-controls { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding-block-start: var(--space-3); }
.review-app .control { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: bold; min-width: min(100%,22rem); }
.review-app select { width: 100%; min-height: 44px; padding: var(--space-2); }
.review-app .step-controls { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.review-app .step-controls p { margin: 0; font-size: var(--text-sm); }
.review-app .step-controls button { border-color: var(--color-border); }
.review-app .workspace { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(19rem,.85fr); gap: var(--space-4); align-items: start; }
.review-app .screenshot-card { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.review-app .image-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--color-border); }
.review-app .image-toolbar h3 { font-size: var(--text-md); margin: 0; }
.review-app .zoom-controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.review-app .zoom-controls button,.review-app .zoom-controls a { font-size: var(--text-sm); }
.review-app .zoom-controls [aria-pressed=true] { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand); }
.review-app .image-viewport { overflow: auto; max-height: min(72dvh,48rem); min-height: 15rem; background: var(--color-surface); }
.review-app .image-stage { position: relative; width: 100%; }
.review-app .image-stage img { display: block; width: 100%; height: auto; }
.review-app .image-stage.full-size { width: max-content; }
.review-app .image-stage.full-size img { width: auto; max-width: none; }
.review-app .marker { position: absolute; transform: translate(-50%,-50%); width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: transparent; border-radius: 50%; font-size: var(--text-sm); font-weight: bold; z-index: 1; isolation: isolate; }
.review-app .marker::before { content: ''; position: absolute; width: var(--space-4); height: var(--space-4); inset: 50%; transform: translate(-50%,-50%); border: 2px solid var(--color-on-brand); border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand); z-index: -1; }
.review-app .marker:hover { background: none; }
.review-app .marker:hover,.review-app .marker[aria-expanded=true] { color: var(--color-on-brand); }
.review-app .marker:hover::before,.review-app .marker[aria-expanded=true]::before { width: var(--space-6); height: var(--space-6); background: var(--color-text); box-shadow: 0 0 0 2px var(--color-focus); }
.review-app .marker.pulse::before { animation: review-pulse 1.3s ease-in-out 2; }
@keyframes review-pulse { 50% { box-shadow: 0 0 0 5px var(--color-focus); } }
.review-app .feedback-panel { max-height: calc(min(72dvh,48rem) + 3.8rem); overflow: auto; position: sticky; top: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); }
.review-app .selected-note { padding: var(--space-4); border-block-start: var(--highlight-bar); }
.review-app .selected-note h3 { font-size: var(--text-xl); margin-block: var(--space-2); }
.review-app .feedback-meta { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; margin-block-end: var(--space-2); }
.review-app .comment-id { font-size: var(--text-sm); font-weight: bold; color: var(--color-text-muted); }
.review-app .pill { display: inline-block; font-size: var(--text-sm); font-weight: bold; color: var(--color-text-muted); margin: 0; }
.review-app .pill.keep { color: var(--success-text); }
.review-app .pill.question { color: var(--warning-text); }
.review-app .feedback-copy { font-size: var(--text-md); }
.review-app .note-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-block-start: var(--space-4); }
.review-app .note-actions button { font-size: var(--text-sm); }
.review-app .note-actions #copy-link { border: 0; background: none; color: var(--color-brand); text-decoration: underline; }
.review-app button.primary { color: var(--color-on-brand); background: var(--color-brand); border-color: var(--color-brand); }
.review-app button.primary:hover { text-decoration: underline; }
.review-app .notes-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-1); border-block-start: 1px solid var(--color-border); }
.review-app .notes-heading h3 { font-size: var(--text-md); margin: 0; }
.review-app .notes-heading p { font-size: var(--text-sm); margin: 0; }
.review-app .comment-group { margin: 0; }
.review-app .comment-group h4 { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; padding: var(--space-3) var(--space-4) var(--space-1); }
.review-app .comment-list { padding: 0; margin: 0; list-style: none; display: block; }
.review-app .comment-item { width: 100%; min-height: 44px; text-align: start; display: flex; align-items: baseline; gap: var(--space-2); border: 0; border-block-end: 1px solid var(--color-border); border-radius: 0; padding: var(--space-2) var(--space-4); }
.review-app .comment-item[aria-expanded=true] { box-shadow: inset 3px 0 0 var(--color-brand); background: var(--color-surface); }
.review-app .comment-number { color: var(--color-brand); font-weight: bold; min-width: 3ch; }
.review-app .shared-view .comment-number { display: none; }
.review-app .comment-kind { display: block; color: var(--color-text-muted); font-size: var(--text-sm); margin-block-start: var(--space-1); }
.review-app .more-context { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); border-block-start: 1px solid var(--color-border); margin-block-start: var(--space-4); }
.review-app .more-context details { min-width: 0; margin: 0; border: 0; }
.review-app .more-context summary { font-size: var(--text-lg); padding-block: var(--space-4); }
.review-app .more-context details > div { padding-block-end: var(--space-4); }
.review-app .table-scroll { overflow: auto; max-width: 100%; margin-block-end: var(--space-4); }
.review-app table { border-collapse: collapse; width: 100%; text-align: start; font-size: var(--text-md); }
.review-app th,.review-app td { border-block-end: 1px solid var(--color-border); padding: var(--space-3); vertical-align: top; min-width: 9rem; }
.review-app th { background: var(--color-surface); }
.review-app details { margin-block: var(--space-4); }
.review-app summary { cursor: pointer; font-weight: bold; padding-block: var(--space-3); }
.review-app .notice,.review-app .image-error { background: var(--warning-bg); color: var(--warning-text); padding: var(--space-4); margin-block: var(--space-4); border-inline-start: 3px solid var(--warning-text); }
.review-app dialog { color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-text-muted); border-radius: var(--radius); padding: var(--space-6); max-width: min(52rem,calc(100% - var(--space-8))); max-height: 85dvh; overflow: auto; }
.review-app .dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-block-end: var(--space-4); }
.review-app .dialog-toolbar p { margin: 0; }
.review-app .evidence-links { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; list-style: none; }
.review-app .evidence-links a { display: inline-block; padding: var(--space-2); border: 1px solid var(--color-border); }
.review-app .evidence-location { color: var(--color-text-muted); font-size: var(--text-sm); margin-block: 0 var(--space-4); }
.review-app .evidence-section { padding-block: var(--space-3); border-block-start: 1px solid var(--color-border); }
.review-app .evidence-section h3 { font-size: var(--text-md); margin-block-end: var(--space-2); }
.review-app .evidence-section p { margin: 0; }
.review-app .full-finding-link { display: inline-block; margin-block: var(--space-4); }
.review-app .evidence-more { border-block-start: 1px solid var(--color-border); margin-block: 0; }
.review-app .evidence-more summary { font-size: var(--text-sm); }
.review-app .evidence-more p { font-size: var(--text-sm); }
.review-app .finding-detail { border-block-start: 1px solid var(--color-border); margin-block-start: var(--space-6); padding-block-start: var(--space-6); }
.review-app .source-page { max-width: 65rem; }
.review-app .source-page article { overflow-wrap: anywhere; }
.review-app .source-page img { max-width: 100%; height: auto; }
.review-app .source-page h2,.review-app .source-page h3 { margin-block-start: var(--space-8); }
.review-app .source-page code { overflow-wrap: anywhere; }
.review-app .source-page pre { overflow: auto; }
@media (max-width: 64rem) { .review-app .workspace { grid-template-columns: minmax(0,1fr); } .review-app .feedback-panel { position: static; max-height: none; overflow: visible; } .review-app .comment-groups { max-height: 24rem; overflow: auto; } .review-app .guided-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 40rem) { .review-app main { padding: var(--space-6) var(--space-4) var(--space-12); } .review-app h1 { font-size: var(--text-3xl); } .review-app .guided-list { grid-template-columns: 1fr; } .review-app .area-tabs { gap: 0 var(--space-4); } .review-app .area-tabs button { font-size: var(--text-sm); } .review-app .screen-controls .control { width: 100%; } .review-app .image-toolbar { align-items: start; flex-wrap: wrap; } .review-app .image-viewport { max-height: 25rem; } .review-app dialog { padding: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .review-app *, .review-app *::before,.review-app *::after { animation: none !important; scroll-behavior: auto !important; } }