/* KeyBind Server stylesheet version 0.1.108
 * Shared by all server pages. Edit the settings below to customise appearance.
 * All lengths are relative. Options card widths have their own section below.
 */

/* BASIC SIZE AND TYPOGRAPHY
 * --page-scale: overall scale; 100% uses the browser's default text size.
 * The Options page cog saves an ini percentage which overrides this default
 * on Options only. Reports continue to use the value set here.
 * Changing it scales rem lengths: text, controls, spacing and card sizes.
 * --report-max-width: maximum report content width.
 * --options-max-width: none uses the available window width for Options.
 * --ui-font: body and control font size, line height and font family.
 * The remaining settings control individual text sizes, fonts and weights.
 */
:root {
	--page-scale:100%;
	--page-scale-toggle-size:2rem;
	--page-scale-layer:2147483647;
	--report-max-width:70rem;
	--options-max-width:none;
	--ui-font:1rem/1.5 system-ui,sans-serif;
	--font-size-title:2.3rem;
	--title-letter-spacing:-.04em;
	--font-size-subheading:1.15rem;
	--font-size-small:0.75rem;
	--metadata-font-family:ui-monospace,Consolas,"Courier New",monospace;
	--font-size-detail:.9rem;
	--font-size-compact:.85rem;
	--font-size-caption:0.8rem;
	--font-weight-demi-bold:600;
	--font-size-normal:1rem;
	--font-size-summary:1.6rem;
	--font-weight-normal:400;
	--sort-direction-font-size:.8em;
	--font-size-mobile-title:1.9rem;
	--font-size-card-title:1.3rem;
	--task-result-font:0.75rem Consolas,"Courier New",monospace;
	--report-kind-font:1.45rem "Segoe UI Symbol","Segoe UI Emoji",sans-serif;
	--tooltip-font:normal .8125rem/1.4 sans-serif;
	--history-button-font-size:.85em;
	--font-size-dialog-title:1.2rem;
	--card-width-toggle-line-height:1rem;
	--font-size-option-status:.875rem;
	--option-status-line-height:1.25;
	--font-weight-bold:700;
	--font-size-option-substatus:.6rem;
	--option-substatus-line-height:1.1;
	--code-font-family:Consolas,"Courier New",monospace;
	--command-font-family:Consolas,monospace;
	--source-font:.875rem Consolas,monospace;
	--font-size-back-to-top:4rem;
	--font-weight-extra-bold:900;
}

/* COLOUR SCHEME AND DECORATION
 * For a different scheme, copy this :root block after this one and edit its
 * values. The later block overrides these defaults on every server page.
 * Keep the variable names; structural rules do not need to be copied.
 * --scheme sets browser-drawn controls and scrollbars to light or dark.
 * Edit text, backgrounds, gradients, corners, shadows and fading below.
 * Zero/one opacity used to show or hide controls stays in structural rules.
 */
