/* ==========================================================================
   Avanzo Calendar — Reset, typography and accessibility primitives
   --------------------------------------------------------------------------
   Authored mobile-first: unprefixed rules describe the phone, and
   `@media (min-width: 768px)` blocks add the desktop. That ordering is the
   whole point — the previous stylesheet was desktop-first and used
   `display: none` to cope with small screens, which is how the primary
   action ended up invisible on the primary device.
   ========================================================================== */

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

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

/* ── Typography ─────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }

p { text-wrap: pretty; }

a { color: var(--brand-text); }

.font-gs { font-family: var(--font-display); }

/* ==========================================================================
   Accessibility primitives
   ========================================================================== */

/* One focus ring, applied globally, never removed.
   :focus-visible so pointer users don't see rings on click, but every
   keyboard user sees exactly where they are. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--r-sm);
}

/* Belt and braces: some browsers still paint the UA ring on :focus.
   Suppress it only where :focus-visible is supported and will take over. */
@supports selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
  }
}

/* Minimum touch target (WCAG 2.1 AA, 2.5.5). Applied via a pseudo-element so
   a visually small icon button still has a full-size hit area without the
   layout having to grow around it. */
.tap-safe { position: relative; }
.tap-safe::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  width: 100%;
  height: 100%;
}

/* Visible only to screen readers. Used for the icon-button labels and the
   status text that must not be conveyed by colour alone. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keyboard users get a way past the header and nav into the content. */
.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  color: var(--brand-text);
  font-weight: var(--fw-medium);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  translate: 0 -200%;
}
.skip-link:focus-visible { translate: 0 0; }

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

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-sm); }

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Responsive visibility.
   NOTE: .hide-sm is retained because ten templates still reference it, but it
   is now reserved for genuinely DECORATIVE content only. Hiding information or
   actions on small screens is what made this UI unusable on a phone; if you
   are reaching for .hide-sm to solve a layout problem, reflow instead. */
.hide-sm { display: none !important; }
.show-sm { display: initial; }

@media (min-width: 768px) {
  .hide-sm { display: revert !important; }
  .show-sm { display: none !important; }
}

.stack     { display: flex; flex-direction: column; }
.row       { display: flex; align-items: center; }
.wrap      { flex-wrap: wrap; }
.grow      { flex: 1 1 auto; min-width: 0; }
.gap-1     { gap: var(--sp-1); }
.gap-2     { gap: var(--sp-2); }
.gap-3     { gap: var(--sp-3); }
.gap-4     { gap: var(--sp-4); }
.text-muted { color: var(--text-muted); }

/* Any wide child (table, diagram, code) scrolls inside its own box so the
   page body itself never scrolls sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }