/* Shared browser and responsive safeguards for every Method Math page. */
html {
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img,
picture,
video,
canvas {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

button,
[role="button"],
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: rgba(28, 135, 84, .18);
  touch-action: manipulation;
}

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

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  min-height: 48px;
  line-height: 1.25;
}

select {
  -webkit-appearance: none;
}

.container,
.wrap,
.portal-main,
.card,
.panel,
.item,
.topbar,
.admin-hero,
.booking-form,
.booking-details,
.booking-picker,
.login-card,
.login-form {
  min-width: 0;
}

.hero-grid > *,
.about-grid > *,
.policy-grid > *,
.booking-grid > * {
  min-width: 0;
}

.site-header {
  -webkit-backdrop-filter: blur(10px);
}

.topbar,
.admin-hero,
.login-card {
  -webkit-backdrop-filter: blur(18px);
}

.card,
.item,
.admin-stat,
.preview-day,
.block-item {
  -webkit-backdrop-filter: blur(14px);
}

.booking-confirm {
  -webkit-backdrop-filter: blur(16px);
}

.policy-table {
  table-layout: fixed;
  max-width: 100%;
}

.policy-table th,
.policy-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.portal-page,
.login-wrap,
body[style*="place-items"] {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

@supports (height: 100dvh) {
  body,
  .portal-page,
  .login-wrap {
    min-height: 100dvh;
  }

  .portal-webgl {
    height: 100dvh;
  }

  .portal-sidebar {
    min-height: calc(100dvh - 36px);
  }
}

@media (hover: none), (pointer: coarse) {
  .btn,
  .small-btn,
  .portal-nav a,
  .logout-btn,
  .nav-links a,
  summary {
    min-height: 44px;
  }

  .btn:hover,
  .small-btn:hover,
  .day:hover,
  .slot:hover,
  .portal-nav a:hover,
  .logout-btn:hover {
    transform: none;
  }
}

@media (max-width: 760px) {
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  .nav-links {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links a {
    display: flex;
    align-items: center;
  }

  .footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: 0;
    margin-right: 14px;
  }

  .portal-page {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .login-wrap {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 640px) {
  .calendar,
  .booking-calendar,
  .booking-slots,
  .slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .day,
  .slot {
    min-width: 0;
  }

  .booking-form,
  .panel,
  .card {
    padding-left: 18px;
    padding-right: 18px;
  }

  .policy-table th,
  .policy-table td {
    padding: 12px 10px;
    font-size: .88rem;
  }
}

@media (max-width: 360px) {
  .calendar,
  .booking-calendar,
  .booking-slots,
  .slots,
  .portal-nav {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}