/* ============================================
   Windows 95 WordPress Theme Layout
   Ties the Win95 UI components into WP.
   ============================================ */

/* --- Global --- */
html {
	height: 100%;
}

body.win95-desktop {
	margin: 0;
	padding: 0;
	background-color: var(--win95-desktop);
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	cursor: default;
	overflow: hidden;
}

a {
	color: var(--win95-title-active);
}

a:visited {
	color: #800080;
}

/* Override visited purple in UI chrome — keep it black/white */
.start-menu-link,
.start-menu-link:visited,
.win95-dropdown a,
.win95-dropdown a:visited,
.win95-menu-bar a,
.win95-menu-bar a:visited,
.win95-menu-bar button,
.post-item__title a,
.post-item__title a:visited,
.post-navigation a,
.post-navigation a:visited,
.post-meta a,
.post-meta a:visited {
	color: var(--win95-text);
}

.start-menu-link:hover,
.win95-dropdown a:hover,
.win95-menu-bar a:hover,
.win95-menu-bar button:hover {
	color: var(--win95-text-highlight);
}

.post-item__title a:hover,
.post-navigation a:hover {
	color: var(--win95-title-active);
}

.desktop-icon,
.desktop-icon:visited,
.desktop-icon:link {
	color: #ffffff;
}

img {
	max-width: 100%;
	height: auto;
}

/* --- Desktop Area --- */
.desktop {
	flex: 1;
	position: relative;
	overflow: hidden;
	padding: 8px;
}

/* --- Desktop Icons Grid --- */
.desktop-icons-grid {
	position: absolute;
	top: 8px;
	left: 8px;
	bottom: 8px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px;
	z-index: 1;
	pointer-events: none;
}

.desktop-icons-grid .desktop-icon {
	pointer-events: auto;
}

/* --- Desktop Icons --- */
.desktop-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 72px;
	padding: 4px;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	position: relative;
	z-index: 1;
}

.desktop-icon:hover {
	color: #ffffff;
}

.desktop-icon:focus,
.desktop-icon.is-selected {
	border: 1px dotted #ffffff;
	background: rgba(0, 0, 128, 0.4);
	outline: none;
}

.desktop-icon.is-selected .desktop-icon__label,
.desktop-icon:focus .desktop-icon__label {
	background: #000080;
	color: #ffffff;
}

.desktop-icon__image {
	width: 32px;
	height: 32px;
	margin-bottom: 4px;
	image-rendering: pixelated;
}

.desktop-icon__label {
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	line-height: 1.2;
	word-wrap: break-word;
	max-width: 72px;
}

/* --- Main Content Window --- */
.main-window {
	position: absolute;
	top: 16px;
	left: 192px;
	width: calc(100% - 208px);
	height: calc(100% - 32px);
	max-width: 900px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 320px;
	min-height: 200px;
}

.main-window .win95-window-body {
	flex: 1;
	overflow-y: auto;
	background: var(--win95-bg-white);
	padding: 16px;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-darkest);
}

/* --- Address Bar --- */
.win95-address-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px;
	margin-bottom: 2px;
	background: var(--win95-bg);
}

.win95-address-bar__label {
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	white-space: nowrap;
}

.win95-address-bar__input {
	flex: 1;
}

/* --- Toolbar --- */
.win95-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 2px 4px;
	margin-bottom: 2px;
}

.win95-toolbar__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2px 4px;
	font-family: var(--win95-font);
	font-size: 10px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--win95-text);
}

.win95-toolbar__btn:hover {
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-dark),
		inset 1px 1px 0 0 var(--win95-bg-white);
}

.win95-toolbar__btn:active {
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark);
}

.win95-toolbar__separator {
	width: 2px;
	height: 22px;
	margin: 0 2px;
	background: var(--win95-bg-dark);
	border-right: 1px solid var(--win95-bg-white);
}

/* --- Post list (index) --- */
.post-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-item {
	padding: 8px 0;
	border-bottom: 1px solid var(--win95-bg);
}

.post-item:last-child {
	border-bottom: none;
}

.post-item__title {
	margin: 0 0 4px;
	font-family: var(--win95-font);
	font-size: 14px;
	font-weight: bold;
}

