/* Canvas Live: give the portrait frame first use of the available height. */
@media (max-width: 600px) and (orientation: portrait) {
  main.ritual-room.unified-work-room.canvas.results-visible .unified-canvas-work .canvas-v111-layout {
    --canvas-rail-reserve: clamp(148px, 24cqh, 165px);
  }

  main.ritual-room.unified-work-room.canvas.results-visible .unified-canvas-work .canvas-filter-panel {
    gap: 6px;
    padding: 7px;
  }

  .canvas-filter-panel .canvas-live-heading {
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
  }
  .canvas-filter-panel .canvas-live-heading h2 {
    font-size: clamp(17px, 4.8vw, 23px);
  }
  .canvas-filter-panel .canvas-live-heading .canvas-gallery-until {
    grid-column: 1;
  }
  .canvas-filter-panel .canvas-live-hand-total {
    grid-column: 2;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font: 400 11px/1.1 var(--pluritual-sans, Arial, sans-serif);
  }
  /* Same serif figure and size as the established desktop Live counter. */
  .canvas-filter-panel .canvas-live-hand-total > strong {
    font: 400 42px/.95 var(--pluritual-wip-serif, Georgia, serif);
    font-variant-numeric: tabular-nums;
  }

  .canvas-filter-panel .canvas-live-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .canvas-filter-panel .canvas-live-card {
    grid-template-columns: minmax(0, 1fr) 13px;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    gap: 2px 3px;
    min-height: 60px;
    padding: 5px 6px;
  }
  .canvas-filter-panel .canvas-live-card-copy { display: contents; }
  .canvas-filter-panel .canvas-live-card-copy > strong {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: clamp(13px, 3.55vw, 16px);
  }
  .canvas-filter-panel .canvas-live-card-copy > small {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 10px;
    overflow-wrap: anywhere;
  }
  .canvas-filter-panel .canvas-live-card-count {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: baseline;
    gap: 3px;
  }
  .canvas-filter-panel .canvas-live-card-count > strong { font-size: 18px; }
  .canvas-filter-panel .canvas-live-card-count > small { font-size: 10px; }
  .canvas-filter-panel .canvas-live-card-check {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    width: 13px;
    height: 13px;
  }
  /* The personal swatches carry the same meaning as their preceding caption. */
  .canvas-filter-panel .canvas-live-card-copy:has(.canvas-live-card-swatches) > small {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .canvas-filter-panel .canvas-live-card-swatches {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 2px;
  }
  .canvas-filter-panel .canvas-live-card-swatches > i { width: 8px; height: 8px; }
}

@media (max-width: 390px) and (max-height: 650px) and (orientation: portrait) {
  /* cqh already measures the stage's content box, below its toolbar padding. */
  main.ritual-room.unified-work-room.canvas.results-visible .unified-canvas-work .canvas-stage-real > .canvas-art-mount {
    width: min(100%, calc(100cqh * 558 / 671));
  }
}

@media (max-width: 350px) and (orientation: portrait) {
  .canvas-filter-panel .canvas-live-card-copy > strong {
    font-size: 12px;
    white-space: nowrap;
  }
}