/* A platform page: one full-width table in the results table's style, its own bar above it. */
.platform {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.platform[hidden] { display: none; }

.platform-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: var(--filter-bar-height);
  padding: 0 var(--edge);
  font-size: 12px;
  color: var(--color-label-secondary);
  background: var(--color-chrome);
  border-bottom: .5px solid var(--color-separator);
  white-space: nowrap;
  overflow-x: auto;
}

.platform-key { display: inline-flex; align-items: center; gap: 4px; }
.platform-key i { font-style: normal; font-size: 9px; }
.platform-key.is-ahead i { color: var(--color-positive); }
.platform-key.is-behind i { color: var(--color-negative); }
.platform-summary { margin-left: auto; }
.platform-summary b { font-weight: 600; color: var(--color-label); }

.platform-scroll { flex: 1; overflow: auto; }

.platform-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.platform-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 6px;
  text-align: left;
  vertical-align: bottom;
  font-weight: 600;
  background: var(--color-table-header);
  border-bottom: .5px solid var(--color-separator);
  backdrop-filter: blur(20px) saturate(1.8);
}

.platform-model { display: block; font-size: 12px; color: var(--color-label); white-space: nowrap; }
.platform-sub { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--color-label-tertiary); white-space: nowrap; }

.platform-table th:first-child,
.platform-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: var(--edge);
  background: var(--color-row);
}

.platform-table thead th:first-child { z-index: 3; background: var(--color-table-header); }
.platform-corner { font-size: 11px; color: var(--color-label-secondary); }

.platform-row {
  min-width: 140px;
  padding-right: 16px;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
}

.platform-table tbody th,
.platform-table tbody td {
  height: var(--row-height);
  padding: 3px 3px;
  background: var(--color-row);
  border-bottom: .5px solid var(--color-separator-light);
}

.platform-table tbody tr:hover th,
.platform-table tbody tr:hover td { background: var(--color-row-hover); }

/* a cell: neutral, the number carries the meaning; a small arrow says which way so color is not the only cue */
.platform-cell {
  display: block;
  min-width: 88px;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: right;
  font-weight: 500;
  color: var(--color-label);
  cursor: default;
  transition: background .12s ease;
}

.platform-cell i { margin-right: 4px; font-style: normal; font-size: 9px; vertical-align: 1px; }
.platform-cell.is-ahead { color: var(--color-positive); }
.platform-cell.is-behind { color: var(--color-negative); }
.platform-cell.is-even { color: var(--color-label-secondary); }
.platform-cell.is-empty { color: var(--color-label-quaternary); text-align: center; font-weight: 400; }


.platform-nofit { width: 13px; height: 13px; fill: none; stroke: var(--color-label-tertiary); stroke-width: 1.2; vertical-align: -2px; }
.platform-key .platform-nofit { margin-right: 6px; }

/* the machine column: Apple's mark, the chip, its memory in a quiet mono */
.platform-row { display: table-cell; }
.platform-row > * { vertical-align: middle; }
.platform-logo { width: 13px; height: 13px; margin: -2px 8px 0 0; fill: currentColor; color: var(--color-label-secondary); vertical-align: middle; }
.platform-mem { margin-left: 8px; font: 11px var(--font-mono); color: var(--color-label-tertiary); }

/* All hardware: a platform column, its name once at the top of its machines */
.platform-group {
  min-width: 120px;
  padding: 10px 16px 10px var(--edge) !important;
  vertical-align: top;
  text-align: left;
  background: var(--color-row);
  border-bottom: .5px solid var(--color-separator);
}
.platform-group-name { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--color-label); }
.platform-group-name .platform-logo { width: 15px; height: 15px; color: var(--color-label); }
.platform-group-sub { display: block; margin: 2px 0 0 23px; font-size: 11px; font-weight: 400; color: var(--color-label-tertiary); }

/* grouped: the platform column is the sticky one; the machine column scrolls with the cells */
.platform-table.is-grouped tbody th { position: static; }
.platform-table.is-grouped tbody th.platform-row,
.platform-table.is-grouped thead th.is-second { padding-left: 8px; }