.post-item__title a {
	color: var(--win95-text);
	text-decoration: none;
}

.post-item__title a:hover {
	color: var(--win95-title-active);
	text-decoration: underline;
}

.post-item__meta {
	font-size: 10px;
	color: var(--win95-text-disabled);
	margin-bottom: 4px;
}

.post-item__excerpt {
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	line-height: 1.5;
	color: var(--win95-text);
}

.post-item__thumbnail {
	float: left;
	margin: 0 8px 4px 0;
	border: 1px solid var(--win95-bg-dark);
}

.post-item__thumbnail img {
	display: block;
	width: 80px;
	height: 60px;
	object-fit: cover;
}

/* --- Single Post / Page --- */
.single-content {
	font-family: var(--win95-font);
	font-size: 13px;
	line-height: 1.6;
	color: var(--win95-text);
}

.single-content h1 { font-size: 20px; margin: 16px 0 8px; }
.single-content h2 { font-size: 17px; margin: 14px 0 6px; }
.single-content h3 { font-size: 14px; margin: 12px 0 6px; }
.single-content h4 { font-size: 13px; margin: 10px 0 4px; }

.single-content p {
	margin: 0 0 12px;
}

.single-content blockquote {
	margin: 12px 0;
	padding: 8px 12px;
	background: #ffffe1;
	border-left: 3px solid var(--win95-title-active);
	font-style: italic;
}

.single-content code {
	font-family: var(--win95-font-mono);
	font-size: 12px;
	background: var(--win95-bg);
	padding: 1px 4px;
}

.single-content pre {
	background: var(--win95-bg-darkest);
	color: #00ff00;
	font-family: var(--win95-font-mono);
	font-size: 12px;
	padding: 12px;
	overflow-x: auto;
	margin: 12px 0;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark);
}

.single-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}

.single-content ul, .single-content ol {
	margin: 0 0 12px 24px;
}

.single-content li {
	margin-bottom: 4px;
}

.single-content img {
	border: 1px solid var(--win95-bg-dark);
}

.single-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0;
}

.single-content th,
.single-content td {
	border: 1px solid var(--win95-bg-dark);
	padding: 4px 8px;
	text-align: left;
	font-size: var(--win95-font-size);
}

.single-content th {
	background: var(--win95-bg);
	font-weight: bold;
}

/* --- Post Meta Bar --- */
.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 10px;
	color: var(--win95-text-disabled);
	padding: 4px 0 8px;
	border-bottom: 1px solid var(--win95-bg);
	margin-bottom: 12px;
}

.post-meta a {
	color: var(--win95-text-disabled);
}

.post-meta a:hover {
	color: var(--win95-title-active);
}

/* --- Post Navigation --- */
.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding-top: 12px;
	margin-top: 12px;
	border-top: 1px solid var(--win95-bg);
}

.post-navigation a {
	font-size: var(--win95-font-size);
}

/* --- Pagination --- */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	padding: 12px 0;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 23px;
	height: 23px;
	padding: 0 6px;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	text-decoration: none;
	color: var(--win95-text);
	background: var(--win95-bg);
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-darkest),
		inset 1px 1px 0 0 var(--win95-bg-white),
		inset -2px -2px 0 0 var(--win95-bg-dark),
		inset 2px 2px 0 0 var(--win95-bg-light);
}

.pagination .page-numbers.current {
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-darkest),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-dark);
	background: var(--win95-highlight);
	color: var(--win95-text-highlight);
}

/* --- Comments --- */
.comments-window {
	margin-top: 16px;
	/* Override window chrome — this is embedded inside the main window body */
	box-shadow: none !important;
	padding: 0;
	background: transparent;
}

.comments-window .win95-title-bar {
	background: linear-gradient(90deg, var(--win95-title-active), #1084d0);
}

.comments-window .win95-window-body {
	background: var(--win95-bg-white);
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-darkest);
	padding: 8px;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-item {
	padding: 8px;
	margin-bottom: 4px;
	background: var(--win95-bg);
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark);
}

.comment-item .children {
	list-style: none;
	padding-left: 16px;
	margin-top: 8px;
}

.comment-author {
	font-weight: bold;
	font-size: var(--win95-font-size);
}

