/* The OSCAL Ops look for the library: Fluent 2 design tokens (vendor/fluent/tokens.css,
   generated from the @fluentui/tokens release OSCAL Ops uses) applied to plain HTML. Light
   and dark follow the reader's system unless they pick one with the theme switch
   (theme.js). No inline styles anywhere: the site must render under
   Content-Security-Policy: default-src 'self'. */

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

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

body {
	margin: 0;
	background: var(--colorNeutralBackground2);
	color: var(--colorNeutralForeground1);
	font-family: var(--fontFamilyBase);
	font-size: var(--fontSizeBase300);
	font-weight: var(--fontWeightRegular);
	line-height: var(--lineHeightBase300);
}

/* Content width, with full-width header and footer bars around it. */
.container {
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--spacingHorizontalXXL);
}
body > header.container,
body > footer.container {
	max-width: none;
	padding-inline: max(var(--spacingHorizontalXXL), calc((100% - 76rem) / 2 + var(--spacingHorizontalXXL)));
	background: var(--colorNeutralBackground1);
}
body > header.container {
	border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
	box-shadow: var(--shadow2);
}
body > footer.container {
	border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
	padding-block: var(--spacingVerticalXL);
	color: var(--colorNeutralForeground3);
}
main.container { padding-block: var(--spacingVerticalL) var(--spacingVerticalXXXL); }

/* --- Typography: Fluent's type ramp ------------------------------------------------------ */
h1, h2, h3, h4 { margin: 0; font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground1); }
h1 { font-size: var(--fontSizeHero700); line-height: var(--lineHeightHero700); }
h2 { font-size: var(--fontSizeBase500); line-height: var(--lineHeightBase500); margin-block: var(--spacingVerticalXXL) var(--spacingVerticalM); }
h3 { font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); margin-block: var(--spacingVerticalXL) var(--spacingVerticalS); }
h4 { font-size: var(--fontSizeBase300); line-height: var(--lineHeightBase300); margin-block: var(--spacingVerticalL) var(--spacingVerticalXS); }

hgroup { margin-block: var(--spacingVerticalL) var(--spacingVerticalXL); }
hgroup p { margin: var(--spacingVerticalXS) 0 0; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }

p { margin: 0 0 var(--spacingVerticalM); }
ul { margin: 0 0 var(--spacingVerticalM); padding-left: var(--spacingHorizontalXXL); }
li + li { margin-top: var(--spacingVerticalXXS); }
small { font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); }
strong { font-weight: var(--fontWeightSemibold); }

a { color: var(--colorBrandForegroundLink); text-decoration: none; }
a:hover { color: var(--colorBrandForegroundLinkHover); text-decoration: underline; }
:focus-visible {
	outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
	outline-offset: 2px;
	border-radius: var(--borderRadiusSmall);
}

code {
	font-family: var(--fontFamilyMonospace);
	font-size: var(--fontSizeBase200);
	background: var(--colorNeutralBackground3);
	border-radius: var(--borderRadiusSmall);
	padding: 0 var(--spacingHorizontalXS);
}
mark {
	background: var(--colorStatusWarningBackground1);
	color: var(--colorStatusWarningForeground3);
	border-radius: var(--borderRadiusSmall);
	padding: 0 var(--spacingHorizontalXS);
	font-weight: var(--fontWeightSemibold);
}

/* --- Navigation ---------------------------------------------------------------------------- */
nav ul { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
nav li + li { margin-top: 0; }

body > header nav { display: flex; flex-wrap: wrap; align-items: center; min-height: 48px; column-gap: var(--spacingHorizontalL); row-gap: var(--spacingVerticalXS); padding-block: var(--spacingVerticalXS); }
body > header nav ul { gap: var(--spacingHorizontalXS); }
body > header nav > ul:first-child { margin-right: auto; }
body > header nav a {
	display: inline-block;
	padding: var(--spacingVerticalXS) var(--spacingHorizontalS);
	border-radius: var(--borderRadiusMedium);
	color: var(--colorNeutralForeground2);
	font-weight: var(--fontWeightSemibold);
}
body > header nav a:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground2Hover); text-decoration: none; }
.brand { color: var(--colorNeutralForeground1); font-size: var(--fontSizeBase400); line-height: var(--lineHeightBase400); }

