/* Styles that only the online bike shop's example uses (competitors' prices). Everything shared is in ../index.html.
   Every rule begins with the example's own name, so that nothing here reaches the rest of the page, and every
   colour is a token, so that dark mode needs nothing of its own. One colour: a mark is purple (chart-1), its
   quieter shade or grey, and no text takes any of them. */

/* ---------- a page: as high as the room it has, so that nothing scrolls and nothing is left empty ---------- */
/* bikes.js gives a page its height (class "fit") wherever the example is not drawn as a phone shows it. The part
   marked "grow" takes what the others leave, and the script has worked out how many rows that holds. */
.still[data-example="bikes"] .bk-page { display: flex; flex-direction: column; gap: 16px; }
.still[data-example="bikes"] .bk-page > * { flex: none; min-width: 0; }
.still[data-example="bikes"] .bk-page.fit > .bk-grow { flex: 1 1 0; min-height: 0; }
.still[data-example="bikes"] .bk-row { display: grid; gap: 16px; }
.still[data-example="bikes"] .bk-row > * { min-width: 0; min-height: 0; }
.still[data-example="bikes"] .bk-row-a { grid-template-columns: minmax(0, 596fr) minmax(0, 376fr); }
.still[data-example="bikes"] .bk-row-b { grid-template-columns: minmax(0, 1fr) minmax(336px, 32%); }
.still[data-example="bikes"] .bk-row-c { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.still[data-example="bikes"] .bk-row-d { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

/* ---------- parts used on more than one page ---------- */
.still[data-example="bikes"] .bk-shop { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.still[data-example="bikes"] .bk-clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.still[data-example="bikes"] .bk-title { font-weight: 600; }
.still[data-example="bikes"] .bk-quiet { color: var(--muted-foreground); }
.still[data-example="bikes"] .n { text-align: right; font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .card-head .badge { flex: none; }
.still[data-example="bikes"] .bk-end, .still[data-example="bikes"] .bk-head-tools { margin-left: auto; }
.still[data-example="bikes"] .bk-head-tools { display: flex; align-items: center; gap: 8px; }
.still[data-example="bikes"] .bk-head-tools .seg { margin-left: 0; }
.still[data-example="bikes"] .bk-to { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .bk-to svg { width: 12px; height: 12px; color: var(--subtle-foreground); }
.still[data-example="bikes"] .bk-narrow, .still[data-example="bikes"] .bk-table .s-meta.bk-narrow { display: none; }
.still[data-example="bikes"] .btn:focus-visible, .still[data-example="bikes"] .bk-pick:focus-visible, .still[data-example="bikes"] .bk-tile:focus-visible, .still[data-example="bikes"] .bk-four-row:focus-visible, .still[data-example="bikes"] .bk-offer:focus-visible, .still[data-example="bikes"] .bk-heat button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* A drop-down, drawn as a field (7.2). */
.still[data-example="bikes"] .bk-select { position: relative; display: inline-flex; flex: none; max-width: 100%; }
.still[data-example="bikes"] .bk-select select { appearance: none; -webkit-appearance: none; height: 36px; max-width: 100%; padding: 0 32px 0 12px; border: 1px solid var(--input); border-radius: 10px; background: transparent; font: inherit; color: var(--foreground); cursor: pointer; }
.still[data-example="bikes"] .bk-select select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.still[data-example="bikes"] .bk-select option { background: var(--popover); color: var(--popover-foreground); }
.still[data-example="bikes"] .bk-select svg { position: absolute; right: 10px; top: 50%; margin-top: -8px; color: var(--muted-foreground); pointer-events: none; }
.still[data-example="bikes"] .bk-head-tools select { height: 32px; }

/* A table (7.6) whose rows may hold two lines and a bar. The script says how high a row is (--row). */
.still[data-example="bikes"] .bk-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.still[data-example="bikes"] .bk-table tr { --surface: var(--card); }
.still[data-example="bikes"] .bk-table th { height: 36px; padding: 0 8px; text-align: left; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted-foreground); border-bottom: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-table td { height: var(--row, 48px); padding: 0 8px; border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-table tbody tr:first-child td { border-top: 0; }
.still[data-example="bikes"] .bk-table th:first-child, .still[data-example="bikes"] .bk-table td:first-child { padding-left: 16px; }
.still[data-example="bikes"] .bk-table th:last-child, .still[data-example="bikes"] .bk-table td:last-child { padding-right: 16px; }
.still[data-example="bikes"] .bk-table th.n { text-align: right; }
.still[data-example="bikes"] .bk-table th button { display: inline-flex; align-items: center; gap: 4px; }
.still[data-example="bikes"] .bk-table th button:hover { color: var(--foreground); }
.still[data-example="bikes"] .bk-table th svg { width: 12px; height: 12px; }
.still[data-example="bikes"] .bk-table tr[data-act] { cursor: pointer; }
.still[data-example="bikes"] .bk-table tbody tr[data-act]:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="bikes"] .bk-table tbody tr.on { background: var(--muted); --surface: var(--muted); }
.still[data-example="bikes"] .bk-table .s-meta { display: block; margin-top: 0; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-table .s-meta .badge { margin-left: 8px; }
.still[data-example="bikes"] .bk-pick { display: block; max-width: 100%; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.still[data-example="bikes"] .bk-pick:hover { text-decoration: underline; }
.still[data-example="bikes"] .bk-name { font-weight: 500; }
.still[data-example="bikes"] .bk-count { display: flex; align-items: center; gap: 12px; }
.still[data-example="bikes"] .bk-bar { display: block; flex: 1; min-width: 0; height: 16px; }
.still[data-example="bikes"] .bk-bar i { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: var(--chart-1); }
/* A list and its pager fill their card, the pager at the foot of it. */
.still[data-example="bikes"] .bk-list, .still[data-example="bikes"] .bk-grid, .still[data-example="bikes"] .bk-sent, .still[data-example="bikes"] .bk-under, .still[data-example="bikes"] .bk-four { display: flex; flex-direction: column; }
.still[data-example="bikes"] .bk-list > *, .still[data-example="bikes"] .bk-grid > *, .still[data-example="bikes"] .bk-sent > *, .still[data-example="bikes"] .bk-under > * { flex: none; }
.still[data-example="bikes"] .s-pager { margin-top: auto; }
.still[data-example="bikes"] .s-empty { flex: 1; }

/* ---------- Overview ---------- */
.still[data-example="bikes"] .bk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.still[data-example="bikes"] .bk-page.fit .bk-tiles { height: 82px; }
.still[data-example="bikes"] .bk-tile { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 16px; }
.still[data-example="bikes"] .bk-tile:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="bikes"] .bk-tile-mid { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.still[data-example="bikes"] .bk-tile .label, .still[data-example="bikes"] .bk-rival .label { min-width: 0; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-fig { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.still[data-example="bikes"] .bk-unit { font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="bikes"] .bk-pair { display: flex; gap: 4px; }
.still[data-example="bikes"] .bk-spark { display: block; flex: none; }
.still[data-example="bikes"] .bk-tile .k-spark, .still[data-example="bikes"] .bk-rival .k-spark { width: 64px; height: 24px; }

.still[data-example="bikes"] .bk-under th:nth-child(2) { width: 15%; }
.still[data-example="bikes"] .bk-under th:nth-child(3), .still[data-example="bikes"] .bk-under th:nth-child(4) { width: 11%; }
.still[data-example="bikes"] .bk-under th:nth-child(5) { width: 24%; padding-left: 28px; }
.still[data-example="bikes"] .bk-under td:nth-child(5) { padding-left: 28px; }
.still[data-example="bikes"] .bk-under th:nth-child(6) { width: 13%; }
.still[data-example="bikes"] .bk-by { flex: none; width: 48px; }

.still[data-example="bikes"] .bk-four-list { flex: 1; display: flex; flex-direction: column; padding: 4px 0; }
.still[data-example="bikes"] .bk-four-row { flex: 1; display: grid; grid-template-columns: 104px minmax(0, 1fr) 24px; align-items: center; column-gap: 12px; width: 100%; min-height: 40px; padding: 0 16px; }
.still[data-example="bikes"] .bk-four-row:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="bikes"] .bk-four-row .bk-bar { height: 20px; }
.still[data-example="bikes"] .bk-four-name { font-weight: 500; white-space: nowrap; }

/* ---------- Prices ---------- */
.still[data-example="bikes"] .bk-tools { display: flex; align-items: center; gap: 8px; }
.still[data-example="bikes"] .bk-tools .s-search { flex: 1; width: auto; min-width: 160px; max-width: 288px; }
.still[data-example="bikes"] .bk-show { margin-left: 0; flex: none; }
.still[data-example="bikes"] .bk-show button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; white-space: nowrap; }
.still[data-example="bikes"] .bk-show button span { color: var(--subtle-foreground); font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .bk-list th:nth-child(2) { width: 15%; }
.still[data-example="bikes"] .bk-list th:nth-child(3) { width: 21%; }
.still[data-example="bikes"] .bk-list th:nth-child(4) { width: 29%; }
/* How far a rival's price is from the shop's: to the left of the line it is less, which is what matters and so
   is purple; to the right it is more, and grey. */
.still[data-example="bikes"] .bk-split { position: relative; display: block; flex: none; width: 64px; height: 16px; }
.still[data-example="bikes"] .bk-split::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--muted-foreground); }
.still[data-example="bikes"] .bk-split i { position: absolute; top: 3px; bottom: 3px; min-width: 2px; }
.still[data-example="bikes"] .bk-split .less { right: 50%; border-radius: 4px 0 0 4px; background: var(--chart-1); }
.still[data-example="bikes"] .bk-split .more { left: 50%; border-radius: 0 4px 4px 0; background: var(--chart-4); }
.still[data-example="bikes"] .bk-gap .n { flex: 1; }

.still[data-example="bikes"] .bk-side { display: grid; }
.still[data-example="bikes"] .bk-rungs, .still[data-example="bikes"] .bk-changes { padding: 8px 0; }
.still[data-example="bikes"] .bk-rung { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; white-space: nowrap; }
.still[data-example="bikes"] .bk-rung > :first-child { margin-right: auto; }
.still[data-example="bikes"] .bk-rung.you { background: var(--muted); }
.still[data-example="bikes"] .bk-rung.you .bk-shop { font-weight: 600; }
.still[data-example="bikes"] .bk-rung b { width: 60px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .bk-nokey { width: 14px; flex: none; }
.still[data-example="bikes"] .bk-rung .k-key.line { width: 14px; }
.still[data-example="bikes"] .bk-off { font-size: 12px; line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .bk-absent { height: 20px; padding: 4px 16px 0; font-size: 12px; line-height: 16px; color: var(--subtle-foreground); }
.still[data-example="bikes"] .bk-sub { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-top: 1px solid var(--border); }
.still[data-example="bikes"] .bk-sub .label { min-width: 0; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-changes { padding-top: 0; }
.still[data-example="bikes"] .bk-changes .bk-to { width: 132px; justify-content: flex-end; }
.still[data-example="bikes"] .bk-sub + .s-pad { padding-top: 0; }

/* ---------- Rivals ---------- */
.still[data-example="bikes"] .bk-rivals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.still[data-example="bikes"] .bk-page.fit .bk-rivals { height: 172px; }
.still[data-example="bikes"] .bk-rival { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 16px; cursor: pointer; }
.still[data-example="bikes"] .bk-rival:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="bikes"] .bk-rival.on { background: var(--muted); }
.still[data-example="bikes"] .bk-rival-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; margin-bottom: 4px; }
.still[data-example="bikes"] .bk-rival-top .bk-pick { font-weight: 600; }
.still[data-example="bikes"] .bk-rival.on .badge.neutral { background: var(--background); }
.still[data-example="bikes"] .bk-rival-top button.badge:hover { color: var(--foreground); }
.still[data-example="bikes"] .bk-facts { display: grid; gap: 4px; font-size: 12px; line-height: 16px; }
.still[data-example="bikes"] .bk-rival .bk-facts { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.still[data-example="bikes"] .bk-facts > div { display: flex; justify-content: space-between; gap: 8px; }
.still[data-example="bikes"] .bk-facts dt { color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="bikes"] .bk-facts dd { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.still[data-example="bikes"] .bk-stack { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.still[data-example="bikes"] .bk-stack > * { min-width: 0; min-height: 0; }
/* Where each rival is cheaper: more products, darker. A cell leads to those products. */
.still[data-example="bikes"] .bk-heat { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 2px; align-items: center; font-size: 12px; line-height: 16px; }
.still[data-example="bikes"] .bk-heat-top { padding: 0 2px 6px; color: var(--muted-foreground); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-heat-top.on { color: var(--foreground); font-weight: 500; }
.still[data-example="bikes"] .bk-heat-name { padding-right: 12px; color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="bikes"] .bk-heat button { height: var(--cell, 24px); border-radius: 4px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--foreground); }
.still[data-example="bikes"] .bk-heat .s0 { box-shadow: inset 0 0 0 1px var(--border); }
.still[data-example="bikes"] .bk-heat .s1 { background: color-mix(in srgb, var(--chart-1) 16%, transparent); }
.still[data-example="bikes"] .bk-heat .s2 { background: color-mix(in srgb, var(--chart-1) 34%, transparent); }
.still[data-example="bikes"] .bk-heat .s3 { background: color-mix(in srgb, var(--chart-1) 54%, transparent); }
.still[data-example="bikes"] .bk-heat .s4 { background: color-mix(in srgb, var(--chart-1) 76%, transparent); color: var(--brand-foreground); }
.still[data-example="bikes"] .bk-heat .s5 { background: var(--chart-1); color: var(--brand-foreground); }
.still[data-example="bikes"] .bk-heat button:hover { outline: 1px solid var(--foreground); outline-offset: -1px; }

/* ---------- Stock ---------- */
.still[data-example="bikes"] .bk-lone th:nth-child(2) { width: 18%; }
.still[data-example="bikes"] .bk-lone th:nth-child(3) { width: 25%; }
.still[data-example="bikes"] .bk-lone th:nth-child(4) { width: 20%; }
.still[data-example="bikes"] .bk-short { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.still[data-example="bikes"] .bk-page.fit .bk-short { height: calc(100% - 48px); }
.still[data-example="bikes"] .bk-short-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 96px; align-items: center; gap: 12px; }
.still[data-example="bikes"] .bk-short-row .n { font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="bikes"] .bk-bar.wide { display: flex; gap: 2px; height: 20px; }
.still[data-example="bikes"] .bk-bar.wide .low { background: var(--chart-2); }
.still[data-example="bikes"] .bk-bar.wide i[style^="width:0%"] { display: none; }
.still[data-example="bikes"] .bk-grid th:nth-child(1) { width: 30%; }
.still[data-example="bikes"] .bk-grid th:nth-child(2) { width: 96px; }
.still[data-example="bikes"] .bk-where { display: none; }
.still[data-example="bikes"] .bk-none { color: var(--subtle-foreground); }
.still[data-example="bikes"] .bk-low { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .bk-in { display: inline-flex; color: var(--subtle-foreground); }

/* ---------- Offers: when each one runs ---------- */
.still[data-example="bikes"] .bk-plan-in { padding: 4px 0 8px; }
.still[data-example="bikes"] .bk-plan-top, .still[data-example="bikes"] .bk-plan-foot, .still[data-example="bikes"] .bk-offer { display: grid; grid-template-columns: 288px minmax(0, 1fr); column-gap: 16px; align-items: center; width: 100%; padding: 0 20px 0 16px; }
.still[data-example="bikes"] .bk-plan-top, .still[data-example="bikes"] .bk-plan-foot { height: 24px; font-size: 12px; line-height: 16px; color: var(--subtle-foreground); font-variant-numeric: tabular-nums; }
.still[data-example="bikes"] .bk-offer { height: var(--row, 40px); }
.still[data-example="bikes"] .bk-offer:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="bikes"] .bk-offer.on { background: var(--muted); }
.still[data-example="bikes"] .bk-offer-name { display: block; min-width: 0; }
.still[data-example="bikes"] .bk-offer-name b { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.still[data-example="bikes"] .bk-offer-name .s-meta { display: block; margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-lane { position: relative; display: block; align-self: stretch; }
.still[data-example="bikes"] .bk-lane > span, .still[data-example="bikes"] .bk-lane > b { position: absolute; top: 4px; white-space: nowrap; }
.still[data-example="bikes"] .bk-lane > span { padding-left: 4px; }
.still[data-example="bikes"] .bk-lane > b { transform: translateX(-50%); font-weight: 500; color: var(--foreground); }
.still[data-example="bikes"] .bk-week, .still[data-example="bikes"] .bk-now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--chart-grid); }
.still[data-example="bikes"] .bk-offer.on .bk-week, .still[data-example="bikes"] .bk-offer:hover .bk-week { background: var(--border); }
.still[data-example="bikes"] .bk-offer .bk-now, .still[data-example="bikes"] .bk-offer.on .bk-now { background: var(--subtle-foreground); }
.still[data-example="bikes"] .bk-span { position: absolute; top: 50%; height: 14px; margin-top: -7px; border-radius: 4px; background: var(--chart-1); }
.still[data-example="bikes"] .bk-span.over { background: var(--chart-4); }
.still[data-example="bikes"] .bk-span.ahead { background: transparent; box-shadow: inset 0 0 0 2px var(--chart-1); }
.still[data-example="bikes"] .bk-span.open { border-radius: 4px 0 0 4px; }
.still[data-example="bikes"] .bk-meaning-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.still[data-example="bikes"] .bk-page.fit .bk-meaning-in { height: calc(100% - 48px); }
.still[data-example="bikes"] .bk-meaning-in.solo { grid-template-columns: minmax(0, 1fr); }
.still[data-example="bikes"] .bk-says { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 576px; padding: 16px; }
.still[data-example="bikes"] .bk-says .bk-facts > div { justify-content: flex-start; }
.still[data-example="bikes"] .bk-says .bk-facts dt { width: 72px; }
.still[data-example="bikes"] .bk-says .bk-facts dd { text-align: left; }
.still[data-example="bikes"] .bk-meaning-in > .bk-table { border-left: 1px solid var(--border); align-self: start; }
.still[data-example="bikes"] .bk-page.fit .bk-meaning-in > .bk-table { align-self: stretch; height: 100%; }
.still[data-example="bikes"] .bk-meaning-in > .bk-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.still[data-example="bikes"] .bk-meaning th:nth-child(2) { width: 144px; }
.still[data-example="bikes"] .bk-meaning th:nth-child(3) { width: 80px; }

/* ---------- Alerts, and Monday's report ---------- */
.still[data-example="bikes"] .bk-sheets { display: flex; height: 36px; margin-top: -8px; border-bottom: 1px solid var(--border); }
.still[data-example="bikes"] .bk-rules { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.still[data-example="bikes"] .bk-page.fit .bk-rules { height: 106px; }
.still[data-example="bikes"] .bk-rule { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; }
.still[data-example="bikes"] .bk-rule + .bk-rule { border-left: 1px solid var(--border); }
.still[data-example="bikes"] .bk-rule-name { font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="bikes"] .bk-rule .seg { margin-left: 0; align-self: flex-start; }
.still[data-example="bikes"] .bk-rule .seg button { padding: 4px 12px; }
.still[data-example="bikes"] .bk-switches { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 32px; }
.still[data-example="bikes"] .bk-switch { justify-content: space-between; }
.still[data-example="bikes"] .bk-switch { position: relative; display: flex; align-items: center; gap: 8px; height: 28px; cursor: pointer; white-space: nowrap; }
.still[data-example="bikes"] .bk-switch input { position: absolute; right: 0; width: 32px; height: 18px; margin: 0; opacity: 0; cursor: pointer; }
.still[data-example="bikes"] .bk-switch input + i { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: var(--input); transition: background 0.15s ease; }
.still[data-example="bikes"] .bk-switch input + i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted-foreground); transition: transform 0.15s ease; }
.still[data-example="bikes"] .bk-switch input:checked + i { background: var(--primary); }
.still[data-example="bikes"] .bk-switch input:checked + i::after { transform: translateX(14px); background: var(--primary-foreground); }
.still[data-example="bikes"] .bk-switch input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 2px; }
/* A day with no alert draws nothing, not a hairline. */
.still[data-example="bikes"] .bk-sent .k-bar[style^="height:0%"] { display: none; }
.still[data-example="bikes"] .bk-msgs { border-top: 1px solid var(--border); }
.still[data-example="bikes"] .bk-msg { display: flex; align-items: center; gap: 12px; height: var(--row, 56px); padding: 0 16px; }
.still[data-example="bikes"] .bk-msg + .bk-msg { border-top: 1px solid var(--border); }
.still[data-example="bikes"] .bk-msg > div { flex: 1; min-width: 0; }
.still[data-example="bikes"] .bk-msg .s-meta { margin-top: 0; }
.still[data-example="bikes"] .bk-msg-by { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; background: var(--muted); color: var(--muted-foreground); }
.still[data-example="bikes"] .bk-report .card-head .label { overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-report-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.still[data-example="bikes"] .bk-report-figs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 16px; }
.still[data-example="bikes"] .bk-report-figs > div + div { border-left: 1px solid var(--border); }
.still[data-example="bikes"] .bk-report-figs .label { color: var(--muted-foreground); }
.still[data-example="bikes"] .bk-report-figs .s-meta { margin-top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-report-lines { display: grid; gap: 6px; padding: 12px 16px; list-style: none; }
.still[data-example="bikes"] .bk-report-lines li { display: flex; gap: 8px; white-space: nowrap; }
.still[data-example="bikes"] .bk-report-lines li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="bikes"] .bk-report-lines svg { flex: none; margin-top: 2px; color: var(--muted-foreground); }
.still[data-example="bikes"] .bk-report-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.still[data-example="bikes"] .bk-report-two > div + div { border-left: 1px solid var(--border); }
.still[data-example="bikes"] .bk-report-two td:last-child { width: 168px; }
.still[data-example="bikes"] .bk-report .bk-sub { border-bottom: 1px solid var(--border); }

/* ---------- on a phone: one column, and no chart or table cut off ---------- */
@container still (max-width: 620px) {
  .still[data-example="bikes"] .seg { display: flex; }
  .still[data-example="bikes"] .card-head .aside { display: block; }
  .still[data-example="bikes"] .card-head { row-gap: 4px; }
  .still[data-example="bikes"] .card-head .label { white-space: normal; }
  .still[data-example="bikes"] .bk-row-a, .still[data-example="bikes"] .bk-row-b, .still[data-example="bikes"] .bk-row-c, .still[data-example="bikes"] .bk-row-d { grid-template-columns: minmax(0, 1fr); }
  .still[data-example="bikes"] .bk-head-tools { margin-left: 0; flex-wrap: wrap; }
  .still[data-example="bikes"] .bk-side, .still[data-example="bikes"] .bk-tile .bk-spark, .still[data-example="bikes"] .bk-lone thead { display: none; }
  .still[data-example="bikes"] .bk-table th, .still[data-example="bikes"] .bk-table td { padding: 0 6px; }
  .still[data-example="bikes"] .bk-table th:first-child, .still[data-example="bikes"] .bk-table td:first-child { padding-left: 16px; }
  .still[data-example="bikes"] .bk-table th:last-child, .still[data-example="bikes"] .bk-table td:last-child { padding-right: 16px; }
  .still[data-example="bikes"] .bk-narrow { display: inline; }
  .still[data-example="bikes"] .bk-table .s-meta.bk-narrow { display: block; }

  .still[data-example="bikes"] .bk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .still[data-example="bikes"] .bk-tile-mid { flex-wrap: wrap; row-gap: 4px; }
  .still[data-example="bikes"] .bk-tile .label { white-space: normal; }
  .still[data-example="bikes"] .bk-under th:nth-child(2), .still[data-example="bikes"] .bk-under td:nth-child(2), .still[data-example="bikes"] .bk-under th:nth-child(4), .still[data-example="bikes"] .bk-under td:nth-child(4), .still[data-example="bikes"] .bk-under .bk-bar { display: none; }
  .still[data-example="bikes"] .bk-under th:nth-child(3) { width: 76px; }
  .still[data-example="bikes"] .bk-under th:nth-child(5) { width: 72px; padding-left: 6px; }
  .still[data-example="bikes"] .bk-under td:nth-child(5) { padding-left: 6px; }
  .still[data-example="bikes"] .bk-under th:nth-child(6) { width: 104px; }
  .still[data-example="bikes"] .bk-under td, .still[data-example="bikes"] .bk-list td { padding-top: 6px; padding-bottom: 6px; }
  .still[data-example="bikes"] .bk-under .bk-pick, .still[data-example="bikes"] .bk-list .bk-pick { white-space: normal; }
  .still[data-example="bikes"] .bk-by { width: auto; }
  .still[data-example="bikes"] .bk-four-row { min-height: 44px; }

  .still[data-example="bikes"] .bk-tools { flex-wrap: wrap; }
  .still[data-example="bikes"] .bk-tools .s-search { order: -1; flex: none; width: 100%; max-width: none; }
  .still[data-example="bikes"] .bk-show { width: 100%; }
  .still[data-example="bikes"] .bk-show button { flex: 1; justify-content: center; padding: 5px 4px; }
  .still[data-example="bikes"] .bk-tools .bk-select { flex: 1 1 148px; min-width: 0; }
  .still[data-example="bikes"] .bk-tools .bk-select + .bk-select { flex-basis: 232px; }
  .still[data-example="bikes"] .bk-tools .bk-select select { width: 100%; text-overflow: ellipsis; }
  .still[data-example="bikes"] .bk-list th:nth-child(2), .still[data-example="bikes"] .bk-list td:nth-child(2), .still[data-example="bikes"] .bk-list .bk-split { display: none; }
  .still[data-example="bikes"] .bk-list th:nth-child(3) { width: 112px; }
  .still[data-example="bikes"] .bk-list th:nth-child(4) { width: 96px; }
  .still[data-example="bikes"] .bk-list th:nth-child(4) button { float: right; }

  .still[data-example="bikes"] .bk-rivals { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .still[data-example="bikes"] .bk-stack { grid-template-rows: none; }
  .still[data-example="bikes"] .bk-rival { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 16px; align-items: center; padding: 12px; }
  .still[data-example="bikes"] .bk-rival > * { grid-column: 1; }
  .still[data-example="bikes"] .bk-rival .bk-facts { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; }
  .still[data-example="bikes"] .bk-rival .bk-spark { display: none; }
  .still[data-example="bikes"] .bk-rival-top { margin-bottom: 0; }
  .still[data-example="bikes"] .bk-rival-top .badge { display: none; }
  .still[data-example="bikes"] .bk-facts dt { white-space: normal; }
  .still[data-example="bikes"] .bk-heat-top { min-height: 38px; white-space: normal; }

  .still[data-example="bikes"] .bk-lone td { height: 52px; }
  .still[data-example="bikes"] .bk-lone th:nth-child(n+2), .still[data-example="bikes"] .bk-lone td:nth-child(n+2) { display: none; }
  .still[data-example="bikes"] .bk-short-row { grid-template-columns: 100px minmax(0, 1fr) auto; gap: 8px; }
  .still[data-example="bikes"] .bk-grid th:nth-child(n+3), .still[data-example="bikes"] .bk-grid td:nth-child(n+3) { display: none; }
  .still[data-example="bikes"] .bk-grid th:nth-child(1) { width: auto; }
  .still[data-example="bikes"] .bk-grid th:nth-child(2) { width: 84px; }
  .still[data-example="bikes"] .bk-grid td { height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; white-space: normal; }
  .still[data-example="bikes"] .bk-grid .bk-pick { white-space: normal; }
  .still[data-example="bikes"] .bk-where { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
  .still[data-example="bikes"] .bk-where > span { white-space: nowrap; }

  .still[data-example="bikes"] .bk-plan-top, .still[data-example="bikes"] .bk-plan-foot, .still[data-example="bikes"] .bk-offer { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .still[data-example="bikes"] .bk-plan-top > span, .still[data-example="bikes"] .bk-plan-foot > span { display: none; }
  .still[data-example="bikes"] .bk-offer { height: auto; padding-top: 8px; row-gap: 2px; }
  .still[data-example="bikes"] .bk-offer .bk-lane { height: 24px; }
  .still[data-example="bikes"] .bk-plan-foot .bk-lane span:nth-child(even) { display: none; }
  .still[data-example="bikes"] .bk-meaning-in { grid-template-columns: minmax(0, 1fr); }
  .still[data-example="bikes"] .bk-meaning-in > .bk-table { border-left: 0; border-top: 1px solid var(--border); }
  .still[data-example="bikes"] .bk-meaning-in > .bk-table tbody tr:last-child td { border-bottom: 0; }
  .still[data-example="bikes"] .bk-meaning th:nth-child(2) { width: 96px; }
  .still[data-example="bikes"] .bk-meaning th:nth-child(3) { width: 68px; }
  .still[data-example="bikes"] .bk-meaning th { white-space: normal; }
  .still[data-example="bikes"] .bk-meaning td:first-child { white-space: normal; }

  .still[data-example="bikes"] .bk-rules { grid-template-columns: minmax(0, 1fr); }
  .still[data-example="bikes"] .bk-rule + .bk-rule { border-left: 0; border-top: 1px solid var(--border); }
  .still[data-example="bikes"] .bk-rule-name { white-space: normal; }
  .still[data-example="bikes"] .bk-switches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; }
  .still[data-example="bikes"] .bk-msg { height: auto; min-height: 56px; padding: 10px 16px; }
  .still[data-example="bikes"] .bk-msg .bk-pick { white-space: normal; text-align: left; }
  .still[data-example="bikes"] .bk-report-figs, .still[data-example="bikes"] .bk-report-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .still[data-example="bikes"] .bk-report-figs > div:nth-child(odd) { border-left: 0; }
  .still[data-example="bikes"] .bk-report-figs > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .still[data-example="bikes"] .bk-report-figs .label, .still[data-example="bikes"] .bk-report-figs .s-meta, .still[data-example="bikes"] .bk-report-lines li { white-space: normal; }
  .still[data-example="bikes"] .bk-report-two { grid-template-columns: minmax(0, 1fr); }
  .still[data-example="bikes"] .bk-report-two > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .still[data-example="bikes"] .bk-report-two td:last-child { width: 132px; }
}