/*
 * classic-mac.css — Classic Macintosh System 6/7 chrome, layered OVER 98.css.
 * Overrides windows / title bars / buttons / group boxes / desktop to the Mac
 * look; leaves 98.css's form controls (sliders, checkboxes, selects) in place.
 * Loaded after 98.css so these rules win.
 */

:root {
	--mac-bg: #565656;
	--mac-border: #0a0a0a;
	--mac-highlight: #808080;
	--mac-shadow: #2c2c2c;
	--mac-text: #f0f0f0;
	--mac-desktop: #2b2b30;
	--mac-desktop-dot: #454548;
	--mac-stripe-light: #8c8c8c;
	--mac-stripe-dark: #383838;
	--mac-menubar-bg: #3a3a3a;
	--mac-menu-hover: #2f5fa8;
	--mac-pressed: #4a4a4a;
}

/* Desktop — System 6 50% dither (2px checkerboard). */
body {
	background-color: var(--mac-desktop);
	background-image:
		linear-gradient(
			45deg,
			var(--mac-desktop-dot) 25%,
			transparent 25%,
			transparent 75%,
			var(--mac-desktop-dot) 75%
		),
		linear-gradient(
			45deg,
			var(--mac-desktop-dot) 25%,
			transparent 25%,
			transparent 75%,
			var(--mac-desktop-dot) 75%
		);
	background-size: 2px 2px;
	background-position: 0 0, 1px 1px;
	color: var(--mac-text);
}

/* Windows — system.css: paper fill, thin ink outline, hard 2px shadow, clipped. */
.window {
	background: var(--mac-bg);
	border: 1px solid var(--mac-border);
	border-radius: 0;
	box-shadow: 2px 2px 0 var(--mac-border);
	overflow: hidden;
	padding: 0;
}

.window-body {
	margin: 8px;
}

/*
 * Title bar — system.css style: a stack of thin ink lines (clipped to the
 * content box so they inset top/bottom), a centred "paper" title notch over
 * them, and a separator line beneath (the bottom border).
 */
.title-bar {
	background: linear-gradient(var(--mac-text) 50%, transparent 0);
	background-clip: content-box;
	background-size: 100% 3px;
	min-height: 20px;
	height: 20px;
	margin: 0;
	padding: 3px 4px;
	border: none;
	border-bottom: 1px solid var(--mac-border);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.title-bar.inactive {
	background: none;
}

.title-bar-text,
.title-text {
	background: var(--mac-bg);
	color: var(--mac-text);
	padding: 0 10px;
	margin: 0;
	font-weight: bold;
	font-size: 12px;
	line-height: 1.1;
	letter-spacing: 0;
}

/* Window controls become Mac close/collapse boxes on the LEFT. */
.title-bar-controls {
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	gap: 9px;
}

.title-bar-controls button {
	width: 11px;
	height: 11px;
	min-width: 11px;
	min-height: 11px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--mac-border);
	border-radius: 0;
	background: var(--mac-highlight);
	box-shadow: none;
	background-image: none;
}

.title-bar-controls button:active {
	background: var(--mac-text);
	box-shadow: none;
}

/* Collapse (minimize) box gets the two-line glyph. */
.title-bar-controls button[aria-label='Minimize'] {
	position: relative;
	background-image: none;
}
.title-bar-controls button[aria-label='Minimize']::before,
.title-bar-controls button[aria-label='Minimize']::after {
	content: '';
	position: absolute;
	left: 1px;
	right: 1px;
	height: 1px;
	background: var(--mac-border);
}
.title-bar-controls button[aria-label='Minimize']::before {
	top: 2px;
}
.title-bar-controls button[aria-label='Minimize']::after {
	bottom: 2px;
}

/*
 * Buttons — sharp 1-bit System 6 push-button: a plain square rectangle with a
 * 2px ink outline, no rounding, no bevel. Inverts (fill flips to ink) when
 * pressed. Both colours are theme variables, so it recolours for every theme.
 */
button,
input[type='submit'],
input[type='reset'] {
	background: var(--mac-bg);
	color: var(--mac-text);
	border: 2px solid var(--mac-text);
	border-radius: 0;
	min-height: 0;
	padding: 2px 14px;
	font-weight: bold;
	text-shadow: none;
	box-shadow: none;
}

/* System 6 push-buttons invert (fill flips to ink) when pressed. */
button:active,
input[type='submit']:active,
input[type='reset']:active {
	background: var(--mac-text);
	color: var(--mac-bg);
	text-shadow: none;
	box-shadow: none;
}