/* Theme switch: a segmented control made of native radios, so arrow keys and screen readers
   work without extra script. Hidden until theme.js can make it work. */
.theme-switch { display: inline-flex; margin: 0; padding: 2px; border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); border-radius: var(--borderRadiusMedium); background: var(--colorNeutralBackground1); }
.theme-switch[hidden] { display: none; }
.theme-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.theme-switch label {
	margin: 0;
	padding: 2px var(--spacingHorizontalS);
	border-radius: var(--borderRadiusSmall);
	color: var(--colorNeutralForeground2);
	font-size: var(--fontSizeBase200);
	line-height: var(--lineHeightBase200);
	font-weight: var(--fontWeightRegular);
	cursor: pointer;
	user-select: none;
}
.theme-switch label:hover { background: var(--colorSubtleBackgroundHover); color: var(--colorNeutralForeground2Hover); }
.theme-switch input:checked + label { background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); font-weight: var(--fontWeightSemibold); }
.theme-switch input:focus-visible + label { outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2); outline-offset: 1px; }

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

nav[aria-label="breadcrumb"] ul { margin-top: var(--spacingVerticalL); font-size: var(--fontSizeBase200); line-height: var(--lineHeightBase200); color: var(--colorNeutralForeground3); }
nav[aria-label="breadcrumb"] li + li::before { content: "›"; padding-inline: var(--spacingHorizontalS); color: var(--colorNeutralForeground4); }

/* --- Cards --------------------------------------------------------------------------------- */
article {
	background: var(--colorNeutralBackground1);
	border-radius: var(--borderRadiusLarge);
	box-shadow: var(--shadow4);
	padding: var(--spacingVerticalL) var(--spacingHorizontalL);
	margin: 0 0 var(--spacingVerticalL);
}
article > header { margin-bottom: var(--spacingVerticalS); }
article > footer {
	margin-top: var(--spacingVerticalM);
	padding-top: var(--spacingVerticalS);
	border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
	color: var(--colorNeutralForeground3);
}
article > :last-child { margin-bottom: 0; }

/* A warning message bar. */
.notice {
	background: var(--colorStatusWarningBackground1);
	border: var(--strokeWidthThin) solid var(--colorStatusWarningBorder1);
	box-shadow: none;
	border-radius: var(--borderRadiusMedium);
	padding: var(--spacingVerticalM) var(--spacingHorizontalL);
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--spacingHorizontalL); margin-block: var(--spacingVerticalXL); }
.grid article { margin: 0; text-align: center; }
.grid article h3 { margin: 0; font-size: var(--fontSizeHero800); line-height: var(--lineHeightHero800); color: var(--colorBrandForeground1); }
.grid article p { margin: 0; color: var(--colorNeutralForeground3); }

/* --- Tables: a data grid on a card ---------------------------------------------------------- */
.overflow-auto {
	overflow-x: auto;
	margin: 0 0 var(--spacingVerticalL);
	background: var(--colorNeutralBackground1);
	border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
	border-radius: var(--borderRadiusMedium);
}
table { width: 100%; border-collapse: collapse; }
th, td {
	padding: var(--spacingVerticalS) var(--spacingHorizontalM);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
thead th { font-weight: var(--fontWeightSemibold); color: var(--colorNeutralForeground2); white-space: nowrap; }
tbody th[scope="row"] { font-weight: var(--fontWeightSemibold); white-space: nowrap; width: 1%; }
tbody tr:last-child > * { border-bottom: 0; }
tbody tr:hover { background: var(--colorSubtleBackgroundHover); }
td > small { color: var(--colorNeutralForeground3); }
/* Long URLs, slugs and paths must not push a table wider than a phone screen. */
td a, td code { overflow-wrap: anywhere; }

/* --- Disclosure: an accordion -------------------------------------------------------------- */
details { border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2); padding-block: var(--spacingVerticalXS); }
details > summary {
	cursor: pointer;
	padding-block: var(--spacingVerticalS);
	font-weight: var(--fontWeightSemibold);
	border-radius: var(--borderRadiusSmall);
}
details > summary:hover { color: var(--colorNeutralForeground2Hover); }
details[open] > summary { margin-bottom: var(--spacingVerticalS); }

