/* Generated by theme_mono.py. Restates the colour rules of the app style
   document `style` in this theme's tokens; same selectors, later in the cascade. */

/* The ground under everything, so nothing between first paint and the app's own
   body rule shows the browser's white. */
html, body {
	background: #F4F4F2;
	color: #191918;
}

/* AI Studio's board: the custom properties BlueprintEditor sets from literals and
   publishes no variable for. The doubled class outranks the component's own rule.
   The root is cleared here so the board sits on the canvas: it paints the same
   --_bpSurface as its cards, and BlueprintEditor never applies a page's own style
   leaves to its root (it reads stylePropertiesWithPseudoStates.comp without
   resolving the pseudo-states first, unlike every other component). */
.comp.compBlueprintEditor.compBlueprintEditor {
	background: transparent;
	--_bpInkBody: #62625E;
	--_bpInk30: #A2A29C;
	--_bpInk10: #ECEBE6;
	--_bpSurfaceVeil: #FFFFFF99;
	--_bpWarnWash: #A35F0014;
	--_bpWarnInk: #A35F00;
}

/* ButtonBar track and labels: the guide's `.seg`, for what ButtonBar publishes no
   variable for. Doubled classes outrank the component's own rules. A ButtonBar's
   buttons are <button>s, which do not inherit the page font (they rendered Arial). */
.comp.compButtonBar.compButtonBar {
	background: #F2F1EC;
	padding: 3px;
	height: 32px;
	box-sizing: border-box;
	align-items: center;
	width: fit-content;
	flex-shrink: 0;
}

.comp.compButtonBar.compButtonBar ._button {
	flex: none;
	padding: 0px 12px;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	white-space: nowrap;
}

.comp.compButtonBar.compButtonBar ._button._selected {
	box-shadow: 0 1px 2px rgba(25,25,24,.1);
}

.comp.compButtonBar.compButtonBar ._button:hover:not(._selected) {
	background: transparent;
}

/* Tabs `_highlight` is the same segmented control: the track is padded and pill-shaped,
   and the highlighter (inline `height: 100%` of the padded track) is trimmed to the
   option inside it. Horizontal only: a vertical rail sizes its highlighter to the row. */

.comp.compTabs._highlight._horizontal > .tabsContainer {
	padding: 3px;
	border-radius: 999px;
	width: fit-content;
	box-sizing: border-box;
	flex-shrink: 0;
}

.comp.compTabs._highlight._horizontal > .tabsContainer > .tabHighlighter {
	height: calc(100% - 6px) !important;
}

.comp.compTabs._highlight > .tabsContainer > .tabDiv {
	white-space: nowrap;
}

.comp.compTabs._highlight._vertical > .tabsContainer {
	padding: 3px;
	border-radius: 10px;
	box-sizing: border-box;
}

/* Toasts: a hairline ring in each kind's hue. The Messages theme has one shadow
   for every kind, so the per-kind ring can only live here. */
.comp.compMessages ._message.ERROR {
	box-shadow: 0 0 0 1px #C0362C, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compMessages ._message.SUCCESS {
	box-shadow: 0 0 0 1px #1E7A46, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compMessages ._message.WARNING {
	box-shadow: 0 0 0 1px #A35F00, 0 6px 16px rgba(25,25,24,.08);
}

.comp.compMessages ._message.INFORMATION {
	box-shadow: 0 0 0 1px #2E6DB4, 0 6px 16px rgba(25,25,24,.08);
}

/* Pager states the Table publishes no variable for: hover, the arrows' label, the
   ellipsis and the rows-per-page select. The doubled classes outrank the Table's
   per-design rules, which carry five. */
.comp.compTable ._tablePagination ._clickable {
	background-color: transparent;
}

.comp.comp.compTable.compTable ._tablePagination ._clickable:hover {
	background-color: #1919180F;
	color: #191918;
}

.comp.compTable ._tablePagination ._leftArrow,
.comp.compTable ._tablePagination ._rightArrow,
.comp.compTable ._tablePagination ._noclick {
	color: #62625E;
	gap: 6px;
	padding: 0px 10px;
}

