/* var.31 — Modern UI Phase 15: Responsive & Touch UX */
:root {
  --ui-vh: 1vh;
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-right: env(safe-area-inset-right, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ui-safe-left: env(safe-area-inset-left, 0px);
}

html {
  min-height: 100%;
  scroll-padding-top: calc(16px + var(--ui-safe-top));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: calc(var(--ui-vh) * 100);
  padding-left: var(--ui-safe-left);
  padding-right: var(--ui-safe-right);
}

/* Current-page feedback without changing the established visual language. */
.topnav a[aria-current="page"]:not(.icon),
nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
}

/* Avoid accidental horizontal overflow from long URLs and document names. */
main,
article,
section,
.card,
.paper,
[class*="content"] {
  min-width: 0;
}

main p,
article p,
main li,
article li,
main a,
article a {
  overflow-wrap: anywhere;
}

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

/* Touch improvements are limited to coarse pointers and do not enlarge desktop UI. */
@media (hover: none), (pointer: coarse) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .button,
  .btn,
  a.icon,
  .viewer button,
  [role="button"] {
    min-width: 44px;
    min-height: 44px;
  }

  .topnav a,
  nav a,
  footer a {
    -webkit-tap-highlight-color: transparent;
  }

  a,
  button,
  [role="button"] {
    touch-action: manipulation;
  }

  /* Hover transforms can feel sticky on touchscreens. */
  .card:hover,
  .button:hover,
  .btn:hover,
  button:hover {
    transform: none;
  }
}

@media screen and (max-width: 770px) {
  body {
    padding-bottom: var(--ui-safe-bottom);
  }

  .topnav.responsive {
    max-height: calc(var(--ui-vh) * 100 - var(--ui-safe-top) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .topnav > a.icon {
    margin-right: max(0px, var(--ui-safe-right));
  }

  #upbutton,
  .theme-toggle,
  [data-theme-toggle] {
    margin-bottom: var(--ui-safe-bottom);
  }
}

@media print {
  body { min-height: auto; padding: 0; }
}

/* v.603 — active button in the upper navigation uses the established red-brown accent. */
.topnav a[aria-current="page"]:not(.icon),
.topnav a.active:not(.icon) {
  background-color: rgba(133, 9, 9, 1);
  color: #fff;
  text-transform: uppercase;
}