/* Night (default) palette for custom chrome colors that Pico's own
   data-theme switch doesn't cover. The image viewers (STL/CBCT/panoramic/
   photo viewports) intentionally stay dark in both modes, matching the
   convention of image-viewing surfaces (photo/DICOM viewers), so their
   colors below are not themed. */
:root {
  --color-status-live: #8ce6d1;
  --color-live-strong: #91edd6;
  --tint-live-strong-bg: rgba(77, 201, 167, 0.16);
  --color-live-dot: #4dc9a7;
  --shadow-live-dot: rgba(77, 201, 167, 0.12);
  --tint-surface-faint: rgba(255, 255, 255, 0.035);
  --color-avatar-text: #b7dcf4;
  --tint-avatar-bg: rgba(113, 181, 222, 0.18);
  --tint-card-accent: #183149;
  --tint-panel-gradient-1: rgba(35, 91, 82, 0.2);
  --tint-panel-gradient-2: rgba(14, 27, 42, 0.72);
  --color-status-draft: #b9cce8;
  --tint-status-draft-bg: rgba(125, 155, 190, 0.16);
  --color-status-closed: #e6c3a0;
  --tint-status-closed-bg: rgba(177, 140, 104, 0.16);
  --color-excluded-badge: #e9bd7b;
  --color-excluded-border: #b88a4a;
  --color-report-method: #b9c4de;
  --tint-winner-badge-bg: rgba(67, 205, 150, 0.16);
  --color-report-text: #f4f7ff;
  --color-tone-green: #baf3c8;
  --color-tone-blue: #b7d8ff;
  --color-tone-pink: #f2c2e6;
  --color-report-value: #eef3ff;
  --color-error-text: #f2b8b5;
  --color-winner-accent: #43cd96;
}

/* Day palette: same custom properties, tuned for legibility on light
   surfaces. */
[data-theme="light"] {
  --color-status-live: #0f8f6d;
  --color-live-strong: #0e8a76;
  --tint-live-strong-bg: rgba(15, 143, 109, 0.12);
  --color-live-dot: #12a37f;
  --shadow-live-dot: rgba(18, 163, 127, 0.16);
  --tint-surface-faint: rgba(15, 23, 42, 0.035);
  --color-avatar-text: #1c5f92;
  --tint-avatar-bg: rgba(28, 95, 146, 0.12);
  --tint-card-accent: #d9e8f5;
  --tint-panel-gradient-1: rgba(90, 190, 168, 0.16);
  --tint-panel-gradient-2: rgba(214, 231, 244, 0.6);
  --color-status-draft: #2f4f7a;
  --tint-status-draft-bg: rgba(47, 79, 122, 0.12);
  --color-status-closed: #8a5a2e;
  --tint-status-closed-bg: rgba(138, 90, 46, 0.12);
  --color-excluded-badge: #8a5a1f;
  --color-excluded-border: #c9924f;
  --color-report-method: #41537a;
  --tint-winner-badge-bg: rgba(15, 138, 109, 0.12);
  --color-report-text: #1b2333;
  --color-tone-green: #1f8a4c;
  --color-tone-blue: #2458b0;
  --color-tone-pink: #a8317f;
  --color-report-value: #1b2333;
  --color-error-text: #9c2b23;
  --color-winner-accent: #1f9d70;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0.4rem;
}

.theme-toggle-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle-icon--moon {
  fill: currentColor;
  stroke: none;
}

[data-theme="dark"] .theme-toggle-icon--moon,
[data-theme="light"] .theme-toggle-icon--sun {
  display: none;
}

main.container {
  max-width: 1160px;
  padding-block-start: 0.6rem;
  /* Pico gives nav's first/last <ul> a small negative inline margin so the
     edge items sit flush with the container's padding edge. This container
     has no inline padding of its own, so that pull always slightly overflowed
     the viewport — normally invisible because the 1160px cap left unused
     margin outside it on typical screens to absorb it. Widening the
     container for the vote page below removes that margin, so it needs this
     small buffer to avoid a real horizontal scrollbar. */
  padding-inline: 0.65rem;
}