.comp.compTable ._tablePagination ._leftArrow i,
.comp.compTable ._tablePagination ._rightArrow i {
	font-size: 11px;
}

.comp.compTable ._tablePagination select._tableSize {
	height: 32px;
	padding: 0px 8px;
	border: 1px solid #D6D5CF;
	border-radius: 8px;
	background: #FFFFFF;
	color: #191918;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* A sticky column (`position: sticky` inline on its cells) needs an opaque cell, or the
   columns scrolling under it show through. The row hover is a translucent tint on every
   cell, so a sticky cell takes the same tint flattened onto the panel instead. */
.comp.comp.compTable.compTable ._row._dataRow > .comp.compTableColumn.compTableColumn[style*="sticky"] {
	background: #FFFFFF;
}

.comp.comp.compTable.compTable ._row._dataRow:hover > .comp.compTableColumn.compTableColumn[style*="sticky"],
.comp.comp.compTable.compTable ._row._dataRow._selected > .comp.compTableColumn.compTableColumn[style*="sticky"] {
	background: #E8E8E7;
}

/* Fields position their label and support text absolutely, outside their own box,
   so a stack of fields only gets room for them from its gap. A field that shows
   support text reserves its height below itself, so the next label never lands on
   it. */
.comp.compTextBox:has(._supportText:not(:empty)),
.comp.compTextArea:has(._supportText:not(:empty)),
.comp.compDropdown:has(._supportText:not(:empty)),
.comp.compPhoneNumber:has(._supportText:not(:empty)),
.comp.compTextBox:has(._validationMessages),
.comp.compTextArea:has(._validationMessages),
.comp.compDropdown:has(._validationMessages),
.comp.compPhoneNumber:has(._validationMessages) {
	margin-bottom: 24px;
}

/* FileSelector writes its label, placeholder and upload-button edge as literals
   (FileSelectorStyle.tsx: #333333CC, #0000004D, #DFE8F066), dark-on-dark in dark. */
body .comp.compFileSelector ._label {
	color: #62625E;
}
body .comp.compFileSelector ._fileUploadPlaceholderText {
	color: #62625E;
}
body .comp.compFileSelector ._progressBarUploadButton {
	border-color: #D6D5CF;
	color: #191918;
}

/* The upload field shares `progressBarBackgroundColor` / `progressBarBorderRadius` with the
   ProgressBar meter, so the meter's chip track and pill ends painted it (QA-0028). Restate it
   as a field: panel fill, edge border, 10px radius, no shadow, text at the 14px field inset. */
body .comp.compFileSelector ._progressBarfileUpload {
	background-color: #FFFFFF;
	border: 1px solid #D6D5CF;
	border-radius: 10px;
	box-shadow: none;
}
body .comp.compFileSelector ._InnerProgressBarContainer {
	padding: 0px 5px 0px 14px;
}

/* The image picker (commonComponents/FileBrowser) styles itself from a plain CSS
   file with literal colours and publishes no variables. `body` lifts each rule one
   step above the file's own. */
body ._fileBrowser ._searchInputContainer {
	border: 1px solid transparent;
	background-color: #F2F1EC;
	color: #62625E;
	border-radius: 999px;
	height: 40px;
	padding: 0px 14px;
}
body ._fileBrowser ._searchInputContainer:focus-within {
	background-color: #FFFFFF;
	border-color: #74746F;
	box-shadow: 0 0 0 3px #1919181F;
}
body ._fileBrowser ._searchInputContainer input {
	background-color: transparent;
	color: #191918;
}
body ._fileBrowser button,
body ._fileBrowser ._upload {
	height: 32px;
	background-color: #FFFFFF;
	border: 1px solid #D6D5CF;
	color: #191918;
	border-radius: 8px;
	box-shadow: none;
	font: 500 13px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	padding: 0px 12px;
}
body ._fileBrowser button:hover,
body ._fileBrowser ._upload:hover {
	background-color: #1919180F;
}
body ._fileBrowser button:disabled {
	background-color: transparent;
	border-color: #ECEBE6;
	color: #8A8A84;
}
body ._fileBrowser ._files ._eachFile::after {
	border-color: #ECEBE6;
	border-radius: 10px;
}
body ._fileBrowser ._files ._eachFile._selected::before,
body ._fileBrowser ._files ._eachFile._selectable:hover::before {
	border-color: #191918;
	border-radius: 12px;
}
body ._fileBrowser ._files ._eachFile._selectable:hover,
body ._fileBrowser ._files ._eachFile._directory:hover {
	background-color: #1919180F;
}
body ._fileBrowser ._files ._eachFile ._imageLabel {
	color: #191918;
	background-color: #F2F1EC;
}
body ._fileBrowser ._confirmationBoxContent,
body ._fileBrowser ._popupBackground ._popupContainer,
body ._fileBrowser ._iroContainer,
body ._fileBrowser ._fullScreenButton,
body ._fileBrowser ._imageZOOM {
	background: #FFFFFF;
	color: #191918;
}
body ._fileBrowser ._confirmationBoxContent {
	border-radius: 14px;
	padding: 16px;
}
body ._fileBrowser ._controlLabel,
body ._fileBrowser ._controlInput span {
	color: #191918;
}
body ._fileBrowser ._controlInput {
	background-color: #F2F1EC;
}
body ._fileBrowser ._controlHeader {
	border-bottom-color: #191918;
}

/* The top bar's hairline appears once the page scrolls, as in the guide. The
   shell's page slot is the scroller (`#shellContentFrame > .comp.compPage`) and the
   bar is its sibling, so the timeline is hoisted to the frame with timeline-scope.
   Without scroll-driven animation support the bar simply keeps no rule. */
@keyframes mlxShellBarEdge {
	from { border-bottom-color: transparent; }
	to { border-bottom-color: #ECEBE6; }
}

@supports (animation-timeline: scroll()) {
	#shellContentFrame { timeline-scope: --mlxShellScroll; }
	#shellContentFrame > .comp.compPage { scroll-timeline: --mlxShellScroll block; }
	#shellContentFrame > [id="1kgkhjBQWZr8ZqydKOz7Iw"] {
		animation: mlxShellBarEdge linear both;
		animation-timeline: --mlxShellScroll;
		animation-range: 0px 8px;
	}
}

/* The page scrolls under the glass bar, so the slot runs to the top of the frame and
   its scrollbar would start behind the bar. The track begins below it instead. The
   app styles the scrollbar with ::-webkit-scrollbar (scrollbar-width stays auto), so
   Chromium and Safari honour the track margin; elsewhere it is ignored harmlessly. */
#shellContentFrame > .comp.compPage::-webkit-scrollbar-track {
	margin-top: 56px;
}

