html {
  -webkit-text-size-adjust: 100%;
}

.aclimo-page {
  overflow-x: hidden;
}

.aclimo-page h1,
.aclimo-page h2,
.aclimo-page h3,
.aclimo-page p,
.aclimo-page li,
.aclimo-page a,
.aclimo-page button,
.aclimo-page label,
.aclimo-page span {
  letter-spacing: 0 !important;
}

.aclimo-page h1,
.aclimo-page h2,
.aclimo-page h3,
.aclimo-page .brand-title,
.aclimo-page .brand-subtitle {
  overflow-wrap: anywhere;
}

.aclimo-page input,
.aclimo-page select,
.aclimo-page textarea,
.aclimo-page button {
  font: inherit;
}

@media (max-width: 720px) {
  .aclimo-page .btn,
  .aclimo-page .button,
  .aclimo-page .nav-link,
  .aclimo-page button,
  .aclimo-page input,
  .aclimo-page select {
    min-height: 44px;
  }
}

@media (max-width: 900px) {
  .page-bassin header,
  .page-historical header {
    position: relative !important;
  }

  .page-bassin header .container,
  .page-historical header .container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
  }

  .page-bassin header .container > .flex,
  .page-historical header .container > .flex {
    width: 100%;
    align-items: flex-start !important;
    flex-wrap: wrap;
    min-width: 0;
  }

  .page-bassin header .container > .flex:last-child,
  .page-historical header .container > .flex:last-child {
    gap: 8px;
  }

  .page-bassin header h1,
  .page-historical header h1 {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem) !important;
    line-height: 1.2;
  }

  .page-bassin header .small,
  .page-historical header .small {
    text-align: left !important;
  }

  .page-bassin header a.btn,
  .page-historical header a.btn {
    flex: 1 1 min(100%, 150px);
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .page-bassin .container,
  .page-historical .container {
    width: 100%;
    padding: 12px;
  }

  .page-bassin .card,
  .page-historical .card {
    border-radius: 18px;
    padding: 1rem;
  }

  .page-bassin .snow-loader-card,
  .page-historical .snow-loader-card,
  .page-map .snow-loader-card {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .page-bassin .period-panel,
  .page-bassin .period-toolbar,
  .page-bassin .period-range,
  .page-bassin .period-shortcuts,
  .page-bassin .period-status {
    min-width: 0;
    width: 100%;
  }

  .page-bassin .period-toolbar {
    align-items: stretch;
    gap: 10px;
  }

  .page-bassin .period-toolbar label,
  .page-bassin .period-input,
  .page-bassin #latest-period-btn {
    width: 100%;
  }

  .page-bassin .period-range {
    margin-left: 0;
    justify-content: space-between;
  }

  .page-bassin .period-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-bassin .period-shortcut {
    min-height: 38px;
  }

  .page-bassin .controls-card .flex.flex-wrap.gap-2 {
    width: 100%;
  }

  .page-bassin .controls-card .btn,
  .page-bassin .controls-card a.btn {
    flex: 1 1 min(100%, 140px);
    justify-content: center;
  }

  .page-bassin summary {
    min-height: 44px;
    align-items: center;
  }

  .page-bassin #compare-panel {
    grid-template-columns: 1fr !important;
    max-height: 280px;
  }

  .page-bassin #dashboard {
    gap: 12px;
  }

  .page-bassin #chart-card {
    height: clamp(340px, 58vh, 460px) !important;
  }

  .page-bassin #swe-chart {
    min-height: 300px;
  }

  .page-bassin .map-card {
    height: min(360px, 56vh);
  }

  .page-bassin #map {
    min-height: 260px;
  }

  .page-bassin .leaflet-touch .leaflet-bar a,
  .page-map .leaflet-touch .leaflet-bar a {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .page-historical main.container {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .page-historical .controls {
    gap: 1rem;
  }

  .page-historical .controls > div {
    flex-basis: 100%;
    min-width: 0 !important;
  }

  .page-historical .controls .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .page-historical .controls label.inline-flex {
    display: flex;
    margin-right: 0;
    min-height: 42px;
  }

  .page-historical .basin-selector {
    max-height: min(380px, 45vh);
  }

  .page-historical #year-list,
  .page-historical #year-list > div {
    width: 100%;
  }

  .page-historical #year-list > .flex.items-center {
    flex-wrap: wrap;
  }

  .page-historical .noUi-horizontal {
    height: 10px;
  }

  .page-historical .noUi-handle {
    width: 30px;
    height: 30px;
    top: -10px;
    right: -15px;
  }

  .page-historical #chart-container {
    min-height: clamp(340px, 58vh, 480px);
  }

  .page-historical #summary-card .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }

  .page-historical #summary-table {
    min-width: 640px;
  }
}