:root {
	color-scheme:var(--scheme);
	--scheme:light;
	--page-scale-pill-radius:2rem;
	--page-scale-panel-opacity:.85;
	--border-width:.0625rem;
	--focus-width:.125rem;
	--spinner-border-width:.1875rem;
	--delete-animation:report-delete-spin 1.6s linear infinite;
	--saving-animation:report-delete-spin .8s linear infinite;
	--tooltip-transition:visibility 0s 1000ms;
	--back-to-top-transition:opacity .2s ease;
	--ink:#744619;
	--muted:#a37005;
	--line:#dfa96a;
	--accent:#d27e2a;
	--wash:#fbb62624;
	--header:#956704;
	--page-gradient:linear-gradient(to bottom,#fbb626 0,#fccc62 3.1875rem,#fee095 6.6875rem,#feecb5 11rem,#fff7d1 18.8125rem);
	--brand-gradient:linear-gradient(to bottom, #ffff00, #ffb000 45%, #ff3000);
	--back-to-top-gradient:linear-gradient(to bottom,#fee095,#fbb626);
	--inactive-background:color-mix(in srgb,var(--wash) 70%,rgb(50% 50% 50% / 14%));
	--dialog-backdrop:rgba(0,0,0,.55);
	--inactive-text:rgb(50% 50% 50%);
	--history-shadow:0 0.25rem 0.5rem #0003;
	--dialog-shadow:0 0 0 .0625rem #0006,0 .75rem 2.5rem #0009;
	--deleting-blur:blur(0.0625rem);
	--page-background:#fff7d1;
	--button-background:#fffdf7;
	--dialog-background:#fffdf7;
	--input-background:white;
	--card-background:#ffffff75;
	--usage-bar-background:#f8a32530;
	--paused-text:#a04413;
	--disabled-text:#888;
	--server-text:#777;
	--deleting-background:#fff7d1d9;
	--brand-text:#ff7000;
	--tooltip-border:#a37a0d;
	--tooltip-background:#302614;
	--error-text:#a00;
	--source-text:#202020;
	--source-tag-text:#8090a0;
	--selected-text:#fff7d1;
	--tooltip-text:#fff7d1;
	--history-background:#fff;
	--monitoring-radius:0.25rem;
	--card-radius:0.625rem;
	--control-radius:0.3rem;
	--disabled-control-opacity:.6;
	--disabled-card-opacity:0.55;
	--edit-delete-opacity:.75;
	--tooltip-radius:.3rem;
	--dialog-radius:.5rem;
	--drag-and-resize-opacity:.5;
	--option-result-opacity:.85;
	--app-list-radius:.3125rem;
	--back-to-top-opacity:.45;
}

/* OPTIONS CARD SIZING
 * Saved slider offsets override the CSS width adjustments below.
 */
/* Default widths preserve natural sizing; group 1 carries a signed
   tweak and groups 3, 4, 8 and 10 carry calc-size reductions.
   Empty adjustment = zero. Sliders permit +/-50% of the
   populated default card width; saved offsets override CSS adjustments. */
#cards {--options-card-padding:1.25rem}
#cards > [data-group="1"] {--options-card-default-width:fit-content;--options-card-width:-7.7rem} /* General */
#cards > [data-group="2"] {--options-card-default-width:fit-content;--options-card-width: } /* Mouse & Timing */
#cards > [data-group="3"] {--options-card-default-width:calc-size(fit-content, size - 8rem);--options-card-width: } /* Runtime & Speech */
#cards > [data-group="4"] {--options-card-default-width:calc-size(fit-content, size - 4rem);--options-card-width: } /* Paths & Dates */
#cards > [data-group="5"] {--options-card-default-width:fit-content;--options-card-width: } /* Import & Export */
#cards > [data-group="6"] {--options-card-default-width:fit-content;--options-card-width: } /* Recorder */
#cards > [data-group="7"] {--options-card-default-width:fit-content;--options-card-width: } /* Colors */
#cards > [data-group="8"] {--options-card-default-width:calc-size(fit-content, size - 7rem);--options-card-width: } /* Web */
#cards > [data-group="9"] {--options-card-default-width:fit-content;--options-card-width: } /* Mail settings */
#cards > [data-group="10"] {--options-card-default-width:calc-size(fit-content, size - 3.5rem);--options-card-width: } /* Sounds & Alerts */
#cards > [data-group="11"] {--options-card-default-width:fit-content;--options-card-width: } /* Server */
#cards > [data-group="12"] {--options-card-default-width:fit-content;--options-card-width: } /* HIIT */



* {
	box-sizing:border-box}

html {
	font-size:var(--page-scale);
	scrollbar-gutter:stable}

body {
	margin:0;
	background-color:var(--page-background);
	background-image:var(--page-gradient);
	background-repeat:no-repeat;
	background-attachment:fixed;
	color:var(--ink);
	font:var(--ui-font)}

main {
	max-width:var(--report-max-width);
	margin:0 auto;
	padding:1rem 1.75rem 3.75rem}

header p {
	margin:0;
	color:var(--muted)}

h1 {
	font-size:var(--font-size-title);
	letter-spacing:var(--title-letter-spacing);
	margin:0.25rem 0 0.625rem}

.sentinel-report h1 {
	display:flex;
	align-items:center;
	flex-wrap:wrap}

.title-state {
	color:var(--accent);
	font-size:var(--font-size-subheading);
	font-weight:var(--font-weight-bold);
	letter-spacing:0;
	margin-left:1.25rem;
	margin-top: 0.5rem;
}

.title-state.off {
	color:var(--inactive-text)}

footer .report-help {
	flex:1 1 30rem;
	margin:0;
	font-size:var(--font-size-small)}

footer .report-help [data-task] {
	cursor:pointer}

footer .meta {
	margin:0;
	margin-left:auto;
	font-size:var(--font-size-small);
	font-family:var(--metadata-font-family);
	text-align:right}

.monitoring {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	margin-top:1.125rem;
	padding:0.75rem 1.25rem;
	border-radius:var(--monitoring-radius);
	background:var(--wash)}

.monitoring strong {
	display:block;
	color:var(--accent);
	font-size:var(--font-size-detail)}

.monitoring p {
	margin-top:0.1875rem;
	font-size:var(--font-size-compact)}

.monitoring.off {
	background:var(--inactive-background)}

.monitoring.off strong {
	color:var(--inactive-text)}

.controls {
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	margin:1.875rem 0 1.375rem;
	padding:1.25rem;
	background:var(--wash);
	border-radius:var(--card-radius)}

label {
	display:flex;
	flex-direction:column;
	gap:0.3125rem;
	font-size:var(--font-size-caption);
	color:var(--muted)}

input,select,button {
	font:var(--ui-font);
	padding:0.25rem 0.65rem;
	border:var(--border-width) solid var(--line);
	border-radius:var(--control-radius);
	background:var(--input-background);
	color:var(--ink)}

.report-select {
	position:relative}
.report-select {
	display:inline-flex;
	max-width:100%;
	min-width:0}

.scope-filter {
	max-width:18.75rem;
	min-width:0}

.scope-filter select {
	max-width:100%;
	min-width:0}

.period select,.report-select select {
	appearance:none;
	padding-right:2.125rem}

.report-select::after {
	content:"";
	position:absolute;
	right:0.875rem;
	width:0.375rem;
	height:0.375rem;
	border-right:var(--focus-width) solid var(--ink);
	border-bottom:var(--focus-width) solid var(--ink);
	transform:rotate(45deg);
	pointer-events:none;
	top:50%;
	margin-top:-0.25rem}

input[type=search] {
	width:16.25rem;
	max-width:100%}

button,input[type="button"],input[type="submit"],input[type="reset"] {
	border-color:var(--line);
	background:var(--button-background);
	color:var(--muted);
	font-weight:var(--font-weight-demi-bold);
	cursor:pointer}
button:disabled {cursor:default;opacity:var(--disabled-control-opacity)}

button:not(:disabled):not(.report-task-mode):not(.report-task-history-button):not(.columns button):hover {border-color:var(--accent);background:var(--accent);color:var(--selected-text);filter:none}
button:disabled:hover {filter:none;box-shadow:none}

button:focus-visible,input:focus-visible,select:focus-visible {
	outline:var(--focus-width) solid var(--accent);
	outline-offset:0.1875rem}

.summary {
	display:flex;
	gap:2.25rem;
	flex-wrap:wrap;
	padding:0 0 1.375rem}

.sentinel-report .summary {
	margin-top:0.75rem;
	padding:0.75rem 1.25rem;
	border-radius:var(--card-radius);
	background:var(--wash)}

.sentinel-report .controls {
	margin-top:0.5rem;
	padding-left:1.25rem}

.summary p {
	margin:0;
	color:var(--muted);
	font-size:var(--font-size-caption)}

.summary #range {
	font-size:var(--font-size-normal)}

.summary strong {
	display:block;
	color:var(--ink);
	font-size:var(--font-size-summary);
	font-weight:var(--font-weight-demi-bold);
	font-variant-numeric:tabular-nums}

.columns,.app-row {
	display:grid;
	grid-template-columns:minmax(9.375rem,1fr) 9.0625rem 6.875rem;
	gap:1.25rem;
	align-items:center}

.columns {
	border-block:var(--border-width) solid var(--line);
	padding:0.625rem 0.875rem}

.columns button {
	border:0;
	background:transparent;
	padding:0.125rem 0;
	text-align:left;
	color:var(--muted);
	font-size:var(--font-size-caption);
	font-weight:var(--font-weight-normal)}

.columns .usage-sort-direction {font-size:var(--sort-direction-font-size);padding-left:.3rem;color:var(--accent)}

.columns button:not(:first-child) {
	text-align:right}

.columns button[aria-pressed=true] {
	color:var(--accent);
	font-weight:var(--font-weight-demi-bold)}
.columns button:hover:not(:disabled) {background:transparent;border-color:transparent;color:var(--accent);filter:none}

ol {
	list-style:none;
	margin:0;
	padding:0}

.app-row {
	position:relative;
	padding:0.9375rem 0.875rem;
	border-bottom:var(--border-width) solid var(--line)}

.app-row>span {
	position:relative}

.usage-bar {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	appearance:none;
	border:0;
	border-radius:0;
	background:transparent;
	pointer-events:none}

.usage-bar::-webkit-meter-inner-element {
	display:block;
	width:100%;
	height:100%}

.usage-bar::-webkit-meter-bar {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none}

.usage-bar::-webkit-meter-optimum-value {
	background:var(--usage-bar-background)}

.usage-bar::-moz-meter-bar {
	background:var(--usage-bar-background)}

.name {
	font-weight:var(--font-weight-demi-bold);
	overflow-wrap:anywhere}

.path {
	display:block;
	color:var(--muted);
	font-size:var(--font-size-small);
	font-weight:var(--font-weight-normal);
	overflow-wrap:anywhere}

.duration,.share {
	text-align:right;
	font-variant-numeric:tabular-nums}

.share {
	color:var(--muted)}

.empty {
	padding:1.75rem 0.875rem;
	color:var(--muted)}

footer {
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	justify-content:space-between;
	gap:0.75rem 1.5rem;
	margin-top:1.75rem;
	font-size:var(--font-size-caption);
	color:var(--muted)}

[hidden] {
	display:none!important}

@media(max-width:37.5rem) {
	main {
		padding:1.5rem 0.875rem}

	.columns,.app-row {
		grid-template-columns:minmax(6.25rem,1fr) 5.9375rem 4.0625rem;
		gap:0.625rem}

	.duration,.share {
		font-size:var(--font-size-compact)}

	.controls {
		padding:0.875rem}

	.monitoring {
		padding-right:0.875rem}

	.summary {
		gap:1.5625rem}

	h1 {
		font-size:var(--font-size-mobile-title)}

}

@media print {
	.controls,.report-new {
		display:none}

	main {
		padding:0}

	.app-row {
		break-inside:avoid}

	body {
		font-size:var(--font-size-small)}

}

.view-switch {
	display:flex;
	align-self:flex-end;
	gap:0.5rem;
	margin-left:auto;
	font-size:var(--font-size-caption)}

.view-switch button {
	min-width:5.5rem}

/* Refresh and New report buttons share transparent backgrounds. */
#refresh,.report-new {
	margin-left:auto;
	background:transparent}
#refresh:hover:not(:disabled),.report-new:hover:not(:disabled) {border-color:var(--accent);background:var(--accent);color:var(--selected-text)}

/* Pinned right and centered on its filter row, level with the card toggles below. */
.report-new {align-self:center}

.view-switch button[aria-pressed=true] {
	background:var(--accent);
	color:var(--selected-text)}

@media(max-width:37.5rem) {
	.view-switch {
		width:100%}

	.view-switch button {
		flex:1}
}

/* Sentinel snapshots share report controls, summaries, colors and typography. */
.sentinel-card {
	margin:1.125rem 0;
	padding:1.25rem;
	border:var(--border-width) solid var(--line);
	border-radius:var(--card-radius);
	background:var(--card-background);
	overflow-wrap:anywhere}
.sentinel-card header {
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:0.5rem 1.25rem}
.sentinel-card h2 {margin:0;font-size:var(--font-size-card-title)}
.sentinel-card h3 {margin:1rem 0 0.25rem;font-size:var(--font-size-normal)}
.sentinel-card dl {display:grid;grid-template-columns:max-content 1fr;gap:0.375rem 1.25rem}
.sentinel-card dt {color:var(--muted)}
.sentinel-card dd {margin:0;white-space:pre-wrap}
.sentinel-card pre {white-space:pre-wrap;margin:0.375rem 0;font-size:var(--font-size-detail)}
.sentinel-card details {margin-top:0.875rem;padding-top:0.625rem;border-top:var(--border-width) solid var(--line)}
.sentinel-card summary {cursor:pointer;font-weight:var(--font-weight-demi-bold)}
.sentinel-card .paused {color:var(--paused-text)}
@media (max-width:37.5rem) {
	.sentinel-card dl {grid-template-columns:1fr;gap:0.125rem}
	.sentinel-card dd {margin-bottom:0.5rem}
}

/* Task testing and server controls. */
/* Retain report colors while fading disabled entries. */
.sentinel-card[data-state="Disabled"] {
	opacity:var(--disabled-card-opacity)}

.server-task {
	margin:0.4rem 0 0.8rem;
	min-width:0}
.server-task-row {
	display:flex;
	align-items:stretch;
	gap:0.35rem;
	min-width:0}
.server-task-input {
	flex:1;
	min-width:0;
	width:auto}
.server-task-run {
	flex:0 0 2.3rem}
.server-task-run:disabled {
	color:var(--disabled-text);
	cursor:default}
.server-task-result {
	display:block;
	margin-top:0.4rem;
	white-space:pre-wrap;
	overflow-wrap:anywhere;
	font:var(--task-result-font)}
.server-task-result:empty {
	display:none}
#server-playground {
	margin-top:2.5rem;
	padding-top:1rem;
	border-top:var(--border-width) solid var(--line)}
