/**
 * 98.css
 * Copyright (c) 2020 Jordan Scales <thatjdanisso.cool>
 * https://github.com/jdan/98.css/blob/main/LICENSE
 */

:root {
	/* Color */
	--text-color: #222222;
	--surface: #c0c0c0;
	--button-highlight: #ffffff;
	--button-face: #dfdfdf;
	--button-shadow: #808080;
	--window-frame: #0a0a0a;
	--dialog-gray: #808080;
	--dialog-gray-light: #b5b5b5;
	--link-blue: #0000ff;

	/* Spacing */
	--element-spacing: 8px;
	--grouped-button-spacing: 4px;
	--grouped-element-spacing: 6px;
	--radio-width: 18px;
	--checkbox-width: 18px;
	--radio-label-spacing: 8px;

	/* The dot inside a selected radio button, and the checkmark inside a checkbox */
	--radio-dot-width: 6px;
	--checkmark-width: 11px;

	/* Padding that enlarges the click target above/below and past the end of the text */
	--checkable-padding-block: 7px;
	--checkable-padding-inline-end: 10px;

	/* Borders */
	--border-width: 1px;
	--border-raised-outer:
		inset -1px -1px var(--window-frame), inset 1px 1px var(--button-highlight);
	--border-raised-inner:
		inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-face);
	--border-sunken-outer:
		inset -1px -1px var(--button-highlight), inset 1px 1px var(--window-frame);
	--border-sunken-inner:
		inset -2px -2px var(--button-face), inset 2px 2px var(--button-shadow);
	--default-button-border-raised-outer:
		inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
	--default-button-border-raised-inner:
		inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow),
		inset 3px 3px var(--button-face);
	--default-button-border-sunken-outer:
		inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
	--default-button-border-sunken-inner:
		inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow),
		inset -3px -3px var(--button-face);

	/* Window borders flip button-face and button-highlight */
	--border-window-outer:
		inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face);
	--border-window-inner:
		inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight);

	/* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
	--border-field:
		inset -1px -1px var(--button-highlight), inset 1px 1px var(--button-shadow),
		inset -2px -2px var(--button-face), inset 2px 2px var(--window-frame);
	--border-status-field:
		inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);

	/* Tabs */
	--border-tab:
		inset -1px 0 var(--window-frame), inset 1px 1px var(--button-face),
		inset -2px 0 var(--button-shadow), inset 2px 2px var(--button-highlight);
}

body {
	font-family: Arial;
	font-size: 16px;
	color: var(--text-color);
}

button,
.link-button,
label,
input,
legend,
textarea,
select,
option,
table,
ul.tree-view,
.window,
.title-bar,
li[role="tab"] {
	font-family: Arial;
	-webkit-font-smoothing: none;
	font-size: 15px;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 2rem;
}

h4 {
	font-size: 1.5rem;
}

u {
	text-decoration: none;
	border-bottom: 0.5px solid #222222;
}

button,
.link-button,
input[type="submit"],
input[type="reset"] {
	box-sizing: border-box;
	border: none;
	color: transparent;
	text-shadow: 0 0 var(--text-color);
	background: var(--surface);
	box-shadow: var(--border-raised-outer), var(--border-raised-inner);
	border-radius: 0;

	min-width: 75px;
	min-height: 23px;
	padding: 6px 16px;

	&:is(a) {
		display: inline-block;
		text-decoration: none;
		text-align: center;
		cursor: default;
	}

	&.default {
		box-shadow:
			var(--default-button-border-raised-outer),
			var(--default-button-border-raised-inner);
	}

	&:not(:disabled):active {
		box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
		text-shadow: 1px 1px var(--text-color);
	}

	&.default:not(:disabled):active {
		box-shadow:
			var(--default-button-border-sunken-outer),
			var(--default-button-border-sunken-inner);
	}

	@media (not(hover)) {
		&:not(:disabled):hover {
			box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);
		}
	}

	&:focus {
		outline: 1px dotted #000000;
		outline-offset: -4px;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	&:disabled {
		text-shadow: 1px 1px 0 var(--button-highlight);
	}
}

