/* Styles that only the group of three restaurants uses (restaurants.js). Everything shared is in ../index.html.
   Every rule begins with the example's own name, so that nothing here reaches the page or the other examples, and
   every colour is a token, so that dark mode follows by itself. One colour: purple in the charts and greys round
   them. Red is in one place, the note that a manager was told of a bad review that still waits for its reply. */

/* A page. On a wide window it is exactly as high as the room it has (the script says how high), and its cards share
   that out, so nothing scrolls. The script works out every plot's height itself, so the kit's own stretch is off. */
.still[data-example="restaurants"] .rv-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.still[data-example="restaurants"] .k-plot { --th: var(--h); }

/* The row above a page: what it shows of on the left, how fresh it is or the search on the right. */
.still[data-example="restaurants"] .rv-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; }
.still[data-example="restaurants"] .rv-tools .seg { margin-left: 0; }
.still[data-example="restaurants"] .rv-fresh { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--subtle-foreground); white-space: nowrap; }
.still[data-example="restaurants"] .rv-tools .s-search { width: 240px; }
.still[data-example="restaurants"] .rv-pick { position: relative; display: inline-flex; }
.still[data-example="restaurants"] .rv-narrow { display: none; }
.still[data-example="restaurants"] .rv-pick select { height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--input); border-radius: 10px; background: transparent; color: var(--foreground); font: inherit; appearance: none; cursor: pointer; }
.still[data-example="restaurants"] .rv-pick select option { background: var(--popover); color: var(--popover-foreground); }
.still[data-example="restaurants"] .rv-pick svg { position: absolute; right: 10px; top: 10px; pointer-events: none; color: var(--muted-foreground); }

/* Small parts: stars, a row's second line, the note that a manager was told. */
.still[data-example="restaurants"] .rv-stars { display: inline-flex; gap: 1px; flex: none; color: var(--foreground); }
.still[data-example="restaurants"] .rv-stars svg { width: 12px; height: 12px; fill: none; stroke: color-mix(in srgb, var(--foreground) 28%, transparent); stroke-width: 2; stroke-linejoin: round; }
.still[data-example="restaurants"] .rv-stars svg.on { fill: currentColor; stroke: currentColor; }
.still[data-example="restaurants"] .rv-star { width: 14px; height: 14px; margin-left: 4px; fill: currentColor; stroke: none; color: var(--subtle-foreground); }
.still[data-example="restaurants"] .rv-where { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-age { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--subtle-foreground); white-space: nowrap; }
.still[data-example="restaurants"] .rv-sub { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.still[data-example="restaurants"] button.badge { cursor: pointer; }
.still[data-example="restaurants"] button.badge:hover { color: var(--foreground); }
.still[data-example="restaurants"] .rv-told { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); background: var(--muted); }
.still[data-example="restaurants"] .rv-told.now { color: var(--destructive); background: var(--destructive-muted); }
.still[data-example="restaurants"] .rv-told svg { width: 12px; height: 12px; flex: none; }

