/* Concept interfaces are decorative, static and scoped to this page. */
.interface-preview {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 1.25rem 0 0;
}

.interface-preview figcaption {
  margin-top: .625rem;
  color: var(--color-muted);
  font-size: .75rem;
  line-height: 1.5;
}

.demo-window {
  --demo-rule: #e0e8f3;
  --demo-muted: #5c708f;
  overflow: hidden;
  border: 1px solid var(--demo-rule);
  border-radius: .625rem;
  background: #fff;
  box-shadow: 0 .75rem 2.5rem #193e8010;
  font-size: .75rem;
  line-height: 1.45;
}

.demo-window strong { font-weight: 650; }
.demo-window svg { display: block; flex-shrink: 0; }
.demo-window p { margin: 0; }

.demo-icon,
.demo-trend {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-logo {
  width: 2.125rem;
  height: 2.125rem;
  color: var(--color-accent);
}

.demo-browser { display: none; }

.demo-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .5rem .625rem;
  border-bottom: 1px solid #eff3f8;
}

.demo-toolbar__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: .625rem;
  margin-left: auto;
  color: #3a5276;
}

.demo-search {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  padding: .375rem .5rem;
  border: 1px solid var(--demo-rule);
  border-radius: .25rem;
  color: var(--demo-muted);
  background: #f8faff;
}

.demo-search--mobile { flex: 1; font-size: .6875rem; }
.demo-search--mobile .demo-icon { width: .875rem; height: .875rem; }
.catalog-nav,
.catalog-search-icon,
.demo-sidebar,
.catalog-search,
.catalog-product--desktop,
.catalog-main > .demo-heading,
.dashboard-search,
.dashboard-heading,
.dashboard-donut,
.request-date,
.dashboard-request--head,
.dashboard-request--last { display: none; }

.demo-main { min-width: 0; padding: .625rem; }

.catalog-mobile-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: .625rem;
}

.catalog-mobile-filters > span {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  padding: .375rem .5rem;
  border: 1px solid var(--demo-rule);
  border-radius: .25rem;
}

.catalog-mobile-filters b { margin-left: auto; color: var(--color-accent); }
.catalog-mobile-filters .demo-icon { width: .875rem; height: .875rem; }