.vertical-bar {
	width: 4px;
	height: 20px;
	background: #c0c0c0;
	box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

:disabled,
input[readonly],
label:has(input:disabled),
label:has(input[readonly]) {
	color: var(--button-shadow);
}

label:has(input:disabled) {
	text-shadow: 1px 1px 0 var(--button-highlight);
}

.window {
	box-shadow: var(--border-window-outer), var(--border-window-inner);
	background: var(--button-highlight);
	padding: 3px;
}

.title-bar {
	background: linear-gradient(
		90deg,
		var(--primary_color_dark),
		var(--primary_color_light)
	);
	padding: 6px 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	color: white;
}

.title-bar.inactive {
	background: linear-gradient(
		90deg,
		var(--dialog-gray),
		var(--dialog-gray-light)
	);
}

.status-bar {
	margin: 0px 1px;
	display: flex;
	gap: 1px;
}

.status-bar-field {
	box-shadow: var(--border-status-field);
	flex-grow: 1;
	padding: 2px 6px;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

fieldset {
	border-image: url("./98-icon/groupbox-border.svg") 2;
	padding: calc(2 * var(--border-width) + var(--element-spacing));
	padding-block-start: var(--element-spacing);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--grouped-element-spacing);
}

.field-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--grouped-element-spacing);
}

.field-row-stacked {
	display: flex;
	flex-direction: column;
	gap: var(--grouped-element-spacing);
}

/* :where keeps the specificity at just `label`, so a single class on the
   label (e.g. .field-row) can override the stacked layout */
label:has(:where(input:not([type="radio"], [type="checkbox"]), select, textarea)) {
	display: flex;
	flex-direction: column;
	/*gap: var(--grouped-element-spacing);*/
}

input[type="radio"],
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
	background: 0;
	position: fixed;
	opacity: 0;
	border: none;
	/* The invisible input can be stretched by context styles (e.g. width: 100%);
	   it must never intercept clicks aimed at whatever it happens to overlap */
	pointer-events: none;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
	position: relative;
	line-height: 1;
	/* Keep the text vertically centered on the control even when context styles
	   stretch the label taller than one line */
	display: inline-flex;
	align-items: center;
	/* An explicit width opts the label out of grid/flex stretching, so the
	   focus outline hugs the control and text instead of tracing a stretched
	   label box.  Sizing, not self-alignment — where the shrunk box lands
	   stays the parent's decision */
	width: fit-content;
	/* Enlarge the click target above/below the control and past the text */
	padding-block: var(--checkable-padding-block);
	padding-right: var(--checkable-padding-inline-end);

	/* The control (::before) and its checked indicator (::after) are absolutely
	   positioned at the left and vertically centered on the label's text, so the
	   click target can extend above and below them. */
	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

label:has(input[type="radio"]:focus),
label:has(input[type="checkbox"]:focus) {
	outline: 1px dotted #000000;
}

label:has(input[type="radio"]) {
	padding-left: calc(var(--radio-width) + var(--radio-label-spacing));

	/* The control is a vector circle with the same sunken field border as the checkbox */
	&::before {
		width: var(--radio-width);
		height: var(--radio-width);
		border-radius: 50%;
		background: var(--button-highlight);
		box-shadow: var(--border-field);
	}

	&:has(input:active)::before {
		background: var(--surface);
	}

	&:has(input:checked)::after {
		left: calc((var(--radio-width) - var(--radio-dot-width)) / 2);
		width: var(--radio-dot-width);
		height: var(--radio-dot-width);
		border-radius: 50%;
		background: var(--text-color);
	}

	&:has(input[disabled])::before {
		background: var(--surface);
	}

	&:has(input[disabled]:checked)::after {
		background: var(--button-shadow);
	}
}

label:has(input[type="checkbox"]) {
	padding-left: calc(var(--checkbox-width) + var(--radio-label-spacing));

	&::before {
		width: var(--checkbox-width);
		height: var(--checkbox-width);
		background: var(--button-highlight);
		box-shadow: var(--border-field);
	}

	&:has(input:active)::before {
		background: var(--surface);
	}

	&:has(input:checked)::after {
		left: calc((var(--checkbox-width) - var(--checkmark-width)) / 2);
		width: var(--checkmark-width);
		height: var(--checkmark-width);
		background: var(--text-color);
		/* Vector checkmark drawn as a filled tick, scales to any size */
		clip-path: polygon(14% 44%, 0% 65%, 40% 100%, 100% 22%, 82% 4%, 38% 66%);
	}

	&:has(input[disabled])::before {
		background: var(--surface);
	}

	&:has(input[disabled]:checked)::after {
		background: var(--button-shadow);
	}
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
	padding: 3px 6px;
	border: none;
	box-shadow: var(--border-field);
	background-color: var(--button-highlight);
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
}