/* a model's maker: a small app-icon squircle with a monogram, above the model's name */
.model-badge {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 5px;
  font: 600 10px/1 var(--font-display, -apple-system, system-ui);
  color: #fff;
  background: linear-gradient(180deg, var(--from), var(--to));
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18);
}

/* the model column head: the badge beside the name and its maker line */
.platform-col { display: flex; align-items: center; gap: 8px; }
.model-badge { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }

/* arrows drawn like SF Symbols: a thin shaft, an open head, round caps */
.platform-arrow { width: 8px; height: 10px; margin-right: 4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
.platform-key .platform-arrow { margin-right: 2px; }
.platform-key.is-ahead .platform-arrow { color: var(--color-positive); }
.platform-key.is-behind .platform-arrow { color: var(--color-negative); }

/* a platform with no machines yet: a quiet centered note */
.platform-empty { margin: auto; padding: 48px 24px; text-align: center; color: var(--color-label-secondary); }
.platform-empty .sidebar-glyph[style] { width: 56px; height: 56px; border-radius: 13px; }
.platform-empty .sidebar-glyph[style] svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 1.8; }
.platform-empty .sidebar-glyph svg .is-filled { fill: var(--color-label); stroke: none; }
.platform-empty h2 { margin: 14px 0 6px; font-size: 17px; font-weight: 600; color: var(--color-label); }
.platform-empty p { margin: 0; font-size: 13px; }

/* the table, settled: even fixed columns, numbers right-aligned under right-aligned heads, a little more air */
.platform-table { table-layout: fixed; width: max-content; min-width: 100%; font-size: 13px; }
.platform-table col.col-group { width: 150px; }
.platform-table col.col-machine { width: 190px; }
.platform-table col.col-model { width: 132px; }

.platform-table thead th { padding: 10px 16px 9px 8px; text-align: right; }
.platform-table thead th.platform-corner { text-align: left; vertical-align: bottom; }
.platform-table thead th.is-overall { text-align: right; }
.platform-col { justify-content: flex-end; text-align: left; }
.platform-model { font-size: 12px; }
.platform-sub { font-size: 11px; }

.platform-table tbody th,
.platform-table tbody td { height: 36px; padding: 0 8px; }
.platform-cell { min-width: 0; padding: 4px 8px; font-size: 13px; }
.platform-cell.is-empty { text-align: right; padding-right: 12px; }

/* sortable heads: a pointer, the sort arrow beside the name, the sorted column faintly lit */
.platform-table th.is-sortable { cursor: pointer; user-select: none; }
.platform-table th.is-sortable:hover .platform-model,
.platform-table th.is-sortable:hover { color: var(--color-label); }
.platform-table .column-sort { margin-left: 4px; color: var(--color-accent); font-weight: 600; }
.platform-table td.is-sorted { background: var(--color-row-highlight); }
.platform-table th.is-sorted { box-shadow: inset 0 -2px 0 var(--color-accent); }

/* Overall: pie's median lead on this machine, set apart by a hairline */
.platform-table td.is-overall,
.platform-table th.is-overall { border-right: .5px solid var(--color-separator); }
.platform-table td.is-overall .platform-cell { font-weight: 600; }

.platform-bar .platform-hide { margin-left: 8px; font-size: 13px; }

