/* UI Standard — base.css
 * The page-level layer every non-React app and template loads between the tokens and the components:
 *
 *   <link rel="stylesheet" href="…/ui-standard/assets/theme-default/tokens.css">   (Fluent 2 tokens, light/dark/HC)
 *   <link rel="stylesheet" href="…/ui-standard/assets/css/base.css">               (this file)
 *   <link rel="stylesheet" href="…/ui-standard-components/assets/components.css">  (.ui-* components)
 *
 * It does what FluentProvider does for React (font, colours, canvas on tokens) plus a small reset, the keyboard focus
 * ring, selection, subtle scrollbars, reduced motion, and the layout/icon helpers of the shared class contract.
 * Every colour is a var(--token) from tokens.css, so light, dark and high contrast switch with <html data-theme>.
 * Selectors are wrapped in :where() so a single component class always wins without !important.
 * Items marked (recommendation) are UI Standard conventions, not values from Fluent source.
 *
 * Contents
 *   1. Reset                    box-sizing, margins, media, form controls, [hidden]
 *   2. Document & canvas        html/body on tokens: fontFamilyBase, body1 14/20, colorNeutralForeground1 on colorNeutralBackground2
 *   3. Text elements            headings on the type ramp, links, code, hr, small
 *   4. Focus ring               :focus-visible = 2px colorStrokeFocus2, flush outside (Fluent createFocusOutlineStyle)
 *   5. Selection                ::selection
 *   6. Scrollbars               thin, transparent track, colorNeutralStroke1 thumb
 *   7. Layout helpers           .ui-container  .ui-stack  .ui-cluster  .ui-grid
 *   8. Icons                    .ui-icon (inline SVG, currentColor) + filled/regular swap helpers + RTL mirroring
 *   9. Accessibility helpers    .ui-visually-hidden  .ui-skip-link
 *  10. Reduced motion           global guard (components re-enable essential loops, e.g. Spinner)
 *  11. Forced colors            Windows contrast themes: system colours for focus, selection, icons
 *
 * Sources: @fluentui/react-provider (FluentProvider root styles), @fluentui/react-tabster createFocusOutlineStyle,
 * @fluentui/react-motion reduced-motion handling, Fluent 2 layout page (breakpoints), react-toast AriaLive (visually hidden).
 */

/* ============================================================================ 1. Reset */
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

/* Margins are spacing decisions: use .ui-stack / .ui-cluster gaps or spacing tokens instead of browser defaults. */
:where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre) {
  margin: 0;
}

/* Lists given role="list" are layout lists: no bullets, no indent. Plain <ul>/<ol> keep their bullets. */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(img, picture, video, canvas, svg) {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

:where(img, video) {
  height: auto;
}

/* Native controls inherit the page font and colour (Fluent never shows the UA font). */
:where(button, input, select, textarea, optgroup) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(button, [role="button"], summary, label[for], select) {
  cursor: pointer;
}

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

:where(textarea) {
  resize: vertical;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

/* `hidden` must win over any component display value (menus, popovers, panels toggle with it). */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* ============================================================================ 2. Document & canvas */
/* The page sits on colorNeutralBackground2 so surfaces on colorNeutralBackground1 (cards, menus, dialogs, inputs)
 * read as "closer" in both modes: light #fafafa page / #ffffff surface, dark #1f1f1f page / #292929 surface.
 * (layout research §7.6 dark-mode elevation rule). Put a section on Background1 when it should read as one surface. */
:where(html) {
  background-color: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground1);
  scroll-padding-top: var(--ui-scroll-padding-top, 0px); /* set to your sticky header height (recommendation) */
}

:where(body) {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);     /* body1 14px */
  line-height: var(--lineHeightBase300); /* 20px */
  font-weight: var(--fontWeightRegular);
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground2);
  text-align: start;
}

/* ============================================================================ 3. Text elements */
/* Headings map to the Fluent type ramp (recommendation: h1 title2, h2 title3, h3 subtitle1, h4 subtitle2, h5/h6 body1Strong).
 * Prefer the explicit .type-* classes from tokens.css when the visual level differs from the outline level. */
:where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--fontWeightSemibold);
  color: var(--colorNeutralForeground1);
  text-wrap: balance;
}
:where(h1) { font-size: var(--fontSizeHero700); line-height: var(--lineHeightHero700); }  /* title2 28/36 */
:where(h2) { font-size: var(--fontSizeBase600); line-height: var(--lineHeightBase600); }  /* title3 24/32 */
:where(h3) { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); }  /* subtitle1 20/28 */
:where(h4) { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }  /* subtitle2 16/22 */
:where(h5, h6) { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); } /* body1Strong 14/20 */

