/* Desktop layout (CLAUDE.md "Desktop layout"). Loaded after style.css with
   media="(min-width: 1024px)" and every rule is wrapped in the same media
   query again, so nothing here can reach a phone or a tablet. style.css is
   the phone layout and is never changed for desktop; this file only adds.
   Colours only through the existing var(--...) tokens, square corners. */
@media (min-width: 1024px) {

  /* ---- Frame: header, content and footer all sit in one centred column
     (--page-w per page type, 960px at most). The header has no background of
     its own, so its contents and its rule line up with the content. ---- */
  .page {
    --page-w: 560px;
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] minmax(0, var(--page-w))
      [main-end] minmax(0, 1fr) [full-end];
    align-content: start;
    align-items: start;
    padding: 24px 32px;
  }

  .page > * {
    grid-column: main-start / main-end;
  }

  .page > .site-header,
  .page > .page-footer {
    max-width: none;
  }

  .page > .page-footer {
    grid-row: 99;
  }

  .site-header {
    margin-bottom: 32px;
  }

  .card,
  .scoring-card,
  .intro {
    max-width: none;
  }

  .card {
    padding: 32px 36px;
  }

  .scoring-card {
    padding: 16px 20px;
  }

  /* Wide pages: one column, 960px at most */
  .layout-account,
  .layout-match,
  .layout-players,
  .layout-player,
  .layout-progress,
  .layout-plans {
    --page-w: 960px;
  }

  .layout-h2h {
    --page-w: 900px;
  }

  .layout-text {
    --page-w: 760px;
  }

  /* ---- Main page: account buttons and filters left (sticky), match list
     right. Explicit rows keep the left column compact however tall the
     list is. ---- */
  .layout-account {
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start left-start] 300px
      [left-end] 24px
      [right-start] minmax(0, 636px)
      [right-end main-end] minmax(0, 1fr) [full-end];
    grid-template-rows: auto auto auto auto 1fr;
  }

  .layout-account > .site-header {
    grid-row: 1;
  }

  .layout-account .account-notice-card {
    grid-row: 2;
  }

  .layout-account .account-actions-card {
    grid-column: left-start / left-end;
    grid-row: 3;
  }

  .layout-account .account-actions-card {
    padding: 24px;
  }

  /* The panel is 300px wide: stack the two buttons, each the full width of
     the panel, so both labels sit inside their buttons with normal padding. */
  .layout-account .account-actions {
    flex-direction: column;
    gap: 12px;
  }

  .layout-account .account-actions > .button,
  .layout-account .account-actions > .button-outline {
    flex: none;
    width: 100%;
    padding: 12px 24px;
    white-space: normal;
  }

  .layout-account .account-actions > .button-outline {
    padding: 11px 23px;
  }

  .layout-account .account-main-card {
    display: contents;
  }

  .layout-account .account-filters {
    grid-column: left-start / left-end;
    grid-row: 4;
    position: sticky;
    top: 16px;
    margin-top: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 24px;
  }

  .layout-account .account-filters .match-filters {
    margin-bottom: 16px;
  }

  .layout-account .account-main-card > #match-list,
  .layout-account .account-main-card > .empty-state {
    grid-column: right-start / right-end;
    grid-row: 3 / 6;
    align-self: start;
  }

  .layout-account .account-main-card > #match-list {
    margin-bottom: 0;
  }

  .layout-account .account-main-card > .empty-state {
    margin: 0;
  }

  .layout-account .account-main-card > #filter-empty-state:not([hidden]) {
    grid-row: 6;
  }

  /* Full player names on desktop rows; the short names stay for phones. */
  .match-players-full[hidden] {
    display: block;
    font-weight: 700;
    color: var(--text);
  }

  .match-players-full ~ .match-players {
    display: none;
  }

  .layout-account .list-item,
  .layout-player .list-item {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* ---- Match page ---- */
  .layout-match #finished-view {
    grid-column: main-start / main-end;
  }

  .layout-match #finished-view .scoreboard-name {
    font-size: 20px;
  }

  .layout-match #finished-view .scoreboard-set {
    width: 52px;
    font-size: 22px;
  }

  /* The example-match note (/plans/sample) is part of the top block: compact,
     top left, above the score card. */
  .layout-match .sample-banner {
    justify-self: start;
    width: calc(50% - 24px);
    padding: 16px 20px;
  }

  /* Once the tab switcher is revealed (stats-tabs.js), the card is a two
     column grid: the top block (score card, "Match over", result, details,
     length, tabs) is a compact section in the left column, the first stats
     section (Points and games) sits next to it in the right column, and the
     other sections follow below in two columns (.stats-rest). The shown panel
     is display: contents so its sections join the grid; a hidden panel keeps
     the UA's display: none (:not([hidden])), so switching tabs still works.
     Without JavaScript the card stays in normal flow. */
  .layout-match #finished-view:has(#stats-tabs:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
    align-content: start;
  }

  .layout-match #finished-view:has(#stats-tabs:not([hidden])) > * {
    grid-column: 1;
  }

  .layout-match #finished-view .stats-tab-row:has(#stats-tabs:not([hidden])) ~ .stats-panel:not([hidden]) {
    display: contents;
  }

  /* Points and games: right column, level with the top block (it spans the
     rows the top block uses; unused rows have no height). */
  /* The card itself becomes plain grid space; the top block is its OWN box
     (.finished-top plus the tab row, stacked with no gap) and every stats
     section is a box of its own, in the style of the main page's left panel. */
  .layout-match #finished-view:has(#stats-tabs:not([hidden])) {
    background: none;
    border: none;
    padding: 0;
  }

  .layout-match #finished-view:has(#stats-tabs:not([hidden])) .finished-top {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-bottom: none;
    padding: 20px 20px 1px;
  }

  .layout-match #finished-view:has(#stats-tabs:not([hidden])) .stats-tab-row {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: none;
    margin: 0;
    padding: 12px 20px 20px;
  }

  .layout-match #finished-view:has(#stats-tabs:not([hidden])) .stats-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 20px;
    margin: 0 0 16px;
  }

  .layout-match #finished-view .stats-panel > .stats-section:first-of-type {
    grid-column: 2;
    grid-row: 1 / span 10;
    margin-top: 0;
  }

  .layout-match #finished-view .stats-rest {
    grid-column: 1 / -1;
    grid-row: 11;
    margin-top: 8px;
    column-count: 2;
    column-gap: 48px;
  }

  .layout-match #finished-view .stats-section {
    break-inside: avoid;
  }

  .layout-match #finished-view .stats-rest > .stats-section:first-child {
    margin-top: 0;
  }

  .layout-match #finished-view .stats-table td,
  .layout-match #finished-view .stats-table th {
    font-size: 14px;
  }

  /* Scoring screen: centred, bigger hit areas, live stats to the right. */
  .layout-match #live-view {
    width: 100%;
    max-width: 560px;
    justify-self: center;
    padding: 16px 24px;
  }

  .layout-match #live-view:has(#live-stats-section:not([hidden])) {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }

  .layout-match #live-view:has(#live-stats-section:not([hidden])) > * {
    grid-column: 1;
  }

  .layout-match #live-view:has(#live-stats-section:not([hidden])) > .live-stats-section {
    grid-column: 2;
    grid-row: 1 / span 12;
    margin-top: 0;
    position: sticky;
    top: 16px;
  }

  .layout-match #live-view .tap-btn,
  .layout-match #live-view .rally-tag,
  .layout-match #live-view .score-only-btn {
    height: 64px;
  }

  .layout-match #live-view .rally-grid {
    grid-auto-rows: 64px;
  }

  .layout-match #live-view .tap-btn {
    font-size: 19px;
  }

  .popup-panel {
    max-width: 480px;
  }

  .popup-option {
    height: 60px;
  }

  .box-button {
    height: 60px;
  }

  /* ---- Players list: a grid of cards ---- */
  .layout-players #player-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
    border: none;
    overflow: visible;
  }

  .layout-players #player-list li + li {
    border-top: none;
  }

  .layout-players #player-list li {
    position: relative;
    border: 1px solid var(--border);
  }

  /* ---- Player page: name card left (sticky), matches right ---- */
  .layout-player {
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start left-start] 300px
      [left-end] 24px
      [right-start] minmax(0, 636px)
      [right-end main-end] minmax(0, 1fr) [full-end];
    grid-template-rows: auto auto auto 1fr;
  }

  .layout-player > .site-header {
    grid-row: 1;
  }

  .layout-player > .text-link-row {
    grid-row: 2;
  }

  .layout-player > .card:nth-of-type(1) {
    grid-column: left-start / left-end;
    grid-row: 3;
    position: sticky;
    top: 16px;
  }

  .layout-player > .card:nth-of-type(2) {
    grid-column: right-start / right-end;
    grid-row: 3 / 5;
    margin-top: 0;
  }

  .layout-player > dialog {
    grid-row: 5;
  }

  /* ---- Progress ---- */
  .layout-progress .progress-results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 48px;
    align-items: baseline;
  }

  .layout-progress .progress-results p {
    margin: 0;
  }

  /* Error pies: the two groups side by side, each pie small, with its title,
     column name and legend under/over its own pie. */
  .layout-progress .progress-graph-body:has(> .progress-pie-group) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    align-items: start;
  }

  .layout-progress .progress-graph .progress-pie-group {
    max-width: none;
  }

  .layout-progress .progress-graph .progress-pie-group .progress-pie-svg {
    max-width: 240px;
    width: 100%;
  }

  .layout-progress .progress-pies {
    gap: 12px;
  }

  .layout-progress .progress-graph svg,
  .layout-progress .progress-graph figure {
    max-width: 720px;
  }

  /* ---- H2H: centred, OVERALL and SURFACE side by side, history below ---- */
  .layout-h2h #h2h-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    align-items: start;
  }

  .layout-h2h #h2h-page > * {
    grid-column: 1 / -1;
  }

  .layout-h2h #h2h-page > .stats-section:not(.h2h-history-section) {
    grid-column: auto;
  }

  .layout-h2h #h2h-page > .h2h-history-section {
    grid-column: 1 / -1;
  }

  /* ---- Plans: the four cards two by two (four in a row does not fit the
     960px column) ---- */
  .layout-plans {
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] repeat(2, minmax(0, 472px))
      [main-end] minmax(0, 1fr) [full-end];
    column-gap: 16px;
    row-gap: 0;
  }

  /* Cards sit in explicit columns (auto placement would also use the two
     flexible side tracks). */
  .layout-plans > .plan-card {
    margin: 0 0 16px;
    align-self: stretch;
  }

  .layout-plans > .plan-card:nth-of-type(odd) {
    grid-column: 2;
  }

  .layout-plans > .plan-card:nth-of-type(even) {
    grid-column: 3;
  }

  .layout-plans > .plan-card ~ p {
    margin-top: 16px;
  }

  .layout-plans > .plan-card .plan-title {
    white-space: nowrap;
  }

  /* ---- Text pages (Terms, Refunds, Privacy) ---- */
  .layout-text .card {
    padding: 40px 48px;
  }
}