/* The vote page's viewer/report layout benefits from more horizontal room
   than the rest of the app; widen just that page's container. */
main.container:has(.vote-panel) {
  max-width: 1560px;
}

nav {
  --pico-nav-element-spacing-vertical: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-logout {
  margin: 0;
  padding: 0.4rem 0.8rem;
}

.flash-stack {
  display: grid;
  gap: 0.7rem;
}

.flash {
  margin: 0;
}

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.page-head h1 {
  margin-bottom: 0.2rem;
}

.page-head--compact {
  margin-bottom: 0.2rem;
}

.page-head--compact h1 {
  font-size: 1.3rem;
  margin-bottom: 0;
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.page-head-actions [role="button"],
.page-head-actions form,
.page-head-actions button {
  margin: 0;
}

.inline-form {
  margin: 0;
}

.panel {
  margin-bottom: 0.7rem;
}

.ranking-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.ranking-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 -1px;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--pico-muted-color);
  font-weight: 600;
  font-size: 0.92rem;
}

.ranking-tab:hover {
  color: var(--pico-color);
  background: color-mix(in srgb, var(--pico-card-background-color), transparent 40%);
}

.ranking-tab[aria-selected="true"] {
  color: var(--pico-primary);
  border-bottom-color: var(--pico-primary);
  background: color-mix(in srgb, var(--pico-primary-background), transparent 90%);
}

.ranking-tab-count {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--pico-muted-border-color);
  color: var(--pico-color);
  font-size: 0.72rem;
  font-weight: 700;
}

.ranking-tab[aria-selected="true"] .ranking-tab-count {
  background: var(--pico-primary);
  color: var(--pico-primary-inverse);
}

.ranking-tabpanel[hidden] {
  display: none;
}

.ranking-podium {
  box-shadow: inset 3px 0 0 var(--pico-primary);
}

.rank-position {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ranking-method strong {
  font-weight: 700;
}

.ranking-score,
.ranking-ci {
  font-variant-numeric: tabular-nums;
}

.ranking-empty {
  color: var(--pico-muted-color);
  text-align: center;
}

.votes-table-scroll {
  max-height: 620px;
  overflow-y: auto;
}

.history-chart-shell {
  width: 100%;
}

#history-canvas {
  display: block;
  width: 100%;
  height: 260px;
  border-radius: 8px;
}

.history-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.6rem;
  color: var(--pico-muted-color);
  font-size: 0.82rem;
}

.history-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.history-legend i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.message {
  margin: 0 0 0.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 55%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pico-primary-background), transparent 88%);
  font-size: 0.88rem;
}

.message.error {
  border-color: color-mix(in srgb, #d9534f, transparent 40%);
  background: rgba(217, 83, 79, 0.14);
  color: var(--color-error-text);
}

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  min-width: 760px;
}

.competition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.competition-card {
  display: flex;
  min-height: 260px;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0;
  padding: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 45%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pico-card-background-color), var(--tint-card-accent) 18%), var(--pico-card-background-color) 55%);
}

.competition-card-head h2 {
  margin: 0.4rem 0 0.7rem;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.competition-card-head p {
  margin: 0;
  color: var(--pico-muted-color);
}

.competition-status {
  color: var(--color-status-live);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.competition-modalities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.competition-modalities span {
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 999px;
  color: var(--pico-muted-color);
  font-size: 0.8rem;
}

.competition-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.competition-vote {
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
}

.competition-vote span {
  margin-left: 0.45rem;
  font-size: 1.1em;
}

.competition-ranking {
  font-size: 0.88rem;
  white-space: nowrap;
}

.competition-empty {
  grid-column: 1 / -1;
  margin: 0;
}

.create-competition-action {
  margin: 0;
  font-weight: 700;
}

.create-competition-action span {
  margin-left: 0.4rem;
  font-size: 1.15em;
}

.live-users-panel {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--color-live-dot), transparent 68%);
  border-radius: 14px;
  background: linear-gradient(120deg, var(--tint-panel-gradient-1), var(--tint-panel-gradient-2));
}

.live-users-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.live-users-panel h2 {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
}

.live-users-panel > header > strong {
  display: grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: var(--tint-live-strong-bg);
  color: var(--color-live-strong);
  font-variant-numeric: tabular-nums;
}

