/*
 * modern-base.css — the GLOBAL SHELL BASE for the Modern UI. After the Phase 6
 * decomposition this file holds only the foundation: design-token + font
 * @imports, the Material Icons @font-face + `.material-icons`, the
 * `.scale-modern-shell` box/typography/control resets, the `.scale-skip-link`
 * (a11y), and the `.scale-modern-press` util. (Down from ~14,248 lines.)
 *
 * The former feature CSS was peeled into per-area sibling files, all loaded as
 * GLOBAL stylesheets via <link>s in Client/wwwroot/index.html — in their
 * ORIGINAL SOURCE ORDER, immediately after this file. That order is
 * load-bearing (later blocks deliberately override earlier ones), so the
 * cascade is byte-identical to the pre-split monolith. The `<link>` sequence in
 * index.html and each partial's header document the ordering; do NOT reorder.
 * See RepositoryDemo/docs/MODERN_BASE_CSS_MAP.md for the full extraction map.
 */
@import url("./modern-tokens.css?v=20260802-uiv1");
/* Newsreader's @import was removed 2026-07-30 (Manrope's on 2026-07-23): every font
   role token now aliases --scale-font-sans (Arial/Helvetica/sans-serif) — the app
   renders ONE family, so no webfont is fetched at all (which also stalled first
   paint on offline POS devices). See the font-system contract in modern-tokens.css. */

/* Material Icons Sharp — consumed by <i class="material-icons"> across ~169 razor spots.
   Font-face was previously in custom.css which was deleted in the Classic-UI removal;
   restored here so the Modern UI keeps its glyphs. */
@font-face {
  font-family: 'Material Icons Sharp';
  src: url('/MaterialFonts/Material_Symbols_Sharp/MaterialSymbolsSharp-VariableFont_FILL,GRAD,opsz,wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.material-icons {
  font-family: 'Material Icons Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: var(--scale-fs-24);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.scale-modern-shell,
.scale-modern-shell * {
  box-sizing: border-box;
}

/* Accessibility: skip-to-main-content link (WCAG 2.4.1 Bypass Blocks).
   Off-screen until it receives keyboard focus, then slides in pinned to the
   top-left so keyboard users can jump past the topbar/nav straight to <main>.
   Each Modern page renders one as the first focusable element and targets its
   own <main id="modern-*-main" tabindex="-1">. */
.scale-skip-link {
  position: fixed;
  top: var(--scale-space-3);
  left: var(--scale-space-3);
  z-index: 100000;
  padding: var(--scale-space-3) var(--scale-space-6);
  border-radius: var(--scale-radius-chip);
  background: var(--scale-primary);
  color: var(--scale-text-on-primary);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-type-callout-size);
  font-weight: var(--scale-type-callout-weight);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--scale-duration-press) var(--scale-ease-out-ios);
}

.scale-skip-link:focus,
.scale-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--scale-focus-ring);
  outline-offset: var(--scale-focus-ring-offset);
}

.scale-modern-shell {
  min-height: 100vh;
  width: 100%;
  color: var(--scale-text);
  background: var(--scale-bg);
  font-family: var(--scale-font-sans) !important;
  font-size: var(--scale-type-body-size);
  font-weight: var(--scale-type-body-weight);
  line-height: var(--scale-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.scale-modern-shell .material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}

.scale-modern-shell :where(
  div,
  section,
  main,
  p,
  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  button,
  label,
  strong
) {
  font-family: var(--scale-font-sans) !important;
}

.scale-modern-shell button {
  font: inherit;
  font-family: var(--scale-font-sans) !important;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.scale-modern-shell input,
.scale-modern-shell textarea,
.scale-modern-shell select {
  font: inherit;
  font-family: var(--scale-font-sans) !important;
  color: inherit;
}

.scale-modern-press {
  transition: opacity var(--scale-duration-press) ease;
}

.scale-modern-press:active {
  opacity: 0.75;
}