/* Responsive layout: keep content readable instead of hiding overflow. */
html { scroll-padding-block: 1rem 6rem; }
main, section, article, .heading > div, .section-title > div,
.stats article > div, .progress-card > div, .header-end { min-width: 0; }
h1, h2, h3, p, small, .badge, .breadcrumb { overflow-wrap: anywhere; }
.overview, .workspace { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lesson-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sidebar { overflow-y: auto; overscroll-behavior: contain; }
.sidebar > *, .stat-icon { flex-shrink: 0; }
.icon-btn, .check, .schedule-row .check { min-width: 44px; min-height: 44px; }
.primary, .secondary, .danger, .nav, .tabs button { min-height: 44px; }
button { touch-action: manipulation; }
.section-title { flex-wrap: wrap; }
.calendar-controls { flex-shrink: 0; }
.search-row input { min-width: 0; }
.review-text button { max-width: 100%; min-height: 44px; }
.schedule-row { align-items: center; }
.schedule-row > span { min-width: 0; overflow-wrap: anywhere; }
.schedule-row .check { flex: 0 0 44px; }
.calendar-cell { min-width: 0; height: auto; min-height: 90px; }
.calendar-cell small { max-width: 100%; overflow-wrap: anywhere; }
.weekday-short { display: none; }
.sequence { gap: 4px; }
.sequence span { flex: 0 0 32px; width: 32px; }
.sequence .infinite { flex-basis: 60px; width: 60px; }
.sequence i { min-width: 0; }
dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
dialog input, dialog textarea, dialog select, .search-row input, .search-row select { font-size: 1rem; }
dialog .section-title .icon-btn { flex-shrink: 0; }
.notes { max-width: 100%; }
#toast { width: max-content; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }

@media (min-width: 951px) and (max-height: 800px) {
  .sidebar { padding-block: 20px; }
  .sidebar > p { margin-bottom: 20px; }
  .side-note { margin-top: 24px; }
}

@media (min-width: 951px) and (max-width: 1200px) {
  .overview, .workspace { grid-template-columns: minmax(0, 1fr); }
  .progress-card { flex-direction: row; gap: 24px; text-align: right; }
  .ring { flex-shrink: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 950px) {
  .sidebar { overflow: visible; }
  nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav { min-width: 0; }
  main { padding-inline: clamp(16px, 3vw, 28px); }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview, .workspace { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .focus-card { padding: 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats article { padding: 18px; gap: 14px; }
  .mobile-backup { display: flex; }
  .mobile-backup button { flex: 1; }
}

@media (max-width: 780px) {
  .overview, .workspace { grid-template-columns: minmax(0, 1fr); }
  .progress-card { flex-direction: row; gap: 24px; text-align: right; }
  .ring { width: 110px; height: 110px; flex-shrink: 0; }
  .progress-card h3 { margin-top: 0; }
}

@media (max-width: 650px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .sidebar { padding: 16px max(16px, env(safe-area-inset-right, 0px)); }
  .sidebar nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 10;
    margin: 0;
    gap: 6px;
    padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 28px #0002;
  }
  .sidebar .nav { flex-direction: column; gap: 0; padding: 6px 3px; font-size: 18px; line-height: 1.5; }
  .sidebar .nav span { font-size: .8125rem; }
  main { padding-inline: max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  header { height: auto; min-height: 64px; padding-block: 10px; }
  .header-end { gap: 12px; font-size: .875rem; }
  .header-end .icon-btn { flex-shrink: 0; }
  .heading { flex-direction: column; align-items: stretch; gap: 18px; padding-block: 24px; }
  h1 { font-size: clamp(1.5rem, 6vw, 1.875rem); }
  .heading p { font-size: .875rem; }
  .heading .primary { margin: 0; width: 100%; font-size: 1rem; }
  .focus-card { padding: 20px; }
  .focus-card h2 { font-size: 1.375rem; }
  .focus-card p { font-size: .875rem; }
  .sequence { margin-block: 22px 14px; }
  .sequence span { font-size: .8125rem; }
  .progress-card { padding: 20px; gap: 20px; }
  .ring { width: 102px; height: 102px; }
  .ring small { font-size: .75rem; }
  .progress-card p { font-size: .8125rem; }
  .stats { gap: 10px; }
  .stats article { gap: 10px; padding: 14px 12px; }
  .stats small { font-size: .8125rem; }
  .stats strong { font-size: 1.5rem; }
  .stat-icon { width: 36px; height: 42px; }
  .panel { padding: 16px; }
  .section-title { gap: 12px; }
  .section-title h2 { font-size: 1.125rem; }
  .section-title p { font-size: .875rem; }
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tabs button { font-size: .875rem; padding-inline: 2px; }
  .review-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .review-row > .check { grid-row: 1 / 3; align-self: center; }
  .date-tag { grid-column: 2; font-size: .8125rem; white-space: normal; }
  .review-text small { font-size: .8125rem; }
  .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .search-row { flex-direction: column; gap: 12px; }
  .search-row select { width: 100%; }
  #calendar > .panel > .section-title { flex-direction: column; align-items: stretch; }
  .calendar-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .calendar-grid { gap: 4px; }
  .weekday { font-size: .75rem; padding-block: 10px; min-width: 0; }
  .calendar-cell { min-height: 72px; padding: 8px 2px; gap: 3px; font-size: .875rem; align-items: center; }
  .calendar-cell small { font-size: .75rem; }
  .schedule-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .schedule-row .check { grid-row: 1 / 3; }
  .schedule-row > span:last-child { grid-column: 2; color: var(--muted); font-size: .875rem; }
  dialog { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px; border-radius: 16px; }
  dialog .section-title { flex-wrap: nowrap; align-items: flex-start; }
  dialog label { font-size: .9375rem; }
  dialog .notes { padding: 14px; max-height: 40dvh; }
  dialog .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog .actions button { white-space: normal; padding-inline: 8px; }
  #toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  footer { padding-block: 20px; font-size: .8125rem; }
}

@media (max-width: 380px) {
  main { padding-inline: max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .focus-card, .panel { padding: 14px; }
  .sequence { gap: 2px; }
  .sequence span { flex-basis: 29px; width: 29px; height: 29px; }
  .sequence .infinite { flex-basis: 52px; width: 52px; font-size: .75rem; }
  .stats article { flex-direction: column; align-items: flex-start; gap: 8px; }
  .progress-card { gap: 14px; padding: 16px; }
  .calendar-cell { min-height: 68px; }
  .weekday-full { display: none; }
  .weekday-short { display: inline; }
  .calendar-cell .count-label { display: block; font-size: .75rem; line-height: 1.2; }
}

@media (max-width: 300px) {
  .stats, .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .stats article { flex-direction: row; }
  .progress-card { flex-direction: column; text-align: center; }
  .sequence { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .sequence i { display: none; }
  dialog { padding: 14px; }
}