/*
 * Shared responsive safety system
 * Loaded last on every HTML page. Keep selectors intentionally low-specificity;
 * page-family styles remain responsible for visual identity and detailed layouts.
 */

:root {
  --ui-space-1: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --ui-space-2: clamp(0.5rem, 0.4rem + 0.35vw, 0.75rem);
  --ui-space-3: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --ui-space-4: clamp(1rem, 0.8rem + 0.75vw, 1.5rem);
  --ui-space-5: clamp(1.5rem, 1.1rem + 1.25vw, 2.5rem);
  --ui-page-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --ui-reading-width: 72ch;
  --ui-content-width: 75rem;
  --ui-control-height: 44px;
  --ui-focus-color: #1d6fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  inline-size: 100%;
  max-inline-size: 100%;
  min-width: 0;
  margin-inline: 0;
  overflow-wrap: anywhere;
}

:where(header, nav, main, section, article, aside, footer, form, fieldset, div) {
  min-width: 0;
}

:where(.container, [class$="-container"], [class$="-shell"], [class*="__container"]) {
  max-inline-size: 100%;
  min-inline-size: 0;
}

:where([class*="grid"], [class*="row"], [class*="content"], [class*="actions"]) > * {
  min-width: 0;
}

:where(img, picture, video, canvas, svg, iframe) {
  max-inline-size: 100%;
}

:where(img, video) {
  block-size: auto;
}

:where(p, li, dd, dt, figcaption, address, a, code, pre, output) {
  overflow-wrap: anywhere;
  word-break: normal;
}

:where(pre, code) {
  max-inline-size: 100%;
}

pre {
  overflow: auto;
  white-space: pre-wrap;
}

:where(button, input, select, textarea) {
  max-inline-size: 100%;
  font: inherit;
}

:where(
  button,
  [role="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select
) {
  min-height: 44px;
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

:where(button, [role="button"], a, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus-color) 78%, white);
  outline-offset: 3px;
}

:where(button, input, select, textarea):disabled,
:where([aria-disabled="true"]) {
  cursor: not-allowed;
}

:where(table) {
  inline-size: 100%;
  max-inline-size: 100%;
}

:where(.table-responsive, [data-horizontal-scroll], [role="region"][tabindex="0"]) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(dialog) {
  inline-size: min(48rem, calc(100vw - (2 * var(--ui-page-gutter))));
  max-inline-size: calc(100vw - (2 * var(--ui-page-gutter)));
  max-block-size: calc(100dvh - (2 * var(--ui-page-gutter)));
  margin: auto;
}

:where(dialog[open]) {
  overflow: auto;
  overscroll-behavior: contain;
}

:where([hidden]) {
  display: none !important;
}

@supports (padding: max(0px)) {
  :where(body) {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  :where(.safe-area-bottom, [data-safe-area="bottom"]) {
    padding-bottom: max(var(--ui-space-3), env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 767px) {
  :root {
    --ui-page-gutter: clamp(0.75rem, 0.55rem + 1.5vw, 1rem);
  }

  :where(dialog) {
    inline-size: calc(100vw - (2 * var(--ui-page-gutter)));
  }

  :where(.mobile-stack, [data-mobile-layout="stack"]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}