.live-users-eyebrow {
  color: var(--color-live-strong);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.live-users-eyebrow i {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--color-live-dot);
  box-shadow: 0 0 0 4px var(--shadow-live-dot);
}

.live-user-list {
  display: grid;
  gap: 0.35rem;
}

.live-user {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(100px, 0.6fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  background: var(--tint-surface-faint);
}

.live-user-avatar {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--tint-avatar-bg);
  color: var(--color-avatar-text);
  font-size: 0.78rem;
  font-weight: 700;
}

.live-user-identity {
  display: grid;
  min-width: 0;
}

.live-user-identity strong,
.live-user-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-user-identity strong {
  font-size: 0.84rem;
}

.live-user-identity small,
.live-user-location,
.live-user time,
.live-users-empty {
  color: var(--pico-muted-color);
  font-size: 0.72rem;
}

.live-user time {
  color: var(--color-live-strong);
  white-space: nowrap;
}

.live-users-empty {
  margin: 0;
  padding: 0.55rem 0;
}

@media (max-width: 600px) {
  .live-user {
    grid-template-columns: auto 1fr auto;
  }

  .live-user-location {
    display: none;
  }
}

.management-competition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
}

.management-competition-card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 305px;
  margin: 0;
  padding: 1.35rem;
}

.management-card-topline,
.management-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.management-competition-card h2 {
  margin: 0.15rem 0 0.75rem;
  font-size: 1.35rem;
}

.management-status {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.management-status.active {
  background: var(--tint-live-strong-bg);
  color: var(--color-live-strong);
}

.management-status.draft {
  background: var(--tint-status-draft-bg);
  color: var(--color-status-draft);
}

.management-status.closed,
.management-status.archived {
  background: var(--tint-status-closed-bg);
  color: var(--color-status-closed);
}

.management-votes {
  color: var(--pico-muted-color);
  font-size: 0.82rem;
}

.management-metrics {
  display: grid;
  grid-template-columns: 1.35fr 0.75fr 1.2fr;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.management-metrics div {
  min-width: 0;
}

.management-metrics span,
.management-metrics small {
  display: block;
  color: var(--pico-muted-color);
  font-size: 0.72rem;
}

.management-metrics strong {
  display: block;
  margin: 0.16rem 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
}

.management-card-actions {
  margin-top: auto;
}

.management-card-actions [role="button"] {
  margin: 0;
  padding: 0.48rem 0.7rem;
  font-size: 0.84rem;
}

.management-card-actions > a:not([role="button"]) {
  font-size: 0.84rem;
  white-space: nowrap;
}

.dataset-inspection-eyebrow {
  color: var(--color-status-live);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dataset-inspection-head p {
  margin: 0;
  color: var(--pico-muted-color);
}

.dataset-patient-nav {
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 0.7rem;
  padding: 0.8rem;
}

.dataset-patient-nav label,
.dataset-patient-nav select,
.dataset-patient-nav [role="button"],
.dataset-patient-nav button {
  margin: 0;
}

.dataset-patient-nav [aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.45;
}

.dataset-case-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

.dataset-case-header span,
.dataset-case-header strong {
  color: var(--pico-muted-color);
  font-size: 0.78rem;
}

.dataset-case-header h2 {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
}

.dataset-report-grid {
  max-height: 680px;
}

.dataset-report-excluded {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--color-excluded-border);
  border-radius: 999px;
  color: var(--color-excluded-badge);
  font-size: 0.65rem;
  font-weight: 600;
  vertical-align: middle;
}

.dataset-report-missing,
.viewer-empty {
  color: var(--pico-muted-color);
}

.viewer-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vote-row-action {
  width: 3.25rem;
  text-align: right;
}

.vote-view-button {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  padding: 0.42rem;
}

.vote-view-button svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.vote-detail-head p {
  margin: 0;
  color: var(--pico-muted-color);
}

.vote-detail-reports {
  max-height: 680px;
}

.vote-detail-report {
  border: 1px solid var(--pico-muted-border-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vote-detail-report > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0 0 0.55rem;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

.vote-detail-report-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vote-detail-report > header h2 {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.vote-detail-report-method {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--color-report-method);
  cursor: help;
}

.vote-detail-report > header strong {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: var(--tint-winner-badge-bg);
  color: var(--color-status-live);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vote-detail-report--winner {
  border-color: var(--color-winner-accent);
  background: color-mix(in srgb, var(--color-winner-accent) 7%, transparent);
  box-shadow: inset 4px 0 0 var(--color-winner-accent), 0 0 0 1px color-mix(in srgb, var(--color-winner-accent) 12%, transparent);
}

.modality-selector {
  margin: 1rem 0;
}

.modality-option + .modality-option {
  margin-top: 0.65rem;
}

.modality-folder {
  margin: 0.4rem 0 0 1.75rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--pico-muted-border-color);
}

.modality-folder input {
  display: block;
  margin-bottom: 0.2rem;
}

.modality-folder-help {
  display: block;
  margin-top: 0.25rem;
}

.participant-picker {
  margin: 1rem 0;
}

.participant-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.participant-search {
  flex: 1 1 190px;
  min-width: 0;
  margin: 0;
  height: auto;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}

.participant-count {
  color: var(--pico-muted-color);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.participant-actions {
  display: inline-flex;
  gap: 0.3rem;
  margin-left: auto;
}

.participant-actions button {
  width: auto;
  margin: 0;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
}

.participant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.4rem;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pico-background-color), white 3%);
}

.participant-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--pico-background-color), white 6%);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.participant-option:hover {
  border-color: color-mix(in srgb, var(--pico-primary-border), transparent 40%);
}

