/* Browser-local product preview. All data and state changes are illustrative. */
.dashboard {
  --demo-info: #a9ccff; --demo-info-bg: #17243a; --demo-info-border: #3f5e87;
  --demo-warning: #f2cb86; --demo-warning-bg: #302719; --demo-warning-border: #765e35;
  --demo-error: #ffb5ad; --demo-error-bg: #341f21; --demo-error-border: #87524f;
  --demo-success: #a9e6c5; --demo-success-bg: #192d25; --demo-success-border: #426c58;
  --mint: var(--demo-info);
  display: block; overflow: hidden; border: 1px solid #424242; border-radius: 12px; background: #141414; box-shadow: 0 24px 70px #00000033; text-align: left; }
.dashboard button { font: inherit; }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.dash-workspace { display: flex; align-items: center; gap: 10px; color: #dbdbdb; font-size: 13px; }
.workspace-symbol { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--mint); color: #232323; border-radius: 7px; }
.slash { margin: 0 8px; color: #8f8f8f; }
.demo-label { padding: 5px 7px; border: 1px solid #494949; border-radius: 4px; color: #cccccc; font-size: 10px; letter-spacing: .8px; white-space: nowrap; }
.dash-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 24px 22px; }
.dash-eyebrow { margin: 0; color: #b7b7b7; font-size: 11px; letter-spacing: 1.5px; }
.demo-reset { min-height: 44px; flex: none; padding: 10px 13px; border: 1px solid #525252; border-radius: 5px; color: #dadada; background: #212121; font-size: 12px !important; }
.demo-reset:hover { background: #363636; }
.dash-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 24px 20px; border: 1px solid #3d3d3d; border-radius: 7px; background: #1c1c1c; }
.dash-metrics > div { padding: 17px 18px; }
.dash-metrics > div + div { border-left: 1px solid #3d3d3d; }
.dash-metrics span { display: block; color: #bdbdbd; font-size: 12px; line-height: 1.5; }
.dash-metrics strong { display: block; margin-top: 8px; font-size: 28px; font-weight: 500; color: #e9e9e9; }
.demo-guide { display: flex; align-items: flex-start; gap: 10px; margin: 0 24px 24px; padding: 13px 15px; border: 1px solid #3b3b3b; border-radius: 6px; background: #1f1f1f; }
.demo-guide > .icon { margin-top: 3px; color: var(--mint); }
.demo-guide p { font-size: 13px; color: #c5c5c5; line-height: 1.7; }
.demo-guide strong { color: #e5e5e5; font-weight: 550; }
.dash-content { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 22px; margin: 0 24px 24px; align-items: start; }
.dash-tabs { display: flex; gap: 16px; border-bottom: 1px solid #434343; margin-bottom: 14px; }
.dash-tabs button { min-height: 44px; border: 0; border-bottom: 2px solid transparent; padding: 10px 0; background: none; color: #bababa; font-size: 12px; line-height: 1.5; }
.dash-tabs button.active { border-bottom-color: var(--mint); color: #eeeeee; }
.ticket-table { display: grid; gap: 9px; }
.ticket-row { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; width: 100%; min-width: 0; padding: 17px 15px; border: 1px solid #363636; border-radius: 7px; background: #1a1a1a; text-align: left; color: var(--text); transition: border-color .15s,background .15s; }
.ticket-row:hover { background: #262626; border-color: #727272; }
.ticket-row.selected { background: #2e2e2e; border-color: #b6b6b6; box-shadow: inset 3px 0 0 var(--mint); }
.ticket-info { display: flex; flex-direction: column; gap: 9px; min-width: 0; width: 100%; }
.ticket-id { display: flex; align-items: center; justify-content: space-between; color: #cacaca; font-size: 12px; letter-spacing: .6px; }
.ticket-id .icon { width: 14px; height: 14px; flex-basis: 14px; }
.ticket-info strong { font-size: 15px; font-weight: 550; line-height: 1.5; }
.agent-name { color: #b7b7b7; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.agent-name > span { padding: 0 5px; }
.ticket-state { display: flex; gap: 7px; align-items: center; font-size: 12px; line-height: 1.5; }

.demo-empty { padding: 24px 15px; color: #cacaca; font-size: 14px; line-height: 1.8; }
.review-panel { min-width: 0; display: block; border: 1px solid #464646; border-radius: 8px; padding: 22px; background: #1c1c1c; }
.review-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: #cdcdcd; letter-spacing: .6px; line-height: 1.7; }
.review-title > span { color: #c4c4c4; letter-spacing: 0; }
.detail-heading h3 { margin: 15px 0 9px; font-size: 20px; line-height: 1.4; font-weight: 550; letter-spacing: -.4px; }
.detail-heading > p { color: #bdbdbd; font-size: 13px; line-height: 1.85; }
.detail-tabs { display: flex; gap: 4px; margin-top: 22px; border-bottom: 1px solid #424242; }
.detail-tabs button { flex: 1; min-height: 44px; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; color: #c0c0c0; background: none; font-size: 12px; }
.detail-tabs button[aria-selected=true] { color: #eaeaea; border-bottom-color: var(--mint); }
[data-detail-panel] { min-height: 240px; padding: 21px 0 10px; }
.detail-facts { margin: 0; }
.detail-facts > div { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: 10px; padding: 9px 0; font-size: 12px; line-height: 1.6; }
.detail-facts dt { color: #b4b4b4; }.detail-facts dd { margin: 0; color: #dedede; overflow-wrap: anywhere; }
.detail-facts code { font-size: 11px; }
.validation-summary { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; border: 1px solid #5e5e5e; border-radius: 6px; background: #2b2b2b; padding: 13px; }
.validation-summary > .icon { margin-top: 3px; color: var(--mint); }
.validation-summary strong { font-size: 13px; font-weight: 550; color: #e6e6e6; }.validation-summary p { font-size: 12px; margin-top: 6px; color: #c6c6c6; line-height: 1.75; }
.validation-summary.is-warning { background: #262626; border-color: #5b5b5b; }.validation-summary.is-warning strong,.validation-summary.is-warning > .icon { color: #d0d0d0; }
.demo-boundary { display: flex; gap: 8px; margin-top: 17px; color: #b8b8b8; font-size: 12px; line-height: 1.8; }.demo-boundary > .icon { flex: none; margin-top: 3px; }
.evidence-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid #404040; padding: 14px 0; font-size: 13px; line-height: 1.7; }.evidence-row > span { color: #c6c6c6; }.evidence-row strong { color: var(--mint); font-weight: 500; text-align: right; }
.sample-test-list { margin: 20px 0; }.sample-test-list p { display: flex; gap: 8px; margin: 9px 0; font-size: 12px; color: #c3c3c3; }.sample-test-list .icon { margin-top: 3px; color: var(--mint); }
.evidence-note { font-size: 11px; line-height: 1.8; color: #b3b3b3; margin-top: 16px; }
.test-failure { border: 1px solid #636363; background: #272727; padding: 12px; margin-top: 15px; color: #cecece; font-family: ui-monospace,monospace; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; }.test-failure strong { font-weight: 500; }
.file-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }.file-picker button { min-height: 44px; max-width: 100%; border: 1px solid #4e4e4e; border-radius: 5px; padding: 9px; background: #1d1d1d; color: #cbcbcb; font-size: 11px; text-align: left; overflow-wrap: anywhere; }.file-picker button[aria-pressed=true] { border-color: #bebebe; background: #3b3b3b; color: #ededed; }
.diff-view { max-width: 100%; overflow-x: auto; background: #111111; border: 1px solid #454545; border-radius: 5px; }.diff-view pre { margin: 0; padding: 13px 0; min-width: max-content; font-size: 11px; line-height: 1.9; }.diff-line { display: block; padding: 0 12px; white-space: pre; color: #d2d2d2; }.diff-add { color: #e2e2e2; background: #3434344d; }.diff-remove { color: #cacaca; background: #2c2c2c50; }
.activity-list { margin: 0; padding: 0 0 0 20px; color: #cccccc; font-size: 13px; line-height: 1.9; }.activity-list li { padding-left: 5px; margin-bottom: 16px; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 9px; border-top: 1px solid #424242; padding-top: 18px; }.demo-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 44px; border: 1px solid #636363; border-radius: 5px; padding: 11px 10px; background: #343434; color: #e4e4e4; font-size: 12px; font-weight: 550; white-space: nowrap; }.demo-actions .demo-approve { background: var(--mint); border-color: var(--mint); color: #232323; }.demo-actions button:disabled { opacity: .5; cursor: not-allowed; }.demo-actions button:not(:disabled):hover { border-color: #e9e9e9; }.approval-hint { color: #bababa; margin-top: 11px; font-size: 11px; line-height: 1.8; }
.demo-approval-gate { border: 1px solid #a8a8a8; border-radius: 6px; background: #333333; margin-top: 17px; padding: 15px; }.demo-approval-gate strong { font-size: 14px; }.demo-approval-gate p { font-size: 12px; color: #d3d3d3; margin-top: 7px; }.demo-approval-gate > div { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }.demo-approval-gate button { min-height: 44px; border: 1px solid #afafaf; padding: 9px 11px; border-radius: 5px; color: #ededed; background: #404040; font-size: 12px; }
.demo-announcer { padding: 14px 24px; margin: 0; border-top: 1px solid #404040; background: #212121; color: #dbdbdb; font-size: 12px; line-height: 1.8; }
.dash-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 13px 24px; color: #b6b6b6; font-size: 11px; line-height: 1.7; }
@media(max-width:900px) { .dash-content { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 16px; }.review-panel { padding: 18px; }.dash-workspace { font-size: 12px; }.dash-metrics > div { padding: 15px; }.dash-metrics span { font-size: 11px; }.ticket-row { padding: 15px 12px; }.detail-facts > div { grid-template-columns: 1fr; gap: 3px; } }
@media(max-width:700px) { .dash-content { grid-template-columns: 1fr; }.ticket-table { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }.ticket-row { padding: 13px 10px; gap: 10px; }.ticket-info strong { font-size: 12px; }.agent-name { display: none; }.ticket-state { font-size: 10px; line-height: 1.6; }.ticket-id { font-size: 10px; }.ticket-id .icon { display: none; }.ticket-info { gap: 9px; }.detail-facts > div { grid-template-columns: 115px minmax(0,1fr); gap: 8px; } }
@media(max-width:440px) { .dash-topbar { padding: 14px; flex-wrap: wrap; gap: 10px; }.dash-workspace { font-size: 11px; }.demo-label { font-size: 9px; }.dash-heading { padding: 21px 14px 18px; gap: 12px; }.demo-reset { min-height: 44px; }.dash-metrics { margin: 0 14px 16px; grid-template-columns: repeat(2,minmax(0,1fr)); }.dash-metrics > div { padding: 13px; }.dash-metrics > div:nth-child(3) { border-left: 0; }.dash-metrics > div:nth-child(n+3) { border-top: 1px solid #3d3d3d; }.dash-metrics strong { font-size: 26px; }.dash-metrics span { font-size: 12px; }.demo-guide { margin: 0 14px 18px; padding: 12px; }.demo-guide p { font-size: 12px; }.dash-content { margin: 0 14px 18px; gap: 15px; }.dash-tabs { gap: 15px; }.dash-tabs button { font-size: 11px; }.ticket-table { grid-template-columns: 1fr; }.ticket-row { padding: 14px; gap: 10px; }.ticket-info strong { font-size: 14px; }.ticket-info { gap: 6px; }.ticket-id { font-size: 11px; }.ticket-state { font-size: 12px; }.agent-name { display: block; font-size: 11px; }.review-panel { padding: 17px 14px; }.review-title { font-size: 10px; }.detail-heading h3 { font-size: 20px; }.detail-heading > p { font-size: 13px; }.detail-tabs button { font-size: 12px; }.detail-facts > div { grid-template-columns: 1fr; gap: 3px; font-size: 13px; }.detail-facts code { font-size: 12px; }.demo-actions { flex-direction: column; }.demo-actions button { font-size: 13px; }.demo-announcer { padding: 14px; font-size: 12px; }.dash-bottom { flex-direction: column; gap: 5px; padding: 13px 14px; font-size: 11px; } }

.review-panel { scroll-margin-top: 90px; }

/* Mission-control areas retain the shared typography and neutral surfaces. */
.demo-navigation { display:flex; flex-wrap:wrap; gap:8px; margin:0 24px 22px; padding-bottom:14px; border-bottom:1px solid #393939; }
.demo-navigation button { border:1px solid transparent; border-radius:5px; background:none; color:#ababab; padding:9px 12px; min-height:40px; font-size:12px; }
.demo-navigation button.active { color:#e8e8e8; border-color:#545454; background:#292929; }
.demo-plan { padding-left:20px; margin:0 0 22px; display:grid; gap:13px; color:#c4c4c4; font-size:13px; line-height:1.8; }
.evidence-row small { display:block; color:#a0a0a0; font-size:10px; margin-top:4px; }
.demo-requirements { display:grid; gap:10px; margin-top:18px; }
.demo-requirements article { padding:13px; border:1px solid #444444; border-radius:6px; background:#1d1d1d; }
.demo-requirements article > div { display:flex; justify-content:space-between; gap:10px; font-size:10px; color:#b0b0b0; }
.demo-requirements p { font-size:12px; color:#d1d1d1; margin:10px 0; line-height:1.8; }
.demo-requirements button { display:inline-flex; align-items:center; gap:8px; padding:8px 0; min-height:36px; color:#dcdcdc; border:0; background:none; font-size:11px; }
.demo-requirements button .icon { width:15px; height:15px; flex-basis:15px; }
.demo-requirements button:disabled { opacity:.45; cursor:default; }
.demo-requirements .confirmed { color:var(--mint); }
.demo-export { display:inline-flex; align-items:center; gap:10px; border:1px solid #575757; padding:11px 14px; min-height:42px; border-radius:5px; color:#e3e3e3; background:#2e2e2e; font-size:12px; margin-top:18px; }
.demo-execution-log { border-top:1px solid #434343; margin-top:18px; }
.demo-execution-log summary { font-size:11px; line-height:20px; min-height:44px; color:#b6b6b6; cursor:pointer; padding:12px 0; }
.demo-execution-log .activity-list { margin-top:12px; }
.demo-context { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 24px 28px; }
.demo-context > div { border:1px solid #454545; background:#1c1c1c; border-radius:8px; padding:23px; }
.demo-context h3 { margin:17px 0 12px; font-size:22px; line-height:1.4; letter-spacing:-.4px; }
.demo-context p { font-size:12px; line-height:1.9; color:#b5b5b5; }
.demo-context article { border:1px solid #4f4f4f; border-radius:6px; padding:17px; margin-top:22px; }
.demo-context article strong { color:#e4e4e4; font-size:14px; font-weight:500; }
.demo-context article p { margin:10px 0 14px; font-size:11px; }
.demo-context .dash-eyebrow { font-size:10px; }
.demo-context dl { margin:20px 0; font-size:12px; }
.demo-context dl > div { display:grid; grid-template-columns:75px minmax(0,1fr); gap:10px; padding:12px 0; border-bottom:1px solid #414141; }
.demo-context dt { color:#dfdfdf; }
.demo-context dd { margin:0; color:#b1b1b1; }
.product-availability.section-wrap { margin:24px auto 0; }
.product-availability { display:flex; align-items:flex-start; gap:20px; margin:24px 0 0; }
.product-availability .pill { flex-shrink:0; margin-top:4px; }
.product-availability p { max-width:760px; font-size:13px; line-height:1.9; color:#a6a6a6; }
@media(max-width:700px) { .demo-context { grid-template-columns:1fr; }.product-availability { flex-direction:column; gap:12px; } }
@media(max-width:440px) { .demo-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 14px 18px; gap:5px; }.demo-navigation button { font-size:11px; padding:9px 7px; }.demo-context { padding:0 14px 18px; gap:14px; }.demo-context>div { padding:19px; }.demo-context h3 { font-size:20px; }.demo-context dl>div { grid-template-columns:65px minmax(0,1fr); }.demo-plan { font-size:12px; }.demo-requirements p { font-size:12px; }.product-availability p { font-size:12px; } }
@media(max-width:440px) { .detail-tabs { gap:2px; }.detail-tabs button { font-size:11px; padding:10px 2px; } }

/* Semantic colors are scoped to the demo; labels and diff +/- markers remain visible. */
.dashboard [data-state="queued"], .dashboard [data-state="running"] { color: var(--demo-info); }
.dashboard [data-state="review"], .dashboard [data-state="unverified"] { color: var(--demo-warning); }
.dashboard [data-state="failed"] { color: var(--demo-error); }
.dashboard [data-state="passed"], .dashboard [data-state="approved"], .dashboard [data-state="confirmed"] { color: var(--demo-success); }
.dashboard .ticket-row { color: var(--text); }
.dashboard .ticket-state { padding: 4px 8px; border-radius: 4px; border: 1px solid; font-weight: 550; }
.dashboard .ticket-state[data-state="queued"], .dashboard .ticket-state[data-state="running"] { background: var(--demo-info-bg); border-color: var(--demo-info-border); }
.dashboard .ticket-state[data-state="review"] { background: var(--demo-warning-bg); border-color: var(--demo-warning-border); }
.dashboard .ticket-state[data-state="failed"] { background: var(--demo-error-bg); border-color: var(--demo-error-border); }
.dashboard .ticket-state[data-state="approved"] { background: var(--demo-success-bg); border-color: var(--demo-success-border); }
.dashboard .ticket-row.selected { border-color: var(--demo-info-border); background: #1c2532; }
.dashboard .ticket-row[data-state="failed"] { border-color: var(--demo-error-border); }
.dashboard .validation-summary[data-validation="passed"] { background: var(--demo-success-bg); border-color: var(--demo-success-border); }
.dashboard .validation-summary[data-validation="passed"] strong, .dashboard .validation-summary[data-validation="passed"] > .icon { color: var(--demo-success); }
.dashboard .validation-summary[data-validation="running"] { background: var(--demo-info-bg); border-color: var(--demo-info-border); }
.dashboard .validation-summary[data-validation="running"] strong, .dashboard .validation-summary[data-validation="running"] > .icon { color: var(--demo-info); }
.dashboard .validation-summary[data-validation="failed"], .dashboard .test-failure { background: var(--demo-error-bg); border-color: var(--demo-error-border); }
.dashboard .validation-summary[data-validation="failed"] strong, .dashboard .validation-summary[data-validation="failed"] > .icon, .dashboard .test-failure { color: var(--demo-error); }
.dashboard .dash-metrics [data-metric="running"] { color: var(--demo-info); }
.dashboard .dash-metrics [data-metric="review"] { color: var(--demo-warning); }
.dashboard .dash-metrics [data-metric="passed"], .dashboard .dash-metrics [data-metric="approved"] { color: var(--demo-success); }
.dashboard .demo-requirements article:has([data-state="confirmed"]) { border-color: var(--demo-success-border); }
.dashboard .demo-actions .demo-approve { background: #a9e6c5; border-color: #a9e6c5; color: #12251b; }
.dashboard .demo-approval-gate { background: var(--demo-warning-bg); border-color: var(--demo-warning-border); }
.dashboard .demo-approval-gate > strong { color: var(--demo-warning); }
.dashboard .demo-approval-gate [data-demo-action="confirm"] { background: var(--demo-success-bg); border-color: var(--demo-success-border); color: var(--demo-success); }
.dashboard .diff-add { color: var(--demo-success); background: #19342680; }
.dashboard .diff-remove { color: var(--demo-error); background: #3b202480; }
.dashboard a:focus-visible, .dashboard button:focus-visible, .dashboard [tabindex]:focus-visible { outline-color: var(--demo-info); }