#server-playground h2 {
	margin:0 0 0.8rem;
	font-size:var(--font-size-subheading)}
#server {
	margin-top:1.25rem;
	color:var(--server-text);
	font-size:var(--font-size-small);
	text-align:left}
#server label {
	display:inline;
	font:inherit}
#server select {
	display:inline;
	width:auto;
	margin:0 0.3rem}

/* Saved definition state switches; disabled cards retain their orange fade. */
.report-state {display:inline-flex;align-items:center;gap:0.55rem;flex-wrap:wrap;margin-left:auto}
.report-state-actions {position:relative;display:inline-block}
.report-delete {visibility:hidden;opacity:var(--edit-delete-opacity)}
.report-delete:hover:not(:disabled) {opacity:1}
.sentinel-card:hover .report-delete {visibility:visible}
.sentinel-card header .report-edit + .report-delete {margin-left:-0.625rem}
.sentinel-card header > button:first-of-type {margin-left:3em}
.report-kind {font:var(--report-kind-font);line-height:1}
.report-state-result {font-size:var(--font-size-caption);max-width:28rem}
.report-state-result:empty {display:none}

/* Deletion progress covers the card without moving its header controls. */
.sentinel-card.report-deleting {position:relative;isolation:isolate}
.sentinel-card.report-deleting::before {
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	border-radius:inherit;
	background:var(--deleting-background);
	backdrop-filter:var(--deleting-blur)}