.participant-option.is-selected {
  border-color: var(--pico-primary-border);
  background: color-mix(in srgb, var(--pico-primary-background), transparent 78%);
}

.participant-option input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}

.participant-identity {
  display: grid;
  min-width: 0;
}

.participant-name {
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.participant-detail {
  color: var(--pico-muted-color);
  font-size: 0.72rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.participant-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.8rem 0.2rem;
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  text-align: center;
}

.upload-progress {
  margin-top: 1rem;
}

.upload-progress progress {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
}

.balance-summary {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pico-card-background-color), transparent 20%);
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

.balance-summary strong {
  color: var(--pico-color);
}

.balance-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.balance-chart-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.balance-chart-legend {
  display: flex;
  gap: 0.9rem;
  color: var(--pico-muted-color);
  font-size: 0.75rem;
}

.balance-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.balance-chart-legend i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 3px;
}

.balance-chart-legend i.appearances {
  background: var(--pico-primary);
}

.balance-chart-legend i.patients {
  background: var(--color-status-live);
}

.balance-chart {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 1.4rem;
}

.balance-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.3fr) 1fr;
  align-items: center;
  gap: 0.7rem;
}

.balance-label {
  overflow-wrap: anywhere;
  font-size: 0.84rem;
  font-weight: 600;
}

.balance-bars {
  display: grid;
  gap: 0.3rem;
}

.balance-bar-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.balance-bar-track {
  flex: 1;
  height: 1.1rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pico-muted-border-color), transparent 30%);
  overflow: hidden;
}

.balance-bar-fill {
  height: 100%;
  min-width: 2px;
  border-radius: 6px;
}

.balance-bar-fill.appearances,
.balance-bar-fill.rater {
  background: var(--pico-primary);
}

.balance-bar-fill.patients {
  background: var(--color-status-live);
}