/* A row of headline figures: four across, 80px high. On the Overview each is a button that picks its restaurant. */
.still[data-example="restaurants"] .rv-tiles { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.still[data-example="restaurants"] .rv-tile { height: 80px; padding: 12px 16px; justify-content: space-between; gap: 0; }
.still[data-example="restaurants"] .rv-tile .k-stat-mid { align-items: center; }
.still[data-example="restaurants"] .rv-tile .k-figure { display: inline-flex; align-items: center; }
.still[data-example="restaurants"] button.rv-tile { cursor: pointer; }
.still[data-example="restaurants"] button.rv-tile:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="restaurants"] button.rv-tile.on { border-color: var(--foreground); }
.still[data-example="restaurants"] button.rv-tile.on .label { color: var(--foreground); font-weight: 500; }
.still[data-example="restaurants"] .rv-count { min-width: 0; font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-tile .k-meter { flex: 1; min-width: 32px; }

/* Overview: what waits for an OK is the big card on the left, and the two charts stand one over the other beside it. */
.still[data-example="restaurants"] .rv-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.still[data-example="restaurants"] .rv-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.still[data-example="restaurants"] .rv-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.still[data-example="restaurants"] .rv-queue { display: flex; flex-direction: column; min-height: 0; }
.still[data-example="restaurants"] .rv-queue .s-empty { flex: 1; }
.still[data-example="restaurants"] .rv-waits { flex: none; border-bottom: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-wait { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 16px; }
.still[data-example="restaurants"] .rv-queue.roomy .rv-wait { height: 52px; }
.still[data-example="restaurants"] .rv-wait + .rv-wait { border-top: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-wait b { flex: 1; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-wait.on b { font-weight: 600; }
.still[data-example="restaurants"] .rv-from { font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="restaurants"] .rv-wait .rv-age { margin-left: 0; min-width: 24px; text-align: right; }
.still[data-example="restaurants"] .rv-case { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.still[data-example="restaurants"] .rv-queue.roomy .rv-case { gap: 12px; padding: 20px; }
.still[data-example="restaurants"] .rv-case-top { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.still[data-example="restaurants"] .rv-case-text { line-height: 22px; }
.still[data-example="restaurants"] .rv-case .rv-facts { padding-top: 0; border-top: 0; }
.still[data-example="restaurants"] .rv-case .s-box { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 4px; }
.still[data-example="restaurants"] .rv-case .s-box-head { flex: none; padding: 8px 12px; }
.still[data-example="restaurants"] .rv-case .s-box-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px; line-height: 20px; overflow-y: auto; scrollbar-width: none; }
.still[data-example="restaurants"] .rv-case .s-box-body::-webkit-scrollbar { display: none; }
.still[data-example="restaurants"] .rv-case .s-box-foot { flex: none; padding: 8px 12px; }
.still[data-example="restaurants"] .rv-draft .s-box-body { color: var(--foreground); }
.still[data-example="restaurants"] .s-box-head .seg button { font-weight: 400; }
.still[data-example="restaurants"] .s-box-body textarea { min-height: 132px; resize: none; }
.still[data-example="restaurants"] .rv-case .s-box-body textarea { flex: 1; min-height: 60px; line-height: 20px; }
.still[data-example="restaurants"] .rv-sent { margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--subtle-foreground); text-align: right; }

/* Bars lying down, in the one colour: complaints on the Overview, and every topic on What people say. The rows of a
   list share the height of their card, up to a height that still reads as a list. */
.still[data-example="restaurants"] .rv-said { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 0; }
.still[data-example="restaurants"] .rv-bar { flex: 1; max-height: 44px; display: grid; grid-template-columns: minmax(0, 136px) minmax(0, 1fr) 24px; align-items: center; gap: 12px; padding: 0 16px; }
.still[data-example="restaurants"] .rv-bar span,
.still[data-example="restaurants"] .rv-topic > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-bar i,
.still[data-example="restaurants"] .rv-topic i { display: block; height: 20px; }
.still[data-example="restaurants"] .rv-bar b,
.still[data-example="restaurants"] .rv-topic b { display: block; height: 100%; min-width: 2px; border-radius: 6px; background: var(--chart-1); }
.still[data-example="restaurants"] .rv-bar em,
.still[data-example="restaurants"] .rv-topic em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.still[data-example="restaurants"] .rv-said:hover .rv-bar:not(:hover) b { opacity: 0.4; }
.still[data-example="restaurants"] .rv-bar:hover,
.still[data-example="restaurants"] .rv-wait:hover,
.still[data-example="restaurants"] .rv-item:hover,
.still[data-example="restaurants"] .rv-quote:hover,
.still[data-example="restaurants"] .rv-topic:hover,
.still[data-example="restaurants"] .rv-dish:not(.rv-dish-head):hover,
.still[data-example="restaurants"] .rv-moves button:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
.still[data-example="restaurants"] .rv-wait.on,
.still[data-example="restaurants"] .rv-item.on,
.still[data-example="restaurants"] .rv-topic.on,
.still[data-example="restaurants"] .rv-dish.on { background: var(--muted); }

/* Reviews: the list and the chosen review, both down to the foot of the page. */
.still[data-example="restaurants"] .rv-inbox,
.still[data-example="restaurants"] .rv-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.still[data-example="restaurants"] .rv-list { display: flex; flex-direction: column; min-height: 0; }
.still[data-example="restaurants"] .rv-list .s-pager { margin-top: auto; }
.still[data-example="restaurants"] .rv-list .s-empty { flex: 1; }
.still[data-example="restaurants"] .rv-item,
.still[data-example="restaurants"] .rv-quote { flex: none; display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 16px; }
.still[data-example="restaurants"] .rv-item + .rv-item,
.still[data-example="restaurants"] .rv-quote + .rv-quote { border-top: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-item-top { display: flex; align-items: baseline; gap: 8px; }
.still[data-example="restaurants"] .rv-item-top b { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-item-low { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 20px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.still[data-example="restaurants"] .rv-item-low .badge { margin-left: auto; }
.still[data-example="restaurants"] .rv-item.on .badge.neutral { background: var(--background); }
.still[data-example="restaurants"] .rv-detail { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 20px 24px 24px; }
.still[data-example="restaurants"] .rv-detail-top { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.still[data-example="restaurants"] .rv-detail-top .badge { margin-left: auto; }
.still[data-example="restaurants"] .rv-detail .s-h { margin-top: -4px; }
.still[data-example="restaurants"] .rv-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 12px; border-top: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-facts dt { font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.still[data-example="restaurants"] .rv-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-weight: 500; }

/* What people say: every topic down the left, then the chosen one and the latest reviews to mention it. */
.still[data-example="restaurants"] .rv-topics { display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
.still[data-example="restaurants"] .rv-topics .rv-sub { flex: none; padding: 12px 16px 4px; }
.still[data-example="restaurants"] .rv-topic { flex: 1; min-height: 36px; max-height: 56px; display: grid; grid-template-columns: minmax(0, 136px) minmax(0, 1fr) 24px 56px; align-items: center; gap: 12px; width: 100%; padding: 0 16px; }
.still[data-example="restaurants"] .rv-topic .delta { justify-self: start; }
.still[data-example="restaurants"] .rv-about { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.still[data-example="restaurants"] .rv-about > .card { flex: none; }
.still[data-example="restaurants"] .rv-about > .rv-quotes,
.still[data-example="restaurants"] .rv-about > .rv-changes { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.still[data-example="restaurants"] .rv-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 16px; }
.still[data-example="restaurants"] .rv-about-in .rv-sub { margin-bottom: 8px; }
.still[data-example="restaurants"] .rv-about-in .rv-gap { margin-top: 16px; }
.still[data-example="restaurants"] .rv-about-in .bars { grid-template-columns: minmax(0, 104px) 1fr auto; }
.still[data-example="restaurants"] .rv-about-in .k-heat i { height: var(--cell, 22px); }
.still[data-example="restaurants"] .rv-end { margin-left: auto; }
.still[data-example="restaurants"] .rv-quote-text { font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rivals' menus: each dish is a line, your price in the middle of it and the rivals' either side. */
.still[data-example="restaurants"] .rv-split.menu { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.still[data-example="restaurants"] .rv-menu { display: flex; flex-direction: column; min-height: 0; }
.still[data-example="restaurants"] .rv-dish { flex: 1; max-height: 72px; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 200px) 124px; align-items: center; gap: 16px; width: 100%; min-height: 44px; padding: 0 16px; border-top: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-dish > b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-dish-head { flex: none; min-height: 40px; border-top: 0; font-size: 12px; line-height: 16px; color: var(--muted-foreground); }
.still[data-example="restaurants"] .rv-price { text-align: right; font-variant-numeric: tabular-nums; }
.still[data-example="restaurants"] .rv-stand.quiet { font-size: 12px; color: var(--subtle-foreground); }
.still[data-example="restaurants"] .rv-plot,
.still[data-example="restaurants"] .rv-scale { position: relative; height: 24px; margin: 0 8px; }
.still[data-example="restaurants"] .rv-plot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border); }
.still[data-example="restaurants"] .rv-scale { display: flex; align-items: center; justify-content: space-between; margin: 0; color: var(--subtle-foreground); white-space: nowrap; }
.still[data-example="restaurants"] .rv-mark { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; }
.still[data-example="restaurants"] .rv-mark::before,
.still[data-example="restaurants"] .rv-key { content: ""; display: block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--muted-foreground); }
.still[data-example="restaurants"] .rv-mark::before { box-shadow: 0 0 0 2px var(--card); }
.still[data-example="restaurants"] .rv-dish.on .rv-mark::before,
.still[data-example="restaurants"] .rv-dish.on .rv-you { box-shadow: 0 0 0 2px var(--muted); }
.still[data-example="restaurants"] .rv-mark.on { z-index: 1; }
.still[data-example="restaurants"] .rv-mark.on::before,
.still[data-example="restaurants"] .rv-key.on { background: var(--foreground); }
.still[data-example="restaurants"] .rv-mark.off::before,
.still[data-example="restaurants"] .rv-key.off { background: color-mix(in srgb, var(--muted-foreground) 35%, var(--card)); }
.still[data-example="restaurants"] .rv-mark:hover::before { background: var(--foreground); }
.still[data-example="restaurants"] .rv-you { position: absolute; top: 2px; left: 50%; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--chart-1); box-shadow: 0 0 0 2px var(--card); z-index: 2; }
.still[data-example="restaurants"] .rv-key.you { width: 4px; height: 12px; margin: 0 3px; border-radius: 2px; background: var(--chart-1); }
.still[data-example="restaurants"] .rv-legend { margin-left: auto; display: flex; gap: 16px; font-size: 12px; line-height: 16px; color: var(--muted-foreground); white-space: nowrap; }
.still[data-example="restaurants"] .rv-legend span,
.still[data-example="restaurants"] .rv-prices span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.still[data-example="restaurants"] .rv-dish-name { font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-prices > div { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; }
.still[data-example="restaurants"] .rv-prices > div + div { border-top: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-prices span:first-child { margin-right: auto; }
.still[data-example="restaurants"] .rv-prices .you span:first-child { font-weight: 600; }
.still[data-example="restaurants"] .rv-prices b { min-width: 56px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.still[data-example="restaurants"] .rv-moves { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.still[data-example="restaurants"] .rv-moves button { flex: 1; min-height: 52px; max-height: 80px; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 16px; }
.still[data-example="restaurants"] .rv-moves button + button { border-top: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-moves button > span:first-child { min-width: 0; margin-right: auto; display: flex; flex-direction: column; }
.still[data-example="restaurants"] .rv-moves b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.still[data-example="restaurants"] .rv-moves em { min-width: 52px; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* Weekly summary: the week's figures across the top, then the words in the big card and two charts beside it. */
.still[data-example="restaurants"] .rv-report { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.still[data-example="restaurants"] .rv-read { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 20px 24px; }
.still[data-example="restaurants"] .rv-read:not(:last-child) { flex: none; }
/* The week's reviews, where the page is tall enough for them: a row that would be cut short goes to a second column, out of sight. */
.still[data-example="restaurants"] .rv-sources { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.still[data-example="restaurants"] .rv-fit { flex: 1; min-height: 0; display: flex; flex-flow: column wrap; overflow: hidden; }
.still[data-example="restaurants"] .rv-fit .rv-item { border-top: 0; border-bottom: 1px solid var(--border); }
.still[data-example="restaurants"] .rv-read > .s-meta { margin-top: -12px; }
.still[data-example="restaurants"] .rv-read > .s-box { margin-top: 2px; }
.still[data-example="restaurants"] .rv-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; }
.still[data-example="restaurants"] .rv-rail > .card:last-child { flex: none; }
.still[data-example="restaurants"] .rv-rail .bars { grid-template-columns: minmax(0, 104px) 1fr auto; }
.still[data-example="restaurants"] .rv-todo { padding: 6px 14px; }
.still[data-example="restaurants"] .rv-todo label { display: flex; gap: 10px; padding: 6px 0; line-height: 22px; cursor: pointer; }
.still[data-example="restaurants"] .rv-todo input { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--primary); }
.still[data-example="restaurants"] .rv-todo .done span { color: var(--subtle-foreground); text-decoration: line-through; }

/* On a phone: one column, the headline figures two by two, and the chosen thing above the list it was chosen from. */
@container still (max-width: 620px) {
  .still[data-example="restaurants"] .seg { display: flex; }
  .still[data-example="restaurants"] .seg.rv-wide { display: none; }
  .still[data-example="restaurants"] .rv-narrow { display: inline-flex; }
  .still[data-example="restaurants"] .rv-split.menu .rv-about { display: contents; }
  .still[data-example="restaurants"] .rv-split.menu .rv-about > :first-child { order: -1; }
  .still[data-example="restaurants"] .card-head .aside { display: inline; }
  .still[data-example="restaurants"] .rv-main,
  .still[data-example="restaurants"] .rv-inbox,
  .still[data-example="restaurants"] .rv-split,
  .still[data-example="restaurants"] .rv-split.menu,
  .still[data-example="restaurants"] .rv-report,
  .still[data-example="restaurants"] .rv-about-in { grid-template-columns: minmax(0, 1fr); }
  .still[data-example="restaurants"] .rv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .still[data-example="restaurants"] .rv-tile { height: auto; min-height: 72px; padding: 10px 12px; gap: 2px; }
  .still[data-example="restaurants"] .rv-tile .k-stat-mid { flex-wrap: wrap; gap: 0 8px; }
  .still[data-example="restaurants"] .rv-wait { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 2px 8px; }
  .still[data-example="restaurants"] .rv-wait b { flex: 1 0 100%; order: -1; white-space: normal; }
  .still[data-example="restaurants"] .rv-wait .rv-age { margin-left: auto; }
  .still[data-example="restaurants"] .rv-case .s-box-body { overflow: visible; }
  .still[data-example="restaurants"] .rv-case .s-box-body textarea { min-height: 132px; }
  .still[data-example="restaurants"] .rv-bar { flex: none; height: 36px; }
  .still[data-example="restaurants"] .rv-topic { flex: none; height: 40px; }
  .still[data-example="restaurants"] .rv-dish { flex: none; max-height: none; }
  .still[data-example="restaurants"] .rv-moves button { flex: none; }
  .still[data-example="restaurants"] .rv-read { padding: 16px; }
  .still[data-example="restaurants"] .rv-detail,
  .still[data-example="restaurants"] .rv-about { order: -1; }
  .still[data-example="restaurants"] .rv-detail { padding: 16px; }
  .still[data-example="restaurants"] .rv-tools .s-search { width: 100%; }
  .still[data-example="restaurants"] .rv-pick { flex: 1 1 40%; }
  .still[data-example="restaurants"] .rv-pick select { width: 100%; font-size: 16px; }
  .still[data-example="restaurants"] .rv-dish { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 16px; }
  .still[data-example="restaurants"] .rv-dish .rv-plot,
  .still[data-example="restaurants"] .rv-dish .rv-scale { grid-column: 1 / -1; }
  .still[data-example="restaurants"] .rv-dish-head > span:first-child,
  .still[data-example="restaurants"] .rv-dish-head .rv-price,
  .still[data-example="restaurants"] .rv-dish-head .rv-stand { display: none; }
  .still[data-example="restaurants"] .rv-dish .rv-stand { grid-column: 1 / -1; }
}