/* the platform column carries the sidebar's badge; machine rows need no mark of their own */
.platform-group-name { gap: 8px; }
.platform-group .sidebar-glyph[style] { width: 20px; height: 20px; border-radius: 5px; }
.platform-group .sidebar-glyph[style] svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }
.platform-group .sidebar-glyph[style] svg .is-filled { fill: #fff; stroke: none; }
.platform-group-sub { margin-left: 28px; }

/* the maker's logo on a white tile with a hairline, as an app icon sits on any background */
.model-badge { background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.model-badge img { width: 15px; height: 15px; display: block; }

/* the bar: the metric switch centered, as macOS centers a view switch; Hide unavailable at the end */
.platform-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.platform-bar-side.is-end { justify-self: end; }
.platform-switch { height: 28px; }
.platform-switch button { min-width: 84px; font-size: 13px; }

/* a status line under the table, as Finder counts its items */
.platform-status {
  flex: none;
  padding: 7px var(--edge);
  font-size: 12px;
  text-align: center;
  color: var(--color-label-secondary);
  background: var(--color-chrome);
  border-top: .5px solid var(--color-separator);
}
.platform-status:empty { display: none; }

/* scrolling sideways keeps Platform, Hardware and Overall pinned; the models slide under them */
.platform-table.is-grouped tbody th.platform-group,
.platform-table.is-grouped thead th.platform-group-head { position: sticky; left: 0; z-index: 2; }
.platform-table.is-grouped tbody th.platform-row,
.platform-table.is-grouped thead th.is-second { position: sticky; left: 150px; z-index: 2; }
.platform-table tbody th.platform-row,
.platform-table thead th.platform-corner:not(.platform-group-head):not(.is-overall) { position: sticky; left: 0; z-index: 2; }
.platform-table.is-grouped tbody th.platform-row,
.platform-table.is-grouped thead th.is-second { left: 150px; }
.platform-table td.is-overall,
.platform-table th.is-overall { position: sticky; left: 190px; z-index: 2; background: var(--color-row); }
.platform-table.is-grouped td.is-overall,
.platform-table.is-grouped th.is-overall { left: 340px; }
.platform-table thead th.platform-corner,
.platform-table thead th.is-overall { z-index: 4; background: var(--color-table-header); }
.platform-table tbody tr:hover td.is-overall,
.platform-table tbody tr:hover th.platform-row { background: var(--color-row-hover); }
/* the pinned header cells sit above the model heads sliding under them */
.platform-table thead th.platform-corner.platform-corner { z-index: 5; }
.platform-table.is-grouped thead th.platform-corner.is-second:not(.is-overall) { left: 150px; }
.platform-table thead th.platform-corner:not(.platform-group-head):not(.is-overall),
.platform-table thead th.platform-corner.platform-group-head,
.platform-table thead th.platform-corner.is-overall { z-index: 5; background: var(--color-chrome); }

/* a platform's header row: its badge and name, what it is and how many machines; the label stays in view when scrolling sideways */
.platform-table tbody tr.platform-group-row th {
  height: 40px;
  padding: 0;
  text-align: left;
  background: var(--color-chrome);
  border-bottom: .5px solid var(--color-separator);
}
.platform-group-row .platform-group-name {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--edge);
  font-size: 13px;
}
.platform-group-row .platform-group-name b { font-weight: 600; color: var(--color-label); }
.platform-group-row .platform-group-name > span:last-child { font-size: 12px; font-weight: 400; color: var(--color-label-tertiary); }
.platform-group-row .sidebar-glyph[style] { width: 20px; height: 20px; border-radius: 5px; }
.platform-group-row .sidebar-glyph[style] svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2; }
.platform-group-row .sidebar-glyph[style] svg .is-filled { fill: #fff; stroke: none; }
.platform-table tbody tr.platform-group-row:hover th { background: var(--color-chrome); }
.platform-table tbody tr.platform-group-row th:first-child { position: static; }

/* with the metric in the toolbar, the bar holds only Hide unavailable, at its end */
.platform-bar { display: flex; justify-content: space-between; align-items: center; padding-left: 8px; }

/* the hover card: a title, a grey line, an aligned row per engine with pie in blue, one closing sentence */
.chart-tooltip.is-card { min-width: 220px; max-width: 300px; padding: 10px 12px; white-space: normal; }
.tip-title { font-weight: 600; font-size: 12.5px; }
.tip-sub { margin-top: 1px; font-size: 11px; color: var(--color-label-secondary); }
.tip-rows { margin: 8px 0 0; padding-top: 7px; border-top: .5px solid var(--color-separator); }
.tip-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; height: 20px; font-size: 12px; }
.tip-row.is-pie { color: var(--color-engine-pie); font-weight: 600; }
.tip-dot { width: 7px; height: 7px; border-radius: 50%; }
.tip-name { display: inline-flex; align-items: center; gap: 6px; }
.tip-tag { padding: 0 5px; border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--color-label-secondary); background: var(--color-fill); }
.tip-value { font-variant-numeric: tabular-nums; text-align: right; }
.tip-foot { margin-top: 7px; padding-top: 7px; border-top: .5px solid var(--color-separator); font-size: 11.5px; color: var(--color-label-secondary); }
.tip-sub + .tip-foot { border-top: 0; padding-top: 0; margin-top: 4px; }
.platform-bar .filter-button { font-size: 13px; color: var(--color-label); }

