.demo-suite { padding: 20px; margin: 24px 0; border: 1px solid #c4d3db; border-radius: 12px; background: #fff; color: #15303e; font: 14px/1.5 system-ui, sans-serif; }
.demo-suite *, .suite-dialog * { box-sizing: border-box; }
.suite-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.demo-suite h3 { font: 700 22px/1.2 system-ui, sans-serif; margin: 4px 0 0; color: #15303e; }
.suite-label { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #0d5f70; font-weight: 700; }
.suite-scope { font-size: 12px; color: #4d6571; }
.suite-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin: 12px 0; }
.demo-suite label, .suite-dialog label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.demo-suite select, .suite-dialog input { min-height: 44px; padding: 9px 12px; border: 1px solid #91a8b4; border-radius: 6px; background: #fff; color: #15303e; font: inherit; max-width: 100%; }
.demo-suite button, .suite-dialog button { min-height: 44px; padding: 9px 14px; color: #fff; background: #0d5f70; border: 1px solid #0d5f70; border-radius: 6px; font: 600 13px/1.4 system-ui, sans-serif; cursor: pointer; }
.demo-suite button:hover, .suite-dialog button:hover { background: #084955; }
.demo-suite button.suite-secondary, .suite-dialog button.suite-secondary { background: #fff; color: #0d5f70; border-color: #91a8b4; }
.demo-suite :focus-visible, .suite-dialog :focus-visible { outline: 3px solid #ba531d; outline-offset: 3px; }
.demo-suite .suite-link, .suite-dialog .suite-link { display: inline-flex; align-items: center; min-height: 44px; color: #0d5f70; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.suite-task { margin: 12px 0; color: #334f5d; }
.suite-secondary-row { padding-top: 12px; border-top: 1px solid #d4e0e5; }
.suite-status { margin: 8px 0 0; min-height: 1.5em; color: #34515f; }
.suite-status[role=alert] { color: #9b3914; font-weight: 650; }
.suite-saved { position: relative; align-self: center; }
.suite-saved summary { cursor: pointer; padding: 10px 8px; color: #0d5f70; }
.suite-saved [data-suite-saved] { max-height: 260px; overflow: auto; }
.suite-saved button { display: block; margin: 6px 0; }
.suite-dialog { width: min(940px,94vw); max-width: 98vw; max-height: 92dvh; min-width: 340px; min-height: 220px; resize: both; overflow: auto; padding: 0; border: 1px solid #7b959f; border-radius: 12px; background: #fff; color: #15303e; font: 15px/1.55 system-ui, sans-serif; }
.suite-dialog::backdrop { background: rgba(15,34,46,.65); }
.suite-dialog-head { position: sticky; top: 0; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 22px; background: #eff5f7; border-bottom: 1px solid #c4d3db; cursor: move; touch-action: none; z-index: 2; }
.suite-dialog-head h2 { margin: 4px 0 0; font-size: 21px; line-height: 1.3; }
.suite-dialog-body { padding: 22px; }
.suite-dialog h1 { font-size: 25px; line-height: 1.3; margin: 18px 0 10px; }
.suite-dialog h2 { font-size: 18px; margin-top: 20px; }
.suite-dialog p { max-width: 85ch; }
.suite-dialog dt { font-weight: 650; }
.suite-dialog dd { margin: 0 0 10px; }
.suite-dialog details { padding: 14px 0; border-top: 1px solid #d4e0e5; }
.suite-dialog summary { cursor: pointer; font-weight: 650; color: #0d5f70; }
.suite-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 14px 0; }
.suite-notice { padding: 12px 16px; border-left: 3px solid #0d5f70; background: #eaf3f5; }
.suite-source-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.suite-page-head { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid #c4d3db; background: #fff; color: #15303e; font: 14px/1.5 system-ui, sans-serif; }
.suite-page-head strong { font-size: 22px; }
.suite-standalone { background: #f4f7f9; }
.suite-standalone > main.demo-scope { max-width: 1600px; margin: auto; padding: 0 24px 32px; }
.demo-scope:has(.demo-suite) .demo-head, .demo-scope:has(.demo-suite) .demo-exit, .demo-scope:has(.demo-suite) .demo-start { display: none; }
.demo-scope:has(.demo-suite) .suite-quick .demo-done { display: none; }
.suite-standalone .demo-scope .app-frame { min-height: 72dvh; height: auto; max-height: none; }
.suite-standalone .demo-scope [data-app-main] { min-height: 65dvh; max-height: none; }
.demo-scope:has(.demo-suite) [data-app-dialog]:not([hidden]) { position: fixed; inset: 0; z-index: 2100; }
.demo-scope:has(.demo-suite) .ev-dlg { max-width: min(940px,94vw); max-height: 90dvh; resize: both; overflow: auto; }
.demo-scope:has(.demo-suite) .ev-why-block { font-family: inherit; white-space: pre-wrap; }
@media (max-width: 700px) {
 .demo-suite { padding: 16px; }
 .suite-title { display: block; }
 .suite-scope { display: block; margin-top: 8px; }
 .suite-row>label { width: 100%; }
 .suite-row select { width: 100%; }
 .suite-row { gap: 8px; }
 .suite-secondary-row button { flex: 1 1 44%; }
 .suite-dialog { width: 96vw; min-width: 0; resize: none; }
 .suite-dialog-head, .suite-dialog-body { padding: 16px; }
 .suite-fields { grid-template-columns: 1fr; }
 .suite-page-head { padding: 14px 16px; flex-wrap: wrap; }
 .suite-standalone > main.demo-scope { padding: 0 8px 20px; }
 .demo-scope:has(.demo-suite) .ev-dlg { resize: none; }
}
@media (prefers-reduced-motion: reduce) { .demo-suite *, .suite-dialog * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
 body.suite-printing > *:not(.suite-dialog) { display: none !important; }
 body.suite-printing .suite-dialog { display: block !important; position: static; width: 100%; max-width: none; max-height: none; min-height: 0; border: 0; padding: 0; overflow: visible; resize: none; }
 body.suite-printing .suite-dialog-head, body.suite-printing .suite-dialog-body > .suite-row, body.suite-printing .suite-dialog details, body.suite-printing .suite-notice { display: none; }
 body.suite-printing .suite-dialog-body { padding: 0; }
 body.suite-printing h2 { break-after: avoid; }
}

[data-faraday-demo] label { display: flex; flex-direction: column; gap: 6px; }
[data-faraday-demo] textarea { font: inherit; padding: 10px; border: 1px solid #91a8b4; border-radius: 6px; min-height: 80px; width: 100%; }
[data-faraday-demo] table { width: 100%; border-collapse: collapse; font-size: 14px; }
[data-faraday-demo] th, [data-faraday-demo] td { padding: 12px; text-align: left; border-bottom: 1px solid #d4e0e5; overflow-wrap: anywhere; }
[data-faraday-demo] .suite-table { overflow: auto; }
[data-faraday-demo] button:disabled { opacity: .55; cursor: default; }
.faraday-selected-proof { outline: 3px solid #0d5f70; outline-offset: 4px; }
.demo-scope:has(.demo-suite) .ev-dlg { position: fixed; min-width: min(360px,92vw); }
.demo-scope:has(.demo-suite) .ev-top { cursor: move; touch-action: none; }
@media (max-width: 700px) { [data-faraday-demo] .suite-row button { width: 100%; } }

.demo-scope:has(.demo-suite) .inert, .demo-scope:has(.demo-suite) [data-inert] { display: none; }

.demo-scope:has(.demo-suite) .dlg { position: fixed; max-width: 94vw; max-height: 90dvh; resize: both; overflow: auto; }
.demo-scope:has(.demo-suite) .cs-dlg-top, .demo-scope:has(.demo-suite) .dlg-h { cursor: move; touch-action: none; }
@media (max-width: 700px) { .demo-scope:has(.demo-suite) .dlg { resize: none; } }

.module-path-comparison[hidden] { display: none; }

.suite-module-tools { border-top: 1px solid #d4e0e5; margin-top: 12px; padding-top: 4px; }
.suite-module-tools > summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 650; color: #0d5f70; }
.suite-module-tools .suite-secondary-row { border-top: 0; padding-top: 0; }
/* The same investigation structure accompanies every product view. */
.demo-suite .suite-purpose{border-left:3px solid var(--accent,#087f8c);padding:8px 14px;margin:12px 0;background:#f5f9fa}
.demo-suite .suite-purpose p{margin:4px 0;max-width:80ch}
.suite-route{margin-top:10px}
.suite-route summary{cursor:pointer;font-weight:600}
.suite-route ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0;list-style:none;margin:12px 0}
.suite-route li{min-width:0}
.suite-route button{display:flex;align-items:center;gap:8px;width:100%;height:100%;text-align:left;background:#fff;color:#15303e;border:1px solid var(--line,#ccd9df);border-radius:6px;padding:10px;font:inherit;cursor:pointer}
.suite-route button span{flex:none;border:1px solid currentColor;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.suite-route button[aria-current=step]{border-color:var(--accent,#087f8c);box-shadow:inset 0 0 0 1px var(--accent,#087f8c)}
.suite-route button:focus-visible{outline:3px solid var(--accent,#087f8c);outline-offset:3px}
.suite-dialog .suite-source-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:44vh;overflow:auto;padding:12px;border:1px solid var(--line,#ccd9df);font-family:inherit}
@media(max-width:800px){.suite-route ol{grid-template-columns:1fr}.suite-route button{min-height:44px}}

.demo-suite .suite-route button:hover{background:#e7f1f3;color:#0d5f70}
.suite-route>.suite-row button{width:auto;height:auto;min-height:44px}
.suite-route button:disabled{color:#566a75;background:#eef2f3;cursor:default;border-color:#ccd9df;box-shadow:none}


.suite-companion{position:fixed;bottom:16px;right:16px;z-index:90;width:min(370px,calc(100vw - 32px));padding:10px;border:1px solid #91a8b4;border-radius:10px;box-shadow:0 4px 18px #15303e26;background:#fff;color:#15303e;font:14px/1.4 system-ui,sans-serif}
.suite-companion[hidden]{display:none}
.suite-companion-heading{display:flex;align-items:start;justify-content:space-between;gap:8px}
.suite-companion-controls{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.suite-companion [data-suite-explanation]{max-height:min(320px,45vh);overflow:auto;overscroll-behavior:contain;border-top:1px solid #ccd9df;margin-top:8px;padding-top:8px}
.suite-companion [data-suite-explanation]>section{padding:0;margin:0 0 8px;min-height:0;border:0;background:none}
.suite-companion h4,.suite-companion p{margin:0 0 4px;font-size:inherit}
.suite-companion summary{cursor:pointer;font-weight:600}
.suite-companion button{padding:7px 10px;min-height:40px;border:1px solid #91a8b4;border-radius:5px;background:#fff;color:#0d5f70;font:inherit;cursor:pointer}
.suite-companion [data-companion-next]{background:#0d5f70;color:#fff}
.suite-companion button:disabled{background:#eef2f3;color:#566a75;cursor:default}
.suite-companion button:focus-visible{outline:3px solid #ba531d;outline-offset:2px}
.suite-companion-heading button{font-size:12px;padding:4px 8px;min-height:32px}
@media(max-width:500px){.suite-companion{bottom:8px;right:8px;width:calc(100vw - 16px);padding:10px}.suite-companion button{min-height:44px}}

.suite-companion [data-companion-action]{margin:3px 0 0;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

.suite-case-body{padding:20px}
.suite-case-body>section,.suite-case-summary>section{padding:0;margin:0;min-height:0;border:0;background:none}
.suite-case-context{font-size:13px;color:#4d6571;margin:0 0 14px}
.suite-case-summary{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
.suite-case-body h3{font-size:15px;line-height:1.4;margin:0 0 6px;color:#15303e}
.suite-case-body p{margin:0;font-size:14px;line-height:1.5}
.suite-case-body>.suite-case-decision{border-left:3px solid #0d5f70;background:#eff5f7;padding:12px 14px;margin-bottom:18px}
.suite-case-steps{list-style:none;padding:0;margin:8px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.suite-case-steps li{min-width:0}
.suite-dialog button.suite-link{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;background:#fff;color:#0d5f70;border:1px solid #91a8b4;width:100%;text-align:left;text-decoration:none;line-height:1.4;white-space:normal}
.suite-dialog button.suite-link small{font:400 12px/1.4 system-ui;color:#4d6571}
.suite-dialog button.suite-link:hover{background:#eff5f7;color:#0d5f70}
.suite-case-body>details{padding:12px 0}
.suite-case-body .suite-source-text{max-height:22vh;margin-top:8px}
@media(max-width:600px){.suite-case-body{padding:14px}.suite-case-summary,.suite-case-steps{grid-template-columns:1fr}.suite-case-summary{gap:14px}.suite-case-body>.suite-row button{width:100%}}

/* Native controls share the same readable contrast as the guide. */
.demo-scope .app[data-app="connect"] .cc-lnk { color: #096574; }
.demo-scope .cc-app .cc-btn-brand { background: #096574; border-color: #096574; }
.demo-scope .crx { --cr-faint: #53617a; --faint: #53617a; }
.demo-scope .ev-close { color: #475569; }
.venue-demo .park-play { background: #0d5968; color: #fff; }

/* Keep evidence labels and values distinct inside native detail panels. */
.demo-scope .ev-dlg .ev-kv { display: grid; grid-template-columns: minmax(130px,1fr) minmax(0,1.5fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid #e1e7ec; align-items: start; }
.demo-scope .ev-dlg .ev-kv > span { color: #475569; }
.demo-scope .ev-dlg .ev-kv > b { font-weight: 600; overflow-wrap: anywhere; }
.demo-scope .ev-dlg .ev-cols:has(> div:only-child) { grid-template-columns: 1fr; }
.demo-scope .ev-dlg .ev-cols h4 { font-size: 14px; margin: 14px 0 4px; }
.demo-scope .ev-dlg .ev-why-block { font-family: inherit; }
@media (max-width: 700px) {
 .demo-scope .ev-dlg .ev-kv { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 12px; }
}

.demo-scope .ev-dlg { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; }