:where(p) {
  text-wrap: pretty;
}

:where(strong, b) {
  font-weight: var(--fontWeightSemibold);
}

:where(small) {
  font-size: var(--fontSizeBase200);     /* caption1 12/16 */
  line-height: var(--lineHeightBase200);
}

/* Unclassed links still follow the theme (the UA blue/purple is unreadable in dark mode).
 * Inline links keep the underline: Fluent requires it next to body text. Use .ui-link for the full component. */
:where(a) {
  color: var(--colorBrandForegroundLink);
  text-decoration-thickness: var(--strokeWidthThin);
  text-underline-offset: 0.15em;
}
:where(a:hover) {
  color: var(--colorBrandForegroundLinkHover);
}
:where(a:active) {
  color: var(--colorBrandForegroundLinkPressed);
}

:where(code, kbd, samp, pre) {
  font-family: var(--fontFamilyMonospace);
  font-size: 1em;
}

:where(hr) {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2); /* Divider default line */
  color: inherit;
}

:where(abbr[title]) {
  text-decoration: underline dotted;
}

/* ============================================================================ 4. Focus ring */
/* Fluent shows focus only for keyboard users. Default ring (createFocusOutlineStyle): 2px solid colorStrokeFocus2
 * (light #000000 / dark #ffffff / HC #1aebff) drawn flush outside the element, following its radius.
 * Components override this where Fluent uses a different indicator (button inset ring, input underline bar,
 * double underline on links, inset ring on nav items and cards). Never remove it without a replacement. */
:where(:focus-visible) {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: 0;
}

:where(:focus:not(:focus-visible)) {
  outline: none;
}

/* Elements focused by script for screen-reader context (tabindex="-1" headings, dialogs) get no ring. */
:where([tabindex="-1"]:focus:not(:focus-visible)) {
  outline: none;
}

/* ============================================================================ 5. Selection */
/* Inverted neutral highlight, as on the Fluent text input (light: white on #292929, dark: #242424 on #ffffff). */
::selection {
  background-color: var(--colorNeutralBackgroundInverted);
  color: var(--colorNeutralForegroundInverted);
}

/* ============================================================================ 6. Scrollbars */
/* Subtle scrollbars: thin, transparent track, colorNeutralStroke1 thumb (light #d1d1d1 / dark #666666),
 * colorNeutralStroke1Hover on hover. Observed in Fluent-based product shells (recommendation); native scrollbars
 * still render as overlay scrollbars on macOS/iOS. */
:where(html) {
  scrollbar-color: var(--colorNeutralStroke1) transparent;
}
:where(*) {
  scrollbar-width: thin;
}

@supports not (scrollbar-color: auto) {
  /* Older Safari / WebKit only. Chrome and Firefox use scrollbar-color above. */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background-color: var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusMedium);
    border: var(--strokeWidthThick) solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--colorNeutralStroke1Hover); }
  ::-webkit-scrollbar-corner { background: transparent; }
}

/* ============================================================================ 7. Layout helpers */
/* .ui-container — centred content column with responsive side margins on the Fluent 2 size classes
 * (small 320–479, medium 480–639, large 640–1023, x-large 1024–1365, xx-large 1366–1919, xxx-large 1920+).
 * Margins 16 / 24 / 24 / 32 / 48 / 48px and the 1328px content cap are (recommendation), measured on Fluent-based
 * marketing sites (layout-spacing.md §7). App pages next to a nav pane use the Fabric margins instead (16 / 32 / 32 / 64):
 * set --ui-container-margin on the page or skip .ui-container there.
 * Override per page:  style="--ui-container-max: 960px"  (reading pages ~720px). */
.ui-container {
  --ui-container-margin: var(--spacingHorizontalL);  /* 16px */
  width: 100%;
  max-width: calc(var(--ui-container-max, 1328px) + 2 * var(--ui-container-margin));
  margin-inline: auto;
  padding-inline: var(--ui-container-margin);
}
@media (min-width: 480px) {
  .ui-container { --ui-container-margin: var(--spacingHorizontalXXL); }  /* 24px */
}
@media (min-width: 1024px) {
  .ui-container { --ui-container-margin: var(--spacingHorizontalXXXL); } /* 32px */
}
@media (min-width: 1366px) {
  .ui-container { --ui-container-margin: 48px; }
}