/* --- Search -------------------------------------------------------------------------------- */
label { display: block; margin-bottom: var(--spacingVerticalXS); font-weight: var(--fontWeightSemibold); }
input[type="search"] {
	width: 100%;
	min-height: 40px;
	padding: 0 var(--spacingHorizontalM);
	font: inherit;
	font-size: var(--fontSizeBase400);
	color: var(--colorNeutralForeground1);
	background: var(--colorNeutralBackground1);
	border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
	border-bottom-color: var(--colorNeutralStrokeAccessible);
	border-radius: var(--borderRadiusMedium);
}
input[type="search"]:focus { outline: none; border-bottom: var(--strokeWidthThick) solid var(--colorCompoundBrandStroke); }
input[type="search"]::placeholder { color: var(--colorNeutralForeground4); }
input[type="search"]:disabled {
	background: var(--colorNeutralBackgroundDisabled);
	color: var(--colorNeutralForegroundDisabled);
	border-color: var(--colorNeutralStrokeDisabled);
	cursor: not-allowed;
}
.search { margin-bottom: var(--spacingVerticalM); }
.search small { display: block; margin-top: var(--spacingVerticalXS); color: var(--colorNeutralForeground3); }

.results { padding-left: 0; list-style: none; }
.results:empty { display: none; }
.results li {
	margin: 0;
	padding: var(--spacingVerticalS) var(--spacingHorizontalM);
	background: var(--colorNeutralBackground1);
	border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
}
.results li:first-child { border-top-left-radius: var(--borderRadiusMedium); border-top-right-radius: var(--borderRadiusMedium); }
.results li:last-child { border-bottom: 0; border-bottom-left-radius: var(--borderRadiusMedium); border-bottom-right-radius: var(--borderRadiusMedium); }
.results a { font-weight: var(--fontWeightSemibold); }
.results small { display: block; color: var(--colorNeutralForeground3); }

/* --- Library-specific ------------------------------------------------------------------------ */
/* Tint badges, as Fluent's Badge. */
.badge {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 0 var(--spacingHorizontalS);
	border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
	border-radius: var(--borderRadiusCircular);
	background: var(--colorNeutralBackground4);
	color: var(--colorNeutralForeground3);
	font-size: var(--fontSizeBase200);
	line-height: var(--lineHeightBase200);
	font-weight: var(--fontWeightSemibold);
	white-space: nowrap;
	vertical-align: middle;
}
.badge.good { background: var(--colorPaletteGreenBackground1); color: var(--colorPaletteGreenForeground1); border-color: var(--colorPaletteGreenBorder1); }
.badge.warn { background: var(--colorPaletteYellowBackground1); color: var(--colorPaletteYellowForeground2); border-color: var(--colorPaletteYellowBorder1); }
.badge.bad { background: var(--colorPaletteRedBackground1); color: var(--colorPaletteRedForeground1); border-color: var(--colorPaletteRedBorder1); }
.badge.info { background: var(--colorBrandBackground2); color: var(--colorBrandForeground2); border-color: var(--colorBrandStroke2); }

.nowrap { white-space: nowrap; }

code.hash { font-size: var(--fontSizeBase100); word-break: break-all; color: var(--colorNeutralForeground3); background: none; padding: 0; }

.statement .depth-1 { margin-left: var(--spacingHorizontalXXL); }
.statement .depth-2 { margin-left: calc(2 * var(--spacingHorizontalXXL)); }
.statement .depth-3 { margin-left: calc(3 * var(--spacingHorizontalXXL)); }

.files { padding-left: 0; list-style: none; }
.files li { margin-bottom: var(--spacingVerticalS); }