/* Connected Atlas sample snapshot in the interactive tour. */
.demo-overview-stats .demo-card:first-child{border-top:3px solid #59ab88}
.demo-overview-stats .demo-card:nth-child(2){border-top:3px solid #d2a05e}
.demo-overview-stats .demo-card:nth-child(3){border-top:3px solid #7297bc}
.demo-overview-stats .demo-card:nth-child(4){border-top:3px solid #9d8bbd}
.demo-overview-dot{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;vertical-align:1px}
.demo-overview-dot.is-green{background:#3ba879}.demo-overview-dot.is-amber{background:#d69a4d}
.demo-overview-lower>.demo-card:first-child>div{gap:7px}
.demo-overview-lower>.demo-card:first-child>div>small{font-size:8px;color:#8b9da8;white-space:nowrap}
.demo-overview-lower #demo-overview-web,.demo-overview-lower #demo-overview-api{color:#257b5b;font-weight:700}
.demo-overview-review .demo-overview-issue{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 0 8px;border:0}
.demo-overview-review .demo-overview-issue>b{font-size:10px}
.demo-overview-review .demo-overview-issue>span{font-size:8px;color:#aa7435;background:#fff2df;padding:4px 6px;border-radius:5px;white-space:nowrap}
.demo-overview-review .demo-overview-checks{display:grid;grid-template-columns:1fr 1fr;gap:5px 7px;margin:10px 0 9px}
.demo-overview-checks span{font-size:8px;color:#3a8067;background:#ebf6f0;border-radius:5px;padding:5px 6px}
.demo-overview-checks span:nth-child(3){color:#a17032;background:#fff3e5}
html[data-theme="dark"] .demo-overview-lower #demo-overview-web,html[data-theme="dark"] .demo-overview-lower #demo-overview-api{color:#9cdcbc}
html[data-theme="dark"] .demo-overview-review .demo-overview-issue>span{color:#f0c68b;background:#51412f}
html[data-theme="dark"] .demo-overview-checks span{color:#b7e9d0;background:#254439}
html[data-theme="dark"] .demo-overview-checks span:nth-child(3){color:#efd5ab;background:#4c3c2d}
@media(max-width:850px){.demo-overview-lower>.demo-card:first-child>div>small{display:none}}
@media(max-width:430px){.demo-overview-review .demo-overview-checks{grid-template-columns:1fr 1fr}.demo-overview-lower>.demo-card:first-child>div>small{display:block}.demo-overview-lower>.demo-card:first-child>div{flex-wrap:wrap}}
.demo-overview-checks span.is-passed{color:#3a8067;background:#ebf6f0}
html[data-theme="dark"] .demo-overview-checks span.is-passed{color:#b7e9d0;background:#254439}

/* The overview follows the desktop dashboard: runtime and performance on the left,
   work and test evidence on the right. All figures are sample tour data. */
.demo-overview-dashboard{display:grid;grid-template-columns:1.15fr .85fr;gap:8px;margin-top:8px}
.demo-overview-column{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0}
.demo-overview-dashboard .demo-card{min-width:0;padding:13px 15px}
.demo-overview-dashboard .demo-card-label{display:block;margin:0 0 8px;font-size:8px}
.demo-overview-services>div{display:flex;align-items:center;gap:7px;padding:7px 0;border-top:1px solid #e6edef;min-width:0}
.demo-overview-services i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:5px;background:#e8f0f4;color:#577a8d;font-style:normal}
.demo-overview-services b,.demo-overview-task b{color:#355467;font-size:9px}
.demo-overview-services small{color:#8b9da8;font-size:8px;white-space:nowrap}
.demo-overview-services div>span{margin-left:auto;color:#829aa6;font-size:8px;white-space:nowrap}
.demo-overview-services #demo-overview-web,.demo-overview-services #demo-overview-api{color:#257b5b;font-weight:700}
.demo-overview-panel-head{display:flex;justify-content:space-between;gap:6px;align-items:start}
.demo-overview-panel-head small{font-size:8px;color:#8ca1ab}
.demo-overview-metric-tabs{display:flex;gap:4px;margin:3px 0 2px}
.demo-overview-metric-tabs span{font-size:8px;padding:4px 6px;border-radius:5px;color:#8b9daa;background:#f0f4f6}
.demo-overview-metric-tabs span:first-child{background:#e7f0f6;color:#4a6e86;font-weight:700}
.demo-overview-performance svg{display:block;width:100%;height:76px;margin-top:4px}
.demo-overview-chart-axis{display:flex;justify-content:space-between;color:#a0afba;font-size:7px;margin-top:0}
.demo-overview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-top:1px solid #e3eaee;margin-top:9px;padding-top:8px}
.demo-overview-metrics span{font-size:8px;color:#8ca1ab}
.demo-overview-metrics b{display:block;margin-top:3px;color:#355467;font-size:10px}
.demo-overview-review .demo-overview-issue,.demo-overview-task{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid #e6edef;padding:8px 0}
.demo-overview-review .demo-overview-issue>span,.demo-overview-task>span{flex:none;font-size:7px;color:#aa7435;background:#fff2df;padding:4px 6px;border-radius:5px}
.demo-overview-review .demo-overview-issue>b{font-size:9px}
.demo-overview-review>p{font-size:9px;line-height:1.35;color:#8096a2;margin:1px 0 7px}
.demo-overview-task>span{color:#597b95;background:#eaf1f7}
.demo-overview-review>small{font-size:7px;color:#8ca1ab}
.demo-overview-coverage-value{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:7px 0}
.demo-overview-coverage-value b{font-size:21px;color:#355467}
.demo-overview-coverage-value span{font-size:8px;color:#8b9daa;text-align:right}
.demo-overview-coverage-track{height:6px;border-radius:8px;background:#e5edf0;overflow:hidden}
.demo-overview-coverage-track i{display:block;height:100%;border-radius:inherit;background:#35b982;transition:width .4s ease}
.demo-overview-coverage .demo-overview-checks{margin:9px 0 0}
html[data-theme="dark"] .demo-overview-services>div,html[data-theme="dark"] .demo-overview-metrics,html[data-theme="dark"] .demo-overview-review .demo-overview-issue,html[data-theme="dark"] .demo-overview-task{border-color:#3a5668}
html[data-theme="dark"] .demo-overview-services i,html[data-theme="dark"] .demo-overview-metric-tabs span{background:#2b4656;color:#bad0da}
html[data-theme="dark"] .demo-overview-metric-tabs span:first-child{background:#34566a;color:#e1eff5}
html[data-theme="dark"] .demo-overview-services b,html[data-theme="dark"] .demo-overview-task b,html[data-theme="dark"] .demo-overview-metrics b,html[data-theme="dark"] .demo-overview-coverage-value b{color:#e2eff2}
html[data-theme="dark"] .demo-overview-services #demo-overview-web,html[data-theme="dark"] .demo-overview-services #demo-overview-api{color:#9cdcbc}
html[data-theme="dark"] .demo-overview-task>span{color:#b5d5ea;background:#2c475a}
html[data-theme="dark"] .demo-overview-coverage-track{background:#344f5e}
@media(max-width:850px){.demo-overview-services small{display:none}}
@media(max-width:700px){.demo-overview-dashboard{grid-template-columns:1fr}.demo-overview-column{grid-template-rows:auto}.demo-overview-services small{display:block}}
@media(max-width:430px){.demo-overview-dashboard .demo-card{padding:11px}.demo-overview-services small{display:none}.demo-overview-performance svg{height:65px}.demo-overview-review>p{margin-bottom:4px}}

/* Keep Overview at the same desktop height as the other tour scenes. */
@media(min-width:701px){
  .demo-scene[data-demo-scene="overview"]{padding-top:18px;padding-bottom:14px}
  .demo-scene[data-demo-scene="overview"] .demo-scene-head{margin-bottom:10px}
  .demo-overview-stats .demo-card{min-height:76px;padding:7px 10px}
  .demo-overview-stats b{font-size:22px;margin:3px 0 1px}
  .demo-overview-dashboard{gap:7px;margin-top:7px}
  .demo-overview-column{gap:7px}
  .demo-overview-dashboard .demo-card{padding:10px 12px}
  .demo-overview-dashboard .demo-card-label{margin-bottom:5px}
  .demo-overview-services>div{padding:5px 0}
  .demo-overview-services i{width:18px;height:18px}
  .demo-overview-performance svg{height:57px;margin-top:2px}
  .demo-overview-metric-tabs span{padding:3px 5px}
  .demo-overview-metrics{margin-top:5px;padding-top:5px}
  .demo-overview-metrics b{margin-top:1px}
  .demo-overview-review .demo-overview-issue,.demo-overview-task{padding:5px 0}
  .demo-overview-review>p{margin:0 0 3px}
  .demo-overview-coverage-value{margin:4px 0}
  .demo-overview-coverage .demo-overview-checks{margin-top:6px}
  .demo-overview-checks span{padding:3px 4px}
}