#shellCrumbWrap li.listItem {
	color: #62625E;
}

#shellCrumbWrap li.listItem + li.listItem::before {
	color: #8A8A84;
}

#shellCrumbWrap li.listItem:last-child {
	color: #191918;
}

/* The theme switcher's chosen option: ink label and icon on the raised pill. The
   component has one label colour variable for every option. */
.comp.compThemeSwitcher._segmented ._option._active ._label,
.comp.compThemeSwitcher._segmented ._option._active ._themeIcon,
.comp.compThemeSwitcher._segmented ._option:hover ._label {
	color: #191918;
}

/* Icons have no colour variable either, and the collapsed rail's trigger is a bare
   <button>, whose UA colour is black: invisible on the dark rail. Muted at rest,
   ink on hover and on the chosen option, in the rail and in the popover panel. */
.comp.compThemeSwitcher ._trigger,
.comp.compThemeSwitcher ._themeIcon,
._themeSwitcherPanel ._themeIcon,
._themeSwitcherPanel ._label {
	color: #62625E;
}

.comp.compThemeSwitcher ._trigger:hover {
	background: #1919180F;
	color: #191918;
}

.comp.compThemeSwitcher._segmented ._option._active ._themeIcon,
._themeSwitcherPanel ._option._active ._themeIcon,
._themeSwitcherPanel ._option._active ._label,
._themeSwitcherPanel ._option:hover ._themeIcon,
._themeSwitcherPanel ._option:hover ._label {
	color: #191918;
}