/* KENROKU Web Team v2.9.0-rc.8: device-specific SCREEN layouts.
   Mobile <=767: original proven touch UI.
   Tablet 768-1199: compact two-column dashboard and constrained charts.
   Desktop >=1200: multi-panel information density and limited chart scale.
   Print, PDF sheets, permissions, recording, and scoring are out of scope. */
@media screen and (min-width:768px) {
  body.kenroku-team-ui .app-shell:not(.public-entry-shell) {
    width:100%;max-width:1380px;margin-inline:auto;
  }
  body.kenroku-team-ui .app-shell:not(.public-entry-shell) > main#main {
    width:100%;max-width:1340px;margin:0 auto;
    padding:16px clamp(16px,2.1vw,26px) 28px;
  }
  body.kenroku-team-ui #main .team-dashboard {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;gap:14px;
  }
  body.kenroku-team-ui #main .team-dashboard > .team-dashboard-head,
  body.kenroku-team-ui #main .team-dashboard > .team-dashboard-next,
  body.kenroku-team-ui #main .team-dashboard > :not(.team-dashboard-month):not(.team-dashboard-performance):not(.team-dashboard-next):not(.team-dashboard-head) {
    grid-column:1/-1;
  }
  body.kenroku-team-ui #main .team-dashboard > .card {margin-bottom:0;min-width:0;}
  body.kenroku-team-ui #main .team-dashboard-month,
  body.kenroku-team-ui #main .team-dashboard-performance {height:100%;}
  body.kenroku-team-ui #main .team-dashboard .home-affiliation-name {
    font-size:clamp(29px,3.8vw,45px);
    line-height:1.25;
  }
  body.kenroku-team-ui #main .team-dashboard-kpis strong {font-size:clamp(25px,3vw,34px);}
  /* Controls should fit their content, not stretch to the full PC viewport. */
  body.kenroku-team-ui #main .team-page-actions-three {
    width:min(100%,690px);max-width:690px;margin:0 auto 10px;
    gap:10px;
  }
  body.kenroku-team-ui #main .players-page-tabs {
    width:min(100%,520px);max-width:520px;margin:0 0 10px;
  }
  body.kenroku-team-ui #main .menu-page-primary-action {display:flex;justify-content:flex-start;margin-bottom:10px;}
  body.kenroku-team-ui #main .menu-page-primary-action > .btn {
    flex:none;width:auto!important;max-width:260px;min-width:148px;
    padding:8px 22px!important;
  }
  /* Constrain complex data visualisations while retaining the SVG's aspect ratio. */
  body.kenroku-team-ui #main .analysis-line-chart-scroll {
    width:100%;max-width:690px;margin-inline:auto;
  }
  body.kenroku-team-ui #main .analysis-line-chart {display:block;max-width:690px!important;width:100%;height:auto;}
  body.kenroku-team-ui #main .team-analysis-conditions,
  body.kenroku-team-ui #main .team-opponent-fold {min-width:0;}
  body.kenroku-team-ui #main .match-event-groups {width:100%;max-width:1120px;margin-inline:auto;}
  body.kenroku-team-ui #main .match-list-cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  body.kenroku-team-ui #main .match-list-item {min-width:0;}
  body.kenroku-team-ui #main .players-page-tabs ~ .list {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
  body.kenroku-team-ui #main .players-page-tabs ~ .list > .item {min-width:0;}
  body.kenroku-team-ui #main .team-opponent-detail {max-width:1100px;}
  body.kenroku-team-ui #main .team-schedule-heading,
  body.kenroku-team-ui #main .team-schedule-top {max-width:100%;}
}
@media screen and (min-width:768px) and (max-width:1199px) {
  body.kenroku-team-ui #main .team-dashboard {grid-template-columns:repeat(2,minmax(0,1fr));}
  body.kenroku-team-ui #main .analysis-line-chart-scroll,
  body.kenroku-team-ui #main .analysis-line-chart {max-width:670px!important;}
  body.kenroku-team-ui #main .team-dashboard-month-grid {gap:5px;}
  body.kenroku-team-ui #main .team-dashboard-month-grid>div{padding:10px 3px;}
  body.kenroku-team-ui #main .team-dashboard-month-grid>div>span {font-size:12px;}
  body.kenroku-team-ui #main .team-dashboard-month-grid strong {font-size:clamp(18px,2.5vw,26px);}
}
@media screen and (min-width:1200px) {
  body.kenroku-team-ui #main .team-dashboard {grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
  body.kenroku-team-ui #main .team-dashboard > .team-dashboard-next {grid-column:span 7;}
  body.kenroku-team-ui #main .team-dashboard > .team-dashboard-month {grid-column:span 5;}
  body.kenroku-team-ui #main .team-dashboard > .team-dashboard-performance {grid-column:1/-1;}
  body.kenroku-team-ui #main .team-dashboard > .team-dashboard-head {grid-column:1/-1;}
  body.kenroku-team-ui #main .team-dashboard-month-grid {gap:8px;}
  /* Desktop charts: line graph and composition on one horizontal visual row. */
  body.kenroku-team-ui #main .analysis-performance-chart-card {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);
    grid-template-areas:
      "chart-head composition"
      "chart-select composition"
      "chart-summary composition"
      "chart-line composition"
      "chart-detail composition";
    grid-template-rows:auto auto auto auto 1fr;
    gap:9px 22px;align-items:start;
  }
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-chart-heading {grid-area:chart-head;}
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-chart-selectors {grid-area:chart-select;}
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-chart-summary {grid-area:chart-summary;}
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-line-chart-scroll {grid-area:chart-line;max-width:620px;margin:0 auto;}
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-line-chart-scroll .analysis-line-chart {max-width:620px!important;}
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-chart-point-detail {grid-area:chart-detail;}
  body.kenroku-team-ui #main .analysis-performance-chart-card > .analysis-composition-section {
    grid-area:composition;margin:0;padding:0 0 0 20px;
    border-top:0;border-left:1px solid var(--kenroku-ui-outline,#d2ddeb);
    align-self:stretch;min-width:0;
  }
  body.kenroku-team-ui #main .analysis-composition-heading {flex-wrap:wrap;}
  body.kenroku-team-ui #main .analysis-composition-heading label {min-width:130px;}
  body.kenroku-team-ui #main .analysis-composition-wrap {grid-template-columns:125px minmax(0,1fr);gap:10px;}
  body.kenroku-team-ui #main .analysis-composition-pie {width:125px;max-width:100%;}
  body.kenroku-team-ui #main .analysis-composition-legend > div:not(.analysis-composition-empty) {gap:4px;}
  body.kenroku-team-ui #main .players-page-tabs ~ .list {grid-template-columns:repeat(3,minmax(0,1fr));}
  body.kenroku-team-ui #main .team-page-actions-three {max-width:750px;}
}