.comment-date {
	font-size: 10px;
	color: var(--win95-text-disabled);
}

.comment-body p {
	margin: 4px 0;
	font-size: var(--win95-font-size);
	line-height: 1.5;
}

.comment-form label {
	display: block;
	font-size: var(--win95-font-size);
	margin-bottom: 2px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	width: 100%;
	max-width: 300px;
	margin-bottom: 8px;
}

.comment-form textarea {
	width: 100%;
	min-height: 100px;
	margin-bottom: 8px;
}

/* --- Taskbar --- */
.taskbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	height: 28px;
	background: var(--win95-bg);
	padding: 2px;
	flex-shrink: 0;
	box-shadow:
		inset 0 1px 0 0 var(--win95-bg-white);
	z-index: 9999;
}

/* --- Start Button --- */
.start-button {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 6px;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	font-weight: bold;
	background: var(--win95-bg);
	border: none;
	cursor: pointer;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-darkest),
		inset 1px 1px 0 0 var(--win95-bg-white),
		inset -2px -2px 0 0 var(--win95-bg-dark),
		inset 2px 2px 0 0 var(--win95-bg-light);
	color: var(--win95-text);
	flex-shrink: 0;
}

.start-button:active,
.start-button.is-active {
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-darkest),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-dark);
	padding: 1px 5px 0 7px;
}

.start-button__logo {
	width: 16px;
	height: 16px;
	image-rendering: pixelated;
}

/* --- Start Menu --- */
.start-menu {
	display: none;
	position: fixed;
	bottom: 28px;
	left: 0;
	width: 180px;
	background: var(--win95-bg);
	z-index: 10000;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-darkest),
		inset 1px 1px 0 0 var(--win95-bg-white),
		inset -2px -2px 0 0 var(--win95-bg-dark),
		inset 2px 2px 0 0 var(--win95-bg-light);
	padding: 3px;
}

.start-menu.is-open {
	display: flex;
}

.start-menu__sidebar {
	width: 22px;
	background: var(--win95-bg-dark);
	display: flex;
	align-items: flex-end;
	padding: 4px 2px;
	flex-shrink: 0;
}

.start-menu__sidebar-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--win95-bg-light);
	font-family: var(--win95-font);
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 2px;
}

.start-menu__sidebar-text span {
	color: var(--win95-bg-white);
}

.start-menu__content {
	flex: 1;
	padding: 2px 0;
}

.start-menu__items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.start-menu-item {
	list-style: none;
}

.start-menu-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	text-decoration: none;
	color: var(--win95-text);
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
}

.start-menu-link:hover {
	background: var(--win95-highlight);
	color: var(--win95-text-highlight);
}

.start-menu-icon {
	width: 16px;
	height: 16px;
	background: var(--win95-bg-dark);
	flex-shrink: 0;
}

/* SVG icons in start menu and elsewhere */
.win95-icon {
	flex-shrink: 0;
	image-rendering: pixelated;
}

.start-menu-link .win95-icon {
	width: 16px;
	height: 16px;
}

.start-menu-link:hover .win95-icon {
	/* Slight brightness on hover for visibility against blue */
	filter: brightness(1.2);
}

.start-menu-arrow {
	margin-left: auto;
	font-size: 8px;
	line-height: 1;
}

.start-menu-link:hover .start-menu-arrow {
	color: var(--win95-text-highlight);
}

.start-menu__separator {
	height: 1px;
	margin: 2px 4px;
	background: var(--win95-bg-dark);
	border-bottom: 1px solid var(--win95-bg-white);
}

/* --- Quick Launch --- */
.quick-launch {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 4px;
	margin-left: 2px;
	border-left: 1px solid var(--win95-bg-dark);
	border-right: 1px solid var(--win95-bg-white);
	height: 22px;
}

.quick-launch a {
	display: flex;
	width: 16px;
	height: 16px;
}

/* --- Taskbar Window Buttons --- */
.taskbar-windows {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1;
	padding: 0 4px;
	overflow: hidden;
}