/* clears the ‘X’ from Internet Explorer */
input[type="search"]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}
input[type="search"]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}
/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"] {
	/* For some reason descenders are getting cut off without this */
	line-height: 2;
}

input[type="email"]:disabled,
input[type="url"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="email"]:read-only,
input[type="url"]:read-only,
input[type="tel"]:read-only,
input[type="password"]:read-only,
input[type="text"]:read-only,
input[type="number"]:read-only,
input[type="search"]:read-only,
textarea:disabled {
	background-color: var(--surface);
}

input[data-value-needs-to-be-saved="false"],
textarea[data-value-needs-to-be-saved="false"],
select[data-value-needs-to-be-saved="false"] {
	background-color: var(--background);
}
label:has(input[data-value-needs-to-be-saved="false"])::before {
	background: var(--background);
}

select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	padding-right: 38px;
	background-image: url("./98-icon/button-down.svg");
	background-position: center right 2px;
	background-size: auto calc(100% - 4px);
	background-repeat: no-repeat;
	border-radius: 0;

	&:focus-visible {
		outline: none;
	}

	&:focus {
		color: var(--button-highlight);
		background-color: var(--primary_color_dark);

		& option {
			color: #000;
			background-color: #fff;
		}
	}

	&:active {
		background-image: url("./98-icon/button-down-active.svg");
	}
}

a {
	color: var(--link-blue);
}

a:focus {
	outline: 1px dotted var(--link-blue);
}

ul.tree-view {
	display: block;
	background: var(--button-highlight);
	box-shadow: var(--border-field);
	padding: 6px;
	margin: 0;

	& li {
		list-style-type: none;
	}

	& a {
		text-decoration: none;
		color: #000;

		&:focus {
			background-color: var(--primary_color_dark);
			color: var(--button-highlight);
		}
	}

	& ul,
	& li {
		margin-top: 3px;
	}

	& ul {
		margin-left: 16px;
		padding-left: 16px;
		/* Goes down too far */
		border-left: 1px dotted #808080;

		& > li {
			position: relative;
		}

		& > li::before {
			content: "";
			display: block;
			position: absolute;
			left: -16px;
			top: 11px;
			width: 12px;
			border-bottom: 1px dotted #808080;
		}

		/* Cover the bottom of the left dotted border */
		& > li:last-child::after {
			content: "";
			display: block;
			position: absolute;
			left: -20px;
			top: 12px;
			bottom: 0px;
			width: 8px;
			background: var(--button-highlight);
		}

		& details > summary:before {
			margin-left: -22px;
			position: relative;
			z-index: 1;
		}
	}

	& details {
		margin-top: 0;

		&[open] summary {
			margin-bottom: 0;
		}

		& > summary:before {
			content: "";
			display: block;
			float: left;
			width: 11px;
			height: 11px;
			border: 1px solid #808080;
			background-color: #fff;
			/* A perfectly centered plus sign, drawn as two crisp bars
			   (horizontal + vertical) rather than a font glyph */
			background-image:
				linear-gradient(var(--text-color), var(--text-color)),
				linear-gradient(var(--text-color), var(--text-color));
			background-position: center;
			background-repeat: no-repeat;
			background-size:
				7px 1px,
				1px 7px;
			margin-top: 5px;
			margin-right: 5px;
		}

		&[open] > summary:before {
			/* Hide the vertical bar, leaving a centered minus sign */
			background-size:
				7px 1px,
				0 0;
		}

		& > summary::marker,
		& > summary::-webkit-details-marker {
			content: "";
		}
	}
}

pre {
	display: block;
	background: var(--button-highlight);
	box-shadow: var(--border-field);
	padding: 12px 8px;
	margin: 0;
}

code,
code * {
	font-family: monospace;
}

summary:focus {
	outline: 1px dotted #000000;
}

::-webkit-scrollbar {
	width: 16px;
}
::-webkit-scrollbar:horizontal {
	height: 17px;
}