.report-deleting .report-state-result {
	position:absolute;
	inset:0;
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.75rem;
	max-width:none;
	padding:1rem;
	font-size:var(--font-size-normal);
	font-weight:var(--font-weight-demi-bold);
	text-align:center}
.report-deleting .report-state-result::before {
	content:"";
	width:2rem;
	height:2rem;
	flex-shrink:0;
	border:var(--spinner-border-width) solid var(--line);
	border-top-color:var(--ink);
	border-radius:50%;
	animation:var(--delete-animation)}
@keyframes report-delete-spin {to {transform:rotate(360deg)}}
.report-setting {display:flex;align-items:center;flex-wrap:wrap;gap:0.6rem}
.sentinel-card dt:has(+ .report-setting [data-setting="exact"]),
.sentinel-card .report-setting:has([data-setting="exact"]) {padding-top:0.5rem}
@media (max-width:37.5rem) {
	.sentinel-card .report-setting:has([data-setting="exact"]) {padding-top:0}
}
.report-setting-result,.report-grace-help {font-size:var(--font-size-caption);max-width:36rem}
.report-setting-result:empty {display:none}
.report-grace-input {width:7rem;max-width:100%}

/* Click-to-edit text settings (Sentinel Target, Mask, Ignored extensions, Extensions). */
.report-setting-text {text-align:left}
.report-setting-text:disabled {cursor:default;opacity:var(--disabled-control-opacity)}
.report-setting-edit {display:flex;align-items:stretch;gap:.4rem;flex:1;min-width:12rem;flex-wrap:wrap}
.report-setting-edit input {flex:1;min-width:8rem}
.report-setting-edit input:focus-visible,.report-grace-input:focus-visible {outline:none}
.report-setting-edit button:disabled {cursor:default;opacity:var(--disabled-control-opacity)}