.taskbar-window-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	min-width: 120px;
	max-width: 160px;
	padding: 0 6px;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	background: var(--win95-bg);
	border: none;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--win95-text);
	/* Raised bevel (default / minimized state) */
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-darkest),
		inset 1px 1px 0 0 var(--win95-bg-white),
		inset -2px -2px 0 0 var(--win95-bg-dark),
		inset 2px 2px 0 0 var(--win95-bg-light);
}

/* Active window: sunken bevel + bold text */
.taskbar-window-btn.is-active {
	font-weight: bold;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-darkest),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-dark);
	/* Subtle checkerboard background like real Win95 active taskbar buttons */
	background: repeating-conic-gradient(var(--win95-bg) 0% 25%, var(--win95-bg-white) 0% 50%) 50% / 2px 2px;
}

/* --- System Tray --- */
.system-tray {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	height: 22px;
	margin-left: auto;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark);
}

/* --- Search Form --- */
.search-form {
	display: flex;
	gap: 4px;
}

.search-form .search-field {
	flex: 1;
}

/* --- Sidebar as a Window --- */
.sidebar-window {
	margin-top: 8px;
}

.sidebar-window .widget {
	margin-bottom: 8px;
}

.sidebar-window .widget-title {
	font-size: var(--win95-font-size);
	font-weight: bold;
	margin: 0 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--win95-bg-dark);
}

.sidebar-window ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-window li {
	padding: 2px 0;
	font-size: var(--win95-font-size);
}

/* --- 404 / BSOD --- */
.bsod {
	position: fixed;
	inset: 0;
	background: #000080;
	color: #ffffff;
	font-family: 'Courier New', Courier, monospace;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 48px;
}

.bsod__content {
	max-width: 700px;
	text-align: center;
}

.bsod__title {
	background: #a8a8a8;
	color: #000080;
	padding: 2px 12px;
	display: inline-block;
	font-size: 16px;
	margin-bottom: 24px;
}

.bsod__text {
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	white-space: pre-line;
}

.bsod__prompt {
	margin-top: 24px;
	font-size: 16px;
}

.bsod__cursor {
	animation: blink 1s step-end infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

/* --- Social Window --- */
.social-window {
	position: absolute;
	z-index: 50;
	display: flex;
	flex-direction: column;
	min-width: 0;
	width: auto;
}

.social-window .win95-title-bar {
	cursor: default;
}

.social-window__body {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px !important;
	background: var(--win95-bg) !important;
	box-shadow: none !important;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: var(--win95-text);
	text-decoration: none;
	background: var(--win95-bg);
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-darkest),
		inset 1px 1px 0 0 var(--win95-bg-white),
		inset -2px -2px 0 0 var(--win95-bg-dark),
		inset 2px 2px 0 0 var(--win95-bg-light);
	transition: none;
}

.social-link:visited,
.social-link:hover {
	color: var(--social-link-hover-color, var(--win95-text));
}

.social-link:focus {
	color: var(--social-link-hover-color, var(--win95-text));
}

.social-link:active {
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-darkest),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-dark);
}

.social-link__icon {
	width: 16px;
	height: 16px;
}

/* --- PDF Viewer (Acrobat Reader style) --- */
.pdf-viewer-window .win95-title-bar {
	background: var(--win95-title-active, #000080);
}

.pdf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px 4px;
	background: var(--win95-bg);
	border-bottom: 1px solid var(--win95-bg-dark);
	box-shadow:
		inset 0 -1px 0 0 var(--win95-bg-darkest),
		inset 0 1px 0 0 var(--win95-bg-white);
	gap: 2px;
	flex-shrink: 0;
}

.pdf-toolbar__group {
	display: flex;
	align-items: center;
	gap: 1px;
}

.pdf-toolbar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 12px;
	padding: 0;
	background: var(--win95-bg);
	border: none;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-darkest),
		inset 1px 1px 0 0 var(--win95-bg-white),
		inset -2px -2px 0 0 var(--win95-bg-dark),
		inset 2px 2px 0 0 var(--win95-bg-light);
	cursor: pointer;
	color: var(--win95-text);
	line-height: 1;
}

.pdf-toolbar__btn:hover:not(:disabled) {
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-darkest),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-dark);
}

.pdf-toolbar__btn:disabled {
	color: var(--win95-bg-dark);
	cursor: default;
}

