/* Phosphor Duotone. Semantic colors adapt to the surrounding surface. */
.ui-icon {
  --icon-on-paper:#66734a;
  --icon-on-ink:#cfd9b4;
  display:inline-block;
  flex:none;
  width:24px;
  height:24px;
  vertical-align:middle;
  fill:currentColor;
  color:var(--icon-on-paper);
}
.ui-icon--questions { --icon-on-paper:#167a85;--icon-on-ink:#76d4de; }
.ui-icon--reports { --icon-on-paper:#617a14;--icon-on-ink:#dbff48; }
.ui-icon--experiments { --icon-on-paper:#7357bc;--icon-on-ink:#bcadf4; }
.ui-icon--connections { --icon-on-paper:#346eb1;--icon-on-ink:#92bfff; }
.ui-icon--market { --icon-on-paper:#9c4f37;--icon-on-ink:#f2a184; }
.ui-icon--commerce { --icon-on-paper:#9b6a16;--icon-on-ink:#e9c477; }
.ui-icon--muted { --icon-on-paper:#73756b;--icon-on-ink:#b6b8aa; }

.product-preview .ui-icon,
.platform-entrypoints .ui-icon,
.nav-item.active .ui-icon,
.setup-steps button[aria-current] .ui-icon { color:var(--icon-on-ink); }

.product-preview-tabs .ui-icon { width:28px;height:28px; }
.product-preview-tabs button > span { display:flex;align-items:center; }
.product-preview-tabs button[aria-selected="true"] .ui-icon { color:#1b2211; }
.platform-entrypoints .ui-icon { width:38px;height:38px; }

.nav-item > span:first-child { display:flex;align-items:center;justify-content:center;flex:none;width:24px; }
.nav-item.active { box-shadow:inset 3px 0 #dbff48; }
.journey .step-icon .ui-icon { width:32px;height:32px; }
.setup-steps button strong { display:flex;align-items:center;gap:8px;min-width:0;word-break:keep-all; }
.setup-steps .ui-icon { width:22px;height:22px; }
.setup-steps button strong > span { display:flex;flex:none; }
.setup-steps button:disabled .ui-icon { color:#85877b; }
.report-chart-empty .ui-icon { width:32px;height:32px; }

@media(max-width:900px) {
  .product-preview-tabs .ui-icon { width:24px;height:24px; }
}
@media(max-width:720px) {
  .nav-item > span:first-child { width:20px; }
  .nav-item .ui-icon { width:20px;height:20px; }
  .journey .step-icon .ui-icon { width:28px;height:28px; }
  .setup-steps button strong { gap:6px; }
  .setup-steps .ui-icon { width:20px;height:20px; }
}
@media(max-width:420px) {
  .setup-steps { grid-template-columns:1fr; }
  .setup-steps button { min-height:48px;padding:12px;gap:12px; }
  .setup-steps button strong { font-size:14px;gap:9px; }
}