.catalog-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.catalog-product {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .5rem;
  border: 1px solid var(--demo-rule);
  border-radius: .375rem;
  background: linear-gradient(#f4f8fd, #fff 50%);
}

.catalog-product__image,
.catalog-banner__image {
  background-image: url("assets/images/catalog-products.webp");
  background-repeat: no-repeat;
  background-size: 300% auto;
  background-blend-mode: multiply;
  background-color: #f6f9fd;
}

.catalog-product__image { width: 100%; aspect-ratio: 1.1; margin-bottom: .375rem; }
.catalog-product__image--pump { background-position: left center; }
.catalog-product__image--valve { background-position: center; }
.catalog-product__image--flange { background-position: right center; }
.catalog-product > strong { margin-bottom: .25rem; font-size: .875rem; }
.catalog-product p { color: var(--demo-muted); }
.catalog-product__spec { display: block; margin-block: .625rem; color: var(--demo-muted); font-size: .6875rem; }
.catalog-product__more { display: block; margin-top: auto; color: var(--color-accent); font-weight: 550; }

.catalog-banner {
  display: grid;
  grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
  margin-top: .625rem;
  padding: .5rem;
  border-radius: .375rem;
  background: #f3f7fc;
}

.catalog-banner__image { aspect-ratio: 1; }
.catalog-banner > div { min-width: 0; }
.catalog-banner p { margin-top: .125rem; color: var(--demo-muted); font-size: .6875rem; }
.catalog-banner span { display: none; }

.dashboard-mobile-title { margin-left: auto; font-size: .875rem; }
.demo-avatar {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  color: #fff;
  background: #7489a6;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.dashboard-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .125rem .5rem;
  min-width: 0;
  padding: .5rem .625rem;
  border: 1px solid var(--demo-rule);
  border-radius: .375rem;
  background: linear-gradient(125deg, #fff, #f9fbff);
}

.dashboard-stat > span { grid-column: 1 / -1; color: var(--demo-muted); font-size: .6875rem; }
.dashboard-stat > strong { font-size: 1.375rem; line-height: 1.2; }
.dashboard-stat > small { color: #1a7c49; font-size: .625rem; }
.dashboard-stat .demo-trend { display: none; }

.dashboard-charts { margin-top: .625rem; }
.dashboard-chart,
.dashboard-donut {
  min-width: 0;
  padding: .625rem;
  border: 1px solid var(--demo-rule);
  border-radius: .375rem;
  background: linear-gradient(#fff, #fbfdff);
}

.demo-panel-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .375rem;
  margin-bottom: .5rem;
  font-size: .6875rem;
}

.demo-panel-heading > span { color: var(--demo-muted); font-size: .625rem; }
.activity-chart { width: 100%; height: auto; }
.activity-chart__grid { stroke: #e8eef7; stroke-width: 1; }
.activity-chart__labels { fill: #5c708f; font-size: 11px; }
.activity-chart__line { fill: none; stroke: var(--color-accent); stroke-width: 2.5; }
.requests-heading { margin-top: .875rem; }
.requests-heading > span { color: var(--color-accent); }
.dashboard-requests { border: 1px solid var(--demo-rule); border-radius: .25rem; }
.dashboard-request {
  display: grid;
  grid-template-columns: 2.375rem minmax(0, 1fr) minmax(0, 4.5rem);
  align-items: center;
  gap: .25rem;
  min-width: 0;
  padding: .5rem .375rem;
  font-size: .625rem;
}

.dashboard-request > span { min-width: 0; }
.dashboard-request + .dashboard-request { border-top: 1px solid #edf2f8; }
.demo-status { justify-self: start; padding: .125rem .375rem; border-radius: .25rem; color: #0857db; background: #e7f0ff; }
.demo-status::before { content: ""; display: inline-block; width: .3rem; height: .3rem; margin-right: .25rem; border-radius: 50%; background: currentColor; }
.demo-status--done { color: #147c47; background: #e3f6eb; }

.dashboard-mobile-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .25rem;
  padding: .625rem;
  border-top: 1px solid #eff3f8;
  color: var(--demo-muted);
  font-size: .625rem;
  text-align: center;
}

.dashboard-mobile-nav > span { display: flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 0; }
.demo-window .is-active { color: var(--color-accent); }

/* These overrides follow shared flex/grid and SVG rules. */
.catalog-product.catalog-product--desktop,
.dashboard-request.dashboard-request--head,
.dashboard-request.dashboard-request--last,
.demo-window .catalog-search-icon { display: none; }

@media (min-width: 24rem) {
  .dashboard-stat .demo-trend { display: block; position: absolute; right: .625rem; bottom: .625rem; width: 1.75rem; color: var(--color-accent); }
  .dashboard-stat--green .demo-trend { color: #20a866; }
  .dashboard-stat .demo-trend--users { color: #8398b4; width: 1.375rem; }
}

@media (min-width: 40rem) and (max-width: 63.999rem) {
  .demo-window { max-width: 36rem; margin-inline: auto; }
}

@media (min-width: 64rem) {
  .interface-preview { display: flex; flex-direction: column; margin-top: 1.5rem; }
  .demo-window { display: flex; flex-direction: column; flex: 1; border-radius: .375rem; font-size: clamp(.625rem, .75vw, .75rem); }
  .demo-browser { display: flex; align-items: center; gap: .3rem; height: 1.5rem; padding: .4rem .625rem; color: #7487a4; background: linear-gradient(90deg, #e9f0f8, #f5f8fc); font-size: .5rem; }
  .demo-browser i { width: .325rem; height: .325rem; border-radius: 50%; background: #899fbd; }
  .demo-browser > span { margin-inline: auto; }
  .demo-toolbar { min-height: 3rem; padding: .375rem .75rem; gap: .75rem; }
  .demo-logo { width: 2rem; height: 2rem; }
  .demo-icon { width: .9375rem; height: .9375rem; }
  .demo-toolbar__actions { gap: .875rem; }
  .catalog-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: .5625rem; }
  .demo-window .catalog-search-icon { display: block; }
  .demo-window .catalog-menu-icon { display: none; }
  .demo-search--mobile,
  .catalog-menu-icon,
  .catalog-mobile-filters,
  .dashboard-mobile-title,
  .dashboard-mobile-nav { display: none; }
  .demo-layout { display: grid; flex: 1; grid-template-columns: minmax(0, 24%) minmax(0, 1fr); min-height: 29rem; }
  .demo-sidebar { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .625rem .375rem; border-right: 1px solid var(--demo-rule); background: linear-gradient(110deg, #f4f8ff, #fff); font-size: .5625rem; }
  .demo-sidebar__item { display: flex; align-items: flex-start; gap: .375rem; min-width: 0; padding: .5rem .375rem; border-radius: .25rem; }
  .demo-sidebar__item .demo-icon { width: .8125rem; height: .8125rem; }
  .demo-sidebar__item.is-active { background: #dfecff; font-weight: 600; }
  .catalog-sidebar-filters { display: flex; flex-direction: column; gap: .375rem; margin-top: 1rem; padding: .375rem; border-top: 1px solid var(--demo-rule); }
  .catalog-sidebar-filters > strong { margin-block: .25rem; }
  .catalog-sidebar-filters > span { display: flex; justify-content: space-between; gap: .25rem; padding: .375rem; border: 1px solid var(--demo-rule); border-radius: .2rem; background: #fff; }
  .catalog-sidebar-filters > .demo-action { justify-content: center; margin-top: .25rem; color: #fff; border-color: var(--color-accent); background: var(--color-accent); }
  .catalog-sidebar-filters > small { color: var(--color-accent); text-align: center; font-size: .5rem; }
  .demo-main { padding: .75rem; }
  .demo-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .625rem; }
  .catalog-main > .demo-heading { display: flex; }
  .demo-heading > strong { font-size: .9375rem; letter-spacing: -.025em; }
  .demo-select { padding: .25rem .375rem; border: 1px solid var(--demo-rule); border-radius: .25rem; color: var(--demo-muted); font-size: .5rem; }
  .demo-select b { margin-left: .375rem; }
  .catalog-search { display: flex; margin-bottom: .625rem; font-size: .5625rem; padding: .5rem; }
  .catalog-products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .catalog-product.catalog-product--desktop { display: flex; }
  .catalog-product { padding: .375rem; }
  .catalog-product__image { aspect-ratio: .9; }
  .catalog-product > strong { font-size: .75rem; }
  .catalog-product p { min-height: 4.35em; font-size: .5625rem; }
  .catalog-product__spec { margin-block: .75rem; font-size: .5rem; }
  .catalog-product__more { padding-top: .375rem; border-top: 1px solid var(--demo-rule); font-size: .5625rem; }
  .catalog-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); padding: .625rem; margin-top: .875rem; background: linear-gradient(105deg, #dcecff, #f3f8ff); }
  .catalog-banner__image { grid-column: 2; grid-row: 1; aspect-ratio: 1.4; background-color: #e8f2ff; mix-blend-mode: multiply; }
  .catalog-banner > div:last-child { grid-column: 1; grid-row: 1; }
  .catalog-banner p { font-size: .5625rem; }
  .catalog-banner span { display: block; margin-top: .5rem; color: var(--color-accent); font-size: .5625rem; }
  .dashboard-search { display: flex; width: 44%; font-size: .5625rem; }
  .dashboard-heading { display: flex; }
  .dashboard-heading > span { color: var(--demo-muted); font-size: .5rem; }
  .dashboard-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; }
  .dashboard-stat { display: block; padding: .5rem .375rem; }
  .dashboard-stat > span { display: block; min-height: 2.9em; font-size: .5rem; }
  .dashboard-stat > strong { display: block; margin-block: .25rem; font-size: 1.375rem; }
  .dashboard-stat > small { font-size: .5rem; }
  .dashboard-stat .demo-trend { right: .375rem; bottom: 1.25rem; width: 1.5rem; }
  .dashboard-stat .demo-trend--users { width: 1.125rem; }
  .dashboard-charts { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: .5rem; margin-top: .875rem; }
  .dashboard-chart, .dashboard-donut { padding: .5rem; }
  .demo-panel-heading { font-size: .5625rem; }
  .demo-panel-heading > span { font-size: .5rem; }
  .dashboard-chart .demo-panel-heading > span { padding: .125rem .25rem; border: 1px solid var(--demo-rule); border-radius: .2rem; }
  .dashboard-donut { display: block; font-size: .5625rem; }
  .dashboard-donut__plot { position: relative; max-width: 6rem; margin: .25rem auto; }
  .dashboard-donut__plot svg { width: 100%; }
  .dashboard-donut__plot circle { fill: none; stroke-width: 12; transform: rotate(-90deg); transform-origin: 50% 50%; }
  .donut-track { stroke: #e1e9f3; }
  .donut-blue { stroke: #0857fb; stroke-dasharray: 43 57; }
  .donut-green { stroke: #1eb66a; stroke-dasharray: 18 82; stroke-dashoffset: -43; }
  .donut-light { stroke: #84b6ff; stroke-dasharray: 21 79; stroke-dashoffset: -61; }
  .dashboard-donut__plot > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .5rem; color: var(--demo-muted); }
  .dashboard-donut__plot b { font-size: 1rem; color: var(--color-ink); }
  .donut-legend { display: flex; flex-wrap: wrap; gap: .25rem .375rem; font-size: .4375rem; color: var(--demo-muted); }
  .donut-legend span::before { content: ""; display: inline-block; width: .25rem; height: .25rem; margin-right: .2rem; border-radius: 50%; background: var(--color-accent); }
  .donut-legend span:nth-child(2)::before { background: #84b6ff; }
  .donut-legend span:nth-child(3)::before { background: #1eb66a; }
  .requests-heading { margin-top: 1.125rem; }
  .dashboard-requests { border: 0; }
  .dashboard-request { grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 4.25rem) 2rem; gap: .25rem; padding: .625rem .25rem; font-size: .5rem; }
  .dashboard-request.dashboard-request--head, .dashboard-request.dashboard-request--last { display: grid; }
  .dashboard-request--head { color: var(--demo-muted); background: #f1f6fd; }
  .request-date { display: block; }
  .demo-status { padding: .125rem .25rem; }
}

@media (forced-colors: active) {
  .demo-window, .catalog-product, .dashboard-stat, .dashboard-chart, .dashboard-donut { border-color: CanvasText; }
  .activity-chart__line { stroke: CanvasText; }
}