.pdf-toolbar__separator {
	width: 1px;
	height: 18px;
	margin: 0 3px;
	background: var(--win95-bg-dark);
	box-shadow: 1px 0 0 var(--win95-bg-white);
}

.pdf-toolbar__page-display,
.pdf-toolbar__zoom-display {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 18px;
	padding: 0 4px;
	font-size: 11px;
	background: #fff;
	border: 1px solid var(--win95-bg-dark);
	box-shadow: inset 1px 1px 0 var(--win95-bg-darkest);
}

.pdf-viewer-body {
	background: #808080;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}

.pdf-viewer-body embed,
.pdf-viewer-body iframe,
.pdf-viewer-body object {
	flex: 1;
	min-height: 0;
	width: 100%;
	border: none;
}

/* --- Bookshelf / Reading Tracker --- */
.bookshelf-page {
	padding: 0;
}

.bookshelf-tabs {
	margin-bottom: 0;
}

.bookshelf-tabs .win95-tab {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: var(--win95-text);
}

.bookshelf-tabs .win95-tab:visited {
	color: var(--win95-text);
}

.bookshelf-empty {
	padding: 24px;
	text-align: center;
	color: var(--win95-text-disabled);
}

/* Year folders */
.bookshelf-year {
	border-bottom: 1px solid var(--win95-bg);
}

.bookshelf-year__header {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 6px 8px;
	background: var(--win95-bg);
	border: none;
	cursor: pointer;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	font-weight: bold;
	color: var(--win95-text);
	text-align: left;
}

.bookshelf-year__header:hover {
	background: var(--win95-bg-light);
}

.bookshelf-year__count {
	font-weight: normal;
	color: var(--win95-text-disabled);
}

.bookshelf-year__arrow {
	margin-left: auto;
	font-size: 8px;
	transition: transform 0.15s;
}

.bookshelf-year.is-collapsed .bookshelf-year__arrow {
	transform: rotate(-90deg);
}

.bookshelf-year.is-collapsed .bookshelf-year__content {
	display: none;
}

.bookshelf-year__content {
	padding: 0;
	background: var(--win95-bg-white);
}

/* Shelves container with subtle starfield */
.bookshelf-shelves {
	padding: 0;
	position: relative;
	background:
		radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,150,150,0.8), transparent),
		radial-gradient(1.5px 1.5px at 25% 58%, rgba(150,150,255,0.75), transparent),
		radial-gradient(1.5px 1.5px at 42% 6%, rgba(150,255,180,0.8), transparent),
		radial-gradient(1.5px 1.5px at 56% 42%, rgba(255,200,140,0.7), transparent),
		radial-gradient(1.5px 1.5px at 70% 75%, rgba(180,150,255,0.75), transparent),
		radial-gradient(1.5px 1.5px at 83% 20%, rgba(140,255,255,0.7), transparent),
		radial-gradient(1.5px 1.5px at 92% 52%, rgba(255,150,200,0.7), transparent),
		radial-gradient(1.5px 1.5px at 7% 80%, rgba(200,255,150,0.75), transparent),
		radial-gradient(1.5px 1.5px at 35% 33%, rgba(150,200,255,0.7), transparent),
		radial-gradient(1.5px 1.5px at 63% 90%, rgba(255,180,150,0.7), transparent),
		radial-gradient(2px 2px at 18% 43%, rgba(200,150,255,0.85), transparent),
		radial-gradient(2px 2px at 50% 70%, rgba(255,170,170,0.8), transparent),
		radial-gradient(2px 2px at 76% 12%, rgba(150,255,200,0.85), transparent),
		radial-gradient(2px 2px at 4% 48%, rgba(255,255,150,0.7), transparent),
		radial-gradient(2px 2px at 88% 65%, rgba(150,220,255,0.75), transparent),
		radial-gradient(1.5px 1.5px at 47% 25%, rgba(255,150,255,0.7), transparent),
		radial-gradient(1.5px 1.5px at 30% 85%, rgba(150,255,150,0.7), transparent),
		#0a0a10;
}

/* The shelf (one per row of books) */
.bookshelf-shelf {
	position: relative;
	overflow: visible;
}

