/* NACDA Grades & Feedback mobile layout v1 — display only. */
@media (max-width: 760px) {
  /* Keep nested week/day/activity cards inside the viewport. */
  #app #gradeCards,
  #app #gradeCards details.card,
  #app #gradeCards details.card > div,
  #app #gradeCards section.card,
  #app #gradeCards section.card > .table-wrap {
    min-width:0; max-width:100%; box-sizing:border-box;
  }
  #app #gradeCards details.card,
  #app #gradeCards section.card { padding:14px 12px; }
  #app #gradeCards summary { white-space:normal; overflow-wrap:anywhere; }
  #app #gradeCards section.card h2 { font-size:1.13rem; overflow-wrap:anywhere; }
  #app #gradeCards section.card > p,
  #app #gradeCards section.card > .eyebrow { overflow-wrap:anywhere; }
  #app #gradeCards section.card > .table-wrap { overflow:visible; }

  /* Scope to the five-column gradebook ONLY, not feedback rubric tables. */
  #app #gradeCards section.card > .table-wrap > table,
  #app #gradeCards section.card > .table-wrap > table > tbody,
  #app #gradeCards section.card > .table-wrap > table > tbody > tr {
    display:block; width:100%; min-width:0; max-width:100%;
  }
  #app #gradeCards section.card > .table-wrap > table > thead { display:none; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr {
    padding:12px; margin:12px 0; border:1px solid var(--line,#c4d3dc);
    border-radius:12px; background:var(--paper,#fff); box-shadow:0 1px 3px #0000000b;
  }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td {
    display:block; width:100%; min-width:0; max-width:100%;
    padding:10px 0; border:0; white-space:normal;
    overflow-wrap:anywhere; word-break:normal; text-align:left;
  }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td + td {
    border-top:1px solid var(--line,#dce5e8);
  }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td::before {
    display:block; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase;
    font-weight:800; color:var(--muted,#607380); margin-bottom:5px;
  }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td:nth-child(1)::before { content:'Student'; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td:nth-child(2)::before { content:'Class'; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td:nth-child(3)::before { content:'Final score'; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td:nth-child(4)::before { content:'Status'; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td:nth-child(5)::before { content:'Feedback & attempts'; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td:nth-child(1) strong { font-size:1.05rem; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td details,
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td article.card,
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td .table-wrap { max-width:100%; min-width:0; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr > td button { min-height:44px; margin-top:6px; }

  /* Filters and group buttons should be comfortable to use on phones. */
  #app:has(#gradeCards) .actions { flex-wrap:wrap; gap:10px; }
  #app:has(#gradeCards) .actions > label { flex:1 1 180px; min-width:0; }
  #app:has(#gradeCards) .actions > label :is(input,select) { width:100%; }
  #app:has(#gradeCards) #gradeExport { display:inline-block; padding:8px 0; }
}
@media (max-width: 440px) {
  #app #gradeCards details.card,
  #app #gradeCards section.card { padding:12px 9px; }
  #app #gradeCards section.card > .table-wrap > table > tbody > tr { padding:10px; }
  #app:has(#gradeCards) .actions > label { flex-basis:100%; }
}