.balance-bar-value {
  flex-shrink: 0;
  color: var(--pico-muted-color);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .balance-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

.matchup-matrix,
.case-matrix {
  min-width: 760px;
  border-collapse: collapse;
}

.matchup-matrix th,
.matchup-matrix td,
.case-matrix th,
.case-matrix td {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.matchup-matrix th,
.case-matrix th {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.matchup-matrix tbody th,
.case-matrix tbody th {
  text-align: right;
  font-weight: 600;
}

.case-matrix tbody th {
  max-width: none;
  cursor: auto;
}

.case-matrix tbody th a {
  color: inherit;
}

.matchup-matrix td,
.case-matrix td {
  min-width: 46px;
}

.matchup-matrix td.matchup-diagonal,
.case-matrix td.case-empty {
  color: var(--pico-muted-color);
  background: color-mix(in srgb, var(--pico-muted-border-color), transparent 55%);
}

.case-row--swept th {
  background: color-mix(in srgb, var(--color-status-live), transparent 88%);
  box-shadow: inset 3px 0 0 var(--color-status-live);
}

.matchup-opponents {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.matchup-opponents details {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 10px;
}

.matchup-opponents details[open] {
  padding-bottom: 0.8rem;
}

.matchup-opponents summary {
  padding: 0.5rem 0.2rem;
  font-weight: 600;
  cursor: pointer;
}

.balance-bar-fill.opponent {
  background: var(--pico-primary);
}

.stability-panel summary {
  font-weight: 600;
  cursor: pointer;
}

.stability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.stability-grid article {
  margin: 0;
}

.stability-grid h3 {
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.insight-stats {
  margin-top: 0;
}

.insight-stats article p {
  font-size: 1.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.insight-section-title {
  margin: 1.5rem 0 0.6rem;
  font-size: 0.95rem;
  color: var(--pico-muted-color);
}

.insight-row-unvoted td {
  color: var(--pico-muted-color);
}

.explorer3d-shell {
  position: relative;
}

.explorer3d-canvas {
  position: relative;
  width: 100%;
  height: clamp(360px, calc(100vh - 260px), 720px);
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 45%);
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 30%,
    color-mix(in srgb, var(--pico-card-background-color), transparent 10%),
    var(--pico-background-color) 85%
  );
  cursor: grab;
}

.explorer3d-canvas:active {
  cursor: grabbing;
}

.explorer3d-canvas canvas {
  display: block;
}

.explorer3d-tooltip {
  position: fixed;
  z-index: 30;
  max-width: 260px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 8px;
  background: var(--pico-card-background-color);
  color: var(--pico-color);
  font-size: 0.76rem;
  line-height: 1.4;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.explorer3d-tooltip-case {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--pico-muted-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
}

.explorer3d-tooltip-stat {
  display: block;
  font-variant-numeric: tabular-nums;
}

.explorer3d-tooltip-matchups {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  overflow-wrap: anywhere;
}

.explorer3d-tooltip-matchups em {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.explorer3d-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.explorer3d-toolbar label {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: 0.78rem;
}

.explorer3d-toolbar select {
  width: auto;
  max-width: min(100%, 320px);
  height: auto;
  margin: 0;
  padding: 0.3rem 1.6rem 0.3rem 0.5rem;
  font-size: 0.78rem;
}

.explorer3d-key {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  color: var(--pico-muted-color);
  font-size: 0.73rem;
}

.explorer3d-key i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 3px;
}

.explorer3d-key i.over {
  background: var(--color-status-live);
}

.explorer3d-key i.under {
  margin-left: 0.5rem;
  background: var(--color-excluded-badge);
}

.explorer3d-legend {
  margin: 0.7rem 0 0;
  color: var(--pico-muted-color);
  font-size: 0.74rem;
  line-height: 1.6;
}

.explorer3d-legend strong {
  color: var(--pico-color);
}

.annotator-note {
  font-size: 0.8rem;
}

.annotator-table {
  min-width: 760px;
  border-collapse: collapse;
}

.annotator-table th,
.annotator-table td {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--pico-muted-border-color);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.annotator-table thead th {
  vertical-align: bottom;
  font-size: 0.76rem;
}

.annotator-table thead th small {
  display: block;
  color: var(--pico-muted-color);
  font-size: 0.68rem;
  font-weight: 400;
}

.annotator-table td.annotator-method {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 600;
}

.annotator-table td.annotator-pooled small {
  margin-left: 0.3rem;
  color: var(--pico-muted-color);
  font-size: 0.7rem;
}

.annotator-table td.annotator-missing {
  color: var(--pico-muted-color);
  background: color-mix(in srgb, var(--pico-muted-border-color), transparent 55%);
}

.annotator-table td.annotator-leaning {
  background: var(--tint-status-closed-bg);
  font-weight: 700;
}

.annotator-delta {
  margin-left: 0.2rem;
  font-size: 0.68rem;
}

.annotator-delta.up {
  color: var(--color-status-live);
}

.annotator-delta.down {
  color: var(--color-excluded-badge);
}

.explorer3d-table-note {
  font-size: 0.8rem;
}

.explorer3d-concentrated {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--tint-status-closed-bg);
  color: var(--color-status-closed);
  font-weight: 700;
}

.vote-panel .viewer {
  width: 100%;
  height: clamp(360px, calc(100vh - 188px), 900px);
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 45%);
  border-radius: 14px;
  overflow: hidden;
}

.viewer-shell {
  position: relative;
}

#stl-viewer {
  position: relative;
  background:
    radial-gradient(circle at 50% 42%, #213b51 0%, #131d2a 44%, #0c1119 100%);
}

#stl-viewer canvas {
  display: block;
}

.ios-view-controls {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 0.25rem;
  align-items: center;
  max-width: calc(100% - 1.5rem);
  padding: 0.25rem;
  border: 1px solid rgba(173, 205, 231, 0.22);
  border-radius: 999px;
  background: rgba(5, 13, 21, 0.72);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.ios-view-controls > button {
  min-width: 2rem;
  height: 1.65rem;
  margin: 0;
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(235, 243, 250, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.ios-view-controls > button:hover,
.ios-view-controls > button:focus-visible {
  background: rgba(113, 181, 222, 0.2);
  color: #fff;
}

/* A row above the viewer rather than an overlay on it: right-aligned so it sits
   over the viewer's top-right corner without covering any of the scan. */
.viewer-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.viewer-tools button {
  margin: 0;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.1;
}

.viewer-tools .viewer-reset {
  margin-right: 0.35rem;
}

.viewer-tools button.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary-border);
}

.modality-panel[hidden] {
  display: none;
}

.photo-viewer {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: clamp(360px, calc(100vh - 188px), 900px);
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 45%);
  border-radius: 14px;
  background: #0c1119;
  overflow: hidden;
}

.cbct-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Must be a strict height, not min-height: each plane's canvas gets a large
     intrinsic pixel size once the volume loads (canvas.width = plane.w, e.g.
     512x512), and CSS Grid's 1fr rows fall back to content-based sizing
     whenever the container's block size is only a floor rather than definite
     — inflating the whole viewer well past the viewport. overflow:hidden is
     the backstop in case any tile still computes larger than its track. */
  height: clamp(360px, calc(100vh - 188px), 900px);
  overflow: hidden;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 45%);
  border-radius: 14px;
  background: #0c1119;
}

