/* Detailed page projection for the paired production workflow demo. */
:root{
  --deck-bg:#f2f4f1;
  --deck-ink:#17212b;
  --deck-ink-dim:#4f5d66;
  --deck-ink-faint:#748078;
  --deck-accent:#0f766e;
  --deck-card:#ffffff;
  --deck-card-bd:#d5ddd7;
}

body{background:#e4e9e5;color:var(--deck-ink);letter-spacing:0}
html.iqs-mode-pages .stage{
  width:min(100%,1180px);
  background:var(--deck-bg);
  box-shadow:0 0 0 1px rgba(23,33,43,.07);
}
html.iqs-mode-pages .slide{
  border-bottom:1px solid #d7ded8;
  color:var(--deck-ink);
  letter-spacing:0;
}
html.iqs-mode-pages .s-title{color:var(--deck-ink);letter-spacing:0}
html.iqs-mode-pages .slide--hero{
  min-height:clamp(540px,78vh,760px);
  background:#17212b;
  color:#f7faf7;
}
html.iqs-mode-pages .slide--hero .s-title{max-width:10em;color:#fff}
html.iqs-mode-pages .slide--hero .s-eyebrow{color:#5eead4;letter-spacing:0}
html.iqs-mode-pages .slide--hero .s-subtitle{
  max-width:46rem;
  color:#c6d0cb;
  font-style:normal;
  line-height:1.55;
}
html.iqs-mode-pages .slide--hero .s-divider{background:linear-gradient(90deg,#0f766e,#f59e0b,transparent)}

html.iqs-mode-pages .slide--statement,
html.iqs-mode-pages .slide--bullets,
html.iqs-mode-pages .slide--cards{padding-block:clamp(64px,9cqw,112px)}
html.iqs-mode-pages .slide--statement .s-body{width:100%;max-width:880px;color:var(--deck-ink-dim)}
html.iqs-mode-pages .slide--statement .s-body p{max-width:72ch}
html.iqs-mode-pages .slide--statement .s-body strong,
html.iqs-mode-pages .s-bullet strong{color:var(--deck-ink)}
html.iqs-mode-pages .s-bullet{color:var(--deck-ink-dim)}

html.iqs-mode-pages .slide--statement .s-body .iqs-metric{
  box-sizing:border-box;
  width:calc(33.333% - 24px);
  min-width:0;
  min-height:142px;
  margin:8px 12px 16px 0;
  padding:20px 22px;
  border:1px solid var(--deck-card-bd);
  border-radius:6px;
  background:#fff;
  box-shadow:none;
}
html.iqs-mode-pages .iqs-metric-value{color:#17212b;font-size:clamp(2rem,4cqw,2.8rem)}
html.iqs-mode-pages .iqs-metric-label{color:#0f766e;font-size:clamp(.74rem,1.3cqw,.88rem);letter-spacing:0}
html.iqs-mode-pages .iqs-metric-note{color:#5e6962;font-size:clamp(.88rem,1.5cqw,1rem)}

html.iqs-mode-pages .iqs-callout,
html.iqs-mode-pages .iqs-linkcard{
  max-width:780px;
  margin:28px 0 0;
  border-color:var(--deck-card-bd);
  border-radius:6px;
  background:#fff;
  box-shadow:none;
}
html.iqs-mode-pages .iqs-callout{padding:20px 22px;border-left:3px solid #0f766e}
html.iqs-mode-pages .iqs-callout-title,
html.iqs-mode-pages .iqs-linkcard-title{color:#17212b;font-size:clamp(1rem,1.7cqw,1.15rem)}
html.iqs-mode-pages .iqs-callout-body,
html.iqs-mode-pages .iqs-linkcard-text{color:#5e6962;font-size:clamp(.9rem,1.5cqw,1rem)}
html.iqs-mode-pages .iqs-linkcard a{padding:18px 20px}

html.iqs-mode-pages .s-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
html.iqs-mode-pages .s-card{
  min-height:100%;
  padding:24px;
  border:1px solid var(--deck-card-bd);
  border-top:3px solid #0f766e;
  border-radius:6px;
  background:#fff;
  box-shadow:none;
}
html.iqs-mode-pages .s-card:nth-child(2){border-top-color:#f59e0b}
html.iqs-mode-pages .s-card:nth-child(3){border-top-color:#b45309}
html.iqs-mode-pages .s-quote{color:#34423c;font-style:normal}
html.iqs-mode-pages .s-cite{color:#0f766e;letter-spacing:0}

html.iqs-mode-pages .iqs-datatable{width:100%;max-width:100%;margin:0}
html.iqs-mode-pages .iqs-data-scroll{border-color:var(--deck-card-bd);border-radius:6px;background:#fff;box-shadow:none}
html.iqs-mode-pages .iqs-datatable table{color:#47554e;font-size:clamp(.88rem,1.4cqw,1rem)}
html.iqs-mode-pages .iqs-data-title{font-size:clamp(.95rem,1.6cqw,1.1rem)}
html.iqs-mode-pages .iqs-datatable th{background:#17212b;color:#e8efeb;font-size:clamp(.72rem,1.1cqw,.82rem);letter-spacing:0}
html.iqs-mode-pages .iqs-datatable td{border-bottom-color:#e1e6e2}
html.iqs-mode-pages .iqs-datatable figcaption{font-size:clamp(.78rem,1.2cqw,.9rem)}

.demo-action{
  display:grid;
  grid-template-columns:minmax(100px,140px) minmax(0,1fr) minmax(140px,190px);
  gap:18px;
  align-items:center;
  margin:12px 0;
  padding:18px 20px;
  border:1px solid var(--deck-card-bd);
  border-radius:6px;
  background:#fff;
}
.demo-action strong{color:#0f766e}
.demo-action span{color:#34423c}
.demo-action small{color:#7a5b1e;text-align:right}

@media (max-width:720px){
  html.iqs-mode-pages .s-cards{grid-template-columns:1fr}
  html.iqs-mode-pages .iqs-metric{display:flex;width:100%;min-height:120px;margin:8px 0}
  html.iqs-mode-pages .iqs-datatable table{min-width:720px}
  .demo-action{grid-template-columns:1fr;gap:8px}
  .demo-action small{text-align:left}
}