/*
 * Large-screen composition
 *
 * The phone/tablet experience ends at 1366px. These rules make deliberate use
 * of desktop and ultra-wide canvases without allowing cards or reading panels
 * to stretch indefinitely.
 */

@media (min-width: 1440px) {
  :root {
    --large-screen-shell: 1320px;
    --large-screen-gutter: 64px;
    --large-screen-gap: 24px;
    --large-settings-width: 1120px;
  }

  .app-shell,
  html[data-theme^="glass-"] .app-shell {
    width: min(var(--large-screen-shell), calc(100% - var(--large-screen-gutter)));
  }

  .login-view {
    width: min(1180px, 100%);
    margin-right: auto;
    margin-left: auto;
    gap: clamp(56px, 5vw, 88px);
  }

  /* Dashboard: one high-value data row, one supporting-data row and history. */
  .dashboard {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--large-screen-gap);
    row-gap: var(--large-screen-gap);
  }

  .dashboard > .topbar {
    grid-column: 1 / -1;
  }

  .dashboard > .chart-section {
    grid-column: 1 / span 8;
  }

  .dashboard > .action-zone {
    grid-column: 9 / -1;
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .dashboard > .calendar-section {
    grid-column: 1 / span 6;
  }

  .dashboard > .goal-chart-section {
    grid-column: 7 / -1;
  }

  .dashboard > .history-section {
    grid-column: 1 / -1;
  }

  .dashboard > :is(.chart-section, .action-zone, .calendar-section, .goal-chart-section) {
    min-width: 0;
  }

  .dashboard > :is(.chart-section, .action-zone) {
    height: 100%;
  }

  .dashboard > .chart-section > .weight-chart,
  .dashboard > .calendar-section > .weight-calendar,
  .dashboard > .goal-chart-section > .weight-goal-chart {
    height: 100%;
  }

  .dashboard .record-entry-grid {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .dashboard .record-entry-button {
    min-height: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 16px;
    padding: 22px 24px;
  }

  .dashboard .record-entry-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
  }

  .dashboard .record-entry-button :is(.action-label, .action-meta) {
    grid-column: 2;
  }

  .dashboard .record-entry-button .action-label {
    font-size: 20px;
  }

  .dashboard .replay-launch-button {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 24px;
  }

  .dashboard .replay-entry-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
  }

  .dashboard > .history-section .history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  /* Community density follows the available shell instead of the viewport. */
  .community-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ranking-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Settings gains a true overview composition while detail forms stay readable. */
  .settings-content {
    width: min(var(--large-settings-width), 100%);
  }

  #settingsOverviewPanel {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    align-items: start;
    gap: 20px 24px;
  }

  #settingsOverviewPanel > .account-overview-group {
    grid-column: 1 / -1;
  }

  #settingsOverviewPanel > .settings-options:not(.app-update-settings-group) {
    grid-column: 1;
    grid-row: 2 / span 3;
  }

  #settingsOverviewPanel > :is(.native-health-sync, .app-update-settings-group, .settings-footer-actions) {
    grid-column: 2;
  }

  .settings-detail-panel {
    width: min(920px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  /* Camera and editor controls become two coordinated panes on desktop. */
  .capture-flow {
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(440px, 560px) minmax(0, 1fr);
    align-items: start;
    gap: 30px;
    margin-right: auto;
    margin-left: auto;
  }

  .capture-controls-pane {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
    padding-top: 4px;
  }

  .capture-controls-pane > * {
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .capture-controls-pane > .record-form,
  .capture-controls-pane > .food-record-panel {
    margin-top: 4px;
  }

  /* A compact dock prevents the two-item navigation from spanning the monitor. */
  .bottom-tabs,
  html[data-theme^="glass-"] .bottom-tabs {
    right: auto;
    bottom: 22px;
    left: 50%;
    width: min(560px, calc(100vw - 96px));
    height: 68px;
    min-height: 68px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    border-radius: 22px;
    padding: 6px;
    transform: translateX(-50%);
  }

  html[data-theme^="glass-"] .bottom-tabs::before {
    content: none;
    display: none;
  }

  .bottom-tabs .bottom-tab {
    height: 54px;
    border-radius: 16px;
  }

  body.has-bottom-tabs .app-shell {
    padding-bottom: 124px;
  }

  /* Phone-style sheets become focused desktop dialogs on large canvases. */
  :is(
    .community-detail-backdrop,
    .community-comments-backdrop,
    .ai-summary-backdrop,
    .notification-backdrop
  ) {
    align-items: center;
    justify-items: center;
    padding: 32px;
  }

  :is(
    .community-detail-panel,
    .community-comments-panel,
    .ai-summary-panel,
    .notification-panel
  ) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-radius: 20px;
    transform: translate3d(0, 24px, 0) scale(0.985);
    transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .community-detail-backdrop.is-open .community-detail-panel,
  .community-comments-backdrop.is-open .community-comments-panel,
  .ai-summary-backdrop.is-open .ai-summary-panel,
  .notification-backdrop.is-open .notification-panel {
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* Large detail surfaces use width for comparison; reading stays capped. */
  .community-detail-panel {
    width: min(1240px, calc(100vw - 96px));
    height: min(880px, calc(100dvh - 64px));
    max-height: calc(100dvh - 64px);
  }

  .community-detail-profile {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  }

  .community-detail-record-area {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    align-items: start;
    gap: 18px;
    padding: 20px;
  }

  .community-detail-record-area > :is(
    .community-detail-weight-chart,
    .community-detail-history-section
  ) {
    grid-column: 1 / -1;
  }

  .community-comments-panel {
    width: min(960px, calc(100vw - 128px));
    height: min(760px, calc(100dvh - 72px));
  }

  .notification-panel {
    width: min(920px, calc(100vw - 128px));
    height: min(720px, calc(100dvh - 72px));
  }

  .ai-summary-panel {
    width: min(920px, calc(100vw - 128px));
    height: min(760px, calc(100dvh - 72px));
  }

  .ai-summary-output {
    max-width: 78ch;
    margin-right: auto;
    margin-left: auto;
  }

  .policy-panel {
    width: min(840px, calc(100vw - 128px));
    height: min(820px, calc(100dvh - 72px));
  }
}

@media (min-width: 1920px) {
  :root {
    --large-screen-shell: 1600px;
    --large-screen-gutter: 96px;
    --large-screen-gap: 28px;
    --large-settings-width: 1280px;
  }

  .community-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ranking-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #settingsOverviewPanel {
    grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
    gap: 24px 28px;
  }
}

@media (min-width: 2560px) {
  :root {
    --large-screen-shell: 1920px;
    --large-screen-gutter: 128px;
    --large-screen-gap: 30px;
    --large-settings-width: 1440px;
  }

  .dashboard > .chart-section {
    grid-column: 1 / span 9;
  }

  .dashboard > .action-zone {
    grid-column: 10 / -1;
  }

  .dashboard > .history-section .history-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .community-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}