:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.app-shell,
.phone-frame,
.app-viewport,
.page,
.home-page,
.stats-page,
.week-page,
.order-page,
.mode-page,
.add-routine-page {
  min-width: 0;
}

.home-page,
.stats-page,
.week-page,
.order-page,
.mode-page,
.add-routine-page {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.top-bar,
.week-header,
.stats-week-header,
.order-header,
.mode-header {
  min-width: 0;
  flex: 0 0 auto;
}

.main-panel,
.timetable-view,
.stats-main-card,
.week-placeholder,
.order-panel,
.mode-list,
.mode-routine-list,
.add-routine-scroll {
  min-width: 0;
  min-height: 0;
}

.app-shell {
  width: 100%;
  min-height: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

.phone-frame {
  width: 100%;
  min-height: 0;
  max-height: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

.app-viewport,
.list-view,
.timetable-view,
.add-routine-scroll,
.mode-list,
.mode-routine-list,
.week-content,
.order-panel,
.stats-content,
.stats-main-card,
.settings-dialog,
.calendar-dialog,
.confirm-dialog,
.sheet-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-viewport::-webkit-scrollbar,
.list-view::-webkit-scrollbar,
.timetable-view::-webkit-scrollbar,
.add-routine-scroll::-webkit-scrollbar,
.mode-list::-webkit-scrollbar,
.mode-routine-list::-webkit-scrollbar,
.week-content::-webkit-scrollbar,
.order-panel::-webkit-scrollbar,
.stats-content::-webkit-scrollbar,
.stats-main-card::-webkit-scrollbar,
.settings-dialog::-webkit-scrollbar,
.calendar-dialog::-webkit-scrollbar,
.confirm-dialog::-webkit-scrollbar,
.sheet-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.settings-dialog,
.calendar-dialog,
.confirm-dialog {
  max-height: min(calc(100% - 32px), calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)));
  overflow-y: auto;
}

.sheet-card {
  width: min(100%, 620px);
  max-height: calc(100dvh - 16px - var(--safe-top));
}

.clock-wrap {
  width: min(100%, 520px, max(220px, calc(100dvh - 340px)));
}

.task-row,
.mode-card,
.setting-row,
.relation-option,
.order-row {
  max-width: 100%;
}

.task-title,
.task-sub,
.mode-title-text,
.setting-row > span,
.setting-row > strong,
.relation-option span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  :root {
    --page-padding: clamp(12px, 4vw, 18px);
  }

  .phone-frame {
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .auth-page {
    padding-top: max(18px, var(--safe-top));
    padding-right: max(18px, var(--safe-right));
    padding-bottom: max(18px, var(--safe-bottom));
    padding-left: max(18px, var(--safe-left));
  }

  .page,
  .stats-page,
  .week-page,
  .order-page,
  .mode-page,
  .add-routine-page {
    padding-left: max(var(--page-padding), var(--safe-left));
    padding-right: max(var(--page-padding), var(--safe-right));
  }

  .sheet-card {
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
  }

  .stats-page,
  .week-page,
  .order-page {
    padding-bottom: max(18px, var(--safe-bottom));
  }
}

@media (min-width: 768px) {
  .phone-frame {
    min-height: 0 !important;
    max-height: calc(100dvh - 48px);
  }

  .phone-frame.show-order {
    width: min(100%, var(--wide-app-max-width));
  }

  .phone-frame.show-stats {
    width: 100%;
    max-width: var(--app-max-width);
  }
}

@media (min-width: 1024px) {
  .phone-frame {
    max-height: calc(100dvh - 64px);
  }
}

@media (max-height: 760px) {
  .home-page > .week-strip {
    min-height: 56px;
    margin-bottom: 8px;
  }

  .timetable-heading,
  .checklist-heading {
    margin-bottom: 8px;
  }

  .clock-wrap {
    width: min(100%, 420px, max(210px, calc(100dvh - 300px)));
  }

  .clock-help {
    margin-top: 10px;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --page-padding: 10px;
    --bottom-nav-height: 56px;
  }

  .top-bar {
    min-height: 38px;
  }

  .home-page > .week-strip {
    min-height: 48px;
    margin-bottom: 4px;
  }

  .timetable-heading,
  .checklist-heading {
    margin-bottom: 4px;
  }

  .clock-wrap {
    width: min(100%, max(190px, calc(100dvh - 250px)));
  }

  .mode-page,
  .add-routine-page,
  .week-page,
  .order-page,
  .stats-page {
    padding-top: 10px;
    padding-bottom: max(10px, var(--safe-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}