/* Task editing controls shared by the report pages. */
.report-task-editor {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:0.4rem;
	margin:0.5rem 0;
}
.report-task-editor[hidden],.report-task-history[hidden] {display:none}
.report-task-editor select {min-width:12rem;max-width:100%;flex:1}
.report-hotkey-dialog.task-overlay-dialog {width:min(52rem,94vw)}
.task-overlay-dialog .report-hotkey-buttons {margin-top:.5rem}

/* Gradient KeyBind branding, shared by the Options page. The main title toggles it. */
.keybind-brand { color: var(--brand-text); display: inline-block; position: relative; cursor: pointer; }
/* Flex titles trim the boundary space after a branded word, so the word
   carries an equal space itself. Inline flow keeps its real space. */
.sentinel-report h1 > .keybind-brand { margin-right: .25em; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .keybind-brand {
    background-image: var(--brand-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
.keybind-brand::after {
  content: attr(data-highlight-tip);
  position: absolute;
  top: calc(100% + .4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  padding: .5rem .7rem;
  border: var(--border-width) solid var(--tooltip-border);
  border-radius: var(--tooltip-radius);
  background: var(--tooltip-background);
  color: var(--tooltip-text);
  font: var(--tooltip-font);
  letter-spacing: normal;
  text-shadow: none;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}
.keybind-brand-toggle > .keybind-brand::after {left:0;transform:none}
body:not(.keybind-brand-off) .keybind-brand:hover::after {
  visibility: visible;
  transition: var(--tooltip-transition);
}
.keybind-brand-toggle { cursor: default; position: relative; }
.keybind-brand-off .keybind-brand {
  background: none;
  color: inherit;
  display: inline;
}
@media print, (forced-colors: active) {
  .keybind-brand { background: none; color: inherit; }
}
@media print { .keybind-brand::after { display: none; } }
.report-task-mode {background:transparent;border-color:transparent;color:var(--muted);font-weight:var(--font-weight-normal);padding:.25rem 0}
.report-task-mode:hover {background:transparent;border-color:transparent;color:var(--accent);filter:none}
.report-task-history-button {
	position:absolute;
	right:0.35rem;
	top:50%;
	transform:translateY(-50%);
	background:transparent;
	border-color:transparent;
	color:var(--muted);
	font-size:var(--history-button-font-size);
	padding:0 .25rem}
.report-task-history-button:hover {background:transparent;border-color:transparent;color:var(--accent);filter:none}
.report-task-input-wrap {display:flex;flex:1;min-width:0;position:relative}
.report-task-input-wrap .server-task-input {width:100%}
.report-task-input-wrap.has-history .server-task-input {padding-right:2.75rem}
.report-task-history {
	position:absolute;
	z-index:10;
	top:100%;
	right:0;
	max-width:min(45rem,90vw);
	max-height:18rem;
	overflow:auto;
	background:var(--history-background);
	color:var(--ink);
	border:var(--border-width) solid var(--line);
	box-shadow:var(--history-shadow);
}
.report-task-history button {
	display:block;
	width:100%;
	text-align:left;
	white-space:nowrap}
/* Shared modal dialog, used by the HotKey editor, the task overlay and the define sample viewer. */
.report-hotkey-backdrop,.report-hotkey-dialog::backdrop {background:var(--dialog-backdrop)}
.report-hotkey-backdrop {position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50}
.report-hotkey-backdrop[hidden] {display:none}
.report-hotkey-backdrop.upper {align-items:flex-start;padding-top:25vh}
.report-hotkey-backdrop.upper .report-hotkey-dialog {max-height:70vh;overflow:auto}
.report-hotkey-backdrop.upper .task-overlay-dialog {overflow:visible}
.report-hotkey-dialog {background:var(--dialog-background);color:var(--ink);border:var(--border-width) solid var(--line);border-radius:var(--dialog-radius);padding:1rem 1.25rem;width:min(26rem,92vw);box-sizing:border-box;box-shadow:var(--dialog-shadow)}
.report-hotkey-dialog h2 {margin:0 0 .5rem;font-size:var(--font-size-dialog-title)}
.report-hotkey-mods {display:flex;gap:.75rem;flex-wrap:wrap;margin:.5rem 0}
.report-hotkey-activator {width:100%;box-sizing:border-box}
.report-hotkey-error {color:var(--error-text);min-height:1.2em;margin:.5rem 0}
.report-hotkey-buttons {display:flex;gap:.5rem;justify-content:flex-end}
@media print {.report-hotkey-backdrop,.report-hotkey-dialog {display:none}}

/* Options scale controls retain their 100% size as the page scale changes.
 * Inverse zoom cancels root rem scaling for this widget, including its offset.
 */
#options-page-scale {zoom:calc(100% / var(--page-scale));position:fixed;left:.5rem;bottom:.5rem;z-index:var(--page-scale-layer);display:flex;align-items:center;gap:.375rem}
#options-page-scale .page-scale-toggle {width:var(--page-scale-toggle-size);height:var(--page-scale-toggle-size);min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font-size:var(--page-scale-toggle-size);line-height:1;cursor:pointer}
#options-page-scale .page-scale-toggle span {opacity:0;pointer-events:none}
#options-page-scale .page-scale-toggle:hover span,#options-page-scale .page-scale-toggle:focus-visible span {opacity:var(--drag-and-resize-opacity)}
#options-page-scale .page-scale-panel {display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:var(--border-width) solid var(--line);border-radius:var(--page-scale-pill-radius);background:var(--button-background);box-shadow:var(--history-shadow);opacity:var(--page-scale-panel-opacity)}
#options-page-scale .page-scale-panel:hover,#options-page-scale .page-scale-panel:focus-within {opacity:1}
#options-page-scale .page-scale-panel[hidden],#options-page-scale .page-scale-result[hidden] {display:none}
#options-page-scale .page-scale-panel button {font-size:var(--font-size-normal);border-radius:var(--page-scale-pill-radius);white-space:nowrap}
#options-page-scale .page-scale-result {position:absolute;bottom:calc(100% + .5rem);left:0;width:max-content;max-width:calc(100vw - 1rem);padding:.5rem .75rem;border:var(--border-width) solid var(--line);border-radius:var(--control-radius);background:var(--button-background);color:var(--error-text);font-size:var(--font-size-caption)}
@media print {#options-page-scale {display:none}}