/* rc.9: Player analysis is rendered in #modal-root, outside #main.
   Scope each desktop/tablet rule to this ONE modal to protect score entry,
   registration, help, report preview and A4 PDF print styles. */
@media screen and (min-width:768px) {
  #modal-root .sheet.player-analysis-sheet {
    width:min(100% - 36px, 1040px)!important;
    max-width:1040px!important;
    max-height:calc(100dvh - 36px)!important;
    margin:auto!important;
    padding:15px 18px 8px!important;
    border-radius:18px!important;
    box-shadow:0 16px 48px rgba(13,27,61,.20);
    min-width:0!important;
  }
  #modal-root .player-analysis-sheet .sheet-head {margin-bottom:8px;}
  #modal-root .player-analysis-sheet .sheet-body {padding-bottom:18px;}
  #modal-root .player-analysis-sheet .player-analysis-heading {
    align-items:center;gap:16px;min-height:42px;
  }
  #modal-root .player-analysis-sheet .player-analysis-heading h2 {
    font-size:clamp(19px,2vw,24px);line-height:1.25;
  }
  #modal-root .player-analysis-sheet .player-analysis-heading .btn {
    width:auto;flex:none;min-height:36px;padding:8px 16px;
  }
  #modal-root .player-analysis-sheet .player-analysis-type-tabs {
    max-width:510px;width:100%;margin:8px 0;
    grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  }
  #modal-root .player-analysis-sheet .player-analysis-type-tabs .btn {
    min-height:38px;height:38px;padding:5px 10px;font-size:14px;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-card {
    margin:8px 0 12px;padding:12px 14px;
  }
  #modal-root .player-analysis-sheet .analysis-player-school-fixed {
    max-width:270px;margin-bottom:10px;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-grid.is-player-grade,
  #modal-root .player-analysis-sheet .analysis-period-filter-grid.is-year {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,.7fr) minmax(0,1.5fr);
    gap:12px;align-items:end;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-event {
    grid-column:auto;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-grid select {
    min-height:40px;padding:8px 10px;
  }
  #modal-root .player-analysis-sheet .player-result-summary-simple {
    display:grid!important;
    grid-template-columns:1.2fr 1fr 1fr!important;
    gap:8px;padding:12px!important;align-items:stretch;
  }
  #modal-root .player-analysis-sheet .player-result-summary-simple > div {
    min-width:0;border-radius:10px;background:#f5f8fc;padding:10px 8px;
  }
  #modal-root .player-analysis-sheet .player-result-summary-simple > div strong {
    font-size:clamp(19px,2.3vw,27px);line-height:1.3;
    white-space:normal;overflow-wrap:anywhere;
  }
  #modal-root .player-analysis-sheet .analysis-line-chart-scroll {
    width:100%;max-width:610px;margin-inline:auto;
  }
  #modal-root .player-analysis-sheet .analysis-line-chart {
    width:100%;max-width:610px!important;height:auto;display:block;
  }
  #modal-root .player-analysis-sheet .analysis-performance-chart-card {
    padding:14px!important;
  }
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > * {
    min-width:0;
  }
}
@media screen and (min-width:1200px) {
  #modal-root .player-analysis-sheet .analysis-performance-chart-card {
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-areas:
      "chart-head comp"
      "chart-select comp"
      "chart-summary comp"
      "chart-line comp"
      "chart-detail comp";
    grid-template-rows:auto auto auto auto 1fr;
    gap:8px 18px;align-items:start;
  }
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > .analysis-chart-heading {grid-area:chart-head;}
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > .analysis-chart-selectors {grid-area:chart-select;}
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > .analysis-chart-summary {grid-area:chart-summary;}
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > .analysis-line-chart-scroll {grid-area:chart-line;max-width:540px;}
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > .analysis-chart-point-detail {grid-area:chart-detail;}
  #modal-root .player-analysis-sheet .analysis-performance-chart-card > .analysis-composition-section {
    grid-area:comp;min-width:0;margin:0;padding:0 0 0 16px;
    border-top:0;border-left:1px solid #d2ddeb;
    align-self:stretch;
  }
  #modal-root .player-analysis-sheet .analysis-composition-heading {
    flex-wrap:wrap;gap:6px;
  }
  #modal-root .player-analysis-sheet .analysis-composition-wrap {
    grid-template-columns:118px minmax(0,1fr);gap:8px;
  }
  #modal-root .player-analysis-sheet .analysis-composition-pie {width:118px;max-width:100%;}
}
/* On wider tablet / PC, school division and the three filters share ONE line. */
@media screen and (min-width:1000px) {
  #modal-root .player-analysis-sheet .analysis-period-filter-card.analysis-player-grade-only {
    display:grid;grid-template-columns:minmax(138px,.7fr) minmax(0,3.3fr);
    align-items:end;column-gap:12px;row-gap:8px;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-card.analysis-player-grade-only > h3 {
    grid-column:1/-1;margin:0;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-card.analysis-player-grade-only > .analysis-player-school-fixed {
    grid-column:1;grid-row:2;max-width:none;margin:0;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-card.analysis-player-grade-only > .analysis-period-filter-grid {
    grid-column:2;grid-row:2;min-width:0;
  }
  #modal-root .player-analysis-sheet .analysis-period-filter-card.analysis-player-grade-only > .analysis-current-condition {
    grid-column:1/-1;
  }
}