/* Shared layout rules for every role, page and dialog. */
.main, .modalbox, .login-wrap { overflow-wrap: anywhere; }
.main, #content, .card, .v125x-card, .field,
.grid > *, .head > *, .row > *, .top > *, .form > *,
.v125x-parent-grid > *, .v125x-student-grid > *, .v125x-two > *,
.v125x-metrics > *, .v125x-actions > *, .v125x-parent-today > *,
.v125x-evidence-grid > *, .reading-book-info > *, .reading-session-row > *,
.reading-proof-grid > *, .reading-evidence-grid > *, .reward-type-admin > *,
.resp-admin-row > *, .wheel-editor-row > * { min-width: 0; }
.grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.v125x-parent-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.head, .actions, .row, .reading-session-row, .reading-book-head,
.reward-type-admin, .history-item { flex-wrap: wrap; }
.head > :first-child { flex: 1 1 180px; }
.head > button, .head > .btn, .head > .primary { flex: 0 0 auto; }
.row > :first-child, .reading-session-main { flex: 1 1 180px; }
.card { overflow: visible; }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; }
.field input[type="file"] { font-size: 13px; }
.btn, .primary, .login-submit, .role-enter { min-height: 44px; }
.btn, .primary { white-space: normal; }
.actions { grid-column: 1 / -1; }
.actions > button { max-width: 100%; }
.table-wrap {
  width: 100%; max-width: 100%; min-width: 0; overflow-x: auto;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.table { min-width: 600px; }
.table th, .table td { overflow-wrap: anywhere; }
.table td .btn { margin: 2px 0; }
.exam-score-table { min-width: 0; table-layout: fixed; }
.exam-score-table th:first-child { width: 34%; }
.modal { padding: 16px; }
.modalbox {
  min-width: 0; max-width: 620px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overscroll-behavior: contain;
}
.modalbox .head { flex-wrap: nowrap; align-items: flex-start; }
.modalbox .head h2 { flex: 1; line-height: 1.4; }
.modalbox .head > button { flex: 0 0 44px; }
.modalbox img, .modalbox video, .resp-proof img { max-width: 100%; }
.avatar-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.emoji-picker { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.avatar-choice, .emoji-choice { min-width: 0; min-height: 44px; }
.side { overflow-y: auto; overscroll-behavior: contain; }
.nav button { min-height: 44px; }
.top { flex-wrap: wrap; }
.top-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.student-chip { min-width: 0; }
.student-chip > :last-child { min-width: 0; overflow-wrap: anywhere; }
.reading-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.reading-session-main { min-width: 0; }
.reward-tile h3, .reward-ribbon { height: auto; }
.reward-type-admin > div[style*="flex:1"] { flex-basis: 120px !important; }
.toast { max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
.login-screen { min-height: 100vh; min-height: 100dvh; }
.login-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1160px) {
  .s3 { grid-column: span 6; }
  .s4, .s6, .s8, .s12 { grid-column: span 12; }
  .v125x-parent-grid, .v125x-two, .v125x-student-grid,
  .v125x-student-modules { grid-template-columns: minmax(0, 1fr); }
  .reward-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resp-admin-row { grid-template-columns: minmax(0, 1fr) 80px; }
  .resp-admin-row > :nth-child(n + 3) { grid-column: 1 / -1; }
  .v125x-settings-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .main { padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s3 { grid-column: span 1; }
  .s4, .s6, .s8, .s12 { grid-column: span 2; }
  .mobile-nav { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav button { height: 44px; white-space: normal; font-size: 10px; }
  .card { overflow: visible; }
  .v125x-parent-hero { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .login-roles { grid-template-columns: minmax(0, 1fr); }
  .login-screen { align-items: flex-start; padding: 24px 16px; }
  .login-wrap { margin-block: auto; }
  .toast { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .modal {
    --dialog-top: max(10px, env(safe-area-inset-top, 0px));
    --dialog-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    padding: var(--dialog-top) max(10px, env(safe-area-inset-right, 0px)) var(--dialog-bottom) max(10px, env(safe-area-inset-left, 0px));
  }
  .modalbox {
    padding: 16px; border-radius: 16px;
    max-height: calc(100vh - var(--dialog-top) - var(--dialog-bottom));
    max-height: calc(100dvh - var(--dialog-top) - var(--dialog-bottom));
  }
  .field input, .field select, .field textarea, .login-password { font-size: 16px; }
  .actions > button { flex: 1 1 110px; }
  .head > button { max-width: 100%; }
  .v125x-parent-hero { padding: 18px; }
  .v125x-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .v125x-parent-hero h1, .v125x-hero h1 { font-size: clamp(23px, 6vw, 30px); }
  .v125x-metrics, .v125x-actions, .v125x-parent-today,
  .v125x-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v125x-score, .v125x-wisdom-grid { grid-template-columns: minmax(0, 1fr); }
  .v125x-setting { flex-wrap: wrap; }
  .v125x-setting > :first-child { flex: 1 1 180px; }
  .v125x-setting label { margin-left: auto; }
  .v125x-subject { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 55px)); }
  .v125x-subject .v125x-mini-bar { grid-column: 1 / -1; }
  .reading-hero, .reading-book-card { flex-direction: column; align-items: stretch; }
  .reading-book-info { align-items: flex-start; }
  .reading-book-info .book-icon { flex-shrink: 0; }
  .reading-hero-stat { min-width: 0; }
  .reading-session-row > button { flex: 1 1 100px; }
  .reading-form-grid, .reading-ai-grid { grid-template-columns: minmax(0, 1fr); }
  .resp-grid, .resp-proof { grid-template-columns: minmax(0, 1fr); }
  .resp-camera-actions { flex-wrap: wrap; }
  .welcome { align-items: flex-start; }
  .reward-hero { gap: 12px; }
  .reward-balance { min-width: 0; }
  .emoji-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wheel-disc { width: min(256px, 100%); height: auto; aspect-ratio: 1; }
  .ledger-item { grid-template-columns: 85px minmax(0, 1fr); }
  /* Exam entry keeps all three numeric fields visible on narrow phones. */
  .exam-score-table { display: block; min-width: 0; }
  .exam-score-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .exam-score-table tbody { display: block; }
  .exam-score-table tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  .exam-score-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .exam-score-table td:first-child { grid-column: 1 / -1; font-weight: 700; }
  .exam-score-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    font-size: 12px; color: var(--muted);
  }
  .exam-score-table input { width: 100%; min-width: 0; min-height: 44px; }
}

@media (max-width: 400px) {
  .top { gap: 10px; }
  .title { flex: 1 1 90px; }
  .title h1 { font-size: 20px; }
  .student-chip { max-width: 170px; padding: 6px 8px; font-size: 12px; }
  .card { padding: 14px; }
  .head { align-items: flex-start; }
  .v125x-metrics, .reward-grid { grid-template-columns: minmax(0, 1fr); }
  .s3 { grid-column: span 2; }
  .avatar-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .emoji-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reading-proof-grid, .reading-evidence-grid { grid-template-columns: minmax(0, 1fr); }
  .reading-proof-grid > div:last-child { grid-column: auto; }
  .daily-surprise { padding: 16px; }
  .surprise-intro { align-items: flex-start; gap: 10px; }
  .surprise-emblem { width: 44px; height: 52px; font-size: 32px; }
  .daily-surprise h2 { font-size: 19px; }
  .wheel-editor-row { padding: 10px; }
  .v125x-subject { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 43px)); gap: 5px; }
}

@media (max-height: 520px) and (max-width: 900px) {
  .modal { align-items: flex-start; }
  .login-screen { align-items: flex-start; }
  .login-wrap { margin-block: 0; }
}

/* The coach detail includes five statistics, unlike the short subject list. */
.v125x-subject-detail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.v125x-subject-detail > b:first-child, .v125x-subject-detail .v125x-mini-bar { grid-column: 1 / -1; }