/* .ui-stack — vertical flow. Gap from --gap (default spacingVerticalM 12px: Windows "between content areas").
 * Common gaps: 4 (XS), 8 (S), 12 (M), 16 (L), 24 (XXL), 32 (XXXL).  e.g. style="--gap: var(--spacingVerticalXXL)" */
.ui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--spacingVerticalM));
  min-width: 0;
}

/* .ui-cluster — horizontal group that wraps (button rows, tags, toolbars of chips). Default gap 8px
 * (Windows: 8 between buttons). Set --align / --justify for alignment. */
.ui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: var(--align, center);
  justify-content: var(--justify, flex-start);
  gap: var(--gap, var(--spacingHorizontalS));
  min-width: 0;
}

/* .ui-grid — responsive auto-fit grid. Columns are at least --min wide (default 240px) and never wider than the
 * container, so it collapses to one column on phones without media queries. Gap default 16px. */
.ui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 240px), 100%), 1fr));
  gap: var(--gap, var(--spacingHorizontalL));
  align-items: var(--align, stretch);
}

/* Children of flex/grid helpers may shrink below their content width (prevents horizontal page scroll). */
:where(.ui-stack, .ui-cluster, .ui-grid) > * {
  min-width: 0;
}

/* ============================================================================ 8. Icons */
/* .ui-icon — inline Fluent System Icon SVG (sprite <use> or inline path). Size comes from its width/height
 * attributes (16/20/24/…); without attributes it is 1em. Colour = currentColor, so it follows text/state tokens. */
.ui-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: currentColor;
  color: inherit;
  overflow: visible;
}
.ui-icon:not([width]) {
  width: 1em;
  height: 1em;
}
/* Icons are decorative by default; give meaningful ones role="img" + aria-label instead of aria-hidden. */

/* Arrows and chevrons that point "forward" or "back" mirror in right-to-left layouts (Fluent React icons do this
 * through FluentProvider; plain SVG does not). Add the modifier to those icons only, never to logos or symbols. */
[dir="rtl"] .ui-icon--directional {
  transform: scaleX(-1);
}

/* Bundled icons (Fluent bundleIcon): place a regular and a filled SVG side by side; the filled one shows on
 * hover/selected in components that swap (subtle/transparent buttons, tabs, nav items, menu items). */
.ui-icon--filled {
  display: none;
}

/* ============================================================================ 9. Accessibility helpers */
/* Visually hidden but announced (same rules Fluent uses for its live regions). */
.ui-visually-hidden {
  /* Pinned to the containing block's top-left: left at its static position inside a scrolling panel, it can
     escape the scroller and stretch the page (seen in the chat feed). */
  position: absolute !important;
  inset-block-start: 0 !important;
  inset-inline-start: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0px, 0px, 0px, 0px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link: first focusable element in <body>, <a class="ui-skip-link" href="#main">Skip to content</a>.
 * Off-screen until it receives keyboard focus, then drawn above sticky headers (WCAG 2.4.1 Bypass Blocks). */
.ui-skip-link:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0px, 0px, 0px, 0px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.ui-skip-link {
  position: fixed;
  z-index: var(--zIndexOverlay, 1000);
  inset-block-start: var(--spacingVerticalM);
  inset-inline-start: var(--spacingHorizontalM);
  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
  border-radius: var(--borderRadiusMedium);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorBrandForegroundLink);
  box-shadow: var(--shadow16);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  font-weight: var(--fontWeightSemibold);
}

/* ============================================================================ 10. Reduced motion */
/* Fluent shortens CSS transitions to 0.01ms and motion atoms to 1ms when the user asks for less motion.
 * This guard covers page-level animation too. Essential progress loops (Spinner, indeterminate ProgressBar)
 * are re-enabled in components.css with their calmer reduced-motion variants, as Fluent does. */
@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;
  }
}

/* ============================================================================ 11. Forced colors */
/* Windows contrast themes replace token colours with system colours. Keep the focus ring and icons visible. */
@media (forced-colors: active) {
  :where(:focus-visible) {
    outline-color: Highlight;
  }
  ::selection {
    background-color: Highlight;
    color: HighlightText;
  }
  .ui-icon {
    fill: currentColor;
  }
  :where(a) {
    color: LinkText;
  }
}