/* Global base for both hosts. Component styles live in each component's .razor.css. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  /* iOS otherwise enlarges text after a rotation to landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  background: var(--hs-field);
  color: var(--hs-text);
  font: var(--hs-text-md)/1.4 var(--hs-font);
  -webkit-font-smoothing: antialiased;
}

#app { height: 100%; }

h1, h2, h3, h4, p { margin: 0; }

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

button { cursor: pointer; }

a { color: inherit; }

/* One focus ring for keyboard users everywhere; mouse clicks don't show it. Ink, not the accent: focus.css says why,
   and its classes cover the inset and field variants. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--hs-focus, var(--hs-text)); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Breakpoint utilities (Vistazo's md: split; mobile is max-width 767px). CSS rather than ViewportState, so the first
   paint is right before .NET knows the width. */
@media (min-width: 768px) { .hs-mobile-only { display: none !important; } }
@media (max-width: 767px) {
  .hs-desktop-only { display: none !important; }
  /* 16px stops iOS Safari zooming the page when a field takes focus; body text stays 13px. */
  input, textarea, select { font-size: 16px; }
}

/* The frameless desktop window (its index.html sets hs-frameless on <html>; MainForm strips the native title bar).
   The gray field and the breadcrumb row's empty stretch drag the window, through WebView2's non-client region
   support; cards and controls opt out, so the drag area is exactly the gutter frame and the row, never a pane's
   inside. Both spellings: Chromium reads app-region and older WebView2 builds only -webkit-app-region. Nothing on
   the web, where the browser owns the window. */
html.hs-frameless .hs-drag { -webkit-app-region: drag; app-region: drag; }
html.hs-frameless .hs-no-drag { -webkit-app-region: no-drag; app-region: no-drag; }

/* The form keeps Windows' top resize band (8px at 96 dpi, scaling with the page, so always 8 CSS px) above the
   WebView in the field colour; the shell's top gutter gives that back so the frame reads 12px on every side. */
html.hs-frameless { --hs-frame-top: 8px; }
html.hs-frameless .nav-frame { padding-top: calc(var(--hs-gutter) - var(--hs-frame-top)); }
html.hs-frameless .main-column { padding-top: calc(var(--hs-gutter) - var(--hs-frame-top)); }
html.hs-frameless .pre-app .column { margin-top: clamp(40px, calc(46svh - 304px - var(--hs-frame-top)), 416px); }

/* Maximized (WindowControls sets hs-maximized): the form keeps no resize strip (there is no edge to drag), so the
   shell's top gutter is the full 12px again, and the window buttons grow into the top and right gutters so a throw
   at the screen's corner lands on Close, as it does on a native title bar. Here rather than in the components'
   scoped CSS, which can't name an <html> ancestor; the <html> compound outranks the scoped rules. */
html.hs-maximized .nav-frame { padding-top: var(--hs-gutter); }
html.hs-maximized .main-column { padding-top: var(--hs-gutter); }
html.hs-maximized .window-controls { margin-top: calc(-1 * var(--hs-gutter)); margin-right: calc(-4px - var(--hs-gutter)); }
html.hs-maximized .win-btn { padding-top: var(--hs-gutter); }
html.hs-maximized .window-controls::before { margin-top: var(--hs-gutter); }
html.hs-maximized .win-btn.close { width: calc(35px + var(--hs-gutter)); padding-right: calc(var(--hs-gutter) + 5px); }

/* Vistazo's topBarButtonClass: the 20px glyphs in the phone top bar (hamburger, close, search), 40px to the touch. */
.hs-topbar-btn {
  display: inline-grid;
  place-items: center;
  width: var(--hs-touch);
  height: var(--hs-touch);
  padding: 0;
  border: 0;
  border-radius: var(--hs-r-sm);
  background: transparent;
  color: var(--hs-muted);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

/* Hover only where there is one: a touch tap would otherwise leave the fill stuck on the button. */
@media (hover: hover) {
  .hs-topbar-btn:hover { background: var(--hs-hover); color: var(--hs-text); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation-duration: 0ms !important; }
}

/* Shown by the Blazor runtime on an unhandled exception. */
#blazor-error-ui {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hs-z-toast);
  padding: 10px 16px; background: #fef3c7; color: var(--hs-text);
  border-top: 1px solid #fcd34d; box-shadow: var(--hs-shadow-md);
}
#blazor-error-ui .reload { margin-left: 8px; }
#blazor-error-ui .dismiss { position: absolute; right: 12px; top: 8px; cursor: pointer; }

.blazor-error-boundary { padding: 12px 16px; background: #fee2e2; color: #7f1d1d; border-radius: var(--hs-r-md); }
.blazor-error-boundary::after { content: "Something went wrong in this part of the page."; }

/* The host page's boot placeholder, replaced when the router renders. */
.boot { height: 100%; display: grid; place-items: center; }
.boot img { width: 40px; height: 40px; opacity: .35; }