/* Default button — a bold square double-ring frame. */
button.default {
	padding: 2px 14px;
	box-shadow:
		0 0 0 1px var(--mac-bg),
		0 0 0 3px var(--mac-text);
}

/* Menu chrome opts out of the button frame — flat hover-invert plaques. */
.menu-title,
.dropdown button {
	border: 1px solid transparent;
	box-shadow: none;
}

/* Group boxes — fieldset with a title plaque straddling the top border. */
fieldset {
	border: 1px solid var(--mac-shadow);
	border-image: none;
	border-radius: 0;
	padding: 10px;
	margin: 6px 0 0;
}

legend {
	background: var(--mac-bg);
	padding: 0 4px;
	font-size: 12px;
}

/* Floating-window control boxes (MacWindow) — close + collapse, mockup-style. */
.win-box {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	min-width: 13px;
	min-height: 13px;
	padding: 0;
	margin: 0;
	border: 2px solid var(--mac-border);
	border-radius: 0;
	background: var(--mac-bg);
	box-shadow: none;
	cursor: pointer;
}

.win-box.close-box {
	left: 5px;
}

.win-box.collapse-box {
	left: 22px;
}

.win-box:active {
	background: var(--mac-text);
}

.win-box.collapse-box::before,
.win-box.collapse-box::after {
	content: '';
	position: absolute;
	left: 1px;
	right: 1px;
	height: 1px;
	background: var(--mac-border);
}
.win-box.collapse-box::before {
	top: 2px;
}
.win-box.collapse-box::after {
	bottom: 2px;
}

/*
 * Scrollbars — system.css dithered track + plain ink-bordered thumb, themed.
 * The 50% checkerboard is built from two offset 45deg gradients in ink/paper.
 */
.window ::-webkit-scrollbar {
	width: 16px;
	height: 16px;
	background: var(--mac-bg);
}

.window ::-webkit-scrollbar-track {
	background-color: var(--mac-bg);
	background-image:
		linear-gradient(
			45deg,
			var(--mac-text) 25%,
			transparent 25%,
			transparent 75%,
			var(--mac-text) 75%
		),
		linear-gradient(
			45deg,
			var(--mac-text) 25%,
			transparent 25%,
			transparent 75%,
			var(--mac-text) 75%
		);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	border-left: 1px solid var(--mac-border);
}

.window ::-webkit-scrollbar-thumb {
	background: var(--mac-bg);
	border: 1px solid var(--mac-border);
}

/* Status fields — simple Mac inset cells. */
.status-bar {
	gap: 2px;
}

.status-bar-field {
	border: 1px solid var(--mac-shadow);
	box-shadow: none;
	background: var(--mac-bg);
	padding: 2px 6px;
}

/*
 * Flat 1-bit form controls — strip 98.css's silver 3-D bevels (which read as
 * later-Mac / Windows). Everything becomes a sharp ink outline on paper.
 */
input[type='text'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='url'],
select,
textarea {
	background: var(--mac-bg);
	color: var(--mac-text);
	border: 1px solid var(--mac-text);
	border-radius: 0;
	box-shadow: none;
}

select {
	background-image: none;
	padding-right: 10px;
}

/* Sunken / grouped / framed panels — flat ink outline, no groove bevel. */
.sunken-panel,
.field-border,
.field-border-disabled,
ul.tree-view,
pre,
.progress-indicator {
	border: 1px solid var(--mac-text);
	border-image: none;
	box-shadow: none;
	border-radius: 0;
	background: var(--mac-bg);
}

.progress-indicator > .progress-indicator-bar {
	background: var(--mac-text);
}

/* Checkbox — flat square ink box (the ink check glyph from 98.css stays). */
input[type='checkbox'] + label::before {
	background: var(--mac-bg) !important;
	box-shadow: none !important;
	border: 1px solid var(--mac-text);
	border-radius: 0;
}

/* Range slider — flat ink track + square ink thumb, no bevel. */
input[type='range']::-webkit-slider-runnable-track {
	background: var(--mac-text);
	border: none;
	box-shadow: none;
	height: 2px;
}

input[type='range']::-webkit-slider-thumb {
	background: var(--mac-text);
	border: none;
	border-radius: 0;
	box-shadow: none;
	width: 8px;
	height: 16px;
	transform: translateY(-7px);
}

input[type='range']::-moz-range-track {
	background: var(--mac-text);
	border: none;
	box-shadow: none;
	height: 2px;
}

input[type='range']::-moz-range-thumb {
	background: var(--mac-text);
	border: none;
	border-radius: 0;
	box-shadow: none;
	width: 8px;
	height: 16px;
}