/* Hintapiste demo: the product pages' matching and offers. Loaded on the demo pages after chart.css; tokens.css and site.css come first. */
.demo__snapshot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); color: var(--c-muted); font-size: var(--t-sm); line-height: var(--lh-sm); }
.demo__text { max-width: var(--w-prose); color: var(--c-fg-2); margin-bottom: var(--s-4); }
.demo__list { max-width: var(--w-prose); color: var(--c-fg-2); padding-left: var(--s-5); margin-bottom: var(--s-4); }
.demo__list li + li { margin-top: var(--s-1); }

/* Product switcher: the three products as links, the current one marked by weight and an underline bar. */
.demo__switch { margin-top: var(--s-6); }
.demo__switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.demo__switch a { display: inline-flex; align-items: center; min-height: var(--ctl-h-touch); padding: 0 var(--ctl-px-md); border: 1px solid var(--c-control); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-fg); font-size: var(--t-sm); text-decoration: none; }
.demo__switch a:hover { background: var(--c-selected); }
.demo__switch a[aria-current="page"] { background: var(--c-selected); border-color: var(--c-selected-border); font-weight: var(--fw-semibold); box-shadow: inset 0 -3px 0 var(--c-action); }

.demo__figures .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .demo__figures .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.demo__figures dd { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.demo__figures dd .meta { display: block; margin-top: var(--s-1); font-weight: var(--fw-regular); }


.demo__table td { min-width: 0; font-variant-numeric: tabular-nums; }

/* Matching: the rules as an ordered list of disclosures, then the shops joined into one product. */
.demo__rules { max-width: var(--w-prose); padding-left: var(--s-5); margin-bottom: var(--s-5); }
.demo__rules p { color: var(--c-fg-2); }
.demo__rules p + p { margin-top: var(--s-1); }
.demo__joined { max-width: var(--w-prose); display: grid; gap: var(--s-3); color: var(--c-fg-2); }
.demo__joined h3 { color: var(--c-fg); }
.demo__join { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-surface); background: var(--c-surface); }
.demo__join::after { content: ""; grid-column: 2; grid-row: 1; width: 9px; height: 9px; border-right: 1.5px solid var(--c-muted); border-top: 1.5px solid var(--c-muted); transform: rotate(45deg); }
.demo__join ul { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: var(--t-sm); line-height: var(--lh-sm); }
.demo__product { grid-column: 3; grid-row: 1; color: var(--c-fg); font-weight: var(--fw-semibold); }

/* Offers: the first column (rank and shop) stays in view while the table scrolls sideways on a phone. */
.demo__offers td { min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo__offers td:last-child { white-space: normal; min-width: 14rem; }
.demo__offers tbody th { width: auto; color: var(--c-fg); font-weight: var(--fw-semibold); }
.demo__offers tbody th, .demo__offers thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--c-surface); box-shadow: 1px 0 0 var(--c-border); }
/* A focused "why" control scrolls clear of the sticky shop column (about 10.4rem wide) instead of under it. */
.demo__scroll { scroll-padding-inline-start: 11rem; }
/* The visually hidden shop name is absolutely placed; anchoring it here keeps it inside the scrolling table. */
.demo__why { position: relative; }
.demo__why > summary { cursor: pointer; min-height: var(--ctl-h-touch); display: inline-flex; align-items: center; color: var(--c-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.demo__why p { margin-top: var(--s-1); color: var(--c-fg-2); }
.demo__explain { max-width: var(--w-prose); margin-top: var(--s-4); padding-left: var(--s-5); color: var(--c-fg-2); }
.demo__explain li + li { margin-top: var(--s-1); }