.bookshelf-shelf__books {
	display: flex;
	align-items: flex-end;
	gap: 0px;
	padding: 16px 20px 4px 12px;
	/* Background set dynamically by JS (rainbow stars + dark wall + shelf surface) */
	box-shadow:
		inset 0 2px 6px rgba(0, 0, 0, 0.5);
	min-height: 60px;
	position: relative;
	z-index: 2;
}

.bookshelf-shelf__plank {
	height: 14px;
	background: var(--win95-bg, #c0c0c0);
	/* Classic Win95 raised bevel: light top-left, dark bottom-right */
	box-shadow:
		0 3px 6px rgba(0, 0, 0, 0.4),
		0 1px 2px rgba(0, 0, 0, 0.3),
		inset 0 2px 0 #fff,
		inset 0 -2px 0 #808080,
		inset 2px 0 0 #dfdfdf,
		inset -2px 0 0 #808080;
	position: relative;
	z-index: 1;
}

/* Shelf plank side face (right edge depth) */
.bookshelf-shelf__plank::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 7px;
	height: 14px;
	background: #a0a0a0;
	box-shadow:
		inset -1px 0 0 #808080,
		inset 1px 0 0 #d0d0d0;
}

/* Individual book on shelf, sized by CSS custom properties */
.bookshelf-book {
	display: block;
	width: var(--book-thickness, 32px);
	height: var(--book-height, 100px);
	cursor: pointer;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	position: relative;
	transition: transform 0.15s ease;
	flex-shrink: 0;
	/* Reset button defaults that offset the spine */
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
	line-height: 1;
	font: inherit;
	/* Each book is its own stacking context so internal
	   z-indexes don't bleed into neighboring books */
	isolation: isolate;
}

/* Hover: just lift, don't change z-index */
.bookshelf-book:hover {
	transform: translateY(-6px);
}

.bookshelf-book:active {
	transform: translateY(-3px);
}

/* Top face: pages seen from above with visible line texture */
.bookshelf-book::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	width: var(--book-thickness, 32px);
	height: 12px;
	background: #ddd8c8;
	background-image: repeating-linear-gradient(
		90deg,
		transparent 0px,
		transparent 2px,
		rgba(0, 0, 0, 0.08) 2px,
		rgba(0, 0, 0, 0.08) 3px
	);
	transform: skewX(-45deg);
	transform-origin: bottom left;
	box-shadow:
		inset 0 -2px 0 rgba(0, 0, 0, 0.2),
		inset 0 2px 0 rgba(255, 255, 255, 0.5);
	pointer-events: none;
	z-index: 0;
}

/* Left side face: front cover extending behind the spine */
.bookshelf-book__side-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 100%;
	background: var(--spine-color, #000080);
	filter: brightness(0.8);
	transform: skewY(-45deg);
	transform-origin: top left;
	pointer-events: none;
	z-index: -1;
}

.bookshelf-book__spine {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--spine-color, #000080);
	/* Strong pixel bevels + gold inset frame */
	box-shadow:
		/* Gold inset frame */
		inset 0 0 0 1px rgba(210, 180, 90, 0.35),
		/* Chunky light/dark bevels outside the frame */
		inset -2px 0 0 rgba(0, 0, 0, 0.45),
		inset 2px 0 0 rgba(255, 255, 255, 0.25),
		inset 0 2px 0 rgba(255, 255, 255, 0.25),
		inset 0 -2px 0 rgba(0, 0, 0, 0.45);
	overflow: hidden;
	z-index: 1;
}