::-webkit-scrollbar-corner {
	background: var(--button-face);
}

::-webkit-scrollbar-track {
	background-image: url("./98-icon/scrollbar-background.svg");
}

::-webkit-scrollbar-thumb {
	background-color: var(--button-face);
	box-shadow: var(--border-raised-outer), var(--border-raised-inner);
}

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment {
	display: block;
}

::-webkit-scrollbar-button:vertical:start {
	height: 17px;
	background-image: url("./98-icon/button-up.svg");
}
::-webkit-scrollbar-button:vertical:end {
	height: 17px;
	background-image: url("./98-icon/button-down.svg");
}
::-webkit-scrollbar-button:horizontal:start {
	width: 16px;
	background-image: url("./98-icon/button-left.svg");
}
::-webkit-scrollbar-button:horizontal:end {
	width: 16px;
	background-image: url("./98-icon/button-right.svg");
}

.window[role="tabpanel"] {
	position: relative;
	z-index: 2;
}

menu[role="tablist"] {
	position: relative;
	margin: 0 0 -2px 0;
	text-indent: 0;
	list-style-type: none;
	display: flex;
	padding-left: 3px;

	& > li {
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		box-shadow: var(--border-tab);
		z-index: 1;
		background-color: var(--surface);

		&[aria-selected="true"] {
			padding-bottom: 2px;
			margin-top: -2px;
			background-color: var(--surface);
			position: relative;
			z-index: 8;
			margin-left: -3px;
		}

		& > a {
			display: block;
			color: #222;
			margin: 6px;
			text-decoration: none;

			&:focus {
				outline: 1px dotted #222;
			}
		}

		&[aria-selected="true"] > a:focus {
			outline: none;
		}
	}

	&.multirows > li {
		flex-grow: 1;
		text-align: center;
	}
}
.sunken-panel {
	box-sizing: border-box;
	border: 2px groove transparent;
	border-image: url("./98-icon/sunken-panel-border.svg") 2;
	overflow: auto;
	background-color: #fff;
}

/* Something to consider in the future maybe */
/* .sunken-panel > table {
	width: 100%;

	/* An empty trailing header cell acts as a filler: it absorbs the slack so
	   the real columns keep their content width, and it looks like any other
	   header but with no right border (its right bevel is dropped).
	   & > thead > tr > th:empty {
		width: 100%;
		box-shadow:
			inset 0 -1px var(--window-frame),
			inset 1px 1px var(--button-highlight),
			inset 0 -2px var(--button-shadow),
			inset 2px 2px var(--button-face);
	}
} */

table {
	border-collapse: collapse;
	position: relative;
	text-align: left;
	white-space: nowrap;
	background-color: #fff;

	& > thead > tr > * {
		position: sticky;
		top: 0;
		height: 17px;
		box-shadow: var(--border-raised-outer), var(--border-raised-inner);
		background: var(--surface);
		box-sizing: border-box;
		font-weight: normal;
		padding: 0 var(--grouped-element-spacing);
	}

	&.interactive > tbody > tr {
		cursor: pointer;
	}

	& > tbody > tr.highlighted {
		color: #fff;
		background-color: var(--primary_color_dark);
	}

	& > tbody > tr > * {
		padding: 0 var(--grouped-element-spacing);
		height: 14px;
	}
}

.progress-indicator {
	background: var(--surface);

	height: 32px;
	position: relative;
	box-shadow: var(--border-sunken-inner);
	padding: 4px 4px;
	border: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;

	& > .progress-indicator-bar {
		height: 100%;
		display: block;
		background-color: var(--primary_color_dark);
	}

	&.segmented > .progress-indicator-bar {
		width: 100%;
		background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
		background-image: linear-gradient(
			90deg,
			var(--primary_color_dark) 0 16px,
			transparent 0 2px
		);
		background-repeat: repeat;
		background-size: 18px 100%;
	}
}

.field-border {
	background: var(--button-highlight);
	box-shadow: var(--border-field);
	padding: 2px;
}

.field-border-disabled {
	background: var(--surface);
	box-shadow: var(--border-field);
	padding: 2px;
}

.status-field-border {
	background: var(--surface);
	box-shadow: var(--border-status-field);
	padding: 1px;
}