/* Overall: a tinted capsule, the result's color at low opacity behind figures in that color, as Apple tags a value */
.platform-table td.is-overall .platform-cell:not(.is-empty) {
  display: inline-block;
  float: right;
  min-width: 0;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}
.platform-table td.is-overall .platform-cell.is-ahead { color: var(--color-positive); background: color-mix(in srgb, var(--color-positive) 14%, transparent); }
.platform-table td.is-overall .platform-cell.is-behind { color: var(--color-negative); background: color-mix(in srgb, var(--color-negative) 14%, transparent); }
.platform-table td.is-overall .platform-cell.is-even { color: var(--color-label-secondary); background: var(--color-fill); }

/* a platform's header row folds its machines: a chevron that turns down when open */
.platform-group-row { cursor: pointer; user-select: none; }
.platform-disclosure { width: 10px; height: 10px; margin-right: -2px; fill: none; stroke: var(--color-label-secondary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s ease; }
.platform-group-row.is-collapsed .platform-disclosure { transform: none; }

/* the group header, Apple style: name on the left, the collapse chevron at the right edge of what is visible */
.platform-group-row .platform-group-bar {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: var(--platform-visible, 100%);
  padding: 0 var(--edge);
}
.platform-group-row .platform-group-name { position: static; padding: 0; }
.platform-group-row .platform-disclosure { width: 12px; height: 12px; margin: 0; stroke: var(--color-label-tertiary); stroke-width: 1.8; }
.platform-group-row:hover .platform-disclosure { stroke: var(--color-label-secondary); }
.platform-group-row.is-empty { cursor: default; } .platform-group-row.is-empty .platform-disclosure { display: none; }
/* the disclosure as SF Symbols draws chevron.right: tall and narrow, a hairline-weight stroke, round ends */
.platform-group-row .platform-disclosure { width: 7px; height: 12px; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 50%; }

/* on a phone the pinned Hardware and Overall columns narrow, so the models have room to slide under them */
@media (max-width: 899px) {
  .platform-bar {
    height: 48px;
    padding: 0 var(--edge);
  }

  .platform-bar .filter-button {
    height: 34px;
    padding: 0 12px 0 14px;
    border-radius: 999px;
    font-size: 15px;
    background: var(--color-fill);
  }

  .platform-bar .platform-hide {
    margin-right: -12px;
    font-size: 15px;
  }

  .platform-scroll {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .platform-table col.col-machine { width: 116px; }
  .platform-table col.col-model { width: 112px; }
  .platform-table col.col-model:nth-child(2) { width: 76px; }
  .platform-table td.is-overall,
  .platform-table th.is-overall { left: 116px; }
  .platform-table thead th { padding: 8px 10px 8px 6px; }
  .platform-table thead th.is-overall { padding-right: 8px; }
  .platform-row { min-width: 0; padding-right: 4px; }
  .platform-mem { margin-left: 5px; }
  .platform-table tbody th,
  .platform-table tbody td { height: 44px; }
  .platform-col { gap: 6px; }
  .platform-group-row .platform-group-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .platform-table tbody tr.platform-group-row th { height: 44px; }
  .platform-empty { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
}

/* phones: every number column, Overall included, has one width, so the grid reads evenly; long names end in an ellipsis */
@media (max-width: 899px) {
  .platform-table col.col-model,
  .platform-table col.col-model:nth-child(2) { width: 96px; }
  .platform-table thead th:not(.platform-corner) .platform-col { min-width: 0; }
  .platform-table thead th:not(.platform-corner) .platform-col > span:last-child { min-width: 0; overflow: hidden; }
  .platform-table thead .platform-model,
  .platform-table thead .platform-sub { overflow: hidden; text-overflow: ellipsis; }
  .platform-table td.is-overall,
  .platform-table th.is-overall { left: 116px; }
}

/* phones: Hardware and Overall scroll with the models instead of staying pinned */
@media (max-width: 899px) {
  .platform-table th:first-child,
  .platform-table td:first-child,
  .platform-table tbody th.platform-row,
  .platform-table thead th.platform-corner:not(.platform-group-head):not(.is-overall),
  .platform-table td.is-overall,
  .platform-table th.is-overall { position: static; left: auto; }
  .platform-table thead th.platform-corner,
  .platform-table thead th.is-overall { position: sticky; top: 0; }
}

/* every number column, Overall included, has one width on desktop too; a long name ends in an ellipsis */
@media (min-width: 900px) {
  /* columns share the window up to a cap; past it the rows run on to the edge with no column stretched thin */
  .platform-table col.col-model { width: var(--col-w, 156px); }
  .platform-table thead th:not(.platform-corner),
  .platform-table thead th.is-overall { overflow: hidden; }
  .platform-table thead th:not(.platform-corner) .platform-col { min-width: 0; }
  .platform-table thead th:not(.platform-corner) .platform-col > span:last-child { min-width: 0; overflow: hidden; }
  .platform-table thead .platform-model,
  .platform-table thead .platform-sub { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* the table is exactly as wide as its columns, so no header can stretch one */
@media (min-width: 900px) {
  .platform-table { width: max(100%, calc(190px + var(--cols, 1) * 156px)); }
}
@media (max-width: 899px) {
  .platform-table { width: max(100%, calc(116px + var(--cols, 1) * 96px)); }
}

/* phones: the whole header row, Hardware included, stays on top while rows scroll under it, and it is solid,
   so no row shows through it (Safari drops the blur on sticky table cells) */
@media (max-width: 899px) {
  .platform-table thead tr th,
  .platform-table thead tr th.platform-corner,
  .platform-table thead tr th.is-overall,
  .platform-table thead tr th:first-child {
    position: sticky;
    top: 0;
    left: auto;
    z-index: 4;
    background: var(--color-row);
    backdrop-filter: none;
  }
  .platform-table tbody th,
  .platform-table tbody td { position: static; }
  .platform-group-row .platform-group-name { position: static; }
}

/* a maker's band over its models, as a platform's header row heads its machines: the logo tile, the name, a grey count */
.platform-table thead tr.platform-maker-row th {
  height: 40px;
  padding: 0 8px 0 12px;
  text-align: left;
  vertical-align: middle;
  background: var(--color-chrome);
  border-bottom: .5px solid var(--color-separator);
}
.platform-table thead tr.platform-maker-row th.platform-maker { border-left: .5px solid var(--color-separator); }
.platform-table thead tr.platform-maker-row th.is-overall { border-left: 0; }
.platform-maker-name { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; }
.platform-maker-name b { font-weight: 600; color: var(--color-label); }
.platform-maker-name > span:last-child { font-size: 12px; font-weight: 400; color: var(--color-label-tertiary); }
.platform-maker-name .model-badge { width: 20px; height: 20px; border-radius: 5px; }
/* the model heads sit under the band, both pinned as the machines scroll */
.platform-table thead tr.platform-head-row th { top: 40px; }
.platform-table thead tr.platform-maker-row th.platform-corner { border-bottom: 0; }
.platform-bar-side.is-end { margin-left: auto; }

/* columns keep their width on a wide window: the table ends where its models do, as a Numbers table does */
.platform-table { --col-w: clamp(156px, (var(--platform-visible, 100vw) - 190px) / var(--cols), 240px); min-width: 0; width: max(100%, calc(190px + var(--col-w) * var(--cols))); }
@media (max-width: 899px) { .platform-table { width: max(100%, calc(116px + 96px * var(--cols))); } }
.platform-table col.col-fill { width: auto; }
.platform-table .platform-fill { padding: 0; }