.panoramic-viewer {
  margin-top: 0.75rem;
  padding: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 45%);
  border-radius: 14px;
  background: #0c1119;
}

.panoramic-toggle {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 5.4rem;
  height: 1.65rem;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(173, 205, 231, 0.35);
  border-radius: 999px;
  background: rgba(8, 24, 38, 0.82);
  color: rgba(235, 243, 250, 0.62);
  font-size: 0.72rem;
}

.panoramic-toggle::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--pico-primary-background);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  content: "";
  transition: transform 160ms ease;
}

.panoramic-toggle.active::before {
  transform: translateX(100%);
}

.panoramic-toggle span {
  position: relative;
  z-index: 1;
  align-self: center;
  font-weight: 700;
  line-height: 1;
  transition: color 160ms ease;
}

.panoramic-toggle:not(.active) span:first-child,
.panoramic-toggle.active span:last-child {
  color: var(--pico-primary-inverse);
}

.panoramic-image-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 9px;
  background: #05080d;
}

.panoramic-image-frame img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  transition: transform 160ms ease;
}

.panoramic-image-frame img.ras {
  transform: scaleX(-1);
}

.cbct-status {
  margin: 0;
  padding: 2.5rem 0.8rem;
  color: rgba(235, 243, 250, 0.75);
  font-size: 0.82rem;
  text-align: center;
}

.cbct-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.cbct-body[hidden] {
  display: none;
}

.cbct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
}

.cbct-volume-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: #05080d;
  overflow: hidden;
  cursor: grab;
}

.cbct-volume-canvas canvas {
  display: block;
}