@media (max-width: 1100px) {
  .page-map {
    overflow-y: auto;
  }

  .page-map .shell {
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .page-map .map-stage {
    grid-template-columns: 1fr;
  }

  .page-map .source-panel {
    height: auto;
  }
}

@media (max-width: 720px) {
  .page-map .shell,
  .page-home .shell,
  .page-about .shell,
  .page-guide .shell,
  .page-docs .shell {
    width: min(100% - 20px, 1380px) !important;
  }

  .page-map .page-hero,
  .page-map .map-frame,
  .page-map .source-panel {
    border-radius: 20px;
    padding: 14px;
  }

  .page-map .page-hero h1 {
    font-size: clamp(1.85rem, 9vw, 2.45rem);
    line-height: 1.08;
  }

  .page-map .hero-top,
  .page-map .map-frame-head {
    gap: 12px;
  }

  .page-map .hero-top > div:last-child {
    align-items: stretch !important;
    width: 100%;
    min-width: 0;
  }

  .page-map .lang-switch,
  .page-map .hero-actions {
    width: 100%;
  }

  .page-map .lang-switch a,
  .page-map .hero-actions .btn {
    flex: 1 1 0;
    text-align: center;
  }

  .page-map .map-frame-head p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .page-map .map-canvas {
    min-height: clamp(430px, 68dvh, 600px) !important;
    border-radius: 18px;
  }

  .page-map .search-panel {
    top: 10px;
    right: 10px;
    left: 10px;
    max-height: min(300px, 44dvh);
    padding: 12px;
    border-radius: 18px;
    overflow: auto;
  }

  .page-map .panel-kicker {
    margin-bottom: 6px;
    font-size: 0.72rem;
  }

  .page-map .search-input {
    min-height: 44px;
    font-size: 16px;
  }

  .page-map .suggestions {
    max-height: 150px;
  }

  .page-map .suggestion {
    padding: 12px;
  }

  .page-map .leaflet-top.leaflet-left {
    bottom: 10px;
    left: 10px;
  }

  .page-map .leaflet-right .leaflet-control {
    margin-right: 10px;
  }

  .page-map .leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
  }

  .page-map .source-panel .btn,
  .page-map .source-panel button {
    width: 100%;
  }

  .page-map .filter-head {
    flex-direction: column;
    align-items: stretch;
  }

  .page-map .filter-actions,
  .page-map .summary-actions {
    width: 100%;
  }

  .page-map .summary-compact .metric {
    white-space: normal;
  }

  .page-map .filter-item {
    align-items: flex-start;
  }

  .page-map .filter-item label {
    align-items: flex-start;
  }

  .page-map .filter-item input {
    margin-top: 2px;
  }
}

@media (max-width: 720px) {
  .page-home .topbar {
    gap: 14px;
  }

  .page-home .brand {
    align-items: flex-start;
  }

  .page-home .brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .page-home .hero-copy,
  .page-home .hero-card,
  .page-home .info-card,
  .page-home .step {
    border-radius: 20px;
    padding: 22px;
  }

  .page-home h1 {
    font-size: clamp(2rem, 10vw, 2.6rem);
    line-height: 1.08;
  }

  .page-home .hero-lead,
  .page-home .section-header p {
    font-size: 1rem;
    line-height: 1.62;
  }

  .page-home .hero-actions,
  .page-home .hero-link-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-home .button {
    width: 100%;
    text-align: center;
  }

  .page-home .mini-map {
    min-height: 180px;
  }

  .page-home .section {
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  .page-about .nav,
  .page-guide .nav,
  .page-docs .nav {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-about .nav-link,
  .page-guide .nav-link,
  .page-docs .nav-link {
    width: 100%;
  }

  .page-about .panel,
  .page-guide .hero,
  .page-guide .section,
  .page-docs .panel,
  .page-docs .notice {
    border-radius: 20px;
    padding: 22px;
  }

  .page-about .card {
    border-radius: 18px;
    padding: 20px;
  }

  .page-about h1,
  .page-guide h1,
  .page-docs h1 {
    font-size: clamp(1.9rem, 10vw, 2.35rem);
    line-height: 1.1;
  }

  .page-guide code {
    display: inline-block;
    margin-bottom: 4px;
    white-space: normal;
  }

  .page-docs .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-docs .button {
    width: 100%;
  }

  .page-error {
    padding: 14px !important;
  }

  .page-error .panel {
    border-radius: 20px;
    padding: 24px 20px;
  }

  .page-error h1 {
    font-size: clamp(2rem, 12vw, 2.7rem);
    line-height: 1.1;
  }

  .page-error a {
    width: 100%;
    min-height: 44px;
  }
}