/* Right side face: back cover, darker spine color */
.bookshelf-book__side-right {
	position: absolute;
	top: 0;
	right: -12px;
	width: 12px;
	height: 100%;
	background: var(--spine-color, #000080);
	filter: brightness(0.6);
	transform: skewY(-45deg);
	transform-origin: top left;
	box-shadow:
		inset -2px 0 0 rgba(0, 0, 0, 0.3),
		inset 0 2px 0 rgba(255, 255, 255, 0.08);
	pointer-events: none;
	z-index: 1;
}

/* Gold decorative bands on spine: top + bottom */
.bookshelf-book__spine::before {
	content: '';
	position: absolute;
	top: 5px;
	left: 3px;
	right: 3px;
	height: 2px;
	background: rgba(210, 180, 90, 0.45);
	box-shadow:
		/* Second band below */
		0 3px 0 rgba(210, 180, 90, 0.2),
		/* Bottom bands (mirrored) - using large offset to reach bottom */
		0 calc(var(--book-height, 100px) - 17px) 0 rgba(210, 180, 90, 0.2),
		0 calc(var(--book-height, 100px) - 14px) 0 rgba(210, 180, 90, 0.45);
	z-index: 3;
}

/* Pixel fire dither: gold/warm embers rising from base */
.bookshelf-book__spine::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		/* Pixel embers: checkerboard dither in vivid complementary color */
		repeating-conic-gradient(
			rgba(var(--spine-comp-rgb, 255,255,127), 0.55) 0% 25%,
			transparent 0% 50%
		) 0 0 / var(--dither-size, 8px) var(--dither-size, 8px),
		/* Hot solid core at the base */
		linear-gradient(
			to top,
			rgba(var(--spine-comp-rgb, 255,255,127), 0.5) 0%,
			rgba(var(--spine-comp-rgb, 255,255,127), 0.25) 18%,
			transparent 30%
		);
	-webkit-mask-image: linear-gradient(
		to top,
		black 0%,
		black 20%,
		rgba(0,0,0,0.5) calc(var(--dither-extent, 52%) * 0.65),
		rgba(0,0,0,0.2) calc(var(--dither-extent, 52%) * 0.85),
		transparent var(--dither-extent, 52%)
	);
	mask-image: linear-gradient(
		to top,
		black 0%,
		black 20%,
		rgba(0,0,0,0.5) calc(var(--dither-extent, 52%) * 0.65),
		rgba(0,0,0,0.2) calc(var(--dither-extent, 52%) * 0.85),
		transparent var(--dither-extent, 52%)
	);
	pointer-events: none;
	z-index: 2;
}

.bookshelf-book__spine-title {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--win95-font), var(--spine-font, Georgia, serif);
	font-size: var(--spine-font-size, 10px);
	font-weight: var(--spine-font-weight, normal);
	text-transform: var(--spine-text-transform, none);
	letter-spacing: 0.5px;
	color: var(--spine-text-color, #ffffff);
	text-shadow:
		1px 1px 0 rgba(var(--spine-text-shadow-rgb, 0,0,0), 0.6),
		-1px -1px 0 rgba(var(--spine-text-shadow-rgb, 0,0,0), 0.2);
	white-space: nowrap;
	overflow: hidden;
	max-height: calc(var(--book-height, 100px) - 30px);
	image-rendering: pixelated;
	padding: 0;
	line-height: 1.15;
	position: relative;
	z-index: 3;
}

/* --- Cork Bulletin Board (Papers) --- */
.corkboard {
	padding: 0;
}

.corkboard__surface {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px;
	min-height: 80px;
	/* Cork texture: warm tan with noise-like stipple */
	background:
		repeating-conic-gradient(
			rgba(160, 120, 60, 0.08) 0% 25%,
			transparent 0% 50%
		) 0 0 / 4px 4px,
		repeating-conic-gradient(
			rgba(120, 80, 40, 0.06) 0% 25%,
			transparent 0% 50%
		) 2px 2px / 6px 6px,
		linear-gradient(
			135deg,
			#c4a265 0%,
			#d4b478 25%,
			#c9a86c 50%,
			#d0af72 75%,
			#c4a265 100%
		);
	/* Win95 sunken inset, like a recessed panel */
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark),
		inset -2px -2px 0 0 var(--win95-bg-light),
		inset 2px 2px 0 0 var(--win95-bg-darkest);
}

/* Individual index card */
.corkboard__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 160px;
	min-height: 100px;
	padding: 0;
	border: none;
	cursor: pointer;
	position: relative;
	transform: rotate(var(--card-rotation, 0deg));
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
	/* Card body: white with ruled lines */
	background:
		/* Red header line */
		linear-gradient(
			to bottom,
			transparent 19px,
			#cc4444 19px,
			#cc4444 21px,
			transparent 21px
		),
		/* Blue ruled lines */
		repeating-linear-gradient(
			to bottom,
			transparent 21px,
			transparent 33px,
			#b8cce8 33px,
			#b8cce8 34px
		),
		#fffff8;
	box-shadow:
		1px 2px 4px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(0, 0, 0, 0.08);
}