.cbct-volume-canvas .cbct-plane-name {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.7rem;
  color: rgba(235, 243, 250, 0.85);
  background: rgba(5, 8, 13, 0.55);
  pointer-events: none;
}

.cbct-render-style {
  width: auto;
  margin: 0;
  padding: 0.1rem 1.3rem 0.1rem 0.35rem;
  font-size: 0.68rem;
  height: auto;
  background-position: right 0.3rem center;
  background-size: 0.5rem auto;
}

.cbct-plane {
  margin: 0;
  min-width: 0;
  min-height: 0;
}

.cbct-plane-canvas {
  position: relative;
  height: 100%;
}

.cbct-plane canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #05080d;
}

.cbct-plane-canvas canvas {
  cursor: crosshair;
  touch-action: none;
}

.cbct-plane-canvas .cbct-plane-name,
.cbct-plane-canvas .cbct-slice-label {
  position: absolute;
  left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.7rem;
  color: rgba(235, 243, 250, 0.85);
  background: rgba(5, 8, 13, 0.55);
  pointer-events: none;
}

.cbct-plane-canvas .cbct-plane-name {
  top: 0.4rem;
}

.cbct-plane-canvas .cbct-slice-label {
  bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* Orientation codes at the middle of each edge. No background plate: a
   text-shadow keeps them readable over both air and bright bone. */
.cbct-orient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(235, 243, 250, 0.82);
  text-shadow: 0 0 3px rgba(5, 8, 13, 0.95), 0 0 6px rgba(5, 8, 13, 0.8);
}

.cbct-orient > span {
  position: absolute;
}

.cbct-orient-top {
  top: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
}

.cbct-orient-bottom {
  bottom: 0.3rem;
  left: 50%;
  transform: translateX(-50%);
}

.cbct-orient-left {
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
}

.cbct-orient-right {
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
}

.cbct-tools {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.cbct-tools label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.72rem;
  color: rgba(235, 243, 250, 0.75);
}

.cbct-tools input[type="range"] {
  width: clamp(80px, 14vw, 150px);
  margin: 0;
}

.cbct-tools button {
  margin: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
}

/* Toggle buttons (e.g. Transpose axes) need a visible pressed state. */
.cbct-tools button.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary-border);
}

.cbct-tools button.cbct-orientation-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 5.4rem;
  height: 1.65rem;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(173, 205, 231, 0.35);
  border-radius: 999px;
  background: rgba(8, 24, 38, 0.75);
  color: rgba(235, 243, 250, 0.62);
}

.cbct-orientation-toggle::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: var(--pico-primary-background);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  content: "";
  transition: transform 160ms ease;
}

.cbct-orientation-toggle.active::before {
  transform: translateX(100%);
}

.cbct-orientation-toggle span {
  position: relative;
  z-index: 1;
  align-self: center;
  font-weight: 700;
  line-height: 1;
  transition: color 160ms ease;
}

.cbct-orientation-toggle:not(.active) span:first-child,
.cbct-orientation-toggle.active span:last-child {
  color: var(--pico-primary-inverse);
}

.cbct-volume-error {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 140px;
  margin: 0;
  padding: 0.8rem;
  color: rgba(235, 243, 250, 0.6);
  font-size: 0.72rem;
  text-align: center;
}

.cbct-hint {
  flex-shrink: 0;
  margin: 0.4rem 0 0;
  color: rgba(235, 243, 250, 0.55);
  font-size: 0.7rem;
}

.scan-legend {
  position: absolute;
  bottom: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  display: flex;
  gap: 0.4rem;
}

.scan-legend button {
  margin: 0;
  padding: 0.2rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-size: 0.72rem;
}

.scan-legend-upper[aria-pressed="true"] {
  background: #98e9f1;
  color: #0c1119;
}

.scan-legend-lower[aria-pressed="true"] {
  background: #ffb6aa;
  color: #0c1119;
}

.scan-legend-upper {
  color: #98e9f1;
}

.scan-legend-lower {
  color: #ffb6aa;
}

.scan-hint {
  position: absolute;
  right: 0.8rem;
  bottom: 0.55rem;
  z-index: 2;
  margin: 0;
  color: rgba(235, 243, 250, 0.65);
  font-size: 0.7rem;
  pointer-events: none;
}

.photo-preview {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 9px;
  background: #05080d;
}

.photo-preview img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.photo-thumbnails {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.photo-thumbnail {
  flex: 0 0 84px;
  height: 58px;
  margin: 0;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}

.photo-thumbnail.active,
.photo-thumbnail:focus-visible {
  border-color: var(--pico-primary);
}

.photo-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.photo-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.72rem;
  border: 1px dashed var(--pico-muted-border-color);
  color: var(--pico-muted-color);
  min-height: 120px;
  border-radius: 8px;
}

.vote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 0.6rem;
  align-items: stretch;
}

.vote-side {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  min-width: 0;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.report-grid article {
  min-width: 0;
  margin: 0;
  padding: 0.7rem;
}

.report-grid .ground-truth-report {
  margin: 0;
  padding: 0.7rem;
  border-color: color-mix(in srgb, var(--pico-primary-border), white 18%);
  background: color-mix(in srgb, var(--pico-primary-background), transparent 82%);
}

.ground-truth-report summary {
  font-size: 1rem;
  font-weight: 700;
}

.ground-truth-report[open] summary {
  margin-bottom: 0.35rem;
}

.report-grid h2 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.report-text {
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 8px;
  padding: 0.75rem 0.8rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--pico-background-color), white 8%);
  color: var(--color-report-text);
}

.report-line {
  margin: 0.04rem 0;
}

.report-empty {
  height: 0.45rem;
}

.report-key {
  font-weight: 700;
}

.report-key.tone-green {
  color: var(--color-tone-green);
}

.report-key.tone-blue {
  color: var(--color-tone-blue);
}

.report-key.tone-pink {
  color: var(--color-tone-pink);
}

.report-value {
  color: var(--color-report-value);
}

.vote-form {
  flex-shrink: 0;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
}

.cbct-controls-panel {
  flex-shrink: 0;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--pico-primary-border), transparent 55%);
}

.vote-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.vote-actions button {
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}

.model-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 0.3rem;
  width: 1rem;
  height: 1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.9;
  cursor: pointer;
}

.model-tooltip {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  white-space: nowrap;
  padding: 0.25rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
  font-size: 0.72rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-in-out;
}

.model-meta:hover .model-tooltip,
.model-meta:focus .model-tooltip,
.model-meta:focus-within .model-tooltip {
  opacity: 1;
}

.auth-card {
  max-width: 480px;
  margin: 3rem auto;
}

@media (max-width: 900px) {
  .vote-layout {
    grid-template-columns: 1fr;
  }

  .report-grid {
    overflow-y: visible;
  }

  .vote-panel .viewer {
    height: 320px;
  }

  .photo-viewer {
    height: 320px;
  }

  .vote-actions {
    grid-template-columns: 1fr;
  }

  .page-head {
    align-items: start;
    flex-direction: column;
  }

  .page-head-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .page-head-actions [role="button"],
  .page-head-actions button {
    width: 100%;
  }

  .dataset-patient-nav {
    grid-template-columns: 1fr 1fr;
  }

  .dataset-patient-nav label {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .dataset-patient-open {
    display: none;
  }

  .competition-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .competition-vote {
    width: 100%;
  }

  .management-competition-grid {
    grid-template-columns: 1fr;
  }

  .management-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .management-card-actions [role="button"] {
    width: 100%;
  }

  .scan-hint {
    display: none;
  }

  /* Stacked single column: four 200px tiles are taller than the viewport, so the
     viewer has to grow and scroll with the page. Keeping the desktop's strict
     height here would clip the grid and let it overflow on top of .cbct-hint.
     The fixed tile height below keeps canvases from inflating, which is what
     that strict height guards against on desktop. */
  .cbct-viewer {
    height: auto;
    overflow: visible;
  }

  .cbct-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .cbct-plane-canvas,
  .cbct-volume-canvas {
    height: 200px;
  }
}

@media (max-width: 560px) {
  .ranking-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .ranking-tab {
    flex: 0 0 auto;
  }
}