.corkboard__card:hover {
	transform: rotate(var(--card-rotation, 0deg)) translateY(-3px);
	box-shadow:
		2px 4px 8px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(0, 0, 0, 0.1);
}

.corkboard__card:active {
	transform: rotate(var(--card-rotation, 0deg)) translateY(-1px);
}

/* Thumbtack */
.corkboard__pin {
	position: absolute;
	top: -4px;
	left: var(--pin-offset, 50%);
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		color-mix(in srgb, var(--pin-color) 60%, white) 0%,
		var(--pin-color) 50%,
		color-mix(in srgb, var(--pin-color) 70%, black) 100%
	);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.5),
		inset 0 -1px 1px rgba(0, 0, 0, 0.3);
	z-index: 2;
	/* Tack point shadow on the card */
}

.corkboard__pin::after {
	content: '';
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.2);
}

/* Card text content sits below the red line */
.corkboard__card-title {
	display: block;
	padding: 24px 8px 2px;
	font-weight: bold;
	font-size: 10px;
	line-height: 12px;
	color: #000;
	/* Clamp to roughly 3 ruled lines */
	max-height: 60px;
	overflow: hidden;
}

.corkboard__card-authors {
	display: block;
	padding: 2px 8px;
	font-size: 9px;
	line-height: 12px;
	color: #444;
	max-height: 24px;
	overflow: hidden;
}

.corkboard__card-venue {
	display: block;
	padding: 2px 8px 6px;
	font-size: 9px;
	font-style: italic;
	line-height: 12px;
	color: #666;
	max-height: 14px;
	overflow: hidden;
}

/* Properties dialog */
.bookshelf-properties {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 380px;
	max-width: 90vw;
	z-index: 10001;
	max-height: 80vh;
}

.bookshelf-properties__body {
	background: var(--win95-bg) !important;
	box-shadow: none !important;
	padding: 12px !important;
}

.bookshelf-properties__layout {
	display: flex;
	gap: 12px;
	margin-bottom: 8px;
}

.bookshelf-properties__cover {
	flex-shrink: 0;
	width: 100px;
}

.bookshelf-properties__cover img {
	width: 100%;
	height: auto;
	border: 1px solid var(--win95-bg-dark);
	image-rendering: auto;
}

.bookshelf-properties__info {
	flex: 1;
	min-width: 0;
}

.bookshelf-properties__row {
	margin-bottom: 6px;
	font-family: var(--win95-font);
	font-size: var(--win95-font-size);
	line-height: 1.4;
}

.bookshelf-properties__label {
	color: var(--win95-text-disabled);
	margin-right: 4px;
}

.bookshelf-properties__value {
	color: var(--win95-text);
	word-break: break-word;
}

#props-rating {
	color: #c0a000;
	letter-spacing: 1px;
}

#props-notes-row .bookshelf-properties__value {
	display: block;
	margin-top: 2px;
	padding: 4px;
	background: var(--win95-bg-white);
	max-height: 80px;
	overflow-y: auto;
	box-shadow:
		inset -1px -1px 0 0 var(--win95-bg-white),
		inset 1px 1px 0 0 var(--win95-bg-dark);
}

.bookshelf-properties__buttons {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--win95-bg-dark);
}

/* --- Responsive --- */
@media (max-width: 768px) {
	.main-window {
		position: absolute !important;
		top: 4px !important;
		left: 4px !important;
		width: calc(100% - 8px) !important;
		height: calc(100% - 8px) !important;
		max-width: 100%;
	}

	.desktop {
		padding: 4px;
		overflow-y: auto;
	}

	.desktop-icons-grid {
		display: none;
	}

	.start-menu {
		width: 100%;
		left: 0;
		right: 0;
	}

	.taskbar-window-btn {
		min-width: 80px;
	}
}

@media (max-width: 480px) {
	.taskbar-windows {
		display: none;
	}

	.quick-launch {
		display: none;
	}
}